@trimble-oss/moduswebcomponents/components/modus-wc-theme-provider.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import { p as proxyCustomElement, H, h } from './p-BMvVSi6Y.js';
import { i as initializeThemeStore, w as watchSystemTheme, t as themeStore } from './p-CV0PxbLb.js';

const ThemeProvider = /*@__PURE__*/ proxyCustomElement(class ThemeProvider extends H {
    constructor() {
        super();
        this.__registerHost();
    }
    componentWillLoad() {
        initializeThemeStore(this.initialTheme);
        this.cleanup = watchSystemTheme();
        // Subscribe to specific property changes
        this.modeUnsubscribe = themeStore.onChange('mode', () => {
            this.updateThemeClasses();
        });
        this.themeUnsubscribe = themeStore.onChange('theme', () => {
            this.updateThemeClasses();
        });
        this.updateThemeClasses();
    }
    disconnectedCallback() {
        var _a, _b, _c;
        (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
        (_b = this.modeUnsubscribe) === null || _b === void 0 ? void 0 : _b.call(this);
        (_c = this.themeUnsubscribe) === null || _c === void 0 ? void 0 : _c.call(this);
    }
    updateThemeClasses() {
        const root = document.documentElement;
        const { mode, theme } = themeStore.state;
        // Update theme and mode attributes
        root.setAttribute('data-theme', `${theme}-${mode}`);
        root.setAttribute('data-mode', mode);
        // Remove old mode classes
        root.classList.remove('light', 'dark');
        root.classList.add(mode);
        // Store preferences
        localStorage.setItem('modus-theme-config', JSON.stringify({ mode, theme }));
    }
    render() {
        return h("slot", { key: '164889b80a9bdca83cce1dcfdce343d487304383' });
    }
}, [4, "modus-wc-theme-provider", {
        "initialTheme": [16, "initial-theme"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-theme-provider"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-theme-provider":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ThemeProvider);
            }
            break;
    } });
}

const ModusWcThemeProvider = ThemeProvider;
const defineCustomElement = defineCustomElement$1;

export { ModusWcThemeProvider, defineCustomElement };