igniteui-webcomponents 7.3.2 → 7.4.1

package/theming/config.js

@@ -1,37 +1,57 @@
 import { isServer } from 'lit';
-import { CHANGE_THEME_EVENT, } from './theming-event.js';
-import { getAllCssVariables } from './utils.js';
+import { CHANGE_THEME_EVENT, CHANGED_THEME_EVENT, } from './theming-event.js';
+const THEMES = new Set(['bootstrap', 'material', 'indigo', 'fluent']);
+const THEME_VARIANTS = new Set(['light', 'dark']);
 let theme;
 let themeVariant;
-function dispatchThemingEvent(detail) {
-    if (!isServer) {
-        globalThis.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));
-    }
+function isOfTypeTheme(value) {
+    return THEMES.has(value);
 }
-function isOfTypeTheme(theme) {
-    return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);
+function isOfTypeThemeVariant(value) {
+    return THEME_VARIANTS.has(value);
 }
-function isOfTypeThemeVariant(variant) {
-    return ['light', 'dark'].includes(variant);
+function setTheme(value, variant) {
+    theme = value;
+    themeVariant = variant;
 }
+class ThemeChangedEmitter extends EventTarget {
+    constructor() {
+        super();
+        if (!isServer) {
+            globalThis.addEventListener(CHANGE_THEME_EVENT, this);
+        }
+    }
+    handleEvent({ detail }) {
+        if (isOfTypeTheme(detail?.theme) &&
+            isOfTypeThemeVariant(detail?.themeVariant)) {
+            setTheme(detail.theme, detail.themeVariant);
+            this.dispatchEvent(new CustomEvent(CHANGED_THEME_EVENT));
+        }
+    }
+}
+export const _themeChangedEmitter = new ThemeChangedEmitter();
 export function getTheme() {
     if (!(theme && themeVariant)) {
-        const cssVars = getAllCssVariables();
-        const foundTheme = cssVars.igTheme;
-        const foundVariant = cssVars.igThemeVariant;
+        const rootStyles = isServer
+            ? undefined
+            : getComputedStyle(document.documentElement);
+        const foundTheme = rootStyles?.getPropertyValue('--ig-theme').trim();
+        const foundVariant = rootStyles
+            ?.getPropertyValue('--ig-theme-variant')
+            .trim();
         theme = isOfTypeTheme(foundTheme) ? foundTheme : 'bootstrap';
         themeVariant = isOfTypeThemeVariant(foundVariant) ? foundVariant : 'light';
     }
     return { theme, themeVariant };
 }
-export function setTheme(value, variant) {
-    theme = value;
-    themeVariant = variant;
-}
 export function configureTheme(t, v = 'light') {
     if (isOfTypeTheme(t) && isOfTypeThemeVariant(v)) {
         setTheme(t, v);
-        dispatchThemingEvent({ theme, themeVariant });
+        if (!isServer) {
+            globalThis.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, {
+                detail: { theme, themeVariant },
+            }));
+        }
     }
 }
 //# sourceMappingURL=config.js.map

package/theming/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/theming/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,EACL,kBAAkB,GAEnB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,IAAI,KAAY,CAAC;AACjB,IAAI,YAA0B,CAAC;AAK/B,SAAS,oBAAoB,CAAC,MAA8B;IAC1D,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,UAAU,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IAC5E,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,KAAa;IAClC,OAAO,CAAC,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACvE,CAAC;AAED,SAAS,oBAAoB,CAAC,OAAe;IAC3C,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,UAAU,QAAQ;IACtB,IAAI,CAAC,CAAC,KAAK,IAAI,YAAY,CAAC,EAAE,CAAC;QAC7B,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;QACrC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;QACnC,MAAM,YAAY,GAAG,OAAO,CAAC,cAAc,CAAC;QAE5C,KAAK,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC;QAC7D,YAAY,GAAG,oBAAoB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7E,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;AACjC,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,KAAY,EAAE,OAAqB;IAC1D,KAAK,GAAG,KAAK,CAAC;IACd,YAAY,GAAG,OAAO,CAAC;AACzB,CAAC;AAYD,MAAM,UAAU,cAAc,CAAC,CAAQ,EAAE,IAAkB,OAAO;IAChE,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;QAChD,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACf,oBAAoB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;IAChD,CAAC;AACH,CAAC","sourcesContent":["import { isServer } from 'lit';\nimport {\n  CHANGE_THEME_EVENT,\n  type ChangeThemeEventDetail,\n} from './theming-event.js';\nimport type { Theme, ThemeVariant } from './types.js';\nimport { getAllCssVariables } from './utils.js';\n\nlet theme: Theme;\nlet themeVariant: ThemeVariant;\n\n/**\n * Dispatch an \"igc-change-theme\" event to `window` with the given detail.\n */\nfunction dispatchThemingEvent(detail: ChangeThemeEventDetail): void {\n  if (!isServer) {\n    globalThis.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));\n  }\n}\n\nfunction isOfTypeTheme(theme: string): theme is Theme {\n  return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);\n}\n\nfunction isOfTypeThemeVariant(variant: string): variant is ThemeVariant {\n  return ['light', 'dark'].includes(variant);\n}\n\nexport function getTheme() {\n  if (!(theme && themeVariant)) {\n    const cssVars = getAllCssVariables();\n    const foundTheme = cssVars.igTheme;\n    const foundVariant = cssVars.igThemeVariant;\n\n    theme = isOfTypeTheme(foundTheme) ? foundTheme : 'bootstrap';\n    themeVariant = isOfTypeThemeVariant(foundVariant) ? foundVariant : 'light';\n  }\n\n  return { theme, themeVariant };\n}\n\nexport function setTheme(value: Theme, variant: ThemeVariant): void {\n  theme = value;\n  themeVariant = variant;\n}\n\n/**\n * Allows the global configuration of the active theme.\n *\n * Usage:\n *  ```ts\n *  import { configureTheme } from 'igniteui-webcomponents';\n *\n *  configureTheme('material', 'light');\n *  ```\n */\nexport function configureTheme(t: Theme, v: ThemeVariant = 'light'): void {\n  if (isOfTypeTheme(t) && isOfTypeThemeVariant(v)) {\n    setTheme(t, v);\n    dispatchThemingEvent({ theme, themeVariant });\n  }\n}\n"]}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/theming/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,EACL,kBAAkB,EAClB,mBAAmB,GAEpB,MAAM,oBAAoB,CAAC;AAG5B,MAAM,MAAM,GAAG,IAAI,GAAG,CAAU,CAAC,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;AAC/E,MAAM,cAAc,GAAG,IAAI,GAAG,CAAU,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;AAE3D,IAAI,KAAY,CAAC;AACjB,IAAI,YAA0B,CAAC;AAE/B,SAAS,aAAa,CAAC,KAAc;IACnC,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAC3B,CAAC;AAED,SAAS,oBAAoB,CAAC,KAAc;IAC1C,OAAO,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC;AAED,SAAS,QAAQ,CAAC,KAAY,EAAE,OAAqB;IACnD,KAAK,GAAG,KAAK,CAAC;IACd,YAAY,GAAG,OAAO,CAAC;AACzB,CAAC;AAOD,MAAM,mBAAoB,SAAQ,WAAW;IAC3C;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,UAAU,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAGM,WAAW,CAAC,EAAE,MAAM,EAAuC;QAChE,IACE,aAAa,CAAC,MAAM,EAAE,KAAK,CAAC;YAC5B,oBAAoB,CAAC,MAAM,EAAE,YAAY,CAAC,EAC1C,CAAC;YACD,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;YAC5C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAC3D,CAAC;IACH,CAAC;CACF;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,mBAAmB,EAAE,CAAC;AAE9D,MAAM,UAAU,QAAQ;IACtB,IAAI,CAAC,CAAC,KAAK,IAAI,YAAY,CAAC,EAAE,CAAC;QAC7B,MAAM,UAAU,GAAG,QAAQ;YACzB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QAC/C,MAAM,UAAU,GAAG,UAAU,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;QACrE,MAAM,YAAY,GAAG,UAAU;YAC7B,EAAE,gBAAgB,CAAC,oBAAoB,CAAC;aACvC,IAAI,EAAE,CAAC;QAEV,KAAK,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC;QAC7D,YAAY,GAAG,oBAAoB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7E,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;AACjC,CAAC;AAYD,MAAM,UAAU,cAAc,CAAC,CAAQ,EAAE,IAAkB,OAAO;IAChE,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;QAEhD,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAEf,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,UAAU,CAAC,aAAa,CACtB,IAAI,WAAW,CAAC,kBAAkB,EAAE;gBAClC,MAAM,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE;aAChC,CAAC,CACH,CAAC;QACJ,CAAC;IACH,CAAC;AACH,CAAC","sourcesContent":["import { isServer } from 'lit';\nimport {\n  CHANGE_THEME_EVENT,\n  CHANGED_THEME_EVENT,\n  type ChangeThemeEventDetail,\n} from './theming-event.js';\nimport type { Theme, ThemeVariant } from './types.js';\n\nconst THEMES = new Set<unknown>(['bootstrap', 'material', 'indigo', 'fluent']);\nconst THEME_VARIANTS = new Set<unknown>(['light', 'dark']);\n\nlet theme: Theme;\nlet themeVariant: ThemeVariant;\n\nfunction isOfTypeTheme(value: unknown): value is Theme {\n  return THEMES.has(value);\n}\n\nfunction isOfTypeThemeVariant(value: unknown): value is ThemeVariant {\n  return THEME_VARIANTS.has(value);\n}\n\nfunction setTheme(value: Theme, variant: ThemeVariant): void {\n  theme = value;\n  themeVariant = variant;\n}\n\n/**\n * Relays \"igc-change-theme\" events from `window` to the theming controllers.\n * It also syncs the module state from the event detail, so an event from another\n * copy of the library changes the theme here too.\n */\nclass ThemeChangedEmitter extends EventTarget {\n  constructor() {\n    super();\n    if (!isServer) {\n      globalThis.addEventListener(CHANGE_THEME_EVENT, this);\n    }\n  }\n\n  /** @internal */\n  public handleEvent({ detail }: CustomEvent<ChangeThemeEventDetail>): void {\n    if (\n      isOfTypeTheme(detail?.theme) &&\n      isOfTypeThemeVariant(detail?.themeVariant)\n    ) {\n      setTheme(detail.theme, detail.themeVariant);\n      this.dispatchEvent(new CustomEvent(CHANGED_THEME_EVENT));\n    }\n  }\n}\n\nexport const _themeChangedEmitter = new ThemeChangedEmitter();\n\nexport function getTheme(): ChangeThemeEventDetail {\n  if (!(theme && themeVariant)) {\n    const rootStyles = isServer\n      ? undefined\n      : getComputedStyle(document.documentElement);\n    const foundTheme = rootStyles?.getPropertyValue('--ig-theme').trim();\n    const foundVariant = rootStyles\n      ?.getPropertyValue('--ig-theme-variant')\n      .trim();\n\n    theme = isOfTypeTheme(foundTheme) ? foundTheme : 'bootstrap';\n    themeVariant = isOfTypeThemeVariant(foundVariant) ? foundVariant : 'light';\n  }\n\n  return { theme, themeVariant };\n}\n\n/**\n * Allows the global configuration of the active theme.\n *\n * Usage:\n *  ```ts\n *  import { configureTheme } from 'igniteui-webcomponents';\n *\n *  configureTheme('material', 'light');\n *  ```\n */\nexport function configureTheme(t: Theme, v: ThemeVariant = 'light'): void {\n  if (isOfTypeTheme(t) && isOfTypeThemeVariant(v)) {\n    // Also set by the emitter's window listener, but that listener does not exist on the server.\n    setTheme(t, v);\n\n    if (!isServer) {\n      globalThis.dispatchEvent(\n        new CustomEvent(CHANGE_THEME_EVENT, {\n          detail: { theme, themeVariant },\n        })\n      );\n    }\n  }\n}\n"]}

package/theming/context.d.ts

@@ -7,29 +7,7 @@ export interface ThemeContext {
     variant: ThemeVariant;
 }
 /**
- * Context for providing theme information to descendant components.
- *
- * Components can consume this context to receive theme information from a theme provider
- * instead of relying on global theming events.
- *
- * @example
- * ```ts
- * // In a component
- * import { ContextConsumer } from '@lit/context';
- * import { themeContext } from './context.js';
- *
- * class MyComponent extends LitElement {
- *   private _themeConsumer = new ContextConsumer(this, {
- *     context: themeContext,
- *     subscribe: true
- *   });
- *
- *   render() {
- *     const theme = this._themeConsumer.value;
- *     // ...
- *   }
- * }
- * ```
+ * Theme context provided by the theme provider component and consumed by the theming controller.
  */
 export declare const themeContext: {
     __context__: ThemeContext;

package/theming/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/theming/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAoC7C,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAe,kBAAkB,CAAC,CAAC","sourcesContent":["import { createContext } from '@lit/context';\nimport type { Theme, ThemeVariant } from './types.js';\n\n/**\n * The theme context value.\n */\nexport interface ThemeContext {\n  theme: Theme;\n  variant: ThemeVariant;\n}\n\n/**\n * Context for providing theme information to descendant components.\n *\n * Components can consume this context to receive theme information from a theme provider\n * instead of relying on global theming events.\n *\n * @example\n * ```ts\n * // In a component\n * import { ContextConsumer } from '@lit/context';\n * import { themeContext } from './context.js';\n *\n * class MyComponent extends LitElement {\n *   private _themeConsumer = new ContextConsumer(this, {\n *     context: themeContext,\n *     subscribe: true\n *   });\n *\n *   render() {\n *     const theme = this._themeConsumer.value;\n *     // ...\n *   }\n * }\n * ```\n */\nexport const themeContext = createContext<ThemeContext>('ig-theme-context');\n"]}
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/theming/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAc7C,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAe,kBAAkB,CAAC,CAAC","sourcesContent":["import { createContext } from '@lit/context';\nimport type { Theme, ThemeVariant } from './types.js';\n\n/**\n * The theme context value.\n */\nexport interface ThemeContext {\n  theme: Theme;\n  variant: ThemeVariant;\n}\n\n/**\n * Theme context provided by the theme provider component and consumed by the theming controller.\n */\nexport const themeContext = createContext<ThemeContext>('ig-theme-context');\n"]}

package/theming/theming-controller.d.ts

@@ -5,7 +5,7 @@ import type { Theme, Themes, ThemeVariant, ThemingControllerConfig } from './typ
  *
  * It resolves the active theme from one of two sources, in order of priority:
  *
- * 1. **Context** - provided by an ancestor `<igc-theme-provider>` element via the Lit context API.
+ * 1. **Context** - provided by an ancestor theme provider component via the Lit context API.
  * 2. **Global** - the application-wide theme set via `configureTheme()`.
  *
  * When a context provider is present, the controller subscribes to its updates
@@ -15,41 +15,11 @@ import type { Theme, Themes, ThemeVariant, ThemingControllerConfig } from './typ
  *
  * Theme styles are applied directly to the host's shadow root via `adoptStyles`
  * every time the active theme or variant changes.
- *
- * @example
- * Basic usage - typically created via {@link addThemingController}:
- * ```typescript
- * import { addThemingController } from '#theming/theming-controller.js';
- * import { all } from './themes/themes.js';
- *
- * export default class IgcMyComponent extends LitElement {
- *   constructor() {
- *     super();
- *     addThemingController(this, all);
- *   }
- * }
- * ```
- *
- * @example
- * Accessing the current theme and variant at runtime:
- * ```typescript
- * export default class IgcMyComponent extends LitElement {
- *   private readonly _themes = addThemingController(this, all);
- *
- *   protected override render() {
- *     // Conditionally render based on active theme
- *     return this._themes.variant === 'dark'
- *       ? html`<div class="dark-layout"></div>`
- *       : html`<div class="light-layout"></div>`;
- *   }
- * }
- * ```
  */
 declare class ThemingController implements ReactiveController {
     private readonly _host;
     private readonly _themes;
     private readonly _options?;
-    private readonly _contextConsumer;
     private _theme;
     private _variant;
     private _themeSource;
@@ -74,7 +44,7 @@ declare class ThemingController implements ReactiveController {
  *
  * This is the preferred way to add theming support to a component. The controller
  * is registered with the host's reactive controller lifecycle and automatically
- * resolves the active theme from an ancestor `<igc-theme-provider>` context or
+ * resolves the active theme from an ancestor theme provider context or
  * falls back to the application-wide theme set via `configureTheme()`.
  *
  * @param host - The Lit element that will host the controller.

package/theming/theming-controller.js

@@ -1,8 +1,8 @@
 import { ContextConsumer } from '@lit/context';
-import { adoptStyles, css, } from 'lit';
-import { getTheme } from './config.js';
+import { adoptStyles, } from 'lit';
+import { _themeChangedEmitter, getTheme } from './config.js';
 import { themeContext } from './context.js';
-import { _themeChangedEmitter, CHANGED_THEME_EVENT } from './theming-event.js';
+import { CHANGED_THEME_EVENT } from './theming-event.js';
 class ThemingController {
     get theme() {
         return this._theme;
@@ -17,8 +17,7 @@ class ThemingController {
         this._host = host;
         this._themes = themes;
         this._options = config;
-        this._host.addController(this);
-        this._contextConsumer = new ContextConsumer(this._host, {
+        new ContextConsumer(this._host, {
             context: themeContext,
             callback: (value) => {
                 if (value) {
@@ -27,33 +26,29 @@ class ThemingController {
             },
             subscribe: true,
         });
+        this._host.addController(this);
     }
     hostConnected() {
-        this._applyGlobalTheme();
+        if (this._themeSource === 'uninitialized') {
+            _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);
+            this._applyGlobalTheme();
+        }
     }
     hostDisconnected() {
-        if (this._themeSource === 'global') {
-            _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
-        }
+        _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
         this._themeSource = 'uninitialized';
-        this._contextConsumer.value = undefined;
     }
     handleEvent() {
         if (this._themeSource === 'global') {
             this._applyGlobalTheme();
         }
     }
-    _applyContextTheme(contextValue) {
-        if (this._themeSource === 'global') {
-            _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
-        }
+    _applyContextTheme({ theme, variant }) {
+        _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
         this._themeSource = 'context';
-        this._applyTheme(contextValue.theme, contextValue.variant);
+        this._applyTheme(theme, variant);
     }
     _applyGlobalTheme() {
-        if (this._themeSource === 'uninitialized') {
-            _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);
-        }
         const { theme, themeVariant } = getTheme();
         this._themeSource = 'global';
         this._applyTheme(theme, themeVariant);
@@ -67,9 +62,8 @@ class ThemingController {
     }
     _adoptStyles() {
         const ctor = this._host.constructor;
-        const shared = this._themes[this._variant].shared || css ``;
-        const theme = this._themes[this._variant][this._theme] || css ``;
-        adoptStyles(this._host.shadowRoot, [...ctor.elementStyles, shared, theme]);
+        const { shared, [this._theme]: theme } = this._themes[this._variant];
+        adoptStyles(this._host.shadowRoot, [...ctor.elementStyles, shared, theme].filter((s) => s !== undefined));
     }
 }
 export function addThemingController(host, themes, config) {

package/theming/theming-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"theming-controller.js","sourceRoot":"","sources":["../../src/theming/theming-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextConsumer } from '@lit/context';\nimport {\n  adoptStyles,\n  css,\n  type LitElement,\n  type ReactiveController,\n  type ReactiveControllerHost,\n  type ReactiveElement,\n} from 'lit';\n\nimport { getTheme } from './config.js';\nimport { themeContext } from './context.js';\nimport { _themeChangedEmitter, CHANGED_THEME_EVENT } from './theming-event.js';\nimport type {\n  Theme,\n  Themes,\n  ThemeVariant,\n  ThemingControllerConfig,\n} from './types.js';\n\ntype ThemeProviderSource = 'uninitialized' | 'context' | 'global';\n\n/**\n * A reactive controller that manages theme adoption for a Lit host element.\n *\n * It resolves the active theme from one of two sources, in order of priority:\n *\n * 1. **Context** - provided by an ancestor `<igc-theme-provider>` element via the Lit context API.\n * 2. **Global** - the application-wide theme set via `configureTheme()`.\n *\n * When a context provider is present, the controller subscribes to its updates\n * and stops listening to global theme change events. When the host element is\n * disconnected and reconnected outside a provider, it automatically falls back\n * to the global theme.\n *\n * Theme styles are applied directly to the host's shadow root via `adoptStyles`\n * every time the active theme or variant changes.\n *\n * @example\n * Basic usage - typically created via {@link addThemingController}:\n * ```typescript\n * import { addThemingController } from '#theming/theming-controller.js';\n * import { all } from './themes/themes.js';\n *\n * export default class IgcMyComponent extends LitElement {\n *   constructor() {\n *     super();\n *     addThemingController(this, all);\n *   }\n * }\n * ```\n *\n * @example\n * Accessing the current theme and variant at runtime:\n * ```typescript\n * export default class IgcMyComponent extends LitElement {\n *   private readonly _themes = addThemingController(this, all);\n *\n *   protected override render() {\n *     // Conditionally render based on active theme\n *     return this._themes.variant === 'dark'\n *       ? html`<div class=\"dark-layout\"></div>`\n *       : html`<div class=\"light-layout\"></div>`;\n *   }\n * }\n * ```\n */\nclass ThemingController implements ReactiveController {\n  //#region Internal state\n\n  private readonly _host: ReactiveControllerHost & ReactiveElement;\n  private readonly _themes: Themes;\n  private readonly _options?: ThemingControllerConfig;\n  private readonly _contextConsumer: ContextConsumer<\n    typeof themeContext,\n    ReactiveElement\n  >;\n\n  private _theme: Theme = 'bootstrap';\n  private _variant: ThemeVariant = 'light';\n  private _themeSource: ThemeProviderSource = 'uninitialized';\n\n  //#endregion\n\n  //#region Public properties\n\n  /** Gets the current theme. */\n  public get theme(): Theme {\n    return this._theme;\n  }\n\n  /** Gets the current theme variant. */\n  public get variant(): ThemeVariant {\n    return this._variant;\n  }\n\n  //#endregion\n\n  constructor(\n    host: ReactiveControllerHost & ReactiveElement,\n    themes: Themes,\n    config?: ThemingControllerConfig\n  ) {\n    this._host = host;\n    this._themes = themes;\n    this._options = config;\n\n    this._host.addController(this);\n\n    this._contextConsumer = new ContextConsumer(this._host, {\n      context: themeContext,\n      callback: (value) => {\n        if (value) {\n          this._applyContextTheme(value);\n        }\n      },\n      subscribe: true,\n    });\n  }\n\n  //#region ReactiveController implementation\n\n  /** @internal */\n  public hostConnected(): void {\n    // Apply the global theme initially. When the host's first update cycle begins, if a context provider is\n    // present and has set its value, the callback will be invoked and override with the context value.\n    this._applyGlobalTheme();\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    if (this._themeSource === 'global') {\n      _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);\n    }\n\n    // Reset to initial state so that if the host reconnects in a different part of the tree,\n    // it can properly re-resolve the theme source.\n    this._themeSource = 'uninitialized';\n    this._contextConsumer.value = undefined;\n  }\n\n  //#endregion\n\n  //#region Event handling\n\n  /** @internal */\n  public handleEvent(): void {\n    if (this._themeSource === 'global') {\n      this._applyGlobalTheme();\n    }\n  }\n\n  //#endregion\n\n  //#region Internal methods\n\n  private _applyContextTheme(contextValue: {\n    theme: Theme;\n    variant: ThemeVariant;\n  }): void {\n    // If we were using global theme, unsubscribe from global events\n    if (this._themeSource === 'global') {\n      _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);\n    }\n\n    this._themeSource = 'context';\n    this._applyTheme(contextValue.theme, contextValue.variant);\n  }\n\n  private _applyGlobalTheme(): void {\n    // Subscribe to global events only on first initialization\n    if (this._themeSource === 'uninitialized') {\n      _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);\n    }\n\n    const { theme, themeVariant } = getTheme();\n\n    this._themeSource = 'global';\n    this._applyTheme(theme, themeVariant);\n  }\n\n  private _applyTheme(theme: Theme, variant: ThemeVariant): void {\n    this._theme = theme;\n    this._variant = variant;\n\n    this._adoptStyles();\n    this._options?.themeChange?.call(this._host, this._theme);\n    this._host.requestUpdate();\n  }\n\n  private _adoptStyles(): void {\n    const ctor = this._host.constructor as typeof LitElement;\n    const shared = this._themes[this._variant].shared || css``;\n    const theme = this._themes[this._variant][this._theme] || css``;\n\n    adoptStyles(this._host.shadowRoot!, [...ctor.elementStyles, shared, theme]);\n  }\n\n  //#endregion\n}\n\n/**\n * Creates and attaches a {@link ThemingController} to the given host element.\n *\n * This is the preferred way to add theming support to a component. The controller\n * is registered with the host's reactive controller lifecycle and automatically\n * resolves the active theme from an ancestor `<igc-theme-provider>` context or\n * falls back to the application-wide theme set via `configureTheme()`.\n *\n * @param host - The Lit element that will host the controller.\n * @param themes - The theme styles map containing `light` and `dark` variant entries,\n *   each keyed by theme name (`bootstrap`, `material`, `fluent`, `indigo`) and\n *   an optional `shared` entry applied regardless of theme.\n * @param config - Optional configuration.\n * @param config.themeChange - Callback invoked on the host whenever the active theme changes.\n *\n * @returns The created {@link ThemingController} instance.\n *\n * @example\n * Minimal setup in a component constructor:\n * ```typescript\n * import { addThemingController } from '#theming/theming-controller.js';\n * import { all } from './themes/themes.js';\n *\n * export default class IgcMyComponent extends LitElement {\n *   constructor() {\n *     super();\n *     addThemingController(this, all);\n *   }\n * }\n * ```\n *\n * @example\n * With a `themeChange` callback and retained controller reference:\n * ```typescript\n * export default class IgcMyComponent extends LitElement {\n *   private readonly _themingController = addThemingController(this, all, {\n *     themeChange(theme) {\n *       // Called on `this` (the host) whenever the theme switches\n *       console.log(`Theme changed to: ${theme}`);\n *     },\n *   });\n *\n *   protected override render() {\n *     return html`<span>Current variant: ${this._themingController.variant}</span>`;\n *   }\n * }\n * ```\n */\nexport function addThemingController(\n  host: ReactiveControllerHost & ReactiveElement,\n  themes: Themes,\n  config?: ThemingControllerConfig\n): ThemingController {\n  return new ThemingController(host, themes, config);\n}\n\nexport type { ThemingController };\n"]}
+{"version":3,"file":"theming-controller.js","sourceRoot":"","sources":["../../src/theming/theming-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextConsumer } from '@lit/context';\nimport {\n  adoptStyles,\n  type LitElement,\n  type ReactiveController,\n  type ReactiveControllerHost,\n  type ReactiveElement,\n} from 'lit';\n\nimport { _themeChangedEmitter, getTheme } from './config.js';\nimport { type ThemeContext, themeContext } from './context.js';\nimport { CHANGED_THEME_EVENT } from './theming-event.js';\nimport type {\n  Theme,\n  Themes,\n  ThemeVariant,\n  ThemingControllerConfig,\n} from './types.js';\n\ntype ThemeProviderSource = 'uninitialized' | 'context' | 'global';\n\n/**\n * A reactive controller that manages theme adoption for a Lit host element.\n *\n * It resolves the active theme from one of two sources, in order of priority:\n *\n * 1. **Context** - provided by an ancestor theme provider component via the Lit context API.\n * 2. **Global** - the application-wide theme set via `configureTheme()`.\n *\n * When a context provider is present, the controller subscribes to its updates\n * and stops listening to global theme change events. When the host element is\n * disconnected and reconnected outside a provider, it automatically falls back\n * to the global theme.\n *\n * Theme styles are applied directly to the host's shadow root via `adoptStyles`\n * every time the active theme or variant changes.\n */\nclass ThemingController implements ReactiveController {\n  //#region Internal state\n\n  private readonly _host: ReactiveControllerHost & ReactiveElement;\n  private readonly _themes: Themes;\n  private readonly _options?: ThemingControllerConfig;\n\n  private _theme: Theme = 'bootstrap';\n  private _variant: ThemeVariant = 'light';\n  private _themeSource: ThemeProviderSource = 'uninitialized';\n\n  //#endregion\n\n  //#region Public properties\n\n  /** Gets the current theme. */\n  public get theme(): Theme {\n    return this._theme;\n  }\n\n  /** Gets the current theme variant. */\n  public get variant(): ThemeVariant {\n    return this._variant;\n  }\n\n  //#endregion\n\n  constructor(\n    host: ReactiveControllerHost & ReactiveElement,\n    themes: Themes,\n    config?: ThemingControllerConfig\n  ) {\n    this._host = host;\n    this._themes = themes;\n    this._options = config;\n\n    // Registered before this controller, so a connected provider answers its\n    // context request before `hostConnected` below falls back to the global theme.\n    new ContextConsumer(this._host, {\n      context: themeContext,\n      callback: (value) => {\n        if (value) {\n          this._applyContextTheme(value);\n        }\n      },\n      subscribe: true,\n    });\n\n    this._host.addController(this);\n  }\n\n  //#region ReactiveController implementation\n\n  /** @internal */\n  public hostConnected(): void {\n    if (this._themeSource === 'uninitialized') {\n      _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);\n      this._applyGlobalTheme();\n    }\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);\n\n    // Re-resolve the theme source on reconnect, which may be in another part of the tree.\n    this._themeSource = 'uninitialized';\n  }\n\n  //#endregion\n\n  //#region Event handling\n\n  /** @internal */\n  public handleEvent(): void {\n    if (this._themeSource === 'global') {\n      this._applyGlobalTheme();\n    }\n  }\n\n  //#endregion\n\n  //#region Internal methods\n\n  private _applyContextTheme({ theme, variant }: ThemeContext): void {\n    _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);\n    this._themeSource = 'context';\n    this._applyTheme(theme, variant);\n  }\n\n  private _applyGlobalTheme(): void {\n    const { theme, themeVariant } = getTheme();\n\n    this._themeSource = 'global';\n    this._applyTheme(theme, themeVariant);\n  }\n\n  private _applyTheme(theme: Theme, variant: ThemeVariant): void {\n    this._theme = theme;\n    this._variant = variant;\n\n    this._adoptStyles();\n    this._options?.themeChange?.call(this._host, this._theme);\n    this._host.requestUpdate();\n  }\n\n  private _adoptStyles(): void {\n    const ctor = this._host.constructor as typeof LitElement;\n    const { shared, [this._theme]: theme } = this._themes[this._variant];\n    adoptStyles(\n      this._host.shadowRoot!,\n      [...ctor.elementStyles, shared, theme].filter((s) => s !== undefined)\n    );\n  }\n\n  //#endregion\n}\n\n/**\n * Creates and attaches a {@link ThemingController} to the given host element.\n *\n * This is the preferred way to add theming support to a component. The controller\n * is registered with the host's reactive controller lifecycle and automatically\n * resolves the active theme from an ancestor theme provider context or\n * falls back to the application-wide theme set via `configureTheme()`.\n *\n * @param host - The Lit element that will host the controller.\n * @param themes - The theme styles map containing `light` and `dark` variant entries,\n *   each keyed by theme name (`bootstrap`, `material`, `fluent`, `indigo`) and\n *   an optional `shared` entry applied regardless of theme.\n * @param config - Optional configuration.\n * @param config.themeChange - Callback invoked on the host whenever the active theme changes.\n *\n * @returns The created {@link ThemingController} instance.\n *\n * @example\n * Minimal setup in a component constructor:\n * ```typescript\n * import { addThemingController } from '#theming/theming-controller.js';\n * import { all } from './themes/themes.js';\n *\n * export default class IgcMyComponent extends LitElement {\n *   constructor() {\n *     super();\n *     addThemingController(this, all);\n *   }\n * }\n * ```\n *\n * @example\n * With a `themeChange` callback and retained controller reference:\n * ```typescript\n * export default class IgcMyComponent extends LitElement {\n *   private readonly _themingController = addThemingController(this, all, {\n *     themeChange(theme) {\n *       // Called on `this` (the host) whenever the theme switches\n *       console.log(`Theme changed to: ${theme}`);\n *     },\n *   });\n *\n *   protected override render() {\n *     return html`<span>Current variant: ${this._themingController.variant}</span>`;\n *   }\n * }\n * ```\n */\nexport function addThemingController(\n  host: ReactiveControllerHost & ReactiveElement,\n  themes: Themes,\n  config?: ThemingControllerConfig\n): ThemingController {\n  return new ThemingController(host, themes, config);\n}\n\nexport type { ThemingController };\n"]}

package/theming/theming-event.d.ts

@@ -1,12 +1,6 @@
 import type { Theme, ThemeVariant } from './types.js';
-declare class ThemeChangedEmitter extends EventTarget {
-    constructor();
-    /** @internal */
-    handleEvent(): void;
-}
 export declare const CHANGE_THEME_EVENT = "igc-change-theme";
 export declare const CHANGED_THEME_EVENT = "igc-changed-theme";
-export declare const _themeChangedEmitter: ThemeChangedEmitter;
 declare global {
     interface WindowEventMap {
         [CHANGE_THEME_EVENT]: CustomEvent<ChangeThemeEventDetail>;
@@ -19,4 +13,3 @@ export type ChangeThemeEventDetail = {
     theme: Theme;
     themeVariant: ThemeVariant;
 };
-export {};

package/theming/theming-event.js

@@ -1,16 +1,3 @@
-import { isServer } from 'lit';
-class ThemeChangedEmitter extends EventTarget {
-    constructor() {
-        super();
-        if (!isServer) {
-            globalThis.addEventListener(CHANGE_THEME_EVENT, this);
-        }
-    }
-    handleEvent() {
-        this.dispatchEvent(new CustomEvent(CHANGED_THEME_EVENT));
-    }
-}
 export const CHANGE_THEME_EVENT = 'igc-change-theme';
 export const CHANGED_THEME_EVENT = 'igc-changed-theme';
-export const _themeChangedEmitter = new ThemeChangedEmitter();
 //# sourceMappingURL=theming-event.js.map

package/theming/theming-event.js.map

@@ -1 +1 @@
-{"version":3,"file":"theming-event.js","sourceRoot":"","sources":["../../src/theming/theming-event.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAG/B,MAAM,mBAAoB,SAAQ,WAAW;IAC3C;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,UAAU,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAGM,WAAW;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC3D,CAAC;CACF;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAAkB,CAAC;AACrD,MAAM,CAAC,MAAM,mBAAmB,GAAG,mBAAmB,CAAC;AACvD,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,mBAAmB,EAAE,CAAC","sourcesContent":["import { isServer } from 'lit';\nimport type { Theme, ThemeVariant } from './types.js';\n\nclass ThemeChangedEmitter extends EventTarget {\n  constructor() {\n    super();\n    if (!isServer) {\n      globalThis.addEventListener(CHANGE_THEME_EVENT, this);\n    }\n  }\n\n  /** @internal */\n  public handleEvent(): void {\n    this.dispatchEvent(new CustomEvent(CHANGED_THEME_EVENT));\n  }\n}\n\nexport const CHANGE_THEME_EVENT = 'igc-change-theme';\nexport const CHANGED_THEME_EVENT = 'igc-changed-theme';\nexport const _themeChangedEmitter = new ThemeChangedEmitter();\n\ndeclare global {\n  interface WindowEventMap {\n    [CHANGE_THEME_EVENT]: CustomEvent<ChangeThemeEventDetail>;\n  }\n}\n\n/**\n * The possible details of the \"igc-change-theme\" event.\n */\nexport type ChangeThemeEventDetail = {\n  theme: Theme;\n  themeVariant: ThemeVariant;\n};\n"]}
+{"version":3,"file":"theming-event.js","sourceRoot":"","sources":["../../src/theming/theming-event.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAAkB,CAAC;AACrD,MAAM,CAAC,MAAM,mBAAmB,GAAG,mBAAmB,CAAC","sourcesContent":["import type { Theme, ThemeVariant } from './types.js';\n\nexport const CHANGE_THEME_EVENT = 'igc-change-theme';\nexport const CHANGED_THEME_EVENT = 'igc-changed-theme';\n\ndeclare global {\n  interface WindowEventMap {\n    [CHANGE_THEME_EVENT]: CustomEvent<ChangeThemeEventDetail>;\n  }\n}\n\n/**\n * The possible details of the \"igc-change-theme\" event.\n */\nexport type ChangeThemeEventDetail = {\n  theme: Theme;\n  themeVariant: ThemeVariant;\n};\n"]}

package/theming/types.d.ts

@@ -1,14 +1,7 @@
 import type { CSSResult } from 'lit';
 export type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';
 export type ThemeVariant = 'light' | 'dark';
-export type Themes = {
-    light: {
-        [K in Theme | 'shared']?: CSSResult;
-    };
-    dark: {
-        [K in Theme | 'shared']?: CSSResult;
-    };
-};
+export type Themes = Record<ThemeVariant, Partial<Record<Theme | 'shared', CSSResult>>>;
 export type ThemeChangedCallback = (theme: Theme) => unknown;
 export type ThemingControllerConfig = {
     themeChange?: ThemeChangedCallback;

package/theming/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/theming/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CSSResult } from 'lit';\n\nexport type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';\nexport type ThemeVariant = 'light' | 'dark';\n\nexport type Themes = {\n  light: {\n    [K in Theme | 'shared']?: CSSResult;\n  };\n  dark: {\n    [K in Theme | 'shared']?: CSSResult;\n  };\n};\n\nexport type ThemeChangedCallback = (theme: Theme) => unknown;\nexport type ThemingControllerConfig = {\n  themeChange?: ThemeChangedCallback;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/theming/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CSSResult } from 'lit';\n\nexport type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';\nexport type ThemeVariant = 'light' | 'dark';\n\nexport type Themes = Record<\n  ThemeVariant,\n  Partial<Record<Theme | 'shared', CSSResult>>\n>;\n\nexport type ThemeChangedCallback = (theme: Theme) => unknown;\nexport type ThemingControllerConfig = {\n  themeChange?: ThemeChangedCallback;\n};\n"]}