@siemens/ix 5.1.0 → 5.2.0

package/dist/collection/components/select/select.js

@@ -21,7 +21,7 @@ import { forceUpdate, h, Host, Mixin, } from "@stencil/core";
 import { a11yBoolean } from "../utils/a11y";
 import { FocusProxy, PROXY_LIST_ID_SUFFIX, PROXY_LISTITEM_ID_SUFFIX, updateFocusProxyList, } from "../utils/focus/focus-proxy";
 import { IX_FOCUS_VISIBLE_ACTIVE, queryElements, } from "../utils/focus/focus-utilities";
-import { HookValidationLifecycle, } from "../utils/input";
+import { HookValidationLifecycle, NativeInputNotFoundError, } from "../utils/input";
 import { DefaultMixins } from "../utils/internal/component";
 import { AriaActiveDescendantMixin, } from "../utils/internal/mixins/accessibility/aria-activedescendant.mixin";
 import { ComponentIdMixin, } from "../utils/internal/mixins/id.mixin";
@@ -30,6 +30,7 @@ import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
 let selectId = 0;
 /**
  * @form-ready
+ * @slot default - Select items.
  */
 export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActiveDescendantMixin) {
     constructor() {
@@ -910,7 +911,7 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
             return Promise.resolve(this.inputElement);
         }
         else {
-            return Promise.reject(new Error('Input element not found'));
+            return Promise.reject(new NativeInputNotFoundError());
         }
     }
     /**
@@ -986,18 +987,18 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
         });
     }
     render() {
-        return (h(Host, { key: '3d24590fff4b5d99842ec846719e68d65e13d69d', id: this.getHostElementId(), class: {
+        return (h(Host, { key: '12f066e4fcda30b4df4420847adfed06fa6eb51e', id: this.getHostElementId(), class: {
                 readonly: this.readonly,
                 disabled: this.disabled,
                 'show-focus-outline': this.hasInputFocus && !this.dropdownItemsVisualFocused,
-            }, tabIndex: this.disabled ? -1 : 0 }, h("ix-field-wrapper", { key: '38d7afa06295f5ad795a43cfbe875e341f9837bd', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'e3640d7028f8e43208243a7a49d1065897199f85', class: {
+            }, tabIndex: this.disabled ? -1 : 0 }, h("ix-field-wrapper", { key: 'ef30284c6d2bfe8c67bd61222aa4908b4533f6eb', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'c28253243a825e85ef9ff8cc863ce407191f462d', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
             }, ref: (ref) => {
                 this.dropdownAnchorRef(ref);
                 this.dropdownWrapperRef(ref);
-            } }, h("div", { key: '8f7f92597a46203db9c2bb9d6059dec538d5b288', class: "input-container" }, h("div", { key: '500f47f8ae57080d867b84ce31972108d5ef931d', class: "chips", ref: this.chipsContainerRef }, this.isMultipleMode && this.renderMultipleModeChips(), h("div", { key: '330c7e488669f0ca1283e0f2fe1a09ed9a823397', class: "trigger" }, h("input", { key: '69b2a620b3802ad51d9a092b589e9ab48290cb4c', id: `${this.hostId}-input`, role: "combobox", "aria-controls": `${this.hostId}-proxy-listbox`, "aria-expanded": a11yBoolean(this.dropdownShow), "aria-autocomplete": "list", "aria-disabled": a11yBoolean(this.disabled), autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+            } }, h("div", { key: '841ae12c0dfbc999374644a4ec777f3de2c8e414', class: "input-container" }, h("div", { key: '46e892e8f13331dfb840f3f789dff9e0e94f7bf3', class: "chips", ref: this.chipsContainerRef }, this.isMultipleMode && this.renderMultipleModeChips(), h("div", { key: '3bf138f72a341dba37b522697ba357d8d735f0e2', class: "trigger" }, h("input", { key: '7630af0620fe089e9289794340a5a9a3571d877a', id: `${this.hostId}-input`, role: "combobox", "aria-controls": `${this.hostId}-proxy-listbox`, "aria-expanded": a11yBoolean(this.dropdownShow), "aria-autocomplete": "list", "aria-disabled": a11yBoolean(this.disabled), autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
                 'allow-clear': this.allowClear && !!this.selectedLabels?.length,
             }, placeholder: this.placeholderValue(), value: this.inputValue ?? '', ref: (ref) => {
                 this.inputElement = ref;
@@ -1011,15 +1012,18 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
                 this.clear();
             }, "aria-label": this.ariaLabelClearIconButton })) : null, this.disabled || this.readonly ? null : (h("ix-icon-button", { "aria-label": this.dropdownShow
                 ? 'Close select dropdown'
-                : 'Open select dropdown', "aria-hidden": "true", ref: (ref) => {
+                : 'Open select dropdown', "aria-hidden": "true", tabindex: -1, ref: (ref) => {
+                if (!ref) {
+                    return;
+                }
                 const element = ref;
-                // VDOM issue if tabIndex is provided via property <ix-icon-button tabIndex={-1}>
+                // VDOM issue if tabIndex is provided only via property <ix-icon-button tabIndex={-1}>
                 // the tabindex will be '0' after expanding the dropdown
                 element.tabIndex = -1;
                 element.ariaHidden = 'true';
             }, "data-select-dropdown": true, key: "dropdown", class: { 'dropdown-visible': this.dropdownShow }, icon: this.dropdownShow
                 ? iconChevronUpSmall
-                : iconChevronDownSmall, variant: "subtle-tertiary" }))))))), h("ix-dropdown", { key: 'c44d1ab3cc63edc72b69a328290f51b677002bfa', id: `${this.hostId}-listbox`, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'], keyboardItemTriggerKeys: ['Enter'], disableFocusTrap: true, focusHost: this.hostElement, ref: this.dropdownRef, show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', hidden: this.disabled || this.readonly, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChange: (event) => {
+                : iconChevronDownSmall, variant: "subtle-tertiary" }))))))), h("ix-dropdown", { key: '98815c0cc3ab87dea8cbba41b0285eef62ae3e50', id: `${this.hostId}-listbox`, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'], keyboardItemTriggerKeys: ['Enter'], disableFocusTrap: true, focusHost: this.hostElement, ref: this.dropdownRef, show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', hidden: this.disabled || this.readonly, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChange: (event) => {
                 if ((this.disabled || this.readonly) && event.detail) {
                     event.preventDefault();
                 }
@@ -1058,16 +1062,16 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
                 if (this.isSingleMode) {
                     this.dropdownShow = false;
                 }
-            } }, h("div", { key: '992a4564d8d601adad70a14fb45efc22155f66ea', "aria-hidden": "true", class: {
+            } }, h("div", { key: '99bce854b460b54621001ae07fc9f36d10684df8', "aria-hidden": "true", class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: 'e4294d41e1d797ad9fff11f36deb1bdc9cf87208', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: '49916fd0b14b1ff8a0b8f00cf2133c6f08c94a80', onSlotchange: () => {
                 this.updateSelection();
-            } }), h(FocusProxy, { key: '4d1c63a6f403f3cac6558176d3360d68b21c78c8', hostId: this.hostId, otherProps: {
+            } }), h(FocusProxy, { key: 'f09bdadcc1c886ef78299322f3318eaf2ca0ccd2', hostId: this.hostId, otherProps: {
                 'aria-hidden': a11yBoolean(!this.dropdownShow),
                 'aria-multiselectable': a11yBoolean(this.isMultipleMode),
                 hidden: this.disabled || this.readonly,
-            } }), this.isDropdownEmpty && !this.editable && (h("div", { key: 'a962db05209dba24fd4e800fc79c0a2c220ebe88', class: "select-list-header" }, this.i18nNoMatches))), this.isMultipleMode &&
+            } }), this.isDropdownEmpty && !this.editable && (h("div", { key: '70c18c30db4dc6af1c84b6a4a81fbb133cf02a1b', class: "select-list-header" }, this.i18nNoMatches))), this.isMultipleMode &&
             !this.shouldDisplayAllChip() &&
             this.hiddenChipValues.length > 0 &&
             this.renderOverflowDropdown()));

package/dist/collection/components/select-item/select-item.js

@@ -85,9 +85,9 @@ export class SelectItem extends Mixin(...DefaultMixins, FocusVisibleMixin, Compo
             ...this.inheritAriaAttributes,
             'aria-label': this.inheritAriaAttributes['aria-label'] ?? this.label,
         };
-        return (h(Host, { key: 'adb8da016414dafc839fff44acbe5dd7d254c188', ...ariaAttributes, id: this.getHostElementId(), disableAriaSelectHandling: true, class: {
+        return (h(Host, { key: 'de5fffd688bd95f90e52834f2fb64bd27ccb058e', ...ariaAttributes, id: this.getHostElementId(), disableAriaSelectHandling: true, class: {
                 [IX_FOCUS_VISIBLE]: true,
-            }, "aria-hidden": "true", role: "presentation" }, h("ix-dropdown-item", { key: '156824791385b920b04cb389553e020cf3f3183b', "aria-hidden": "true", itemRole: "option", class: {
+            }, "aria-hidden": "true", role: "presentation" }, h("ix-dropdown-item", { key: '095b16a14ef831cf00021f8078124f3885673891', "aria-hidden": "true", itemRole: "option", class: {
                 'select-item-checked': this.selected,
                 [IX_FOCUS_VISIBLE_ACTIVE]: this.ixFocusVisible,
             }, checked: this.selected, disabled: this.disabled, label: this.label ? this.label : this.value, ref: this.dropdownItemRef })));

package/dist/collection/components/slider/slider.css

@@ -43,7 +43,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -52,37 +52,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host input[type=range] {

package/dist/collection/components/slider/slider.js

@@ -233,15 +233,15 @@ export class Slider {
             traceStart = valueInPercentage;
             traceEnd = traceReferenceInPercentage;
         }
-        return (h(Host, { key: '5eed909b2857b9bfbea41402736fe01d7ad9a434', class: {
+        return (h(Host, { key: 'bc904df57adc690f6a26d435f1c82d14755c6754', class: {
                 disabled: this.disabled,
                 invalid: this.isInvalid,
                 info: this.isInfo,
                 valid: this.isValid,
                 warning: this.isWarning,
-            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("ix-field-wrapper", { key: '6f5ef62c132260787b91ea5b5f08faf21153735f', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.controlRef }, h("div", { key: 'c67536334750605b342859dbf6c38abcc730c6a6', class: "slider-container" }, h("div", { key: '33649db602e05ea4f2496c6b7b5a3620eca81a49', class: "slider" }, h("div", { key: 'f282b195ad420d036e90b4cc45c59fe9232b5919', class: "track" }, h("div", { key: 'f68211f2d377f2741eaedcdc4ca7fcbcd0f1bbfb', ref: this.thumbRef, class: "thumb", style: {
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("ix-field-wrapper", { key: 'e346c24bf005ec2aa06af0729f4af521f72ec2b9', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.controlRef }, h("div", { key: '3aa92608f9401f269cf8227e5ccede8439c1b678', class: "slider-container" }, h("div", { key: 'cdd7636f0eddaa870f33bbb505fbdeedf808bfe9', class: "slider" }, h("div", { key: '154a03a58b01cb76e753c96c2f5bc87fa939b184', class: "track" }, h("div", { key: 'baf3ff99733257bd3a7697a8f7dbe5626147d722', ref: this.thumbRef, class: "thumb", style: {
                 left: `calc(${valueInPercentage} * (100% - 1rem))`,
-            } }), h("svg", { key: '50576c072bbd33c8689017d7f67b83694d73516c', class: "ticks", xmlns: "http://www.w3.org/2000/svg" }, this.marker
+            } }), h("svg", { key: '1242b04782e64afeb3e4f7b3c735c1be96372923', class: "ticks", xmlns: "http://www.w3.org/2000/svg" }, this.marker
             ?.filter((markerValue) => markerValue >= this.min && markerValue <= this.max)
             .map((markerValue) => {
             const markerPosition = (markerValue - this.rangeMin) / range;
@@ -253,7 +253,7 @@ export class Slider {
                 }, cx: "0", cy: "0", style: {
                     '--tick-value': `${markerPosition}`,
                 } }));
-        }))), h("input", { key: '3ee47514d9a51488410c2b0984f05f39e74153a7', id: "slider", ref: this.controlRef, type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), onFocus: () => {
+        }))), h("input", { key: 'c10155a18c3f0c1edb8bd6f12214de818db74beb', id: "slider", ref: this.controlRef, type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), onFocus: () => {
                 this.showTooltip = true;
                 this.touched = true;
             }, onBlur: () => {
@@ -269,9 +269,9 @@ export class Slider {
                 'hide-trace-reference': this.trace &&
                     (this.traceReference <= this.min ||
                         this.traceReference >= this.max),
-            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max, ...this.a11yAttributes }), h("ix-tooltip", { key: '740ea0d7cf7a200c7db7ea8ac70fd2537b84b4a5', ref: this.tooltipRef, class: {
+            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max, ...this.a11yAttributes }), h("ix-tooltip", { key: 'ace607a123ece9ce604f1ec2b6ce870fbbc2d20e', ref: this.tooltipRef, class: {
                 'hide-tooltip': !this.showTooltip,
-            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), this.hasLabels && (h("div", { key: 'd5264eaabacd9f667600df1f0cdf8e89b24d7730', class: "label" }, h("div", { key: '4ac2ebda49543e04e619452bd59c3f30a0404879' }, h("slot", { key: 'dcc9ecd173f1d49133e1070b72b34b8485cc9860', name: "label-start" })), h("div", { key: '022869a430a0644e24932553a321da5fa8dd4df2' }, h("slot", { key: '4da9fdcb1d570657a3796a32d0925025e16dc4b7', name: "label-end" }))))))));
+            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), this.hasLabels && (h("div", { key: '0e59aadf74934ffc7067ad336c5a4156189b8ae8', class: "label" }, h("div", { key: '20af42d330da5d8b5e9888378d5f09b9591c054d' }, h("slot", { key: 'e1c21828426fb53c2e5dffe2a4a305a114d83359', name: "label-start" })), h("div", { key: '27c5122383b81b204ffeed99a754d8275e77eb40' }, h("slot", { key: 'd6766ea6f1f690423e55858a1866a0263749cc7f', name: "label-end" }))))))));
     }
     static get is() { return "ix-slider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.css

@@ -31,7 +31,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -40,37 +40,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 
@@ -156,7 +156,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -165,37 +165,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 
@@ -281,7 +281,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -290,37 +290,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 
@@ -406,7 +406,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -415,37 +415,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 
@@ -531,7 +531,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -540,37 +540,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 

package/dist/collection/components/spinner/spinner.js

@@ -29,7 +29,7 @@ export class Spinner {
         }
         ariaProperties.role = 'status';
         ariaProperties['aria-busy'] = 'true';
-        return (h(Host, { key: '236bf23ec447ee60e3d328f3b90c8fc53a2a249b', ...ariaProperties }, h("div", { key: '7d6c7fdd2167cf509ef6bb1dfec369b4bedeee14', class: {
+        return (h(Host, { key: '4c85678a69f2221a2a896cecbf4ea2a52c63eee3', ...ariaProperties }, h("div", { key: '8f901307a70b082f18e02d536eaac478a086ac3e', class: {
                 primary: this.variant === 'primary',
                 [this.size]: true,
                 'hide-track': this.hideTrack,

package/dist/collection/components/split-button/split-button.css

@@ -70,7 +70,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -79,37 +79,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .left-button-border {

package/dist/collection/components/split-button/split-button.js

@@ -11,6 +11,9 @@ import { h, Host, Mixin, Build, } from "@stencil/core";
 import { FocusProxy, PROXY_LIST_ID_SUFFIX, PROXY_LISTITEM_ID_SUFFIX, updateFocusProxyList, } from "../utils/focus/focus-proxy";
 import { DefaultMixins } from "../utils/internal/component";
 import { AriaActiveDescendantMixin, } from "../utils/internal/mixins/accessibility/aria-activedescendant.mixin";
+/**
+ * @slot default - Dropdown items for the split button.
+ */
 export class SplitButton extends Mixin(...DefaultMixins, AriaActiveDescendantMixin) {
     constructor() {
         super();
@@ -136,7 +139,7 @@ export class SplitButton extends Mixin(...DefaultMixins, AriaActiveDescendantMix
                 'left-button-border': !hasOutline,
             },
         };
-        return (h(Host, { key: '1b867c8b33fe52356804497afd93bb1bf26afb69' }, this.label ? (h("ix-button", { ...buttonAttributes, icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }, this.label)) : (h("ix-icon-button", { ...buttonAttributes, icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton })), h("ix-dropdown-button", { key: '9b2400c1a1b84369af89a9709e36fc743af4a8e5', class: "right-button", "aria-label": this.ariaLabelSplitIconButton, icon: this.splitIcon ?? iconContextMenu, enableTopLayer: this.enableTopLayer, closeBehavior: this.closeBehavior, disabled: this.isDisabledIcon, suppressAriaActiveDescendant: true, onShowChanged: ({ detail }) => (this.showDropdown = detail), "aria-controls": `${this.internalId}-${PROXY_LIST_ID_SUFFIX}` }, h(FocusProxy, { key: 'b2e0e0547df9f6f19ed110629189bfc27a8c1876', hostId: this.internalId, otherProps: {} }), h("slot", { key: 'b54b7d8c86e66b60f9e71f63965561a84c437707' }))));
+        return (h(Host, { key: '8b0ca8dd570f499543d80f403c5119de176ed859' }, this.label ? (h("ix-button", { ...buttonAttributes, icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }, this.label)) : (h("ix-icon-button", { ...buttonAttributes, icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton })), h("ix-dropdown-button", { key: '75f3af8bd3c91e40ed7ad749fa794e5a19129c3c', class: "right-button", "aria-label": this.ariaLabelSplitIconButton, icon: this.splitIcon ?? iconContextMenu, enableTopLayer: this.enableTopLayer, closeBehavior: this.closeBehavior, disabled: this.isDisabledIcon, suppressAriaActiveDescendant: true, onShowChanged: ({ detail }) => (this.showDropdown = detail), "aria-controls": `${this.internalId}-${PROXY_LIST_ID_SUFFIX}` }, h(FocusProxy, { key: '53e6f62837d923f29e11ad408681f34067343aef', hostId: this.internalId, otherProps: {} }), h("slot", { key: 'be4d6d91d022ac56acc0fdbab17dd37f0af539c6' }))));
     }
     static get is() { return "ix-split-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-item/tab-item.css

@@ -52,7 +52,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -61,37 +61,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .text {
@@ -174,6 +174,12 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+:host(.stretched) div {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 :host(.selected:not(.disabled)) {
   background-color: var(--theme-tab--background--selected);