@momentum-design/components 0.134.19 → 0.134.21

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

@@ -3,20 +3,29 @@ import { Component } from '../../models';
 import type { ColorType } from './staticchip.types';
 declare const StaticChip_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
 /**
- * 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/components/staticchip/staticchip.component.js

@@ -14,11 +14,6 @@ import { Component } from '../../models';
 import { DEFAULTS } from './staticchip.constants';
 import styles from './staticchip.styles';
 /**
- * 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/components/staticradio/staticradio.component.d.ts

@@ -2,32 +2,28 @@ import { CSSResult } from 'lit';
 import { Component } from '../../models';
 declare const StaticRadio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
- * 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 class StaticRadio extends StaticRadio_base {

package/dist/components/staticradio/staticradio.component.js

@@ -13,22 +13,6 @@ import { Component } from '../../models';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import styles from './staticradio.styles';
 /**
- * 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/components/statictoggle/statictoggle.component.d.ts

@@ -3,27 +3,22 @@ import { Component } from '../../models';
 import type { ToggleSize } from './statictoggle.types';
 declare const StaticToggle_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
- * 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.
@@ -31,10 +26,10 @@ declare const StaticToggle_base: import("../../utils/mixins/index.types").Constr
  * @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 class StaticToggle extends StaticToggle_base {

package/dist/components/statictoggle/statictoggle.component.js

@@ -14,23 +14,6 @@ import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { DEFAULTS, ICON_NAME, ICON_SIZE_IN_REM } from './statictoggle.constants';
 import styles from './statictoggle.styles';
 /**
- * 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/components/stepper/stepper.component.d.ts

@@ -4,13 +4,21 @@ import type { OrientationType } from '../stepperconnector/stepperconnector.types
 import type { VariantType } from '../stepperitem/stepperitem.types';
 import StepperContext from './stepper.context';
 /**
- * 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 class Stepper extends Provider<StepperContext> {
     /**

package/dist/components/stepper/stepper.component.js

@@ -15,9 +15,6 @@ import { DEFAULTS } from './stepper.constants';
 import StepperContext from './stepper.context';
 import styles from './stepper.styles';
 /**
- * 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/components/stepperconnector/stepperconnector.component.d.ts

@@ -2,14 +2,21 @@ import type { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { OrientationType, StatusType } from './stepperconnector.types';
 /**
- * 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/components/stepperconnector/stepperconnector.component.js

@@ -15,10 +15,6 @@ import Stepper from '../stepper/stepper.component';
 import { DEFAULTS } from './stepperconnector.constants';
 import styles from './stepperconnector.styles';
 /**
- * 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/components/stepperitem/stepperitem.component.d.ts

@@ -3,24 +3,26 @@ import { Component } from '../../models';
 import type { StatusType, VariantType } from './stepperitem.types';
 declare const StepperItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Component;
 /**
- * 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.
@@ -29,7 +31,7 @@ declare const StepperItem_base: import("../../utils/mixins/index.types").Constru
  * @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/components/stepperitem/stepperitem.component.js

@@ -20,20 +20,11 @@ import { KeyDownHandledMixin } from '../../utils/mixins/KeyDownHandledMixin';
 import styles from './stepperitem.styles';
 import { DEFAULT, STATUS, STATUS_ICON } from './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/components/tab/tab.component.d.ts

@@ -3,24 +3,23 @@ import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import type { TabSize, Variant } from './tab.types';
 declare const Tab_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/LifeCycleMixin").LifeCycleMixinInterface> & typeof Buttonsimple;
 /**
- * `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 @@ declare const Tab_base: import("../../utils/mixins/index.types").Constructor<imp
  * <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 @@ declare const Tab_base: import("../../utils/mixins/index.types").Constructor<imp
  * @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/components/tab/tab.component.js

@@ -19,20 +19,7 @@ import { LifeCycleMixin } from '../../utils/mixins/lifecycle/LifeCycleMixin';
 import { DEFAULTS, TAB_SIZES, TAB_VARIANTS } from './tab.constants';
 import styles from './tab.styles';
 /**
- * `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
@@ -48,8 +35,6 @@ import styles from './tab.styles';
  * 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/components/tablist/tablist.component.d.ts

@@ -6,48 +6,36 @@ import type { OrientationType } from '../list/list.types';
 import type { BaseArray } from '../../utils/virtualIndexArray';
 declare const TabList_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/ListNavigationMixin").ListNavigationMixinInterface & import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface & import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabListComponentMixin").TabListComponentMixinInterface> & typeof Component;
 /**
- * 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 class TabList extends TabList_base {

package/dist/components/tablist/tablist.component.js

@@ -27,30 +27,6 @@ import styles from './tablist.styles';
 import { ARROW_BUTTON_DIRECTION } from './tablist.constants';
 import { getFirstTab, getLastTab, getActiveTab } from './tablist.utils';
 /**
- * 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/components/text/text.component.d.ts

@@ -3,21 +3,20 @@ import { Component } from '../../models';
 import type { TextType, TagName } from './text.types';
 declare const Text_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/OverflowMixin").OverflowMixinInterface> & typeof Component;
 /**
- * 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 class Text extends Text_base {

package/dist/components/text/text.component.js

@@ -14,18 +14,6 @@ import { OverflowMixin } from '../../utils/mixins/OverflowMixin';
 import styles from './text.styles';
 import { DEFAULTS, VALID_TEXT_TAGS } from './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
  *