chore(accordion): upd examples

Author: pimenovoleg

apps/origin-ui/src/registry/default/components/accordions/accordion-01.ts

@@ -17,11 +17,11 @@ import {
     template: `
         <div class="space-y-4">
             <h2 class="text-xl font-bold">W/ chevron</h2>
-            <div class="w-full" [defaultValue]="'1'" oriAccordion>
+            <div class="w-full" defaultValue="3" type="single" collapsible oriAccordion>
                 @for (item of items; track item) {
                     <div class="py-2" [value]="item.id" oriAccordionItem>
                         <ori-accordion-trigger>{{ item.title }}</ori-accordion-trigger>
-                        <div oriAccordionContent>
+                        <div class="text-muted-foreground pb-2" oriAccordionContent>
                             {{ item.content }}
                         </div>
                     </div>

apps/origin-ui/src/registry/default/components/accordions/accordion-02.ts

@@ -16,12 +16,12 @@ import { OriAccordion, OriAccordionContent, OriAccordionItem } from '~/registry/
     template: `
         <div class="space-y-4">
             <h2 class="text-xl font-bold">W/ plus-minus</h2>
-            <div class="w-full" type="single" oriAccordion value="3">
+            <div class="w-full" type="single" oriAccordion collapsible defaultValue="3">
                 @for (item of items; track $index) {
                     <div class="py-2" [value]="item.id" oriAccordionItem>
                         <h3 class="group flex" rdxAccordionHeader>
                             <button
-                                class="focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 group-data-[state=open]:[&>*>svg]:rotate-180"
+                                class="focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-2 text-left text-sm text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>*>svg]:rotate-180 [&[data-state=open]>*>svg>path:last-child]:rotate-90 [&[data-state=open]>*>svg>path:last-child]:opacity-0"
                                 rdxAccordionTrigger
                                 type="button"
                             >

apps/origin-ui/src/registry/default/ui/accordion.ts

@@ -17,7 +17,10 @@ import { cn } from '~/registry/default/lib/utils';
             directive: RdxAccordionRootDirective,
             inputs: ['orientation', 'type', 'value', 'defaultValue', 'collapsible', 'dir', 'disabled']
         }
-    ]
+    ],
+    host: {
+        'data-slot': 'accordion'
+    }
 })
 export class OriAccordion {}
 
@@ -30,7 +33,8 @@ export class OriAccordion {}
         }
     ],
     host: {
-        '[class]': 'hostClasses()'
+        '[class]': 'hostClasses()',
+        'data-slot': 'accordion-item'
     }
 })
 export class OriAccordionItem {
@@ -45,7 +49,7 @@ export class OriAccordionItem {
     selector: '[oriAccordionTrigger], ori-accordion-trigger',
     imports: [RdxAccordionHeaderDirective, LucideAngularModule, RdxAccordionTriggerDirective],
     template: `
-        <h3 class="flex" rdxAccordionHeader>
+        <h3 class="group flex" rdxAccordionHeader>
             <button [class]="computedClass()" rdxAccordionTrigger>
                 <ng-content />
                 <lucide-icon
@@ -63,7 +67,7 @@ export class OriAccordionTrigger {
 
     readonly computedClass = computed(() => {
         return cn(
-            'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+            'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>*>svg]:rotate-180',
             this.class()
         );
     });
@@ -75,7 +79,8 @@ export class OriAccordionTrigger {
     hostDirectives: [RdxAccordionContentDirective],
     host: {
         '[class]':
-            '"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"'
+            '"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"',
+        'data-slot': 'accordion-content'
     },
     template: `
         <div [class]="computedClass()">

packages/components/accordion/src/accordion.ts

@@ -17,7 +17,10 @@ import { ChevronDown, LucideAngularModule } from 'lucide-angular';
             directive: RdxAccordionRootDirective,
             inputs: ['orientation', 'type', 'value', 'defaultValue', 'collapsible', 'dir', 'disabled']
         }
-    ]
+    ],
+    host: {
+        'data-slot': 'accordion'
+    }
 })
 export class OriAccordion {}
 
@@ -30,7 +33,8 @@ export class OriAccordion {}
         }
     ],
     host: {
-        '[class]': 'hostClasses()'
+        '[class]': 'hostClasses()',
+        'data-slot': 'accordion-item'
     }
 })
 export class OriAccordionItem {
@@ -45,7 +49,7 @@ export class OriAccordionItem {
     selector: '[oriAccordionTrigger], ori-accordion-trigger',
     imports: [RdxAccordionHeaderDirective, LucideAngularModule, RdxAccordionTriggerDirective],
     template: `
-        <h3 class="flex" rdxAccordionHeader>
+        <h3 class="group flex" rdxAccordionHeader>
             <button [class]="computedClass()" rdxAccordionTrigger>
                 <ng-content />
                 <lucide-icon
@@ -63,7 +67,7 @@ export class OriAccordionTrigger {
 
     readonly computedClass = computed(() => {
         return cn(
-            'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+            'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>*>svg]:rotate-180',
             this.class()
         );
     });
@@ -75,7 +79,8 @@ export class OriAccordionTrigger {
     hostDirectives: [RdxAccordionContentDirective],
     host: {
         '[class]':
-            '"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"'
+            '"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"',
+        'data-slot': 'accordion-content'
     },
     template: `
         <div [class]="computedClass()">