@momentum-design/components 0.92.2 → 0.92.4

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

@@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
 import { KEYS } from '../../utils/keys';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
@@ -20,7 +21,7 @@ import { TAG_NAME as OPTION_GROUP_TAG_NAME } from '../optgroup/optgroup.constant
 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, TRIGGER_ID } from './select.constants';
+import { ARROW_ICON, LISTBOX_ID, TRIGGER_ID } from './select.constants';
 import styles from './select.styles';
 /**
  * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
@@ -30,6 +31,8 @@ import styles from './select.styles';
  *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
  *
+ * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover
@@ -60,23 +63,43 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
          * @default auto
          */
         this.height = 'auto';
+        /**
+         * The placeholder text which will be shown on the text if provided.
+         */
+        this.placement = POPOVER_PLACEMENT.BOTTOM_START;
         /** @internal */
         this.baseIconName = ARROW_ICON.ARROW_DOWN;
         /** @internal */
         this.selectedValue = '';
         /** @internal */
         this.displayPopover = false;
-        /** @internal */
-        this.activeDescendant = '';
     }
     /**
-     * A helper function which returns a flattened array of all valid options from the assigned slot.
+     * Modifies the listbox wrapper to ensure it has the correct attributes
+     * and IDs for accessibility.
+     *
+     * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers,
+     * this an be removed and mdc-option can be used directly in the select component with a listbox in a different
+     * shadow root and aria-owns attribute to connect them.
+     */
+    modifyListBoxWrapper() {
+        const slottedListBox = this.slottedListboxes[0];
+        if (!slottedListBox) {
+            return;
+        }
+        slottedListBox.setAttribute('id', LISTBOX_ID);
+        slottedListBox.setAttribute('aria-label', this.dataAriaLabel || '');
+        slottedListBox.setAttribute('aria-labelledby', TRIGGER_ID);
+    }
+    /**
+     * A helper function which returns a flattened array of all valid options from within the slotted listbox.
      * 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 => {
+        const optionsList = Array.from(((_a = this.slottedListboxes[0]) === null || _a === void 0 ? void 0 : _a.children) || []);
+        return ((optionsList === null || optionsList === void 0 ? void 0 : optionsList.map(option => {
             if (option.tagName.toLowerCase() === OPTION_TAG_NAME) {
                 return option;
             }
@@ -86,15 +109,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             return [];
         }).flat()) || []);
     }
-    handlePopoverOpen() {
-        this.displayPopover = true;
-        this.baseIconName = ARROW_ICON.ARROW_UP;
-        this.updateActivedescendant();
-    }
-    handlePopoverClose() {
-        this.displayPopover = false;
-        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.
@@ -164,11 +178,8 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             else {
                 this.inputElement.setCustomValidity('');
             }
-            this.setValidity();
-        }
-        else {
-            this.internals.setValidity({});
         }
+        this.setValidity();
     }
     /**
      * @internal
@@ -180,6 +191,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.selectedIcon = null;
         this.internals.setFormValue(this.selectedValue);
         this.updateTabIndexForAllOptions();
+        this.requestUpdate();
     }
     /** @internal */
     formStateRestoreCallback(state) {
@@ -253,6 +265,18 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
                 break;
         }
     }
+    handleClickCombobox(event) {
+        if (this.disabled || this.softDisabled || this.readonly) {
+            return;
+        }
+        if (this.displayPopover) {
+            this.closePopover();
+        }
+        else {
+            this.openPopover();
+        }
+        event.stopPropagation();
+    }
     /**
      * Handles the keydown event on the select element when the popover is closed.
      * The options are as follows:
@@ -262,15 +286,23 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      * - END: Opens the popover and sets focus and tabindex on the last option.
      * @param event - The keyboard event.
      */
-    handlePopoverOnClose(event) {
+    handleKeydownCombobox(event) {
+        if (this.disabled || this.softDisabled || this.readonly) {
+            return;
+        }
         switch (event.key) {
             case KEYS.ARROW_DOWN:
             case KEYS.ARROW_UP:
+                this.openPopover();
+                // Prevent the default browser behavior of scrolling down
+                event.preventDefault();
+                break;
             case KEYS.ENTER:
             case KEYS.SPACE:
                 this.openPopover();
                 // Prevent the default browser behavior of scrolling down
                 event.preventDefault();
+                event.stopPropagation();
                 break;
             case KEYS.HOME:
                 this.openPopover();
@@ -332,24 +364,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         }
         return -1;
     }
-    updateActivedescendant(target) {
-        var _a, _b, _c, _d, _e;
-        const options = this.getAllValidOptions();
-        if (target) {
-            const currentIndex = options.findIndex(option => option === target);
-            this.activeDescendant = (_b = (_a = options[currentIndex]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '';
-        }
-        else {
-            // If no target is provided, find the option with tabindex="0" or the first option
-            const focusedOption = options.find(option => option.getAttribute('tabindex') === '0');
-            this.activeDescendant = (_e = (_c = focusedOption === null || focusedOption === void 0 ? void 0 : focusedOption.id) !== null && _c !== void 0 ? _c : (_d = options[0]) === null || _d === void 0 ? void 0 : _d.id) !== null && _e !== void 0 ? _e : '';
-        }
-    }
-    resetActivedescendant() {
-        this.activeDescendant = '';
-    }
     setFocusAndTabIndex(newIndex) {
-        var _a;
         const options = this.getAllValidOptions();
         const targetOption = options[newIndex];
         if (targetOption) {
@@ -358,30 +373,24 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
                 const newTabindex = newIndex === index ? '0' : '-1';
                 node === null || node === void 0 ? void 0 : node.setAttribute('tabindex', newTabindex);
             });
-            // Update activeDescendant after changing focus
-            this.activeDescendant = (_a = targetOption.id) !== null && _a !== void 0 ? _a : '';
         }
     }
     openPopover() {
-        var _a, _b;
         this.displayPopover = true;
-        // Find the currently selected option or the first option
-        const options = this.getAllValidOptions();
-        const selectedOption = options.find(option => option.hasAttribute('selected'));
-        const focusedOption = options.find(option => option.getAttribute('tabindex') === '0');
-        // Set activeDescendant to the selected/focused option or first option
-        this.activeDescendant = (_b = (_a = (selectedOption || focusedOption || options[0])) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '';
+        this.baseIconName = ARROW_ICON.ARROW_UP;
     }
     closePopover() {
         this.displayPopover = false;
-        this.resetActivedescendant();
+        this.baseIconName = ARROW_ICON.ARROW_DOWN;
     }
     /**
      * 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() {
+    async firstUpdated() {
+        await this.updateComplete;
+        this.modifyListBoxWrapper();
         const options = this.getAllValidOptions();
         const selectedOptionIndex = options.findIndex(option => option === null || option === void 0 ? void 0 : option.hasAttribute('selected'));
         if (selectedOptionIndex !== -1) {
@@ -399,122 +408,75 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             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() {
-        return html `
-      <select
-        part="native-select"
-        id="${this.id}"
-        tabindex="-1"
-        aria-hidden="true"
-        name="${this.name}"
-        size="1"
-        .value="${this.selectedValue}"
-        ?autofocus="${this.autofocus}"
-        ?disabled="${this.disabled}"
-        ?required="${this.required}"
-        @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="${TRIGGER_ID}"
-        @keydown="${this.handlePopoverOnOpen}"
-        interactive
-        ?visible="${this.displayPopover}"
-        hide-on-outside-click
-        hide-on-escape
-        focus-back-to-trigger
-        focus-trap
-        role="${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>
-    `;
-    }
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('disabled') || changedProperties.has('readonly')) {
-            this.closePopover();
-            this.handlePopoverClose();
-        }
-        if (changedProperties.has('displayPopover')) {
-            if (this.displayPopover) {
-                this.openPopover();
-            }
-            else {
+        if (changedProperties.has('disabled') ||
+            changedProperties.has('softDisabled') ||
+            changedProperties.has('readonly')) {
+            if (this.disabled || this.softDisabled || this.readonly) {
                 this.closePopover();
             }
         }
+        if (changedProperties.has('dataAriaLabel')) {
+            this.modifyListBoxWrapper();
+        }
+    }
+    handleOnChange() {
+        this.selectedValue = this.inputElement.value;
+        this.internals.setFormValue(this.selectedValue);
     }
     render() {
         var _a, _b;
         return html `
       ${this.renderLabel()}
       <div part="container">
+        <select
+          part="native-select"
+          id="${this.id}"
+          tabindex="-1"
+          aria-hidden="true"
+          name="${this.name}"
+          size="1"
+          .value="${live(this.selectedValue)}"
+          ?autofocus="${this.autofocus}"
+          ?disabled="${this.disabled}"
+          ?required="${this.required}"
+          aria-disabled="${ifDefined(this.disabled || this.softDisabled)}"
+          @change="${this.handleOnChange}"
+          @mousedown="${(event) => event.preventDefault()}"
+        >
+          ${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>
+            `;
+        })}
+        </select>
         <div
           id="${TRIGGER_ID}"
           part="base-container"
-          @keydown="${this.handlePopoverOnClose}"
+          @click="${this.handleClickCombobox}"
+          @keydown="${this.handleKeydownCombobox}"
           tabindex="${this.disabled ? '-1' : '0'}"
           class="${this.disabled ? '' : 'mdc-focus-ring'}"
           role="${ROLE.COMBOBOX}"
-          aria-activedescendant="${ifDefined(this.activeDescendant || undefined)}"
-          aria-controls="${ifDefined(this.displayPopover ? 'options-popover' : undefined)}"
+          aria-controls="${LISTBOX_ID}"
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           aria-labelledby="${this.label ? FORMFIELD_DEFAULTS.HEADING_ID : ''}"
           aria-expanded="${this.displayPopover ? 'true' : 'false'}"
+          aria-haspopup="${ROLE.LISTBOX}"
           aria-required="${this.required ? 'true' : 'false'}"
           aria-invalid="${this.helpTextType === VALIDATION.ERROR ? 'true' : 'false'}"
+          aria-disabled="${ifDefined(this.disabled || this.softDisabled)}"
+          aria-readonly="${ifDefined(this.readonly)}"
         >
           ${this.selectedIcon
             ? html `<mdc-icon length-unit="rem" size="1" name="${this.selectedIcon}" part="selected-icon"></mdc-icon>`
@@ -530,7 +492,25 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             <mdc-icon size="1" length-unit="rem" name="${this.baseIconName}"></mdc-icon>
           </div>
         </div>
-        ${this.getNativeSelect()} ${this.getPopoverContent()}
+        <mdc-popover
+          trigger="manual"
+          triggerid="${TRIGGER_ID}"
+          @keydown="${this.handlePopoverOnOpen}"
+          interactive
+          ?visible="${this.displayPopover}"
+          role=""
+          hide-on-outside-click
+          hide-on-escape
+          focus-back-to-trigger
+          focus-trap
+          size
+          placement="${this.placement}"
+          @closebyescape="${this.closePopover}"
+          @closebyoutsideclick="${this.closePopover}"
+          style="--mdc-popover-max-width: 100%; --mdc-popover-max-height: ${this.height};"
+        >
+          <slot @click="${this.handleOptionsClick}"></slot>
+        </mdc-popover>
       </div>
       ${this.renderHelperText()}
     `;
@@ -550,9 +530,17 @@ __decorate([
     __metadata("design:type", Object)
 ], Select.prototype, "height", void 0);
 __decorate([
-    queryAssignedElements(),
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Select.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'soft-disabled' }),
+    __metadata("design:type", Boolean)
+], Select.prototype, "softDisabled", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'mdc-selectlistbox' }),
     __metadata("design:type", Array)
-], Select.prototype, "optionsList", void 0);
+], Select.prototype, "slottedListboxes", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)
@@ -573,10 +561,6 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], Select.prototype, "displayPopover", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Select.prototype, "activeDescendant", void 0);
 __decorate([
     query('select'),
     __metadata("design:type", HTMLInputElement)

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

@@ -4,4 +4,5 @@ declare const ARROW_ICON: {
     readonly ARROW_DOWN: "arrow-down-bold";
 };
 declare const TRIGGER_ID = "select-base-triggerid";
-export { ARROW_ICON, TAG_NAME, TRIGGER_ID };
+declare const LISTBOX_ID = "select-listbox";
+export { ARROW_ICON, TAG_NAME, TRIGGER_ID, LISTBOX_ID };

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

@@ -5,4 +5,5 @@ const ARROW_ICON = {
     ARROW_DOWN: 'arrow-down-bold',
 };
 const TRIGGER_ID = 'select-base-triggerid';
-export { ARROW_ICON, TAG_NAME, TRIGGER_ID };
+const LISTBOX_ID = 'select-listbox';
+export { ARROW_ICON, TAG_NAME, TRIGGER_ID, LISTBOX_ID };

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

@@ -70,14 +70,25 @@ const styles = css `
     display: flex;
     padding: 2px;
   }
-  :host([readonly])::part(icon-container) {
-    color: var(--mdc-select-disabled-text-color);
-  }
   :host::part(popover-content) {
     min-width: auto;
-    overflow: scroll;
+    overflow-y: auto;
+  }
+
+  /* Help text border colors */
+  :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);
   }
+
+  /* Disabled, readonly, soft-disabled */
   :host([disabled])::part(base-container),
+  :host([soft-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),
@@ -88,24 +99,16 @@ const styles = css `
     border-color: var(--mdc-select-disabled-border-color);
     background: var(--mdc-select-disabled-background-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) {
+  :host([disabled])::part(base-text),
+  :host([soft-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);
+  :host([soft-disabled])::part(icon-container),
+  :host([readonly])::part(icon-container) {
+    color: var(--mdc-select-disabled-text-color);
   }
 `;
 export default [styles, ...hostFocusRingStyles(true)];

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

@@ -1,4 +1,5 @@
 import type { ValueOf } from '../../utils/types';
+import type { PopoverPlacement } from '../popover/popover.types';
 import { ARROW_ICON } from './select.constants';
 interface Events {
     onClickEvent: MouseEvent;
@@ -7,5 +8,6 @@ interface Events {
     onKeyDownEvent: KeyboardEvent;
     onFocusEvent: FocusEvent;
 }
+type Placement = Extract<PopoverPlacement, 'bottom-start' | 'top-start'>;
 type ArrowIcon = ValueOf<typeof ARROW_ICON>;
-export type { Events, ArrowIcon };
+export type { Events, ArrowIcon, Placement };

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

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

package/dist/components/selectlistbox/index.js

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-selectlistbox";
+export { TAG_NAME };

package/dist/components/selectlistbox/selectlistbox.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('selectlistbox');
+export { TAG_NAME };

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

@@ -0,0 +1,3 @@
+interface Events {
+}
+export type { Events };

package/dist/components/selectlistbox/selectlistbox.types.js

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