igniteui-webcomponents 4.6.0 → 4.7.0

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

@@ -8,6 +8,7 @@ import { LitElement, html } from 'lit';
 import { property, queryAssignedElements, queryAssignedNodes, state, } from 'lit/decorators.js';
 import { styles } from './themes/item.base.css.js';
 import { all } from './themes/item.js';
+import { styles as shared } from './themes/shared/item/item.common.css.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partNameMap } from '../common/util.js';
@@ -46,7 +47,7 @@ let IgcNavDrawerItemComponent = class IgcNavDrawerItemComponent extends LitEleme
     }
 };
 IgcNavDrawerItemComponent.tagName = 'igc-nav-drawer-item';
-IgcNavDrawerItemComponent.styles = styles;
+IgcNavDrawerItemComponent.styles = [styles, shared];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcNavDrawerItemComponent.prototype, "disabled", void 0);

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,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EACL,QAAQ,EACR,qBAAqB,EACrB,kBAAkB,EAClB,KAAK,GACN,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAejC,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,UAAU;IAAlD;;QAaN,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,IAAI,CAAC,UAAU,EAAE,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;IAD7C,MAAM,CAAC,GAAG,CAAC;GACS,yBAAyB,CAyD7C;eAzDoB,yBAAyB","sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  property,\n  queryAssignedElements,\n  queryAssignedNodes,\n  state,\n} from 'lit/decorators.js';\n\nimport { styles } from './themes/item.base.css.js';\nimport { all } from './themes/item.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partNameMap } from '../common/util.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(all)\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"]}
+{"version":3,"file":"nav-drawer-item.js","sourceRoot":"","sources":["../../../src/components/nav-drawer/nav-drawer-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EACL,QAAQ,EACR,qBAAqB,EACrB,kBAAkB,EAClB,KAAK,GACN,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAejC,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,UAAU;IAAlD;;QAaN,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,IAAI,CAAC,UAAU,EAAE,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,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAW1C;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;IAD7C,MAAM,CAAC,GAAG,CAAC;GACS,yBAAyB,CAyD7C;eAzDoB,yBAAyB","sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  property,\n  queryAssignedElements,\n  queryAssignedNodes,\n  state,\n} from 'lit/decorators.js';\n\nimport { styles } from './themes/item.base.css.js';\nimport { all } from './themes/item.js';\nimport { styles as shared } from './themes/shared/item/item.common.css.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partNameMap } from '../common/util.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(all)\nexport default class IgcNavDrawerItemComponent extends LitElement {\n  public static readonly tagName = 'igc-nav-drawer-item';\n  public static override styles = [styles, shared];\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

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

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

@@ -10,6 +10,7 @@ import IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';
 import IgcNavDrawerItemComponent from './nav-drawer-item.js';
 import { styles } from './themes/container.base.css.js';
 import { all } from './themes/container.js';
+import { styles as shared } from './themes/shared/container/nav-drawer.common.css.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partNameMap } from '../common/util.js';
@@ -67,7 +68,7 @@ let IgcNavDrawerComponent = class IgcNavDrawerComponent extends LitElement {
     }
 };
 IgcNavDrawerComponent.tagName = 'igc-nav-drawer';
-IgcNavDrawerComponent.styles = styles;
+IgcNavDrawerComponent.styles = [styles, shared];
 __decorate([
     property({ reflect: true })
 ], IgcNavDrawerComponent.prototype, "position", void 0);

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,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,+BAA+B,MAAM,6BAA6B,CAAC;AAC1E,OAAO,yBAAyB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgBjC,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAiBN,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;IADzC,MAAM,CAAC,GAAG,CAAC;GACS,qBAAqB,CA8EzC;eA9EoB,qBAAqB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';\nimport IgcNavDrawerItemComponent from './nav-drawer-item.js';\nimport { styles } from './themes/container.base.css.js';\nimport { all } from './themes/container.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partNameMap } from '../common/util.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(all)\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"]}
+{"version":3,"file":"nav-drawer.js","sourceRoot":"","sources":["../../../src/components/nav-drawer/nav-drawer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,+BAA+B,MAAM,6BAA6B,CAAC;AAC1E,OAAO,yBAAyB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,oDAAoD,CAAC;AACtF,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgBjC,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAiBN,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,CAAC;YACd,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAGM,IAAI;QACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAGM,MAAM;QACX,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;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,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAe1C;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;IADzC,MAAM,CAAC,GAAG,CAAC;GACS,qBAAqB,CA8EzC;eA9EoB,qBAAqB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';\nimport IgcNavDrawerItemComponent from './nav-drawer-item.js';\nimport { styles } from './themes/container.base.css.js';\nimport { all } from './themes/container.js';\nimport { styles as shared } from './themes/shared/container/nav-drawer.common.css.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partNameMap } from '../common/util.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(all)\nexport default class IgcNavDrawerComponent extends LitElement {\n  public static readonly tagName = 'igc-nav-drawer';\n  public static override styles = [styles, shared];\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/container.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host([hidden]),[hidden]{display:none !important}:host{--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~=mini]{--ig-scrollbar-size: rem(8px);position:fixed;height:100%;min-height:100%;overflow-x:hidden;inset-block:0;z-index:999;-webkit-transition:.3s,-webkit-transform ease-out .3s;transition:.3s,-webkit-transform ease-out .3s;transition:transform ease-out .3s,.3s;transition:transform ease-out .3s,.3s,-webkit-transform ease-out .3s}:host [part~=mini]{min-width:var(--menu-mini-width)}: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 .3s,.3s;transition:opacity ease-out .3s,.3s}: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:.0625rem}:host([position=relative]) [part~=mini]{position:relative;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part=overlay]{display:none}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;width:100%;inset-inline:0}:host([position=top]) [part=base]{top:0;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:.0625rem}:host([position=end]) [part=base],:host([position=end]) [part~=mini]{inset-inline-end:0;border-inline-start-style:solid;border-inline-start-width:.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:translateY(-60vh);-ms-transform:translateY(-60vh);transform:translateY(-60vh)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translateY(60vh);-ms-transform:translateY(60vh);transform:translateY(60vh)}:host([open][position=end]) [part=base]{-webkit-border-end:none;border-inline-end:none;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host([open]) [part=mini]{display:none}:host([open]:not([position=relative])) [part=base]{border-inline-end-style:solid;border-inline-end-width:.0625rem}: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]{pointer-events:none;opacity:0}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host([hidden]),[hidden]{display:none !important}:host{--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~=mini]{--ig-scrollbar-size: rem(8px);position:fixed;height:100%;min-height:100%;overflow-x:hidden;inset-block:0;z-index:999;opacity:1;-webkit-transition:.3s,opacity ease-out .3s,.3s,-webkit-transform ease-out .3s;transition:.3s,opacity ease-out .3s,.3s,-webkit-transform ease-out .3s;transition:transform ease-out .3s,.3s,opacity ease-out .3s,.3s;transition:transform ease-out .3s,.3s,opacity ease-out .3s,.3s,-webkit-transform ease-out .3s}:host [part~=mini]{min-width:var(--menu-mini-width)}: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 .3s,.3s;transition:opacity ease-out .3s,.3s}: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:.0625rem}:host([position=relative]) [part~=mini]{position:relative;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part=overlay]{display:none}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;width:100%;inset-inline:0}:host([position=top]) [part=base]{top:0;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:.0625rem}:host([position=end]) [part=base],:host([position=end]) [part~=mini]{inset-inline-end:0;border-inline-start-style:solid;border-inline-start-width:.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:translateY(-60vh);-ms-transform:translateY(-60vh);transform:translateY(-60vh)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translateY(60vh);-ms-transform:translateY(60vh);transform:translateY(60vh)}:host([open][position=end]) [part=base]{-webkit-border-end:none;border-inline-end:none;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host([open]) [part=mini],[part="mini hidden"]{display:none}:host([open]:not([position=relative])) [part=base]{border-inline-end-style:solid;border-inline-end-width:.0625rem}: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)));opacity:0}:host(:not([open])) [part=overlay]{pointer-events:none;opacity:0}`;
 //# sourceMappingURL=container.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"container.base.css.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/container.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,i9HAAi9H,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host([hidden]),[hidden]{display:none !important}:host{--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~=mini]{--ig-scrollbar-size: rem(8px);position:fixed;height:100%;min-height:100%;overflow-x:hidden;inset-block:0;z-index:999;-webkit-transition:.3s,-webkit-transform ease-out .3s;transition:.3s,-webkit-transform ease-out .3s;transition:transform ease-out .3s,.3s;transition:transform ease-out .3s,.3s,-webkit-transform ease-out .3s}:host [part~=mini]{min-width:var(--menu-mini-width)}: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 .3s,.3s;transition:opacity ease-out .3s,.3s}: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:.0625rem}:host([position=relative]) [part~=mini]{position:relative;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part=overlay]{display:none}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;width:100%;inset-inline:0}:host([position=top]) [part=base]{top:0;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:.0625rem}:host([position=end]) [part=base],:host([position=end]) [part~=mini]{inset-inline-end:0;border-inline-start-style:solid;border-inline-start-width:.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:translateY(-60vh);-ms-transform:translateY(-60vh);transform:translateY(-60vh)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translateY(60vh);-ms-transform:translateY(60vh);transform:translateY(60vh)}:host([open][position=end]) [part=base]{-webkit-border-end:none;border-inline-end:none;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host([open]) [part=mini]{display:none}:host([open]:not([position=relative])) [part=base]{border-inline-end-style:solid;border-inline-end-width:.0625rem}: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]{pointer-events:none;opacity:0}`;\n"]}
+{"version":3,"file":"container.base.css.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/container.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8lIAA8lI,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host([hidden]),[hidden]{display:none !important}:host{--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~=mini]{--ig-scrollbar-size: rem(8px);position:fixed;height:100%;min-height:100%;overflow-x:hidden;inset-block:0;z-index:999;opacity:1;-webkit-transition:.3s,opacity ease-out .3s,.3s,-webkit-transform ease-out .3s;transition:.3s,opacity ease-out .3s,.3s,-webkit-transform ease-out .3s;transition:transform ease-out .3s,.3s,opacity ease-out .3s,.3s;transition:transform ease-out .3s,.3s,opacity ease-out .3s,.3s,-webkit-transform ease-out .3s}:host [part~=mini]{min-width:var(--menu-mini-width)}: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 .3s,.3s;transition:opacity ease-out .3s,.3s}: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:.0625rem}:host([position=relative]) [part~=mini]{position:relative;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part=overlay]{display:none}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;width:100%;inset-inline:0}:host([position=top]) [part=base]{top:0;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:.0625rem}:host([position=end]) [part=base],:host([position=end]) [part~=mini]{inset-inline-end:0;border-inline-start-style:solid;border-inline-start-width:.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:translateY(-60vh);-ms-transform:translateY(-60vh);transform:translateY(-60vh)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{-webkit-transform:translateY(60vh);-ms-transform:translateY(60vh);transform:translateY(60vh)}:host([open][position=end]) [part=base]{-webkit-border-end:none;border-inline-end:none;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host([open]) [part=mini],[part=\"mini hidden\"]{display:none}:host([open]:not([position=relative])) [part=base]{border-inline-end-style:solid;border-inline-end-width:.0625rem}: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)));opacity:0}:host(:not([open])) [part=overlay]{pointer-events:none;opacity:0}`;\n"]}

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

@@ -8,35 +8,34 @@ import { styles as fluentLight } from './light/container/nav-drawer.fluent.css.j
 import { styles as indigoLight } from './light/container/nav-drawer.indigo.css.js';
 import { styles as materialLight } from './light/container/nav-drawer.material.css.js';
 import { styles as bootstrap } from './shared/container/nav-drawer.bootstrap.css.js';
-import { styles as shared } from './shared/container/nav-drawer.common.css.js';
 import { styles as fluent } from './shared/container/nav-drawer.fluent.css.js';
 import { styles as indigo } from './shared/container/nav-drawer.indigo.css.js';
 const light = {
     bootstrap: css `
-    ${shared} ${bootstrap} ${bootstrapLight}
+    ${bootstrap} ${bootstrapLight}
   `,
     material: css `
-    ${shared} ${materialLight}
+    ${materialLight}
   `,
     fluent: css `
-    ${shared} ${fluent} ${fluentLight}
+    ${fluent} ${fluentLight}
   `,
     indigo: css `
-    ${shared} ${indigo} ${indigoLight}
+    ${indigo} ${indigoLight}
   `,
 };
 const dark = {
     bootstrap: css `
-    ${shared} ${bootstrap} ${bootstrapDark}
+    ${bootstrap} ${bootstrapDark}
   `,
     material: css `
-    ${shared} ${materialDark}
+    ${materialDark}
   `,
     fluent: css `
-    ${shared} ${fluent} ${fluentDark}
+    ${fluent} ${fluentDark}
   `,
     indigo: css `
-    ${shared} ${indigo} ${indigoDark}
+    ${indigo} ${indigoDark}
   `,
 };
 export const all = { light, dark };

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

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8CAA8C,CAAC;AACvF,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAErF,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,+CAA+C,CAAC;AACzF,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAEvF,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,gDAAgD,CAAC;AACrF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAG/E,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,MAAM,IAAI,SAAS,IAAI,cAAc;GACxC;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,MAAM,IAAI,aAAa;GAC1B;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM,IAAI,WAAW;GAClC;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM,IAAI,WAAW;GAClC;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,MAAM,IAAI,SAAS,IAAI,aAAa;GACvC;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,MAAM,IAAI,YAAY;GACzB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM,IAAI,UAAU;GACjC;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM,IAAI,UAAU;GACjC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/container/nav-drawer.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/container/nav-drawer.fluent.css.js';\nimport { styles as indigoDark } from './dark/container/nav-drawer.indigo.css.js';\nimport { styles as materialDark } from './dark/container/nav-drawer.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/container/nav-drawer.bootstrap.css.js';\nimport { styles as fluentLight } from './light/container/nav-drawer.fluent.css.js';\nimport { styles as indigoLight } from './light/container/nav-drawer.indigo.css.js';\nimport { styles as materialLight } from './light/container/nav-drawer.material.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/container/nav-drawer.bootstrap.css.js';\nimport { styles as shared } from './shared/container/nav-drawer.common.css.js';\nimport { styles as fluent } from './shared/container/nav-drawer.fluent.css.js';\nimport { styles as indigo } from './shared/container/nav-drawer.indigo.css.js';\nimport { Themes } from '../../../theming/types.js';\n\nconst light = {\n  bootstrap: css`\n    ${shared} ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${shared} ${materialLight}\n  `,\n  fluent: css`\n    ${shared} ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${shared} ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${shared} ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${shared} ${materialDark}\n  `,\n  fluent: css`\n    ${shared} ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${shared} ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8CAA8C,CAAC;AACvF,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAErF,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,+CAA+C,CAAC;AACzF,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAEvF,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,gDAAgD,CAAC;AACrF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAG/E,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/container/nav-drawer.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/container/nav-drawer.fluent.css.js';\nimport { styles as indigoDark } from './dark/container/nav-drawer.indigo.css.js';\nimport { styles as materialDark } from './dark/container/nav-drawer.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/container/nav-drawer.bootstrap.css.js';\nimport { styles as fluentLight } from './light/container/nav-drawer.fluent.css.js';\nimport { styles as indigoLight } from './light/container/nav-drawer.indigo.css.js';\nimport { styles as materialLight } from './light/container/nav-drawer.material.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/container/nav-drawer.bootstrap.css.js';\nimport { styles as fluent } from './shared/container/nav-drawer.fluent.css.js';\nimport { styles as indigo } from './shared/container/nav-drawer.indigo.css.js';\nimport { Themes } from '../../../theming/types.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

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

@@ -1,32 +1,13 @@
 import { css } from 'lit';
 import { styles as bootstrap } from './shared/header-item/header-item.bootstrap.css.js';
-import { styles as shared } from './shared/header-item/header-item.common.css.js';
 const light = {
     bootstrap: css `
-    ${shared} ${bootstrap}
-  `,
-    material: css `
-    ${shared}
-  `,
-    fluent: css `
-    ${shared}
-  `,
-    indigo: css `
-    ${shared}
+    ${bootstrap}
   `,
 };
 const dark = {
     bootstrap: css `
-    ${shared} ${bootstrap}
-  `,
-    material: css `
-    ${shared}
-  `,
-    fluent: css `
-    ${shared}
-  `,
-    indigo: css `
-    ${shared}
+    ${bootstrap}
   `,
 };
 export const all = { light, dark };

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

@@ -1 +1 @@
-{"version":3,"file":"header-item.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/header-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,mDAAmD,CAAC;AACxF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,gDAAgD,CAAC;AAGlF,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,MAAM,IAAI,SAAS;GACtB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,MAAM,IAAI,SAAS;GACtB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\n// Shared Styles\nimport { styles as bootstrap } from './shared/header-item/header-item.bootstrap.css.js';\nimport { styles as shared } from './shared/header-item/header-item.common.css.js';\nimport { Themes } from '../../../theming/types.js';\n\nconst light = {\n  bootstrap: css`\n    ${shared} ${bootstrap}\n  `,\n  material: css`\n    ${shared}\n  `,\n  fluent: css`\n    ${shared}\n  `,\n  indigo: css`\n    ${shared}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${shared} ${bootstrap}\n  `,\n  material: css`\n    ${shared}\n  `,\n  fluent: css`\n    ${shared}\n  `,\n  indigo: css`\n    ${shared}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"header-item.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/header-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,mDAAmD,CAAC;AAGxF,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\n// Shared Styles\nimport { styles as bootstrap } from './shared/header-item/header-item.bootstrap.css.js';\nimport { Themes } from '../../../theming/types.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

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

@@ -1,33 +1,20 @@
 import { css } from 'lit';
-import { styles as shared } from './shared/item/item.common.css.js';
 import { styles as fluent } from './shared/item/item.fluent.css.js';
 import { styles as indigo } from './shared/item/item.indigo.css.js';
 const light = {
-    bootstrap: css `
-    ${shared}
-  `,
-    material: css `
-    ${shared}
-  `,
     fluent: css `
-    ${shared} ${fluent}
+    ${fluent}
   `,
     indigo: css `
-    ${shared} ${indigo}
+    ${indigo}
   `,
 };
 const dark = {
-    bootstrap: css `
-    ${shared}
-  `,
-    material: css `
-    ${shared}
-  `,
     fluent: css `
-    ${shared} ${fluent}
+    ${fluent}
   `,
     indigo: css `
-    ${shared} ${indigo}
+    ${indigo}
   `,
 };
 export const all = { light, dark };

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

@@ -1 +1 @@
-{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAGpE,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,MAAM;GACT;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM;GACnB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM;GACnB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,MAAM;GACT;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM;GACnB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM;GACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\n// Shared Styles\nimport { styles as shared } from './shared/item/item.common.css.js';\nimport { styles as fluent } from './shared/item/item.fluent.css.js';\nimport { styles as indigo } from './shared/item/item.indigo.css.js';\nimport { Themes } from '../../../theming/types.js';\n\nconst light = {\n  bootstrap: css`\n    ${shared}\n  `,\n  material: css`\n    ${shared}\n  `,\n  fluent: css`\n    ${shared} ${fluent}\n  `,\n  indigo: css`\n    ${shared} ${indigo}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${shared}\n  `,\n  material: css`\n    ${shared}\n  `,\n  fluent: css`\n    ${shared} ${fluent}\n  `,\n  indigo: css`\n    ${shared} ${indigo}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAGpE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\n// Shared Styles\nimport { styles as fluent } from './shared/item/item.fluent.css.js';\nimport { styles as indigo } from './shared/item/item.indigo.css.js';\nimport { Themes } from '../../../theming/types.js';\n\nconst light = {\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n};\n\nconst dark = {\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/navbar/navbar.d.ts

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

package/components/navbar/navbar.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from 'lit';
 import { styles } from './themes/navbar.base.css.js';
+import { styles as shared } from './themes/shared/navbar.common.css.js';
 import { all } from './themes/themes.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -30,7 +31,7 @@ let IgcNavbarComponent = class IgcNavbarComponent extends LitElement {
     }
 };
 IgcNavbarComponent.tagName = 'igc-navbar';
-IgcNavbarComponent.styles = styles;
+IgcNavbarComponent.styles = [styles, shared];
 IgcNavbarComponent = __decorate([
     themes(all)
 ], IgcNavbarComponent);

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,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAkBvD,IAAM,kBAAkB,GAAxB,MAAM,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;IADtC,MAAM,CAAC,GAAG,CAAC;GACS,kBAAkB,CAuBtC;eAvBoB,kBAAkB","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport { styles } from './themes/navbar.base.css.js';\nimport { all } from './themes/themes.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.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(all)\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"]}
+{"version":3,"file":"navbar.js","sourceRoot":"","sources":["../../../src/components/navbar/navbar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAkBvD,IAAM,kBAAkB,GAAxB,MAAM,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,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAF9B,kBAAkB;IADtC,MAAM,CAAC,GAAG,CAAC;GACS,kBAAkB,CAuBtC;eAvBoB,kBAAkB","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport { styles } from './themes/navbar.base.css.js';\nimport { styles as shared } from './themes/shared/navbar.common.css.js';\nimport { all } from './themes/themes.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.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(all)\nexport default class IgcNavbarComponent extends LitElement {\n  public static readonly tagName = 'igc-navbar';\n  public static override styles = [styles, shared];\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/navbar/themes/themes.js

@@ -8,35 +8,34 @@ import { styles as fluentLight } from './light/navbar.fluent.css.js';
 import { styles as indigoLight } from './light/navbar.indigo.css.js';
 import { styles as materialLight } from './light/navbar.material.css.js';
 import { styles as bootstrap } from './shared/navbar.bootstrap.css.js';
-import { styles as shared } from './shared/navbar.common.css.js';
 import { styles as fluent } from './shared/navbar.fluent.css.js';
 import { styles as indigo } from './shared/navbar.indigo.css.js';
 const light = {
     bootstrap: css `
-    ${shared} ${bootstrap} ${bootstrapLight}
+    ${bootstrap} ${bootstrapLight}
   `,
     material: css `
-    ${shared} ${materialLight}
+    ${materialLight}
   `,
     fluent: css `
-    ${shared} ${fluent} ${fluentLight}
+    ${fluent} ${fluentLight}
   `,
     indigo: css `
-    ${shared} ${indigo} ${indigoLight}
+    ${indigo} ${indigoLight}
   `,
 };
 const dark = {
     bootstrap: css `
-    ${shared} ${bootstrap} ${bootstrapDark}
+    ${bootstrap} ${bootstrapDark}
   `,
     material: css `
-    ${shared} ${materialDark}
+    ${materialDark}
   `,
     fluent: css `
-    ${shared} ${fluent} ${fluentDark}
+    ${fluent} ${fluentDark}
   `,
     indigo: css `
-    ${shared} ${indigo} ${indigoDark}
+    ${indigo} ${indigoDark}
   `,
 };
 export const all = { light, dark };

package/components/navbar/themes/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/navbar/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEvE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAEzE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAGjE,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,MAAM,IAAI,SAAS,IAAI,cAAc;GACxC;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,MAAM,IAAI,aAAa;GAC1B;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM,IAAI,WAAW;GAClC;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM,IAAI,WAAW;GAClC;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,MAAM,IAAI,SAAS,IAAI,aAAa;GACvC;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,MAAM,IAAI,YAAY;GACzB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM,IAAI,UAAU;GACjC;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,MAAM,IAAI,UAAU;GACjC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/navbar.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/navbar.fluent.css.js';\nimport { styles as indigoDark } from './dark/navbar.indigo.css.js';\nimport { styles as materialDark } from './dark/navbar.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/navbar.bootstrap.css.js';\nimport { styles as fluentLight } from './light/navbar.fluent.css.js';\nimport { styles as indigoLight } from './light/navbar.indigo.css.js';\nimport { styles as materialLight } from './light/navbar.material.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/navbar.bootstrap.css.js';\nimport { styles as shared } from './shared/navbar.common.css.js';\nimport { styles as fluent } from './shared/navbar.fluent.css.js';\nimport { styles as indigo } from './shared/navbar.indigo.css.js';\nimport { Themes } from '../../../theming/types.js';\n\nconst light = {\n  bootstrap: css`\n    ${shared} ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${shared} ${materialLight}\n  `,\n  fluent: css`\n    ${shared} ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${shared} ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${shared} ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${shared} ${materialDark}\n  `,\n  fluent: css`\n    ${shared} ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${shared} ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/navbar/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEvE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAEzE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAGjE,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/navbar.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/navbar.fluent.css.js';\nimport { styles as indigoDark } from './dark/navbar.indigo.css.js';\nimport { styles as materialDark } from './dark/navbar.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/navbar.bootstrap.css.js';\nimport { styles as fluentLight } from './light/navbar.fluent.css.js';\nimport { styles as indigoLight } from './light/navbar.indigo.css.js';\nimport { styles as materialLight } from './light/navbar.material.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/navbar.bootstrap.css.js';\nimport { styles as fluent } from './shared/navbar.fluent.css.js';\nimport { styles as indigo } from './shared/navbar.indigo.css.js';\nimport { Themes } from '../../../theming/types.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Middleware,\n  autoUpdate,\n  computePosition,\n  flip,\n  limitShift,\n  offset,\n  shift,\n  size,\n} from '@floating-ui/dom';\nimport { LitElement, html } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles } from './themes/light/popover.base.css.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { getElementByIdFromRoot } from '../common/util.js';\n\nfunction roundByDPR(value: number) {\n  const dpr = window.devicePixelRatio || 1;\n  return Math.round(value * dpr) / dpr;\n}\n\n/**\n * Describes the preferred placement of a toggle component.\n */\nexport type IgcPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\n/**\n * @element igc-popover\n *\n * @slot - Content of the popover.\n * @slot anchor - The element the popover will be anchored to.\n */\nexport default class IgcPopoverComponent extends LitElement {\n  public static readonly tagName = 'igc-popover';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  private dispose?: ReturnType<typeof autoUpdate>;\n  private target?: Element;\n\n  @query('#container', true)\n  private _container!: HTMLElement;\n\n  @queryAssignedElements({ slot: 'anchor', flatten: true })\n  private _anchors!: HTMLElement[];\n\n  /**\n   * Pass an IDREF or an DOM element reference to use as the\n   * anchor target for the floating element.\n   */\n  @property()\n  public anchor?: Element | string;\n\n  /**\n   * When enabled this changes the placement of the floating element in order to keep it\n   * in view along the main axis.\n   */\n  @property({ type: Boolean, reflect: true })\n  public flip = false;\n\n  /**\n   * Placement modifier which translates the floating element along the main axis.\n   */\n  @property({ type: Number })\n  public offset = 0;\n\n  /**\n   * The visibility state of the popover component.\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Where to place the floating element relative to the parent anchor element.\n   */\n  @property()\n  public placement: IgcPlacement = 'bottom-start';\n\n  /**\n   * When enabled the floating element will match the width of its parent anchor element.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'same-width' })\n  public sameWidth = false;\n\n  /**\n   * When enabled this tries to shift the floating element along the main axis\n   * keeping it in view, preventing overflow while maintaining the desired placement.\n   */\n  @property({ type: Boolean, reflect: true })\n  public shift = false;\n\n  /**\n   * The type of CSS position property to use.\n   */\n  @property()\n  public strategy: 'absolute' | 'fixed' = 'absolute';\n\n  @watch('anchor')\n  protected async anchorChange() {\n    const newTarget =\n      typeof this.anchor === 'string'\n        ? getElementByIdFromRoot(this, this.anchor)\n        : this.anchor;\n\n    if (newTarget) {\n      this.target = newTarget;\n      this._updateState();\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  protected openChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @watch('flip', { waitUntilFirstUpdate: true })\n  @watch('offset', { waitUntilFirstUpdate: true })\n  @watch('placement', { waitUntilFirstUpdate: true })\n  @watch('sameWidth', { waitUntilFirstUpdate: true })\n  @watch('shift', { waitUntilFirstUpdate: true })\n  @watch('strategy', { waitUntilFirstUpdate: true })\n  protected floatingPropChange() {\n    this._updateState();\n  }\n\n  public override async connectedCallback() {\n    super.connectedCallback();\n\n    await this.updateComplete;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  public override disconnectedCallback() {\n    this.hide();\n    super.disconnectedCallback();\n  }\n\n  protected show() {\n    if (!this.target) return;\n\n    this.dispose = autoUpdate(\n      this.target,\n      this._container,\n      this._updatePosition.bind(this)\n    );\n  }\n\n  protected async hide(): Promise<void> {\n    return new Promise((resolve) => {\n      if (this.dispose) {\n        this.dispose();\n        this.dispose = undefined;\n        resolve();\n      } else {\n        resolve();\n      }\n    });\n  }\n\n  private _createMiddleware(): Middleware[] {\n    const middleware: Middleware[] = [];\n    const styles = this._container.style;\n\n    if (this.offset) {\n      middleware.push(offset(this.offset));\n    }\n\n    if (this.shift) {\n      middleware.push(\n        shift({\n          limiter: limitShift(),\n        })\n      );\n    }\n\n    if (this.flip) {\n      middleware.push(flip());\n    }\n\n    if (this.sameWidth) {\n      middleware.push(\n        size({\n          apply: ({ rects }) => {\n            Object.assign(styles, { width: `${rects.reference.width}px` });\n          },\n        })\n      );\n    } else {\n      Object.assign(styles, { width: '' });\n    }\n\n    return middleware;\n  }\n\n  private async _updateState() {\n    if (this.open) {\n      await this.hide();\n      this.show();\n    }\n  }\n\n  private async _updatePosition() {\n    if (!this.open || !this.target) {\n      return;\n    }\n\n    const { x, y } = await computePosition(this.target, this._container, {\n      placement: this.placement ?? 'bottom-start',\n      middleware: this._createMiddleware(),\n      strategy: this.strategy ?? 'absolute',\n    });\n\n    Object.assign(this._container.style, {\n      left: 0,\n      top: 0,\n      transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,\n    });\n  }\n\n  private _anchorSlotChange() {\n    if (this.anchor || this._anchors.length < 1) return;\n\n    this.target = this._anchors[0];\n    this._updateState();\n  }\n\n  protected override render() {\n    return html`\n      <slot name=\"anchor\" @slotchange=${this._anchorSlotChange}></slot>\n      <div id=\"container\" part=${this.strategy}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-popover': IgcPopoverComponent;\n  }\n}\n"]}
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Middleware,\n  autoUpdate,\n  computePosition,\n  flip,\n  limitShift,\n  offset,\n  shift,\n  size,\n} from '@floating-ui/dom';\nimport { LitElement, html } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles } from './themes/light/popover.base.css.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { getElementByIdFromRoot } from '../common/util.js';\n\nfunction roundByDPR(value: number) {\n  const dpr = window.devicePixelRatio || 1;\n  return Math.round(value * dpr) / dpr;\n}\n\n/**\n * Describes the preferred placement of a toggle component.\n */\nexport type IgcPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\n/**\n * @element igc-popover\n *\n * @slot - Content of the popover.\n * @slot anchor - The element the popover will be anchored to.\n */\nexport default class IgcPopoverComponent extends LitElement {\n  public static readonly tagName = 'igc-popover';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  private dispose?: ReturnType<typeof autoUpdate>;\n  private target?: Element;\n\n  @query('#container', true)\n  private _container!: HTMLElement;\n\n  @queryAssignedElements({ slot: 'anchor', flatten: true })\n  private _anchors!: HTMLElement[];\n\n  /**\n   * Pass an IDREF or an DOM element reference to use as the\n   * anchor target for the floating element.\n   */\n  @property()\n  public anchor?: Element | string;\n\n  /**\n   * When enabled this changes the placement of the floating element in order to keep it\n   * in view along the main axis.\n   */\n  @property({ type: Boolean, reflect: true })\n  public flip = false;\n\n  /**\n   * Placement modifier which translates the floating element along the main axis.\n   */\n  @property({ type: Number })\n  public offset = 0;\n\n  /**\n   * The visibility state of the popover component.\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Where to place the floating element relative to the parent anchor element.\n   */\n  @property()\n  public placement: IgcPlacement = 'bottom-start';\n\n  /**\n   * When enabled the floating element will match the width of its parent anchor element.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'same-width' })\n  public sameWidth = false;\n\n  /**\n   * When enabled this tries to shift the floating element along the main axis\n   * keeping it in view, preventing overflow while maintaining the desired placement.\n   */\n  @property({ type: Boolean, reflect: true })\n  public shift = false;\n\n  /**\n   * The type of CSS position property to use.\n   */\n  @property()\n  public strategy: 'absolute' | 'fixed' = 'absolute';\n\n  @watch('anchor')\n  protected async anchorChange() {\n    const newTarget =\n      typeof this.anchor === 'string'\n        ? getElementByIdFromRoot(this, this.anchor)\n        : this.anchor;\n\n    if (newTarget) {\n      this.target = newTarget;\n      this._updateState();\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  protected openChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @watch('flip', { waitUntilFirstUpdate: true })\n  @watch('offset', { waitUntilFirstUpdate: true })\n  @watch('placement', { waitUntilFirstUpdate: true })\n  @watch('sameWidth', { waitUntilFirstUpdate: true })\n  @watch('shift', { waitUntilFirstUpdate: true })\n  @watch('strategy', { waitUntilFirstUpdate: true })\n  protected floatingPropChange() {\n    this._updateState();\n  }\n\n  public override async connectedCallback() {\n    super.connectedCallback();\n\n    await this.updateComplete;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  public override disconnectedCallback() {\n    this.hide();\n    super.disconnectedCallback();\n  }\n\n  protected show() {\n    if (!this.target) return;\n\n    this.dispose = autoUpdate(\n      this.target,\n      this._container,\n      this._updatePosition.bind(this)\n    );\n  }\n\n  protected async hide(): Promise<void> {\n    return new Promise((resolve) => {\n      if (this.dispose) {\n        this.dispose();\n        this.dispose = undefined;\n        resolve();\n      } else {\n        resolve();\n      }\n    });\n  }\n\n  private _createMiddleware(): Middleware[] {\n    const middleware: Middleware[] = [];\n    const styles = this._container.style;\n\n    if (this.offset) {\n      middleware.push(offset(this.offset));\n    }\n\n    if (this.shift) {\n      middleware.push(\n        shift({\n          limiter: limitShift(),\n        })\n      );\n    }\n\n    if (this.flip) {\n      middleware.push(flip());\n    }\n\n    if (this.sameWidth) {\n      middleware.push(\n        size({\n          apply: ({ rects }) => {\n            Object.assign(styles, { width: `${rects.reference.width}px` });\n          },\n        })\n      );\n    } else {\n      Object.assign(styles, { width: '' });\n    }\n\n    return middleware;\n  }\n\n  private async _updateState() {\n    if (this.open) {\n      await this.hide();\n      this.show();\n    }\n  }\n\n  private async _updatePosition() {\n    if (!this.open || !this.target) {\n      return;\n    }\n\n    const { x, y } = await computePosition(this.target, this._container, {\n      placement: this.placement ?? 'bottom-start',\n      middleware: this._createMiddleware(),\n      strategy: this.strategy ?? 'absolute',\n    });\n\n    Object.assign(this._container.style, {\n      left: 0,\n      top: 0,\n      transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,\n    });\n  }\n\n  private _anchorSlotChange() {\n    if (this.anchor || this._anchors.length < 1) return;\n\n    this.target = this._anchors[0];\n    this._updateState();\n  }\n\n  protected override render() {\n    return html`\n      <slot name=\"anchor\" @slotchange=${this._anchorSlotChange}></slot>\n      <div id=\"container\" part=${this.strategy}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-popover': IgcPopoverComponent;\n  }\n}\n"]}

package/components/progress/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/components/progress/base.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { watch } from '../common/decorators/watch.js';\nimport { asPercent, clamp } from '../common/util.js';\n\nexport abstract class IgcProgressBaseComponent extends LitElement {\n  private initialMax!: number;\n  private initialValue!: number;\n\n  protected tick!: number;\n\n  @queryAssignedElements()\n  protected assignedElements!: Array<HTMLElement>;\n\n  @query('[part~=\"fill\"]', true)\n  protected progressIndicator!: Element;\n\n  @state()\n  protected percentage = 0;\n\n  /**\n   * Maximum value of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public max = 100;\n\n  /**\n   * The value of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public value = 0;\n\n  /**\n   * The variant of the control.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: 'primary' | 'info' | 'success' | 'warning' | 'danger' =\n    'primary';\n\n  /**\n   * Animation duration in milliseconds.\n   * @attr animation-duration\n   */\n  @property({ type: Number, attribute: 'animation-duration' })\n  public animationDuration = 500;\n\n  /**\n   * The indeterminate state of the control.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: false })\n  public indeterminate = false;\n\n  /**\n   * Shows/hides the label of the control.\n   * @attr hide-label\n   */\n  @property({ type: Boolean, attribute: 'hide-label', reflect: false })\n  public hideLabel = false;\n\n  /**\n   * Format string for the default label of the control.\n   * Placeholders:\n   *  {0} - current value of the control.\n   *  {1} - max value of the control.\n   * @attr label-format\n   */\n  @property({ attribute: 'label-format' })\n  public labelFormat!: string;\n\n  @watch('indeterminate', { waitUntilFirstUpdate: true })\n  protected indeterminateChange() {\n    this.cancelAnimations();\n    if (!this.indeterminate) {\n      this.percentage = Math.floor(asPercent(this.value, this.max));\n    }\n  }\n\n  @watch('max', { waitUntilFirstUpdate: true })\n  protected maxChange() {\n    this.max = Math.max(0, this.max);\n    if (this.value > this.max) {\n      this.value = this.max;\n    } else {\n      if (!this.indeterminate) {\n        this.animateLabelTo(this.max, this.value);\n      }\n    }\n  }\n\n  @watch('value', { waitUntilFirstUpdate: true })\n  protected valueChange(oldVal: number) {\n    this.value = clamp(this.value, 0, this.max);\n    if (!this.indeterminate) {\n      cancelAnimationFrame(this.tick);\n      if (this.percentage !== Math.floor(asPercent(this.value, this.max))) {\n        this.animateLabelTo(oldVal, this.value);\n      }\n    }\n  }\n\n  protected slotChanges() {\n    this.requestUpdate();\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.initialMax = Math.max(0, this.max);\n    this.initialValue = clamp(this.value, 0, this.initialMax);\n    this.value = 0;\n    this.max = 100;\n  }\n\n  protected override firstUpdated() {\n    if (!this.indeterminate) {\n      // trigger transition initially\n      setTimeout(() => {\n        this.max = this.initialMax;\n        this.value = this.initialValue;\n      }, 0);\n    }\n  }\n\n  protected cancelAnimations() {\n    requestAnimationFrame(() => {\n      this.progressIndicator?.getAnimations().forEach((animation) => {\n        if (animation instanceof CSSTransition) {\n          animation.cancel();\n        }\n      });\n    });\n    cancelAnimationFrame(this.tick);\n  }\n\n  protected animateLabelTo(start: number, end: number) {\n    let t0: number;\n\n    const tick = (t1: number) => {\n      t0 = t0 ?? t1;\n\n      const progress = Math.min((t1 - t0) / (this.animationDuration || 1), 1);\n      this.percentage = Math.floor(\n        asPercent(progress * (end - start) + start, this.max)\n      );\n      progress < 1\n        ? (this.tick = requestAnimationFrame(tick))\n        : cancelAnimationFrame(this.tick);\n    };\n\n    requestAnimationFrame(tick);\n  }\n\n  protected renderLabelFormat() {\n    return this.labelFormat\n      .replace(/\\{0\\}/gm, `${this.value}`)\n      .replace(/\\{1\\}/gm, `${this.max}`);\n  }\n\n  protected renderDefaultSlot() {\n    return html`<slot part=\"label\" @slotchange=${this.slotChanges}></slot>\n      ${when(\n        this.indeterminate || this.hideLabel || this.assignedElements.length,\n        () => nothing,\n        () => html`<span part=\"label value\">${this.renderLabelText()}</span>`\n      )}`;\n  }\n\n  protected renderLabelText() {\n    return this.labelFormat ? this.renderLabelFormat() : `${this.percentage}%`;\n  }\n}\n"]}
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/components/progress/base.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { watch } from '../common/decorators/watch.js';\nimport { asPercent, clamp } from '../common/util.js';\n\nexport abstract class IgcProgressBaseComponent extends LitElement {\n  private initialMax!: number;\n  private initialValue!: number;\n\n  protected tick!: number;\n\n  @queryAssignedElements()\n  protected assignedElements!: Array<HTMLElement>;\n\n  @query('[part~=\"fill\"]', true)\n  protected progressIndicator!: Element;\n\n  @state()\n  protected percentage = 0;\n\n  /**\n   * Maximum value of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public max = 100;\n\n  /**\n   * The value of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public value = 0;\n\n  /**\n   * The variant of the control.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: 'primary' | 'info' | 'success' | 'warning' | 'danger' =\n    'primary';\n\n  /**\n   * Animation duration in milliseconds.\n   * @attr animation-duration\n   */\n  @property({ type: Number, attribute: 'animation-duration' })\n  public animationDuration = 500;\n\n  /**\n   * The indeterminate state of the control.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: false })\n  public indeterminate = false;\n\n  /**\n   * Shows/hides the label of the control.\n   * @attr hide-label\n   */\n  @property({ type: Boolean, attribute: 'hide-label', reflect: false })\n  public hideLabel = false;\n\n  /**\n   * Format string for the default label of the control.\n   * Placeholders:\n   *  {0} - current value of the control.\n   *  {1} - max value of the control.\n   * @attr label-format\n   */\n  @property({ attribute: 'label-format' })\n  public labelFormat!: string;\n\n  @watch('indeterminate', { waitUntilFirstUpdate: true })\n  protected indeterminateChange() {\n    this.cancelAnimations();\n    if (!this.indeterminate) {\n      this.percentage = Math.floor(asPercent(this.value, this.max));\n    }\n  }\n\n  @watch('max', { waitUntilFirstUpdate: true })\n  protected maxChange() {\n    this.max = Math.max(0, this.max);\n    if (this.value > this.max) {\n      this.value = this.max;\n    } else {\n      if (!this.indeterminate) {\n        this.animateLabelTo(this.max, this.value);\n      }\n    }\n  }\n\n  @watch('value', { waitUntilFirstUpdate: true })\n  protected valueChange(oldVal: number) {\n    this.value = clamp(this.value, 0, this.max);\n    if (!this.indeterminate) {\n      cancelAnimationFrame(this.tick);\n      if (this.percentage !== Math.floor(asPercent(this.value, this.max))) {\n        this.animateLabelTo(oldVal, this.value);\n      }\n    }\n  }\n\n  protected slotChanges() {\n    this.requestUpdate();\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.initialMax = Math.max(0, this.max);\n    this.initialValue = clamp(this.value, 0, this.initialMax);\n    this.value = 0;\n    this.max = 100;\n  }\n\n  protected override firstUpdated() {\n    if (!this.indeterminate) {\n      // trigger transition initially\n      setTimeout(() => {\n        this.max = this.initialMax;\n        this.value = this.initialValue;\n      }, 0);\n    }\n  }\n\n  protected cancelAnimations() {\n    requestAnimationFrame(() => {\n      this.progressIndicator?.getAnimations().forEach((animation) => {\n        if (animation instanceof CSSTransition) {\n          animation.cancel();\n        }\n      });\n    });\n    cancelAnimationFrame(this.tick);\n  }\n\n  protected animateLabelTo(start: number, end: number) {\n    let t0: number;\n\n    const tick = (t1: number) => {\n      t0 = t0 ?? t1;\n\n      const progress = Math.min((t1 - t0) / (this.animationDuration || 1), 1);\n      this.percentage = Math.floor(\n        asPercent(progress * (end - start) + start, this.max)\n      );\n      progress < 1\n        ? (this.tick = requestAnimationFrame(tick))\n        : cancelAnimationFrame(this.tick);\n    };\n\n    requestAnimationFrame(tick);\n  }\n\n  protected renderLabelFormat() {\n    return this.labelFormat\n      .replace(/\\{0\\}/gm, `${this.value}`)\n      .replace(/\\{1\\}/gm, `${this.max}`);\n  }\n\n  protected renderDefaultSlot() {\n    return html`<slot part=\"label\" @slotchange=${this.slotChanges}></slot>\n      ${when(\n        this.indeterminate || this.hideLabel || this.assignedElements.length,\n        () => nothing,\n        () => html`<span part=\"label value\">${this.renderLabelText()}</span>`\n      )}`;\n  }\n\n  protected renderLabelText() {\n    return this.labelFormat ? this.renderLabelFormat() : `${this.percentage}%`;\n  }\n}\n"]}

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

@@ -25,7 +25,7 @@ import IgcCircularGradientComponent from './circular-gradient.js';
  */
 export default class IgcCircularProgressComponent extends IgcProgressBaseComponent {
     static readonly tagName = "igc-circular-progress";
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     static register(): void;
     protected gradientId: string;
     protected gradientElements: Array<IgcCircularGradientComponent>;

package/components/progress/circular-progress.js

@@ -11,6 +11,7 @@ import { when } from 'lit/directives/when.js';
 import { IgcProgressBaseComponent } from './base.js';
 import IgcCircularGradientComponent from './circular-gradient.js';
 import { styles } from './themes/circular/circular.progress.base.css.js';
+import { styles as shared } from './themes/circular/shared/circular.progress.common.css.js';
 import { all } from './themes/circular/themes.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -75,7 +76,7 @@ let IgcCircularProgressComponent = class IgcCircularProgressComponent extends Ig
     }
 };
 IgcCircularProgressComponent.tagName = 'igc-circular-progress';
-IgcCircularProgressComponent.styles = styles;
+IgcCircularProgressComponent.styles = [styles, shared];
 __decorate([
     queryAssignedElements({ slot: 'gradient' })
 ], IgcCircularProgressComponent.prototype, "gradientElements", void 0);

package/components/progress/circular-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../../src/components/progress/circular-progress.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, svg } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { IgcProgressBaseComponent } from './base.js';\nimport IgcCircularGradientComponent from './circular-gradient.js';\nimport { styles } from './themes/circular/circular.progress.base.css.js';\nimport { all } from './themes/circular/themes.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { asPercent, partNameMap } from '../common/util.js';\n\n/**\n * A circular progress indicator used to express unspecified wait time or display\n * the length of a process.\n *\n * @element igc-circular-progress\n *\n * @slot - The text area container.\n * @slot gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts `igc-circular-gradient` elements.\n *\n * @csspart svg\n * @csspart gradient_start\n * @csspart gradient_end\n * @csspart track\n * @csspart fill\n * @csspart label\n * @csspart value\n * @csspart indeterminate\n * @csspart primary\n * @csspart danger\n * @csspart warning\n * @csspart info\n * @csspart success\n */\n@themes(all, true)\nexport default class IgcCircularProgressComponent extends IgcProgressBaseComponent {\n  public static readonly tagName = 'igc-circular-progress';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this, IgcCircularGradientComponent);\n  }\n\n  protected gradientId = Date.now().toString(16);\n\n  @queryAssignedElements({ slot: 'gradient' })\n  protected gradientElements!: Array<IgcCircularGradientComponent>;\n\n  protected get stroke() {\n    return {\n      stroke: `url(#${this.gradientId})`,\n      '--percentage': (asPercent(this.value, this.max) / 100).toString(),\n      '--duration': this.animationDuration + 'ms',\n    };\n  }\n\n  protected get svgParts() {\n    return {\n      indeterminate: this.indeterminate,\n    };\n  }\n\n  private gradientChange() {\n    this.requestUpdate();\n  }\n\n  protected renderSvg() {\n    return svg`\n      <circle part=\"track ${partNameMap(this.svgParts)}\"/>\n      <circle style=\"${styleMap(this.stroke)}\" part=\"fill\"/>\n\n      <defs>\n          <linearGradient id=${this.gradientId} gradientTransform=\"rotate(90)\">\n          ${when(\n            this.gradientElements.length,\n            () =>\n              this.gradientElements.map((el: IgcCircularGradientComponent) => {\n                return svg`<stop offset=${el.offset} stop-color=${el.color} stop-opacity=${el.opacity}/>`;\n              }),\n            () => svg`\n              <stop offset=\"0%\" part=\"gradient_start\" />\n              <stop offset=\"100%\" part=\"gradient_end\" />\n          `\n          )}\n          </linearGradient>\n      </defs>\n    `;\n  }\n\n  protected renderWrapper() {\n    return html`\n      <svg\n        part=\"svg ${partNameMap(this.svgParts)}\"\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-valuenow=${this.indeterminate ? nothing : this.value}\n      >\n        ${this.renderSvg()}\n      </svg>\n      <slot name=\"gradient\" @slotchange=${this.gradientChange}></slot>\n      ${this.renderDefaultSlot()}\n    `;\n  }\n\n  protected override render() {\n    return this.renderWrapper();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-circular-progress': IgcCircularProgressComponent;\n  }\n}\n"]}
+{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../../src/components/progress/circular-progress.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, svg } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { IgcProgressBaseComponent } from './base.js';\nimport IgcCircularGradientComponent from './circular-gradient.js';\nimport { styles } from './themes/circular/circular.progress.base.css.js';\nimport { styles as shared } from './themes/circular/shared/circular.progress.common.css.js';\nimport { all } from './themes/circular/themes.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { asPercent, partNameMap } from '../common/util.js';\n\n/**\n * A circular progress indicator used to express unspecified wait time or display\n * the length of a process.\n *\n * @element igc-circular-progress\n *\n * @slot - The text area container.\n * @slot gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts `igc-circular-gradient` elements.\n *\n * @csspart svg\n * @csspart gradient_start\n * @csspart gradient_end\n * @csspart track\n * @csspart fill\n * @csspart label\n * @csspart value\n * @csspart indeterminate\n * @csspart primary\n * @csspart danger\n * @csspart warning\n * @csspart info\n * @csspart success\n */\n@themes(all, true)\nexport default class IgcCircularProgressComponent extends IgcProgressBaseComponent {\n  public static readonly tagName = 'igc-circular-progress';\n  public static override styles = [styles, shared];\n\n  public static register() {\n    registerComponent(this, IgcCircularGradientComponent);\n  }\n\n  protected gradientId = Date.now().toString(16);\n\n  @queryAssignedElements({ slot: 'gradient' })\n  protected gradientElements!: Array<IgcCircularGradientComponent>;\n\n  protected get stroke() {\n    return {\n      stroke: `url(#${this.gradientId})`,\n      '--percentage': (asPercent(this.value, this.max) / 100).toString(),\n      '--duration': this.animationDuration + 'ms',\n    };\n  }\n\n  protected get svgParts() {\n    return {\n      indeterminate: this.indeterminate,\n    };\n  }\n\n  private gradientChange() {\n    this.requestUpdate();\n  }\n\n  protected renderSvg() {\n    return svg`\n      <circle part=\"track ${partNameMap(this.svgParts)}\"/>\n      <circle style=\"${styleMap(this.stroke)}\" part=\"fill\"/>\n\n      <defs>\n          <linearGradient id=${this.gradientId} gradientTransform=\"rotate(90)\">\n          ${when(\n            this.gradientElements.length,\n            () =>\n              this.gradientElements.map((el: IgcCircularGradientComponent) => {\n                return svg`<stop offset=${el.offset} stop-color=${el.color} stop-opacity=${el.opacity}/>`;\n              }),\n            () => svg`\n              <stop offset=\"0%\" part=\"gradient_start\" />\n              <stop offset=\"100%\" part=\"gradient_end\" />\n          `\n          )}\n          </linearGradient>\n      </defs>\n    `;\n  }\n\n  protected renderWrapper() {\n    return html`\n      <svg\n        part=\"svg ${partNameMap(this.svgParts)}\"\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-valuenow=${this.indeterminate ? nothing : this.value}\n      >\n        ${this.renderSvg()}\n      </svg>\n      <slot name=\"gradient\" @slotchange=${this.gradientChange}></slot>\n      ${this.renderDefaultSlot()}\n    `;\n  }\n\n  protected override render() {\n    return this.renderWrapper();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-circular-progress': IgcCircularProgressComponent;\n  }\n}\n"]}

package/components/progress/linear-progress.d.ts

@@ -21,7 +21,7 @@ import { IgcProgressBaseComponent } from './base.js';
  */
 export default class IgcLinearProgressComponent extends IgcProgressBaseComponent {
     static readonly tagName = "igc-linear-progress";
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     static register(): void;
     /**
      * Sets the striped look of the control.

package/components/progress/linear-progress.js

@@ -9,6 +9,7 @@ import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { IgcProgressBaseComponent } from './base.js';
 import { styles } from './themes/linear/linear.progress.base.css.js';
+import { styles as shared } from './themes/linear/shared/linear.progress.common.css.js';
 import { all } from './themes/linear/themes.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -60,7 +61,7 @@ let IgcLinearProgressComponent = class IgcLinearProgressComponent extends IgcPro
     }
 };
 IgcLinearProgressComponent.tagName = 'igc-linear-progress';
-IgcLinearProgressComponent.styles = styles;
+IgcLinearProgressComponent.styles = [styles, shared];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcLinearProgressComponent.prototype, "striped", void 0);