@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,362 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CY4s4b6R.js';
+import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
+import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';
+
+const sliderCss = () => `:host{display:block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-family:var(--ifx-font-family);font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#bfbbbb}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0a8276 0%, #0a8276 var(--value-percent, 0%), #eeeded var(--value-percent, 0%), #eeeded 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]:focus-visible{outline:2px solid #0a8276;outline-offset:4px}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0a8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#0a8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665c}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534b}.ifx-slider input[type=range]:disabled{background:#bfbbbb;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#bfbbbb;border-radius:50%;cursor:default}.ifx-slider.readOnly input[type=range]{pointer-events:none;background:linear-gradient(to right, #575352 50%, #bfbbbb var(--value-percent, 0%), #eeeded var(--value-percent, 0%), #eeeded 100%)}.ifx-slider.readOnly input[type=range]::-webkit-slider-thumb{background:#bfbbbb}.ifx-slider .range-slider__wrapper{position:relative;width:100%;height:4px;display:flex;align-items:center;justify-content:center;margin:0px 2px;background:linear-gradient(to right, #eeeded 0%, #eeeded var(--min-value-percent, 100%), #0a8276 var(--min-value-percent, 100%), #0a8276 var(--max-value-percent, 100%), #eeeded var(--max-value-percent, 100%), #eeeded 100%)}.ifx-slider .range-slider__wrapper:has(input[type=range]:disabled){background:#bfbbbb}.ifx-slider .range-slider__wrapper input[type=range]{position:absolute;pointer-events:none;background:none}.ifx-slider .range-slider__wrapper input[type=range]:focus-visible{outline:2px solid #0a8276;outline-offset:4px}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-thumb{-webkit-appearance:none;appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-ms-thumb{-webkit-appearance:none;appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;appearance:none;border:none;background:none;width:100%}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-track{-webkit-appearance:none;appearance:none;border:none;background:none;width:100%}`;
+
+const IfxSlider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ifxChange = createEvent(this, "ifxChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    /** Minimum value allowed for the slider. */
+    min = 0;
+    /** Maximum value allowed for the slider. */
+    max = 100;
+    /** Increment step when changing the value. */
+    step = 1;
+    /** Current value for a single-handle slider. */
+    value;
+    /** Initial value of the left handle for a double slider. */
+    minValueHandle;
+    /** Initial value of the right handle for a double slider. */
+    maxValueHandle;
+    /** If true, the slider is disabled and not interactive. */
+    disabled = false;
+    /** If true, the slider is read-only. */
+    readOnly = false;
+    /** If true, shows the current value as a percentage. */
+    showPercentage = false;
+    /** Optional icon displayed on the left side of the slider. */
+    leftIcon;
+    /** Optional icon displayed on the right side of the slider. */
+    rightIcon;
+    /** Optional text label shown on the left side of the slider. */
+    leftText;
+    /** Optional text label shown on the right side of the slider. */
+    rightText;
+    /** Slider type: single handle or double handle (range). */
+    type = "single";
+    /** Accessible label for screen readers. */
+    ariaLabelText;
+    /** Optional name used when submitting the slider in a form. */
+    name = "";
+    internalValue = 0;
+    percentage = 0;
+    internalMinValue = 0;
+    internalMaxValue = 100;
+    /** Fired when the slider value (or values) change. */
+    ifxChange;
+    get el() { return getElement(this); }
+    internals;
+    inputRef;
+    minInputRef;
+    maxInputRef;
+    hasInitializedSingleValue = false;
+    initialInternalValue = 0;
+    initialInternalMinValue = 0;
+    initialInternalMaxValue = 0;
+    getSafeMin() {
+        const parsedMin = Number(this.min);
+        return Number.isFinite(parsedMin) ? parsedMin : 0;
+    }
+    getSafeMax() {
+        const parsedMax = Number(this.max);
+        return Number.isFinite(parsedMax) ? parsedMax : this.getSafeMin();
+    }
+    normalizeSingleValue(value) {
+        const numericValue = Number(value);
+        const safeMin = this.getSafeMin();
+        const safeMax = this.getSafeMax();
+        if (!Number.isFinite(numericValue)) {
+            return safeMin;
+        }
+        return Math.max(safeMin, Math.min(safeMax, numericValue));
+    }
+    getSynchronizedSingleValue() {
+        const hasExternalValue = Number.isFinite(Number(this.value));
+        const sourceValue = hasExternalValue ? this.value : this.internalValue;
+        return this.normalizeSingleValue(sourceValue);
+    }
+    valueChanged(newValue) {
+        this.internalValue = this.normalizeSingleValue(newValue);
+        this.value = this.internalValue;
+        this.calculatePercentageValue();
+        this.updateValuePercent();
+        this.updateFormValue();
+    }
+    minValueChanged(newValue) {
+        this.internalMinValue = newValue;
+        this.updateValuePercent();
+        this.updateFormValue();
+    }
+    maxValueChanged(newValue) {
+        this.internalMaxValue = newValue;
+        this.updateValuePercent();
+        this.updateFormValue();
+    }
+    minChanged() {
+        this.reconcileBoundsChange();
+    }
+    maxChanged() {
+        this.reconcileBoundsChange();
+    }
+    reconcileBoundsChange() {
+        if (this.type !== "double" && !this.hasInitializedSingleValue) {
+            return;
+        }
+        this.internalValue = this.getSynchronizedSingleValue();
+        this.value = this.internalValue;
+        this.calculatePercentageValue();
+        this.updateValuePercent();
+        this.updateFormValue();
+    }
+    stepChanged() {
+        this.updateValuePercent();
+    }
+    updateFormValue() {
+        if (this.type === "double") {
+            this.internals.setFormValue(JSON.stringify({
+                min: this.internalMinValue,
+                max: this.internalMaxValue,
+            }));
+            return;
+        }
+        this.internals.setFormValue(String(this.internalValue));
+    }
+    getRangeSliderWrapper() {
+        const rangeSliderWrapper = this.el.shadowRoot.querySelector(".range-slider__wrapper");
+        return rangeSliderWrapper;
+    }
+    handleInputChangeOfRangeSlider(event) {
+        const target = event.target;
+        if (parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <=
+            0) {
+            if (target.id === "max-slider") {
+                this.maxInputRef.value = this.minInputRef.value;
+            }
+            else {
+                this.minInputRef.value = this.maxInputRef.value;
+            }
+        }
+        if (target.id === "max-slider") {
+            this.internalMaxValue = parseFloat(this.maxInputRef.value);
+        }
+        else {
+            this.internalMinValue = parseFloat(this.minInputRef.value);
+        }
+        this.ifxChange.emit({
+            minVal: this.internalMinValue,
+            maxVal: this.internalMaxValue,
+        });
+        this.updateFormValue();
+        this.updateValuePercent();
+        this.updateZIndexIfRangeSlider(target.id);
+    }
+    handleOnMouseLeaveOfRangeSlider(event) {
+        const target = event.target;
+        const sliderWrapper = this.getRangeSliderWrapper();
+        if (target.id === "max-slider") {
+            sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);
+        }
+        else {
+            sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);
+        }
+    }
+    calculatePercentageValue() {
+        const parsedInternalValue = Number(this.internalValue);
+        const safeMin = this.getSafeMin();
+        const safeMax = this.getSafeMax();
+        const den = safeMax - safeMin;
+        if (den <= 0 || !Number.isFinite(parsedInternalValue)) {
+            this.percentage = 0;
+            return;
+        }
+        const num = (parsedInternalValue - safeMin) * 1.0;
+        this.percentage = +parseFloat(String((num / den) * 100)).toFixed(2);
+    }
+    handleInputChange(event) {
+        const target = event.target;
+        this.internalValue = this.normalizeSingleValue(target.value);
+        this.value = this.internalValue;
+        this.ifxChange.emit(this.internalValue);
+        this.updateFormValue();
+        this.calculatePercentageValue();
+        this.updateValuePercent();
+    }
+    roundToValidStep(value) {
+        const safeMin = this.getSafeMin();
+        const safeStep = Number.isFinite(Number(this.step)) && Number(this.step) > 0 ? Number(this.step) : 1;
+        const relativeValue = value - safeMin;
+        const remainder = relativeValue % safeStep;
+        if (remainder >= safeStep / 2) {
+            return safeMin + relativeValue + (safeStep - remainder);
+        }
+        else {
+            return safeMin + relativeValue - remainder;
+        }
+    }
+    updateValuePercent() {
+        const safeMin = this.getSafeMin();
+        const safeMax = this.getSafeMax();
+        const den = safeMax - safeMin;
+        if (den <= 0) {
+            if (this.inputRef) {
+                this.inputRef.style.setProperty("--value-percent", "0%");
+            }
+            return;
+        }
+        if (this.type === "double") {
+            if (this.minInputRef) {
+                const num = (this.roundToValidStep(this.internalMinValue) - safeMin) * 1.0;
+                const minPercent = (num / den) * 100;
+                this.minInputRef.parentElement.style.setProperty("--min-value-percent", `${minPercent}%`);
+            }
+            if (this.maxInputRef) {
+                const num = (this.roundToValidStep(this.internalMaxValue) - safeMin) * 1.0;
+                const maxPercent = (num / den) * 100;
+                this.maxInputRef.parentElement.style.setProperty("--max-value-percent", `${maxPercent}%`);
+            }
+        }
+        else {
+            if (this.inputRef) {
+                const num = (this.roundToValidStep(this.internalValue) - safeMin) * 1.0;
+                const percentage = (num / den) * 100;
+                this.inputRef.style.setProperty("--value-percent", `${percentage}%`);
+            }
+        }
+    }
+    // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping
+    // if min and max thumbs take the same value.
+    updateZIndexIfRangeSlider(targetId = "") {
+        if (targetId === "max-slider") {
+            this.minInputRef.style.zIndex = "1";
+            this.maxInputRef.style.zIndex = "2";
+        }
+        else {
+            this.minInputRef.style.zIndex = "2";
+            this.maxInputRef.style.zIndex = "1";
+        }
+    }
+    componentWillLoad() {
+        const safeMin = this.getSafeMin();
+        const safeMax = this.getSafeMax();
+        const midPoint = (safeMax - safeMin) / 2 + safeMin;
+        if (this.value === undefined || this.value === null) {
+            this.internalValue = this.normalizeSingleValue(midPoint);
+            this.value = this.internalValue;
+        }
+        else {
+            this.internalValue = this.normalizeSingleValue(this.value);
+            this.value = this.internalValue;
+        }
+        this.calculatePercentageValue();
+        if (this.minValueHandle !== undefined)
+            this.internalMinValue = this.minValueHandle;
+        else
+            this.internalMinValue = this.min;
+        if (this.maxValueHandle !== undefined)
+            this.internalMaxValue = this.maxValueHandle;
+        else
+            this.internalMaxValue = this.max;
+        this.initialInternalValue = this.internalValue;
+        this.initialInternalMinValue = this.internalMinValue;
+        this.initialInternalMaxValue = this.internalMaxValue;
+        this.hasInitializedSingleValue = true;
+        this.updateFormValue();
+    }
+    formResetCallback() {
+        this.internalValue = this.initialInternalValue;
+        this.internalMinValue = this.initialInternalMinValue;
+        this.internalMaxValue = this.initialInternalMaxValue;
+        this.calculatePercentageValue();
+        this.updateValuePercent();
+        this.updateFormValue();
+    }
+    formStateRestoreCallback(state, _mode) {
+        if (!state) {
+            return;
+        }
+        if (this.type === "double") {
+            try {
+                const parsedState = JSON.parse(state);
+                if (typeof parsedState.min === "number") {
+                    this.internalMinValue = parsedState.min;
+                }
+                if (typeof parsedState.max === "number") {
+                    this.internalMaxValue = parsedState.max;
+                }
+            }
+            catch {
+                // Ignore invalid state payloads restored by the browser.
+            }
+        }
+        else {
+            const parsedState = Number(state);
+            if (!Number.isNaN(parsedState)) {
+                this.internalValue = parsedState;
+                this.calculatePercentageValue();
+            }
+        }
+        this.updateValuePercent();
+        this.updateFormValue();
+    }
+    syncSingleValueState() {
+        if (this.type === "double") {
+            return false;
+        }
+        const normalizedValue = this.getSynchronizedSingleValue();
+        if (normalizedValue === this.internalValue) {
+            return false;
+        }
+        this.internalValue = normalizedValue;
+        this.value = normalizedValue;
+        this.calculatePercentageValue();
+        this.updateFormValue();
+        return true;
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-slider", await framework);
+        }
+        // Angular/ngModel can set `value` before custom-element upgrade.
+        // Re-sync once after load so internal state and displayed percentage match.
+        this.syncSingleValueState();
+        this.updateValuePercent();
+    }
+    render() {
+        return (h("div", { key: '69b0ba79ae35a00da66a06162eabf542ead36a09', class: `ifx-slider${this.readOnly ? ' readOnly' : this.disabled ? ' disabled' : ''}` }, this.leftText && h("span", { key: '4919cb4c735dfce9e1b7f2bade160afd5996af74', class: `left-text${this.readOnly || this.disabled ? ' disabled' : ''}` }, this.leftText), this.leftIcon && (h("ifx-icon", { key: '518d93b888d9059f8ea1bd8867d986300f0655e9', icon: this.leftIcon, class: `left-icon${this.readOnly || this.disabled ? " disabled" : ""}` })), this.type !== "double" ? (h("input", { type: "range", min: this.min, max: this.max, step: this.step, value: this.internalValue, disabled: this.readOnly || this.disabled, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event), "aria-label": "Slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.internalValue, "aria-disabled": this.readOnly || this.disabled ? "true" : "false", "aria-readonly": this.readOnly ? "true" : undefined })) : (h("div", { class: "range-slider__wrapper", "aria-label": this.ariaLabelText, role: "group" }, h("input", { id: "min-slider", type: "range", min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.readOnly || this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event), "aria-label": "Minimum value slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.internalMinValue, "aria-disabled": this.readOnly || this.disabled ? "true" : "false" }), h("input", { id: "max-slider", type: "range", min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.readOnly || this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event), "aria-label": "Maximum value slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.internalMaxValue, "aria-disabled": this.readOnly || this.disabled ? "true" : "false" }))), this.rightIcon && (h("ifx-icon", { key: 'f995442bfb4040b47b98d743af61363dbedc41d9', icon: this.rightIcon, class: `right-icon${this.readOnly || this.disabled ? " disabled" : ""}` })), this.rightText && (h("span", { key: 'c2d38e524ec44e35bea1811fa9ede43c1c813282', class: `right-text${this.readOnly || this.disabled ? " disabled" : ""}` }, this.rightText)), this.showPercentage && this.type !== "double" && (h("span", { key: '94155c2a4d2b14a9ec8e826a9fc9710d2b5ac228', class: `percentage-display${this.readOnly || this.disabled ? " disabled" : ""}` }, this.percentage, "%"))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }],
+        "minValueHandle": [{
+                "minValueChanged": 0
+            }],
+        "maxValueHandle": [{
+                "maxValueChanged": 0
+            }],
+        "min": [{
+                "minChanged": 0
+            }],
+        "max": [{
+                "maxChanged": 0
+            }],
+        "step": [{
+                "stepChanged": 0
+            }]
+    }; }
+};
+IfxSlider.style = sliderCss();
+
+export { IfxSlider as ifx_slider };

package/dist/esm/ifx-spinner.entry.js

@@ -0,0 +1,51 @@
+import { r as registerInstance, a as getElement, h } from './index-CY4s4b6R.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
+import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';
+
+const spinnerCss = () => `:host{display:inline-block}.spinner{position:relative}.spinner.m{width:40px;height:40px}.spinner.s{width:24px;height:24px}.border{box-sizing:border-box;position:absolute;width:100%;height:100%;border:4px solid transparent;border-top-color:#0a8276;border-left-color:#0a8276;border-right-color:#0a8276;border-top-left-radius:1px;border-top-right-radius:1px;border-radius:50%;animation:spin 2s linear infinite}.border.inverted{border-top-color:#ffffff;border-left-color:#ffffff;border-right-color:#ffffff}.semiconductor{width:100%;height:100%;animation:spin 2s linear infinite}.semiconductor svg{fill:#0a8276}.semiconductor.inverted svg{fill:#ffffff}.semiconductor.s svg{width:24px;height:24px}.semiconductor.m svg{width:40px;height:40px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`;
+
+const Spinner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Visual size of the spinner.
+     * @default "m"
+     */
+    size = "m";
+    /**
+     * Spinner style variant.
+     * @default "default"
+     */
+    variant = "default";
+    /**
+     * Renders the spinner in inverted color for dark backgrounds.
+     * @default false
+     */
+    inverted = false;
+    /**
+     * Accessible label announced by assistive technologies.
+     * @default null
+     */
+    ariaLabelText;
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-spinner", await framework);
+        }
+    }
+    render() {
+        return (h("div", { key: '4f82b1cb70a27997e75205640f40a0419a9123ab', role: "status", "aria-label": this.ariaLabelText || "Loading", class: this.getClassNames() }, h("div", { key: 'af98d8ecdd1bd3ea1a0d45ae2130e71a754d5fc3', class: `${this.variant !== "brand" ? "border" : ""} ${this.inverted ? "inverted" : ""}` }), this.variant === "brand" && (h("div", { key: '252f35fe1c3834f0720ee666c9afa73418e1aa75', class: `semiconductor ${this.inverted ? "inverted" : ""} ${this.getSizeClass()}` }, h("svg", { key: '8920a5b70f54a29660ff18d7ddd7bc4004e118f7', width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '006a15f426ea4bfb4e1dd19aa2e3aaf134ec1638', id: "spinner/conductor" }, h("path", { key: '60cb36fd03f0ca71407f725b0d17c577630dffb5', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" })))))));
+    }
+    getSizeClass() {
+        return this.size;
+    }
+    getClassNames() {
+        return classNames("spinner", this.getSizeClass());
+    }
+};
+Spinner.style = spinnerCss();
+
+export { Spinner as ifx_spinner };

package/dist/esm/ifx-status.entry.js

@@ -0,0 +1,34 @@
+import { r as registerInstance, a as getElement, h } from './index-CY4s4b6R.js';
+import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
+import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';
+
+const statusCss = () => `:host{display:inline-block}.container{display:flex;min-height:1.25em;align-items:center;padding:0 8px;border-radius:9999px;font-family:var(--ifx-font-family)}.container.no-border{padding:0}.container.border-engineering-100{border:1px solid #f7f7f7}.container.border-engineering-200{border:1px solid #eeeded}.container.border-engineering-300{border:1px solid #bfbbbb}.container.border-engineering-400{border:1px solid #8d8786}.container.border-engineering-500{border:1px solid #575352}.container.border-engineering-600{border:1px solid #3c3a39}.container.border-ocean-100{border:1px solid #dff4f3}.container.border-ocean-200{border:1px solid #b8deda}.container.border-ocean-300{border:1px solid #6cb4ad}.container.border-ocean-400{border:1px solid #3b9b91}.container.border-ocean-500{border:1px solid #0a8276}.container.border-ocean-600{border:1px solid #08665c}.container.border-ocean-700{border:1px solid #06534b}.container.border-red-500{border:1px solid #cd002f}.container.border-red-600{border:1px solid #a2001e}.container.border-red-700{border:1px solid #900021}.container.border-orange-500{border:1px solid #e16b25}.container.border-green-500{border:1px solid #4ca460}.container.border-lawn-400{border:1px solid #b9d257}.container.border-lawn-500{border:1px solid #9bba43}.container.border-lawn-700{border:1px solid #3c6c0f}.container.border-berry-400{border:1px solid #be3283}.container.border-berry-500{border:1px solid #9c216e}.container.border-sun-400{border:1px solid #ff9737}.container.border-sun-500{border:1px solid #f97414}.container.border-sand-400{border:1px solid #fbe273}.container.border-sand-500{border:1px solid #fcd442}.text{margin:0;padding-left:4px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:inline;color:#1d1d1d}.dot{display:inline-block;width:8px;height:8px;border-radius:9999px}.dot.engineering-100{background-color:#f7f7f7}.dot.engineering-200{background-color:#eeeded}.dot.engineering-300{background-color:#bfbbbb}.dot.engineering-400{background-color:#8d8786}.dot.engineering-500{background-color:#575352}.dot.engineering-600{background-color:#3c3a39}.dot.ocean-100{background-color:#dff4f3}.dot.ocean-200{background-color:#b8deda}.dot.ocean-300{background-color:#6cb4ad}.dot.ocean-400{background-color:#3b9b91}.dot.ocean-500{background-color:#0a8276}.dot.ocean-600{background-color:#08665c}.dot.ocean-700{background-color:#06534b}.dot.red-500{background-color:#cd002f}.dot.red-600{background-color:#a2001e}.dot.red-700{background-color:#900021}.dot.orange-500{background-color:#e16b25}.dot.green-500{background-color:#4ca460}.dot.lawn-400{background-color:#b9d257}.dot.lawn-500{background-color:#9bba43}.dot.lawn-700{background-color:#3c6c0f}.dot.berry-400{background-color:#be3283}.dot.berry-500{background-color:#9c216e}.dot.sun-400{background-color:#ff9737}.dot.sun-500{background-color:#f97414}.dot.sand-400{background-color:#fbe273}.dot.sand-500{background-color:#fcd442}`;
+
+const Status = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Text label displayed inside the status component. */
+    label;
+    /** If true, shows a border around the status. */
+    border = false;
+    /** Color token used for the status (e.g. orange-500). */
+    color = "orange-500";
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-status", await framework);
+        }
+    }
+    render() {
+        const effectiveColor = this.color?.trim() ? this.color : "orange-500";
+        const containerClass = this.border
+            ? `container border-${effectiveColor}`
+            : "container no-border";
+        return (h("div", { key: 'b9b200e59ded91df57552850600ddceea5351ff8', role: "status", class: containerClass }, h("span", { key: '4d23f0e614f6c36c81fb132d2ab2e62775cbe483', class: `dot ${effectiveColor}` }), h("p", { key: 'd6fc99d444e7652d51327949c7028fbcd69c163f', class: "text" }, this.label)));
+    }
+};
+Status.style = statusCss();
+
+export { Status as ifx_status };

package/dist/esm/ifx-step.entry.js

@@ -0,0 +1,102 @@
+import { r as registerInstance, h } from './index-CY4s4b6R.js';
+
+const stepCss = () => `.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem "Source Sans 3";font-family:var(--ifx-font-family)}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start;color:#575352}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#bfbbbb;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem "Source Sans 3";font-family:var(--ifx-font-family)}.step-wrapper .step-label:focus{outline:2px solid #0a8276;outline-offset:2px}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem "Source Sans 3";font-family:var(--ifx-font-family)}.step-wrapper .step-label :hover{color:#bfbbbb}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0a8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#bfbbbb}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1d1d1d}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665c}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#bfbbbb}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#bfbbbb}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0a8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#bfbbbb}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1d1d1d}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){margin:auto;color:#cd002f}.step-wrapper.error:not(.active) .step-label{color:#cd002f}.step-wrapper.error:not(.active) .step-label :hover{color:#0a8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665c}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#bfbbbb}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665c}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#bfbbbb;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.error-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#bfbbbb}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}`;
+
+const Step = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** If true, marks this step as completed. */
+    complete = false;
+    /** If true, this step is disabled and not clickable. */
+    disabled = false;
+    /** If true, this step is in an error state. */
+    error = false;
+    /** Whether this is the last step in the stepper. */
+    lastStep = false;
+    /** Numeric identifier / position of this step. */
+    stepId = 1;
+    /** Shared configuration for the whole stepper (active step, layout, etc.). */
+    stepperState = {
+        activeStep: 1,
+        showStepNumber: false,
+        variant: "default",
+        indicatorPosition: "left",
+    };
+    active;
+    clickable = false;
+    onStepChange(event) {
+        const previousActiveStep = event.detail.previousActiveStep;
+        if (previousActiveStep === this.stepId && this.error) {
+            this.clickable = true;
+        }
+    }
+    updateCurrentStep(newStepperState) {
+        this.active = newStepperState.activeStep === this.stepId;
+    }
+    updateErrorState() {
+        if (this.active) {
+            this.error = false;
+        }
+    }
+    handleStepClick() {
+        if (!this.disabled &&
+            this.stepperState.variant !== "compact" &&
+            (this.clickable || this.complete)) {
+            this.stepperState.setActiveStep(this.stepId, true);
+        }
+    }
+    handleStepKeyDown(event) {
+        if (!this.disabled &&
+            this.stepperState.variant !== "compact" &&
+            (this.clickable || this.complete) &&
+            event.key === "Enter") {
+            this.stepperState.setActiveStep(this.stepId, true);
+        }
+    }
+    stopOnClickPropogation(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+        }
+    }
+    render() {
+        return (h("div", { key: '4b21a6a60e0acff717d0193c33ee220e80d59e46', "aria-current": this.active ? "step" : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? "first-step" : ""} 
+                        ${this.error ? "error" : ""}
+                        ${this.stepperState.variant}
+                        ${this.complete ? "complete" : ""}
+                        ${this.lastStep ? "last-step" : ""}
+                        indicator-${this.stepperState.indicatorPosition}
+                        ${this.active ? "active" : ""}
+                        ${this.clickable ? "clickable" : ""}
+                        ${this.disabled ? "disabled" : ""}` }, h("div", { key: '13205aceb9c48e16370b422b29e20516b8926f4a', class: "step-icon-wrapper" }, this.stepperState.variant !== "compact" && (h("span", { key: '75078c39885e4dfc428c752204c72719e5dac207', class: "step-connector-l" })), this.stepperState.variant !== "compact" &&
+            (!this.error || (this.error && this.active)) && (h("div", { key: 'a3b850cdf458d6ecd9905bbda5dd233a492512fb', class: "step-icon" }, this.stepperState.showStepNumber &&
+            !this.complete &&
+            !this.active
+            ? this.stepId
+            : "", this.complete && !this.active && (h("ifx-icon", { key: 'f167d52a1d249e080d802b6da82cb619f3cef1c4', icon: "check16" })), this.active && h("span", { key: '94e6de6567e9cedf5f5a4d1f1cf26885a1e5a425', class: "active-indic" }))), this.stepperState.variant !== "compact" &&
+            this.error &&
+            !this.active && (h("ifx-icon", { key: '20e984db600185b5f468ee36b26a9f5c856b00df', class: "error-icon", icon: "warningF16" })), this.stepperState.variant !== "compact" && (h("span", { key: 'c97fcca3d6900f44102710d226aaaa9fa89d0ace', class: `step-connector-r ${this.active ? "active" : ""}` }))), 
+        /* Step labels */
+        (this.stepperState.variant !== "compact" ||
+            (this.stepperState.variant === "compact" &&
+                (this.active ||
+                    this.stepId === this.stepperState.activeStep + 1))) && (h("div", { key: '8bfac18ed604f6baf2ae701ff94b4f11a9e2e43d', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === "compact" ? (this.active ? "curr-label" : "next-label") : ""}`, onClick: () => {
+                this.handleStepClick();
+            }, onKeyDown: (e) => {
+                this.handleStepKeyDown(e);
+            } }, this.stepperState.variant !== "compact" && h("slot", { key: '15243cf51b78c8fb9211595e8bb910bb323788b1' }), this.stepperState.variant === "compact" && !this.active
+            ? "Next: "
+            : "", this.stepperState.variant === "compact" && h("slot", { key: '055f64362486b847efb5753155dc76e3e658a8c2' })))));
+    }
+    static get watchers() { return {
+        "stepperState": [{
+                "updateCurrentStep": 0
+            }],
+        "active": [{
+                "updateErrorState": 0
+            }]
+    }; }
+};
+Step.style = stepCss();
+
+export { Step as ifx_step };