@carbon/web-components 2.54.0 → 2.55.0

package/es/components/tabs/tab.js

@@ -9,12 +9,14 @@ import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
 import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
+import HostListener from "../../globals/decorators/host-listener.js";
+import HostListenerMixin from "../../globals/mixins/host-listener.js";
 import "../button/button.js";
 import content_switcher_item_default from "../content-switcher/content-switcher-item.js";
 import "./defs.js";
 import tabs_default from "./tabs.scss.js";
 import { html } from "lit";
-import { property, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import Close16 from "@carbon/icons/es/close/16.js";
@@ -25,22 +27,55 @@ import Close16 from "@carbon/icons/es/close/16.js";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-let CDSTab = class CDSTab extends content_switcher_item_default {
+let CDSTab = class CDSTab extends HostListenerMixin(content_switcher_item_default) {
 	constructor(..._args) {
 		super(..._args);
 		this.highlighted = false;
 		this.type = "";
+		this.vertical = false;
 		this.iconOnly = false;
 		this.badgeIndicator = false;
+		this.truncated = false;
 		this._dismissable = false;
 		this._index = -1;
 	}
 	/**
+	* Checks if the text overflow ellipsis is currently applied to the label.
+	* This is useful for determining if a tooltip should be shown.
+	*
+	* @returns `true` if text is truncated/clamped, `false` otherwise or if not in vertical mode
+	*/
+	isTextTruncated() {
+		if (!this.vertical || !this._labelElement) return false;
+		return this._labelElement.scrollHeight > this._labelElement.clientHeight;
+	}
+	/**
+	* Updates the truncated state after the component has rendered.
+	*/
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (this.vertical && this._labelElement) {
+			const isTruncated = this.isTextTruncated();
+			if (this.truncated !== isTruncated) this.truncated = isTruncated;
+		}
+	}
+	/**
 	* Handles `slotchange` event.
 	*/
 	_handleSlotChange({ target }) {
-		const content = target.assignedNodes();
-		this.tabTitle = content[0]?.textContent?.trim() || void 0;
+		const textContent = target.assignedNodes()[0]?.textContent;
+		this.tabTitle = textContent?.trim().replace(/\s+/g, " ") || void 0;
+	}
+	/**
+	* Handles `keydown` event on the tab.
+	* Triggers tab close when Delete key is pressed on a dismissable tab.
+	*/
+	_handleKeydown(event) {
+		const { key } = event;
+		if (this._dismissable && !this.disabled && (key === "Delete" || key === "Backspace")) {
+			event.preventDefault();
+			this._handleClose(event);
+		}
 	}
 	connectedCallback() {
 		if (!this.hasAttribute("role")) this.setAttribute("role", "listitem");
@@ -55,7 +90,7 @@ let CDSTab = class CDSTab extends content_switcher_item_default {
 			[`cds--tabs__nav-item--close`]: this._dismissable,
 			[`cds--tabs__nav-item--close--hidden`]: !this._dismissable
 		});
-		const { badgeIndicator, disabled, selected, tabTitle, _handleSlotChange: handleSlotChange, _handleClick: handleClick } = this;
+		const { badgeIndicator, disabled, secondaryLabel, selected, tabTitle, vertical, truncated, _handleSlotChange: handleSlotChange, _handleClick: handleClick } = this;
 		const iconButton = html`
       <cds-button
         title="${this.textContent?.trim() ? `Remove ${this.textContent.trim()} tab` : "Remove tab"}"
@@ -82,9 +117,20 @@ let CDSTab = class CDSTab extends content_switcher_item_default {
         tabindex="${selected ? 0 : -1}"
         ?disabled="${disabled}"
         aria-selected="${selected}">
-        <span class="${"cds"}--tabs__nav-item-label-wrapper">
-          <slot @slotchange="${handleSlotChange}"></slot>
-        </span>
+        ${vertical ? html`<span
+              class="${"cds"}--tabs__nav-item-label"
+              title="${truncated ? tabTitle.trim() : ""}">
+              <slot @slotchange="${handleSlotChange}"></slot>
+            </span>` : html`
+              <span class="${"cds"}--tabs__nav-item-label-wrapper">
+                <slot @slotchange="${handleSlotChange}"></slot>
+              </span>
+            `}
+        ${secondaryLabel ? html`<span
+              class="${"cds"}--tabs__nav-item-secondary-label"
+              title="${secondaryLabel}"
+              >${secondaryLabel}</span
+            >` : ""}
         ${!disabled && badgeIndicator ? html`<cds-badge-indicator></cds-badge-indicator>` : ""}
       </a>
       ${iconButton}
@@ -97,7 +143,11 @@ let CDSTab = class CDSTab extends content_switcher_item_default {
       `;
 		return tabLink;
 	}
-	_handleClick(event) {
+	/**
+	* Handles the close action for the tab.
+	* Dispatches before-close and close events.
+	*/
+	_handleClose(event) {
 		event.stopPropagation();
 		const init = {
 			bubbles: true,
@@ -108,6 +158,12 @@ let CDSTab = class CDSTab extends content_switcher_item_default {
 		if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeClose, init))) this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
 	}
 	/**
+	* Handles click event on the close button.
+	*/
+	_handleClick(event) {
+		this._handleClose(event);
+	}
+	/**
 	* The name of the custom event fired before a tab is closed upon a user gesture.
 	* Cancellation of this event stops changing the user-initiated action.
 	*/
@@ -129,6 +185,10 @@ __decorate([property({
 	reflect: true
 })], CDSTab.prototype, "highlighted", void 0);
 __decorate([property({ reflect: true })], CDSTab.prototype, "type", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSTab.prototype, "vertical", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true,
@@ -139,13 +199,20 @@ __decorate([property({
 	reflect: true
 })], CDSTab.prototype, "iconSize", void 0);
 __decorate([property()], CDSTab.prototype, "tabTitle", void 0);
+__decorate([property({
+	attribute: "secondary-label",
+	reflect: true
+})], CDSTab.prototype, "secondaryLabel", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true,
 	attribute: "badge-indicator"
 })], CDSTab.prototype, "badgeIndicator", void 0);
+__decorate([state()], CDSTab.prototype, "truncated", void 0);
 __decorate([state()], CDSTab.prototype, "_dismissable", void 0);
 __decorate([state()], CDSTab.prototype, "_index", void 0);
+__decorate([query(`.cds--tabs__nav-item-label`)], CDSTab.prototype, "_labelElement", void 0);
+__decorate([HostListener("keydown")], CDSTab.prototype, "_handleKeydown", null);
 CDSTab = __decorate([carbonElement(`cds-tab`)], CDSTab);
 var tab_default = CDSTab;
 //#endregion

package/es/components/tabs/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","names":["CDSContentSwitcherItem","styles","customElement"],"sources":["../../../src/components/tabs/tab.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSContentSwitcherItem from '../content-switcher/content-switcher-item';\nimport { TABS_ICON_SIZE, TABS_TYPE } from './defs';\nimport styles from './tabs.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport '../button/button';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport iconLoader from '../../globals/internal/icon-loader';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * Basic tab.\n *\n * @element cds-tab\n * @fires cds-tab-beingclosed\n *   The custom event fired before a tab is closed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated action.\n * @fires cds-tab-closed - The custom event fired after a a tab is closed upon a user gesture.\n */\n@customElement(`${prefix}-tab`)\nexport default class CDSTab extends CDSContentSwitcherItem {\n  /**\n   * `true` if this tab should be highlighted.\n   * If `true`, parent `<cds-tabs>` selects/deselects this tab upon keyboard interaction.\n   *\n   * @private\n   */\n  @property({ type: Boolean, reflect: true })\n  highlighted = false;\n\n  /**\n   * Tab type.\n   */\n  @property({ reflect: true })\n  type = TABS_TYPE.REGULAR;\n\n  /**\n   * `true` if this tab is icon-only.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'icon-only' })\n  iconOnly = false;\n\n  /**\n   * Specify the icon size used by icon-only tabs.\n   */\n  @property({ attribute: 'icon-size', reflect: true })\n  iconSize?: TABS_ICON_SIZE;\n\n  /**\n   * The tab text content.\n   */\n  @property()\n  tabTitle;\n\n  /**\n   * **Experimental**: Display an empty dot badge on the Tab.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'badge-indicator' })\n  badgeIndicator = false;\n\n  /**\n   * Whether this tab should be dismissable.\n   */\n  @state()\n  _dismissable = false;\n\n  /**\n   * The index of the tab component\n   */\n  @state()\n  _index = -1;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    // Retrieve content of the slot to use for aria-label.\n    const content = (target as HTMLSlotElement).assignedNodes();\n    this.tabTitle = content[0]?.textContent?.trim() || undefined;\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    const navLinkClasses = classMap({\n      [`${prefix}--tabs__nav-link`]: true,\n      [`${prefix}--tabs__nav-link--dismissable`]: this._dismissable,\n    });\n    const closeButtonClasses = classMap({\n      [`${prefix}--tabs__nav-item--close`]: this._dismissable,\n      [`${prefix}--tabs__nav-item--close--hidden`]: !this._dismissable,\n    });\n    const {\n      badgeIndicator,\n      disabled,\n      selected,\n      tabTitle,\n      _handleSlotChange: handleSlotChange,\n      _handleClick: handleClick,\n    } = this;\n\n    const iconButton = html`\n      <cds-button\n        title=\"${this.textContent?.trim()\n          ? `Remove ${this.textContent.trim()} tab`\n          : 'Remove tab'}\"\n        class=\"${closeButtonClasses}\"\n        kind=\"ghost\"\n        size=\"xs\"\n        @click=\"${handleClick}\"\n        tab-index=\"${-1}\"\n        aria-hidden=\"${this.selected && this._dismissable ? 'false' : 'true'}\"\n        ?disabled=\"${disabled}\">\n        ${iconLoader(Close16, { 'aria-label': 'close', slot: 'icon' })}\n      </cds-button>\n    `;\n\n    const accessibleLabel = tabTitle || this.getAttribute('aria-label');\n    const isIconOnly =\n      this.iconOnly ||\n      this.classList.contains(`${prefix}--tabs__nav-item--icon-only`);\n    // No `href`/`tabindex` to not to make this `<a>` click-focusable\n    const tabLink = html`\n      <a\n        class=\"${navLinkClasses}\"\n        role=\"tab\"\n        aria-label=\"${ifDefined(accessibleLabel || undefined)}\"\n        tabindex=\"${selected ? 0 : -1}\"\n        ?disabled=\"${disabled}\"\n        aria-selected=\"${selected}\">\n        <span class=\"${prefix}--tabs__nav-item-label-wrapper\">\n          <slot @slotchange=\"${handleSlotChange}\"></slot>\n        </span>\n        ${!disabled && badgeIndicator\n          ? html`<cds-badge-indicator></cds-badge-indicator>`\n          : ''}\n      </a>\n      ${iconButton}\n    `;\n\n    if (isIconOnly && accessibleLabel && !disabled) {\n      return html`\n        <cds-tooltip align=\"bottom\" class=\"${prefix}--icon-tooltip\">\n          ${tabLink}\n          <cds-tooltip-content>${accessibleLabel}</cds-tooltip-content>\n        </cds-tooltip>\n      `;\n    }\n\n    return tabLink;\n  }\n\n  _handleClick(event: Event) {\n    event.stopPropagation();\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        index: this._index,\n      },\n    };\n    if (\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSTab).eventBeforeClose,\n          init\n        )\n      )\n    ) {\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSTab).eventClose, init)\n      );\n    }\n  }\n\n  /**\n   * The name of the custom event fired before a tab is closed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated action.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-tab-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after a a tab is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-tab-closed`;\n  }\n\n  static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Be,IAAA,SAAA,MAAM,eAAeA,8BAAuB;;;qBAQ3C;;kBAYH;wBAkBM;sBAMF;gBAMN;;;;;CAKT,kBAA4B,EAAE,UAAiB;EAE7C,MAAM,UAAW,OAA2B,eAAe;AAC3D,OAAK,WAAW,QAAQ,IAAI,aAAa,MAAM,IAAI,KAAA;;CAGrD,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,WAAW;AAEvC,QAAM,mBAAmB;;CAG3B,SAAS;EACP,MAAM,iBAAiB,SAAS;IAC7B,wBAA8B;IAC9B,qCAA2C,KAAK;GAClD,CAAC;EACF,MAAM,qBAAqB,SAAS;IACjC,+BAAqC,KAAK;IAC1C,uCAA6C,CAAC,KAAK;GACrD,CAAC;EACF,MAAM,EACJ,gBACA,UACA,UACA,UACA,mBAAmB,kBACnB,cAAc,gBACZ;EAEJ,MAAM,aAAa,IAAI;;iBAEV,KAAK,aAAa,MAAM,GAC7B,UAAU,KAAK,YAAY,MAAM,CAAC,QAClC,aAAa;iBACR,mBAAmB;;;kBAGlB,YAAY;qBACT,GAAG;uBACD,KAAK,YAAY,KAAK,eAAe,UAAU,OAAO;qBACxD,SAAS;UACpB,WAAW,SAAS;GAAE,cAAc;GAAS,MAAM;GAAQ,CAAC,CAAC;;;EAInE,MAAM,kBAAkB,YAAY,KAAK,aAAa,aAAa;EACnE,MAAM,aACJ,KAAK,YACL,KAAK,UAAU,SAAS,iCAAuC;EAEjE,MAAM,UAAU,IAAI;;iBAEP,eAAe;;sBAEV,UAAU,mBAAmB,KAAA,EAAU,CAAC;oBAC1C,WAAW,IAAI,GAAG;qBACjB,SAAS;yBACL,SAAS;6BACJ;+BACC,iBAAiB;;UAEtC,CAAC,YAAY,iBACX,IAAI,gDACJ,GAAG;;QAEP,WAAW;;AAGf,MAAI,cAAc,mBAAmB,CAAC,SACpC,QAAO,IAAI;mDACmC;YACxC,QAAQ;iCACa,gBAAgB;;;AAK7C,SAAO;;CAGT,aAAa,OAAc;AACzB,QAAM,iBAAiB;EACvB,MAAM,OAAO;GACX,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQ,EACN,OAAO,KAAK,QACb;GACF;AACD,MACE,KAAK,cACH,IAAI,YACD,KAAK,YAA8B,kBACpC,KACD,CACF,CAED,MAAK,cACH,IAAI,YAAa,KAAK,YAA8B,YAAY,KAAK,CACtE;;;;;;CAQL,WAAW,mBAAmB;AAC5B,SAAO;;;;;CAMT,WAAW,aAAa;AACtB,SAAO;;;gBAGOC;;;YAzKf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,OAAA,WAAA,eAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,OAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAa,CAAC,CAAA,EAAA,OAAA,WAAA,YAAA,KAAA,EAAA;YAMlE,SAAS;CAAE,WAAW;CAAa,SAAS;CAAM,CAAC,CAAA,EAAA,OAAA,WAAA,YAAA,KAAA,EAAA;YAMnD,UAAU,CAAA,EAAA,OAAA,WAAA,YAAA,KAAA,EAAA;YAMV,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAmB,CAAC,CAAA,EAAA,OAAA,WAAA,kBAAA,KAAA,EAAA;YAMxE,OAAO,CAAA,EAAA,OAAA,WAAA,gBAAA,KAAA,EAAA;YAMP,OAAO,CAAA,EAAA,OAAA,WAAA,UAAA,KAAA,EAAA;qBAlDTC,cAAc,UAAgB,CAAA,EAAA,OAAA"}
+{"version":3,"file":"tab.js","names":["CDSContentSwitcherItem","styles","customElement"],"sources":["../../../src/components/tabs/tab.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, state, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSContentSwitcherItem from '../content-switcher/content-switcher-item';\nimport { TABS_ICON_SIZE, TABS_TYPE } from './defs';\nimport styles from './tabs.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport '../button/button';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport iconLoader from '../../globals/internal/icon-loader';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * Basic tab.\n *\n * @element cds-tab\n * @fires cds-tab-beingclosed\n *   The custom event fired before a tab is closed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated action.\n * @fires cds-tab-closed - The custom event fired after a a tab is closed upon a user gesture.\n */\n@customElement(`${prefix}-tab`)\nexport default class CDSTab extends HostListenerMixin(CDSContentSwitcherItem) {\n  /**\n   * `true` if this tab should be highlighted.\n   * If `true`, parent `<cds-tabs>` selects/deselects this tab upon keyboard interaction.\n   *\n   * @private\n   */\n  @property({ type: Boolean, reflect: true })\n  highlighted = false;\n\n  /**\n   * Tab type.\n   */\n  @property({ reflect: true })\n  type = TABS_TYPE.REGULAR;\n\n  /**\n   * `true` if the tab is in vertical orientation.\n   * This is automatically set by the parent `<cds-tabs>` when it's in vertical mode.\n   */\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  /**\n   * `true` if this tab is icon-only.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'icon-only' })\n  iconOnly = false;\n\n  /**\n   * Specify the icon size used by icon-only tabs.\n   */\n  @property({ attribute: 'icon-size', reflect: true })\n  iconSize?: TABS_ICON_SIZE;\n\n  /**\n   * The tab text content.\n   */\n  @property()\n  tabTitle;\n\n  /**\n   * An optional label to render under the primary tab label.\n   * Only useful for contained tabs.\n   */\n  @property({ attribute: 'secondary-label', reflect: true })\n  secondaryLabel?: string;\n\n  /**\n   * **Experimental**: Display an empty dot badge on the Tab.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'badge-indicator' })\n  badgeIndicator = false;\n\n  /**\n   * `true` if the tab text is truncated with ellipsis.\n   * This state is automatically updated when the component renders in vertical mode.\n   */\n  @state()\n  truncated = false;\n\n  /**\n   * Whether this tab should be dismissable.\n   */\n  @state()\n  _dismissable = false;\n\n  /**\n   * The index of the tab component\n   */\n  @state()\n  _index = -1;\n\n  /**\n   * Reference to the label span element (only present in vertical mode).\n   * @private\n   */\n  @query(`.${prefix}--tabs__nav-item-label`)\n  private _labelElement?: HTMLElement;\n\n  /**\n   * Checks if the text overflow ellipsis is currently applied to the label.\n   * This is useful for determining if a tooltip should be shown.\n   *\n   * @returns `true` if text is truncated/clamped, `false` otherwise or if not in vertical mode\n   */\n  isTextTruncated(): boolean {\n    if (!this.vertical || !this._labelElement) {\n      return false;\n    }\n\n    // Compare scrollHeight with clientHeight to detect if content is overflowing\n    // When line-clamp is active and text exceeds 2 lines, scrollHeight > clientHeight\n    return this._labelElement.scrollHeight > this._labelElement.clientHeight;\n  }\n\n  /**\n   * Updates the truncated state after the component has rendered.\n   */\n  updated(changedProperties: Map<PropertyKey, unknown>) {\n    super.updated(changedProperties);\n\n    // Check if text is truncated and update state when in vertical mode\n    if (this.vertical && this._labelElement) {\n      const isTruncated = this.isTextTruncated();\n      if (this.truncated !== isTruncated) {\n        this.truncated = isTruncated;\n      }\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    // Retrieve content of the slot to use for aria-label.\n    const content = (target as HTMLSlotElement).assignedNodes();\n    const textContent = content[0]?.textContent;\n    // Normalize whitespace: trim and replace multiple spaces with single space\n    this.tabTitle = textContent?.trim().replace(/\\s+/g, ' ') || undefined;\n  }\n\n  /**\n   * Handles `keydown` event on the tab.\n   * Triggers tab close when Delete key is pressed on a dismissable tab.\n   */\n  @HostListener('keydown')\n  protected _handleKeydown(event: KeyboardEvent) {\n    const { key } = event;\n    if (\n      this._dismissable &&\n      !this.disabled &&\n      (key === 'Delete' || key === 'Backspace')\n    ) {\n      event.preventDefault();\n      this._handleClose(event);\n    }\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    const navLinkClasses = classMap({\n      [`${prefix}--tabs__nav-link`]: true,\n      [`${prefix}--tabs__nav-link--dismissable`]: this._dismissable,\n    });\n    const closeButtonClasses = classMap({\n      [`${prefix}--tabs__nav-item--close`]: this._dismissable,\n      [`${prefix}--tabs__nav-item--close--hidden`]: !this._dismissable,\n    });\n    const {\n      badgeIndicator,\n      disabled,\n      secondaryLabel,\n      selected,\n      tabTitle,\n      vertical,\n      truncated,\n      _handleSlotChange: handleSlotChange,\n      _handleClick: handleClick,\n    } = this;\n\n    const iconButton = html`\n      <cds-button\n        title=\"${this.textContent?.trim()\n          ? `Remove ${this.textContent.trim()} tab`\n          : 'Remove tab'}\"\n        class=\"${closeButtonClasses}\"\n        kind=\"ghost\"\n        size=\"xs\"\n        @click=\"${handleClick}\"\n        tab-index=\"${-1}\"\n        aria-hidden=\"${this.selected && this._dismissable ? 'false' : 'true'}\"\n        ?disabled=\"${disabled}\">\n        ${iconLoader(Close16, { 'aria-label': 'close', slot: 'icon' })}\n      </cds-button>\n    `;\n\n    const accessibleLabel = tabTitle || this.getAttribute('aria-label');\n    const isIconOnly =\n      this.iconOnly ||\n      this.classList.contains(`${prefix}--tabs__nav-item--icon-only`);\n    // No `href`/`tabindex` to not to make this `<a>` click-focusable\n    const tabLink = html`\n      <a\n        class=\"${navLinkClasses}\"\n        role=\"tab\"\n        aria-label=\"${ifDefined(accessibleLabel || undefined)}\"\n        tabindex=\"${selected ? 0 : -1}\"\n        ?disabled=\"${disabled}\"\n        aria-selected=\"${selected}\">\n        ${vertical\n          ? html`<span\n              class=\"${prefix}--tabs__nav-item-label\"\n              title=\"${truncated ? tabTitle.trim() : ''}\">\n              <slot @slotchange=\"${handleSlotChange}\"></slot>\n            </span>`\n          : html`\n              <span class=\"${prefix}--tabs__nav-item-label-wrapper\">\n                <slot @slotchange=\"${handleSlotChange}\"></slot>\n              </span>\n            `}\n        ${secondaryLabel\n          ? html`<span\n              class=\"${prefix}--tabs__nav-item-secondary-label\"\n              title=\"${secondaryLabel}\"\n              >${secondaryLabel}</span\n            >`\n          : ''}\n        ${!disabled && badgeIndicator\n          ? html`<cds-badge-indicator></cds-badge-indicator>`\n          : ''}\n      </a>\n      ${iconButton}\n    `;\n\n    if (isIconOnly && accessibleLabel && !disabled) {\n      return html`\n        <cds-tooltip align=\"bottom\" class=\"${prefix}--icon-tooltip\">\n          ${tabLink}\n          <cds-tooltip-content>${accessibleLabel}</cds-tooltip-content>\n        </cds-tooltip>\n      `;\n    }\n\n    return tabLink;\n  }\n\n  /**\n   * Handles the close action for the tab.\n   * Dispatches before-close and close events.\n   */\n  protected _handleClose(event: Event) {\n    event.stopPropagation();\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        index: this._index,\n      },\n    };\n    if (\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSTab).eventBeforeClose,\n          init\n        )\n      )\n    ) {\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSTab).eventClose, init)\n      );\n    }\n  }\n\n  /**\n   * Handles click event on the close button.\n   */\n  _handleClick(event: Event) {\n    this._handleClose(event);\n  }\n\n  /**\n   * The name of the custom event fired before a tab is closed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated action.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-tab-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after a a tab is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-tab-closed`;\n  }\n\n  static styles = styles;\n}\n"],"mappings":"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"}

package/es/components/tabs/tabs-vertical.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2019, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+/**
+ * Vertical tabs container component.
+ *
+ * @element cds-tabs-vertical
+ * @slot tabs - The `<cds-tabs>` navigation element.
+ * @slot panel - One or more `<div role="tabpanel">` elements.
+ */
+export default class CDSTabsVertical extends LitElement {
+    /**
+     * Option to set a height style only if using vertical variation.
+     */
+    customHeight?: string;
+    private _mediaQueryList;
+    private _handleViewportChange;
+    firstUpdated(): void;
+    updated(changedProperties: any): void;
+    disconnectedCallback(): void;
+    private _applyHeight;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+//# sourceMappingURL=tabs-vertical.d.ts.map

package/es/components/tabs/tabs-vertical.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-vertical.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-vertical.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAevC;;;;;;GAMG;AAEH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;IACrD;;OAEG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,OAAO,CAAC,eAAe,CAA+B;IAEtD,OAAO,CAAC,qBAAqB,CAe3B;IAEF,YAAY;IAeZ,OAAO,CAAC,iBAAiB,KAAA;IAOzB,oBAAoB;IASpB,OAAO,CAAC,YAAY;IA2CpB,MAAM;IASN,MAAM,CAAC,MAAM,MAAU;CACxB"}

package/es/components/tabs/tabs-vertical.js

@@ -0,0 +1,113 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "../../globals/settings.js";
+import { carbonElement } from "../../globals/decorators/carbon-element.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import tabs_default from "./tabs.scss.js";
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { breakpoints } from "@carbon/layout";
+//#region src/components/tabs/tabs-vertical.ts
+/**
+* Copyright IBM Corp. 2019, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+* Breakpoint for switching between horizontal and vertical tab layouts.
+* Uses Carbon's md breakpoint (42rem/672px) + 0.01rem offset to avoid overlap
+* with max-width queries. This mirrors the Sass breakpoint behavior.
+* Below this breakpoint, tabs display horizontally.
+*/
+const VERTICAL_TABS_BREAKPOINT = `(min-width: calc(${breakpoints.md.width} + 0.01rem))`;
+let CDSTabsVertical = class CDSTabsVertical extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._mediaQueryList = null;
+		this._handleViewportChange = (e) => {
+			const tabs = this.querySelector(`cds-tabs`);
+			if (e.matches) {
+				this.classList.add(`cds--css-grid`);
+				if (tabs) {
+					tabs.setAttribute("vertical", "");
+					tabs.removeAttribute("type");
+				}
+			} else {
+				this.classList.remove(`cds--css-grid`);
+				if (tabs) {
+					tabs.removeAttribute("vertical");
+					tabs.setAttribute("type", "contained");
+				}
+			}
+		};
+	}
+	firstUpdated() {
+		this._mediaQueryList = window.matchMedia(VERTICAL_TABS_BREAKPOINT);
+		this._handleViewportChange(this._mediaQueryList);
+		this._mediaQueryList.addEventListener("change", this._handleViewportChange);
+		requestAnimationFrame(() => {
+			this._applyHeight();
+		});
+		(this.shadowRoot?.querySelector("slot[name=\"panel\"]"))?.addEventListener("slotchange", () => {
+			this._applyHeight();
+		});
+	}
+	updated(changedProperties) {
+		super.updated?.(changedProperties);
+		if (changedProperties.has("customHeight")) this._applyHeight();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._mediaQueryList?.removeEventListener("change", this._handleViewportChange);
+		this._mediaQueryList = null;
+	}
+	_applyHeight() {
+		const isVertical = this.classList.contains(`cds--css-grid`);
+		if (this.customHeight) {
+			this.style.height = this.customHeight;
+			return;
+		}
+		if (!isVertical) {
+			this.style.removeProperty("height");
+			return;
+		}
+		const panels = Array.from(this.querySelectorAll("[slot=\"panel\"]"));
+		if (panels.length === 0) return;
+		const hiddenStates = panels.map((panel) => panel.hidden);
+		panels.forEach((panel) => {
+			panel.hidden = false;
+		});
+		const tallestPanel = Math.max(...panels.map((panel) => panel.offsetHeight));
+		panels.forEach((panel, index) => {
+			panel.hidden = hiddenStates[index];
+		});
+		const tabsHeight = this.querySelector(`cds-tabs`)?.offsetHeight ?? 0;
+		const height = Math.max(tallestPanel, tabsHeight);
+		if (height > 0) this.style.height = `${height}px`;
+		else this.style.removeProperty("height");
+	}
+	render() {
+		return html`
+      <slot name="tabs"></slot>
+      <div class="${"cds"}-panel-container">
+        <slot name="panel"></slot>
+      </div>
+    `;
+	}
+	static {
+		this.styles = tabs_default;
+	}
+};
+__decorate([property({ attribute: "custom-height" })], CDSTabsVertical.prototype, "customHeight", void 0);
+CDSTabsVertical = __decorate([carbonElement(`cds-tabs-vertical`)], CDSTabsVertical);
+var tabs_vertical_default = CDSTabsVertical;
+//#endregion
+export { tabs_vertical_default as default };
+
+//# sourceMappingURL=tabs-vertical.js.map

package/es/components/tabs/tabs-vertical.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-vertical.js","names":["styles","customElement"],"sources":["../../../src/components/tabs/tabs-vertical.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { breakpoints } from '@carbon/layout';\nimport { prefix } from '../../globals/settings';\nimport styles from './tabs.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Breakpoint for switching between horizontal and vertical tab layouts.\n * Uses Carbon's md breakpoint (42rem/672px) + 0.01rem offset to avoid overlap\n * with max-width queries. This mirrors the Sass breakpoint behavior.\n * Below this breakpoint, tabs display horizontally.\n */\nconst VERTICAL_TABS_BREAKPOINT = `(min-width: calc(${breakpoints.md.width} + 0.01rem))`;\n\n/**\n * Vertical tabs container component.\n *\n * @element cds-tabs-vertical\n * @slot tabs - The `<cds-tabs>` navigation element.\n * @slot panel - One or more `<div role=\"tabpanel\">` elements.\n */\n@customElement(`${prefix}-tabs-vertical`)\nexport default class CDSTabsVertical extends LitElement {\n  /**\n   * Option to set a height style only if using vertical variation.\n   */\n  @property({ attribute: 'custom-height' })\n  customHeight?: string;\n\n  private _mediaQueryList: MediaQueryList | null = null;\n\n  private _handleViewportChange = (e: MediaQueryListEvent | MediaQueryList) => {\n    const tabs = this.querySelector(`${prefix}-tabs`);\n    if (e.matches) {\n      this.classList.add(`${prefix}--css-grid`);\n      if (tabs) {\n        tabs.setAttribute('vertical', '');\n        tabs.removeAttribute('type');\n      }\n    } else {\n      this.classList.remove(`${prefix}--css-grid`);\n      if (tabs) {\n        tabs.removeAttribute('vertical');\n        tabs.setAttribute('type', 'contained');\n      }\n    }\n  };\n\n  firstUpdated() {\n    this._mediaQueryList = window.matchMedia(VERTICAL_TABS_BREAKPOINT);\n    this._handleViewportChange(this._mediaQueryList);\n    this._mediaQueryList.addEventListener('change', this._handleViewportChange);\n\n    requestAnimationFrame(() => {\n      this._applyHeight();\n    });\n\n    const panelSlot = this.shadowRoot?.querySelector('slot[name=\"panel\"]');\n    panelSlot?.addEventListener('slotchange', () => {\n      this._applyHeight();\n    });\n  }\n\n  updated(changedProperties) {\n    super.updated?.(changedProperties);\n    if (changedProperties.has('customHeight')) {\n      this._applyHeight();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._mediaQueryList?.removeEventListener(\n      'change',\n      this._handleViewportChange\n    );\n    this._mediaQueryList = null;\n  }\n\n  private _applyHeight() {\n    const isVertical = this.classList.contains(`${prefix}--css-grid`);\n\n    if (this.customHeight) {\n      this.style.height = this.customHeight;\n      return;\n    }\n\n    if (!isVertical) {\n      this.style.removeProperty('height');\n      return;\n    }\n\n    const panels = Array.from(\n      this.querySelectorAll<HTMLElement>('[slot=\"panel\"]')\n    );\n\n    if (panels.length === 0) {\n      return;\n    }\n\n    const hiddenStates = panels.map((panel) => panel.hidden);\n    panels.forEach((panel) => {\n      panel.hidden = false;\n    });\n\n    const tallestPanel = Math.max(...panels.map((panel) => panel.offsetHeight));\n\n    panels.forEach((panel, index) => {\n      panel.hidden = hiddenStates[index];\n    });\n\n    const tabsEl = this.querySelector<HTMLElement>(`${prefix}-tabs`);\n    const tabsHeight = tabsEl?.offsetHeight ?? 0;\n\n    const height = Math.max(tallestPanel, tabsHeight);\n    if (height > 0) {\n      this.style.height = `${height}px`;\n    } else {\n      this.style.removeProperty('height');\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"tabs\"></slot>\n      <div class=\"${prefix}-panel-container\">\n        <slot name=\"panel\"></slot>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,2BAA2B,oBAAoB,YAAY,GAAG,MAAM;AAU3D,IAAA,kBAAA,MAAM,wBAAwB,WAAW;;;yBAOL;gCAEhB,MAA4C;GAC3E,MAAM,OAAO,KAAK,cAAc,WAAiB;AACjD,OAAI,EAAE,SAAS;AACb,SAAK,UAAU,IAAI,gBAAsB;AACzC,QAAI,MAAM;AACR,UAAK,aAAa,YAAY,GAAG;AACjC,UAAK,gBAAgB,OAAO;;UAEzB;AACL,SAAK,UAAU,OAAO,gBAAsB;AAC5C,QAAI,MAAM;AACR,UAAK,gBAAgB,WAAW;AAChC,UAAK,aAAa,QAAQ,YAAY;;;;;CAK5C,eAAe;AACb,OAAK,kBAAkB,OAAO,WAAW,yBAAyB;AAClE,OAAK,sBAAsB,KAAK,gBAAgB;AAChD,OAAK,gBAAgB,iBAAiB,UAAU,KAAK,sBAAsB;AAE3E,8BAA4B;AAC1B,QAAK,cAAc;IACnB;AAGF,GADkB,KAAK,YAAY,cAAc,uBAAqB,GAC3D,iBAAiB,oBAAoB;AAC9C,QAAK,cAAc;IACnB;;CAGJ,QAAQ,mBAAmB;AACzB,QAAM,UAAU,kBAAkB;AAClC,MAAI,kBAAkB,IAAI,eAAe,CACvC,MAAK,cAAc;;CAIvB,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,OAAK,iBAAiB,oBACpB,UACA,KAAK,sBACN;AACD,OAAK,kBAAkB;;CAGzB,eAAuB;EACrB,MAAM,aAAa,KAAK,UAAU,SAAS,gBAAsB;AAEjE,MAAI,KAAK,cAAc;AACrB,QAAK,MAAM,SAAS,KAAK;AACzB;;AAGF,MAAI,CAAC,YAAY;AACf,QAAK,MAAM,eAAe,SAAS;AACnC;;EAGF,MAAM,SAAS,MAAM,KACnB,KAAK,iBAA8B,mBAAiB,CACrD;AAED,MAAI,OAAO,WAAW,EACpB;EAGF,MAAM,eAAe,OAAO,KAAK,UAAU,MAAM,OAAO;AACxD,SAAO,SAAS,UAAU;AACxB,SAAM,SAAS;IACf;EAEF,MAAM,eAAe,KAAK,IAAI,GAAG,OAAO,KAAK,UAAU,MAAM,aAAa,CAAC;AAE3E,SAAO,SAAS,OAAO,UAAU;AAC/B,SAAM,SAAS,aAAa;IAC5B;EAGF,MAAM,aADS,KAAK,cAA2B,WAAiB,EACrC,gBAAgB;EAE3C,MAAM,SAAS,KAAK,IAAI,cAAc,WAAW;AACjD,MAAI,SAAS,EACX,MAAK,MAAM,SAAS,GAAG,OAAO;MAE9B,MAAK,MAAM,eAAe,SAAS;;CAIvC,SAAS;AACP,SAAO,IAAI;;0BAEY;;;;;;gBAMTA;;;YAzGf,SAAS,EAAE,WAAW,iBAAiB,CAAC,CAAA,EAAA,gBAAA,WAAA,gBAAA,KAAA,EAAA;8BAL1CC,cAAc,oBAA0B,CAAA,EAAA,gBAAA"}

package/es/components/tabs/tabs.d.ts

@@ -6,9 +6,9 @@
  */
 import { TemplateResult } from 'lit';
 import CDSContentSwitcher, { NAVIGATION_DIRECTION } from '../content-switcher/content-switcher';
-import { TABS_ICON_SIZE, TABS_KEYBOARD_ACTION, TABS_TYPE } from './defs';
+import { VERTICAL_NAVIGATION_DIRECTION, TABS_ICON_SIZE, TABS_KEYBOARD_ACTION, TABS_TYPE, TABS_SIZE } from './defs';
 import CDSTab from './tab';
-export { NAVIGATION_DIRECTION, TABS_ICON_SIZE, TABS_KEYBOARD_ACTION, TABS_TYPE, };
+export { NAVIGATION_DIRECTION, VERTICAL_NAVIGATION_DIRECTION, TABS_ICON_SIZE, TABS_KEYBOARD_ACTION, TABS_TYPE, TABS_SIZE, };
 declare const CDSTabs_base: {
     new (...args: any[]): {
         _handles: Set<import("../../globals/internal/handle").default>;
@@ -57,6 +57,10 @@ export default class CDSTabs extends CDSTabs_base {
      * The width of the overflow scroll buttons.
      */
     private BUTTON_WIDTH;
+    /**
+     * Propagates the layout size token to the host and all child tabs.
+     */
+    private _syncSizeToTabs;
     /**
      * Navigates through tabs.
      *
@@ -77,6 +81,13 @@ export default class CDSTabs extends CDSTabs_base {
      *   If null or undefined, all tabs will have their highlighted state set to false.
      */
     protected resetHighlighted(nextItem?: CDSTab | null): void;
+    /**
+     * Resets the selected state of all tabs, setting only the specified tab as selected.
+     *
+     * @param nextItem The tab item to be selected. If provided, only this item will be selected.
+     *   If null or undefined, all tabs will have their selected state set to false.
+     */
+    protected resetSelected(nextItem?: CDSTab | null): void;
     protected _handleClick(event: MouseEvent): void;
     protected _handleKeydown(event: KeyboardEvent): void;
     protected _handleTabClosed(event: CustomEvent): void;
@@ -90,7 +101,12 @@ export default class CDSTabs extends CDSTabs_base {
     protected _handleScrollButtonClick(_: any, { direction }: {
         direction: any;
     }): void;
+    private _syncSecondaryLabels;
     _handleSlotchange(): void;
+    /**
+     * Updates the vertical attribute on all child tabs based on the vertical property.
+     */
+    private _updateTabsVerticalAttribute;
     protected _selectionDidChange(itemToSelect: CDSTab, interactionType?: 'mouse' | 'keyboard' | undefined): void;
     /**
      * The scrolling container.
@@ -130,14 +146,27 @@ export default class CDSTabs extends CDSTabs_base {
      * Tabs type.
      */
     type: TABS_TYPE;
+    /**
+     * `true` if the tabs are in vertical orientation.
+     * This is automatically set by `cds-tabs-vertical`.
+     */
+    vertical: boolean;
     /**
      * Whether the rendered Tab children should be dismissable.
      */
     dismissable: any;
+    /**
+     * Specify the size of contained tabs.
+     */
+    size?: TABS_SIZE;
     /**
      * Specify the icon size used by icon-only tabs.
      */
     iconSize?: TABS_ICON_SIZE;
+    /**
+     * Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children
+     */
+    fullWidth: boolean;
     /**
      * `true` if left-hand scroll intersection sentinel intersects with the host element.
      * In this condition, the left-hand paginator button should be hidden.
@@ -216,8 +245,9 @@ export default class CDSTabs extends CDSTabs_base {
     static styles: any;
     /**
      * @param key The key symbol.
-     * @returns A action for dropdown for the given key symbol.
+     * @param isVertical Whether the tabs are in vertical orientation.
+     * @returns A action for tabs for the given key symbol.
      */
-    static getAction(key: string): TABS_KEYBOARD_ACTION;
+    static getAction(key: string, isVertical?: boolean): TABS_KEYBOARD_ACTION;
 }
 //# sourceMappingURL=tabs.d.ts.map

package/es/components/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;AAU3C,OAAO,kBAAkB,EAAE,EACzB,oBAAoB,EACrB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzE,OAAO,MAAM,MAAM,OAAO,CAAC;AAI3B,OAAO,EACL,oBAAoB,EACpB,cAAc,EACd,oBAAoB,EACpB,SAAS,GACV,CAAC;;;;;;;;;;uBAVU,CAAC;;;;;AAYb;;;;;;;;GAQG;AAEH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,YAAqC;IACxE;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAAC,CAAS;IAEtC;;OAEG;IAGH,OAAO,CAAC,aAAa,CAAK;IAE1B;;OAEG;IACH,OAAO,CAAC,UAAU,CAAK;IAEvB;;OAEG;IAGH,OAAO,CAAC,aAAa,CAAS;IAE9B;;OAEG;IACH,OAAO,CAAC,OAAO,CAAwB;IAEvC;;OAEG;IACH,OAAO,CAAC,YAAY,CAAM;IAE1B;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM;IA+BrC;;;;;OAKG;IACH,SAAS,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAQnD,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU;IASxC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,aAAa;IAmE7C,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,WAAW;IAyC7C;;;;;;OAMG;IACH,SAAS,CAAC,wBAAwB,CAAC,CAAC,KAAA,EAAE,EAAE,SAAS,EAAE;;KAAA;IA4BnD,iBAAiB;IAejB,SAAS,CAAC,mBAAmB,CAC3B,YAAY,EAAE,MAAM,EACpB,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS;IAMpD;;OAEG;IAEH,OAAO,CAAC,qBAAqB,CAAC,CAAc;IAE5C;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAC,CAAc;IAEnC;;OAEG;IAEH,OAAO,CAAC,sBAAsB,CAAK;IAEnC;;;OAGG;IAEH,OAAO,CAAC,6BAA6B,CAAC,CAAc;IAEpD;;;OAGG;IAEH,OAAO,CAAC,8BAA8B,CAAC,CAAc;IAErD;;OAEG;IAEH,2BAA2B,SACkC;IAE7D;;OAEG;IAEH,yBAAyB,SAAuB;IAEhD;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,IAAI,YAAqB;IAEzB;;OAEG;IAEH,WAAW,MAAC;IAEZ;;OAEG;IAEH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;;OAGG;IAEH,OAAO,CAAC,mCAAmC,CAAQ;IAEnD;;;OAGG;IAEH,OAAO,CAAC,oCAAoC,CAAQ;IAEpD;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAAqC;IAElE;;;;OAIG;IACH,OAAO,CAAC,6BAA6B,CAcnC;IAEF;;;;;OAKG;IACH,OAAO,CAAC,4CAA4C;IA+BpD,oBAAoB;IAKpB,YAAY,CAAC,iBAAiB,KAAA;IAkB9B,YAAY;IAOZ,OAAO,CAAC,iBAAiB,KAAA;IAkDzB;;OAEG;IACH,SAAS,CAAC,oBAAoB,IAAI,cAAc,GAAG,IAAI;IA0BvD;;OAEG;IACH,SAAS,CAAC,gBAAgB,IAAI,cAAc,GAAG,IAAI;IA0BnD,MAAM;IA8BN,SAAS,CAAC,gBAAgB;IAS1B,SAAS,CAAC,eAAe;IAiBzB;;OAEG;IACH,MAAM,CAAC,YAAY,cAA2B;IAE9C;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,uBAAuB,WAEjC;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,eAAe,WAEzB;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;IAEvB;;;OAGG;IACH,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE,MAAM;CAe7B"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"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"}