@breadstone/mosaik-elements-foundation 0.0.221 → 0.0.222

package/Theming/Theme2Element.js

@@ -27,8 +27,9 @@ import { ThemeService } from './ThemeService';
  */
 let Theme2Element = class Theme2Element extends CustomElement {
     // #region Fields
+    _name;
     _theme;
-    _isInline;
+    _global;
     // #endregion
     // #region Ctor
     /**
@@ -36,10 +37,10 @@ let Theme2Element = class Theme2Element extends CustomElement {
      */
     constructor() {
         super();
-        // Register with ThemeService
-        ThemeService.instance.registerProvider(this);
+        this._name = null;
         this._theme = null;
-        this._isInline = false;
+        this._global = false;
+        ThemeService.instance.registerProvider(this);
     }
     // #endregion
     // #region Properties
@@ -54,13 +55,43 @@ let Theme2Element = class Theme2Element extends CustomElement {
     static get is() {
         return 'mosaik-theme2';
     }
+    /**
+     * Gets or sets the `name` property.
+     * When set, this element will only respond to theme changes for this specific name.
+     * When null (default), responds to global/default theme changes.
+     *
+     * @public
+     */
+    get name() {
+        return this._name;
+    }
+    set name(value) {
+        if (this._name !== value) {
+            // Unregister with old ID
+            ThemeService.instance.unregisterProvider(this);
+            this._name = value;
+            this.requestUpdate('name');
+            // Re-register with new ID
+            ThemeService.instance.registerProvider(this);
+        }
+    }
     /**
      * Gets or sets the `theme` property.
+     * If no local theme is set, returns the theme from ThemeService for this element's name.
      *
      * @public
      */
     get theme() {
-        return this._theme;
+        if (this._theme) {
+            return this._theme;
+        }
+        // Try to get theme from ThemeService
+        try {
+            return ThemeService.instance.getTheme(this._name);
+        }
+        catch {
+            return null;
+        }
     }
     set theme(value) {
         if (!Equals.areObjectsEqual(this._theme, value)) {
@@ -69,17 +100,19 @@ let Theme2Element = class Theme2Element extends CustomElement {
         }
     }
     /**
-     * Gets or sets the `isInline` property.
+     * Gets or sets the `global` property.
+     * When true, CSS variables are applied both locally and globally.
+     * When false (default), CSS variables are only applied locally to this element.
      *
      * @public
      */
-    get isInline() {
-        return this._isInline;
+    get global() {
+        return this._global;
     }
-    set isInline(value) {
-        if (this._isInline !== value) {
-            this._isInline = value;
-            this.requestUpdate('isInline');
+    set global(value) {
+        if (this._global !== value) {
+            this._global = value;
+            this.requestUpdate('global');
         }
     }
     // #endregion
@@ -91,108 +124,126 @@ let Theme2Element = class Theme2Element extends CustomElement {
     connectedCallback() {
         super.connectedCallback();
         ThemeService.instance.initialize();
-        this.applyTheme(this._theme);
+        // If we have a theme, apply it through the service
+        if (this._theme) {
+            ThemeService.instance.applyTheme(this._theme, this._name, { notifyProviders: false });
+        }
     }
     /**
      * @public
      * @override
      */
     disconnectedCallback() {
-        // Unregister from ThemeService
         ThemeService.instance.unregisterProvider(this);
-        // Note: We do NOT call ThemeService.reset() here since other elements may still use it
     }
     /**
      * Applies the complete theme.
+     * Called by ThemeService to update this provider's internal state.
+     * CSS variables are handled by ThemeService directly.
      *
-     * @internal
-     * @param theme - The theme to apply.
+     * @public
+     * @param theme The theme to apply.
      */
     applyTheme(theme) {
         if (!theme) {
             return;
         }
-        ThemeService.instance.applyTheme(theme);
+        this._theme = theme;
     }
     /**
      * Applies the scheme (light/dark mode color roles) from the theme.
+     * Called by ThemeService to update this provider's internal state.
      *
-     * @internal
-     * @param scheme - The scheme to apply.
+     * @public
+     * @param scheme The scheme to apply.
      */
     applyScheme(scheme) {
-        const themeName = this.getThemeName();
-        ThemeService.instance.applyScheme(scheme, themeName);
+        if (this._theme) {
+            this._theme.scheme = scheme;
+        }
     }
     /**
      * Applies the color palette from the theme.
+     * Called by ThemeService to update this provider's internal state.
      *
-     * @internal
-     * @param palette - The palette to apply.
+     * @public
+     * @param palette The palette to apply.
      */
     applyPalette(palette) {
-        const themeName = this.getThemeName();
-        ThemeService.instance.applyPalette(palette, themeName);
+        if (this._theme) {
+            this._theme.palette = palette;
+        }
     }
     /**
      * Applies the font family from the theme.
+     * Called by ThemeService to update this provider's internal state.
      *
-     * @internal
-     * @param fontFamily - The font family to apply.
+     * @public
+     * @param fontFamily The font family to apply.
      */
     applyFontFamily(fontFamily) {
-        const themeName = this.getThemeName();
-        const typographyKeys = Object.keys(this._theme?.typography ?? {});
-        ThemeService.instance.applyFontFamily(fontFamily, themeName, typographyKeys);
+        if (this._theme) {
+            this._theme.fontFamily = fontFamily;
+        }
     }
     /**
      * Applies the typography settings from the theme.
+     * Called by ThemeService to update this provider's internal state.
      *
-     * @internal
-     * @param typography - The typography settings to apply.
+     * @public
+     * @param typography The typography settings to apply.
      */
     applyTypography(typography) {
-        const themeName = this.getThemeName();
-        const fontFamily = this._theme?.fontFamily ?? '';
-        ThemeService.instance.applyTypography(typography, themeName, fontFamily);
+        if (this._theme) {
+            this._theme.typography = typography;
+        }
     }
     /**
      * Applies the layout settings from the theme.
+     * Called by ThemeService to update this provider's internal state.
      *
-     * @internal
-     * @param layout - The layout settings to apply.
+     * @public
+     * @param layout The layout settings to apply.
      */
     applyLayout(layout) {
-        const themeName = this.getThemeName();
-        ThemeService.instance.applyLayout(layout, themeName);
+        if (this._theme) {
+            this._theme.layout = layout;
+        }
     }
     /**
      * Applies the elevation (shadow) settings from the theme.
+     * Called by ThemeService to update this provider's internal state.
      *
-     * @internal
-     * @param elevation - The elevation settings to apply.
+     * @public
+     * @param elevation The elevation settings to apply.
      */
     applyElevation(elevation) {
-        const themeName = this.getThemeName();
-        ThemeService.instance.applyElevation(elevation, themeName);
+        if (this._theme) {
+            this._theme.elevation = elevation;
+        }
     }
     /**
+     * Called when the theme property changes.
+     * Delegates to ThemeService for CSS variable management.
+     *
      * @protected
      */
     onThemePropertyChanged(prev, next) {
         if (prev !== next && next) {
-            this.applyTheme(next);
+            // Delegate to ThemeService - it handles CSS variables for both global and local
+            // Use notifyProviders: false to prevent infinite loop (we are the provider)
+            ThemeService.instance.applyTheme(next, this._name, { notifyProviders: false });
         }
     }
-    /**
-     * Gets the current theme name or empty string.
-     *
-     * @private
-     */
-    getThemeName() {
-        return this._theme?.name ?? '';
-    }
 };
+__decorate([
+    Property({
+        type: String,
+        attribute: 'name'
+    }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], Theme2Element.prototype, "name", null);
 __decorate([
     Property({ type: Object }),
     __metadata("design:type", Object),
@@ -202,7 +253,7 @@ __decorate([
     Property({ type: Boolean }),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
-], Theme2Element.prototype, "isInline", null);
+], Theme2Element.prototype, "global", null);
 __decorate([
     Watch('theme'),
     __metadata("design:type", Function),

package/Theming/Theme2Element.js.map

@@ -1 +1 @@
-{"version":3,"file":"Theme2Element.js","sourceRoot":"","sources":["../../src/Theming/Theme2Element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Theme2Element.js","sourceRoot":"","sources":["../../src/Theming/Theme2Element.ts"],"names":[],"mappings":"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"}

package/Theming/Theme2ElementTemplate.d.ts

@@ -5,5 +5,5 @@ import type { Theme2Element } from './Theme2Element';
  *
  * @public
  */
-export declare function theme2ElementTemplate<T extends Theme2Element>(e: T): TemplateResult;
+export declare function theme2ElementTemplate<T extends Theme2Element>(_e: T): TemplateResult;
 //# sourceMappingURL=Theme2ElementTemplate.d.ts.map

package/Theming/Theme2ElementTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Theme2ElementTemplate.d.ts","sourceRoot":"","sources":["../../src/Theming/Theme2ElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIrD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAInF"}
+{"version":3,"file":"Theme2ElementTemplate.d.ts","sourceRoot":"","sources":["../../src/Theming/Theme2ElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIrD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,aAAa,EAAE,EAAE,EAAE,CAAC,GAAG,cAAc,CAIpF"}

package/Theming/Theme2ElementTemplate.js

@@ -6,7 +6,7 @@ import { html } from '../Dom/Html';
  *
  * @public
  */
-export function theme2ElementTemplate(e) {
+export function theme2ElementTemplate(_e) {
     return html `
         <slot></slot>
     `;

package/Theming/Theme2ElementTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"Theme2ElementTemplate.js","sourceRoot":"","sources":["../../src/Theming/Theme2ElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,aAAa,CAAC;AAGxD,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAA0B,CAAI;IAC/D,OAAO,IAAI,CAAA;;KAEV,CAAC;AACN,CAAC"}
+{"version":3,"file":"Theme2ElementTemplate.js","sourceRoot":"","sources":["../../src/Theming/Theme2ElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,aAAa,CAAC;AAGxD,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAA0B,EAAK;IAChE,OAAO,IAAI,CAAA;;KAEV,CAAC;AACN,CAAC"}

package/Theming/ThemeService.d.ts

@@ -1,6 +1,6 @@
 import { type ITheme, type ThemeMode, type ThemeScheme, type ThemeSemantic } from '@breadstone/mosaik-themes';
 import { type IEventEmitter } from '@breadstone/mosaik-elements';
-import type { ISetCssVariableOptions, IThemeEventDetail, IThemeProvider, IThemeService, IThemeServiceConfig } from './IThemeService';
+import type { IThemeApplyOptions, IThemeEventDetail, IThemeProvider, IThemeServiceConfig } from './IThemeService';
 /**
  * Service for managing theme CSS variables throughout the application.
  * Provides methods to apply theme properties globally to the document.
@@ -18,9 +18,11 @@ import type { ISetCssVariableOptions, IThemeEventDetail, IThemeProvider, IThemeS
  * // Use the singleton instance
  * ThemeService.instance.applyTheme(myTheme);
  *
- * // Or apply individual parts
- * ThemeService.instance.applyScheme(theme.scheme, 'joy');
- * ThemeService.instance.applyPalette(theme.palette, 'joy');
+ * // Or apply individual parts (theme name is derived from stored state)
+ * ThemeService.instance.applyScheme(theme.scheme);       // global scope
+ * ThemeService.instance.applyPalette(theme.palette);     // global scope
+ * ThemeService.instance.applyLayout(theme.layout);       // global scope
+ * ThemeService.instance.applyFontFamily('Arial');        // global scope
  *
  * // Subscribe to theme changes
  * ThemeService.instance.themeChanged.subscribe((detail) => {
@@ -30,16 +32,16 @@ import type { ISetCssVariableOptions, IThemeEventDetail, IThemeProvider, IThemeS
  *
  * @public
  */
-export declare class ThemeService implements IThemeService {
+export declare class ThemeService {
     private static _instance;
     private static _config;
     private readonly _globalStyleSheet;
     private readonly _providers;
+    private readonly _themeStates;
     private readonly _themeChanged;
     private readonly _schemeChanged;
     private readonly _paletteChanged;
     private _initialized;
-    private _currentTheme;
     /**
      * Constructs a new instance of the `ThemeService` class.
      * Use {@link ThemeService.instance} to access the singleton instance.
@@ -63,13 +65,6 @@ export declare class ThemeService implements IThemeService {
      * @readonly
      */
     get isInitialized(): boolean;
-    /**
-     * Gets the currently applied theme, if any.
-     *
-     * @public
-     * @readonly
-     */
-    get currentTheme(): ITheme | null;
     /**
      * Event emitter that fires when the theme changes.
      *
@@ -97,7 +92,7 @@ export declare class ThemeService implements IThemeService {
      *
      * @public
      * @static
-     * @param config - Configuration options for the theme service.
+     * @param config Configuration options for the theme service.
      * @returns The ThemeService class for chaining.
      * @throws Error if called after the instance has already been created.
      *
@@ -133,26 +128,45 @@ export declare class ThemeService implements IThemeService {
     dispose(): void;
     /**
      * Registers a theme provider with the service.
+     * If a theme state already exists for the provider's name, the provider
+     * will be synchronized with that state. Otherwise, if the provider has a theme,
+     * it will be used to initialize the state for that name.
      *
      * @public
-     * @param provider - The theme provider to register.
+     * @param provider The theme provider to register.
      */
     registerProvider(provider: IThemeProvider): void;
     /**
      * Unregisters a theme provider from the service.
      *
      * @public
-     * @param provider - The theme provider to unregister.
+     * @param provider The theme provider to unregister.
      */
     unregisterProvider(provider: IThemeProvider): void;
     /**
-     * Gets the current theme from the first registered provider.
+     * Checks whether a theme exists for the specified name.
+     * For the global scope (no name), this also returns true if a default theme is configured.
+     *
+     * @public
+     * @param name Optional name for scoped themes. Use `null` or omit for global scope.
+     * @returns `true` if a theme is set for the specified scope, `false` otherwise.
+     */
+    hasTheme(name?: string | null): boolean;
+    /**
+     * Gets the current theme for the specified name.
+     * If no name is provided (undefined), returns the theme for the global/default scope (null key).
+     *
+     * The method uses the following fallback chain:
+     * 1. Theme state from `_themeStates` map
+     * 2. Theme from the first matching provider
+     * 3. Default theme from configuration (global scope only)
      *
      * @public
+     * @param name Optional name for scoped themes. Use `null` or omit for global scope.
      * @returns The current theme.
-     * @throws Error if no theme is set.
+     * @throws Error if no theme is set for the specified scope and no default theme is configured.
      */
-    getTheme(): ITheme;
+    getTheme(name?: string | null): ITheme;
     /**
      * Gets the current theme name from the document element.
      *
@@ -169,116 +183,127 @@ export declare class ThemeService implements IThemeService {
     getDocumentThemeMode(): ThemeMode | null;
     /**
      * Applies the complete theme.
+     * If name is provided, only providers with that name are notified.
+     * If name is not provided (undefined), only providers without a name (null) are notified.
      *
      * @public
-     * @param theme - The theme to apply.
+     * @param theme The theme to apply.
+     * @param name Optional name for scoped application.
+     * @param options Optional settings to control notification behavior.
      */
-    applyTheme(theme: ITheme): void;
+    applyTheme(theme: ITheme, name?: string | null, options?: IThemeApplyOptions): void;
     /**
      * Applies the scheme (light/dark mode color roles) from the theme.
+     * Uses the theme name from the stored state for the specified scope.
      *
      * @public
-     * @param scheme - The scheme to apply.
-     * @param themeName - The name of the theme for CSS variable prefixing.
+     * @param scheme The scheme to apply.
+     * @param name Optional name for scoped application.
      */
-    applyScheme(scheme: ITheme['scheme'], themeName: string): void;
+    applyScheme(scheme: ITheme['scheme'], name?: string | null): void;
     /**
      * Applies the color palette from the theme.
+     * Uses the theme name from the stored state for the specified scope.
      *
      * @public
-     * @param palette - The palette to apply.
-     * @param themeName - The name of the theme for CSS variable prefixing.
+     * @param palette The palette to apply.
+     * @param name Optional name for scoped application.
      */
-    applyPalette(palette: ITheme['palette'], themeName: string): void;
+    applyPalette(palette: ITheme['palette'], name?: string | null): void;
     /**
      * Applies the font family from the theme.
+     * Uses the theme name and typography keys from the stored state for the specified scope.
      *
      * @public
-     * @param fontFamily - The font family to apply.
-     * @param themeName - The name of the theme for CSS variable prefixing. If not provided, uses the current theme name.
-     * @param typographyKeys - The typography keys to apply the font family to. If not provided, uses the current theme typography keys.
+     * @param fontFamily The font family to apply.
+     * @param name Optional name for scoped application.
      */
-    applyFontFamily(fontFamily: ITheme['fontFamily'], themeName?: string, typographyKeys?: Array<string>): void;
+    applyFontFamily(fontFamily: ITheme['fontFamily'], name?: string | null): void;
     /**
      * Applies the typography settings from the theme.
+     * Uses the theme name and font family from the stored state for the specified scope.
      *
      * @public
-     * @param typography - The typography settings to apply.
-     * @param themeName - The name of the theme for CSS variable prefixing. If not provided, uses the current theme name.
-     * @param fontFamily - The font family to use in shorthand typography values. If not provided, uses the current theme font family.
+     * @param typography The typography settings to apply.
+     * @param name Optional name for scoped application.
      */
-    applyTypography(typography: ITheme['typography'], themeName?: string, fontFamily?: string): void;
+    applyTypography(typography: ITheme['typography'], name?: string | null): void;
     /**
      * Applies the layout settings from the theme.
+     * Uses the theme name from the stored state for the specified scope.
      *
      * @public
-     * @param layout - The layout settings to apply.
-     * @param themeName - The name of the theme for CSS variable prefixing. If not provided, uses the current theme name.
+     * @param layout The layout settings to apply.
+     * @param name Optional name for scoped application.
      */
-    applyLayout(layout: ITheme['layout'], themeName?: string): void;
+    applyLayout(layout: ITheme['layout'], name?: string | null): void;
     /**
      * Applies the elevation (shadow) settings from the theme.
+     * Uses the theme name from the stored state for the specified scope.
      *
      * @public
-     * @param elevation - The elevation settings to apply.
-     * @param themeName - The name of the theme for CSS variable prefixing.
-     */
-    applyElevation(elevation: ITheme['elevation'], themeName: string): void;
-    /**
-     * Sets a CSS variable.
-     *
-     * @public
-     * @param property - The CSS variable name (e.g., `--my-var`).
-     * @param value - The value to set.
-     * @param options - Optional settings for where to apply the variable.
+     * @param elevation The elevation settings to apply.
+     * @param name Optional name for scoped application.
      */
-    setCssVariable(property: string, value: string, options?: ISetCssVariableOptions): void;
+    applyElevation(elevation: ITheme['elevation'], name?: string | null): void;
     /**
      * Gets the current theme mode from the document.
      *
      * @public
      * @returns The current theme mode ('light' or 'dark').
      */
-    getCurrentThemeMode(): 'light' | 'dark';
+    getCurrentThemeMode(): ThemeMode;
     /**
      * Replaces the scheme with the specified key.
      * This is useful when you want to replace a specific scheme in the theme.
+     * If the name is provided, only providers with that name are notified.
+     * If name is not provided (undefined), only providers without a name (null) are notified.
      *
      * @public
-     * @param mode - The theme mode to replace.
-     * @param scheme - The scheme color roles to replace.
+     * @param mode The theme mode to replace.
+     * @param scheme The scheme color roles to replace.
+     * @param name Optional name for scoped replacement.
+     * @param options Optional settings to control notification behavior.
      */
-    replaceScheme(mode: ThemeMode, scheme: Partial<ThemeScheme>): void;
+    replaceScheme(mode: ThemeMode, scheme: Partial<ThemeScheme>, name?: string | null, options?: IThemeApplyOptions): void;
     /**
      * Replaces the palette with the specified key.
      * This is useful when you want to replace a specific palette in the theme.
+     * If themeId is provided, only providers with that ID are notified.
+     * If themeId is not provided (undefined), only providers without an ID (null) are notified.
      *
      * @public
-     * @param mode - The theme mode to replace.
-     * @param semantic - The semantic color roles to replace.
+     * @param mode The theme mode to replace.
+     * @param semantic The semantic color roles to replace.
+     * @param name Optional name for scoped replacement.
+     * @param options Optional settings to control notification behavior.
      */
-    replacePalette(mode: ThemeMode, semantic: Partial<ThemeSemantic>): void;
+    replacePalette(mode: ThemeMode, semantic: Partial<ThemeSemantic>, name?: string | null, options?: IThemeApplyOptions): void;
     /**
-     * Internal method to apply the scheme without emitting events.
+     * Sets a CSS variable.
      *
      * @private
-     * @param scheme - The scheme to apply.
-     * @param themeName - The name of the theme for CSS variable prefixing.
+     * @param property The CSS variable name (e.g., `--my-var`).
+     * @param value The value to set.
+     * @param options Optional settings for where to apply the variable.
      */
-    private applySchemeInternal;
+    private setCssVariable;
     /**
-     * Internal method to apply the palette without emitting events.
+     * Sets a CSS variable globally and on all provider elements.
+     * For providers with global=false, only sets locally on the element.
      *
      * @private
-     * @param palette - The palette to apply.
-     * @param themeName - The name of the theme for CSS variable prefixing.
+     * @param property The CSS variable name.
+     * @param value The value to set.
+     * @param providers The providers to set the variable on.
+     * @param applyGlobally Whether to apply the variable globally.
      */
-    private applyPaletteInternal;
+    private setCssVariableWithProviders;
     /**
      * Converts a camelCase string to kebab-case.
      *
      * @private
-     * @param value - The value to convert.
+     * @param value The value to convert.
      * @returns The kebab-case string.
      */
     private toKebabCase;
@@ -286,7 +311,7 @@ export declare class ThemeService implements IThemeService {
      * Normalizes a CssLength value to a px string.
      *
      * @private
-     * @param value - The value to normalize.
+     * @param value The value to normalize.
      * @returns The normalized px string.
      */
     private normalizeCssLength;
@@ -296,5 +321,31 @@ export declare class ThemeService implements IThemeService {
      * @private
      */
     private ensureInitialized;
+    /**
+     * Gets all providers that match the specified theme ID.
+     * If themeId is null, returns providers without an ID.
+     *
+     * @private
+     * @param themeId The theme ID to filter by.
+     * @returns Array of matching providers.
+     */
+    private getProvidersForName;
+    /**
+     * Gets the theme name for CSS variable prefixing from the stored state.
+     * Falls back to the default theme name from configuration if no state exists for the given scope.
+     *
+     * @private
+     * @param name The scope name (null for global scope).
+     * @returns The theme name for CSS variable prefixing.
+     */
+    private getThemeNameForScope;
+    /**
+     * Creates a deep clone of a theme object.
+     *
+     * @private
+     * @param theme The theme to clone.
+     * @returns A deep clone of the theme.
+     */
+    private cloneTheme;
 }
 //# sourceMappingURL=ThemeService.d.ts.map