igniteui-webcomponents 4.5.0-beta.1 → 4.6.0

package/theming/config.d.ts

@@ -1,6 +1,9 @@
-import type { Theme } from './types.js';
-export declare const getTheme: () => Theme;
-export declare const setTheme: (value: Theme) => void;
+import type { Theme, ThemeVariant } from './types.js';
+export declare const getTheme: () => {
+    theme: Theme;
+    themeVariant: ThemeVariant;
+};
+export declare const setTheme: (value: Theme, variant: ThemeVariant) => void;
 /**
  * Allows the global configuration of the active theme.
  *
@@ -8,7 +11,7 @@ export declare const setTheme: (value: Theme) => void;
  *  ```ts
  *  import { configureTheme } from 'igniteui-webcomponents';
  *
- *  configureTheme({ theme: 'material' });
+ *  configureTheme('material', 'light');
  *  ```
  */
-export declare const configureTheme: (t: Theme) => void;
+export declare const configureTheme: (t: Theme, v?: ThemeVariant) => void;

package/theming/config.js

@@ -1,26 +1,38 @@
 import { CHANGE_THEME_EVENT } from './theming-event.js';
 import { getAllCSSVariables } from './utils.js';
 let theme;
+let themeVariant;
 function dispatchThemingEvent(detail) {
     window.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));
 }
 function isOfTypeTheme(theme) {
     return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);
 }
+function isOfTypeThemeVariant(variant) {
+    return ['light', 'dark'].includes(variant);
+}
 export const getTheme = () => {
-    if (!theme) {
-        const [_, t] = Object.entries(getAllCSSVariables()).find(([v]) => v === 'igTheme') || [];
-        theme = t && isOfTypeTheme(t) ? t : 'bootstrap';
+    if (!theme || !themeVariant) {
+        const [_theme, _variant] = Object.entries(getAllCSSVariables()).filter(([v]) => v === 'igTheme' || v === 'igThemeVariant') || [];
+        theme =
+            _theme && _theme[1] && isOfTypeTheme(_theme[1])
+                ? _theme[1]
+                : 'bootstrap';
+        themeVariant =
+            _variant && _variant[1] && isOfTypeThemeVariant(_variant[1])
+                ? _variant[1]
+                : 'light';
     }
-    return theme;
+    return { theme, themeVariant };
 };
-export const setTheme = (value) => {
+export const setTheme = (value, variant) => {
     theme = value;
+    themeVariant = variant;
 };
-export const configureTheme = (t) => {
-    if (isOfTypeTheme(t)) {
-        setTheme(t);
+export const configureTheme = (t, v = 'light') => {
+    if (isOfTypeTheme(t) && isOfTypeThemeVariant(v)) {
+        setTheme(t, v);
     }
-    dispatchThemingEvent({ theme });
+    dispatchThemingEvent({ 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,EAA0B,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEhF,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,IAAI,KAAY,CAAC;AAKjB,SAAS,oBAAoB,CAAC,MAA8B;IAC1D,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AACxE,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,MAAM,CAAC,MAAM,QAAQ,GAAgB,GAAG,EAAE;IACxC,IAAI,CAAC,KAAK,EAAE;QACV,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GACV,MAAM,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,IAAI,EAAE,CAAC;QAE5E,KAAK,GAAG,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAAW,CAAC,CAAC,CAAC,WAAW,CAAC;KAC5D;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,KAAK,GAAG,KAAK,CAAC;AAChB,CAAC,CAAC;AAYF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAQ,EAAE,EAAE;IACzC,IAAI,aAAa,CAAC,CAAC,CAAC,EAAE;QACpB,QAAQ,CAAC,CAAC,CAAC,CAAC;KACb;IAED,oBAAoB,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;AAClC,CAAC,CAAC","sourcesContent":["import { ChangeThemeEventDetail, CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme } from './types.js';\nimport { getAllCSSVariables } from './utils.js';\n\nlet theme: Theme;\n\n/**\n * Dispatch an \"igc-change-theme\" event to `window` with the given detail.\n */\nfunction dispatchThemingEvent(detail: ChangeThemeEventDetail) {\n  window.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));\n}\n\nfunction isOfTypeTheme(theme: string): theme is Theme {\n  return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);\n}\n\nexport const getTheme: () => Theme = () => {\n  if (!theme) {\n    const [_, t] =\n      Object.entries(getAllCSSVariables()).find(([v]) => v === 'igTheme') || [];\n\n    theme = t && isOfTypeTheme(t) ? (t as Theme) : 'bootstrap';\n  }\n\n  return theme;\n};\n\nexport const setTheme = (value: Theme) => {\n  theme = value;\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({ theme: 'material' });\n *  ```\n */\nexport const configureTheme = (t: Theme) => {\n  if (isOfTypeTheme(t)) {\n    setTheme(t);\n  }\n\n  dispatchThemingEvent({ theme });\n};\n"]}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/theming/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAA0B,MAAM,oBAAoB,CAAC;AAEhF,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,IAAI,KAAY,CAAC;AACjB,IAAI,YAA0B,CAAC;AAK/B,SAAS,oBAAoB,CAAC,MAA8B;IAC1D,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AACxE,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,CAAC,MAAM,QAAQ,GAGjB,GAAG,EAAE;IACP,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE;QAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GACtB,MAAM,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,MAAM,CACzC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,gBAAgB,CACnD,IAAI,EAAE,CAAC;QAEV,KAAK;YACH,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;gBAC7C,CAAC,CAAE,MAAM,CAAC,CAAC,CAAW;gBACtB,CAAC,CAAC,WAAW,CAAC;QAElB,YAAY;YACV,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,oBAAoB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAC1D,CAAC,CAAE,QAAQ,CAAC,CAAC,CAAkB;gBAC/B,CAAC,CAAC,OAAO,CAAC;KACf;IAED,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,OAAqB,EAAE,EAAE;IAC9D,KAAK,GAAG,KAAK,CAAC;IACd,YAAY,GAAG,OAAO,CAAC;AACzB,CAAC,CAAC;AAYF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAQ,EAAE,IAAkB,OAAO,EAAE,EAAE;IACpE,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE;QAC/C,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KAChB;IAED,oBAAoB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;AAChD,CAAC,CAAC","sourcesContent":["import { CHANGE_THEME_EVENT, ChangeThemeEventDetail } 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) {\n  window.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));\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 const getTheme: () => {\n  theme: Theme;\n  themeVariant: ThemeVariant;\n} = () => {\n  if (!theme || !themeVariant) {\n    const [_theme, _variant] =\n      Object.entries(getAllCSSVariables()).filter(\n        ([v]) => v === 'igTheme' || v === 'igThemeVariant'\n      ) || [];\n\n    theme =\n      _theme && _theme[1] && isOfTypeTheme(_theme[1])\n        ? (_theme[1] as Theme)\n        : 'bootstrap';\n\n    themeVariant =\n      _variant && _variant[1] && isOfTypeThemeVariant(_variant[1])\n        ? (_variant[1] as ThemeVariant)\n        : 'light';\n  }\n\n  return { theme, themeVariant };\n};\n\nexport const setTheme = (value: Theme, variant: ThemeVariant) => {\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 const configureTheme = (t: Theme, v: ThemeVariant = 'light') => {\n  if (isOfTypeTheme(t) && isOfTypeThemeVariant(v)) {\n    setTheme(t, v);\n  }\n\n  dispatchThemingEvent({ theme, themeVariant });\n};\n"]}

package/theming/theming-controller.d.ts

@@ -1,9 +1,10 @@
 import { ReactiveController, ReactiveControllerHost, ReactiveElement } from 'lit';
-import type { Theme, ThemeController, Themes } from './types.js';
+import type { Theme, ThemeController, ThemeVariant, Themes } from './types.js';
 declare class ThemingController implements ReactiveController, ThemeController {
     private themes;
     private host;
     theme: Theme;
+    themeVariant: ThemeVariant;
     constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes);
     hostConnected(): void;
     hostDisconnected(): void;

package/theming/theming-controller.js

@@ -39,13 +39,14 @@ class ThemingController {
         _themingEventListeners.remove(this.themeChanged);
     }
     adoptStyles() {
-        var _a;
-        this.theme = getTheme();
+        const { theme, themeVariant } = getTheme();
+        this.theme = theme;
+        this.themeVariant = themeVariant;
         const ctor = this.host.constructor;
-        const [_, cssResult] = (_a = Object.entries(this.themes).find(([name]) => name === this.theme)) !== null && _a !== void 0 ? _a : [];
+        const [_, cssResult] = Object.entries(this.themes[themeVariant]).find(([name]) => name === this.theme) ?? [];
         adoptStyles(this.host.shadowRoot, [
             ...ctor.elementStyles,
-            cssResult !== null && cssResult !== void 0 ? cssResult : css ``,
+            cssResult ?? css ``,
         ]);
     }
 }

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 {\n  adoptStyles,\n  css,\n  LitElement,\n  ReactiveController,\n  ReactiveControllerHost,\n  ReactiveElement,\n} from 'lit';\nimport { getTheme } from './config.js';\nimport { CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme, ThemeController, Themes } from './types.js';\n\nclass ThemeEventListeners {\n  private readonly listeners = new Set<Function>();\n\n  public add(listener: Function) {\n    window.addEventListener(CHANGE_THEME_EVENT, this);\n    this.listeners.add(listener);\n  }\n\n  public remove(listener: Function) {\n    this.listeners.delete(listener);\n    if (this.listeners.size < 1) {\n      window.removeEventListener(CHANGE_THEME_EVENT, this);\n    }\n  }\n\n  public handleEvent = () => {\n    for (const listener of this.listeners) {\n      listener();\n    }\n  };\n}\n\nconst _themingEventListeners = new ThemeEventListeners();\n\nclass ThemingController implements ReactiveController, ThemeController {\n  private themes: Themes;\n  private host: ReactiveControllerHost & ReactiveElement;\n  public theme!: Theme;\n\n  constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes) {\n    this.host = host;\n    this.themes = themes;\n  }\n\n  public hostConnected() {\n    this.adoptStyles();\n    _themingEventListeners.add(this.themeChanged);\n  }\n\n  public hostDisconnected() {\n    _themingEventListeners.remove(this.themeChanged);\n  }\n\n  protected adoptStyles() {\n    this.theme = getTheme();\n    const ctor = this.host.constructor as typeof LitElement;\n\n    const [_, cssResult] =\n      Object.entries(this.themes).find(([name]) => name === this.theme) ?? [];\n\n    adoptStyles(this.host.shadowRoot as ShadowRoot, [\n      ...ctor.elementStyles,\n      cssResult ?? css``,\n    ]);\n  }\n\n  private themeChanged = () => {\n    this.adoptStyles();\n    this.host.requestUpdate();\n  };\n}\n\nconst _updateWhenThemeChanges = (\n  host: ReactiveControllerHost & ReactiveElement,\n  themes: Themes,\n  exposeTheme?: boolean\n) => {\n  const controller = new ThemingController(host, themes);\n  host.addController(controller);\n\n  if (exposeTheme) {\n    Object.defineProperty(host, themeSymbol, {\n      get() {\n        return controller.theme;\n      },\n      configurable: true,\n      enumerable: false,\n    });\n  }\n\n  return controller;\n};\n\nexport const updateWhenThemeChanges: typeof _updateWhenThemeChanges & {\n  _THEMING_CONTROLLER_FN_?: never;\n} = _updateWhenThemeChanges;\n\nexport const themeSymbol = Symbol('Current active theme');\n"]}
+{"version":3,"file":"theming-controller.js","sourceRoot":"","sources":["../../src/theming/theming-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  ReactiveController,\n  ReactiveControllerHost,\n  ReactiveElement,\n  adoptStyles,\n  css,\n} from 'lit';\n\nimport { getTheme } from './config.js';\nimport { CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme, ThemeController, ThemeVariant, Themes } from './types.js';\n\nclass ThemeEventListeners {\n  private readonly listeners = new Set<Function>();\n\n  public add(listener: Function) {\n    window.addEventListener(CHANGE_THEME_EVENT, this);\n    this.listeners.add(listener);\n  }\n\n  public remove(listener: Function) {\n    this.listeners.delete(listener);\n    if (this.listeners.size < 1) {\n      window.removeEventListener(CHANGE_THEME_EVENT, this);\n    }\n  }\n\n  public handleEvent = () => {\n    for (const listener of this.listeners) {\n      listener();\n    }\n  };\n}\n\nconst _themingEventListeners = new ThemeEventListeners();\n\nclass ThemingController implements ReactiveController, ThemeController {\n  private themes: Themes;\n  private host: ReactiveControllerHost & ReactiveElement;\n  public theme!: Theme;\n  public themeVariant!: ThemeVariant;\n\n  constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes) {\n    this.host = host;\n    this.themes = themes;\n  }\n\n  public hostConnected() {\n    this.adoptStyles();\n    _themingEventListeners.add(this.themeChanged);\n  }\n\n  public hostDisconnected() {\n    _themingEventListeners.remove(this.themeChanged);\n  }\n\n  protected adoptStyles() {\n    const { theme, themeVariant } = getTheme();\n    this.theme = theme;\n    this.themeVariant = themeVariant;\n\n    const ctor = this.host.constructor as typeof LitElement;\n\n    const [_, cssResult] =\n      Object.entries(this.themes[themeVariant]).find(\n        ([name]) => name === this.theme\n      ) ?? [];\n\n    adoptStyles(this.host.shadowRoot as ShadowRoot, [\n      ...ctor.elementStyles,\n      cssResult ?? css``,\n    ]);\n  }\n\n  private themeChanged = () => {\n    this.adoptStyles();\n    this.host.requestUpdate();\n  };\n}\n\nconst _updateWhenThemeChanges = (\n  host: ReactiveControllerHost & ReactiveElement,\n  themes: Themes,\n  exposeTheme?: boolean\n) => {\n  const controller = new ThemingController(host, themes);\n  host.addController(controller);\n\n  if (exposeTheme) {\n    Object.defineProperty(host, themeSymbol, {\n      get() {\n        return controller.theme;\n      },\n      configurable: true,\n      enumerable: false,\n    });\n  }\n\n  return controller;\n};\n\nexport const updateWhenThemeChanges: typeof _updateWhenThemeChanges & {\n  _THEMING_CONTROLLER_FN_?: never;\n} = _updateWhenThemeChanges;\n\nexport const themeSymbol = Symbol('Current active theme');\n"]}

package/theming/theming-decorator.js.map

@@ -1 +1 @@
-{"version":3,"file":"theming-decorator.js","sourceRoot":"","sources":["../../src/theming/theming-decorator.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAyBjE,MAAM,UAAU,MAAM,CAAC,MAAc,EAAE,WAAW,GAAG,KAAK;IACxD,OAAO,CAAC,KAAU,EAAE,EAAE;QACpB,KAAK,CAAC,cAAc,CAAC,CAAC,QAAyB,EAAE,EAAE;YACjD,sBAAsB,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["import { ReactiveElement } from 'lit';\nimport { updateWhenThemeChanges } from './theming-controller.js';\nimport type { Themes } from './types.js';\n\n/**\n * Class decorator to enable multiple theme support for a component.\n * The component will re-render on theme changes.\n *\n * See also {@link updateWhenThemeChanges} for the same functionality\n * without the use of this decorator.\n *\n * Usage:\n *  ```ts\n *  import { LitElement, html } from 'lit';\n *  import { themes } from 'igniteui-webcomponents/themes';\n *  import { styles } from './themes/my-element.base.css';\n *  import { styles as material } from './themes/my-element.material.css';\n *  import { styles as bootstrap } from './themes/my-element.bootstrap.css';\n *  import { styles as indigo } from './themes/my-element.indigo.css';\n *\n *  @themes({ material, bootstrap, indigo })\n *  class MyElement extends LitElement {\n *    public static styles = styles;\n *  }\n *  ```\n */\nexport function themes(themes: Themes, exposeTheme = false) {\n  return (clazz: any) => {\n    clazz.addInitializer((instance: ReactiveElement) => {\n      updateWhenThemeChanges(instance, themes, exposeTheme);\n    });\n\n    return clazz;\n  };\n}\n\nexport { themeSymbol } from './theming-controller.js';\n"]}
+{"version":3,"file":"theming-decorator.js","sourceRoot":"","sources":["../../src/theming/theming-decorator.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAyBjE,MAAM,UAAU,MAAM,CAAC,MAAc,EAAE,WAAW,GAAG,KAAK;IACxD,OAAO,CAAC,KAAU,EAAE,EAAE;QACpB,KAAK,CAAC,cAAc,CAAC,CAAC,QAAyB,EAAE,EAAE;YACjD,sBAAsB,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["import { ReactiveElement } from 'lit';\n\nimport { updateWhenThemeChanges } from './theming-controller.js';\nimport type { Themes } from './types.js';\n\n/**\n * Class decorator to enable multiple theme support for a component.\n * The component will re-render on theme changes.\n *\n * See also {@link updateWhenThemeChanges} for the same functionality\n * without the use of this decorator.\n *\n * Usage:\n *  ```ts\n *  import { LitElement, html } from 'lit';\n *  import { themes } from 'igniteui-webcomponents/themes';\n *  import { styles } from './themes/my-element.base.css';\n *  import { styles as material } from './themes/my-element.material.css';\n *  import { styles as bootstrap } from './themes/my-element.bootstrap.css';\n *  import { styles as indigo } from './themes/my-element.indigo.css';\n *\n *  @themes({ material, bootstrap, indigo })\n *  class MyElement extends LitElement {\n *    public static styles = styles;\n *  }\n *  ```\n */\nexport function themes(themes: Themes, exposeTheme = false) {\n  return (clazz: any) => {\n    clazz.addInitializer((instance: ReactiveElement) => {\n      updateWhenThemeChanges(instance, themes, exposeTheme);\n    });\n\n    return clazz;\n  };\n}\n\nexport { themeSymbol } from './theming-controller.js';\n"]}

package/theming/theming-event.d.ts

@@ -1,4 +1,4 @@
-import type { Theme } from './types.js';
+import type { Theme, ThemeVariant } from './types.js';
 export declare const CHANGE_THEME_EVENT = "igc-change-theme";
 declare global {
     interface WindowEventMap {
@@ -10,4 +10,5 @@ declare global {
  */
 export type ChangeThemeEventDetail = {
     theme: Theme;
+    themeVariant: ThemeVariant;
 };

package/theming/theming-event.js.map

@@ -1 +1 @@
-{"version":3,"file":"theming-event.js","sourceRoot":"","sources":["../../src/theming/theming-event.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAAkB,CAAC","sourcesContent":["import type { Theme } from './types.js';\n\nexport const CHANGE_THEME_EVENT = 'igc-change-theme';\n\n// Misfiring eslint rule\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\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};\n"]}
+{"version":3,"file":"theming-event.js","sourceRoot":"","sources":["../../src/theming/theming-event.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAAkB,CAAC","sourcesContent":["import type { Theme, ThemeVariant } from './types.js';\n\nexport const CHANGE_THEME_EVENT = 'igc-change-theme';\n\n// Misfiring eslint rule\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\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,7 +1,13 @@
 import { CSSResult } from 'lit';
 export type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';
+export type ThemeVariant = 'light' | 'dark';
 export type Themes = {
-    [K in Theme]?: CSSResult;
+    light: {
+        [K in Theme]?: CSSResult;
+    };
+    dark: {
+        [K in Theme]?: CSSResult;
+    };
 };
 /**
  * A controller responsible for adopting various component themes;

package/theming/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/theming/types.ts"],"names":[],"mappings":"","sourcesContent":["import { CSSResult } from 'lit';\n\nexport type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';\n\nexport type Themes = {\n  [K in Theme]?: CSSResult;\n};\n\n/**\n * A controller responsible for adopting various component themes;\n * See also {@link updateWhenThemeChanges}.\n */\nexport interface ThemeController {\n  /**\n   * The name of the currently adopted theme. See {@link Theme}.\n   */\n  theme: Theme;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/theming/types.ts"],"names":[],"mappings":"","sourcesContent":["import { 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]?: CSSResult;\n  };\n  dark: {\n    [K in Theme]?: CSSResult;\n  };\n};\n\n/**\n * A controller responsible for adopting various component themes;\n * See also {@link updateWhenThemeChanges}.\n */\nexport interface ThemeController {\n  /**\n   * The name of the currently adopted theme. See {@link Theme}.\n   */\n  theme: Theme;\n}\n"]}

package/animations/index.d.ts

@@ -1,3 +0,0 @@
-export * from './presets/index.js';
-export * from './easings.js';
-export * from './player.js';

package/animations/index.js

@@ -1,4 +0,0 @@
-export * from './presets/index.js';
-export * from './easings.js';
-export * from './player.js';
-//# sourceMappingURL=index.js.map

package/animations/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/animations/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC","sourcesContent":["export * from './presets/index.js';\nexport * from './easings.js';\nexport * from './player.js';\n"]}

package/animations/presets/index.d.ts

@@ -1,3 +0,0 @@
-export * from './grow/index.js';
-export * from './fade/index.js';
-export * from './slide/index.js';

package/animations/presets/index.js

@@ -1,4 +0,0 @@
-export * from './grow/index.js';
-export * from './fade/index.js';
-export * from './slide/index.js';
-//# sourceMappingURL=index.js.map

package/animations/presets/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/animations/presets/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './grow/index.js';\nexport * from './fade/index.js';\nexport * from './slide/index.js';\n"]}

package/components/badge/themes/light/badge.base.css.js

@@ -1,117 +0,0 @@
-import { css } from 'lit';
-export const styles = css `:host {
-  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
-  --is-medium: min(
-      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
-      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
-  );
-  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
-  position: relative;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  scrollbar-width: var(--ig-scrollbar-size);
-  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
-}
-:host *,
-:host *::before,
-:host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-:host ::-webkit-scrollbar {
-  width: var(--ig-scrollbar-size);
-  height: var(--ig-scrollbar-size);
-  background: var(--ig-scrollbar-track-background);
-}
-:host ::-webkit-scrollbar-thumb {
-  background: var(--ig-scrollbar-thumb-background);
-}
-
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-:host {
-  --size: 1.375rem;
-  --_badge-size: var(--size);
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-weight: 500;
-  vertical-align: top;
-}
-
-[part=base] {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  min-width: var(--size);
-  min-height: var(--size);
-  line-height: 1;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  overflow: hidden;
-  white-space: nowrap;
-  font-family: var(--ig-font-family);
-  font-weight: inherit;
-}
-
-::slotted(*) {
-  --size: calc(var(--_badge-size) / 2);
-  font-size: calc(var(--_badge-size) / 2) !important;
-}
-
-:host(:not(:empty)) [part=base] {
-  padding: calc(var(--size) / 8) calc(var(--size) / 5.5);
-}
-
-:host([variant=primary]) {
-  background: hsla(var(--ig-primary-500), var(--ig-primary-a));
-  color: var(--ig-primary-500-contrast);
-}
-
-:host([variant=info]) {
-  background: hsla(var(--ig-info-500), var(--ig-info-a));
-  color: var(--ig-info-500-contrast);
-}
-
-:host([variant=success]) {
-  background: hsla(var(--ig-success-500), var(--ig-success-a));
-  color: var(--ig-success-500-contrast);
-}
-
-:host([variant=warning]) {
-  background: hsla(var(--ig-warn-500), var(--ig-warn-a));
-  color: var(--ig-warn-500-contrast);
-}
-
-:host([variant=danger]) {
-  background: hsla(var(--ig-error-500), var(--ig-error-a));
-  color: var(--ig-error-500-contrast);
-}
-
-:host([shape=rounded]),
-:host([outlined][shape=rounded]) [part=base] {
-  border-radius: calc(var(--size) * 2);
-}
-
-:host([shape=square]),
-:host([outlined][shape=square]) [part=base] {
-  border-radius: 0;
-}
-
-:host([outlined]) [part=base] {
-  -webkit-box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-50), var(--ig-gray-a));
-          box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-50), var(--ig-gray-a));
-}`;
-//# sourceMappingURL=badge.base.css.js.map

package/components/badge/themes/light/badge.base.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge.base.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/light/badge.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkHvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --size: 1.375rem;\n  --_badge-size: var(--size);\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -webkit-fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  font-weight: 500;\n  vertical-align: top;\n}\n\n[part=base] {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-width: var(--size);\n  min-height: var(--size);\n  line-height: 1;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  overflow: hidden;\n  white-space: nowrap;\n  font-family: var(--ig-font-family);\n  font-weight: inherit;\n}\n\n::slotted(*) {\n  --size: calc(var(--_badge-size) / 2);\n  font-size: calc(var(--_badge-size) / 2) !important;\n}\n\n:host(:not(:empty)) [part=base] {\n  padding: calc(var(--size) / 8) calc(var(--size) / 5.5);\n}\n\n:host([variant=primary]) {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  color: var(--ig-primary-500-contrast);\n}\n\n:host([variant=info]) {\n  background: hsla(var(--ig-info-500), var(--ig-info-a));\n  color: var(--ig-info-500-contrast);\n}\n\n:host([variant=success]) {\n  background: hsla(var(--ig-success-500), var(--ig-success-a));\n  color: var(--ig-success-500-contrast);\n}\n\n:host([variant=warning]) {\n  background: hsla(var(--ig-warn-500), var(--ig-warn-a));\n  color: var(--ig-warn-500-contrast);\n}\n\n:host([variant=danger]) {\n  background: hsla(var(--ig-error-500), var(--ig-error-a));\n  color: var(--ig-error-500-contrast);\n}\n\n:host([shape=rounded]),\n:host([outlined][shape=rounded]) [part=base] {\n  border-radius: calc(var(--size) * 2);\n}\n\n:host([shape=square]),\n:host([outlined][shape=square]) [part=base] {\n  border-radius: 0;\n}\n\n:host([outlined]) [part=base] {\n  -webkit-box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n}`;\n"]}

package/components/button/themes/button/light/button.base.css.js

@@ -1,99 +0,0 @@
-import { css } from 'lit';
-export const styles = css `:host {
-  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
-  --is-medium: min(
-      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
-      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
-  );
-  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
-  position: relative;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  scrollbar-width: var(--ig-scrollbar-size);
-  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
-}
-:host *,
-:host *::before,
-:host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-:host ::-webkit-scrollbar {
-  width: var(--ig-scrollbar-size);
-  height: var(--ig-scrollbar-size);
-  background: var(--ig-scrollbar-track-background);
-}
-:host ::-webkit-scrollbar-thumb {
-  background: var(--ig-scrollbar-thumb-background);
-}
-
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-:host {
-  --gap: max(var(--is-large, 1) * max(0.75rem, -1 * 0.75rem), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem));
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  vertical-align: middle;
-}
-:host ::slotted(*) {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  font-size: inherit !important;
-}
-
-[part=base] {
-  font-family: var(--ig-button-font-family, var(--ig-font-family));
-  font-size: var(--ig-button-font-size);
-  font-weight: var(--ig-button-font-weight);
-  font-style: var(--ig-button-font-style);
-  line-height: var(--ig-button-line-height);
-  letter-spacing: var(--ig-button-letter-spacing);
-  text-transform: var(--ig-button-text-transform);
-  margin-top: var(--ig-button-margin-top);
-  margin-bottom: var(--ig-button-margin-bottom);
-  position: relative;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  border: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  outline-style: none;
-  -webkit-tap-highlight-color: transparent;
-  overflow: hidden;
-  white-space: nowrap;
-  text-decoration: none;
-  z-index: 0;
-  padding: 0 max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(12px, -1 * 12px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(8px, -1 * 8px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
-  gap: var(--gap);
-  min-width: 5.5rem;
-}
-
-:host(:not([disabled])) [part=base]:hover,
-:host(:not(:disabled)) [part=base]:hover {
-  cursor: pointer;
-}
-
-:host(:disabled),
-:host([disabled]) {
-  pointer-events: none;
-}`;
-//# sourceMappingURL=button.base.css.js.map

package/components/button/themes/button/light/button.base.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/button/light/button.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --gap: max(var(--is-large, 1) * max(0.75rem, -1 * 0.75rem), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem));\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  vertical-align: middle;\n}\n:host ::slotted(*) {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  font-size: inherit !important;\n}\n\n[part=base] {\n  font-family: var(--ig-button-font-family, var(--ig-font-family));\n  font-size: var(--ig-button-font-size);\n  font-weight: var(--ig-button-font-weight);\n  font-style: var(--ig-button-font-style);\n  line-height: var(--ig-button-line-height);\n  letter-spacing: var(--ig-button-letter-spacing);\n  text-transform: var(--ig-button-text-transform);\n  margin-top: var(--ig-button-margin-top);\n  margin-bottom: var(--ig-button-margin-bottom);\n  position: relative;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-flex: 1;\n      -ms-flex: 1;\n          flex: 1;\n  border: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  outline-style: none;\n  -webkit-tap-highlight-color: transparent;\n  overflow: hidden;\n  white-space: nowrap;\n  text-decoration: none;\n  z-index: 0;\n  padding: 0 max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(12px, -1 * 12px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(8px, -1 * 8px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n  gap: var(--gap);\n  min-width: 5.5rem;\n}\n\n:host(:not([disabled])) [part=base]:hover,\n:host(:not(:disabled)) [part=base]:hover {\n  cursor: pointer;\n}\n\n:host(:disabled),\n:host([disabled]) {\n  pointer-events: none;\n}`;\n"]}

package/components/button/themes/icon-button/light/icon-button.base.css.js

@@ -1,93 +0,0 @@
-import { css } from 'lit';
-export const styles = css `:host {
-  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
-  --is-medium: min(
-      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
-      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
-  );
-  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
-  position: relative;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  scrollbar-width: var(--ig-scrollbar-size);
-  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
-}
-:host *,
-:host *::before,
-:host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-:host ::-webkit-scrollbar {
-  width: var(--ig-scrollbar-size);
-  height: var(--ig-scrollbar-size);
-  background: var(--ig-scrollbar-track-background);
-}
-:host ::-webkit-scrollbar-thumb {
-  background: var(--ig-scrollbar-thumb-background);
-}
-
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-:host {
-  --icon-size: 1.125rem;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  vertical-align: middle;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-}
-
-::slotted(:not(igc-ripple)) {
-  --icon-size: 1.125rem;
-  font-size: var(--icon-size) !important;
-  vertical-align: middle;
-  pointer-events: none;
-}
-
-[part=icon] {
-  --size: 1.125rem;
-}
-
-[part=base] {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  border: none;
-  outline-style: none;
-  background: transparent;
-  padding: max(var(--is-large, 1) * max(6px, -1 * 6px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(5px, -1 * 5px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  cursor: pointer;
-  -webkit-transition: background 0.15s ease-out, -webkit-box-shadow 0.2s ease-in;
-  transition: background 0.15s ease-out, -webkit-box-shadow 0.2s ease-in;
-  transition: box-shadow 0.2s ease-in, background 0.15s ease-out;
-  transition: box-shadow 0.2s ease-in, background 0.15s ease-out, -webkit-box-shadow 0.2s ease-in;
-  -webkit-transition-delay: 0.05s;
-          transition-delay: 0.05s;
-  font-size: var(--icon-size);
-  line-height: 1;
-}
-
-:host([disabled]),
-:host(:disabled) {
-  pointer-events: none;
-}`;
-//# sourceMappingURL=icon-button.base.css.js.map

package/components/button/themes/icon-button/light/icon-button.base.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-button.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/icon-button/light/icon-button.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0FvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --icon-size: 1.125rem;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  vertical-align: middle;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -webkit-fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n::slotted(:not(igc-ripple)) {\n  --icon-size: 1.125rem;\n  font-size: var(--icon-size) !important;\n  vertical-align: middle;\n  pointer-events: none;\n}\n\n[part=icon] {\n  --size: 1.125rem;\n}\n\n[part=base] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  border: none;\n  outline-style: none;\n  background: transparent;\n  padding: max(var(--is-large, 1) * max(6px, -1 * 6px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(5px, -1 * 5px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  cursor: pointer;\n  -webkit-transition: background 0.15s ease-out, -webkit-box-shadow 0.2s ease-in;\n  transition: background 0.15s ease-out, -webkit-box-shadow 0.2s ease-in;\n  transition: box-shadow 0.2s ease-in, background 0.15s ease-out;\n  transition: box-shadow 0.2s ease-in, background 0.15s ease-out, -webkit-box-shadow 0.2s ease-in;\n  -webkit-transition-delay: 0.05s;\n          transition-delay: 0.05s;\n  font-size: var(--icon-size);\n  line-height: 1;\n}\n\n:host([disabled]),\n:host(:disabled) {\n  pointer-events: none;\n}`;\n"]}