@siemens/ix 4.4.0 → 5.0.0

package/dist/collection/components/select/test/select-controller.js

@@ -0,0 +1,89 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from "@playwright/test";
+export function selectController(select) {
+    const input = select.locator('input');
+    const dropdown = select.locator('ix-dropdown');
+    const dropdownChevron = select.locator('ix-icon-button');
+    const isDropdownVisible = async () => {
+        const element = await dropdown.elementHandle();
+        if (!element) {
+            throw new Error('Dropdown has no open handle');
+        }
+        await element.waitForElementState('stable');
+        await expect(dropdown).toBeVisible();
+    };
+    return {
+        getDropdownLocator() {
+            return dropdown;
+        },
+        getInputLocator() {
+            return input;
+        },
+        async clickDropdownChevron() {
+            await dropdownChevron.click();
+            await isDropdownVisible();
+        },
+        async fillInput(text) {
+            await input.fill(text);
+        },
+        async focusInput() {
+            await input.click();
+            await expect(input).toBeFocused();
+        },
+        async arrowDown(skipDropdownCheck = false) {
+            if (!skipDropdownCheck) {
+                await isDropdownVisible();
+            }
+            await select.page().keyboard.press('ArrowDown', { delay: 50 });
+        },
+        async arrowUp(skipDropdownCheck = false) {
+            if (!skipDropdownCheck) {
+                await isDropdownVisible();
+            }
+            await select.page().keyboard.press('ArrowUp', { delay: 50 });
+        },
+        async pressEnter() {
+            await select.page().keyboard.press('Enter');
+        },
+        async getDropdownItemsLocator(onlyVisible = false) {
+            let selector = 'ix-select-item';
+            if (onlyVisible) {
+                selector += ':not([hidden])';
+            }
+            await isDropdownVisible();
+            return select.locator(selector).all();
+        },
+        async getFocusDropdownItemLocator() {
+            await isDropdownVisible();
+            const focusDropdownItem = select.locator('ix-select-item[ix-focus-visible]');
+            return focusDropdownItem;
+        },
+        async getAddItemDropdownItemLocator() {
+            await isDropdownVisible();
+            const addItem = select.locator('ix-dropdown-item.add-item');
+            const addItemHandle = await addItem.elementHandle();
+            if (!addItemHandle) {
+                throw new Error('Dropdown has no open handle');
+            }
+            await addItemHandle.waitForElementState('stable');
+            return addItem;
+        },
+        async getItemCheckedLocator() {
+            await isDropdownVisible();
+            const itemChecked = select.locator('ix-select-item .checkmark');
+            const itemCheckedHandle = await itemChecked.elementHandle();
+            if (!itemCheckedHandle) {
+                throw new Error('Dropdown has no open handle');
+            }
+            expect(itemCheckedHandle.waitForElementState('stable'));
+            return itemChecked;
+        },
+    };
+}

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

@@ -6,35 +6,50 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host, } from "@stencil/core";
+import { h, Host, Mixin, } from "@stencil/core";
+import { a11yHostAttributes } from "../utils/a11y";
+import { IX_FOCUS_VISIBLE, IX_FOCUS_VISIBLE_ACTIVE, } from "../utils/focus/focus-utilities";
+import { DefaultMixins } from "../utils/internal/component";
+import { FocusVisibleMixin } from "../utils/internal/mixins/focus-visible.mixin";
+import { ComponentIdMixin } from "../utils/internal/mixins/id.mixin";
+import { makeRef } from "../utils/make-ref";
 import { IxSelectItemLabelChangeEvent, IxSelectItemValueChangeEvent, } from "./events";
-export class SelectItem {
+export class SelectItem extends Mixin(...DefaultMixins, FocusVisibleMixin, ComponentIdMixin) {
     constructor() {
-        /**
-         * Flag indicating whether the item is selected
-         */
-        this.selected = false;
-        /**
-         * @internal
-         */
-        this.hover = false;
-        this.componentLoaded = false;
-    }
-    /** @internal */
-    async getDropdownItemElement() {
-        return this.dropdownItem;
+        super();
     }
+    hostElement;
+    /**
+     * Displayed name of the item
+     */
+    label;
+    /**
+     * The value of the item.
+     * Important: The select component uses string values to handle selection and will call toString() on this value.
+     * Therefor a string should be passed to value to prevent unexpected behavior.
+     */
+    value;
+    /**
+     * Flag indicating whether the item is selected
+     */
+    selected = false;
     /**
      * @internal
-     * @param event
      */
-    async onItemClick(event) {
-        event === null || event === void 0 ? void 0 : event.preventDefault();
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
-        this.itemClick.emit(this.value);
+    hover = false;
+    /**
+     * Item clicked
+     */
+    itemClick;
+    componentLoaded = false;
+    dropdownItemRef = makeRef();
+    inheritAriaAttributes = {};
+    componentDidLoad() {
+        this.inheritAriaAttributes = a11yHostAttributes(this.hostElement);
     }
-    get dropdownItem() {
-        return this.hostElement.querySelector('ix-dropdown-item');
+    /** @internal */
+    async getDropdownItemElement() {
+        return this.dropdownItemRef.waitForCurrent();
     }
     componentDidRender() {
         if (this.value === undefined || this.value === null) {
@@ -59,9 +74,16 @@ export class SelectItem {
         }
     }
     render() {
-        return (h(Host, { key: '619f989267f4add7b0975752c1df3194c1bc9810' }, h("ix-dropdown-item", { key: '6a54101b711fb3fef7fe39bcc260b50e6f8ba1f9', class: {
+        const ariaAttributes = {
+            ...this.inheritAriaAttributes,
+            'aria-label': this.inheritAriaAttributes['aria-label'] ?? this.label,
+        };
+        return (h(Host, { key: '41ab96fb19faa443d399c320bb1fd0ddfd436afb', ...ariaAttributes, id: this.getHostElementId(), disableAriaSelectHandling: true, class: {
+                [IX_FOCUS_VISIBLE]: true,
+            }, "aria-hidden": "true", role: "presentation" }, h("ix-dropdown-item", { key: 'b346f53bce7b1294fb31f723b5446f4bcf133d88', "aria-hidden": "true", itemRole: "option", class: {
                 'select-item-checked': this.selected,
-            }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
+                [IX_FOCUS_VISIBLE_ACTIVE]: this.ixFocusVisible,
+            }, checked: this.selected, label: this.label ? this.label : this.value, ref: this.dropdownItemRef })));
     }
     static get is() { return "ix-select-item"; }
     static get encapsulation() { return "shadow"; }
@@ -203,41 +225,6 @@ export class SelectItem {
                             "text": undefined
                         }]
                 }
-            },
-            "onItemClick": {
-                "complexType": {
-                    "signature": "(event?: CustomEvent<HTMLIxDropdownItemElement>) => Promise<void>",
-                    "parameters": [{
-                            "name": "event",
-                            "type": "CustomEvent<HTMLIxDropdownItemElement> | undefined",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "CustomEvent": {
-                            "location": "global",
-                            "id": "global::CustomEvent"
-                        },
-                        "HTMLIxDropdownItemElement": {
-                            "location": "global",
-                            "id": "global::HTMLIxDropdownItemElement"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }, {
-                            "name": "param",
-                            "text": "event"
-                        }]
-                }
             }
         };
     }

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

@@ -257,32 +257,25 @@
   min-height: 0px;
 }
 
-:host(.error),
 :host(.invalid) {
   --trace-color: var(--theme-slider-trace--background--invalid);
   --tick-color--active: var(--theme-slider-trace-marker--background--invalid);
 }
-:host(.error) input[type=range]::-webkit-slider-thumb,
 :host(.invalid) input[type=range]::-webkit-slider-thumb {
   background-color: var(--theme-slider-thumb--background--invalid);
 }
-:host(.error) input[type=range]::-moz-range-thumb,
 :host(.invalid) input[type=range]::-moz-range-thumb {
   background-color: var(--theme-slider-thumb--background--invalid);
 }
-:host(.error) input[type=range]:hover::-webkit-slider-thumb,
 :host(.invalid) input[type=range]:hover::-webkit-slider-thumb {
   background-color: var(--theme-slider-thumb--background--invalid--hover);
 }
-:host(.error) input[type=range]:hover::-moz-range-thumb,
 :host(.invalid) input[type=range]:hover::-moz-range-thumb {
   background-color: var(--theme-slider-thumb--background--invalid--hover);
 }
-:host(.error) input[type=range]:active::-webkit-slider-thumb,
 :host(.invalid) input[type=range]:active::-webkit-slider-thumb {
   background-color: var(--theme-slider-thumb--background--invalid--active);
 }
-:host(.error) input[type=range]:active::-moz-range-thumb,
 :host(.invalid) input[type=range]:active::-moz-range-thumb {
   background-color: var(--theme-slider-thumb--background--invalid--active);
 }

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

@@ -38,56 +38,96 @@ function between(min, value, max) {
  * @slot label-end - Element will be displayed at the end of the slider
  */
 export class Slider {
-    constructor() {
-        /**
-         * Show helper, info, warning, error and valid text as tooltip
-         * @since 4.3.0
-         */
-        this.showTextAsTooltip = false;
-        /**
-         * Legal number intervals
-         *
-         * {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step}
-         */
-        this.step = 1;
-        /**
-         * Minimum slider value
-         */
-        this.min = 0;
-        /**
-         * Maximum slider value
-         */
-        this.max = 100;
-        /**
-         * Current value of the slider
-         */
-        this.value = 0;
-        /**
-         * Show a trace line
-         */
-        this.trace = false;
-        /**
-         * Define the start point of the trace line
-         */
-        this.traceReference = 0;
-        /**
-         * Show control as disabled
-         */
-        this.disabled = false;
-        this.rangeInput = 0;
-        this.rangeMin = 0;
-        this.rangeMax = 100;
-        this.rangeTraceReference = 0;
-        this.showTooltip = false;
-        this.isInvalid = false;
-        this.isValid = false;
-        this.isInfo = false;
-        this.isWarning = false;
-        this.touched = false;
-        this.controlRef = makeRef();
-        this.thumbRef = makeRef();
-        this.tooltipRef = makeRef();
-    }
+    formInternals;
+    hostElement;
+    /**
+     * Show text below the field component
+     * @since 4.3.0
+     */
+    helperText;
+    /**
+     * Label for the field component
+     * @since 4.3.0
+     */
+    label;
+    /**
+     * Error text for the field component
+     * @since 4.3.0
+     */
+    invalidText;
+    /**
+     * Info text for the field component
+     * @since 4.3.0
+     */
+    infoText;
+    /**
+     * Warning text for the field component
+     * @since 4.3.0
+     */
+    warningText;
+    /**
+     * Valid text for the field component
+     * @since 4.3.0
+     */
+    validText;
+    /**
+     * Show helper, info, warning, error and valid text as tooltip
+     * @since 4.3.0
+     */
+    showTextAsTooltip = false;
+    /**
+     * Legal number intervals
+     *
+     * {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step}
+     */
+    step = 1;
+    /**
+     * Minimum slider value
+     */
+    min = 0;
+    /**
+     * Maximum slider value
+     */
+    max = 100;
+    /**
+     * Current value of the slider
+     */
+    value = 0;
+    /**
+     * Define tick marker on the slider. Marker has to be within slider min/max
+     */
+    marker;
+    /**
+     * Show a trace line
+     */
+    trace = false;
+    /**
+     * Define the start point of the trace line
+     */
+    traceReference = 0;
+    /**
+     * Show control as disabled
+     */
+    disabled = false;
+    /**
+     * Will emit the value when it changes
+     */
+    valueChange;
+    rangeInput = 0;
+    rangeMin = 0;
+    rangeMax = 100;
+    rangeTraceReference = 0;
+    showTooltip = false;
+    isInvalid = false;
+    isValid = false;
+    isInfo = false;
+    isWarning = false;
+    a11yAttributes;
+    lastFormValue;
+    touched = false;
+    controlRef = makeRef();
+    thumbRef = makeRef();
+    tooltipRef = makeRef();
     get hasLabels() {
         return !!this.hostElement.querySelector('[slot="label-start"], [slot="label-end"]');
     }
@@ -98,16 +138,14 @@ export class Slider {
         return this.thumbRef.current;
     }
     get slider() {
-        var _a;
-        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('slider');
+        return this.hostElement.shadowRoot?.getElementById('slider');
     }
     onShowTooltipChange() {
-        var _a, _b;
         if (this.showTooltip && this.pseudoThumb) {
-            (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.showTooltip(this.pseudoThumb);
+            this.tooltip?.showTooltip(this.pseudoThumb);
             return;
         }
-        (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.hideTooltip();
+        this.tooltip?.hideTooltip();
     }
     onClassField({ isInvalid, isInfo, isValid, isWarning, isInvalidByRequired, }) {
         this.isInvalid = isInvalid || isInvalidByRequired;
@@ -185,7 +223,6 @@ export class Slider {
         return Promise.resolve(this.touched);
     }
     render() {
-        var _a;
         const range = this.rangeMax - this.rangeMin;
         let traceReferenceInPercentage = (this.rangeTraceReference - this.rangeMin) / range;
         let valueInPercentage = (this.rangeInput - this.rangeMin) / range;
@@ -196,16 +233,17 @@ export class Slider {
             traceStart = valueInPercentage;
             traceEnd = traceReferenceInPercentage;
         }
-        return (h(Host, { key: '6957b2bb68891be643d1a1271fd550f0ba398b2d', class: {
+        return (h(Host, { key: '4e158f7b4af6a8786274b094fcbdc26a00ec19ed', class: {
                 disabled: this.disabled,
-                error: !!this.error,
                 invalid: this.isInvalid,
                 info: this.isInfo,
                 valid: this.isValid,
                 warning: this.isWarning,
-            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("ix-field-wrapper", { key: '22d183907d87d7ee59d11606ffc58d6b0f51a52c', 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: 'a7076b2f4940e1c4d83b874eb06889027f3531b9', class: "slider-container" }, h("div", { key: '4d56ffb868ce60f3b7e47d803ec6ecffb493489d', class: "slider" }, h("div", { key: 'ba33818b7f9ce81576136f9e95b5fe7ba88467e7', class: "track" }, h("div", { key: 'b5ce5c8c334909d11875ab9ae2b36f719c1244a8', ref: this.thumbRef, class: "thumb", style: {
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("ix-field-wrapper", { key: 'a18bd3265b8f50d1a3383b59e70efe0bfb829f39', 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: 'e01718c2e79b41df00aff2cafd6c8e5becdba85d', class: "slider-container" }, h("div", { key: '8b83be7e28cac0484b54768c6283d1d37a74e857', class: "slider" }, h("div", { key: '9fa8db2173cd87de771d6a0d5a2ace01820fe128', class: "track" }, h("div", { key: '46b3b6487f23f4a9219420642587813906c53ce8', ref: this.thumbRef, class: "thumb", style: {
                 left: `calc(${valueInPercentage} * (100% - 1rem))`,
-            } }), h("svg", { key: '292823e7581b335cb5e499eddb2ab71c79789c19', class: "ticks", xmlns: "http://www.w3.org/2000/svg" }, (_a = this.marker) === null || _a === void 0 ? void 0 : _a.filter((markerValue) => markerValue >= this.min && markerValue <= this.max).map((markerValue) => {
+            } }), h("svg", { key: '53a69bb9f7e79558323d7558d60655293a467012', 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;
             return (h("circle", { class: {
                     tick: true,
@@ -215,7 +253,7 @@ export class Slider {
                 }, cx: "0", cy: "0", style: {
                     '--tick-value': `${markerPosition}`,
                 } }));
-        }))), h("input", Object.assign({ key: '2e642f9cc0b3674b7e553b6e2b74d4f015ea4469', 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: 'e92242dc3fa7207e1d86071369e76178c9ae6ddf', 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: () => {
@@ -231,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: 'd3367c620a0865ef84daaefdc0102ba3a186215c', ref: this.tooltipRef, class: {
+            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max, ...this.a11yAttributes }), h("ix-tooltip", { key: 'aff89362b88b37ec1d9b6bd9f6ba59646dd538a0', ref: this.tooltipRef, class: {
                 'hide-tooltip': !this.showTooltip,
-            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), this.hasLabels && (h("div", { key: 'e06b2afd4e3521cf34095a5243671b0d24b59695', class: "label" }, h("div", { key: '653916ebdc36874fb412b1481c13fe7a52eddccf' }, h("slot", { key: '0d73fd36d946b79bb84aa41a5b7973a4d986502c', name: "label-start" })), h("div", { key: '9b0938207951dceab28fa89238bc43d28b5e9e3b' }, h("slot", { key: 'fb32e79050fb8aa5eb83cde26971b5cafad4f42f', name: "label-end" })))), this.error ? (h("ix-typography", { textColor: "alarm" }, this.error)) : null))));
+            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), this.hasLabels && (h("div", { key: '34feab8797c1338f3063e17e145811ea33518f4e', class: "label" }, h("div", { key: 'c95ca806e153beab2c91451859b12c82f2e89a65' }, h("slot", { key: 'e49498aba11ed8f8711db171308f4979a942a93c', name: "label-start" })), h("div", { key: 'ac2e3855bc845f00f3ac8f79022c767befa2c7ea' }, h("slot", { key: 'a21bc3e1329c8467762e5b44801fc8db0868ec13', name: "label-end" }))))))));
     }
     static get is() { return "ix-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -568,28 +606,6 @@ export class Slider {
                 "reflect": false,
                 "attribute": "disabled",
                 "defaultValue": "false"
-            },
-            "error": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean | string",
-                    "resolved": "boolean | string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Will be removed in 5.0.0. Use invalid class instead."
-                        }],
-                    "text": "Show error state and message"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "error"
             }
         };
     }

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

@@ -9,20 +9,19 @@
 import { h, Host } from "@stencil/core";
 import { a11yHostAttributes } from "../utils/a11y";
 export class Spinner {
-    constructor() {
-        /**
-         * Variant of spinner
-         */
-        this.variant = 'secondary';
-        /**
-         * Size of spinner
-         */
-        this.size = 'medium';
-        /**
-         * @internal
-         */
-        this.hideTrack = false;
-    }
+    hostElement;
+    /**
+     * Variant of spinner
+     */
+    variant = 'secondary';
+    /**
+     * Size of spinner
+     */
+    size = 'medium';
+    /**
+     * @internal
+     */
+    hideTrack = false;
     render() {
         const ariaProperties = a11yHostAttributes(this.hostElement);
         if (ariaProperties['aria-label'] === undefined) {
@@ -30,7 +29,7 @@ export class Spinner {
         }
         ariaProperties.role = 'status';
         ariaProperties['aria-busy'] = 'true';
-        return (h(Host, Object.assign({ key: '183a2ab8ebc58c9ac1a51d8a34741507932e9382' }, ariaProperties), h("div", { key: 'ecde7dc98d72dcf3b193597bb2e7f0c13c044d15', class: {
+        return (h(Host, { key: '835ff861b90c96a284b144cd4b7df3bd19c547be', ...ariaProperties }, h("div", { key: '0fd777eaca9341e38e0e19bd73b03af5bd188eb8', class: {
                 primary: this.variant === 'primary',
                 [this.size]: true,
                 'hide-track': this.hideTrack,

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

@@ -44,8 +44,26 @@
   border-right: 0px;
 }
 
+/*
+* SPDX-FileCopyrightText: 2026 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
 :host {
-  display: inline-block;
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+:host .left-button {
+  width: calc(100% - 2rem);
+  --ix-button-border-radius-right: 0;
+}
+:host .right-button {
+  width: 2rem;
+  --ix-dropdown-button-border-radius-left: 0;
 }
 :host *,
 :host *::after,
@@ -94,27 +112,26 @@
 :host ::-webkit-scrollbar-corner {
   display: none;
 }
-:host .btn-group {
-  position: relative;
-  display: inline-flex;
-  vertical-align: middle;
-  width: 100%;
-}
-:host .btn-group > ix-button:nth-child(1),
-:host .btn-group > ix-icon-button:nth-child(1) {
-  width: calc(100% - 2rem);
-  --ix-button-border-radius-right: 0;
-}
-:host .btn-group > ix-icon-button:nth-child(2) {
-  width: 2rem;
-  --ix-button-border-radius-left: 0;
-}
-:host .middle-gap {
-  gap: 0.125rem;
-}
 :host .left-button-border {
   border-top-width: 0.125rem;
   border-right-width: 0;
   border-left-width: 0.125rem;
   border-bottom-width: 0.125rem;
+  margin-right: 0.125rem;
+}
+:host .proxy-list {
+  all: unset;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  overflow: hidden;
+  color: transparent;
+  opacity: 0;
+  pointer-events: all;
+  z-index: 1000;
+}
+:host .proxy-list li {
+  height: 2px;
+  width: 2px;
+  pointer-events: all;
 }