igniteui-webcomponents 7.2.4 → 7.3.0-beta.0

package/components/tabs/tab.js

@@ -4,13 +4,13 @@ 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 { 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';
+import { styles } from './themes/tab.base.css.js';
 let nextId = 1;
 export default class IgcTabComponent extends LitElement {
     static { this.tagName = 'igc-tab'; }
@@ -20,6 +20,12 @@ export default class IgcTabComponent extends LitElement {
     }
     constructor() {
         super();
+        this._instanceId = nextId++;
+        this._headerId = `igc-tab-header-${this._instanceId}`;
+        this._contentId = `igc-tab-content-${this._instanceId}`;
+        this._posInSet = 0;
+        this._setSize = 0;
+        this._isTabStop = false;
         this.label = '';
         this.selected = false;
         this.disabled = false;
@@ -27,20 +33,25 @@ export default class IgcTabComponent extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.id = this.id || `igc-tab-${nextId++}`;
+        this.id = this.id || `igc-tab-${this._instanceId}`;
+    }
+    _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 +64,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 +74,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,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,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;IAkDD;QACE,KAAK,EAAE,CAAC;QA/CO,gBAAW,GAAG,MAAM,EAAE,CAAC;QACvB,cAAS,GAAG,kBAAkB,IAAI,CAAC,WAAW,EAAE,CAAC;QACjD,eAAU,GAAG,mBAAmB,IAAI,CAAC,WAAW,EAAE,CAAC;QAG5D,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,WAAW,IAAI,CAAC,WAAW,EAAE,CAAC;IACrD,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 { 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\nlet nextId = 1;\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 _instanceId = nextId++;\n  private readonly _headerId = `igc-tab-header-${this._instanceId}`;\n  private readonly _contentId = `igc-tab-content-${this._instanceId}`;\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 || `igc-tab-${this._instanceId}`;\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,34 +36,44 @@ 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;
+    /** 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;
@@ -74,11 +84,15 @@ export default class IgcTabsComponent extends IgcTabsComponent_base {
     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 {

package/components/tabs/tabs.js

@@ -4,26 +4,30 @@ 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 { addKeybindings, arrowLeft, arrowRight, endKey, homeKey, } from '#internals/controllers/key-bindings.js';
+import { createMutationController, } from '#internals/controllers/mutation-observer.js';
+import { createResizeObserverController } from '#internals/controllers/resize-observer.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, lastOf } from '#internals/utils/arrays.js';
+import { getRoot, isLTR, scrollIntoView } from '#internals/utils/dom.js';
+import { getElementFromPath } from '#internals/utils/events.js';
+import { wrap } from '#internals/utils/math.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 +46,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,6 +61,10 @@ 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,
@@ -72,7 +80,7 @@ export default class IgcTabsComponent extends EventEmitterMixin(LitElement) {
         createMutationController(this, {
             callback: this._mutationCallback,
             config: {
-                attributeFilter: ['selected'],
+                attributeFilter: ['selected', 'disabled'],
                 childList: true,
                 subtree: true,
             },
@@ -81,73 +89,64 @@ 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));
+    }
+    _handleTabsRemoved(changes) {
+        if (changes.removed.some(({ node }) => node === this._activeTab)) {
+            this._syncSelection(firstOf(this._enabledTabs));
         }
     }
     _getClosestActiveTabIndex() {
@@ -155,30 +154,48 @@ export default class IgcTabsComponent extends EventEmitterMixin(LitElement) {
         const tab = active ? active.closest(IgcTabComponent.tagName) : null;
         return tab ? this._enabledTabs.indexOf(tab) : -1;
     }
+    _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,24 +204,22 @@ export default class IgcTabsComponent extends EventEmitterMixin(LitElement) {
             this._tabs.includes(node.closest(IgcTabComponent.tagName)));
     }
     _isEventFromTabHeader(event) {
-        return getElementFromPath('[part~="tab-header"]', event);
+        return Boolean(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));
+        this._keyboardActivateTab(firstOf(this._enabledTabs));
     }
     _handleEndKey() {
-        this._keyboardActivateTab(last(this._enabledTabs));
+        this._keyboardActivateTab(lastOf(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]);
+            this._keyboardActivateTab(this._enabledTabs[index], true);
         }
     }
     _handleClick(event) {
@@ -212,19 +227,21 @@ export default class IgcTabsComponent extends EventEmitterMixin(LitElement) {
             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 +290,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);