@momentum-design/components 0.81.3 → 0.81.4

package/dist/components/avatarbutton/avatarbutton.component.js

@@ -12,6 +12,7 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { AvatarComponentMixin } from '../../utils/mixins/AvatarComponentMixin';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
+import { ROLE } from '../../utils/roles';
 import { AVATAR_SIZE, DEFAULTS } from '../avatar/avatar.constants';
 import { DEFAULTS as BUTTON_DEFAULTS } from '../button/button.constants';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
@@ -48,7 +49,7 @@ class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
         this.active = undefined;
         this.disabled = undefined;
         this.softDisabled = undefined;
-        this.role = 'button';
+        this.role = ROLE.BUTTON;
         this.type = BUTTON_DEFAULTS.TYPE;
     }
     update(changedProperties) {

package/dist/components/badge/badge.component.js

@@ -13,6 +13,7 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
+import { ROLE } from '../../utils/roles';
 import { TYPE as FONT_TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { DEFAULTS, ICON_NAMES_LIST, ICON_STATE, ICON_VARIANT, TYPE as BADGE_TYPE } from './badge.constants';
 import styles from './badge.styles';
@@ -147,7 +148,7 @@ class Badge extends IconNameMixin(Component) {
      */
     setRoleByAriaLabel() {
         if (this.ariaLabel) {
-            this.role = 'img';
+            this.role = ROLE.IMG;
         }
         else {
             this.role = null;

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

@@ -12,6 +12,7 @@ import { property, queryAssignedElements } from 'lit/decorators.js';
 import { Component } from '../../models';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { ROLE } from '../../utils/roles';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { HEADER_ID } from './optgroup.constants';
 import styles from './optgroup.styles';
@@ -55,12 +56,12 @@ class OptGroup extends DataAriaLabelMixin(DisabledMixin(Component)) {
     ` : nothing;
         return html `
       <div
-        role="group"
+        role="${ROLE.GROUP}"
         aria-labelledby="${this.label ? HEADER_ID : ''}"
         aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
       >
         ${headerText}
-        <slot role="presentation"></slot>
+        <slot role="${ROLE.PRESENTATION}"></slot>
       </div>
     `;
     }

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

@@ -41,10 +41,6 @@ declare class Option extends Option_base {
      * It is called internally when the slot is changed.
      */
     private handleDefaultSlotChange;
-    /**
-     * Updates the attribute of the option to reflect the current state.
-     */
-    private updateAttribute;
     update(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/option/option.component.js

@@ -51,8 +51,8 @@ class Option extends FormInternalsMixin(ListItem) {
         super.connectedCallback();
         this.role = 'option';
         this.variant = LISTITEM_VARIANTS.INSET_RECTANGLE;
-        this.updateAttribute('aria-selected', `${this.selected}`);
-        this.updateAttribute('aria-disabled', `${!!this.disabled}`);
+        this.setAttribute('aria-selected', `${this.selected}`);
+        this.setAttribute('aria-disabled', `${!!this.disabled}`);
         // Option will not contain below fields
         this.name = undefined;
         this.secondaryLabel = undefined;
@@ -71,16 +71,10 @@ class Option extends FormInternalsMixin(ListItem) {
             this.label = (_c = (_b = slot.assignedNodes()[0]) === null || _b === void 0 ? void 0 : _b.textContent) === null || _c === void 0 ? void 0 : _c.trim();
         }
     }
-    /**
-     * Updates the attribute of the option to reflect the current state.
-     */
-    updateAttribute(attributeName, value) {
-        this.setAttribute(attributeName, value);
-    }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('selected')) {
-            this.updateAttribute('aria-selected', `${this.selected}`);
+            this.setAttribute('aria-selected', `${this.selected}`);
         }
     }
     render() {

package/dist/components/popover/popover.component.js

@@ -370,7 +370,7 @@ class Popover extends FocusTrapMixin(Component) {
             this.triggerElement.addEventListener('mouseleave', this.startCloseDelay);
             this.addEventListener('mouseenter', this.cancelCloseDelay);
             this.addEventListener('mouseleave', this.startCloseDelay);
-            hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.addEventListener('mouseenter', this.cancelCloseDelay);
+            hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.addEventListener('mouseenter', this.showPopover);
         }
         if (this.trigger.includes('focusin')) {
             this.triggerElement.addEventListener('focusin', this.showPopover);
@@ -394,7 +394,7 @@ class Popover extends FocusTrapMixin(Component) {
         this.removeEventListener('mouseleave', this.startCloseDelay);
         this.triggerElement.removeEventListener('focusin', this.showPopover);
         this.triggerElement.removeEventListener('focusout', this.hidePopover);
-        hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.removeEventListener('mouseenter', this.cancelCloseDelay);
+        hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.removeEventListener('mouseenter', this.showPopover);
         this.removeEventListener('focus-trap-exit', this.hidePopover);
     }
     async updated(changedProperties) {
@@ -553,7 +553,7 @@ class Popover extends FocusTrapMixin(Component) {
             if (this.arrowElement) {
                 const arrowLen = this.arrowElement.offsetHeight;
                 const arrowOffset = Math.sqrt(2 * arrowLen ** 2) / 2;
-                popoverOffset = arrowOffset + this.offset;
+                popoverOffset += arrowOffset;
                 middleware.push(arrow({ element: this.arrowElement, padding: 12 }));
             }
         }
@@ -569,7 +569,7 @@ class Popover extends FocusTrapMixin(Component) {
             if (middlewareData.arrow && this.arrowElement) {
                 this.utils.updateArrowStyle(middlewareData.arrow, placement);
             }
-            if (this.trigger.includes('mouseenter')) {
+            if (this.trigger.includes('mouseenter') && this.interactive) {
                 this.utils.setupHoverBridge(placement);
             }
         });

package/dist/components/popover/popover.utils.js

@@ -1,3 +1,4 @@
+import { ROLE } from '../../utils/roles';
 export class PopoverUtils {
     constructor(popover) {
         /** @internal */
@@ -89,11 +90,13 @@ export class PopoverUtils {
      */
     setupAccessibility() {
         var _a, _b, _c;
-        if (this.popover.role === 'dialog' || this.popover.role === 'alertdialog') {
-            this.popover.toggleAttribute('aria-modal', this.popover.interactive);
+        if (this.popover.role === ROLE.DIALOG || this.popover.role === ROLE.ALERTDIALOG) {
+            this.popover.setAttribute('aria-modal', 'true');
+        }
+        else {
+            this.popover.removeAttribute('aria-modal');
         }
         if (this.popover.interactive) {
-            this.popover.setAttribute('aria-modal', 'true');
             if (!this.popover.ariaLabel) {
                 this.popover.ariaLabel = ((_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.ariaLabel)
                     || ((_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.textContent)
@@ -103,9 +106,6 @@ export class PopoverUtils {
                 this.popover.ariaLabelledby = ((_c = this.popover.triggerElement) === null || _c === void 0 ? void 0 : _c.id) || '';
             }
         }
-        else {
-            this.popover.removeAttribute('aria-modal');
-        }
     }
     /**
      * Updates the aria-haspopup attribute on the trigger element.
@@ -185,7 +185,6 @@ export class PopoverUtils {
         if (!this.popover.backdropElement) {
             const backdrop = document.createElement('div');
             backdrop.classList.add('popover-backdrop');
-            (_a = this.popover.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(backdrop);
             const styleElement = document.createElement('style');
             styleElement.textContent = `
         .popover-backdrop {
@@ -199,6 +198,7 @@ export class PopoverUtils {
         }
       `;
             backdrop.appendChild(styleElement);
+            (_a = this.popover.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(backdrop);
             this.popover.backdropElement = backdrop;
         }
     }

package/dist/components/progressbar/progressbar.component.js

@@ -15,6 +15,7 @@ import FormfieldWrapper from '../formfieldwrapper';
 import { DEFAULTS, VARIANT } from './progressbar.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
+import { ROLE } from '../../utils/roles';
 /**
  * mdc-progressbar component visually represents a progress indicator, typically used to show
  * the completion state of an ongoing process (e.g., loading, file upload, etc.).
@@ -79,7 +80,7 @@ class Progressbar extends DataAriaLabelMixin(FormfieldWrapper) {
             return html `
       <div
         part="progress-container ${isGap ? 'gap' : ''}"
-        role="progressbar"
+        role="${ROLE.PROGRESSBAR}"
         aria-valuenow="${this.clampedValue}"
         aria-valuemin="0"
         aria-valuemax="100"

package/dist/components/progressspinner/progressspinner.component.js

@@ -4,6 +4,7 @@ import { Component } from '../../models';
 import Progressbar from '../progressbar/progressbar.component';
 import { DEFAULTS, ICON_NAME } from './progressspinner.constants';
 import { getProgressArc, getProgressOffset, getRemainingArc, getRemainingOffset } from './progressspiner.utils';
+import { ROLE } from '../../utils/roles';
 /**
  * `mdc-progressspinner` is a customizable, circular progress indicator component.
  * It visually represents the current completion state of a process, such as loading,
@@ -51,7 +52,7 @@ class Progressspinner extends Progressbar {
         return html `
       <div
         part="spinner-container ${this.variant}"
-        role="progressbar"
+        role="${ROLE.PROGRESSBAR}"
         aria-valuenow="${this.clampedValue}"
         aria-valuemin="0"
         aria-valuemax="100"

package/dist/components/radio/radio.component.js

@@ -16,6 +16,7 @@ import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
+import { ROLE } from '../../utils/roles';
 /**
  * Radio allow users to select single options from a list or turn an item/feature on or off.
  * These are often used in forms, settings, and selection in lists.
@@ -285,7 +286,7 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           <input
             id="${this.id}"
             type="radio"
-            role="radio"
+            role="${ROLE.RADIO}"
             ?autofocus="${this.autofocus}"
             name="${ifDefined(this.name)}"
             value="${ifDefined(this.value)}"

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

@@ -55,8 +55,6 @@ declare class Select extends Select_base implements AssociatedFormControl {
     displayPopover: boolean;
     /** @internal */
     activeDescendant: string;
-    /** @internal */
-    popoverWidth: string;
     /**
      * @internal
      * The native select element
@@ -108,18 +106,10 @@ declare class Select extends Select_base implements AssociatedFormControl {
     /** @internal */
     formStateRestoreCallback(state: string): void;
     private dispatchChange;
-    /**
-     * 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.
-     */
-    private handleKeydown;
     /**
      * 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.

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

@@ -9,16 +9,18 @@ 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 { KEYS } from '../../utils/keys';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
+import { ROLE } from '../../utils/roles';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
-import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
+import { DEFAULTS as FORMFIELD_DEFAULTS, VALIDATION } 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 { ARROW_ICON, 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.
@@ -63,8 +65,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.displayPopover = false;
         /** @internal */
         this.activeDescendant = '';
-        /** @internal */
-        this.popoverWidth = '100%';
     }
     connectedCallback() {
         super.connectedCallback();
@@ -118,11 +118,10 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
                 option === null || option === void 0 ? void 0 : option.removeAttribute('selected');
             }
         });
-        if (isTabIndexSet) {
-            return;
+        if (!isTabIndexSet) {
+            // 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');
         }
-        // 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.
@@ -197,25 +196,10 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             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.displayPopover) {
-            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.
@@ -224,6 +208,12 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     handlePopoverOnOpen(event) {
         var _a;
         switch (event.key) {
+            case KEYS.TAB: {
+                const focusedOptionIndex = this.getAllValidOptions().findIndex((option) => option === event.target);
+                this.setFocusAndTabIndex(focusedOptionIndex);
+                event.preventDefault();
+                break;
+            }
             case KEYS.SPACE:
                 this.updateTabIndexForAllOptions(event.target);
                 this.closePopover();
@@ -236,10 +226,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
                 // 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();
-                event.stopPropagation();
-                break;
             case KEYS.HOME:
                 this.setFocusAndTabIndex(0);
                 event.preventDefault();
@@ -253,7 +239,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             case KEYS.PAGE_DOWN:
             case KEYS.PAGE_UP:
                 this.handleOptionsNavigation(event);
-                this.updateActivedescendant(event.target);
+                event.preventDefault();
                 break;
             default:
                 break;
@@ -339,24 +325,44 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         return -1;
     }
     updateActivedescendant(target) {
-        var _a, _b;
-        const currentIndex = this.getAllValidOptions().findIndex((option) => option === target);
-        this.activeDescendant = ((_a = this.getAllValidOptions()[currentIndex]) === null || _a === void 0 ? void 0 : _a.id) || ((_b = this.getAllValidOptions()[0]) === null || _b === void 0 ? void 0 : _b.id);
+        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;
-        (_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);
-        });
+        const options = this.getAllValidOptions();
+        const targetOption = options[newIndex];
+        if (targetOption) {
+            targetOption.focus();
+            options.forEach((node, index) => {
+                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;
-        this.resetActivedescendant();
+        // 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 : '';
     }
     closePopover() {
         this.displayPopover = false;
@@ -398,6 +404,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         part="native-select"
         id="${this.id}"
         tabindex="-1"
+        aria-hidden="true"
         name="${this.name}"
         size="1"
         .value="${this.selectedValue}"
@@ -449,21 +456,23 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         return html `
       <mdc-popover
         id="options-popover"
-        triggerid="select-base-triggerid"
-        @keydown="${this.handleKeydown}"
+        triggerid="${TRIGGER_ID}"
+        @keydown="${this.handlePopoverOnOpen}"
         interactive
         ?visible="${this.displayPopover}"
         hide-on-outside-click
+        hide-on-escape
         focus-back-to-trigger
         focus-trap
-        role="listbox"
+        role="${ROLE.LISTBOX}"
         placement="${POPOVER_PLACEMENT.BOTTOM_START}"
         @shown="${this.handlePopoverOpen}"
         @hidden="${this.handlePopoverClose}"
-        style="--mdc-popover-max-width: ${this.popoverWidth}; --mdc-popover-max-height: ${this.height};"
+        style="--mdc-popover-max-width: 100%; --mdc-popover-max-height: ${this.height};"
       >
-        <slot @click="${this.handleOptionsClick}"></slot>
-      </mdc-popover>
+           <slot 
+           @click="${this.handleOptionsClick}"></slot>
+          </mdc-popover>
     `;
     }
     updated(changedProperties) {
@@ -472,6 +481,14 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             this.closePopover();
             this.handlePopoverClose();
         }
+        if (changedProperties.has('displayPopover')) {
+            if (this.displayPopover) {
+                this.openPopover();
+            }
+            else {
+                this.closePopover();
+            }
+        }
     }
     render() {
         var _a, _b;
@@ -479,18 +496,19 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
       ${this.renderLabel()}
       <div part="container">
         <div
-          id="select-base-triggerid"
+          id="${TRIGGER_ID}"
           part="base-container"
-          @keydown="${this.handleKeydown}"
+          @keydown="${this.handlePopoverOnClose}"
           tabindex="${this.disabled ? '-1' : '0'}"
           class="${this.disabled ? '' : 'mdc-focus-ring'}"
-          role="combobox"
-          aria-activedescendant="${this.activeDescendant}"
-          aria-haspopup="listbox"
+          role="${ROLE.COMBOBOX}"
+          aria-activedescendant="${ifDefined(this.activeDescendant || undefined)}"
+          aria-controls="${(ifDefined(this.displayPopover ? 'options-popover' : undefined))}"
           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-controls="options-popover"
+          aria-required="${this.required ? 'true' : 'false'}"
+          aria-invalid="${this.helpTextType === VALIDATION.ERROR ? 'true' : 'false'}"
         >
       ${this.selectedIcon
             ? html `<mdc-icon length-unit="rem" size="1" name="${this.selectedIcon}" part="selected-icon"></mdc-icon>`
@@ -554,10 +572,6 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], Select.prototype, "activeDescendant", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Select.prototype, "popoverWidth", void 0);
 __decorate([
     query('select'),
     __metadata("design:type", HTMLInputElement)

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

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

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

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

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

@@ -28,7 +28,7 @@ const styles = css `
     padding: 0;
     position: absolute;
     width: 100%;
-    height: 1px;
+    height: 0;
     z-index: -1;
   }
   :host::part(container) {
@@ -75,6 +75,7 @@ const styles = css `
   }
   :host::part(popover-content) {
     min-width: auto;
+    overflow: scroll;
   }
   :host([disabled])::part(base-container),
   :host([readonly])::part(base-container),

package/dist/components/spinner/spinner.component.js

@@ -12,6 +12,7 @@ import { property } from 'lit/decorators.js';
 import styles from './spinner.styles';
 import { Component } from '../../models';
 import { DEFAULTS } from './spinner.constants';
+import { ROLE } from '../../utils/roles';
 /**
  * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning
  * it's best for cases where the  progress or duration of a process is variable or unknown.
@@ -85,7 +86,7 @@ class Spinner extends Component {
     updated(changedProperties) {
         super.updated(changedProperties);
         if (changedProperties.has('ariaLabel')) {
-            this.role = this.ariaLabel ? 'img' : null;
+            this.role = this.ariaLabel ? ROLE.IMG : null;
             this.ariaHidden = this.ariaLabel ? 'false' : 'true';
         }
     }

package/dist/components/tab/tab.component.js

@@ -15,6 +15,7 @@ import { getIconNameWithoutStyle } from '../button/button.utils';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
+import { ROLE } from '../../utils/roles';
 /**
  * `mdc-tab` is Tab component to be used within the Tabgroup.
  *
@@ -152,7 +153,7 @@ class Tab extends IconNameMixin(Buttonsimple) {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.role = 'tab';
+        this.role = ROLE.TAB;
         this.softDisabled = undefined;
         this.size = undefined;
         this.type = undefined;

package/dist/components/tablist/tablist.component.js

@@ -16,6 +16,7 @@ import { ARROW_BUTTON_DIRECTION, KEYCODES } from './tablist.constants';
 import Tab from '../tab/tab.component';
 import Button from '../button/button.component';
 import { getFirstTab, getLastTab, getNextTab, getPreviousTab, findTab, getActiveTab } from './tablist.utils';
+import { ROLE } from '../../utils/roles';
 /**
  * Tab list organizes tabs into a container.
  *
@@ -443,7 +444,7 @@ class TabList extends Component {
         return html ` ${arrowButton('backward')}
       <div 
       class="container" 
-      role="tablist" 
+      role="${ROLE.TABLIST}" 
       tabindex="-1" 
       aria-label="${ifDefined(this.dataAriaLabel)}">
         <slot></slot>

package/dist/components/toggle/toggle.component.js

@@ -12,6 +12,7 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
+import { ROLE } from '../../utils/roles';
 import FormfieldWrapper from '../formfieldwrapper';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { DEFAULTS, TOGGLE_SIZE } from './toggle.constants';
@@ -189,7 +190,7 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             id="${this.id}"
             type="checkbox"
             part="toggle-input"
-            role="switch"
+            role="${ROLE.CHECKBOX}"
             ?autofocus="${this.autofocus}"
             ?required="${this.required}"
             name="${ifDefined(this.name)}"