@momentum-design/components 0.129.9 → 0.129.11

package/dist/components/accordion/accordion.component.d.ts

@@ -1,30 +1,31 @@
 import type { CSSResult, PropertyValues } from 'lit';
 import AccordionButton from '../accordionbutton/accordionbutton.component';
 /**
- * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.
+ * An accordion is a vertically stacked component with a header and expandable/collapsible body section.
+ * The header displays a prefix icon, header text, optional control slots (leading and trailing), and a dedicated expand/collapse button.
+ * Unlike `accordionbutton`, only the expand/collapse button is clickable and not the entire header.
  *
- * 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.
+ * ## Header contains
+ * - Optional prefix icon
+ * - Header text (default H3, customizable via `data-aria-level`)
+ * - Leading slot for controls (placed after header text)
+ * - Trailing slot for controls (placed before expand/collapse button)
+ * - Expand/collapse button (automatically positioned at the end)
  *
- * The body section contains:
- * - Default slot - User can place any content inside the body section.
+ * ## Body contains
+ * - Default slot for any content
  *
- * 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.
+ * The accordion supports different border styles through the `variant` attribute and different spacing through the `size` attribute.
+ * An accordion can be disabled, which prevents all interactions including the expand/collapse button and any slotted controls.
  *
- * 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.
+ * ## When to use
+ * - Use `mdc-accordion` when you need additional interactive controls (chips, badges, buttons, icons) in the header.
+ * - Use `mdc-accordionbutton` if you only need a simple clickable header without extra controls.
  *
- * 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.
+ * ## Accessibility
+ * - Always provide `open-button-aria-label` and `close-button-aria-label` for screen reader support
+ * - Adjust `data-aria-level` based on heading hierarchy in your page
+ * - Note: Screen readers may lose focus when toggling if accordion is expanded by default
  *
  * @tagname mdc-accordion
  *
@@ -32,16 +33,14 @@ import AccordionButton from '../accordionbutton/accordionbutton.component';
  * @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 leading-controls - The leading controls slot of the accordion on the header section. Placed after the header text.
+ * @slot trailing-controls - The trailing controls slot of the accordion on the header section. Placed before the expand/collapse button.
  * @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.
+ * @event shown - (React: onShown) This event is triggered when the accordion is toggled (expanded or collapsed).
  *
  * @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.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled text color of the accordion.
  *
  * @csspart body-section - The body section of the accordion.
  * @csspart header-section - The header section of the accordion.
@@ -55,11 +54,13 @@ declare class Accordion extends AccordionButton {
     /** @internal */
     trailingControlsSlot: Array<HTMLElement>;
     /**
-     * Aria-label attribute for the trigger button when accordion is collapsed.
+     * Accessible label for the expand/collapse button when the accordion is in collapsed state.
+     * Provides context to screen readers about the button's action to open the accordion.
      */
     openButtonAriaLabel?: string;
     /**
-     * Aria-label attribute for the trigger button when accordion is expanded.
+     * Accessible label for the expand/collapse button when the accordion is in expanded state.
+     * Provides context to screen readers about the button's action to close the accordion.
      */
     closeButtonAriaLabel?: string;
     /**

package/dist/components/accordion/accordion.component.js

@@ -15,30 +15,31 @@ import AccordionButton from '../accordionbutton/accordionbutton.component';
 import { BUTTON_VARIANTS, ICON_BUTTON_SIZES } from '../button/button.constants';
 import styles from './accordion.styles';
 /**
- * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.
+ * An accordion is a vertically stacked component with a header and expandable/collapsible body section.
+ * The header displays a prefix icon, header text, optional control slots (leading and trailing), and a dedicated expand/collapse button.
+ * Unlike `accordionbutton`, only the expand/collapse button is clickable and not the entire header.
  *
- * 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.
+ * ## Header contains
+ * - Optional prefix icon
+ * - Header text (default H3, customizable via `data-aria-level`)
+ * - Leading slot for controls (placed after header text)
+ * - Trailing slot for controls (placed before expand/collapse button)
+ * - Expand/collapse button (automatically positioned at the end)
  *
- * The body section contains:
- * - Default slot - User can place any content inside the body section.
+ * ## Body contains
+ * - Default slot for any content
  *
- * 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.
+ * The accordion supports different border styles through the `variant` attribute and different spacing through the `size` attribute.
+ * An accordion can be disabled, which prevents all interactions including the expand/collapse button and any slotted controls.
  *
- * 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.
+ * ## When to use
+ * - Use `mdc-accordion` when you need additional interactive controls (chips, badges, buttons, icons) in the header.
+ * - Use `mdc-accordionbutton` if you only need a simple clickable header without extra controls.
  *
- * 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.
+ * ## Accessibility
+ * - Always provide `open-button-aria-label` and `close-button-aria-label` for screen reader support
+ * - Adjust `data-aria-level` based on heading hierarchy in your page
+ * - Note: Screen readers may lose focus when toggling if accordion is expanded by default
  *
  * @tagname mdc-accordion
  *
@@ -46,16 +47,14 @@ import styles from './accordion.styles';
  * @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 leading-controls - The leading controls slot of the accordion on the header section. Placed after the header text.
+ * @slot trailing-controls - The trailing controls slot of the accordion on the header section. Placed before the expand/collapse button.
  * @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.
+ * @event shown - (React: onShown) This event is triggered when the accordion is toggled (expanded or collapsed).
  *
  * @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.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled text color of the accordion.
  *
  * @csspart body-section - The body section of the accordion.
  * @csspart header-section - The header section of the accordion.

package/dist/components/accordionbutton/accordionbutton.component.d.ts

@@ -6,28 +6,27 @@ import type { IconNames } from '../icon/icon.types';
 import type { IconName, Variant } from './accordionbutton.types';
 declare const AccordionButton_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
- * An accordion button contains a header and body section with optional slots inside the heading which are focusable.
+ * An accordion button is a vertically stacked component with a clickable header and expandable/collapsible body section.
+ * The entire header is clickable to toggle the visibility of the body content.
  *
- * The header section contains:
- * - Prefix Icon
- * - Header Text
+ * ## Header contains
+ * - Optional prefix icon
+ * - Header text (default H3, customizable via `data-aria-level`)
+ * - Expand/collapse arrow icon (visual indicator)
  *
- * The body section contains:
- * - Default slot - User can place any content inside the body section.
+ * ## Body contains
+ * - Default slot for any content
  *
- * 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.
+ * The accordion button supports different border styles through the `variant` attribute and different spacing through the `size` attribute.
+ * An accordion button can be disabled, which prevents the header from being clickable.
  *
- * 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.
+ * ## When to use
+ * - Use `mdc-accordionbutton` for simple clickable headers without additional controls.
+ * - Use `mdc-accordion` instead if you need extra controls (chips, badges, icons) in the header.
  *
- * 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.
+ * ## Accessibility
+ * - Adjust `data-aria-level` based on heading hierarchy in your page.
+ * - Note: Screen readers may lose focus when toggling if accordion button is expanded by default.
  *
  * @tagname mdc-accordionbutton
  *
@@ -37,12 +36,12 @@ declare const AccordionButton_base: import("../../utils/mixins/index.types").Con
  *
  * @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.
+ * @event shown - (React: onShown) This event is triggered when the accordion button is toggled (expanded or collapsed).
  *
  * @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.
+ * @cssproperty --mdc-accordionbutton-hover-color - The hover background color of the accordion button header.
+ * @cssproperty --mdc-accordionbutton-active-color - The active background color of the accordion button header.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled text color of the accordion button.
  *
  * @csspart body-section - The body section of the accordion button.
  * @csspart header-button-section - The header button section of the accordion button.
@@ -53,31 +52,36 @@ declare const AccordionButton_base: import("../../utils/mixins/index.types").Con
  */
 declare class AccordionButton extends AccordionButton_base {
     /**
-     * The size of the accordion item.
+     * Controls the spacing and padding of the accordion.
+     * - Small provides 1rem (16px) padding, large provides 1.5rem (24px) padding.
      * @default 'small'
      */
     size: Size;
     /**
-     * The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.
+     * Visual style variant of the accordion.
+     * - Default includes borders, borderless removes all border styling.
      * @default 'default'
      */
     variant: Variant;
     /**
-     * The aria level of the accordion component.
+     * Specifies the heading level for accessibility purposes.
+     * Should match the heading hierarchy of the page (e.g., 2 for H2, 3 for H3).
      * @default 3
      */
     dataAriaLevel: number;
     /**
-     * The visibility of the accordion button.
+     * Controls whether the accordion body content is visible.
+     * - When true, the body section is shown; when false, it is hidden.
      * @default false
      */
     expanded: boolean;
     /**
-     * The header text of the accordion item.
+     * Text content displayed in the accordion header.
      */
     headerText?: string;
     /**
-     * The leading icon that is displayed before the header text.
+     * Icon displayed at the start of the accordion header, before the header text.
+     * Must be a valid icon name.
      */
     prefixIcon?: IconNames;
     /** @internal */

package/dist/components/accordionbutton/accordionbutton.component.js

@@ -18,28 +18,27 @@ import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { DEFAULTS, ICON_NAME } from './accordionbutton.constants';
 import styles from './accordionbutton.styles';
 /**
- * An accordion button contains a header and body section with optional slots inside the heading which are focusable.
+ * An accordion button is a vertically stacked component with a clickable header and expandable/collapsible body section.
+ * The entire header is clickable to toggle the visibility of the body content.
  *
- * The header section contains:
- * - Prefix Icon
- * - Header Text
+ * ## Header contains
+ * - Optional prefix icon
+ * - Header text (default H3, customizable via `data-aria-level`)
+ * - Expand/collapse arrow icon (visual indicator)
  *
- * The body section contains:
- * - Default slot - User can place any content inside the body section.
+ * ## Body contains
+ * - Default slot for any content
  *
- * 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.
+ * The accordion button supports different border styles through the `variant` attribute and different spacing through the `size` attribute.
+ * An accordion button can be disabled, which prevents the header from being clickable.
  *
- * 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.
+ * ## When to use
+ * - Use `mdc-accordionbutton` for simple clickable headers without additional controls.
+ * - Use `mdc-accordion` instead if you need extra controls (chips, badges, icons) in the header.
  *
- * 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.
+ * ## Accessibility
+ * - Adjust `data-aria-level` based on heading hierarchy in your page.
+ * - Note: Screen readers may lose focus when toggling if accordion button is expanded by default.
  *
  * @tagname mdc-accordionbutton
  *
@@ -49,12 +48,12 @@ import styles from './accordionbutton.styles';
  *
  * @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.
+ * @event shown - (React: onShown) This event is triggered when the accordion button is toggled (expanded or collapsed).
  *
  * @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.
+ * @cssproperty --mdc-accordionbutton-hover-color - The hover background color of the accordion button header.
+ * @cssproperty --mdc-accordionbutton-active-color - The active background color of the accordion button header.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled text color of the accordion button.
  *
  * @csspart body-section - The body section of the accordion button.
  * @csspart header-button-section - The header button section of the accordion button.
@@ -67,22 +66,26 @@ class AccordionButton extends DisabledMixin(Component) {
     constructor() {
         super(...arguments);
         /**
-         * The size of the accordion item.
+         * Controls the spacing and padding of the accordion.
+         * - Small provides 1rem (16px) padding, large provides 1.5rem (24px) padding.
          * @default 'small'
          */
         this.size = DEFAULTS.SIZE;
         /**
-         * The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.
+         * Visual style variant of the accordion.
+         * - Default includes borders, borderless removes all border styling.
          * @default 'default'
          */
         this.variant = DEFAULTS.VARIANT;
         /**
-         * The aria level of the accordion component.
+         * Specifies the heading level for accessibility purposes.
+         * Should match the heading hierarchy of the page (e.g., 2 for H2, 3 for H3).
          * @default 3
          */
         this.dataAriaLevel = DEFAULTS.DATA_ARIA_LEVEL;
         /**
-         * The visibility of the accordion button.
+         * Controls whether the accordion body content is visible.
+         * - When true, the body section is shown; when false, it is hidden.
          * @default false
          */
         this.expanded = DEFAULTS.EXPANDED;

package/dist/components/accordiongroup/accordiongroup.component.d.ts

@@ -2,47 +2,46 @@ import type { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
 import type { Size, Variant } from './accordiongroup.types';
 /**
- * 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.
+ * An accordion group is a container that manages multiple accordion or accordionbutton components as a unified set.
+ * It controls the visual styling, spacing, and expansion behavior of all child accordions.
  *
- * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.
+ * The group applies consistent `variant` and `size` attributes to all children automatically.
+ * By default, expanding one accordion collapses others (`allow-multiple` is false). Set `allow-multiple` to true to allow multiple expanded items.
  *
- * 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.
+ * ## Accepted children
+ * - Use `mdc-accordionbutton` children for simple clickable headers.
+ * - Use `mdc-accordion` children when you need additional controls (chips, badges, icons) in the headers.
+ * - Other elements in the slot are ignored.
  *
- * 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.
+ * ## Accessibility
+ * - Note: Screen readers may lose focus when toggling if the first accordion is expanded by default.
  *
  * @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
+ * @cssproperty --mdc-accordiongroup-items-border-color - The border color applied to all child accordion items and their separators.
  */
 declare class AccordionGroup extends Component {
     /**
-     * The size of the accordion item.
+     * Controls the spacing and padding for all accordion items in the group.
+     * This size is applied to all child accordions.
+     * - Small provides 1rem (16px) padding, large provides 1.5rem (24px) padding.
      * @default 'small'
      */
     size: Size;
     /**
-     * The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.
+     * Visual style variant applied to all accordions in the group.
+     * - Stacked: accordions have 1.5rem gap between them.
+     * - Borderless: removes all borders from accordions and group.
+     * - Contained: accordions have continuous borders with no gaps.
      * @default 'stacked'
      */
     variant: Variant;
     /**
-     * If true, multiple accordion items can be visible at the same time.
+     * Controls whether multiple accordions can be expanded simultaneously.
+     * - When false, expanding one accordion automatically collapses others.
+     * - When true, multiple accordions can remain open at the same time.
      * @default false
      */
     allowMultiple: boolean;

package/dist/components/accordiongroup/accordiongroup.component.js

@@ -15,49 +15,48 @@ import { Component } from '../../models';
 import { DEFAULTS } from './accordiongroup.constants';
 import styles from './accordiongroup.styles';
 /**
- * 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.
+ * An accordion group is a container that manages multiple accordion or accordionbutton components as a unified set.
+ * It controls the visual styling, spacing, and expansion behavior of all child accordions.
  *
- * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.
+ * The group applies consistent `variant` and `size` attributes to all children automatically.
+ * By default, expanding one accordion collapses others (`allow-multiple` is false). Set `allow-multiple` to true to allow multiple expanded items.
  *
- * 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.
+ * ## Accepted children
+ * - Use `mdc-accordionbutton` children for simple clickable headers.
+ * - Use `mdc-accordion` children when you need additional controls (chips, badges, icons) in the headers.
+ * - Other elements in the slot are ignored.
  *
- * 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.
+ * ## Accessibility
+ * - Note: Screen readers may lose focus when toggling if the first accordion is expanded by default.
  *
  * @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
+ * @cssproperty --mdc-accordiongroup-items-border-color - The border color applied to all child accordion items and their separators.
  */
 class AccordionGroup extends Component {
     constructor() {
         super();
         /**
-         * The size of the accordion item.
+         * Controls the spacing and padding for all accordion items in the group.
+         * This size is applied to all child accordions.
+         * - Small provides 1rem (16px) padding, large provides 1.5rem (24px) padding.
          * @default 'small'
          */
         this.size = DEFAULTS.SIZE;
         /**
-         * The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.
+         * Visual style variant applied to all accordions in the group.
+         * - Stacked: accordions have 1.5rem gap between them.
+         * - Borderless: removes all borders from accordions and group.
+         * - Contained: accordions have continuous borders with no gaps.
          * @default 'stacked'
          */
         this.variant = DEFAULTS.VARIANT;
         /**
-         * If true, multiple accordion items can be visible at the same time.
+         * Controls whether multiple accordions can be expanded simultaneously.
+         * - When false, expanding one accordion automatically collapses others.
+         * - When true, multiple accordions can remain open at the same time.
          * @default false
          */
         this.allowMultiple = false;

package/dist/components/accordiongroup/accordiongroup.styles.js

@@ -2,7 +2,7 @@ import { css } from 'lit';
 import { hostFocusRingStyles } from '../../utils/styles';
 const styles = css `
   :host {
-    --mdc-accordiongroup-border-color: var(--mds-color-theme-outline-secondary-normal);
+    --mdc-accordiongroup-items-border-color: var(--mds-color-theme-outline-secondary-normal);
 
     display: flex;
     flex-direction: column;
@@ -12,7 +12,7 @@ const styles = css `
   }
   :host([variant='stacked']) ::slotted(mdc-accordion),
   :host([variant='stacked']) ::slotted(mdc-accordionbutton) {
-    border: 1px solid var(--mdc-accordiongroup-border-color);
+    border: 1px solid var(--mdc-accordiongroup-items-border-color);
     border-radius: 0.5rem;
   }
   :host([variant='stacked']) ::slotted(mdc-accordion:not[expanded]),
@@ -20,12 +20,12 @@ const styles = css `
     border-bottom: none;
   }
   :host([variant='contained']) {
-    border: 1px solid var(--mdc-accordiongroup-border-color);
+    border: 1px solid var(--mdc-accordiongroup-items-border-color);
     border-radius: 0.5rem;
   }
   :host([variant='contained']) ::slotted(mdc-accordion),
   :host([variant='contained']) ::slotted(mdc-accordionbutton) {
-    border-bottom: 1px solid var(--mdc-accordiongroup-border-color);
+    border-bottom: 1px solid var(--mdc-accordiongroup-items-border-color);
   }
   :host([variant='contained']) ::slotted(mdc-accordion:first-child),
   :host([variant='contained']) ::slotted(mdc-accordionbutton:first-child) {
@@ -42,7 +42,7 @@ const styles = css `
   }
   :host([variant='borderless']) ::slotted(mdc-accordion[expanded]),
   :host([variant='borderless']) ::slotted(mdc-accordionbutton[expanded]) {
-    border-bottom: 1px solid var(--mdc-accordiongroup-border-color);
+    border-bottom: 1px solid var(--mdc-accordiongroup-items-border-color);
   }
 `;
 export default [styles, ...hostFocusRingStyles()];

package/dist/components/tooltip/tooltip.component.d.ts

@@ -3,10 +3,18 @@ import type { CSSResult } from 'lit';
 import Popover from '../popover/popover.component';
 import type { TooltipType } from './tooltip.types';
 /**
+ * A Tooltip is a special type of popovers that provide additional context to content on the screen. <br/>
+ * Tooltip is triggered by mouse hover or by keyboard focus and will disappear upon mouse exit or focus change.
+ *
+ * Because of this, tooltips cannot contain content that can be focused or interacted with.
+ * When a tooltip must contain a focusable element like a link or button, use a toggle tip instead.
+ *
  * A tooltip is triggered by mouse hover or by keyboard focus
  * and will disappear upon mouse exit or focus change.
  *
- * Note: Tooltips cannot contain content that can be focused or interacted with.
+ * Note:
+ *  - Tooltips cannot contain content that can be focused or interacted with.
+ *  - Tooltips will contain the default `aria-hidden="true"` so that VO will never focus the tooltip.
  *
  * @tagname mdc-tooltip
  *