@momentum-design/components 0.49.1 → 0.49.3

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

@@ -0,0 +1,544 @@
+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, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { KEYS } from '../../utils/keys';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
+import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
+import { TAG_NAME as OPTION_GROUP_TAG_NAME } from '../optgroup/optgroup.constants';
+import { TAG_NAME as OPTION_TAG_NAME } from '../option/option.constants';
+import { POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { ARROW_ICON } from './select.constants';
+import styles from './select.styles';
+/**
+ * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
+ * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
+ * The component ensures accessibility and usability while handling various use cases,
+ * including long text truncation with tooltip support.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-popover
+ * @dependency mdc-text
+ *
+ * @tagname mdc-select
+ *
+ * @slot default - This is a default/unnamed slot for options and/or option group.
+ *
+ * @event click - (React: onClick) This event is dispatched when the select is clicked.
+ * @event change - (React: onChange) This event is dispatched when the select is changed.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
+ * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
+ */
+class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * readonly attribute of the select field. If true, the select is read-only.
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * height attribute of the select field. If set,
+         * then a scroll bar will be visible when there more options than the adjusted height.
+         * @default 'auto'
+         */
+        this.height = 'auto';
+        /** @internal */
+        this.baseIconName = ARROW_ICON.ARROW_DOWN;
+        /** @internal */
+        this.selectedValue = '';
+        /** @internal */
+        this.showPopover = false;
+        /** @internal */
+        this.activeDescendant = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // select will only contain name and value will be defined in the options.
+        this.value = undefined;
+        this.addEventListener('keydown', this.handleKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('keydown', this.handleKeydown);
+    }
+    /**
+     * A helper function which returns a flattened array of all valid options from the assigned slot.
+     * It takes care of the edge cases where the option is either a direct child or a
+     * child of an option group.
+     */
+    getAllValidOptions() {
+        var _a;
+        return ((_a = this.optionsList) === null || _a === void 0 ? void 0 : _a.map((option) => {
+            if (option.tagName.toLowerCase() === OPTION_TAG_NAME) {
+                return option;
+            }
+            if (option.tagName.toLowerCase() === OPTION_GROUP_TAG_NAME) {
+                return Array.from(option.children).filter((optgroup) => optgroup.tagName.toLowerCase() === OPTION_TAG_NAME);
+            }
+            return [];
+        }).flat()) || [];
+    }
+    handlePopoverOpen() {
+        this.baseIconName = ARROW_ICON.ARROW_UP;
+    }
+    handlePopoverClose() {
+        this.baseIconName = ARROW_ICON.ARROW_DOWN;
+    }
+    /**
+     * Updates the tabindex and selected attribute of the options.
+     * If selectedOption is provided, it will be set as the selected option.
+     * Otherwise, it will set the first option as the selected option.
+     * @param selectedOption - The option which should be selected.
+     */
+    updateTabIndexForAllOptions(selectedOption) {
+        var _a;
+        let isTabIndexSet = false;
+        this.getAllValidOptions().forEach((option) => {
+            if (option === selectedOption) {
+                this.setSelectedValue(option);
+                isTabIndexSet = true;
+                option.setAttribute('selected', '');
+                option.setAttribute('tabindex', '0');
+            }
+            else {
+                option === null || option === void 0 ? void 0 : option.setAttribute('tabindex', '-1');
+                option === null || option === void 0 ? void 0 : option.removeAttribute('selected');
+            }
+        });
+        if (isTabIndexSet) {
+            return;
+        }
+        // if no option is selected, set the first option as focused
+        (_a = this.getAllValidOptions()[0]) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', '0');
+    }
+    /**
+     * A private method which is called when an option is clicked.
+     * It is used to update the tabindex and selected attribute of the options.
+     * @param event - The event which triggered this function.
+     */
+    handleOptionsClick(event) {
+        this.updateTabIndexForAllOptions(event.target);
+    }
+    /**
+     * Sets the selected value based on the provided option element.
+     * It retrieves the 'label' attribute of the option, if present,
+     * otherwise it falls back to the option's text content.
+     * @param option - The option element from which to set the selected value.
+     */
+    setSelectedValue(option) {
+        var _a, _b, _c, _d;
+        this.selectedValueText = (_b = (_a = option === null || option === void 0 ? void 0 : option.getAttribute('label')) !== null && _a !== void 0 ? _a : option === null || option === void 0 ? void 0 : option.textContent) !== null && _b !== void 0 ? _b : '';
+        this.selectedValue = (_d = (_c = option === null || option === void 0 ? void 0 : option.getAttribute('value')) !== null && _c !== void 0 ? _c : option === null || option === void 0 ? void 0 : option.textContent) !== null && _d !== void 0 ? _d : '';
+        // Set form value
+        this.internals.setFormValue(this.selectedValue);
+        this.manageRequired();
+        // dispatch a change event when a value is selected
+        this.dispatchChange(this.selectedValue);
+    }
+    /**
+     * Manages the required state of the select.
+     * If the value is not set and the requiredLabel property is set,
+     * then the select is invalid.
+     */
+    manageRequired() {
+        if (!this.selectedValue && this.requiredLabel) {
+            if (this.validationMessage) {
+                this.inputElement.setCustomValidity(this.validationMessage);
+            }
+            else {
+                this.inputElement.setCustomValidity('');
+            }
+            this.setValidity();
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    /**
+     * @internal
+     * Resets the select to its initial state.
+     */
+    formResetCallback() {
+        this.selectedValue = '';
+        this.selectedValueText = undefined;
+        this.internals.setFormValue(this.selectedValue);
+        this.updateTabIndexForAllOptions();
+    }
+    /** @internal */
+    formStateRestoreCallback(state) {
+        this.selectedValue = state;
+        this.selectedValueText = state;
+    }
+    dispatchChange(value) {
+        if (!value) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value },
+            composed: true,
+            bubbles: true,
+        }));
+    }
+    /**
+     * Handles the keydown event on the select element.
+     * If the popover is open, then it calls `handlePopoverOnOpen` with the event.
+     * If the popover is closed, then it calls `handlePopoverOnClose` with the event.
+     * @param event - The keyboard event.
+     */
+    handleKeydown(event) {
+        if (this.showPopover) {
+            this.handlePopoverOnOpen(event);
+        }
+        else {
+            this.handlePopoverOnClose(event);
+        }
+    }
+    /**
+     * Handles the keydown event on the select element when the popover is open.
+     * The options are as follows:
+     * - SPACE or ENTER: Selects the currently active option and closes the popover.
+     * - ESCAPE: Closes the popover.
+     * - HOME: Sets focus and tabindex on the first option.
+     * - END: Sets focus and tabindex on the last option.
+     * - ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options.
+     * @param event - The keyboard event.
+     */
+    handlePopoverOnOpen(event) {
+        var _a;
+        switch (event.key) {
+            case KEYS.SPACE:
+                this.updateTabIndexForAllOptions(event.target);
+                this.closePopover();
+                break;
+            case KEYS.ENTER:
+                this.updateTabIndexForAllOptions(event.target);
+                this.closePopover();
+                // if the popover is closed, then we submit the form.
+                (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
+                break;
+            case KEYS.ESCAPE:
+                this.closePopover();
+                break;
+            case KEYS.HOME:
+                this.setFocusAndTabIndex(0);
+                break;
+            case KEYS.END:
+                this.setFocusAndTabIndex(this.getAllValidOptions().length - 1);
+                break;
+            case KEYS.ARROW_DOWN:
+            case KEYS.ARROW_UP:
+            case KEYS.PAGE_DOWN:
+            case KEYS.PAGE_UP:
+                this.handleOptionsNavigation(event);
+                this.updateActivedescendant(event.target);
+                break;
+            default:
+                break;
+        }
+    }
+    /**
+     * Handles the keydown event on the select element when the popover is closed.
+     * The options are as follows:
+     * - ARROW_DOWN, ARROW_UP, SPACE: Opens the popover and prevents the default scrolling behavior.
+     * - ENTER: Opens the popover, prevents default scrolling, and submits the form if the popover is closed.
+     * - HOME: Opens the popover and sets focus and tabindex on the first option.
+     * - END: Opens the popover and sets focus and tabindex on the last option.
+     * @param event - The keyboard event.
+     */
+    handlePopoverOnClose(event) {
+        switch (event.key) {
+            case KEYS.ARROW_DOWN:
+            case KEYS.ARROW_UP:
+            case KEYS.ENTER:
+            case KEYS.SPACE:
+                this.openPopover();
+                // Prevent the default browser behavior of scrolling down
+                event.preventDefault();
+                break;
+            case KEYS.HOME:
+                this.openPopover();
+                this.setFocusAndTabIndex(0);
+                break;
+            case KEYS.END:
+                this.openPopover();
+                this.setFocusAndTabIndex(this.getAllValidOptions().length - 1);
+                break;
+            default:
+                break;
+        }
+    }
+    /**
+     * Handles the navigation of options when the user presses
+     * ArrowUp, ArrowDown, PageUp, or PageDown keys.
+     * @param event - The keyboard event that triggered the navigation.
+     */
+    handleOptionsNavigation(event) {
+        const options = this.getAllValidOptions();
+        const currentIndex = options.findIndex((option) => option === event.target);
+        const newIndex = this.getNewIndexBasedOnKey(event.key, currentIndex, options.length);
+        if (newIndex !== -1) {
+            this.setFocusAndTabIndex(newIndex);
+            // Prevent the default browser behavior of scrolling down
+            // when pressing ArrowUp, ArrowDown, PageUp, or PageDown keys
+            event.preventDefault();
+        }
+    }
+    /**
+     * Calculates the new index based on the pressed navigation key.
+     * Supports ArrowUp, ArrowDown, PageUp, and PageDown keys for navigating options.
+     * - ArrowDown: Moves focus to the next option, if available.
+     * - ArrowUp: Moves focus to the previous option, if available.
+     * - PageDown: Moves focus 10 options down or to the last option.
+     * - PageUp: Moves focus 10 options up or to the first option.
+     *
+     * @param key - The navigation key that was pressed.
+     * @param currentIndex - The current index of the focused option.
+     * @param optionsLength - The total number of options.
+     * @returns The new index to focus on, or -1 if no movement is possible.
+     */
+    getNewIndexBasedOnKey(key, currentIndex, optionsLength) {
+        if (key === KEYS.ARROW_DOWN && currentIndex !== optionsLength - 1) {
+            return currentIndex + 1;
+        }
+        if (key === KEYS.ARROW_UP && currentIndex > 0) {
+            return currentIndex - 1;
+        }
+        if (key === KEYS.PAGE_DOWN) {
+            // Jumps visual focus down 10 options (or to last option).
+            return (currentIndex + 10) > optionsLength ? optionsLength - 1 : currentIndex + 10;
+        }
+        if (key === KEYS.PAGE_UP) {
+            // Jumps visual focus up 10 options (or to first option).
+            return (currentIndex - 10) < 0 ? 0 : currentIndex - 10;
+        }
+        return -1;
+    }
+    updateActivedescendant(target) {
+        var _a, _b;
+        const currentIndex = this.getAllValidOptions().findIndex((option) => option === target);
+        this.activeDescendant = (_b = (_a = this.getAllValidOptions()[currentIndex]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '';
+    }
+    resetActivedescendant() {
+        this.activeDescendant = '';
+    }
+    setFocusAndTabIndex(newIndex) {
+        var _a;
+        (_a = this.getAllValidOptions()[newIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        this.getAllValidOptions().forEach((node, index) => {
+            const newTabindex = newIndex === index ? '0' : '-1';
+            node === null || node === void 0 ? void 0 : node.setAttribute('tabindex', newTabindex);
+        });
+    }
+    openPopover() {
+        this.showPopover = true;
+        this.resetActivedescendant();
+    }
+    closePopover() {
+        this.showPopover = false;
+        this.resetActivedescendant();
+    }
+    /**
+     * Handles the first updated lifecycle event.
+     * If an option is selected, use that as the value.
+     * If not, use the placeholder if it exists, otherwise use the first option.
+     */
+    firstUpdated() {
+        const options = this.getAllValidOptions();
+        const selectedOptionIndex = options.findIndex((option) => option === null || option === void 0 ? void 0 : option.hasAttribute('selected'));
+        if (selectedOptionIndex !== -1) {
+            this.setSelectedValue(options[selectedOptionIndex]);
+            this.updateTabIndexForAllOptions(options[selectedOptionIndex]);
+        }
+        else if (!this.placeholder) {
+            // We will show the first option as selected.
+            this.setSelectedValue(options[0]);
+            this.updateTabIndexForAllOptions();
+        }
+        else if (this.placeholder) {
+            // If there is no default selected option
+            // then we set the placeholder and call the native validity
+            this.manageRequired();
+        }
+    }
+    /**
+     * Generates the native select element.
+     * The native select element is not rendered directly and is not visible on the UI.
+     * It's rendered only on the DOM for accessibility purposes.
+     * Instead, the overlay uses the native select element to generate the list of options.
+     * @returns A TemplateResult representing the native select element.
+     */
+    getNativeSelect() {
+        var _a;
+        return html `
+      <select
+        part="native-select"
+        id="${this.id}"
+        tabindex="-1"
+        name="${this.name}"
+        size="1"
+        .value="${this.selectedValue}"
+        ?autofocus="${this.autofocus}"
+        ?disabled="${this.disabled}"
+        ?required="${!!this.requiredLabel}"
+        aria-activedescendant="${this.activeDescendant}"
+        aria-expanded="${this.showPopover}"
+        aria-haspopup="listbox"
+        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+        aria-labelledby="${this.label ? FORMFIELD_DEFAULTS.HEADING_ID : ''}"
+        @mousedown="${(event) => event.preventDefault()}"
+      >
+        ${this.getOptionsContentFromSlot()}
+      </select>
+    `;
+    }
+    /**
+     * This method maps over all valid options and constructs their corresponding
+     * HTML `<option>` elements. The attributes such as `value`, `label`, `disabled`,
+     * and `selected` are extracted from the respective option elements.
+     * If the attribute is not present, a default value or fallback is used.
+     * The content of each `<option>` is set to the text content of the option element.
+     * @returns An array of `TemplateResult` representing the option elements.
+     */
+    getOptionsContentFromSlot() {
+        return this.getAllValidOptions()
+            .map((option) => {
+            var _a, _b;
+            return html `
+        <option
+          part="native-select"
+          value="${(_a = option.getAttribute('value')) !== null && _a !== void 0 ? _a : ''}"
+          label="${(_b = option.getAttribute('label')) !== null && _b !== void 0 ? _b : ''}"
+          ?disabled="${!!option.hasAttribute('disabled')}"
+          ?selected="${!!option.hasAttribute('selected')}"
+        >
+          ${option.textContent}
+        </option>
+    `;
+        });
+    }
+    /**
+     * Generates the content for the popover associated with the select component.
+     * If the component is disabled or readonly, returns `nothing`.
+     * Otherwise, returns a `TemplateResult` that renders a popover with various configurations
+     * such as visibility, interaction, and event handlers.
+     * The popover acts as a dropdown list with options, allowing user interaction.
+     */
+    getPopoverContent() {
+        if (this.disabled || this.readonly) {
+            return nothing;
+        }
+        return html `
+      <mdc-popover
+        id="options-popover"
+        triggerid="select-base-triggerid"
+        interactive
+        ?visible="${this.showPopover}"
+        hide-on-outside-click
+        focus-back-to-trigger
+        focus-trap
+        prevent-scroll
+        role="listbox"
+        placement="${POPOVER_PLACEMENT.BOTTOM_START}"
+        @shown="${this.handlePopoverOpen}"
+        @hidden="${this.handlePopoverClose}"
+        style="--mdc-popover-max-width: 100%; --mdc-popover-max-height: ${this.height};"
+      >
+        <slot @click="${this.handleOptionsClick}"></slot>
+      </mdc-popover>
+    `;
+    }
+    shouldFocusSelect() {
+        if (this.disabled || this.readonly) {
+            return false;
+        }
+        return true;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('disabled') || changedProperties.has('readonly')) {
+            this.closePopover();
+            this.handlePopoverClose();
+        }
+    }
+    render() {
+        var _a;
+        return html `
+      ${this.renderLabel()}
+      <div part="container">
+        <div
+          id="select-base-triggerid"
+          part="base-container"
+          tabindex="${this.shouldFocusSelect() ? '0' : '-1'}"
+          class="${this.shouldFocusSelect() ? 'mdc-focus-ring' : ''}"
+        >
+          <mdc-text
+            part="base-text ${this.selectedValueText ? 'selected' : ''}"
+            type="${TYPE.BODY_MIDSIZE_REGULAR}"
+            tagname="${VALID_TEXT_TAGS.SPAN}"
+          >
+            ${(_a = this.selectedValueText) !== null && _a !== void 0 ? _a : this.placeholder}
+          </mdc-text>
+          <div part="icon-container">
+            <mdc-icon size="1" length-unit="rem" name="${this.baseIconName}"></mdc-icon>
+          </div>
+        </div>
+        ${this.getNativeSelect()}
+        ${this.getPopoverContent()}
+      </div>
+      ${this.renderHelperText()}
+    `;
+    }
+}
+Select.styles = [...FormfieldWrapper.styles, ...styles];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Select.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Select.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String, attribute: 'height' }),
+    __metadata("design:type", Object)
+], Select.prototype, "height", void 0);
+__decorate([
+    queryAssignedElements(),
+    __metadata("design:type", Array)
+], Select.prototype, "optionsList", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], Select.prototype, "baseIconName", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], Select.prototype, "selectedValueText", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Select.prototype, "selectedValue", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Select.prototype, "showPopover", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Select.prototype, "activeDescendant", void 0);
+__decorate([
+    query('select'),
+    __metadata("design:type", HTMLInputElement)
+], Select.prototype, "inputElement", void 0);
+export default Select;

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

@@ -0,0 +1,6 @@
+declare const TAG_NAME: "mdc-select";
+declare const ARROW_ICON: {
+    readonly ARROW_UP: "arrow-up-bold";
+    readonly ARROW_DOWN: "arrow-down-bold";
+};
+export { ARROW_ICON, TAG_NAME };

package/dist/components/select/select.constants.js

@@ -0,0 +1,7 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('select');
+const ARROW_ICON = {
+    ARROW_UP: 'arrow-up-bold',
+    ARROW_DOWN: 'arrow-down-bold',
+};
+export { ARROW_ICON, TAG_NAME };

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

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

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

@@ -0,0 +1,103 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    --mdc-select-background-color: var(--mds-color-theme-background-primary-ghost);
+    --mdc-select-icon-border-color: var(--mds-color-theme-outline-input-normal);
+    --mdc-select-base-text-color: var(--mds-color-theme-text-secondary-normal);
+    --mdc-select-selected-text-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-select-disabled-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-select-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-select-error-border-color: var(--mds-color-theme-text-error-normal);
+    --mdc-select-warning-border-color: var(--mds-color-theme-text-warning-normal);
+    --mdc-select-success-border-color: var(--mds-color-theme-text-success-normal);
+    --mdc-select-background-hover: var(--mds-color-theme-background-primary-hover);
+    --mdc-select-background-active: var(--mds-color-theme-background-primary-active);
+
+    display: flex;
+    flex-direction: column;
+    row-gap: 0.5rem;
+    align-items: unset;
+    width: unset;
+  }
+  :host::part(native-select) {
+    margin: 0;
+    opacity: 0.1%;
+    overflow: visible;
+    padding: 0;
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    z-index: 1;
+  }
+  :host::part(container) {
+    width: 100%;
+    position: relative;
+  }
+  :host::part(base-container) {
+    border-radius: 0.5rem;
+    padding: 5.5px 6px 5.5px 12px;
+    border: 1px solid var(--mdc-select-icon-border-color);
+    background: var(--mdc-select-background-color);
+    display: flex;
+    gap: 0.375rem;
+  }
+  :host::part(base-container):hover {
+    background-color: var(--mdc-select-background-hover);
+  }
+  :host::part(base-container):active {
+    background-color: var(--mdc-select-background-active);
+  }
+  :host::part(base-text) {
+    height: 1.3125rem;
+    width: 100%;
+    color: var(--mdc-select-base-text-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  :host::part(selected) {
+    color: var(--mdc-select-selected-text-color);
+  }
+  :host::part(icon-container) {
+    margin-left: auto;
+    display: flex;
+    padding: 2px;
+  }
+  :host([readonly])::part(icon-container) {
+    color: var(--mdc-select-disabled-text-color);
+  }
+  :host::part(popover-content) {
+    min-width: auto;
+  }
+  :host([disabled])::part(base-container),
+  :host([readonly])::part(base-container),
+  :host([help-text-type="success"][disabled])::part(base-container),
+  :host([help-text-type="error"][disabled])::part(base-container),
+  :host([help-text-type="warning"][disabled])::part(base-container),
+  :host([help-text-type="success"][readonly])::part(base-container),
+  :host([help-text-type="error"][readonly])::part(base-container),
+  :host([help-text-type="warning"][readonly])::part(base-container) {
+    border-color: var(--mdc-select-disabled-color);
+  }
+  :host([disabled]:hover)::part(base-container),
+  :host([readonly]:hover)::part(base-container) {
+    background-color: unset;
+  }
+  :host([readonly])::part(base-text) {
+    color: var(--mdc-select-selected-text-color);
+  }
+  :host([disabled])::part(base-text) {
+    color: var(--mdc-select-disabled-text-color);
+  }
+  :host([help-text-type="success"])::part(base-container) {
+    border-color: var(--mdc-select-success-border-color);
+  }
+  :host([help-text-type="error"])::part(base-container) {
+    border-color: var(--mdc-select-error-border-color);
+  }
+  :host([help-text-type="warning"])::part(base-container) {
+    border-color: var(--mdc-select-warning-border-color);
+  }
+`;
+export default [styles, ...hostFocusRingStyles(true)];

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

@@ -0,0 +1,7 @@
+interface Events {
+    onClickEvent: MouseEvent;
+    onChangeEvent: Event;
+    onKeyDownEvent: KeyboardEvent;
+    onFocusEvent: FocusEvent;
+}
+export type { Events };

package/dist/components/select/select.types.js

@@ -0,0 +1 @@
+export {};