@fluentui/react-accordion 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.4

package/CHANGELOG.md

@@ -1,26 +1,123 @@
 # Change Log - @fluentui/react-accordion
 
-This log was last generated on Tue, 19 Oct 2021 12:39:14 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Mar 2022 02:16:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [9.0.0-nightly.f81b28ceb3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-nightly.f81b28ceb3.1)
+## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-rc.4)
 
-Tue, 19 Oct 2021 12:39:14 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-beta.2..@fluentui/react-accordion_v9.0.0-nightly.f81b28ceb3.1)
+Tue, 01 Mar 2022 02:16:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-rc.3..@fluentui/react-accordion_v9.0.0-rc.4)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/0ae8560ad3e7b4cb03f3f47152dfce2f81523cca) by email not defined)
-- Bump @fluentui/react-aria to v9.0.0-nightly.f81b28ceb3.1 ([commit](https://github.com/microsoft/fluentui/commit/0ae8560ad3e7b4cb03f3f47152dfce2f81523cca) by beachball)
-- Bump @fluentui/react-context-selector to v9.0.0-nightly.f81b28ceb3.1 ([commit](https://github.com/microsoft/fluentui/commit/0ae8560ad3e7b4cb03f3f47152dfce2f81523cca) by beachball)
-- Bump @fluentui/react-make-styles to v9.0.0-nightly.f81b28ceb3.1 ([commit](https://github.com/microsoft/fluentui/commit/0ae8560ad3e7b4cb03f3f47152dfce2f81523cca) by beachball)
-- Bump @fluentui/react-tabster to v9.0.0-nightly.f81b28ceb3.1 ([commit](https://github.com/microsoft/fluentui/commit/0ae8560ad3e7b4cb03f3f47152dfce2f81523cca) by beachball)
-- Bump @fluentui/react-theme to v9.0.0-nightly.f81b28ceb3.1 ([commit](https://github.com/microsoft/fluentui/commit/0ae8560ad3e7b4cb03f3f47152dfce2f81523cca) by beachball)
-- Bump @fluentui/react-utilities to v9.0.0-nightly.f81b28ceb3.1 ([commit](https://github.com/microsoft/fluentui/commit/0ae8560ad3e7b4cb03f3f47152dfce2f81523cca) by beachball)
-- Bump @fluentui/babel-make-styles to v9.0.0-nightly.f81b28ceb3.1 ([commit](https://github.com/microsoft/fluentui/commit/0ae8560ad3e7b4cb03f3f47152dfce2f81523cca) by beachball)
-- Bump @fluentui/jest-serializer-make-styles to v9.0.0-nightly.f81b28ceb3.1 ([commit](https://github.com/microsoft/fluentui/commit/0ae8560ad3e7b4cb03f3f47152dfce2f81523cca) by beachball)
-- Bump @fluentui/react-conformance-make-styles to v9.0.0-nightly.f81b28ceb3.1 ([commit](https://github.com/microsoft/fluentui/commit/0ae8560ad3e7b4cb03f3f47152dfce2f81523cca) by beachball)
+- Bump @fluentui/react-aria to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
+
+## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-rc.3)
+
+Fri, 18 Feb 2022 13:35:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-rc.1..@fluentui/react-accordion_v9.0.0-rc.3)
+
+### Changes
+
+- Updates initial open items value to be empty on every case ([PR #21728](https://github.com/microsoft/fluentui/pull/21728) by bsunderhus@microsoft.com)
+- fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
+- Breaking change: navigable becomes navigation ([PR #21729](https://github.com/microsoft/fluentui/pull/21729) by bsunderhus@microsoft.com)
+- Bump @fluentui/react-aria to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+
+## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-rc.1)
+
+Thu, 10 Feb 2022 08:52:11 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-beta.5..@fluentui/react-accordion_v9.0.0-rc.1)
+
+### Changes
+
+- update @fluentui/react-icons package ([PR #21498](https://github.com/microsoft/fluentui/pull/21498) by olfedias@microsoft.com)
+- update styles to not use CSS shorthands ([PR #20800](https://github.com/microsoft/fluentui/pull/20800) by olfedias@microsoft.com)
+- remove export of commons types ([PR #21660](https://github.com/microsoft/fluentui/pull/21660) by mgodbolt@microsoft.com)
+- Refactor component Slot typings ([PR #21518](https://github.com/microsoft/fluentui/pull/21518) by behowell@microsoft.com)
+- Allow React 17 in peerDependencies. ([PR #21544](https://github.com/microsoft/fluentui/pull/21544) by tristan.watanabe@gmail.com)
+- Remove component's shorthandProps array ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com)
+- use Griffel packages ([PR #21394](https://github.com/microsoft/fluentui/pull/21394) by olfedias@microsoft.com)
+- Using ComponentSlotProps instead of ObjectShorthandProps. ([PR #20890](https://github.com/microsoft/fluentui/pull/20890) by Humberto.Morimoto@microsoft.com)
+- Removes children as a slot from AccordionHeader ([PR #21285](https://github.com/microsoft/fluentui/pull/21285) by bsunderhus@microsoft.com)
+- Bump Fluent UI packages to 9.0.0-rc ([PR #21623](https://github.com/microsoft/fluentui/pull/21623) by lingfangao@hotmail.com)
+- update semantic elements and ARIA roles in react-accordion, add heading level story ([PR #21401](https://github.com/microsoft/fluentui/pull/21401) by sarah.higley@microsoft.com)
+- Update react-icons usage to resizable icons ([PR #21074](https://github.com/microsoft/fluentui/pull/21074) by ololubek@microsoft.com)
+- BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet ([PR #21365](https://github.com/microsoft/fluentui/pull/21365) by behowell@microsoft.com)
+- Updating based on changes to composition types. ([PR #20891](https://github.com/microsoft/fluentui/pull/20891) by Humberto.Morimoto@microsoft.com)
+- Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster. ([PR #21035](https://github.com/microsoft/fluentui/pull/21035) by Humberto.Morimoto@microsoft.com)
+- Replacing use of functions in makeStyles with direct use of tokens. ([PR #21036](https://github.com/microsoft/fluentui/pull/21036) by Humberto.Morimoto@microsoft.com)
+- Remove AccordionHeaderExpandIcon, and use ChevronRightRegular from @fluentui/react-icons instead ([PR #21218](https://github.com/microsoft/fluentui/pull/21218) by behowell@microsoft.com)
+- Bump @fluentui/react-aria to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+
+## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-beta.5)
+
+Thu, 25 Nov 2021 08:34:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-beta.4..@fluentui/react-accordion_v9.0.0-beta.5)
+
+### Changes
+
+- Bump @fluentui/react-aria to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-beta.5 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+
+## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-beta.4)
+
+Fri, 12 Nov 2021 13:25:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-beta.3..@fluentui/react-accordion_v9.0.0-beta.4)
+
+### Changes
+
+- export static classes for components ([PR #20451](https://github.com/microsoft/fluentui/pull/20451) by olfedias@microsoft.com)
+- Updating AccordionHeader tests to match changes in useARIAButton. ([PR #20342](https://github.com/microsoft/fluentui/pull/20342) by Humberto.Morimoto@microsoft.com)
+- Updated beta and RC components to ES2019 ([PR #20405](https://github.com/microsoft/fluentui/pull/20405) by gcox@microsoft.com)
+- Bump @fluentui/react-aria to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/react-make-styles to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-beta.4 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+
+## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-beta.3)
+
+Wed, 27 Oct 2021 12:14:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-beta.2..@fluentui/react-accordion_v9.0.0-beta.3)
+
+### Changes
+
+- added styling of documentation ([PR #20193](https://github.com/microsoft/fluentui/pull/20193) by peter@draxler.ml)
+- Bump @fluentui/react-aria to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/react-make-styles to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-beta.3 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
 
 ## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-beta.2)
 

package/Spec.md

@@ -37,9 +37,10 @@ The root level component serves context and common API between all children.
 export type AccordionProps = ComponentProps &
   React.HTMLAttributes<HTMLElement> & {
     /**
-     * Indicates if keyboard navigation is available
+     * Indicates if keyboard navigation is available and gives two options,
+     * linear or circular navigation
      */
-    navigable?: boolean;
+    navigation?: 'linear' | 'circular';
     /**
      * Indicates if Accordion support multiple Panels opened at the same time
      */
@@ -410,6 +411,37 @@ As a general rule, once the accordion is closed the focus should return to the h
 | Keyboard | Home       | Moves Focus | Moves focus to the first panel heading                      |
 | Keyboard | End        | Moves Focus | Moves focus to the last panel heading                       |
 
-## Accessibiltiy
+## Accessibility
 
-Accessibility behaviour is built into the spec as much as possible. This section addresses specific issues that don't fit well with the standard definition of the component.
+Accessibility behavior is built into the spec as much as possible. This section addresses specific issues that don't fit well with the standard definition of the component.
+
+### No heading level on `AccordionHeader` by default
+
+As described on [WAI-ARIA Roles, States, and Properties](https://www.w3.org/TR/wai-aria-practices/#wai-aria-roles-states-and-properties) documentation for accordion:
+
+> Each accordion header button is wrapped in an element with role heading that has a value set for aria-level that is appropriate for the information architecture of the page.
+
+Every `AccordionHeader` should have as its root a semantic heading element: `h1`, `h2`, `h3`, `h4`, `h5` or `h6`. Alternatively `role="heading"` and a proper `aria-level` attribute. This behavior is not implemented by default on `AccordionHeader` as it's impossible to predict which heading level will be required by the user. Requiring manual addition of such ARIA requirement.
+
+```tsx
+{/* No heading level by default */}
+<AccordionHeader>This is a header</AccordionHeader>
+{/* Generated html */}
+<div>
+  <button>This is a header</button>
+</div>
+
+{/* as semantic heading */}
+<AccordionHeader as="h4">This is a header</AccordionHeader>
+{/* Generated html */}
+<h4>
+  <button>This is a header</button>
+</h4>
+
+{/* if no semantic heading can be used */}
+<AccordionHeader role="heading" aria-level="4">This is a header</AccordionHeader>
+{/* Generated html */}
+<div role="heading" aria-level="4">
+  <button>This is a header</button>
+</h4>
+```

package/dist/react-accordion.d.ts

@@ -1,22 +1,24 @@
-import type { ARIAButtonShorthandProps } from '@fluentui/react-aria';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { Context } from '@fluentui/react-context-selector';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
-import type { ObjectShorthandProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
 
 /**
- * Define a styled Accordion, using the `useAccordion` and `useAccordionStyles` hooks.
+ * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.
  */
 export declare const Accordion: ForwardRefComponent<AccordionProps>;
 
-export declare type AccordionCommons = {
+export declare const accordionClassName = "fui-Accordion";
+
+declare type AccordionCommons = {
     /**
-     * Indicates if keyboard navigation is available
+     * Indicates if keyboard navigation is available and gives two options,
+     * linear or circular navigation
      */
-    navigable: boolean;
+    navigation?: 'linear' | 'circular';
     /**
      * Indicates if Accordion support multiple Panels opened at the same time
      */
@@ -46,11 +48,14 @@ export declare type AccordionContextValues = {
 };
 
 /**
- * Define a styled AccordionHeader, using the `useAccordionHeader` and `useAccordionHeaderStyles` hooks.
+ * Define a styled AccordionHeader, using the `useAccordionHeader_unstable` and `useAccordionHeaderStyles_unstable`
+ * hooks.
  */
 export declare const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
 
-export declare type AccordionHeaderCommons = {
+export declare const accordionHeaderClassName = "fui-AccordionHeader";
+
+declare type AccordionHeaderCommons = {
     /**
      * Size of spacing in the heading
      */
@@ -76,36 +81,29 @@ export declare type AccordionHeaderContextValues = {
     accordionHeader: AccordionHeaderContextValue;
 };
 
-export declare const AccordionHeaderExpandIcon: ForwardRefComponent<AccordionHeaderExpandIconProps>;
-
 export declare type AccordionHeaderExpandIconPosition = 'start' | 'end';
 
-export declare type AccordionHeaderExpandIconProps = IntrinsicShorthandProps<'span'>;
-
-export declare type AccordionHeaderProps = ComponentProps<AccordionHeaderSlots> & Partial<AccordionHeaderCommons>;
-
-/**
- * Const listing which props are shorthand props.
- */
-export declare const accordionHeaderShorthandProps: Array<keyof AccordionHeaderSlots>;
+export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & Partial<AccordionHeaderCommons>;
 
 export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
 
 export declare type AccordionHeaderSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    /**
+     * The element wrapping the button. By default this is a div, but can be a heading.
+     */
+    root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
     /**
      * The component to be used as button in heading
      */
-    button: ARIAButtonShorthandProps;
+    button: NonNullable<Slot<ARIAButtonSlotProps>>;
     /**
      * Expand icon slot rendered before (or after) children content in heading
      */
-    expandIcon: AccordionHeaderExpandIconProps;
+    expandIcon: Slot<'span'>;
     /**
      * Expand icon slot rendered before (or after) children content in heading
      */
-    icon?: IntrinsicShorthandProps<'div'>;
-    children: ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>>;
+    icon?: Slot<'div'>;
 };
 
 export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & AccordionHeaderCommons & AccordionHeaderContextValue;
@@ -113,11 +111,13 @@ export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots>
 export declare type AccordionIndex = number | number[];
 
 /**
- * Define a styled AccordionItem, using the `useAccordionItem` and `useAccordionItemStyles` hooks.
+ * Define a styled AccordionItem, using the `useAccordionItem_unstable` and `useAccordionItemStyles_unstable` hooks.
  */
 export declare const AccordionItem: ForwardRefComponent<AccordionItemProps>;
 
-export declare type AccordionItemCommons = {
+export declare const accordionItemClassName = "fui-AccordionItem";
+
+declare type AccordionItemCommons = {
     /**
      * Disables opening/closing of panel
      */
@@ -141,13 +141,8 @@ export declare type AccordionItemContextValues = {
 
 export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & Partial<AccordionItemCommons> & Pick<AccordionItemCommons, 'value'>;
 
-/**
- * Const listing which props are shorthand props.
- */
-export declare const accordionItemShorthandProps: Array<keyof AccordionItemSlots>;
-
 export declare type AccordionItemSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
 export declare type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemCommons & AccordionItemContextValue;
@@ -155,19 +150,16 @@ export declare type AccordionItemState = ComponentState<AccordionItemSlots> & Ac
 export declare type AccordionItemValue = unknown;
 
 /**
- * Define a styled AccordionPanel, using the `useAccordionPanel` and `useAccordionPanelStyles` hooks.
+ * Define a styled AccordionPanel, using the `useAccordionPanel_unstable` and `useAccordionPanelStyles_unstable` hooks.
  */
 export declare const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
 
-export declare type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
+export declare const accordionPanelClassName = "fui-AccordionPanel";
 
-/**
- * Const listing which props are shorthand props.
- */
-export declare const accordionPanelShorthandProps: Array<keyof AccordionPanelSlots>;
+export declare type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
 
 export declare type AccordionPanelSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
 export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> & {
@@ -189,10 +181,8 @@ export declare type AccordionProps = ComponentProps<AccordionSlots> & Partial<Ac
     onToggle?: AccordionToggleEventHandler;
 };
 
-export declare const accordionShorthandProps: Array<keyof AccordionSlots>;
-
 export declare type AccordionSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
 export declare type AccordionState = ComponentState<AccordionSlots> & AccordionCommons & AccordionContextValue;
@@ -208,63 +198,67 @@ export declare type AccordionToggleEventHandler = (event: AccordionToggleEvent,
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderAccordion: (state: AccordionState, contextValues: AccordionContextValues) => JSX.Element;
+export declare const renderAccordion_unstable: (state: AccordionState, contextValues: AccordionContextValues) => JSX.Element;
 
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderAccordionHeader: (state: AccordionHeaderState, contextValues: AccordionHeaderContextValues) => JSX.Element;
+export declare const renderAccordionHeader_unstable: (state: AccordionHeaderState, contextValues: AccordionHeaderContextValues) => JSX.Element;
 
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderAccordionItem: (state: AccordionItemState, contextValues: AccordionItemContextValues) => JSX.Element;
+export declare const renderAccordionItem_unstable: (state: AccordionItemState, contextValues: AccordionItemContextValues) => JSX.Element;
 
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderAccordionPanel: (state: AccordionPanelState) => JSX.Element | null;
+export declare const renderAccordionPanel_unstable: (state: AccordionPanelState) => JSX.Element | null;
 
 /**
  * Returns the props and state required to render the component
  * @param props - Accordion properties
  * @param ref - reference to root HTMLElement of Accordion
  */
-export declare const useAccordion: (props: AccordionProps, ref: React_2.Ref<HTMLElement>) => AccordionState;
+export declare const useAccordion_unstable: (props: AccordionProps, ref: React_2.Ref<HTMLElement>) => AccordionState;
 
-export declare function useAccordionContextValues(state: AccordionState): AccordionContextValues;
+export declare function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues;
 
 /**
  * Returns the props and state required to render the component
  * @param props - AccordionHeader properties
  * @param ref - reference to root HTMLElement of AccordionHeader
  */
-export declare const useAccordionHeader: (props: AccordionHeaderProps, ref: React_2.Ref<HTMLElement>) => AccordionHeaderState;
+export declare const useAccordionHeader_unstable: (props: AccordionHeaderProps, ref: React_2.Ref<HTMLElement>) => AccordionHeaderState;
 
-export declare function useAccordionHeaderContextValues(state: AccordionHeaderState): AccordionHeaderContextValues;
+export declare function useAccordionHeaderContextValues_unstable(state: AccordionHeaderState): AccordionHeaderContextValues;
 
 /** Applies style classnames to slots */
-export declare const useAccordionHeaderStyles: (state: AccordionHeaderState) => AccordionHeaderState;
+export declare const useAccordionHeaderStyles_unstable: (state: AccordionHeaderState) => AccordionHeaderState;
 
 /**
  * Returns the props and state required to render the component
  * @param props - AccordionItem properties
  * @param ref - reference to root HTMLElement of AccordionItem
  */
-export declare const useAccordionItem: (props: AccordionItemProps, ref: React_2.Ref<HTMLElement>) => AccordionItemState;
+export declare const useAccordionItem_unstable: (props: AccordionItemProps, ref: React_2.Ref<HTMLElement>) => AccordionItemState;
 
-export declare const useAccordionItemContext: () => AccordionItemContextValue;
+export declare const useAccordionItemContext_unstable: () => AccordionItemContextValue;
 
-export declare function useAccordionItemContextValues(state: AccordionItemState): AccordionItemContextValues;
+export declare function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues;
+
+export declare const useAccordionItemStyles_unstable: (state: AccordionItemState) => AccordionItemState;
 
 /**
  * Returns the props and state required to render the component
  * @param props - AccordionPanel properties
  * @param ref - reference to root HTMLElement of AccordionPanel
  */
-export declare const useAccordionPanel: (props: AccordionPanelProps, ref: React_2.Ref<HTMLElement>) => AccordionPanelState;
+export declare const useAccordionPanel_unstable: (props: AccordionPanelProps, ref: React_2.Ref<HTMLElement>) => AccordionPanelState;
 
 /** Applies style classnames to slots */
-export declare const useAccordionPanelStyles: (state: AccordionPanelState) => AccordionPanelState;
+export declare const useAccordionPanelStyles_unstable: (state: AccordionPanelState) => AccordionPanelState;
+
+export declare const useAccordionStyles_unstable: (state: AccordionState) => AccordionState;
 
 export { }

package/lib/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"Accordion.js","sourceRoot":"../src/","sources":["Accordion.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './components/Accordion/index';\n"]}

package/lib/AccordionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.js","sourceRoot":"","sources":["../src/AccordionHeader.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC"}
+{"version":3,"file":"AccordionHeader.js","sourceRoot":"../src/","sources":["AccordionHeader.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC","sourcesContent":["export * from './components/AccordionHeader/index';\n"]}

package/lib/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../src/AccordionItem.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}
+{"version":3,"file":"AccordionItem.js","sourceRoot":"../src/","sources":["AccordionItem.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/AccordionItem/index';\n"]}

package/lib/AccordionPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.js","sourceRoot":"","sources":["../src/AccordionPanel.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC"}
+{"version":3,"file":"AccordionPanel.js","sourceRoot":"../src/","sources":["AccordionPanel.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './components/AccordionPanel/index';\n"]}

package/lib/components/Accordion/Accordion.d.ts

@@ -1,6 +1,6 @@
 import type { AccordionProps } from './Accordion.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * Define a styled Accordion, using the `useAccordion` and `useAccordionStyles` hooks.
+ * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.
  */
 export declare const Accordion: ForwardRefComponent<AccordionProps>;

package/lib/components/Accordion/Accordion.js

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { renderAccordion } from './renderAccordion';
-import { useAccordion } from './useAccordion';
-import { useAccordionContextValues } from './useAccordionContextValues';
+import { renderAccordion_unstable } from './renderAccordion';
+import { useAccordion_unstable } from './useAccordion';
+import { useAccordionContextValues_unstable } from './useAccordionContextValues';
+import { useAccordionStyles_unstable } from './useAccordionStyles';
 /**
- * Define a styled Accordion, using the `useAccordion` and `useAccordionStyles` hooks.
+ * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.
  */
 
-export var Accordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useAccordion(props, ref);
-  var contextValues = useAccordionContextValues(state);
-  return renderAccordion(state, contextValues);
+export const Accordion = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useAccordion_unstable(props, ref);
+  const contextValues = useAccordionContextValues_unstable(state);
+  useAccordionStyles_unstable(state);
+  return renderAccordion_unstable(state, contextValues);
 });
 Accordion.displayName = 'Accordion';
 //# sourceMappingURL=Accordion.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,yBAAT,QAA0C,6BAA1C;AAIA;;AAEG;;AACH,OAAO,IAAM,SAAS,gBAAwC,KAAK,CAAC,UAAN,CAC5D,UAAC,KAAD,EAAQ,GAAR,EAAW;AACT,MAAM,KAAK,GAAG,YAAY,CAAC,KAAD,EAAQ,GAAR,CAA1B;AACA,MAAM,aAAa,GAAG,yBAAyB,CAAC,KAAD,CAA/C;AAEA,SAAO,eAAe,CAAC,KAAD,EAAQ,aAAR,CAAtB;AACD,CAN2D,CAAvD;AASP,SAAS,CAAC,WAAV,GAAwB,WAAxB","sourceRoot":""}
+{"version":3,"sources":["components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kCAAT,QAAmD,6BAAnD;AAGA,SAAS,2BAAT,QAA4C,sBAA5C;AAEA;;AAEG;;AACH,OAAO,MAAM,SAAS,gBAAwC,KAAK,CAAC,UAAN,CAC5D,CAAC,KAAD,EAAQ,GAAR,KAAe;AACb,QAAM,KAAK,GAAG,qBAAqB,CAAC,KAAD,EAAQ,GAAR,CAAnC;AACA,QAAM,aAAa,GAAG,kCAAkC,CAAC,KAAD,CAAxD;AAEA,EAAA,2BAA2B,CAAC,KAAD,CAA3B;AAEA,SAAO,wBAAwB,CAAC,KAAD,EAAQ,aAAR,CAA/B;AACD,CAR2D,CAAvD;AAWP,SAAS,CAAC,WAAV,GAAwB,WAAxB","sourcesContent":["import * as React from 'react';\nimport { renderAccordion_unstable } from './renderAccordion';\nimport { useAccordion_unstable } from './useAccordion';\nimport { useAccordionContextValues_unstable } from './useAccordionContextValues';\nimport type { AccordionProps } from './Accordion.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAccordionStyles_unstable } from './useAccordionStyles';\n\n/**\n * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.\n */\nexport const Accordion: ForwardRefComponent<AccordionProps> = React.forwardRef<HTMLDivElement, AccordionProps>(\n  (props, ref) => {\n    const state = useAccordion_unstable(props, ref);\n    const contextValues = useAccordionContextValues_unstable(state);\n\n    useAccordionStyles_unstable(state);\n\n    return renderAccordion_unstable(state, contextValues);\n  },\n);\n\nAccordion.displayName = 'Accordion';\n"],"sourceRoot":"../src/"}

package/lib/components/Accordion/Accordion.types.d.ts

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
 export declare type AccordionIndex = number | number[];
 export declare type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;
 export declare type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;
-export declare type AccordionCommons = {
+declare type AccordionCommons = {
     /**
-     * Indicates if keyboard navigation is available
+     * Indicates if keyboard navigation is available and gives two options,
+     * linear or circular navigation
      */
-    navigable: boolean;
+    navigation?: 'linear' | 'circular';
     /**
      * Indicates if Accordion support multiple Panels opened at the same time
      */
@@ -33,7 +34,7 @@ export declare type AccordionContextValues = {
     accordion: AccordionContextValue;
 };
 export declare type AccordionSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 export declare type AccordionToggleData = {
     value: AccordionItemValue;
@@ -50,3 +51,4 @@ export declare type AccordionProps = ComponentProps<AccordionSlots> & Partial<Ac
     onToggle?: AccordionToggleEventHandler;
 };
 export declare type AccordionState = ComponentState<AccordionSlots> & AccordionCommons & AccordionContextValue;
+export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.types.js","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Accordion.types.js","sourceRoot":"../src/","sources":["components/Accordion/Accordion.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\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 = (event: AccordionToggleEvent, data: AccordionToggleData) => void;\n\ntype AccordionCommons = {\n  /**\n   * Indicates if keyboard navigation is available and gives two options,\n   * linear or circular navigation\n   */\n  navigation?: 'linear' | 'circular';\n  /**\n   * Indicates if Accordion support multiple Panels opened at the same time\n   */\n  multiple: boolean;\n  /**\n   * Indicates if Accordion support multiple Panels closed at the same time\n   */\n  collapsible: boolean;\n};\n\nexport type AccordionContextValue = Omit<AccordionCommons, 'multiple'> & {\n  /**\n   * The list of opened panels by index\n   */\n  openItems: AccordionItemValue[];\n  /**\n   * Callback used by AccordionItem to request a change on it's own opened state\n   * Should be used to toggle AccordionItem\n   */\n  requestToggle: (event: AccordionToggleEvent, data: AccordionToggleData) => void;\n};\n\nexport type AccordionContextValues = {\n  accordion: AccordionContextValue;\n};\n\nexport type AccordionSlots = {\n  root: Slot<'div'>;\n};\n\nexport type AccordionToggleData = {\n  value: AccordionItemValue;\n};\n\nexport type AccordionProps = ComponentProps<AccordionSlots> &\n  Partial<AccordionCommons> & {\n    /**\n     * Controls the state of the panel\n     */\n    openItems?: AccordionItemValue | AccordionItemValue[];\n    /**\n     * Default value for the uncontrolled state of the panel\n     */\n    defaultOpenItems?: AccordionItemValue | AccordionItemValue[];\n    onToggle?: AccordionToggleEventHandler;\n  };\n\nexport type AccordionState = ComponentState<AccordionSlots> & AccordionCommons & AccordionContextValue;\n"]}

package/lib/components/Accordion/AccordionContext.js

@@ -1,10 +1,11 @@
 import { createContext } from '@fluentui/react-context-selector';
-export var AccordionContext = /*#__PURE__*/createContext({
+export const AccordionContext = /*#__PURE__*/createContext({
   openItems: [],
-  navigable: false,
   collapsible: false,
-  requestToggle: function () {
+
+  requestToggle() {
     /* noop */
   }
+
 });
 //# sourceMappingURL=AccordionContext.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Accordion/AccordionContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B;AAIA,OAAO,IAAM,gBAAgB,gBAAmC,aAAa,CAAwB;AACnG,EAAA,SAAS,EAAE,EADwF;AAEnG,EAAA,SAAS,EAAE,KAFwF;AAGnG,EAAA,WAAW,EAAE,KAHsF;AAInG,EAAA,aAAa,EAAA,YAAA;AACX;AACD;AANkG,CAAxB,CAAtE","sourceRoot":""}
+{"version":3,"sources":["components/Accordion/AccordionContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B;AAIA,OAAO,MAAM,gBAAgB,gBAAmC,aAAa,CAAwB;AACnG,EAAA,SAAS,EAAE,EADwF;AAEnG,EAAA,WAAW,EAAE,KAFsF;;AAGnG,EAAA,aAAa,GAAA;AACX;AACD;;AALkG,CAAxB,CAAtE","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AccordionContextValue } from './Accordion.types';\n\nexport const AccordionContext: Context<AccordionContextValue> = createContext<AccordionContextValue>({\n  openItems: [],\n  collapsible: false,\n  requestToggle() {\n    /* noop */\n  },\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Accordion/index.d.ts

@@ -2,5 +2,6 @@ export * from './Accordion';
 export * from './Accordion.types';
 export * from './renderAccordion';
 export * from './useAccordion';
+export * from './useAccordionStyles';
 export * from './useAccordionContextValues';
 export * from './AccordionContext';

package/lib/components/Accordion/index.js

@@ -2,6 +2,7 @@ export * from './Accordion';
 export * from './Accordion.types';
 export * from './renderAccordion';
 export * from './useAccordion';
+export * from './useAccordionStyles';
 export * from './useAccordionContextValues';
 export * from './AccordionContext';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Accordion';\nexport * from './Accordion.types';\nexport * from './renderAccordion';\nexport * from './useAccordion';\nexport * from './useAccordionStyles';\nexport * from './useAccordionContextValues';\nexport * from './AccordionContext';\n"]}

package/lib/components/Accordion/renderAccordion.d.ts

@@ -2,4 +2,4 @@ import type { AccordionState, AccordionContextValues } from './Accordion.types';
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderAccordion: (state: AccordionState, contextValues: AccordionContextValues) => JSX.Element;
+export declare const renderAccordion_unstable: (state: AccordionState, contextValues: AccordionContextValues) => JSX.Element;