@siemens/ix 4.4.0 → 5.0.0

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

@@ -1,10 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BEPo7U1W.js';
-import { b as a11yHostAttributes } from './a11y-DAzBNVe7.js';
-import { O as OnListener } from './listener-DcAn-vyA.js';
-import { m as makeRef } from './make-ref-bcj7UEIC.js';
-import { H as HookValidationLifecycle } from './validation-CTBekLDe.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-Ca5WUunf.js';
+import { b as a11yHostAttributes } from './a11y-B5k8YVR0.js';
+import { O as OnListener } from './listener-Dk6XGheN.js';
+import { m as makeRef } from './make-ref-Djkc69iv.js';
+import { H as HookValidationLifecycle } from './validation-BT5aAuSO.js';
+import './index-XBTykBKS.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
@@ -46,55 +47,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();
-        this.thumbRef = makeRef();
-        this.tooltipRef = makeRef();
     }
+    formInternals;
+    get hostElement() { return 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();
+    thumbRef = makeRef();
+    tooltipRef = makeRef();
     get hasLabels() {
         return !!this.hostElement.querySelector('[slot="label-start"], [slot="label-end"]');
     }
@@ -105,16 +148,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;
@@ -192,7 +233,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;
@@ -203,16 +243,17 @@ const Slider = class {
             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,
@@ -222,7 +263,7 @@ const Slider = class {
                 }, 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: () => {
@@ -238,12 +279,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)), 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 formAssociated() { return true; }
-    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "showTooltip": [{
                 "onShowTooltipChange": 0

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

@@ -1,50 +1,96 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BEPo7U1W.js';
-import { H as iconContextMenu } from './index-BBzEV-f4.js';
-import { m as makeRef } from './make-ref-bcj7UEIC.js';
+import { M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-Ca5WUunf.js';
+import { M as iconContextMenu } from './index-Cl7fhG1I.js';
+import { P as PROXY_LISTITEM_ID_SUFFIX, u as updateFocusProxyList, a as PROXY_LIST_ID_SUFFIX, F as FocusProxy } from './focus-proxy-BgLEsVE2.js';
+import { D as DefaultMixins } from './component-Chfbghog.js';
+import { A as AriaActiveDescendantMixin } from './aria-activedescendant.mixin-CM-NUHTW.js';
+import './focus-utilities-DnaItyVQ.js';
+import './shadow-dom-BIe8Nw9M.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 Mixin(...DefaultMixins, AriaActiveDescendantMixin) {
     constructor(hostRef) {
+        super();
         registerInstance(this, hostRef);
         this.buttonClick = 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();
+    }
+    get hostElement() { return 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;
@@ -52,19 +98,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 PROXY_LISTITEM_ID_SUFFIX;
+    }
+    updateProxyList() {
+        const items = this.hostElement.querySelectorAll('ix-dropdown-item');
+        const proxyList = this.hostElement.shadowRoot.querySelector('.proxy-list');
+        if (!proxyList) {
+            return;
+        }
+        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 (h(Host, { key: '3c3430ad17d7f4bb877b57b21bfa8e7ec15196dc' }, h("div", { key: 'cd36cc825c64a11619a0df7d1ead9eae0374bae8', class: { 'btn-group': true, 'middle-gap': !hasOutline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }))), h("ix-icon-button", Object.assign({ key: '1846ce902e479fc9b41e5d840f3f2e8d79d99f32' }, dropdownButtonAttributes, { ref: this.triggerElementRef, class: 'anchor', icon: (_a = this.splitIcon) !== null && _a !== void 0 ? _a : iconContextMenu, "aria-label": this.ariaLabelSplitIconButton }))), h("ix-dropdown", { key: 'f9a05a2ae981731cd71bf4735bf956d5e5092037', closeBehavior: this.closeBehavior, trigger: this.triggerElementRef.waitForCurrent(), enableTopLayer: this.enableTopLayer }, h("slot", { key: 'fda03d1edd3588a156186a52be1a6ee911bb2c49' }))));
+            },
+        };
+        return (h(Host, { key: '4e8f8a306c40e3d6d5d95d86ecbc6f868cb19c1e' }, 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: '5dff21af4a06267188147000d77ead850d879339', 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: '667a0a407632385534a22e7e3e136a9cb29ba317', hostId: this.internalId, otherProps: {} }), h("slot", { key: 'e1b22d82b508dde989decb1a93047a8a78f31449' }))));
     }
-    get hostElement() { return getElement(this); }
 };
 SplitButton.style = splitButtonCss();
 

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

@@ -0,0 +1,28 @@
+import { M as Mixin, r as registerInstance, g as getElement, h, H as Host } from './index-Ca5WUunf.js';
+import { D as DefaultMixins } from './component-Chfbghog.js';
+import { C as ComponentIdMixin } from './id.mixin-CUbYLenp.js';
+import './focus-utilities-DnaItyVQ.js';
+import './shadow-dom-BIe8Nw9M.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 Mixin(...DefaultMixins, ComponentIdMixin) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+    }
+    get hostElement() { return 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 (h(Host, { key: '0e16dade71f0bf2b5cd3d68f69f6e0676ddf0875', role: "tabpanel", id: this.getHostElementId() }, h("slot", { key: '6ec679d5f971e120661ef540b1601f8ebc567a81' })));
+    }
+};
+TabPanel.style = tabPanelCss();
+
+export { TabPanel as ix_tab_panel };