@momentum-design/components 0.134.20 → 0.134.21

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

@@ -1,19 +1,28 @@
 import Component from '../../components/staticchip';
 /**
- * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.
- *
- * It is recommended to keep the label text for the chip component concise and compact.<br/>
- * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.
- *
+ * The static chip is a small, non-interactive element used to display a short label with an optional leading icon. It is intended for displaying metadata, tags, or status, and supports a fixed set of colour variants.
+ * 
+ * **When to use**
+ * 
+ * - Use `mdc-staticchip` to display a short label or status that the user cannot interact with (e.g. a tag, category, or read-only attribute).
+ * - Use it inside lists, cards, or summary rows where the chip is purely informational.
+ * 
+ * **When not to use**
+ * 
+ * - Use `mdc-chip` when the chip should respond to user interaction (click, selection).
+ * - Use `mdc-filterchip` for chips that toggle on/off as filters.
+ * - Use `mdc-inputchip` for editable, removable chips inside an input.
+ * - Use `mdc-badge` when you need a smaller, status-only indicator (especially for counts or notifications).
+ * 
  * @tagname mdc-staticchip
- *
+ * 
  * @dependency mdc-icon
  * @dependency mdc-text
- *
+ * 
  * @cssproperty --mdc-chip-color - The color of the static chip.
  * @cssproperty --mdc-chip-border-color - The border color of the static chip.
  * @cssproperty --mdc-chip-background-color - The background color of the static chip.
- *
+ * 
  * @csspart label - The label of the static chip.
  * @csspart icon - The icon of the static chip.
  */

package/dist/react/staticchip/index.js

@@ -3,11 +3,6 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/staticchip';
 import { TAG_NAME } from '../../components/staticchip/staticchip.constants';
 /**
- * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.
- *
- * It is recommended to keep the label text for the chip component concise and compact.<br/>
- * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.
- *
  * @tagname mdc-staticchip
  *
  * @dependency mdc-icon

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

@@ -1,31 +1,27 @@
 import Component from '../../components/staticradio';
 /**
- * The StaticRadio component is a decorative, non-interactive radio button used for visual
- * presentation in read-only scenarios. Unlike the interactive `mdc-radio`, it does not
- * handle user interactions or form submissions.
- *
- * This component supports multiple visual states: checked, disabled, readonly, and soft-disabled.
- *
- * ## When to use
- * Use StaticRadio to display radio button states in read-only contexts such as summary views,
- * confirmation screens, or when showing historical form data. For interactive radio buttons, use
- * `mdc-radio` instead.
- *
- * ## Accessibility
- * - StaticRadio is decorative and non-interactive by design
- * - Always pair with descriptive text labels in the default slot
- * - Do not use this as a replacement for interactive radio buttons in forms
- *
+ * The static radio is a decorative, non-interactive radio button used to display radio states in read-only contexts (summary views, confirmation screens, historical form data). It supports checked, disabled, soft-disabled, and read-only visual states but does not handle user interaction or participate in forms.
+ * 
+ * **When to use**
+ * 
+ * - Use `mdc-staticradio` to render the visual shape of a radio button in read-only UIs such as summary screens, confirmation screens, or historical form data.
+ * - Use it inside lists or cards where the radio is part of the display, not a control.
+ * 
+ * **When not to use**
+ * 
+ * - Use `mdc-radio` for any interactive radio in a form.
+ * - Do not use `mdc-staticradio` as a replacement for `mdc-radio` — it cannot be focused, toggled, or submitted with a form.
+ * 
  * @tagname mdc-staticradio
- *
+ * 
  * @cssproperty --mdc-staticradio-inner-circle-size - Size of the inner circle when checked.
  * @cssproperty --mdc-staticradio-outer-circle-size - Size of the outer circle border.
  * @cssproperty --mdc-staticradio-inner-circle-background-color - Background color of the inner circle when checked.
  * @cssproperty --mdc-staticradio-outer-circle-border-color - Border color of the outer circle.
  * @cssproperty --mdc-staticradio-outer-circle-background-color - Background color of the outer circle.
- *
+ * 
  * @csspart radio-icon - The radio icon element.
- *
+ * 
  * @slot - Default slot for the label of the radio.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/react/staticradio/index.js

@@ -3,22 +3,6 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/staticradio';
 import { TAG_NAME } from '../../components/staticradio/staticradio.constants';
 /**
- * The StaticRadio component is a decorative, non-interactive radio button used for visual
- * presentation in read-only scenarios. Unlike the interactive `mdc-radio`, it does not
- * handle user interactions or form submissions.
- *
- * This component supports multiple visual states: checked, disabled, readonly, and soft-disabled.
- *
- * ## When to use
- * Use StaticRadio to display radio button states in read-only contexts such as summary views,
- * confirmation screens, or when showing historical form data. For interactive radio buttons, use
- * `mdc-radio` instead.
- *
- * ## Accessibility
- * - StaticRadio is decorative and non-interactive by design
- * - Always pair with descriptive text labels in the default slot
- * - Do not use this as a replacement for interactive radio buttons in forms
- *
  * @tagname mdc-staticradio
  *
  * @cssproperty --mdc-staticradio-inner-circle-size - Size of the inner circle when checked.

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

@@ -1,26 +1,21 @@
 import Component from '../../components/statictoggle';
 /**
- * The StaticToggle component is a decorative, non-interactive toggle switch used for visual
- * presentation. It shares the same styling as the interactive `mdc-toggle` component but does
- * not provide user interaction functionality.
- *
- * This component supports multiple visual states: checked, disabled, readonly, soft-disabled,
- * and size variations (default, compact).
- *
- * ## When to use
- * Use StaticToggle to display toggle states in read-only contexts such as summary views,
- * confirmation screens, or as a building block within custom interactive components. For
- * interactive toggles, use `mdc-toggle` instead.
- *
- * ## Accessibility
- * - StaticToggle is decorative and non-interactive by design
- * - When used within parent components, ensure proper ARIA attributes are provided by the parent
- * - Do not use this as a replacement for interactive toggles in forms
- *
+ * The static toggle is a decorative, non-interactive toggle switch used for visual presentation. It shares the same styling as the interactive `mdc-toggle` but does not provide user interaction or form participation.
+ * 
+ * **When to use**
+ * 
+ * - Use to display toggle state in read-only contexts such as summary views, confirmation screens, or list rows where state is reported but not editable.
+ * - Use as a visual building block inside custom interactive components (e.g. composed inside a list item that handles the click).
+ * 
+ * **When not to use**
+ * 
+ * - Do not use as a replacement for an interactive toggle in forms — use `mdc-toggle` instead.
+ * - Do not use when users need to change the value directly on this control.
+ * 
  * @tagname mdc-statictoggle
- *
+ * 
  * @dependency mdc-icon
- *
+ * 
  * @cssproperty --mdc-statictoggle-width - Width of the static toggle.
  * @cssproperty --mdc-statictoggle-height - Height of the static toggle.
  * @cssproperty --mdc-statictoggle-border-radius - Border radius of the static toggle.
@@ -28,10 +23,10 @@ import Component from '../../components/statictoggle';
  * @cssproperty --mdc-statictoggle-background-color - Background color of the static toggle.
  * @cssproperty --mdc-statictoggle-icon-color - Icon color of the static toggle.
  * @cssproperty --mdc-statictoggle-icon-background-color - Icon background color of the static toggle.
- *
+ * 
  * @csspart slider - The slider part of the toggle.
  * @csspart toggle-icon - The icon part of the toggle.
- *
+ * 
  * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/react/statictoggle/index.js

@@ -3,23 +3,6 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/statictoggle';
 import { TAG_NAME } from '../../components/statictoggle/statictoggle.constants';
 /**
- * The StaticToggle component is a decorative, non-interactive toggle switch used for visual
- * presentation. It shares the same styling as the interactive `mdc-toggle` component but does
- * not provide user interaction functionality.
- *
- * This component supports multiple visual states: checked, disabled, readonly, soft-disabled,
- * and size variations (default, compact).
- *
- * ## When to use
- * Use StaticToggle to display toggle states in read-only contexts such as summary views,
- * confirmation screens, or as a building block within custom interactive components. For
- * interactive toggles, use `mdc-toggle` instead.
- *
- * ## Accessibility
- * - StaticToggle is decorative and non-interactive by design
- * - When used within parent components, ensure proper ARIA attributes are provided by the parent
- * - Do not use this as a replacement for interactive toggles in forms
- *
  * @tagname mdc-statictoggle
  *
  * @dependency mdc-icon

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

@@ -1,12 +1,20 @@
 import Component from '../../components/stepper';
 /**
- * Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.
- * It provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.
- *
+ * The stepper is the container component that arranges a sequence of `mdc-stepperitem` elements interleaved with `mdc-stepperconnector` elements. It provides the shared orientation and variant context that the items and connectors read so they render consistently with the group.
+ * 
+ * **When to use**
+ * 
+ * - Use to communicate progress through a multi-step linear process (e.g. an onboarding flow, a checkout, a wizard).
+ * - Use horizontally for top-of-page progress indicators and vertically when the steps need richer help text alongside each entry.
+ * 
+ * **When not to use**
+ * 
+ * - Do not use for non-sequential navigation between unrelated views — use `mdc-tablist` or another navigation pattern instead.
+ * - Do not use when there is only one step.
+ * 
  * @tagname mdc-stepper
- *
+ * 
  * @slot default - Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.
- *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/stepper/index.js

@@ -3,9 +3,6 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/stepper';
 import { TAG_NAME } from '../../components/stepper/stepper.constants';
 /**
- * Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.
- * It provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.
- *
  * @tagname mdc-stepper
  *
  * @slot default - Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.

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

@@ -1,13 +1,20 @@
 import Component from '../../components/stepperconnector';
 /**
- * StepperConnector component visually represents the connection between two stepper items.
- * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.
- * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.
- *
+ * The stepper connector is the decorative line drawn between two `mdc-stepperitem` elements inside an `mdc-stepper`. Its colour reflects whether the connection between the two steps is complete or incomplete.
+ * 
+ * **When to use**
+ * 
+ * - Place between every pair of adjacent `mdc-stepperitem` elements so the visual progress chain is unbroken.
+ * 
+ * **When not to use**
+ * 
+ * - Do not use outside of an `mdc-stepper` — without the parent context the orientation will not follow the group.
+ * - Do not use as a generic divider; use a divider component instead.
+ * 
  * @tagname mdc-stepperconnector
- *
+ * 
  * @csspart connector - The main connector line between steps
- *
+ * 
  * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector
  * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector
  */

package/dist/react/stepperconnector/index.js

@@ -3,10 +3,6 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/stepperconnector';
 import { TAG_NAME } from '../../components/stepperconnector/stepperconnector.constants';
 /**
- * StepperConnector component visually represents the connection between two stepper items.
- * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.
- * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.
- *
  * @tagname mdc-stepperconnector
  *
  * @csspart connector - The main connector line between steps

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

@@ -2,24 +2,26 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/stepperitem';
 import type { Events } from '../../components/stepperitem/stepperitem.types';
 /**
- * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.
- * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.
- * The component supports various visual styles and can be customized with labels, help text, and step numbers.
- *
- * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.
- * Make sure to set `aria-current="step"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.
- *
- * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.
- *
+ * The stepper item represents a single step inside an `mdc-stepper`. It renders a status indicator (completed checkmark, current pencil, error icon, or step number), a label, and an optional help text line. The component is uncontrolled — consumers drive the `status` of each step.
+ * 
+ * **When to use**
+ * 
+ * - Use one stepper item per step in a sequenced process, placed inside an `mdc-stepper` with `mdc-stepperconnector` elements between adjacent items.
+ * 
+ * **When not to use**
+ * 
+ * - Do not use as a standalone clickable card; for selectable cards use `mdc-cardbutton` or similar.
+ * - Do not use outside of `mdc-stepper`, since orientation and variant come from the parent context.
+ * 
+ * @tagname mdc-stepperitem
+ * 
  * @dependency mdc-icon
  * @dependency mdc-text
- *
- * @tagname mdc-stepperitem
- *
+ * 
  * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.
- *
+ * 
  * @csspart status-container - The container for the status icon or step number.
  * @csspart label-container - The container for the label and help text.
  * @csspart help-text-container - The container for the help text and error icon when applicable.
@@ -28,7 +30,7 @@ import type { Events } from '../../components/stepperitem/stepperitem.types';
  * @csspart label - The text representing the label of the stepper item.
  * @csspart help-text - The text providing additional information about the stepper item.
  * @csspart help-icon - The icon representing an error in the stepper item.
- *
+ * 
  * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.
  * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.
  * @cssproperty --mdc-stepperitem-label-color - The color of the label text.

package/dist/react/stepperitem/index.js

@@ -3,20 +3,11 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/stepperitem';
 import { TAG_NAME } from '../../components/stepperitem/stepperitem.constants';
 /**
- * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.
- * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.
- * The component supports various visual styles and can be customized with labels, help text, and step numbers.
- *
- * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.
- * Make sure to set `aria-current="step"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.
- *
- * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.
+ * @tagname mdc-stepperitem
  *
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @tagname mdc-stepperitem
- *
  * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.

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

@@ -3,24 +3,23 @@ import Component from '../../components/tab';
 import type { Events } from '../../components/tab/tab.types';
 import type { Events as EventsInherited } from '../../components/buttonsimple/buttonsimple.types';
 /**
- * `mdc-tab` is Tab component to be used within the Tabgroup.
- *
- * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.
- *
- * Pass attribute `tabid` when using inside of `tablist` component.
- *
- * The `slot="badge"` can be used to add a badge to the tab.
- *
- * The `slot="chip"` can be used to add a chip to the tab.
- *
- * For `icon`, the `mdc-icon` component is used to render the icon.
- *
- * Note: Icons can be used in conjunction with badges or chips.
- * Badges and chips should not be used at the same time.
- *
+ * The tab is the individual control rendered inside an `mdc-tablist`. It displays an optional icon, a text label, and optional postfix content (badge or chip), and reflects its active state to assistive technologies.
+ * 
+ * **When to use**
+ * 
+ * - Use inside an `mdc-tablist` to represent one panel of content the user can switch to.
+ * - Use to provide a compact, single-line label for content panels related to one another.
+ * 
+ * **When not to use**
+ * 
+ * - Do not use tabs to navigate between unrelated pages — use a navigation pattern.
+ * - Do not use a tab outside of an `mdc-tablist` if the tabs pattern semantics are needed; the list owns roving focus and selection wiring.
+ * 
+ * @tagname mdc-tab
+ * 
  * @dependency mdc-icon
  * @dependency mdc-text
- *
+ * 
  * @event click - (React: onClick) This event is dispatched when the tab is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.
@@ -31,9 +30,7 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * <br />
  * Note: the activechange event is used by the tab list component to react to the change in state of the tab,
  * so this event won't be needed if the tab list is used.
- *
- * @tagname mdc-tab
- *
+ * 
  * @cssproperty --mdc-tab-height - The height of the tab.
  * @cssproperty --mdc-tab-padding-left - The left padding of the tab.
  * @cssproperty --mdc-tab-padding-right - The right padding of the tab.
@@ -42,21 +39,21 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * @cssproperty --mdc-tab-color - The text color of the tab.
  * @cssproperty --mdc-tab-border-radius - The border radius of the tab.
  * @cssproperty --mdc-tab-content-justification - The justification of the content in the tab.
- *
+ * 
  * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.
  * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.
- *
+ * 
  * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.
  * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.
  * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.
  * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.
- *
+ * 
  * @csspart container - The container of the tab.
  * @csspart regular-icon - The icon of the tab, if inactive.
  * @csspart filled-icon - The icon of the tab, if active.
  * @csspart indicator - The indicator of the tab.
  * @csspart text - The text of the tab.
- *
+ * 
  * @slot prefix - The slot for the content before the text, typically used for the icon.
  * @slot postfix - The slot for the content after the text, typically used for the badge or chip.
  */

package/dist/react/tab/index.js

@@ -3,20 +3,7 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/tab';
 import { TAG_NAME } from '../../components/tab/tab.constants';
 /**
- * `mdc-tab` is Tab component to be used within the Tabgroup.
- *
- * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.
- *
- * Pass attribute `tabid` when using inside of `tablist` component.
- *
- * The `slot="badge"` can be used to add a badge to the tab.
- *
- * The `slot="chip"` can be used to add a chip to the tab.
- *
- * For `icon`, the `mdc-icon` component is used to render the icon.
- *
- * Note: Icons can be used in conjunction with badges or chips.
- * Badges and chips should not be used at the same time.
+ * @tagname mdc-tab
  *
  * @dependency mdc-icon
  * @dependency mdc-text
@@ -32,8 +19,6 @@ import { TAG_NAME } from '../../components/tab/tab.constants';
  * Note: the activechange event is used by the tab list component to react to the change in state of the tab,
  * so this event won't be needed if the tab list is used.
  *
- * @tagname mdc-tab
- *
  * @cssproperty --mdc-tab-height - The height of the tab.
  * @cssproperty --mdc-tab-padding-left - The left padding of the tab.
  * @cssproperty --mdc-tab-padding-right - The right padding of the tab.

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

@@ -2,48 +2,36 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/tablist';
 import type { Events } from '../../components/tablist/tablist.types';
 /**
- * Tab list organizes tabs into a container.
- *
- * Children of the tab list are `mdc-tab` elements, sent to the default slot.
- *
- * The tabs can be navigated using the left/right arrow keys, and selected by clicking,
- *  or pressing the Enter and Space keys.
- *
- * **Implicit accessibility rules**
- *
- * - The element that serves as the container for the set of tabs has role `tablist`.
- * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.
- * - The active tab element has the state `aria-selected` set to `true`
- *   and all other tab elements have it set to `false`.
- *
- *
- * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
- *
- * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.
- * - The `tablist` element needs to have a label provided by `data-aria-label`.
- * - Each element with role `tab` has the property `aria-controls`
- *  that should refer to its associated `tabpanel` element.
- * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
- * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.
- *
+ * The tab list organises a row of `mdc-tab` elements into a horizontal container. It implements the WAI-ARIA tabs pattern: roving focus with arrow keys, click or Enter/Space activation, and automatic scroll arrow buttons when the tabs overflow their container.
+ * 
+ * **When to use**
+ * 
+ * - Use to switch between several related content panels in the same view.
+ * - Use when one panel is visible at a time and the user can move between them.
+ * 
+ * **When not to use**
+ * 
+ * - Do not use for primary navigation between pages.
+ * - Do not use when there is only one panel or when the panels are conceptually unrelated.
+ * 
  * @tagname mdc-tablist
- *
+ * 
  * @dependency mdc-tab
  * @dependency mdc-button
- *
+ * 
  * @event change - (React: onChange) This event is dispatched when the tab is selected.
  * Event that fires when user changes the active tab.
  *     The function sent as the argument will receive the fired event
  *      and the new tab id can be fetched from event.detail.tabId.
- *
+ * 
  *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`
- *
+ * 
  * @slot Default slot for mdc-tab elements.
- *
+ * 
  * @cssproperty --mdc-tablist-gap - Gap between tabs
  * @cssproperty --mdc-tablist-width - Width of the tablist
  * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button
- *
+ * 
  * @csspart container - The tablist container.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {

package/dist/react/tablist/index.js

@@ -3,30 +3,6 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/tablist';
 import { TAG_NAME } from '../../components/tablist/tablist.constants';
 /**
- * Tab list organizes tabs into a container.
- *
- * Children of the tab list are `mdc-tab` elements, sent to the default slot.
- *
- * The tabs can be navigated using the left/right arrow keys, and selected by clicking,
- *  or pressing the Enter and Space keys.
- *
- * **Implicit accessibility rules**
- *
- * - The element that serves as the container for the set of tabs has role `tablist`.
- * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.
- * - The active tab element has the state `aria-selected` set to `true`
- *   and all other tab elements have it set to `false`.
- *
- *
- * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
- *
- * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.
- * - The `tablist` element needs to have a label provided by `data-aria-label`.
- * - Each element with role `tab` has the property `aria-controls`
- *  that should refer to its associated `tabpanel` element.
- * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
- * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.
- *
  * @tagname mdc-tablist
  *
  * @dependency mdc-tab

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

@@ -1,20 +1,19 @@
 import Component from '../../components/text';
 /**
- * Text component for creating styled text elements.
- * It has to be mounted within the ThemeProvider to access color and font tokens.
- *
- * The `type` attribute allows changing the text style.
- * The `tagname` attribute allows changing the tag name of the text element.
- * The default tag name is `p`.
- *
- * The `tagname` attribute should be a valid HTML tag name.
- * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.
- *
- * The styling is applied based on the `type` attribute.
- *
+ * The text component is the typography primitive for the design system. It renders any of the standard text-bearing HTML elements (`p`, `span`, `div`, `small`, `h1`–`h6`) and applies one of the predefined token-driven type styles. Mount the component inside an `mdc-themeprovider` so colour and font tokens resolve correctly.
+ * 
+ * **When to use**
+ * 
+ * - Use whenever you need a piece of styled text inside any component or page.
+ * - Use to choose the semantic tag (`tagname`) independently from the visual style (`type`), so the heading hierarchy of the page stays correct without forcing a specific size.
+ * 
+ * **When not to use**
+ * 
+ * - Do not use to render rich interactive controls — wrap text inside the appropriate interactive component instead.
+ * 
  * @tagname mdc-text
  * @slot - Default slot for text content
- *
+ * 
  * @csspart text - The text element
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/react/text/index.js

@@ -3,18 +3,6 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/text';
 import { TAG_NAME } from '../../components/text/text.constants';
 /**
- * Text component for creating styled text elements.
- * It has to be mounted within the ThemeProvider to access color and font tokens.
- *
- * The `type` attribute allows changing the text style.
- * The `tagname` attribute allows changing the tag name of the text element.
- * The default tag name is `p`.
- *
- * The `tagname` attribute should be a valid HTML tag name.
- * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.
- *
- * The styling is applied based on the `type` attribute.
- *
  * @tagname mdc-text
  * @slot - Default slot for text content
  *