@momentum-design/components 0.129.9 → 0.129.11

package/dist/react/accordion/index.js

@@ -3,30 +3,31 @@ 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.
+ * 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
  *
@@ -34,16 +35,14 @@ import { TAG_NAME } from '../../components/accordion/accordion.constants';
  * @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/react/accordionbutton/index.d.ts

@@ -2,28 +2,27 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/accordionbutton';
 import type { Events } from '../../components/accordionbutton/accordionbutton.types';
 /**
- * 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
  *
@@ -33,12 +32,12 @@ import type { Events } from '../../components/accordionbutton/accordionbutton.ty
  *
  * @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.

package/dist/react/accordionbutton/index.js

@@ -3,28 +3,27 @@ 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.
+ * 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
  *
@@ -34,12 +33,12 @@ import { TAG_NAME } from '../../components/accordionbutton/accordionbutton.const
  *
  * @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.

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

@@ -1,32 +1,24 @@
 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.
+ * 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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/accordiongroup/index.js

@@ -3,33 +3,25 @@ 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.
+ * 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.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -2,10 +2,18 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/tooltip';
 import type { Events as EventsInherited } from '../../components/popover/popover.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
  *

package/dist/react/tooltip/index.js

@@ -3,10 +3,18 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/tooltip';
 import { TAG_NAME } from '../../components/tooltip/tooltip.constants';
 /**
+ * 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
  *

package/package.json

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