@siemens/ix 4.4.0 → 5.1.0

package/dist/cjs/ix-slider.cjs.entry.js

@@ -1,12 +1,13 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var a11y = require('./a11y-DldCLr8D.js');
-var listener = require('./listener-BShKJBRB.js');
-var makeRef = require('./make-ref-BaH6_YJk.js');
-var validation = require('./validation-DF9UXqHB.js');
+var index = require('./index-DnclGKUw.js');
+var a11y = require('./a11y-_XjpTo2w.js');
+var listener = require('./listener-ClEsCfX0.js');
+var makeRef = require('./make-ref-CHsa3FY7.js');
+var validation = require('./validation-DJaUH-UR.js');
+require('./index-B4J4JK0P.js');
 
-const sliderCss = () => `:host{display:flex;flex-direction:column;min-height:2rem;justify-content:center;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-slider-track-marker--background);--trace-color:var(--theme-slider-trace--background);--tick-color:var(--theme-slider-track-marker--background);--tick-color--active:var(--theme-slider-trace-marker--background);--track-color:var(--theme-slider-track--background)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1.5rem;margin:0}:host input[type=range].trace::before{content:"";position:absolute;display:block;z-index:-1;width:calc((var(--trace-end) - var(--trace-start)) * 100%);left:calc(var(--trace-start) * 100%);height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%);border-radius:clamp(0rem, (0.01 - var(--trace-start)) * 999rem, 0.125rem) clamp(0rem, (var(--trace-end) - 0.99) * 999rem, 0.125rem) clamp(0rem, (var(--trace-end) - 0.99) * 999rem, 0.125rem) clamp(0rem, (0.01 - var(--trace-start)) * 999rem, 0.125rem)}:host .slider-container{width:100%}:host .slider-container .slider{width:100%}:host .slider-container .slider input[type=range]{width:100%}:host input[type=range].trace:not(.hide-trace-reference)::after{content:"";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(100% * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:50%;background-color:var(--theme-slider-thumb--background);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:50%;background-color:var(--theme-slider-thumb--background);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host{}:host .ticks{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none}:host .ticks circle.tick{--tick-size:6px;--tick-radius:calc(var(--tick-size) / 2);r:var(--tick-radius);fill:var(--tick-color);transform:translate(calc(var(--tick-value) * (100% - var(--thumb-size)) + var(--thumb-size) / 2), 50%)}:host .ticks .tick.tick-at-min{transform:translate(var(--tick-radius), 50%)}:host .ticks .tick.tick-at-max{transform:translate(calc(100% - var(--tick-radius)), 50%)}:host .ticks .tick.tick-active{fill:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:100%;top:50%;transform:translateY(-50%);left:0px;border-radius:2px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;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)}:host(.disabled){pointer-events:none;--track-color:var(--theme-slider-track--background--disabled);--trace-color:var(--theme-slider-trace--background--disabled);--tick-color:var(--theme-slider-track-marker--background--disabled);--tick-color--active:var(--theme-slider-trace-marker--background--disabled)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.warning){--trace-color:var(--theme-color-warning-40);--tick-color--active:var(--theme-color-warning)}:host(.warning) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-warning)}:host(.warning) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-warning)}:host(.info){--trace-color:var(--theme-color-info-40);--tick-color--active:var(--theme-color-info)}:host(.info) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-info)}:host(.info) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-info)}:host(.valid){--trace-color:var(--theme-color-success-40);--tick-color--active:var(--theme-color-success)}:host(.valid) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-success)}:host(.valid) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-success)}`;
+const sliderCss = () => `:host{display:flex;flex-direction:column;min-height:2rem;justify-content:center;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-slider-track-marker--background);--trace-color:var(--theme-slider-trace--background);--tick-color:var(--theme-slider-track-marker--background);--tick-color--active:var(--theme-slider-trace-marker--background);--track-color:var(--theme-slider-track--background)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1.5rem;margin:0}:host input[type=range].trace::before{content:"";position:absolute;display:block;z-index:-1;width:calc((var(--trace-end) - var(--trace-start)) * 100%);left:calc(var(--trace-start) * 100%);height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%);border-radius:clamp(0rem, (0.01 - var(--trace-start)) * 999rem, 0.125rem) clamp(0rem, (var(--trace-end) - 0.99) * 999rem, 0.125rem) clamp(0rem, (var(--trace-end) - 0.99) * 999rem, 0.125rem) clamp(0rem, (0.01 - var(--trace-start)) * 999rem, 0.125rem)}:host .slider-container{width:100%}:host .slider-container .slider{width:100%}:host .slider-container .slider input[type=range]{width:100%}:host input[type=range].trace:not(.hide-trace-reference)::after{content:"";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(100% * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:50%;background-color:var(--theme-slider-thumb--background);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:50%;background-color:var(--theme-slider-thumb--background);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host{}:host .ticks{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none}:host .ticks circle.tick{--tick-size:6px;--tick-radius:calc(var(--tick-size) / 2);r:var(--tick-radius);fill:var(--tick-color);transform:translate(calc(var(--tick-value) * (100% - var(--thumb-size)) + var(--thumb-size) / 2), 50%)}:host .ticks .tick.tick-at-min{transform:translate(var(--tick-radius), 50%)}:host .ticks .tick.tick-at-max{transform:translate(calc(100% - var(--tick-radius)), 50%)}:host .ticks .tick.tick-active{fill:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:100%;top:50%;transform:translateY(-50%);left:0px;border-radius:2px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host(.invalid){--trace-color:var(--theme-slider-trace--background--invalid);--tick-color--active:var(--theme-slider-trace-marker--background--invalid)}:host(.invalid) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.invalid) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.invalid) input[type=range]:hover::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.invalid) input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.invalid) input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.invalid) input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.disabled){pointer-events:none;--track-color:var(--theme-slider-track--background--disabled);--trace-color:var(--theme-slider-trace--background--disabled);--tick-color:var(--theme-slider-track-marker--background--disabled);--tick-color--active:var(--theme-slider-trace-marker--background--disabled)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.warning){--trace-color:var(--theme-color-warning-40);--tick-color--active:var(--theme-color-warning)}:host(.warning) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-warning)}:host(.warning) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-warning)}:host(.info){--trace-color:var(--theme-color-info-40);--tick-color--active:var(--theme-color-info)}:host(.info) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-info)}:host(.info) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-info)}:host(.valid){--trace-color:var(--theme-color-success-40);--tick-color--active:var(--theme-color-success)}:host(.valid) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-success)}:host(.valid) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-success)}`;
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
@@ -48,55 +49,97 @@ const Slider = class {
             this.formInternals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.formInternals;
         }
-        /**
-         * 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.makeRef();
-        this.thumbRef = makeRef.makeRef();
-        this.tooltipRef = makeRef.makeRef();
     }
+    formInternals;
+    get hostElement() { return index.getElement(this); }
+    /**
+     * 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.makeRef();
+    thumbRef = makeRef.makeRef();
+    tooltipRef = makeRef.makeRef();
     get hasLabels() {
         return !!this.hostElement.querySelector('[slot="label-start"], [slot="label-end"]');
     }
@@ -107,16 +150,14 @@ const Slider = class {
         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;
@@ -194,7 +235,6 @@ const Slider = class {
         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;
@@ -205,16 +245,17 @@ const Slider = class {
             traceStart = valueInPercentage;
             traceEnd = traceReferenceInPercentage;
         }
-        return (index.h(index.Host, { key: '6957b2bb68891be643d1a1271fd550f0ba398b2d', class: {
+        return (index.h(index.Host, { key: '5eed909b2857b9bfbea41402736fe01d7ad9a434', class: {
                 disabled: this.disabled,
-                error: !!this.error,
                 invalid: this.isInvalid,
                 info: this.isInfo,
                 valid: this.isValid,
                 warning: this.isWarning,
-            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, index.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 }, index.h("div", { key: 'a7076b2f4940e1c4d83b874eb06889027f3531b9', class: "slider-container" }, index.h("div", { key: '4d56ffb868ce60f3b7e47d803ec6ecffb493489d', class: "slider" }, index.h("div", { key: 'ba33818b7f9ce81576136f9e95b5fe7ba88467e7', class: "track" }, index.h("div", { key: 'b5ce5c8c334909d11875ab9ae2b36f719c1244a8', ref: this.thumbRef, class: "thumb", style: {
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, index.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 }, index.h("div", { key: 'c67536334750605b342859dbf6c38abcc730c6a6', class: "slider-container" }, index.h("div", { key: '33649db602e05ea4f2496c6b7b5a3620eca81a49', class: "slider" }, index.h("div", { key: 'f282b195ad420d036e90b4cc45c59fe9232b5919', class: "track" }, index.h("div", { key: 'f68211f2d377f2741eaedcdc4ca7fcbcd0f1bbfb', ref: this.thumbRef, class: "thumb", style: {
                 left: `calc(${valueInPercentage} * (100% - 1rem))`,
-            } }), index.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) => {
+            } }), index.h("svg", { key: '50576c072bbd33c8689017d7f67b83694d73516c', 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 (index.h("circle", { class: {
                     tick: true,
@@ -224,7 +265,7 @@ const Slider = class {
                 }, cx: "0", cy: "0", style: {
                     '--tick-value': `${markerPosition}`,
                 } }));
-        }))), index.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: () => {
+        }))), index.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: () => {
                 this.showTooltip = true;
                 this.touched = true;
             }, onBlur: () => {
@@ -240,12 +281,11 @@ const Slider = class {
                 '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)), index.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 }), index.h("ix-tooltip", { key: '740ea0d7cf7a200c7db7ea8ac70fd2537b84b4a5', ref: this.tooltipRef, class: {
                 'hide-tooltip': !this.showTooltip,
-            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), this.hasLabels && (index.h("div", { key: 'e06b2afd4e3521cf34095a5243671b0d24b59695', class: "label" }, index.h("div", { key: '653916ebdc36874fb412b1481c13fe7a52eddccf' }, index.h("slot", { key: '0d73fd36d946b79bb84aa41a5b7973a4d986502c', name: "label-start" })), index.h("div", { key: '9b0938207951dceab28fa89238bc43d28b5e9e3b' }, index.h("slot", { key: 'fb32e79050fb8aa5eb83cde26971b5cafad4f42f', name: "label-end" })))), this.error ? (index.h("ix-typography", { textColor: "alarm" }, this.error)) : null))));
+            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), this.hasLabels && (index.h("div", { key: 'd5264eaabacd9f667600df1f0cdf8e89b24d7730', class: "label" }, index.h("div", { key: '4ac2ebda49543e04e619452bd59c3f30a0404879' }, index.h("slot", { key: 'dcc9ecd173f1d49133e1070b72b34b8485cc9860', name: "label-start" })), index.h("div", { key: '022869a430a0644e24932553a321da5fa8dd4df2' }, index.h("slot", { key: '4da9fdcb1d570657a3796a32d0925025e16dc4b7', name: "label-end" }))))))));
     }
     static get formAssociated() { return true; }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "showTooltip": [{
                 "onShowTooltipChange": 0

package/dist/cjs/ix-split-button.cjs.entry.js

@@ -1,52 +1,98 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var index$1 = require('./index-DIYO-Liy.js');
-var makeRef = require('./make-ref-BaH6_YJk.js');
+var index = require('./index-DnclGKUw.js');
+var index$1 = require('./index-CwJ-mkQd.js');
+var focusProxy = require('./focus-proxy-CjxFZupW.js');
+var component = require('./component-DgA9FH-W.js');
+var ariaActivedescendant_mixin = require('./aria-activedescendant.mixin-_lb0Xz2S.js');
+require('./focus-utilities-5SZMxJg4.js');
+require('./shadow-dom-BL5F7RFW.js');
 
-const splitButtonCss = () => `.btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}: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}`;
+const splitButtonCss = () => `.btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{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,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}: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}`;
 
-const SplitButton = class {
+const SplitButton = class extends index.Mixin(...component.DefaultMixins, ariaActivedescendant_mixin.AriaActiveDescendantMixin) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
         this.buttonClick = index.createEvent(this, "buttonClick", 7);
-        /**
-         * Color variant of button
-         */
-        this.variant = 'primary';
-        /**
-         * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
-         */
-        this.closeBehavior = 'both';
-        /**
-         * Disabled
-         */
-        this.disabled = false;
-        /**
-         * Disables only the main button while keeping the dropdown trigger enabled
-         *
-         *  @since 4.1.0
-         */
-        this.disableButton = false;
-        /**
-         * Disables only the dropdown trigger while keeping the main button enabled
-         *
-         * @since 4.1.0
-         */
-        this.disableDropdownButton = false;
-        /**
-         * Placement of the dropdown
-         */
-        this.placement = 'bottom-start';
-        /**
-         * Enable Popover API rendering for dropdown.
-         *
-         * @default false
-         * @since 4.3.0
-         */
-        this.enableTopLayer = false;
-        this.toggle = false;
-        this.triggerElementRef = makeRef.makeRef();
+    }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Color variant of button
+     */
+    variant = 'primary';
+    /**
+     * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
+     */
+    closeBehavior = 'both';
+    /**
+     * Button label
+     */
+    label;
+    /**
+     * ARIA label for the button (use if no label and icon button)
+     *
+     * @since 3.2.0
+     */
+    ariaLabelButton;
+    /**
+     * Button icon
+     */
+    icon;
+    /**
+     * Icon of the button on the right
+     */
+    splitIcon;
+    /**
+     * ARIA label for the split icon button
+     *
+     * @since 3.2.0
+     */
+    ariaLabelSplitIconButton;
+    /**
+     * Disabled
+     */
+    disabled = false;
+    /**
+     * Disables only the main button while keeping the dropdown trigger enabled
+     *
+     *  @since 4.1.0
+     */
+    disableButton = false;
+    /**
+     * Disables only the dropdown trigger while keeping the main button enabled
+     *
+     * @since 4.1.0
+     */
+    disableDropdownButton = false;
+    /**
+     * Enable Popover API rendering for dropdown.
+     *
+     * @default false
+     * @since 4.3.0
+     */
+    enableTopLayer = false;
+    /**
+     * Button clicked
+     */
+    buttonClick;
+    showDropdown = false;
+    internalId = 'ix-split-button';
+    observeChildrenChange;
+    componentDidLoad() {
+        super.componentDidLoad();
+        this.observeChildrenChange = new MutationObserver(() => {
+            this.updateProxyList();
+        });
+        this.observeChildrenChange.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+        });
+        this.updateProxyList();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.observeChildrenChange?.disconnect();
     }
     get isDisabledButton() {
         return this.disabled || this.disableButton;
@@ -54,19 +100,43 @@ const SplitButton = class {
     get isDisabledIcon() {
         return this.disabled || this.disableDropdownButton;
     }
+    getControllingAriaElement() {
+        return this.hostElement.shadowRoot.querySelector(`.right-button`);
+    }
+    isAriaActiveDescendantActive() {
+        return this.showDropdown;
+    }
+    getAriaActiveDescendantProxyItemId() {
+        return focusProxy.PROXY_LISTITEM_ID_SUFFIX;
+    }
+    updateProxyList() {
+        const items = this.hostElement.querySelectorAll('ix-dropdown-item');
+        const proxyList = this.hostElement.shadowRoot.querySelector('.proxy-list');
+        if (!proxyList) {
+            return;
+        }
+        focusProxy.updateFocusProxyList(proxyList, Array.from(items), (item, proxyElement) => {
+            proxyElement.role = 'menuitem';
+            proxyElement.innerText = item.label ?? item.textContent ?? '';
+            proxyElement.ariaLabel =
+                item.ariaLabel ?? item.label ?? item.textContent ?? '';
+        });
+    }
     render() {
-        var _a;
         const hasOutline = this.variant.toLocaleLowerCase().includes('secondary');
         const baseAttributes = {
             variant: this.variant,
         };
-        const buttonAttributes = Object.assign(Object.assign({}, baseAttributes), { disabled: this.isDisabledButton, class: {
+        const buttonAttributes = {
+            ...baseAttributes,
+            disabled: this.isDisabledButton,
+            class: {
+                'left-button': true,
                 'left-button-border': !hasOutline,
-            } });
-        const dropdownButtonAttributes = Object.assign(Object.assign({}, baseAttributes), { disabled: this.isDisabledIcon });
-        return (index.h(index.Host, { key: '3c3430ad17d7f4bb877b57b21bfa8e7ec15196dc' }, index.h("div", { key: 'cd36cc825c64a11619a0df7d1ead9eae0374bae8', class: { 'btn-group': true, 'middle-gap': !hasOutline } }, this.label ? (index.h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }), this.label)) : (index.h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }))), index.h("ix-icon-button", Object.assign({ key: '1846ce902e479fc9b41e5d840f3f2e8d79d99f32' }, dropdownButtonAttributes, { ref: this.triggerElementRef, class: 'anchor', icon: (_a = this.splitIcon) !== null && _a !== void 0 ? _a : index$1.iconContextMenu, "aria-label": this.ariaLabelSplitIconButton }))), index.h("ix-dropdown", { key: 'f9a05a2ae981731cd71bf4735bf956d5e5092037', closeBehavior: this.closeBehavior, trigger: this.triggerElementRef.waitForCurrent(), enableTopLayer: this.enableTopLayer }, index.h("slot", { key: 'fda03d1edd3588a156186a52be1a6ee911bb2c49' }))));
+            },
+        };
+        return (index.h(index.Host, { key: '1b867c8b33fe52356804497afd93bb1bf26afb69' }, this.label ? (index.h("ix-button", { ...buttonAttributes, icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }, this.label)) : (index.h("ix-icon-button", { ...buttonAttributes, icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton })), index.h("ix-dropdown-button", { key: '9b2400c1a1b84369af89a9709e36fc743af4a8e5', class: "right-button", "aria-label": this.ariaLabelSplitIconButton, icon: this.splitIcon ?? index$1.iconContextMenu, enableTopLayer: this.enableTopLayer, closeBehavior: this.closeBehavior, disabled: this.isDisabledIcon, suppressAriaActiveDescendant: true, onShowChanged: ({ detail }) => (this.showDropdown = detail), "aria-controls": `${this.internalId}-${focusProxy.PROXY_LIST_ID_SUFFIX}` }, index.h(focusProxy.FocusProxy, { key: 'b2e0e0547df9f6f19ed110629189bfc27a8c1876', hostId: this.internalId, otherProps: {} }), index.h("slot", { key: 'b54b7d8c86e66b60f9e71f63965561a84c437707' }))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 SplitButton.style = splitButtonCss();
 

package/dist/cjs/ix-tab-panel.cjs.entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var index = require('./index-DnclGKUw.js');
+var component = require('./component-DgA9FH-W.js');
+var id_mixin = require('./id.mixin-DINDQztK.js');
+require('./focus-utilities-5SZMxJg4.js');
+require('./shadow-dom-BL5F7RFW.js');
+
+const tabPanelCss = () => `:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(:focus-visible){outline:none}`;
+
+const TabPanel = class extends index.Mixin(...component.DefaultMixins, id_mixin.ComponentIdMixin) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+    }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Key of the tab panel, has to be the same as the tabKey of the corresponding ix-tab-item
+     */
+    tabKey;
+    connectedCallback() {
+        this.hostElement.hidden = true;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e2288e5376cca74e2ef8323f4d11928fbad0be76', role: "tabpanel", id: this.getHostElementId() }, index.h("slot", { key: '67c9634adbe0a40525e6b6ca7eb2ec774ad49b37' })));
+    }
+};
+TabPanel.style = tabPanelCss();
+
+exports.ix_tab_panel = TabPanel;