@carbon/web-components 2.55.0-rc.0 → 2.55.0

package/es/components/tabs/stories/tabs-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-wrapper.js","names":["customElement"],"sources":["../../../../src/components/tabs/stories/tabs-wrapper.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 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, state } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../../globals/decorators/carbon-element';\nimport { prefix } from '../../../globals/settings';\nimport { TABS_TYPE } from '../tabs';\nimport { iconLoader } from '../../../globals/internal/icon-loader';\nimport Dashboard16 from '@carbon/icons/es/dashboard/16.js';\nimport CloudMonitoring16 from '@carbon/icons/es/cloud--monitoring/16.js';\nimport Activity16 from '@carbon/icons/es/activity/16.js';\nimport Settings16 from '@carbon/icons/es/settings/16.js';\nimport '../../button';\n\n/**\n * Wrapper component for dismissable tabs story with state management\n */\n@customElement('tabs-story-wrapper')\nexport class DismissableTabsWrapper extends LitElement {\n  /**\n   * Whether to render tabs with icons\n   */\n  @property({ type: Boolean, attribute: 'with-icons' })\n  withIcons = false;\n\n  private _defaultTabs = [\n    { id: 'all', label: 'Dashboard', value: 'all', icon: Dashboard16 },\n    {\n      id: 'cloudFoundry',\n      label: 'Monitoring',\n      value: 'cloudFoundry',\n      icon: CloudMonitoring16,\n    },\n    { id: 'staging', label: 'Activity', value: 'staging', icon: Activity16 },\n    {\n      id: 'dea',\n      label: 'Settings',\n      value: 'dea',\n      disabled: true,\n      icon: Settings16,\n    },\n  ];\n  /**\n   * Array of tab configurations\n   */\n  @state()\n  private _tabs = this._defaultTabs;\n\n  /**\n   * Whether tabs are disabled\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Whether tabs are contained\n   */\n  @property({ type: Boolean })\n  contained = false;\n  /**\n   * Whether the rendered Tab children should be dismissable.\n   */\n  @property({ type: Boolean })\n  dismissable = true;\n\n  /**\n   * Selection mode\n   */\n  @property({ attribute: 'selection-mode' })\n  selectionMode = 'automatic';\n\n  /**\n   * Selected index for the initially selected content\n   */\n  @property({ attribute: 'selected-index' })\n  selectedIndex = 0;\n\n  /**\n   * Handle tab dismissed event\n   */\n  private _handleDismissed(event: CustomEvent) {\n    const { index } = event.detail;\n    this._tabs = this._tabs.filter((_, i) => i !== index);\n  }\n\n  /**\n   * Handle before selected event\n   */\n  private _handleBeforeSelected(event: CustomEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    }\n  }\n\n  private resetTabs() {\n    this._tabs = [...this._defaultTabs];\n  }\n\n  render() {\n    const { resetTabs } = this;\n    return html`\n      <cds-button style=\"margin-bottom: 3rem\" @click=\"${resetTabs}\">\n        Reset\n      </cds-button>\n      <cds-tabs\n        ?disabled=\"${this.disabled}\"\n        selection-mode=\"${this.selectionMode}\"\n        selected-index=\"${this.selectedIndex}\"\n        type=\"${this.contained ? TABS_TYPE.CONTAINED : TABS_TYPE.REGULAR}\"\n        ?dismissable=\"${this.dismissable}\"\n        value=\"all\"\n        @cds-tab-closed=\"${this._handleDismissed}\"\n        @cds-tabs-beingselected=\"${this._handleBeforeSelected}\">\n        ${this._tabs.map(\n          (tab) => html`\n            <cds-tab\n              id=\"tab-${tab.id}\"\n              target=\"panel-${tab.id}\"\n              value=\"${tab.value}\"\n              ?disabled=\"${tab.disabled}\">\n              ${this.withIcons ? iconLoader(tab.icon) : ''} ${tab.label}\n            </cds-tab>\n          `\n        )}\n      </cds-tabs>\n      <div class=\"${prefix}-ce-demo-devenv--tab-panels\">\n        ${this._tabs.map(\n          (tab) => html`\n            <div\n              id=\"panel-${tab.id}\"\n              role=\"tabpanel\"\n              aria-labelledby=\"tab-${tab.id}\"\n              hidden>\n              ${tab.label}\n            </div>\n          `\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * Disable shadow DOM to inherit styles from parent\n   */\n  createRenderRoot() {\n    return this;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,IAAA,yBAAA,MAAM,+BAA+B,WAAW;;;mBAKzC;sBAEW;GACrB;IAAE,IAAI;IAAO,OAAO;IAAa,OAAO;IAAO,MAAM;IAAa;GAClE;IACE,IAAI;IACJ,OAAO;IACP,OAAO;IACP,MAAM;IACP;GACD;IAAE,IAAI;IAAW,OAAO;IAAY,OAAO;IAAW,MAAM;IAAY;GACxE;IACE,IAAI;IACJ,OAAO;IACP,OAAO;IACP,UAAU;IACV,MAAM;IACP;GACF;eAKe,KAAK;kBAMV;mBAMC;qBAKE;uBAME;uBAMA;;;;;CAKhB,iBAAyB,OAAoB;EAC3C,MAAM,EAAE,UAAU,MAAM;AACxB,OAAK,QAAQ,KAAK,MAAM,QAAQ,GAAG,MAAM,MAAM,MAAM;;;;;CAMvD,sBAA8B,OAAoB;AAChD,MAAI,KAAK,SACP,OAAM,gBAAgB;;CAI1B,YAAoB;AAClB,OAAK,QAAQ,CAAC,GAAG,KAAK,aAAa;;CAGrC,SAAS;EACP,MAAM,EAAE,cAAc;AACtB,SAAO,IAAI;wDACyC,UAAU;;;;qBAI7C,KAAK,SAAS;0BACT,KAAK,cAAc;0BACnB,KAAK,cAAc;gBAC7B,KAAK,YAAA,cAAA,GAAoD;wBACjD,KAAK,YAAY;;2BAEd,KAAK,iBAAiB;mCACd,KAAK,sBAAsB;UACpD,KAAK,MAAM,KACV,QAAQ,IAAI;;wBAEC,IAAI,GAAG;8BACD,IAAI,GAAG;uBACd,IAAI,MAAM;2BACN,IAAI,SAAS;gBACxB,KAAK,YAAY,WAAW,IAAI,KAAK,GAAG,GAAG,GAAG,IAAI,MAAM;;YAG/D,CAAC;;0BAEiB;UACjB,KAAK,MAAM,KACV,QAAQ,IAAI;;0BAEG,IAAI,GAAG;;qCAEI,IAAI,GAAG;;gBAE5B,IAAI,MAAM;;YAGjB,CAAC;;;;;;;CAQR,mBAAmB;AACjB,SAAO;;;YA3HR,SAAS;CAAE,MAAM;CAAS,WAAW;CAAc,CAAC,CAAA,EAAA,uBAAA,WAAA,aAAA,KAAA,EAAA;YAuBpD,OAAO,CAAA,EAAA,uBAAA,WAAA,SAAA,KAAA,EAAA;YAMP,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,uBAAA,WAAA,YAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,uBAAA,WAAA,aAAA,KAAA,EAAA;YAK3B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,uBAAA,WAAA,eAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,WAAW,kBAAkB,CAAC,CAAA,EAAA,uBAAA,WAAA,iBAAA,KAAA,EAAA;YAMzC,SAAS,EAAE,WAAW,kBAAkB,CAAC,CAAA,EAAA,uBAAA,WAAA,iBAAA,KAAA,EAAA;qCAzD3CA,cAAc,qBAAqB,CAAA,EAAA,uBAAA"}
+{"version":3,"file":"tabs-wrapper.js","names":["customElement"],"sources":["../../../../src/components/tabs/stories/tabs-wrapper.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 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, state } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../../globals/decorators/carbon-element';\nimport { prefix } from '../../../globals/settings';\nimport { TABS_TYPE } from '../tabs';\nimport { TABS_SIZE } from '../defs';\nimport { iconLoader } from '../../../globals/internal/icon-loader';\nimport Dashboard16 from '@carbon/icons/es/dashboard/16.js';\nimport CloudMonitoring16 from '@carbon/icons/es/cloud--monitoring/16.js';\nimport Activity16 from '@carbon/icons/es/activity/16.js';\nimport Settings16 from '@carbon/icons/es/settings/16.js';\nimport '../../button';\n\n/**\n * Wrapper component for dismissable tabs story with state management\n */\n@customElement('tabs-story-wrapper')\nexport class DismissableTabsWrapper extends LitElement {\n  /**\n   * Whether to render tabs with icons\n   */\n  @property({ type: Boolean, attribute: 'with-icons' })\n  withIcons = false;\n\n  private _defaultTabs = [\n    { id: 'all', label: 'Dashboard', value: 'all', icon: Dashboard16 },\n    {\n      id: 'cloudFoundry',\n      label: 'Monitoring',\n      value: 'cloudFoundry',\n      icon: CloudMonitoring16,\n    },\n    { id: 'staging', label: 'Activity', value: 'staging', icon: Activity16 },\n    {\n      id: 'dea',\n      label: 'Settings',\n      value: 'dea',\n      disabled: true,\n      icon: Settings16,\n    },\n  ];\n  /**\n   * Array of tab configurations\n   */\n  @state()\n  private _tabs = this._defaultTabs;\n\n  /**\n   * Whether tabs are disabled\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Whether tabs are contained\n   */\n  @property({ type: Boolean })\n  contained = false;\n  /**\n   * Whether the rendered Tab children should be dismissable.\n   */\n  @property({ type: Boolean })\n  dismissable = true;\n\n  /**\n   * Selection mode\n   */\n  @property({ attribute: 'selection-mode' })\n  selectionMode = 'automatic';\n\n  /**\n   * Selected index for the initially selected content\n   */\n  @property({ attribute: 'selected-index' })\n  selectedIndex = 0;\n\n  /**\n   * Size of the tabs\n   */\n  @property({ reflect: true })\n  size?: TABS_SIZE;\n\n  /**\n   * Handle tab dismissed event\n   */\n  private _handleDismissed(event: CustomEvent) {\n    const { index } = event.detail;\n    this._tabs = this._tabs.filter((_, i) => i !== index);\n  }\n\n  /**\n   * Handle before selected event\n   */\n  private _handleBeforeSelected(event: CustomEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    }\n  }\n\n  private resetTabs() {\n    this._tabs = [...this._defaultTabs];\n  }\n\n  render() {\n    const { resetTabs } = this;\n    return html`\n      <cds-button style=\"margin-bottom: 3rem\" @click=\"${resetTabs}\">\n        Reset\n      </cds-button>\n      <cds-tabs\n        ?disabled=\"${this.disabled}\"\n        selection-mode=\"${this.selectionMode}\"\n        selected-index=\"${this.selectedIndex}\"\n        type=\"${this.contained ? TABS_TYPE.CONTAINED : TABS_TYPE.REGULAR}\"\n        ?dismissable=\"${this.dismissable}\"\n        size=\"${this.size || TABS_SIZE.LARGE}\"\n        value=\"all\"\n        @cds-tab-closed=\"${this._handleDismissed}\"\n        @cds-tabs-beingselected=\"${this._handleBeforeSelected}\">\n        ${this._tabs.map(\n          (tab) => html`\n            <cds-tab\n              id=\"tab-${tab.id}\"\n              target=\"panel-${tab.id}\"\n              value=\"${tab.value}\"\n              ?disabled=\"${tab.disabled}\">\n              ${this.withIcons ? iconLoader(tab.icon) : ''} ${tab.label}\n            </cds-tab>\n          `\n        )}\n      </cds-tabs>\n      <div class=\"${prefix}-ce-demo-devenv--tab-panels\">\n        ${this._tabs.map(\n          (tab) => html`\n            <div\n              id=\"panel-${tab.id}\"\n              role=\"tabpanel\"\n              aria-labelledby=\"tab-${tab.id}\"\n              hidden>\n              ${tab.label}\n            </div>\n          `\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * Disable shadow DOM to inherit styles from parent\n   */\n  createRenderRoot() {\n    return this;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,IAAA,yBAAA,MAAM,+BAA+B,WAAW;;;mBAKzC;sBAEW;GACrB;IAAE,IAAI;IAAO,OAAO;IAAa,OAAO;IAAO,MAAM;IAAa;GAClE;IACE,IAAI;IACJ,OAAO;IACP,OAAO;IACP,MAAM;IACP;GACD;IAAE,IAAI;IAAW,OAAO;IAAY,OAAO;IAAW,MAAM;IAAY;GACxE;IACE,IAAI;IACJ,OAAO;IACP,OAAO;IACP,UAAU;IACV,MAAM;IACP;GACF;eAKe,KAAK;kBAMV;mBAMC;qBAKE;uBAME;uBAMA;;;;;CAWhB,iBAAyB,OAAoB;EAC3C,MAAM,EAAE,UAAU,MAAM;AACxB,OAAK,QAAQ,KAAK,MAAM,QAAQ,GAAG,MAAM,MAAM,MAAM;;;;;CAMvD,sBAA8B,OAAoB;AAChD,MAAI,KAAK,SACP,OAAM,gBAAgB;;CAI1B,YAAoB;AAClB,OAAK,QAAQ,CAAC,GAAG,KAAK,aAAa;;CAGrC,SAAS;EACP,MAAM,EAAE,cAAc;AACtB,SAAO,IAAI;wDACyC,UAAU;;;;qBAI7C,KAAK,SAAS;0BACT,KAAK,cAAc;0BACnB,KAAK,cAAc;gBAC7B,KAAK,YAAA,cAAA,GAAoD;wBACjD,KAAK,YAAY;gBACzB,KAAK,QAAA,KAAwB;;2BAElB,KAAK,iBAAiB;mCACd,KAAK,sBAAsB;UACpD,KAAK,MAAM,KACV,QAAQ,IAAI;;wBAEC,IAAI,GAAG;8BACD,IAAI,GAAG;uBACd,IAAI,MAAM;2BACN,IAAI,SAAS;gBACxB,KAAK,YAAY,WAAW,IAAI,KAAK,GAAG,GAAG,GAAG,IAAI,MAAM;;YAG/D,CAAC;;0BAEiB;UACjB,KAAK,MAAM,KACV,QAAQ,IAAI;;0BAEG,IAAI,GAAG;;qCAEI,IAAI,GAAG;;gBAE5B,IAAI,MAAM;;YAGjB,CAAC;;;;;;;CAQR,mBAAmB;AACjB,SAAO;;;YAlIR,SAAS;CAAE,MAAM;CAAS,WAAW;CAAc,CAAC,CAAA,EAAA,uBAAA,WAAA,aAAA,KAAA,EAAA;YAuBpD,OAAO,CAAA,EAAA,uBAAA,WAAA,SAAA,KAAA,EAAA;YAMP,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,uBAAA,WAAA,YAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,uBAAA,WAAA,aAAA,KAAA,EAAA;YAK3B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,uBAAA,WAAA,eAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,WAAW,kBAAkB,CAAC,CAAA,EAAA,uBAAA,WAAA,iBAAA,KAAA,EAAA;YAMzC,SAAS,EAAE,WAAW,kBAAkB,CAAC,CAAA,EAAA,uBAAA,WAAA,iBAAA,KAAA,EAAA;YAMzC,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,uBAAA,WAAA,QAAA,KAAA,EAAA;qCA/D7BA,cAAc,qBAAqB,CAAA,EAAA,uBAAA"}

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

@@ -42,6 +42,11 @@ export default class CDSTab extends CDSTab_base {
      * Tab type.
      */
     type: TABS_TYPE;
+    /**
+     * `true` if the tab is in vertical orientation.
+     * This is automatically set by the parent `<cds-tabs>` when it's in vertical mode.
+     */
+    vertical: boolean;
     /**
      * `true` if this tab is icon-only.
      */
@@ -63,6 +68,11 @@ export default class CDSTab extends CDSTab_base {
      * **Experimental**: Display an empty dot badge on the Tab.
      */
     badgeIndicator: boolean;
+    /**
+     * `true` if the tab text is truncated with ellipsis.
+     * This state is automatically updated when the component renders in vertical mode.
+     */
+    truncated: boolean;
     /**
      * Whether this tab should be dismissable.
      */
@@ -71,6 +81,22 @@ export default class CDSTab extends CDSTab_base {
      * The index of the tab component
      */
     _index: number;
+    /**
+     * Reference to the label span element (only present in vertical mode).
+     * @private
+     */
+    private _labelElement?;
+    /**
+     * 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(): boolean;
+    /**
+     * Updates the truncated state after the component has rendered.
+     */
+    updated(changedProperties: Map<PropertyKey, unknown>): void;
     /**
      * Handles `slotchange` event.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,sBAAsB,MAAM,2CAA2C,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAKnD,OAAO,kBAAkB,CAAC;;;;;;;;;;uBAGzB,CAAC;;;;;AAEF;;;;;;;;GAQG;AAEH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,WAAyC;IAC3E;;;;;OAKG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,IAAI,YAAqB;IAEzB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;OAEG;IAEH,QAAQ,MAAC;IAET;;;OAGG;IAEH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IAEH,cAAc,UAAS;IAEvB;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,MAAM,SAAM;IAEZ;;OAEG;IACH,SAAS,CAAC,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAM7C;;;OAGG;IAEH,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,aAAa;IAY7C,iBAAiB;IAOjB,MAAM;IA6EN;;;OAGG;IACH,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK;IAwBnC;;OAEG;IACH,YAAY,CAAC,KAAK,EAAE,KAAK;IAIzB;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,sBAAsB,MAAM,2CAA2C,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAKnD,OAAO,kBAAkB,CAAC;;;;;;;;;;uBAE6B,CAAC;;;;;AAGxD;;;;;;;;GAQG;AAEH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,WAAyC;IAC3E;;;;;OAKG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,IAAI,YAAqB;IAEzB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;OAEG;IAEH,QAAQ,MAAC;IAET;;;OAGG;IAEH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IAEH,cAAc,UAAS;IAEvB;;;OAGG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,MAAM,SAAM;IAEZ;;;OAGG;IAEH,OAAO,CAAC,aAAa,CAAC,CAAc;IAEpC;;;;;OAKG;IACH,eAAe,IAAI,OAAO;IAU1B;;OAEG;IACH,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAYpD;;OAEG;IACH,SAAS,CAAC,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAQ7C;;;OAGG;IAEH,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,aAAa;IAY7C,iBAAiB;IAOjB,MAAM;IAuFN;;;OAGG;IACH,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK;IAwBnC;;OAEG;IACH,YAAY,CAAC,KAAK,EAAE,KAAK;IAIzB;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB"}

package/es/components/tabs/tab.js

@@ -16,7 +16,7 @@ import content_switcher_item_default from "../content-switcher/content-switcher-
 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";
@@ -32,17 +32,39 @@ let CDSTab = class CDSTab extends HostListenerMixin(content_switcher_item_defaul
 		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.
@@ -68,7 +90,7 @@ let CDSTab = class CDSTab extends HostListenerMixin(content_switcher_item_defaul
 			[`cds--tabs__nav-item--close`]: this._dismissable,
 			[`cds--tabs__nav-item--close--hidden`]: !this._dismissable
 		});
-		const { badgeIndicator, disabled, secondaryLabel, 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"}"
@@ -95,9 +117,15 @@ let CDSTab = class CDSTab extends HostListenerMixin(content_switcher_item_defaul
         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}"
@@ -157,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,
@@ -176,8 +208,10 @@ __decorate([property({
 	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;

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 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 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   * 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  /**\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      _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        ${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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"}
+{"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.
      *
@@ -99,6 +103,10 @@ export default class CDSTabs extends CDSTabs_base {
     }): 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.
@@ -138,10 +146,19 @@ 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.
      */
@@ -228,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":"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"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"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"}

package/es/components/tabs/tabs.js

@@ -14,7 +14,7 @@ import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
 import { NAVIGATION_DIRECTION } from "../content-switcher/defs.js";
 import content_switcher_default from "../content-switcher/content-switcher.js";
-import { TABS_ICON_SIZE, TABS_KEYBOARD_ACTION, TABS_TYPE } from "./defs.js";
+import { TABS_ICON_SIZE, TABS_KEYBOARD_ACTION, TABS_SIZE, TABS_TYPE, VERTICAL_NAVIGATION_DIRECTION } from "./defs.js";
 import tabs_default$1 from "./tabs.scss.js";
 import { html } from "lit";
 import { property, query, state } from "lit/decorators.js";
@@ -41,6 +41,7 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 		this.selectedItemAssistiveText = "Selected an item.";
 		this.triggerContent = "";
 		this.type = "";
+		this.vertical = false;
 		this.fullWidth = false;
 		this._isIntersectionLeftTrackerInContent = true;
 		this._isIntersectionRightTrackerInContent = true;
@@ -54,6 +55,26 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 		};
 	}
 	/**
+	* Propagates the layout size token to the host and all child tabs.
+	*/
+	_syncSizeToTabs() {
+		if (this.type === "contained") {
+			const size = this.getAttribute("size");
+			if (size) {
+				const value = `var(--cds-layout-size-height-${size})`;
+				this.style.setProperty(`--cds-layout-size-height`, value);
+				this.querySelectorAll(`cds-tab`).forEach((tab) => {
+					tab.style.setProperty(`--cds-layout-size-height`, value);
+				});
+			} else {
+				this.style.removeProperty(`--cds-layout-size-height`);
+				this.querySelectorAll(`cds-tab`).forEach((tab) => {
+					tab.style.removeProperty(`--cds-layout-size-height`);
+				});
+			}
+		}
+	}
+	/**
 	* Navigates through tabs.
 	*
 	* @param direction `-1` to navigate backward, `1` to navigate forward.
@@ -112,8 +133,9 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 	}
 	_handleKeydown(event) {
 		const { key } = event;
-		const action = this.constructor.getAction(key);
-		const enabledTabs = this.querySelectorAll(`cds-tab:not([disabled])`);
+		const { selectorItemEnabled } = this.constructor;
+		const action = this.constructor.getAction(key, this.vertical);
+		const enabledTabs = this.querySelectorAll(selectorItemEnabled);
 		switch (action) {
 			case "home":
 				{
@@ -141,7 +163,8 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 				break;
 			case "navigating":
 				{
-					const direction = NAVIGATION_DIRECTION[key];
+					event.preventDefault();
+					const direction = this.vertical ? VERTICAL_NAVIGATION_DIRECTION[key] : NAVIGATION_DIRECTION[key];
 					if (direction) this._navigate(direction);
 				}
 				break;
@@ -217,8 +240,20 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 		const selectedItem = this.querySelector(selectorItemSelected);
 		const nextItem = this._getNextItem(selectedItem, 1);
 		if (nextItem) nextItem.hideDivider = true;
+		this._updateTabsVerticalAttribute();
 		this._syncSecondaryLabels();
 		this._updateTabsState();
+		this._syncSizeToTabs();
+	}
+	/**
+	* Updates the vertical attribute on all child tabs based on the vertical property.
+	*/
+	_updateTabsVerticalAttribute() {
+		const { selectorItem } = this.constructor;
+		forEach(this.querySelectorAll(selectorItem), (tab) => {
+			if (this.vertical) tab.setAttribute("vertical", "");
+			else tab.removeAttribute("vertical");
+		});
 	}
 	_selectionDidChange(itemToSelect, interactionType) {
 		super._selectionDidChange(itemToSelect, interactionType);
@@ -256,7 +291,7 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 			this._isScrollable = scrollWidth > clientWidth;
 		}
 		const { selectorItem } = this.constructor;
-		if (changedProperties.has("type") || changedProperties.has("iconSize")) {
+		if (changedProperties.has("type") || changedProperties.has("iconSize") || changedProperties.has("size")) {
 			this._totalTabs = 0;
 			forEach(this.querySelectorAll(selectorItem), (elem) => {
 				this._totalTabs++;
@@ -271,9 +306,12 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 		this._tabInitialLoad();
 		this._cleanAndCreateIntersectionObserverContainer({ create: true });
 		this._syncSecondaryLabels();
+		this._syncSizeToTabs();
 	}
 	updated(changedProperties) {
 		super.updated?.(changedProperties);
+		if (changedProperties.has("size") || changedProperties.has("type")) this._syncSizeToTabs();
+		if (changedProperties.has("vertical")) this._updateTabsVerticalAttribute();
 		if (changedProperties.has("value")) {
 			const tab = this.querySelector(`cds-tab[value="${this.value}"]`);
 			if (tab) {
@@ -428,12 +466,13 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 	}
 	/**
 	* @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) {
+	static getAction(key, isVertical = false) {
 		if (key === "Home") return "home";
 		if (key === "End") return "end";
-		if (key in NAVIGATION_DIRECTION) return "navigating";
+		if (key in (isVertical ? VERTICAL_NAVIGATION_DIRECTION : NAVIGATION_DIRECTION)) return "navigating";
 		if (key === "Enter" || key === " ") return "activating";
 		return "none";
 	}
@@ -450,10 +489,12 @@ __decorate([property({ attribute: "selecting-items-assistive-text" })], CDSTabs.
 __decorate([property({ attribute: "selected-item-assistive-text" })], CDSTabs.prototype, "selectedItemAssistiveText", void 0);
 __decorate([property({ attribute: "trigger-content" })], CDSTabs.prototype, "triggerContent", void 0);
 __decorate([property({ reflect: true })], CDSTabs.prototype, "type", void 0);
+__decorate([property({ type: Boolean })], CDSTabs.prototype, "vertical", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
 })], CDSTabs.prototype, "dismissable", void 0);
+__decorate([property({ reflect: true })], CDSTabs.prototype, "size", void 0);
 __decorate([property({
 	attribute: "icon-size",
 	reflect: true
@@ -468,6 +509,6 @@ __decorate([state()], CDSTabs.prototype, "_isIntersectionRightTrackerInContent",
 CDSTabs = __decorate([carbonElement(`cds-tabs`)], CDSTabs);
 var tabs_default = CDSTabs;
 //#endregion
-export { NAVIGATION_DIRECTION, TABS_ICON_SIZE, TABS_KEYBOARD_ACTION, TABS_TYPE, tabs_default as default };
+export { NAVIGATION_DIRECTION, TABS_ICON_SIZE, TABS_KEYBOARD_ACTION, TABS_SIZE, TABS_TYPE, VERTICAL_NAVIGATION_DIRECTION, tabs_default as default };
 
 //# sourceMappingURL=tabs.js.map