igniteui-webcomponents 5.4.0 → 6.0.0

package/components/tabs/tab-dom.js

@@ -0,0 +1,93 @@
+import { isLTR } from '../common/util.js';
+class TabsHelpers {
+    get container() {
+        return this._container.value;
+    }
+    get indicator() {
+        return this._indicator.value;
+    }
+    get styleProperties() {
+        return this._styleProperties;
+    }
+    get hasScrollButtons() {
+        return this._hasScrollButtons;
+    }
+    get scrollButtonsDisabled() {
+        return this._scrollButtonsDisabled;
+    }
+    get isLeftToRightChanged() {
+        const isLeftToRight = isLTR(this._host);
+        if (this._isLeftToRight !== isLeftToRight) {
+            this._isLeftToRight = isLeftToRight;
+            return true;
+        }
+        return false;
+    }
+    constructor(host, container, indicator) {
+        this._styleProperties = {
+            '--_tabs-count': '',
+            '--_ig-tabs-width': '',
+        };
+        this._hasScrollButtons = false;
+        this._scrollButtonsDisabled = { start: true, end: false };
+        this._isLeftToRight = false;
+        this._host = host;
+        this._container = container;
+        this._indicator = indicator;
+    }
+    setStyleProperties() {
+        this._styleProperties = {
+            '--_tabs-count': this._host.tabs.length.toString(),
+            '--_ig-tabs-width': `${this.container.getBoundingClientRect().width}px`,
+        };
+        this._host.requestUpdate();
+    }
+    setScrollSnap(type) {
+        this.container.style.setProperty('--_ig-tab-snap', type || 'unset');
+    }
+    scrollTabs(direction) {
+        const factor = isLTR(this._host) ? 1 : -1;
+        const amount = direction === 'start'
+            ? -TabsHelpers.SCROLL_AMOUNT
+            : TabsHelpers.SCROLL_AMOUNT;
+        this.setScrollSnap(direction);
+        this.container.scrollBy({ left: factor * amount, behavior: 'smooth' });
+    }
+    setScrollButtonState() {
+        const { scrollLeft, scrollWidth, clientWidth } = this.container;
+        this._hasScrollButtons = scrollWidth > clientWidth;
+        this._scrollButtonsDisabled = {
+            start: scrollLeft === 0,
+            end: Math.abs(Math.abs(scrollLeft) + clientWidth - scrollWidth) <= 1,
+        };
+        this._host.requestUpdate();
+    }
+    async setIndicator(active) {
+        const styles = {
+            visibility: active ? 'visible' : 'hidden',
+        };
+        await this._host.updateComplete;
+        if (active) {
+            const tabHeader = getTabHeader(active);
+            const { width } = tabHeader.getBoundingClientRect();
+            const offset = this._isLeftToRight
+                ? tabHeader.offsetLeft - this.container.offsetLeft
+                : width +
+                    tabHeader.offsetLeft -
+                    this.container.getBoundingClientRect().width;
+            Object.assign(styles, {
+                width: `${width}px`,
+                transform: `translateX(${offset}px)`,
+            });
+        }
+        Object.assign(this.indicator.style, styles);
+    }
+}
+TabsHelpers.SCROLL_AMOUNT = 180;
+export function createTabHelpers(host, container, indicator) {
+    return new TabsHelpers(host, container, indicator);
+}
+export function getTabHeader(tab) {
+    return tab.renderRoot.querySelector('[part~="tab-header"]');
+}
+//# sourceMappingURL=tab-dom.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-dom.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-dom.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Ref } from 'lit/directives/ref.js';\nimport { isLTR } from '../common/util.js';\nimport type IgcTabComponent from './tab.js';\nimport type IgcTabsComponent from './tabs.js';\n\nclass TabsHelpers {\n  private static readonly SCROLL_AMOUNT = 180;\n  private readonly _host: IgcTabsComponent;\n  private readonly _container: Ref<HTMLElement>;\n  private readonly _indicator: Ref<HTMLElement>;\n\n  private _styleProperties = {\n    '--_tabs-count': '',\n    '--_ig-tabs-width': '',\n  };\n\n  private _hasScrollButtons = false;\n  private _scrollButtonsDisabled = { start: true, end: false };\n\n  private _isLeftToRight = false;\n\n  /**\n   * Returns the DOM container holding the tabs headers.\n   */\n  public get container(): HTMLElement {\n    return this._container.value!;\n  }\n\n  /**\n   * Returns the selected indicator DOM element.\n   */\n  public get indicator(): HTMLElement {\n    return this._indicator.value!;\n  }\n\n  /**\n   * Returns the internal CSS variables used for the layout of the tabs component.\n   */\n  public get styleProperties() {\n    return this._styleProperties;\n  }\n\n  /**\n   * Whether the scroll buttons of the tabs header strip should be shown.\n   */\n  public get hasScrollButtons(): boolean {\n    return this._hasScrollButtons;\n  }\n\n  /**\n   * Returns the disabled state of the tabs header strip scroll buttons.\n   */\n  public get scrollButtonsDisabled() {\n    return this._scrollButtonsDisabled;\n  }\n\n  public get isLeftToRightChanged(): boolean {\n    const isLeftToRight = isLTR(this._host);\n\n    if (this._isLeftToRight !== isLeftToRight) {\n      this._isLeftToRight = isLeftToRight;\n      return true;\n    }\n\n    return false;\n  }\n\n  constructor(\n    host: IgcTabsComponent,\n    container: Ref<HTMLElement>,\n    indicator: Ref<HTMLElement>\n  ) {\n    this._host = host;\n    this._container = container;\n    this._indicator = indicator;\n  }\n\n  /**\n   * Sets the internal CSS variables used for the layout of the tabs component.\n   * Triggers an update cycle (rerender) of the `igc-tabs` component.\n   */\n  public setStyleProperties(): void {\n    this._styleProperties = {\n      '--_tabs-count': this._host.tabs.length.toString(),\n      '--_ig-tabs-width': `${this.container.getBoundingClientRect().width}px`,\n    };\n    this._host.requestUpdate();\n  }\n\n  /**\n   * Sets the type of the `scroll-snap-align` CSS property for the tabs header strip.\n   */\n  public setScrollSnap(type?: 'start' | 'end'): void {\n    this.container.style.setProperty('--_ig-tab-snap', type || 'unset');\n  }\n\n  /**\n   * Scrolls the tabs header strip in the given direction with `scroll-snap-align` set.\n   */\n  public scrollTabs(direction: 'start' | 'end'): void {\n    const factor = isLTR(this._host) ? 1 : -1;\n    const amount =\n      direction === 'start'\n        ? -TabsHelpers.SCROLL_AMOUNT\n        : TabsHelpers.SCROLL_AMOUNT;\n\n    this.setScrollSnap(direction);\n    this.container.scrollBy({ left: factor * amount, behavior: 'smooth' });\n  }\n\n  /**\n   * Updates the state of the tabs header strip scroll buttons - visibility and active state.\n   * Triggers an update cycle (rerender) of the `igc-tabs` component.\n   */\n  public setScrollButtonState(): void {\n    const { scrollLeft, scrollWidth, clientWidth } = this.container;\n\n    this._hasScrollButtons = scrollWidth > clientWidth;\n    this._scrollButtonsDisabled = {\n      start: scrollLeft === 0,\n      end: Math.abs(Math.abs(scrollLeft) + clientWidth - scrollWidth) <= 1,\n    };\n\n    this._host.requestUpdate();\n  }\n\n  /**\n   * Updates the indicator DOM element styles based on the current \"active\" tab.\n   */\n  public async setIndicator(active?: IgcTabComponent): Promise<void> {\n    const styles = {\n      visibility: active ? 'visible' : 'hidden',\n    } satisfies Partial<CSSStyleDeclaration>;\n\n    await this._host.updateComplete;\n\n    if (active) {\n      const tabHeader = getTabHeader(active);\n      const { width } = tabHeader.getBoundingClientRect();\n\n      const offset = this._isLeftToRight\n        ? tabHeader.offsetLeft - this.container.offsetLeft\n        : width +\n          tabHeader.offsetLeft -\n          this.container.getBoundingClientRect().width;\n\n      Object.assign(styles, {\n        width: `${width}px`,\n        transform: `translateX(${offset}px)`,\n      });\n    }\n\n    Object.assign(this.indicator.style, styles);\n  }\n}\n\nexport function createTabHelpers(\n  host: IgcTabsComponent,\n  container: Ref<HTMLElement>,\n  indicator: Ref<HTMLElement>\n) {\n  return new TabsHelpers(host, container, indicator);\n}\n\nexport function getTabHeader(tab: IgcTabComponent): HTMLElement {\n  return tab.renderRoot.querySelector('[part~=\"tab-header\"]')!;\n}\n"]}

package/components/tabs/tab.d.ts

@@ -1,28 +1,30 @@
 import { LitElement } from 'lit';
 /**
- * Represents the tab header.
+ * A tab element slotted into an `igc-tabs` container.
  *
  * @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.
+ * @slot - Renders the tab's content.
+ * @slot label - Renders the tab header's label.
+ * @slot prefix - Renders the tab header's prefix.
+ * @slot suffix - Renders the tab header's suffix.
  *
- * @csspart content - The content wrapper.
- * @csspart prefix - The prefix wrapper.
- * @csspart suffix - The suffix wrapper.
+ * @csspart tab-header - The header of a single tab.
+ * @csspart prefix - Tab header's label prefix.
+ * @csspart content - Tab header's label slot container.
+ * @csspart suffix - Tab header's label suffix.
+ * @csspart tab-body - Holds the body content of a single tab, only the body of the selected tab is visible.
  */
 export default class IgcTabComponent extends LitElement {
     static readonly tagName = "igc-tab";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    private static readonly increment;
-    private tab;
+    private static increment;
     /**
-     * The id of the tab panel which will be controlled by the tab.
+     * The tab item label.
      * @attr
      */
-    panel: string;
+    label: string;
     /**
      * Determines whether the tab is selected.
      * @attr
@@ -33,11 +35,8 @@ export default class IgcTabComponent extends LitElement {
      * @attr
      */
     disabled: boolean;
+    /** @internal */
     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 {

package/components/tabs/tab.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var IgcTabComponent_1;
 import { LitElement, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { createCounter } from '../common/util.js';
@@ -16,7 +16,7 @@ import { styles } from './themes/tab.base.css.js';
 let IgcTabComponent = IgcTabComponent_1 = class IgcTabComponent extends LitElement {
     constructor() {
         super(...arguments);
-        this.panel = '';
+        this.label = '';
         this.selected = false;
         this.disabled = false;
     }
@@ -25,29 +25,37 @@ let IgcTabComponent = IgcTabComponent_1 = class IgcTabComponent extends LitEleme
     }
     connectedCallback() {
         super.connectedCallback();
-        this.id =
-            this.getAttribute('id') || `igc-tab-${IgcTabComponent_1.increment()}`;
-    }
-    focus(options) {
-        this.tab.focus(options);
-    }
-    blur() {
-        this.tab.blur();
+        this.id = this.id || `igc-tab-${IgcTabComponent_1.increment()}`;
     }
     render() {
+        const headerId = `${this.id}-header`;
+        const contentId = `${this.id}-content`;
         return html `
       <div
-        part="base"
+        part="tab-header"
         role="tab"
-        aria-disabled=${this.disabled ? 'true' : 'false'}
-        aria-selected=${this.selected ? 'true' : 'false'}
-        tabindex=${this.disabled || !this.selected ? -1 : 0}
+        id=${headerId}
+        aria-disabled=${this.disabled}
+        aria-selected=${this.selected}
+        aria-controls=${contentId}
+        tabindex=${this.selected ? 0 : -1}
       >
-        <slot name="prefix" part="prefix"></slot>
-        <div part="content">
-          <slot></slot>
+        <div part="base">
+          <slot name="prefix" part="prefix"></slot>
+          <div part="content">
+            <slot name="label">${this.label}</slot>
+          </div>
+          <slot name="suffix" part="suffix"></slot>
         </div>
-        <slot name="suffix" part="suffix"></slot>
+      </div>
+      <div
+        part="tab-body"
+        role="tabpanel"
+        id=${contentId}
+        aria-labelledby=${headerId}
+        .inert=${!this.selected}
+      >
+        <slot></slot>
       </div>
     `;
     }
@@ -55,12 +63,9 @@ let IgcTabComponent = IgcTabComponent_1 = class IgcTabComponent extends LitEleme
 IgcTabComponent.tagName = 'igc-tab';
 IgcTabComponent.styles = [styles, shared];
 IgcTabComponent.increment = createCounter();
-__decorate([
-    query('[part="base"]', true)
-], IgcTabComponent.prototype, "tab", void 0);
 __decorate([
     property()
-], IgcTabComponent.prototype, "panel", void 0);
+], IgcTabComponent.prototype, "label", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcTabComponent.prototype, "selected", void 0);

package/components/tabs/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAiBnC,IAAM,eAAe,uBAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAmBN,UAAK,GAAG,EAAE,CAAC;QAOX,aAAQ,GAAG,KAAK,CAAC;QAOjB,aAAQ,GAAG,KAAK,CAAC;IAmC1B,CAAC;IA/DQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,iBAAe,CAAC,CAAC;IACrC,CAAC;IA4Be,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE;YACL,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,WAAW,iBAAe,CAAC,SAAS,EAAE,EAAE,CAAC;IACxE,CAAC;IAGe,KAAK,CAAC,OAAsB;QAC1C,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC;IAGe,IAAI;QAClB,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;IAClB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;wBAIS,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;wBAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBACrC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;;KAQtD,CAAC;IACJ,CAAC;;AAlEsB,uBAAO,GAAG,SAAS,AAAZ,CAAa;AACpB,sBAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAOzB,yBAAS,GAAG,aAAa,EAAE,AAAlB,CAAmB;AAG5C;IADP,KAAK,CAAC,eAAe,EAAE,IAAI,CAAC;4CACH;AAOnB;IADN,QAAQ,EAAE;8CACO;AAOX;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AAjCL,eAAe;IADnC,MAAM,CAAC,GAAG,CAAC;GACS,eAAe,CAoEnC;eApEoB,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { createCounter } from '../common/util.js';\nimport { styles as shared } from './themes/shared/tab/tab.common.css.js';\nimport { all } from './themes/tab-themes.js';\nimport { styles } from './themes/tab.base.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\n@themes(all)\nexport default class IgcTabComponent extends LitElement {\n  public static readonly tagName = 'igc-tab';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcTabComponent);\n  }\n\n  private static readonly increment = createCounter();\n\n  @query('[part=\"base\"]', true)\n  private tab!: HTMLElement;\n\n  /**\n   * The id of the tab panel which will be controlled by the tab.\n   * @attr\n   */\n  @property()\n  public panel = '';\n\n  /**\n   * Determines whether the tab is selected.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the tab is disabled.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.id =\n      this.getAttribute('id') || `igc-tab-${IgcTabComponent.increment()}`;\n  }\n\n  /** Sets focus to the tab. */\n  public override focus(options?: FocusOptions) {\n    this.tab.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  public override blur() {\n    this.tab.blur();\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"tab\"\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-selected=${this.selected ? 'true' : 'false'}\n        tabindex=${this.disabled || !this.selected ? -1 : 0}\n      >\n        <slot name=\"prefix\" part=\"prefix\"></slot>\n        <div part=\"content\">\n          <slot></slot>\n        </div>\n        <slot name=\"suffix\" part=\"suffix\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tab': IgcTabComponent;\n  }\n}\n"]}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAoBnC,IAAM,eAAe,uBAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAgBN,UAAK,GAAG,EAAE,CAAC;QAOX,aAAQ,GAAG,KAAK,CAAC;QAOjB,aAAQ,GAAG,KAAK,CAAC;IAyC1B,CAAC;IAlEQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,iBAAe,CAAC,CAAC;IACrC,CAAC;IA0Be,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,WAAW,iBAAe,CAAC,SAAS,EAAE,EAAE,CAAC;IAChE,CAAC;IAEkB,MAAM;QACvB,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,EAAE,SAAS,CAAC;QACrC,MAAM,SAAS,GAAG,GAAG,IAAI,CAAC,EAAE,UAAU,CAAC;QAEvC,OAAO,IAAI,CAAA;;;;aAIF,QAAQ;wBACG,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,QAAQ;wBACb,SAAS;mBACd,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;iCAKR,IAAI,CAAC,KAAK;;;;;;;;aAQ9B,SAAS;0BACI,QAAQ;iBACjB,CAAC,IAAI,CAAC,QAAQ;;;;KAI1B,CAAC;IACJ,CAAC;;AArEsB,uBAAO,GAAG,SAAS,AAAZ,CAAa;AACpB,sBAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAOlC,yBAAS,GAAG,aAAa,EAAE,AAAlB,CAAmB;AAOpC;IADN,QAAQ,EAAE;8CACO;AAOX;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AA9BL,eAAe;IADnC,MAAM,CAAC,GAAG,CAAC;GACS,eAAe,CAuEnC;eAvEoB,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { createCounter } from '../common/util.js';\nimport { styles as shared } from './themes/shared/tab/tab.common.css.js';\nimport { all } from './themes/tab-themes.js';\nimport { styles } from './themes/tab.base.css.js';\n\n/**\n * A tab element slotted into an `igc-tabs` container.\n *\n * @element igc-tab\n *\n * @slot - Renders the tab's content.\n * @slot label - Renders the tab header's label.\n * @slot prefix - Renders the tab header's prefix.\n * @slot suffix - Renders the tab header's suffix.\n *\n * @csspart tab-header - The header of a single tab.\n * @csspart prefix - Tab header's label prefix.\n * @csspart content - Tab header's label slot container.\n * @csspart suffix - Tab header's label suffix.\n * @csspart tab-body - Holds the body content of a single tab, only the body of the selected tab is visible.\n */\n\n@themes(all)\nexport default class IgcTabComponent extends LitElement {\n  public static readonly tagName = 'igc-tab';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcTabComponent);\n  }\n\n  private static increment = createCounter();\n\n  /**\n   * The tab item label.\n   * @attr\n   */\n  @property()\n  public label = '';\n\n  /**\n   * Determines whether the tab is selected.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the tab is disabled.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.id = this.id || `igc-tab-${IgcTabComponent.increment()}`;\n  }\n\n  protected override render() {\n    const headerId = `${this.id}-header`;\n    const contentId = `${this.id}-content`;\n\n    return html`\n      <div\n        part=\"tab-header\"\n        role=\"tab\"\n        id=${headerId}\n        aria-disabled=${this.disabled}\n        aria-selected=${this.selected}\n        aria-controls=${contentId}\n        tabindex=${this.selected ? 0 : -1}\n      >\n        <div part=\"base\">\n          <slot name=\"prefix\" part=\"prefix\"></slot>\n          <div part=\"content\">\n            <slot name=\"label\">${this.label}</slot>\n          </div>\n          <slot name=\"suffix\" part=\"suffix\"></slot>\n        </div>\n      </div>\n      <div\n        part=\"tab-body\"\n        role=\"tabpanel\"\n        id=${contentId}\n        aria-labelledby=${headerId}\n        .inert=${!this.selected}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tab': IgcTabComponent;\n  }\n}\n"]}

package/components/tabs/tabs.d.ts

@@ -1,53 +1,40 @@
-import { LitElement, nothing } from 'lit';
-import { type Ref } from 'lit/directives/ref.js';
+import { LitElement } from 'lit';
 import type { Constructor } from '../common/mixins/constructor.js';
 import type { TabsActivation, TabsAlignment } from '../types.js';
-import IgcTabPanelComponent from './tab-panel.js';
 import IgcTabComponent from './tab.js';
 export interface IgcTabsComponentEventMap {
     igcChange: CustomEvent<IgcTabComponent>;
 }
 declare const IgcTabsComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcTabsComponentEventMap>> & Constructor<LitElement>;
 /**
- * Represents tabs component
+ * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
+ *
+ * The `<igc-tabs>` component allows the user to navigate between multiple `<igc-tab>` elements.
+ * It supports keyboard navigation and provides API methods to control the selected tab.
  *
  * @element igc-tabs
  *
  * @fires igcChange - Emitted when the selected tab changes.
  *
- * @slot - Renders the tab header.
- * @slot panel - Renders the tab content.
+ * @slot - Renders the `IgcTabComponents` inside default slot.
  *
- * @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.
+ * @csspart selected-indicator - The indicator that shows which tab is selected.
  */
 export default class IgcTabsComponent extends IgcTabsComponent_base {
     static readonly tagName = "igc-tabs";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    private static readonly increment;
-    protected headerRef: Ref<HTMLDivElement>;
-    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;
-    private get _closestActiveTabIndex();
-    private _mutationCallback;
-    protected get enabledTabs(): IgcTabComponent[];
-    /** Returns the currently selected tab. */
-    get selected(): string;
+    private readonly _resizeController;
+    /** The tabs container reference holding the tab headers. */
+    private readonly _headerRef;
+    /** The selected tab indicator reference.  */
+    private readonly _indicatorRef;
+    private readonly _domHelpers;
+    private _tabs;
+    protected get _enabledTabs(): IgcTabComponent[];
+    private _activeTab?;
     /**
      * Sets the alignment for the tab headers
      * @attr
@@ -61,29 +48,35 @@ export default class IgcTabsComponent extends IgcTabsComponent_base {
      * @attr
      */
     activation: TabsActivation;
-    protected alignIndicator(): void;
+    /** Returns the direct `igc-tab` elements that are children of this element. */
+    get tabs(): IgcTabComponent[];
+    /** Returns the currently selected tab label or IDREF if no label property is set. */
+    get selected(): string;
+    protected _alignmentChanged(): void;
     constructor();
     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;
-    private _scrollToAndFocus;
-    private _kbActivateTab;
-    private onArrowLeft;
-    private onArrowRight;
-    private onHomeKey;
-    private onEndKey;
-    private onActivationKey;
-    protected handleScroll(): void;
+    /** @internal */
+    connectedCallback(): void;
+    protected updated(): void;
+    private _resizeCallback;
+    private _mutationCallback;
+    private _selectedAttributeChanged;
+    private _handleTabsAdded;
+    private _handleTabsRemoved;
+    private _getClosestActiveTabIndex;
+    private _setSelectedTab;
+    private _keyboardActivateTab;
+    private _skipKeyboard;
+    private _isEventFromTabHeader;
+    protected _handleArrowKeys(delta: -1 | 1): void;
+    protected _handleHomeKey(): void;
+    protected _handleEndKey(): void;
+    protected _handleActivationKeys(): void;
+    protected _handleClick(event: PointerEvent): 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;
+    select(ref: IgcTabComponent | string): void;
+    protected _renderScrollButton(direction: 'start' | 'end'): import("lit-html").TemplateResult<1>;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {