igniteui-webcomponents 4.5.0-beta.1 → 4.5.0

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

@@ -7,11 +7,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { property, queryAssignedElements, queryAssignedNodes, state, } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
+import { registerComponent } from '../common/definitions/register.js';
 import { partNameMap } from '../common/util.js';
 import { styles } from './themes/light/item/nav-drawer-item.base.css.js';
+import { styles as bootstrap } from './themes/light/item/nav-drawer-item.bootstrap.css.js';
 import { styles as fluent } from './themes/light/item/nav-drawer-item.fluent.css.js';
 import { styles as indigo } from './themes/light/item/nav-drawer-item.indigo.css.js';
-import { styles as bootstrap } from './themes/light/item/nav-drawer-item.bootstrap.css.js';
 import { styles as material } from './themes/light/item/nav-drawer-item.material.css.js';
 let IgcNavDrawerItemComponent = class IgcNavDrawerItemComponent extends LitElement {
     constructor() {
@@ -19,6 +20,9 @@ let IgcNavDrawerItemComponent = class IgcNavDrawerItemComponent extends LitEleme
         this.disabled = false;
         this.active = false;
     }
+    static register() {
+        registerComponent(this);
+    }
     connectedCallback() {
         var _a;
         super.connectedCallback();
@@ -63,7 +67,10 @@ __decorate([
     queryAssignedNodes({ slot: 'icon', flatten: true })
 ], IgcNavDrawerItemComponent.prototype, "navdrawerIcon", void 0);
 IgcNavDrawerItemComponent = __decorate([
-    themes({ fluent, indigo, bootstrap, material })
+    themes({
+        light: { fluent, indigo, bootstrap, material },
+        dark: { fluent, indigo, bootstrap, material },
+    })
 ], IgcNavDrawerItemComponent);
 export default IgcNavDrawerItemComponent;
 //# sourceMappingURL=nav-drawer-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer-item.js","sourceRoot":"","sources":["../../../src/components/nav-drawer/nav-drawer-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EACL,QAAQ,EACR,qBAAqB,EACrB,kBAAkB,EAClB,KAAK,GACN,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,iDAAiD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,mDAAmD,CAAC;AACrF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,mDAAmD,CAAC;AACrF,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,qDAAqD,CAAC;AAezF,IAAqB,yBAAyB,GAA9C,MAAqB,yBAA0B,SAAQ,UAAU;IAAjE;;QASS,aAAQ,GAAG,KAAK,CAAC;QAOjB,WAAM,GAAG,KAAK,CAAC;IAqCxB,CAAC;IA1BiB,iBAAiB;;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAA,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YACpD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QACvC,CAAC,CAAC,CAAC;IACL,CAAC;IAES,gBAAgB,CAAC,IAAY;QACrC,OAAO;YACL,CAAC,IAAI,CAAC,EAAE,IAAI;YACZ,IAAI,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC;SAC3B,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;mBACI,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;qCACxB,IAAI,CAAC,aAAa,CAAC,MAAM,IAAI,CAAC;;;;;;;KAO9D,CAAC;IACJ,CAAC;;AAnDsB,iCAAO,GAAG,qBAAqB,AAAxB,CAAyB;AAChC,gCAAM,GAAG,MAAM,AAAT,CAAU;AAOhC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACrB;AAGd;IADP,KAAK,EAAE;8DACqB;AAGrB;IADP,qBAAqB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wDACR;AAGzB;IADT,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gEACd;AAzBnB,yBAAyB;IAD7C,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;GAC3B,yBAAyB,CAqD7C;eArDoB,yBAAyB","sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  property,\n  queryAssignedElements,\n  queryAssignedNodes,\n  state,\n} from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { partNameMap } from '../common/util.js';\nimport { styles } from './themes/light/item/nav-drawer-item.base.css.js';\nimport { styles as fluent } from './themes/light/item/nav-drawer-item.fluent.css.js';\nimport { styles as indigo } from './themes/light/item/nav-drawer-item.indigo.css.js';\nimport { styles as bootstrap } from './themes/light/item/nav-drawer-item.bootstrap.css.js';\nimport { styles as material } from './themes/light/item/nav-drawer-item.material.css.js';\n\n/**\n * Represents a navigation drawer item.\n *\n * @element igc-nav-drawer-item\n *\n * @slot content - The content slot for the drawer item.\n * @slot icon - The slot for the icon of the drawer item.\n *\n * @csspart base - The base wrapper of the drawer item.\n * @csspart icon - The icon container.\n * @csspart content - The content container.\n */\n@themes({ fluent, indigo, bootstrap, material })\nexport default class IgcNavDrawerItemComponent extends LitElement {\n  public static readonly tagName = 'igc-nav-drawer-item';\n  public static override styles = styles;\n\n  /**\n   * Determines whether the drawer is disabled.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Determines whether the drawer is active.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  @state()\n  private _textLength!: number;\n\n  @queryAssignedElements({ slot: 'content' })\n  private _text!: Array<HTMLElement>;\n\n  @queryAssignedNodes({ slot: 'icon', flatten: true })\n  protected navdrawerIcon!: Array<Node>;\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.shadowRoot?.addEventListener('slotchange', (_) => {\n      this._textLength = this._text.length;\n    });\n  }\n\n  protected resolvePartNames(base: string) {\n    return {\n      [base]: true,\n      mini: this._textLength < 1,\n    };\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"${partNameMap(this.resolvePartNames('base'))}\">\n        <span part=\"icon\" .hidden=\"${this.navdrawerIcon.length == 0}\">\n          <slot name=\"icon\"></slot>\n        </span>\n        <span part=\"content\">\n          <slot name=\"content\"></slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-nav-drawer-item': IgcNavDrawerItemComponent;\n  }\n}\n"]}
+{"version":3,"file":"nav-drawer-item.js","sourceRoot":"","sources":["../../../src/components/nav-drawer/nav-drawer-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EACL,QAAQ,EACR,qBAAqB,EACrB,kBAAkB,EAClB,KAAK,GACN,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,iDAAiD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,mDAAmD,CAAC;AACrF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,mDAAmD,CAAC;AACrF,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,qDAAqD,CAAC;AAkBzF,IAAqB,yBAAyB,GAA9C,MAAqB,yBAA0B,SAAQ,UAAU;IAAjE;;QAaS,aAAQ,GAAG,KAAK,CAAC;QAOjB,WAAM,GAAG,KAAK,CAAC;IAqCxB,CAAC;IArDQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAyBe,iBAAiB;;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAA,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YACpD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QACvC,CAAC,CAAC,CAAC;IACL,CAAC;IAES,gBAAgB,CAAC,IAAY;QACrC,OAAO;YACL,CAAC,IAAI,CAAC,EAAE,IAAI;YACZ,IAAI,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC;SAC3B,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;mBACI,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;qCACxB,IAAI,CAAC,aAAa,CAAC,MAAM,IAAI,CAAC;;;;;;;KAO9D,CAAC;IACJ,CAAC;;AAvDsB,iCAAO,GAAG,qBAAqB,AAAxB,CAAyB;AAChC,gCAAM,GAAG,MAAM,AAAT,CAAU;AAWhC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACrB;AAGd;IADP,KAAK,EAAE;8DACqB;AAGrB;IADP,qBAAqB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wDACR;AAGzB;IADT,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gEACd;AA7BnB,yBAAyB;IAJ7C,MAAM,CAAC;QACN,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE;QAC9C,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE;KAC9C,CAAC;GACmB,yBAAyB,CAyD7C;eAzDoB,yBAAyB","sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  property,\n  queryAssignedElements,\n  queryAssignedNodes,\n  state,\n} from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partNameMap } from '../common/util.js';\nimport { styles } from './themes/light/item/nav-drawer-item.base.css.js';\nimport { styles as bootstrap } from './themes/light/item/nav-drawer-item.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/item/nav-drawer-item.fluent.css.js';\nimport { styles as indigo } from './themes/light/item/nav-drawer-item.indigo.css.js';\nimport { styles as material } from './themes/light/item/nav-drawer-item.material.css.js';\n\n/**\n * Represents a navigation drawer item.\n *\n * @element igc-nav-drawer-item\n *\n * @slot content - The content slot for the drawer item.\n * @slot icon - The slot for the icon of the drawer item.\n *\n * @csspart base - The base wrapper of the drawer item.\n * @csspart icon - The icon container.\n * @csspart content - The content container.\n */\n@themes({\n  light: { fluent, indigo, bootstrap, material },\n  dark: { fluent, indigo, bootstrap, material },\n})\nexport default class IgcNavDrawerItemComponent extends LitElement {\n  public static readonly tagName = 'igc-nav-drawer-item';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  /**\n   * Determines whether the drawer is disabled.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Determines whether the drawer is active.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  @state()\n  private _textLength!: number;\n\n  @queryAssignedElements({ slot: 'content' })\n  private _text!: Array<HTMLElement>;\n\n  @queryAssignedNodes({ slot: 'icon', flatten: true })\n  protected navdrawerIcon!: Array<Node>;\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.shadowRoot?.addEventListener('slotchange', (_) => {\n      this._textLength = this._text.length;\n    });\n  }\n\n  protected resolvePartNames(base: string) {\n    return {\n      [base]: true,\n      mini: this._textLength < 1,\n    };\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"${partNameMap(this.resolvePartNames('base'))}\">\n        <span part=\"icon\" .hidden=\"${this.navdrawerIcon.length == 0}\">\n          <slot name=\"icon\"></slot>\n        </span>\n        <span part=\"content\">\n          <slot name=\"content\"></slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-nav-drawer-item': IgcNavDrawerItemComponent;\n  }\n}\n"]}

package/components/nav-drawer/nav-drawer.d.ts

@@ -15,6 +15,7 @@ import { LitElement } from 'lit';
 export default class IgcNavDrawerComponent extends LitElement {
     static readonly tagName = "igc-nav-drawer";
     static styles: import("lit").CSSResult;
+    static register(): void;
     /**
      * The position of the drawer.
      * @attr

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

@@ -7,22 +7,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
+import { registerComponent } from '../common/definitions/register.js';
 import { partNameMap } from '../common/util.js';
+import IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';
+import IgcNavDrawerItemComponent from './nav-drawer-item.js';
 import { styles } from './themes/light/nav-drawer.base.css.js';
+import { styles as bootstrap } from './themes/light/nav-drawer.bootstrap.css.js';
+import { styles as fluent } from './themes/light/nav-drawer.fluent.css.js';
 import { styles as indigo } from './themes/light/nav-drawer.indigo.css.js';
 import { styles as material } from './themes/light/nav-drawer.material.css.js';
-import { styles as fluent } from './themes/light/nav-drawer.fluent.css.js';
-import { styles as bootstrap } from './themes/light/nav-drawer.bootstrap.css.js';
-import { defineComponents } from '../common/definitions/defineComponents.js';
-import IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';
-import IgcNavDrawerItemComponent from './nav-drawer-item.js';
-defineComponents(IgcNavDrawerHeaderItemComponent, IgcNavDrawerItemComponent);
 let IgcNavDrawerComponent = class IgcNavDrawerComponent extends LitElement {
     constructor() {
         super(...arguments);
         this.position = 'start';
         this.open = false;
     }
+    static register() {
+        registerComponent(this, IgcNavDrawerHeaderItemComponent, IgcNavDrawerItemComponent);
+    }
     show() {
         if (this.open) {
             return;
@@ -54,14 +56,15 @@ let IgcNavDrawerComponent = class IgcNavDrawerComponent extends LitElement {
     render() {
         return html `
       <div part="overlay" @click=${this.hide}></div>
+
       <div part="base">
         <div part="main">
           <slot></slot>
         </div>
+      </div>
 
-        <div part="${partNameMap(this.resolvePartNames('mini'))}">
-          <slot name="mini"></slot>
-        </div>
+      <div part="${partNameMap(this.resolvePartNames('mini'))}">
+        <slot name="mini"></slot>
       </div>
     `;
     }
@@ -75,7 +78,10 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcNavDrawerComponent.prototype, "open", void 0);
 IgcNavDrawerComponent = __decorate([
-    themes({ indigo, material, fluent, bootstrap })
+    themes({
+        light: { indigo, material, fluent, bootstrap },
+        dark: { indigo, material, fluent, bootstrap },
+    })
 ], IgcNavDrawerComponent);
 export default IgcNavDrawerComponent;
 //# sourceMappingURL=nav-drawer.js.map

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,oCAAoC,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,+BAA+B,MAAM,6BAA6B,CAAC;AAC1E,OAAO,yBAAyB,MAAM,sBAAsB,CAAC;AAE7D,gBAAgB,CAAC,+BAA+B,EAAE,yBAAyB,CAAC,CAAC;AAgB7E,IAAqB,qBAAqB,GAA1C,MAAqB,qBAAsB,SAAQ,UAAU;IAA7D;;QASS,aAAQ,GAAoD,OAAO,CAAC;QAOpE,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;;AAnEsB,6BAAO,GAAG,gBAAgB,AAAnB,CAAoB;AAC3B,4BAAM,GAAG,MAAM,AAAT,CAAU;AAOhC;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAC+C;AAOpE;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACvB;AAhBD,qBAAqB;IADzC,MAAM,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;GAC3B,qBAAqB,CAqEzC;eArEoB,qBAAqB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { partNameMap } from '../common/util.js';\nimport { styles } from './themes/light/nav-drawer.base.css.js';\nimport { styles as indigo } from './themes/light/nav-drawer.indigo.css.js';\nimport { styles as material } from './themes/light/nav-drawer.material.css.js';\nimport { styles as fluent } from './themes/light/nav-drawer.fluent.css.js';\nimport { styles as bootstrap } from './themes/light/nav-drawer.bootstrap.css.js';\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';\nimport IgcNavDrawerItemComponent from './nav-drawer-item.js';\n\ndefineComponents(IgcNavDrawerHeaderItemComponent, IgcNavDrawerItemComponent);\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, material, fluent, bootstrap })\nexport default class IgcNavDrawerComponent extends LitElement {\n  public static readonly tagName = 'igc-nav-drawer';\n  public static override styles = styles;\n\n  /**\n   * The position of the drawer.\n   * @attr\n   */\n  @property({ reflect: true })\n  public position: 'start' | 'end' | 'top' | 'bottom' | 'relative' = 'start';\n\n  /**\n   * Determines whether the drawer is opened.\n   * @attr\n   */\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"]}
+{"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,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,+BAA+B,MAAM,6BAA6B,CAAC;AAC1E,OAAO,yBAAyB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAmB/E,IAAqB,qBAAqB,GAA1C,MAAqB,qBAAsB,SAAQ,UAAU;IAA7D;;QAiBS,aAAQ,GAAoD,OAAO,CAAC;QAOpE,SAAI,GAAG,KAAK,CAAC;IAsDtB,CAAC;IA1EQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,IAAI,EACJ,+BAA+B,EAC/B,yBAAyB,CAC1B,CAAC;IACJ,CAAC;IAiBM,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;;;;;;;;mBAQzB,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;;;KAGxD,CAAC;IACJ,CAAC;;AA5EsB,6BAAO,GAAG,gBAAgB,AAAnB,CAAoB;AAC3B,4BAAM,GAAG,MAAM,AAAT,CAAU;AAehC;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAC+C;AAOpE;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACvB;AAxBD,qBAAqB;IAJzC,MAAM,CAAC;QACN,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE;QAC9C,IAAI,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE;KAC9C,CAAC;GACmB,qBAAqB,CA8EzC;eA9EoB,qBAAqB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partNameMap } from '../common/util.js';\nimport IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';\nimport IgcNavDrawerItemComponent from './nav-drawer-item.js';\nimport { styles } from './themes/light/nav-drawer.base.css.js';\nimport { styles as bootstrap } from './themes/light/nav-drawer.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/nav-drawer.fluent.css.js';\nimport { styles as indigo } from './themes/light/nav-drawer.indigo.css.js';\nimport { styles as material } from './themes/light/nav-drawer.material.css.js';\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({\n  light: { indigo, material, fluent, bootstrap },\n  dark: { indigo, material, fluent, bootstrap },\n})\nexport default class IgcNavDrawerComponent extends LitElement {\n  public static readonly tagName = 'igc-nav-drawer';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(\n      this,\n      IgcNavDrawerHeaderItemComponent,\n      IgcNavDrawerItemComponent\n    );\n  }\n\n  /**\n   * The position of the drawer.\n   * @attr\n   */\n  @property({ reflect: true })\n  public position: 'start' | 'end' | 'top' | 'bottom' | 'relative' = 'start';\n\n  /**\n   * Determines whether the drawer is opened.\n   * @attr\n   */\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\n      <div part=\"base\">\n        <div part=\"main\">\n          <slot></slot>\n        </div>\n      </div>\n\n      <div part=\"${partNameMap(this.resolvePartNames('mini'))}\">\n        <slot name=\"mini\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-nav-drawer': IgcNavDrawerComponent;\n  }\n}\n"]}

package/components/nav-drawer/themes/light/nav-drawer.base.css.js

@@ -46,51 +46,60 @@ export const styles = css `:host {
   --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
   --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
+  --menu-full-width: 16rem;
+  --menu-mini-width: 3.75rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   -ms-flex-negative: 0;
       flex-shrink: 0;
   font-family: var(--ig-font-family);
 }
-:host [part=base] {
+:host [part=base],
+:host [part~=mini] {
+  --ig-scrollbar-size: rem(8px);
   position: fixed;
   height: 100%;
   min-height: 100%;
   overflow-x: hidden;
-  top: 0;
-  bottom: 0;
-  inset-inline-start: 0;
+  inset-block: 0;
   z-index: 999;
-  -webkit-transition: all ease-out 0.3s, 0.3s;
-  transition: all ease-out 0.3s, 0.3s;
+  -webkit-transition: 0.3s, -webkit-transform ease-out 0.3s;
+  transition: 0.3s, -webkit-transform ease-out 0.3s;
+  transition: transform ease-out 0.3s, 0.3s;
+  transition: transform ease-out 0.3s, 0.3s, -webkit-transform ease-out 0.3s;
 }
-:host [part=main] {
-  width: 16rem;
+:host [part~=mini] {
+  min-width: var(--menu-mini-width);
 }
-:host [part=mini] {
-  width: 3.75rem;
+:host [part=main] {
+  width: var(--menu-full-width);
 }
 :host [part=overlay] {
   position: fixed;
   inset: 0;
   z-index: 2;
+  opacity: 1;
+  -webkit-transition: opacity ease-out 0.3s, 0.3s;
+  transition: opacity ease-out 0.3s, 0.3s;
 }
 
-:host([position=start]) [part=mini],
-:host([position=end]) [part=mini] {
-  position: fixed;
-  top: 0;
-  bottom: 0;
+:host([position=relative]) [part=base] {
+  position: relative;
+  width: var(--menu-full-width);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  z-index: initial;
+  border-inline-end-style: solid;
+  border-inline-end-width: 0.0625rem;
 }
-
-:host([position=start]) [part=mini] {
+:host([position=relative]) [part~=mini] {
+  position: relative;
   border-inline-end-style: solid;
   border-inline-end-width: 0.0625rem;
-  inset-inline-start: 0;
 }
-
-:host([position=end]) [part=mini] {
-  border-inline-start-style: solid;
-  border-inline-start-width: 0.0625rem;
-  inset-inline-end: 0;
+:host([position=relative]) [part=overlay] {
+  display: none;
 }
 
 :host([position=top]) [part=main],
@@ -101,8 +110,8 @@ export const styles = css `:host {
 :host([position=bottom]) [part=base] {
   height: 50vh;
   min-height: initial;
-  top: auto;
   width: 100%;
+  inset-inline: 0;
 }
 
 :host([position=top]) [part=base] {
@@ -110,10 +119,45 @@ export const styles = css `:host {
   bottom: auto;
 }
 
+:host([position=bottom]) [part=base] {
+  top: auto;
+  bottom: 0;
+}
+
+:host([position=start]) [part=base],
+:host([position=start]) [part~=mini] {
+  inset-inline-start: 0;
+  border-inline-end-style: solid;
+  border-inline-end-width: 0.0625rem;
+}
+
+:host([position=end]) [part=base],
+:host([position=end]) [part~=mini] {
+  inset-inline-end: 0;
+  border-inline-start-style: solid;
+  border-inline-start-width: 0.0625rem;
+}
+
+:host(:not([open])[position=start]),
+:host([dir=rtl]:not([open])[position=end]) {
+  --dir: calc(var(--ig-dir, 1) * -1);
+}
+
+:host(:not([open])[position=end]),
+:host([dir=rtl]:not([open])[position=start]) {
+  --dir: calc(var(--ig-dir, 1) * 1);
+}
+
+:host(:not([open])[position=relative]) [part=base] {
+  -webkit-margin-start: calc(var(--menu-full-width) * -1);
+          margin-inline-start: calc(var(--menu-full-width) * -1);
+}
+
 :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);
+  -webkit-transform: translateY(-60vh);
+      -ms-transform: translateY(-60vh);
+          transform: translateY(-60vh);
 }
 :host(:not([open])[position=top]) [part=mini],
 :host(:not([open])[position=bottom]) [part=mini] {
@@ -121,8 +165,9 @@ export const styles = css `:host {
 }
 
 :host(:not([open])[position=bottom]) [part=base] {
-  -webkit-transform: translate3d(0, 60vh, 0);
-          transform: translate3d(0, 60vh, 0);
+  -webkit-transform: translateY(60vh);
+      -ms-transform: translateY(60vh);
+          transform: translateY(60vh);
 }
 
 :host([open][position=end]) [part=base] {
@@ -130,23 +175,6 @@ export const styles = css `:host {
           border-inline-end: none;
   border-inline-start-style: solid;
   border-inline-start-width: 0.0625rem;
-  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;
-  z-index: initial;
-  border-inline-end-style: solid;
-  border-inline-end-width: 0.0625rem;
-}
-:host([position=relative]) [part=overlay] {
-  display: none;
 }
 
 :host([open]) [part=mini] {
@@ -158,10 +186,13 @@ export const styles = css `:host {
   border-inline-end-width: 0.0625rem;
 }
 
-:host(:not([open])) [part=main] {
-  display: none;
+:host(:not([open])) [part=base] {
+  -webkit-transform: translateX(calc(100% * var(--dir)));
+      -ms-transform: translateX(calc(100% * var(--dir)));
+          transform: translateX(calc(100% * var(--dir)));
 }
 :host(:not([open])) [part=overlay] {
-  display: none;
+  pointer-events: none;
+  opacity: 0;
 }`;
 //# sourceMappingURL=nav-drawer.base.css.js.map

package/components/nav-drawer/themes/light/nav-drawer.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer.base.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoKvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  font-family: var(--ig-font-family);\n}\n:host [part=base] {\n  position: fixed;\n  height: 100%;\n  min-height: 100%;\n  overflow-x: hidden;\n  top: 0;\n  bottom: 0;\n  inset-inline-start: 0;\n  z-index: 999;\n  -webkit-transition: all ease-out 0.3s, 0.3s;\n  transition: all ease-out 0.3s, 0.3s;\n}\n:host [part=main] {\n  width: 16rem;\n}\n:host [part=mini] {\n  width: 3.75rem;\n}\n:host [part=overlay] {\n  position: fixed;\n  inset: 0;\n  z-index: 2;\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n}\n\n:host([position=start]) [part=mini] {\n  border-inline-end-style: solid;\n  border-inline-end-width: 0.0625rem;\n  inset-inline-start: 0;\n}\n\n:host([position=end]) [part=mini] {\n  border-inline-start-style: solid;\n  border-inline-start-width: 0.0625rem;\n  inset-inline-end: 0;\n}\n\n:host([position=top]) [part=main],\n:host([position=bottom]) [part=main] {\n  width: 100%;\n}\n:host([position=top]) [part=base],\n:host([position=bottom]) [part=base] {\n  height: 50vh;\n  min-height: initial;\n  top: auto;\n  width: 100%;\n}\n\n:host([position=top]) [part=base] {\n  top: 0;\n  bottom: auto;\n}\n\n:host(:not([open])[position=top]) [part=base],\n:host(:not([open])[position=bottom]) [part=base] {\n  -webkit-transform: translate3d(0, -60vh, 0);\n          transform: translate3d(0, -60vh, 0);\n}\n:host(:not([open])[position=top]) [part=mini],\n:host(:not([open])[position=bottom]) [part=mini] {\n  display: none;\n}\n\n:host(:not([open])[position=bottom]) [part=base] {\n  -webkit-transform: translate3d(0, 60vh, 0);\n          transform: translate3d(0, 60vh, 0);\n}\n\n:host([open][position=end]) [part=base] {\n  -webkit-border-end: none;\n          border-inline-end: none;\n  border-inline-start-style: solid;\n  border-inline-start-width: 0.0625rem;\n  inset-inline-start: auto;\n  inset-inline-end: 0;\n}\n\n:host([position=relative]) [part=base] {\n  position: relative;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n  z-index: initial;\n  border-inline-end-style: solid;\n  border-inline-end-width: 0.0625rem;\n}\n:host([position=relative]) [part=overlay] {\n  display: none;\n}\n\n:host([open]) [part=mini] {\n  display: none;\n}\n\n:host([open]:not([position=relative])) [part=base] {\n  border-inline-end-style: solid;\n  border-inline-end-width: 0.0625rem;\n}\n\n:host(:not([open])) [part=main] {\n  display: none;\n}\n:host(:not([open])) [part=overlay] {\n  display: none;\n}`;\n"]}
+{"version":3,"file":"nav-drawer.base.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmMvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  --menu-full-width: 16rem;\n  --menu-mini-width: 3.75rem;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  font-family: var(--ig-font-family);\n}\n:host [part=base],\n:host [part~=mini] {\n  --ig-scrollbar-size: rem(8px);\n  position: fixed;\n  height: 100%;\n  min-height: 100%;\n  overflow-x: hidden;\n  inset-block: 0;\n  z-index: 999;\n  -webkit-transition: 0.3s, -webkit-transform ease-out 0.3s;\n  transition: 0.3s, -webkit-transform ease-out 0.3s;\n  transition: transform ease-out 0.3s, 0.3s;\n  transition: transform ease-out 0.3s, 0.3s, -webkit-transform ease-out 0.3s;\n}\n:host [part~=mini] {\n  min-width: var(--menu-mini-width);\n}\n:host [part=main] {\n  width: var(--menu-full-width);\n}\n:host [part=overlay] {\n  position: fixed;\n  inset: 0;\n  z-index: 2;\n  opacity: 1;\n  -webkit-transition: opacity ease-out 0.3s, 0.3s;\n  transition: opacity ease-out 0.3s, 0.3s;\n}\n\n:host([position=relative]) [part=base] {\n  position: relative;\n  width: var(--menu-full-width);\n  -webkit-box-shadow: none;\n          box-shadow: none;\n  z-index: initial;\n  border-inline-end-style: solid;\n  border-inline-end-width: 0.0625rem;\n}\n:host([position=relative]) [part~=mini] {\n  position: relative;\n  border-inline-end-style: solid;\n  border-inline-end-width: 0.0625rem;\n}\n:host([position=relative]) [part=overlay] {\n  display: none;\n}\n\n:host([position=top]) [part=main],\n:host([position=bottom]) [part=main] {\n  width: 100%;\n}\n:host([position=top]) [part=base],\n:host([position=bottom]) [part=base] {\n  height: 50vh;\n  min-height: initial;\n  width: 100%;\n  inset-inline: 0;\n}\n\n:host([position=top]) [part=base] {\n  top: 0;\n  bottom: auto;\n}\n\n:host([position=bottom]) [part=base] {\n  top: auto;\n  bottom: 0;\n}\n\n:host([position=start]) [part=base],\n:host([position=start]) [part~=mini] {\n  inset-inline-start: 0;\n  border-inline-end-style: solid;\n  border-inline-end-width: 0.0625rem;\n}\n\n:host([position=end]) [part=base],\n:host([position=end]) [part~=mini] {\n  inset-inline-end: 0;\n  border-inline-start-style: solid;\n  border-inline-start-width: 0.0625rem;\n}\n\n:host(:not([open])[position=start]),\n:host([dir=rtl]:not([open])[position=end]) {\n  --dir: calc(var(--ig-dir, 1) * -1);\n}\n\n:host(:not([open])[position=end]),\n:host([dir=rtl]:not([open])[position=start]) {\n  --dir: calc(var(--ig-dir, 1) * 1);\n}\n\n:host(:not([open])[position=relative]) [part=base] {\n  -webkit-margin-start: calc(var(--menu-full-width) * -1);\n          margin-inline-start: calc(var(--menu-full-width) * -1);\n}\n\n:host(:not([open])[position=top]) [part=base],\n:host(:not([open])[position=bottom]) [part=base] {\n  -webkit-transform: translateY(-60vh);\n      -ms-transform: translateY(-60vh);\n          transform: translateY(-60vh);\n}\n:host(:not([open])[position=top]) [part=mini],\n:host(:not([open])[position=bottom]) [part=mini] {\n  display: none;\n}\n\n:host(:not([open])[position=bottom]) [part=base] {\n  -webkit-transform: translateY(60vh);\n      -ms-transform: translateY(60vh);\n          transform: translateY(60vh);\n}\n\n:host([open][position=end]) [part=base] {\n  -webkit-border-end: none;\n          border-inline-end: none;\n  border-inline-start-style: solid;\n  border-inline-start-width: 0.0625rem;\n}\n\n:host([open]) [part=mini] {\n  display: none;\n}\n\n:host([open]:not([position=relative])) [part=base] {\n  border-inline-end-style: solid;\n  border-inline-end-width: 0.0625rem;\n}\n\n:host(:not([open])) [part=base] {\n  -webkit-transform: translateX(calc(100% * var(--dir)));\n      -ms-transform: translateX(calc(100% * var(--dir)));\n          transform: translateX(calc(100% * var(--dir)));\n}\n:host(:not([open])) [part=overlay] {\n  pointer-events: none;\n  opacity: 0;\n}`;\n"]}

package/components/nav-drawer/themes/light/nav-drawer.bootstrap.css.js

@@ -14,6 +14,7 @@ export const styles = css `:host {
   --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
   --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
+  --background-color: var(--ig-nav-drawer-background-color, hsla(var(--ig-gray-500), 0.54));
 }
 :host [part=base] {
   border-radius: var(--border-radius);
@@ -48,7 +49,8 @@ export const styles = css `:host {
   border-inline-start-color: var(--border-color);
 }
 
-:host([position=relative]) [part=base] {
+:host([position=relative]) [part=base],
+:host([position=relative]) [part~=mini] {
   border-inline-end-color: var(--border-color);
 }
 

package/components/nav-drawer/themes/light/nav-drawer.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.bootstrap.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  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n}\n:host [part=base] {\n  border-radius: var(--border-radius);\n  background: var(--background);\n  border: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n:host [part=overlay] {\n  background: var(--background-color);\n}\n\n[part=mini] {\n  background: var(--background);\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}\n\n:host([position=start]) [part=mini] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([position=end]) [part=mini] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([open][position=end]) [part=base] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([position=relative]) [part=base] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([open]:not([position=relative])) [part=base] {\n  border-inline-end-color: var(--border-color);\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}`;\n"]}
+{"version":3,"file":"nav-drawer.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  --background-color: var(--ig-nav-drawer-background-color, hsla(var(--ig-gray-500), 0.54));\n}\n:host [part=base] {\n  border-radius: var(--border-radius);\n  background: var(--background);\n  border: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n:host [part=overlay] {\n  background: var(--background-color);\n}\n\n[part=mini] {\n  background: var(--background);\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}\n\n:host([position=start]) [part=mini] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([position=end]) [part=mini] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([open][position=end]) [part=base] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([position=relative]) [part=base],\n:host([position=relative]) [part~=mini] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([open]:not([position=relative])) [part=base] {\n  border-inline-end-color: var(--border-color);\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}`;\n"]}

package/components/nav-drawer/themes/light/nav-drawer.fluent.css.js

@@ -14,6 +14,7 @@ export const styles = css `:host {
   --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
   --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
+  --background-color: var(--ig-nav-drawer-background-color, rgba(255, 255, 255, 0.4));
 }
 :host [part=base] {
   border-radius: var(--border-radius);
@@ -48,7 +49,8 @@ export const styles = css `:host {
   border-inline-start-color: var(--border-color);
 }
 
-:host([position=relative]) [part=base] {
+:host([position=relative]) [part=base],
+:host([position=relative]) [part~=mini] {
   border-inline-end-color: var(--border-color);
 }
 

package/components/nav-drawer/themes/light/nav-drawer.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.fluent.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  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n}\n:host [part=base] {\n  border-radius: var(--border-radius);\n  background: var(--background);\n  border: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n:host [part=overlay] {\n  background: var(--background-color);\n}\n\n[part=mini] {\n  background: var(--background);\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}\n\n:host([position=start]) [part=mini] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([position=end]) [part=mini] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([open][position=end]) [part=base] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([position=relative]) [part=base] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([open]:not([position=relative])) [part=base] {\n  border-inline-end-color: var(--border-color);\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}`;\n"]}
+{"version":3,"file":"nav-drawer.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  --background-color: var(--ig-nav-drawer-background-color, rgba(255, 255, 255, 0.4));\n}\n:host [part=base] {\n  border-radius: var(--border-radius);\n  background: var(--background);\n  border: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n:host [part=overlay] {\n  background: var(--background-color);\n}\n\n[part=mini] {\n  background: var(--background);\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}\n\n:host([position=start]) [part=mini] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([position=end]) [part=mini] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([open][position=end]) [part=base] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([position=relative]) [part=base],\n:host([position=relative]) [part~=mini] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([open]:not([position=relative])) [part=base] {\n  border-inline-end-color: var(--border-color);\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}`;\n"]}

package/components/nav-drawer/themes/light/nav-drawer.indigo.css.js

@@ -49,7 +49,8 @@ export const styles = css `:host {
   border-inline-start-color: var(--border-color);
 }
 
-:host([position=relative]) [part=base] {
+:host([position=relative]) [part=base],
+:host([position=relative]) [part~=mini] {
   border-inline-end-color: var(--border-color);
 }
 

package/components/nav-drawer/themes/light/nav-drawer.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.indigo.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  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-0));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --border-color: var(--ig-nav-drawer-border-color, transparent);\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-300), 0.8));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-300), 0.8));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-gray-600), 0.8));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, transparent);\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));\n  --background-color: var(--ig-nav-drawer-background-color, hsla(var(--ig-gray-500), 0.54));\n}\n:host [part=base] {\n  border-radius: var(--border-radius);\n  background: var(--background);\n  border: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n:host [part=overlay] {\n  background: var(--background-color);\n}\n\n[part=mini] {\n  background: var(--background);\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}\n\n:host([position=start]) [part=mini] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([position=end]) [part=mini] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([open][position=end]) [part=base] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([position=relative]) [part=base] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([open]:not([position=relative])) [part=base] {\n  border-inline-end-color: var(--border-color);\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}`;\n"]}
+{"version":3,"file":"nav-drawer.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-0));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --border-color: var(--ig-nav-drawer-border-color, transparent);\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-300), 0.8));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-300), 0.8));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-gray-600), 0.8));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, transparent);\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));\n  --background-color: var(--ig-nav-drawer-background-color, hsla(var(--ig-gray-500), 0.54));\n}\n:host [part=base] {\n  border-radius: var(--border-radius);\n  background: var(--background);\n  border: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n:host [part=overlay] {\n  background: var(--background-color);\n}\n\n[part=mini] {\n  background: var(--background);\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}\n\n:host([position=start]) [part=mini] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([position=end]) [part=mini] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([open][position=end]) [part=base] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([position=relative]) [part=base],\n:host([position=relative]) [part~=mini] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([open]:not([position=relative])) [part=base] {\n  border-inline-end-color: var(--border-color);\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}`;\n"]}

package/components/nav-drawer/themes/light/nav-drawer.material.css.js

@@ -14,6 +14,7 @@ export const styles = css `:host {
   --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
   --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
+  --background-color: var(--ig-nav-drawer-background-color, hsla(var(--ig-gray-500), 0.54));
 }
 :host [part=base] {
   border-radius: var(--border-radius);
@@ -48,7 +49,8 @@ export const styles = css `:host {
   border-inline-start-color: var(--border-color);
 }
 
-:host([position=relative]) [part=base] {
+:host([position=relative]) [part=base],
+:host([position=relative]) [part~=mini] {
   border-inline-end-color: var(--border-color);
 }
 

package/components/nav-drawer/themes/light/nav-drawer.material.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer.material.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.material.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  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n}\n:host [part=base] {\n  border-radius: var(--border-radius);\n  background: var(--background);\n  border: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n:host [part=overlay] {\n  background: var(--background-color);\n}\n\n[part=mini] {\n  background: var(--background);\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}\n\n:host([position=start]) [part=mini] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([position=end]) [part=mini] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([open][position=end]) [part=base] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([position=relative]) [part=base] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([open]:not([position=relative])) [part=base] {\n  border-inline-end-color: var(--border-color);\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}`;\n"]}
+{"version":3,"file":"nav-drawer.material.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  --background-color: var(--ig-nav-drawer-background-color, hsla(var(--ig-gray-500), 0.54));\n}\n:host [part=base] {\n  border-radius: var(--border-radius);\n  background: var(--background);\n  border: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n:host [part=overlay] {\n  background: var(--background-color);\n}\n\n[part=mini] {\n  background: var(--background);\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}\n\n:host([position=start]) [part=mini] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([position=end]) [part=mini] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([open][position=end]) [part=base] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([position=relative]) [part=base],\n:host([position=relative]) [part~=mini] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([open]:not([position=relative])) [part=base] {\n  border-inline-end-color: var(--border-color);\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}`;\n"]}

package/components/navbar/navbar.d.ts

@@ -17,6 +17,7 @@ import { LitElement } from 'lit';
 export default class IgcNavbarComponent extends LitElement {
     static readonly tagName = "igc-navbar";
     static styles: import("lit").CSSResult;
+    static register(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/navbar/navbar.js

@@ -6,12 +6,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
-import { styles } from './themes/navbar.base.css.js';
+import { registerComponent } from '../common/definitions/register.js';
 import { styles as bootstrap } from './themes/light/navbar.bootstrap.css.js';
 import { styles as fluent } from './themes/light/navbar.fluent.css.js';
 import { styles as indigo } from './themes/light/navbar.indigo.css.js';
 import { styles as material } from './themes/light/navbar.material.css.js';
+import { styles } from './themes/navbar.base.css.js';
 let IgcNavbarComponent = class IgcNavbarComponent extends LitElement {
+    static register() {
+        registerComponent(this);
+    }
     render() {
         return html `
       <div part="base">
@@ -31,7 +35,10 @@ let IgcNavbarComponent = class IgcNavbarComponent extends LitElement {
 IgcNavbarComponent.tagName = 'igc-navbar';
 IgcNavbarComponent.styles = styles;
 IgcNavbarComponent = __decorate([
-    themes({ material, bootstrap, fluent, indigo })
+    themes({
+        light: { material, bootstrap, fluent, indigo },
+        dark: { material, bootstrap, fluent, indigo },
+    })
 ], IgcNavbarComponent);
 export default IgcNavbarComponent;
 //# sourceMappingURL=navbar.js.map

package/components/navbar/navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.js","sourceRoot":"","sources":["../../../src/components/navbar/navbar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAkB3E,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,UAAU;IAIrC,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;;;;;;KAYV,CAAC;IACJ,CAAC;;AAjBsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AACvB,yBAAM,GAAG,MAAM,AAAT,CAAU;AAFpB,kBAAkB;IADtC,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GAC3B,kBAAkB,CAmBtC;eAnBoB,kBAAkB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/navbar.base.css.js';\nimport { styles as bootstrap } from './themes/light/navbar.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/navbar.fluent.css.js';\nimport { styles as indigo } from './themes/light/navbar.indigo.css.js';\nimport { styles as material } from './themes/light/navbar.material.css.js';\n\n/**\n * A navigation bar component is used to facilitate navigation through\n * a series of hierarchical screens within an app.\n *\n * @element igc-navbar\n *\n * @slot - Renders a title inside the default slot.\n * @slot start - Renders left aligned icons.\n * @slot end - Renders right aligned action icons.\n *\n * @csspart base - The base wrapper of the navigation bar.\n * @csspart start - The left aligned icon container.\n * @csspart middle - The navigation bar title container.\n * @csspart end - The right aligned action icons container.\n */\n@themes({ material, bootstrap, fluent, indigo })\nexport default class IgcNavbarComponent extends LitElement {\n  public static readonly tagName = 'igc-navbar';\n  public static override styles = styles;\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\n        <span part=\"start\">\n          <slot name=\"start\"></slot>\n        </span>\n        <span part=\"middle\">\n          <slot></slot>\n        </span>\n        <span part=\"end\">\n          <slot name=\"end\"></slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-navbar': IgcNavbarComponent;\n  }\n}\n"]}
+{"version":3,"file":"navbar.js","sourceRoot":"","sources":["../../../src/components/navbar/navbar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAqBrD,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,UAAU;IAIjD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;;;;;;KAYV,CAAC;IACJ,CAAC;;AArBsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AACvB,yBAAM,GAAG,MAAM,AAAT,CAAU;AAFpB,kBAAkB;IAJtC,MAAM,CAAC;QACN,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE;QAC9C,IAAI,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE;KAC9C,CAAC;GACmB,kBAAkB,CAuBtC;eAvBoB,kBAAkB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles as bootstrap } from './themes/light/navbar.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/navbar.fluent.css.js';\nimport { styles as indigo } from './themes/light/navbar.indigo.css.js';\nimport { styles as material } from './themes/light/navbar.material.css.js';\nimport { styles } from './themes/navbar.base.css.js';\n\n/**\n * A navigation bar component is used to facilitate navigation through\n * a series of hierarchical screens within an app.\n *\n * @element igc-navbar\n *\n * @slot - Renders a title inside the default slot.\n * @slot start - Renders left aligned icons.\n * @slot end - Renders right aligned action icons.\n *\n * @csspart base - The base wrapper of the navigation bar.\n * @csspart start - The left aligned icon container.\n * @csspart middle - The navigation bar title container.\n * @csspart end - The right aligned action icons container.\n */\n@themes({\n  light: { material, bootstrap, fluent, indigo },\n  dark: { material, bootstrap, fluent, indigo },\n})\nexport default class IgcNavbarComponent extends LitElement {\n  public static readonly tagName = 'igc-navbar';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\n        <span part=\"start\">\n          <slot name=\"start\"></slot>\n        </span>\n        <span part=\"middle\">\n          <slot></slot>\n        </span>\n        <span part=\"end\">\n          <slot name=\"end\"></slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-navbar': IgcNavbarComponent;\n  }\n}\n"]}

package/components/progress/circular-gradient.d.ts

@@ -10,6 +10,7 @@ import { LitElement } from 'lit';
  */
 export default class IgcCircularGradientComponent extends LitElement {
     static readonly tagName = "igc-circular-gradient";
+    static register(): void;
     /**
      * Defines where the gradient stop is placed along the gradient vector
      * @attr

package/components/progress/circular-gradient.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { registerComponent } from '../common/definitions/register.js';
 class IgcCircularGradientComponent extends LitElement {
     constructor() {
         super(...arguments);
@@ -13,6 +14,9 @@ class IgcCircularGradientComponent extends LitElement {
         this.color = 'black';
         this.opacity = 1;
     }
+    static register() {
+        registerComponent(this);
+    }
     render() {
         return nothing;
     }