igniteui-webcomponents 4.4.0 → 4.5.0-beta.1

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

@@ -8,9 +8,11 @@ import { html, LitElement } from 'lit';
 import { property, queryAssignedElements, queryAssignedNodes, state, } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { partNameMap } from '../common/util.js';
-import { styles as fluent } from './themes/light/fluent/nav-drawer-item.fluent.css.js';
-import { styles as indigo } from './themes/light/indigo/nav-drawer-item.indigo.css.js';
-import { styles } from './themes/light/nav-drawer-item.base.css.js';
+import { styles } from './themes/light/item/nav-drawer-item.base.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() {
         super(...arguments);
@@ -61,7 +63,7 @@ __decorate([
     queryAssignedNodes({ slot: 'icon', flatten: true })
 ], IgcNavDrawerItemComponent.prototype, "navdrawerIcon", void 0);
 IgcNavDrawerItemComponent = __decorate([
-    themes({ fluent, indigo })
+    themes({ 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,IAAI,MAAM,EAAE,MAAM,qDAAqD,CAAC;AACvF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qDAAqD,CAAC;AACvF,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAepE,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,CAAC;GACN,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 as fluent } from './themes/light/fluent/nav-drawer-item.fluent.css.js';\nimport { styles as indigo } from './themes/light/indigo/nav-drawer-item.indigo.css.js';\nimport { styles } from './themes/light/nav-drawer-item.base.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 })\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,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"]}

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

@@ -8,8 +8,11 @@ import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { partNameMap } from '../common/util.js';
-import { styles as indigo } from './themes/light/indigo/nav-drawer.indigo.css.js';
 import { styles } from './themes/light/nav-drawer.base.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';
@@ -72,7 +75,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcNavDrawerComponent.prototype, "open", void 0);
 IgcNavDrawerComponent = __decorate([
-    themes({ indigo })
+    themes({ 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,IAAI,MAAM,EAAE,MAAM,gDAAgD,CAAC;AAClF,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAE/D,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,CAAC;GACE,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 as indigo } from './themes/light/indigo/nav-drawer.indigo.css.js';\nimport { styles } from './themes/light/nav-drawer.base.css.js';\n\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 })\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,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"]}

package/components/nav-drawer/themes/dark/{nav-drawer-item.base.css.js → nav-drawer.bootstrap.css.js}

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 export const styles = css ``;
-//# sourceMappingURL=nav-drawer-item.base.css.js.map
+//# sourceMappingURL=nav-drawer.bootstrap.css.js.map

package/components/nav-drawer/themes/dark/{nav-drawer-item.base.css.js.map → nav-drawer.bootstrap.css.js.map}

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer-item.base.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/dark/nav-drawer-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}
+{"version":3,"file":"nav-drawer.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/dark/nav-drawer.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}

package/components/nav-drawer/themes/dark/{nav-drawer-item.fluent.css.js → nav-drawer.fluent.css.js}

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 export const styles = css ``;
-//# sourceMappingURL=nav-drawer-item.fluent.css.js.map
+//# sourceMappingURL=nav-drawer.fluent.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/dark/nav-drawer.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}

package/components/nav-drawer/themes/dark/{nav-drawer-item.indigo.css.js → nav-drawer.material.css.js}

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 export const styles = css ``;
-//# sourceMappingURL=nav-drawer-item.indigo.css.js.map
+//# sourceMappingURL=nav-drawer.material.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer.material.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/dark/nav-drawer.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}

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

@@ -0,0 +1,7 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  display: block;
+  padding: 1.25rem 1rem;
+  white-space: nowrap;
+}`;
+//# sourceMappingURL=nav-drawer-header-item.base.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer-header-item.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;EAIvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  display: block;\n  padding: 1.25rem 1rem;\n  white-space: nowrap;\n}`;\n"]}

package/components/nav-drawer/themes/light/{fluent/nav-drawer-header-item.fluent.css.js → header-item/nav-drawer-header-item.bootstrap.css.js}

@@ -9,5 +9,6 @@ export const styles = css `:host {
   text-transform: var(--ig-caption-text-transform);
   margin-top: var(--ig-caption-margin-top);
   margin-bottom: var(--ig-caption-margin-bottom);
+  color: var(--item-header-text-color);
 }`;
-//# sourceMappingURL=nav-drawer-header-item.fluent.css.js.map
+//# sourceMappingURL=nav-drawer-header-item.bootstrap.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer-header-item.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;EAWvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n  color: var(--item-header-text-color);\n}`;\n"]}

package/components/nav-drawer/themes/light/{nav-drawer-header-item.base.css.js → header-item/nav-drawer-header-item.fluent.css.js}

@@ -1,9 +1,5 @@
 import { css } from 'lit';
 export const styles = css `:host {
-  display: block;
-  padding: 1.25rem 1rem;
-  white-space: nowrap;
-  color: hsla(var(--ig-gray-800), var(--ig-gray-a));
   font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));
   font-size: var(--ig-subtitle-1-font-size);
   font-weight: var(--ig-subtitle-1-font-weight);
@@ -13,5 +9,6 @@ export const styles = css `:host {
   text-transform: var(--ig-subtitle-1-text-transform);
   margin-top: var(--ig-subtitle-1-margin-top);
   margin-bottom: var(--ig-subtitle-1-margin-bottom);
+  color: var(--item-header-text-color);
 }`;
-//# sourceMappingURL=nav-drawer-header-item.base.css.js.map
+//# sourceMappingURL=nav-drawer-header-item.fluent.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer-header-item.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;EAWvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: var(--ig-subtitle-1-font-weight);\n  font-style: var(--ig-subtitle-1-font-style);\n  line-height: var(--ig-subtitle-1-line-height);\n  letter-spacing: var(--ig-subtitle-1-letter-spacing);\n  text-transform: var(--ig-subtitle-1-text-transform);\n  margin-top: var(--ig-subtitle-1-margin-top);\n  margin-bottom: var(--ig-subtitle-1-margin-bottom);\n  color: var(--item-header-text-color);\n}`;\n"]}

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

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));
+  font-size: var(--ig-subtitle-1-font-size);
+  font-weight: var(--ig-subtitle-1-font-weight);
+  font-style: var(--ig-subtitle-1-font-style);
+  line-height: var(--ig-subtitle-1-line-height);
+  letter-spacing: var(--ig-subtitle-1-letter-spacing);
+  text-transform: var(--ig-subtitle-1-text-transform);
+  margin-top: var(--ig-subtitle-1-margin-top);
+  margin-bottom: var(--ig-subtitle-1-margin-bottom);
+  color: var(--item-header-text-color);
+}`;
+//# sourceMappingURL=nav-drawer-header-item.indigo.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer-header-item.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;EAWvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: var(--ig-subtitle-1-font-weight);\n  font-style: var(--ig-subtitle-1-font-style);\n  line-height: var(--ig-subtitle-1-line-height);\n  letter-spacing: var(--ig-subtitle-1-letter-spacing);\n  text-transform: var(--ig-subtitle-1-text-transform);\n  margin-top: var(--ig-subtitle-1-margin-top);\n  margin-bottom: var(--ig-subtitle-1-margin-bottom);\n  color: var(--item-header-text-color);\n}`;\n"]}

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

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));
+  font-size: var(--ig-subtitle-1-font-size);
+  font-weight: var(--ig-subtitle-1-font-weight);
+  font-style: var(--ig-subtitle-1-font-style);
+  line-height: var(--ig-subtitle-1-line-height);
+  letter-spacing: var(--ig-subtitle-1-letter-spacing);
+  text-transform: var(--ig-subtitle-1-text-transform);
+  margin-top: var(--ig-subtitle-1-margin-top);
+  margin-bottom: var(--ig-subtitle-1-margin-bottom);
+  color: var(--item-header-text-color);
+}`;
+//# sourceMappingURL=nav-drawer-header-item.material.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer-header-item.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;EAWvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: var(--ig-subtitle-1-font-weight);\n  font-style: var(--ig-subtitle-1-font-style);\n  line-height: var(--ig-subtitle-1-line-height);\n  letter-spacing: var(--ig-subtitle-1-letter-spacing);\n  text-transform: var(--ig-subtitle-1-text-transform);\n  margin-top: var(--ig-subtitle-1-margin-top);\n  margin-bottom: var(--ig-subtitle-1-margin-bottom);\n  color: var(--item-header-text-color);\n}`;\n"]}

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

@@ -0,0 +1,65 @@
+import { css } from 'lit';
+export const styles = css `[part~=base] {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 2rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: row nowrap;
+          flex-flow: row nowrap;
+  position: relative;
+  max-height: 3rem;
+  margin: 0.5rem;
+  padding: 0.75rem 0.5rem;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  outline: transparent;
+  white-space: nowrap;
+  text-decoration: none;
+  border: none;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  -webkit-transition: background 0.15s ease-out;
+  transition: background 0.15s ease-out;
+}
+[part~=base] ::slotted(igc-icon) {
+  --ig-size: 3;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font: inherit;
+}
+
+[part=content] {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+[part="base mini"] {
+  display: block;
+}
+[part="base mini"] [part=content] {
+  display: none;
+}
+[part="base mini"] ::slotted(igc-icon) {
+  width: 100%;
+}
+
+:host([disabled]) {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  cursor: initial;
+  pointer-events: none;
+}`;
+//# sourceMappingURL=nav-drawer-item.base.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer-item.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/item/nav-drawer-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8DvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=base] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  gap: 2rem;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-flow: row nowrap;\n          flex-flow: row nowrap;\n  position: relative;\n  max-height: 3rem;\n  margin: 0.5rem;\n  padding: 0.75rem 0.5rem;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  outline: transparent;\n  white-space: nowrap;\n  text-decoration: none;\n  border: none;\n  -webkit-box-pack: start;\n      -ms-flex-pack: start;\n          justify-content: flex-start;\n  -webkit-transition: background 0.15s ease-out;\n  transition: background 0.15s ease-out;\n}\n[part~=base] ::slotted(igc-icon) {\n  --ig-size: 3;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  font: inherit;\n}\n\n[part=content] {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n[part=\"base mini\"] {\n  display: block;\n}\n[part=\"base mini\"] [part=content] {\n  display: none;\n}\n[part=\"base mini\"] ::slotted(igc-icon) {\n  width: 100%;\n}\n\n:host([disabled]) {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: initial;\n  pointer-events: none;\n}`;\n"]}

package/components/nav-drawer/themes/light/{nav-drawer-item.base.css.js → item/nav-drawer-item.bootstrap.css.js}

@@ -14,56 +14,25 @@ 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));
 }
 
 [part~=base] {
   border-radius: var(--item-border-radius);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 2rem;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-flow: row nowrap;
-          flex-flow: row nowrap;
-  position: relative;
-  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
-  max-height: 3rem;
-  margin: 0.5rem;
-  padding: 0.75rem 0.5rem;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  outline: transparent;
-  white-space: nowrap;
-  text-decoration: none;
-  border: none;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
-  -webkit-transition: background 0.15s ease-out;
-  transition: background 0.15s ease-out;
-}
-[part~=base] ::slotted(igc-icon) {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  font: inherit;
+  color: var(--item-text-color);
 }
 [part~=base]:hover, [part~=base]:focus-within {
-  background: var(--hover-background, hsla(var(--ig-gray-200), 0.8));
-  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
+  background: var(--item-hover-background);
+  color: var(--item-hover-text-color);
+}
+[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {
+  color: var(--item-hover-icon-color);
+}
+[part~=base] ::slotted(igc-icon) {
+  color: var(--item-icon-color);
 }
 
 [part=content] {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
   font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
   font-size: var(--ig-subtitle-2-font-size);
   font-weight: var(--ig-subtitle-2-font-weight);
@@ -75,30 +44,11 @@ export const styles = css `:host {
   margin-bottom: var(--ig-subtitle-2-margin-bottom);
 }
 
-[part="base mini"] {
-  display: block;
-}
-[part="base mini"] [part=content] {
-  display: none;
-}
-[part="base mini"] ::slotted(igc-icon) {
-  width: 100%;
-}
-
-:host([disabled]) {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  cursor: initial;
-  pointer-events: none;
-}
-:host([disabled]) [part~=base] {
-  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
-}
-
 :host([active]) [part~=base] {
-  background: var(--active-background, hsla(var(--ig-primary-500), 0.12));
-  color: var(--active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  background: var(--item-active-background);
+  color: var(--item-active-text-color);
+}
+:host([active]) [part~=base] ::slotted(igc-icon) {
+  color: var(--item-active-icon-color);
 }`;
-//# sourceMappingURL=nav-drawer-item.base.css.js.map
+//# sourceMappingURL=nav-drawer-item.bootstrap.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer-item.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/item/nav-drawer-item.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,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\n[part~=base] {\n  border-radius: var(--item-border-radius);\n  color: var(--item-text-color);\n}\n[part~=base]:hover, [part~=base]:focus-within {\n  background: var(--item-hover-background);\n  color: var(--item-hover-text-color);\n}\n[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {\n  color: var(--item-hover-icon-color);\n}\n[part~=base] ::slotted(igc-icon) {\n  color: var(--item-icon-color);\n}\n\n[part=content] {\n  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-2-font-size);\n  font-weight: var(--ig-subtitle-2-font-weight);\n  font-style: var(--ig-subtitle-2-font-style);\n  line-height: var(--ig-subtitle-2-line-height);\n  letter-spacing: var(--ig-subtitle-2-letter-spacing);\n  text-transform: var(--ig-subtitle-2-text-transform);\n  margin-top: var(--ig-subtitle-2-margin-top);\n  margin-bottom: var(--ig-subtitle-2-margin-bottom);\n}\n\n:host([active]) [part~=base] {\n  background: var(--item-active-background);\n  color: var(--item-active-text-color);\n}\n:host([active]) [part~=base] ::slotted(igc-icon) {\n  color: var(--item-active-icon-color);\n}`;\n"]}

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

@@ -0,0 +1,54 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));
+  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));
+  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));
+  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));
+  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --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));
+}
+
+[part~=base] {
+  border-radius: var(--item-border-radius);
+  color: var(--item-text-color);
+}
+[part~=base]:hover, [part~=base]:focus-within {
+  background: var(--item-hover-background);
+  color: var(--item-hover-text-color);
+}
+[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {
+  color: var(--item-hover-icon-color);
+}
+[part~=base] ::slotted(igc-icon) {
+  color: var(--item-icon-color);
+}
+
+[part=content] {
+  font-family: var(--ig-body-2-font-family, var(--ig-font-family));
+  font-size: var(--ig-body-2-font-size);
+  font-weight: var(--ig-body-2-font-weight);
+  font-style: var(--ig-body-2-font-style);
+  line-height: var(--ig-body-2-line-height);
+  letter-spacing: var(--ig-body-2-letter-spacing);
+  text-transform: var(--ig-body-2-text-transform);
+  margin-top: var(--ig-body-2-margin-top);
+  margin-bottom: var(--ig-body-2-margin-bottom);
+}
+
+:host([active]) [part~=base] {
+  background: var(--item-active-background);
+  color: var(--item-active-text-color);
+}
+:host([active]) [part~=base] ::slotted(igc-icon) {
+  color: var(--item-active-icon-color);
+}`;
+//# sourceMappingURL=nav-drawer-item.fluent.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer-item.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/item/nav-drawer-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,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\n[part~=base] {\n  border-radius: var(--item-border-radius);\n  color: var(--item-text-color);\n}\n[part~=base]:hover, [part~=base]:focus-within {\n  background: var(--item-hover-background);\n  color: var(--item-hover-text-color);\n}\n[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {\n  color: var(--item-hover-icon-color);\n}\n[part~=base] ::slotted(igc-icon) {\n  color: var(--item-icon-color);\n}\n\n[part=content] {\n  font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n}\n\n:host([active]) [part~=base] {\n  background: var(--item-active-background);\n  color: var(--item-active-text-color);\n}\n:host([active]) [part~=base] ::slotted(igc-icon) {\n  color: var(--item-active-icon-color);\n}`;\n"]}

package/components/nav-drawer/themes/light/item/nav-drawer-item.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/nav-drawer/themes/light/{indigo → item}/nav-drawer-item.indigo.css.js

@@ -14,25 +14,46 @@ export const styles = css `:host {
   --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-100), 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, 1) * 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(--item-border-radius);
+
+[part~=base] {
   gap: 1.5rem;
-  color: var(--text-color, hsla(var(--ig-gray-300), 0.8));
   padding: 0.25rem;
   margin: 0.9375rem 0.5rem;
+  border-radius: var(--item-border-radius);
+  color: var(--item-text-color);
+}
+[part~=base]:hover, [part~=base]:focus-within {
+  background: var(--item-hover-background);
+  color: var(--item-hover-text-color);
 }
-:host [part~=base]:hover, :host [part~=base]:focus-within {
-  background: transparent;
-  color: var(--hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {
+  color: var(--item-hover-icon-color);
 }
-:host [part=content] {
+[part~=base] ::slotted(igc-icon) {
+  color: var(--item-icon-color);
+}
+
+[part=content] {
+  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
+  font-size: var(--ig-subtitle-2-font-size);
+  font-weight: var(--ig-subtitle-2-font-weight);
+  font-style: var(--ig-subtitle-2-font-style);
+  line-height: var(--ig-subtitle-2-line-height);
+  letter-spacing: var(--ig-subtitle-2-letter-spacing);
+  text-transform: var(--ig-subtitle-2-text-transform);
+  margin-top: var(--ig-subtitle-2-margin-top);
+  margin-bottom: var(--ig-subtitle-2-margin-bottom);
   -webkit-padding-start: 0.5rem;
           padding-inline-start: 0.5rem;
 }
 
 :host([active]) [part~=base] {
-  background: var(--active-background, hsla(var(--ig-gray-600), 0.8));
-  color: hsla(var(--ig-gray-50), var(--ig-gray-a));
+  background: var(--item-active-background);
+  color: var(--item-active-text-color);
+}
+:host([active]) [part~=base] ::slotted(igc-icon) {
+  color: var(--item-active-icon-color);
 }`;
 //# sourceMappingURL=nav-drawer-item.indigo.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer-item.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/item/nav-drawer-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDvB,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\n[part~=base] {\n  gap: 1.5rem;\n  padding: 0.25rem;\n  margin: 0.9375rem 0.5rem;\n  border-radius: var(--item-border-radius);\n  color: var(--item-text-color);\n}\n[part~=base]:hover, [part~=base]:focus-within {\n  background: var(--item-hover-background);\n  color: var(--item-hover-text-color);\n}\n[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {\n  color: var(--item-hover-icon-color);\n}\n[part~=base] ::slotted(igc-icon) {\n  color: var(--item-icon-color);\n}\n\n[part=content] {\n  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-2-font-size);\n  font-weight: var(--ig-subtitle-2-font-weight);\n  font-style: var(--ig-subtitle-2-font-style);\n  line-height: var(--ig-subtitle-2-line-height);\n  letter-spacing: var(--ig-subtitle-2-letter-spacing);\n  text-transform: var(--ig-subtitle-2-text-transform);\n  margin-top: var(--ig-subtitle-2-margin-top);\n  margin-bottom: var(--ig-subtitle-2-margin-bottom);\n  -webkit-padding-start: 0.5rem;\n          padding-inline-start: 0.5rem;\n}\n\n:host([active]) [part~=base] {\n  background: var(--item-active-background);\n  color: var(--item-active-text-color);\n}\n:host([active]) [part~=base] ::slotted(igc-icon) {\n  color: var(--item-active-icon-color);\n}`;\n"]}

package/components/nav-drawer/themes/light/item/nav-drawer-item.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,54 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));
+  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));
+  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));
+  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));
+  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --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));
+}
+
+[part~=base] {
+  border-radius: var(--item-border-radius);
+  color: var(--item-text-color);
+}
+[part~=base]:hover, [part~=base]:focus-within {
+  background: var(--item-hover-background);
+  color: var(--item-hover-text-color);
+}
+[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {
+  color: var(--item-hover-icon-color);
+}
+[part~=base] ::slotted(igc-icon) {
+  color: var(--item-icon-color);
+}
+
+[part=content] {
+  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
+  font-size: var(--ig-subtitle-2-font-size);
+  font-weight: var(--ig-subtitle-2-font-weight);
+  font-style: var(--ig-subtitle-2-font-style);
+  line-height: var(--ig-subtitle-2-line-height);
+  letter-spacing: var(--ig-subtitle-2-letter-spacing);
+  text-transform: var(--ig-subtitle-2-text-transform);
+  margin-top: var(--ig-subtitle-2-margin-top);
+  margin-bottom: var(--ig-subtitle-2-margin-bottom);
+}
+
+:host([active]) [part~=base] {
+  background: var(--item-active-background);
+  color: var(--item-active-text-color);
+}
+:host([active]) [part~=base] ::slotted(igc-icon) {
+  color: var(--item-active-icon-color);
+}`;
+//# sourceMappingURL=nav-drawer-item.material.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer-item.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/item/nav-drawer-item.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,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\n[part~=base] {\n  border-radius: var(--item-border-radius);\n  color: var(--item-text-color);\n}\n[part~=base]:hover, [part~=base]:focus-within {\n  background: var(--item-hover-background);\n  color: var(--item-hover-text-color);\n}\n[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {\n  color: var(--item-hover-icon-color);\n}\n[part~=base] ::slotted(igc-icon) {\n  color: var(--item-icon-color);\n}\n\n[part=content] {\n  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-2-font-size);\n  font-weight: var(--ig-subtitle-2-font-weight);\n  font-style: var(--ig-subtitle-2-font-style);\n  line-height: var(--ig-subtitle-2-line-height);\n  letter-spacing: var(--ig-subtitle-2-letter-spacing);\n  text-transform: var(--ig-subtitle-2-text-transform);\n  margin-top: var(--ig-subtitle-2-margin-top);\n  margin-bottom: var(--ig-subtitle-2-margin-bottom);\n}\n\n:host([active]) [part~=base] {\n  background: var(--item-active-background);\n  color: var(--item-active-text-color);\n}\n:host([active]) [part~=base] ::slotted(igc-icon) {\n  color: var(--item-active-icon-color);\n}`;\n"]}