@fluentui/react-accordion 9.8.16 → 9.9.1

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @fluentui/react-accordion
 
-This log was last generated on Thu, 22 Jan 2026 17:01:45 GMT and should not be manually modified.
+This log was last generated on Wed, 25 Feb 2026 13:28:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.9.1)
+
+Wed, 25 Feb 2026 13:28:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.9.0..@fluentui/react-accordion_v9.9.1)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.17.10 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.15 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-motion to v9.12.0 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-tabster to v9.26.13 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+
+## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.9.0)
+
+Thu, 12 Feb 2026 10:46:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.8.16..@fluentui/react-accordion_v9.9.0)
+
+### Minor changes
+
+- feat: add base hooks for Accordion components ([PR #35682](https://github.com/microsoft/fluentui/pull/35682) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-aria to v9.17.9 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+
 ## [9.8.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.8.16)
 
-Thu, 22 Jan 2026 17:01:45 GMT 
+Thu, 22 Jan 2026 17:07:01 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.8.15..@fluentui/react-accordion_v9.8.16)
 
 ### Patches

package/dist/index.d.ts

@@ -246,6 +246,7 @@ export declare function useAccordionContextValues_unstable(state: AccordionState
 
 /**
  * Returns the props and state required to render the component
+ *
  * @param props - AccordionHeader properties
  * @param ref - reference to root HTMLElement of AccordionHeader
  */

package/lib/Accordion.js

@@ -1 +1 @@
-export { Accordion, accordionClassNames, renderAccordion_unstable, useAccordionContextValues_unstable, useAccordionStyles_unstable, useAccordion_unstable } from './components/Accordion/index';
+export { Accordion, accordionClassNames, renderAccordion_unstable, useAccordionContextValues_unstable, useAccordionStyles_unstable, useAccordion_unstable, useAccordionBase_unstable } from './components/Accordion/index';

package/lib/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Accordion.ts"],"sourcesContent":["export type {\n  AccordionContextValues,\n  AccordionIndex,\n  AccordionProps,\n  AccordionSlots,\n  AccordionState,\n  AccordionToggleData,\n  AccordionToggleEvent,\n  AccordionToggleEventHandler,\n} from './components/Accordion/index';\nexport {\n  Accordion,\n  accordionClassNames,\n  renderAccordion_unstable,\n  useAccordionContextValues_unstable,\n  useAccordionStyles_unstable,\n  useAccordion_unstable,\n} from './components/Accordion/index';\n"],"names":["Accordion","accordionClassNames","renderAccordion_unstable","useAccordionContextValues_unstable","useAccordionStyles_unstable","useAccordion_unstable"],"mappings":"AAUA,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,kCAAkC,EAClCC,2BAA2B,EAC3BC,qBAAqB,QAChB,+BAA+B"}
+{"version":3,"sources":["../src/Accordion.ts"],"sourcesContent":["export type {\n  AccordionContextValues,\n  AccordionIndex,\n  AccordionProps,\n  AccordionSlots,\n  AccordionState,\n  AccordionToggleData,\n  AccordionToggleEvent,\n  AccordionToggleEventHandler,\n  AccordionBaseState,\n  AccordionBaseProps,\n} from './components/Accordion/index';\nexport {\n  Accordion,\n  accordionClassNames,\n  renderAccordion_unstable,\n  useAccordionContextValues_unstable,\n  useAccordionStyles_unstable,\n  useAccordion_unstable,\n  useAccordionBase_unstable,\n} from './components/Accordion/index';\n"],"names":["Accordion","accordionClassNames","renderAccordion_unstable","useAccordionContextValues_unstable","useAccordionStyles_unstable","useAccordion_unstable","useAccordionBase_unstable"],"mappings":"AAYA,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,kCAAkC,EAClCC,2BAA2B,EAC3BC,qBAAqB,EACrBC,yBAAyB,QACpB,+BAA+B"}

package/lib/AccordionHeader.js

@@ -1 +1 @@
-export { AccordionHeader, accordionHeaderClassNames, renderAccordionHeader_unstable, useAccordionHeaderContextValues_unstable, useAccordionHeaderStyles_unstable, useAccordionHeader_unstable } from './components/AccordionHeader/index';
+export { AccordionHeader, accordionHeaderClassNames, renderAccordionHeader_unstable, useAccordionHeaderContextValues_unstable, useAccordionHeaderStyles_unstable, useAccordionHeader_unstable, useAccordionHeaderBase_unstable } from './components/AccordionHeader/index';

package/lib/AccordionHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/AccordionHeader.ts"],"sourcesContent":["export type {\n  AccordionHeaderContextValues,\n  AccordionHeaderExpandIconPosition,\n  AccordionHeaderProps,\n  AccordionHeaderSize,\n  AccordionHeaderSlots,\n  AccordionHeaderState,\n} from './components/AccordionHeader/index';\nexport {\n  AccordionHeader,\n  accordionHeaderClassNames,\n  renderAccordionHeader_unstable,\n  useAccordionHeaderContextValues_unstable,\n  useAccordionHeaderStyles_unstable,\n  useAccordionHeader_unstable,\n} from './components/AccordionHeader/index';\n"],"names":["AccordionHeader","accordionHeaderClassNames","renderAccordionHeader_unstable","useAccordionHeaderContextValues_unstable","useAccordionHeaderStyles_unstable","useAccordionHeader_unstable"],"mappings":"AAQA,SACEA,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,wCAAwC,EACxCC,iCAAiC,EACjCC,2BAA2B,QACtB,qCAAqC"}
+{"version":3,"sources":["../src/AccordionHeader.ts"],"sourcesContent":["export type {\n  AccordionHeaderContextValues,\n  AccordionHeaderExpandIconPosition,\n  AccordionHeaderProps,\n  AccordionHeaderSize,\n  AccordionHeaderSlots,\n  AccordionHeaderState,\n} from './components/AccordionHeader/index';\nexport {\n  AccordionHeader,\n  accordionHeaderClassNames,\n  renderAccordionHeader_unstable,\n  useAccordionHeaderContextValues_unstable,\n  useAccordionHeaderStyles_unstable,\n  useAccordionHeader_unstable,\n  useAccordionHeaderBase_unstable,\n} from './components/AccordionHeader/index';\n"],"names":["AccordionHeader","accordionHeaderClassNames","renderAccordionHeader_unstable","useAccordionHeaderContextValues_unstable","useAccordionHeaderStyles_unstable","useAccordionHeader_unstable","useAccordionHeaderBase_unstable"],"mappings":"AAQA,SACEA,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,wCAAwC,EACxCC,iCAAiC,EACjCC,2BAA2B,EAC3BC,+BAA+B,QAC1B,qCAAqC"}

package/lib/AccordionPanel.js

@@ -1 +1 @@
-export { AccordionPanel, accordionPanelClassNames, renderAccordionPanel_unstable, useAccordionPanelStyles_unstable, useAccordionPanel_unstable } from './components/AccordionPanel/index';
+export { AccordionPanel, accordionPanelClassNames, renderAccordionPanel_unstable, useAccordionPanelStyles_unstable, useAccordionPanel_unstable, useAccordionPanelBase_unstable } from './components/AccordionPanel/index';

package/lib/AccordionPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/AccordionPanel.ts"],"sourcesContent":["export type { AccordionPanelProps, AccordionPanelSlots, AccordionPanelState } from './components/AccordionPanel/index';\nexport {\n  AccordionPanel,\n  accordionPanelClassNames,\n  renderAccordionPanel_unstable,\n  useAccordionPanelStyles_unstable,\n  useAccordionPanel_unstable,\n} from './components/AccordionPanel/index';\n"],"names":["AccordionPanel","accordionPanelClassNames","renderAccordionPanel_unstable","useAccordionPanelStyles_unstable","useAccordionPanel_unstable"],"mappings":"AACA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,oCAAoC"}
+{"version":3,"sources":["../src/AccordionPanel.ts"],"sourcesContent":["export type {\n  AccordionPanelProps,\n  AccordionPanelSlots,\n  AccordionPanelState,\n  AccordionPanelBaseProps,\n  AccordionPanelBaseState,\n} from './components/AccordionPanel/index';\nexport {\n  AccordionPanel,\n  accordionPanelClassNames,\n  renderAccordionPanel_unstable,\n  useAccordionPanelStyles_unstable,\n  useAccordionPanel_unstable,\n  useAccordionPanelBase_unstable,\n} from './components/AccordionPanel/index';\n"],"names":["AccordionPanel","accordionPanelClassNames","renderAccordionPanel_unstable","useAccordionPanelStyles_unstable","useAccordionPanel_unstable","useAccordionPanelBase_unstable"],"mappings":"AAOA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,EAC1BC,8BAA8B,QACzB,oCAAoC"}

package/lib/components/Accordion/Accordion.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Accordion/Accordion.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { AccordionContextValue } from '../../contexts/accordion';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\n\nexport type AccordionIndex = number | number[];\n\nexport type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type AccordionToggleEventHandler<Value = AccordionItemValue> = (\n  event: AccordionToggleEvent,\n  data: AccordionToggleData<Value>,\n) => void;\n\nexport type AccordionContextValues = {\n  accordion: AccordionContextValue;\n};\n\nexport type AccordionSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionToggleData<Value = AccordionItemValue> = {\n  value: Value;\n  openItems: Value[];\n};\n\nexport type AccordionProps<Value = AccordionItemValue> = Omit<ComponentProps<AccordionSlots>, 'onToggle'> & {\n  /**\n   * Default value for the uncontrolled state of the panel.\n   */\n  defaultOpenItems?: Value | Value[];\n\n  /**\n   * Indicates if Accordion support multiple Panels closed at the same time.\n   */\n  collapsible?: boolean;\n\n  /**\n   * Indicates if Accordion support multiple Panels opened at the same time.\n   */\n  multiple?: boolean;\n\n  /**\n   * @deprecated Arrow keyboard navigation is not recommended for accordions. Consider using Tree if arrow navigation is a hard requirement.\n   * Indicates if keyboard navigation is available and gives two options, linear or circular navigation.\n   */\n  navigation?: 'linear' | 'circular';\n\n  /**\n   * Callback to be called when the opened items change.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onToggle?: AccordionToggleEventHandler<Value>;\n\n  /**\n   * Controls the state of the panel.\n   */\n  openItems?: Value | Value[];\n};\n\nexport type AccordionState<Value = AccordionItemValue> = ComponentState<AccordionSlots> & AccordionContextValue<Value>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Accordion/Accordion.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { AccordionContextValue } from '../../contexts/accordion';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\n\nexport type AccordionIndex = number | number[];\n\nexport type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type AccordionToggleEventHandler<Value = AccordionItemValue> = (\n  event: AccordionToggleEvent,\n  data: AccordionToggleData<Value>,\n) => void;\n\nexport type AccordionContextValues = {\n  accordion: AccordionContextValue;\n};\n\nexport type AccordionSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionToggleData<Value = AccordionItemValue> = {\n  value: Value;\n  openItems: Value[];\n};\n\nexport type AccordionProps<Value = AccordionItemValue> = Omit<ComponentProps<AccordionSlots>, 'onToggle'> & {\n  /**\n   * Default value for the uncontrolled state of the panel.\n   */\n  defaultOpenItems?: Value | Value[];\n\n  /**\n   * Indicates if Accordion support multiple Panels closed at the same time.\n   */\n  collapsible?: boolean;\n\n  /**\n   * Indicates if Accordion support multiple Panels opened at the same time.\n   */\n  multiple?: boolean;\n\n  /**\n   * @deprecated Arrow keyboard navigation is not recommended for accordions. Consider using Tree if arrow navigation is a hard requirement.\n   * Indicates if keyboard navigation is available and gives two options, linear or circular navigation.\n   */\n  navigation?: 'linear' | 'circular';\n\n  /**\n   * Callback to be called when the opened items change.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onToggle?: AccordionToggleEventHandler<Value>;\n\n  /**\n   * Controls the state of the panel.\n   */\n  openItems?: Value | Value[];\n};\n\nexport type AccordionBaseProps<Value = AccordionItemValue> = Omit<AccordionProps<Value>, 'navigation'>;\n\nexport type AccordionState<Value = AccordionItemValue> = ComponentState<AccordionSlots> & AccordionContextValue<Value>;\n\nexport type AccordionBaseState<Value = AccordionItemValue> = Omit<AccordionState<Value>, 'navigation'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Accordion/index.js

@@ -1,5 +1,5 @@
 export { Accordion } from './Accordion';
 export { renderAccordion_unstable } from './renderAccordion';
-export { useAccordion_unstable } from './useAccordion';
+export { useAccordion_unstable, useAccordionBase_unstable } from './useAccordion';
 export { accordionClassNames, useAccordionStyles_unstable } from './useAccordionStyles.styles';
 export { useAccordionContextValues_unstable } from './useAccordionContextValues';

package/lib/components/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Accordion/index.ts"],"sourcesContent":["export { Accordion } from './Accordion';\nexport type {\n  AccordionContextValues,\n  AccordionIndex,\n  AccordionProps,\n  AccordionSlots,\n  AccordionState,\n  AccordionToggleData,\n  AccordionToggleEvent,\n  AccordionToggleEventHandler,\n} from './Accordion.types';\nexport { renderAccordion_unstable } from './renderAccordion';\nexport { useAccordion_unstable } from './useAccordion';\nexport { accordionClassNames, useAccordionStyles_unstable } from './useAccordionStyles.styles';\nexport { useAccordionContextValues_unstable } from './useAccordionContextValues';\n"],"names":["Accordion","renderAccordion_unstable","useAccordion_unstable","accordionClassNames","useAccordionStyles_unstable","useAccordionContextValues_unstable"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAWxC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,8BAA8B;AAC/F,SAASC,kCAAkC,QAAQ,8BAA8B"}
+{"version":3,"sources":["../src/components/Accordion/index.ts"],"sourcesContent":["export { Accordion } from './Accordion';\nexport type {\n  AccordionContextValues,\n  AccordionIndex,\n  AccordionProps,\n  AccordionSlots,\n  AccordionState,\n  AccordionToggleData,\n  AccordionToggleEvent,\n  AccordionToggleEventHandler,\n  AccordionBaseState,\n  AccordionBaseProps,\n} from './Accordion.types';\nexport { renderAccordion_unstable } from './renderAccordion';\nexport { useAccordion_unstable, useAccordionBase_unstable } from './useAccordion';\nexport { accordionClassNames, useAccordionStyles_unstable } from './useAccordionStyles.styles';\nexport { useAccordionContextValues_unstable } from './useAccordionContextValues';\n"],"names":["Accordion","renderAccordion_unstable","useAccordion_unstable","useAccordionBase_unstable","accordionClassNames","useAccordionStyles_unstable","useAccordionContextValues_unstable"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAaxC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,EAAEC,yBAAyB,QAAQ,iBAAiB;AAClF,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,8BAA8B;AAC/F,SAASC,kCAAkC,QAAQ,8BAA8B"}

package/lib/components/Accordion/useAccordion.js

@@ -1,14 +1,34 @@
 'use client';
 import * as React from 'react';
-import { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
+import { useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 /**
  * Returns the props and state required to render the component
  * @param props - Accordion properties
  * @param ref - reference to root HTMLElement of Accordion
  */ export const useAccordion_unstable = (props, ref)=>{
-    const { openItems: controlledOpenItems, defaultOpenItems, multiple = false, collapsible = false, onToggle, // eslint-disable-next-line @typescript-eslint/no-deprecated
-    navigation, ...rest } = props;
+    const { // eslint-disable-next-line @typescript-eslint/no-deprecated
+    navigation, ...baseProps } = props;
+    const state = useAccordionBase_unstable(baseProps, ref);
+    /** FIXME: deprecated will be removed after navigation prop is removed */ const arrowNavigationProps = useArrowNavigationGroup({
+        circular: navigation === 'circular',
+        tabbable: true
+    });
+    return {
+        navigation,
+        ...state,
+        root: {
+            ...state.root,
+            ...navigation ? arrowNavigationProps : undefined
+        }
+    };
+};
+/**
+ * Returns the props and state required to render the component
+ * @param props - Accordion properties
+ * @param ref - reference to root HTMLElement of Accordion
+ */ export const useAccordionBase_unstable = (props, ref)=>{
+    const { openItems: controlledOpenItems, defaultOpenItems, multiple = false, collapsible = false, onToggle, ...rest } = props;
     const [openItems, setOpenItems] = useControllableState({
         state: React.useMemo(()=>normalizeValues(controlledOpenItems), [
             controlledOpenItems
@@ -19,10 +39,6 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
             })),
         initialState: []
     });
-    /** FIXME: deprecated will be removed after navigation prop is removed */ const arrowNavigationProps = useArrowNavigationGroup({
-        circular: navigation === 'circular',
-        tabbable: true
-    });
     const requestToggle = useEventCallback((data)=>{
         const nextOpenItems = updateOpenItems(data.value, openItems, multiple, collapsible);
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(data.event, {
@@ -34,20 +50,15 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
     return {
         collapsible,
         multiple,
-        navigation,
         openItems,
         requestToggle,
         components: {
             root: 'div'
         },
-        root: slot.always(getIntrinsicElementProps('div', {
-            ...rest,
-            ...navigation ? arrowNavigationProps : undefined,
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-            ref: ref
-        }), {
+        root: slot.always({
+            ref: ref,
+            ...rest
+        }, {
             elementType: 'div'
         })
     };

package/lib/components/Accordion/useAccordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Accordion/useAccordion.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { AccordionProps, AccordionState } from './Accordion.types';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { AccordionRequestToggleData } from '../../contexts/accordion';\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordion_unstable = <Value = AccordionItemValue>(\n  props: AccordionProps<Value>,\n  ref: React.Ref<HTMLElement>,\n): AccordionState<Value> => {\n  const {\n    openItems: controlledOpenItems,\n    defaultOpenItems,\n    multiple = false,\n    collapsible = false,\n    onToggle,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    navigation,\n    ...rest\n  } = props;\n  const [openItems, setOpenItems] = useControllableState({\n    state: React.useMemo(() => normalizeValues(controlledOpenItems), [controlledOpenItems]),\n    defaultState: defaultOpenItems && (() => initializeUncontrolledOpenItems({ defaultOpenItems, multiple })),\n    initialState: [],\n  });\n\n  /** FIXME: deprecated will be removed after navigation prop is removed */\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: navigation === 'circular',\n    tabbable: true,\n  });\n\n  const requestToggle = useEventCallback((data: AccordionRequestToggleData<Value>) => {\n    const nextOpenItems = updateOpenItems(data.value, openItems, multiple, collapsible);\n    onToggle?.(data.event, { value: data.value, openItems: nextOpenItems });\n    setOpenItems(nextOpenItems);\n  });\n\n  return {\n    collapsible,\n    multiple,\n    navigation,\n    openItems,\n    requestToggle,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...rest,\n\n        ...(navigation ? arrowNavigationProps : undefined),\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenItems<Value = AccordionItemValue>({\n  defaultOpenItems,\n  multiple,\n}: Pick<AccordionProps<Value>, 'defaultOpenItems' | 'multiple'>): Value[] {\n  if (defaultOpenItems !== undefined) {\n    if (Array.isArray(defaultOpenItems)) {\n      return multiple ? defaultOpenItems : [defaultOpenItems[0]];\n    }\n    return [defaultOpenItems];\n  }\n  return [];\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Accordion support multiple Panels opened at the same time\n * @param collapsible - if Accordion support multiple Panels closed at the same time\n */\nfunction updateOpenItems<Value = AccordionItemValue>(\n  value: Value,\n  previousOpenItems: Value[],\n  multiple: boolean,\n  collapsible: boolean,\n) {\n  if (multiple) {\n    if (previousOpenItems.includes(value)) {\n      if (previousOpenItems.length > 1 || collapsible) {\n        return previousOpenItems.filter(i => i !== value);\n      }\n    } else {\n      return [...previousOpenItems, value].sort();\n    }\n  } else {\n    return previousOpenItems[0] === value && collapsible ? [] : [value];\n  }\n  return previousOpenItems;\n}\n\n/**\n * Normalizes Accordion index into an array of indexes\n */\nfunction normalizeValues<Value = AccordionItemValue>(index?: Value | Value[]): Value[] | undefined {\n  if (index === undefined) {\n    return undefined;\n  }\n  return Array.isArray(index) ? index : [index];\n}\n"],"names":["React","getIntrinsicElementProps","useControllableState","useEventCallback","slot","useArrowNavigationGroup","useAccordion_unstable","props","ref","openItems","controlledOpenItems","defaultOpenItems","multiple","collapsible","onToggle","navigation","rest","setOpenItems","state","useMemo","normalizeValues","defaultState","initializeUncontrolledOpenItems","initialState","arrowNavigationProps","circular","tabbable","requestToggle","data","nextOpenItems","updateOpenItems","value","event","components","root","always","undefined","elementType","Array","isArray","previousOpenItems","includes","length","filter","i","sort","index"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAGnH,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE;;;;CAIC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,OACAC;IAEA,MAAM,EACJC,WAAWC,mBAAmB,EAC9BC,gBAAgB,EAChBC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,QAAQ,EACR,4DAA4D;IAC5DC,UAAU,EACV,GAAGC,MACJ,GAAGT;IACJ,MAAM,CAACE,WAAWQ,aAAa,GAAGf,qBAAqB;QACrDgB,OAAOlB,MAAMmB,OAAO,CAAC,IAAMC,gBAAgBV,sBAAsB;YAACA;SAAoB;QACtFW,cAAcV,oBAAqB,CAAA,IAAMW,gCAAgC;gBAAEX;gBAAkBC;YAAS,EAAC;QACvGW,cAAc,EAAE;IAClB;IAEA,uEAAuE,GACvE,MAAMC,uBAAuBnB,wBAAwB;QACnDoB,UAAUV,eAAe;QACzBW,UAAU;IACZ;IAEA,MAAMC,gBAAgBxB,iBAAiB,CAACyB;QACtC,MAAMC,gBAAgBC,gBAAgBF,KAAKG,KAAK,EAAEtB,WAAWG,UAAUC;QACvEC,qBAAAA,+BAAAA,SAAWc,KAAKI,KAAK,EAAE;YAAED,OAAOH,KAAKG,KAAK;YAAEtB,WAAWoB;QAAc;QACrEZ,aAAaY;IACf;IAEA,OAAO;QACLhB;QACAD;QACAG;QACAN;QACAkB;QACAM,YAAY;YACVC,MAAM;QACR;QACAA,MAAM9B,KAAK+B,MAAM,CACflC,yBAAyB,OAAO;YAC9B,GAAGe,IAAI;YAEP,GAAID,aAAaS,uBAAuBY,SAAS;YACjD,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F5B,KAAKA;QACP,IACA;YAAE6B,aAAa;QAAM;IAEzB;AACF,EAAE;AAEF;;CAEC,GACD,SAASf,gCAA4D,EACnEX,gBAAgB,EAChBC,QAAQ,EACqD;IAC7D,IAAID,qBAAqByB,WAAW;QAClC,IAAIE,MAAMC,OAAO,CAAC5B,mBAAmB;YACnC,OAAOC,WAAWD,mBAAmB;gBAACA,gBAAgB,CAAC,EAAE;aAAC;QAC5D;QACA,OAAO;YAACA;SAAiB;IAC3B;IACA,OAAO,EAAE;AACX;AAEA;;;;;;CAMC,GACD,SAASmB,gBACPC,KAAY,EACZS,iBAA0B,EAC1B5B,QAAiB,EACjBC,WAAoB;IAEpB,IAAID,UAAU;QACZ,IAAI4B,kBAAkBC,QAAQ,CAACV,QAAQ;YACrC,IAAIS,kBAAkBE,MAAM,GAAG,KAAK7B,aAAa;gBAC/C,OAAO2B,kBAAkBG,MAAM,CAACC,CAAAA,IAAKA,MAAMb;YAC7C;QACF,OAAO;YACL,OAAO;mBAAIS;gBAAmBT;aAAM,CAACc,IAAI;QAC3C;IACF,OAAO;QACL,OAAOL,iBAAiB,CAAC,EAAE,KAAKT,SAASlB,cAAc,EAAE,GAAG;YAACkB;SAAM;IACrE;IACA,OAAOS;AACT;AAEA;;CAEC,GACD,SAASpB,gBAA4C0B,KAAuB;IAC1E,IAAIA,UAAUV,WAAW;QACvB,OAAOA;IACT;IACA,OAAOE,MAAMC,OAAO,CAACO,SAASA,QAAQ;QAACA;KAAM;AAC/C"}
+{"version":3,"sources":["../src/components/Accordion/useAccordion.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { AccordionBaseProps, AccordionBaseState, AccordionProps, AccordionState } from './Accordion.types';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { AccordionRequestToggleData } from '../../contexts/accordion';\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordion_unstable = <Value = AccordionItemValue>(\n  props: AccordionProps<Value>,\n  ref: React.Ref<HTMLElement>,\n): AccordionState<Value> => {\n  const {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    navigation,\n    ...baseProps\n  } = props;\n  const state = useAccordionBase_unstable(baseProps, ref);\n\n  /** FIXME: deprecated will be removed after navigation prop is removed */\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: navigation === 'circular',\n    tabbable: true,\n  });\n\n  return {\n    navigation,\n    ...state,\n\n    root: {\n      ...state.root,\n      ...(navigation ? arrowNavigationProps : undefined),\n    },\n  };\n};\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordionBase_unstable = <Value = AccordionItemValue>(\n  props: AccordionBaseProps<Value>,\n  ref: React.Ref<HTMLElement>,\n): AccordionBaseState<Value> => {\n  const {\n    openItems: controlledOpenItems,\n    defaultOpenItems,\n    multiple = false,\n    collapsible = false,\n    onToggle,\n    ...rest\n  } = props;\n  const [openItems, setOpenItems] = useControllableState({\n    state: React.useMemo(() => normalizeValues(controlledOpenItems), [controlledOpenItems]),\n    defaultState: defaultOpenItems && (() => initializeUncontrolledOpenItems({ defaultOpenItems, multiple })),\n    initialState: [],\n  });\n\n  const requestToggle = useEventCallback((data: AccordionRequestToggleData<Value>) => {\n    const nextOpenItems = updateOpenItems(data.value, openItems, multiple, collapsible);\n    onToggle?.(data.event, { value: data.value, openItems: nextOpenItems });\n    setOpenItems(nextOpenItems);\n  });\n\n  return {\n    collapsible,\n    multiple,\n    openItems,\n    requestToggle,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      {\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...rest,\n      },\n      { elementType: 'div' },\n    ),\n  };\n};\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenItems<Value = AccordionItemValue>({\n  defaultOpenItems,\n  multiple,\n}: Pick<AccordionProps<Value>, 'defaultOpenItems' | 'multiple'>): Value[] {\n  if (defaultOpenItems !== undefined) {\n    if (Array.isArray(defaultOpenItems)) {\n      return multiple ? defaultOpenItems : [defaultOpenItems[0]];\n    }\n    return [defaultOpenItems];\n  }\n  return [];\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Accordion support multiple Panels opened at the same time\n * @param collapsible - if Accordion support multiple Panels closed at the same time\n */\nfunction updateOpenItems<Value = AccordionItemValue>(\n  value: Value,\n  previousOpenItems: Value[],\n  multiple: boolean,\n  collapsible: boolean,\n) {\n  if (multiple) {\n    if (previousOpenItems.includes(value)) {\n      if (previousOpenItems.length > 1 || collapsible) {\n        return previousOpenItems.filter(i => i !== value);\n      }\n    } else {\n      return [...previousOpenItems, value].sort();\n    }\n  } else {\n    return previousOpenItems[0] === value && collapsible ? [] : [value];\n  }\n  return previousOpenItems;\n}\n\n/**\n * Normalizes Accordion index into an array of indexes\n */\nfunction normalizeValues<Value = AccordionItemValue>(index?: Value | Value[]): Value[] | undefined {\n  if (index === undefined) {\n    return undefined;\n  }\n  return Array.isArray(index) ? index : [index];\n}\n"],"names":["React","useControllableState","useEventCallback","slot","useArrowNavigationGroup","useAccordion_unstable","props","ref","navigation","baseProps","state","useAccordionBase_unstable","arrowNavigationProps","circular","tabbable","root","undefined","openItems","controlledOpenItems","defaultOpenItems","multiple","collapsible","onToggle","rest","setOpenItems","useMemo","normalizeValues","defaultState","initializeUncontrolledOpenItems","initialState","requestToggle","data","nextOpenItems","updateOpenItems","value","event","components","always","elementType","Array","isArray","previousOpenItems","includes","length","filter","i","sort","index"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAGzF,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE;;;;CAIC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,OACAC;IAEA,MAAM,EACJ,4DAA4D;IAC5DC,UAAU,EACV,GAAGC,WACJ,GAAGH;IACJ,MAAMI,QAAQC,0BAA0BF,WAAWF;IAEnD,uEAAuE,GACvE,MAAMK,uBAAuBR,wBAAwB;QACnDS,UAAUL,eAAe;QACzBM,UAAU;IACZ;IAEA,OAAO;QACLN;QACA,GAAGE,KAAK;QAERK,MAAM;YACJ,GAAGL,MAAMK,IAAI;YACb,GAAIP,aAAaI,uBAAuBI,SAAS;QACnD;IACF;AACF,EAAE;AAEF;;;;CAIC,GACD,OAAO,MAAML,4BAA4B,CACvCL,OACAC;IAEA,MAAM,EACJU,WAAWC,mBAAmB,EAC9BC,gBAAgB,EAChBC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,QAAQ,EACR,GAAGC,MACJ,GAAGjB;IACJ,MAAM,CAACW,WAAWO,aAAa,GAAGvB,qBAAqB;QACrDS,OAAOV,MAAMyB,OAAO,CAAC,IAAMC,gBAAgBR,sBAAsB;YAACA;SAAoB;QACtFS,cAAcR,oBAAqB,CAAA,IAAMS,gCAAgC;gBAAET;gBAAkBC;YAAS,EAAC;QACvGS,cAAc,EAAE;IAClB;IAEA,MAAMC,gBAAgB5B,iBAAiB,CAAC6B;QACtC,MAAMC,gBAAgBC,gBAAgBF,KAAKG,KAAK,EAAEjB,WAAWG,UAAUC;QACvEC,qBAAAA,+BAAAA,SAAWS,KAAKI,KAAK,EAAE;YAAED,OAAOH,KAAKG,KAAK;YAAEjB,WAAWe;QAAc;QACrER,aAAaQ;IACf;IAEA,OAAO;QACLX;QACAD;QACAH;QACAa;QACAM,YAAY;YACVrB,MAAM;QACR;QACAA,MAAMZ,KAAKkC,MAAM,CACf;YACE9B,KAAKA;YACL,GAAGgB,IAAI;QACT,GACA;YAAEe,aAAa;QAAM;IAEzB;AACF,EAAE;AAEF;;CAEC,GACD,SAASV,gCAA4D,EACnET,gBAAgB,EAChBC,QAAQ,EACqD;IAC7D,IAAID,qBAAqBH,WAAW;QAClC,IAAIuB,MAAMC,OAAO,CAACrB,mBAAmB;YACnC,OAAOC,WAAWD,mBAAmB;gBAACA,gBAAgB,CAAC,EAAE;aAAC;QAC5D;QACA,OAAO;YAACA;SAAiB;IAC3B;IACA,OAAO,EAAE;AACX;AAEA;;;;;;CAMC,GACD,SAASc,gBACPC,KAAY,EACZO,iBAA0B,EAC1BrB,QAAiB,EACjBC,WAAoB;IAEpB,IAAID,UAAU;QACZ,IAAIqB,kBAAkBC,QAAQ,CAACR,QAAQ;YACrC,IAAIO,kBAAkBE,MAAM,GAAG,KAAKtB,aAAa;gBAC/C,OAAOoB,kBAAkBG,MAAM,CAACC,CAAAA,IAAKA,MAAMX;YAC7C;QACF,OAAO;YACL,OAAO;mBAAIO;gBAAmBP;aAAM,CAACY,IAAI;QAC3C;IACF,OAAO;QACL,OAAOL,iBAAiB,CAAC,EAAE,KAAKP,SAASb,cAAc,EAAE,GAAG;YAACa;SAAM;IACrE;IACA,OAAOO;AACT;AAEA;;CAEC,GACD,SAASf,gBAA4CqB,KAAuB;IAC1E,IAAIA,UAAU/B,WAAW;QACvB,OAAOA;IACT;IACA,OAAOuB,MAAMC,OAAO,CAACO,SAASA,QAAQ;QAACA;KAAM;AAC/C"}

package/lib/components/AccordionHeader/index.js

@@ -1,5 +1,5 @@
 export { AccordionHeader } from './AccordionHeader';
 export { renderAccordionHeader_unstable } from './renderAccordionHeader';
-export { useAccordionHeader_unstable } from './useAccordionHeader';
+export { useAccordionHeader_unstable, useAccordionHeaderBase_unstable } from './useAccordionHeader';
 export { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues';
 export { accordionHeaderClassNames, useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles.styles';

package/lib/components/AccordionHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AccordionHeader/index.ts"],"sourcesContent":["export { AccordionHeader } from './AccordionHeader';\nexport type {\n  AccordionHeaderContextValues,\n  AccordionHeaderExpandIconPosition,\n  AccordionHeaderProps,\n  AccordionHeaderSize,\n  AccordionHeaderSlots,\n  AccordionHeaderState,\n} from './AccordionHeader.types';\nexport { renderAccordionHeader_unstable } from './renderAccordionHeader';\nexport { useAccordionHeader_unstable } from './useAccordionHeader';\nexport { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues';\nexport { accordionHeaderClassNames, useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles.styles';\n"],"names":["AccordionHeader","renderAccordionHeader_unstable","useAccordionHeader_unstable","useAccordionHeaderContextValues_unstable","accordionHeaderClassNames","useAccordionHeaderStyles_unstable"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AASpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wCAAwC,QAAQ,oCAAoC;AAC7F,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,oCAAoC"}
+{"version":3,"sources":["../src/components/AccordionHeader/index.ts"],"sourcesContent":["export { AccordionHeader } from './AccordionHeader';\nexport type {\n  AccordionHeaderContextValues,\n  AccordionHeaderExpandIconPosition,\n  AccordionHeaderProps,\n  AccordionHeaderSize,\n  AccordionHeaderSlots,\n  AccordionHeaderState,\n} from './AccordionHeader.types';\nexport { renderAccordionHeader_unstable } from './renderAccordionHeader';\nexport { useAccordionHeader_unstable, useAccordionHeaderBase_unstable } from './useAccordionHeader';\nexport { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues';\nexport { accordionHeaderClassNames, useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles.styles';\n"],"names":["AccordionHeader","renderAccordionHeader_unstable","useAccordionHeader_unstable","useAccordionHeaderBase_unstable","useAccordionHeaderContextValues_unstable","accordionHeaderClassNames","useAccordionHeaderStyles_unstable"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AASpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,EAAEC,+BAA+B,QAAQ,uBAAuB;AACpG,SAASC,wCAAwC,QAAQ,oCAAoC;AAC7F,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,oCAAoC"}

package/lib/components/AccordionHeader/useAccordionHeader.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { getIntrinsicElementProps, useEventCallback, slot, isResolvedShorthand } from '@fluentui/react-utilities';
+import { useEventCallback, slot, isResolvedShorthand } from '@fluentui/react-utilities';
 import { useARIAButtonProps } from '@fluentui/react-aria';
 import { useAccordionContext_unstable } from '../../contexts/accordion';
 import { ChevronRightRegular } from '@fluentui/react-icons';
@@ -9,26 +9,46 @@ import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
 import { motionTokens } from '@fluentui/react-motion';
 /**
  * Returns the props and state required to render the component
+ *
  * @param props - AccordionHeader properties
  * @param ref - reference to root HTMLElement of AccordionHeader
  */ export const useAccordionHeader_unstable = (props, ref)=>{
-    const { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = props;
-    const { value, disabled, open } = useAccordionItemContext_unstable();
-    const requestToggle = useAccordionContext_unstable((ctx)=>ctx.requestToggle);
-    /**
-   * force disabled state on button if accordion isn't collapsible
-   * and this is the only item opened
-   */ const disabledFocusable = useAccordionContext_unstable((ctx)=>!ctx.collapsible && ctx.openItems.length === 1 && open);
+    const state = useAccordionHeaderBase_unstable(props, ref);
     const { dir } = useFluent();
     // Calculate how to rotate the expand icon [>] (ChevronRightRegular)
     let expandIconRotation;
-    if (expandIconPosition === 'end') {
+    if (state.expandIconPosition === 'end') {
         // If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed
-        expandIconRotation = open ? -90 : 90;
+        expandIconRotation = state.open ? -90 : 90;
     } else {
         // Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed
-        expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
+        expandIconRotation = state.open ? 90 : dir !== 'rtl' ? 0 : 180;
+    }
+    if (state.expandIcon) {
+        var _state_expandIcon;
+        var _children;
+        (_children = (_state_expandIcon = state.expandIcon).children) !== null && _children !== void 0 ? _children : _state_expandIcon.children = /*#__PURE__*/ React.createElement(ChevronRightRegular, {
+            style: {
+                transform: `rotate(${expandIconRotation}deg)`,
+                transition: `transform ${motionTokens.durationNormal}ms ease-out`
+            }
+        });
     }
+    return state;
+};
+/**
+ * Base state hook for AccordionHeader, without design related features.
+ *
+ * @param props - AccordionHeader properties
+ * @param ref - reference to root HTMLElement of AccordionHeader
+ */ export const useAccordionHeaderBase_unstable = (props, ref)=>{
+    const { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start', ...rest } = props;
+    const { value, disabled, open } = useAccordionItemContext_unstable();
+    const requestToggle = useAccordionContext_unstable((ctx)=>ctx.requestToggle);
+    /**
+   * force disabled state on button if accordion isn't collapsible
+   * and this is the only item opened
+   */ const disabledFocusable = useAccordionContext_unstable((ctx)=>!ctx.collapsible && ctx.openItems.length === 1 && open);
     const buttonSlot = slot.always(button, {
         elementType: 'button',
         defaultProps: {
@@ -62,13 +82,10 @@ import { motionTokens } from '@fluentui/react-motion';
             expandIcon: 'span',
             icon: 'div'
         },
-        root: slot.always(getIntrinsicElementProps('div', {
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+        root: slot.always({
             ref: ref,
-            ...props
-        }), {
+            ...rest
+        }, {
             elementType: 'div'
         }),
         icon: slot.optional(icon, {
@@ -77,12 +94,6 @@ import { motionTokens } from '@fluentui/react-motion';
         expandIcon: slot.optional(expandIcon, {
             renderByDefault: true,
             defaultProps: {
-                children: /*#__PURE__*/ React.createElement(ChevronRightRegular, {
-                    style: {
-                        transform: `rotate(${expandIconRotation}deg)`,
-                        transition: `transform ${motionTokens.durationNormal}ms ease-out`
-                    }
-                }),
                 'aria-hidden': true
             },
             elementType: 'span'

package/lib/components/AccordionHeader/useAccordionHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AccordionHeader/useAccordionHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, slot, isResolvedShorthand } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport { ChevronRightRegular } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAccordionItemContext_unstable } from '../../contexts/accordionItem';\nimport { motionTokens } from '@fluentui/react-motion';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionHeader properties\n * @param ref - reference to root HTMLElement of AccordionHeader\n */\nexport const useAccordionHeader_unstable = (\n  props: AccordionHeaderProps,\n  ref: React.Ref<HTMLElement>,\n): AccordionHeaderState => {\n  const { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = props;\n  const { value, disabled, open } = useAccordionItemContext_unstable();\n  const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);\n\n  /**\n   * force disabled state on button if accordion isn't collapsible\n   * and this is the only item opened\n   */\n  const disabledFocusable = useAccordionContext_unstable(ctx => !ctx.collapsible && ctx.openItems.length === 1 && open);\n\n  const { dir } = useFluent();\n\n  // Calculate how to rotate the expand icon [>] (ChevronRightRegular)\n  let expandIconRotation: 0 | 90 | -90 | 180;\n  if (expandIconPosition === 'end') {\n    // If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed\n    expandIconRotation = open ? -90 : 90;\n  } else {\n    // Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed\n    expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n  }\n\n  const buttonSlot = slot.always(button, {\n    elementType: 'button',\n    defaultProps: {\n      disabled,\n      disabledFocusable,\n      'aria-expanded': open,\n      type: 'button',\n    },\n  });\n\n  buttonSlot.onClick = useEventCallback(event => {\n    if (isResolvedShorthand(button)) {\n      button.onClick?.(event);\n    }\n    if (!event.defaultPrevented) {\n      requestToggle({ value, event });\n    }\n  });\n\n  return {\n    disabled,\n    open,\n    size,\n    inline,\n    expandIconPosition,\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      icon: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(icon, { elementType: 'div' }),\n    expandIcon: slot.optional(expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        children: (\n          <ChevronRightRegular\n            style={{\n              transform: `rotate(${expandIconRotation}deg)`,\n              transition: `transform ${motionTokens.durationNormal}ms ease-out`,\n            }}\n          />\n        ),\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    button: useARIAButtonProps(buttonSlot.as, buttonSlot),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","slot","isResolvedShorthand","useARIAButtonProps","useAccordionContext_unstable","ChevronRightRegular","useFluent_unstable","useFluent","useAccordionItemContext_unstable","motionTokens","useAccordionHeader_unstable","props","ref","icon","button","expandIcon","inline","size","expandIconPosition","value","disabled","open","requestToggle","ctx","disabledFocusable","collapsible","openItems","length","dir","expandIconRotation","buttonSlot","always","elementType","defaultProps","type","onClick","event","defaultPrevented","components","root","optional","renderByDefault","children","style","transform","transition","durationNormal","as"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,mBAAmB,QAAQ,4BAA4B;AAClH,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,4BAA4B,QAAQ,2BAA2B;AACxE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,gCAAgC,QAAQ,+BAA+B;AAChF,SAASC,YAAY,QAAQ,yBAAyB;AAEtD;;;;CAIC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,MAAM,EAAEC,UAAU,EAAEC,SAAS,KAAK,EAAEC,OAAO,QAAQ,EAAEC,qBAAqB,OAAO,EAAE,GAAGP;IACpG,MAAM,EAAEQ,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGb;IAClC,MAAMc,gBAAgBlB,6BAA6BmB,CAAAA,MAAOA,IAAID,aAAa;IAE3E;;;GAGC,GACD,MAAME,oBAAoBpB,6BAA6BmB,CAAAA,MAAO,CAACA,IAAIE,WAAW,IAAIF,IAAIG,SAAS,CAACC,MAAM,KAAK,KAAKN;IAEhH,MAAM,EAAEO,GAAG,EAAE,GAAGrB;IAEhB,oEAAoE;IACpE,IAAIsB;IACJ,IAAIX,uBAAuB,OAAO;QAChC,8FAA8F;QAC9FW,qBAAqBR,OAAO,CAAC,KAAK;IACpC,OAAO;QACL,mGAAmG;QACnGQ,qBAAqBR,OAAO,KAAKO,QAAQ,QAAQ,IAAI;IACvD;IAEA,MAAME,aAAa7B,KAAK8B,MAAM,CAACjB,QAAQ;QACrCkB,aAAa;QACbC,cAAc;YACZb;YACAI;YACA,iBAAiBH;YACjBa,MAAM;QACR;IACF;IAEAJ,WAAWK,OAAO,GAAGnC,iBAAiBoC,CAAAA;QACpC,IAAIlC,oBAAoBY,SAAS;gBAC/BA;aAAAA,kBAAAA,OAAOqB,OAAO,cAAdrB,sCAAAA,qBAAAA,QAAiBsB;QACnB;QACA,IAAI,CAACA,MAAMC,gBAAgB,EAAE;YAC3Bf,cAAc;gBAAEH;gBAAOiB;YAAM;QAC/B;IACF;IAEA,OAAO;QACLhB;QACAC;QACAJ;QACAD;QACAE;QACAoB,YAAY;YACVC,MAAM;YACNzB,QAAQ;YACRC,YAAY;YACZF,MAAM;QACR;QACA0B,MAAMtC,KAAK8B,MAAM,CACfhC,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5Fa,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEqB,aAAa;QAAM;QAEvBnB,MAAMZ,KAAKuC,QAAQ,CAAC3B,MAAM;YAAEmB,aAAa;QAAM;QAC/CjB,YAAYd,KAAKuC,QAAQ,CAACzB,YAAY;YACpC0B,iBAAiB;YACjBR,cAAc;gBACZS,wBACE,oBAACrC;oBACCsC,OAAO;wBACLC,WAAW,CAAC,OAAO,EAAEf,mBAAmB,IAAI,CAAC;wBAC7CgB,YAAY,CAAC,UAAU,EAAEpC,aAAaqC,cAAc,CAAC,WAAW,CAAC;oBACnE;;gBAGJ,eAAe;YACjB;YACAd,aAAa;QACf;QACAlB,QAAQX,mBAAmB2B,WAAWiB,EAAE,EAAEjB;IAC5C;AACF,EAAE"}
+{"version":3,"sources":["../src/components/AccordionHeader/useAccordionHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback, slot, isResolvedShorthand } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport { ChevronRightRegular } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAccordionItemContext_unstable } from '../../contexts/accordionItem';\nimport { motionTokens } from '@fluentui/react-motion';\n\n/**\n * Returns the props and state required to render the component\n *\n * @param props - AccordionHeader properties\n * @param ref - reference to root HTMLElement of AccordionHeader\n */\nexport const useAccordionHeader_unstable = (\n  props: AccordionHeaderProps,\n  ref: React.Ref<HTMLElement>,\n): AccordionHeaderState => {\n  const state = useAccordionHeaderBase_unstable(props, ref);\n  const { dir } = useFluent();\n\n  // Calculate how to rotate the expand icon [>] (ChevronRightRegular)\n  let expandIconRotation: 0 | 90 | -90 | 180;\n  if (state.expandIconPosition === 'end') {\n    // If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed\n    expandIconRotation = state.open ? -90 : 90;\n  } else {\n    // Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed\n    expandIconRotation = state.open ? 90 : dir !== 'rtl' ? 0 : 180;\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.children ??= (\n      <ChevronRightRegular\n        style={{\n          transform: `rotate(${expandIconRotation}deg)`,\n          transition: `transform ${motionTokens.durationNormal}ms ease-out`,\n        }}\n      />\n    );\n  }\n\n  return state;\n};\n\n/**\n * Base state hook for AccordionHeader, without design related features.\n *\n * @param props - AccordionHeader properties\n * @param ref - reference to root HTMLElement of AccordionHeader\n */\nexport const useAccordionHeaderBase_unstable = (\n  props: AccordionHeaderProps,\n  ref: React.Ref<HTMLElement>,\n): AccordionHeaderState => {\n  const { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start', ...rest } = props;\n  const { value, disabled, open } = useAccordionItemContext_unstable();\n  const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);\n\n  /**\n   * force disabled state on button if accordion isn't collapsible\n   * and this is the only item opened\n   */\n  const disabledFocusable = useAccordionContext_unstable(ctx => !ctx.collapsible && ctx.openItems.length === 1 && open);\n\n  const buttonSlot = slot.always(button, {\n    elementType: 'button',\n    defaultProps: {\n      disabled,\n      disabledFocusable,\n      'aria-expanded': open,\n      type: 'button',\n    },\n  });\n\n  buttonSlot.onClick = useEventCallback(event => {\n    if (isResolvedShorthand(button)) {\n      button.onClick?.(event);\n    }\n    if (!event.defaultPrevented) {\n      requestToggle({ value, event });\n    }\n  });\n\n  return {\n    disabled,\n    open,\n    size,\n    inline,\n    expandIconPosition,\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      icon: 'div',\n    },\n    root: slot.always(\n      {\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...rest,\n      },\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(icon, { elementType: 'div' }),\n    expandIcon: slot.optional(expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    button: useARIAButtonProps(buttonSlot.as, buttonSlot),\n  };\n};\n"],"names":["React","useEventCallback","slot","isResolvedShorthand","useARIAButtonProps","useAccordionContext_unstable","ChevronRightRegular","useFluent_unstable","useFluent","useAccordionItemContext_unstable","motionTokens","useAccordionHeader_unstable","props","ref","state","useAccordionHeaderBase_unstable","dir","expandIconRotation","expandIconPosition","open","expandIcon","children","style","transform","transition","durationNormal","icon","button","inline","size","rest","value","disabled","requestToggle","ctx","disabledFocusable","collapsible","openItems","length","buttonSlot","always","elementType","defaultProps","type","onClick","event","defaultPrevented","components","root","optional","renderByDefault","as"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,IAAI,EAAEC,mBAAmB,QAAQ,4BAA4B;AACxF,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,4BAA4B,QAAQ,2BAA2B;AACxE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,gCAAgC,QAAQ,+BAA+B;AAChF,SAASC,YAAY,QAAQ,yBAAyB;AAEtD;;;;;CAKC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,QAAQC,gCAAgCH,OAAOC;IACrD,MAAM,EAAEG,GAAG,EAAE,GAAGR;IAEhB,oEAAoE;IACpE,IAAIS;IACJ,IAAIH,MAAMI,kBAAkB,KAAK,OAAO;QACtC,8FAA8F;QAC9FD,qBAAqBH,MAAMK,IAAI,GAAG,CAAC,KAAK;IAC1C,OAAO;QACL,mGAAmG;QACnGF,qBAAqBH,MAAMK,IAAI,GAAG,KAAKH,QAAQ,QAAQ,IAAI;IAC7D;IAEA,IAAIF,MAAMM,UAAU,EAAE;YACpBN;;QAAAA,cAAAA,oBAAAA,MAAMM,UAAU,EAACC,yDAAjBP,kBAAiBO,yBACf,oBAACf;YACCgB,OAAO;gBACLC,WAAW,CAAC,OAAO,EAAEN,mBAAmB,IAAI,CAAC;gBAC7CO,YAAY,CAAC,UAAU,EAAEd,aAAae,cAAc,CAAC,WAAW,CAAC;YACnE;;IAGN;IAEA,OAAOX;AACT,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,kCAAkC,CAC7CH,OACAC;IAEA,MAAM,EAAEa,IAAI,EAAEC,MAAM,EAAEP,UAAU,EAAEQ,SAAS,KAAK,EAAEC,OAAO,QAAQ,EAAEX,qBAAqB,OAAO,EAAE,GAAGY,MAAM,GAAGlB;IAC7G,MAAM,EAAEmB,KAAK,EAAEC,QAAQ,EAAEb,IAAI,EAAE,GAAGV;IAClC,MAAMwB,gBAAgB5B,6BAA6B6B,CAAAA,MAAOA,IAAID,aAAa;IAE3E;;;GAGC,GACD,MAAME,oBAAoB9B,6BAA6B6B,CAAAA,MAAO,CAACA,IAAIE,WAAW,IAAIF,IAAIG,SAAS,CAACC,MAAM,KAAK,KAAKnB;IAEhH,MAAMoB,aAAarC,KAAKsC,MAAM,CAACb,QAAQ;QACrCc,aAAa;QACbC,cAAc;YACZV;YACAG;YACA,iBAAiBhB;YACjBwB,MAAM;QACR;IACF;IAEAJ,WAAWK,OAAO,GAAG3C,iBAAiB4C,CAAAA;QACpC,IAAI1C,oBAAoBwB,SAAS;gBAC/BA;aAAAA,kBAAAA,OAAOiB,OAAO,cAAdjB,sCAAAA,qBAAAA,QAAiBkB;QACnB;QACA,IAAI,CAACA,MAAMC,gBAAgB,EAAE;YAC3Bb,cAAc;gBAAEF;gBAAOc;YAAM;QAC/B;IACF;IAEA,OAAO;QACLb;QACAb;QACAU;QACAD;QACAV;QACA6B,YAAY;YACVC,MAAM;YACNrB,QAAQ;YACRP,YAAY;YACZM,MAAM;QACR;QACAsB,MAAM9C,KAAKsC,MAAM,CACf;YACE3B,KAAKA;YACL,GAAGiB,IAAI;QACT,GACA;YAAEW,aAAa;QAAM;QAEvBf,MAAMxB,KAAK+C,QAAQ,CAACvB,MAAM;YAAEe,aAAa;QAAM;QAC/CrB,YAAYlB,KAAK+C,QAAQ,CAAC7B,YAAY;YACpC8B,iBAAiB;YACjBR,cAAc;gBACZ,eAAe;YACjB;YACAD,aAAa;QACf;QACAd,QAAQvB,mBAAmBmC,WAAWY,EAAE,EAAEZ;IAC5C;AACF,EAAE"}

package/lib/components/AccordionItem/useAccordionItem.js

@@ -1,13 +1,13 @@
 'use client';
 import * as React from 'react';
-import { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';
+import { slot, useEventCallback } from '@fluentui/react-utilities';
 import { useAccordionContext_unstable } from '../../contexts/accordion';
 /**
  * Returns the props and state required to render the component
  * @param props - AccordionItem properties
  * @param ref - reference to root HTMLElement of AccordionItem
  */ export const useAccordionItem_unstable = (props, ref)=>{
-    const { value, disabled = false } = props;
+    const { value, disabled = false, ...rest } = props;
     const requestToggle = useAccordionContext_unstable((ctx)=>ctx.requestToggle);
     const open = useAccordionContext_unstable((ctx)=>ctx.openItems.includes(value));
     const onAccordionHeaderClick = useEventCallback((event)=>requestToggle({
@@ -22,13 +22,11 @@ import { useAccordionContext_unstable } from '../../contexts/accordion';
         components: {
             root: 'div'
         },
-        root: slot.always(getIntrinsicElementProps('div', {
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+        root: slot.always({
+            disabled,
             ref: ref,
-            ...props
-        }), {
+            ...rest
+        }, {
             elementType: 'div'
         })
     };

package/lib/components/AccordionItem/useAccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AccordionItem/useAccordionItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n  props: AccordionItemProps,\n  ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n  const { value, disabled = false } = props;\n\n  const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);\n  const open = useAccordionContext_unstable(ctx => ctx.openItems.includes(value));\n  const onAccordionHeaderClick = useEventCallback((event: AccordionToggleEvent) => requestToggle({ event, value }));\n\n  return {\n    open,\n    value,\n    disabled,\n    onHeaderClick: onAccordionHeaderClick,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","useAccordionContext_unstable","useAccordionItem_unstable","props","ref","value","disabled","requestToggle","ctx","open","openItems","includes","onAccordionHeaderClick","event","onHeaderClick","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAG7F,SAASC,4BAA4B,QAAQ,2BAA2B;AAExE;;;;CAIC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAEpC,MAAMI,gBAAgBN,6BAA6BO,CAAAA,MAAOA,IAAID,aAAa;IAC3E,MAAME,OAAOR,6BAA6BO,CAAAA,MAAOA,IAAIE,SAAS,CAACC,QAAQ,CAACN;IACxE,MAAMO,yBAAyBZ,iBAAiB,CAACa,QAAgCN,cAAc;YAAEM;YAAOR;QAAM;IAE9G,OAAO;QACLI;QACAJ;QACAC;QACAQ,eAAeF;QACfG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMjB,KAAKkB,MAAM,CACfnB,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FM,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEe,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/AccordionItem/useAccordionItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n  props: AccordionItemProps,\n  ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n  const { value, disabled = false, ...rest } = props;\n\n  const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);\n  const open = useAccordionContext_unstable(ctx => ctx.openItems.includes(value));\n  const onAccordionHeaderClick = useEventCallback((event: AccordionToggleEvent) => requestToggle({ event, value }));\n\n  return {\n    open,\n    value,\n    disabled,\n    onHeaderClick: onAccordionHeaderClick,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      {\n        disabled,\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...rest,\n      },\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","slot","useEventCallback","useAccordionContext_unstable","useAccordionItem_unstable","props","ref","value","disabled","rest","requestToggle","ctx","open","openItems","includes","onAccordionHeaderClick","event","onHeaderClick","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAGnE,SAASC,4BAA4B,QAAQ,2BAA2B;AAExE;;;;CAIC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAE7C,MAAMK,gBAAgBP,6BAA6BQ,CAAAA,MAAOA,IAAID,aAAa;IAC3E,MAAME,OAAOT,6BAA6BQ,CAAAA,MAAOA,IAAIE,SAAS,CAACC,QAAQ,CAACP;IACxE,MAAMQ,yBAAyBb,iBAAiB,CAACc,QAAgCN,cAAc;YAAEM;YAAOT;QAAM;IAE9G,OAAO;QACLK;QACAL;QACAC;QACAS,eAAeF;QACfG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMlB,KAAKmB,MAAM,CACf;YACEZ;YACAF,KAAKA;YACL,GAAGG,IAAI;QACT,GACA;YAAEY,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/AccordionPanel/AccordionPanel.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AccordionPanel/AccordionPanel.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionPanelSlots = {\n  root: NonNullable<Slot<'div'>>;\n  collapseMotion?: Slot<PresenceMotionSlotProps>;\n};\n\nexport type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;\n\nexport type AccordionPanelState = ComponentState<AccordionPanelSlots> & {\n  /**\n   * Internal open state, provided by context.\n   */\n  open: boolean;\n};\n"],"names":[],"mappings":"AAUA,WAKE"}
+{"version":3,"sources":["../src/components/AccordionPanel/AccordionPanel.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionPanelSlots = {\n  root: NonNullable<Slot<'div'>>;\n  collapseMotion?: Slot<PresenceMotionSlotProps>;\n};\n\nexport type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;\n\nexport type AccordionPanelBaseProps = ComponentProps<Omit<AccordionPanelSlots, 'collapseMotion'>>;\n\nexport type AccordionPanelState = ComponentState<AccordionPanelSlots> & {\n  /**\n   * Internal open state, provided by context.\n   */\n  open: boolean;\n};\n\nexport type AccordionPanelBaseState = ComponentState<Omit<AccordionPanelSlots, 'collapseMotion'>> &\n  Pick<AccordionPanelState, 'open'>;\n"],"names":[],"mappings":"AAmBA,WACoC"}

package/lib/components/AccordionPanel/index.js

@@ -1,4 +1,4 @@
 export { AccordionPanel } from './AccordionPanel';
 export { renderAccordionPanel_unstable } from './renderAccordionPanel';
-export { useAccordionPanel_unstable } from './useAccordionPanel';
+export { useAccordionPanel_unstable, useAccordionPanelBase_unstable } from './useAccordionPanel';
 export { accordionPanelClassNames, useAccordionPanelStyles_unstable } from './useAccordionPanelStyles.styles';

package/lib/components/AccordionPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AccordionPanel/index.ts"],"sourcesContent":["export { AccordionPanel } from './AccordionPanel';\nexport type { AccordionPanelProps, AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';\nexport { renderAccordionPanel_unstable } from './renderAccordionPanel';\nexport { useAccordionPanel_unstable } from './useAccordionPanel';\nexport { accordionPanelClassNames, useAccordionPanelStyles_unstable } from './useAccordionPanelStyles.styles';\n"],"names":["AccordionPanel","renderAccordionPanel_unstable","useAccordionPanel_unstable","accordionPanelClassNames","useAccordionPanelStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}
+{"version":3,"sources":["../src/components/AccordionPanel/index.ts"],"sourcesContent":["export { AccordionPanel } from './AccordionPanel';\nexport type {\n  AccordionPanelProps,\n  AccordionPanelSlots,\n  AccordionPanelState,\n  AccordionPanelBaseProps,\n  AccordionPanelBaseState,\n} from './AccordionPanel.types';\nexport { renderAccordionPanel_unstable } from './renderAccordionPanel';\nexport { useAccordionPanel_unstable, useAccordionPanelBase_unstable } from './useAccordionPanel';\nexport { accordionPanelClassNames, useAccordionPanelStyles_unstable } from './useAccordionPanelStyles.styles';\n"],"names":["AccordionPanel","renderAccordionPanel_unstable","useAccordionPanel_unstable","useAccordionPanelBase_unstable","accordionPanelClassNames","useAccordionPanelStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,EAAEC,8BAA8B,QAAQ,sBAAsB;AACjG,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}

package/lib/components/AccordionPanel/useAccordionPanel.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { slot } from '@fluentui/react-utilities';
 import { useTabsterAttributes } from '@fluentui/react-tabster';
 import { presenceMotionSlot } from '@fluentui/react-motion';
 import { Collapse } from '@fluentui/react-motion-components-preview';
@@ -11,7 +11,8 @@ import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
  * @param props - AccordionPanel properties
  * @param ref - reference to root HTMLElement of AccordionPanel
  */ export const useAccordionPanel_unstable = (props, ref)=>{
-    const { open } = useAccordionItemContext_unstable();
+    const { collapseMotion, ...baseProps } = props;
+    const state = useAccordionPanelBase_unstable(baseProps, ref);
     const focusableProps = useTabsterAttributes({
         focusable: {
             excludeFromMover: true
@@ -19,27 +20,42 @@ import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
     });
     const navigation = useAccordionContext_unstable((ctx)=>ctx.navigation);
     return {
-        open,
+        ...state,
         components: {
-            root: 'div',
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
             collapseMotion: Collapse
         },
-        root: slot.always(getIntrinsicElementProps('div', {
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-            ref: ref,
-            ...props,
+        root: {
+            ...state.root,
             ...navigation && focusableProps
-        }), {
-            elementType: 'div'
-        }),
+        },
         collapseMotion: presenceMotionSlot(props.collapseMotion, {
             elementType: Collapse,
             defaultProps: {
-                visible: open,
+                visible: state.open,
                 unmountOnExit: true
             }
         })
     };
 };
+/**
+ * Base state hook for AccordionPanel, without design related features.
+ *
+ * @param props - AccordionPanelBaseProps properties
+ * @param ref - reference to root HTMLElement of AccordionPanel
+ */ export const useAccordionPanelBase_unstable = (props, ref)=>{
+    const { open } = useAccordionItemContext_unstable();
+    return {
+        open,
+        components: {
+            root: 'div'
+        },
+        root: slot.always({
+            ref: ref,
+            ...props
+        }, {
+            elementType: 'div'
+        })
+    };
+};

package/lib/components/AccordionPanel/useAccordionPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AccordionPanel/useAccordionPanel.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport type { AccordionPanelProps, AccordionPanelState } from './AccordionPanel.types';\nimport { useAccordionItemContext_unstable } from '../../contexts/accordionItem';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionPanel properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanel_unstable = (\n  props: AccordionPanelProps,\n  ref: React.Ref<HTMLElement>,\n): AccordionPanelState => {\n  const { open } = useAccordionItemContext_unstable();\n  const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n  const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n  return {\n    open,\n    components: {\n      root: 'div',\n      collapseMotion: Collapse,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n        ...(navigation && focusableProps),\n      }),\n      { elementType: 'div' },\n    ),\n    collapseMotion: presenceMotionSlot(props.collapseMotion, {\n      elementType: Collapse,\n      defaultProps: {\n        visible: open,\n        unmountOnExit: true,\n      },\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTabsterAttributes","presenceMotionSlot","Collapse","useAccordionContext_unstable","useAccordionItemContext_unstable","useAccordionPanel_unstable","props","ref","open","focusableProps","focusable","excludeFromMover","navigation","ctx","components","root","collapseMotion","always","elementType","defaultProps","visible","unmountOnExit"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,QAAQ,QAAQ,4CAA4C;AACrE,SAASC,4BAA4B,QAAQ,2BAA2B;AAExE,SAASC,gCAAgC,QAAQ,+BAA+B;AAEhF;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGJ;IACjB,MAAMK,iBAAiBT,qBAAqB;QAAEU,WAAW;YAAEC,kBAAkB;QAAK;IAAE;IACpF,MAAMC,aAAaT,6BAA6BU,CAAAA,MAAOA,IAAID,UAAU;IAErE,OAAO;QACLJ;QACAM,YAAY;YACVC,MAAM;YACNC,gBAAgBd;QAClB;QACAa,MAAMhB,KAAKkB,MAAM,CACfnB,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FS,KAAKA;YACL,GAAGD,KAAK;YACR,GAAIM,cAAcH,cAAc;QAClC,IACA;YAAES,aAAa;QAAM;QAEvBF,gBAAgBf,mBAAmBK,MAAMU,cAAc,EAAE;YACvDE,aAAahB;YACbiB,cAAc;gBACZC,SAASZ;gBACTa,eAAe;YACjB;QACF;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/AccordionPanel/useAccordionPanel.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport type {\n  AccordionPanelBaseProps,\n  AccordionPanelBaseState,\n  AccordionPanelProps,\n  AccordionPanelState,\n} from './AccordionPanel.types';\nimport { useAccordionItemContext_unstable } from '../../contexts/accordionItem';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionPanel properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanel_unstable = (\n  props: AccordionPanelProps,\n  ref: React.Ref<HTMLElement>,\n): AccordionPanelState => {\n  const { collapseMotion, ...baseProps } = props;\n  const state = useAccordionPanelBase_unstable(baseProps, ref);\n  const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n  const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n  return {\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      collapseMotion: Collapse,\n    },\n    root: {\n      ...state.root,\n      ...(navigation && focusableProps),\n    },\n    collapseMotion: presenceMotionSlot(props.collapseMotion, {\n      elementType: Collapse,\n      defaultProps: {\n        visible: state.open,\n        unmountOnExit: true,\n      },\n    }),\n  };\n};\n\n/**\n * Base state hook for AccordionPanel, without design related features.\n *\n * @param props - AccordionPanelBaseProps properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanelBase_unstable = (\n  props: AccordionPanelBaseProps,\n  ref: React.Ref<HTMLElement>,\n): AccordionPanelBaseState => {\n  const { open } = useAccordionItemContext_unstable();\n\n  return {\n    open,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      {\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      },\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","slot","useTabsterAttributes","presenceMotionSlot","Collapse","useAccordionContext_unstable","useAccordionItemContext_unstable","useAccordionPanel_unstable","props","ref","collapseMotion","baseProps","state","useAccordionPanelBase_unstable","focusableProps","focusable","excludeFromMover","navigation","ctx","components","root","elementType","defaultProps","visible","open","unmountOnExit","always"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,QAAQ,QAAQ,4CAA4C;AACrE,SAASC,4BAA4B,QAAQ,2BAA2B;AAOxE,SAASC,gCAAgC,QAAQ,+BAA+B;AAEhF;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGC,WAAW,GAAGH;IACzC,MAAMI,QAAQC,+BAA+BF,WAAWF;IACxD,MAAMK,iBAAiBZ,qBAAqB;QAAEa,WAAW;YAAEC,kBAAkB;QAAK;IAAE;IACpF,MAAMC,aAAaZ,6BAA6Ba,CAAAA,MAAOA,IAAID,UAAU;IAErE,OAAO;QACL,GAAGL,KAAK;QACRO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,MAAMO,UAAU;YACnBT,gBAAgBN;QAClB;QACAgB,MAAM;YACJ,GAAGR,MAAMQ,IAAI;YACb,GAAIH,cAAcH,cAAc;QAClC;QACAJ,gBAAgBP,mBAAmBK,MAAME,cAAc,EAAE;YACvDW,aAAajB;YACbkB,cAAc;gBACZC,SAASX,MAAMY,IAAI;gBACnBC,eAAe;YACjB;QACF;IACF;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMZ,iCAAiC,CAC5CL,OACAC;IAEA,MAAM,EAAEe,IAAI,EAAE,GAAGlB;IAEjB,OAAO;QACLkB;QACAL,YAAY;YACVC,MAAM;QACR;QACAA,MAAMnB,KAAKyB,MAAM,CACf;YACEjB,KAAKA;YACL,GAAGD,KAAK;QACV,GACA;YAAEa,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/index.js

@@ -5,3 +5,9 @@ export { AccordionPanel, accordionPanelClassNames, renderAccordionPanel_unstable
 export { AccordionProvider, useAccordionContext_unstable } from './contexts/accordion';
 export { AccordionItemProvider, useAccordionItemContext_unstable } from './contexts/accordionItem';
 export { AccordionHeaderProvider, useAccordionHeaderContext_unstable } from './contexts/accordionHeader';
+ // Experimental APIs
+ // export type { AccordionBaseState, AccordionBaseProps } from './Accordion';
+ // export { useAccordionBase_unstable } from './Accordion';
+ // export { useAccordionHeaderBase_unstable } from './AccordionHeader';
+ // export type { AccordionPanelBaseState, AccordionPanelBaseProps } from './AccordionPanel';
+ // export { useAccordionPanelBase_unstable } from './AccordionPanel';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Accordion,\n  accordionClassNames,\n  renderAccordion_unstable,\n  useAccordionContextValues_unstable,\n  useAccordionStyles_unstable,\n  useAccordion_unstable,\n} from './Accordion';\nexport type {\n  AccordionContextValues,\n  AccordionIndex,\n  AccordionProps,\n  AccordionSlots,\n  AccordionState,\n  AccordionToggleData,\n  AccordionToggleEvent,\n  AccordionToggleEventHandler,\n} from './Accordion';\nexport {\n  AccordionItem,\n  accordionItemClassNames,\n  renderAccordionItem_unstable,\n  useAccordionItemContextValues_unstable,\n  useAccordionItemStyles_unstable,\n  useAccordionItem_unstable,\n} from './AccordionItem';\nexport type {\n  AccordionItemContextValues,\n  AccordionItemProps,\n  AccordionItemSlots,\n  AccordionItemState,\n  AccordionItemValue,\n} from './AccordionItem';\nexport {\n  AccordionHeader,\n  accordionHeaderClassNames,\n  renderAccordionHeader_unstable,\n  useAccordionHeaderContextValues_unstable,\n  useAccordionHeaderStyles_unstable,\n  useAccordionHeader_unstable,\n} from './AccordionHeader';\nexport type {\n  AccordionHeaderContextValues,\n  AccordionHeaderExpandIconPosition,\n  AccordionHeaderProps,\n  AccordionHeaderSize,\n  AccordionHeaderSlots,\n  AccordionHeaderState,\n} from './AccordionHeader';\nexport {\n  AccordionPanel,\n  accordionPanelClassNames,\n  renderAccordionPanel_unstable,\n  useAccordionPanelStyles_unstable,\n  useAccordionPanel_unstable,\n} from './AccordionPanel';\nexport type { AccordionPanelProps, AccordionPanelSlots, AccordionPanelState } from './AccordionPanel';\n\nexport { AccordionProvider, useAccordionContext_unstable } from './contexts/accordion';\n\nexport type { AccordionContextValue } from './contexts/accordion';\n\nexport { AccordionItemProvider, useAccordionItemContext_unstable } from './contexts/accordionItem';\n\nexport type { AccordionItemContextValue } from './contexts/accordionItem';\n\nexport { AccordionHeaderProvider, useAccordionHeaderContext_unstable } from './contexts/accordionHeader';\n\nexport type { AccordionHeaderContextValue } from './contexts/accordionHeader';\n"],"names":["Accordion","accordionClassNames","renderAccordion_unstable","useAccordionContextValues_unstable","useAccordionStyles_unstable","useAccordion_unstable","AccordionItem","accordionItemClassNames","renderAccordionItem_unstable","useAccordionItemContextValues_unstable","useAccordionItemStyles_unstable","useAccordionItem_unstable","AccordionHeader","accordionHeaderClassNames","renderAccordionHeader_unstable","useAccordionHeaderContextValues_unstable","useAccordionHeaderStyles_unstable","useAccordionHeader_unstable","AccordionPanel","accordionPanelClassNames","renderAccordionPanel_unstable","useAccordionPanelStyles_unstable","useAccordionPanel_unstable","AccordionProvider","useAccordionContext_unstable","AccordionItemProvider","useAccordionItemContext_unstable","AccordionHeaderProvider","useAccordionHeaderContext_unstable"],"mappings":"AAAA,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,kCAAkC,EAClCC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc;AAWrB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,sCAAsC,EACtCC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAQzB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,wCAAwC,EACxCC,iCAAiC,EACjCC,2BAA2B,QACtB,oBAAoB;AAS3B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SAASC,iBAAiB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAIvF,SAASC,qBAAqB,EAAEC,gCAAgC,QAAQ,2BAA2B;AAInG,SAASC,uBAAuB,EAAEC,kCAAkC,QAAQ,6BAA6B"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Accordion,\n  accordionClassNames,\n  renderAccordion_unstable,\n  useAccordionContextValues_unstable,\n  useAccordionStyles_unstable,\n  useAccordion_unstable,\n} from './Accordion';\nexport type {\n  AccordionContextValues,\n  AccordionIndex,\n  AccordionProps,\n  AccordionSlots,\n  AccordionState,\n  AccordionToggleData,\n  AccordionToggleEvent,\n  AccordionToggleEventHandler,\n} from './Accordion';\nexport {\n  AccordionItem,\n  accordionItemClassNames,\n  renderAccordionItem_unstable,\n  useAccordionItemContextValues_unstable,\n  useAccordionItemStyles_unstable,\n  useAccordionItem_unstable,\n} from './AccordionItem';\nexport type {\n  AccordionItemContextValues,\n  AccordionItemProps,\n  AccordionItemSlots,\n  AccordionItemState,\n  AccordionItemValue,\n} from './AccordionItem';\nexport {\n  AccordionHeader,\n  accordionHeaderClassNames,\n  renderAccordionHeader_unstable,\n  useAccordionHeaderContextValues_unstable,\n  useAccordionHeaderStyles_unstable,\n  useAccordionHeader_unstable,\n} from './AccordionHeader';\nexport type {\n  AccordionHeaderContextValues,\n  AccordionHeaderExpandIconPosition,\n  AccordionHeaderProps,\n  AccordionHeaderSize,\n  AccordionHeaderSlots,\n  AccordionHeaderState,\n} from './AccordionHeader';\nexport {\n  AccordionPanel,\n  accordionPanelClassNames,\n  renderAccordionPanel_unstable,\n  useAccordionPanelStyles_unstable,\n  useAccordionPanel_unstable,\n} from './AccordionPanel';\nexport type { AccordionPanelProps, AccordionPanelSlots, AccordionPanelState } from './AccordionPanel';\n\nexport { AccordionProvider, useAccordionContext_unstable } from './contexts/accordion';\n\nexport type { AccordionContextValue } from './contexts/accordion';\n\nexport { AccordionItemProvider, useAccordionItemContext_unstable } from './contexts/accordionItem';\n\nexport type { AccordionItemContextValue } from './contexts/accordionItem';\n\nexport { AccordionHeaderProvider, useAccordionHeaderContext_unstable } from './contexts/accordionHeader';\n\nexport type { AccordionHeaderContextValue } from './contexts/accordionHeader';\n\n// Experimental APIs\n// export type { AccordionBaseState, AccordionBaseProps } from './Accordion';\n// export { useAccordionBase_unstable } from './Accordion';\n// export { useAccordionHeaderBase_unstable } from './AccordionHeader';\n// export type { AccordionPanelBaseState, AccordionPanelBaseProps } from './AccordionPanel';\n// export { useAccordionPanelBase_unstable } from './AccordionPanel';\n"],"names":["Accordion","accordionClassNames","renderAccordion_unstable","useAccordionContextValues_unstable","useAccordionStyles_unstable","useAccordion_unstable","AccordionItem","accordionItemClassNames","renderAccordionItem_unstable","useAccordionItemContextValues_unstable","useAccordionItemStyles_unstable","useAccordionItem_unstable","AccordionHeader","accordionHeaderClassNames","renderAccordionHeader_unstable","useAccordionHeaderContextValues_unstable","useAccordionHeaderStyles_unstable","useAccordionHeader_unstable","AccordionPanel","accordionPanelClassNames","renderAccordionPanel_unstable","useAccordionPanelStyles_unstable","useAccordionPanel_unstable","AccordionProvider","useAccordionContext_unstable","AccordionItemProvider","useAccordionItemContext_unstable","AccordionHeaderProvider","useAccordionHeaderContext_unstable"],"mappings":"AAAA,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,kCAAkC,EAClCC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc;AAWrB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,sCAAsC,EACtCC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAQzB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,wCAAwC,EACxCC,iCAAiC,EACjCC,2BAA2B,QACtB,oBAAoB;AAS3B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SAASC,iBAAiB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAIvF,SAASC,qBAAqB,EAAEC,gCAAgC,QAAQ,2BAA2B;AAInG,SAASC,uBAAuB,EAAEC,kCAAkC,QAAQ,6BAA6B;CAIzG,oBAAoB;CACpB,6EAA6E;CAC7E,2DAA2D;CAC3D,uEAAuE;CACvE,4FAA4F;CAC5F,qEAAqE"}