igniteui-webcomponents 6.4.0-alpha.4 → 6.5.0

package/theming/theming-controller.d.ts

@@ -4,8 +4,10 @@ declare class ThemingController implements ReactiveController {
     private readonly _host;
     private readonly _themes;
     private readonly _options?;
+    private readonly _contextConsumer;
     private _theme;
     private _variant;
+    private _themeSource;
     get theme(): Theme;
     constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes, config?: ThemingControllerConfig);
     /** @internal */
@@ -14,9 +16,13 @@ declare class ThemingController implements ReactiveController {
     hostDisconnected(): void;
     /** @internal */
     handleEvent(): void;
+    private _applyContextTheme;
+    private _applyGlobalTheme;
     private _getStyles;
     protected _adoptStyles(): void;
-    private _handleThemeChanged;
 }
+/**
+ * Adds theming controller to the host component.
+ */
 export declare function addThemingController(host: ReactiveControllerHost & ReactiveElement, themes: Themes, config?: ThemingControllerConfig): ThemingController;
 export type { ThemingController };

package/theming/theming-controller.js

@@ -1,5 +1,7 @@
+import { ContextConsumer } from '@lit/context';
 import { adoptStyles, css, } from 'lit';
 import { getTheme } from './config.js';
+import { themeContext } from './context.js';
 import { _themeChangedEmitter, CHANGED_THEME_EVENT } from './theming-event.js';
 class ThemingController {
     get theme() {
@@ -8,20 +10,62 @@ class ThemingController {
     constructor(host, themes, config) {
         this._theme = 'bootstrap';
         this._variant = 'light';
+        this._themeSource = 'uninitialized';
         this._host = host;
         this._themes = themes;
         this._options = config;
         this._host.addController(this);
+        this._contextConsumer = new ContextConsumer(this._host, {
+            context: themeContext,
+            callback: (value) => {
+                if (value) {
+                    this._applyContextTheme(value);
+                }
+            },
+            subscribe: true,
+        });
     }
     hostConnected() {
-        this._handleThemeChanged();
-        _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);
+        const contextValue = this._contextConsumer.value;
+        if (contextValue) {
+            this._applyContextTheme(contextValue);
+        }
+        else {
+            this._applyGlobalTheme();
+        }
     }
     hostDisconnected() {
-        _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
+        if (this._themeSource === 'global') {
+            _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
+        }
     }
     handleEvent() {
-        this._handleThemeChanged();
+        if (this._themeSource === 'global') {
+            this._applyGlobalTheme();
+        }
+    }
+    _applyContextTheme(contextValue) {
+        if (this._themeSource === 'global') {
+            _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();
+    }
+    _applyGlobalTheme() {
+        if (this._themeSource === 'uninitialized') {
+            _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);
+        }
+        this._themeSource = 'global';
+        const { theme: currentTheme, themeVariant } = getTheme();
+        this._theme = currentTheme;
+        this._variant = themeVariant;
+        this._adoptStyles();
+        this._options?.themeChange?.call(this._host, this._theme);
+        this._host.requestUpdate();
     }
     _getStyles() {
         const props = this._themes[this._variant];
@@ -37,18 +81,10 @@ class ThemingController {
         return styles;
     }
     _adoptStyles() {
-        const { theme: currentTheme, themeVariant } = getTheme();
-        this._theme = currentTheme;
-        this._variant = themeVariant;
         const ctor = this._host.constructor;
         const { shared, theme } = this._getStyles();
         adoptStyles(this._host.shadowRoot, [...ctor.elementStyles, shared, theme]);
     }
-    _handleThemeChanged() {
-        this._adoptStyles();
-        this._options?.themeChange?.call(this._host, this._theme);
-        this._host.requestUpdate();
-    }
 }
 export function addThemingController(host, themes, config) {
     return new ThemingController(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":"AAAA,OAAO,EACL,WAAW,EACX,GAAG,GAKJ,MAAM,KAAK,CAAC;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAQ/E,MAAM,iBAAiB;IAQrB,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,YACE,IAA8C,EAC9C,MAAc,EACd,MAAgC;QAV1B,WAAM,GAAU,WAAW,CAAC;QAC5B,aAAQ,GAAiB,OAAO,CAAC;QAWvC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;QACvB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAGM,aAAa;QAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,oBAAoB,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;IACnE,CAAC;IAGM,gBAAgB;QACrB,oBAAoB,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;IACtE,CAAC;IAGM,WAAW;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEO,UAAU;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC1C,MAAM,MAAM,GAAG,EAAE,MAAM,EAAE,GAAG,CAAA,EAAE,EAAE,KAAK,EAAE,GAAG,CAAA,EAAE,EAAE,CAAC;QAE/C,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YAClD,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACtB,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;YACxB,CAAC;YACD,IAAI,IAAI,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;gBACxB,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;YACvB,CAAC;QACH,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAES,YAAY;QACpB,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,CAAC;QACzD,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;QAE7B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,WAAgC,CAAC;QACzD,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAE5C,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,UAAW,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAC9E,CAAC;IAEO,mBAAmB;QACzB,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;CACF;AAED,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 {\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 { _themeChangedEmitter, CHANGED_THEME_EVENT } from './theming-event.js';\nimport type {\n  Theme,\n  Themes,\n  ThemeVariant,\n  ThemingControllerConfig,\n} from './types.js';\n\nclass ThemingController implements ReactiveController {\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\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\n  /** @internal */\n  public hostConnected(): void {\n    this._handleThemeChanged();\n    _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);\n  }\n\n  /** @internal */\n  public handleEvent(): void {\n    this._handleThemeChanged();\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 { theme: currentTheme, themeVariant } = getTheme();\n    this._theme = currentTheme;\n    this._variant = themeVariant;\n\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  private _handleThemeChanged(): void {\n    this._adoptStyles();\n    this._options?.themeChange?.call(this._host, this._theme);\n    this._host.requestUpdate();\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  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"]}

package/theming/utils.d.ts

@@ -1 +1,11 @@
+/**
+ * Retrieves all CSS custom properties from the document root element.
+ * Property names are converted from kebab-case to camelCase.
+ *
+ * @returns An object mapping camelCase property names to their values.
+ * Returns an empty object in SSR environments.
+ * @example
+ * // CSS: --my-primary-color: #ff0000;
+ * // Returns: { myPrimaryColor: '#ff0000' }
+ */
 export declare function getAllCssVariables(): Record<string, string>;

package/theming/utils.js

@@ -1,54 +1,20 @@
 import { isServer } from 'lit';
-function isStyleRule(rule) {
-    return rule != null && 'style' in rule;
-}
 function cssKeyToJsKey(key) {
     return key.replace(/^--|-./g, (match) => {
         return match.startsWith('--') ? '' : match.charAt(1).toUpperCase();
     });
 }
-function getAllCssVariableNames() {
-    const cssVars = new Set();
-    const styleSheets = Array.from(document.styleSheets);
-    for (const sheet of styleSheets) {
-        let rules;
-        try {
-            rules = sheet.cssRules;
-        }
-        catch {
-            continue;
-        }
-        if (!rules) {
-            continue;
-        }
-        for (const rule of Array.from(rules)) {
-            if (isStyleRule(rule)) {
-                const length = rule.style.length;
-                for (let i = 0; i < length; i++) {
-                    const style = rule.style[i];
-                    if (style.startsWith('--')) {
-                        cssVars.add(style);
-                    }
-                }
-            }
-        }
-    }
-    return cssVars;
-}
-function getElementCssVariables(allCssVars, element, pseudo) {
-    const cssVars = {};
-    const styles = getComputedStyle(element, pseudo);
-    for (const key of allCssVars) {
-        const value = styles.getPropertyValue(key);
-        if (value) {
-            cssVars[cssKeyToJsKey(key)] = value.trim();
+function getCssVariables() {
+    const rootStyles = getComputedStyle(document.documentElement);
+    const result = {};
+    for (const key of Array.from(rootStyles)) {
+        if (key.startsWith('--')) {
+            result[cssKeyToJsKey(key)] = rootStyles.getPropertyValue(key).trim();
         }
     }
-    return cssVars;
+    return result;
 }
 export function getAllCssVariables() {
-    return isServer
-        ? {}
-        : getElementCssVariables(getAllCssVariableNames(), document.documentElement);
+    return isServer ? {} : getCssVariables();
 }
 //# sourceMappingURL=utils.js.map

package/theming/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/theming/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAE/B,SAAS,WAAW,CAAC,IAAa;IAChC,OAAO,IAAI,IAAI,IAAI,IAAI,OAAO,IAAI,IAAI,CAAC;AACzC,CAAC;AAED,SAAS,aAAa,CAAC,GAAW;IAChC,OAAO,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;QACtC,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IACrE,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,sBAAsB;IAC7B,MAAM,OAAO,GAAG,IAAI,GAAG,EAAU,CAAC;IAClC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAErD,KAAK,MAAM,KAAK,IAAI,WAAW,EAAE,CAAC;QAChC,IAAI,KAA8B,CAAC;QAGnC,IAAI,CAAC;YACH,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC;QACzB,CAAC;QAAC,MAAM,CAAC;YACP,SAAS;QACX,CAAC;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,SAAS;QACX,CAAC;QAED,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACrC,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;gBACtB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;gBAEjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;oBAChC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;oBAE5B,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;wBAC3B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;oBACrB,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,SAAS,sBAAsB,CAC7B,UAAuB,EACvB,OAAoB,EACpB,MAAe;IAEf,MAAM,OAAO,GAA2B,EAAE,CAAC;IAC3C,MAAM,MAAM,GAAG,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAEjD,KAAK,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAC7B,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;QAE3C,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;QAC7C,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,kBAAkB;IAEhC,OAAO,QAAQ;QACb,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,sBAAsB,CACpB,sBAAsB,EAAE,EACxB,QAAQ,CAAC,eAAe,CACzB,CAAC;AACR,CAAC","sourcesContent":["import { isServer } from 'lit';\n\nfunction isStyleRule(rule: CSSRule): rule is CSSStyleRule {\n  return rule != null && 'style' in rule;\n}\n\nfunction cssKeyToJsKey(key: string): string {\n  return key.replace(/^--|-./g, (match) => {\n    return match.startsWith('--') ? '' : match.charAt(1).toUpperCase();\n  });\n}\n\nfunction getAllCssVariableNames(): Set<string> {\n  const cssVars = new Set<string>();\n  const styleSheets = Array.from(document.styleSheets);\n\n  for (const sheet of styleSheets) {\n    let rules: CSSRuleList | undefined;\n\n    // Potential CORS or access errors\n    try {\n      rules = sheet.cssRules;\n    } catch {\n      continue;\n    }\n\n    if (!rules) {\n      continue;\n    }\n\n    for (const rule of Array.from(rules)) {\n      if (isStyleRule(rule)) {\n        const length = rule.style.length;\n\n        for (let i = 0; i < length; i++) {\n          const style = rule.style[i];\n\n          if (style.startsWith('--')) {\n            cssVars.add(style);\n          }\n        }\n      }\n    }\n  }\n\n  return cssVars;\n}\n\nfunction getElementCssVariables(\n  allCssVars: Set<string>,\n  element: HTMLElement,\n  pseudo?: string\n): Record<string, string> {\n  const cssVars: Record<string, string> = {};\n  const styles = getComputedStyle(element, pseudo);\n\n  for (const key of allCssVars) {\n    const value = styles.getPropertyValue(key);\n\n    if (value) {\n      cssVars[cssKeyToJsKey(key)] = value.trim();\n    }\n  }\n\n  return cssVars;\n}\n\nexport function getAllCssVariables(): Record<string, string> {\n  /* c8 ignore next 2 */\n  return isServer\n    ? {}\n    : getElementCssVariables(\n        getAllCssVariableNames(),\n        document.documentElement\n      );\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/theming/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAQ/B,SAAS,aAAa,CAAC,GAAW;IAEhC,OAAO,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;QACtC,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IACrE,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,eAAe;IACtB,MAAM,UAAU,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;IAC9D,MAAM,MAAM,GAA2B,EAAE,CAAC;IAE1C,KAAK,MAAM,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;QACzC,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;QACvE,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC;AAYD,MAAM,UAAU,kBAAkB;IAChC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;AAC3C,CAAC","sourcesContent":["import { isServer } from 'lit';\n\n/**\n * Converts a CSS custom property name to a camelCase JavaScript key.\n * Removes leading '--' and converts kebab-case to camelCase.\n * @param key - The CSS variable name (e.g., '--my-color')\n * @returns The JavaScript key (e.g., 'myColor')\n */\nfunction cssKeyToJsKey(key: string): string {\n  // Regex: matches '--' at start OR '-x' pattern to convert to camelCase\n  return key.replace(/^--|-./g, (match) => {\n    return match.startsWith('--') ? '' : match.charAt(1).toUpperCase();\n  });\n}\n\nfunction getCssVariables(): Record<string, string> {\n  const rootStyles = getComputedStyle(document.documentElement);\n  const result: Record<string, string> = {};\n\n  for (const key of Array.from(rootStyles)) {\n    if (key.startsWith('--')) {\n      result[cssKeyToJsKey(key)] = rootStyles.getPropertyValue(key).trim();\n    }\n  }\n\n  return result;\n}\n\n/**\n * Retrieves all CSS custom properties from the document root element.\n * Property names are converted from kebab-case to camelCase.\n *\n * @returns An object mapping camelCase property names to their values.\n * Returns an empty object in SSR environments.\n * @example\n * // CSS: --my-primary-color: #ff0000;\n * // Returns: { myPrimaryColor: '#ff0000' }\n */\nexport function getAllCssVariables(): Record<string, string> {\n  return isServer ? {} : getCssVariables();\n}\n"]}