igniteui-webcomponents 4.3.0 → 4.3.1

package/themes/light/material.css

@@ -1,49 +1,3 @@
-/**
- * @sass-export-section="light-material"
- */
-/**
- * @sass-export-section="light-bootstrap"
- */
-/**
- * @sass-export-section="light-fluent"
- */
-/**
- * @sass-export-section="light-indigo"
- */
-/**
- * @sass-export-section="light"
- */
-/**
- * @sass-export-section="dark-material"
- */
-/**
- * @sass-export-section="dark-bootstrap"
- */
-/**
- * @sass-export-section="dark-fluent"
- */
-/**
- * @sass-export-section="dark-indigo"
- */
-/**
- * @sass-export-section="dark"
- */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/**
- * @sass-export-section="bootstrap"
- */
-/**
- * @sass-export-section="material"
- */
-/**
- * @sass-export-section="fluent"
- */
-/**
- * @sass-export-section="indigo"
- */
-/**
- * @sass-export-section="material"
- */
 .ig-scrollbar {
   --size: var(--ig-scrollbar-size, 1rem);
   --thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
@@ -70,7 +24,6 @@
 }
 :root {
   --ig-theme: material;
-  --ig-radius-factor: 1;
   --ig-spacing: 1;
   --ig-spacing-inline: 1;
   --ig-spacing-block: 1;

package/theming/theming-controller.d.ts

@@ -5,13 +5,14 @@ declare class ThemingController implements ReactiveController, ThemeController {
     private host;
     theme: Theme;
     constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes);
-    private readonly __themingEventHandler;
     hostConnected(): void;
     hostDisconnected(): void;
     protected adoptStyles(): void;
+    private themeChanged;
 }
-declare const _updateWhenThemeChanges: (host: ReactiveControllerHost & ReactiveElement, themes: Themes) => ThemingController;
+declare const _updateWhenThemeChanges: (host: ReactiveControllerHost & ReactiveElement, themes: Themes, exposeTheme?: boolean) => ThemingController;
 export declare const updateWhenThemeChanges: typeof _updateWhenThemeChanges & {
     _THEMING_CONTROLLER_FN_?: never;
 };
+export declare const themeSymbol: unique symbol;
 export {};

package/theming/theming-controller.js

@@ -1,9 +1,30 @@
 import { adoptStyles, css, } from 'lit';
 import { getTheme } from './config.js';
 import { CHANGE_THEME_EVENT } from './theming-event.js';
+class ThemeEventListeners {
+    constructor() {
+        this.listeners = new Set();
+        this.handleEvent = () => {
+            for (const listener of this.listeners) {
+                listener();
+            }
+        };
+    }
+    add(listener) {
+        window.addEventListener(CHANGE_THEME_EVENT, this);
+        this.listeners.add(listener);
+    }
+    remove(listener) {
+        this.listeners.delete(listener);
+        if (this.listeners.size < 1) {
+            window.removeEventListener(CHANGE_THEME_EVENT, this);
+        }
+    }
+}
+const _themingEventListeners = new ThemeEventListeners();
 class ThemingController {
     constructor(host, themes) {
-        this.__themingEventHandler = () => {
+        this.themeChanged = () => {
             this.adoptStyles();
             this.host.requestUpdate();
         };
@@ -12,38 +33,36 @@ class ThemingController {
     }
     hostConnected() {
         this.adoptStyles();
-        window.addEventListener(CHANGE_THEME_EVENT, this.__themingEventHandler);
+        _themingEventListeners.add(this.themeChanged);
     }
     hostDisconnected() {
-        window.removeEventListener(CHANGE_THEME_EVENT, this.__themingEventHandler);
+        _themingEventListeners.remove(this.themeChanged);
     }
     adoptStyles() {
+        var _a;
         this.theme = getTheme();
         const ctor = this.host.constructor;
-        const supportsAdoptingStyleSheets = window.ShadowRoot &&
-            'adoptedStyleSheets' in Document.prototype &&
-            'replace' in CSSStyleSheet.prototype;
-        let styleSheet = css ``;
-        const [theme] = Object.entries(this.themes).filter(([name]) => name === this.theme);
-        if (theme) {
-            const [_, cssResult] = theme;
-            styleSheet = cssResult;
-        }
-        if (!supportsAdoptingStyleSheets) {
-            [...this.host.renderRoot.querySelectorAll('style')]
-                .slice(1)
-                .forEach((tag) => tag.remove());
-        }
+        const [_, cssResult] = (_a = Object.entries(this.themes).find(([name]) => name === this.theme)) !== null && _a !== void 0 ? _a : [];
         adoptStyles(this.host.shadowRoot, [
             ...ctor.elementStyles,
-            styleSheet,
+            cssResult !== null && cssResult !== void 0 ? cssResult : css ``,
         ]);
     }
 }
-const _updateWhenThemeChanges = (host, themes) => {
+const _updateWhenThemeChanges = (host, themes, exposeTheme) => {
     const controller = new ThemingController(host, themes);
     host.addController(controller);
+    if (exposeTheme) {
+        Object.defineProperty(host, themeSymbol, {
+            get() {
+                return controller.theme;
+            },
+            configurable: true,
+            enumerable: false,
+        });
+    }
     return controller;
 };
 export const updateWhenThemeChanges = _updateWhenThemeChanges;
+export const themeSymbol = Symbol('Current active theme');
 //# sourceMappingURL=theming-controller.js.map

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;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGxD,MAAM,iBAAiB;IAKrB,YAAY,IAA8C,EAAE,MAAc;QAKzD,0BAAqB,GAAG,GAAG,EAAE;YAC5C,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC5B,CAAC,CAAC;QAPA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAOM,aAAa;QAClB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC1E,CAAC;IAEM,gBAAgB;QACrB,MAAM,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC7E,CAAC;IAES,WAAW;QACnB,IAAI,CAAC,KAAK,GAAG,QAAQ,EAAE,CAAC;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAgC,CAAC;QACxD,MAAM,2BAA2B,GAC/B,MAAM,CAAC,UAAU;YACjB,oBAAoB,IAAI,QAAQ,CAAC,SAAS;YAC1C,SAAS,IAAI,aAAa,CAAC,SAAS,CAAC;QAEvC,IAAI,UAAU,GAAG,GAAG,CAAA,EAAE,CAAC;QAEvB,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAChD,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAChC,CAAC;QAEF,IAAI,KAAK,EAAE;YACT,MAAM,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC;YAC7B,UAAU,GAAG,SAAS,CAAC;SACxB;QAOD,IAAI,CAAC,2BAA2B,EAAE;YAChC,CAAC,GAAG,IAAI,CAAC,IAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;iBACjD,KAAK,CAAC,CAAC,CAAC;iBACR,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;SACnC;QAED,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAwB,EAAE;YAC9C,GAAG,IAAI,CAAC,aAAa;YACrB,UAAU;SACX,CAAC,CAAC;IACL,CAAC;CACF;AAED,MAAM,uBAAuB,GAAG,CAC9B,IAA8C,EAC9C,MAAc,EACd,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACvD,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAE/B,uBAAuB,CAAC","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 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  private readonly __themingEventHandler = () => {\n    this.adoptStyles();\n    this.host.requestUpdate();\n  };\n\n  public hostConnected() {\n    this.adoptStyles();\n    window.addEventListener(CHANGE_THEME_EVENT, this.__themingEventHandler);\n  }\n\n  public hostDisconnected() {\n    window.removeEventListener(CHANGE_THEME_EVENT, this.__themingEventHandler);\n  }\n\n  protected adoptStyles() {\n    this.theme = getTheme();\n    const ctor = this.host.constructor as typeof LitElement;\n    const supportsAdoptingStyleSheets =\n      window.ShadowRoot &&\n      'adoptedStyleSheets' in Document.prototype &&\n      'replace' in CSSStyleSheet.prototype;\n\n    let styleSheet = css``;\n\n    const [theme] = Object.entries(this.themes).filter(\n      ([name]) => name === this.theme\n    );\n\n    if (theme) {\n      const [_, cssResult] = theme;\n      styleSheet = cssResult;\n    }\n\n    // Firefox and Safari don't support the adoptedStyleSheets API yet,\n    // and the lit framework appends the resolved stylesheets indiscriminately\n    // when using the adoptStyles API below. Hence, we need to remove all previously\n    // defined style tags in the shadow root as changing the themes at runtime just\n    // keeps stacking the resolved styles one over the other, resulting in broken themes.\n    if (!supportsAdoptingStyleSheets) {\n      [...this.host!.renderRoot.querySelectorAll('style')]\n        .slice(1)\n        .forEach((tag) => tag.remove());\n    }\n\n    adoptStyles(this.host.shadowRoot as ShadowRoot, [\n      ...ctor.elementStyles,\n      styleSheet,\n    ]);\n  }\n}\n\nconst _updateWhenThemeChanges = (\n  host: ReactiveControllerHost & ReactiveElement,\n  themes: Themes\n) => {\n  const controller = new ThemingController(host, themes);\n  host.addController(controller);\n  return controller;\n};\n\nexport const updateWhenThemeChanges: typeof _updateWhenThemeChanges & {\n  _THEMING_CONTROLLER_FN_?: never;\n} = _updateWhenThemeChanges;\n"]}
+{"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;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGxD,MAAM,mBAAmB;IAAzB;QACmB,cAAS,GAAG,IAAI,GAAG,EAAY,CAAC;QAc1C,gBAAW,GAAG,GAAG,EAAE;YACxB,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE;gBACrC,QAAQ,EAAE,CAAC;aACZ;QACH,CAAC,CAAC;IACJ,CAAC;IAjBQ,GAAG,CAAC,QAAkB;QAC3B,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;QAClD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;IAEM,MAAM,CAAC,QAAkB;QAC9B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAChC,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,EAAE;YAC3B,MAAM,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;SACtD;IACH,CAAC;CAOF;AAED,MAAM,sBAAsB,GAAG,IAAI,mBAAmB,EAAE,CAAC;AAEzD,MAAM,iBAAiB;IAKrB,YAAY,IAA8C,EAAE,MAAc;QA2BlE,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC5B,CAAC,CAAC;QA7BA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAEM,aAAa;QAClB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,sBAAsB,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAChD,CAAC;IAEM,gBAAgB;QACrB,sBAAsB,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACnD,CAAC;IAES,WAAW;;QACnB,IAAI,CAAC,KAAK,GAAG,QAAQ,EAAE,CAAC;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAgC,CAAC;QAExD,MAAM,CAAC,CAAC,EAAE,SAAS,CAAC,GAClB,MAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,mCAAI,EAAE,CAAC;QAE1E,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAwB,EAAE;YAC9C,GAAG,IAAI,CAAC,aAAa;YACrB,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,GAAG,CAAA,EAAE;SACnB,CAAC,CAAC;IACL,CAAC;CAMF;AAED,MAAM,uBAAuB,GAAG,CAC9B,IAA8C,EAC9C,MAAc,EACd,WAAqB,EACrB,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACvD,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAE/B,IAAI,WAAW,EAAE;QACf,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE;YACvC,GAAG;gBACD,OAAO,UAAU,CAAC,KAAK,CAAC;YAC1B,CAAC;YACD,YAAY,EAAE,IAAI;YAClB,UAAU,EAAE,KAAK;SAClB,CAAC,CAAC;KACJ;IAED,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAE/B,uBAAuB,CAAC;AAE5B,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,sBAAsB,CAAC,CAAC","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"]}

package/theming/theming-decorator.d.ts

@@ -1,9 +1,9 @@
-import { Themes } from './types.js';
+import type { Themes } from './types.js';
 /**
  * Class decorator to enable multiple theme support for a component.
  * The component will re-render on theme changes.
  *
- * See also {@link updateWhenThemeChanges} for the same functionallity
+ * See also {@link updateWhenThemeChanges} for the same functionality
  * without the use of this decorator.
  *
  * Usage:
@@ -21,4 +21,5 @@ import { Themes } from './types.js';
  *  }
  *  ```
  */
-export declare function themes(themes: Themes): (clazz: any) => any;
+export declare function themes(themes: Themes, exposeTheme?: boolean): (clazz: any) => any;
+export { themeSymbol } from './theming-controller.js';

package/theming/theming-decorator.js

@@ -1,13 +1,11 @@
 import { updateWhenThemeChanges } from './theming-controller.js';
-export function themes(themes) {
+export function themes(themes, exposeTheme = false) {
     return (clazz) => {
         clazz.addInitializer((instance) => {
-            const controller = updateWhenThemeChanges(instance, themes);
-            if ('themeAdopted' in instance) {
-                instance.themeAdopted(controller);
-            }
+            updateWhenThemeChanges(instance, themes, exposeTheme);
         });
         return clazz;
     };
 }
+export { themeSymbol } from './theming-controller.js';
 //# sourceMappingURL=theming-decorator.js.map

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;IACnC,OAAO,CAAC,KAAU,EAAE,EAAE;QACpB,KAAK,CAAC,cAAc,CAAC,CAAC,QAAyC,EAAE,EAAE;YACjE,MAAM,UAAU,GAAG,sBAAsB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAE5D,IAAI,cAAc,IAAI,QAAQ,EAAE;gBAC9B,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;aACnC;QACH,CAAC,CAAC,CAAC;QACH,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { ReactiveElement } from 'lit';\nimport { updateWhenThemeChanges } from './theming-controller.js';\nimport { ReactiveTheme, 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 functionallity\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) {\n  return (clazz: any) => {\n    clazz.addInitializer((instance: ReactiveElement & ReactiveTheme) => {\n      const controller = updateWhenThemeChanges(instance, themes);\n\n      if ('themeAdopted' in instance) {\n        instance.themeAdopted(controller);\n      }\n    });\n    return clazz;\n  };\n}\n"]}
+{"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"]}

package/theming/types.d.ts

@@ -4,7 +4,7 @@ export type Themes = {
     [K in Theme]?: CSSResult;
 };
 /**
- * A controller responsible for adopting various comopnent themes;
+ * A controller responsible for adopting various component themes;
  * See also {@link updateWhenThemeChanges}.
  */
 export interface ThemeController {
@@ -13,11 +13,3 @@ export interface ThemeController {
      */
     theme: Theme;
 }
-export interface ReactiveTheme {
-    /**
-     *  Provides the attached ThemeController to the component instance.
-     *  Can be used to get the currently adopted theme name.
-     *  See also {@link ThemeController}
-     */
-    themeAdopted(controller: ThemeController): void;
-}

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 comopnent 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\nexport interface ReactiveTheme {\n  /**\n   *  Provides the attached ThemeController to the component instance.\n   *  Can be used to get the currently adopted theme name.\n   *  See also {@link ThemeController}\n   */\n  themeAdopted(controller: ThemeController): void;\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';\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"]}

package/vscode-html-custom-data.json

@@ -288,7 +288,7 @@
     },
     {
       "name": "igc-calendar",
-      "description": "Represents a calendar that lets users\nto select a date value in a variety of different ways.\n\nEvents:\n\n  * `igcChange` {} - Emitted when calendar changes its value.\n\nSlots:\n\n  * ` ` {} - The default slot for the calendar.\n\n  * `title` {} - Renders the title of the calendar header.\n\nAttributes:\n\n  * `hide-outside-days` {`boolean`} - Controls the visibility of the dates that do not belong to the current month.\n\n  * `hide-header` {`boolean`} - Determines whether the calendar hides its header. Even if set to false, the header is not displayed for `multiple` selection.\n\n  * `header-orientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the header.\n\n  * `orientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the multiple months displayed in days view.\n\n  * `visible-months` {`number`} - The number of months displayed in days view.\n\n  * `active-view` {`\"days\" | \"months\" | \"years\"`} - The active view.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\n  * `value` {`Date | undefined`} - The current value of the calendar.\nUsed when selection is set to single.\n\n  * `values` {`Date[] | undefined`} - The current values of the calendar.\nUsed when selection is set to multiple or range.\n\n  * `selection` {`\"single\" | \"multiple\" | \"range\"`} - Sets the type of date selection.\n\n  * `show-week-numbers` {`boolean`} - Show/hide the week numbers.\n\n  * `week-start` {`\"sunday\" | \"monday\" | \"tuesday\" | \"wednesday\" | \"thursday\" | \"friday\" | \"saturday\"`} - Sets the start day of the week.\n\n  * `active-date` {`Date`} - Sets the date which is shown in view and is highlighted. By default it is the current date.\n\n  * `locale` {`string`} - Sets the locale used for formatting and displaying the dates in the calendar.\n\nProperties:\n\n  * `styles` - \n\n  * `tagName` {`\"igc-calendar\"`} - \n\n  * `formatterMonth` {`DateTimeFormat`} - \n\n  * `formatterWeekday` {`DateTimeFormat`} - \n\n  * `formatterMonthDay` {`DateTimeFormat`} - \n\n  * `themeController` {`ThemeController`} - \n\n  * `theme` {`Theme`} - \n\n  * `rangePreviewDate` {`Date | undefined`} - \n\n  * `activeDaysViewIndex` {`number`} - \n\n  * `daysViews` {`NodeList`} - \n\n  * `monthsView` - \n\n  * `yearsView` - \n\n  * `hideOutsideDays` {`boolean`} - Controls the visibility of the dates that do not belong to the current month.\n\n  * `hideHeader` {`boolean`} - Determines whether the calendar hides its header. Even if set to false, the header is not displayed for `multiple` selection.\n\n  * `headerOrientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the header.\n\n  * `orientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the multiple months displayed in days view.\n\n  * `visibleMonths` {`number`} - The number of months displayed in days view.\n\n  * `activeView` {`\"days\" | \"months\" | \"years\"`} - The active view.\n\n  * `formatOptions` {`Pick<DateTimeFormatOptions, \"month\" | \"weekday\">`} - The options used to format the months and the weekdays in the calendar views.\n\n  * `resourceStrings` {`IgcCalendarResourceStrings`} - The resource strings.\n\n  * `yearPerPage` {`18 | 15`} - \n\n  * `previousButtonLabel` {`string`} - \n\n  * `nextButtonLabel` {`string`} - \n\n  * `handleKeyDown` - \n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\n  * `_activeDate` {`Date`} - \n\n  * `_activeDateSetFlag` {`boolean`} - \n\n  * `calendarModel` - \n\n  * `value` {`Date | undefined`} - The current value of the calendar.\nUsed when selection is set to single.\n\n  * `values` {`Date[] | undefined`} - The current values of the calendar.\nUsed when selection is set to multiple or range.\n\n  * `selection` {`\"single\" | \"multiple\" | \"range\"`} - Sets the type of date selection.\n\n  * `showWeekNumbers` {`boolean`} - Show/hide the week numbers.\n\n  * `weekStart` {`\"sunday\" | \"monday\" | \"tuesday\" | \"wednesday\" | \"thursday\" | \"friday\" | \"saturday\"`} - Sets the start day of the week.\n\n  * `activeDate` {`Date`} - Sets the date which is shown in view and is highlighted. By default it is the current date.\n\n  * `locale` {`string`} - Sets the locale used for formatting and displaying the dates in the calendar.\n\n  * `disabledDates` {`DateRangeDescriptor[]`} - Gets/sets disabled dates.\n\n  * `specialDates` {`DateRangeDescriptor[]`} - Gets/sets special dates.",
+      "description": "Represents a calendar that lets users\nto select a date value in a variety of different ways.\n\nEvents:\n\n  * `igcChange` {} - Emitted when calendar changes its value.\n\nSlots:\n\n  * ` ` {} - The default slot for the calendar.\n\n  * `title` {} - Renders the title of the calendar header.\n\nAttributes:\n\n  * `hide-outside-days` {`boolean`} - Controls the visibility of the dates that do not belong to the current month.\n\n  * `hide-header` {`boolean`} - Determines whether the calendar hides its header. Even if set to false, the header is not displayed for `multiple` selection.\n\n  * `header-orientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the header.\n\n  * `orientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the multiple months displayed in days view.\n\n  * `visible-months` {`number`} - The number of months displayed in days view.\n\n  * `active-view` {`\"days\" | \"months\" | \"years\"`} - The active view.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\n  * `value` {`Date | undefined`} - The current value of the calendar.\nUsed when selection is set to single.\n\n  * `values` {`Date[] | undefined`} - The current values of the calendar.\nUsed when selection is set to multiple or range.\n\n  * `selection` {`\"single\" | \"multiple\" | \"range\"`} - Sets the type of date selection.\n\n  * `show-week-numbers` {`boolean`} - Show/hide the week numbers.\n\n  * `week-start` {`\"sunday\" | \"monday\" | \"tuesday\" | \"wednesday\" | \"thursday\" | \"friday\" | \"saturday\"`} - Sets the start day of the week.\n\n  * `active-date` {`Date`} - Sets the date which is shown in view and is highlighted. By default it is the current date.\n\n  * `locale` {`string`} - Sets the locale used for formatting and displaying the dates in the calendar.\n\nProperties:\n\n  * `styles` - \n\n  * `tagName` {`\"igc-calendar\"`} - \n\n  * `formatterMonth` {`DateTimeFormat`} - \n\n  * `formatterWeekday` {`DateTimeFormat`} - \n\n  * `formatterMonthDay` {`DateTimeFormat`} - \n\n  * `rangePreviewDate` {`Date | undefined`} - \n\n  * `activeDaysViewIndex` {`number`} - \n\n  * `daysViews` {`NodeList`} - \n\n  * `monthsView` - \n\n  * `yearsView` - \n\n  * `hideOutsideDays` {`boolean`} - Controls the visibility of the dates that do not belong to the current month.\n\n  * `hideHeader` {`boolean`} - Determines whether the calendar hides its header. Even if set to false, the header is not displayed for `multiple` selection.\n\n  * `headerOrientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the header.\n\n  * `orientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the multiple months displayed in days view.\n\n  * `visibleMonths` {`number`} - The number of months displayed in days view.\n\n  * `activeView` {`\"days\" | \"months\" | \"years\"`} - The active view.\n\n  * `formatOptions` {`Pick<DateTimeFormatOptions, \"month\" | \"weekday\">`} - The options used to format the months and the weekdays in the calendar views.\n\n  * `resourceStrings` {`IgcCalendarResourceStrings`} - The resource strings.\n\n  * `yearPerPage` {`18 | 15`} - \n\n  * `previousButtonLabel` {`string`} - \n\n  * `nextButtonLabel` {`string`} - \n\n  * `handleKeyDown` - \n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\n  * `_activeDate` {`Date`} - \n\n  * `_activeDateSetFlag` {`boolean`} - \n\n  * `calendarModel` - \n\n  * `value` {`Date | undefined`} - The current value of the calendar.\nUsed when selection is set to single.\n\n  * `values` {`Date[] | undefined`} - The current values of the calendar.\nUsed when selection is set to multiple or range.\n\n  * `selection` {`\"single\" | \"multiple\" | \"range\"`} - Sets the type of date selection.\n\n  * `showWeekNumbers` {`boolean`} - Show/hide the week numbers.\n\n  * `weekStart` {`\"sunday\" | \"monday\" | \"tuesday\" | \"wednesday\" | \"thursday\" | \"friday\" | \"saturday\"`} - Sets the start day of the week.\n\n  * `activeDate` {`Date`} - Sets the date which is shown in view and is highlighted. By default it is the current date.\n\n  * `locale` {`string`} - Sets the locale used for formatting and displaying the dates in the calendar.\n\n  * `disabledDates` {`DateRangeDescriptor[]`} - Gets/sets disabled dates.\n\n  * `specialDates` {`DateRangeDescriptor[]`} - Gets/sets special dates.",
       "attributes": [
         {
           "name": "hide-outside-days",
@@ -844,7 +844,7 @@
     },
     {
       "name": "igc-combo",
-      "description": "Events:\n\n  * `igcFocus` {} - Emitted when the select gains focus.\n\n  * `igcBlur` {} - Emitted when the select loses focus.\n\n  * `igcChange` {} - Emitted when the control's selection has changed.\n\n  * `igcOpening` {} - Emitted just before the list of options is opened.\n\n  * `igcOpened` {} - Emitted after the list of options is opened.\n\n  * `igcClosing` {} - Emitter just before the list of options is closed.\n\n  * `igcClosed` {} - Emitted after the list of options is closed.\n\nSlots:\n\n  * `prefix` {} - Renders content before the input.\n\n  * `suffix` {} - Renders content after input.\n\n  * `header` {} - Renders a container before the list of options.\n\n  * `footer` {} - Renders a container after the list of options.\n\n  * `helper-text` {} - Renders content below the input.\n\n  * `toggle-icon` {} - Renders content inside the suffix container.\n\n  * `clear-icon` {} - Renders content inside the suffix container.\n\nAttributes:\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `disabled` {`boolean`} - The disabled attribute of the control.\n\n  * `required` {`boolean`} - The required attribute of the control.\n\n  * `invalid` {`boolean`} - The invalid attribute of the control.\n\n  * `outlined` {`boolean`} - The outlined attribute of the control.\n\n  * `single-select` {`boolean`} - Enables single selection mode and moves item filtering to the main input.\n\n  * `autofocus` {`boolean`} - The autofocus attribute of the control.\n\n  * `autofocus-list` {`boolean`} - Focuses the list of options when the menu opens.\n\n  * `label` {`string`} - The label attribute of the control.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `placeholder-search` {`string`} - The placeholder attribute of the search input.\n\n  * `dir` {`\"ltr\" | \"rtl\" | \"auto\"`} - The direction attribute of the control.\n\n  * `open` {`boolean`} - Sets the open state of the component.\n\n  * `flip` {`boolean`} - \n\n  * `value-key` - The key in the data source used when selecting items.\n\n  * `display-key` - The key in the data source used to display items in the list.\n\n  * `group-key` - The key in the data source used to group items in the list.\n\n  * `group-sorting` {\"asc\" | \"desc\"} - Sorts the items in each group by ascending or descending order.\n\n  * `filtering-options` {FilteringOptions<T>} - An object that configures the filtering of the combo.\n\n  * `case-sensitive-icon` {`boolean`} - Enables the case sensitive search icon in the filtering input.\n\n  * `disable-filtering` {`boolean`} - Disables the filtering of the list of options.\n\n  * `value` {`ComboValue<T>[]`} - Sets the value (selected items). The passed value must be a valid JSON array.\nIf the data source is an array of complex objects, the `valueKey` attribute must be set.\nNote that when `displayKey` is not explicitly set, it will fall back to the value of `valueKey`.\n\nProperties:\n\n  * `tagName` {`\"igc-combo\"`} - \n\n  * `styles` - \n\n  * `_value` {`ComboValue<T>[]`} - \n\n  * `_displayValue` {`string`} - \n\n  * `_filteringOptions` {`FilteringOptions<T>`} - \n\n  * `navigationController` - \n\n  * `selectionController` - \n\n  * `dataController` - \n\n  * `themeController` {`ThemeController`} - \n\n  * `theme` {`Theme`} - \n\n  * `helperText` {`HTMLElement[]`} - \n\n  * `inputSuffix` {`HTMLElement[]`} - \n\n  * `inputPrefix` {`HTMLElement[]`} - \n\n  * `input` - \n\n  * `target` - \n\n  * `list` - \n\n  * `data` {`T[]`} - The data source used to generate the list of options.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `disabled` {`boolean`} - The disabled attribute of the control.\n\n  * `required` {`boolean`} - The required attribute of the control.\n\n  * `invalid` {`boolean`} - The invalid attribute of the control.\n\n  * `outlined` {`boolean`} - The outlined attribute of the control.\n\n  * `singleSelect` {`boolean`} - Enables single selection mode and moves item filtering to the main input.\n\n  * `autofocus` {`boolean`} - The autofocus attribute of the control.\n\n  * `autofocusList` {`boolean`} - Focuses the list of options when the menu opens.\n\n  * `label` {`string`} - The label attribute of the control.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `placeholderSearch` {`string`} - The placeholder attribute of the search input.\n\n  * `dir` {`\"ltr\" | \"rtl\" | \"auto\"`} - The direction attribute of the control.\n\n  * `open` {`boolean`} - Sets the open state of the component.\n\n  * `flip` {`boolean`} - \n\n  * `valueKey` - The key in the data source used when selecting items.\n\n  * `displayKey` - The key in the data source used to display items in the list.\n\n  * `groupKey` - The key in the data source used to group items in the list.\n\n  * `groupSorting` {\"asc\" | \"desc\"} - Sorts the items in each group by ascending or descending order.\n\n  * `filteringOptions` {FilteringOptions<T>} - An object that configures the filtering of the combo.\n\n  * `caseSensitiveIcon` {`boolean`} - Enables the case sensitive search icon in the filtering input.\n\n  * `disableFiltering` {`boolean`} - Disables the filtering of the list of options.\n\n  * `itemTemplate` {ComboItemTemplate<T>} - The template used for the content of each combo item.\n\n  * `groupHeaderTemplate` {ComboItemTemplate<T>} - The template used for the content of each combo group header.\n\n  * `positionStrategy` {`\"absolute\" | \"fixed\"`} - Sets the component's positioning strategy.\n\n  * `sameWidth` {`boolean`} - Whether the dropdown's width should be the same as the target's one.\n\n  * `dataState` {`ComboRecord<T>[]`} - \n\n  * `value` {`ComboValue<T>[]`} - Sets the value (selected items). The passed value must be a valid JSON array.\nIf the data source is an array of complex objects, the `valueKey` attribute must be set.\nNote that when `displayKey` is not explicitly set, it will fall back to the value of `valueKey`.\n\n  * `selection` {`T[]`} - Returns the current selection as an array of objects as provided in the `data` source.\n\n  * `itemRenderer` - \n\n  * `hasPrefixes` {`boolean`} - \n\n  * `hasSuffixes` {`boolean`} - \n\n  * `toggleController` - ",
+      "description": "Events:\n\n  * `igcFocus` {} - Emitted when the select gains focus.\n\n  * `igcBlur` {} - Emitted when the select loses focus.\n\n  * `igcChange` {} - Emitted when the control's selection has changed.\n\n  * `igcOpening` {} - Emitted just before the list of options is opened.\n\n  * `igcOpened` {} - Emitted after the list of options is opened.\n\n  * `igcClosing` {} - Emitter just before the list of options is closed.\n\n  * `igcClosed` {} - Emitted after the list of options is closed.\n\nSlots:\n\n  * `prefix` {} - Renders content before the input.\n\n  * `suffix` {} - Renders content after input.\n\n  * `header` {} - Renders a container before the list of options.\n\n  * `footer` {} - Renders a container after the list of options.\n\n  * `helper-text` {} - Renders content below the input.\n\n  * `toggle-icon` {} - Renders content inside the suffix container.\n\n  * `clear-icon` {} - Renders content inside the suffix container.\n\nAttributes:\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `disabled` {`boolean`} - The disabled attribute of the control.\n\n  * `required` {`boolean`} - The required attribute of the control.\n\n  * `invalid` {`boolean`} - The invalid attribute of the control.\n\n  * `outlined` {`boolean`} - The outlined attribute of the control.\n\n  * `single-select` {`boolean`} - Enables single selection mode and moves item filtering to the main input.\n\n  * `autofocus` {`boolean`} - The autofocus attribute of the control.\n\n  * `autofocus-list` {`boolean`} - Focuses the list of options when the menu opens.\n\n  * `label` {`string`} - The label attribute of the control.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `placeholder-search` {`string`} - The placeholder attribute of the search input.\n\n  * `dir` {`\"ltr\" | \"rtl\" | \"auto\"`} - The direction attribute of the control.\n\n  * `open` {`boolean`} - Sets the open state of the component.\n\n  * `flip` {`boolean`} - \n\n  * `value-key` - The key in the data source used when selecting items.\n\n  * `display-key` - The key in the data source used to display items in the list.\n\n  * `group-key` - The key in the data source used to group items in the list.\n\n  * `group-sorting` {\"asc\" | \"desc\"} - Sorts the items in each group by ascending or descending order.\n\n  * `filtering-options` {FilteringOptions<T>} - An object that configures the filtering of the combo.\n\n  * `case-sensitive-icon` {`boolean`} - Enables the case sensitive search icon in the filtering input.\n\n  * `disable-filtering` {`boolean`} - Disables the filtering of the list of options.\n\n  * `value` {`ComboValue<T>[]`} - Sets the value (selected items). The passed value must be a valid JSON array.\nIf the data source is an array of complex objects, the `valueKey` attribute must be set.\nNote that when `displayKey` is not explicitly set, it will fall back to the value of `valueKey`.\n\nProperties:\n\n  * `tagName` {`\"igc-combo\"`} - \n\n  * `styles` - \n\n  * `_value` {`ComboValue<T>[]`} - \n\n  * `_displayValue` {`string`} - \n\n  * `_filteringOptions` {`FilteringOptions<T>`} - \n\n  * `navigationController` - \n\n  * `selectionController` - \n\n  * `dataController` - \n\n  * `helperText` {`HTMLElement[]`} - \n\n  * `inputSuffix` {`HTMLElement[]`} - \n\n  * `inputPrefix` {`HTMLElement[]`} - \n\n  * `input` - \n\n  * `target` - \n\n  * `list` - \n\n  * `data` {`T[]`} - The data source used to generate the list of options.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `disabled` {`boolean`} - The disabled attribute of the control.\n\n  * `required` {`boolean`} - The required attribute of the control.\n\n  * `invalid` {`boolean`} - The invalid attribute of the control.\n\n  * `outlined` {`boolean`} - The outlined attribute of the control.\n\n  * `singleSelect` {`boolean`} - Enables single selection mode and moves item filtering to the main input.\n\n  * `autofocus` {`boolean`} - The autofocus attribute of the control.\n\n  * `autofocusList` {`boolean`} - Focuses the list of options when the menu opens.\n\n  * `label` {`string`} - The label attribute of the control.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `placeholderSearch` {`string`} - The placeholder attribute of the search input.\n\n  * `dir` {`\"ltr\" | \"rtl\" | \"auto\"`} - The direction attribute of the control.\n\n  * `open` {`boolean`} - Sets the open state of the component.\n\n  * `flip` {`boolean`} - \n\n  * `valueKey` - The key in the data source used when selecting items.\n\n  * `displayKey` - The key in the data source used to display items in the list.\n\n  * `groupKey` - The key in the data source used to group items in the list.\n\n  * `groupSorting` {\"asc\" | \"desc\"} - Sorts the items in each group by ascending or descending order.\n\n  * `filteringOptions` {FilteringOptions<T>} - An object that configures the filtering of the combo.\n\n  * `caseSensitiveIcon` {`boolean`} - Enables the case sensitive search icon in the filtering input.\n\n  * `disableFiltering` {`boolean`} - Disables the filtering of the list of options.\n\n  * `itemTemplate` {ComboItemTemplate<T>} - The template used for the content of each combo item.\n\n  * `groupHeaderTemplate` {ComboItemTemplate<T>} - The template used for the content of each combo group header.\n\n  * `positionStrategy` {`\"absolute\" | \"fixed\"`} - Sets the component's positioning strategy.\n\n  * `sameWidth` {`boolean`} - Whether the dropdown's width should be the same as the target's one.\n\n  * `dataState` {`ComboRecord<T>[]`} - \n\n  * `value` {`ComboValue<T>[]`} - Sets the value (selected items). The passed value must be a valid JSON array.\nIf the data source is an array of complex objects, the `valueKey` attribute must be set.\nNote that when `displayKey` is not explicitly set, it will fall back to the value of `valueKey`.\n\n  * `selection` {`T[]`} - Returns the current selection as an array of objects as provided in the `data` source.\n\n  * `itemRenderer` - \n\n  * `hasPrefixes` {`boolean`} - \n\n  * `hasSuffixes` {`boolean`} - \n\n  * `toggleController` - ",
       "attributes": [
         {
           "name": "name",
@@ -999,7 +999,7 @@
     },
     {
       "name": "igc-date-time-input",
-      "description": "A date time input is an input field that lets you set and edit the date and time in a chosen input element\nusing customizable display and input formats.\n\nEvents:\n\n  * `igcInput` {} - Emitted when the control input receives user input.\n\n  * `igcChange` {} - Emitted when the control's checked state changes.\n\n  * `igcFocus` {} - Emitted when the control gains focus.\n\n  * `igcBlur` {} - Emitted when the control loses focus.\n\nSlots:\n\n  * `prefix` {} - Renders content before the input.\n\n  * `suffix` {} - Renders content after input.\n\n  * `helper-text` {} - Renders content below the input.\n\nAttributes:\n\n  * `input-format` {`string`} - The date format to apply on the input.\n\n  * `min-value` {`Date | null`} - The minimum value required for the input to remain valid.\n\n  * `max-value` {`Date | null`} - The maximum value required for the input to remain valid.\n\n  * `display-format` {`string`} - Format to display the value in when not editing.\nDefaults to the input format if not set.\n\n  * `spin-loop` {`boolean`} - Sets whether to loop over the currently spun segment.\n\n  * `locale` {`string`} - The locale settings used to display the value.\n\n  * `prompt` {`string`} - The prompt symbol to use for unfilled parts of the mask.\n\n  * `invalid` {`boolean`} - Controls the validity of the control.\n\n  * `value` {`Date | null`} - The value of the input.\n\n  * `dir` {`Direction`} - The direction attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n  * `required` {`boolean`} - Makes the control a required field.\n\n  * `disabled` {`boolean`} - Makes the control a disabled field.\n\n  * `readonly` {`boolean`} - Makes the control a readonly field.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `label` {`string`} - The label for the control.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n  * `tagName` {`\"igc-date-time-input\"`} - \n\n  * `_defaultMask` {`string`} - \n\n  * `_value` {`Date | null`} - \n\n  * `_oldValue` {`Date | null`} - \n\n  * `_inputDateParts` {`DatePartInfo[]`} - \n\n  * `_inputFormat` {`string`} - \n\n  * `_datePartDeltas` {`DatePartDeltas`} - \n\n  * `inputFormat` {`string`} - The date format to apply on the input.\n\n  * `minValue` {`Date | null`} - The minimum value required for the input to remain valid.\n\n  * `maxValue` {`Date | null`} - The maximum value required for the input to remain valid.\n\n  * `displayFormat` {`string`} - Format to display the value in when not editing.\nDefaults to the input format if not set.\n\n  * `spinDelta` {`DatePartDeltas`} - Delta values used to increment or decrement each date part on step actions.\nAll values default to `1`.\n\n  * `spinLoop` {`boolean`} - Sets whether to loop over the currently spun segment.\n\n  * `locale` {`string`} - The locale settings used to display the value.\n\n  * `hasDateParts` {`boolean`} - \n\n  * `hasTimeParts` {`boolean`} - \n\n  * `targetDatePart` {`DatePart | undefined`} - \n\n  * `datePartDeltas` {`DatePartDeltas`} - \n\n  * `parser` - \n\n  * `selection` {`MaskRange`} - \n\n  * `compositionStart` {`number`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `maskedValue` {`string`} - \n\n  * `_mask` {`string`} - \n\n  * `prompt` {`string`} - The prompt symbol to use for unfilled parts of the mask.\n\n  * `invalid` {`boolean`} - Controls the validity of the control.\n\n  * `inputSelection` {`MaskRange`} - \n\n  * `emptyMask` {`string`} - \n\n  * `shadowRootOptions` {`{ delegatesFocus: boolean; mode: ShadowRootMode; slotAssignment?: SlotAssignmentMode | undefined; customElements?: CustomElementRegistry | undefined; }`} - \n\n  * `styles` - \n\n  * `increment` - \n\n  * `inputId` {`string`} - \n\n  * `value` {`Date | null`} - The value of the input.\n\n  * `input` {`HTMLInputElement`} - \n\n  * `prefixes` {`HTMLElement[]`} - \n\n  * `suffixes` {`HTMLElement[]`} - \n\n  * `helperText` {`HTMLElement[]`} - \n\n  * `themeController` {`ThemeController`} - \n\n  * `dir` {`Direction`} - The direction attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n  * `required` {`boolean`} - Makes the control a required field.\n\n  * `disabled` {`boolean`} - Makes the control a disabled field.\n\n  * `readonly` {`boolean`} - Makes the control a readonly field.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `label` {`string`} - The label for the control.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.",
+      "description": "A date time input is an input field that lets you set and edit the date and time in a chosen input element\nusing customizable display and input formats.\n\nEvents:\n\n  * `igcInput` {} - Emitted when the control input receives user input.\n\n  * `igcChange` {} - Emitted when the control's checked state changes.\n\n  * `igcFocus` {} - Emitted when the control gains focus.\n\n  * `igcBlur` {} - Emitted when the control loses focus.\n\nSlots:\n\n  * `prefix` {} - Renders content before the input.\n\n  * `suffix` {} - Renders content after input.\n\n  * `helper-text` {} - Renders content below the input.\n\nAttributes:\n\n  * `input-format` {`string`} - The date format to apply on the input.\n\n  * `min-value` {`Date | null`} - The minimum value required for the input to remain valid.\n\n  * `max-value` {`Date | null`} - The maximum value required for the input to remain valid.\n\n  * `display-format` {`string`} - Format to display the value in when not editing.\nDefaults to the input format if not set.\n\n  * `spin-loop` {`boolean`} - Sets whether to loop over the currently spun segment.\n\n  * `locale` {`string`} - The locale settings used to display the value.\n\n  * `prompt` {`string`} - The prompt symbol to use for unfilled parts of the mask.\n\n  * `invalid` {`boolean`} - Controls the validity of the control.\n\n  * `value` {`Date | null`} - The value of the input.\n\n  * `dir` {`Direction`} - The direction attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n  * `required` {`boolean`} - Makes the control a required field.\n\n  * `disabled` {`boolean`} - Makes the control a disabled field.\n\n  * `readonly` {`boolean`} - Makes the control a readonly field.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `label` {`string`} - The label for the control.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n  * `tagName` {`\"igc-date-time-input\"`} - \n\n  * `_defaultMask` {`string`} - \n\n  * `_value` {`Date | null`} - \n\n  * `_oldValue` {`Date | null`} - \n\n  * `_inputDateParts` {`DatePartInfo[]`} - \n\n  * `_inputFormat` {`string`} - \n\n  * `_datePartDeltas` {`DatePartDeltas`} - \n\n  * `inputFormat` {`string`} - The date format to apply on the input.\n\n  * `minValue` {`Date | null`} - The minimum value required for the input to remain valid.\n\n  * `maxValue` {`Date | null`} - The maximum value required for the input to remain valid.\n\n  * `displayFormat` {`string`} - Format to display the value in when not editing.\nDefaults to the input format if not set.\n\n  * `spinDelta` {`DatePartDeltas`} - Delta values used to increment or decrement each date part on step actions.\nAll values default to `1`.\n\n  * `spinLoop` {`boolean`} - Sets whether to loop over the currently spun segment.\n\n  * `locale` {`string`} - The locale settings used to display the value.\n\n  * `hasDateParts` {`boolean`} - \n\n  * `hasTimeParts` {`boolean`} - \n\n  * `targetDatePart` {`DatePart | undefined`} - \n\n  * `datePartDeltas` {`DatePartDeltas`} - \n\n  * `parser` - \n\n  * `selection` {`MaskRange`} - \n\n  * `compositionStart` {`number`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `maskedValue` {`string`} - \n\n  * `_mask` {`string`} - \n\n  * `prompt` {`string`} - The prompt symbol to use for unfilled parts of the mask.\n\n  * `invalid` {`boolean`} - Controls the validity of the control.\n\n  * `inputSelection` {`MaskRange`} - \n\n  * `emptyMask` {`string`} - \n\n  * `shadowRootOptions` {`{ delegatesFocus: boolean; mode: ShadowRootMode; slotAssignment?: SlotAssignmentMode | undefined; customElements?: CustomElementRegistry | undefined; }`} - \n\n  * `styles` - \n\n  * `increment` - \n\n  * `inputId` {`string`} - \n\n  * `value` {`Date | null`} - The value of the input.\n\n  * `input` {`HTMLInputElement`} - \n\n  * `prefixes` {`HTMLElement[]`} - \n\n  * `suffixes` {`HTMLElement[]`} - \n\n  * `helperText` {`HTMLElement[]`} - \n\n  * `dir` {`Direction`} - The direction attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n  * `required` {`boolean`} - Makes the control a required field.\n\n  * `disabled` {`boolean`} - Makes the control a disabled field.\n\n  * `readonly` {`boolean`} - Makes the control a readonly field.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `label` {`string`} - The label for the control.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.",
       "attributes": [
         {
           "name": "input-format",
@@ -1419,7 +1419,7 @@
     },
     {
       "name": "igc-input",
-      "description": "Events:\n\n  * `igcInput` {} - Emitted when the control input receives user input.\n\n  * `igcChange` {} - Emitted when the control's checked state changes.\n\n  * `igcFocus` {} - Emitted when the control gains focus.\n\n  * `igcBlur` {} - Emitted when the control loses focus.\n\nSlots:\n\n  * `prefix` {} - Renders content before the input.\n\n  * `suffix` {} - Renders content after input.\n\n  * `helper-text` {} - Renders content below the input.\n\nAttributes:\n\n  * `type` {`\"number\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"`} - The type attribute of the control.\n\n  * `inputmode` {`\"numeric\" | \"none\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"txt\" | \"decimal\"`} - The input mode attribute of the control.\n\n  * `pattern` {`string`} - The pattern attribute of the control.\n\n  * `invalid` {`boolean`} - Controls the validity of the control.\n\n  * `minlength` {`number`} - The minlength attribute of the control.\n\n  * `maxlength` {`number`} - The maxlength attribute of the control.\n\n  * `min` {`string | number`} - The min attribute of the control.\n\n  * `max` {`string | number`} - The max attribute of the control.\n\n  * `step` {`number`} - The step attribute of the control.\n\n  * `autofocus` {`boolean`} - The autofocus attribute of the control.\n\n  * `autocomplete` {`string`} - The autocomplete attribute of the control.\n\n  * `tabIndex` {`number`} - \n\n  * `value` {`string`} - The value of the control.\n\n  * `dir` {`Direction`} - The direction attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n  * `required` {`boolean`} - Makes the control a required field.\n\n  * `disabled` {`boolean`} - Makes the control a disabled field.\n\n  * `readonly` {`boolean`} - Makes the control a readonly field.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `label` {`string`} - The label for the control.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n  * `tagName` {`\"igc-input\"`} - \n\n  * `type` {`\"number\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"`} - The type attribute of the control.\n\n  * `inputmode` {`\"numeric\" | \"none\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"txt\" | \"decimal\"`} - The input mode attribute of the control.\n\n  * `pattern` {`string`} - The pattern attribute of the control.\n\n  * `invalid` {`boolean`} - Controls the validity of the control.\n\n  * `minlength` {`number`} - The minlength attribute of the control.\n\n  * `maxlength` {`number`} - The maxlength attribute of the control.\n\n  * `min` {`string | number`} - The min attribute of the control.\n\n  * `max` {`string | number`} - The max attribute of the control.\n\n  * `step` {`number`} - The step attribute of the control.\n\n  * `autofocus` {`boolean`} - The autofocus attribute of the control.\n\n  * `autocomplete` {`string`} - The autocomplete attribute of the control.\n\n  * `tabIndex` {`number`} - \n\n  * `shadowRootOptions` {`{ delegatesFocus: boolean; mode: ShadowRootMode; slotAssignment?: SlotAssignmentMode | undefined; customElements?: CustomElementRegistry | undefined; }`} - \n\n  * `styles` - \n\n  * `increment` - \n\n  * `inputId` {`string`} - \n\n  * `value` {`string`} - The value of the control.\n\n  * `input` {`HTMLInputElement`} - \n\n  * `prefixes` {`HTMLElement[]`} - \n\n  * `suffixes` {`HTMLElement[]`} - \n\n  * `helperText` {`HTMLElement[]`} - \n\n  * `themeController` {`ThemeController`} - \n\n  * `dir` {`Direction`} - The direction attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n  * `required` {`boolean`} - Makes the control a required field.\n\n  * `disabled` {`boolean`} - Makes the control a disabled field.\n\n  * `readonly` {`boolean`} - Makes the control a readonly field.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `label` {`string`} - The label for the control.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.",
+      "description": "Events:\n\n  * `igcInput` {} - Emitted when the control input receives user input.\n\n  * `igcChange` {} - Emitted when the control's checked state changes.\n\n  * `igcFocus` {} - Emitted when the control gains focus.\n\n  * `igcBlur` {} - Emitted when the control loses focus.\n\nSlots:\n\n  * `prefix` {} - Renders content before the input.\n\n  * `suffix` {} - Renders content after input.\n\n  * `helper-text` {} - Renders content below the input.\n\nAttributes:\n\n  * `type` {`\"number\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"`} - The type attribute of the control.\n\n  * `inputmode` {`\"numeric\" | \"none\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"txt\" | \"decimal\"`} - The input mode attribute of the control.\n\n  * `pattern` {`string`} - The pattern attribute of the control.\n\n  * `invalid` {`boolean`} - Controls the validity of the control.\n\n  * `minlength` {`number`} - The minlength attribute of the control.\n\n  * `maxlength` {`number`} - The maxlength attribute of the control.\n\n  * `min` {`string | number`} - The min attribute of the control.\n\n  * `max` {`string | number`} - The max attribute of the control.\n\n  * `step` {`number`} - The step attribute of the control.\n\n  * `autofocus` {`boolean`} - The autofocus attribute of the control.\n\n  * `autocomplete` {`string`} - The autocomplete attribute of the control.\n\n  * `tabIndex` {`number`} - \n\n  * `value` {`string`} - The value of the control.\n\n  * `dir` {`Direction`} - The direction attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n  * `required` {`boolean`} - Makes the control a required field.\n\n  * `disabled` {`boolean`} - Makes the control a disabled field.\n\n  * `readonly` {`boolean`} - Makes the control a readonly field.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `label` {`string`} - The label for the control.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n  * `tagName` {`\"igc-input\"`} - \n\n  * `type` {`\"number\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"`} - The type attribute of the control.\n\n  * `inputmode` {`\"numeric\" | \"none\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"txt\" | \"decimal\"`} - The input mode attribute of the control.\n\n  * `pattern` {`string`} - The pattern attribute of the control.\n\n  * `invalid` {`boolean`} - Controls the validity of the control.\n\n  * `minlength` {`number`} - The minlength attribute of the control.\n\n  * `maxlength` {`number`} - The maxlength attribute of the control.\n\n  * `min` {`string | number`} - The min attribute of the control.\n\n  * `max` {`string | number`} - The max attribute of the control.\n\n  * `step` {`number`} - The step attribute of the control.\n\n  * `autofocus` {`boolean`} - The autofocus attribute of the control.\n\n  * `autocomplete` {`string`} - The autocomplete attribute of the control.\n\n  * `tabIndex` {`number`} - \n\n  * `shadowRootOptions` {`{ delegatesFocus: boolean; mode: ShadowRootMode; slotAssignment?: SlotAssignmentMode | undefined; customElements?: CustomElementRegistry | undefined; }`} - \n\n  * `styles` - \n\n  * `increment` - \n\n  * `inputId` {`string`} - \n\n  * `value` {`string`} - The value of the control.\n\n  * `input` {`HTMLInputElement`} - \n\n  * `prefixes` {`HTMLElement[]`} - \n\n  * `suffixes` {`HTMLElement[]`} - \n\n  * `helperText` {`HTMLElement[]`} - \n\n  * `dir` {`Direction`} - The direction attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n  * `required` {`boolean`} - Makes the control a required field.\n\n  * `disabled` {`boolean`} - Makes the control a disabled field.\n\n  * `readonly` {`boolean`} - Makes the control a readonly field.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `label` {`string`} - The label for the control.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.",
       "attributes": [
         {
           "name": "type",
@@ -1628,7 +1628,7 @@
     },
     {
       "name": "igc-mask-input",
-      "description": "A masked input is an input field where a developer can control user input and format the visible value,\nbased on configurable rules\n\nEvents:\n\n  * `igcInput` {} - Emitted when the control receives user input\n\n  * `igcChange` {} - Emitted when an alteration of the control's value is committed by the user\n\n  * `igcFocus` {} - Emitted when the control gains focus\n\n  * `igcBlur` {} - Emitted when the control loses focus\n\nSlots:\n\n  * `prefix` {} - Renders content before the input\n\n  * `suffix` {} - Renders content after the input\n\n  * `helper-text` {} - Renders content below the input\n\nAttributes:\n\n  * `value-mode` {`\"raw\" | \"withFormatting\"`} - Dictates the behavior when retrieving the value of the control:\n\n- `raw` will return the clean user input.\n- `withFormatting` will return the value with all literals and prompts.\n\n  * `mask` {`string`} - The mask pattern to apply on the input.\n\n  * `prompt` {`string`} - The prompt symbol to use for unfilled parts of the mask.\n\n  * `invalid` {`boolean`} - Controls the validity of the control.\n\n  * `value` {`string`} - The value of the input.\n\nRegardless of the currently set `value-mode`, an empty value will return an empty string.\n\n  * `dir` {`Direction`} - The direction attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n  * `required` {`boolean`} - Makes the control a required field.\n\n  * `disabled` {`boolean`} - Makes the control a disabled field.\n\n  * `readonly` {`boolean`} - Makes the control a readonly field.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `label` {`string`} - The label for the control.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n  * `tagName` {`\"igc-mask-input\"`} - \n\n  * `_value` {`string`} - \n\n  * `valueMode` {`\"raw\" | \"withFormatting\"`} - Dictates the behavior when retrieving the value of the control:\n\n- `raw` will return the clean user input.\n- `withFormatting` will return the value with all literals and prompts.\n\n  * `mask` {`string`} - The mask pattern to apply on the input.\n\n  * `parser` - \n\n  * `selection` {`MaskRange`} - \n\n  * `compositionStart` {`number`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `maskedValue` {`string`} - \n\n  * `_mask` {`string`} - \n\n  * `prompt` {`string`} - The prompt symbol to use for unfilled parts of the mask.\n\n  * `invalid` {`boolean`} - Controls the validity of the control.\n\n  * `inputSelection` {`MaskRange`} - \n\n  * `emptyMask` {`string`} - \n\n  * `shadowRootOptions` {`{ delegatesFocus: boolean; mode: ShadowRootMode; slotAssignment?: SlotAssignmentMode | undefined; customElements?: CustomElementRegistry | undefined; }`} - \n\n  * `styles` - \n\n  * `increment` - \n\n  * `inputId` {`string`} - \n\n  * `value` {`string`} - The value of the input.\n\nRegardless of the currently set `value-mode`, an empty value will return an empty string.\n\n  * `input` {`HTMLInputElement`} - \n\n  * `prefixes` {`HTMLElement[]`} - \n\n  * `suffixes` {`HTMLElement[]`} - \n\n  * `helperText` {`HTMLElement[]`} - \n\n  * `themeController` {`ThemeController`} - \n\n  * `dir` {`Direction`} - The direction attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n  * `required` {`boolean`} - Makes the control a required field.\n\n  * `disabled` {`boolean`} - Makes the control a disabled field.\n\n  * `readonly` {`boolean`} - Makes the control a readonly field.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `label` {`string`} - The label for the control.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.",
+      "description": "A masked input is an input field where a developer can control user input and format the visible value,\nbased on configurable rules\n\nEvents:\n\n  * `igcInput` {} - Emitted when the control receives user input\n\n  * `igcChange` {} - Emitted when an alteration of the control's value is committed by the user\n\n  * `igcFocus` {} - Emitted when the control gains focus\n\n  * `igcBlur` {} - Emitted when the control loses focus\n\nSlots:\n\n  * `prefix` {} - Renders content before the input\n\n  * `suffix` {} - Renders content after the input\n\n  * `helper-text` {} - Renders content below the input\n\nAttributes:\n\n  * `value-mode` {`\"raw\" | \"withFormatting\"`} - Dictates the behavior when retrieving the value of the control:\n\n- `raw` will return the clean user input.\n- `withFormatting` will return the value with all literals and prompts.\n\n  * `mask` {`string`} - The mask pattern to apply on the input.\n\n  * `prompt` {`string`} - The prompt symbol to use for unfilled parts of the mask.\n\n  * `invalid` {`boolean`} - Controls the validity of the control.\n\n  * `value` {`string`} - The value of the input.\n\nRegardless of the currently set `value-mode`, an empty value will return an empty string.\n\n  * `dir` {`Direction`} - The direction attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n  * `required` {`boolean`} - Makes the control a required field.\n\n  * `disabled` {`boolean`} - Makes the control a disabled field.\n\n  * `readonly` {`boolean`} - Makes the control a readonly field.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `label` {`string`} - The label for the control.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n  * `tagName` {`\"igc-mask-input\"`} - \n\n  * `_value` {`string`} - \n\n  * `valueMode` {`\"raw\" | \"withFormatting\"`} - Dictates the behavior when retrieving the value of the control:\n\n- `raw` will return the clean user input.\n- `withFormatting` will return the value with all literals and prompts.\n\n  * `mask` {`string`} - The mask pattern to apply on the input.\n\n  * `parser` - \n\n  * `selection` {`MaskRange`} - \n\n  * `compositionStart` {`number`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `maskedValue` {`string`} - \n\n  * `_mask` {`string`} - \n\n  * `prompt` {`string`} - The prompt symbol to use for unfilled parts of the mask.\n\n  * `invalid` {`boolean`} - Controls the validity of the control.\n\n  * `inputSelection` {`MaskRange`} - \n\n  * `emptyMask` {`string`} - \n\n  * `shadowRootOptions` {`{ delegatesFocus: boolean; mode: ShadowRootMode; slotAssignment?: SlotAssignmentMode | undefined; customElements?: CustomElementRegistry | undefined; }`} - \n\n  * `styles` - \n\n  * `increment` - \n\n  * `inputId` {`string`} - \n\n  * `value` {`string`} - The value of the input.\n\nRegardless of the currently set `value-mode`, an empty value will return an empty string.\n\n  * `input` {`HTMLInputElement`} - \n\n  * `prefixes` {`HTMLElement[]`} - \n\n  * `suffixes` {`HTMLElement[]`} - \n\n  * `helperText` {`HTMLElement[]`} - \n\n  * `dir` {`Direction`} - The direction attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n  * `required` {`boolean`} - Makes the control a required field.\n\n  * `disabled` {`boolean`} - Makes the control a disabled field.\n\n  * `readonly` {`boolean`} - Makes the control a readonly field.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `label` {`string`} - The label for the control.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.",
       "attributes": [
         {
           "name": "value-mode",
@@ -2145,7 +2145,7 @@
     },
     {
       "name": "igc-select",
-      "description": "Events:\n\n  * `igcChange` {} - Emitted when the selected item changes.\n\n  * `igcOpening` {} - Emitted just before the dropdown is open.\n\n  * `igcOpened` {} - Emitted after the dropdown is open.\n\n  * `igcClosing` {} - Emitter just before the dropdown is closed.\n\n  * `igcClosed` {} - Emitted after closing the dropdown.\n\nSlots:\n\n  * `target` {} - Renders the dropdown's target element.\n\n  * ` ` {} - Renders the dropdown list items.\n\nAttributes:\n\n  * `value` {`string | undefined`} - The value attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `disabled` {`boolean`} - The disabled attribute of the control.\n\n  * `required` {`boolean`} - The required attribute of the control.\n\n  * `invalid` {`boolean`} - The invalid attribute of the control.\n\n  * `outlined` {`boolean`} - The outlined attribute of the control.\n\n  * `autofocus` {`boolean`} - The autofocus attribute of the control.\n\n  * `label` {`string`} - The label attribute of the control.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `dir` {`\"ltr\" | \"rtl\" | \"auto\"`} - The direction attribute of the control.\n\n  * `keep-open-on-select` {`boolean`} - Whether the dropdown should be kept open on selection.\n\n  * `scroll-strategy` {`\"scroll\" | \"block\" | \"close\"`} - Determines the behavior of the component during scrolling the container.\n\n  * `keep-open-on-outside-click` {`boolean`} - Whether the component should be kept open on clicking outside of it.\n\n  * `open` {`boolean`} - Sets the open state of the component.\n\n  * `placement` {\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"} - The preferred placement of the component around the target element.\n\n  * `position-strategy` {`\"absolute\" | \"fixed\"`} - Sets the component's positioning strategy.\n\n  * `flip` {`boolean`} - Whether the component should be flipped to the opposite side of the target once it's about to overflow the visible area.\nWhen true, once enough space is detected on its preferred side, it will flip back.\n\n  * `distance` {`number`} - The distance from the target element.\n\n  * `same-width` {`boolean`} - Whether the dropdown's width should be the same as the target's one.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n  * `searchTerm` {`string`} - \n\n  * `lastKeyTime` {`number`} - \n\n  * `themeController` {`ThemeController`} - \n\n  * `theme` {`Theme`} - \n\n  * `targetKeyHandlers` {`Map<string, Function>`} - \n\n  * `helperText` {`HTMLElement[]`} - \n\n  * `inputSuffix` {`HTMLElement[]`} - \n\n  * `inputPrefix` {`HTMLElement[]`} - \n\n  * `value` {`string | undefined`} - The value attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `disabled` {`boolean`} - The disabled attribute of the control.\n\n  * `required` {`boolean`} - The required attribute of the control.\n\n  * `invalid` {`boolean`} - The invalid attribute of the control.\n\n  * `outlined` {`boolean`} - The outlined attribute of the control.\n\n  * `autofocus` {`boolean`} - The autofocus attribute of the control.\n\n  * `label` {`string`} - The label attribute of the control.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `dir` {`\"ltr\" | \"rtl\" | \"auto\"`} - The direction attribute of the control.\n\n  * `hasPrefixes` {`boolean`} - \n\n  * `hasSuffixes` {`boolean`} - \n\n  * `tagName` {`\"igc-select\"`} - \n\n  * `styles` - \n\n  * `selectedItem` - \n\n  * `activeItem` - \n\n  * `target` - \n\n  * `keyDownHandlers` {`Map<string, Function>`} - \n\n  * `allItems` {`IgcDropdownItemComponent[]`} - \n\n  * `targetNodes` {`HTMLElement[]`} - \n\n  * `content` {`HTMLElement`} - \n\n  * `scrollContainer` {`HTMLElement`} - \n\n  * `items` {`IgcSelectItemComponent[]`} - \n\n  * `groups` {`IgcSelectGroupComponent[]`} - \n\n  * `keepOpenOnSelect` {`boolean`} - Whether the dropdown should be kept open on selection.\n\n  * `handleKeyDown` - \n\n  * `handleTargetClick` - \n\n  * `toggleController` - \n\n  * `scrollStrategy` {`\"scroll\" | \"block\" | \"close\"`} - Determines the behavior of the component during scrolling the container.\n\n  * `keepOpenOnOutsideClick` {`boolean`} - Whether the component should be kept open on clicking outside of it.\n\n  * `open` {`boolean`} - Sets the open state of the component.\n\n  * `placement` {\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"} - The preferred placement of the component around the target element.\n\n  * `positionStrategy` {`\"absolute\" | \"fixed\"`} - Sets the component's positioning strategy.\n\n  * `flip` {`boolean`} - Whether the component should be flipped to the opposite side of the target once it's about to overflow the visible area.\nWhen true, once enough space is detected on its preferred side, it will flip back.\n\n  * `distance` {`number`} - The distance from the target element.\n\n  * `sameWidth` {`boolean`} - Whether the dropdown's width should be the same as the target's one.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.",
+      "description": "Events:\n\n  * `igcChange` {} - Emitted when the selected item changes.\n\n  * `igcOpening` {} - Emitted just before the dropdown is open.\n\n  * `igcOpened` {} - Emitted after the dropdown is open.\n\n  * `igcClosing` {} - Emitter just before the dropdown is closed.\n\n  * `igcClosed` {} - Emitted after closing the dropdown.\n\nSlots:\n\n  * `target` {} - Renders the dropdown's target element.\n\n  * ` ` {} - Renders the dropdown list items.\n\nAttributes:\n\n  * `value` {`string | undefined`} - The value attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `disabled` {`boolean`} - The disabled attribute of the control.\n\n  * `required` {`boolean`} - The required attribute of the control.\n\n  * `invalid` {`boolean`} - The invalid attribute of the control.\n\n  * `outlined` {`boolean`} - The outlined attribute of the control.\n\n  * `autofocus` {`boolean`} - The autofocus attribute of the control.\n\n  * `label` {`string`} - The label attribute of the control.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `dir` {`\"ltr\" | \"rtl\" | \"auto\"`} - The direction attribute of the control.\n\n  * `keep-open-on-select` {`boolean`} - Whether the dropdown should be kept open on selection.\n\n  * `scroll-strategy` {`\"scroll\" | \"block\" | \"close\"`} - Determines the behavior of the component during scrolling the container.\n\n  * `keep-open-on-outside-click` {`boolean`} - Whether the component should be kept open on clicking outside of it.\n\n  * `open` {`boolean`} - Sets the open state of the component.\n\n  * `placement` {\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"} - The preferred placement of the component around the target element.\n\n  * `position-strategy` {`\"absolute\" | \"fixed\"`} - Sets the component's positioning strategy.\n\n  * `flip` {`boolean`} - Whether the component should be flipped to the opposite side of the target once it's about to overflow the visible area.\nWhen true, once enough space is detected on its preferred side, it will flip back.\n\n  * `distance` {`number`} - The distance from the target element.\n\n  * `same-width` {`boolean`} - Whether the dropdown's width should be the same as the target's one.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n  * `searchTerm` {`string`} - \n\n  * `lastKeyTime` {`number`} - \n\n  * `targetKeyHandlers` {`Map<string, Function>`} - \n\n  * `helperText` {`HTMLElement[]`} - \n\n  * `inputSuffix` {`HTMLElement[]`} - \n\n  * `inputPrefix` {`HTMLElement[]`} - \n\n  * `value` {`string | undefined`} - The value attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `disabled` {`boolean`} - The disabled attribute of the control.\n\n  * `required` {`boolean`} - The required attribute of the control.\n\n  * `invalid` {`boolean`} - The invalid attribute of the control.\n\n  * `outlined` {`boolean`} - The outlined attribute of the control.\n\n  * `autofocus` {`boolean`} - The autofocus attribute of the control.\n\n  * `label` {`string`} - The label attribute of the control.\n\n  * `placeholder` {`string`} - The placeholder attribute of the control.\n\n  * `dir` {`\"ltr\" | \"rtl\" | \"auto\"`} - The direction attribute of the control.\n\n  * `hasPrefixes` {`boolean`} - \n\n  * `hasSuffixes` {`boolean`} - \n\n  * `tagName` {`\"igc-select\"`} - \n\n  * `styles` - \n\n  * `selectedItem` - \n\n  * `activeItem` - \n\n  * `target` - \n\n  * `keyDownHandlers` {`Map<string, Function>`} - \n\n  * `allItems` {`IgcDropdownItemComponent[]`} - \n\n  * `targetNodes` {`HTMLElement[]`} - \n\n  * `content` {`HTMLElement`} - \n\n  * `scrollContainer` {`HTMLElement`} - \n\n  * `items` {`IgcSelectItemComponent[]`} - \n\n  * `groups` {`IgcSelectGroupComponent[]`} - \n\n  * `keepOpenOnSelect` {`boolean`} - Whether the dropdown should be kept open on selection.\n\n  * `handleKeyDown` - \n\n  * `handleTargetClick` - \n\n  * `toggleController` - \n\n  * `scrollStrategy` {`\"scroll\" | \"block\" | \"close\"`} - Determines the behavior of the component during scrolling the container.\n\n  * `keepOpenOnOutsideClick` {`boolean`} - Whether the component should be kept open on clicking outside of it.\n\n  * `open` {`boolean`} - Sets the open state of the component.\n\n  * `placement` {\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"} - The preferred placement of the component around the target element.\n\n  * `positionStrategy` {`\"absolute\" | \"fixed\"`} - Sets the component's positioning strategy.\n\n  * `flip` {`boolean`} - Whether the component should be flipped to the opposite side of the target once it's about to overflow the visible area.\nWhen true, once enough space is detected on its preferred side, it will flip back.\n\n  * `distance` {`number`} - The distance from the target element.\n\n  * `sameWidth` {`boolean`} - Whether the dropdown's width should be the same as the target's one.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.",
       "attributes": [
         {
           "name": "value",
@@ -2799,7 +2799,7 @@
     },
     {
       "name": "igc-toast",
-      "description": "A toast component is used to show a notification\n\nAttributes:\n\n  * `open` {`boolean`} - Determines whether the toast is opened.\n\n  * `display-time` {`number`} - Determines the time after which the toast will close\n\n  * `keep-open` {`boolean`} - Determines whether the toast is closed automatically or not.\n\nProperties:\n\n  * `tagName` {`\"igc-toast\"`} - \n\n  * `styles` {`CSSResult[]`} - \n\n  * `displayTimeout` {`Timeout`} - \n\n  * `animationPlayer` - \n\n  * `open` {`boolean`} - Determines whether the toast is opened.\n\n  * `displayTime` {`number`} - Determines the time after which the toast will close\n\n  * `keepOpen` {`boolean`} - Determines whether the toast is closed automatically or not.",
+      "description": "A toast component is used to show a notification\n\nAttributes:\n\n  * `open` {`boolean`} - Determines whether the toast is opened.\n\n  * `display-time` {`number`} - Determines the time after which the toast will close\n\n  * `keep-open` {`boolean`} - Determines whether the toast is closed automatically or not.\n\nProperties:\n\n  * `tagName` {`\"igc-toast\"`} - \n\n  * `styles` {`CSSResult[]`} - \n\n  * `displayTimeout` - \n\n  * `animationPlayer` - \n\n  * `open` {`boolean`} - Determines whether the toast is opened.\n\n  * `displayTime` {`number`} - Determines the time after which the toast will close\n\n  * `keepOpen` {`boolean`} - Determines whether the toast is closed automatically or not.",
       "attributes": [
         {
           "name": "open",
@@ -2824,7 +2824,7 @@
     },
     {
       "name": "igc-tree-item",
-      "description": "The tree-item component represents a child item of the tree component or another tree item.\n\nSlots:\n\n  * ` ` {} - Renders nested tree-item component.\n\n  * `label` {} - Renders the tree item container.\n\n  * `indicator` {} - Renders the expand indicator container.\n\n  * `loading` {} - Renders the tree item loading indicator container.\n\n  * `indentation` {} - Renders the container (by default the space) before the tree item.\n\nAttributes:\n\n  * `label` {`string`} - The tree item label.\n\n  * `expanded` {`boolean`} - The tree item expansion state.\n\n  * `active` {`boolean`} - Marks the item as the tree's active item.\n\n  * `disabled` {`boolean`} - Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions.\n\n  * `selected` {`boolean`} - The tree item selection state.\n\n  * `loading` {`boolean`} - To be used for load-on-demand scenarios in order to specify whether the item is loading data.\n\n  * `value` - The value entry that the tree item is visualizing. Required for searching through items.\n\nProperties:\n\n  * `tagName` {`\"igc-tree-item\"`} - \n\n  * `styles` - \n\n  * `tabbableEl` {`HTMLElement[] | undefined`} - \n\n  * `focusedProgrammatically` {`boolean`} - \n\n  * `tree` - A reference to the tree the item is a part of.\n\n  * `parent` - The parent item of the current tree item (if any)\n\n  * `init` {`boolean`} - \n\n  * `contentList` {`HTMLElement[]`} - \n\n  * `wrapper` {`HTMLElement`} - \n\n  * `isFocused` {`boolean`} - \n\n  * `hasChildren` {`boolean`} - \n\n  * `level` {`number`} - The depth of the item, relative to the root.\n\n  * `indeterminate` {`boolean`} - \n\n  * `label` {`string`} - The tree item label.\n\n  * `expanded` {`boolean`} - The tree item expansion state.\n\n  * `active` {`boolean`} - Marks the item as the tree's active item.\n\n  * `disabled` {`boolean`} - Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions.\n\n  * `selected` {`boolean`} - The tree item selection state.\n\n  * `loading` {`boolean`} - To be used for load-on-demand scenarios in order to specify whether the item is loading data.\n\n  * `value` - The value entry that the tree item is visualizing. Required for searching through items.\n\n  * `selectionService` - \n\n  * `navService` - \n\n  * `parts` {`{ selected: boolean; focused: boolean; active: boolean; }`} - \n\n  * `directChildren` {`IgcTreeItemComponent[]`} - \n\n  * `allChildren` {`IgcTreeItemComponent[]`} - \n\n  * `path` {`IgcTreeItemComponent[]`} - The full path to the tree item, starting from the top-most ancestor.",
+      "description": "The tree-item component represents a child item of the tree component or another tree item.\n\nSlots:\n\n  * ` ` {} - Renders nested tree-item component.\n\n  * `label` {} - Renders the tree item container.\n\n  * `indicator` {} - Renders the expand indicator container.\n\n  * `loading` {} - Renders the tree item loading indicator container.\n\n  * `indentation` {} - Renders the container (by default the space) before the tree item.\n\nAttributes:\n\n  * `label` {`string`} - The tree item label.\n\n  * `expanded` {`boolean`} - The tree item expansion state.\n\n  * `active` {`boolean`} - Marks the item as the tree's active item.\n\n  * `disabled` {`boolean`} - Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions.\n\n  * `selected` {`boolean`} - The tree item selection state.\n\n  * `loading` {`boolean`} - To be used for load-on-demand scenarios in order to specify whether the item is loading data.\n\n  * `value` - The value entry that the tree item is visualizing. Required for searching through items.\n\nProperties:\n\n  * `tagName` {`\"igc-tree-item\"`} - \n\n  * `styles` - \n\n  * `tabbableEl` {`HTMLElement[] | undefined`} - \n\n  * `focusedProgrammatically` {`boolean`} - \n\n  * `animationPlayer` - \n\n  * `tree` - A reference to the tree the item is a part of.\n\n  * `parent` - The parent item of the current tree item (if any)\n\n  * `init` {`boolean`} - \n\n  * `contentList` {`HTMLElement[]`} - \n\n  * `wrapper` {`HTMLElement`} - \n\n  * `group` {`HTMLElement`} - \n\n  * `isFocused` {`boolean`} - \n\n  * `hasChildren` {`boolean`} - \n\n  * `level` {`number`} - The depth of the item, relative to the root.\n\n  * `indeterminate` {`boolean`} - \n\n  * `label` {`string`} - The tree item label.\n\n  * `expanded` {`boolean`} - The tree item expansion state.\n\n  * `active` {`boolean`} - Marks the item as the tree's active item.\n\n  * `disabled` {`boolean`} - Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions.\n\n  * `selected` {`boolean`} - The tree item selection state.\n\n  * `loading` {`boolean`} - To be used for load-on-demand scenarios in order to specify whether the item is loading data.\n\n  * `value` - The value entry that the tree item is visualizing. Required for searching through items.\n\n  * `selectionService` - \n\n  * `navService` - \n\n  * `parts` {`{ selected: boolean; focused: boolean; active: boolean; }`} - \n\n  * `directChildren` {`IgcTreeItemComponent[]`} - \n\n  * `allChildren` {`IgcTreeItemComponent[]`} - \n\n  * `path` {`IgcTreeItemComponent[]`} - The full path to the tree item, starting from the top-most ancestor.",
       "attributes": [
         {
           "name": "label",

package/components/dropdown/themes/light/dropdown-group.base.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-group.base.css.js","sourceRoot":"","sources":["../../../../../src/components/dropdown/themes/light/dropdown-group.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDvB,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[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  pointer-events: auto;\n}\n:host ::slotted([slot=label]) {\n  font-family: var(--ig-overline-font-family, var(--ig-font-family));\n  font-size: var(--ig-overline-font-size);\n  font-weight: var(--ig-overline-font-weight);\n  font-style: var(--ig-overline-font-style);\n  line-height: var(--ig-overline-line-height);\n  letter-spacing: var(--ig-overline-letter-spacing);\n  text-transform: var(--ig-overline-text-transform);\n  margin-top: var(--ig-overline-margin-top);\n  margin-bottom: var(--ig-overline-margin-bottom);\n  white-space: nowrap;\n  -o-text-overflow: ellipsis;\n     text-overflow: ellipsis;\n  overflow: hidden;\n  display: block;\n  white-space: nowrap;\n  position: relative;\n  color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  pointer-events: none;\n  padding-inline: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(2px, -1 * 2px) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}`;\n"]}

package/components/dropdown/themes/light/dropdown-group.fluent.css.js

@@ -1,6 +0,0 @@
-import { css } from 'lit';
-export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-:host ::slotted([slot=label]) {
-  padding: max(var(--is-large, 1) * max(8px, -1 * 8px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(4px, -1 * 4px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(2px, -1 * 2px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
-}`;
-//# sourceMappingURL=dropdown-group.fluent.css.js.map

package/components/dropdown/themes/light/dropdown-group.fluent.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-group.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/dropdown/themes/light/dropdown-group.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;EAGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host ::slotted([slot=label]) {\n  padding: max(var(--is-large, 1) * max(8px, -1 * 8px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(4px, -1 * 4px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(2px, -1 * 2px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}`;\n"]}

package/components/dropdown/themes/light/dropdown-header.base.css.js

@@ -1,61 +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);
-}
-
-[hidden] {
-  display: none !important;
-}
-
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-:host {
-  font-family: var(--ig-overline-font-family, var(--ig-font-family));
-  font-size: var(--ig-overline-font-size);
-  font-weight: var(--ig-overline-font-weight);
-  font-style: var(--ig-overline-font-style);
-  line-height: var(--ig-overline-line-height);
-  letter-spacing: var(--ig-overline-letter-spacing);
-  text-transform: var(--ig-overline-text-transform);
-  margin-top: var(--ig-overline-margin-top);
-  margin-bottom: var(--ig-overline-margin-bottom);
-  white-space: nowrap;
-  -o-text-overflow: ellipsis;
-     text-overflow: ellipsis;
-  overflow: hidden;
-  display: block;
-  white-space: nowrap;
-  position: relative;
-  color: var(--header-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  pointer-events: none;
-  padding-inline: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
-  padding-block: max(var(--is-large, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(2px, -1 * 2px) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));
-}
-
-::slotted(*) {
-  font: inherit;
-}`;
-//# sourceMappingURL=dropdown-header.base.css.js.map

package/components/dropdown/themes/light/dropdown-header.base.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-header.base.css.js","sourceRoot":"","sources":["../../../../../src/components/dropdown/themes/light/dropdown-header.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DvB,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[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  font-family: var(--ig-overline-font-family, var(--ig-font-family));\n  font-size: var(--ig-overline-font-size);\n  font-weight: var(--ig-overline-font-weight);\n  font-style: var(--ig-overline-font-style);\n  line-height: var(--ig-overline-line-height);\n  letter-spacing: var(--ig-overline-letter-spacing);\n  text-transform: var(--ig-overline-text-transform);\n  margin-top: var(--ig-overline-margin-top);\n  margin-bottom: var(--ig-overline-margin-bottom);\n  white-space: nowrap;\n  -o-text-overflow: ellipsis;\n     text-overflow: ellipsis;\n  overflow: hidden;\n  display: block;\n  white-space: nowrap;\n  position: relative;\n  color: var(--header-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  pointer-events: none;\n  padding-inline: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(2px, -1 * 2px) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n::slotted(*) {\n  font: inherit;\n}`;\n"]}

package/components/dropdown/themes/light/dropdown-header.bootstrap.css.js

@@ -1,6 +0,0 @@
-import { css } from 'lit';
-export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-:host {
-  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
-}`;
-//# sourceMappingURL=dropdown-header.bootstrap.css.js.map

package/components/dropdown/themes/light/dropdown-header.bootstrap.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-header.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/dropdown/themes/light/dropdown-header.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;EAGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}`;\n"]}

package/components/dropdown/themes/light/dropdown-header.fluent.css.js

@@ -1,6 +0,0 @@
-import { css } from 'lit';
-export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-:host {
-  padding: max(var(--is-large, 1) * max(8px, -1 * 8px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(4px, -1 * 4px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(2px, -1 * 2px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
-}`;
-//# sourceMappingURL=dropdown-header.fluent.css.js.map