igniteui-webcomponents 7.2.4 → 7.3.0-beta.1

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

@@ -1 +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 { getScaleFactor, isLTR, setStyles } 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 | undefined {\n    return this._container.value;\n  }\n\n  /**\n   * Returns the selected indicator DOM element.\n   */\n  public get indicator(): HTMLElement | undefined {\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\n        ? `${this.container.getBoundingClientRect().width}px`\n        : '',\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    if (this.container) {\n      this.container.style.setProperty('--_ig-tab-snap', type || 'unset');\n    }\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    if (!this.container) {\n      return;\n    }\n\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    if (!this.container) {\n      return;\n    }\n\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    if (!(this.container && this.indicator)) {\n      return;\n    }\n\n    const styles = {\n      visibility: active ? 'visible' : 'hidden',\n    } satisfies Partial<CSSStyleDeclaration>;\n\n    await this._host.updateComplete;\n\n    if (active) {\n      const header = getTabHeader(active);\n      const { offsetLeft: containerLeft, offsetWidth: containerWidth } =\n        this.container;\n      const scaledWidth =\n        header.getBoundingClientRect().width * getScaleFactor(header).x;\n\n      const offset = this._isLeftToRight\n        ? header.offsetLeft - containerLeft\n        : header.offsetLeft + scaledWidth - containerWidth;\n\n      Object.assign(styles, {\n        width: `${scaledWidth}px`,\n        transform: `translateX(${offset}px)`,\n      });\n    }\n\n    setStyles(this.indicator, 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"]}
+{"version":3,"file":"tab-dom.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-dom.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAKpD,MAAM,cAAc,GAAG,CAAC,CAAC;AAYzB,MAAM,WAAW;IAmBf,IAAW,SAAS;QAClB,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IAC/B,CAAC;IAGD,IAAW,SAAS;QAClB,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IAC/B,CAAC;IAGD,IAAW,eAAe;QACxB,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAGD,IAAW,gBAAgB;QACzB,OAAO,IAAI,CAAC,iBAAiB,CAAC;IAChC,CAAC;IAGD,IAAW,qBAAqB;QAC9B,OAAO,IAAI,CAAC,sBAAsB,CAAC;IACrC,CAAC;IAED,YACE,IAAsB,EACtB,SAA2B,EAC3B,SAA2B;QAzCrB,qBAAgB,GAAwB;YAC9C,eAAe,EAAE,EAAE;YACnB,kBAAkB,EAAE,EAAE;SACvB,CAAC;QAEM,sBAAiB,GAAG,KAAK,CAAC;QAC1B,2BAAsB,GAAuB;YACnD,KAAK,EAAE,IAAI;YACX,GAAG,EAAE,KAAK;SACX,CAAC;QAEM,mBAAc,GAAG,KAAK,CAAC;QAgC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC5B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;IAC9B,CAAC;IAMM,kBAAkB;QACvB,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS;YAC1B,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAE,CAAC,KAAK,IAAI;YACrD,CAAC,CAAC,EAAE,CAAC;QACP,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAEtC,IACE,OAAO,CAAC,eAAe,CAAC,KAAK,KAAK;YAClC,OAAO,CAAC,kBAAkB,CAAC,KAAK,KAAK,EACrC,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,gBAAgB,GAAG;YACtB,eAAe,EAAE,KAAK;YACtB,kBAAkB,EAAE,KAAK;SAC1B,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;IAC7B,CAAC;IAEM,uBAAuB;QAC5B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAExC,IAAI,IAAI,CAAC,cAAc,KAAK,aAAa,EAAE,CAAC;YAC1C,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;YACpC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC;IAKM,aAAa,CAAC,IAAsB;QACzC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,IAAI,IAAI,OAAO,CAAC,CAAC;QACtE,CAAC;IACH,CAAC;IAMO,iBAAiB,CAAC,SAAsB;QAI9C,MAAM,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,GACxD,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAC9B,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;QAE1D,MAAM,KAAK,GAAG,QAAQ,CAAC,wBAAwB,CAAC,CAAC;QACjD,MAAM,GAAG,GAAG,QAAQ,CAAC,sBAAsB,CAAC,CAAC;QAE7C,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;YACtB,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,GAAG,KAAK,EAAE,GAAG,EAAE,KAAK,GAAG,GAAG,EAAE;YACzC,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,GAAG,GAAG,EAAE,GAAG,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;IAC9C,CAAC;IAMO,gBAAgB,CACtB,SAAsB,EACtB,SAA0B;QAE1B,MAAM,KAAK,GAAG,SAAS,KAAK,KAAK,CAAC;QAClC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAIvD,MAAM,YAAY,GAAG,KAAK,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEjD,MAAM,WAAW,GAAG,CAAC,MAAmB,EAAW,EAAE;YACnD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;YACvD,OAAO,YAAY;gBACjB,CAAC,CAAC,KAAK,GAAG,GAAG,GAAG,cAAc;gBAC9B,CAAC,CAAC,IAAI,GAAG,GAAG,GAAG,cAAc,CAAC;QAClC,CAAC,CAAC;QAEF,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI;aAC5B,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;aAC/B,MAAM,CAAC,CAAC,MAAM,EAAyB,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC;QAI9D,MAAM,MAAM,GAAG,KAAK;YAClB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC;YAC3B,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAElC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO,CAAC,CAAC;QACX,CAAC;QAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QACvD,OAAO,YAAY,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC;IACjD,CAAC;IAMM,UAAU,CAAC,SAA0B;QAC1C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAEjC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAE3D,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAC9B,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC3D,CAAC;IAMM,oBAAoB;QACzB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAChE,MAAM,QAAQ,GAAG,IAAI,CAAC,sBAAsB,CAAC;QAE7C,MAAM,gBAAgB,GAAG,WAAW,GAAG,WAAW,CAAC;QACnD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACxC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QAE5E,IACE,IAAI,CAAC,iBAAiB,KAAK,gBAAgB;YAC3C,QAAQ,CAAC,KAAK,KAAK,KAAK;YACxB,QAAQ,CAAC,GAAG,KAAK,GAAG,EACpB,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC;QAC1C,IAAI,CAAC,sBAAsB,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;QAE7C,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;IAC7B,CAAC;IAKM,KAAK,CAAC,YAAY,CAAC,MAAwB;QAChD,MAAM,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;QAEhC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAEtC,IAAI,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,EAAE,CAAC;YAC9B,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAEpD,MAAM,MAAM,GAAG;YACb,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;SACH,CAAC;QAEzC,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,GAC9D,SAAS,CAAC;YACZ,MAAM,WAAW,GACf,MAAM,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YAElE,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;gBAC9B,CAAC,CAAC,MAAM,CAAC,UAAU,GAAG,aAAa;gBACnC,CAAC,CAAC,MAAM,CAAC,UAAU,GAAG,WAAW,GAAG,cAAc,CAAC;YAErD,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;gBACpB,KAAK,EAAE,GAAG,WAAW,IAAI;gBACzB,SAAS,EAAE,cAAc,MAAM,KAAK;aACrC,CAAC,CAAC;QACL,CAAC;QAED,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAC/B,CAAC;CACF;AAED,MAAM,UAAU,gBAAgB,CAC9B,IAAsB,EACtB,SAA2B,EAC3B,SAA2B;IAE3B,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AACrD,CAAC;AAGD,MAAM,UAAU,YAAY,CAAC,GAAoB;IAC/C,OAAO,GAAG,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;AAC9D,CAAC","sourcesContent":["import type { Ref } from 'lit/directives/ref.js';\nimport { getScaleFactor, isLTR, setStyles } from '#internals/utils/dom.js';\nimport { asNumber } from '#internals/utils/math.js';\nimport type IgcTabComponent from './tab.js';\nimport type IgcTabsComponent from './tabs.js';\n\n/** Tolerance for treating a tab edge as aligned with the visible region. */\nconst EDGE_TOLERANCE = 1;\n\ntype TabsStyleProperties = {\n  '--_tabs-count': string;\n  '--_ig-tabs-width': string;\n};\n\ntype ScrollButtonsState = {\n  start: boolean;\n  end: boolean;\n};\n\nclass TabsHelpers {\n  private readonly _host: IgcTabsComponent;\n  private readonly _container: Ref<HTMLElement>;\n  private readonly _indicator: Ref<HTMLElement>;\n\n  private _styleProperties: TabsStyleProperties = {\n    '--_tabs-count': '',\n    '--_ig-tabs-width': '',\n  };\n\n  private _hasScrollButtons = false;\n  private _scrollButtonsDisabled: ScrollButtonsState = {\n    start: true,\n    end: false,\n  };\n\n  private _isLeftToRight = false;\n\n  /** The DOM container holding the tab headers. */\n  public get container(): HTMLElement | undefined {\n    return this._container.value;\n  }\n\n  /** The selected tab indicator element. */\n  public get indicator(): HTMLElement | undefined {\n    return this._indicator.value;\n  }\n\n  /** The internal CSS variables driving the layout of the tabs component. */\n  public get styleProperties(): TabsStyleProperties {\n    return this._styleProperties;\n  }\n\n  /** Whether the header strip overflows and needs its scroll buttons. */\n  public get hasScrollButtons(): boolean {\n    return this._hasScrollButtons;\n  }\n\n  /** The disabled state of the header strip scroll buttons. */\n  public get scrollButtonsDisabled(): ScrollButtonsState {\n    return this._scrollButtonsDisabled;\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 if needed.\n   */\n  public setStyleProperties(): void {\n    const count = String(this._host.tabs.length);\n    const width = this.container\n      ? `${this.container.getBoundingClientRect().width}px`\n      : '';\n    const current = this._styleProperties;\n\n    if (\n      current['--_tabs-count'] === count &&\n      current['--_ig-tabs-width'] === width\n    ) {\n      return;\n    }\n\n    this._styleProperties = {\n      '--_tabs-count': count,\n      '--_ig-tabs-width': width,\n    };\n    this._host.requestUpdate();\n  }\n\n  public checkAndUpdateDirection(): 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  /**\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    if (this.container) {\n      this.container.style.setProperty('--_ig-tab-snap', type || 'unset');\n    }\n  }\n\n  /**\n   * The horizontal bounds of the strip that are not covered by the sticky scroll\n   * buttons, which is the area a tab has to fit in to count as being in view.\n   */\n  private _getVisibleBounds(container: HTMLElement): {\n    min: number;\n    max: number;\n  } {\n    const { scrollPaddingInlineStart, scrollPaddingInlineEnd } =\n      getComputedStyle(container);\n    const { left, right } = container.getBoundingClientRect();\n\n    const start = asNumber(scrollPaddingInlineStart);\n    const end = asNumber(scrollPaddingInlineEnd);\n\n    return isLTR(this._host)\n      ? { min: left + start, max: right - end }\n      : { min: left + end, max: right - start };\n  }\n\n  /**\n   * The distance needed to bring the closest tab that is not fully in view for the\n   * given direction inside the visible bounds, or `0` when every tab is in view.\n   */\n  private _getScrollOffset(\n    container: HTMLElement,\n    direction: 'start' | 'end'\n  ): number {\n    const isEnd = direction === 'end';\n    const { min, max } = this._getVisibleBounds(container);\n\n    // Which edge a tab overflows depends on the scroll direction and the text\n    // direction alike - scrolling towards the end moves leftwards in RTL.\n    const useRightEdge = isEnd === isLTR(this._host);\n\n    const isOutOfView = (header: HTMLElement): boolean => {\n      const { left, right } = header.getBoundingClientRect();\n      return useRightEdge\n        ? right > max + EDGE_TOLERANCE\n        : left < min - EDGE_TOLERANCE;\n    };\n\n    const headers = this._host.tabs\n      .map((tab) => getTabHeader(tab))\n      .filter((header): header is HTMLElement => header !== null);\n\n    // Tabs are in document order, so the first match going forward and the last one\n    // going backwards are the ones closest to the visible region.\n    const target = isEnd\n      ? headers.find(isOutOfView)\n      : headers.findLast(isOutOfView);\n\n    if (!target) {\n      return 0;\n    }\n\n    const { left, right } = target.getBoundingClientRect();\n    return useRightEdge ? right - max : left - min;\n  }\n\n  /**\n   * Scrolls the tabs header strip to the closest tab that is out of view in the given\n   * direction, with `scroll-snap-align` set.\n   */\n  public scrollTabs(direction: 'start' | 'end'): void {\n    const container = this.container;\n\n    if (!container) {\n      return;\n    }\n\n    const offset = this._getScrollOffset(container, direction);\n\n    if (!offset) {\n      return;\n    }\n\n    this.setScrollSnap(direction);\n    container.scrollBy({ left: offset, 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    if (!this.container) {\n      return;\n    }\n\n    const { scrollLeft, scrollWidth, clientWidth } = this.container;\n    const disabled = this._scrollButtonsDisabled;\n\n    const hasScrollButtons = scrollWidth > clientWidth;\n    const start = Math.abs(scrollLeft) <= 1;\n    const end = Math.abs(Math.abs(scrollLeft) + clientWidth - scrollWidth) <= 1;\n\n    if (\n      this._hasScrollButtons === hasScrollButtons &&\n      disabled.start === start &&\n      disabled.end === end\n    ) {\n      return;\n    }\n\n    this._hasScrollButtons = hasScrollButtons;\n    this._scrollButtonsDisabled = { start, end };\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    await this._host.updateComplete;\n\n    const { container, indicator } = this;\n\n    if (!(container && indicator)) {\n      return;\n    }\n\n    const header = active ? getTabHeader(active) : null;\n\n    const styles = {\n      visibility: header ? 'visible' : 'hidden',\n    } satisfies Partial<CSSStyleDeclaration>;\n\n    if (header) {\n      const { offsetLeft: containerLeft, offsetWidth: containerWidth } =\n        container;\n      const scaledWidth =\n        header.getBoundingClientRect().width * getScaleFactor(header).x;\n\n      const offset = isLTR(this._host)\n        ? header.offsetLeft - containerLeft\n        : header.offsetLeft + scaledWidth - containerWidth;\n\n      Object.assign(styles, {\n        width: `${scaledWidth}px`,\n        transform: `translateX(${offset}px)`,\n      });\n    }\n\n    setStyles(indicator, styles);\n  }\n}\n\nexport function createTabHelpers(\n  host: IgcTabsComponent,\n  container: Ref<HTMLElement>,\n  indicator: Ref<HTMLElement>\n): TabsHelpers {\n  return new TabsHelpers(host, container, indicator);\n}\n\n/** Returns the header element of the given tab, or `null` if it has not rendered yet. */\nexport function getTabHeader(tab: IgcTabComponent): HTMLElement | null {\n  return tab.renderRoot.querySelector('[part~=\"tab-header\"]');\n}\n"]}

package/components/tabs/tab.d.ts

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * A tab element slotted into an `igc-tabs` container.
+ * A tab nested in a tabs component.
  *
  * @element igc-tab
  *
@@ -19,25 +19,43 @@ export default class IgcTabComponent extends LitElement {
     static readonly tagName = "igc-tab";
     static styles: import("lit").CSSResult[];
     static register(): void;
+    private readonly _tabId;
+    private readonly _headerId;
+    private readonly _contentId;
+    private _posInSet;
+    private _setSize;
+    private _isTabStop;
     /**
      * The tab item label.
-     * @attr
+     * @attr label
      */
     label: string;
     /**
      * Determines whether the tab is selected.
-     * @attr
+     *
+     * @attr selected
+     * @default false
      */
     selected: boolean;
     /**
      * Determines whether the tab is disabled.
-     * @attr
+     *
+     * @attr disabled
+     * @default false
      */
     disabled: boolean;
     constructor();
     /** @internal */
     connectedCallback(): void;
-    protected render(): import("lit-html").TemplateResult<1>;
+    /**
+     * @hidden @internal
+     * Applied by the parent `igc-tabs` whenever the tab set or the selection changes.
+     *
+     * `isTabStop` drives the roving tabindex, keeping the tab strip reachable even
+     * when no tab is selected.
+     */
+    _setTabState(posInSet: number, setSize: number, isTabStop: boolean): void;
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/tabs/tab.js

@@ -4,14 +4,15 @@ 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 } from 'lit';
-import { property } from 'lit/decorators.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { registerComponent } from '../common/definitions/register.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { createIdGenerator } from '#internals/utils/strings.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import { styles as shared } from './themes/shared/tab/tab.common.css.js';
-import { styles } from './themes/tab.base.css.js';
 import { all } from './themes/tab-themes.js';
-let nextId = 1;
+import { styles } from './themes/tab.base.css.js';
+const nextId = createIdGenerator('igc-tab');
 export default class IgcTabComponent extends LitElement {
     static { this.tagName = 'igc-tab'; }
     static { this.styles = [styles, shared]; }
@@ -20,6 +21,12 @@ export default class IgcTabComponent extends LitElement {
     }
     constructor() {
         super();
+        this._tabId = nextId();
+        this._headerId = `${this._tabId}-header`;
+        this._contentId = `${this._tabId}-content`;
+        this._posInSet = 0;
+        this._setSize = 0;
+        this._isTabStop = false;
         this.label = '';
         this.selected = false;
         this.disabled = false;
@@ -27,20 +34,25 @@ export default class IgcTabComponent extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.id = this.id || `igc-tab-${nextId++}`;
+        this.id = this.id || this._tabId;
+    }
+    _setTabState(posInSet, setSize, isTabStop) {
+        this._posInSet = posInSet;
+        this._setSize = setSize;
+        this._isTabStop = isTabStop;
     }
     render() {
-        const headerId = `${this.id}-header`;
-        const contentId = `${this.id}-content`;
         return html `
       <div
         part="tab-header"
         role="tab"
-        id=${headerId}
+        id=${this._headerId}
         aria-disabled=${this.disabled}
         aria-selected=${this.selected}
-        aria-controls=${contentId}
-        tabindex=${this.selected ? 0 : -1}
+        aria-controls=${this._contentId}
+        aria-posinset=${this._posInSet || nothing}
+        aria-setsize=${this._setSize || nothing}
+        tabindex=${this.selected || this._isTabStop ? 0 : -1}
       >
         <div part="base">
           <slot name="prefix" part="prefix"></slot>
@@ -53,8 +65,9 @@ export default class IgcTabComponent extends LitElement {
       <div
         part="tab-body"
         role="tabpanel"
-        id=${contentId}
-        aria-labelledby=${headerId}
+        id=${this._contentId}
+        aria-labelledby=${this._headerId}
+        tabindex=${this.selected ? 0 : -1}
         .inert=${!this.selected}
       >
         <slot></slot>
@@ -62,6 +75,15 @@ export default class IgcTabComponent extends LitElement {
     `;
     }
 }
+__decorate([
+    state()
+], IgcTabComponent.prototype, "_posInSet", void 0);
+__decorate([
+    state()
+], IgcTabComponent.prototype, "_setSize", void 0);
+__decorate([
+    state()
+], IgcTabComponent.prototype, "_isTabStop", void 0);
 __decorate([
     property()
 ], IgcTabComponent.prototype, "label", 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,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAE7C,IAAI,MAAM,GAAG,CAAC,CAAC;AAkBf,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;aAC9B,YAAO,GAAG,SAAS,AAAZ,CAAa;aACpB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC;IAuBD;QACE,KAAK,EAAE,CAAC;QAjBH,UAAK,GAAG,EAAE,CAAC;QAOX,aAAQ,GAAG,KAAK,CAAC;QAOjB,aAAQ,GAAG,KAAK,CAAC;QAItB,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAGe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,WAAW,MAAM,EAAE,EAAE,CAAC;IAC7C,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;;AA3DM;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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles as shared } from './themes/shared/tab/tab.common.css.js';\nimport { styles } from './themes/tab.base.css.js';\nimport { all } from './themes/tab-themes.js';\n\nlet nextId = 1;\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 */\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  /**\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  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.id = this.id || `igc-tab-${nextId++}`;\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"]}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,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;AAElD,MAAM,MAAM,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AAkB5C,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;aAC9B,YAAO,GAAG,SAAS,AAAZ,CAAa;aACpB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC;IAkDD;QACE,KAAK,EAAE,CAAC;QA/CO,WAAM,GAAG,MAAM,EAAE,CAAC;QAClB,cAAS,GAAG,GAAG,IAAI,CAAC,MAAM,SAAS,CAAC;QACpC,eAAU,GAAG,GAAG,IAAI,CAAC,MAAM,UAAU,CAAC;QAG/C,cAAS,GAAG,CAAC,CAAC;QAGd,aAAQ,GAAG,CAAC,CAAC;QAGb,eAAU,GAAG,KAAK,CAAC;QAWpB,UAAK,GAAG,EAAE,CAAC;QASX,aAAQ,GAAG,KAAK,CAAC;QASjB,aAAQ,GAAG,KAAK,CAAC;QAQtB,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAGe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAaM,YAAY,CACjB,QAAgB,EAChB,OAAe,EACf,SAAkB;QAElB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;IAC9B,CAAC;IAMkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;aAIF,IAAI,CAAC,SAAS;wBACH,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,UAAU;wBACf,IAAI,CAAC,SAAS,IAAI,OAAO;uBAC1B,IAAI,CAAC,QAAQ,IAAI,OAAO;mBAC5B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;iCAK3B,IAAI,CAAC,KAAK;;;;;;;;aAQ9B,IAAI,CAAC,UAAU;0BACF,IAAI,CAAC,SAAS;mBACrB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBACxB,CAAC,IAAI,CAAC,QAAQ;;;;KAI1B,CAAC;IACJ,CAAC;;AA7GO;IADP,KAAK,EAAE;kDACc;AAGd;IADP,KAAK,EAAE;iDACa;AAGb;IADP,KAAK,EAAE;mDACmB;AAWpB;IADN,QAAQ,EAAE;8CACO;AASX;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AASjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB","sourcesContent":["import { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.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\nconst nextId = createIdGenerator('igc-tab');\n\n/**\n * A tab nested in a tabs component.\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 */\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  //#region Internal state & properties\n\n  private readonly _tabId = nextId();\n  private readonly _headerId = `${this._tabId}-header`;\n  private readonly _contentId = `${this._tabId}-content`;\n\n  @state()\n  private _posInSet = 0;\n\n  @state()\n  private _setSize = 0;\n\n  @state()\n  private _isTabStop = false;\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * The tab item label.\n   * @attr label\n   */\n  @property()\n  public label = '';\n\n  /**\n   * Determines whether the tab is selected.\n   *\n   * @attr selected\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the tab is disabled.\n   *\n   * @attr disabled\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  //#endregion\n\n  //#region Life-cycle hooks\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.id = this.id || this._tabId;\n  }\n\n  //#endregion\n\n  //#region Internal API\n\n  /**\n   * @hidden @internal\n   * Applied by the parent `igc-tabs` whenever the tab set or the selection changes.\n   *\n   * `isTabStop` drives the roving tabindex, keeping the tab strip reachable even\n   * when no tab is selected.\n   */\n  public _setTabState(\n    posInSet: number,\n    setSize: number,\n    isTabStop: boolean\n  ): void {\n    this._posInSet = posInSet;\n    this._setSize = setSize;\n    this._isTabStop = isTabStop;\n  }\n\n  //#endregion\n\n  //#region Render\n\n  protected override render(): TemplateResult {\n    return html`\n      <div\n        part=\"tab-header\"\n        role=\"tab\"\n        id=${this._headerId}\n        aria-disabled=${this.disabled}\n        aria-selected=${this.selected}\n        aria-controls=${this._contentId}\n        aria-posinset=${this._posInSet || nothing}\n        aria-setsize=${this._setSize || nothing}\n        tabindex=${this.selected || this._isTabStop ? 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=${this._contentId}\n        aria-labelledby=${this._headerId}\n        tabindex=${this.selected ? 0 : -1}\n        .inert=${!this.selected}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  //#endregion\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tab': IgcTabComponent;\n  }\n}\n"]}

package/components/tabs/tabs.d.ts

@@ -1,15 +1,15 @@
-import { LitElement } from 'lit';
-import type { Constructor } from '../common/mixins/constructor.js';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import type { Constructor } from '#internals/mixins/constructor.js';
 import type { TabsActivation, TabsAlignment } from '../types.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>;
+declare const IgcTabsComponent_base: Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcTabsComponentEventMap>> & Constructor<LitElement>;
 /**
  * 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.
+ * The tabs component allows the user to navigate between multiple tab children.
  * It supports keyboard navigation and provides API methods to control the selected tab.
  *
  * @element igc-tabs
@@ -36,49 +36,59 @@ export default class IgcTabsComponent extends IgcTabsComponent_base {
     protected get _enabledTabs(): IgcTabComponent[];
     private _activeTab?;
     /**
-     * Sets the alignment for the tab headers
-     * @attr
+     * Determines the alignment of the tabs header strip.
+     *
+     * @attr alignment
+     * @default 'start'
      */
     alignment: TabsAlignment;
     /**
-     * Determines the tab activation. When set to auto,
-     * the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys
-     * and the corresponding panel is displayed.
-     * When set to manual, the tab is only focused. The selection happens after pressing Space or Enter.
-     * @attr
+     * Determines the activation behavior of the tabs.
+     *
+     * When set to 'auto', the tab will be selected when it receives focus.
+     * When set to 'manual', the tab will only be selected when it is clicked or activated with the keyboard.
+     *
+     * @attr activation
+     * @default 'auto'
      */
     activation: TabsActivation;
-    /** Returns the direct `igc-tab` elements that are children of this element. */
+    /** Returns the direct tab 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;
+    /** Returns the currently selected tab, if any. */
+    get selectedTab(): IgcTabComponent | null;
     constructor();
     protected firstUpdated(): Promise<void>;
-    /** @internal */
-    connectedCallback(): void;
-    protected updated(): void;
-    private _resizeCallback;
+    protected update(props: PropertyValues<this>): void;
+    private _updateLayout;
+    private _refreshLayout;
     private _mutationCallback;
-    private _selectedAttributeChanged;
+    private _handleAttributeChanges;
     private _handleTabsAdded;
     private _handleTabsRemoved;
-    private _getClosestActiveTabIndex;
+    private _getClosestActiveTab;
+    /** A tab can be selected if it is a direct child of this component and is not disabled. */
+    private _isSelectable;
+    /** Pushes the ARIA set information and the roving tab stop down to the tab children. */
+    private _updateTabsState;
+    /** Applies a selection driven by the DOM rather than by user interaction. */
+    private _syncSelection;
     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(id: string): void;
+    /**
+     * Selects the tab matching the passed IDREF or label and displays the corresponding panel.
+     *
+     * Disabled tabs and values not matching any tab are ignored.
+     */
+    select(idOrLabel: string): void;
     select(ref: IgcTabComponent): void;
-    protected _renderScrollButton(direction: 'start' | 'end'): import("lit-html").TemplateResult<1>;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected _renderScrollButton(direction: 'start' | 'end'): TemplateResult;
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {