@momentum-design/components 0.129.25 → 0.129.27

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

@@ -17,16 +17,11 @@ import type { AnnouncementDialogSize } from './announcementdialog.types';
  * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
  * or Escape is pressed).
  *
- * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
+ * ## Accessibility
+ * - You have to be explicitly set the following attributes:
+ *  * The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
+ *  * Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
  *
- * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
- * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
- *
- * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**
- * - Use `?visible=true/false` as an attribute instead of `visible=true/false`
- * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
- *
- * @dependency mdc-button
  * @dependency mdc-illustration
  * @dependency mdc-text
  *

package/dist/components/announcementdialog/announcementdialog.component.js

@@ -30,16 +30,11 @@ import { DEFAULTS } from './announcementdialog.constants';
  * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
  * or Escape is pressed).
  *
- * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
+ * ## Accessibility
+ * - You have to be explicitly set the following attributes:
+ *  * The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
+ *  * Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
  *
- * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
- * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
- *
- * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**
- * - Use `?visible=true/false` as an attribute instead of `visible=true/false`
- * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
- *
- * @dependency mdc-button
  * @dependency mdc-illustration
  * @dependency mdc-text
  *

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

@@ -68,6 +68,7 @@ declare class ButtonLink extends ButtonLink_base {
     private setSoftDisabled;
     update(changedProperties: PropertyValues): void;
     protected renderAnchorContent(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
 export default ButtonLink;

package/dist/components/buttonlink/buttonlink.component.js

@@ -9,6 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import Button from '../button/button.component';
 import { ButtonComponentMixin } from '../../utils/mixins/ButtonComponentMixin';
 import { DEFAULTS } from '../button/button.constants';
@@ -110,6 +111,28 @@ class ButtonLink extends ButtonComponentMixin(Linksimple) {
             : ''}
     `;
     }
+    render() {
+        var _a;
+        return html `
+      <a
+        class="mdc-focus-ring"
+        part="anchor"
+        href="${ifDefined(this.href)}"
+        target="${this.target}"
+        rel="${ifDefined(this.rel)}"
+        download="${ifDefined(this.download)}"
+        ping="${ifDefined(this.ping)}"
+        hreflang="${ifDefined(this.hreflang)}"
+        type="${ifDefined(this.type)}"
+        referrerpolicy="${ifDefined(this.referrerpolicy)}"
+        role="button"
+        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+        tabindex="${this.disabled ? -1 : 0}"
+      >
+        ${this.renderAnchorContent()}
+      </a>
+    `;
+    }
 }
 ButtonLink.styles = [...Button.styles, ...styles];
 __decorate([

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

@@ -4,12 +4,25 @@ import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import type { CheckboxValidationType } from './checkbox.types';
 declare const Checkbox_base: 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;
 /**
- * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
- * These are often used in forms, settings, and selections in lists.
+ * The Checkbox component allows users to select one or multiple options from a list, toggle features on/off,
+ * or indicate agreement in forms and settings. These are commonly used in forms, lists, and settings panels
+ * where users need to make selections or express preferences.
  *
- * A checkbox component contains an optional label and an optional helper text.
+ * To create a group of checkboxes, use the `mdc-formfieldgroup` component.
  *
- * To create a group of checkboxes, use the FormFieldGroup component.
+ * **Note:** This component internally renders a native checkbox input element with custom styling.
+ *
+ * ## When to use
+ * Use checkboxes when users can select multiple options from a list, or when a single checkbox represents a binary choice (e.g., agreeing to terms).
+ *
+ * ## Accessibility
+ * - Provide clear labels that describe what the checkbox controls
+ * - Use `data-aria-label` when a visual label is not present
+ * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form
+ *
+ * ## Styling
+ * Use the `static-checkbox` part to apply custom styles to the checkbox visual element.
+ * This part exposes the underlying [StaticCheckbox](?path=/docs/components-decorator-staticcheckbox--docs) component for advanced styling.
  *
  * @dependency mdc-button
  * @dependency mdc-icon
@@ -22,26 +35,6 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
  *
- * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
- * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
- * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
- * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
- * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
- * @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.
- * @cssproperty --mdc-label-color - Color for the label text.
- * @cssproperty --mdc-help-text-font-size - Font size for the help text.
- * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
- * @cssproperty --mdc-help-text-line-height - Line height for the help text.
- * @cssproperty --mdc-help-text-color - Color for the help text.
- * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.
- *
- * @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.
@@ -50,33 +43,34 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  * @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.
- * @csspart checkbox-input - The native checkbox input element.
+ * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.
  * @csspart text-container - The container for the label and helper text elements.
- * @csspart static-checkbox - The static checkbox element.
+ * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.
  */
 declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
     /**
-     * Determines whether the checkbox is selected or unselected.
-     *
+     * Determines whether the checkbox is checked (selected) or unchecked.
      * @default false
      */
     checked: boolean;
     /**
-     * This property is used to determine the parent checkbox in a nested checkbox group.
-     * If any one of the children is unselected, then the parent checkbox will be indeterminate.
-     * If all children are either selected or unselected, then the parent checkbox will not be indeterminate.
-     *
+     * Determines whether the checkbox is in an indeterminate (mixed) state.
+     * Typically used in nested checkbox groups where the parent checkbox represents partial selection.
+     * - If any child is unchecked, the parent appears indeterminate.
+     * - If all children share the same state (all checked or all unchecked), the parent is not indeterminate.
      * @default false
      */
     indeterminate: boolean;
     /**
-     * Automatically focus on the element when the page loads.
+     * Automatically focuses the checkbox when the page loads.
      * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
      * @default false
      */
     autofocus: boolean;
     /**
-     * The type of help text/validation. It can be 'default' or 'error'.
+     * Determines the visual style of the helper text.
+     * - **default**: Standard helper text appearance
+     * - **error**: Error state with validation styling
      * @default 'default'
      */
     helpTextType: CheckboxValidationType;
@@ -85,16 +79,18 @@ declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
      * Updates the form value to reflect the current state of the checkbox.
      * If checked, the value is set to either the user-provided value or 'on' if no value is provided.
      * If unchecked, the value is set to null.
+     * @internal
      */
     private setFormValue;
     /**
      * Manages the required state of the checkbox.
      * If the checkbox is not checked and the required property is set, then the checkbox is invalid.
+     * @internal
      */
     private manageRequired;
-    /** @internal
-     * Resets the checkbox to its initial state.
-     * The checked property is set to false.
+    /**
+     * Resets the checkbox to its initial unchecked state.
+     * @internal
      */
     formResetCallback(): void;
     /** @internal */
@@ -103,20 +99,24 @@ declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
      * Toggles the state of the checkbox element.
      * If the element is not disabled, soft-disabled, or readonly, then
      * the checked property is toggled and the indeterminate property is set to false.
+     * @internal
      */
     private toggleState;
     /**
      * Handles the keydown event on the checkbox.
      * When the user presses Enter, the form is submitted.
      * @param event - The keyboard event.
+     * @internal
      */
     private handleKeyDown;
     /**
-     * Toggles the state of the checkbox element.
-     * and dispatch the new change event.
+     * Toggles the state of the checkbox element and dispatches the change event.
+     * @param event - The change event.
+     * @internal
      */
     handleChange(event: Event): void;
     update(changedProperties: PropertyValues): void;
+    /** @internal */
     private renderLabelAndHelperText;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/checkbox/checkbox.component.js

@@ -19,12 +19,25 @@ import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwra
 import styles from './checkbox.styles';
 import { CHECKBOX_VALIDATION } from './checkbox.constants';
 /**
- * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
- * These are often used in forms, settings, and selections in lists.
+ * The Checkbox component allows users to select one or multiple options from a list, toggle features on/off,
+ * or indicate agreement in forms and settings. These are commonly used in forms, lists, and settings panels
+ * where users need to make selections or express preferences.
  *
- * A checkbox component contains an optional label and an optional helper text.
+ * To create a group of checkboxes, use the `mdc-formfieldgroup` component.
  *
- * To create a group of checkboxes, use the FormFieldGroup component.
+ * **Note:** This component internally renders a native checkbox input element with custom styling.
+ *
+ * ## When to use
+ * Use checkboxes when users can select multiple options from a list, or when a single checkbox represents a binary choice (e.g., agreeing to terms).
+ *
+ * ## Accessibility
+ * - Provide clear labels that describe what the checkbox controls
+ * - Use `data-aria-label` when a visual label is not present
+ * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form
+ *
+ * ## Styling
+ * Use the `static-checkbox` part to apply custom styles to the checkbox visual element.
+ * This part exposes the underlying [StaticCheckbox](?path=/docs/components-decorator-staticcheckbox--docs) component for advanced styling.
  *
  * @dependency mdc-button
  * @dependency mdc-icon
@@ -37,26 +50,6 @@ import { CHECKBOX_VALIDATION } from './checkbox.constants';
  * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
  *
- * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
- * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
- * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
- * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
- * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
- * @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.
- * @cssproperty --mdc-label-color - Color for the label text.
- * @cssproperty --mdc-help-text-font-size - Font size for the help text.
- * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
- * @cssproperty --mdc-help-text-line-height - Line height for the help text.
- * @cssproperty --mdc-help-text-color - Color for the help text.
- * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.
- *
- * @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.
@@ -65,38 +58,40 @@ import { CHECKBOX_VALIDATION } from './checkbox.constants';
  * @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.
- * @csspart checkbox-input - The native checkbox input element.
+ * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.
  * @csspart text-container - The container for the label and helper text elements.
- * @csspart static-checkbox - The static checkbox element.
+ * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.
  */
 class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {
         super(...arguments);
         /**
-         * Determines whether the checkbox is selected or unselected.
-         *
+         * Determines whether the checkbox is checked (selected) or unchecked.
          * @default false
          */
         this.checked = false;
         /**
-         * This property is used to determine the parent checkbox in a nested checkbox group.
-         * If any one of the children is unselected, then the parent checkbox will be indeterminate.
-         * If all children are either selected or unselected, then the parent checkbox will not be indeterminate.
-         *
+         * Determines whether the checkbox is in an indeterminate (mixed) state.
+         * Typically used in nested checkbox groups where the parent checkbox represents partial selection.
+         * - If any child is unchecked, the parent appears indeterminate.
+         * - If all children share the same state (all checked or all unchecked), the parent is not indeterminate.
          * @default false
          */
         this.indeterminate = false;
         /**
-         * Automatically focus on the element when the page loads.
+         * Automatically focuses the checkbox when the page loads.
          * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
          * @default false
          */
         this.autofocus = false;
         /**
-         * The type of help text/validation. It can be 'default' or 'error'.
+         * Determines the visual style of the helper text.
+         * - **default**: Standard helper text appearance
+         * - **error**: Error state with validation styling
          * @default 'default'
          */
         this.helpTextType = CHECKBOX_VALIDATION.DEFAULT;
+        /** @internal */
         this.renderLabelAndHelperText = () => {
             if (!this.label)
                 return nothing;
@@ -116,6 +111,7 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
      * Updates the form value to reflect the current state of the checkbox.
      * If checked, the value is set to either the user-provided value or 'on' if no value is provided.
      * If unchecked, the value is set to null.
+     * @internal
      */
     setFormValue() {
         let actualValue = null;
@@ -131,6 +127,7 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
     /**
      * Manages the required state of the checkbox.
      * If the checkbox is not checked and the required property is set, then the checkbox is invalid.
+     * @internal
      */
     manageRequired() {
         if (!this.checked && this.required) {
@@ -146,9 +143,9 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
             this.internals.setValidity({});
         }
     }
-    /** @internal
-     * Resets the checkbox to its initial state.
-     * The checked property is set to false.
+    /**
+     * Resets the checkbox to its initial unchecked state.
+     * @internal
      */
     formResetCallback() {
         this.checked = false;
@@ -164,6 +161,7 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
      * Toggles the state of the checkbox element.
      * If the element is not disabled, soft-disabled, or readonly, then
      * the checked property is toggled and the indeterminate property is set to false.
+     * @internal
      */
     toggleState() {
         if (!this.disabled && !this.softDisabled && !this.readonly) {
@@ -175,6 +173,7 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
      * Handles the keydown event on the checkbox.
      * When the user presses Enter, the form is submitted.
      * @param event - The keyboard event.
+     * @internal
      */
     handleKeyDown(event) {
         var _a;
@@ -186,8 +185,9 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
         }
     }
     /**
-     * Toggles the state of the checkbox element.
-     * and dispatch the new change event.
+     * Toggles the state of the checkbox element and dispatches the change event.
+     * @param event - The change event.
+     * @internal
      */
     handleChange(event) {
         this.toggleState();

package/dist/components/checkbox/checkbox.styles.js

@@ -3,6 +3,9 @@ import { hostFocusRingStyles } from '../../utils/styles';
 const styles = [
     css `
     :host {
+      --mdc-label-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+      --mdc-label-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
+      --mdc-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
       flex-direction: row;
       align-items: flex-start;
     }
@@ -20,8 +23,8 @@ const styles = [
       opacity: 0.1%;
       overflow: visible;
       z-index: 1;
-      width: var(--mdc-checkbox-size);
-      height: var(--mdc-checkbox-size);
+      width: var(--mdc-staticcheckbox-size);
+      height: var(--mdc-staticcheckbox-size);
       border-radius: 0.125rem;
     }
 
@@ -32,9 +35,6 @@ const styles = [
     }
 
     :host::part(label) {
-      --mdc-label-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
-      --mdc-label-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
-      --mdc-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
       word-break: break-word;
       white-space: normal;
     }
@@ -45,25 +45,25 @@ const styles = [
     }
 
     :host(:hover)::part(static-checkbox) {
-      --mdc-checkbox-background-color: var(--mds-color-theme-control-inactive-hover);
+      --mdc-staticcheckbox-background-color: var(--mds-color-theme-control-inactive-hover);
     }
 
     :host(:active)::part(static-checkbox) {
-      --mdc-checkbox-background-color: var(--mds-color-theme-control-inactive-pressed);
+      --mdc-staticcheckbox-background-color: var(--mds-color-theme-control-inactive-pressed);
     }
 
     :host([checked]:hover)::part(static-checkbox),
     :host([indeterminate]:hover)::part(static-checkbox) {
-      --mdc-checkbox-background-color: var(--mds-color-theme-control-active-hover);
+      --mdc-staticcheckbox-background-color: var(--mds-color-theme-control-active-hover);
     }
 
     :host([checked]:active)::part(static-checkbox),
     :host([indeterminate]:active)::part(static-checkbox) {
-      --mdc-checkbox-background-color: var(--mds-color-theme-control-active-pressed);
+      --mdc-staticcheckbox-background-color: var(--mds-color-theme-control-active-pressed);
     }
 
     :host([help-text-type='error'])::part(static-checkbox) {
-      --mdc-checkbox-border-color: var(--mds-color-theme-outline-cancel-normal);
+      --mdc-staticcheckbox-border-color: var(--mds-color-theme-outline-cancel-normal);
     }
 
     :host([readonly]),

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

@@ -1,4 +1,4 @@
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import type { ColorType } from '../staticchip/staticchip.types';
 declare const Chip_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Buttonsimple;
@@ -6,11 +6,11 @@ declare const Chip_base: import("../../utils/mixins/index.types").Constructor<im
  * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.
  * Consumers can wrap this component around a tooltip to provide additional context.
  *
- * It is recommended to keep the label text for the chip component concise and compact.
+ * 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.
  *
- * This component is built by extending Buttonsimple.
+ * This component is built by extending `Buttonsimple`.
  *
  * @tagname mdc-chip
  *
@@ -20,15 +20,14 @@ declare const Chip_base: import("../../utils/mixins/index.types").Constructor<im
  * @cssproperty --mdc-chip-color - The color of the chip.
  * @cssproperty --mdc-chip-border-color - The border color of the chip.
  * @cssproperty --mdc-chip-background-color - The background color of the chip.
- * @cssproperty --mdc-button-height - Height for button size
  *
+ * @csspart icon - The icon part of the chip.
  * @csspart label - The label part of the chip.
  *
  * @event click - (React: onClick) This event is dispatched when the chip is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
  * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
- *
  */
 declare class Chip extends Chip_base {
     /**
@@ -52,8 +51,10 @@ declare class Chip extends Chip_base {
      *
      * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
      * including empty spaces to split words.
+     *
+     * @default undefined
      */
-    label: string;
+    label?: string;
     connectedCallback(): void;
     /**
      * Renders the icon element if available.

package/dist/components/chip/chip.component.js

@@ -18,11 +18,11 @@ import styles from './chip.styles';
  * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.
  * Consumers can wrap this component around a tooltip to provide additional context.
  *
- * It is recommended to keep the label text for the chip component concise and compact.
+ * 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.
  *
- * This component is built by extending Buttonsimple.
+ * This component is built by extending `Buttonsimple`.
  *
  * @tagname mdc-chip
  *
@@ -32,15 +32,14 @@ import styles from './chip.styles';
  * @cssproperty --mdc-chip-color - The color of the chip.
  * @cssproperty --mdc-chip-border-color - The border color of the chip.
  * @cssproperty --mdc-chip-background-color - The background color of the chip.
- * @cssproperty --mdc-button-height - Height for button size
  *
+ * @csspart icon - The icon part of the chip.
  * @csspart label - The label part of the chip.
  *
  * @event click - (React: onClick) This event is dispatched when the chip is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
  * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
- *
  */
 class Chip extends IconNameMixin(Buttonsimple) {
     constructor() {
@@ -61,13 +60,6 @@ class Chip extends IconNameMixin(Buttonsimple) {
          * @default default
          */
         this.color = DEFAULTS.COLOR;
-        /**
-         * The visible label text of the chip.
-         *
-         * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
-         * including empty spaces to split words.
-         */
-        this.label = '';
     }
     connectedCallback() {
         super.connectedCallback();
@@ -103,6 +95,6 @@ __decorate([
 ], Chip.prototype, "color", void 0);
 __decorate([
     property({ type: String }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], Chip.prototype, "label", void 0);
 export default Chip;

package/dist/components/dialog/dialog.constants.js

@@ -1,4 +1,6 @@
 import utils from '../../utils/tag-name';
+import { ROLE } from '../../utils/roles';
+import { VALID_TEXT_TAGS } from '../text/text.constants';
 const TAG_NAME = utils.constructTagName('dialog');
 const DIALOG_VARIANT = {
     DEFAULT: 'default',
@@ -7,10 +9,10 @@ const DIALOG_VARIANT = {
 const DEFAULTS = {
     VISIBLE: false,
     Z_INDEX: 1000,
-    ROLE: 'dialog',
+    ROLE: ROLE.DIALOG,
     SIZE: 'small',
-    HEADER_TAG_NAME: 'h2',
-    DESCRIPTION_TAG_NAME: 'p',
+    HEADER_TAG_NAME: VALID_TEXT_TAGS.H2,
+    DESCRIPTION_TAG_NAME: VALID_TEXT_TAGS.P,
     CANCEL_ICON: 'cancel-bold',
     VARIANT: DIALOG_VARIANT.DEFAULT,
     DISABLE_ARIA_HAS_POPUP: false,
@@ -18,5 +20,5 @@ const DEFAULTS = {
     HIDE_BACKDROP: false,
 };
 const DIALOG_SIZE = ['small', 'medium', 'large', 'xlarge', 'fullscreen'];
-const DIALOG_ROLE = ['dialog', 'alertdialog'];
+const DIALOG_ROLE = [ROLE.DIALOG, ROLE.ALERTDIALOG];
 export { TAG_NAME, DEFAULTS, DIALOG_SIZE, DIALOG_ROLE, DIALOG_VARIANT };

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

@@ -98,5 +98,13 @@ declare class Linksimple extends Linksimple_base {
     protected renderAnchorContent(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
 }
 export default Linksimple;

package/dist/components/linksimple/linksimple.component.js

@@ -112,7 +112,7 @@ class Linksimple extends DataAriaLabelMixin(DisabledMixin(Component)) {
       <a
         class="mdc-focus-ring"
         part="anchor"
-        href="${this.href}"
+        href="${ifDefined(this.href)}"
         target="${this.target}"
         rel="${ifDefined(this.rel)}"
         download="${ifDefined(this.download)}"
@@ -129,6 +129,7 @@ class Linksimple extends DataAriaLabelMixin(DisabledMixin(Component)) {
     }
 }
 Linksimple.styles = [...Component.styles, ...styles];
+Linksimple.shadowRootOptions = { ...Component.shadowRootOptions, delegatesFocus: true };
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)

package/dist/components/select/select.styles.js

@@ -57,7 +57,6 @@ const styles = css `
     --mdc-select-background-color: var(--mds-color-theme-background-primary-active);
   }
   :host::part(base-text) {
-    height: 100%;
     /* 2rem is the complete width of dropdown icon */
     width: calc(100% - 2rem);
     color: var(--mdc-select-text-color);