update changelog

Author: thejackshelton

.changeset/two-glasses-fix.md

@@ -2,6 +2,44 @@
 '@qwik-ui/headless': minor
 ---
 
+### Accordion
+
+The Accordion has been refactored from the ground up to be more accessible and performant.
+
+The entire Qwik UI library now does not execute code until interaction.
+
+#### Accordion.Root
+
+- The `behavior="multi"` prop has been replaced with `multiple` on the `<Accordion.Root />` component.
+
+- The default behavior is a single item open at a time.
+
+- The `animated` prop has been deprecated. Animation entry and exit are now automatically handled by the component.
+
+- `onSelectIndexChange$` has been deprecated in favor of `onChange$`.
+
+- `onFocusIndexChange$` has been deprecated
+
+- Reactively control the accordion with the `bind:value` prop.
+
+- Control the initial value with the `value` prop.
+
+- Disable the entire accordion by using the `disabled` prop.
+
+#### Accordion.Item
+
+- Pass distinct values to the `<Accordion.Item />` component with the `value` prop.
+
+- Disable Accordion items by setting the `disabled` prop to true on the `<Accordion.Item />` component.
+
+For more information, please refer to the updated Accordion documentation.
+
+### Collapsible
+
+- The `onOpenChange$` prop has been deprecated. Use the `onChange$` prop instead.
+
+For more information, please refer to the updated Collapsible documentation.
+
 ### Deprecated Components
 
 In 0.4, we have deprecated the following headless components:

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

@@ -199,20 +199,15 @@ You have custom control over how to render items in the Accordion, allowing for
 <APITable
   propDescriptors={[
     {
-      name: 'multiple',
-      type: 'boolean',
-      description: 'Allows multiple items to be expanded.',
+      name: 'value',
+      type: 'string',
+      description: 'The initial selectedd item of the accordion.',
     },
     {
       name: 'bind:value',
       type: 'Signal',
       description: 'Reactive signal that controls the selected item.',
     },
-    {
-      name: 'initialIndex',
-      type: 'number',
-      description: 'Index of the initially expanded item.',
-    },
     {
       name: 'onChange$',
       type: 'function',
@@ -228,6 +223,11 @@ You have custom control over how to render items in the Accordion, allowing for
       type: 'boolean',
       description: 'Allows items to be collapsible.',
     },
+    {
+      name: 'multiple',
+      type: 'boolean',
+      description: 'Allows multiple items to be expanded.',
+    },
   ]}
 />
 

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

@@ -104,6 +104,7 @@ export const HAccordionItem = component$(
         id={itemId}
         disabled={context.disabled || props.disabled}
         collapsible={context.collapsible}
+        accordionItem
         {...props}
       >
         <Slot />

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

@@ -41,7 +41,7 @@ export const HCollapsibleContent = component$((props: CollapsibleContentProps) =
 
     /* check if there's a transition or animation */
     const { animationDuration, transitionDuration } = getComputedStyle(
-      context.contentRef.value!,
+      context.contentRef.value,
     );
 
     // don't animate if initially open

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

@@ -24,6 +24,7 @@ export type CollapsibleProps = PropsOf<'div'> & {
   disabled?: boolean;
   triggerRef?: Signal<HTMLButtonElement>;
   collapsible?: boolean;
+  accordionItem?: boolean;
 };
 
 export const HCollapsible = component$((props: CollapsibleProps) => {
@@ -36,6 +37,7 @@ export const HCollapsible = component$((props: CollapsibleProps) => {
     triggerRef: givenTriggerRef,
     collapsible = true,
     open,
+    accordionItem,
     ...rest
   } = props;
 
@@ -78,6 +80,14 @@ export const HCollapsible = component$((props: CollapsibleProps) => {
         '--qwikui-collapsible-content-height',
         `${contentHeightSig.value}px`,
       );
+
+      // support previous accordion animations
+      if (accordionItem) {
+        contentRef.value.style.setProperty(
+          '--qwikui-accordion-content-height',
+          `${contentHeightSig.value}px`,
+        );
+      }
     }
   });