@carbon/web-components 2.53.0 → 2.54.0-rc.0

package/es-custom/components/tabs/stories/tabs-wrapper.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 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 { LitElement } from 'lit';
+import '../../button';
+/**
+ * Wrapper component for dismissable tabs story with state management
+ */
+export declare class DismissableTabsWrapper extends LitElement {
+    private _defaultTabs;
+    /**
+     * Array of tab configurations
+     */
+    private _tabs;
+    /**
+     * Whether tabs are disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether tabs are contained
+     */
+    contained: boolean;
+    /**
+     * Whether the rendered Tab children should be dismissable.
+     */
+    dismissable: boolean;
+    /**
+     * Selection mode
+     */
+    selectionMode: string;
+    /**
+     * Selected index for the initially selected content
+     */
+    selectedIndex: number;
+    /**
+     * Handle tab dismissed event
+     */
+    private _handleDismissed;
+    /**
+     * Handle before selected event
+     */
+    private _handleBeforeSelected;
+    private resetTabs;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Disable shadow DOM to inherit styles from parent
+     */
+    createRenderRoot(): this;
+}
+//# sourceMappingURL=tabs-wrapper.d.ts.map

package/es-custom/components/tabs/stories/tabs-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/stories/tabs-wrapper.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,qBAAa,sBAAuB,SAAQ,UAAU;IACpD,OAAO,CAAC,YAAY,CAKlB;IACF;;OAEG;IAEH,OAAO,CAAC,KAAK,CAAqB;IAElC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAClB;;OAEG;IAEH,WAAW,UAAQ;IAEnB;;OAEG;IAEH,aAAa,SAAe;IAE5B;;OAEG;IAEH,aAAa,SAAK;IAElB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,SAAS;IAIjB,MAAM;IA2CN;;OAEG;IACH,gBAAgB;CAGjB"}

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

@@ -0,0 +1,129 @@
+/**
+ * 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 { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../../button/index.js";
+import "../defs.js";
+import "../tabs.js";
+import { LitElement, html } from "lit";
+import { property, state } from "lit/decorators.js";
+//#region src/components/tabs/stories/tabs-wrapper.ts
+/**
+* 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.
+*/
+/**
+* Wrapper component for dismissable tabs story with state management
+*/
+var DismissableTabsWrapper = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._defaultTabs = [
+			{
+				id: "all",
+				label: "Dashboard",
+				value: "all"
+			},
+			{
+				id: "cloudFoundry",
+				label: "Monitoring",
+				value: "cloudFoundry"
+			},
+			{
+				id: "staging",
+				label: "Activity",
+				value: "staging"
+			},
+			{
+				id: "dea",
+				label: "Settings",
+				value: "dea",
+				disabled: true
+			}
+		];
+		this._tabs = this._defaultTabs;
+		this.disabled = false;
+		this.contained = false;
+		this.dismissable = true;
+		this.selectionMode = "automatic";
+		this.selectedIndex = 0;
+	}
+	/**
+	* Handle tab dismissed event
+	*/
+	_handleDismissed(event) {
+		const { index } = event.detail;
+		this._tabs = this._tabs.filter((_, i) => i !== index);
+	}
+	/**
+	* Handle before selected event
+	*/
+	_handleBeforeSelected(event) {
+		if (this.disabled) event.preventDefault();
+	}
+	resetTabs() {
+		this._tabs = [...this._defaultTabs];
+	}
+	render() {
+		const { resetTabs } = this;
+		return html`
+      <cds-custom-button style="margin-bottom: 3rem" @click="${resetTabs}">
+        Reset
+      </cds-custom-button>
+      <cds-custom-tabs
+        ?disabled="${this.disabled}"
+        selection-mode="${this.selectionMode}"
+        selected-index="${this.selectedIndex}"
+        type="${this.contained ? "contained" : ""}"
+        ?dismissable="${this.dismissable}"
+        value="all"
+        @cds-custom-tab-closed="${this._handleDismissed}"
+        @cds-custom-tabs-beingselected="${this._handleBeforeSelected}">
+        ${this._tabs.map((tab) => html`
+            <cds-custom-tab
+              id="tab-${tab.id}"
+              target="panel-${tab.id}"
+              value="${tab.value}"
+              ?disabled="${tab.disabled}">
+              ${tab.label}
+            </cds-custom-tab>
+          `)}
+      </cds-custom-tabs>
+      <div class="${"cds-custom"}-ce-demo-devenv--tab-panels">
+        ${this._tabs.map((tab) => html`
+            <div
+              id="panel-${tab.id}"
+              role="tabpanel"
+              aria-labelledby="tab-${tab.id}"
+              hidden>
+              ${tab.label}
+            </div>
+          `)}
+      </div>
+    `;
+	}
+	/**
+	* Disable shadow DOM to inherit styles from parent
+	*/
+	createRenderRoot() {
+		return this;
+	}
+};
+__decorate([state()], DismissableTabsWrapper.prototype, "_tabs", void 0);
+__decorate([property({ type: Boolean })], DismissableTabsWrapper.prototype, "disabled", void 0);
+__decorate([property({ type: Boolean })], DismissableTabsWrapper.prototype, "contained", void 0);
+__decorate([property({ type: Boolean })], DismissableTabsWrapper.prototype, "dismissable", void 0);
+__decorate([property({ attribute: "selection-mode" })], DismissableTabsWrapper.prototype, "selectionMode", void 0);
+__decorate([property({ attribute: "selected-index" })], DismissableTabsWrapper.prototype, "selectedIndex", void 0);
+customElements.define("tabs-story-wrapper", DismissableTabsWrapper);
+//#endregion
+export { DismissableTabsWrapper };
+
+//# sourceMappingURL=tabs-wrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-wrapper.js","names":[],"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 { prefix } from '../../../globals/settings';\nimport { TABS_TYPE } from '../tabs';\nimport '../../button';\n\n/**\n * Wrapper component for dismissable tabs story with state management\n */\nexport class DismissableTabsWrapper extends LitElement {\n  private _defaultTabs = [\n    { id: 'all', label: 'Dashboard', value: 'all' },\n    { id: 'cloudFoundry', label: 'Monitoring', value: 'cloudFoundry' },\n    { id: 'staging', label: 'Activity', value: 'staging' },\n    { id: 'dea', label: 'Settings', value: 'dea', disabled: true },\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-custom-button style=\"margin-bottom: 3rem\" @click=\"${resetTabs}\">\n        Reset\n      </cds-custom-button>\n      <cds-custom-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-custom-tab-closed=\"${this._handleDismissed}\"\n        @cds-custom-tabs-beingselected=\"${this._handleBeforeSelected}\">\n        ${this._tabs.map(\n          (tab) => html`\n            <cds-custom-tab\n              id=\"tab-${tab.id}\"\n              target=\"panel-${tab.id}\"\n              value=\"${tab.value}\"\n              ?disabled=\"${tab.disabled}\">\n              ${tab.label}\n            </cds-custom-tab>\n          `\n        )}\n      </cds-custom-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\ncustomElements.define('tabs-story-wrapper', DismissableTabsWrapper);\n\n// Made with Bob\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgBA,IAAa,yBAAb,cAA4C,WAAW;;;sBAC9B;GACrB;IAAE,IAAI;IAAO,OAAO;IAAa,OAAO;IAAO;GAC/C;IAAE,IAAI;IAAgB,OAAO;IAAc,OAAO;IAAgB;GAClE;IAAE,IAAI;IAAW,OAAO;IAAY,OAAO;IAAW;GACtD;IAAE,IAAI;IAAO,OAAO;IAAY,OAAO;IAAO,UAAU;IAAM;GAC/D;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,IAAI,MAAM;;YAGjB,CAAC;;0BAEiB;UACjB,KAAK,MAAM,KACV,QAAQ,IAAI;;0BAEG,IAAI,GAAG;;qCAEI,IAAI,GAAG;;gBAE5B,IAAI,MAAM;;YAGjB,CAAC;;;;;;;CAQR,mBAAmB;AACjB,SAAO;;;YApGR,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;AA2E5C,eAAe,OAAO,sBAAsB,uBAAuB"}

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

@@ -6,10 +6,15 @@
  */
 import CDSContentSwitcherItem from '../content-switcher/content-switcher-item';
 import { TABS_ICON_SIZE, TABS_TYPE } from './defs';
+import '../button/button';
 /**
  * Basic tab.
  *
  * @element cds-custom-tab
+ * @fires cds-custom-tab-beingclosed
+ *   The custom event fired before a tab is closed upon a user gesture.
+ *   Cancellation of this event stops changing the user-initiated action.
+ * @fires cds-custom-tab-closed - The custom event fired after a a tab is closed upon a user gesture.
  */
 export default class CDSTab extends CDSContentSwitcherItem {
     /**
@@ -39,12 +44,30 @@ export default class CDSTab extends CDSContentSwitcherItem {
      * **Experimental**: Display an empty dot badge on the Tab.
      */
     badgeIndicator: boolean;
+    /**
+     * Whether this tab should be dismissable.
+     */
+    _dismissable: boolean;
+    /**
+     * The index of the tab component
+     */
+    _index: number;
     /**
      * Handles `slotchange` event.
      */
     protected _handleSlotChange({ target }: Event): void;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
+    _handleClick(event: Event): void;
+    /**
+     * 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.
+     */
+    static get eventBeforeClose(): string;
+    /**
+     * The name of the custom event fired after a a tab is closed upon a user gesture.
+     */
+    static get eventClose(): string;
     static styles: any;
 }
 //# sourceMappingURL=tab.d.ts.map

package/es-custom/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;AAInD;;;;GAIG;AAEH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,sBAAsB;IACxD;;;;;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;;OAEG;IAEH,cAAc,UAAS;IAEvB;;OAEG;IACH,SAAS,CAAC,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAM7C,iBAAiB;IAOjB,MAAM;IA0CN,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;AAGnD,OAAO,kBAAkB,CAAC;AAK1B;;;;;;;;GAQG;AAEH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,sBAAsB;IACxD;;;;;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;;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,iBAAiB;IAOjB,MAAM;IAqEN,YAAY,CAAC,KAAK,EAAE,KAAK;IAwBzB;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB"}

package/es-custom/components/tabs/tab.js

@@ -8,12 +8,16 @@
 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 "../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 } from "lit/decorators.js";
+import { property, 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";
 //#region src/components/tabs/tab.ts
 /**
 * Copyright IBM Corp. 2019, 2026
@@ -28,6 +32,8 @@ let CDSTab = class CDSTab extends content_switcher_item_default {
 		this.type = "";
 		this.iconOnly = false;
 		this.badgeIndicator = false;
+		this._dismissable = false;
+		this._index = -1;
 	}
 	/**
 	* Handles `slotchange` event.
@@ -41,12 +47,36 @@ let CDSTab = class CDSTab extends content_switcher_item_default {
 		super.connectedCallback();
 	}
 	render() {
-		const { badgeIndicator, disabled, selected, tabTitle, _handleSlotChange: handleSlotChange } = this;
+		const navLinkClasses = classMap({
+			[`cds-custom--tabs__nav-link`]: true,
+			[`cds-custom--tabs__nav-link--dismissable`]: this._dismissable
+		});
+		const closeButtonClasses = classMap({
+			[`cds-custom--tabs__nav-item--close`]: this._dismissable,
+			[`cds-custom--tabs__nav-item--close--hidden`]: !this._dismissable
+		});
+		const { badgeIndicator, disabled, selected, tabTitle, _handleSlotChange: handleSlotChange, _handleClick: handleClick } = this;
+		const iconButton = html`
+      <cds-custom-button
+        title="${this.textContent?.trim() ? `Remove ${this.textContent.trim()} tab` : "Remove tab"}"
+        class="${closeButtonClasses}"
+        kind="ghost"
+        size="xs"
+        @click="${handleClick}"
+        tab-index="${-1}"
+        aria-hidden="${this.selected && this._dismissable ? "false" : "true"}"
+        ?disabled="${disabled}">
+        ${iconLoader(Close16, {
+			"aria-label": "close",
+			slot: "icon"
+		})}
+      </cds-custom-button>
+    `;
 		const accessibleLabel = tabTitle || this.getAttribute("aria-label");
 		const isIconOnly = this.iconOnly || this.classList.contains(`cds-custom--tabs__nav-item--icon-only`);
 		const tabLink = html`
       <a
-        class="${"cds-custom"}--tabs__nav-link"
+        class="${navLinkClasses}"
         role="tab"
         aria-label="${ifDefined(accessibleLabel || void 0)}"
         tabindex="${selected ? 0 : -1}"
@@ -57,6 +87,7 @@ let CDSTab = class CDSTab extends content_switcher_item_default {
         </span>
         ${!disabled && badgeIndicator ? html`<cds-custom-badge-indicator></cds-custom-badge-indicator>` : ""}
       </a>
+      ${iconButton}
     `;
 		if (isIconOnly && accessibleLabel && !disabled) return html`
         <cds-custom-tooltip align="bottom" class="${"cds-custom"}--icon-tooltip">
@@ -66,6 +97,29 @@ let CDSTab = class CDSTab extends content_switcher_item_default {
       `;
 		return tabLink;
 	}
+	_handleClick(event) {
+		event.stopPropagation();
+		const init = {
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+			detail: { index: this._index }
+		};
+		if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeClose, init))) this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
+	}
+	/**
+	* 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.
+	*/
+	static get eventBeforeClose() {
+		return `cds-custom-tab-beingclosed`;
+	}
+	/**
+	* The name of the custom event fired after a a tab is closed upon a user gesture.
+	*/
+	static get eventClose() {
+		return `cds-custom-tab-closed`;
+	}
 	static {
 		this.styles = tabs_default;
 	}
@@ -90,6 +144,8 @@ __decorate([property({
 	reflect: true,
 	attribute: "badge-indicator"
 })], CDSTab.prototype, "badgeIndicator", void 0);
+__decorate([state()], CDSTab.prototype, "_dismissable", void 0);
+__decorate([state()], CDSTab.prototype, "_index", void 0);
 CDSTab = __decorate([carbonElement(`cds-custom-tab`)], CDSTab);
 var tab_default = CDSTab;
 //#endregion

package/es-custom/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 } 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';\n\n/**\n * Basic tab.\n *\n * @element cds-custom-tab\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-custom-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   * 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 {\n      badgeIndicator,\n      disabled,\n      selected,\n      tabTitle,\n      _handleSlotChange: handleSlotChange,\n    } = this;\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=\"${prefix}--tabs__nav-link\"\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-custom-badge-indicator></cds-custom-badge-indicator>`\n          : ''}\n      </a>\n    `;\n\n    if (isIconOnly && accessibleLabel && !disabled) {\n      return html`\n        <cds-custom-tooltip align=\"bottom\" class=\"${prefix}--icon-tooltip\">\n          ${tabLink}\n          <cds-custom-tooltip-content>${accessibleLabel}</cds-custom-tooltip-content>\n        </cds-custom-tooltip>\n      `;\n    }\n\n    return tabLink;\n  }\n\n  static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsBe,IAAA,SAAA,MAAM,eAAeA,8BAAuB;;;qBAQ3C;;kBAYH;wBAkBM;;;;;CAKjB,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,EACJ,gBACA,UACA,UACA,UACA,mBAAmB,qBACjB;EACJ,MAAM,kBAAkB,YAAY,KAAK,aAAa,aAAa;EACnE,MAAM,aACJ,KAAK,YACL,KAAK,UAAU,SAAS,iCAAuC;EAEjE,MAAM,UAAU,IAAI;;uBAEA;;sBAEF,UAAU,mBAAmB,KAAA,EAAU,CAAC;oBAC1C,WAAW,IAAI,GAAG;qBACjB,SAAS;yBACL,SAAS;6BACJ;+BACC,iBAAiB;;UAEtC,CAAC,YAAY,iBACX,IAAI,gDACJ,GAAG;;;AAIX,MAAI,cAAc,mBAAmB,CAAC,SACpC,QAAO,IAAI;mDACmC;YACxC,QAAQ;iCACa,gBAAgB;;;AAK7C,SAAO;;;gBAGOC;;;YA3Ff,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;qBAtC1EC,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 } 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-custom-tab\n * @fires cds-custom-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-custom-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-custom-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-custom-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-custom-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-custom-badge-indicator></cds-custom-badge-indicator>`\n          : ''}\n      </a>\n      ${iconButton}\n    `;\n\n    if (isIconOnly && accessibleLabel && !disabled) {\n      return html`\n        <cds-custom-tooltip align=\"bottom\" class=\"${prefix}--icon-tooltip\">\n          ${tabLink}\n          <cds-custom-tooltip-content>${accessibleLabel}</cds-custom-tooltip-content>\n        </cds-custom-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"}

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

@@ -70,8 +70,16 @@ export default class CDSTabs extends CDSTabs_base {
      *   Going prev/next item immediately changes the selection
      */
     protected _navigate(direction: number): void;
+    /**
+     * Resets the highlighted state of all tabs, setting only the specified tab as highlighted.
+     *
+     * @param nextItem The tab item to be highlighted. If provided, only this item will be highlighted.
+     *   If null or undefined, all tabs will have their highlighted state set to false.
+     */
+    protected resetHighlighted(nextItem?: CDSTab | null): void;
     protected _handleClick(event: MouseEvent): void;
     protected _handleKeydown(event: KeyboardEvent): void;
+    protected _handleTabClosed(event: CustomEvent): void;
     /**
      * Handles click on overflow scroll buttons.
      *
@@ -122,6 +130,10 @@ export default class CDSTabs extends CDSTabs_base {
      * Tabs type.
      */
     type: TABS_TYPE;
+    /**
+     * Whether the rendered Tab children should be dismissable.
+     */
+    dismissable: any;
     /**
      * Specify the icon size used by icon-only tabs.
      */
@@ -166,6 +178,8 @@ export default class CDSTabs extends CDSTabs_base {
      */
     protected renderNextButton(): TemplateResult | null;
     render(): TemplateResult<1>;
+    protected _updateTabsState(): void;
+    protected _tabInitialLoad(): void;
     /**
      * Symbols of keys that triggers opening/closing menu and selecting/deselecting menu item.
      */

package/es-custom/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-custom/components/tabs/tabs.js

@@ -66,13 +66,11 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 	*/
 	_navigate(direction) {
 		const immediate = this.selectionMode === "automatic";
-		const { selectorItem, selectorItemHighlighted, selectorItemSelected } = this.constructor;
+		const { selectorItemHighlighted, selectorItemSelected } = this.constructor;
 		const nextItem = this._getNextItem(this.querySelector(immediate ? selectorItemSelected : selectorItemHighlighted), direction);
 		if (!nextItem) return;
 		this._handleUserInitiatedSelectItem(nextItem, "keyboard");
-		if (!immediate) forEach(this.querySelectorAll(selectorItem), (item) => {
-			item[immediate ? "selected" : "highlighted"] = nextItem === item;
-		});
+		if (!immediate) this.resetHighlighted(nextItem);
 		nextItem.scrollIntoView({
 			block: "nearest",
 			inline: "nearest"
@@ -82,16 +80,22 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 		this._currentIndex += direction;
 		this.requestUpdate();
 	}
+	/**
+	* Resets the highlighted state of all tabs, setting only the specified tab as highlighted.
+	*
+	* @param nextItem The tab item to be highlighted. If provided, only this item will be highlighted.
+	*   If null or undefined, all tabs will have their highlighted state set to false.
+	*/
+	resetHighlighted(nextItem) {
+		const { selectorItem } = this.constructor;
+		forEach(this.querySelectorAll(selectorItem), (item) => {
+			item["highlighted"] = nextItem === item;
+		});
+	}
 	_handleClick(event) {
 		super._handleClick(event);
-		const { selectorItem } = this.constructor;
 		const currentItem = this._getCurrentItem(event.target);
-		if (currentItem) {
-			forEach(this.querySelectorAll(selectorItem), (item) => {
-				item.highlighted = false;
-			});
-			currentItem.highlighted = true;
-		}
+		if (currentItem) this.resetHighlighted(currentItem);
 	}
 	_handleKeydown(event) {
 		const { key } = event;
@@ -105,7 +109,8 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 						block: "nearest",
 						inline: "nearest"
 					});
-					this._handleUserInitiatedSelectItem(firstEnabledTab);
+					if (this.selectionMode === "manual") this.resetHighlighted(firstEnabledTab);
+					this._handleUserInitiatedSelectItem(firstEnabledTab, this.selectionMode !== "manual" ? "activation" : "keyboard");
 					this.requestUpdate();
 				}
 				break;
@@ -116,7 +121,8 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 						block: "nearest",
 						inline: "nearest"
 					});
-					this._handleUserInitiatedSelectItem(lastEnabledTab);
+					if (this.selectionMode === "manual") this.resetHighlighted(lastEnabledTab);
+					this._handleUserInitiatedSelectItem(lastEnabledTab, this.selectionMode !== "manual" ? "activation" : "keyboard");
 					this.requestUpdate();
 				}
 				break;
@@ -138,6 +144,34 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 			default: break;
 		}
 	}
+	_handleTabClosed(event) {
+		const { selectorItem, selectorItemEnabled, selectorItemSelected } = this.constructor;
+		const { index } = event.detail;
+		const allTabs = this.querySelectorAll(selectorItem);
+		const enabledTabsBeforeRemoval = this.querySelectorAll(selectorItemEnabled);
+		const activeItem = this.querySelector(selectorItemSelected);
+		const indexInEnabledTabs = Array.from(enabledTabsBeforeRemoval).indexOf(allTabs[index]);
+		const activeTabClosed = activeItem === allTabs[index];
+		requestAnimationFrame(() => {
+			const enabledTabs = this.querySelectorAll(selectorItemEnabled);
+			if (enabledTabs.length > 0) {
+				if (activeTabClosed) {
+					enabledTabs[0].selected = true;
+					this.value = enabledTabs[0].value;
+				}
+				const nextHighlightedItem = indexInEnabledTabs < enabledTabs.length ? enabledTabs[indexInEnabledTabs] : enabledTabs[indexInEnabledTabs - 1];
+				nextHighlightedItem.highlighted = true;
+				nextHighlightedItem.shadowRoot?.querySelector(`.cds-custom--tabs__nav-link--dismissable`)?.focus();
+				nextHighlightedItem.scrollIntoView({
+					block: "nearest",
+					inline: "nearest"
+				});
+			} else {
+				this.value = "";
+				return;
+			}
+		});
+	}
 	/**
 	* Handles click on overflow scroll buttons.
 	*
@@ -164,6 +198,7 @@ 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._updateTabsState();
 	}
 	_selectionDidChange(itemToSelect, interactionType) {
 		super._selectionDidChange(itemToSelect, interactionType);
@@ -213,18 +248,7 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 	}
 	firstUpdated() {
 		super.firstUpdated();
-		const { selectorTablist, selectorItemEnabled } = this.constructor;
-		const { selectionMode, selectedIndex } = this;
-		const tablist = this.shadowRoot.querySelector(selectorTablist);
-		this.tablist = tablist;
-		if (selectionMode === "manual") {
-			const firstItem = this.querySelectorAll(selectorItemEnabled)[selectedIndex];
-			if (firstItem) {
-				firstItem.highlighted = true;
-				firstItem.selected = true;
-				this.value = firstItem.value;
-			}
-		}
+		this._tabInitialLoad();
 		this._cleanAndCreateIntersectionObserverContainer({ create: true });
 	}
 	updated(changedProperties) {
@@ -244,6 +268,7 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 		if (changedProperties.has("_currentScrollPosition")) {
 			if (this._contentNode) this._contentNode.style.insetInlineStart = `-${this._currentScrollPosition}px`;
 		}
+		if (changedProperties.has("dismissable")) this._updateTabsState();
 	}
 	/**
 	* Render the previous button if tablist is wider than container.
@@ -312,6 +337,25 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
       </div>
     `;
 	}
+	_updateTabsState() {
+		const { selectorItem } = this.constructor;
+		this.querySelectorAll(selectorItem).forEach((tab, index) => {
+			tab._dismissable = this.dismissable;
+			tab._index = index;
+		});
+	}
+	_tabInitialLoad() {
+		const { selectorTablist, selectorItemEnabled } = this.constructor;
+		const { selectionMode, selectedIndex } = this;
+		const tablist = this.shadowRoot.querySelector(selectorTablist);
+		this.tablist = tablist;
+		const firstItem = this.querySelectorAll(selectorItemEnabled)[selectedIndex];
+		if (firstItem) {
+			if (selectionMode === "manual") firstItem.highlighted = true;
+			firstItem.selected = true;
+			this.value = firstItem.value;
+		}
+	}
 	static {
 		this.TRIGGER_KEYS = new Set([" ", "Enter"]);
 	}
@@ -375,6 +419,7 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 };
 __decorate([HostListener("click")], CDSTabs.prototype, "_handleClick", null);
 __decorate([HostListener("keydown")], CDSTabs.prototype, "_handleKeydown", null);
+__decorate([HostListener("cds-custom-tab-closed")], CDSTabs.prototype, "_handleTabClosed", null);
 __decorate([query(`.cds-custom--tabs-nav-content-container`)], CDSTabs.prototype, "_contentContainerNode", void 0);
 __decorate([query(`.cds-custom--tabs-nav-content`)], CDSTabs.prototype, "_contentNode", void 0);
 __decorate([state()], CDSTabs.prototype, "_currentScrollPosition", void 0);
@@ -384,6 +429,10 @@ __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,
+	reflect: true
+})], CDSTabs.prototype, "dismissable", void 0);
 __decorate([property({
 	attribute: "icon-size",
 	reflect: true