@ionic/core 8.8.7-dev.11779467048.1641d05e → 8.8.7-dev.11779921691.1777274a

package/dist/esm/{index-Omi_TcwW.js → index-BrrkdT9L.js}

@@ -16,6 +16,33 @@ class Config {
         const value = this.m.get(key);
         return value !== undefined ? value : fallback;
     }
+    /**
+     * Get a nested object value from the config
+     *
+     * @param key Nested key string (e.g., 'IonChip.size')
+     * @param fallback Default value if the key is not found
+     * @returns The value found at the nested key or the fallback
+     */
+    getObjectValue(key, fallback) {
+        var _a;
+        const [firstKey, ...remainingKeys] = key.split('.');
+        let root;
+        // First key is a component config since it starts with 'Ion',
+        // it must be accessed from the 'customTheme' config object
+        if (firstKey.startsWith('Ion')) {
+            const customTheme = this.m.get('customTheme');
+            root = customTheme ? (_a = customTheme.config) === null || _a === void 0 ? void 0 : _a.components[firstKey] : undefined;
+        }
+        else {
+            // Otherwise, get the value directly from the global config
+            root = this.m.get(firstKey);
+        }
+        if (root === undefined) {
+            return fallback;
+        }
+        const result = remainingKeys.reduce((acc, k) => acc === null || acc === void 0 ? void 0 : acc[k], root);
+        return result !== null && result !== void 0 ? result : fallback;
+    }
     getBoolean(key, fallback = false) {
         const val = this.m.get(key);
         if (val === undefined) {
@@ -121,6 +148,1829 @@ const printRequiredElementError = (el, ...targetSelectors) => {
     return console.error(`<${el.tagName.toLowerCase()}> must be used inside ${targetSelectors.join(' or ')}.`);
 };
 
+const ION_FOCUSED = 'ion-focused';
+const ION_FOCUSABLE = 'ion-focusable';
+const FOCUS_KEYS = [
+    'Tab',
+    'ArrowDown',
+    'Space',
+    'Escape',
+    ' ',
+    'Shift',
+    'Enter',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'Home',
+    'End',
+];
+let focusVisibleUtility = null;
+const getOrInitFocusVisibleUtility = () => {
+    if (!focusVisibleUtility) {
+        focusVisibleUtility = startFocusVisible();
+    }
+    return focusVisibleUtility;
+};
+/**
+ * Used to set focus on an element that uses `ion-focusable`.
+ * Do not use this if focusing the element as a result of a keyboard
+ * event as the focus utility should handle this for us. This method
+ * should be used when we want to programmatically focus an element as
+ * a result of another user action. (Ex: We focus the first element
+ * inside of a popover when the user presents it, but the popover is not always
+ * presented as a result of keyboard action.)
+ *
+ * @param elements - The elements to set focus on.
+ */
+const focusElements = (elements) => {
+    const focusVisible = getOrInitFocusVisibleUtility();
+    focusVisible.setFocus(elements);
+};
+const startFocusVisible = (rootEl) => {
+    let currentFocus = [];
+    let keyboardMode = true;
+    const ref = rootEl ? rootEl.shadowRoot : document;
+    const root = rootEl ? rootEl : document.body;
+    const setFocus = (elements) => {
+        currentFocus.forEach((el) => el.classList.remove(ION_FOCUSED));
+        elements.forEach((el) => el.classList.add(ION_FOCUSED));
+        currentFocus = elements;
+    };
+    const pointerDown = () => {
+        keyboardMode = false;
+        setFocus([]);
+    };
+    const onKeydown = (ev) => {
+        keyboardMode = FOCUS_KEYS.includes(ev.key);
+        if (!keyboardMode) {
+            setFocus([]);
+        }
+    };
+    const onFocusin = (ev) => {
+        if (keyboardMode && ev.composedPath !== undefined) {
+            const toFocus = ev.composedPath().filter((el) => {
+                // TODO(FW-2832): type
+                if (el.classList) {
+                    return el.classList.contains(ION_FOCUSABLE);
+                }
+                return false;
+            });
+            setFocus(toFocus);
+        }
+    };
+    const onFocusout = () => {
+        if (ref.activeElement === root) {
+            setFocus([]);
+        }
+    };
+    ref.addEventListener('keydown', onKeydown);
+    ref.addEventListener('focusin', onFocusin);
+    ref.addEventListener('focusout', onFocusout);
+    ref.addEventListener('touchstart', pointerDown, { passive: true });
+    ref.addEventListener('mousedown', pointerDown);
+    const destroy = () => {
+        ref.removeEventListener('keydown', onKeydown);
+        ref.removeEventListener('focusin', onFocusin);
+        ref.removeEventListener('focusout', onFocusout);
+        ref.removeEventListener('touchstart', pointerDown);
+        ref.removeEventListener('mousedown', pointerDown);
+    };
+    return {
+        destroy,
+        setFocus,
+    };
+};
+
+var focusVisible = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    focusElements: focusElements,
+    getOrInitFocusVisibleUtility: getOrInitFocusVisibleUtility,
+    startFocusVisible: startFocusVisible
+});
+
+const transitionEndAsync = (el, expectedDuration = 0) => {
+    return new Promise((resolve) => {
+        transitionEnd(el, expectedDuration, resolve);
+    });
+};
+/**
+ * Allows developer to wait for a transition
+ * to finish and fallback to a timer if the
+ * transition is cancelled or otherwise
+ * never finishes. Also see transitionEndAsync
+ * which is an await-able version of this.
+ */
+const transitionEnd = (el, expectedDuration = 0, callback) => {
+    let unRegTrans;
+    let animationTimeout;
+    const opts = { passive: true };
+    const ANIMATION_FALLBACK_TIMEOUT = 500;
+    const unregister = () => {
+        if (unRegTrans) {
+            unRegTrans();
+        }
+    };
+    const onTransitionEnd = (ev) => {
+        if (ev === undefined || el === ev.target) {
+            unregister();
+            callback(ev);
+        }
+    };
+    if (el) {
+        el.addEventListener('webkitTransitionEnd', onTransitionEnd, opts);
+        el.addEventListener('transitionend', onTransitionEnd, opts);
+        animationTimeout = setTimeout(onTransitionEnd, expectedDuration + ANIMATION_FALLBACK_TIMEOUT);
+        unRegTrans = () => {
+            if (animationTimeout !== undefined) {
+                clearTimeout(animationTimeout);
+                animationTimeout = undefined;
+            }
+            el.removeEventListener('webkitTransitionEnd', onTransitionEnd, opts);
+            el.removeEventListener('transitionend', onTransitionEnd, opts);
+        };
+    }
+    return unregister;
+};
+/**
+ * Waits for a component to be ready for
+ * both custom element and non-custom element builds.
+ * If non-custom element build, el.componentOnReady
+ * will be used.
+ * For custom element builds, we wait a frame
+ * so that the inner contents of the component
+ * have a chance to render.
+ *
+ * Use this utility rather than calling
+ * el.componentOnReady yourself.
+ */
+const componentOnReady = (el, callback) => {
+    if (el.componentOnReady) {
+        // eslint-disable-next-line custom-rules/no-component-on-ready-method
+        el.componentOnReady().then((resolvedEl) => callback(resolvedEl));
+    }
+    else {
+        raf(() => callback(el));
+    }
+};
+/**
+ * Promise-based wrapper around componentOnReady. Use when you need to await
+ * component readiness before accessing internal refs (e.g. in early lifecycle
+ * hooks like Vue onMounted with the custom elements build).
+ */
+const waitForComponentReady = (el) => {
+    return new Promise((resolve) => componentOnReady(el, () => resolve(el)));
+};
+/**
+ * This functions checks if a Stencil component is using
+ * the lazy loaded build of Stencil. Returns `true` if
+ * the component is lazy loaded. Returns `false` otherwise.
+ */
+const hasLazyBuild = (stencilEl) => {
+    return stencilEl.componentOnReady !== undefined;
+};
+/**
+ * Elements inside of web components sometimes need to inherit global attributes
+ * set on the host. For example, the inner input in `ion-input` should inherit
+ * the `title` attribute that developers set directly on `ion-input`. This
+ * helper function should be called in componentWillLoad and assigned to a variable
+ * that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+const inheritAttributes = (el, attributes = []) => {
+    const attributeObject = {};
+    attributes.forEach((attr) => {
+        if (el.hasAttribute(attr)) {
+            const value = el.getAttribute(attr);
+            if (value !== null) {
+                attributeObject[attr] = el.getAttribute(attr);
+            }
+            el.removeAttribute(attr);
+        }
+    });
+    return attributeObject;
+};
+/**
+ * List of available ARIA attributes + `role`.
+ * Removed deprecated attributes.
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
+ */
+const ariaAttributes = [
+    'role',
+    'aria-activedescendant',
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-braillelabel',
+    'aria-brailleroledescription',
+    'aria-busy',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colindextext',
+    'aria-colspan',
+    'aria-controls',
+    'aria-current',
+    'aria-describedby',
+    'aria-description',
+    'aria-details',
+    'aria-disabled',
+    'aria-errormessage',
+    'aria-expanded',
+    'aria-flowto',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-labelledby',
+    'aria-level',
+    'aria-live',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-owns',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowindextext',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext',
+];
+/**
+ * Returns an array of aria attributes that should be copied from
+ * the shadow host element to a target within the light DOM.
+ * @param el The element that the attributes should be copied from.
+ * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
+ * Use this in instances where we manually specify aria attributes on the `<Host>` element.
+ */
+const inheritAriaAttributes = (el, ignoreList) => {
+    let attributesToInherit = ariaAttributes;
+    return inheritAttributes(el, attributesToInherit);
+};
+const addEventListener = (el, eventName, callback, opts) => {
+    return el.addEventListener(eventName, callback, opts);
+};
+const removeEventListener = (el, eventName, callback, opts) => {
+    return el.removeEventListener(eventName, callback, opts);
+};
+/**
+ * Gets the root context of a shadow dom element
+ * On newer browsers this will be the shadowRoot,
+ * but for older browser this may just be the
+ * element itself.
+ *
+ * Useful for whenever you need to explicitly
+ * do "myElement.shadowRoot!.querySelector(...)".
+ */
+const getElementRoot = (el, fallback = el) => {
+    return el.shadowRoot || fallback;
+};
+/**
+ * Patched version of requestAnimationFrame that avoids ngzone
+ * Use only when you know ngzone should not run
+ */
+const raf = (h) => {
+    if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+        return __zone_symbol__requestAnimationFrame(h);
+    }
+    if (typeof requestAnimationFrame === 'function') {
+        return requestAnimationFrame(h);
+    }
+    return setTimeout(h);
+};
+const hasShadowDom = (el) => {
+    return !!el.shadowRoot && !!el.attachShadow;
+};
+/**
+ * Focuses a given element while ensuring proper focus management
+ * within the Ionic framework. If the element is marked as `ion-focusable`,
+ * this function will delegate focus handling to `ion-app` or manually
+ * apply focus when a custom app root is used.
+ *
+ * This function helps maintain accessibility and expected focus behavior
+ * in both standard and custom root environments.
+ *
+ * @param el - The element to focus.
+ */
+const focusVisibleElement = (el) => {
+    el.focus();
+    /**
+     * When programmatically focusing an element,
+     * the focus-visible utility will not run because
+     * it is expecting a keyboard event to have triggered this;
+     * however, there are times when we need to manually control
+     * this behavior so we call the `setFocus` method on ion-app
+     * which will let us explicitly set the elements to focus.
+     *
+     * Note: The element passed to this function might be an inner
+     * focusable element (e.g., a native <button> inside ion-button's
+     * shadow root). If so, we need to find the host element that has
+     * the ion-focusable class to pass to setFocus.
+     */
+    let elToFocus = el;
+    // If the element doesn't have ion-focusable, check if it's inside
+    // a shadow root and use the host element instead
+    if (!el.classList.contains('ion-focusable')) {
+        const rootNode = el.getRootNode();
+        if (rootNode instanceof ShadowRoot && rootNode.host instanceof HTMLElement) {
+            elToFocus = rootNode.host;
+        }
+    }
+    if (elToFocus.classList.contains('ion-focusable')) {
+        const appRootSelector = config.get('appRootSelector', 'ion-app');
+        const app = elToFocus.closest(appRootSelector);
+        if (app) {
+            if (appRootSelector === 'ion-app') {
+                /**
+                 * If the app root is the default, then it will be
+                 * in charge of setting focus. This is because the
+                 * focus-visible utility is attached to the app root
+                 * and will handle setting focus on the correct element.
+                 */
+                app.setFocus([elToFocus]);
+            }
+            else {
+                /**
+                 * When using a custom app root selector, the focus-visible
+                 * utility is not available to manage focus automatically.
+                 * If we set focus immediately, the element may not be fully
+                 * rendered or interactive, especially if it was just added
+                 * to the DOM. Using requestAnimationFrame ensures that focus
+                 * is applied on the next frame, allowing the DOM to settle
+                 * before changing focus.
+                 */
+                requestAnimationFrame(() => {
+                    /**
+                     * The focus-visible utility is used to set focus on an
+                     * element that uses `ion-focusable`.
+                     */
+                    focusElements([elToFocus]);
+                });
+            }
+        }
+    }
+};
+/**
+ * This method is used to add a hidden input to a host element that contains
+ * a Shadow DOM. It does not add the input inside of the Shadow root which
+ * allows it to be picked up inside of forms. It should contain the same
+ * values as the host element.
+ *
+ * @param always Add a hidden input even if the container does not use Shadow
+ * @param container The element where the input will be added
+ * @param name The name of the input
+ * @param value The value of the input
+ * @param disabled If true, the input is disabled
+ */
+const renderHiddenInput = (always, container, name, value, disabled) => {
+    {
+        let input = container.querySelector('input.aux-input');
+        if (!input) {
+            input = container.ownerDocument.createElement('input');
+            input.type = 'hidden';
+            input.classList.add('aux-input');
+            container.appendChild(input);
+        }
+        input.disabled = disabled;
+        input.name = name;
+        input.value = value || '';
+    }
+};
+const clamp = (min, n, max) => {
+    return Math.max(min, Math.min(n, max));
+};
+const assert = (actual, reason) => {
+    if (!actual) {
+        const message = 'ASSERT: ' + reason;
+        printIonError(message);
+        debugger; // eslint-disable-line
+        throw new Error(message);
+    }
+};
+const pointerCoord = (ev) => {
+    // get X coordinates for either a mouse click
+    // or a touch depending on the given event
+    if (ev) {
+        const changedTouches = ev.changedTouches;
+        if (changedTouches && changedTouches.length > 0) {
+            const touch = changedTouches[0];
+            return { x: touch.clientX, y: touch.clientY };
+        }
+        if (ev.pageX !== undefined) {
+            return { x: ev.pageX, y: ev.pageY };
+        }
+    }
+    return { x: 0, y: 0 };
+};
+/**
+ * @hidden
+ * Given a side, return if it should be on the end
+ * based on the value of dir
+ * @param side the side
+ * @param isRTL whether the application dir is rtl
+ */
+const isEndSide = (side) => {
+    const isRTL = document.dir === 'rtl';
+    switch (side) {
+        case 'start':
+            return isRTL;
+        case 'end':
+            return !isRTL;
+        default:
+            throw new Error(`"${side}" is not a valid value for [side]. Use "start" or "end" instead.`);
+    }
+};
+const debounceEvent = (event, wait) => {
+    const original = event._original || event;
+    return {
+        _original: event,
+        emit: debounce(original.emit.bind(original), wait),
+    };
+};
+const debounce = (func, wait = 0) => {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(func, wait, ...args);
+    };
+};
+/**
+ * Check whether the two string maps are shallow equal.
+ *
+ * undefined is treated as an empty map.
+ *
+ * @returns whether the keys are the same and the values are shallow equal.
+ */
+const shallowEqualStringMap = (map1, map2) => {
+    map1 !== null && map1 !== void 0 ? map1 : (map1 = {});
+    map2 !== null && map2 !== void 0 ? map2 : (map2 = {});
+    if (map1 === map2) {
+        return true;
+    }
+    const keys1 = Object.keys(map1);
+    if (keys1.length !== Object.keys(map2).length) {
+        return false;
+    }
+    for (const k1 of keys1) {
+        if (!(k1 in map2)) {
+            return false;
+        }
+        if (map1[k1] !== map2[k1]) {
+            return false;
+        }
+    }
+    return true;
+};
+/**
+ * Checks input for usable number. Not NaN and not Infinite.
+ */
+const isSafeNumber = (input) => {
+    return typeof input === 'number' && !isNaN(input) && isFinite(input);
+};
+const SCHEME = /^[a-z][a-z0-9+\-.]*:/;
+const openURL = async (url, ev, direction, animation) => {
+    if (url != null && url[0] !== '#' && !SCHEME.test(url)) {
+        const router = document.querySelector('ion-router');
+        if (router) {
+            if (ev != null) {
+                ev.preventDefault();
+            }
+            return router.push(url, direction, animation);
+        }
+    }
+    return false;
+};
+/**
+ * Deep merges two objects, with source properties overriding target properties
+ * @param target The target object to merge into
+ * @param source The source object to merge from
+ * @returns The merged object
+ */
+const deepMerge = (target, source) => {
+    var _a;
+    const result = Object.assign({}, target);
+    for (const key in source) {
+        if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+            result[key] = deepMerge((_a = result[key]) !== null && _a !== void 0 ? _a : {}, source[key]);
+        }
+        else {
+            result[key] = source[key];
+        }
+    }
+    return result;
+};
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const CSS_PROPS_PREFIX = '--ion-';
+const CSS_ROOT_SELECTOR = ':root';
+/**
+ * Checks if an element has a parent matching the specified selector.
+ * This handles an element in both light DOM and shadow DOM contexts.
+ * @param selector The parent selector to check for (e.g., 'ion-datetime'
+ * or 'ion-toolbar[color]').
+ * @param el The element to check.
+ * @returns `true` if the element has a parent matching the specified selector,
+ * `false` otherwise.
+ */
+const hostContext = (selector, el) => {
+    // Check the light DOM first
+    if (el.closest(selector) !== null) {
+        return true;
+    }
+    // For attribute or class selectors (e.g., 'ion-toolbar[color]' or
+    // 'ion-toolbar.ion-color') we can only check light DOM since tagName
+    // doesn't include attributes or classes.
+    if (selector.includes('[') || selector.includes('.')) {
+        return false;
+    }
+    // Check the shadow DOM by looking at the shadow root host and
+    // converting the selector to uppercase to compare with tagName
+    const upperCaseTagName = selector.toUpperCase();
+    const rootNode = el.getRootNode();
+    const shadowHost = rootNode instanceof ShadowRoot ? rootNode.host : null;
+    return (shadowHost === null || shadowHost === void 0 ? void 0 : shadowHost.tagName) === upperCaseTagName;
+};
+/**
+ * Create the mode and color classes for the component based on the classes passed in
+ */
+const createColorClasses = (color, cssClassMap) => {
+    return typeof color === 'string' && color.length > 0
+        ? Object.assign({ 'ion-color': true, [`ion-color-${color}`]: true }, cssClassMap) : cssClassMap;
+};
+const getClassList = (classes) => {
+    if (classes !== undefined) {
+        const array = Array.isArray(classes) ? classes : classes.split(' ');
+        return array
+            .filter((c) => c != null)
+            .map((c) => c.trim())
+            .filter((c) => c !== '');
+    }
+    return [];
+};
+const getClassMap = (classes) => {
+    const map = {};
+    getClassList(classes).forEach((c) => (map[c] = true));
+    return map;
+};
+/**
+ * Gets and merges custom themes based on mode
+ * @param customTheme The custom theme
+ * @param mode The current mode (ios | md)
+ * @returns The merged custom theme
+ */
+const getCustomTheme = (customTheme, mode) => {
+    if (!customTheme)
+        return undefined;
+    // Check if the custom theme contains mode overrides (ios | md)
+    if (customTheme.ios || customTheme.md) {
+        const { ios, md } = customTheme, baseCustomTheme = __rest(customTheme, ["ios", "md"]);
+        // Flatten the mode-specific overrides based on current mode
+        if (mode === 'ios' && ios) {
+            return deepMerge(baseCustomTheme, ios);
+        }
+        else if (mode === 'md' && md) {
+            return deepMerge(baseCustomTheme, md);
+        }
+        return baseCustomTheme;
+    }
+    return customTheme;
+};
+/**
+ * Flattens the theme object into CSS custom properties
+ * @param theme The theme object to flatten
+ * @param prefix The CSS prefix to use (e.g., '--ion-')
+ * @returns CSS string with custom properties
+ */
+const generateCSSVars = (theme, prefix = CSS_PROPS_PREFIX) => {
+    // Logs do not need to be printed because palette objects are optional
+    const themeValidity = isValidTheme(theme, 'generateCSSVars', false);
+    if (!themeValidity) {
+        return undefined;
+    }
+    const cssProps = Object.entries(theme)
+        .flatMap(([key, val]) => {
+        var _a, _b, _c, _d, _e, _f;
+        // Skip invalid keys or values
+        if (!key || typeof key !== 'string' || val === null || val === undefined) {
+            return [];
+        }
+        key = convertToKebabCase(key);
+        // Do not generate CSS variables for excluded keys
+        const excludedKeys = ['name', 'enabled', 'config'];
+        if (excludedKeys.includes(key)) {
+            return [];
+        }
+        // Special handling for 'base' property - don't add suffix
+        if (key === 'base') {
+            return [`${prefix.slice(0, -1)}: ${val};`];
+        }
+        // Generate rgb variables for base and contrast color variants
+        // These are only generated when processing global color objects,
+        // not component-level color overrides
+        // TODO(): this only works with hex values
+        if ((key === 'bold' || key === 'subtle') && prefix.includes('color')) {
+            if (typeof val === 'object' && val !== null) {
+                return Object.entries(val).flatMap(([property, hexValue]) => {
+                    if (typeof hexValue === 'string' && hexValue.startsWith('#')) {
+                        // For 'base' property, don't include the property name in the CSS variable
+                        const varName = property === 'base' ? `${prefix}${key}` : `${prefix}${key}-${property}`;
+                        const cssVars = [`${varName}: ${hexValue};`];
+                        // Only add RGB values for base and contrast
+                        if (property === 'base' || property === 'contrast') {
+                            const rgbVarName = property === 'base' ? `${prefix}${key}-rgb` : `${prefix}${key}-${property}-rgb`;
+                            cssVars.push(`${rgbVarName}: ${hexToRgb(hexValue)};`);
+                        }
+                        return cssVars;
+                    }
+                    return [];
+                });
+            }
+        }
+        // If it's a font-sizes key, create rem version
+        // This is necessary to support the dynamic font size feature
+        if (key === 'font-sizes' && typeof val === 'object' && val !== null) {
+            // Access the root font size from the global theme context
+            const fontSizeBase = parseFloat((_f = (_e = (_d = (_c = (_b = (_a = window.Ionic) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.get) === null || _c === void 0 ? void 0 : _c.call(_b, 'theme')) === null || _d === void 0 ? void 0 : _d.fontSizes) === null || _e === void 0 ? void 0 : _e.root) !== null && _f !== void 0 ? _f : '16');
+            return Object.entries(val).flatMap(([sizeKey, sizeValue]) => {
+                if (!sizeKey || sizeValue == null)
+                    return [];
+                const remValue = `${parseFloat(sizeValue) / fontSizeBase}rem`;
+                // Return both px and rem values as separate array items
+                return [
+                    `${prefix}${key}-${sizeKey}: ${sizeValue};`, // original px value
+                    `${prefix}${key}-${sizeKey}-rem: ${remValue};`, // rem value
+                ];
+            });
+        }
+        return typeof val === 'object' && val !== null
+            ? generateCSSVars(val, `${prefix}${key}-`)
+            : [`${prefix}${key}: ${val};`];
+    })
+        .filter(Boolean);
+    return cssProps.join('\n');
+};
+/**
+ * Generates a CSS class containing the CSS variables for each color
+ * in the theme. Each color has generic bold and subtle variables that are mapped
+ * to the specific color's bold and subtle variables. The bold colors will temporarily
+ * include a fallback to remove the bold prefix. For example, the primary
+ * color will return the following CSS class:
+ *
+ * ```css
+ * :root .ion-color-primary {
+ *   --ion-color-base: var(--ion-color-primary, var(--ion-color-primary-bold));
+ *   --ion-color-base-rgb: var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb));
+ *   --ion-color-contrast: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast));
+ *   --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, var(--ion-color-primary-bold-contrast-rgb));
+ *   --ion-color-shade: var(--ion-color-primary-shade, var(--ion-color-primary-bold-shade));
+ *   --ion-color-tint: var(--ion-color-primary-tint, var(--ion-color-primary-bold-tint));
+ *   --ion-color-foreground: var(--ion-color-primary, var(--ion-color-primary-foreground, var(--ion-color-primary-bold-foreground)));
+ *
+ *   --ion-color-subtle-base: var(--ion-color-primary-subtle);
+ *   --ion-color-subtle-base-rgb: var(--ion-color-primary-subtle-rgb);
+ *   --ion-color-subtle-contrast: var(--ion-color-primary-subtle-contrast);
+ *   --ion-color-subtle-contrast-rgb: var(--ion-color-primary-subtle-contrast-rgb);
+ *   --ion-color-subtle-shade: var(--ion-color-primary-subtle-shade);
+ *   --ion-color-subtle-tint: var(--ion-color-primary-subtle-tint);
+ *   --ion-color-subtle-foreground: var(--ion-color-primary-subtle-foreground);
+ * }
+ * ```
+ *
+ * @param theme The theme object containing color definitions
+ * @returns CSS string with .ion-color-{colorName} utility classes
+ */
+const generateColorClasses = (theme) => {
+    var _a, _b;
+    // Look for colors in the light palette first, then fallback to the
+    // direct color property if there is no light palette
+    const colors = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.light) === null || _b === void 0 ? void 0 : _b.color) || (theme === null || theme === void 0 ? void 0 : theme.color);
+    if (!colors) {
+        return '';
+    }
+    if (typeof colors !== 'object' || Array.isArray(colors)) {
+        const colorsType = Array.isArray(colors) ? 'array' : typeof colors;
+        printIonWarning(`Invalid color configuration in theme. Expected color to be an object, but found ${colorsType}.`, theme);
+        return '';
+    }
+    const generatedColorClasses = [];
+    Object.keys(colors).forEach((colorName) => {
+        const colorVariants = colors[colorName];
+        if (!colorVariants || typeof colorVariants !== 'object')
+            return;
+        const cssVariableRules = [];
+        // Generate CSS variables for bold variant
+        // Includes base color variables without the bold modifier for
+        // backwards compatibility.
+        // TODO: Remove the fallbacks once the bold variables are the default
+        if (colorVariants.bold) {
+            cssVariableRules.push(`--ion-color-base: var(--ion-color-${colorName}, var(--ion-color-${colorName}-bold)) !important;`, `--ion-color-base-rgb: var(--ion-color-${colorName}-rgb, var(--ion-color-${colorName}-bold-rgb)) !important;`, `--ion-color-contrast: var(--ion-color-${colorName}-contrast, var(--ion-color-${colorName}-bold-contrast)) !important;`, `--ion-color-contrast-rgb: var(--ion-color-${colorName}-contrast-rgb, var(--ion-color-${colorName}-bold-contrast-rgb)) !important;`, `--ion-color-shade: var(--ion-color-${colorName}-shade, var(--ion-color-${colorName}-bold-shade)) !important;`, `--ion-color-tint: var(--ion-color-${colorName}-tint, var(--ion-color-${colorName}-bold-tint)) !important;`, `--ion-color-foreground: var(--ion-color-${colorName}-foreground, var(--ion-color-${colorName}-bold-foreground)) !important;`);
+        }
+        // Generate CSS variables for subtle variant
+        if (colorVariants.subtle) {
+            cssVariableRules.push(`--ion-color-subtle-base: var(--ion-color-${colorName}-subtle) !important;`, `--ion-color-subtle-base-rgb: var(--ion-color-${colorName}-subtle-rgb) !important;`, `--ion-color-subtle-contrast: var(--ion-color-${colorName}-subtle-contrast) !important;`, `--ion-color-subtle-contrast-rgb: var(--ion-color-${colorName}-subtle-contrast-rgb) !important;`, `--ion-color-subtle-shade: var(--ion-color-${colorName}-subtle-shade) !important;`, `--ion-color-subtle-tint: var(--ion-color-${colorName}-subtle-tint) !important;`, `--ion-color-subtle-foreground: var(--ion-color-${colorName}-subtle-foreground) !important;`);
+        }
+        if (cssVariableRules.length > 0) {
+            const colorUtilityClass = `
+        :root .ion-color-${colorName} {
+          ${cssVariableRules.join('\n  ')}
+        }
+      `;
+            generatedColorClasses.push(colorUtilityClass);
+        }
+    });
+    return generatedColorClasses.join('\n');
+};
+/**
+ * Creates a style element and injects its CSS into a target element
+ * @param css The CSS string to inject
+ * @param target The target element to inject into
+ */
+const injectCSS = (css, target = document.head) => {
+    const style = document.createElement('style');
+    style.innerHTML = css;
+    target.appendChild(style);
+};
+/**
+ * Generates global CSS variables from a theme object
+ * @param theme The theme object to generate CSS for
+ * @returns The generated CSS string
+ */
+const generateGlobalThemeCSS = (theme) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const themeValidity = isValidTheme(theme, 'generateGlobalThemeCSS');
+    if (!themeValidity) {
+        return '';
+    }
+    // Exclude palette, components, and config from the default tokens
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { palette} = theme, defaultTokens = __rest(theme, ["palette", "components", "config"]);
+    // Generate CSS variables for the default design tokens
+    const defaultTokensCSS = generateCSSVars(defaultTokens);
+    // Generate CSS variables for the light color palette
+    const lightTokensCSS = generateCSSVars(palette.light);
+    // Generate CSS variables for the dark color palette
+    const darkTokensCSS = generateCSSVars(palette.dark);
+    // Generate CSS variable for the high contrast color palette
+    const highContrastTokensCSS = generateCSSVars(palette.highContrast);
+    // Generate CSS variable for the high contrast dark color palette
+    const highContrastDarkTokensCSS = generateCSSVars(palette.highContrastDark);
+    let paletteTokensCSS = lightTokensCSS;
+    if (((_a = palette.highContrastDark) === null || _a === void 0 ? void 0 : _a.enabled) === 'always') {
+        // Include CSS variables for the high contrast dark color palette instead of
+        // the light palette if high contrast dark palette enabled is 'always'
+        paletteTokensCSS = highContrastDarkTokensCSS;
+    }
+    else if (((_b = palette.highContrast) === null || _b === void 0 ? void 0 : _b.enabled) === 'always') {
+        // Include CSS variables for the dark color palette instead of
+        // the light palette if dark palette enabled is 'always'
+        paletteTokensCSS = highContrastTokensCSS;
+    }
+    else if (((_c = palette.dark) === null || _c === void 0 ? void 0 : _c.enabled) === 'always') {
+        // Include CSS variables for the dark color palette instead of
+        // the light palette if dark palette enabled is 'always'
+        paletteTokensCSS = darkTokensCSS;
+    }
+    let css = `
+    ${CSS_ROOT_SELECTOR} {
+      ${defaultTokensCSS}
+      ${paletteTokensCSS || ''}
+    }
+  `;
+    if (((_d = palette.highContrastDark) === null || _d === void 0 ? void 0 : _d.enabled) === 'class' && highContrastDarkTokensCSS) {
+        // Include CSS variables for the high contrast dark color palette inside of a
+        // class if high contrast dark palette enabled is 'class'
+        css += `
+      .ion-palette-high-contrast.ion-palette-dark {
+        ${highContrastDarkTokensCSS}
+      }
+    `;
+    }
+    else if (((_e = palette.highContrast) === null || _e === void 0 ? void 0 : _e.enabled) === 'class' && highContrastTokensCSS) {
+        // Include CSS variables for the high contrast color palette inside of a
+        // class if high contrast palette enabled is 'class'
+        css += `
+      .ion-palette-high-contrast {
+        ${highContrastTokensCSS}
+      }
+    `;
+    }
+    else if (((_f = palette.dark) === null || _f === void 0 ? void 0 : _f.enabled) === 'class' && darkTokensCSS) {
+        // Include CSS variables for the dark color palette inside of a
+        // class if dark palette enabled is 'class'
+        css += `
+      .ion-palette-dark {
+        ${darkTokensCSS}
+      }
+    `;
+    }
+    if (((_g = palette.highContrastDark) === null || _g === void 0 ? void 0 : _g.enabled) === 'system' && highContrastDarkTokensCSS) {
+        // Include CSS variables for the high contrast dark color palette inside of the
+        // high contrast dark media query if high contrast dark palette enabled is 'system'
+        css += `
+      @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
+        ${CSS_ROOT_SELECTOR} {
+          ${highContrastDarkTokensCSS}
+        }
+      }
+    `;
+    }
+    else if (((_h = palette.highContrast) === null || _h === void 0 ? void 0 : _h.enabled) === 'system' && highContrastTokensCSS) {
+        // Include CSS variables for the high contrast color palette inside of the
+        // high contrast media query if high contrast palette enabled is 'system'
+        css += `
+      @media (prefers-contrast: more) {
+        ${CSS_ROOT_SELECTOR} {
+          ${highContrastTokensCSS}
+        }
+      }
+    `;
+    }
+    else if (((_j = palette.dark) === null || _j === void 0 ? void 0 : _j.enabled) === 'system' && darkTokensCSS) {
+        // Include CSS variables for the dark color palette inside of the
+        // dark color scheme media query if dark palette enabled is 'system'
+        css += `
+      @media (prefers-color-scheme: dark) {
+        ${CSS_ROOT_SELECTOR} {
+          ${darkTokensCSS}
+        }
+      }
+    `;
+    }
+    // Add color classes
+    const colorClasses = generateColorClasses(theme);
+    return css + '\n' + colorClasses;
+};
+/**
+ * Applies the global theme from the provided base theme and user theme
+ * @param baseTheme The default theme
+ * @param userTheme The user's custom theme (optional)
+ * @returns The combined theme object (or base theme if no user theme was provided)
+ */
+const applyGlobalTheme = (baseTheme, userTheme) => {
+    // If no base theme provided, error
+    if (typeof baseTheme !== 'object' || Array.isArray(baseTheme)) {
+        console.error('applyGlobalTheme: Valid base theme object is required', baseTheme);
+        return {};
+    }
+    // If no user theme provided or it is invalid, apply base theme
+    if (!userTheme || typeof userTheme !== 'object' || Array.isArray(userTheme)) {
+        if (userTheme) {
+            console.error('applyGlobalTheme: Invalid user theme provided', userTheme);
+        }
+        injectCSS(generateGlobalThemeCSS(baseTheme));
+        return baseTheme;
+    }
+    // Merge themes and apply
+    const mergedTheme = deepMerge(baseTheme, userTheme);
+    injectCSS(generateGlobalThemeCSS(mergedTheme));
+    return mergedTheme;
+};
+/**
+ * Generates component's themed CSS class with CSS variables
+ * from its theme object
+ * @param componentTheme The component's object to generate CSS for (e.g., IonChip { })
+ * @param components An object mapping component names (e.g. `IonChip`) to a nested
+ * design-token configuration. Each configuration can contain arbitrary levels of
+ * token groups (such as `size`, `state`, `shape`, `variant`, etc.), where leaf values
+ * are CSS-compatible values. The structure is recursively flattened into CSS custom
+ * properties using kebab-case keys and an `--ion-<component>-` prefix.
+ *
+ * Example:
+ * ```json
+ * {
+ *   IonChip: {
+ *     size: { small: { height: "24px" } },
+ *     state: { disabled: { opacity: "0.4" } }
+ *   }
+ * }
+ * ```
+ *
+ * Becomes:
+ * ```css
+ * ion-chip {
+ *   --ion-chip-size-small-height: 24px;
+ *   --ion-chip-state-disabled-opacity: 0.4;
+ * }
+ * ```
+ * @returns string containing the component's themed CSS variables
+ */
+const generateComponentsThemeCSS = (components) => {
+    let css = '';
+    for (const [component, componentTokens] of Object.entries(components)) {
+        const componentTag = convertToKebabCase(component);
+        const vars = generateCSSVars(componentTokens, `--${componentTag}-`);
+        const componentBlock = `
+      ${componentTag} {
+        ${vars}
+      }
+    `;
+        css += componentBlock;
+    }
+    return css;
+};
+/**
+ * Applies a component theme to an element if it exists in the custom theme
+ * @param element The element to apply the theme to
+ * @returns true if theme was applied, false otherwise
+ */
+const applyComponentsTheme = (theme) => {
+    const themeValidity = isValidTheme(theme, 'applyComponentsTheme');
+    if (!themeValidity) {
+        return '';
+    }
+    const { components } = theme;
+    if (!components) {
+        return '';
+    }
+    injectCSS(generateComponentsThemeCSS(components));
+    return components;
+};
+/**
+ * Parses a hex color string and returns RGB values as an array.
+ *
+ * @param hex Hex color (e.g. `'#ffffff'` or `'#fff'`)
+ *
+ * @returns RGB values as `[r, g, b]` array
+ */
+const parseHex = (hex) => {
+    const cleanHex = hex.replace('#', '');
+    // Short hex format like 'fff' → expand to 'ffffff'
+    if (cleanHex.length === 3) {
+        return [
+            parseInt(cleanHex[0] + cleanHex[0], 16),
+            parseInt(cleanHex[1] + cleanHex[1], 16),
+            parseInt(cleanHex[2] + cleanHex[2], 16),
+        ];
+        // Full hex format like 'ffffff'
+    }
+    else {
+        return [
+            parseInt(cleanHex.substring(0, 2), 16),
+            parseInt(cleanHex.substring(2, 4), 16),
+            parseInt(cleanHex.substring(4, 6), 16),
+        ];
+    }
+};
+/**
+ * Converts a hex color to a string of RGB comma-separated values.
+ *
+ * @param hex Hex color (e.g. `'#ffffff'` or `'#fff'`)
+ *
+ * @returns RGB string (e.g. `'255, 255, 255'`)
+ */
+const hexToRgb = (hex) => {
+    const [r, g, b] = parseHex(hex);
+    return `${r}, ${g}, ${b}`;
+};
+/**
+ * Mixes two hex colors by a given weight percentage and returns
+ * it as a hex color.
+ *
+ * @param baseColor Base color (e.g. `'#0054e9'`)
+ * @param mixColor Color to mix in (e.g. `'#000000'` or `'#fff'`)
+ * @param weight Weight percentage as string - how much of mixColor to mix into baseColor (e.g. `'12%'`)
+ *
+ * @returns Mixed hex color (e.g. `'#004acd'`)
+ */
+const mix = (baseColor, mixColor, weight) => {
+    // Parse weight percentage
+    const w = parseFloat(weight.replace('%', '')) / 100;
+    // Parse both colors
+    const [baseR, baseG, baseB] = parseHex(baseColor);
+    const [mixR, mixG, mixB] = parseHex(mixColor);
+    // Mix mixColor into baseColor by weight
+    const r = Math.round(baseR * (1 - w) + mixR * w);
+    const g = Math.round(baseG * (1 - w) + mixG * w);
+    const b = Math.round(baseB * (1 - w) + mixB * w);
+    const toHex = (n) => n.toString(16).padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+};
+/**
+ * Converts a string to kebab-case
+ *
+ * @internal
+ * @param str The string to convert (e.g., 'IonChip')
+ * @returns The kebab-case string (e.g., 'ion-chip')
+ */
+const convertToKebabCase = (str) => {
+    return str
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/[\s_]+/g, '-')
+        .toLowerCase();
+};
+/**
+ * Verifies that a theme object is valid
+ *
+ * @internal
+ * @param theme The theme object to validate
+ * @param source The source or context where the theme is being validated
+ * @returns A boolean indicating whether the theme is valid
+ */
+const isValidTheme = (theme, source, showLog = true) => {
+    if (typeof theme !== 'object' || Array.isArray(theme)) {
+        if (showLog) {
+            printIonWarning(`${source}: Invalid theme object provided`, theme);
+        }
+        return false;
+    }
+    if (Object.keys(theme).length === 0) {
+        if (showLog) {
+            printIonWarning(`${source}: Empty theme object provided`, theme);
+        }
+        return false;
+    }
+    return true;
+};
+/**
+ * Generates a series of color steps between a base color and a mix color.
+ *
+ * @param baseColor Base color (e.g. `'#0054e9'`)
+ * @param mixColor Color to mix in (e.g. `'#000000'` or `'#fff'`)
+ *
+ * @internal
+ * @returns An object containing the generated color steps
+ */
+const generateColorSteps = (baseColor, mixColor) => {
+    const colorSteps = {};
+    for (let step = 50; step <= 950; step += 50) {
+        const weight = `${step / 10}%`;
+        colorSteps[`${step}`] = mix(baseColor, mixColor, weight);
+    }
+    return colorSteps;
+};
+
+const colors$3 = {
+    primary: '#4d8dff',
+    secondary: '#46b1ff',
+    tertiary: '#8482fb',
+    success: '#2dd55b',
+    warning: '#ffce31',
+    danger: '#f24c58',
+    light: '#222428',
+    medium: '#989aa2',
+    dark: '#f4f5f8',
+};
+const darkTheme = {
+    enabled: 'never',
+    color: {
+        primary: {
+            bold: {
+                base: colors$3.primary,
+                contrast: '#000',
+                foreground: mix(colors$3.primary, '#000', '4%'),
+                shade: mix(colors$3.primary, '#000', '4%'),
+                tint: mix(colors$3.primary, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors$3.primary, '8%'),
+                contrast: colors$3.primary,
+                foreground: mix(colors$3.primary, '#000', '4%'),
+                shade: mix('#000', colors$3.primary, '4%'),
+                tint: mix('#000', colors$3.primary, '12%'),
+            },
+        },
+        secondary: {
+            bold: {
+                base: colors$3.secondary,
+                contrast: '#000',
+                foreground: mix(colors$3.secondary, '#000', '4%'),
+                shade: mix(colors$3.secondary, '#000', '4%'),
+                tint: mix(colors$3.secondary, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors$3.secondary, '8%'),
+                contrast: colors$3.secondary,
+                foreground: mix(colors$3.secondary, '#000', '4%'),
+                shade: mix('#000', colors$3.secondary, '4%'),
+                tint: mix('#000', colors$3.secondary, '12%'),
+            },
+        },
+        tertiary: {
+            bold: {
+                base: colors$3.tertiary,
+                contrast: '#000',
+                foreground: mix(colors$3.tertiary, '#000', '4%'),
+                shade: mix(colors$3.tertiary, '#000', '4%'),
+                tint: mix(colors$3.tertiary, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors$3.tertiary, '8%'),
+                contrast: colors$3.tertiary,
+                foreground: mix(colors$3.tertiary, '#000', '4%'),
+                shade: mix('#000', colors$3.tertiary, '4%'),
+                tint: mix('#000', colors$3.tertiary, '12%'),
+            },
+        },
+        success: {
+            bold: {
+                base: colors$3.success,
+                contrast: '#000',
+                foreground: mix(colors$3.success, '#000', '4%'),
+                shade: mix(colors$3.success, '#000', '4%'),
+                tint: mix(colors$3.success, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors$3.success, '8%'),
+                contrast: colors$3.success,
+                foreground: mix(colors$3.success, '#000', '4%'),
+                shade: mix('#000', colors$3.success, '4%'),
+                tint: mix('#000', colors$3.success, '12%'),
+            },
+        },
+        warning: {
+            bold: {
+                base: colors$3.warning,
+                contrast: '#000',
+                foreground: mix(colors$3.warning, '#000', '4%'),
+                shade: mix(colors$3.warning, '#000', '4%'),
+                tint: mix(colors$3.warning, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors$3.warning, '8%'),
+                contrast: colors$3.warning,
+                foreground: mix(colors$3.warning, '#000', '4%'),
+                shade: mix('#000', colors$3.warning, '4%'),
+                tint: mix('#000', colors$3.warning, '12%'),
+            },
+        },
+        danger: {
+            bold: {
+                base: colors$3.danger,
+                contrast: '#000',
+                foreground: mix(colors$3.danger, '#000', '4%'),
+                shade: mix(colors$3.danger, '#000', '4%'),
+                tint: mix(colors$3.danger, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors$3.danger, '8%'),
+                contrast: colors$3.danger,
+                foreground: mix(colors$3.danger, '#000', '4%'),
+                shade: mix('#000', colors$3.danger, '4%'),
+                tint: mix('#000', colors$3.danger, '12%'),
+            },
+        },
+        light: {
+            bold: {
+                base: colors$3.light,
+                contrast: '#fff',
+                foreground: mix(colors$3.light, '#000', '4%'),
+                shade: mix(colors$3.light, '#000', '4%'),
+                tint: mix(colors$3.light, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors$3.light, '8%'),
+                contrast: colors$3.light,
+                foreground: mix(colors$3.light, '#000', '4%'),
+                shade: mix('#000', colors$3.light, '4%'),
+                tint: mix('#000', colors$3.light, '12%'),
+            },
+        },
+        medium: {
+            bold: {
+                base: colors$3.medium,
+                contrast: '#000',
+                foreground: mix(colors$3.medium, '#000', '4%'),
+                shade: mix(colors$3.medium, '#000', '4%'),
+                tint: mix(colors$3.medium, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors$3.medium, '8%'),
+                contrast: colors$3.medium,
+                foreground: mix(colors$3.medium, '#000', '4%'),
+                shade: mix('#000', colors$3.medium, '4%'),
+                tint: mix('#000', colors$3.medium, '12%'),
+            },
+        },
+        dark: {
+            bold: {
+                base: colors$3.dark,
+                contrast: '#000',
+                foreground: mix(colors$3.dark, '#000', '4%'),
+                shade: mix(colors$3.dark, '#000', '4%'),
+                tint: mix(colors$3.dark, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors$3.dark, '8%'),
+                contrast: colors$3.dark,
+                foreground: mix(colors$3.dark, '#000', '4%'),
+                shade: mix('#000', colors$3.dark, '4%'),
+                tint: mix('#000', colors$3.dark, '12%'),
+            },
+        },
+    },
+    backgroundColor: '#000000',
+    backgroundColorRgb: '0, 0, 0',
+    textColor: '#ffffff',
+    textColorRgb: '255, 255, 255',
+    backgroundColorStep: {
+        50: '#0d0d0d',
+        100: '#1a1a1a',
+        150: '#262626',
+        200: '#333333',
+        250: '#404040',
+        300: '#4d4d4d',
+        350: '#595959',
+        400: '#666666',
+        450: '#737373',
+        500: '#898989',
+        550: '#8c8c8c',
+        600: '#999999',
+        650: '#a6a6a6',
+        700: '#b3b3b3',
+        750: '#bfbfbf',
+        800: '#cccccc',
+        850: '#d9d9d9',
+        900: '#e6e6e6',
+        950: '#f2f2f2',
+    },
+    textColorStep: {
+        50: '#f2f2f2',
+        100: '#e6e6e6',
+        150: '#d9d9d9',
+        200: '#cccccc',
+        250: '#bfbfbf',
+        300: '#b3b3b3',
+        350: '#a6a6a6',
+        400: '#999999',
+        450: '#8c8c8c',
+        500: '#808080',
+        550: '#737373',
+        600: '#666666',
+        650: '#595959',
+        700: '#4d4d4d',
+        750: '#404040',
+        800: '#333333',
+        850: '#262626',
+        900: '#1a1a1a',
+        950: '#0d0d0d',
+    },
+    components: {
+        IonCard: {
+            background: '#1c1c1d',
+        },
+        IonItem: {
+            background: '#000000',
+        },
+    },
+};
+
+const colors$2 = {
+    primary: '#7cabff',
+    secondary: '#62bdff',
+    tertiary: '#b6b9f9',
+    success: '#4ada71',
+    warning: '#ffce31',
+    danger: '#fc9aa2',
+    light: '#222428',
+    medium: '#a8aab3',
+    dark: '#f4f5f8',
+};
+const highContrastDarkTheme = {
+    enabled: 'never',
+    color: {
+        primary: {
+            bold: {
+                base: colors$2.primary,
+                contrast: '#000',
+                foreground: colors$2.primary,
+                shade: mix(colors$2.primary, '#000', '12%'),
+                tint: mix(colors$2.primary, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$2.primary, '8%'),
+                contrast: colors$2.primary,
+                foreground: mix(colors$2.primary, '#000', '12%'),
+                shade: mix('#fff', colors$2.primary, '12%'),
+                tint: mix('#fff', colors$2.primary, '4%'),
+            },
+        },
+        secondary: {
+            bold: {
+                base: colors$2.secondary,
+                contrast: '#000',
+                foreground: colors$2.secondary,
+                shade: mix(colors$2.secondary, '#000', '12%'),
+                tint: mix(colors$2.secondary, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$2.secondary, '8%'),
+                contrast: colors$2.secondary,
+                foreground: mix(colors$2.secondary, '#000', '12%'),
+                shade: mix('#fff', colors$2.secondary, '12%'),
+                tint: mix('#fff', colors$2.secondary, '4%'),
+            },
+        },
+        tertiary: {
+            bold: {
+                base: colors$2.tertiary,
+                contrast: '#000',
+                foreground: colors$2.tertiary,
+                shade: mix(colors$2.tertiary, '#000', '12%'),
+                tint: mix(colors$2.tertiary, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$2.tertiary, '8%'),
+                contrast: colors$2.tertiary,
+                foreground: mix(colors$2.tertiary, '#000', '12%'),
+                shade: mix('#fff', colors$2.tertiary, '12%'),
+                tint: mix('#fff', colors$2.tertiary, '4%'),
+            },
+        },
+        success: {
+            bold: {
+                base: colors$2.success,
+                contrast: '#000',
+                foreground: colors$2.success,
+                shade: mix(colors$2.success, '#000', '12%'),
+                tint: mix(colors$2.success, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$2.success, '8%'),
+                contrast: colors$2.success,
+                foreground: mix(colors$2.success, '#000', '12%'),
+                shade: mix('#fff', colors$2.success, '12%'),
+                tint: mix('#fff', colors$2.success, '4%'),
+            },
+        },
+        warning: {
+            bold: {
+                base: colors$2.warning,
+                contrast: '#000',
+                foreground: colors$2.warning,
+                shade: mix(colors$2.warning, '#000', '12%'),
+                tint: mix(colors$2.warning, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$2.warning, '8%'),
+                contrast: colors$2.warning,
+                foreground: mix(colors$2.warning, '#000', '12%'),
+                shade: mix('#fff', colors$2.warning, '12%'),
+                tint: mix('#fff', colors$2.warning, '4%'),
+            },
+        },
+        danger: {
+            bold: {
+                base: colors$2.danger,
+                contrast: '#000',
+                foreground: colors$2.danger,
+                shade: mix(colors$2.danger, '#000', '12%'),
+                tint: mix(colors$2.danger, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$2.danger, '8%'),
+                contrast: colors$2.danger,
+                foreground: mix(colors$2.danger, '#000', '12%'),
+                shade: mix('#fff', colors$2.danger, '12%'),
+                tint: mix('#fff', colors$2.danger, '4%'),
+            },
+        },
+        light: {
+            bold: {
+                base: colors$2.light,
+                contrast: '#fff',
+                foreground: colors$2.light,
+                shade: mix(colors$2.light, '#000', '12%'),
+                tint: mix(colors$2.light, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$2.light, '8%'),
+                contrast: colors$2.light,
+                foreground: mix(colors$2.light, '#000', '12%'),
+                shade: mix('#fff', colors$2.light, '12%'),
+                tint: mix('#fff', colors$2.light, '4%'),
+            },
+        },
+        medium: {
+            bold: {
+                base: colors$2.medium,
+                contrast: '#000',
+                foreground: colors$2.medium,
+                shade: mix(colors$2.medium, '#000', '12%'),
+                tint: mix(colors$2.medium, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$2.medium, '8%'),
+                contrast: colors$2.medium,
+                foreground: mix(colors$2.medium, '#000', '12%'),
+                shade: mix('#fff', colors$2.medium, '12%'),
+                tint: mix('#fff', colors$2.medium, '4%'),
+            },
+        },
+        dark: {
+            bold: {
+                base: colors$2.dark,
+                contrast: '#000',
+                foreground: colors$2.dark,
+                shade: mix(colors$2.dark, '#000', '12%'),
+                tint: mix(colors$2.dark, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$2.dark, '8%'),
+                contrast: colors$2.dark,
+                foreground: mix(colors$2.dark, '#000', '12%'),
+                shade: mix('#fff', colors$2.dark, '12%'),
+                tint: mix('#fff', colors$2.dark, '4%'),
+            },
+        },
+    },
+    backgroundColor: '#000000',
+    backgroundColorRgb: '0, 0, 0',
+    textColor: '#ffffff',
+    textColorRgb: '255, 255, 255',
+    backgroundColorStep: {
+        50: '#0d0d0d',
+        100: '#1a1a1a',
+        150: '#262626',
+        200: '#333333',
+        250: '#404040',
+        300: '#4d4d4d',
+        350: '#595959',
+        400: '#666666',
+        450: '#737373',
+        500: '#808080',
+        550: '#8c8c8c',
+        600: '#999999',
+        650: '#a6a6a6',
+        700: '#b3b3b3',
+        750: '#bfbfbf',
+        800: '#cccccc',
+        850: '#d9d9d9',
+        900: '#e6e6e6',
+        950: '#f2f2f2',
+    },
+    textColorStep: {
+        50: '#f9f9f9',
+        100: '#f3f3f3',
+        150: '#ededed',
+        200: '#e7e7e7',
+        250: '#e1e1e1',
+        300: '#dbdbdb',
+        350: '#d5d5d5',
+        400: '#cfcfcf',
+        450: '#c9c9c9',
+        500: '#c4c4c4',
+        550: '#bebebe',
+        600: '#b8b8b8',
+        650: '#b2b2b2',
+        700: '#acacac',
+        750: '#a6a6a6',
+        800: '#a0a0a0',
+        850: '#9a9a9a',
+        900: '#949494',
+        950: '#8e8e8e',
+    },
+};
+
+const colors$1 = {
+    primary: '#003fae',
+    secondary: '#01487b',
+    tertiary: '#3400e6',
+    success: '#004314',
+    warning: '#5f4100',
+    danger: '#9c000c',
+    light: '#f4f5f8',
+    medium: '#444446',
+    dark: '#222428',
+};
+const highContrastTheme = {
+    enabled: 'never',
+    color: {
+        primary: {
+            bold: {
+                base: colors$1.primary,
+                contrast: '#fff',
+                foreground: colors$1.primary,
+                shade: mix(colors$1.primary, '#000', '12%'),
+                tint: mix(colors$1.primary, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$1.primary, '8%'),
+                contrast: colors$1.primary,
+                foreground: mix(colors$1.primary, '#000', '12%'),
+                shade: mix('#fff', colors$1.primary, '12%'),
+                tint: mix('#fff', colors$1.primary, '4%'),
+            },
+        },
+        secondary: {
+            bold: {
+                base: colors$1.secondary,
+                contrast: '#fff',
+                foreground: colors$1.secondary,
+                shade: mix(colors$1.secondary, '#000', '12%'),
+                tint: mix(colors$1.secondary, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$1.secondary, '8%'),
+                contrast: colors$1.secondary,
+                foreground: mix(colors$1.secondary, '#000', '12%'),
+                shade: mix('#fff', colors$1.secondary, '12%'),
+                tint: mix('#fff', colors$1.secondary, '4%'),
+            },
+        },
+        tertiary: {
+            bold: {
+                base: colors$1.tertiary,
+                contrast: '#fff',
+                foreground: colors$1.tertiary,
+                shade: mix(colors$1.tertiary, '#000', '12%'),
+                tint: mix(colors$1.tertiary, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$1.tertiary, '8%'),
+                contrast: colors$1.tertiary,
+                foreground: mix(colors$1.tertiary, '#000', '12%'),
+                shade: mix('#fff', colors$1.tertiary, '12%'),
+                tint: mix('#fff', colors$1.tertiary, '4%'),
+            },
+        },
+        success: {
+            bold: {
+                base: colors$1.success,
+                contrast: '#fff',
+                foreground: colors$1.success,
+                shade: mix(colors$1.success, '#000', '12%'),
+                tint: mix(colors$1.success, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$1.success, '8%'),
+                contrast: colors$1.success,
+                foreground: mix(colors$1.success, '#000', '12%'),
+                shade: mix('#fff', colors$1.success, '12%'),
+                tint: mix('#fff', colors$1.success, '4%'),
+            },
+        },
+        warning: {
+            bold: {
+                base: colors$1.warning,
+                contrast: '#fff',
+                foreground: colors$1.warning,
+                shade: mix(colors$1.warning, '#000', '12%'),
+                tint: mix(colors$1.warning, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$1.warning, '8%'),
+                contrast: colors$1.warning,
+                foreground: mix(colors$1.warning, '#000', '12%'),
+                shade: mix('#fff', colors$1.warning, '12%'),
+                tint: mix('#fff', colors$1.warning, '4%'),
+            },
+        },
+        danger: {
+            bold: {
+                base: colors$1.danger,
+                contrast: '#fff',
+                foreground: colors$1.danger,
+                shade: mix(colors$1.danger, '#000', '12%'),
+                tint: mix(colors$1.danger, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$1.danger, '8%'),
+                contrast: colors$1.danger,
+                foreground: mix(colors$1.danger, '#000', '12%'),
+                shade: mix('#fff', colors$1.danger, '12%'),
+                tint: mix('#fff', colors$1.danger, '4%'),
+            },
+        },
+        light: {
+            bold: {
+                base: colors$1.light,
+                contrast: '#000',
+                foreground: colors$1.light,
+                shade: mix(colors$1.light, '#000', '12%'),
+                tint: mix(colors$1.light, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$1.light, '8%'),
+                contrast: colors$1.light,
+                foreground: mix(colors$1.light, '#000', '12%'),
+                shade: mix('#fff', colors$1.light, '12%'),
+                tint: mix('#fff', colors$1.light, '4%'),
+            },
+        },
+        medium: {
+            bold: {
+                base: colors$1.medium,
+                contrast: '#fff',
+                foreground: colors$1.medium,
+                shade: mix(colors$1.medium, '#000', '12%'),
+                tint: mix(colors$1.medium, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$1.medium, '8%'),
+                contrast: colors$1.medium,
+                foreground: mix(colors$1.medium, '#000', '12%'),
+                shade: mix('#fff', colors$1.medium, '12%'),
+                tint: mix('#fff', colors$1.medium, '4%'),
+            },
+        },
+        dark: {
+            bold: {
+                base: colors$1.dark,
+                contrast: '#fff',
+                foreground: colors$1.dark,
+                shade: mix(colors$1.dark, '#000', '12%'),
+                tint: mix(colors$1.dark, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors$1.dark, '8%'),
+                contrast: colors$1.dark,
+                foreground: mix(colors$1.dark, '#000', '12%'),
+                shade: mix('#fff', colors$1.dark, '12%'),
+                tint: mix('#fff', colors$1.dark, '4%'),
+            },
+        },
+    },
+    backgroundColor: '#ffffff',
+    backgroundColorRgb: '255, 255, 255',
+    textColor: '#000000',
+    textColorRgb: '0, 0, 0',
+    textColorStep: generateColorSteps('#888888', '#000000'),
+};
+
+const colors = {
+    primary: '#0054e9',
+    secondary: '#0163aa',
+    tertiary: '#6030ff',
+    success: '#2dd55b',
+    warning: '#ffc409',
+    danger: '#c5000f',
+    light: '#f4f5f8',
+    medium: '#636469',
+    dark: '#222428',
+};
+const lightTheme = {
+    color: {
+        primary: {
+            bold: {
+                base: colors.primary,
+                contrast: '#fff',
+                foreground: mix(colors.primary, '#000', '12%'),
+                shade: mix(colors.primary, '#000', '12%'),
+                tint: mix(colors.primary, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors.primary, '8%'),
+                contrast: colors.primary,
+                foreground: mix(colors.primary, '#000', '12%'),
+                shade: mix('#fff', colors.primary, '12%'),
+                tint: mix('#fff', colors.primary, '4%'),
+            },
+        },
+        secondary: {
+            bold: {
+                base: colors.secondary,
+                contrast: '#fff',
+                foreground: mix(colors.secondary, '#000', '12%'),
+                shade: mix(colors.secondary, '#000', '12%'),
+                tint: mix(colors.secondary, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors.secondary, '8%'),
+                contrast: colors.secondary,
+                foreground: mix(colors.secondary, '#000', '12%'),
+                shade: mix('#fff', colors.secondary, '12%'),
+                tint: mix('#fff', colors.secondary, '4%'),
+            },
+        },
+        tertiary: {
+            bold: {
+                base: colors.tertiary,
+                contrast: '#fff',
+                foreground: mix(colors.tertiary, '#000', '12%'),
+                shade: mix(colors.tertiary, '#000', '12%'),
+                tint: mix(colors.tertiary, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors.tertiary, '8%'),
+                contrast: colors.tertiary,
+                foreground: mix(colors.tertiary, '#000', '12%'),
+                shade: mix('#fff', colors.tertiary, '12%'),
+                tint: mix('#fff', colors.tertiary, '4%'),
+            },
+        },
+        success: {
+            bold: {
+                base: colors.success,
+                contrast: '#000',
+                foreground: mix(colors.success, '#000', '12%'),
+                shade: mix(colors.success, '#000', '12%'),
+                tint: mix(colors.success, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors.success, '8%'),
+                contrast: colors.success,
+                foreground: mix(colors.success, '#000', '12%'),
+                shade: mix('#fff', colors.success, '12%'),
+                tint: mix('#fff', colors.success, '4%'),
+            },
+        },
+        warning: {
+            bold: {
+                base: colors.warning,
+                contrast: '#000',
+                foreground: mix(colors.warning, '#000', '12%'),
+                shade: mix(colors.warning, '#000', '12%'),
+                tint: mix(colors.warning, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors.warning, '8%'),
+                contrast: colors.warning,
+                foreground: mix(colors.warning, '#000', '12%'),
+                shade: mix('#fff', colors.warning, '12%'),
+                tint: mix('#fff', colors.warning, '4%'),
+            },
+        },
+        danger: {
+            bold: {
+                base: colors.danger,
+                contrast: '#fff',
+                foreground: mix(colors.danger, '#000', '12%'),
+                shade: mix(colors.danger, '#000', '12%'),
+                tint: mix(colors.danger, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors.danger, '8%'),
+                contrast: colors.danger,
+                foreground: mix(colors.danger, '#000', '12%'),
+                shade: mix('#fff', colors.danger, '12%'),
+                tint: mix('#fff', colors.danger, '4%'),
+            },
+        },
+        light: {
+            bold: {
+                base: colors.light,
+                contrast: '#000',
+                foreground: mix(colors.light, '#000', '12%'),
+                shade: mix(colors.light, '#000', '12%'),
+                tint: mix(colors.light, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors.light, '8%'),
+                contrast: colors.light,
+                foreground: mix(colors.light, '#000', '12%'),
+                shade: mix('#fff', colors.light, '12%'),
+                tint: mix('#fff', colors.light, '4%'),
+            },
+        },
+        medium: {
+            bold: {
+                base: colors.medium,
+                contrast: '#fff',
+                foreground: mix(colors.medium, '#000', '12%'),
+                shade: mix(colors.medium, '#000', '12%'),
+                tint: mix(colors.medium, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors.medium, '8%'),
+                contrast: colors.medium,
+                foreground: mix(colors.medium, '#000', '12%'),
+                shade: mix('#fff', colors.medium, '12%'),
+                tint: mix('#fff', colors.medium, '4%'),
+            },
+        },
+        dark: {
+            bold: {
+                base: colors.dark,
+                contrast: '#fff',
+                foreground: mix(colors.dark, '#000', '12%'),
+                shade: mix(colors.dark, '#000', '12%'),
+                tint: mix(colors.dark, '#fff', '10%'),
+            },
+            subtle: {
+                base: mix('#fff', colors.dark, '8%'),
+                contrast: colors.dark,
+                foreground: mix(colors.dark, '#000', '12%'),
+                shade: mix('#fff', colors.dark, '12%'),
+                tint: mix('#fff', colors.dark, '4%'),
+            },
+        },
+    },
+};
+
 /*
  Stencil Client Platform v4.43.0 | MIT Licensed | https://stenciljs.com
  */
@@ -3412,4 +5262,4 @@ function transformTag(tag) {
   return tag;
 }
 
-export { Build as B, Fragment as F, H, LogLevel as L, readTask as a, bootstrapLazy as b, createEvent as c, Host as d, config as e, printIonWarning as f, getElement as g, h, forceUpdate as i, printIonError as j, getAssetPath as k, configFromSession as l, configFromURL as m, saveConfig as n, getMode as o, promiseResolve as p, setMode as q, registerInstance as r, setNonce as s, printRequiredElementError as t, writeTask as w };
+export { printRequiredElementError as $, clamp as A, hasLazyBuild as B, addEventListener as C, isSafeNumber as D, hasShadowDom as E, getAssetPath as F, shallowEqualStringMap as G, H, assert as I, removeEventListener as J, debounce as K, LogLevel as L, transitionEndAsync as M, highContrastDarkTheme as N, highContrastTheme as O, darkTheme as P, lightTheme as Q, configFromSession as R, configFromURL as S, saveConfig as T, getCustomTheme as U, applyGlobalTheme as V, applyComponentsTheme as W, getMode as X, setMode as Y, Build as Z, focusVisibleElement as _, createEvent as a, startFocusVisible as a0, isEndSide as a1, focusElements as a2, Fragment as a3, pointerCoord as a4, focusVisible as a5, bootstrapLazy as b, componentOnReady as c, readTask as d, raf as e, Host as f, getClassMap as g, h, getElement as i, config as j, printIonWarning as k, forceUpdate as l, inheritAriaAttributes as m, createColorClasses as n, openURL as o, promiseResolve as p, hostContext as q, registerInstance as r, setNonce as s, renderHiddenInput as t, debounceEvent as u, inheritAttributes as v, writeTask as w, waitForComponentReady as x, printIonError as y, getElementRoot as z };