igniteui-webcomponents 7.0.0 → 7.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-webcomponents",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.",
   "author": "Infragistics",
   "license": "MIT",

package/skills/igniteui-wc-choose-components/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: igniteui-wc-choose-components
 description: Identify and select the right Ignite UI Web Components for your app UI, then navigate to official docs, usage examples, and API references
-user-invokable: true
+user-invocable: true
 ---
 
 # Choose the Right Ignite UI Components

package/skills/igniteui-wc-customize-component-theme/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: igniteui-wc-customize-component-theme
 description: Customize Ignite UI Web Components styling using CSS custom properties, optional Sass, and the igniteui-theming MCP server for AI-assisted theming
-user-invokable: true
+user-invocable: true
 ---
 
 # Ignite UI Web Components — Theming Skill

package/skills/igniteui-wc-integrate-with-framework/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: igniteui-wc-integrate-with-framework
 description: Integrate igniteui-webcomponents into React, Angular, Vue, or vanilla JS applications with framework-specific configurations
-user-invokable: true
+user-invocable: true
 ---
 
 # Integrate with Framework

package/skills/igniteui-wc-optimize-bundle-size/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: igniteui-wc-optimize-bundle-size
 description: Optimize application bundle size by importing only necessary components and using tree-shaking effectively
-user-invokable: true
+user-invocable: true
 ---
 
 # Optimize Bundle Size

package/theming/theming-controller.d.ts

@@ -1,5 +1,50 @@
 import { type ReactiveController, type ReactiveControllerHost, type ReactiveElement } from 'lit';
-import type { Theme, Themes, ThemingControllerConfig } from './types.js';
+import type { Theme, Themes, ThemeVariant, ThemingControllerConfig } from './types.js';
+/**
+ * A reactive controller that manages theme adoption for a Lit host element.
+ *
+ * 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.
+ * 2. **Global** — the application-wide theme set via `configureTheme()`.
+ *
+ * When a context provider is present, the controller subscribes to its updates
+ * and stops listening to global theme change events. When the host element is
+ * disconnected and reconnected outside a provider, it automatically falls back
+ * to the global theme.
+ *
+ * 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;
@@ -8,7 +53,10 @@ declare class ThemingController implements ReactiveController {
     private _theme;
     private _variant;
     private _themeSource;
+    /** Gets the current theme. */
     get theme(): Theme;
+    /** Gets the current theme variant. */
+    get variant(): ThemeVariant;
     constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes, config?: ThemingControllerConfig);
     /** @internal */
     hostConnected(): void;
@@ -18,11 +66,56 @@ declare class ThemingController implements ReactiveController {
     handleEvent(): void;
     private _applyContextTheme;
     private _applyGlobalTheme;
-    private _getStyles;
-    protected _adoptStyles(): void;
+    private _applyTheme;
+    private _adoptStyles;
 }
 /**
- * Adds theming controller to the host component.
+ * Creates and attaches a {@link ThemingController} to the given host element.
+ *
+ * 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
+ * falls back to the application-wide theme set via `configureTheme()`.
+ *
+ * @param host - The Lit element that will host the controller.
+ * @param themes - The theme styles map containing `light` and `dark` variant entries,
+ *   each keyed by theme name (`bootstrap`, `material`, `fluent`, `indigo`) and
+ *   an optional `shared` entry applied regardless of theme.
+ * @param config - Optional configuration.
+ * @param config.themeChange - Callback invoked on the host whenever the active theme changes.
+ *
+ * @returns The created {@link ThemingController} instance.
+ *
+ * @example
+ * Minimal setup in a component constructor:
+ * ```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
+ * With a `themeChange` callback and retained controller reference:
+ * ```typescript
+ * export default class IgcMyComponent extends LitElement {
+ *   private readonly _themingController = addThemingController(this, all, {
+ *     themeChange(theme) {
+ *       // Called on `this` (the host) whenever the theme switches
+ *       console.log(`Theme changed to: ${theme}`);
+ *     },
+ *   });
+ *
+ *   protected override render() {
+ *     return html`<span>Current variant: ${this._themingController.variant}</span>`;
+ *   }
+ * }
+ * ```
  */
 export declare function addThemingController(host: ReactiveControllerHost & ReactiveElement, themes: Themes, config?: ThemingControllerConfig): ThemingController;
 export type { ThemingController };

package/theming/theming-controller.js

@@ -7,6 +7,9 @@ class ThemingController {
     get theme() {
         return this._theme;
     }
+    get variant() {
+        return this._variant;
+    }
     constructor(host, themes, config) {
         this._theme = 'bootstrap';
         this._variant = 'light';
@@ -26,18 +29,14 @@ class ThemingController {
         });
     }
     hostConnected() {
-        const contextValue = this._contextConsumer.value;
-        if (contextValue) {
-            this._applyContextTheme(contextValue);
-        }
-        else {
-            this._applyGlobalTheme();
-        }
+        this._applyGlobalTheme();
     }
     hostDisconnected() {
         if (this._themeSource === 'global') {
             _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
         }
+        this._themeSource = 'uninitialized';
+        this._contextConsumer.value = undefined;
     }
     handleEvent() {
         if (this._themeSource === 'global') {
@@ -49,40 +48,27 @@ class ThemingController {
             _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
         }
         this._themeSource = 'context';
-        this._theme = contextValue.theme;
-        this._variant = contextValue.variant;
-        this._adoptStyles();
-        this._options?.themeChange?.call(this._host, this._theme);
-        this._host.requestUpdate();
+        this._applyTheme(contextValue.theme, contextValue.variant);
     }
     _applyGlobalTheme() {
         if (this._themeSource === 'uninitialized') {
             _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);
         }
+        const { theme, themeVariant } = getTheme();
         this._themeSource = 'global';
-        const { theme: currentTheme, themeVariant } = getTheme();
-        this._theme = currentTheme;
-        this._variant = themeVariant;
+        this._applyTheme(theme, themeVariant);
+    }
+    _applyTheme(theme, variant) {
+        this._theme = theme;
+        this._variant = variant;
         this._adoptStyles();
         this._options?.themeChange?.call(this._host, this._theme);
         this._host.requestUpdate();
     }
-    _getStyles() {
-        const props = this._themes[this._variant];
-        const styles = { shared: css ``, theme: css `` };
-        for (const [name, sheet] of Object.entries(props)) {
-            if (name === 'shared') {
-                styles.shared = sheet;
-            }
-            if (name === this.theme) {
-                styles.theme = sheet;
-            }
-        }
-        return styles;
-    }
     _adoptStyles() {
         const ctor = this._host.constructor;
-        const { shared, theme } = this._getStyles();
+        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]);
     }
 }

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\nclass ThemingController implements ReactiveController {\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  public get theme(): Theme {\n    return this._theme;\n  }\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    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  /** @internal */\n  public hostConnected(): void {\n    // Check if we have a context value immediately when connected usually after the parent provider\n    // is already in the DOM (i.e. creation of the component after initial render)\n    const contextValue = this._contextConsumer.value;\n\n    if (contextValue) {\n      this._applyContextTheme(contextValue);\n    } else {\n      this._applyGlobalTheme();\n    }\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    if (this._themeSource === 'global') {\n      _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);\n    }\n  }\n\n  /** @internal */\n  public handleEvent(): void {\n    // Only handle global theme change events\n    if (this._themeSource === 'global') {\n      this._applyGlobalTheme();\n    }\n  }\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._theme = contextValue.theme;\n    this._variant = contextValue.variant;\n\n    this._adoptStyles();\n    this._options?.themeChange?.call(this._host, this._theme);\n    this._host.requestUpdate();\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    this._themeSource = 'global';\n\n    const { theme: currentTheme, themeVariant } = getTheme();\n    this._theme = currentTheme;\n    this._variant = themeVariant;\n\n    this._adoptStyles();\n    this._options?.themeChange?.call(this._host, this._theme);\n    this._host.requestUpdate();\n  }\n\n  private _getStyles() {\n    const props = this._themes[this._variant];\n    const styles = { shared: css``, theme: css`` };\n\n    for (const [name, sheet] of Object.entries(props)) {\n      if (name === 'shared') {\n        styles.shared = sheet;\n      }\n      if (name === this.theme) {\n        styles.theme = sheet;\n      }\n    }\n\n    return styles;\n  }\n\n  protected _adoptStyles(): void {\n    const ctor = this._host.constructor as typeof LitElement;\n    const { shared, theme } = this._getStyles();\n\n    adoptStyles(this._host.shadowRoot!, [...ctor.elementStyles, shared, theme]);\n  }\n}\n\n/**\n * Adds theming controller to the host component.\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":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EACL,WAAW,EACX,GAAG,GAKJ,MAAM,KAAK,CAAC;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAuD/E,MAAM,iBAAiB;IAoBrB,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAGD,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAID,YACE,IAA8C,EAC9C,MAAc,EACd,MAAgC;QAvB1B,WAAM,GAAU,WAAW,CAAC;QAC5B,aAAQ,GAAiB,OAAO,CAAC;QACjC,iBAAY,GAAwB,eAAe,CAAC;QAuB1D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;QAEvB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAE/B,IAAI,CAAC,gBAAgB,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE;YACtD,OAAO,EAAE,YAAY;YACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAClB,IAAI,KAAK,EAAE,CAAC;oBACV,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;gBACjC,CAAC;YACH,CAAC;YACD,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAKM,aAAa;QAGlB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAGM,gBAAgB;QACrB,IAAI,IAAI,CAAC,YAAY,KAAK,QAAQ,EAAE,CAAC;YACnC,oBAAoB,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;QACtE,CAAC;QAID,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC;QACpC,IAAI,CAAC,gBAAgB,CAAC,KAAK,GAAG,SAAS,CAAC;IAC1C,CAAC;IAOM,WAAW;QAChB,IAAI,IAAI,CAAC,YAAY,KAAK,QAAQ,EAAE,CAAC;YACnC,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAMO,kBAAkB,CAAC,YAG1B;QAEC,IAAI,IAAI,CAAC,YAAY,KAAK,QAAQ,EAAE,CAAC;YACnC,oBAAoB,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;QACtE,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAC9B,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7D,CAAC;IAEO,iBAAiB;QAEvB,IAAI,IAAI,CAAC,YAAY,KAAK,eAAe,EAAE,CAAC;YAC1C,oBAAoB,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;QACnE,CAAC;QAED,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,CAAC;QAE3C,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;QAC7B,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;IACxC,CAAC;IAEO,WAAW,CAAC,KAAY,EAAE,OAAqB;QACrD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QAExB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1D,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;IAC7B,CAAC;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,WAAgC,CAAC;QACzD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,IAAI,GAAG,CAAA,EAAE,CAAC;QAC3D,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,CAAA,EAAE,CAAC;QAEhE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,UAAW,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAC9E,CAAC;CAGF;AAkDD,MAAM,UAAU,oBAAoB,CAClC,IAA8C,EAC9C,MAAc,EACd,MAAgC;IAEhC,OAAO,IAAI,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AACrD,CAAC","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"]}