@momentum-design/components 0.103.0 → 0.103.2

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

@@ -35,6 +35,8 @@ declare const Button_base: import("../../utils/mixins/index.types").Constructor<
  * @tagname mdc-button
  *
  * @slot - Text label of the button.
+ *
+ * @csspart button-text - Text label of the button, passed in default slot
  */
 declare class Button extends Button_base {
     /**

package/dist/components/button/button.component.js

@@ -46,6 +46,8 @@ import { getIconNameWithoutStyle } from './button.utils';
  * @tagname mdc-button
  *
  * @slot - Text label of the button.
+ *
+ * @csspart button-text - Text label of the button, passed in default slot
  */
 class Button extends ButtonComponentMixin(Buttonsimple) {
     constructor() {
@@ -129,7 +131,7 @@ class Button extends ButtonComponentMixin(Buttonsimple) {
             length-unit="rem"
           ></mdc-icon>`
             : ''}
-      <slot @slotchange=${this.inferButtonType}></slot>
+      <slot @slotchange=${this.inferButtonType} part="button-text"></slot>
       ${this.postfixFilledIconName
             ? html ` <mdc-icon
             name="${this.postfixFilledIconName}"

package/dist/components/button/button.styles.js

@@ -236,8 +236,9 @@ const styles = css `
     --mdc-button-primary-disabled-color: var(--mds-color-theme-inverted-text-primary-disabled);
   }
 
-  :host([data-btn-type='pill']) ::slotted(mdc-text),
-  :host([data-btn-type='pill-with-icon']) ::slotted(mdc-text) {
+  :host([data-btn-type='pill'])::part(button-text),
+  :host([data-btn-type='pill-with-icon'])::part(button-text) {
+    display: block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

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

@@ -133,7 +133,14 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
      * Handles the click event on the list item.
      * If the tooltip is open, it has to be closed first.
      */
-    handleClick() {
+    handleClick(event) {
+        if (this.disabled) {
+            // when disabled, prevent the click event from propagating
+            // and from firing on the host (immediate)
+            event.stopImmediatePropagation();
+            event.preventDefault();
+            return;
+        }
         // If the tooltip is open, it has to be closed first.
         this.hideTooltipOnLeave();
     }

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

@@ -45,10 +45,6 @@ const styles = css `
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  
-  :host([disabled]) {
-    pointer-events: none;
-  }
 
   :host([disabled]),
   :host([disabled]:hover),

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

@@ -123,7 +123,7 @@ declare class Popover extends Popover_base {
      *
      * @see [Floating UI - padding](https://floating-ui.com/docs/detectOverflow#padding)
      */
-    boundaryPadding: undefined | number;
+    boundaryPadding?: number;
     /**
      * Determines whether the focus trap is enabled.
      * If true, focus will be restricted to the content within this component.
@@ -220,6 +220,20 @@ declare class Popover extends Popover_base {
      * @default null
      */
     closeButtonAriaLabel: string | null;
+    /**
+     * The strategy of the popover.
+     * This determines how the popover is positioned in the DOM.
+     * - **absolute**: The popover is positioned absolutely relative to the nearest positioned ancestor.
+     * - **fixed**: The popover is positioned fixed relative to the viewport.
+     *
+     * Default as `absolute` is recommended for most cases.
+     * In cases where the popover gets clipped by a scrollable container,
+     * you can set this to `fixed` to avoid clipping.
+     *
+     * @default absolute
+     * @see [Floating UI - strategy](https://floating-ui.com/docs/computePosition#strategy)
+     */
+    strategy: 'absolute' | 'fixed';
     /**
      * Role of the popover
      * @default dialog

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

@@ -224,6 +224,20 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          * @default null
          */
         this.closeButtonAriaLabel = null;
+        /**
+         * The strategy of the popover.
+         * This determines how the popover is positioned in the DOM.
+         * - **absolute**: The popover is positioned absolutely relative to the nearest positioned ancestor.
+         * - **fixed**: The popover is positioned fixed relative to the viewport.
+         *
+         * Default as `absolute` is recommended for most cases.
+         * In cases where the popover gets clipped by a scrollable container,
+         * you can set this to `fixed` to avoid clipping.
+         *
+         * @default absolute
+         * @see [Floating UI - strategy](https://floating-ui.com/docs/computePosition#strategy)
+         */
+        this.strategy = DEFAULTS.STRATEGY;
         /**
          * Role of the popover
          * @default dialog
@@ -525,18 +539,23 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         this.positionPopover = () => {
             if (!this.triggerElement)
                 return;
+            const boundary = !this.boundary || this.boundary === 'clippingAncestors'
+                ? 'clippingAncestors'
+                : Array.from(document.querySelectorAll(this.boundary));
+            const rootBoundary = this.boundaryRoot;
             const middleware = [
                 shift({
-                    boundary: !this.boundary || this.boundary === 'clippingAncestors'
-                        ? 'clippingAncestors'
-                        : Array.from(document.querySelectorAll(this.boundary)),
-                    rootBoundary: this.boundaryRoot,
+                    boundary,
+                    rootBoundary,
                     padding: this.boundaryPadding,
                 }),
             ];
             let popoverOffset = this.offset;
             if (this.flip) {
-                middleware.push(flip());
+                middleware.push(flip({
+                    boundary,
+                    rootBoundary,
+                }));
             }
             if (this.size) {
                 // expose a CSS variable for the available height
@@ -546,6 +565,8 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
                 };
                 const popoverContent = this.renderRoot.querySelector('[part="popover-content"]');
                 middleware.push(size({
+                    boundary,
+                    rootBoundary,
                     apply({ availableHeight }) {
                         if (!popoverContent)
                             return;
@@ -574,6 +595,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
                 const { x, y, middlewareData, placement } = await computePosition(this.triggerElement, this, {
                     placement: this.placement,
                     middleware,
+                    strategy: this.strategy,
                 });
                 this.utils.updatePopoverStyle(x, y);
                 if (middlewareData.arrow && this.arrowElement) {
@@ -855,7 +877,7 @@ __decorate([
 ], Popover.prototype, "boundaryRoot", void 0);
 __decorate([
     property({ type: Number, reflect: true, attribute: 'boundary-padding' }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Number)
 ], Popover.prototype, "boundaryPadding", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'focus-trap' }),
@@ -925,6 +947,10 @@ __decorate([
     property({ type: String, attribute: 'close-button-aria-label', reflect: true }),
     __metadata("design:type", Object)
 ], Popover.prototype, "closeButtonAriaLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'strategy' }),
+    __metadata("design:type", String)
+], Popover.prototype, "strategy", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", Object)

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

@@ -51,5 +51,6 @@ declare const DEFAULTS: {
     readonly DISABLE_ARIA_HAS_POPUP: false;
     readonly PROPAGATE_EVENT_ON_ESCAPE: false;
     readonly KEEP_CONNECTED_TOOLTIP_CLOSED: true;
+    readonly STRATEGY: "absolute";
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

package/dist/components/popover/popover.constants.js

@@ -52,5 +52,6 @@ const DEFAULTS = {
     DISABLE_ARIA_HAS_POPUP: false,
     PROPAGATE_EVENT_ON_ESCAPE: false,
     KEEP_CONNECTED_TOOLTIP_CLOSED: true,
+    STRATEGY: 'absolute',
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

package/dist/components/popover/popover.styles.js

@@ -26,6 +26,14 @@ const styles = css `
     width: var(--mdc-popover-max-width);
   }
 
+  :host([strategy='absolute']) {
+    position: absolute;
+  }
+
+  :host([strategy='fixed']) {
+    position: fixed;
+  }
+
   :host([visible]) {
     display: block;
   }
@@ -47,6 +55,7 @@ const styles = css `
 
   :host::part(popover-content) {
     position: relative;
+    cursor: default;
     padding: 0.75rem;
     min-width: max-content;
     z-index: 9998;

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

@@ -193,6 +193,7 @@ export class PopoverUtils {
             styleElement.textContent = `
         .popover-backdrop {
           position: fixed;
+          cursor: default;
           top: 0;
           left: 0;
           width: 100%;

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

@@ -32,6 +32,20 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  * @event input - (React: onInput) 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.
+ *
+ * @cssproperty --mdc-select-background-color - The background color of the combobox of select.
+ * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.
+ * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.
+ * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.
+ * @cssproperty --mdc-select-text-color - The text color of the select.
+ * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.
+ * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.
+ * @cssproperty --mdc-select-border-color - The border color of the select.
+ * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.
+ * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.
+ * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.
+ * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.
+ * @cssproperty --mdc-select-width - The width of the select.
  */
 declare class Select extends Select_base implements AssociatedFormControl {
     /**
@@ -61,6 +75,32 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @default undefined
      */
     softDisabled?: boolean;
+    /**
+     * This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.
+     * The default is 'clippingAncestors', which are the overflow ancestors which will cause the
+     * element to be clipped.
+     *
+     * Possible values:
+     *  - 'clippingAncestors'
+     *  - any css selector
+     *
+     * @default 'clippingAncestors'
+     *
+     * @see [Floating UI - boundary](https://floating-ui.com/docs/detectOverflow#boundary)
+     */
+    boundary: 'clippingAncestors' | string;
+    /**
+     * The strategy of the popover within Select.
+     * This determines how the popover is positioned in the DOM.
+     *
+     * In case `boundary` is set to something other than 'clippingAncestors',
+     * it might be necessary to set the `strategy` to 'fixed' to ensure that the popover
+     * is not getting clipped by scrollable containers enclosing the select.
+     *
+     * @default absolute
+     * @see [Floating UI - strategy](https://floating-ui.com/docs/computePosition#strategy)
+     */
+    strategy: 'absolute' | 'fixed';
     /** @internal */
     slottedListboxes: Array<HTMLElement>;
     /** @internal */

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

@@ -17,7 +17,7 @@ import { ROLE } from '../../utils/roles';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DEFAULTS as FORMFIELD_DEFAULTS, VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
 import { TAG_NAME as OPTION_TAG_NAME } from '../option/option.constants';
-import { POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { POPOVER_PLACEMENT, DEFAULTS as POPOVER_DEFAULTS } from '../popover/popover.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { ARROW_ICON, LISTBOX_ID, TRIGGER_ID } from './select.constants';
 import styles from './select.styles';
@@ -48,6 +48,20 @@ import styles from './select.styles';
  * @event input - (React: onInput) 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.
+ *
+ * @cssproperty --mdc-select-background-color - The background color of the combobox of select.
+ * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.
+ * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.
+ * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.
+ * @cssproperty --mdc-select-text-color - The text color of the select.
+ * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.
+ * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.
+ * @cssproperty --mdc-select-border-color - The border color of the select.
+ * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.
+ * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.
+ * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.
+ * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.
+ * @cssproperty --mdc-select-width - The width of the select.
  */
 class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
@@ -67,6 +81,32 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
          * The placeholder text which will be shown on the text if provided.
          */
         this.placement = POPOVER_PLACEMENT.BOTTOM_START;
+        /**
+         * This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.
+         * The default is 'clippingAncestors', which are the overflow ancestors which will cause the
+         * element to be clipped.
+         *
+         * Possible values:
+         *  - 'clippingAncestors'
+         *  - any css selector
+         *
+         * @default 'clippingAncestors'
+         *
+         * @see [Floating UI - boundary](https://floating-ui.com/docs/detectOverflow#boundary)
+         */
+        this.boundary = POPOVER_DEFAULTS.BOUNDARY;
+        /**
+         * The strategy of the popover within Select.
+         * This determines how the popover is positioned in the DOM.
+         *
+         * In case `boundary` is set to something other than 'clippingAncestors',
+         * it might be necessary to set the `strategy` to 'fixed' to ensure that the popover
+         * is not getting clipped by scrollable containers enclosing the select.
+         *
+         * @default absolute
+         * @see [Floating UI - strategy](https://floating-ui.com/docs/computePosition#strategy)
+         */
+        this.strategy = POPOVER_DEFAULTS.STRATEGY;
         /** @internal */
         this.displayPopover = false;
         /** @internal */
@@ -74,11 +114,11 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     }
     getAllValidOptions() {
         var _a;
-        return Array.from(((_a = this.slottedListboxes[0]) === null || _a === void 0 ? void 0 : _a.querySelectorAll(OPTION_TAG_NAME)) || []);
+        return Array.from(((_a = this.slottedListboxes[0]) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`${OPTION_TAG_NAME}:not([disabled])`)) || []);
     }
     getFirstValidOption() {
         var _a;
-        return (_a = this.slottedListboxes[0]) === null || _a === void 0 ? void 0 : _a.querySelector(OPTION_TAG_NAME);
+        return (_a = this.slottedListboxes[0]) === null || _a === void 0 ? void 0 : _a.querySelector(`${OPTION_TAG_NAME}:not([disabled])`);
     }
     getLastValidOption() {
         const options = this.getAllValidOptions();
@@ -86,7 +126,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     }
     getFirstSelectedOption() {
         var _a;
-        return (_a = this.slottedListboxes[0]) === null || _a === void 0 ? void 0 : _a.querySelector(`${OPTION_TAG_NAME}[selected]`);
+        return (_a = this.slottedListboxes[0]) === null || _a === void 0 ? void 0 : _a.querySelector(`${OPTION_TAG_NAME}[selected]:not([disabled])`);
     }
     /**
      * Handles the first updated lifecycle event.
@@ -155,9 +195,15 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      * @param event - The event which triggered this function.
      */
     handleOptionsClick(event) {
-        this.setSelectedOption(event.target);
-        this.displayPopover = false;
-        this.fireEvents();
+        const option = event.target;
+        if (option &&
+            option.tagName === OPTION_TAG_NAME.toUpperCase() &&
+            !option.hasAttribute('disabled') &&
+            !option.hasAttribute('soft-disabled')) {
+            this.setSelectedOption(option);
+            this.displayPopover = false;
+            this.fireEvents();
+        }
     }
     /**
      * Sets the selected option in the component state and updates the input element's value.
@@ -508,6 +554,8 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           focus-back-to-trigger
           focus-trap
           size
+          boundary="${ifDefined(this.boundary)}"
+          strategy="${ifDefined(this.strategy)}"
           placement="${this.placement}"
           @closebyescape="${() => {
             this.displayPopover = false;
@@ -515,7 +563,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           @closebyoutsideclick="${() => {
             this.displayPopover = false;
         }}"
-          style="--mdc-popover-max-width: 100%; --mdc-popover-max-height: ${this.height};"
+          style="--mdc-popover-max-width: var(--mdc-select-width); --mdc-popover-max-height: ${this.height};"
         >
           <slot @click="${this.handleOptionsClick}"></slot>
         </mdc-popover>
@@ -545,6 +593,14 @@ __decorate([
     property({ type: Boolean, attribute: 'soft-disabled' }),
     __metadata("design:type", Boolean)
 ], Select.prototype, "softDisabled", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'boundary' }),
+    __metadata("design:type", String)
+], Select.prototype, "boundary", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'strategy' }),
+    __metadata("design:type", String)
+], Select.prototype, "strategy", void 0);
 __decorate([
     queryAssignedElements({ selector: 'mdc-selectlistbox' }),
     __metadata("design:type", Array)

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

@@ -3,23 +3,24 @@ 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-border-color: var(--mds-color-theme-outline-primary-disabled);
-    --mdc-select-disabled-background-color: var(--mds-color-theme-background-input-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);
+    --mdc-select-background-color-hover: var(--mds-color-theme-background-primary-hover);
+    --mdc-select-background-color-active: var(--mds-color-theme-background-primary-active);
+    --mdc-select-background-color-disabled: var(--mds-color-theme-background-input-disabled);
+    --mdc-select-text-color: var(--mds-color-theme-text-secondary-normal);
+    --mdc-select-text-color-selected: var(--mds-color-theme-text-primary-normal);
+    --mdc-select-text-color-disabled: var(--mds-color-theme-text-primary-disabled);
+    --mdc-select-border-color: var(--mds-color-theme-outline-input-normal);
+    --mdc-select-border-color-disabled: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-select-border-color-success: var(--mds-color-theme-text-success-normal);
+    --mdc-select-border-color-warning: var(--mds-color-theme-text-warning-normal);
+    --mdc-select-border-color-error: var(--mds-color-theme-text-error-normal);
+    --mdc-select-width: 100%;
 
     display: flex;
     flex-direction: column;
     row-gap: 0.5rem;
     align-items: unset;
-    width: unset;
+    width: var(--mdc-select-width);
   }
   :host::part(native-input) {
     margin: 0;
@@ -46,7 +47,7 @@ const styles = css `
   :host::part(base-container) {
     border-radius: 0.5rem;
     padding: 5.5px 6px 5.5px 12px;
-    border: 1px solid var(--mdc-select-icon-border-color);
+    border: 1px solid var(--mdc-select-border-color);
     background: var(--mdc-select-background-color);
     display: flex;
     gap: 0.375rem;
@@ -54,21 +55,21 @@ const styles = css `
     user-select: none;
   }
   :host::part(base-container):hover {
-    background-color: var(--mdc-select-background-hover);
+    background-color: var(--mdc-select-background-color-hover);
   }
   :host::part(base-container):active {
-    background-color: var(--mdc-select-background-active);
+    background-color: var(--mdc-select-background-color-active);
   }
   :host::part(base-text) {
     height: 1.3125rem;
     width: 100%;
-    color: var(--mdc-select-base-text-color);
+    color: var(--mdc-select-text-color);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   :host::part(selected) {
-    color: var(--mdc-select-selected-text-color);
+    color: var(--mdc-select-text-color-selected);
   }
   :host::part(selected-icon) {
     flex-shrink: 0;
@@ -80,22 +81,23 @@ const styles = css `
   }
   :host mdc-popover::part(popover-content) {
     min-width: auto;
+    width: var(--mdc-select-width);
     max-height: var(--mdc-popover-max-height);
     padding: 0.75rem 0.5rem;
   }
 
   /* 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);
+    border-color: var(--mdc-select-border-color-success);
   }
   :host([help-text-type='warning'])::part(base-container) {
-    border-color: var(--mdc-select-warning-border-color);
+    border-color: var(--mdc-select-border-color-warning);
+  }
+  :host([help-text-type='error'])::part(base-container) {
+    border-color: var(--mdc-select-border-color-error);
   }
 
-  /* Disabled, readonly, soft-disabled */
+  /* Disabled, soft-disabled */
   :host([disabled])::part(base-container),
   :host([soft-disabled])::part(base-container),
   :host([readonly])::part(base-container),
@@ -105,19 +107,12 @@ const styles = css `
   :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-border-color);
-    background: var(--mdc-select-disabled-background-color);
-  }
-  :host([readonly])::part(base-text) {
-    color: var(--mdc-select-selected-text-color);
+    border-color: var(--mdc-select-border-color-disabled);
+    background: var(--mdc-select-background-color-disabled);
   }
   :host([disabled])::part(base-text),
   :host([soft-disabled])::part(base-text) {
-    color: var(--mdc-select-disabled-text-color);
-  }
-  :host([soft-disabled])::part(icon-container),
-  :host([readonly])::part(icon-container) {
-    color: var(--mdc-select-disabled-text-color);
+    color: var(--mdc-select-text-color-disabled);
   }
 `;
 export default [styles, ...hostFocusRingStyles(true)];