@momentum-design/components 0.36.1 → 0.36.3

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

@@ -0,0 +1,9 @@
+import Chip from './chip.component';
+import '../text';
+import '../icon';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-chip']: Chip;
+    }
+}
+export default Chip;

package/dist/components/chip/index.js

@@ -0,0 +1,6 @@
+import Chip from './chip.component';
+import { TAG_NAME } from './chip.constants';
+import '../text';
+import '../icon';
+Chip.register(TAG_NAME);
+export default Chip;

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

@@ -0,0 +1,30 @@
+import { CSSResult, PropertyValues } from 'lit';
+import Chip from '../chip/chip.component';
+/**
+ * mdc-filterchip component is an interactive chip that consumers can use to select or deselect.
+ * They can be found with lists or tables as quick filters.
+ *
+ * This component is built on top of the mdc-chip component.
+ *
+ * @tagname mdc-filterchip
+ *
+ */
+declare class FilterChip extends Chip {
+    /**
+     * The selected state of the filterchip.
+     *
+     * @default false
+     */
+    selected: boolean;
+    constructor();
+    /**
+     * Sets the selected state of the filterchip along with the icon.
+     * aria-pressed attribute is also set to true or false.
+     * @param selected - The selected state of the filterchip.
+     */
+    private setSelected;
+    protected executeAction(): void;
+    update(changedProperties: PropertyValues): void;
+    static styles: Array<CSSResult>;
+}
+export default FilterChip;

package/dist/components/filterchip/filterchip.component.js

@@ -0,0 +1,64 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property } from 'lit/decorators.js';
+import Chip from '../chip/chip.component';
+import styles from './filterchip.styles';
+import { DEFAULTS } from './filterchip.constants';
+/**
+ * mdc-filterchip component is an interactive chip that consumers can use to select or deselect.
+ * They can be found with lists or tables as quick filters.
+ *
+ * This component is built on top of the mdc-chip component.
+ *
+ * @tagname mdc-filterchip
+ *
+ */
+class FilterChip extends Chip {
+    constructor() {
+        super();
+        /**
+         * The selected state of the filterchip.
+         *
+         * @default false
+         */
+        this.selected = false;
+        this.color = DEFAULTS.COLOR;
+    }
+    /**
+     * Sets the selected state of the filterchip along with the icon.
+     * aria-pressed attribute is also set to true or false.
+     * @param selected - The selected state of the filterchip.
+     */
+    setSelected(selected) {
+        if (selected) {
+            this.iconName = DEFAULTS.ICON_NAME;
+            this.setAttribute('aria-pressed', 'true');
+        }
+        else {
+            this.iconName = undefined;
+            this.setAttribute('aria-pressed', 'false');
+        }
+    }
+    executeAction() {
+        this.selected = !this.selected;
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('selected')) {
+            this.setSelected(this.selected);
+        }
+    }
+}
+FilterChip.styles = [...Chip.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], FilterChip.prototype, "selected", void 0);
+export default FilterChip;

package/dist/components/filterchip/filterchip.constants.d.ts

@@ -0,0 +1,6 @@
+declare const TAG_NAME: "mdc-filterchip";
+declare const DEFAULTS: {
+    ICON_NAME: "check-bold";
+    COLOR: "default";
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/filterchip/filterchip.constants.js

@@ -0,0 +1,7 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('filterchip');
+const DEFAULTS = {
+    ICON_NAME: 'check-bold',
+    COLOR: 'default',
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/filterchip/filterchip.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/filterchip/filterchip.styles.js

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+const styles = css `
+  :host([selected]){
+    border: 2px solid;
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-default-active);
+  }
+
+  :host([selected]:active) {
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-default-normal);
+  }
+
+  :host([selected]:focus) {
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-default-active);
+  }
+
+  :host([disabled]), :host([disabled]:hover), :host([disabled]:active) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-chip-background-color: var(--mds-color-theme-background-primary-disabled);
+    --mdc-chip-color: var(--mds-color-theme-text-primary-disabled);
+    cursor: auto;
+  }
+`;
+export default [styles];

package/dist/components/filterchip/index.d.ts

@@ -0,0 +1,7 @@
+import FilterChip from './filterchip.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-filterchip']: FilterChip;
+    }
+}
+export default FilterChip;

package/dist/components/filterchip/index.js

@@ -0,0 +1,4 @@
+import FilterChip from './filterchip.component';
+import { TAG_NAME } from './filterchip.constants';
+FilterChip.register(TAG_NAME);
+export default FilterChip;

package/dist/components/input/input.constants.d.ts

@@ -9,7 +9,6 @@ declare const AUTO_CAPITALIZE: {
 };
 declare const PREFIX_TEXT_OPTIONS: {
     MAX_LENGTH: number;
-    HELPERTEXT: string;
     VALIDATION: "error";
 };
 declare const DEFAULTS: {

package/dist/components/input/input.constants.js

@@ -13,7 +13,6 @@ const AUTO_CAPITALIZE = {
 };
 const PREFIX_TEXT_OPTIONS = {
     MAX_LENGTH: 10,
-    HELPERTEXT: 'Prefix text should not exceed 10 characters',
     VALIDATION: VALIDATION.ERROR,
 };
 const DEFAULTS = {

package/dist/components/inputchip/index.d.ts

@@ -0,0 +1,10 @@
+import InputChip from './inputchip.component';
+import '../text';
+import '../icon';
+import '../button';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-inputchip']: InputChip;
+    }
+}
+export default InputChip;

package/dist/components/inputchip/index.js

@@ -0,0 +1,7 @@
+import InputChip from './inputchip.component';
+import { TAG_NAME } from './inputchip.constants';
+import '../text';
+import '../icon';
+import '../button';
+InputChip.register(TAG_NAME);
+export default InputChip;

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

@@ -0,0 +1,58 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+declare const InputChip_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
+/**
+ * mdc-inputchip component is an interactive chip that consumers can use to represent an input.
+ *
+ * - It supports a leading icon along with label.
+ * - It supports an error state for validation.
+ * - It supports a close button to remove the chip.
+ *
+ * @tagname mdc-inputchip
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @event click - (React: onClick) This event is dispatched when the close button is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the close button.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the close button.
+ * @event focus - (React: onFocus) This event is dispatched when the close button receives focus.
+ *
+ * @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.
+ *
+ */
+declare class InputChip extends InputChip_base {
+    /**
+     * The label of the inputchip.
+     *
+     * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
+     * including empty spaces to split words.
+     */
+    label: string;
+    /**
+     * The error state of the inputchip.
+     *
+     * @default false
+     */
+    error: boolean;
+    /**
+     * The aria-label of the close button.
+     */
+    clearAriaLabel: string;
+    /**
+     * Renders the icon element if available.
+     * @returns The icon element if available, otherwise nothing.
+     */
+    private renderIcon;
+    /**
+     * Handles the behavior of the close button on click event.
+     * @param event - The event object.
+     */
+    private handleClose;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default InputChip;

package/dist/components/inputchip/inputchip.component.js

@@ -0,0 +1,113 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './inputchip.styles';
+import { Component } from '../../models';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
+import { DEFAULTS } from './inputchip.constants';
+/**
+ * mdc-inputchip component is an interactive chip that consumers can use to represent an input.
+ *
+ * - It supports a leading icon along with label.
+ * - It supports an error state for validation.
+ * - It supports a close button to remove the chip.
+ *
+ * @tagname mdc-inputchip
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @event click - (React: onClick) This event is dispatched when the close button is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the close button.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the close button.
+ * @event focus - (React: onFocus) This event is dispatched when the close button receives focus.
+ *
+ * @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.
+ *
+ */
+class InputChip extends IconNameMixin(DisabledMixin(Component)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * The label of the inputchip.
+         *
+         * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
+         * including empty spaces to split words.
+         */
+        this.label = '';
+        /**
+         * The error state of the inputchip.
+         *
+         * @default false
+         */
+        this.error = false;
+        /**
+         * The aria-label of the close button.
+         */
+        this.clearAriaLabel = '';
+    }
+    /**
+     * Renders the icon element if available.
+     * @returns The icon element if available, otherwise nothing.
+     */
+    renderIcon() {
+        if (!this.iconName)
+            return nothing;
+        return html `
+    <mdc-icon 
+      name="${this.iconName}" 
+      length-unit="rem" 
+      size="1"></mdc-icon>
+  `;
+    }
+    /**
+     * Handles the behavior of the close button on click event.
+     * @param event - The event object.
+     */
+    handleClose(event) {
+        event.stopPropagation(); // Prevents triggering click event twice
+        const EventConstructor = event.constructor;
+        this.dispatchEvent(new EventConstructor(event.type, event));
+    }
+    render() {
+        return html `
+        ${this.renderIcon()}
+        <mdc-text type="${DEFAULTS.TEXT_TYPE}" tagname="${DEFAULTS.TAG_NAME}">${this.label}</mdc-text>
+        <mdc-button 
+          ?disabled="${this.disabled}"
+          variant="tertiary"
+          part="close-icon"
+          aria-label="${this.clearAriaLabel}"
+          prefix-icon="${DEFAULTS.CLOSE_ICON}"
+          size="20"
+          @click="${this.handleClose}"
+        ></mdc-button>
+      `;
+    }
+}
+InputChip.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], InputChip.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], InputChip.prototype, "error", void 0);
+__decorate([
+    property({ type: String, attribute: 'clear-aria-label' }),
+    __metadata("design:type", Object)
+], InputChip.prototype, "clearAriaLabel", void 0);
+export default InputChip;

package/dist/components/inputchip/inputchip.constants.d.ts

@@ -0,0 +1,7 @@
+declare const TAG_NAME: "mdc-inputchip";
+declare const DEFAULTS: {
+    TEXT_TYPE: "body-midsize-regular";
+    TAG_NAME: "span";
+    CLOSE_ICON: "cancel-bold";
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/inputchip/inputchip.constants.js

@@ -0,0 +1,9 @@
+import utils from '../../utils/tag-name';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+const TAG_NAME = utils.constructTagName('inputchip');
+const DEFAULTS = {
+    TEXT_TYPE: TYPE.BODY_MIDSIZE_REGULAR,
+    TAG_NAME: VALID_TEXT_TAGS.SPAN,
+    CLOSE_ICON: 'cancel-bold',
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/inputchip/inputchip.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/inputchip/inputchip.styles.js

@@ -0,0 +1,53 @@
+import { css } from 'lit';
+import { hostFitContentStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    height: 1.5rem;
+    gap: 0.25rem;
+    padding: 0 0.25rem 0 0.5rem;
+    border-radius: 0.25rem;
+    border: 1px solid;
+    cursor: pointer;
+
+    --mdc-chip-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-chip-border-color: var(--mds-color-theme-outline-button-normal);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-default-normal);
+
+    color: var(--mdc-chip-color);
+    border-color: var(--mdc-chip-border-color);
+    background-color: var(--mdc-chip-background-color);
+  }
+
+  :host(:hover) {
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-default-hover);
+  }
+  
+  :host(:active) {
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-default-active);
+  }
+  
+  :host([error]){
+    --mdc-chip-border-color: var(--mds-color-theme-outline-cancel-normal);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-error-normal);
+  }
+
+  :host([error]:hover) {
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-error-hover);
+  }
+
+  :host([error]:active) {
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-error-active);
+  }
+
+  :host([disabled]), :host([disabled]:hover), :host([disabled]:active) {
+    --mdc-chip-border-color: var(--mds-color-theme-common-outline-primary-disabled);
+    --mdc-chip-background-color: var(--mds-color-theme-background-primary-disabled);
+    --mdc-chip-color: var(--mds-color-theme-text-primary-disabled);
+    cursor: auto;
+  }
+
+  :host::part(close-icon){
+    border-radius: 0.25rem;
+  }
+`;
+export default [hostFitContentStyles, styles];

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

@@ -1,6 +1,7 @@
 import type { CSSResult, PropertyValues } from 'lit';
-import { TemplateResult } from 'lit';
+import { nothing, TemplateResult } from 'lit';
 import { Component } from '../../models';
+import type { TextType } from '../text/text.types';
 import type { ListItemVariants } from './listitem.types';
 declare const ListItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Component;
 /**
@@ -84,7 +85,7 @@ declare class ListItem extends ListItem_base {
      * @param content - The text content to be displayed within the slot.
      * @returns A TemplateResult containing a slot with an `mdc-text` element of type BODY_SMALL_REGULAR.
      */
-    private getText;
+    protected getText(slotName: string, type: TextType, content?: string): TemplateResult | typeof nothing;
     /**
      * Disable or enable all slotted elements in the leading and trailing slots.
      * This is useful when the list item is disabled, to prevent the user from interacting with the controls.

package/dist/components/listitem/listitem.component.js

@@ -61,7 +61,7 @@ class ListItem extends DataAriaLabelMixin(DisabledMixin(TabIndexMixin(Component)
          * @default 'full-width'
          */
         this.variant = DEFAULTS.VARIANT;
-        this.role = 'listitem';
+        this.role = this.role || 'listitem';
     }
     /**
      * Generates a template for a text slot with the specified content.

package/dist/components/listitem/listitem.styles.js

@@ -25,11 +25,14 @@ const styles = css `
     border-radius: 3.125rem;
   }
   :host([disabled]),
+  :host([disabled]:hover),
+  :host([disabled]:active),
   :host([disabled])::part(leading-text-secondary-label),
   :host([disabled])::part(leading-text-tertiary-label),
   :host([disabled])::part(leading-text-primary-label),
   :host([disabled])::part(trailing-text-side-header),
   :host([disabled])::part(trailing-text-subline) {
+    background-color: unset;
     color: var(--mdc-listitem-disabled-color);
     cursor: default;
   }

package/dist/components/optgroup/index.d.ts

@@ -0,0 +1,8 @@
+import OptGroup from './optgroup.component';
+import '../text';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-optgroup']: OptGroup;
+    }
+}
+export default OptGroup;

package/dist/components/optgroup/index.js

@@ -0,0 +1,5 @@
+import OptGroup from './optgroup.component';
+import { TAG_NAME } from './optgroup.constants';
+import '../text';
+OptGroup.register(TAG_NAME);
+export default OptGroup;

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

@@ -0,0 +1,28 @@
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+declare const OptGroup_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
+/**
+ * optgroup component, which creates a grouping of mdc-option within a listbox element.
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-optgroup
+ *
+ * @slot default - This is a default slot for mdc-option elements.
+ *
+ * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.
+ */
+declare class OptGroup extends OptGroup_base {
+    /**
+     * The header text to be displayed on the top of the options list.
+     */
+    label?: string;
+    /** @internal */
+    options: Array<HTMLElement>;
+    private setDisabledForAllOptions;
+    updated(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default OptGroup;

package/dist/components/optgroup/optgroup.component.js

@@ -0,0 +1,77 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, nothing } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { Component } from '../../models';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { HEADER_ID } from './optgroup.constants';
+import styles from './optgroup.styles';
+/**
+ * optgroup component, which creates a grouping of mdc-option within a listbox element.
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-optgroup
+ *
+ * @slot default - This is a default slot for mdc-option elements.
+ *
+ * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.
+ */
+class OptGroup extends DataAriaLabelMixin(DisabledMixin(Component)) {
+    setDisabledForAllOptions() {
+        this.options.forEach((element) => {
+            if (this.disabled) {
+                element.setAttribute('disabled', '');
+            }
+            else {
+                element.removeAttribute('disabled');
+            }
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('disabled')) {
+            this.setDisabledForAllOptions();
+        }
+    }
+    render() {
+        var _a;
+        const headerText = this.label ? html `
+      <mdc-text
+        id="${HEADER_ID}"
+        part="header-text"
+        type="${TYPE.BODY_MIDSIZE_BOLD}"
+        tagname="${VALID_TEXT_TAGS.SPAN}"
+      >${this.label}</mdc-text>
+    ` : nothing;
+        return html `
+      <div
+        role="group"
+        aria-labelledby="${this.label ? HEADER_ID : ''}"
+        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+      >
+        ${headerText}
+        <slot role="presentation"></slot>
+      </div>
+    `;
+    }
+}
+OptGroup.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], OptGroup.prototype, "label", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'mdc-option' }),
+    __metadata("design:type", Array)
+], OptGroup.prototype, "options", void 0);
+export default OptGroup;

package/dist/components/optgroup/optgroup.constants.d.ts

@@ -0,0 +1,3 @@
+declare const TAG_NAME: "mdc-optgroup";
+declare const HEADER_ID = "header-id";
+export { TAG_NAME, HEADER_ID };

package/dist/components/optgroup/optgroup.constants.js

@@ -0,0 +1,4 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('optgroup');
+const HEADER_ID = 'header-id';
+export { TAG_NAME, HEADER_ID };

package/dist/components/optgroup/optgroup.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/optgroup/optgroup.styles.js

@@ -0,0 +1,16 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-optgroup-disabled-color: var(--mds-color-theme-text-primary-disabled);
+  }
+  :host::part(header-text) {
+    padding: 0.5rem 0.75rem;
+    height: 2.25rem;
+  }
+  :host([disabled]),
+  :host([disabled])::part(header-text) {
+    color: var(--mdc-optgroup-disabled-color);
+    cursor: default;
+  }
+`;
+export default [styles];