igniteui-webcomponents 7.2.4 → 7.3.0-beta.1

package/components/tabs/tabs.js

@@ -4,26 +4,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-import { html, LitElement, nothing } from 'lit';
-import { eventOptions, property, queryAssignedElements, state, } from 'lit/decorators.js';
+import { html, LitElement, nothing, } from 'lit';
+import { eventOptions, property, queryAssignedElements, } from 'lit/decorators.js';
 import { cache } from 'lit/directives/cache.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { addThemingController } from '../../theming/theming-controller.js';
+import { addInternalsController } from '#internals/controllers/internals.js';
+import { createMutationController, } from '#internals/controllers/mutation-observer.js';
+import { createResizeObserverController } from '#internals/controllers/resize-observer.js';
+import { addRovingFocusController } from '#internals/controllers/roving-focus.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { partMap } from '#internals/part-map.js';
+import { firstOf, isEmpty } from '#internals/utils/arrays.js';
+import { getRoot, scrollIntoView } from '#internals/utils/dom.js';
+import { getElementFromPath } from '#internals/utils/events.js';
+import { isString } from '#internals/utils/types.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import IgcIconButtonComponent from '../button/icon-button.js';
-import { addKeybindings, arrowLeft, arrowRight, endKey, homeKey, } from '../common/controllers/key-bindings.js';
-import { createMutationController, } from '../common/controllers/mutation-observer.js';
-import { createResizeObserverController } from '../common/controllers/resize-observer.js';
-import { watch } from '../common/decorators/watch.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { partMap } from '../common/part-map.js';
-import { first, getElementFromPath, getRoot, isEmpty, isLTR, isString, last, scrollIntoView, wrap, } from '../common/util.js';
-import IgcTabComponent from './tab.js';
 import { createTabHelpers, getTabHeader } from './tab-dom.js';
+import IgcTabComponent from './tab.js';
 import { styles as shared } from './themes/shared/tabs/tabs.common.css.js';
-import { styles } from './themes/tabs.base.css.js';
 import { all } from './themes/tabs-themes.js';
+import { styles } from './themes/tabs.base.css.js';
 export default class IgcTabsComponent extends EventEmitterMixin(LitElement) {
     static { this.tagName = 'igc-tabs'; }
     static { this.styles = [styles, shared]; }
@@ -42,13 +45,13 @@ export default class IgcTabsComponent extends EventEmitterMixin(LitElement) {
         }
         return '';
     }
-    _alignmentChanged() {
-        this._domHelpers.setIndicator(this._activeTab);
+    get selectedTab() {
+        return this._activeTab ?? null;
     }
     constructor() {
         super();
         this._resizeController = createResizeObserverController(this, {
-            callback: this._resizeCallback,
+            callback: this._refreshLayout,
             options: { box: 'border-box' },
             target: null,
         });
@@ -57,22 +60,23 @@ export default class IgcTabsComponent extends EventEmitterMixin(LitElement) {
         this._domHelpers = createTabHelpers(this, this._headerRef, this._indicatorRef);
         this.alignment = 'start';
         this.activation = 'auto';
+        addInternalsController(this, {
+            initialARIA: { role: 'tablist', ariaOrientation: 'horizontal' },
+            reflectRole: true,
+        });
         addThemingController(this, all);
-        addKeybindings(this, {
-            ref: this._headerRef,
-            skip: this._skipKeyboard,
-        })
-            .set(arrowLeft, () => this._handleArrowKeys(isLTR(this) ? -1 : 1))
-            .set(arrowRight, () => this._handleArrowKeys(isLTR(this) ? 1 : -1))
-            .set(homeKey, this._handleHomeKey)
-            .set(endKey, this._handleEndKey)
-            .setActivateHandler(this._handleActivationKeys, {
-            preventDefault: false,
+        addRovingFocusController(this, {
+            keybindings: { ref: this._headerRef, skip: this._skipKeyboard },
+            items: () => this._enabledTabs,
+            current: () => this._getClosestActiveTab(),
+            focusItem: (tab) => this._keyboardActivateTab(tab),
+            activateItem: (tab) => this._keyboardActivateTab(tab, true),
+            missingCurrent: 'wrap',
         });
         createMutationController(this, {
             callback: this._mutationCallback,
             config: {
-                attributeFilter: ['selected'],
+                attributeFilter: ['selected', 'disabled'],
                 childList: true,
                 subtree: true,
             },
@@ -81,104 +85,111 @@ export default class IgcTabsComponent extends EventEmitterMixin(LitElement) {
     }
     async firstUpdated() {
         await this.updateComplete;
-        const selectedTab = this._tabs.findLast((tab) => tab.selected) ?? first(this._enabledTabs);
-        this._domHelpers.setStyleProperties();
-        this._domHelpers.setScrollButtonState();
-        this._setSelectedTab({
-            tab: selectedTab,
-            shouldEmit: false,
-            shouldScroll: false,
-        });
+        const selectedTab = this._tabs.findLast((tab) => tab.selected && !tab.disabled) ??
+            firstOf(this._enabledTabs);
+        this._updateLayout();
+        this._syncSelection(selectedTab);
         this._resizeController.observe(this._headerRef.value);
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.role = 'tablist';
-    }
-    updated() {
-        if (this._domHelpers.isLeftToRightChanged) {
+    update(props) {
+        const directionChanged = this._domHelpers.checkAndUpdateDirection();
+        if (props.has('alignment') || directionChanged) {
             this._domHelpers.setIndicator(this._activeTab);
         }
+        super.update(props);
     }
-    _resizeCallback() {
+    _updateLayout() {
         this._domHelpers.setStyleProperties();
         this._domHelpers.setScrollButtonState();
-        this._domHelpers.setIndicator(this._activeTab);
     }
-    _mutationCallback(parameters) {
-        this._selectedAttributeChanged(parameters);
-        this._handleTabsRemoved(parameters);
-        this._handleTabsAdded(parameters);
-        this._domHelpers.setStyleProperties();
-        this._domHelpers.setScrollButtonState();
+    _refreshLayout() {
+        this._updateLayout();
         this._domHelpers.setIndicator(this._activeTab);
     }
-    _selectedAttributeChanged({ changes, }) {
-        const selected = changes.attributes.find(({ node: tab }) => this._tabs.includes(tab) && tab.selected)?.node;
-        this._setSelectedTab({
-            tab: selected,
-            shouldEmit: false,
-            shouldScroll: false,
-        });
+    _mutationCallback({ changes, }) {
+        const structural = !isEmpty(changes.added) || !isEmpty(changes.removed);
+        this._handleAttributeChanges(changes);
+        this._handleTabsRemoved(changes);
+        this._handleTabsAdded(changes);
+        this._updateTabsState();
+        if (structural) {
+            this._refreshLayout();
+        }
+        else {
+            this._updateLayout();
+        }
     }
-    _handleTabsAdded({ changes, }) {
-        if (!isEmpty(changes.added)) {
-            const lastAdded = changes.added.findLast((change) => change.target.closest(this.tagName) === this && change.node.selected)?.node;
-            this._setSelectedTab({
-                tab: lastAdded,
-                shouldEmit: false,
-                shouldScroll: false,
-            });
+    _handleAttributeChanges(changes) {
+        const own = changes.attributes.filter(({ node }) => this._tabs.includes(node));
+        if (isEmpty(own)) {
+            return;
+        }
+        const selected = own.findLast(({ node, attributeName }) => attributeName === 'selected' && node.selected)?.node;
+        if (selected) {
+            this._syncSelection(selected);
+        }
+        else if (own.some(({ node }) => node === this._activeTab)) {
+            this._syncSelection(this._activeTab?.disabled ? firstOf(this._enabledTabs) : undefined);
         }
     }
-    _handleTabsRemoved({ changes, }) {
-        if (!isEmpty(changes.removed)) {
-            let nextSelectedTab = null;
-            const removed = changes.removed.filter((change) => change.target.closest(this.tagName) === this);
-            for (const each of removed) {
-                if (each.node.selected && each.node === this._activeTab) {
-                    nextSelectedTab = first(this._enabledTabs);
-                    break;
-                }
-            }
-            if (nextSelectedTab) {
-                this._setSelectedTab({
-                    tab: nextSelectedTab,
-                    shouldEmit: false,
-                    shouldScroll: false,
-                });
-            }
+    _handleTabsAdded(changes) {
+        const added = changes.added.filter(({ node }) => this._tabs.includes(node));
+        if (isEmpty(added)) {
+            return;
         }
+        const selected = added.findLast(({ node }) => node.selected && this._isSelectable(node))?.node;
+        this._syncSelection(selected ?? this._activeTab ?? firstOf(this._enabledTabs));
     }
-    _getClosestActiveTabIndex() {
-        const active = getRoot(this).activeElement;
-        const tab = active ? active.closest(IgcTabComponent.tagName) : null;
-        return tab ? this._enabledTabs.indexOf(tab) : -1;
+    _handleTabsRemoved(changes) {
+        if (changes.removed.some(({ node }) => node === this._activeTab)) {
+            this._syncSelection(firstOf(this._enabledTabs));
+        }
+    }
+    _getClosestActiveTab() {
+        return (getRoot(this).activeElement?.closest(IgcTabComponent.tagName) ?? null);
+    }
+    _isSelectable(tab) {
+        return tab != null && !tab.disabled && this._tabs.includes(tab);
+    }
+    _updateTabsState() {
+        const tabs = this._tabs;
+        const tabStop = this._activeTab ?? firstOf(this._enabledTabs);
+        for (const [index, tab] of tabs.entries()) {
+            tab._setTabState(index + 1, tabs.length, tab === tabStop);
+        }
+    }
+    _syncSelection(tab) {
+        this._setSelectedTab({ tab, shouldEmit: false, shouldScroll: false });
     }
     _setSelectedTab(options) {
         const { tab, shouldEmit = true, shouldScroll = true } = options;
-        if (!tab || tab === this._activeTab) {
-            return;
+        const next = tab === undefined || this._isSelectable(tab) ? tab : this._activeTab;
+        const changed = next !== this._activeTab;
+        for (const each of this._tabs) {
+            each.selected = each === next;
         }
-        if (this._activeTab) {
-            this._activeTab.selected = false;
+        this._activeTab = next;
+        this._updateTabsState();
+        if (!changed) {
+            return;
         }
-        tab.selected = true;
-        this._activeTab = tab;
-        if (shouldScroll) {
-            scrollIntoView(getTabHeader(tab));
+        if (next && shouldScroll) {
+            scrollIntoView(getTabHeader(next));
         }
-        this._domHelpers.setIndicator(this._activeTab);
-        if (shouldEmit) {
-            this.emitEvent('igcChange', { detail: this._activeTab });
+        this._domHelpers.setIndicator(next);
+        if (next && shouldEmit) {
+            this.emitEvent('igcChange', { detail: next });
         }
     }
-    _keyboardActivateTab(tab) {
+    _keyboardActivateTab(tab, activate = false) {
+        if (!tab) {
+            return;
+        }
         const header = getTabHeader(tab);
         this._domHelpers.setScrollSnap();
         scrollIntoView(header);
-        header.focus({ preventScroll: true });
-        if (this.activation === 'auto') {
+        header?.focus({ preventScroll: true });
+        if (activate || this.activation === 'auto') {
             this._setSelectedTab({ tab });
         }
     }
@@ -187,44 +198,28 @@ export default class IgcTabsComponent extends EventEmitterMixin(LitElement) {
             this._tabs.includes(node.closest(IgcTabComponent.tagName)));
     }
     _isEventFromTabHeader(event) {
-        return getElementFromPath('[part~="tab-header"]', event);
-    }
-    _handleArrowKeys(delta) {
-        const tabs = this._enabledTabs;
-        this._keyboardActivateTab(tabs[wrap(0, tabs.length - 1, this._getClosestActiveTabIndex() + delta)]);
-    }
-    _handleHomeKey() {
-        this._keyboardActivateTab(first(this._enabledTabs));
-    }
-    _handleEndKey() {
-        this._keyboardActivateTab(last(this._enabledTabs));
-    }
-    _handleActivationKeys() {
-        const tabs = this._enabledTabs;
-        const index = this._getClosestActiveTabIndex();
-        if (index > -1) {
-            this._setSelectedTab({ tab: tabs[index], shouldEmit: false });
-            this._keyboardActivateTab(tabs[index]);
-        }
+        return Boolean(getElementFromPath('[part~="tab-header"]', event));
     }
     _handleClick(event) {
         if (!this._isEventFromTabHeader(event)) {
             return;
         }
         const tab = getElementFromPath(IgcTabComponent.tagName, event);
-        if (!(tab && this._tabs.includes(tab)) || tab?.disabled) {
+        if (!this._isSelectable(tab)) {
             return;
         }
         this._domHelpers.setScrollSnap();
-        getTabHeader(tab).focus();
+        getTabHeader(tab)?.focus({ preventScroll: true });
         this._setSelectedTab({ tab });
     }
     _handleScroll() {
         this._domHelpers.setScrollButtonState();
     }
     select(ref) {
-        const tab = isString(ref) ? this._tabs.find((t) => t.id === ref) : ref;
-        if (tab) {
+        const tab = isString(ref)
+            ? this._tabs.find((each) => each.id === ref || each.label === ref)
+            : ref;
+        if (this._isSelectable(tab)) {
             this._setSelectedTab({ tab, shouldEmit: false });
         }
     }
@@ -273,20 +268,14 @@ export default class IgcTabsComponent extends EventEmitterMixin(LitElement) {
     }
 }
 __decorate([
-    queryAssignedElements({ selector: IgcTabComponent.tagName })
+    queryAssignedElements({ selector: IgcTabComponent.tagName, flatten: true })
 ], IgcTabsComponent.prototype, "_tabs", 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, "_alignmentChanged", null);
 __decorate([
     eventOptions({ passive: true })
 ], IgcTabsComponent.prototype, "_handleScroll", null);

package/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"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  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\n\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport {\n  addKeybindings,\n  arrowLeft,\n  arrowRight,\n  endKey,\n  homeKey,\n} from '../common/controllers/key-bindings.js';\nimport {\n  createMutationController,\n  type MutationControllerParams,\n} from '../common/controllers/mutation-observer.js';\nimport { createResizeObserverController } from '../common/controllers/resize-observer.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { partMap } from '../common/part-map.js';\nimport {\n  first,\n  getElementFromPath,\n  getRoot,\n  isEmpty,\n  isLTR,\n  isString,\n  last,\n  scrollIntoView,\n  wrap,\n} from '../common/util.js';\nimport type { TabsActivation, TabsAlignment } from '../types.js';\nimport IgcTabComponent from './tab.js';\nimport { createTabHelpers, getTabHeader } from './tab-dom.js';\nimport { styles as shared } from './themes/shared/tabs/tabs.common.css.js';\nimport { styles } from './themes/tabs.base.css.js';\nimport { all } from './themes/tabs-themes.js';\n\ntype TabSelectionOptions = {\n  tab?: IgcTabComponent;\n  shouldEmit?: boolean;\n  shouldScroll?: boolean;\n};\n\nexport interface IgcTabsComponentEventMap {\n  igcChange: CustomEvent<IgcTabComponent>;\n}\n\n/* blazorAdditionalDependency: IgcTabComponent */\n/**\n * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\n *\n * The `<igc-tabs>` component allows the user to navigate between multiple `<igc-tab>` elements.\n * It supports keyboard navigation and provides API methods to control the selected tab.\n *\n * @element igc-tabs\n *\n * @fires igcChange - Emitted when the selected tab changes.\n *\n * @slot - Renders the `IgcTabComponents` inside default slot.\n *\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 selected-indicator - The indicator that shows which tab is selected.\n */\nexport default class IgcTabsComponent extends EventEmitterMixin<\n  IgcTabsComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-tabs';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcTabsComponent,\n      IgcTabComponent,\n      IgcIconButtonComponent\n    );\n  }\n\n  //#region Private state & properties\n\n  private readonly _resizeController = createResizeObserverController(this, {\n    callback: this._resizeCallback,\n    options: { box: 'border-box' },\n    target: null,\n  });\n\n  /** The tabs container reference holding the tab headers. */\n  private readonly _headerRef = createRef<HTMLElement>();\n\n  /** The selected tab indicator reference.  */\n  private readonly _indicatorRef = createRef<HTMLElement>();\n\n  private readonly _domHelpers = createTabHelpers(\n    this,\n    this._headerRef,\n    this._indicatorRef\n  );\n\n  @queryAssignedElements({ selector: IgcTabComponent.tagName })\n  private _tabs!: IgcTabComponent[];\n\n  protected get _enabledTabs(): IgcTabComponent[] {\n    return this._tabs.filter((tab) => !tab.disabled);\n  }\n\n  @state()\n  private _activeTab?: IgcTabComponent;\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * Sets the alignment for the tab headers\n   * @attr\n   */\n  @property({ reflect: true })\n  public alignment: TabsAlignment = '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   * @attr\n   */\n  @property()\n  public activation: TabsActivation = 'auto';\n\n  /* blazorSuppress */\n  /** Returns the direct `igc-tab` elements that are children of this element. */\n  public get tabs(): IgcTabComponent[] {\n    return this._tabs;\n  }\n\n  /** Returns the currently selected tab label or IDREF if no label property is set. */\n  public get selected(): string {\n    if (this._activeTab) {\n      return this._activeTab.label || this._activeTab.id;\n    }\n\n    return '';\n  }\n\n  //#endregion\n\n  @watch('alignment', { waitUntilFirstUpdate: true })\n  protected _alignmentChanged(): void {\n    this._domHelpers.setIndicator(this._activeTab);\n  }\n\n  //#region Life-cycle hooks\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n\n    addKeybindings(this, {\n      ref: this._headerRef,\n      skip: this._skipKeyboard,\n    })\n      .set(arrowLeft, () => this._handleArrowKeys(isLTR(this) ? -1 : 1))\n      .set(arrowRight, () => this._handleArrowKeys(isLTR(this) ? 1 : -1))\n      .set(homeKey, this._handleHomeKey)\n      .set(endKey, this._handleEndKey)\n      .setActivateHandler(this._handleActivationKeys, {\n        preventDefault: false,\n      });\n\n    createMutationController(this, {\n      callback: this._mutationCallback,\n      config: {\n        attributeFilter: ['selected'],\n        childList: true,\n        subtree: true,\n      },\n      filter: [IgcTabComponent.tagName],\n    });\n  }\n\n  protected override async firstUpdated() {\n    await this.updateComplete;\n\n    const selectedTab =\n      this._tabs.findLast((tab) => tab.selected) ?? first(this._enabledTabs);\n\n    this._domHelpers.setStyleProperties();\n    this._domHelpers.setScrollButtonState();\n    this._setSelectedTab({\n      tab: selectedTab,\n      shouldEmit: false,\n      shouldScroll: false,\n    });\n\n    this._resizeController.observe(this._headerRef.value!);\n  }\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.role = 'tablist';\n  }\n\n  protected override updated(): void {\n    if (this._domHelpers.isLeftToRightChanged) {\n      this._domHelpers.setIndicator(this._activeTab);\n    }\n  }\n\n  //#endregion\n\n  //#region Observers callbacks\n\n  private _resizeCallback(): void {\n    this._domHelpers.setStyleProperties();\n    this._domHelpers.setScrollButtonState();\n    this._domHelpers.setIndicator(this._activeTab);\n  }\n\n  private _mutationCallback(\n    parameters: MutationControllerParams<IgcTabComponent>\n  ): void {\n    this._selectedAttributeChanged(parameters);\n    this._handleTabsRemoved(parameters);\n    this._handleTabsAdded(parameters);\n\n    this._domHelpers.setStyleProperties();\n    this._domHelpers.setScrollButtonState();\n    this._domHelpers.setIndicator(this._activeTab);\n  }\n\n  private _selectedAttributeChanged({\n    changes,\n  }: MutationControllerParams<IgcTabComponent>): void {\n    const selected = changes.attributes.find(\n      ({ node: tab }) => this._tabs.includes(tab) && tab.selected\n    )?.node;\n    this._setSelectedTab({\n      tab: selected,\n      shouldEmit: false,\n      shouldScroll: false,\n    });\n  }\n\n  private _handleTabsAdded({\n    changes,\n  }: MutationControllerParams<IgcTabComponent>): void {\n    if (!isEmpty(changes.added)) {\n      const lastAdded = changes.added.findLast(\n        (change) =>\n          change.target.closest(this.tagName) === this && change.node.selected\n      )?.node;\n\n      this._setSelectedTab({\n        tab: lastAdded,\n        shouldEmit: false,\n        shouldScroll: false,\n      });\n    }\n  }\n\n  private _handleTabsRemoved({\n    changes,\n  }: MutationControllerParams<IgcTabComponent>): void {\n    if (!isEmpty(changes.removed)) {\n      let nextSelectedTab: IgcTabComponent | null = null;\n\n      const removed = changes.removed.filter(\n        (change) => change.target.closest(this.tagName) === this\n      );\n\n      for (const each of removed) {\n        if (each.node.selected && each.node === this._activeTab) {\n          nextSelectedTab = first(this._enabledTabs);\n          break;\n        }\n      }\n\n      if (nextSelectedTab) {\n        this._setSelectedTab({\n          tab: nextSelectedTab,\n          shouldEmit: false,\n          shouldScroll: false,\n        });\n      }\n    }\n  }\n\n  //#endregion\n\n  //#region Private API\n\n  private _getClosestActiveTabIndex(): number {\n    const active = getRoot(this).activeElement;\n    const tab = active ? active.closest(IgcTabComponent.tagName) : null;\n    return tab ? this._enabledTabs.indexOf(tab) : -1;\n  }\n\n  private _setSelectedTab(options: TabSelectionOptions): void {\n    const { tab, shouldEmit = true, shouldScroll = true } = options;\n\n    if (!tab || tab === this._activeTab) {\n      return;\n    }\n\n    if (this._activeTab) {\n      this._activeTab.selected = false;\n    }\n\n    tab.selected = true;\n    this._activeTab = tab;\n\n    if (shouldScroll) {\n      scrollIntoView(getTabHeader(tab));\n    }\n    this._domHelpers.setIndicator(this._activeTab);\n\n    if (shouldEmit) {\n      this.emitEvent('igcChange', { detail: this._activeTab });\n    }\n  }\n\n  private _keyboardActivateTab(tab: IgcTabComponent) {\n    const header = getTabHeader(tab);\n\n    this._domHelpers.setScrollSnap();\n    scrollIntoView(header);\n    header.focus({ preventScroll: true });\n\n    if (this.activation === 'auto') {\n      this._setSelectedTab({ tab });\n    }\n  }\n\n  private _skipKeyboard(node: Element, event: KeyboardEvent): boolean {\n    return !(\n      this._isEventFromTabHeader(event) &&\n      this._tabs.includes(node.closest(IgcTabComponent.tagName)!)\n    );\n  }\n\n  private _isEventFromTabHeader(event: Event) {\n    return getElementFromPath('[part~=\"tab-header\"]', event);\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  protected _handleArrowKeys(delta: -1 | 1): void {\n    const tabs = this._enabledTabs;\n    this._keyboardActivateTab(\n      tabs[wrap(0, tabs.length - 1, this._getClosestActiveTabIndex() + delta)]\n    );\n  }\n\n  protected _handleHomeKey(): void {\n    this._keyboardActivateTab(first(this._enabledTabs));\n  }\n\n  protected _handleEndKey(): void {\n    this._keyboardActivateTab(last(this._enabledTabs));\n  }\n\n  protected _handleActivationKeys(): void {\n    const tabs = this._enabledTabs;\n    const index = this._getClosestActiveTabIndex();\n\n    if (index > -1) {\n      this._setSelectedTab({ tab: tabs[index], shouldEmit: false });\n      this._keyboardActivateTab(tabs[index]);\n    }\n  }\n\n  protected _handleClick(event: PointerEvent): void {\n    if (!this._isEventFromTabHeader(event)) {\n      return;\n    }\n\n    const tab = getElementFromPath(IgcTabComponent.tagName, event);\n\n    if (!(tab && this._tabs.includes(tab)) || tab?.disabled) {\n      return;\n    }\n\n    this._domHelpers.setScrollSnap();\n    getTabHeader(tab).focus();\n    this._setSelectedTab({ tab });\n  }\n\n  @eventOptions({ passive: true })\n  protected _handleScroll(): void {\n    this._domHelpers.setScrollButtonState();\n  }\n\n  //#endregion\n\n  //#region Public API methods\n\n  /** Selects the specified tab and displays the corresponding panel.  */\n  public select(id: string): void;\n  /* blazorSuppress (ref is reserved) */\n  public select(ref: IgcTabComponent): void;\n  /* blazorSuppress (ref is reserved) */\n  public select(ref: IgcTabComponent | string): void {\n    const tab = isString(ref) ? this._tabs.find((t) => t.id === ref) : ref;\n\n    if (tab) {\n      this._setSelectedTab({ tab, shouldEmit: false });\n    }\n  }\n\n  //#endregion\n\n  //#region Render\n\n  protected _renderScrollButton(direction: 'start' | 'end') {\n    const isStart = direction === 'start';\n    const { start, end } = this._domHelpers.scrollButtonsDisabled;\n\n    return html`${cache(\n      this._domHelpers.hasScrollButtons\n        ? html`\n            <igc-icon-button\n              tabindex=\"-1\"\n              variant=\"flat\"\n              collection=\"default\"\n              part=\"${direction}-scroll-button\"\n              exportparts=\"icon\"\n              name=${isStart ? 'prev' : 'next'}\n              ?disabled=${isStart ? start : end}\n              @click=${() => this._domHelpers.scrollTabs(direction)}\n            >\n            </igc-icon-button>\n          `\n        : nothing\n    )}`;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        ${ref(this._headerRef)}\n        part=\"tabs\"\n        style=${styleMap(this._domHelpers.styleProperties)}\n        @scroll=${this._handleScroll}\n      >\n        <div\n          part=${partMap({\n            inner: true,\n            scrollable: this._domHelpers.hasScrollButtons,\n          })}\n        >\n          ${this._renderScrollButton('start')}\n          <slot @click=${this._handleClick}></slot>\n          ${this._renderScrollButton('end')}\n          <div part=\"selected-indicator\">\n            <span ${ref(this._indicatorRef)}></span>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  //#endregion\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 {\n  html,\n  LitElement,\n  nothing,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport {\n  eventOptions,\n  property,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\n\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport {\n  createMutationController,\n  type MutationControllerParams,\n} from '#internals/controllers/mutation-observer.js';\nimport { createResizeObserverController } from '#internals/controllers/resize-observer.js';\nimport { addRovingFocusController } from '#internals/controllers/roving-focus.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { partMap } from '#internals/part-map.js';\nimport { firstOf, isEmpty } from '#internals/utils/arrays.js';\nimport { getRoot, scrollIntoView } from '#internals/utils/dom.js';\nimport { getElementFromPath } from '#internals/utils/events.js';\nimport { isString } from '#internals/utils/types.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport type { TabsActivation, TabsAlignment } from '../types.js';\nimport { createTabHelpers, getTabHeader } from './tab-dom.js';\nimport IgcTabComponent from './tab.js';\nimport { styles as shared } from './themes/shared/tabs/tabs.common.css.js';\nimport { all } from './themes/tabs-themes.js';\nimport { styles } from './themes/tabs.base.css.js';\n\ntype TabSelectionOptions = {\n  /** The tab to select. Omitting it clears the current selection. */\n  tab?: IgcTabComponent;\n  shouldEmit?: boolean;\n  shouldScroll?: boolean;\n};\n\ntype TabMutations = MutationControllerParams<IgcTabComponent>['changes'];\n\nexport interface IgcTabsComponentEventMap {\n  igcChange: CustomEvent<IgcTabComponent>;\n}\n\n/* blazorAdditionalDependency: IgcTabComponent */\n/**\n * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\n *\n * The tabs component allows the user to navigate between multiple tab children.\n * It supports keyboard navigation and provides API methods to control the selected tab.\n *\n * @element igc-tabs\n *\n * @fires igcChange - Emitted when the selected tab changes.\n *\n * @slot - Renders the `IgcTabComponents` inside default slot.\n *\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 selected-indicator - The indicator that shows which tab is selected.\n */\nexport default class IgcTabsComponent extends EventEmitterMixin<\n  IgcTabsComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-tabs';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcTabsComponent,\n      IgcTabComponent,\n      IgcIconButtonComponent\n    );\n  }\n\n  //#region Private state & properties\n\n  private readonly _resizeController = createResizeObserverController(this, {\n    callback: this._refreshLayout,\n    options: { box: 'border-box' },\n    target: null,\n  });\n\n  /** The tabs container reference holding the tab headers. */\n  private readonly _headerRef = createRef<HTMLElement>();\n\n  /** The selected tab indicator reference.  */\n  private readonly _indicatorRef = createRef<HTMLElement>();\n\n  private readonly _domHelpers = createTabHelpers(\n    this,\n    this._headerRef,\n    this._indicatorRef\n  );\n\n  @queryAssignedElements({ selector: IgcTabComponent.tagName, flatten: true })\n  private _tabs!: IgcTabComponent[];\n\n  protected get _enabledTabs(): IgcTabComponent[] {\n    return this._tabs.filter((tab) => !tab.disabled);\n  }\n\n  private _activeTab?: IgcTabComponent;\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * Determines the alignment of the tabs header strip.\n   *\n   * @attr alignment\n   * @default 'start'\n   */\n  @property({ reflect: true })\n  public alignment: TabsAlignment = 'start';\n\n  /**\n   * Determines the activation behavior of the tabs.\n   *\n   * When set to 'auto', the tab will be selected when it receives focus.\n   * When set to 'manual', the tab will only be selected when it is clicked or activated with the keyboard.\n   *\n   * @attr activation\n   * @default 'auto'\n   */\n  @property()\n  public activation: TabsActivation = 'auto';\n\n  /* blazorSuppress */\n  /** Returns the direct tab children of this element. */\n  public get tabs(): IgcTabComponent[] {\n    return this._tabs;\n  }\n\n  /** Returns the currently selected tab label or IDREF if no label property is set. */\n  public get selected(): string {\n    if (this._activeTab) {\n      return this._activeTab.label || this._activeTab.id;\n    }\n\n    return '';\n  }\n\n  /* blazorSuppress */\n  /** Returns the currently selected tab, if any. */\n  public get selectedTab(): IgcTabComponent | null {\n    return this._activeTab ?? null;\n  }\n\n  //#endregion\n\n  //#region Life-cycle hooks\n\n  constructor() {\n    super();\n\n    addInternalsController(this, {\n      initialARIA: { role: 'tablist', ariaOrientation: 'horizontal' },\n      reflectRole: true,\n    });\n\n    addThemingController(this, all);\n\n    addRovingFocusController(this, {\n      keybindings: { ref: this._headerRef, skip: this._skipKeyboard },\n      items: () => this._enabledTabs,\n      current: () => this._getClosestActiveTab(),\n      focusItem: (tab) => this._keyboardActivateTab(tab),\n      activateItem: (tab) => this._keyboardActivateTab(tab, true),\n      missingCurrent: 'wrap',\n    });\n\n    createMutationController(this, {\n      callback: this._mutationCallback,\n      config: {\n        attributeFilter: ['selected', 'disabled'],\n        childList: true,\n        subtree: true,\n      },\n      filter: [IgcTabComponent.tagName],\n    });\n  }\n\n  protected override async firstUpdated(): Promise<void> {\n    await this.updateComplete;\n\n    const selectedTab =\n      this._tabs.findLast((tab) => tab.selected && !tab.disabled) ??\n      firstOf(this._enabledTabs);\n\n    this._updateLayout();\n    this._syncSelection(selectedTab);\n\n    this._resizeController.observe(this._headerRef.value!);\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    const directionChanged = this._domHelpers.checkAndUpdateDirection();\n\n    if (props.has('alignment') || directionChanged) {\n      this._domHelpers.setIndicator(this._activeTab);\n    }\n\n    super.update(props);\n  }\n\n  //#endregion\n\n  //#region Observers callbacks\n\n  private _updateLayout(): void {\n    this._domHelpers.setStyleProperties();\n    this._domHelpers.setScrollButtonState();\n  }\n\n  private _refreshLayout(): void {\n    this._updateLayout();\n    this._domHelpers.setIndicator(this._activeTab);\n  }\n\n  private _mutationCallback({\n    changes,\n  }: MutationControllerParams<IgcTabComponent>): void {\n    const structural = !isEmpty(changes.added) || !isEmpty(changes.removed);\n\n    this._handleAttributeChanges(changes);\n    this._handleTabsRemoved(changes);\n    this._handleTabsAdded(changes);\n\n    // Positions shift on any add/removal, including ones that leave the selection intact.\n    this._updateTabsState();\n\n    // Only a changed tab set moves the indicator on its own - selection changes\n    // reposition it through `_setSelectedTab`.\n    if (structural) {\n      this._refreshLayout();\n    } else {\n      this._updateLayout();\n    }\n  }\n\n  private _handleAttributeChanges(changes: TabMutations): void {\n    const own = changes.attributes.filter(({ node }) =>\n      this._tabs.includes(node)\n    );\n\n    if (isEmpty(own)) {\n      return;\n    }\n\n    const selected = own.findLast(\n      ({ node, attributeName }) => attributeName === 'selected' && node.selected\n    )?.node;\n\n    if (selected) {\n      // A tab turning selected takes over.\n      this._syncSelection(selected);\n    } else if (own.some(({ node }) => node === this._activeTab)) {\n      // The active tab was either deselected from the outside, which leaves the\n      // component without a selection, or disabled and has to hand over.\n      this._syncSelection(\n        this._activeTab?.disabled ? firstOf(this._enabledTabs) : undefined\n      );\n    }\n  }\n\n  private _handleTabsAdded(changes: TabMutations): void {\n    const added = changes.added.filter(({ node }) => this._tabs.includes(node));\n\n    if (isEmpty(added)) {\n      return;\n    }\n\n    // An added selected tab takes over, otherwise keep the current selection or\n    // recover from an empty one.\n    const selected = added.findLast(\n      ({ node }) => node.selected && this._isSelectable(node)\n    )?.node;\n\n    this._syncSelection(\n      selected ?? this._activeTab ?? firstOf(this._enabledTabs)\n    );\n  }\n\n  private _handleTabsRemoved(changes: TabMutations): void {\n    if (changes.removed.some(({ node }) => node === this._activeTab)) {\n      this._syncSelection(firstOf(this._enabledTabs));\n    }\n  }\n\n  //#endregion\n\n  //#region Private API\n\n  private _getClosestActiveTab(): IgcTabComponent | null {\n    return (\n      getRoot(this).activeElement?.closest(IgcTabComponent.tagName) ?? null\n    );\n  }\n\n  /** A tab can be selected if it is a direct child of this component and is not disabled. */\n  private _isSelectable(tab?: IgcTabComponent): tab is IgcTabComponent {\n    return tab != null && !tab.disabled && this._tabs.includes(tab);\n  }\n\n  /** Pushes the ARIA set information and the roving tab stop down to the tab children. */\n  private _updateTabsState(): void {\n    const tabs = this._tabs;\n    const tabStop = this._activeTab ?? firstOf(this._enabledTabs);\n\n    for (const [index, tab] of tabs.entries()) {\n      tab._setTabState(index + 1, tabs.length, tab === tabStop);\n    }\n  }\n\n  /** Applies a selection driven by the DOM rather than by user interaction. */\n  private _syncSelection(tab?: IgcTabComponent): void {\n    this._setSelectedTab({ tab, shouldEmit: false, shouldScroll: false });\n  }\n\n  private _setSelectedTab(options: TabSelectionOptions): void {\n    const { tab, shouldEmit = true, shouldScroll = true } = options;\n\n    // An explicit `undefined` clears the selection, while a tab that cannot be\n    // selected leaves the current one in place.\n    const next =\n      tab === undefined || this._isSelectable(tab) ? tab : this._activeTab;\n    const changed = next !== this._activeTab;\n\n    // Runs on every pass so that tabs holding a stale `selected` state are reconciled.\n    for (const each of this._tabs) {\n      each.selected = each === next;\n    }\n\n    this._activeTab = next;\n    this._updateTabsState();\n\n    if (!changed) {\n      return;\n    }\n\n    if (next && shouldScroll) {\n      scrollIntoView(getTabHeader(next));\n    }\n\n    this._domHelpers.setIndicator(next);\n\n    if (next && shouldEmit) {\n      this.emitEvent('igcChange', { detail: next });\n    }\n  }\n\n  private _keyboardActivateTab(tab?: IgcTabComponent, activate = false): void {\n    if (!tab) {\n      return;\n    }\n\n    const header = getTabHeader(tab);\n\n    this._domHelpers.setScrollSnap();\n    scrollIntoView(header);\n    header?.focus({ preventScroll: true });\n\n    if (activate || this.activation === 'auto') {\n      this._setSelectedTab({ tab });\n    }\n  }\n\n  private _skipKeyboard(node: Element, event: KeyboardEvent): boolean {\n    return !(\n      this._isEventFromTabHeader(event) &&\n      this._tabs.includes(node.closest(IgcTabComponent.tagName)!)\n    );\n  }\n\n  private _isEventFromTabHeader(event: Event): boolean {\n    return Boolean(getElementFromPath('[part~=\"tab-header\"]', event));\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  protected _handleClick(event: PointerEvent): void {\n    if (!this._isEventFromTabHeader(event)) {\n      return;\n    }\n\n    const tab = getElementFromPath(IgcTabComponent.tagName, event);\n\n    if (!this._isSelectable(tab)) {\n      return;\n    }\n\n    this._domHelpers.setScrollSnap();\n    getTabHeader(tab)?.focus({ preventScroll: true });\n    this._setSelectedTab({ tab });\n  }\n\n  @eventOptions({ passive: true })\n  protected _handleScroll(): void {\n    this._domHelpers.setScrollButtonState();\n  }\n\n  //#endregion\n\n  //#region Public API methods\n\n  /**\n   * Selects the tab matching the passed IDREF or label and displays the corresponding panel.\n   *\n   * Disabled tabs and values not matching any tab are ignored.\n   */\n  public select(idOrLabel: string): void;\n  /* blazorSuppress (ref is reserved) */\n  public select(ref: IgcTabComponent): void;\n  /* blazorSuppress (ref is reserved) */\n  public select(ref: IgcTabComponent | string): void {\n    const tab = isString(ref)\n      ? this._tabs.find((each) => each.id === ref || each.label === ref)\n      : ref;\n\n    if (this._isSelectable(tab)) {\n      this._setSelectedTab({ tab, shouldEmit: false });\n    }\n  }\n\n  //#endregion\n\n  //#region Render\n\n  protected _renderScrollButton(direction: 'start' | 'end'): TemplateResult {\n    const isStart = direction === 'start';\n    const { start, end } = this._domHelpers.scrollButtonsDisabled;\n\n    return html`${cache(\n      this._domHelpers.hasScrollButtons\n        ? html`\n            <igc-icon-button\n              tabindex=\"-1\"\n              variant=\"flat\"\n              collection=\"default\"\n              part=\"${direction}-scroll-button\"\n              exportparts=\"icon\"\n              name=${isStart ? 'prev' : 'next'}\n              ?disabled=${isStart ? start : end}\n              @click=${() => this._domHelpers.scrollTabs(direction)}\n            >\n            </igc-icon-button>\n          `\n        : nothing\n    )}`;\n  }\n\n  protected override render(): TemplateResult {\n    return html`\n      <div\n        ${ref(this._headerRef)}\n        part=\"tabs\"\n        style=${styleMap(this._domHelpers.styleProperties)}\n        @scroll=${this._handleScroll}\n      >\n        <div\n          part=${partMap({\n            inner: true,\n            scrollable: this._domHelpers.hasScrollButtons,\n          })}\n        >\n          ${this._renderScrollButton('start')}\n          <slot @click=${this._handleClick}></slot>\n          ${this._renderScrollButton('end')}\n          <div part=\"selected-indicator\">\n            <span ${ref(this._indicatorRef)}></span>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  //#endregion\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tabs': IgcTabsComponent;\n  }\n}\n"]}

package/components/tabs/themes/shared/tabs/tabs.indigo.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--header-min-height: 2.5rem;--scroll-btn-size: 2.5rem;--nav-btn-border-color: var(--border-color)}[part=selected-indicator]{height:.0625rem;position:relative}[part=selected-indicator] span{background:var(--indicator-color);height:.1875rem;inset-block-end:100%}[part=selected-indicator]::before{content:"";position:absolute;width:100%;height:.0625rem;inset-block-end:100%}[part=start-scroll-button],[part=end-scroll-button]{--hover-background: var(--button-background);--focus-background: var(--button-background);--active-background: var(--button-background)}[part=start-scroll-button]:active,[part=start-scroll-button]:hover,[part=end-scroll-button]:active,[part=end-scroll-button]:hover{--border-color: var(--button-background)}igc-icon-button:hover::part(base){background-color:var(--button-hover-background)}igc-icon-button:hover::part(base)::after{content:"";position:absolute;inset:0;z-index:1}igc-icon-button::part(base){overflow:hidden}igc-icon-button[disabled]::part(base),igc-icon-button:disabled::part(base){border-bottom:.0625rem solid var(--nav-btn-border-color)}igc-icon-button::part(icon){--size: 1rem;z-index:2}`;
+export const styles = css `:host{--header-min-height: 2.5rem;--scroll-btn-size: 2.5rem;--nav-btn-border-color: var(--border-color)}[part=selected-indicator]{height:.0625rem;position:relative}[part=selected-indicator] span{background:var(--indicator-color);height:.1875rem;inset-block-end:100%}[part=selected-indicator]::before{content:"";position:absolute;width:100%;height:.0625rem;inset-block-end:100%}[part=start-scroll-button],[part=end-scroll-button]{--hover-background: var(--button-background);--focus-background: var(--button-background);--active-background: var(--button-background)}[part=start-scroll-button]:active,[part=start-scroll-button]:hover,[part=end-scroll-button]:active,[part=end-scroll-button]:hover{--border-color: var(--button-background)}igc-icon-button::part(base){overflow:hidden;background-color:var(--ig-surface-500);background-image:linear-gradient(var(--button-background), var(--button-background))}igc-icon-button:hover::part(base){background-image:linear-gradient(var(--button-hover-background), var(--button-hover-background))}igc-icon-button:hover::part(base)::after{content:"";position:absolute;inset:0;z-index:1}igc-icon-button[disabled]::part(base),igc-icon-button:disabled::part(base){border-bottom:.0625rem solid var(--nav-btn-border-color)}igc-icon-button::part(icon){--size: 1rem;z-index:2}`;
 //# sourceMappingURL=tabs.indigo.css.js.map

package/components/tabs/themes/shared/tabs/tabs.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/tabs/themes/shared/tabs/tabs.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,+mCAA+mC,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--header-min-height: 2.5rem;--scroll-btn-size: 2.5rem;--nav-btn-border-color: var(--border-color)}[part=selected-indicator]{height:.0625rem;position:relative}[part=selected-indicator] span{background:var(--indicator-color);height:.1875rem;inset-block-end:100%}[part=selected-indicator]::before{content:\"\";position:absolute;width:100%;height:.0625rem;inset-block-end:100%}[part=start-scroll-button],[part=end-scroll-button]{--hover-background: var(--button-background);--focus-background: var(--button-background);--active-background: var(--button-background)}[part=start-scroll-button]:active,[part=start-scroll-button]:hover,[part=end-scroll-button]:active,[part=end-scroll-button]:hover{--border-color: var(--button-background)}igc-icon-button:hover::part(base){background-color:var(--button-hover-background)}igc-icon-button:hover::part(base)::after{content:\"\";position:absolute;inset:0;z-index:1}igc-icon-button::part(base){overflow:hidden}igc-icon-button[disabled]::part(base),igc-icon-button:disabled::part(base){border-bottom:.0625rem solid var(--nav-btn-border-color)}igc-icon-button::part(icon){--size: 1rem;z-index:2}`;\n  "]}
+{"version":3,"file":"tabs.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/tabs/themes/shared/tabs/tabs.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,4xCAA4xC,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--header-min-height: 2.5rem;--scroll-btn-size: 2.5rem;--nav-btn-border-color: var(--border-color)}[part=selected-indicator]{height:.0625rem;position:relative}[part=selected-indicator] span{background:var(--indicator-color);height:.1875rem;inset-block-end:100%}[part=selected-indicator]::before{content:\"\";position:absolute;width:100%;height:.0625rem;inset-block-end:100%}[part=start-scroll-button],[part=end-scroll-button]{--hover-background: var(--button-background);--focus-background: var(--button-background);--active-background: var(--button-background)}[part=start-scroll-button]:active,[part=start-scroll-button]:hover,[part=end-scroll-button]:active,[part=end-scroll-button]:hover{--border-color: var(--button-background)}igc-icon-button::part(base){overflow:hidden;background-color:var(--ig-surface-500);background-image:linear-gradient(var(--button-background), var(--button-background))}igc-icon-button:hover::part(base){background-image:linear-gradient(var(--button-hover-background), var(--button-hover-background))}igc-icon-button:hover::part(base)::after{content:\"\";position:absolute;inset:0;z-index:1}igc-icon-button[disabled]::part(base),igc-icon-button:disabled::part(base){border-bottom:.0625rem solid var(--nav-btn-border-color)}igc-icon-button::part(icon){--size: 1rem;z-index:2}`;\n  "]}

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

@@ -1,2 +1,2 @@
-import type { Themes } from '../../../theming/types.js';
+import type { Themes } from '#theming/types.js';
 export declare const all: Themes;

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

@@ -1 +1 @@
-{"version":3,"file":"tab-themes.js","sourceRoot":"","sources":["../../../../src/components/tabs/themes/tab-themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEtE,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,QAAQ;GACX;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,QAAQ;GACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../theming/types.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/tab/tab.bootstrap.css.js';\nimport { styles as fluent } from './shared/tab/tab.fluent.css.js';\nimport { styles as indigo } from './shared/tab/tab.indigo.css.js';\nimport { styles as material } from './shared/tab/tab.material.css.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n  material: css`\n    ${material}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n  material: css`\n    ${material}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"tab-themes.js","sourceRoot":"","sources":["../../../../src/components/tabs/themes/tab-themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEtE,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,QAAQ;GACX;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,QAAQ;GACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '#theming/types.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/tab/tab.bootstrap.css.js';\nimport { styles as fluent } from './shared/tab/tab.fluent.css.js';\nimport { styles as indigo } from './shared/tab/tab.indigo.css.js';\nimport { styles as material } from './shared/tab/tab.material.css.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n  material: css`\n    ${material}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n  material: css`\n    ${material}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/tabs/themes/tabs-themes.d.ts

@@ -1,2 +1,2 @@
-import type { Themes } from '../../../theming/types.js';
+import type { Themes } from '#theming/types.js';
 export declare const all: Themes;

package/components/tabs/themes/tabs-themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-themes.js","sourceRoot":"","sources":["../../../../src/components/tabs/themes/tabs-themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAElE,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;AACpE,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAExE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,QAAQ,IAAI,aAAa;GAC5B;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,QAAQ,IAAI,YAAY;GAC3B;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/tab.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/tab.fluent.css.js';\nimport { styles as indigoDark } from './dark/tab.indigo.css.js';\nimport { styles as materialDark } from './dark/tab.material.css.js';\nimport { styles as sharedDark } from './dark/tab.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/tab.bootstrap.css.js';\nimport { styles as fluentLight } from './light/tab.fluent.css.js';\nimport { styles as indigoLight } from './light/tab.indigo.css.js';\nimport { styles as materialLight } from './light/tab.material.css.js';\nimport { styles as sharedLight } from './light/tab.shared.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/tabs/tabs.bootstrap.css.js';\nimport { styles as fluent } from './shared/tabs/tabs.fluent.css.js';\nimport { styles as indigo } from './shared/tabs/tabs.indigo.css.js';\nimport { styles as material } from './shared/tabs/tabs.material.css.js';\n\nconst light = {\n  shared: css`\n    ${sharedLight}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${material} ${materialLight}\n  `,\n  fluent: css`\n    ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${sharedDark}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${material} ${materialDark}\n  `,\n  fluent: css`\n    ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"tabs-themes.js","sourceRoot":"","sources":["../../../../src/components/tabs/themes/tabs-themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAElE,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;AACpE,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAExE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,QAAQ,IAAI,aAAa;GAC5B;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,QAAQ,IAAI,YAAY;GAC3B;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '#theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/tab.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/tab.fluent.css.js';\nimport { styles as indigoDark } from './dark/tab.indigo.css.js';\nimport { styles as materialDark } from './dark/tab.material.css.js';\nimport { styles as sharedDark } from './dark/tab.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/tab.bootstrap.css.js';\nimport { styles as fluentLight } from './light/tab.fluent.css.js';\nimport { styles as indigoLight } from './light/tab.indigo.css.js';\nimport { styles as materialLight } from './light/tab.material.css.js';\nimport { styles as sharedLight } from './light/tab.shared.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/tabs/tabs.bootstrap.css.js';\nimport { styles as fluent } from './shared/tabs/tabs.fluent.css.js';\nimport { styles as indigo } from './shared/tabs/tabs.indigo.css.js';\nimport { styles as material } from './shared/tabs/tabs.material.css.js';\n\nconst light = {\n  shared: css`\n    ${sharedLight}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${material} ${materialLight}\n  `,\n  fluent: css`\n    ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${sharedDark}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${material} ${materialDark}\n  `,\n  fluent: css`\n    ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--scroll-btn-size: 3rem;--_border-size: 0.0625rem;display:block;overflow:hidden;position:relative;height:100%;text-align:initial}:host([alignment=end]) [part~=inner]:not([part~=scrollable])::before,:host([alignment=center]) [part~=inner]:not([part~=scrollable])::before,:host([alignment=center]) [part~=inner]:not([part~=scrollable])::after,:host([alignment=start]) [part~=inner]:not([part~=scrollable])::after{content:"";width:100%;height:100%;grid-row:1}[part~=tabs]{display:flex;height:100%;scroll-padding-inline:var(--scroll-btn-size);scroll-behavior:smooth;overflow:scroll hidden;scroll-snap-type:both proximity;scrollbar-width:none}[part~=tabs]::-webkit-scrollbar{display:none}[part~=inner]{display:grid;grid-template-rows:minmax(var(--header-min-height), auto) auto 1fr;align-items:center;position:relative}[part~=inner] ::slotted(igc-tab){display:contents}[part~=scrollable]{grid-template-columns:var(--scroll-btn-size) repeat(var(--_tabs-count), minmax(max-content, auto)) var(--scroll-btn-size)}[part~=inner]:not([part~=scrollable]){grid-template-columns:repeat(var(--_tabs-count), minmax(auto, min-content));min-width:5.625rem}:host([alignment=start]) [part~=inner]:not([part~=scrollable]){grid-template-columns:repeat(var(--_tabs-count), minmax(max-content, auto)) 1fr}:host([alignment=center]) [part~=inner]:not([part~=scrollable]){grid-template-columns:1fr repeat(var(--_tabs-count), minmax(max-content, auto)) 1fr}:host([alignment=end]) [part~=inner]:not([part~=scrollable]){grid-template-columns:1fr repeat(var(--_tabs-count), minmax(max-content, auto))}:host([alignment=justify]){--tab-max-width--justify: 100%}:host([alignment=justify]) [part~=scrollable]{grid-template-columns:var(--scroll-btn-size) repeat(var(--_tabs-count), minmax(5.625rem, 1fr)) var(--scroll-btn-size)}:host([alignment=justify]) [part~=inner]:not([part~=scrollable]){grid-template-columns:repeat(var(--_tabs-count), minmax(5.625rem, auto))}[part~=start-scroll-button],[part~=end-scroll-button]{grid-row:1;position:sticky;top:0;height:100%;min-width:var(--scroll-btn-size);width:var(--scroll-btn-size);z-index:2;transform:scaleX(calc(var(--ig-dir, 1) * 1));touch-action:none}[part~=start-scroll-button]{inset-inline-start:0}[part~=end-scroll-button]{inset-inline-end:0}igc-icon-button::part(base){border-radius:0;padding:0;height:100%;width:100%;transition:none}[part=selected-indicator]{position:relative;grid-row:2;grid-column:1/-1;text-align:initial}[part=selected-indicator] span{position:absolute;display:inline-block;transition:transform .3s cubic-bezier(0.35, 0, 0.25, 1),width .2s cubic-bezier(0.35, 0, 0.25, 1);z-index:1}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--scroll-btn-size: 3rem;--_border-size: 0.0625rem;display:block;overflow:hidden;position:relative;height:100%;text-align:initial}:host([alignment=end]) [part~=inner]:not([part~=scrollable])::before,:host([alignment=center]) [part~=inner]:not([part~=scrollable])::before,:host([alignment=center]) [part~=inner]:not([part~=scrollable])::after,:host([alignment=start]) [part~=inner]:not([part~=scrollable])::after{content:"";width:100%;height:100%;grid-row:1}[part~=tabs]{display:flex;height:100%;scroll-padding-inline:var(--scroll-btn-size);scroll-behavior:smooth;overflow:scroll hidden;scroll-snap-type:both proximity;scrollbar-width:none}[part~=tabs]::-webkit-scrollbar{display:none}[part~=inner]{display:grid;grid-template-rows:minmax(var(--header-min-height), auto) auto 1fr;align-items:center;position:relative}[part~=inner] ::slotted(igc-tab){display:contents}[part~=scrollable]{grid-template-columns:var(--scroll-btn-size) repeat(var(--_tabs-count), minmax(max-content, auto)) var(--scroll-btn-size)}[part~=inner]:not([part~=scrollable]){grid-template-columns:repeat(var(--_tabs-count), minmax(auto, min-content));min-width:5.625rem}:host([alignment=start]) [part~=inner]:not([part~=scrollable]){grid-template-columns:repeat(var(--_tabs-count), minmax(max-content, auto)) 1fr}:host([alignment=center]) [part~=inner]:not([part~=scrollable]){grid-template-columns:1fr repeat(var(--_tabs-count), minmax(max-content, auto)) 1fr}:host([alignment=end]) [part~=inner]:not([part~=scrollable]){grid-template-columns:1fr repeat(var(--_tabs-count), minmax(max-content, auto))}:host([alignment=justify]){--tab-max-width--justify: 100%}:host([alignment=justify]) [part~=scrollable]{grid-template-columns:var(--scroll-btn-size) repeat(var(--_tabs-count), minmax(5.625rem, 1fr)) var(--scroll-btn-size)}:host([alignment=justify]) [part~=inner]:not([part~=scrollable]){grid-template-columns:repeat(var(--_tabs-count), minmax(5.625rem, auto))}[part~=start-scroll-button],[part~=end-scroll-button]{grid-row:1;position:sticky;top:0;height:100%;min-width:var(--scroll-btn-size);width:var(--scroll-btn-size);z-index:2;transform:scaleX(calc(var(--ig-dir, 1) * 1));touch-action:none}[part~=start-scroll-button]{inset-inline-start:0}[part~=end-scroll-button]{inset-inline-end:0}igc-icon-button::part(base){border-radius:0;padding:0;height:100%;width:100%;transition:none}[part=selected-indicator]{position:relative;grid-row:2;grid-column:1/-1;text-align:initial}[part=selected-indicator] span{position:absolute;display:inline-block;transition:transform .3s cubic-bezier(0.35, 0, 0.25, 1),width .2s cubic-bezier(0.35, 0, 0.25, 1);z-index:1}@media(prefers-reduced-motion: reduce){[part=selected-indicator] span{transition:none}}`;
 //# sourceMappingURL=tabs.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.base.css.js","sourceRoot":"","sources":["../../../../src/components/tabs/themes/tabs.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2gHAA2gH,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--scroll-btn-size: 3rem;--_border-size: 0.0625rem;display:block;overflow:hidden;position:relative;height:100%;text-align:initial}:host([alignment=end]) [part~=inner]:not([part~=scrollable])::before,:host([alignment=center]) [part~=inner]:not([part~=scrollable])::before,:host([alignment=center]) [part~=inner]:not([part~=scrollable])::after,:host([alignment=start]) [part~=inner]:not([part~=scrollable])::after{content:\"\";width:100%;height:100%;grid-row:1}[part~=tabs]{display:flex;height:100%;scroll-padding-inline:var(--scroll-btn-size);scroll-behavior:smooth;overflow:scroll hidden;scroll-snap-type:both proximity;scrollbar-width:none}[part~=tabs]::-webkit-scrollbar{display:none}[part~=inner]{display:grid;grid-template-rows:minmax(var(--header-min-height), auto) auto 1fr;align-items:center;position:relative}[part~=inner] ::slotted(igc-tab){display:contents}[part~=scrollable]{grid-template-columns:var(--scroll-btn-size) repeat(var(--_tabs-count), minmax(max-content, auto)) var(--scroll-btn-size)}[part~=inner]:not([part~=scrollable]){grid-template-columns:repeat(var(--_tabs-count), minmax(auto, min-content));min-width:5.625rem}:host([alignment=start]) [part~=inner]:not([part~=scrollable]){grid-template-columns:repeat(var(--_tabs-count), minmax(max-content, auto)) 1fr}:host([alignment=center]) [part~=inner]:not([part~=scrollable]){grid-template-columns:1fr repeat(var(--_tabs-count), minmax(max-content, auto)) 1fr}:host([alignment=end]) [part~=inner]:not([part~=scrollable]){grid-template-columns:1fr repeat(var(--_tabs-count), minmax(max-content, auto))}:host([alignment=justify]){--tab-max-width--justify: 100%}:host([alignment=justify]) [part~=scrollable]{grid-template-columns:var(--scroll-btn-size) repeat(var(--_tabs-count), minmax(5.625rem, 1fr)) var(--scroll-btn-size)}:host([alignment=justify]) [part~=inner]:not([part~=scrollable]){grid-template-columns:repeat(var(--_tabs-count), minmax(5.625rem, auto))}[part~=start-scroll-button],[part~=end-scroll-button]{grid-row:1;position:sticky;top:0;height:100%;min-width:var(--scroll-btn-size);width:var(--scroll-btn-size);z-index:2;transform:scaleX(calc(var(--ig-dir, 1) * 1));touch-action:none}[part~=start-scroll-button]{inset-inline-start:0}[part~=end-scroll-button]{inset-inline-end:0}igc-icon-button::part(base){border-radius:0;padding:0;height:100%;width:100%;transition:none}[part=selected-indicator]{position:relative;grid-row:2;grid-column:1/-1;text-align:initial}[part=selected-indicator] span{position:absolute;display:inline-block;transition:transform .3s cubic-bezier(0.35, 0, 0.25, 1),width .2s cubic-bezier(0.35, 0, 0.25, 1);z-index:1}`;\n  "]}
+{"version":3,"file":"tabs.base.css.js","sourceRoot":"","sources":["../../../../src/components/tabs/themes/tabs.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kmHAAkmH,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--scroll-btn-size: 3rem;--_border-size: 0.0625rem;display:block;overflow:hidden;position:relative;height:100%;text-align:initial}:host([alignment=end]) [part~=inner]:not([part~=scrollable])::before,:host([alignment=center]) [part~=inner]:not([part~=scrollable])::before,:host([alignment=center]) [part~=inner]:not([part~=scrollable])::after,:host([alignment=start]) [part~=inner]:not([part~=scrollable])::after{content:\"\";width:100%;height:100%;grid-row:1}[part~=tabs]{display:flex;height:100%;scroll-padding-inline:var(--scroll-btn-size);scroll-behavior:smooth;overflow:scroll hidden;scroll-snap-type:both proximity;scrollbar-width:none}[part~=tabs]::-webkit-scrollbar{display:none}[part~=inner]{display:grid;grid-template-rows:minmax(var(--header-min-height), auto) auto 1fr;align-items:center;position:relative}[part~=inner] ::slotted(igc-tab){display:contents}[part~=scrollable]{grid-template-columns:var(--scroll-btn-size) repeat(var(--_tabs-count), minmax(max-content, auto)) var(--scroll-btn-size)}[part~=inner]:not([part~=scrollable]){grid-template-columns:repeat(var(--_tabs-count), minmax(auto, min-content));min-width:5.625rem}:host([alignment=start]) [part~=inner]:not([part~=scrollable]){grid-template-columns:repeat(var(--_tabs-count), minmax(max-content, auto)) 1fr}:host([alignment=center]) [part~=inner]:not([part~=scrollable]){grid-template-columns:1fr repeat(var(--_tabs-count), minmax(max-content, auto)) 1fr}:host([alignment=end]) [part~=inner]:not([part~=scrollable]){grid-template-columns:1fr repeat(var(--_tabs-count), minmax(max-content, auto))}:host([alignment=justify]){--tab-max-width--justify: 100%}:host([alignment=justify]) [part~=scrollable]{grid-template-columns:var(--scroll-btn-size) repeat(var(--_tabs-count), minmax(5.625rem, 1fr)) var(--scroll-btn-size)}:host([alignment=justify]) [part~=inner]:not([part~=scrollable]){grid-template-columns:repeat(var(--_tabs-count), minmax(5.625rem, auto))}[part~=start-scroll-button],[part~=end-scroll-button]{grid-row:1;position:sticky;top:0;height:100%;min-width:var(--scroll-btn-size);width:var(--scroll-btn-size);z-index:2;transform:scaleX(calc(var(--ig-dir, 1) * 1));touch-action:none}[part~=start-scroll-button]{inset-inline-start:0}[part~=end-scroll-button]{inset-inline-end:0}igc-icon-button::part(base){border-radius:0;padding:0;height:100%;width:100%;transition:none}[part=selected-indicator]{position:relative;grid-row:2;grid-column:1/-1;text-align:initial}[part=selected-indicator] span{position:absolute;display:inline-block;transition:transform .3s cubic-bezier(0.35, 0, 0.25, 1),width .2s cubic-bezier(0.35, 0, 0.25, 1);z-index:1}@media(prefers-reduced-motion: reduce){[part=selected-indicator] span{transition:none}}`;\n  "]}