@siemens/ix 4.4.0 → 5.0.0

package/dist/collection/components/utils/theme-switcher.js

@@ -7,163 +7,115 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { TypedEvent } from "./typed-event";
-const dataIxTheme = 'data-ix-theme';
-const dataIxColorSchema = 'data-ix-color-schema';
 class ThemeSwitcher {
-    hasVariantSuffix(className) {
-        return (className.endsWith(this.suffixDark) ||
-            className.endsWith(this.suffixLight));
+    mutationObserver;
+    mediaQueryList;
+    emitThemeChange(isMediaChange) {
+        this.themeChanged.emit({
+            theme: this.getTheme(),
+            colorSchema: this.getColorSchema(),
+            mode: this.getMode(),
+            isMediaChange,
+        });
     }
-    isThemeClass(className) {
-        return (className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className));
+    handleMediaQueryChange = () => {
+        this.emitThemeChange(true);
+    };
+    themeChanged = new TypedEvent();
+    /**
+     * @internal
+     */
+    getComputedStyleColorSchema() {
+        return this.getComputedStyleProperty('--theme-color-schema');
     }
-    getMode() {
+    getComputedStyleTheme() {
+        return this.getComputedStyleProperty('--theme-name');
+    }
+    getComputedStyleProperty(propertyName) {
+        const computedStyleValue = getComputedStyle(document.documentElement)
+            .getPropertyValue(propertyName)
+            .trim();
+        return computedStyleValue || undefined;
+    }
+    getColorSchema() {
         const colorSchema = document.documentElement.dataset.ixColorSchema;
-        if (colorSchema === 'dark' || colorSchema === 'light') {
+        if (colorSchema === 'dark' ||
+            colorSchema === 'light' ||
+            colorSchema === 'system') {
             return colorSchema;
         }
-        const bodyThemeClass = this.getThemeClassFromBody();
-        if (bodyThemeClass) {
-            return bodyThemeClass.endsWith(this.suffixDark) ? 'dark' : 'light';
+        const resolvedColorSchema = this.getComputedStyleColorSchema();
+        if (resolvedColorSchema === 'dark' ||
+            resolvedColorSchema === 'light' ||
+            resolvedColorSchema === 'system') {
+            return resolvedColorSchema;
         }
-        return getCurrentSystemAppearance();
+        return 'system';
     }
-    getThemeClassFromBody() {
-        if (!document.body) {
-            return undefined;
+    getMode() {
+        const colorSchema = this.getColorSchema();
+        if (colorSchema === 'dark' || colorSchema === 'light') {
+            return colorSchema;
         }
-        return (document.body.className || '')
-            .split(' ')
-            .find((cls) => cls && this.isThemeClass(cls));
+        return getCurrentSystemAppearance();
     }
-    setTheme(themeName, systemAppearance = false) {
-        if (this.isThemeClass(themeName)) {
-            this.replaceThemeClass(themeName);
-        }
-        else {
-            document.documentElement.dataset.ixTheme = themeName;
-        }
-        if (systemAppearance) {
-            this.setVariant();
+    setTheme(themeName, colorSchema) {
+        document.documentElement.dataset.ixTheme = themeName;
+        if (!colorSchema) {
+            this.setColorSchema(this.getColorSchema());
+            return;
         }
-    }
-    replaceThemeClass(themeName) {
-        const oldThemes = Array.from(document.documentElement.classList).filter((cls) => this.isThemeClass(cls));
-        document.documentElement.classList.remove(...oldThemes);
-        document.documentElement.classList.add(themeName);
+        this.setColorSchema(colorSchema);
     }
     toggleMode() {
-        if (document.documentElement.hasAttribute(dataIxColorSchema)) {
-            const currentSchema = document.documentElement.dataset.ixColorSchema;
-            document.documentElement.dataset.ixColorSchema =
-                currentSchema === 'dark' ? 'light' : 'dark';
-            return;
-        }
-        const bodyThemeClass = this.getThemeClassFromBody();
-        if (bodyThemeClass) {
-            const newTheme = bodyThemeClass.replace(/-(dark|light)$/, (m) => m === '-dark' ? '-light' : '-dark');
-            document.body.classList.remove(bodyThemeClass);
-            document.body.classList.add(newTheme);
-            this.themeChanged.emit(newTheme);
-            this.schemaChanged.emit(newTheme.endsWith(this.suffixDark) ? 'dark' : 'light');
-            return;
-        }
-        const newMode = this.defaultTheme.endsWith(this.suffixDark)
-            ? 'light'
-            : 'dark';
-        if (!document.documentElement.hasAttribute(dataIxTheme)) {
-            document.documentElement.dataset.ixTheme = 'classic';
-        }
+        const newMode = this.getMode() === 'dark' ? 'light' : 'dark';
         document.documentElement.dataset.ixColorSchema = newMode;
     }
-    getCurrentTheme() {
-        const bodyThemeClass = this.getThemeClassFromBody();
-        return (bodyThemeClass !== null && bodyThemeClass !== void 0 ? bodyThemeClass : `theme-${document.documentElement.dataset.ixTheme || 'classic'}-${document.documentElement.dataset.ixColorSchema ||
-            getCurrentSystemAppearance()}`);
-    }
-    setVariant(variant = getCurrentSystemAppearance()) {
-        if (document.documentElement.dataset.ixColorSchema) {
-            document.documentElement.dataset.ixColorSchema = variant;
-            return;
-        }
-        const bodyThemeClass = this.getThemeClassFromBody();
-        if (bodyThemeClass) {
-            const newTheme = bodyThemeClass.replace(/-(dark|light)$/, `-${variant}`);
-            document.body.classList.remove(bodyThemeClass);
-            document.body.classList.add(newTheme);
-            this.themeChanged.emit(newTheme);
-            this.schemaChanged.emit(variant);
-            return;
-        }
-        if (!document.documentElement.hasAttribute(dataIxTheme)) {
-            document.documentElement.dataset.ixTheme = 'classic';
+    getTheme() {
+        const currentTheme = document.documentElement.dataset.ixTheme;
+        if (!currentTheme) {
+            const fallbackTheme = this.getComputedStyleTheme();
+            if (fallbackTheme) {
+                return fallbackTheme;
+            }
         }
-        document.documentElement.dataset.ixColorSchema = variant;
+        return currentTheme;
     }
-    splitMutations(mutations) {
-        const classMutations = mutations.filter((mutation) => mutation.attributeName === 'class');
-        const dataMutations = mutations.filter((mutation) => mutation.attributeName === dataIxTheme ||
-            mutation.attributeName === dataIxColorSchema);
-        return { classMutations, dataMutations };
+    setColorSchema(variant = getCurrentSystemAppearance()) {
+        document.documentElement.dataset.ixColorSchema = variant;
     }
-    handleClassMutations(mutations) {
-        mutations.forEach((mutation) => {
-            const { target } = mutation;
-            target.classList.forEach((className) => {
-                var _a;
-                if (this.isThemeClass(className) &&
-                    !((_a = mutation.oldValue) === null || _a === void 0 ? void 0 : _a.includes(className))) {
-                    this.themeChanged.emit(className);
+    constructor() {
+        if (typeof window === 'undefined' ||
+            !window.MutationObserver ||
+            !window.matchMedia) {
+            // SSR or unsupported environment, do nothing
+            return;
+        }
+        this.mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes') {
+                    if (mutation.attributeName === 'data-ix-theme' ||
+                        mutation.attributeName === 'data-ix-color-schema') {
+                        this.emitThemeChange(false);
+                    }
                 }
             });
         });
-    }
-    handleDataMutations(mutations) {
-        mutations.forEach((mutation) => {
-            const { target } = mutation;
-            const theme = target.attributes.getNamedItem(dataIxTheme);
-            if ((theme === null || theme === void 0 ? void 0 : theme.value) && mutation.oldValue !== theme.value) {
-                this.themeChanged.emit(theme.value);
-            }
-            const colorSchema = target.attributes.getNamedItem(dataIxColorSchema);
-            if ((colorSchema === null || colorSchema === void 0 ? void 0 : colorSchema.value) && mutation.oldValue !== colorSchema.value) {
-                this.schemaChanged.emit(colorSchema.value);
-            }
+        this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+        this.mediaQueryList.addEventListener('change', this.handleMediaQueryChange);
+        this.mutationObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-ix-theme', 'data-ix-color-schema'],
         });
     }
-    registerMutationObservers() {
-        if (typeof window === 'undefined') {
-            return;
-        }
-        if (!('MutationObserver' in window)) {
-            console.warn('ThemeSwitcher not supported by your browser. Missing MutationObserver API');
-            return;
-        }
-        const mutationObserverConfig = {
-            attributeFilter: ['class', dataIxTheme, dataIxColorSchema],
-            attributeOldValue: true,
-        };
-        const handleMutations = (mutations) => {
-            const { classMutations, dataMutations } = this.splitMutations(mutations);
-            this.handleClassMutations(classMutations);
-            this.handleDataMutations(dataMutations);
-        };
-        this.mutationObserver = new MutationObserver(handleMutations);
-        this.mutationObserver.observe(document.documentElement, mutationObserverConfig);
-    }
-    constructor() {
-        this.prefixTheme = 'theme-';
-        this.suffixLight = '-light';
-        this.suffixDark = '-dark';
-        this.defaultTheme = 'theme-classic-dark';
-        this.themeChanged = new TypedEvent();
-        this.schemaChanged = new TypedEvent();
-        this.registerMutationObservers();
-    }
     destroy() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver?.disconnect();
+        this.mediaQueryList?.removeEventListener('change', this.handleMediaQueryChange);
     }
 }
-export const getCurrentSystemAppearance = () => window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+export const getCurrentSystemAppearance = () => typeof window !== 'undefined' && window.matchMedia
+    ? window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
+    : 'light';
 export const themeSwitcher = new ThemeSwitcher();

package/dist/collection/components/utils/typed-event.js

@@ -7,36 +7,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 export class TypedEvent {
-    constructor() {
-        this.listeners = [];
-        this.listenersOncer = [];
-        this.on = (listener) => {
-            this.listeners.push(listener);
-            return {
-                dispose: () => this.off(listener),
-            };
+    listeners = [];
+    listenersOncer = [];
+    on = (listener) => {
+        this.listeners.push(listener);
+        return {
+            dispose: () => this.off(listener),
         };
-        this.once = (listener) => {
-            this.listenersOncer.push(listener);
-        };
-        this.off = (listener) => {
-            const callbackIndex = this.listeners.indexOf(listener);
-            if (callbackIndex > -1) {
-                this.listeners.splice(callbackIndex, 1);
-            }
-        };
-        this.emit = (event) => {
-            /** Update any general listeners */
-            this.listeners.forEach((listener) => listener(event));
-            /** Clear the `once` queue */
-            if (this.listenersOncer.length > 0) {
-                const toCall = this.listenersOncer;
-                this.listenersOncer = [];
-                toCall.forEach((listener) => listener(event));
-            }
-        };
-        this.pipe = (te) => {
-            return this.on((e) => te.emit(e));
-        };
-    }
+    };
+    once = (listener) => {
+        this.listenersOncer.push(listener);
+    };
+    off = (listener) => {
+        const callbackIndex = this.listeners.indexOf(listener);
+        if (callbackIndex > -1) {
+            this.listeners.splice(callbackIndex, 1);
+        }
+    };
+    emit = (event) => {
+        /** Update any general listeners */
+        this.listeners.forEach((listener) => listener(event));
+        /** Clear the `once` queue */
+        if (this.listenersOncer.length > 0) {
+            const toCall = this.listenersOncer;
+            this.listenersOncer = [];
+            toCall.forEach((listener) => listener(event));
+        }
+    };
+    pipe = (te) => {
+        return this.on((e) => te.emit(e));
+    };
 }

package/dist/collection/components/workflow-step/workflow-step.js

@@ -9,36 +9,40 @@
 import { iconCircle, iconCircleDot, iconCircleFilled, iconError, iconSuccess, iconTriangleFilled, iconWarning, } from "@siemens/ix-icons/icons";
 import { Fragment, h, Host, } from "@stencil/core";
 export class WorkflowStep {
-    constructor() {
-        /**
-         * Select orientation
-         */
-        this.vertical = false;
-        /**
-         * Set disabled
-         */
-        this.disabled = false;
-        /**
-         * Set status
-         */
-        this.status = 'open';
-        /**
-         * Activate navigation click
-         */
-        this.clickable = false;
-        /**
-         * Set selected
-         */
-        this.selected = false;
-        /**
-         * Activate navigation click
-         *
-         * @internal
-         */
-        this.position = 'undefined';
-        this.iconColor = 'workflow-step-icon-default--color';
-        this.customIconSlot = false;
-    }
+    hostElement;
+    /**
+     * Select orientation
+     */
+    vertical = false;
+    /**
+     * Set disabled
+     */
+    disabled = false;
+    /**
+     * Set status
+     */
+    status = 'open';
+    /**
+     * Activate navigation click
+     */
+    clickable = false;
+    /**
+     * Set selected
+     */
+    selected = false;
+    /**
+     * Activate navigation click
+     *
+     * @internal
+     */
+    position = 'undefined';
+    iconName;
+    iconColor = 'workflow-step-icon-default--color';
+    /**
+     * @internal
+     */
+    selectedChanged;
+    customIconSlot = false;
     selectedHandler() {
         this.setWorkflowStepStyles();
     }
@@ -109,18 +113,18 @@ export class WorkflowStep {
     }
     render() {
         const icons = !this.customIconSlot ? (h(Fragment, null, h("ix-icon", { color: "color-1", name: this.status === 'warning' ? iconTriangleFilled : iconCircleFilled, class: "absolute", size: "24" }), h("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24", "aria-label": this.getIconAriaLabel() }))) : null;
-        return (h(Host, { key: 'ba277a277df82498b071d6b63e07177f33b39747', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, h("div", { key: '254f15dc98882c3ccf425806ebcb798cf4ca2067', tabIndex: 0, class: {
+        return (h(Host, { key: '69060f0b0d9724d1a7e5d88d723454354a0ae179', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, h("div", { key: 'e271713f7b57462155e967d2fd74bb911640c6b1', tabIndex: 0, class: {
                 step: true,
                 selected: this.selected,
                 vertical: this.vertical,
                 disabled: this.disabled,
                 clickable: this.clickable && !this.disabled,
-            } }, h("div", { key: '52277952fefb15636c4c769cae8b1b31681747b0', class: "wrapper" }, h("div", { key: '172e5dbd849ff5f1c398b9dd2269a1a5289d7e13', class: {
+            } }, h("div", { key: '28fb3c2e870564f3cfa62a402ba75b62ef84d68f', class: "wrapper" }, h("div", { key: '7178b44d0f6e20202c62e83af8e983392cf00ecd', class: {
                 line: true,
                 selected: this.selected,
                 [this.status]: true,
                 [this.position]: true,
-            } }), h("div", { key: 'd14473e894db0490d0846b991bd11ea96d1d0940', class: "iconWrapper" }, icons, h("slot", { key: 'fd034c7d06df4e52aa704e7032acc93afe1bb5fc', name: "custom-icon" }))), h("div", { key: 'c4f2915aaa75d26fcfbbd9bf5786f2786da58b9c', class: "text" }, h("slot", { key: '08b316f4c683aa9be7a5edac8b64977538683ba4' })))));
+            } }), h("div", { key: '8f10884a92e4f0685f20a10cb12cd19b39a7a2f9', class: "iconWrapper" }, icons, h("slot", { key: '6e3d96ae17ce0b3b217edef59b1e3999a1d028d5', name: "custom-icon" }))), h("div", { key: '80b1b2adc4f110d505e5fcb4263781b11b58ff49', class: "text" }, h("slot", { key: '07f9b88ce66abffd1190940968ed20ae6cd5ec09' })))));
     }
     static get is() { return "ix-workflow-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/workflow-steps/workflow-steps.js

@@ -9,20 +9,23 @@
 import { h, Host, } from "@stencil/core";
 import { createMutationObserver } from "../utils/mutation-observer";
 export class WorkflowSteps {
-    constructor() {
-        /**
-         * Select orientation
-         */
-        this.vertical = false;
-        /**
-         * Activate navigation click
-         */
-        this.clickable = false;
-        /**
-         * Activate navigation click
-         */
-        this.selectedIndex = 0;
-    }
+    hostElement;
+    /**
+     * Select orientation
+     */
+    vertical = false;
+    /**
+     * Activate navigation click
+     */
+    clickable = false;
+    /**
+     * Activate navigation click
+     */
+    selectedIndex = 0;
+    /**
+     * On step selected event
+     */
+    stepSelected;
     getSteps() {
         return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));
     }
@@ -47,6 +50,7 @@ export class WorkflowSteps {
             }
         });
     }
+    observer;
     onStepSelectionChanged(event) {
         const eventTarget = event.detail;
         const steps = this.getSteps();
@@ -81,7 +85,7 @@ export class WorkflowSteps {
         this.updateSteps();
     }
     render() {
-        return (h(Host, { key: 'ed6d9907f43ca79688b00201d2432287444f30e6' }, h("div", { key: 'f116d280b59c16a79aa4867329f36035ca14d919', class: { steps: true, vertical: this.vertical } }, h("slot", { key: '378f336873295a70620117d939d587b8ff407739' }))));
+        return (h(Host, { key: '05f04dea227019aa7f0e0a3b24cecb45ed80c452' }, h("div", { key: '6423cddc50bc1928ae2f1f78d6b22c12dda49c9d', class: { steps: true, vertical: this.vertical } }, h("slot", { key: '44ee3bca297914083a92a66ae3c496e05bd52b94' }))));
     }
     static get is() { return "ix-workflow-steps"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/public-api.js

@@ -9,10 +9,14 @@
 export * from './components/category-filter/filter-state';
 export * from './components/category-filter/input-state';
 export * from './components/category-filter/logical-filter-operator';
+export * from './components/date-input/date-input.types';
+export * from './components/datetime-input/datetime-input.types';
+export * from './components/time-input/time-input.types';
 export * from './components/toast/toast-utils';
 export * from './components/tree-item/default-tree-item';
 export * from './components/tree/tree-model';
 export * from './components/tree/tree.types';
+export * from './components/breadcrumb/breadcrumb.types';
 export * from './components/upload/upload-file-state';
 export * from './components/utils/delegate';
 export * from './components/utils/modal';

package/dist/collection/tests/utils/test/page.js

@@ -6,14 +6,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { test as testBase, expect, } from "@playwright/test";
 import AxeBuilder from "@axe-core/playwright";
+import { expect as baseExpect, test as testBase, } from "@playwright/test";
 async function extendPageFixture(page, testInfo) {
-    var _a, _b, _c, _d;
     const originalGoto = page.goto.bind(page);
     const originalScreenshot = page.screenshot.bind(page);
-    const dataIxTheme = (_b = (_a = testInfo.project.metadata) === null || _a === void 0 ? void 0 : _a['data-ix-theme']) !== null && _b !== void 0 ? _b : 'classic';
-    const dataIxColorSchema = (_d = (_c = testInfo.project.metadata) === null || _c === void 0 ? void 0 : _c['data-ix-color-schema']) !== null && _d !== void 0 ? _d : 'dark';
+    const dataIxTheme = testInfo.project.metadata?.['data-ix-theme'] ?? 'classic';
+    const dataIxColorSchema = testInfo.project.metadata?.['data-ix-color-schema'] ?? 'dark';
     testInfo.annotations.push({
         type: `${dataIxTheme} ${dataIxColorSchema}`,
     });
@@ -33,7 +32,7 @@ async function extendPageFixture(page, testInfo) {
 }
 async function mountComponent(page, selector, config) {
     return page.evaluateHandle(async ({ componentSelector, config }) => {
-        if (config === null || config === void 0 ? void 0 : config.headTags) {
+        if (config?.headTags) {
             config.headTags.forEach((tag) => {
                 const head = document.querySelector('head');
                 if (!head) {
@@ -42,7 +41,7 @@ async function mountComponent(page, selector, config) {
                 head.innerHTML += tag;
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.icons) {
+        if (config?.icons) {
             const moduleImport = await import(
             //@ts-expect-error - Only existing on runtime
             '/www/node_modules/@siemens/ix-icons/dist/index.js');
@@ -98,10 +97,9 @@ export const regressionTest = testBase.extend({
         }));
     },
     mount: async ({ page }, use, testInfo) => {
-        var _a, _b, _c, _d;
         testInfo.componentTest = true;
-        const dataIxTheme = (_b = (_a = testInfo.project.metadata) === null || _a === void 0 ? void 0 : _a['data-ix-theme']) !== null && _b !== void 0 ? _b : 'classic';
-        const dataIxColorSchema = (_d = (_c = testInfo.project.metadata) === null || _c === void 0 ? void 0 : _c['data-ix-color-schema']) !== null && _d !== void 0 ? _d : 'dark';
+        const dataIxTheme = testInfo.project.metadata?.['data-ix-theme'] ?? 'classic';
+        const dataIxColorSchema = testInfo.project.metadata?.['data-ix-color-schema'] ?? 'dark';
         testInfo.annotations.push({
             type: `${dataIxTheme} ${dataIxColorSchema}`,
         });
@@ -109,4 +107,31 @@ export const regressionTest = testBase.extend({
         await use((selector, config) => mountComponent(page, selector, config));
     },
 });
+export const expect = baseExpect.extend({
+    async toHaveVisibleFocus(locator, activeDescendantElementLocator) {
+        let pass = true;
+        const errors = [];
+        try {
+            await baseExpect(locator).toHaveClass(/ix-focused/);
+        }
+        catch (e) {
+            pass = false;
+            errors.push(e.message);
+        }
+        if (activeDescendantElementLocator) {
+            try {
+                const activeDescendantId = await activeDescendantElementLocator.evaluate((el) => el.getAttribute('aria-activedescendant'));
+                await baseExpect(activeDescendantElementLocator).toHaveAttribute('aria-activedescendant', activeDescendantId);
+            }
+            catch (e) {
+                pass = false;
+                errors.push(e.message);
+            }
+        }
+        return {
+            pass,
+            message: () => errors.join('\n') || 'Expected element to have visible focus',
+        };
+    },
+});
 export const test = regressionTest;

package/dist/esm/{a11y-DAzBNVe7.js → a11y-B5k8YVR0.js}

@@ -77,11 +77,10 @@ const getFallbackLabelFromIconName = (iconName) => {
 const a11yHostAttributes = (hostElement, ignoreAttributes = []) => {
     const attributeObject = {};
     a11yAttributes.forEach((attr) => {
-        var _a;
         if (hostElement.hasAttribute(attr)) {
             const value = hostElement.getAttribute(attr);
             if (value !== null && !ignoreAttributes.includes(attr)) {
-                attributeObject[attr] = (_a = hostElement.getAttribute(attr)) !== null && _a !== void 0 ? _a : '';
+                attributeObject[attr] = hostElement.getAttribute(attr) ?? '';
                 hostElement.removeAttribute(attr);
             }
         }

package/dist/esm/animation-DNIQ2C1K.js

@@ -0,0 +1,79 @@
+class Animation {
+    static #FALLBACKS = {
+        short: 0,
+        default: 150,
+        medium: 300,
+        slow: 500,
+        xslow: 1000,
+    };
+    static #cache = null;
+    static parseTime(raw, fallback) {
+        const value = raw.trim();
+        if (value.length === 0)
+            return fallback;
+        const match = value.match(/^(-?\d*\.?\d+)(ms|s)?$/);
+        if (!match)
+            return fallback;
+        const [, amount, unit = 'ms'] = match;
+        const parsed = Number(amount);
+        if (!Number.isFinite(parsed))
+            return fallback;
+        return unit === 's' ? parsed * 1000 : parsed;
+    }
+    static ensureCache() {
+        if (this.#cache !== null)
+            return;
+        if (typeof window === 'undefined') {
+            // SSR only
+            this.#cache = { ...this.#FALLBACKS };
+            return;
+        }
+        const root = document.documentElement || document.body;
+        const styles = window.getComputedStyle(root);
+        const read = (varName, fallback) => {
+            const raw = styles.getPropertyValue(varName)?.trim();
+            if (!raw)
+                return fallback;
+            return this.parseTime(raw, fallback);
+        };
+        this.#cache = {
+            short: read('--theme-short-time', this.#FALLBACKS.short),
+            default: read('--theme-default-time', this.#FALLBACKS.default),
+            medium: read('--theme-medium-time', this.#FALLBACKS.medium),
+            slow: read('--theme-slow-time', this.#FALLBACKS.slow),
+            xslow: read('--theme-x-slow-time', this.#FALLBACKS.xslow),
+        };
+    }
+    static prefersReducedMotion() {
+        if (typeof window === 'undefined' || !window.matchMedia)
+            return false;
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+    static get shortTime() {
+        this.ensureCache();
+        const t = this.#cache.short;
+        return this.prefersReducedMotion() ? 0 : t;
+    }
+    static get defaultTime() {
+        this.ensureCache();
+        const t = this.#cache.default;
+        return this.prefersReducedMotion() ? 0 : t;
+    }
+    static get mediumTime() {
+        this.ensureCache();
+        const t = this.#cache.medium;
+        return this.prefersReducedMotion() ? 0 : t;
+    }
+    static get slowTime() {
+        this.ensureCache();
+        const t = this.#cache.slow;
+        return this.prefersReducedMotion() ? 0 : t;
+    }
+    static get xSlowTime() {
+        this.ensureCache();
+        const t = this.#cache.xslow;
+        return this.prefersReducedMotion() ? 0 : t;
+    }
+}
+
+export { Animation as A };

package/dist/esm/app-globals-DQuL1Twl.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };