@momentum-design/components 0.134.19 → 0.134.21

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

@@ -2,24 +2,20 @@ import { CSSResult } from 'lit';
 import Searchfield from '../searchfield/searchfield.component';
 import type { Placement } from './searchpopover.types';
 /**
- * `mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure
- * proper accessibility. This component should be used when search results or suggestions need to be displayed
- * in a popover below the search input field, where the search results hold individual actions like navigating to a
- * a different url etc.
- *
- * - Don't use this when search results are displayed inline on the page -\> use Searchfield component instead.
- * - Don't use this when a list of options is filtered based on the search input -\> use Combobox component instead.
- *
- * It supports any Chip component as filters. (`mdc-inputchip`, `mdc-alertchip`, `mdc-chip`)
- *
- * This component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.
- *
- * Searchpopover supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:
- * - In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.
- * - In **controlled** mode (`control-type="controlled"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the "removed" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).
- *
+ * The searchpopover is a widget built on top of `mdc-searchfield` that adds a connected `mdc-popover` below the input. The input is exposed as a combobox that owns the popover, so assistive technologies can announce when the popover is open and which content it controls. It is intended for searches whose results are individually actionable (for example navigating to a different URL).
+ * 
+ * **When to use**
+ * 
+ * - Use it when search results or suggestions appear in a popover anchored to the input and each result performs its own action.
+ * - Use it together with chip filters (`mdc-inputchip`, `mdc-chip`, `mdc-alertchip`) when the search query is refined by removable tokens.
+ * 
+ * **When not to use**
+ * 
+ * - Do not use it when search results render inline on the page — use `mdc-searchfield` instead.
+ * - Do not use it when the popover is a list of options being filtered down by the input — use `mdc-combobox` instead.
+ * 
  * @tagname mdc-searchpopover
- *
+ * 
  * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
  * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).
  * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
@@ -30,7 +26,7 @@ import type { Placement } from './searchpopover.types';
  * In **uncontrolled** mode (default), the chip is removed from the DOM automatically.
  * @event shown - (React: onShown) This event is dispatched when the popover is shown
  * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden
- *
+ * 
  * @slot default - Default slot (=children) for the popover content
  * @slot filters - Slot for input chips
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
@@ -41,7 +37,7 @@ import type { Placement } from './searchpopover.types';
  * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
  * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
  * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.
- *
+ * 
  * @cssproperty --mdc-label-font-size - Font size for the label text.
  * @cssproperty --mdc-label-font-weight - Font weight for the label text.
  * @cssproperty --mdc-label-line-height - Line height for the label text.
@@ -60,7 +56,7 @@ import type { Placement } from './searchpopover.types';
  * @cssproperty --mdc-searchpopover-width - Width of the searchpopover component
  * @cssproperty --mdc-searchpopover-popover-width - Width of the popover within the searchpopover component
  * @cssproperty --mdc-searchpopover-popover-height - Height of the popover within the searchpopover component
- *
+ * 
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
  * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.

package/dist/components/searchpopover/searchpopover.component.js

@@ -19,22 +19,6 @@ import { ROLE } from '../../utils/roles';
 import styles from './searchpopover.styles';
 import { DEFAULTS, TRIGGER_ID, POPOVER_ID } from './searchpopover.constants';
 /**
- * `mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure
- * proper accessibility. This component should be used when search results or suggestions need to be displayed
- * in a popover below the search input field, where the search results hold individual actions like navigating to a
- * a different url etc.
- *
- * - Don't use this when search results are displayed inline on the page -\> use Searchfield component instead.
- * - Don't use this when a list of options is filtered based on the search input -\> use Combobox component instead.
- *
- * It supports any Chip component as filters. (`mdc-inputchip`, `mdc-alertchip`, `mdc-chip`)
- *
- * This component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.
- *
- * Searchpopover supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:
- * - In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.
- * - In **controlled** mode (`control-type="controlled"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the "removed" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).
- *
  * @tagname mdc-searchpopover
  *
  * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).

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

@@ -7,39 +7,43 @@ import type { PopoverStrategy } from '../popover/popover.types';
 import type { Placement } from './select.types';
 declare const Select_base: import("../../utils/mixins/index.types").Constructor<import("../../models").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/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
- * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
- * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
- * Optional: Add `mdc-divider` after each option group (`mdc-optgroup`) to separate groups visually.
- *
- * Every mdc-option should have a `value` attribute set to ensure proper form submission.
- *
- * To set a default option, use the `selected` attribute on the `mdc-option` element.
- * You can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.
- *
- * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
- *
- * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.
- *
+ * The select is a form-associated dropdown control that lets the user pick a single value from a predefined list of options. It exposes the standard form field surface (label, help text, validation, required indicator, info toggletip) and renders a popover-backed listbox built from slotted `mdc-option` and `mdc-optgroup` children.
+ * 
+ * The component is form-associated and participates in native form submission, validation, and reset.
+ * 
+ * **When to use**
+ * 
+ * - Use `mdc-select` when the user must pick a single value from a fixed list and typing-to-filter is not required.
+ * - Use it inside a form when you want native form submission and validation for the selected value.
+ * - Use it when options are grouped (`mdc-optgroup`) and an optional `mdc-divider` is needed between groups.
+ * 
+ * **When not to use**
+ * 
+ * - Use `mdc-combobox` when the user benefits from typing to filter the list.
+ * - Use `mdc-radiogroup` when there are only a handful of options and they should all be visible at once.
+ * - Use `mdc-input` when free-form text is the goal.
+ * - Use `mdc-searchfield` when the user is searching content rather than picking a single value.
+ * 
+ * @tagname mdc-select
+ * 
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover
  * @dependency mdc-text
  * @dependency mdc-toggletip
- *
- * @tagname mdc-select
- *
+ * 
  * @event click - (React: onClick) This event is dispatched when the select is clicked.
  * @event change - (React: onChange) This event is dispatched when the select is changed.
  * @event input - (React: onInput) This event is dispatched when the select is changed.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
- *
+ * 
  * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
  * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
  * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
  * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
- *
+ * 
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
  * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
@@ -48,7 +52,7 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
- *
+ * 
  * @cssproperty --mdc-label-font-size - Font size for the label text.
  * @cssproperty --mdc-label-font-weight - Font weight for the label text.
  * @cssproperty --mdc-label-line-height - Line height for the label text.

package/dist/components/select/select.component.js

@@ -28,18 +28,7 @@ import { ACTIONS, KeyToActionMixin, NAV_MODES } from '../../utils/mixins/KeyToAc
 import { ARROW_ICON, DEFAULTS, LISTBOX_ID, TRIGGER_ID } from './select.constants';
 import styles from './select.styles';
 /**
- * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
- * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
- * Optional: Add `mdc-divider` after each option group (`mdc-optgroup`) to separate groups visually.
- *
- * Every mdc-option should have a `value` attribute set to ensure proper form submission.
- *
- * To set a default option, use the `selected` attribute on the `mdc-option` element.
- * You can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.
- *
- * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
- *
- * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.
+ * @tagname mdc-select
  *
  * @dependency mdc-button
  * @dependency mdc-icon
@@ -47,8 +36,6 @@ import styles from './select.styles';
  * @dependency mdc-text
  * @dependency mdc-toggletip
  *
- * @tagname mdc-select
- *
  * @event click - (React: onClick) This event is dispatched when the select is clicked.
  * @event change - (React: onChange) This event is dispatched when the select is changed.
  * @event input - (React: onInput) This event is dispatched when the select is changed.

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

@@ -1,14 +1,18 @@
 import { Component } from '../../models';
 /**
- * Selectlistbox component as Light DOM component to act as a simple wrapper
- * for mdc-option components to ensure accessibility and proper role assignment.
- *
- * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed
- * and mdc-option can be used directly in the select component with a listbox in a different
- * shadow root and aria-owns attribute to connect them.
- *
+ * `mdc-selectlistbox` is a light-DOM wrapper that groups `mdc-option` (and `mdc-optgroup`) children and exposes them with `role="listbox"` so screen readers announce the option list correctly. It is required as a slotted child of `mdc-select` and `mdc-combobox`.
+ * 
+ * **When to use**
+ * 
+ * - Use `mdc-selectlistbox` as the direct child of `mdc-select` or `mdc-combobox`, wrapping the slotted `mdc-option` and `mdc-optgroup` elements.
+ * 
+ * **When not to use**
+ * 
+ * - Do not use it outside `mdc-select` or `mdc-combobox`. For a standalone listbox UI, use the dedicated `mdc-listbox` component instead.
+ * - Do not place `mdc-option` directly inside `mdc-select` or `mdc-combobox` without this wrapper — the listbox role and screen-reader semantics would be missing.
+ * 
  * @tagname mdc-selectlistbox
- *
+ * 
  * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.
  */
 declare class Selectlistbox extends Component {

package/dist/components/selectlistbox/selectlistbox.component.js

@@ -1,13 +1,6 @@
 import { Component } from '../../models';
 import { ROLE } from '../../utils/roles';
 /**
- * Selectlistbox component as Light DOM component to act as a simple wrapper
- * for mdc-option components to ensure accessibility and proper role assignment.
- *
- * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed
- * and mdc-option can be used directly in the select component with a listbox in a different
- * shadow root and aria-owns attribute to connect them.
- *
  * @tagname mdc-selectlistbox
  *
  * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.

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

@@ -3,55 +3,35 @@ import { Provider } from '../../models';
 import type { SideNavigationVariant } from './sidenavigation.types';
 import SideNavigationContext from './sidenavigation.context';
 /**
- * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,
- * typically used in layouts with persistent or collapsible sidebars.
- *
- * ## Features:
- * - Supports five layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, `flexible-on-hover`, and `hidden`
- * - Toggleable expand/collapse behavior
- * - Displays brand logo and customer name
- * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`
- *
- * ### Usage:
- * In a sidenavigation, navmenuitems can be used in the following ways:
- *
- * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.
- *
- * 2. **NavMenuItem with submenu**:
- *    - Provide an `id` on the `mdc-navmenuitem`
- *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`
- *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item
- *      inside the nested menupopover is active, conveying which submenu item is currently selected
- *
- * 3. **Actionable navmenuitem (no submenu)**:
- *    - Performs an action such as navigation or alert trigger
- *    - Set `disable-aria-current="true"` to maintain visual active state without navigation behavior
- *
- * ### Recommendations:
- * - Use `mdc-text` for section headers
- * - Use `mdc-divider` with the attribute `variant="gradient"` for section dividers
- * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`
- *
- * #### Accessibility Notes:
- * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`
- * to ensure screen reader support
- * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button
- *
+ * The side navigation is a vertically stacked navigation landmark, typically used as a persistent or collapsible sidebar. It supports five layout variants, toggleable expand/collapse behaviour, an optional brand logo, an optional footer text, and acts as a context provider for nested `mdc-menubar` and `mdc-navmenuitem` elements.
+ * 
+ * **When to use**
+ * 
+ * - Use `mdc-sidenavigation` for primary, persistent in-app navigation rendered alongside the main content area.
+ * - Use it when you need an expandable/collapsible sidebar with icon-only and icon-plus-label modes.
+ * - Use it as the host of nested `mdc-menubar` and `mdc-navmenuitem` content (with optional submenus via `mdc-menupopover`).
+ * 
+ * **When not to use**
+ * 
+ * - Use `mdc-appheader` for top-of-page navigation.
+ * - Use `mdc-menubar` on its own when no expand/collapse, branding, or fixed footer area is needed.
+ * - Use `mdc-tablist` when navigation is scoped to switching between sibling views inside a single page.
+ * 
+ * @tagname mdc-sidenavigation
+ * 
  * @dependency mdc-text
  * @dependency mdc-button
  * @dependency mdc-divider
  * @dependency mdc-menubar
- *
+ * 
  * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
- *
- * @tagname mdc-sidenavigation
- *
+ * 
  * @slot scrollable-section - Slot for the scrollable content area of the side navigation.
  * @slot scrollable-menubar - Slot for the menubar inside the scrollable section.
  * @slot fixed-section - Slot for the fixed content area of the side navigation.
  * @slot fixed-menubar - Slot for the menubar inside the fixed section.
  * @slot brand-logo - Slot for the brand logo (e.g., icon or img).
- *
+ * 
  * @csspart side-navigation-container - The main container wrapping the entire side navigation.
  * @csspart scrollable-section - The scrollable section of the side navigation.
  * @csspart scrollable-menubar - The menubar inside the scrollable section.
@@ -62,10 +42,10 @@ import SideNavigationContext from './sidenavigation.context';
  * @csspart footer-text - The footer text label in the fixed section.
  * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.
  * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.
- *
+ * 
  * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.
  * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.
- *
+ * 
  * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded
  * @cssproperty --mdc-sidenavigation-expanded-left-padding - padding for the left side of navmenuitems, when expanded
  * @cssproperty --mdc-sidenavigation-expanded-right-padding - padding for the right side of navmenuitems, when expanded

package/dist/components/sidenavigation/sidenavigation.component.js

@@ -19,39 +19,7 @@ import { DEFAULTS, VARIANTS } from './sidenavigation.constants';
 import SideNavigationContext from './sidenavigation.context';
 import styles from './sidenavigation.styles';
 /**
- * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,
- * typically used in layouts with persistent or collapsible sidebars.
- *
- * ## Features:
- * - Supports five layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, `flexible-on-hover`, and `hidden`
- * - Toggleable expand/collapse behavior
- * - Displays brand logo and customer name
- * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`
- *
- * ### Usage:
- * In a sidenavigation, navmenuitems can be used in the following ways:
- *
- * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.
- *
- * 2. **NavMenuItem with submenu**:
- *    - Provide an `id` on the `mdc-navmenuitem`
- *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`
- *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item
- *      inside the nested menupopover is active, conveying which submenu item is currently selected
- *
- * 3. **Actionable navmenuitem (no submenu)**:
- *    - Performs an action such as navigation or alert trigger
- *    - Set `disable-aria-current="true"` to maintain visual active state without navigation behavior
- *
- * ### Recommendations:
- * - Use `mdc-text` for section headers
- * - Use `mdc-divider` with the attribute `variant="gradient"` for section dividers
- * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`
- *
- * #### Accessibility Notes:
- * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`
- * to ensure screen reader support
- * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button
+ * @tagname mdc-sidenavigation
  *
  * @dependency mdc-text
  * @dependency mdc-button
@@ -60,8 +28,6 @@ import styles from './sidenavigation.styles';
  *
  * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
  *
- * @tagname mdc-sidenavigation
- *
  * @slot scrollable-section - Slot for the scrollable content area of the side navigation.
  * @slot scrollable-menubar - Slot for the menubar inside the scrollable section.
  * @slot fixed-section - Slot for the fixed content area of the side navigation.

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

@@ -3,23 +3,22 @@ import { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { SkeletonVariant } from './skeleton.types';
 /**
- * `mdc-skeleton` is a component that shows a grey placeholder area.
- * It provides visual feedback to users that content is being loaded.
- *
- * **Skeleton Variants:**
- * - **rectangular**: Default variant with 0.25rem border radius
- * - **rounded**: Has 0.5rem border radius
- * - **circular**: Has 50% border radius for circular shapes
- * - **button**: Optimized for button placeholders with 1.25rem border radius
- *
- * **Sizing Behavior:**
- * 1. If wrapping content, takes dimensions of wrapped content
- * 2. Otherwise grows to fill parent container
- *
+ * The skeleton is a grey placeholder block that signals to users that real content is being loaded. It can wrap a child element to take that element's dimensions, or stretch to fill its parent when used standalone.
+ * 
+ * **When to use**
+ * 
+ * - Use `mdc-skeleton` to indicate that content is loading, in place of the real content while it is being fetched or rendered.
+ * - Use it to wrap a known-shape child (button, avatar, paragraph) so the placeholder matches the eventual layout.
+ * 
+ * **When not to use**
+ * 
+ * - Use `mdc-spinner` when the loading duration is short or you only need a single inline indicator rather than a layout-matching placeholder.
+ * - Use `mdc-progressbar` when there is a known, measurable progress value to communicate.
+ * 
  * @tagname mdc-skeleton
- *
+ * 
  * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.
- *
+ * 
  * @cssproperty --mdc-skeleton-background-color - background color of the skeleton
  * @cssproperty --mdc-skeleton-height - height of the skeleton
  * @cssproperty --mdc-skeleton-width - width of the skeleton

package/dist/components/skeleton/skeleton.component.js

@@ -13,19 +13,6 @@ import { Component } from '../../models';
 import { DEFAULTS } from './skeleton.constants';
 import styles from './skeleton.styles';
 /**
- * `mdc-skeleton` is a component that shows a grey placeholder area.
- * It provides visual feedback to users that content is being loaded.
- *
- * **Skeleton Variants:**
- * - **rectangular**: Default variant with 0.25rem border radius
- * - **rounded**: Has 0.5rem border radius
- * - **circular**: Has 50% border radius for circular shapes
- * - **button**: Optimized for button placeholders with 1.25rem border radius
- *
- * **Sizing Behavior:**
- * 1. If wrapping content, takes dimensions of wrapped content
- * 2. Otherwise grows to fill parent container
- *
  * @tagname mdc-skeleton
  *
  * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.

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

@@ -2,21 +2,23 @@ import type { CSSResult, PropertyValueMap } from 'lit';
 import { Component } from '../../models';
 declare const Slider_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & typeof Component;
 /**
- * Slider component is used to select a value or range of values from within a defined range.
- * It provides a visual representation of the current value(s) and allows users to adjust the value(s) by dragging the thumb(s) along the track.
- * It can be used as a single slider or a range slider. This is set by the boolean attribute `range`
- * If the step value is more than 1, tick marks are shown to represent the steps between the min and max values. The slider thumb will snap to the nearest tick mark.
- *
- * ## Spatial navigation
- *
- * In spatial navigation mode, the user has to step into edit mode to adjust the slider value using left and right navigation keys.
- * To enter edit mode, the user can press the Enter when one of the slider's handler is focused. User can leave edit mode by press
- * Enter or Escape.
- *
+ * The slider lets users pick a value, or a range of values, from a defined numeric range by dragging one or two thumbs along a track. When the step is greater than 1, the slider also renders tick marks and snaps to the nearest tick.
+ * 
+ * **When to use**
+ * 
+ * - Use `mdc-slider` when the user needs to pick a numeric value from a continuous (or stepped) range, and the relative position matters (volume, brightness, zoom, etc.).
+ * - Use `range` when the user needs to pick both ends of a numeric interval (price range, time window).
+ * 
+ * **When not to use**
+ * 
+ * - Use `mdc-stepper` when only discrete numeric increments are meaningful and precise typing is important.
+ * - Use `mdc-input type="number"` when the user needs to type an exact value.
+ * - Use `mdc-toggle` for binary on/off choices.
+ * 
  * @tagname mdc-slider
- *
+ * 
  * @dependency mdc-icon
- *
+ * 
  * @csspart slider-tooltip - The tooltip of the slider
  * @csspart slider-track - The track of the slider
  * @csspart slider-wrapper - The wrapper around the slider input(s)
@@ -24,10 +26,10 @@ declare const Slider_base: import("../../utils/mixins/index.types").Constructor<
  * @csspart slider-tick - The individual tick marks
  * @csspart slider-input - The input element of the slider
  * @csspart slider-label - The label of the slider
- *
+ * 
  * @event input - Fired when the slider value changes
  * @event change - Fired when the slider value is committed
- *
+ * 
  * @cssproperty --mdc-slider-thumb-color - The color of the slider thumb
  * @cssproperty --mdc-slider-thumb-border-color - The color of the slider thumb border
  * @cssproperty --mdc-slider-thumb-size - The size of the slider thumb

package/dist/components/slider/slider.component.js

@@ -16,17 +16,6 @@ import { KeyDownHandledMixin } from '../../utils/mixins/KeyDownHandledMixin';
 import { DEFAULTS } from './slider.constants';
 import styles from './slider.styles';
 /**
- * Slider component is used to select a value or range of values from within a defined range.
- * It provides a visual representation of the current value(s) and allows users to adjust the value(s) by dragging the thumb(s) along the track.
- * It can be used as a single slider or a range slider. This is set by the boolean attribute `range`
- * If the step value is more than 1, tick marks are shown to represent the steps between the min and max values. The slider thumb will snap to the nearest tick mark.
- *
- * ## Spatial navigation
- *
- * In spatial navigation mode, the user has to step into edit mode to adjust the slider value using left and right navigation keys.
- * To enter edit mode, the user can press the Enter when one of the slider's handler is focused. User can leave edit mode by press
- * Enter or Escape.
- *
  * @tagname mdc-slider
  *
  * @dependency mdc-icon