add back animated prop

Author: thejackshelton

.changeset/two-glasses-fix.md

@@ -14,8 +14,6 @@ The entire Qwik UI library now does not execute code until interaction.
 
 - The default behavior is a single item open at a time.
 
-- The `animated` prop has been deprecated in favor of `heightAnimation`.
-
 - `onSelectIndexChange$` has been deprecated and removed in favor of `onChange$`.
 
 - `onFocusIndexChange$` has been deprecated and removed. Let us know if you have a use case for this.

apps/website/src/routes/docs/headless/accordion/examples/animation.tsx

@@ -6,7 +6,7 @@ export default component$(() => {
   const items = [1, 2, 3];
 
   return (
-    <Accordion.Root heightAnimation>
+    <Accordion.Root animated>
       {items.map((item) => (
         <Accordion.Item class="collapsible" key={item}>
           <Accordion.Header>

apps/website/src/routes/docs/headless/accordion/index.mdx

@@ -135,7 +135,7 @@ The component itself can also be disabled by setting the `disabled` prop to true
 
 ### Height Animation
 
-To animate the height of the content, set the `heightAnimation` prop to `true`.
+To animate the height of the content, set the `animated` prop to `true`.
 
 <Showcase name="animation" />
 

apps/website/src/routes/docs/headless/collapsible/examples/animation.tsx

@@ -8,7 +8,7 @@ export default component$(() => {
 
   return (
     <div>
-      <Collapsible.Root class="collapsible" bind:open={isOpen} heightAnimation>
+      <Collapsible.Root class="collapsible" bind:open={isOpen} animated>
         <Collapsible.Trigger class="collapsible-trigger">
           <span>Trigger</span>
           <LuChevronDown class="collapsible-transition" />

apps/website/src/routes/docs/headless/collapsible/index.mdx

@@ -118,7 +118,7 @@ To animate the height of the content, we can use a keyframe animation on the hei
 
 ### Height Animation
 
-To animate the height of the content, set the `heightAnimation` prop to `true`.
+To animate the height of the content, set the `animated` prop to `true`.
 
 <Showcase name="animation" />
 

packages/kit-headless/src/components/accordion/accordion-inline.tsx

@@ -33,11 +33,6 @@ export type AccordionRootProps = PropsOf<'div'> & {
   collapsible?: boolean;
 
   /** If true, the accordion is animated. */
-  heightAnimation?: boolean;
-
-  /**
-   * @deprecated Use the heightAnimation prop instead.
-   */
   animated?: boolean;
 };
 

packages/kit-headless/src/components/accordion/accordion-item.tsx

@@ -105,7 +105,7 @@ export const HAccordionItem = component$(
         disabled={context.disabled || props.disabled}
         collapsible={context.collapsible}
         accordionItem
-        heightAnimation={context.isAnimatedSig.value}
+        animated={context.isAnimatedSig.value}
         {...props}
       >
         <Slot />

packages/kit-headless/src/components/accordion/accordion-root.tsx

@@ -19,13 +19,12 @@ export const HAccordionRootImpl = component$((props: AccordionRootProps) => {
     disabled,
     collapsible = true,
     animated,
-    heightAnimation,
     ...rest
   } = props;
 
   const selectedIndexSig = useSignal<number>(initialIndex ?? -1);
   const triggerRefsArray = useSignal<Array<Signal>>([]);
-  const isAnimatedSig = useSignal<boolean>(animated === true || heightAnimation === true);
+  const isAnimatedSig = useSignal<boolean>(animated === true);
   const isMultipleSig = useSignal<boolean>(multiple || props.behavior === 'multi');
 
   const itemsMapSig = useComputed$(() => {

packages/kit-headless/src/components/collapsible/collapsible.tsx

@@ -26,7 +26,7 @@ export type CollapsibleProps = PropsOf<'div'> & {
   triggerRef?: Signal<HTMLButtonElement>;
   collapsible?: boolean;
   accordionItem?: boolean;
-  heightAnimation?: boolean;
+  animated?: boolean;
 };
 
 export const HCollapsible = component$((props: CollapsibleProps) => {
@@ -40,7 +40,7 @@ export const HCollapsible = component$((props: CollapsibleProps) => {
     collapsible = true,
     open,
     accordionItem,
-    heightAnimation,
+    animated,
     ...rest
   } = props;
 
@@ -50,7 +50,7 @@ export const HCollapsible = component$((props: CollapsibleProps) => {
   const defaultTriggerRef = useSignal<HTMLButtonElement>();
   const triggerRef = givenTriggerRef ?? defaultTriggerRef;
   const contentRef = useSignal<HTMLElement>();
-  const isAnimatedSig = useSignal<boolean>(heightAnimation === true);
+  const isAnimatedSig = useSignal<boolean>(animated === true);
 
   const contentHeightSig = useSignal<number | null>(null);