@trimble-oss/moduswebcomponents/esm/modus-wc-theme-provider.entry.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 { r as registerInstance, h } from './index-D_4hbGjA.js';
import { i as initializeThemeStore, w as watchSystemTheme, t as themeStore } from './theme.store-DoBfuPKG.js';

const ThemeProvider = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    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: '31a6fe7bf24df84db254656752b555d275fe435e' });
    }
};

export { ThemeProvider as modus_wc_theme_provider };