igniteui-webcomponents 3.3.0-beta.0 → 4.0.0-alpha

package/components/snackbar/snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAC7D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAqBzE,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,iBAAiB,CAGjE,UAAU,CAAC;IAHb;;QAcS,SAAI,GAAG,KAAK,CAAC;QAIb,gBAAW,GAAG,IAAI,CAAC;QAInB,aAAQ,GAAG,KAAK,CAAC;IA+D1B,CAAC;IAxDQ,IAAI;QACT,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAEjB,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACnC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CACtC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EACjB,IAAI,CAAC,WAAW,CACjB,CAAC;SACH;IACH,CAAC;IAGM,IAAI;QACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC;IAGM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACxC,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;UAKL,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAA;;;;;yBAKS,IAAI,CAAC,WAAW;;kBAEvB,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;;aAE/B;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;CACF,CAAA;AAhFe,4BAAO,GAAG,cAAe,CAAA;AAGzB,2BAAM,GAAG,MAAO,CAAA;AAM9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACvB;AAIpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;yDAC5B;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;sDAC5B;AAIxB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;wDACZ;AA1BR,oBAAoB;IADxC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,oBAAoB,CAqFxC;eArFoB,oBAAoB","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles } from './themes/light/snackbar.base.css.js';\nimport { styles as bootstrap } from './themes/light/snackbar.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/snackbar.fluent.css.js';\nimport { styles as indigo } from './themes/light/snackbar.indigo.css.js';\n\nexport interface IgcSnackbarEventMap {\n  igcAction: CustomEvent<void>;\n}\n\n/**\n * A snackbar component is used to provide feedback about an operation\n * by showing a brief message at the bottom of the screen.\n *\n * @element igc-snackbar\n *\n * @slot - Renders the snackbar content.\n *\n * @fires igcAction - Emitted when the snackbar action button is clicked.\n *\n * @csspart base - The base wrapper of the snackbar component.\n * @csspart message - The snackbar message.\n * @csspart action - The snackbar action button.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcSnackbarComponent extends EventEmitterMixin<\n  IgcSnackbarEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  /** @private */\n  public static tagName = 'igc-snackbar';\n\n  /** @private */\n  public static styles = styles;\n\n  private autoHideTimeout!: number;\n\n  /** Determines whether the snackbar is opened. */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /** Determines the duration in ms in which the snackbar will be visible. */\n  @property({ type: Number, attribute: 'display-time' })\n  public displayTime = 4000;\n\n  /** Determines whether the snackbar should close after the displayTime is over. */\n  @property({ type: Boolean, attribute: 'keep-open' })\n  public keepOpen = false;\n\n  /** The snackbar action button. */\n  @property({ attribute: 'action-text' })\n  public actionText!: string;\n\n  /** Opens the snackbar. */\n  public show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && !this.keepOpen) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.displayTime\n      );\n    }\n  }\n\n  /** Closes the snackbar. */\n  public hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.open = false;\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /** Toggles the open state of the component. */\n  public toggle() {\n    this.open ? this.hide() : this.show();\n  }\n\n  private handleClick() {\n    this.emitEvent('igcAction');\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\n        <span part=\"message\">\n          <slot></slot>\n        </span>\n        ${this.actionText\n          ? html`\n              <igc-button\n                variant=\"flat\"\n                part=\"action\"\n                size=\"small\"\n                @click=${this.handleClick}\n              >\n                ${ifDefined(this.actionText)}\n              </igc-button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-snackbar': IgcSnackbarComponent;\n  }\n}\n"]}
+{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { themes } from '../../theming/theming-decorator.js';\n\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles } from './themes/light/snackbar.base.css.js';\nimport { styles as bootstrap } from './themes/light/snackbar.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/snackbar.fluent.css.js';\nimport { styles as indigo } from './themes/light/snackbar.indigo.css.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcButtonComponent from '../button/button.js';\n\ndefineComponents(IgcButtonComponent);\n\nexport interface IgcSnackbarEventMap {\n  igcAction: CustomEvent<void>;\n}\n\n/**\n * A snackbar component is used to provide feedback about an operation\n * by showing a brief message at the bottom of the screen.\n *\n * @element igc-snackbar\n *\n * @slot - Renders the snackbar content.\n *\n * @fires igcAction - Emitted when the snackbar action button is clicked.\n *\n * @csspart base - The base wrapper of the snackbar component.\n * @csspart message - The snackbar message.\n * @csspart action - The snackbar action button.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcSnackbarComponent extends EventEmitterMixin<\n  IgcSnackbarEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  /** @private */\n  public static tagName = 'igc-snackbar';\n\n  /** @private */\n  public static styles = styles;\n\n  private autoHideTimeout!: number;\n\n  /** Determines whether the snackbar is opened. */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /** Determines the duration in ms in which the snackbar will be visible. */\n  @property({ type: Number, attribute: 'display-time' })\n  public displayTime = 4000;\n\n  /** Determines whether the snackbar should close after the displayTime is over. */\n  @property({ type: Boolean, attribute: 'keep-open' })\n  public keepOpen = false;\n\n  /** The snackbar action button. */\n  @property({ attribute: 'action-text' })\n  public actionText!: string;\n\n  /** Opens the snackbar. */\n  public show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && !this.keepOpen) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.displayTime\n      );\n    }\n  }\n\n  /** Closes the snackbar. */\n  public hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.open = false;\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /** Toggles the open state of the component. */\n  public toggle() {\n    this.open ? this.hide() : this.show();\n  }\n\n  private handleClick() {\n    this.emitEvent('igcAction');\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\n        <span part=\"message\">\n          <slot></slot>\n        </span>\n        ${this.actionText\n          ? html`\n              <igc-button\n                variant=\"flat\"\n                part=\"action\"\n                size=\"small\"\n                @click=${this.handleClick}\n              >\n                ${ifDefined(this.actionText)}\n              </igc-button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-snackbar': IgcSnackbarComponent;\n  }\n}\n"]}

package/components/snackbar/themes/light/snackbar.base.css.js

@@ -1,3 +1,104 @@
 import { css } from 'lit';
-export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{font-family:var(--igc-font-family);position:fixed;bottom:0;left:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}[part~=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*.25rem,.25rem);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:row nowrap;flex-wrap:row nowrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:3rem;padding:.4375rem 1.5rem;margin:.5rem;gap:1.5rem;color:var(--igc-gray-900-contrast);background:hsla(var(--igc-gray-900), 0.9);-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}[part~=message]{font-family:var(--igc-body-2-font-family);font-weight:var(--igc-body-2-font-weight);font-size:var(--igc-body-2-font-size);font-style:var(--igc-body-2-font-style);letter-spacing:var(--igc-body-2-letter-spacing);text-transform:var(--igc-body-2-text-transform);line-height:var(--igc-body-2-line-height);margin-top:var(--igc-body-2-margin-top);margin-bottom:var(--igc-body-2-margin-bottom);display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 50%}:host([action-text]) igc-button::part(base){text-transform:uppercase;font-weight:600}:host([action-text]) igc-button::part(base):hover::before{background:rgba(0,0,0,0)}:host([action-text]) igc-button::part(base):focus{background:rgba(0,0,0,0);outline:none;-webkit-box-shadow:none;box-shadow:none}:host([action-text]) igc-button::part(base):focus::before{background:rgba(0,0,0,0)}:host(:not([open])) [part=base]{display:none}`;
+export const styles = css `:host {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  scrollbar-width: var(--scrolbar-size, 0.875rem);
+  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host *,
+:host *::before,
+:host *::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+:host ::-webkit-scrollbar {
+  width: var(--scrolbar-size, 0.875rem);
+  height: var(--scrolbar-size, 0.875rem);
+  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host ::-webkit-scrollbar-thumb {
+  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  font-family: var(--ig-font-family);
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+[part~=base] {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: row nowrap;
+      flex-wrap: row nowrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  min-height: 3rem;
+  padding: 0.4375rem 1.5rem;
+  margin: 0.5rem;
+  gap: 1.5rem;
+  color: var(--ig-gray-900-contrast);
+  background: hsla(var(--ig-gray-900), 0.9);
+  -webkit-box-shadow: var(--ig-elevation-4);
+          box-shadow: var(--ig-elevation-4);
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
+}
+
+[part~=message] {
+  font-family: var(--ig-body-2-font-family);
+  font-size: var(--ig-body-2-font-size);
+  font-weight: var(--ig-body-2-font-weight);
+  font-style: var(--ig-body-2-font-style);
+  line-height: var(--ig-body-2-line-height);
+  letter-spacing: var(--ig-body-2-letter-spacing);
+  text-transform: var(--ig-body-2-text-transform);
+  margin-top: var(--ig-body-2-margin-top);
+  margin-bottom: var(--ig-body-2-margin-bottom);
+  display: -webkit-inline-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 50%;
+          flex: 1 1 50%;
+}
+
+:host([action-text]) igc-button::part(base) {
+  text-transform: uppercase;
+  font-weight: 600;
+}
+:host([action-text]) igc-button::part(base):hover::before {
+  background: transparent;
+}
+:host([action-text]) igc-button::part(base):focus {
+  background: transparent;
+  outline: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+:host([action-text]) igc-button::part(base):focus::before {
+  background: transparent;
+}
+
+:host(:not([open])) [part=base] {
+  display: none;
+}`;
 //# sourceMappingURL=snackbar.base.css.js.map

package/components/snackbar/themes/light/snackbar.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.base.css.js","sourceRoot":"","sources":["../../../../../src/components/snackbar/themes/light/snackbar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,g/EAAg/E,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{font-family:var(--igc-font-family);position:fixed;bottom:0;left:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}[part~=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*.25rem,.25rem);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:row nowrap;flex-wrap:row nowrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:3rem;padding:.4375rem 1.5rem;margin:.5rem;gap:1.5rem;color:var(--igc-gray-900-contrast);background:hsla(var(--igc-gray-900), 0.9);-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}[part~=message]{font-family:var(--igc-body-2-font-family);font-weight:var(--igc-body-2-font-weight);font-size:var(--igc-body-2-font-size);font-style:var(--igc-body-2-font-style);letter-spacing:var(--igc-body-2-letter-spacing);text-transform:var(--igc-body-2-text-transform);line-height:var(--igc-body-2-line-height);margin-top:var(--igc-body-2-margin-top);margin-bottom:var(--igc-body-2-margin-bottom);display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 50%}:host([action-text]) igc-button::part(base){text-transform:uppercase;font-weight:600}:host([action-text]) igc-button::part(base):hover::before{background:rgba(0,0,0,0)}:host([action-text]) igc-button::part(base):focus{background:rgba(0,0,0,0);outline:none;-webkit-box-shadow:none;box-shadow:none}:host([action-text]) igc-button::part(base):focus::before{background:rgba(0,0,0,0)}:host(:not([open])) [part=base]{display:none}`;\n"]}
+{"version":3,"file":"snackbar.base.css.js","sourceRoot":"","sources":["../../../../../src/components/snackbar/themes/light/snackbar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host {\n  font-family: var(--ig-font-family);\n  position: fixed;\n  bottom: 0;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n      -ms-transform: translate(-50%, -50%);\n          transform: translate(-50%, -50%);\n}\n\n[part~=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: row nowrap;\n      flex-wrap: row nowrap;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: justify;\n      -ms-flex-pack: justify;\n          justify-content: space-between;\n  min-height: 3rem;\n  padding: 0.4375rem 1.5rem;\n  margin: 0.5rem;\n  gap: 1.5rem;\n  color: var(--ig-gray-900-contrast);\n  background: hsla(var(--ig-gray-900), 0.9);\n  -webkit-box-shadow: var(--ig-elevation-4);\n          box-shadow: var(--ig-elevation-4);\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-backdrop-filter: blur(8px);\n          backdrop-filter: blur(8px);\n}\n\n[part~=message] {\n  font-family: var(--ig-body-2-font-family);\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  display: -webkit-inline-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  -webkit-box-flex: 1;\n      -ms-flex: 1 1 50%;\n          flex: 1 1 50%;\n}\n\n:host([action-text]) igc-button::part(base) {\n  text-transform: uppercase;\n  font-weight: 600;\n}\n:host([action-text]) igc-button::part(base):hover::before {\n  background: transparent;\n}\n:host([action-text]) igc-button::part(base):focus {\n  background: transparent;\n  outline: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n:host([action-text]) igc-button::part(base):focus::before {\n  background: transparent;\n}\n\n:host(:not([open])) [part=base] {\n  display: none;\n}`;\n"]}

package/components/snackbar/themes/light/snackbar.bootstrap.css.js

@@ -1,3 +1,12 @@
 import { css } from 'lit';
-export const styles = css `[part~=base]{background:hsla(var(--igc-surface-500), var(--igc-surface-a));color:var(--igc-surface-500-contrast);-webkit-box-shadow:var(--igc-elevation-10);box-shadow:var(--igc-elevation-10)}igc-button::part(base):hover{color:hsla(var(--igc-primary-500), var(--igc-primary-a))}`;
+export const styles = css `[part~=base] {
+  background: hsla(var(--ig-surface-500), var(--ig-surface-a));
+  color: var(--ig-surface-500-contrast);
+  -webkit-box-shadow: var(--ig-elevation-10);
+          box-shadow: var(--ig-elevation-10);
+}
+
+igc-button::part(base):hover {
+  color: hsla(var(--ig-primary-500), var(--ig-primary-a));
+}`;
 //# sourceMappingURL=snackbar.bootstrap.css.js.map

package/components/snackbar/themes/light/snackbar.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/snackbar/themes/light/snackbar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,uRAAuR,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=base]{background:hsla(var(--igc-surface-500), var(--igc-surface-a));color:var(--igc-surface-500-contrast);-webkit-box-shadow:var(--igc-elevation-10);box-shadow:var(--igc-elevation-10)}igc-button::part(base):hover{color:hsla(var(--igc-primary-500), var(--igc-primary-a))}`;\n"]}
+{"version":3,"file":"snackbar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/snackbar/themes/light/snackbar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;EASvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=base] {\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  color: var(--ig-surface-500-contrast);\n  -webkit-box-shadow: var(--ig-elevation-10);\n          box-shadow: var(--ig-elevation-10);\n}\n\nigc-button::part(base):hover {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}`;\n"]}

package/components/snackbar/themes/light/snackbar.fluent.css.js

@@ -1,3 +1,26 @@
 import { css } from 'lit';
-export const styles = css `[part~=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*.125rem,.125rem)}[part~=message]{font-family:var(--igc-caption-font-family);font-weight:var(--igc-caption-font-weight);font-size:var(--igc-caption-font-size);font-style:var(--igc-caption-font-style);letter-spacing:var(--igc-caption-letter-spacing);text-transform:var(--igc-caption-text-transform);line-height:var(--igc-caption-line-height);margin-top:var(--igc-caption-margin-top);margin-bottom:var(--igc-caption-margin-bottom)}igc-button::part(base),igc-button::part(base):hover{color:hsla(var(--igc-secondary-500), var(--igc-secondary-a))}igc-button::part(base):focus-visible::after{display:none}`;
+export const styles = css `[part~=base] {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.125rem), 0.125rem);
+}
+
+[part~=message] {
+  font-family: var(--ig-caption-font-family);
+  font-size: var(--ig-caption-font-size);
+  font-weight: var(--ig-caption-font-weight);
+  font-style: var(--ig-caption-font-style);
+  line-height: var(--ig-caption-line-height);
+  letter-spacing: var(--ig-caption-letter-spacing);
+  text-transform: var(--ig-caption-text-transform);
+  margin-top: var(--ig-caption-margin-top);
+  margin-bottom: var(--ig-caption-margin-bottom);
+}
+
+igc-button::part(base),
+igc-button::part(base):hover {
+  color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
+}
+
+igc-button::part(base):focus-visible::after {
+  display: none;
+}`;
 //# sourceMappingURL=snackbar.fluent.css.js.map

package/components/snackbar/themes/light/snackbar.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/snackbar/themes/light/snackbar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,upBAAupB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*.125rem,.125rem)}[part~=message]{font-family:var(--igc-caption-font-family);font-weight:var(--igc-caption-font-weight);font-size:var(--igc-caption-font-size);font-style:var(--igc-caption-font-style);letter-spacing:var(--igc-caption-letter-spacing);text-transform:var(--igc-caption-text-transform);line-height:var(--igc-caption-line-height);margin-top:var(--igc-caption-margin-top);margin-bottom:var(--igc-caption-margin-bottom)}igc-button::part(base),igc-button::part(base):hover{color:hsla(var(--igc-secondary-500), var(--igc-secondary-a))}igc-button::part(base):focus-visible::after{display:none}`;\n"]}
+{"version":3,"file":"snackbar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/snackbar/themes/light/snackbar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.125rem), 0.125rem);\n}\n\n[part~=message] {\n  font-family: var(--ig-caption-font-family);\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n}\n\nigc-button::part(base),\nigc-button::part(base):hover {\n  color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\nigc-button::part(base):focus-visible::after {\n  display: none;\n}`;\n"]}

package/components/snackbar/themes/light/snackbar.indigo.css.js

@@ -1,3 +1,12 @@
 import { css } from 'lit';
-export const styles = css `[part~=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*.375rem,.375rem);background:var(--background-color, hsla(var(--igc-gray-700), 0.9));color:var(--text-color, var(--igc-gray-700-contrast))}igc-button::part(base),igc-button::part(base):hover{color:var(--text-color, var(--igc-gray-700-contrast))}`;
+export const styles = css `[part~=base] {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.375rem), 0.375rem);
+  background: var(--background-color, hsla(var(--ig-gray-700), 0.9));
+  color: var(--text-color, var(--ig-gray-700-contrast));
+}
+
+igc-button::part(base),
+igc-button::part(base):hover {
+  color: var(--text-color, var(--ig-gray-700-contrast));
+}`;
 //# sourceMappingURL=snackbar.indigo.css.js.map

package/components/snackbar/themes/light/snackbar.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/snackbar/themes/light/snackbar.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,qTAAqT,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*.375rem,.375rem);background:var(--background-color, hsla(var(--igc-gray-700), 0.9));color:var(--text-color, var(--igc-gray-700-contrast))}igc-button::part(base),igc-button::part(base):hover{color:var(--text-color, var(--igc-gray-700-contrast))}`;\n"]}
+{"version":3,"file":"snackbar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/snackbar/themes/light/snackbar.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;EASvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.375rem), 0.375rem);\n  background: var(--background-color, hsla(var(--ig-gray-700), 0.9));\n  color: var(--text-color, var(--ig-gray-700-contrast));\n}\n\nigc-button::part(base),\nigc-button::part(base):hover {\n  color: var(--text-color, var(--ig-gray-700-contrast));\n}`;\n"]}

package/components/tabs/tab-panel.js

@@ -7,9 +7,8 @@ export default class IgcTabPanelComponent extends LitElement {
         this.tabIndex = this.hasAttribute('tabindex') ? this.tabIndex : 0;
         this.slot = this.slot.length > 0 ? this.slot : 'panel';
         this.id =
-            this.id.length > 0
-                ? this.id
-                : `igc-tab-panel-${IgcTabPanelComponent.increment()}`;
+            this.getAttribute('id') ||
+                `igc-tab-panel-${IgcTabPanelComponent.increment()}`;
     }
     render() {
         return html `<slot></slot>`;

package/components/tabs/tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAS9D,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,UAAU;IAO1C,iBAAiB;QAC/B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QAClE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;QACvD,IAAI,CAAC,EAAE;YACL,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC;gBAChB,CAAC,CAAC,IAAI,CAAC,EAAE;gBACT,CAAC,CAAC,iBAAiB,oBAAoB,CAAC,SAAS,EAAE,EAAE,CAAC;IAC5D,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAlBsB,4BAAO,GAAG,eAAe,CAAC;AAE1B,2BAAM,GAAG,MAAM,CAAC;AAEf,8BAAS,GAAG,aAAa,EAAE,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\nimport { createCounter } from '../common/util.js';\nimport { styles } from './themes/light/tab-panel.base.css.js';\n\n/**\n * Represents the content of a tab\n *\n * @element igc-tab-panel\n *\n * @slot - Renders the content.\n */\nexport default class IgcTabPanelComponent extends LitElement {\n  public static readonly tagName = 'igc-tab-panel';\n\n  public static override styles = styles;\n\n  private static readonly increment = createCounter();\n\n  public override connectedCallback() {\n    this.setAttribute('role', 'tabpanel');\n    this.tabIndex = this.hasAttribute('tabindex') ? this.tabIndex : 0;\n    this.slot = this.slot.length > 0 ? this.slot : 'panel';\n    this.id =\n      this.id.length > 0\n        ? this.id\n        : `igc-tab-panel-${IgcTabPanelComponent.increment()}`;\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tab-panel': IgcTabPanelComponent;\n  }\n}\n"]}
+{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAS9D,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,UAAU;IAO1C,iBAAiB;QAC/B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QAClE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;QACvD,IAAI,CAAC,EAAE;YACL,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACvB,iBAAiB,oBAAoB,CAAC,SAAS,EAAE,EAAE,CAAC;IACxD,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAjBsB,4BAAO,GAAG,eAAe,CAAC;AAE1B,2BAAM,GAAG,MAAM,CAAC;AAEf,8BAAS,GAAG,aAAa,EAAE,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\nimport { createCounter } from '../common/util.js';\nimport { styles } from './themes/light/tab-panel.base.css.js';\n\n/**\n * Represents the content of a tab\n *\n * @element igc-tab-panel\n *\n * @slot - Renders the content.\n */\nexport default class IgcTabPanelComponent extends LitElement {\n  public static readonly tagName = 'igc-tab-panel';\n\n  public static override styles = styles;\n\n  private static readonly increment = createCounter();\n\n  public override connectedCallback() {\n    this.setAttribute('role', 'tabpanel');\n    this.tabIndex = this.hasAttribute('tabindex') ? this.tabIndex : 0;\n    this.slot = this.slot.length > 0 ? this.slot : 'panel';\n    this.id =\n      this.getAttribute('id') ||\n      `igc-tab-panel-${IgcTabPanelComponent.increment()}`;\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tab-panel': IgcTabPanelComponent;\n  }\n}\n"]}

package/components/tabs/tab.js

@@ -23,7 +23,7 @@ let IgcTabComponent = IgcTabComponent_1 = class IgcTabComponent extends LitEleme
     connectedCallback() {
         super.connectedCallback();
         this.id =
-            this.id.length > 0 ? this.id : `igc-tab-${IgcTabComponent_1.increment()}`;
+            this.getAttribute('id') || `igc-tab-${IgcTabComponent_1.increment()}`;
     }
     focus(options) {
         this.tab.focus(options);

package/components/tabs/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAgBpE,IAAqB,eAAe,uBAApC,MAAqB,eAAgB,SAAQ,UAAU;IAAvD;;QAYS,UAAK,GAAG,EAAE,CAAC;QAIX,aAAQ,GAAG,KAAK,CAAC;QAIjB,aAAQ,GAAG,KAAK,CAAC;IAmC1B,CAAC;IAjCiB,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE;YACL,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,iBAAe,CAAC,SAAS,EAAE,EAAE,CAAC;IAC5E,CAAC;IAGe,KAAK,CAAC,OAAsB;QAC1C,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC;IAGe,IAAI;QAClB,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;IAClB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;wBAIS,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;wBAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBACrC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;;KAQtD,CAAC;IACJ,CAAC;CACF,CAAA;AAtDwB,uBAAO,GAAG,SAAU,CAAA;AAEpB,sBAAM,GAAG,MAAO,CAAA;AAEf,yBAAS,GAAG,aAAa,EAAG,CAAA;AAGpD;IADC,KAAK,CAAC,eAAe,EAAE,IAAI,CAAC;4CACH;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACT;AAIlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AAIxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AApBL,eAAe;IADnC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,eAAe,CAuDnC;eAvDoB,eAAe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { createCounter } from '../common/util.js';\nimport { styles } from './themes/light/tab.base.css.js';\nimport { styles as bootstrap } from './themes/light/tab.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/tab.fluent.css.js';\nimport { styles as indigo } from './themes/light/tab.indigo.css.js';\n\n/**\n * Represents the tab header.\n *\n * @element igc-tab\n *\n * @slot prefix - Renders before the tab header content.\n * @slot - Renders the tab header content.\n * @slot suffix - Renders after the tab header content.\n *\n * @csspart content - The content wrapper.\n * @csspart prefix - The prefix wrapper.\n * @csspart suffix - The suffix wrapper.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcTabComponent extends LitElement {\n  public static readonly tagName = 'igc-tab';\n\n  public static override styles = styles;\n\n  private static readonly increment = createCounter();\n\n  @query('[part=\"base\"]', true)\n  private tab!: HTMLElement;\n\n  /** The id of the tab panel which will be controlled by the tab. */\n  @property({ type: String })\n  public panel = '';\n\n  /** Determines whether the tab is selected. */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /** Determines whether the tab is disabled. */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.id =\n      this.id.length > 0 ? this.id : `igc-tab-${IgcTabComponent.increment()}`;\n  }\n\n  /** Sets focus to the tab. */\n  public override focus(options?: FocusOptions) {\n    this.tab.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  public override blur() {\n    this.tab.blur();\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"tab\"\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-selected=${this.selected ? 'true' : 'false'}\n        tabindex=${this.disabled || !this.selected ? -1 : 0}\n      >\n        <slot name=\"prefix\" part=\"prefix\"></slot>\n        <div part=\"content\">\n          <slot></slot>\n        </div>\n        <slot name=\"suffix\" part=\"suffix\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tab': IgcTabComponent;\n  }\n}\n"]}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAgBpE,IAAqB,eAAe,uBAApC,MAAqB,eAAgB,SAAQ,UAAU;IAAvD;;QAYS,UAAK,GAAG,EAAE,CAAC;QAIX,aAAQ,GAAG,KAAK,CAAC;QAIjB,aAAQ,GAAG,KAAK,CAAC;IAmC1B,CAAC;IAjCiB,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE;YACL,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,WAAW,iBAAe,CAAC,SAAS,EAAE,EAAE,CAAC;IACxE,CAAC;IAGe,KAAK,CAAC,OAAsB;QAC1C,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC;IAGe,IAAI;QAClB,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;IAClB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;wBAIS,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;wBAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBACrC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;;KAQtD,CAAC;IACJ,CAAC;CACF,CAAA;AAtDwB,uBAAO,GAAG,SAAU,CAAA;AAEpB,sBAAM,GAAG,MAAO,CAAA;AAEf,yBAAS,GAAG,aAAa,EAAG,CAAA;AAGpD;IADC,KAAK,CAAC,eAAe,EAAE,IAAI,CAAC;4CACH;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACT;AAIlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AAIxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AApBL,eAAe;IADnC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,eAAe,CAuDnC;eAvDoB,eAAe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { createCounter } from '../common/util.js';\nimport { styles } from './themes/light/tab.base.css.js';\nimport { styles as bootstrap } from './themes/light/tab.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/tab.fluent.css.js';\nimport { styles as indigo } from './themes/light/tab.indigo.css.js';\n\n/**\n * Represents the tab header.\n *\n * @element igc-tab\n *\n * @slot prefix - Renders before the tab header content.\n * @slot - Renders the tab header content.\n * @slot suffix - Renders after the tab header content.\n *\n * @csspart content - The content wrapper.\n * @csspart prefix - The prefix wrapper.\n * @csspart suffix - The suffix wrapper.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcTabComponent extends LitElement {\n  public static readonly tagName = 'igc-tab';\n\n  public static override styles = styles;\n\n  private static readonly increment = createCounter();\n\n  @query('[part=\"base\"]', true)\n  private tab!: HTMLElement;\n\n  /** The id of the tab panel which will be controlled by the tab. */\n  @property({ type: String })\n  public panel = '';\n\n  /** Determines whether the tab is selected. */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /** Determines whether the tab is disabled. */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.id =\n      this.getAttribute('id') || `igc-tab-${IgcTabComponent.increment()}`;\n  }\n\n  /** Sets focus to the tab. */\n  public override focus(options?: FocusOptions) {\n    this.tab.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  public override blur() {\n    this.tab.blur();\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"tab\"\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-selected=${this.selected ? 'true' : 'false'}\n        tabindex=${this.disabled || !this.selected ? -1 : 0}\n      >\n        <slot name=\"prefix\" part=\"prefix\"></slot>\n        <div part=\"content\">\n          <slot></slot>\n        </div>\n        <slot name=\"suffix\" part=\"suffix\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tab': IgcTabComponent;\n  }\n}\n"]}

package/components/tabs/tabs.d.ts

@@ -1,8 +1,7 @@
-import '../button/icon-button';
 import { LitElement, nothing } from 'lit';
-import type IgcTabComponent from './tab';
-import type IgcTabPanelComponent from './tab-panel';
 import { Constructor } from '../common/mixins/constructor.js';
+import IgcTabComponent from './tab.js';
+import IgcTabPanelComponent from './tab-panel.js';
 export interface IgcTabsEventMap {
     igcChange: CustomEvent<IgcTabComponent>;
 }
@@ -42,7 +41,6 @@ export default class IgcTabsComponent extends IgcTabsComponent_base {
     protected resizeObserver: ResizeObserver;
     protected mutationObserver: MutationObserver;
     protected get enabledTabs(): IgcTabComponent[];
-    protected get isLTR(): boolean;
     /** Returns the currently selected tab. */
     get selected(): string;
     /** Sets the alignment for the tab headers */

package/components/tabs/tabs.js

@@ -5,18 +5,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var IgcTabsComponent_1;
-import '../button/icon-button';
 import { html, LitElement, nothing } from 'lit';
 import { eventOptions, property, query, queryAssignedElements, state, } from 'lit/decorators.js';
 import { watch } from '../common/decorators/watch.js';
+import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { styles } from './themes/light/tabs.base.css.js';
 import { styles as bootstrap } from './themes/light/tabs.bootstrap.css.js';
 import { styles as fluent } from './themes/light/tabs.fluent.css.js';
 import { styles as indigo } from './themes/light/tabs.indigo.css.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { createCounter, getOffset } from '../common/util.js';
+import { createCounter, getOffset, isLTR } from '../common/util.js';
 import { getAttributesForTags, getNodesForTags, observerConfig, } from './utils.js';
+import { defineComponents } from '../common/definitions/defineComponents.js';
+import IgcTabComponent from './tab.js';
+import IgcTabPanelComponent from './tab-panel.js';
+import IgcIconButtonComponent from '../button/icon-button.js';
+defineComponents(IgcTabComponent, IgcTabPanelComponent, IgcIconButtonComponent);
 let IgcTabsComponent = IgcTabsComponent_1 = class IgcTabsComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
@@ -29,15 +34,16 @@ let IgcTabsComponent = IgcTabsComponent_1 = class IgcTabsComponent extends Event
             var _a;
             const { key } = event;
             const enabledTabs = this.enabledTabs;
+            const ltr = isLTR(this);
             let index = enabledTabs.indexOf((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('igc-tab'));
             switch (key) {
                 case 'ArrowLeft':
-                    index = this.isLTR
+                    index = ltr
                         ? (enabledTabs.length + index - 1) % enabledTabs.length
                         : (index + 1) % enabledTabs.length;
                     break;
                 case 'ArrowRight':
-                    index = this.isLTR
+                    index = ltr
                         ? (index + 1) % enabledTabs.length
                         : (enabledTabs.length + index - 1) % enabledTabs.length;
                     break;
@@ -68,9 +74,6 @@ let IgcTabsComponent = IgcTabsComponent_1 = class IgcTabsComponent extends Event
     get enabledTabs() {
         return this.tabs.filter((tab) => !tab.disabled);
     }
-    get isLTR() {
-        return (window.getComputedStyle(this).getPropertyValue('direction') === 'ltr');
-    }
     get selected() {
         var _a, _b;
         return (_b = (_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel) !== null && _b !== void 0 ? _b : '';
@@ -83,7 +86,7 @@ let IgcTabsComponent = IgcTabsComponent_1 = class IgcTabsComponent extends Event
         if (this.activeTab) {
             Object.assign(styles, {
                 width: `${this.activeTab.offsetWidth}px`,
-                transform: `translate(${this.isLTR
+                transform: `translate(${isLTR(this)
                     ? getOffset(this.activeTab, this.wrapper).left
                     : getOffset(this.activeTab, this.wrapper).right}px)`,
             });
@@ -188,7 +191,7 @@ let IgcTabsComponent = IgcTabsComponent_1 = class IgcTabsComponent extends Event
     }
     scrollByTabOffset(direction) {
         const { scrollLeft, offsetWidth } = this.container;
-        const LTR = this.isLTR, next = direction === 'end';
+        const LTR = isLTR(this), next = direction === 'end';
         const pivot = Math.abs(next ? offsetWidth + scrollLeft : scrollLeft);
         let amount = this.tabs
             .map((tab) => ({
@@ -200,7 +203,7 @@ let IgcTabsComponent = IgcTabsComponent_1 = class IgcTabsComponent extends Event
             .filter((offset) => next ? offset.start + offset.width > pivot : offset.start < pivot)
             .at(next ? 0 : -1).width;
         amount *= next ? 1 : -1;
-        this.container.scrollBy({ left: this.isLTR ? amount : -amount });
+        this.container.scrollBy({ left: LTR ? amount : -amount });
     }
     handleClick(event) {
         const target = event.target;
@@ -222,6 +225,8 @@ let IgcTabsComponent = IgcTabsComponent_1 = class IgcTabsComponent extends Event
         const start = direction === 'start';
         return this.showScrollButtons
             ? html `<igc-icon-button
+          tabindex="-1"
+          aria-hidden="true"
           size="large"
           variant="flat"
           collection="internal"
@@ -302,7 +307,8 @@ __decorate([
     eventOptions({ passive: true })
 ], IgcTabsComponent.prototype, "handleScroll", null);
 IgcTabsComponent = IgcTabsComponent_1 = __decorate([
-    themes({ bootstrap, fluent, indigo })
+    themes({ bootstrap, fluent, indigo }),
+    blazorAdditionalDependencies('IgcTabComponent, IgcTabPanelComponent')
 ], IgcTabsComponent);
 export default IgcTabsComponent;
 //# sourceMappingURL=tabs.js.map

package/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EACL,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,qBAAqB,EACrB,KAAK,GACN,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAG5D,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,cAAc,GACf,MAAM,YAAY,CAAC;AA0BpB,IAAqB,gBAAgB,wBAArC,MAAqB,gBAAiB,SAAQ,iBAAiB,CAG7D,UAAU,CAAC;IAHb;;QAyBY,sBAAiB,GAAG,KAAK,CAAC;QAG1B,6BAAwB,GAAG,IAAI,CAAC;QAGhC,2BAAsB,GAAG,KAAK,CAAC;QAyBlC,cAAS,GAA2C,OAAO,CAAC;QAS5D,eAAU,GAAsB,MAAM,CAAC;QAgMpC,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;;YACjD,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YACtB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YAErC,IAAI,KAAK,GAAG,WAAW,CAAC,OAAO,CAC7B,MAAA,QAAQ,CAAC,aAAa,0CAAE,OAAO,CAAC,SAAS,CAAoB,CAC9D,CAAC;YAEF,QAAQ,GAAG,EAAE;gBACX,KAAK,WAAW;oBACd,KAAK,GAAG,IAAI,CAAC,KAAK;wBAChB,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC,GAAG,WAAW,CAAC,MAAM;wBACvD,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC;oBACrC,MAAM;gBACR,KAAK,YAAY;oBACf,KAAK,GAAG,IAAI,CAAC,KAAK;wBAChB,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,WAAW,CAAC,MAAM;wBAClC,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC;oBAC1D,MAAM;gBACR,KAAK,MAAM;oBACT,KAAK,GAAG,CAAC,CAAC;oBACV,MAAM;gBACR,KAAK,KAAK;oBACR,KAAK,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;oBAC/B,MAAM;gBACR,KAAK,OAAO,CAAC;gBACb,KAAK,GAAG;oBACN,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;oBACxC,MAAM;gBACR;oBACE,OAAO;aACV;YAED,WAAW,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YAElD,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE;gBAC9B,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;gBACxC,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;aACzD;iBAAM;gBACL,WAAW,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;aACzD;YAED,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,CAAC;IAsDJ,CAAC;IA3TC,IAAc,WAAW;QACvB,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAClD,CAAC;IAED,IAAc,KAAK;QACjB,OAAO,CACL,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,WAAW,CAAC,KAAK,KAAK,CACtE,CAAC;IACJ,CAAC;IAGD,IAAW,QAAQ;;QACjB,OAAO,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,mCAAI,EAAE,CAAC;IACrC,CAAC;IAgBS,cAAc;QACtB,MAAM,MAAM,GAAiC;YAC3C,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;YACjD,kBAAkB,EAAE,MAAM;SAC3B,CAAC;QAEF,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;gBACpB,KAAK,EAAE,GAAG,IAAI,CAAC,SAAU,CAAC,WAAW,IAAI;gBACzC,SAAS,EAAE,aACT,IAAI,CAAC,KAAK;oBACR,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,SAAU,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI;oBAC/C,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,SAAU,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,KAC/C,KAAK;aACN,CAAC,CAAC;SACJ;QAED,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACtD,CAAC;IAEkB,KAAK,CAAC,YAAY;;QACnC,IAAI,CAAC,iBAAiB;YACpB,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;QAE1D,MAAM,IAAI,CAAC,cAAc,CAAC;QAE1B,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,cAAc,CACjB,MAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mCAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CACzE,CAAC;IACJ,CAAC;IAEe,oBAAoB;;QAClC,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;QAClC,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAES,qBAAqB;QAG7B,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,IAAI,CAAC,iBAAiB;YACpB,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;QAE1D,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAES,mBAAmB;QAC3B,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,EAChD,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;QAEjC,IAAI,CAAC,sBAAsB;YACzB,WAAW,IAAI,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,WAAW,CAAC;QACpD,IAAI,CAAC,wBAAwB,GAAG,UAAU,KAAK,CAAC,CAAC;IACnD,CAAC;IAES,aAAa;QACrB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC5C,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;QAEH,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAC/D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CACrC,CAAC;QAEF,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;;YAEvE,QAAQ,CAAC,UAAU,EAAE,CAAC;YAEtB,MAAM,UAAU,GAAG,oBAAoB,CACrC,OAAO,EACP,SAAS,CACV,CAAC;YACF,MAAM,OAAO,GAAG,eAAe,CAC7B,OAAO,EACP,IAAI,EACJ,SAAS,CACV,CAAC;YAEF,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;gBACzB,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;aACzD;YAED,IAAI,OAAO,EAAE;gBACX,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;oBACjC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;oBACjC,IAAI,GAAG,CAAC,QAAQ,EAAE;wBAChB,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;qBACtB;gBACH,CAAC,CAAC,CAAC;gBACH,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;oBACnC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;oBACnC,IAAI,GAAG,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,KAAK,GAAG,EAAE;wBAC1C,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;qBAC5B;gBACH,CAAC,CAAC,CAAC;gBAEH,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;YAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,MAAA,IAAI,CAAC,SAAS,0CAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;YACrD,IAAI,CAAC,cAAc,EAAE,CAAC;YAGtB,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IACtD,CAAC;IAES,iBAAiB;QACzB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,GAAG,GAAG,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;QACpE,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;;YAC5B,OAAA,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE;gBACzB,OAAO,EAAE,KAAK,CAAC,EAAE,MAAK,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CAAA,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;aAC/D,CAAC,CAAA;SAAA,CACH,CAAC;IACJ,CAAC;IAES,cAAc;QACtB,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5C,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;;YAC/B,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE;gBACd,GAAG,CAAC,KAAK;oBACP,MAAA,MAAA,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,0CAAE,EAAE,mCACzB,GAAG,MAAM,OAAO,kBAAgB,CAAC,SAAS,EAAE,EAAE,CAAC;aAClD;YACD,MAAA,IAAI,CAAC,MAAM;iBACR,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,CAAC,KAAK,CAAC,0CACtC,YAAY,CAAC,iBAAiB,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,cAAc,CAAC,GAAqB;QAC1C,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,IAAI,CAAC,SAAS,EAAE;YAClC,OAAO;SACR;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,KAAK,CAAC;SACjC;QAED,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC;IACjC,CAAC;IAES,iBAAiB,CAAC,SAA0B;QACpD,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QACnD,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EACpB,IAAI,GAAG,SAAS,KAAK,KAAK,CAAC;QAE7B,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;QAErE,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI;aACnB,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YACb,KAAK,EAAE,GAAG;gBACR,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI;gBACnC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;YAChD,KAAK,EAAE,GAAG,CAAC,WAAW;SACvB,CAAC,CAAC;aACF,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CACjB,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAClE;aACA,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAAC,KAAK,CAAC;QAE5B,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;IACnE,CAAC;IAES,WAAW,CAAC,KAAiB;QACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAEtC,IAAI,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,QAAQ,EAAE;YAChD,OAAO;SACR;QAED,GAAG,CAAC,KAAK,EAAE,CAAC;QACZ,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QACzB,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;IAC1D,CAAC;IAgDS,YAAY;QACpB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAGM,MAAM,CAAC,IAAY;QACxB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC;IACjE,CAAC;IAES,kBAAkB,CAAC,SAA0B;QACrD,MAAM,KAAK,GAAG,SAAS,KAAK,OAAO,CAAC;QAEpC,OAAO,IAAI,CAAC,iBAAiB;YAC3B,CAAC,CAAC,IAAI,CAAA;;;;kBAIM,SAAS;2BACA,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;sBAC9B,KAAK;gBACf,CAAC,CAAC,IAAI,CAAC,wBAAwB;gBAC/B,CAAC,CAAC,IAAI,CAAC,sBAAsB;mBACtB,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC;4BAC9B;YACtB,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC;8CACI,IAAI,CAAC,YAAY;;;;;uBAKxC,IAAI,CAAC,WAAW;yBACd,IAAI,CAAC,aAAa;;;;;;;UAOjC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;;;;;KAKnC,CAAC;IACJ,CAAC;CACF,CAAA;AA9VwB,wBAAO,GAAG,UAAW,CAAA;AAE9B,uBAAM,GAAG,MAAO,CAAA;AACN,0BAAS,GAAG,aAAa,EAAG,CAAA;AAGpD;IADC,qBAAqB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;8CACP;AAGxC;IADC,qBAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACM;AAG/C;IADC,KAAK,CAAC,0BAA0B,EAAE,IAAI,CAAC;iDACR;AAGhC;IADC,KAAK,CAAC,0BAA0B,EAAE,IAAI,CAAC;mDACN;AAGlC;IADC,KAAK,CAAC,6BAA6B,EAAE,IAAI,CAAC;2DACD;AAG1C;IADC,KAAK,EAAE;2DAC4B;AAGpC;IADC,KAAK,EAAE;kEACkC;AAG1C;IADC,KAAK,EAAE;gEACiC;AAGzC;IADC,KAAK,EAAE;mDAC8B;AAsBtC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACuC;AASnE;IADC,QAAQ,EAAE;oDACmC;AAG9C;IADC,KAAK,CAAC,WAAW,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;sDAmBlD;AAyND;IADC,YAAY,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAG/B;AAjTkB,gBAAgB;IADpC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,gBAAgB,CAkWpC;eAlWoB,gBAAgB","sourcesContent":["import '../button/icon-button';\nimport { html, LitElement, nothing } from 'lit';\nimport {\n  eventOptions,\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport type IgcTabComponent from './tab';\nimport type IgcTabPanelComponent from './tab-panel';\nimport { styles } from './themes/light/tabs.base.css.js';\nimport { styles as bootstrap } from './themes/light/tabs.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/tabs.fluent.css.js';\nimport { styles as indigo } from './themes/light/tabs.indigo.css.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { createCounter, getOffset } from '../common/util.js';\nimport {\n  getAttributesForTags,\n  getNodesForTags,\n  observerConfig,\n} from './utils.js';\n\nexport interface IgcTabsEventMap {\n  igcChange: CustomEvent<IgcTabComponent>;\n}\n\n/**\n * Represents tabs component\n *\n * @element igc-tabs\n *\n * @fires igcChange - Emitted when the selected tab changes.\n *\n * @slot - Renders the tab header.\n * @slot panel - Renders the tab content.\n *\n * @csspart headers - The wrapper of the tabs including the headers content and the scroll buttons.\n * @csspart headers-content - The container for the tab headers.\n * @csspart headers-wrapper - The wrapper for the tab headers and the selected indicator.\n * @csspart headers-scroll - The container for the headers.\n * @csspart selected-indicator - The selected indicator.\n * @csspart start-scroll-button - The start scroll button displayed when the tabs overflow.\n * @csspart end-scroll-button - The end scroll button displayed when the tabs overflow.\n * @csspart content - The container for the tabs content.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcTabsComponent extends EventEmitterMixin<\n  IgcTabsEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-tabs';\n\n  public static styles = styles;\n  private static readonly increment = createCounter();\n\n  @queryAssignedElements({ selector: 'igc-tab' })\n  protected tabs!: Array<IgcTabComponent>;\n\n  @queryAssignedElements({ slot: 'panel' })\n  protected panels!: Array<IgcTabPanelComponent>;\n\n  @query('[part=\"headers-wrapper\"]', true)\n  protected wrapper!: HTMLElement;\n\n  @query('[part=\"headers-content\"]', true)\n  protected container!: HTMLElement;\n\n  @query('[part=\"selected-indicator\"]', true)\n  protected selectedIndicator!: HTMLElement;\n\n  @state()\n  protected showScrollButtons = false;\n\n  @state()\n  protected disableStartScrollButton = true;\n\n  @state()\n  protected disableEndScrollButton = false;\n\n  @state()\n  protected activeTab?: IgcTabComponent;\n\n  protected resizeObserver!: ResizeObserver;\n  protected mutationObserver!: MutationObserver;\n\n  protected get enabledTabs() {\n    return this.tabs.filter((tab) => !tab.disabled);\n  }\n\n  protected get isLTR() {\n    return (\n      window.getComputedStyle(this).getPropertyValue('direction') === 'ltr'\n    );\n  }\n\n  /** Returns the currently selected tab. */\n  public get selected(): string {\n    return this.activeTab?.panel ?? '';\n  }\n\n  /** Sets the alignment for the tab headers */\n  @property({ reflect: true })\n  public alignment: 'start' | 'end' | 'center' | 'justify' = 'start';\n\n  /**\n   * Determines the tab activation. When set to auto,\n   * the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys\n   * and the corresponding panel is displayed.\n   * When set to manual, the tab is only focused. The selection happens after pressing Space or Enter.\n   */\n  @property()\n  public activation: 'auto' | 'manual' = 'auto';\n\n  @watch('alignment', { waitUntilFirstUpdate: true })\n  protected alignIndicator() {\n    const styles: Partial<CSSStyleDeclaration> = {\n      visibility: this.activeTab ? 'visible' : 'hidden',\n      transitionDuration: '0.3s',\n    };\n\n    if (this.activeTab) {\n      Object.assign(styles, {\n        width: `${this.activeTab!.offsetWidth}px`,\n        transform: `translate(${\n          this.isLTR\n            ? getOffset(this.activeTab!, this.wrapper).left\n            : getOffset(this.activeTab!, this.wrapper).right\n        }px)`,\n      });\n    }\n\n    Object.assign(this.selectedIndicator.style, styles);\n  }\n\n  protected override async firstUpdated() {\n    this.showScrollButtons =\n      this.container.scrollWidth > this.container.clientWidth;\n\n    await this.updateComplete;\n\n    this.syncAttributes();\n    this.setupObserver();\n    this.setSelectedTab(\n      this.tabs.filter((tab) => tab.selected).at(-1) ?? this.enabledTabs.at(0)\n    );\n  }\n\n  public override disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\n    super.disconnectedCallback();\n  }\n\n  protected updateButtonsOnResize() {\n    // Hide the buttons in the resize observer callback and synchronously update the DOM\n    // in order to get the actual size\n    this.showScrollButtons = false;\n    this.performUpdate();\n\n    this.showScrollButtons =\n      this.container.scrollWidth > this.container.clientWidth;\n\n    this.updateScrollButtons();\n  }\n\n  protected updateScrollButtons() {\n    const { scrollLeft, offsetWidth } = this.container,\n      { scrollWidth } = this.wrapper;\n\n    this.disableEndScrollButton =\n      scrollWidth <= Math.abs(scrollLeft) + offsetWidth;\n    this.disableStartScrollButton = scrollLeft === 0;\n  }\n\n  protected setupObserver() {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.updateButtonsOnResize();\n      this.alignIndicator();\n    });\n\n    [this.container, this.wrapper, ...this.tabs].forEach((element) =>\n      this.resizeObserver.observe(element)\n    );\n\n    this.mutationObserver = new MutationObserver(async (records, observer) => {\n      // Stop observing while handling changes\n      observer.disconnect();\n\n      const attributes = getAttributesForTags<IgcTabComponent>(\n        records,\n        'igc-tab'\n      );\n      const changed = getNodesForTags<IgcTabComponent>(\n        records,\n        this,\n        'igc-tab'\n      );\n\n      if (attributes.length > 0) {\n        this.activeTab = attributes.find((tab) => tab.selected);\n      }\n\n      if (changed) {\n        changed.addedNodes.forEach((tab) => {\n          this.resizeObserver.observe(tab);\n          if (tab.selected) {\n            this.activeTab = tab;\n          }\n        });\n        changed.removedNodes.forEach((tab) => {\n          this.resizeObserver.unobserve(tab);\n          if (tab.selected || this.activeTab === tab) {\n            this.activeTab = undefined;\n          }\n        });\n\n        this.syncAttributes();\n      }\n\n      this.updateSelectedTab();\n      this.activeTab?.scrollIntoView({ block: 'nearest' });\n      this.alignIndicator();\n\n      // Watch for changes again\n      await this.updateComplete;\n      observer.observe(this, observerConfig);\n    });\n\n    this.mutationObserver.observe(this, observerConfig);\n  }\n\n  protected updateSelectedTab() {\n    this.tabs.forEach((tab) => (tab.selected = tab === this.activeTab));\n    this.panels.forEach((panel) =>\n      Object.assign(panel.style, {\n        display: panel.id === this.activeTab?.panel ? 'block' : 'none',\n      })\n    );\n  }\n\n  protected syncAttributes() {\n    const prefix = this.id ? `${this.id}-` : '';\n    this.tabs.forEach((tab, index) => {\n      if (!tab.panel) {\n        tab.panel =\n          this.panels.at(index)?.id ??\n          `${prefix}tab-${IgcTabsComponent.increment()}`;\n      }\n      this.panels\n        .find((panel) => panel.id === tab.panel)\n        ?.setAttribute('aria-labelledby', tab.id);\n    });\n  }\n\n  private setSelectedTab(tab?: IgcTabComponent) {\n    if (!tab || tab === this.activeTab) {\n      return;\n    }\n\n    if (this.activeTab) {\n      this.activeTab.selected = false;\n    }\n\n    this.activeTab = tab;\n    this.activeTab.selected = true;\n  }\n\n  protected scrollByTabOffset(direction: 'start' | 'end') {\n    const { scrollLeft, offsetWidth } = this.container;\n    const LTR = this.isLTR,\n      next = direction === 'end';\n\n    const pivot = Math.abs(next ? offsetWidth + scrollLeft : scrollLeft);\n\n    let amount = this.tabs\n      .map((tab) => ({\n        start: LTR\n          ? getOffset(tab, this.wrapper).left\n          : Math.abs(getOffset(tab, this.wrapper).right),\n        width: tab.offsetWidth,\n      }))\n      .filter((offset) =>\n        next ? offset.start + offset.width > pivot : offset.start < pivot\n      )\n      .at(next ? 0 : -1)!.width;\n\n    amount *= next ? 1 : -1;\n    this.container.scrollBy({ left: this.isLTR ? amount : -amount });\n  }\n\n  protected handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('igc-tab');\n\n    if (!(tab && this.contains(tab)) || tab.disabled) {\n      return;\n    }\n\n    tab.focus();\n    this.setSelectedTab(tab);\n    this.emitEvent('igcChange', { detail: this.activeTab });\n  }\n\n  protected handleKeyDown = (event: KeyboardEvent) => {\n    const { key } = event;\n    const enabledTabs = this.enabledTabs;\n\n    let index = enabledTabs.indexOf(\n      document.activeElement?.closest('igc-tab') as IgcTabComponent\n    );\n\n    switch (key) {\n      case 'ArrowLeft':\n        index = this.isLTR\n          ? (enabledTabs.length + index - 1) % enabledTabs.length\n          : (index + 1) % enabledTabs.length;\n        break;\n      case 'ArrowRight':\n        index = this.isLTR\n          ? (index + 1) % enabledTabs.length\n          : (enabledTabs.length + index - 1) % enabledTabs.length;\n        break;\n      case 'Home':\n        index = 0;\n        break;\n      case 'End':\n        index = enabledTabs.length - 1;\n        break;\n      case 'Enter':\n      case ' ':\n        this.setSelectedTab(enabledTabs[index]);\n        break;\n      default:\n        return;\n    }\n\n    enabledTabs[index].focus({ preventScroll: true });\n\n    if (this.activation === 'auto') {\n      this.setSelectedTab(enabledTabs[index]);\n      this.emitEvent('igcChange', { detail: this.activeTab });\n    } else {\n      enabledTabs[index].scrollIntoView({ block: 'nearest' });\n    }\n\n    event.preventDefault();\n  };\n\n  @eventOptions({ passive: true })\n  protected handleScroll() {\n    this.updateScrollButtons();\n  }\n\n  /** Selects the specified tab and displays the corresponding panel.  */\n  public select(name: string) {\n    this.setSelectedTab(this.tabs.find((el) => el.panel === name));\n  }\n\n  protected renderScrollButton(direction: 'start' | 'end') {\n    const start = direction === 'start';\n\n    return this.showScrollButtons\n      ? html`<igc-icon-button\n          size=\"large\"\n          variant=\"flat\"\n          collection=\"internal\"\n          part=\"${direction}-scroll-button\"\n          name=\"navigate_${start ? 'before' : 'next'}\"\n          .disabled=${start\n            ? this.disableStartScrollButton\n            : this.disableEndScrollButton}\n          @click=${() => this.scrollByTabOffset(direction)}\n        ></igc-icon-button>`\n      : nothing;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"headers\">\n        ${this.renderScrollButton('start')}\n        <div part=\"headers-content\" @scroll=${this.handleScroll}>\n          <div part=\"headers-wrapper\">\n            <div\n              part=\"headers-scroll\"\n              role=\"tablist\"\n              @click=${this.handleClick}\n              @keydown=${this.handleKeyDown}\n            >\n              <slot></slot>\n            </div>\n            <div part=\"selected-indicator\"></div>\n          </div>\n        </div>\n        ${this.renderScrollButton('end')}\n      </div>\n      <div part=\"content\">\n        <slot name=\"panel\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tabs': IgcTabsComponent;\n  }\n}\n"]}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport {\n  eventOptions,\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/tabs.base.css.js';\nimport { styles as bootstrap } from './themes/light/tabs.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/tabs.fluent.css.js';\nimport { styles as indigo } from './themes/light/tabs.indigo.css.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { createCounter, getOffset, isLTR } from '../common/util.js';\nimport {\n  getAttributesForTags,\n  getNodesForTags,\n  observerConfig,\n} from './utils.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcTabComponent from './tab.js';\nimport IgcTabPanelComponent from './tab-panel.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\n\ndefineComponents(IgcTabComponent, IgcTabPanelComponent, IgcIconButtonComponent);\n\nexport interface IgcTabsEventMap {\n  igcChange: CustomEvent<IgcTabComponent>;\n}\n\n/**\n * Represents tabs component\n *\n * @element igc-tabs\n *\n * @fires igcChange - Emitted when the selected tab changes.\n *\n * @slot - Renders the tab header.\n * @slot panel - Renders the tab content.\n *\n * @csspart headers - The wrapper of the tabs including the headers content and the scroll buttons.\n * @csspart headers-content - The container for the tab headers.\n * @csspart headers-wrapper - The wrapper for the tab headers and the selected indicator.\n * @csspart headers-scroll - The container for the headers.\n * @csspart selected-indicator - The selected indicator.\n * @csspart start-scroll-button - The start scroll button displayed when the tabs overflow.\n * @csspart end-scroll-button - The end scroll button displayed when the tabs overflow.\n * @csspart content - The container for the tabs content.\n */\n@themes({ bootstrap, fluent, indigo })\n@blazorAdditionalDependencies('IgcTabComponent, IgcTabPanelComponent')\nexport default class IgcTabsComponent extends EventEmitterMixin<\n  IgcTabsEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-tabs';\n\n  public static styles = styles;\n  private static readonly increment = createCounter();\n\n  @queryAssignedElements({ selector: 'igc-tab' })\n  protected tabs!: Array<IgcTabComponent>;\n\n  @queryAssignedElements({ slot: 'panel' })\n  protected panels!: Array<IgcTabPanelComponent>;\n\n  @query('[part=\"headers-wrapper\"]', true)\n  protected wrapper!: HTMLElement;\n\n  @query('[part=\"headers-content\"]', true)\n  protected container!: HTMLElement;\n\n  @query('[part=\"selected-indicator\"]', true)\n  protected selectedIndicator!: HTMLElement;\n\n  @state()\n  protected showScrollButtons = false;\n\n  @state()\n  protected disableStartScrollButton = true;\n\n  @state()\n  protected disableEndScrollButton = false;\n\n  @state()\n  protected activeTab?: IgcTabComponent;\n\n  protected resizeObserver!: ResizeObserver;\n  protected mutationObserver!: MutationObserver;\n\n  protected get enabledTabs() {\n    return this.tabs.filter((tab) => !tab.disabled);\n  }\n\n  /** Returns the currently selected tab. */\n  public get selected(): string {\n    return this.activeTab?.panel ?? '';\n  }\n\n  /** Sets the alignment for the tab headers */\n  @property({ reflect: true })\n  public alignment: 'start' | 'end' | 'center' | 'justify' = 'start';\n\n  /**\n   * Determines the tab activation. When set to auto,\n   * the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys\n   * and the corresponding panel is displayed.\n   * When set to manual, the tab is only focused. The selection happens after pressing Space or Enter.\n   */\n  @property()\n  public activation: 'auto' | 'manual' = 'auto';\n\n  @watch('alignment', { waitUntilFirstUpdate: true })\n  protected alignIndicator() {\n    const styles: Partial<CSSStyleDeclaration> = {\n      visibility: this.activeTab ? 'visible' : 'hidden',\n      transitionDuration: '0.3s',\n    };\n\n    if (this.activeTab) {\n      Object.assign(styles, {\n        width: `${this.activeTab!.offsetWidth}px`,\n        transform: `translate(${\n          isLTR(this)\n            ? getOffset(this.activeTab!, this.wrapper).left\n            : getOffset(this.activeTab!, this.wrapper).right\n        }px)`,\n      });\n    }\n\n    Object.assign(this.selectedIndicator.style, styles);\n  }\n\n  protected override async firstUpdated() {\n    this.showScrollButtons =\n      this.container.scrollWidth > this.container.clientWidth;\n\n    await this.updateComplete;\n\n    this.syncAttributes();\n    this.setupObserver();\n    this.setSelectedTab(\n      this.tabs.filter((tab) => tab.selected).at(-1) ?? this.enabledTabs.at(0)\n    );\n  }\n\n  public override disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\n    super.disconnectedCallback();\n  }\n\n  protected updateButtonsOnResize() {\n    // Hide the buttons in the resize observer callback and synchronously update the DOM\n    // in order to get the actual size\n    this.showScrollButtons = false;\n    this.performUpdate();\n\n    this.showScrollButtons =\n      this.container.scrollWidth > this.container.clientWidth;\n\n    this.updateScrollButtons();\n  }\n\n  protected updateScrollButtons() {\n    const { scrollLeft, offsetWidth } = this.container,\n      { scrollWidth } = this.wrapper;\n\n    this.disableEndScrollButton =\n      scrollWidth <= Math.abs(scrollLeft) + offsetWidth;\n    this.disableStartScrollButton = scrollLeft === 0;\n  }\n\n  protected setupObserver() {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.updateButtonsOnResize();\n      this.alignIndicator();\n    });\n\n    [this.container, this.wrapper, ...this.tabs].forEach((element) =>\n      this.resizeObserver.observe(element)\n    );\n\n    this.mutationObserver = new MutationObserver(async (records, observer) => {\n      // Stop observing while handling changes\n      observer.disconnect();\n\n      const attributes = getAttributesForTags<IgcTabComponent>(\n        records,\n        'igc-tab'\n      );\n      const changed = getNodesForTags<IgcTabComponent>(\n        records,\n        this,\n        'igc-tab'\n      );\n\n      if (attributes.length > 0) {\n        this.activeTab = attributes.find((tab) => tab.selected);\n      }\n\n      if (changed) {\n        changed.addedNodes.forEach((tab) => {\n          this.resizeObserver.observe(tab);\n          if (tab.selected) {\n            this.activeTab = tab;\n          }\n        });\n        changed.removedNodes.forEach((tab) => {\n          this.resizeObserver.unobserve(tab);\n          if (tab.selected || this.activeTab === tab) {\n            this.activeTab = undefined;\n          }\n        });\n\n        this.syncAttributes();\n      }\n\n      this.updateSelectedTab();\n      this.activeTab?.scrollIntoView({ block: 'nearest' });\n      this.alignIndicator();\n\n      // Watch for changes again\n      await this.updateComplete;\n      observer.observe(this, observerConfig);\n    });\n\n    this.mutationObserver.observe(this, observerConfig);\n  }\n\n  protected updateSelectedTab() {\n    this.tabs.forEach((tab) => (tab.selected = tab === this.activeTab));\n    this.panels.forEach((panel) =>\n      Object.assign(panel.style, {\n        display: panel.id === this.activeTab?.panel ? 'block' : 'none',\n      })\n    );\n  }\n\n  protected syncAttributes() {\n    const prefix = this.id ? `${this.id}-` : '';\n    this.tabs.forEach((tab, index) => {\n      if (!tab.panel) {\n        tab.panel =\n          this.panels.at(index)?.id ??\n          `${prefix}tab-${IgcTabsComponent.increment()}`;\n      }\n      this.panels\n        .find((panel) => panel.id === tab.panel)\n        ?.setAttribute('aria-labelledby', tab.id);\n    });\n  }\n\n  private setSelectedTab(tab?: IgcTabComponent) {\n    if (!tab || tab === this.activeTab) {\n      return;\n    }\n\n    if (this.activeTab) {\n      this.activeTab.selected = false;\n    }\n\n    this.activeTab = tab;\n    this.activeTab.selected = true;\n  }\n\n  protected scrollByTabOffset(direction: 'start' | 'end') {\n    const { scrollLeft, offsetWidth } = this.container;\n    const LTR = isLTR(this),\n      next = direction === 'end';\n\n    const pivot = Math.abs(next ? offsetWidth + scrollLeft : scrollLeft);\n\n    let amount = this.tabs\n      .map((tab) => ({\n        start: LTR\n          ? getOffset(tab, this.wrapper).left\n          : Math.abs(getOffset(tab, this.wrapper).right),\n        width: tab.offsetWidth,\n      }))\n      .filter((offset) =>\n        next ? offset.start + offset.width > pivot : offset.start < pivot\n      )\n      .at(next ? 0 : -1)!.width;\n\n    amount *= next ? 1 : -1;\n    this.container.scrollBy({ left: LTR ? amount : -amount });\n  }\n\n  protected handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('igc-tab');\n\n    if (!(tab && this.contains(tab)) || tab.disabled) {\n      return;\n    }\n\n    tab.focus();\n    this.setSelectedTab(tab);\n    this.emitEvent('igcChange', { detail: this.activeTab });\n  }\n\n  protected handleKeyDown = (event: KeyboardEvent) => {\n    const { key } = event;\n    const enabledTabs = this.enabledTabs;\n    const ltr = isLTR(this);\n\n    let index = enabledTabs.indexOf(\n      document.activeElement?.closest('igc-tab') as IgcTabComponent\n    );\n\n    switch (key) {\n      case 'ArrowLeft':\n        index = ltr\n          ? (enabledTabs.length + index - 1) % enabledTabs.length\n          : (index + 1) % enabledTabs.length;\n        break;\n      case 'ArrowRight':\n        index = ltr\n          ? (index + 1) % enabledTabs.length\n          : (enabledTabs.length + index - 1) % enabledTabs.length;\n        break;\n      case 'Home':\n        index = 0;\n        break;\n      case 'End':\n        index = enabledTabs.length - 1;\n        break;\n      case 'Enter':\n      case ' ':\n        this.setSelectedTab(enabledTabs[index]);\n        break;\n      default:\n        return;\n    }\n\n    enabledTabs[index].focus({ preventScroll: true });\n\n    if (this.activation === 'auto') {\n      this.setSelectedTab(enabledTabs[index]);\n      this.emitEvent('igcChange', { detail: this.activeTab });\n    } else {\n      enabledTabs[index].scrollIntoView({ block: 'nearest' });\n    }\n\n    event.preventDefault();\n  };\n\n  @eventOptions({ passive: true })\n  protected handleScroll() {\n    this.updateScrollButtons();\n  }\n\n  /** Selects the specified tab and displays the corresponding panel.  */\n  public select(name: string) {\n    this.setSelectedTab(this.tabs.find((el) => el.panel === name));\n  }\n\n  protected renderScrollButton(direction: 'start' | 'end') {\n    const start = direction === 'start';\n\n    return this.showScrollButtons\n      ? html`<igc-icon-button\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          size=\"large\"\n          variant=\"flat\"\n          collection=\"internal\"\n          part=\"${direction}-scroll-button\"\n          name=\"navigate_${start ? 'before' : 'next'}\"\n          .disabled=${start\n            ? this.disableStartScrollButton\n            : this.disableEndScrollButton}\n          @click=${() => this.scrollByTabOffset(direction)}\n        ></igc-icon-button>`\n      : nothing;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"headers\">\n        ${this.renderScrollButton('start')}\n        <div part=\"headers-content\" @scroll=${this.handleScroll}>\n          <div part=\"headers-wrapper\">\n            <div\n              part=\"headers-scroll\"\n              role=\"tablist\"\n              @click=${this.handleClick}\n              @keydown=${this.handleKeyDown}\n            >\n              <slot></slot>\n            </div>\n            <div part=\"selected-indicator\"></div>\n          </div>\n        </div>\n        ${this.renderScrollButton('end')}\n      </div>\n      <div part=\"content\">\n        <slot name=\"panel\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tabs': IgcTabsComponent;\n  }\n}\n"]}

package/components/tabs/themes/light/tab-panel.base.css.js

@@ -1,3 +1,35 @@
 import { css } from 'lit';
-export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{position:relative;overflow:hidden;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}`;
+export const styles = css `:host {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  scrollbar-width: var(--scrolbar-size, 0.875rem);
+  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host *,
+:host *::before,
+:host *::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+:host ::-webkit-scrollbar {
+  width: var(--scrolbar-size, 0.875rem);
+  height: var(--scrolbar-size, 0.875rem);
+  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host ::-webkit-scrollbar-thumb {
+  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  position: relative;
+  overflow: hidden;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}`;
 //# sourceMappingURL=tab-panel.base.css.js.map

package/components/tabs/themes/light/tab-panel.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.base.css.js","sourceRoot":"","sources":["../../../../../src/components/tabs/themes/light/tab-panel.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2zBAA2zB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{position:relative;overflow:hidden;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}`;\n"]}
+{"version":3,"file":"tab-panel.base.css.js","sourceRoot":"","sources":["../../../../../src/components/tabs/themes/light/tab-panel.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host {\n  position: relative;\n  overflow: hidden;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n}`;\n"]}