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

package/dist/cjs/{index-CzcLEdQ5.js → index-BDthk8R7.js}

@@ -18,6 +18,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) {
@@ -123,6 +150,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
  */
@@ -3418,23 +5268,58 @@ exports.Build = Build;
 exports.Fragment = Fragment;
 exports.H = H;
 exports.Host = Host;
+exports.addEventListener = addEventListener;
+exports.applyComponentsTheme = applyComponentsTheme;
+exports.applyGlobalTheme = applyGlobalTheme;
+exports.assert = assert;
 exports.bootstrapLazy = bootstrapLazy;
+exports.clamp = clamp;
+exports.componentOnReady = componentOnReady;
 exports.config = config;
 exports.configFromSession = configFromSession;
 exports.configFromURL = configFromURL;
+exports.createColorClasses = createColorClasses;
 exports.createEvent = createEvent;
+exports.darkTheme = darkTheme;
+exports.debounce = debounce;
+exports.debounceEvent = debounceEvent;
+exports.focusElements = focusElements;
+exports.focusVisible = focusVisible;
+exports.focusVisibleElement = focusVisibleElement;
 exports.forceUpdate = forceUpdate;
 exports.getAssetPath = getAssetPath;
+exports.getClassMap = getClassMap;
+exports.getCustomTheme = getCustomTheme;
 exports.getElement = getElement;
+exports.getElementRoot = getElementRoot;
 exports.getMode = getMode;
 exports.h = h;
+exports.hasLazyBuild = hasLazyBuild;
+exports.hasShadowDom = hasShadowDom;
+exports.highContrastDarkTheme = highContrastDarkTheme;
+exports.highContrastTheme = highContrastTheme;
+exports.hostContext = hostContext;
+exports.inheritAriaAttributes = inheritAriaAttributes;
+exports.inheritAttributes = inheritAttributes;
+exports.isEndSide = isEndSide;
+exports.isSafeNumber = isSafeNumber;
+exports.lightTheme = lightTheme;
+exports.openURL = openURL;
+exports.pointerCoord = pointerCoord;
 exports.printIonError = printIonError;
 exports.printIonWarning = printIonWarning;
 exports.printRequiredElementError = printRequiredElementError;
 exports.promiseResolve = promiseResolve;
+exports.raf = raf;
 exports.readTask = readTask;
 exports.registerInstance = registerInstance;
+exports.removeEventListener = removeEventListener;
+exports.renderHiddenInput = renderHiddenInput;
 exports.saveConfig = saveConfig;
 exports.setMode = setMode;
 exports.setNonce = setNonce;
+exports.shallowEqualStringMap = shallowEqualStringMap;
+exports.startFocusVisible = startFocusVisible;
+exports.transitionEndAsync = transitionEndAsync;
+exports.waitForComponentReady = waitForComponentReady;
 exports.writeTask = writeTask;