igniteui-webcomponents 3.2.0 → 3.3.0-beta.0

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

@@ -0,0 +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"]}

package/components/tabs/tab-panel.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * Represents the content of a tab
+ *
+ * @element igc-tab-panel
+ *
+ * @slot - Renders the content.
+ */
+export default class IgcTabPanelComponent extends LitElement {
+    static readonly tagName = "igc-tab-panel";
+    static styles: import("lit").CSSResult;
+    private static readonly increment;
+    connectedCallback(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-tab-panel': IgcTabPanelComponent;
+    }
+}

package/components/tabs/tab-panel.js

@@ -0,0 +1,21 @@
+import { html, LitElement } from 'lit';
+import { createCounter } from '../common/util.js';
+import { styles } from './themes/light/tab-panel.base.css.js';
+export default class IgcTabPanelComponent extends LitElement {
+    connectedCallback() {
+        this.setAttribute('role', 'tabpanel');
+        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()}`;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+IgcTabPanelComponent.tagName = 'igc-tab-panel';
+IgcTabPanelComponent.styles = styles;
+IgcTabPanelComponent.increment = createCounter();
+//# sourceMappingURL=tab-panel.js.map

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

@@ -0,0 +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"]}

package/components/tabs/tab.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+/**
+ * Represents the tab header.
+ *
+ * @element igc-tab
+ *
+ * @slot prefix - Renders before the tab header content.
+ * @slot - Renders the tab header content.
+ * @slot suffix - Renders after the tab header content.
+ *
+ * @csspart content - The content wrapper.
+ * @csspart prefix - The prefix wrapper.
+ * @csspart suffix - The suffix wrapper.
+ */
+export default class IgcTabComponent extends LitElement {
+    static readonly tagName = "igc-tab";
+    static styles: import("lit").CSSResult;
+    private static readonly increment;
+    private tab;
+    /** The id of the tab panel which will be controlled by the tab. */
+    panel: string;
+    /** Determines whether the tab is selected. */
+    selected: boolean;
+    /** Determines whether the tab is disabled. */
+    disabled: boolean;
+    connectedCallback(): void;
+    /** Sets focus to the tab. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the tab. */
+    blur(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-tab': IgcTabComponent;
+    }
+}

package/components/tabs/tab.js

@@ -0,0 +1,71 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var IgcTabComponent_1;
+import { html, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { createCounter } from '../common/util.js';
+import { styles } from './themes/light/tab.base.css.js';
+import { styles as bootstrap } from './themes/light/tab.bootstrap.css.js';
+import { styles as fluent } from './themes/light/tab.fluent.css.js';
+import { styles as indigo } from './themes/light/tab.indigo.css.js';
+let IgcTabComponent = IgcTabComponent_1 = class IgcTabComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.panel = '';
+        this.selected = false;
+        this.disabled = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.id =
+            this.id.length > 0 ? this.id : `igc-tab-${IgcTabComponent_1.increment()}`;
+    }
+    focus(options) {
+        this.tab.focus(options);
+    }
+    blur() {
+        this.tab.blur();
+    }
+    render() {
+        return html `
+      <div
+        part="base"
+        role="tab"
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        aria-selected=${this.selected ? 'true' : 'false'}
+        tabindex=${this.disabled || !this.selected ? -1 : 0}
+      >
+        <slot name="prefix" part="prefix"></slot>
+        <div part="content">
+          <slot></slot>
+        </div>
+        <slot name="suffix" part="suffix"></slot>
+      </div>
+    `;
+    }
+};
+IgcTabComponent.tagName = 'igc-tab';
+IgcTabComponent.styles = styles;
+IgcTabComponent.increment = createCounter();
+__decorate([
+    query('[part="base"]', true)
+], IgcTabComponent.prototype, "tab", void 0);
+__decorate([
+    property({ type: String })
+], IgcTabComponent.prototype, "panel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcTabComponent.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcTabComponent.prototype, "disabled", void 0);
+IgcTabComponent = IgcTabComponent_1 = __decorate([
+    themes({ bootstrap, fluent, indigo })
+], IgcTabComponent);
+export default IgcTabComponent;
+//# sourceMappingURL=tab.js.map

package/components/tabs/tab.js.map

@@ -0,0 +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"]}

package/components/tabs/tabs.d.ts

@@ -0,0 +1,80 @@
+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';
+export interface IgcTabsEventMap {
+    igcChange: CustomEvent<IgcTabComponent>;
+}
+declare const IgcTabsComponent_base: import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcTabsEventMap>> & Constructor<LitElement>;
+/**
+ * Represents tabs component
+ *
+ * @element igc-tabs
+ *
+ * @fires igcChange - Emitted when the selected tab changes.
+ *
+ * @slot - Renders the tab header.
+ * @slot panel - Renders the tab content.
+ *
+ * @csspart headers - The wrapper of the tabs including the headers content and the scroll buttons.
+ * @csspart headers-content - The container for the tab headers.
+ * @csspart headers-wrapper - The wrapper for the tab headers and the selected indicator.
+ * @csspart headers-scroll - The container for the headers.
+ * @csspart selected-indicator - The selected indicator.
+ * @csspart start-scroll-button - The start scroll button displayed when the tabs overflow.
+ * @csspart end-scroll-button - The end scroll button displayed when the tabs overflow.
+ * @csspart content - The container for the tabs content.
+ */
+export default class IgcTabsComponent extends IgcTabsComponent_base {
+    static readonly tagName = "igc-tabs";
+    static styles: import("lit").CSSResult;
+    private static readonly increment;
+    protected tabs: Array<IgcTabComponent>;
+    protected panels: Array<IgcTabPanelComponent>;
+    protected wrapper: HTMLElement;
+    protected container: HTMLElement;
+    protected selectedIndicator: HTMLElement;
+    protected showScrollButtons: boolean;
+    protected disableStartScrollButton: boolean;
+    protected disableEndScrollButton: boolean;
+    protected activeTab?: IgcTabComponent;
+    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 */
+    alignment: 'start' | 'end' | 'center' | 'justify';
+    /**
+     * Determines the tab activation. When set to auto,
+     * the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys
+     * and the corresponding panel is displayed.
+     * When set to manual, the tab is only focused. The selection happens after pressing Space or Enter.
+     */
+    activation: 'auto' | 'manual';
+    protected alignIndicator(): void;
+    protected firstUpdated(): Promise<void>;
+    disconnectedCallback(): void;
+    protected updateButtonsOnResize(): void;
+    protected updateScrollButtons(): void;
+    protected setupObserver(): void;
+    protected updateSelectedTab(): void;
+    protected syncAttributes(): void;
+    private setSelectedTab;
+    protected scrollByTabOffset(direction: 'start' | 'end'): void;
+    protected handleClick(event: MouseEvent): void;
+    protected handleKeyDown: (event: KeyboardEvent) => void;
+    protected handleScroll(): void;
+    /** Selects the specified tab and displays the corresponding panel.  */
+    select(name: string): void;
+    protected renderScrollButton(direction: 'start' | 'end'): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-tabs': IgcTabsComponent;
+    }
+}
+export {};

package/components/tabs/tabs.js

@@ -0,0 +1,308 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    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 { 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 { getAttributesForTags, getNodesForTags, observerConfig, } from './utils.js';
+let IgcTabsComponent = IgcTabsComponent_1 = class IgcTabsComponent extends EventEmitterMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.showScrollButtons = false;
+        this.disableStartScrollButton = true;
+        this.disableEndScrollButton = false;
+        this.alignment = 'start';
+        this.activation = 'auto';
+        this.handleKeyDown = (event) => {
+            var _a;
+            const { key } = event;
+            const enabledTabs = this.enabledTabs;
+            let index = enabledTabs.indexOf((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('igc-tab'));
+            switch (key) {
+                case 'ArrowLeft':
+                    index = this.isLTR
+                        ? (enabledTabs.length + index - 1) % enabledTabs.length
+                        : (index + 1) % enabledTabs.length;
+                    break;
+                case 'ArrowRight':
+                    index = this.isLTR
+                        ? (index + 1) % enabledTabs.length
+                        : (enabledTabs.length + index - 1) % enabledTabs.length;
+                    break;
+                case 'Home':
+                    index = 0;
+                    break;
+                case 'End':
+                    index = enabledTabs.length - 1;
+                    break;
+                case 'Enter':
+                case ' ':
+                    this.setSelectedTab(enabledTabs[index]);
+                    break;
+                default:
+                    return;
+            }
+            enabledTabs[index].focus({ preventScroll: true });
+            if (this.activation === 'auto') {
+                this.setSelectedTab(enabledTabs[index]);
+                this.emitEvent('igcChange', { detail: this.activeTab });
+            }
+            else {
+                enabledTabs[index].scrollIntoView({ block: 'nearest' });
+            }
+            event.preventDefault();
+        };
+    }
+    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 : '';
+    }
+    alignIndicator() {
+        const styles = {
+            visibility: this.activeTab ? 'visible' : 'hidden',
+            transitionDuration: '0.3s',
+        };
+        if (this.activeTab) {
+            Object.assign(styles, {
+                width: `${this.activeTab.offsetWidth}px`,
+                transform: `translate(${this.isLTR
+                    ? getOffset(this.activeTab, this.wrapper).left
+                    : getOffset(this.activeTab, this.wrapper).right}px)`,
+            });
+        }
+        Object.assign(this.selectedIndicator.style, styles);
+    }
+    async firstUpdated() {
+        var _a;
+        this.showScrollButtons =
+            this.container.scrollWidth > this.container.clientWidth;
+        await this.updateComplete;
+        this.syncAttributes();
+        this.setupObserver();
+        this.setSelectedTab((_a = this.tabs.filter((tab) => tab.selected).at(-1)) !== null && _a !== void 0 ? _a : this.enabledTabs.at(0));
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        super.disconnectedCallback();
+    }
+    updateButtonsOnResize() {
+        this.showScrollButtons = false;
+        this.performUpdate();
+        this.showScrollButtons =
+            this.container.scrollWidth > this.container.clientWidth;
+        this.updateScrollButtons();
+    }
+    updateScrollButtons() {
+        const { scrollLeft, offsetWidth } = this.container, { scrollWidth } = this.wrapper;
+        this.disableEndScrollButton =
+            scrollWidth <= Math.abs(scrollLeft) + offsetWidth;
+        this.disableStartScrollButton = scrollLeft === 0;
+    }
+    setupObserver() {
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateButtonsOnResize();
+            this.alignIndicator();
+        });
+        [this.container, this.wrapper, ...this.tabs].forEach((element) => this.resizeObserver.observe(element));
+        this.mutationObserver = new MutationObserver(async (records, observer) => {
+            var _a;
+            observer.disconnect();
+            const attributes = getAttributesForTags(records, 'igc-tab');
+            const changed = getNodesForTags(records, this, 'igc-tab');
+            if (attributes.length > 0) {
+                this.activeTab = attributes.find((tab) => tab.selected);
+            }
+            if (changed) {
+                changed.addedNodes.forEach((tab) => {
+                    this.resizeObserver.observe(tab);
+                    if (tab.selected) {
+                        this.activeTab = tab;
+                    }
+                });
+                changed.removedNodes.forEach((tab) => {
+                    this.resizeObserver.unobserve(tab);
+                    if (tab.selected || this.activeTab === tab) {
+                        this.activeTab = undefined;
+                    }
+                });
+                this.syncAttributes();
+            }
+            this.updateSelectedTab();
+            (_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+            this.alignIndicator();
+            await this.updateComplete;
+            observer.observe(this, observerConfig);
+        });
+        this.mutationObserver.observe(this, observerConfig);
+    }
+    updateSelectedTab() {
+        this.tabs.forEach((tab) => (tab.selected = tab === this.activeTab));
+        this.panels.forEach((panel) => {
+            var _a;
+            return Object.assign(panel.style, {
+                display: panel.id === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel) ? 'block' : 'none',
+            });
+        });
+    }
+    syncAttributes() {
+        const prefix = this.id ? `${this.id}-` : '';
+        this.tabs.forEach((tab, index) => {
+            var _a, _b, _c;
+            if (!tab.panel) {
+                tab.panel =
+                    (_b = (_a = this.panels.at(index)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : `${prefix}tab-${IgcTabsComponent_1.increment()}`;
+            }
+            (_c = this.panels
+                .find((panel) => panel.id === tab.panel)) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-labelledby', tab.id);
+        });
+    }
+    setSelectedTab(tab) {
+        if (!tab || tab === this.activeTab) {
+            return;
+        }
+        if (this.activeTab) {
+            this.activeTab.selected = false;
+        }
+        this.activeTab = tab;
+        this.activeTab.selected = true;
+    }
+    scrollByTabOffset(direction) {
+        const { scrollLeft, offsetWidth } = this.container;
+        const LTR = this.isLTR, next = direction === 'end';
+        const pivot = Math.abs(next ? offsetWidth + scrollLeft : scrollLeft);
+        let amount = this.tabs
+            .map((tab) => ({
+            start: LTR
+                ? getOffset(tab, this.wrapper).left
+                : Math.abs(getOffset(tab, this.wrapper).right),
+            width: tab.offsetWidth,
+        }))
+            .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 });
+    }
+    handleClick(event) {
+        const target = event.target;
+        const tab = target.closest('igc-tab');
+        if (!(tab && this.contains(tab)) || tab.disabled) {
+            return;
+        }
+        tab.focus();
+        this.setSelectedTab(tab);
+        this.emitEvent('igcChange', { detail: this.activeTab });
+    }
+    handleScroll() {
+        this.updateScrollButtons();
+    }
+    select(name) {
+        this.setSelectedTab(this.tabs.find((el) => el.panel === name));
+    }
+    renderScrollButton(direction) {
+        const start = direction === 'start';
+        return this.showScrollButtons
+            ? html `<igc-icon-button
+          size="large"
+          variant="flat"
+          collection="internal"
+          part="${direction}-scroll-button"
+          name="navigate_${start ? 'before' : 'next'}"
+          .disabled=${start
+                ? this.disableStartScrollButton
+                : this.disableEndScrollButton}
+          @click=${() => this.scrollByTabOffset(direction)}
+        ></igc-icon-button>`
+            : nothing;
+    }
+    render() {
+        return html `
+      <div part="headers">
+        ${this.renderScrollButton('start')}
+        <div part="headers-content" @scroll=${this.handleScroll}>
+          <div part="headers-wrapper">
+            <div
+              part="headers-scroll"
+              role="tablist"
+              @click=${this.handleClick}
+              @keydown=${this.handleKeyDown}
+            >
+              <slot></slot>
+            </div>
+            <div part="selected-indicator"></div>
+          </div>
+        </div>
+        ${this.renderScrollButton('end')}
+      </div>
+      <div part="content">
+        <slot name="panel"></slot>
+      </div>
+    `;
+    }
+};
+IgcTabsComponent.tagName = 'igc-tabs';
+IgcTabsComponent.styles = styles;
+IgcTabsComponent.increment = createCounter();
+__decorate([
+    queryAssignedElements({ selector: 'igc-tab' })
+], IgcTabsComponent.prototype, "tabs", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'panel' })
+], IgcTabsComponent.prototype, "panels", void 0);
+__decorate([
+    query('[part="headers-wrapper"]', true)
+], IgcTabsComponent.prototype, "wrapper", void 0);
+__decorate([
+    query('[part="headers-content"]', true)
+], IgcTabsComponent.prototype, "container", void 0);
+__decorate([
+    query('[part="selected-indicator"]', true)
+], IgcTabsComponent.prototype, "selectedIndicator", void 0);
+__decorate([
+    state()
+], IgcTabsComponent.prototype, "showScrollButtons", void 0);
+__decorate([
+    state()
+], IgcTabsComponent.prototype, "disableStartScrollButton", void 0);
+__decorate([
+    state()
+], IgcTabsComponent.prototype, "disableEndScrollButton", void 0);
+__decorate([
+    state()
+], IgcTabsComponent.prototype, "activeTab", void 0);
+__decorate([
+    property({ reflect: true })
+], IgcTabsComponent.prototype, "alignment", void 0);
+__decorate([
+    property()
+], IgcTabsComponent.prototype, "activation", void 0);
+__decorate([
+    watch('alignment', { waitUntilFirstUpdate: true })
+], IgcTabsComponent.prototype, "alignIndicator", null);
+__decorate([
+    eventOptions({ passive: true })
+], IgcTabsComponent.prototype, "handleScroll", null);
+IgcTabsComponent = IgcTabsComponent_1 = __decorate([
+    themes({ bootstrap, fluent, indigo })
+], IgcTabsComponent);
+export default IgcTabsComponent;
+//# sourceMappingURL=tabs.js.map

package/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"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","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"]}

package/components/tabs/themes/dark/tab.dark.base.css.d.ts

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

package/components/tabs/themes/dark/tab.dark.base.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css ``;
+//# sourceMappingURL=tab.dark.base.css.js.map

package/components/tabs/themes/dark/tab.dark.base.css.js.map

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

package/components/tabs/themes/dark/tab.dark.bootstrap.css.d.ts

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

package/components/tabs/themes/dark/tab.dark.bootstrap.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css ``;
+//# sourceMappingURL=tab.dark.bootstrap.css.js.map

package/components/tabs/themes/dark/tab.dark.bootstrap.css.js.map

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

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

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

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

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