@momentum-design/components 0.100.1 → 0.101.0

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+import Accordion from './components/accordion';
+import AccordionGroup from './components/accordiongroup';
+import AccordionButton from './components/accordionbutton';
 import AlertChip from './components/alertchip';
 import Animation from './components/animation';
 import Appheader from './components/appheader';
@@ -28,6 +31,7 @@ import Link from './components/link';
 import LinkButton from './components/linkbutton';
 import Linksimple from './components/linksimple';
 import List from './components/list';
+import Listheader from './components/listheader';
 import ListItem from './components/listitem';
 import Marker from './components/marker';
 import MenuBar from './components/menubar';
@@ -49,27 +53,26 @@ import RadioGroup from './components/radiogroup';
 import ScreenreaderAnnouncer from './components/screenreaderannouncer';
 import Searchfield from './components/searchfield';
 import Select from './components/select';
+import SelectListbox from './components/selectlistbox';
 import SideNavigation from './components/sidenavigation';
 import Skeleton from './components/skeleton';
 import Spinner from './components/spinner';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
 import StaticToggle from './components/statictoggle';
-import Toast from './components/toast';
+import Stepper from './components/stepper';
+import StepperConnector from './components/stepperconnector';
+import StepperItem from './components/stepperitem';
 import Tab from './components/tab';
 import TabList from './components/tablist';
 import Text from './components/text';
 import Textarea from './components/textarea';
 import ThemeProvider from './components/themeprovider';
+import Toast from './components/toast';
 import Toggle from './components/toggle';
 import ToggleTip from './components/toggletip';
 import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
-import Listheader from './components/listheader';
-import SelectListbox from './components/selectlistbox';
-import StepperItem from './components/stepperitem';
-import StepperConnector from './components/stepperconnector';
-import Stepper from './components/stepper';
 import type { BadgeType } from './components/badge/badge.types';
 import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
 import type { PopoverPlacement } from './components/popover/popover.types';
@@ -82,6 +85,6 @@ import type { MenuSectionChangeEvent } from './components/menusection/menusectio
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, Stepper, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, ToggleTip, Tooltip, VirtualizedList, };
 export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, TextType, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/index.js

@@ -1,5 +1,8 @@
 /* eslint-disable import/order */
 // Components Imports
+import Accordion from './components/accordion';
+import AccordionGroup from './components/accordiongroup';
+import AccordionButton from './components/accordionbutton';
 import AlertChip from './components/alertchip';
 import Animation from './components/animation';
 import Appheader from './components/appheader';
@@ -30,6 +33,7 @@ import Link from './components/link';
 import LinkButton from './components/linkbutton';
 import Linksimple from './components/linksimple';
 import List from './components/list';
+import Listheader from './components/listheader';
 import ListItem from './components/listitem';
 import Marker from './components/marker';
 import MenuBar from './components/menubar';
@@ -51,32 +55,31 @@ import RadioGroup from './components/radiogroup';
 import ScreenreaderAnnouncer from './components/screenreaderannouncer';
 import Searchfield from './components/searchfield';
 import Select from './components/select';
+import SelectListbox from './components/selectlistbox';
 import SideNavigation from './components/sidenavigation';
 import Skeleton from './components/skeleton';
 import Spinner from './components/spinner';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
 import StaticToggle from './components/statictoggle';
-import Toast from './components/toast';
+import Stepper from './components/stepper';
+import StepperConnector from './components/stepperconnector';
+import StepperItem from './components/stepperitem';
 import Tab from './components/tab';
 import TabList from './components/tablist';
 import Text from './components/text';
 import Textarea from './components/textarea';
 import ThemeProvider from './components/themeprovider';
+import Toast from './components/toast';
 import Toggle from './components/toggle';
 import ToggleTip from './components/toggletip';
 import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
-import Listheader from './components/listheader';
-import SelectListbox from './components/selectlistbox';
-import StepperItem from './components/stepperitem';
-import StepperConnector from './components/stepperconnector';
-import Stepper from './components/stepper';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Components Exports
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, Stepper, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, ToggleTip, Tooltip, VirtualizedList, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/react/accordion/index.d.ts

@@ -0,0 +1,55 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/accordion';
+/**
+ * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.
+ *
+ * The header section contains:
+ * - Prefix Icon
+ * - Header Text
+ * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.
+ * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.
+ *
+ * The body section contains:
+ * - Default slot - User can place any content inside the body section.
+ *
+ * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>
+ * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>
+ * There are two sizes of accordion, one is small and the other is large.
+ * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.
+ *
+ * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.
+ * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.
+ *
+ * An accordion can be disabled, and when it's disabled, the header section will not be clickable.
+ *
+ * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
+ *
+ * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.
+ *
+ * @tagname mdc-accordion
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot leading-controls - The leading controls slot of the accordion on the header section.
+ * @slot trailing-controls - The trailing controls slot of the accordion on the header section.
+ * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.
+ *
+ * @event shown - (React: onShown) This event is triggered when the accordion is expanded.
+ *
+ * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.
+ * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.
+ * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.
+ *
+ * @csspart header-section - The header section of the accordion.
+ * @csspart leading-header - The leading header of the accordion.
+ * @csspart trailing-header - The trailing header of the accordion.
+ * @csspart trailing-header__button - The trailing header button of the accordion.
+ * @csspart body-section - The body section of the accordion.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onShown: EventName<Event>;
+}>;
+export default reactWrapper;

package/dist/react/accordion/index.js

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/accordion';
+import { TAG_NAME } from '../../components/accordion/accordion.constants';
+/**
+ * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.
+ *
+ * The header section contains:
+ * - Prefix Icon
+ * - Header Text
+ * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.
+ * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.
+ *
+ * The body section contains:
+ * - Default slot - User can place any content inside the body section.
+ *
+ * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>
+ * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>
+ * There are two sizes of accordion, one is small and the other is large.
+ * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.
+ *
+ * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.
+ * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.
+ *
+ * An accordion can be disabled, and when it's disabled, the header section will not be clickable.
+ *
+ * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
+ *
+ * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.
+ *
+ * @tagname mdc-accordion
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot leading-controls - The leading controls slot of the accordion on the header section.
+ * @slot trailing-controls - The trailing controls slot of the accordion on the header section.
+ * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.
+ *
+ * @event shown - (React: onShown) This event is triggered when the accordion is expanded.
+ *
+ * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.
+ * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.
+ * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.
+ *
+ * @csspart header-section - The header section of the accordion.
+ * @csspart leading-header - The leading header of the accordion.
+ * @csspart trailing-header - The trailing header of the accordion.
+ * @csspart trailing-header__button - The trailing header button of the accordion.
+ * @csspart body-section - The body section of the accordion.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onShown: 'shown',
+    },
+    displayName: 'Accordion',
+});
+export default reactWrapper;

package/dist/react/accordionbutton/index.d.ts

@@ -0,0 +1,52 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/accordionbutton';
+/**
+ * An accordion button contains a header and body section with optional slots inside the heading which are focusable.
+ *
+ * The header section contains:
+ * - Prefix Icon
+ * - Header Text
+ *
+ * The body section contains:
+ * - Default slot - User can place any content inside the body section.
+ *
+ * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>
+ * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>
+ * There are two sizes of accordion, one is small and the other is large.
+ * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.
+ *
+ * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.
+ * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.
+ *
+ * An accordion can be disabled, and when it's disabled, the header section will not be clickable.
+ *
+ * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.
+ *
+ * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.
+ *
+ * @tagname mdc-accordionbutton
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.
+ *
+ * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.
+ *
+ * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.
+ * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.
+ * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.
+ *
+ * @csspart header-section - The header section of the accordion button.
+ * @csspart header-button-section - The header button section of the accordion button.
+ * @csspart leading-header - The leading header of the accordion button.
+ * @csspart trailing-header - The trailing header of the accordion button.
+ * @csspart trailing-header__icon - The trailing header icon of the accordion button.
+ * @csspart body-section - The body section of the accordion button.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onShown: EventName<Event>;
+}>;
+export default reactWrapper;

package/dist/react/accordionbutton/index.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/accordionbutton';
+import { TAG_NAME } from '../../components/accordionbutton/accordionbutton.constants';
+/**
+ * An accordion button contains a header and body section with optional slots inside the heading which are focusable.
+ *
+ * The header section contains:
+ * - Prefix Icon
+ * - Header Text
+ *
+ * The body section contains:
+ * - Default slot - User can place any content inside the body section.
+ *
+ * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>
+ * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>
+ * There are two sizes of accordion, one is small and the other is large.
+ * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.
+ *
+ * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.
+ * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.
+ *
+ * An accordion can be disabled, and when it's disabled, the header section will not be clickable.
+ *
+ * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.
+ *
+ * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.
+ *
+ * @tagname mdc-accordionbutton
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.
+ *
+ * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.
+ *
+ * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.
+ * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.
+ * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.
+ *
+ * @csspart header-section - The header section of the accordion button.
+ * @csspart header-button-section - The header button section of the accordion button.
+ * @csspart leading-header - The leading header of the accordion button.
+ * @csspart trailing-header - The trailing header of the accordion button.
+ * @csspart trailing-header__icon - The trailing header icon of the accordion button.
+ * @csspart body-section - The body section of the accordion button.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onShown: 'shown',
+    },
+    displayName: 'AccordionButton',
+});
+export default reactWrapper;

package/dist/react/accordiongroup/index.d.ts

@@ -0,0 +1,32 @@
+import Component from '../../components/accordiongroup';
+/**
+ * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.
+ * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.
+ * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
+ *
+ * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.
+ *
+ * There are three types of variants:
+ * - Stacked - Each accordion will have a gap of 1.5rem (24px).
+ * - Borderless - Each accordion will not have any border and the group will also not have any border.
+ * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.
+ *
+ * There are two types of sizes:
+ * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.
+ * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.
+ *
+ * The variant and size will be applied to all accordions inside this accordion group.
+ * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.
+ *
+ * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
+ *
+ * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.
+ *
+ * @tagname mdc-accordiongroup
+ *
+ * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.
+ *
+ * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/accordiongroup/index.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/accordiongroup';
+import { TAG_NAME } from '../../components/accordiongroup/accordiongroup.constants';
+/**
+ * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.
+ * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.
+ * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
+ *
+ * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.
+ *
+ * There are three types of variants:
+ * - Stacked - Each accordion will have a gap of 1.5rem (24px).
+ * - Borderless - Each accordion will not have any border and the group will also not have any border.
+ * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.
+ *
+ * There are two types of sizes:
+ * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.
+ * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.
+ *
+ * The variant and size will be applied to all accordions inside this accordion group.
+ * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.
+ *
+ * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
+ *
+ * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.
+ *
+ * @tagname mdc-accordiongroup
+ *
+ * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.
+ *
+ * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'AccordionGroup',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -1,3 +1,6 @@
+export { default as Accordion } from './accordion';
+export { default as AccordionButton } from './accordionbutton';
+export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';

package/dist/react/index.js

@@ -1,3 +1,6 @@
+export { default as Accordion } from './accordion';
+export { default as AccordionButton } from './accordionbutton';
+export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';

package/dist/utils/keys.d.ts

@@ -9,6 +9,7 @@ declare const KEYS: {
     HOME: string;
     PAGE_DOWN: string;
     PAGE_UP: string;
+    SHIFT_TAB: string;
     SPACE: string;
     TAB: string;
 };

package/dist/utils/keys.js

@@ -9,6 +9,7 @@ const KEYS = {
     HOME: 'Home',
     PAGE_DOWN: 'PageDown',
     PAGE_UP: 'PageUp',
+    SHIFT_TAB: 'Shift+Tab',
     SPACE: ' ',
     TAB: 'Tab',
 };

package/dist/utils/roles.d.ts

@@ -6,6 +6,7 @@ declare const ROLE: {
     readonly COMBOBOX: "combobox";
     readonly DIALOG: "dialog";
     readonly GROUP: "group";
+    readonly HEADING: "heading";
     readonly IMG: "img";
     readonly LIST: "list";
     readonly LISTBOX: "listbox";
@@ -20,6 +21,7 @@ declare const ROLE: {
     readonly PROGRESSBAR: "progressbar";
     readonly RADIO: "radio";
     readonly RADIOGROUP: "radiogroup";
+    readonly REGION: "region";
     readonly TAB: "tab";
     readonly TABLIST: "tablist";
     readonly TOOLTIP: "tooltip";

package/dist/utils/roles.js

@@ -6,6 +6,7 @@ const ROLE = {
     COMBOBOX: 'combobox',
     DIALOG: 'dialog',
     GROUP: 'group',
+    HEADING: 'heading',
     IMG: 'img',
     LIST: 'list',
     LISTBOX: 'listbox',
@@ -20,6 +21,7 @@ const ROLE = {
     PROGRESSBAR: 'progressbar',
     RADIO: 'radio',
     RADIOGROUP: 'radiogroup',
+    REGION: 'region',
     TAB: 'tab',
     TABLIST: 'tablist',
     TOOLTIP: 'tooltip',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.100.1",
+  "version": "0.101.0",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"