igniteui-webcomponents 2.2.0 → 3.0.0

package/components/nav-drawer/nav-drawer.js

@@ -45,15 +45,18 @@ let IgcNavDrawerComponent = class IgcNavDrawerComponent extends LitElement {
         };
     }
     render() {
-        return html ` <div part="base">
-      <div part="main">
-        <slot></slot>
-      </div>
+        return html `
+      <div part="overlay" @click=${this.hide}></div>
+      <div part="base">
+        <div part="main">
+          <slot></slot>
+        </div>
 
-      <div part="${partNameMap(this.resolvePartNames('mini'))}">
-        <slot name="mini"></slot>
+        <div part="${partNameMap(this.resolvePartNames('mini'))}">
+          <slot name="mini"></slot>
+        </div>
       </div>
-    </div>`;
+    `;
     }
 };
 IgcNavDrawerComponent.tagName = 'igc-nav-drawer';

package/components/nav-drawer/nav-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer.js","sourceRoot":"","sources":["../../../src/components/nav-drawer/nav-drawer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAgBtD,IAAqB,qBAAqB,GAA1C,MAAqB,qBAAsB,SAAQ,UAAU;IAA7D;;QAMS,aAAQ,GAAuC,OAAO,CAAC;QAIvD,SAAI,GAAG,KAAK,CAAC;IAkDtB,CAAC;IA/CQ,IAAI;QACT,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAGM,IAAI;QACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAGM,MAAM;QACX,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;aAAM;YACL,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;IACH,CAAC;IAEO,gBAAgB,CAAC,IAAY;QACnC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACxD,MAAM,WAAW,GAAG,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QAE9D,OAAO;YACL,CAAC,IAAI,CAAC,EAAE,IAAI;YACZ,MAAM,EAAE,CAAC,WAAW;SACrB,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;mBAKI,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;;;WAGlD,CAAC;IACV,CAAC;CACF,CAAA;AA3DwB,6BAAO,GAAG,gBAAiB,CAAA;AAC3B,4BAAM,GAAG,MAAO,CAAA;AAIvC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACkC;AAI9D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACvB;AAVD,qBAAqB;IADzC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;GACE,qBAAqB,CA4DzC;eA5DoB,qBAAqB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming';\nimport { partNameMap } from '../common/util';\nimport { styles as indigo } from './styles/indigo/nav-drawer.indigo.css';\nimport { styles } from './styles/nav-drawer.base.css';\n\n/**\n * Represents a side navigation container that provides\n * quick access between views.\n *\n * @element igc-nav-drawer\n *\n * @slot - The default slot for the drawer.\n * @slot mini - The slot for the mini variant of the drawer.\n *\n * @csspart base - The base wrapper of the navigation drawer.\n * @csspart main - The main container.\n * @csspart mini - The mini container.\n */\n@themes({ indigo })\nexport default class IgcNavDrawerComponent extends LitElement {\n  public static readonly tagName = 'igc-nav-drawer';\n  public static override styles = styles;\n\n  /** The position of the drawer. */\n  @property({ reflect: true })\n  public position: 'start' | 'end' | 'top' | 'bottom' = 'start';\n\n  /** Determines whether the drawer is opened. */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /** Opens the drawer. */\n  public show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n  }\n\n  /** Closes the drawer. */\n  public hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  /** Toggles the open state of the drawer. */\n  public toggle() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  private resolvePartNames(base: string) {\n    const mini = document.querySelector('div[slot=\"mini\"]');\n    const hasChildren = mini !== null && mini.children.length > 0;\n\n    return {\n      [base]: true,\n      hidden: !hasChildren,\n    };\n  }\n\n  protected override render() {\n    return html` <div part=\"base\">\n      <div part=\"main\">\n        <slot></slot>\n      </div>\n\n      <div part=\"${partNameMap(this.resolvePartNames('mini'))}\">\n        <slot name=\"mini\"></slot>\n      </div>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-nav-drawer': IgcNavDrawerComponent;\n  }\n}\n"]}
+{"version":3,"file":"nav-drawer.js","sourceRoot":"","sources":["../../../src/components/nav-drawer/nav-drawer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAgBtD,IAAqB,qBAAqB,GAA1C,MAAqB,qBAAsB,SAAQ,UAAU;IAA7D;;QAMS,aAAQ,GAAoD,OAAO,CAAC;QAIpE,SAAI,GAAG,KAAK,CAAC;IAqDtB,CAAC;IAlDQ,IAAI;QACT,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAGM,IAAI;QACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAGM,MAAM;QACX,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;aAAM;YACL,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;IACH,CAAC;IAEO,gBAAgB,CAAC,IAAY;QACnC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACxD,MAAM,WAAW,GAAG,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QAE9D,OAAO;YACL,CAAC,IAAI,CAAC,EAAE,IAAI;YACZ,MAAM,EAAE,CAAC,WAAW;SACrB,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,IAAI;;;;;;qBAMvB,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;;;;KAI1D,CAAC;IACJ,CAAC;CACF,CAAA;AA9DwB,6BAAO,GAAG,gBAAiB,CAAA;AAC3B,4BAAM,GAAG,MAAO,CAAA;AAIvC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAC+C;AAI3E;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACvB;AAVD,qBAAqB;IADzC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;GACE,qBAAqB,CA+DzC;eA/DoB,qBAAqB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming';\nimport { partNameMap } from '../common/util';\nimport { styles as indigo } from './styles/indigo/nav-drawer.indigo.css';\nimport { styles } from './styles/nav-drawer.base.css';\n\n/**\n * Represents a side navigation container that provides\n * quick access between views.\n *\n * @element igc-nav-drawer\n *\n * @slot - The default slot for the drawer.\n * @slot mini - The slot for the mini variant of the drawer.\n *\n * @csspart base - The base wrapper of the navigation drawer.\n * @csspart main - The main container.\n * @csspart mini - The mini container.\n */\n@themes({ indigo })\nexport default class IgcNavDrawerComponent extends LitElement {\n  public static readonly tagName = 'igc-nav-drawer';\n  public static override styles = styles;\n\n  /** The position of the drawer. */\n  @property({ reflect: true })\n  public position: 'start' | 'end' | 'top' | 'bottom' | 'relative' = 'start';\n\n  /** Determines whether the drawer is opened. */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /** Opens the drawer. */\n  public show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n  }\n\n  /** Closes the drawer. */\n  public hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  /** Toggles the open state of the drawer. */\n  public toggle() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  private resolvePartNames(base: string) {\n    const mini = document.querySelector('div[slot=\"mini\"]');\n    const hasChildren = mini !== null && mini.children.length > 0;\n\n    return {\n      [base]: true,\n      hidden: !hasChildren,\n    };\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"overlay\" @click=${this.hide}></div>\n      <div part=\"base\">\n        <div part=\"main\">\n          <slot></slot>\n        </div>\n\n        <div part=\"${partNameMap(this.resolvePartNames('mini'))}\">\n          <slot name=\"mini\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-nav-drawer': IgcNavDrawerComponent;\n  }\n}\n"]}

package/components/nav-drawer/styles/nav-drawer.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{-ms-flex-negative:0;flex-shrink:0;font-family:var(--igc-font-family)}:host [part=base]{position:fixed;height:100%;min-height:100%;overflow-x:hidden;top:0;bottom:0;left:0;z-index:999;background:hsla(var(--igc-surface-500), var(--igc-surface-a));-webkit-border-end:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-end:1px solid hsla(var(--igc-gray-900), 0.14);-webkit-box-shadow:var(--igc-elevation-16);box-shadow:var(--igc-elevation-16);border-radius:0;-webkit-transition:all ease-out .3s,.3s;-o-transition:all ease-out .3s,.3s;transition:all ease-out .3s,.3s}:host [part=main]{width:16rem}:host [part=mini]{width:3.75rem}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;top:auto;width:100%}:host([position=top]) [part=base]{top:0;bottom:auto}:host(:not([open])[position=top]) [part=base],:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, -60vh, 0);transform:translate3d(0, -60vh, 0)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, 60vh, 0);transform:translate3d(0, 60vh, 0)}:host([position=end]) [part=base]{-webkit-border-end:none;border-inline-end:none;-webkit-border-start:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-start:1px solid hsla(var(--igc-gray-900), 0.14);left:auto;right:0}:host([open]) [part=mini]{display:none}:host(:not([open])) [part=main]{display:none}`;
+export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{-ms-flex-negative:0;flex-shrink:0;font-family:var(--igc-font-family)}:host [part=base]{position:fixed;height:100%;min-height:100%;overflow-x:hidden;top:0;bottom:0;inset-inline-start:0;z-index:999;background:hsla(var(--igc-surface-500), var(--igc-surface-a));border-radius:0;-webkit-transition:all ease-out .3s,.3s;-o-transition:all ease-out .3s,.3s;transition:all ease-out .3s,.3s}:host [part=main]{width:16rem}:host [part=mini]{width:3.75rem}:host [part=overlay]{background:hsla(var(--igc-gray-500), 0.54);position:fixed;inset:0;z-index:2}:host([position=start]) [part=mini],:host([position=end]) [part=mini]{background:hsla(var(--igc-surface-500), var(--igc-surface-a));-webkit-box-shadow:var(--igc-elevation-16);box-shadow:var(--igc-elevation-16);position:fixed;top:0;bottom:0}:host([position=start]) [part=mini]{-webkit-border-end:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-end:1px solid hsla(var(--igc-gray-900), 0.14);inset-inline-start:0}:host([position=end]) [part=mini]{-webkit-border-start:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-start:1px solid hsla(var(--igc-gray-900), 0.14);inset-inline-end:0}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;top:auto;width:100%}:host([position=top]) [part=base]{top:0;bottom:auto}:host(:not([open])[position=top]) [part=base],:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, -60vh, 0);transform:translate3d(0, -60vh, 0)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, 60vh, 0);transform:translate3d(0, 60vh, 0)}:host([open][position=end]) [part=base]{-webkit-border-end:none;border-inline-end:none;-webkit-border-start:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-start:1px solid hsla(var(--igc-gray-900), 0.14);inset-inline-start:auto;inset-inline-end:0}:host([position=relative]) [part=base]{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-shadow:none;box-shadow:none}:host([position=relative]) [part=overlay]{display:none}:host([open]) [part=mini]{display:none}:host([open]:not([position=relative])) [part=base]{-webkit-border-end:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-end:1px solid hsla(var(--igc-gray-900), 0.14);-webkit-box-shadow:var(--igc-elevation-16);box-shadow:var(--igc-elevation-16)}:host(:not([open])) [part=main]{display:none}:host(:not([open])) [part=overlay]{display:none}`;
 //# sourceMappingURL=nav-drawer.base.css.js.map

package/components/nav-drawer/styles/nav-drawer.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer.base.css.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/styles/nav-drawer.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,oyEAAoyE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{-ms-flex-negative:0;flex-shrink:0;font-family:var(--igc-font-family)}:host [part=base]{position:fixed;height:100%;min-height:100%;overflow-x:hidden;top:0;bottom:0;left:0;z-index:999;background:hsla(var(--igc-surface-500), var(--igc-surface-a));-webkit-border-end:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-end:1px solid hsla(var(--igc-gray-900), 0.14);-webkit-box-shadow:var(--igc-elevation-16);box-shadow:var(--igc-elevation-16);border-radius:0;-webkit-transition:all ease-out .3s,.3s;-o-transition:all ease-out .3s,.3s;transition:all ease-out .3s,.3s}:host [part=main]{width:16rem}:host [part=mini]{width:3.75rem}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;top:auto;width:100%}:host([position=top]) [part=base]{top:0;bottom:auto}:host(:not([open])[position=top]) [part=base],:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, -60vh, 0);transform:translate3d(0, -60vh, 0)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, 60vh, 0);transform:translate3d(0, 60vh, 0)}:host([position=end]) [part=base]{-webkit-border-end:none;border-inline-end:none;-webkit-border-start:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-start:1px solid hsla(var(--igc-gray-900), 0.14);left:auto;right:0}:host([open]) [part=mini]{display:none}:host(:not([open])) [part=main]{display:none}`;\n"]}
+{"version":3,"file":"nav-drawer.base.css.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/styles/nav-drawer.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,o0GAAo0G,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{-ms-flex-negative:0;flex-shrink:0;font-family:var(--igc-font-family)}:host [part=base]{position:fixed;height:100%;min-height:100%;overflow-x:hidden;top:0;bottom:0;inset-inline-start:0;z-index:999;background:hsla(var(--igc-surface-500), var(--igc-surface-a));border-radius:0;-webkit-transition:all ease-out .3s,.3s;-o-transition:all ease-out .3s,.3s;transition:all ease-out .3s,.3s}:host [part=main]{width:16rem}:host [part=mini]{width:3.75rem}:host [part=overlay]{background:hsla(var(--igc-gray-500), 0.54);position:fixed;inset:0;z-index:2}:host([position=start]) [part=mini],:host([position=end]) [part=mini]{background:hsla(var(--igc-surface-500), var(--igc-surface-a));-webkit-box-shadow:var(--igc-elevation-16);box-shadow:var(--igc-elevation-16);position:fixed;top:0;bottom:0}:host([position=start]) [part=mini]{-webkit-border-end:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-end:1px solid hsla(var(--igc-gray-900), 0.14);inset-inline-start:0}:host([position=end]) [part=mini]{-webkit-border-start:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-start:1px solid hsla(var(--igc-gray-900), 0.14);inset-inline-end:0}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;top:auto;width:100%}:host([position=top]) [part=base]{top:0;bottom:auto}:host(:not([open])[position=top]) [part=base],:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, -60vh, 0);transform:translate3d(0, -60vh, 0)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translate3d(0, 60vh, 0);transform:translate3d(0, 60vh, 0)}:host([open][position=end]) [part=base]{-webkit-border-end:none;border-inline-end:none;-webkit-border-start:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-start:1px solid hsla(var(--igc-gray-900), 0.14);inset-inline-start:auto;inset-inline-end:0}:host([position=relative]) [part=base]{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-shadow:none;box-shadow:none}:host([position=relative]) [part=overlay]{display:none}:host([open]) [part=mini]{display:none}:host([open]:not([position=relative])) [part=base]{-webkit-border-end:1px solid hsla(var(--igc-gray-900), 0.14);border-inline-end:1px solid hsla(var(--igc-gray-900), 0.14);-webkit-box-shadow:var(--igc-elevation-16);box-shadow:var(--igc-elevation-16)}:host(:not([open])) [part=main]{display:none}:host(:not([open])) [part=overlay]{display:none}`;\n"]}

package/custom-elements.json

@@ -1734,7 +1734,7 @@
         {
           "name": "items",
           "description": "All child `igc-dropdown-item`s.",
-          "type": "IgcDropDownItemComponent[]"
+          "type": "IgcDropdownItemComponent[]"
         }
       ],
       "slots": [
@@ -2732,7 +2732,7 @@
         {
           "name": "position",
           "description": "The position of the drawer.",
-          "type": "\"start\" | \"end\" | \"top\" | \"bottom\"",
+          "type": "\"start\" | \"end\" | \"top\" | \"bottom\" | \"relative\"",
           "default": "\"start\""
         },
         {
@@ -2757,7 +2757,7 @@
           "name": "position",
           "attribute": "position",
           "description": "The position of the drawer.",
-          "type": "\"start\" | \"end\" | \"top\" | \"bottom\"",
+          "type": "\"start\" | \"end\" | \"top\" | \"bottom\" | \"relative\"",
           "default": "\"start\""
         },
         {

package/index.d.ts

@@ -13,10 +13,10 @@ export { default as IgcCardHeaderComponent } from './components/card/card.header
 export { default as IgcCardMediaComponent } from './components/card/card.media';
 export { default as IgcCheckboxComponent } from './components/checkbox/checkbox';
 export { IgcCheckboxBaseComponent } from './components/checkbox/checkbox-base';
-export { default as IgcDropDownComponent } from './components/dropdown/dropdown';
-export { default as IgcDropDownGroupComponent } from './components/dropdown/dropdown-group';
-export { default as IgcDropDownHeaderComponent } from './components/dropdown/dropdown-header';
-export { default as IgcDropDownItemComponent } from './components/dropdown/dropdown-item';
+export { default as IgcDropdownComponent } from './components/dropdown/dropdown';
+export { default as IgcDropdownGroupComponent } from './components/dropdown/dropdown-group';
+export { default as IgcDropdownHeaderComponent } from './components/dropdown/dropdown-header';
+export { default as IgcDropdownItemComponent } from './components/dropdown/dropdown-item';
 export { default as IgcSwitchComponent } from './components/checkbox/switch';
 export { defineAllComponents } from './components/common/definitions/defineAllComponents';
 export { defineComponents } from './components/common/definitions/defineComponents';

package/index.js

@@ -13,10 +13,10 @@ export { default as IgcCardHeaderComponent } from './components/card/card.header
 export { default as IgcCardMediaComponent } from './components/card/card.media';
 export { default as IgcCheckboxComponent } from './components/checkbox/checkbox';
 export { IgcCheckboxBaseComponent } from './components/checkbox/checkbox-base';
-export { default as IgcDropDownComponent } from './components/dropdown/dropdown';
-export { default as IgcDropDownGroupComponent } from './components/dropdown/dropdown-group';
-export { default as IgcDropDownHeaderComponent } from './components/dropdown/dropdown-header';
-export { default as IgcDropDownItemComponent } from './components/dropdown/dropdown-item';
+export { default as IgcDropdownComponent } from './components/dropdown/dropdown';
+export { default as IgcDropdownGroupComponent } from './components/dropdown/dropdown-group';
+export { default as IgcDropdownHeaderComponent } from './components/dropdown/dropdown-header';
+export { default as IgcDropdownItemComponent } from './components/dropdown/dropdown-item';
 export { default as IgcSwitchComponent } from './components/checkbox/switch';
 export { defineAllComponents } from './components/common/definitions/defineAllComponents';
 export { defineComponents } from './components/common/definitions/defineComponents';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Components\n\nexport { default as IgcAvatarComponent } from './components/avatar/avatar';\nexport { default as IgcBadgeComponent } from './components/badge/badge';\nexport { default as IgcButtonComponent } from './components/button/button';\nexport { IgcButtonBaseComponent } from './components/button/button-base';\nexport { default as IgcIconButtonComponent } from './components/button/icon-button';\nexport { default as IgcCalendarComponent } from './components/calendar/calendar';\nexport { IgcCalendarBaseComponent } from './components/calendar/common/calendar-base';\nexport {\n  DateRangeDescriptor,\n  DateRangeType,\n} from './components/calendar/common/calendar.model';\nexport { default as IgcCardComponent } from './components/card/card';\nexport { default as IgcCardActionsComponent } from './components/card/card.actions';\nexport { default as IgcCardContentComponent } from './components/card/card.content';\nexport { default as IgcCardHeaderComponent } from './components/card/card.header';\nexport { default as IgcCardMediaComponent } from './components/card/card.media';\nexport { default as IgcCheckboxComponent } from './components/checkbox/checkbox';\nexport { IgcCheckboxBaseComponent } from './components/checkbox/checkbox-base';\nexport { default as IgcDropDownComponent } from './components/dropdown/dropdown';\nexport { default as IgcDropDownGroupComponent } from './components/dropdown/dropdown-group';\nexport { default as IgcDropDownHeaderComponent } from './components/dropdown/dropdown-header';\nexport { default as IgcDropDownItemComponent } from './components/dropdown/dropdown-item';\nexport { default as IgcSwitchComponent } from './components/checkbox/switch';\nexport { defineAllComponents } from './components/common/definitions/defineAllComponents';\nexport { defineComponents } from './components/common/definitions/defineComponents';\nexport { IgcCalendarResourceStrings } from './components/common/i18n/calendar.resources';\nexport { SizableMixin } from './components/common/mixins/sizable';\nexport { default as IgcChipComponent } from './components/chip/chip';\nexport { default as IgcCircularProgressComponent } from './components/progress/circular-progress';\nexport { default as IgcCircularGradientComponent } from './components/progress/circular-gradient';\nexport { default as IgcFormComponent } from './components/form/form';\nexport { default as IgcIconComponent } from './components/icon/icon';\n// utility stuff\nexport {\n  registerIcon,\n  registerIconFromText,\n} from './components/icon/icon.registry';\nexport { default as IgcInputComponent } from './components/input/input';\nexport { IgcInputBaseComponent } from './components/input/input-base';\nexport { default as IgcLinearProgressComponent } from './components/progress/linear-progress';\nexport { default as IgcListComponent } from './components/list/list';\nexport { default as IgcListHeaderComponent } from './components/list/list-header';\nexport { default as IgcListItemComponent } from './components/list/list-item';\nexport { default as IgcNavDrawerComponent } from './components/nav-drawer/nav-drawer';\nexport { default as IgcNavDrawerHeaderItemComponent } from './components/nav-drawer/nav-drawer-header-item';\nexport { default as IgcNavDrawerItemComponent } from './components/nav-drawer/nav-drawer-item';\nexport { default as IgcNavbarComponent } from './components/navbar/navbar';\nexport { default as IgcRadioGroupComponent } from './components/radio-group/radio-group';\nexport { default as IgcRadioComponent } from './components/radio/radio';\nexport { default as IgcRatingComponent } from './components/rating/rating';\nexport { default as IgcRatingSymbolComponent } from './components/rating/rating-symbol';\nexport { default as IgcRippleComponent } from './components/ripple/ripple';\nexport {\n  default as IgcRangeSliderComponent,\n  IgcRangeSliderValue,\n} from './components/slider/range-slider';\nexport { default as IgcSnackbarComponent } from './components/snackbar/snackbar';\nexport { default as IgcSliderComponent } from './components/slider/slider';\nexport { IgcSliderBaseComponent } from './components/slider/slider-base';\nexport { default as IgcSliderLabelComponent } from './components/slider/slider-label';\nexport { default as IgcToastComponent } from './components/toast/toast';\nexport { configureTheme } from './theming/config';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Components\n\nexport { default as IgcAvatarComponent } from './components/avatar/avatar';\nexport { default as IgcBadgeComponent } from './components/badge/badge';\nexport { default as IgcButtonComponent } from './components/button/button';\nexport { IgcButtonBaseComponent } from './components/button/button-base';\nexport { default as IgcIconButtonComponent } from './components/button/icon-button';\nexport { default as IgcCalendarComponent } from './components/calendar/calendar';\nexport { IgcCalendarBaseComponent } from './components/calendar/common/calendar-base';\nexport {\n  DateRangeDescriptor,\n  DateRangeType,\n} from './components/calendar/common/calendar.model';\nexport { default as IgcCardComponent } from './components/card/card';\nexport { default as IgcCardActionsComponent } from './components/card/card.actions';\nexport { default as IgcCardContentComponent } from './components/card/card.content';\nexport { default as IgcCardHeaderComponent } from './components/card/card.header';\nexport { default as IgcCardMediaComponent } from './components/card/card.media';\nexport { default as IgcCheckboxComponent } from './components/checkbox/checkbox';\nexport { IgcCheckboxBaseComponent } from './components/checkbox/checkbox-base';\nexport { default as IgcDropdownComponent } from './components/dropdown/dropdown';\nexport { default as IgcDropdownGroupComponent } from './components/dropdown/dropdown-group';\nexport { default as IgcDropdownHeaderComponent } from './components/dropdown/dropdown-header';\nexport { default as IgcDropdownItemComponent } from './components/dropdown/dropdown-item';\nexport { default as IgcSwitchComponent } from './components/checkbox/switch';\nexport { defineAllComponents } from './components/common/definitions/defineAllComponents';\nexport { defineComponents } from './components/common/definitions/defineComponents';\nexport { IgcCalendarResourceStrings } from './components/common/i18n/calendar.resources';\nexport { SizableMixin } from './components/common/mixins/sizable';\nexport { default as IgcChipComponent } from './components/chip/chip';\nexport { default as IgcCircularProgressComponent } from './components/progress/circular-progress';\nexport { default as IgcCircularGradientComponent } from './components/progress/circular-gradient';\nexport { default as IgcFormComponent } from './components/form/form';\nexport { default as IgcIconComponent } from './components/icon/icon';\n// utility stuff\nexport {\n  registerIcon,\n  registerIconFromText,\n} from './components/icon/icon.registry';\nexport { default as IgcInputComponent } from './components/input/input';\nexport { IgcInputBaseComponent } from './components/input/input-base';\nexport { default as IgcLinearProgressComponent } from './components/progress/linear-progress';\nexport { default as IgcListComponent } from './components/list/list';\nexport { default as IgcListHeaderComponent } from './components/list/list-header';\nexport { default as IgcListItemComponent } from './components/list/list-item';\nexport { default as IgcNavDrawerComponent } from './components/nav-drawer/nav-drawer';\nexport { default as IgcNavDrawerHeaderItemComponent } from './components/nav-drawer/nav-drawer-header-item';\nexport { default as IgcNavDrawerItemComponent } from './components/nav-drawer/nav-drawer-item';\nexport { default as IgcNavbarComponent } from './components/navbar/navbar';\nexport { default as IgcRadioGroupComponent } from './components/radio-group/radio-group';\nexport { default as IgcRadioComponent } from './components/radio/radio';\nexport { default as IgcRatingComponent } from './components/rating/rating';\nexport { default as IgcRatingSymbolComponent } from './components/rating/rating-symbol';\nexport { default as IgcRippleComponent } from './components/ripple/ripple';\nexport {\n  default as IgcRangeSliderComponent,\n  IgcRangeSliderValue,\n} from './components/slider/range-slider';\nexport { default as IgcSnackbarComponent } from './components/snackbar/snackbar';\nexport { default as IgcSliderComponent } from './components/slider/slider';\nexport { IgcSliderBaseComponent } from './components/slider/slider-base';\nexport { default as IgcSliderLabelComponent } from './components/slider/slider-label';\nexport { default as IgcToastComponent } from './components/toast/toast';\nexport { configureTheme } from './theming/config';\n"]}

package/package.json

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

package/vscode-html-custom-data.json

@@ -802,7 +802,7 @@
     },
     {
       "name": "igc-dropdown-group",
-      "description": "Slots:\n\n  * `label` {} - Contains the group's label.\n\n  * ` ` {} - Intended to contain the items belonging to this group.\n\nAttributes:\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - \n\nProperties:\n\n  * `tagName` {`\"igc-dropdown-group\"`} - \n\n  * `styles` {`CSSResult`} - \n\n  * `items` {`IgcDropDownItemComponent[]`} - All child `igc-dropdown-item`s.\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - ",
+      "description": "Slots:\n\n  * `label` {} - Contains the group's label.\n\n  * ` ` {} - Intended to contain the items belonging to this group.\n\nAttributes:\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - \n\nProperties:\n\n  * `tagName` {`\"igc-dropdown-group\"`} - \n\n  * `styles` {`CSSResult`} - \n\n  * `items` {`IgcDropdownItemComponent[]`} - All child `igc-dropdown-item`s.\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - ",
       "attributes": [
         {
           "name": "size",
@@ -853,7 +853,7 @@
     },
     {
       "name": "igc-dropdown",
-      "description": "Represents a DropDown component.\n\nEvents:\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  * `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  * `tagName` {`\"igc-dropdown\"`} - \n\n  * `styles` {`CSSResult`} - \n\n  * `selectedItem` {`IgcDropDownItemComponent | null`} - \n\n  * `activeItem` {`IgcDropDownItemComponent`} - \n\n  * `target` {`HTMLElement`} - \n\n  * `allItems` {`IgcDropDownItemComponent[]`} - \n\n  * `targetNodes` {`HTMLElement[]`} - \n\n  * `content` {`HTMLElement`} - \n\n  * `scrollContainer` {`HTMLElement`} - \n\n  * `items` {`IgcDropDownItemComponent[]`} - \n\n  * `groups` {`IgcDropDownGroupComponent[]`} - \n\n  * `keepOpenOnSelect` {`boolean`} - Whether the dropdown should be kept open on selection.\n\n  * `handleKeyDown` - \n\n  * `handleTargetClick` - \n\n  * `toggleController` {`IgcToggleController`} - \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": "Represents a DropDown component.\n\nEvents:\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  * `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  * `tagName` {`\"igc-dropdown\"`} - \n\n  * `styles` {`CSSResult`} - \n\n  * `selectedItem` {`IgcDropdownItemComponent | null`} - \n\n  * `activeItem` {`IgcDropdownItemComponent`} - \n\n  * `target` {`HTMLElement`} - \n\n  * `allItems` {`IgcDropdownItemComponent[]`} - \n\n  * `targetNodes` {`HTMLElement[]`} - \n\n  * `content` {`HTMLElement`} - \n\n  * `scrollContainer` {`HTMLElement`} - \n\n  * `items` {`IgcDropdownItemComponent[]`} - \n\n  * `groups` {`IgcDropdownGroupComponent[]`} - \n\n  * `keepOpenOnSelect` {`boolean`} - Whether the dropdown should be kept open on selection.\n\n  * `handleKeyDown` - \n\n  * `handleTargetClick` - \n\n  * `toggleController` {`IgcToggleController`} - \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": "keep-open-on-select",
@@ -1034,7 +1034,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  * `dir` {`Direction`} - The direction attribute of the control.\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  * `value` {`string`} - The value attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - \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  * `dir` {`Direction`} - The direction attribute of the control.\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  * `shadowRootOptions` {`{ delegatesFocus: boolean; mode: ShadowRootMode; customElements?: CustomElementRegistry | undefined; }`} - \n\n  * `styles` {`CSSResult`} - \n\n  * `inputId` {`string`} - \n\n  * `value` {`string`} - The value attribute of the control.\n\n  * `input` {`HTMLInputElement`} - \n\n  * `prefixes` {`HTMLElement[]`} - \n\n  * `suffixes` {`HTMLElement[]`} - \n\n  * `themeController` {`ThemeController`} - \n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - \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  * `dir` {`Direction`} - The direction attribute of the control.\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  * `value` {`string`} - The value attribute of the control.\n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - \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  * `dir` {`Direction`} - The direction attribute of the control.\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  * `shadowRootOptions` {`{ delegatesFocus: boolean; mode: ShadowRootMode; slotAssignment?: SlotAssignmentMode | undefined; customElements?: CustomElementRegistry | undefined; }`} - \n\n  * `styles` {`CSSResult`} - \n\n  * `inputId` {`string`} - \n\n  * `value` {`string`} - The value attribute of the control.\n\n  * `input` {`HTMLInputElement`} - \n\n  * `prefixes` {`HTMLElement[]`} - \n\n  * `suffixes` {`HTMLElement[]`} - \n\n  * `themeController` {`ThemeController`} - \n\n  * `name` {`string`} - The name attribute of the control.\n\n  * `outlined` {`boolean`} - \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": "dir",
@@ -1260,11 +1260,11 @@
     },
     {
       "name": "igc-nav-drawer",
-      "description": "Represents a side navigation container that provides\nquick access between views.\n\nSlots:\n\n  * ` ` {} - The default slot for the drawer.\n\n  * `mini` {} - The slot for the mini variant of the drawer.\n\nAttributes:\n\n  * `position` {`\"top\" | \"bottom\" | \"start\" | \"end\"`} - The position of the drawer.\n\n  * `open` {`boolean`} - Determines whether the drawer is opened.\n\nProperties:\n\n  * `tagName` {`\"igc-nav-drawer\"`} - \n\n  * `styles` {`CSSResult`} - \n\n  * `position` {`\"top\" | \"bottom\" | \"start\" | \"end\"`} - The position of the drawer.\n\n  * `open` {`boolean`} - Determines whether the drawer is opened.",
+      "description": "Represents a side navigation container that provides\nquick access between views.\n\nSlots:\n\n  * ` ` {} - The default slot for the drawer.\n\n  * `mini` {} - The slot for the mini variant of the drawer.\n\nAttributes:\n\n  * `position` {`\"top\" | \"bottom\" | \"start\" | \"end\" | \"relative\"`} - The position of the drawer.\n\n  * `open` {`boolean`} - Determines whether the drawer is opened.\n\nProperties:\n\n  * `tagName` {`\"igc-nav-drawer\"`} - \n\n  * `styles` {`CSSResult`} - \n\n  * `position` {`\"top\" | \"bottom\" | \"start\" | \"end\" | \"relative\"`} - The position of the drawer.\n\n  * `open` {`boolean`} - Determines whether the drawer is opened.",
       "attributes": [
         {
           "name": "position",
-          "description": "`position` {`\"top\" | \"bottom\" | \"start\" | \"end\"`} - The position of the drawer.\n\nProperty: position\n\nDefault: start",
+          "description": "`position` {`\"top\" | \"bottom\" | \"start\" | \"end\" | \"relative\"`} - The position of the drawer.\n\nProperty: position\n\nDefault: start",
           "values": [
             {
               "name": "top"
@@ -1277,6 +1277,9 @@
             },
             {
               "name": "end"
+            },
+            {
+              "name": "relative"
             }
           ]
         },