@momentum-design/components 0.129.8 → 0.129.10

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

@@ -2,30 +2,31 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/accordion';
 import type { Events as EventsInherited } from '../../components/accordionbutton/accordionbutton.types';
 /**
- * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.
+ * An accordion is a vertically stacked component with a header and expandable/collapsible body section.
+ * The header displays a prefix icon, header text, optional control slots (leading and trailing), and a dedicated expand/collapse button.
+ * Unlike `accordionbutton`, only the expand/collapse button is clickable and not the entire header.
  *
- * The header section contains:
- * - Prefix Icon
- * - Header Text
- * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.
- * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.
+ * ## Header contains
+ * - Optional prefix icon
+ * - Header text (default H3, customizable via `data-aria-level`)
+ * - Leading slot for controls (placed after header text)
+ * - Trailing slot for controls (placed before expand/collapse button)
+ * - Expand/collapse button (automatically positioned at the end)
  *
- * The body section contains:
- * - Default slot - User can place any content inside the body section.
+ * ## Body contains
+ * - Default slot for any content
  *
- * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>
- * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>
- * There are two sizes of accordion, one is small and the other is large.
- * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.
+ * The accordion supports different border styles through the `variant` attribute and different spacing through the `size` attribute.
+ * An accordion can be disabled, which prevents all interactions including the expand/collapse button and any slotted controls.
  *
- * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.
- * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.
+ * ## When to use
+ * - Use `mdc-accordion` when you need additional interactive controls (chips, badges, buttons, icons) in the header.
+ * - Use `mdc-accordionbutton` if you only need a simple clickable header without extra controls.
  *
- * An accordion can be disabled, and when it's disabled, the header section will not be clickable.
- *
- * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
- *
- * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.
+ * ## Accessibility
+ * - Always provide `open-button-aria-label` and `close-button-aria-label` for screen reader support
+ * - Adjust `data-aria-level` based on heading hierarchy in your page
+ * - Note: Screen readers may lose focus when toggling if accordion is expanded by default
  *
  * @tagname mdc-accordion
  *
@@ -33,16 +34,14 @@ import type { Events as EventsInherited } from '../../components/accordionbutton
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @slot leading-controls - The leading controls slot of the accordion on the header section.
- * @slot trailing-controls - The trailing controls slot of the accordion on the header section.
+ * @slot leading-controls - The leading controls slot of the accordion on the header section. Placed after the header text.
+ * @slot trailing-controls - The trailing controls slot of the accordion on the header section. Placed before the expand/collapse button.
  * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.
  *
- * @event shown - (React: onShown) This event is triggered when the accordion is expanded.
+ * @event shown - (React: onShown) This event is triggered when the accordion is toggled (expanded or collapsed).
  *
  * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.
- * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.
- * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.
- * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled text color of the accordion.
  *
  * @csspart body-section - The body section of the accordion.
  * @csspart header-section - The header section of the accordion.

package/dist/react/accordion/index.js

@@ -3,30 +3,31 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/accordion';
 import { TAG_NAME } from '../../components/accordion/accordion.constants';
 /**
- * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.
+ * An accordion is a vertically stacked component with a header and expandable/collapsible body section.
+ * The header displays a prefix icon, header text, optional control slots (leading and trailing), and a dedicated expand/collapse button.
+ * Unlike `accordionbutton`, only the expand/collapse button is clickable and not the entire header.
  *
- * The header section contains:
- * - Prefix Icon
- * - Header Text
- * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.
- * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.
+ * ## Header contains
+ * - Optional prefix icon
+ * - Header text (default H3, customizable via `data-aria-level`)
+ * - Leading slot for controls (placed after header text)
+ * - Trailing slot for controls (placed before expand/collapse button)
+ * - Expand/collapse button (automatically positioned at the end)
  *
- * The body section contains:
- * - Default slot - User can place any content inside the body section.
+ * ## Body contains
+ * - Default slot for any content
  *
- * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>
- * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>
- * There are two sizes of accordion, one is small and the other is large.
- * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.
+ * The accordion supports different border styles through the `variant` attribute and different spacing through the `size` attribute.
+ * An accordion can be disabled, which prevents all interactions including the expand/collapse button and any slotted controls.
  *
- * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.
- * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.
+ * ## When to use
+ * - Use `mdc-accordion` when you need additional interactive controls (chips, badges, buttons, icons) in the header.
+ * - Use `mdc-accordionbutton` if you only need a simple clickable header without extra controls.
  *
- * An accordion can be disabled, and when it's disabled, the header section will not be clickable.
- *
- * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
- *
- * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.
+ * ## Accessibility
+ * - Always provide `open-button-aria-label` and `close-button-aria-label` for screen reader support
+ * - Adjust `data-aria-level` based on heading hierarchy in your page
+ * - Note: Screen readers may lose focus when toggling if accordion is expanded by default
  *
  * @tagname mdc-accordion
  *
@@ -34,16 +35,14 @@ import { TAG_NAME } from '../../components/accordion/accordion.constants';
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @slot leading-controls - The leading controls slot of the accordion on the header section.
- * @slot trailing-controls - The trailing controls slot of the accordion on the header section.
+ * @slot leading-controls - The leading controls slot of the accordion on the header section. Placed after the header text.
+ * @slot trailing-controls - The trailing controls slot of the accordion on the header section. Placed before the expand/collapse button.
  * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.
  *
- * @event shown - (React: onShown) This event is triggered when the accordion is expanded.
+ * @event shown - (React: onShown) This event is triggered when the accordion is toggled (expanded or collapsed).
  *
  * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.
- * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.
- * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.
- * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled text color of the accordion.
  *
  * @csspart body-section - The body section of the accordion.
  * @csspart header-section - The header section of the accordion.

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

@@ -2,28 +2,27 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/accordionbutton';
 import type { Events } from '../../components/accordionbutton/accordionbutton.types';
 /**
- * An accordion button contains a header and body section with optional slots inside the heading which are focusable.
+ * An accordion button is a vertically stacked component with a clickable header and expandable/collapsible body section.
+ * The entire header is clickable to toggle the visibility of the body content.
  *
- * The header section contains:
- * - Prefix Icon
- * - Header Text
+ * ## Header contains
+ * - Optional prefix icon
+ * - Header text (default H3, customizable via `data-aria-level`)
+ * - Expand/collapse arrow icon (visual indicator)
  *
- * The body section contains:
- * - Default slot - User can place any content inside the body section.
+ * ## Body contains
+ * - Default slot for any content
  *
- * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>
- * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>
- * There are two sizes of accordion, one is small and the other is large.
- * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.
+ * The accordion button supports different border styles through the `variant` attribute and different spacing through the `size` attribute.
+ * An accordion button can be disabled, which prevents the header from being clickable.
  *
- * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.
- * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.
+ * ## When to use
+ * - Use `mdc-accordionbutton` for simple clickable headers without additional controls.
+ * - Use `mdc-accordion` instead if you need extra controls (chips, badges, icons) in the header.
  *
- * An accordion can be disabled, and when it's disabled, the header section will not be clickable.
- *
- * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.
- *
- * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.
+ * ## Accessibility
+ * - Adjust `data-aria-level` based on heading hierarchy in your page.
+ * - Note: Screen readers may lose focus when toggling if accordion button is expanded by default.
  *
  * @tagname mdc-accordionbutton
  *
@@ -33,12 +32,12 @@ import type { Events } from '../../components/accordionbutton/accordionbutton.ty
  *
  * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.
  *
- * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.
+ * @event shown - (React: onShown) This event is triggered when the accordion button is toggled (expanded or collapsed).
  *
  * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.
- * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.
- * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.
- * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.
+ * @cssproperty --mdc-accordionbutton-hover-color - The hover background color of the accordion button header.
+ * @cssproperty --mdc-accordionbutton-active-color - The active background color of the accordion button header.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled text color of the accordion button.
  *
  * @csspart body-section - The body section of the accordion button.
  * @csspart header-button-section - The header button section of the accordion button.

package/dist/react/accordionbutton/index.js

@@ -3,28 +3,27 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/accordionbutton';
 import { TAG_NAME } from '../../components/accordionbutton/accordionbutton.constants';
 /**
- * An accordion button contains a header and body section with optional slots inside the heading which are focusable.
+ * An accordion button is a vertically stacked component with a clickable header and expandable/collapsible body section.
+ * The entire header is clickable to toggle the visibility of the body content.
  *
- * The header section contains:
- * - Prefix Icon
- * - Header Text
+ * ## Header contains
+ * - Optional prefix icon
+ * - Header text (default H3, customizable via `data-aria-level`)
+ * - Expand/collapse arrow icon (visual indicator)
  *
- * The body section contains:
- * - Default slot - User can place any content inside the body section.
+ * ## Body contains
+ * - Default slot for any content
  *
- * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>
- * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>
- * There are two sizes of accordion, one is small and the other is large.
- * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.
+ * The accordion button supports different border styles through the `variant` attribute and different spacing through the `size` attribute.
+ * An accordion button can be disabled, which prevents the header from being clickable.
  *
- * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.
- * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.
+ * ## When to use
+ * - Use `mdc-accordionbutton` for simple clickable headers without additional controls.
+ * - Use `mdc-accordion` instead if you need extra controls (chips, badges, icons) in the header.
  *
- * An accordion can be disabled, and when it's disabled, the header section will not be clickable.
- *
- * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.
- *
- * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.
+ * ## Accessibility
+ * - Adjust `data-aria-level` based on heading hierarchy in your page.
+ * - Note: Screen readers may lose focus when toggling if accordion button is expanded by default.
  *
  * @tagname mdc-accordionbutton
  *
@@ -34,12 +33,12 @@ import { TAG_NAME } from '../../components/accordionbutton/accordionbutton.const
  *
  * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.
  *
- * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.
+ * @event shown - (React: onShown) This event is triggered when the accordion button is toggled (expanded or collapsed).
  *
  * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.
- * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.
- * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.
- * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.
+ * @cssproperty --mdc-accordionbutton-hover-color - The hover background color of the accordion button header.
+ * @cssproperty --mdc-accordionbutton-active-color - The active background color of the accordion button header.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled text color of the accordion button.
  *
  * @csspart body-section - The body section of the accordion button.
  * @csspart header-button-section - The header button section of the accordion button.

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

@@ -1,32 +1,24 @@
 import Component from '../../components/accordiongroup';
 /**
- * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.
- * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.
- * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
+ * An accordion group is a container that manages multiple accordion or accordionbutton components as a unified set.
+ * It controls the visual styling, spacing, and expansion behavior of all child accordions.
  *
- * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.
+ * The group applies consistent `variant` and `size` attributes to all children automatically.
+ * By default, expanding one accordion collapses others (`allow-multiple` is false). Set `allow-multiple` to true to allow multiple expanded items.
  *
- * There are three types of variants:
- * - Stacked - Each accordion will have a gap of 1.5rem (24px).
- * - Borderless - Each accordion will not have any border and the group will also not have any border.
- * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.
+ * ## Accepted children
+ * - Use `mdc-accordionbutton` children for simple clickable headers.
+ * - Use `mdc-accordion` children when you need additional controls (chips, badges, icons) in the headers.
+ * - Other elements in the slot are ignored.
  *
- * There are two types of sizes:
- * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.
- * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.
- *
- * The variant and size will be applied to all accordions inside this accordion group.
- * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.
- *
- * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
- *
- * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.
+ * ## Accessibility
+ * - Note: Screen readers may lose focus when toggling if the first accordion is expanded by default.
  *
  * @tagname mdc-accordiongroup
  *
  * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.
  *
- * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup
+ * @cssproperty --mdc-accordiongroup-items-border-color - The border color applied to all child accordion items and their separators.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/accordiongroup/index.js

@@ -3,33 +3,25 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/accordiongroup';
 import { TAG_NAME } from '../../components/accordiongroup/accordiongroup.constants';
 /**
- * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.
- * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.
- * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
+ * An accordion group is a container that manages multiple accordion or accordionbutton components as a unified set.
+ * It controls the visual styling, spacing, and expansion behavior of all child accordions.
  *
- * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.
+ * The group applies consistent `variant` and `size` attributes to all children automatically.
+ * By default, expanding one accordion collapses others (`allow-multiple` is false). Set `allow-multiple` to true to allow multiple expanded items.
  *
- * There are three types of variants:
- * - Stacked - Each accordion will have a gap of 1.5rem (24px).
- * - Borderless - Each accordion will not have any border and the group will also not have any border.
- * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.
+ * ## Accepted children
+ * - Use `mdc-accordionbutton` children for simple clickable headers.
+ * - Use `mdc-accordion` children when you need additional controls (chips, badges, icons) in the headers.
+ * - Other elements in the slot are ignored.
  *
- * There are two types of sizes:
- * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.
- * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.
- *
- * The variant and size will be applied to all accordions inside this accordion group.
- * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.
- *
- * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
- *
- * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.
+ * ## Accessibility
+ * - Note: Screen readers may lose focus when toggling if the first accordion is expanded by default.
  *
  * @tagname mdc-accordiongroup
  *
  * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.
  *
- * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup
+ * @cssproperty --mdc-accordiongroup-items-border-color - The border color applied to all child accordion items and their separators.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -34,71 +34,23 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  *
  * @tagname mdc-tab
  *
- * @cssproperty --mdc-button-height - Height for button size
- * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.
- * @cssproperty --mdc-tab-height - Height of the tab.
- * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab
- *  in disabled state.
- * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.
- * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.
- * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab
- *  in pressed state.
- * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.
- * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.
- * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.
- * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab
- *  in disabled state.
- * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab
- *  in hover state.
- * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab
- *  in rest state.
- * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab
- *  in pressed state.
- * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.
- * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.
- * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.
- * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab
- *  in disabled state.
- * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.
- * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.
- * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.
- * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.
- * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.
- * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab
- *  in disabled state.
- * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.
- * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.
- * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.
- * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.
- * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.
- * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.
- * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab
- *  in pressed state.
- * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab
- *  in disabled state
- * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.
- * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab
- *  in rest state.
- * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.
- * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.
- * @cssproperty --mdc-tab-padding-left - Padding left for the tab.
- * @cssproperty --mdc-tab-padding-right - Padding right for the tab.
- * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.
- * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab
- *  in disabled state.
- * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.
- * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.
- * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.
- * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.
- * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.
- * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab
- *  in pressed state.
- * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab
- *  in disabled state.
- * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.
- * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.
- * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.
- * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
+ * @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.
+ * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.
+ * @cssproperty --mdc-tab-background-color - The background color of the tab.
+ * @cssproperty --mdc-tab-color - The text color of the tab.
+ * @cssproperty --mdc-tab-border-radius - The border radius of 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 icon - The icon of the tab.

package/dist/react/tab/index.js

@@ -34,71 +34,23 @@ import { TAG_NAME } from '../../components/tab/tab.constants';
  *
  * @tagname mdc-tab
  *
- * @cssproperty --mdc-button-height - Height for button size
- * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.
- * @cssproperty --mdc-tab-height - Height of the tab.
- * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab
- *  in disabled state.
- * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.
- * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.
- * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab
- *  in pressed state.
- * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.
- * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.
- * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.
- * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab
- *  in disabled state.
- * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab
- *  in hover state.
- * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab
- *  in rest state.
- * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab
- *  in pressed state.
- * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.
- * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.
- * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.
- * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab
- *  in disabled state.
- * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.
- * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.
- * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.
- * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.
- * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.
- * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab
- *  in disabled state.
- * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.
- * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.
- * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.
- * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.
- * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.
- * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.
- * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab
- *  in pressed state.
- * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab
- *  in disabled state
- * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.
- * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab
- *  in rest state.
- * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.
- * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.
- * @cssproperty --mdc-tab-padding-left - Padding left for the tab.
- * @cssproperty --mdc-tab-padding-right - Padding right for the tab.
- * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.
- * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab
- *  in disabled state.
- * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.
- * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.
- * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.
- * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.
- * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.
- * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab
- *  in pressed state.
- * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab
- *  in disabled state.
- * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.
- * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.
- * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.
- * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
+ * @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.
+ * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.
+ * @cssproperty --mdc-tab-background-color - The background color of the tab.
+ * @cssproperty --mdc-tab-color - The text color of the tab.
+ * @cssproperty --mdc-tab-border-radius - The border radius of 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 icon - The icon of the tab.

package/package.json

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