fix animations

Author: thejackshelton

apps/website/src/routes/docs/styled/accordion/examples/hero.tsx

@@ -4,20 +4,20 @@ import { Accordion } from '~/components/ui';
 export default component$(() => {
   return (
     <Accordion.Root class="w-full">
-      <Accordion.Item id="item-1">
+      <Accordion.Item>
         <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
         <Accordion.Content>
           Yes. It adheres to the WAI-ARIA design pattern.
         </Accordion.Content>
       </Accordion.Item>
-      <Accordion.Item id="item-2">
+      <Accordion.Item>
         <Accordion.Trigger>Is it styled?</Accordion.Trigger>
         <Accordion.Content>
           Yes. It comes with default styles that matches the other components&apos;
           aesthetic.
         </Accordion.Content>
       </Accordion.Item>
-      <Accordion.Item id="item-3">
+      <Accordion.Item>
         <Accordion.Trigger>Is it animated?</Accordion.Trigger>
         <Accordion.Content>
           Yes. It's animated by default, but you can disable it if you prefer.

apps/website/tailwind.config.cjs

@@ -98,8 +98,18 @@ module.exports = {
       },
       // EXTEND-END
       animation: {
-        'accordion-down': '0.2s ease-out 0s 1 normal forwards accordion-open',
-        'accordion-up': '0.2s ease-out 0s 1 normal forwards accordion-close',
+        'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards',
+        'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards',
+      },
+      keyframes: {
+        'collapsible-down': {
+          from: { height: '0' },
+          to: { height: 'var(--qwikui-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--qwikui-collapsible-content-height)' },
+          to: { height: '0' },
+        },
       },
       transitionTimingFunction: {
         step: 'cubic-bezier(0.6, 0.6, 0, 1)',

packages/kit-styled/src/components/accordion/accordion.tsx

@@ -29,7 +29,7 @@ const Trigger = component$<
       <HeadlessAccordion.Trigger
         {...props}
         class={cn(
-          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-open]>svg]:rotate-180',
           props.class,
         )}
       >
@@ -45,7 +45,7 @@ const Content = component$<PropsOf<typeof HeadlessAccordion.Content>>((props) =>
     <HeadlessAccordion.Content
       {...props}
       class={cn(
-        'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+        'overflow-hidden text-sm data-[closed]:animate-accordion-up data-[open]:animate-accordion-down',
         props.class,
       )}
     >