@carbon/web-components 2.57.0-rc.0 → 2.58.0-rc.0

package/es/components/structured-list/structured-list-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"structured-list-row.js","names":["styles","customElement"],"sources":["../../../src/components/structured-list/structured-list-row.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\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, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport CheckmarkFilled16 from '@carbon/icons/es/checkmark--filled/16.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport RadioGroupManager, {\n  NAVIGATION_DIRECTION,\n  ManagedRadioButtonDelegate,\n} from '../../globals/internal/radio-group-manager';\nimport styles from './structured-list.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Map of navigation direction by key.\n */\nconst navigationDirectionForKey = {\n  ArrowUp: NAVIGATION_DIRECTION.BACKWARD,\n  Up: NAVIGATION_DIRECTION.BACKWARD, // IE\n  ArrowDown: NAVIGATION_DIRECTION.FORWARD,\n  Down: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * The interface for `RadioGroupManager` for structured list row.\n */\nclass StructuredListRowRadioButtonDelegate\n  implements ManagedRadioButtonDelegate\n{\n  /**\n   * The structured list row to target.\n   */\n  private _row: CDSStructuredListRow;\n\n  constructor(row: CDSStructuredListRow) {\n    this._row = row;\n  }\n\n  get checked() {\n    return this._row.selected;\n  }\n\n  set checked(checked) {\n    this._row.selected = checked;\n    this._row.tabIndex = checked ? 0 : -1;\n  }\n\n  get tabIndex() {\n    return this._row.tabIndex;\n  }\n\n  set tabIndex(tabIndex) {\n    this._row.tabIndex = tabIndex;\n  }\n\n  get name() {\n    return this._row.selectionName;\n  }\n\n  compareDocumentPosition(other: StructuredListRowRadioButtonDelegate) {\n    return this._row.compareDocumentPosition(other._row);\n  }\n\n  focus() {\n    this._row.focus();\n  }\n}\n\n/**\n * Structured list row.\n *\n * @element cds-structured-list-row\n */\n@customElement(`${prefix}-structured-list-row`)\nclass CDSStructuredListRow extends HostListenerMixin(LitElement) {\n  /**\n   * The radio group manager associated with the radio button.\n   */\n  private _manager: RadioGroupManager | null = null;\n\n  /**\n   * The interface for `RadioGroupManager` for structured list row.\n   */\n  private _radioButtonDelegate = new StructuredListRowRadioButtonDelegate(this);\n\n  /**\n   * The hidden radio button.\n   */\n  @query('#input')\n  private _inputNode!: HTMLInputElement;\n\n  /**\n   * Handles `click` event on this element.\n   */\n  @HostListener('click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    const { _inputNode: inputNode } = this;\n    if (inputNode) {\n      this.selected = true;\n      if (this._manager) {\n        this._manager.select(this._radioButtonDelegate);\n      }\n    }\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = (event: KeyboardEvent) => {\n    const { _inputNode: inputNode } = this;\n    const manager = this._manager;\n    if (inputNode && manager) {\n      const navigationDirection = navigationDirectionForKey[event.key];\n      if (navigationDirection) {\n        manager.select(\n          manager.navigate(this._radioButtonDelegate, navigationDirection)\n        );\n      }\n      if (event.key === ' ' || event.key === 'Enter') {\n        manager.select(this._radioButtonDelegate);\n      }\n    }\n  };\n\n  /**\n   * `true` if this structured list row should be selectable and selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The `name` attribute for the `<input>` for selection.\n   * If present, this structured list row will be a selectable one.\n   */\n  @property({ attribute: 'selection-name' })\n  selectionName = '';\n\n  /**\n   * The `value` attribute for the `<input>` for selection.\n   */\n  @property({ attribute: 'selection-value' })\n  selectionValue = '';\n\n  /**\n   * The content to put into the `<title>` attribute of the selection icon.\n   */\n  @property({ attribute: 'selection-icon-title' })\n  selectionIconTitle = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'row');\n    }\n    super.connectedCallback();\n    if (!this._manager) {\n      this._manager = RadioGroupManager.get(\n        this.getRootNode({ composed: true }) as Document\n      );\n      const { selectionName } = this;\n      if (selectionName) {\n        this._manager?.add(this._radioButtonDelegate);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._manager) {\n      this._manager.delete(this._radioButtonDelegate);\n    }\n    super.disconnectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { _manager: manager, selectionName } = this;\n    if (changedProperties.has('selectionName')) {\n      if (manager) {\n        manager.delete(\n          this._radioButtonDelegate,\n          changedProperties.get('selectionName')\n        );\n        if (selectionName) {\n          manager.add(this._radioButtonDelegate);\n        }\n      }\n      this.setAttribute(\n        'tabindex',\n        !selectionName ||\n          !manager ||\n          !manager.shouldBeFocusable(this._radioButtonDelegate)\n          ? '-1'\n          : '0'\n      );\n    }\n  }\n\n  render() {\n    const { selected, selectionName, selectionValue, selectionIconTitle } =\n      this;\n    if (selectionName) {\n      // \"Selected\" style with `.${prefix}--structured-list-td` does not work somehow - Need investigation\n      return html`\n        <slot></slot>\n        <input\n          id=\"input\"\n          type=\"radio\"\n          class=\"${prefix}--structured-list-input ${prefix}--visually-hidden\"\n          .checked=${selected}\n          name=${selectionName}\n          value=${ifDefined(selectionValue)} />\n        <div\n          class=\"${prefix}--structured-list-td ${prefix}--structured-list-cell\">\n          ${iconLoader(CheckmarkFilled16, {\n            class: `${prefix}--structured-list-svg`,\n            title: selectionIconTitle,\n          })}\n        </div>\n      `;\n    }\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSStructuredListRow;\n"],"mappings":"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"}
+{"version":3,"file":"structured-list-row.js","names":["styles","customElement"],"sources":["../../../src/components/structured-list/structured-list-row.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\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, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport CheckmarkFilled16 from '@carbon/icons/es/checkmark--filled/16.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport RadioGroupManager, {\n  NAVIGATION_DIRECTION,\n  ManagedRadioButtonDelegate,\n} from '../../globals/internal/radio-group-manager';\nimport styles from './structured-list.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Map of navigation direction by key.\n */\nconst navigationDirectionForKey = {\n  ArrowUp: NAVIGATION_DIRECTION.BACKWARD,\n  Up: NAVIGATION_DIRECTION.BACKWARD, // IE\n  ArrowDown: NAVIGATION_DIRECTION.FORWARD,\n  Down: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * The interface for `RadioGroupManager` for structured list row.\n */\nclass StructuredListRowRadioButtonDelegate\n  implements ManagedRadioButtonDelegate\n{\n  /**\n   * The structured list row to target.\n   */\n  private _row: CDSStructuredListRow;\n\n  constructor(row: CDSStructuredListRow) {\n    this._row = row;\n  }\n\n  get checked() {\n    return this._row.selected;\n  }\n\n  set checked(checked) {\n    this._row.selected = checked;\n    this._row.tabIndex = checked ? 0 : -1;\n  }\n\n  get tabIndex() {\n    return this._row.tabIndex;\n  }\n\n  set tabIndex(tabIndex) {\n    this._row.tabIndex = tabIndex;\n  }\n\n  get name() {\n    return this._row.selectionName;\n  }\n\n  compareDocumentPosition(other: StructuredListRowRadioButtonDelegate) {\n    return this._row.compareDocumentPosition(other._row);\n  }\n\n  focus() {\n    this._row.focus();\n  }\n}\n\n/**\n * Structured list row.\n *\n * @element cds-structured-list-row\n */\n@customElement(`${prefix}-structured-list-row`)\nclass CDSStructuredListRow extends HostListenerMixin(LitElement) {\n  /**\n   * The radio group manager associated with the radio button.\n   */\n  private _manager: RadioGroupManager | null = null;\n\n  /**\n   * The interface for `RadioGroupManager` for structured list row.\n   */\n  private _radioButtonDelegate = new StructuredListRowRadioButtonDelegate(this);\n\n  /**\n   * The hidden radio button.\n   */\n  @query('#input')\n  private _inputNode!: HTMLInputElement;\n\n  /**\n   * Handles `click` event on this element.\n   */\n  @HostListener('click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    const { _inputNode: inputNode } = this;\n    if (inputNode) {\n      this.selected = true;\n      if (this._manager) {\n        this._manager.select(this._radioButtonDelegate);\n      }\n    }\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = (event: KeyboardEvent) => {\n    const { _inputNode: inputNode } = this;\n    const manager = this._manager;\n    if (inputNode && manager) {\n      const navigationDirection = navigationDirectionForKey[event.key];\n      if (navigationDirection) {\n        manager.select(\n          manager.navigate(this._radioButtonDelegate, navigationDirection)\n        );\n      }\n      if (event.key === ' ' || event.key === 'Enter') {\n        manager.select(this._radioButtonDelegate);\n      }\n    }\n  };\n\n  /**\n   * `true` if this structured list row should be selectable and selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The `name` attribute for the `<input>` for selection.\n   * If present, this structured list row will be a selectable one.\n   */\n  @property({ attribute: 'selection-name' })\n  selectionName = '';\n\n  /**\n   * The `value` attribute for the `<input>` for selection.\n   */\n  @property({ attribute: 'selection-value' })\n  selectionValue = '';\n\n  /**\n   * The content to put into the `<title>` attribute of the selection icon.\n   */\n  @property({ attribute: 'selection-icon-title' })\n  selectionIconTitle = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'row');\n    }\n    super.connectedCallback();\n    if (!this._manager) {\n      this._manager = RadioGroupManager.get(\n        this.getRootNode({ composed: true }) as Document\n      );\n      const { selectionName } = this;\n      if (selectionName) {\n        this._manager?.add(this._radioButtonDelegate);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._manager) {\n      this._manager.delete(this._radioButtonDelegate);\n    }\n    super.disconnectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { _manager: manager, selectionName } = this;\n    if (changedProperties.has('selectionName')) {\n      if (manager) {\n        manager.delete(\n          this._radioButtonDelegate,\n          changedProperties.get('selectionName')\n        );\n        if (selectionName) {\n          manager.add(this._radioButtonDelegate);\n        }\n      }\n      this.setAttribute(\n        'tabindex',\n        !selectionName ||\n          !manager ||\n          !manager.shouldBeFocusable(this._radioButtonDelegate)\n          ? '-1'\n          : '0'\n      );\n    }\n  }\n\n  render() {\n    const { selected, selectionName, selectionValue, selectionIconTitle } =\n      this;\n    if (selectionName) {\n      // \"Selected\" style with `.${prefix}--structured-list-td` does not work somehow - Need investigation\n      return html`\n        <slot></slot>\n        <input\n          id=\"input\"\n          type=\"radio\"\n          class=\"${prefix}--structured-list-input ${prefix}--visually-hidden\"\n          .checked=${selected}\n          name=${selectionName}\n          value=${ifDefined(selectionValue)} />\n        <div\n          class=\"${prefix}--structured-list-td ${prefix}--structured-list-cell\">\n          ${iconLoader(CheckmarkFilled16, {\n            class: `${prefix}--structured-list-svg`,\n            title: selectionIconTitle,\n          })}\n        </div>\n      `;\n    }\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSStructuredListRow;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,4BAA4B;CAChC,SAAA;CACA,IAAA;CACA,WAAA;CACA,MAAA;AACF;;;;AAKA,IAAM,uCAAN,MAEA;CAME,YAAY,KAA2B;EACrC,KAAK,OAAO;CACd;CAEA,IAAI,UAAU;EACZ,OAAO,KAAK,KAAK;CACnB;CAEA,IAAI,QAAQ,SAAS;EACnB,KAAK,KAAK,WAAW;EACrB,KAAK,KAAK,WAAW,UAAU,IAAI;CACrC;CAEA,IAAI,WAAW;EACb,OAAO,KAAK,KAAK;CACnB;CAEA,IAAI,SAAS,UAAU;EACrB,KAAK,KAAK,WAAW;CACvB;CAEA,IAAI,OAAO;EACT,OAAO,KAAK,KAAK;CACnB;CAEA,wBAAwB,OAA6C;EACnE,OAAO,KAAK,KAAK,wBAAwB,MAAM,IAAI;CACrD;CAEA,QAAQ;EACN,KAAK,KAAK,MAAM;CAClB;AACF;;;;;;AAOA,IAAA,uBAAA,MACM,6BAA6B,kBAAkB,UAAU,CAAC,CAAC;;;kBAIlB;8BAKd,IAAI,qCAAqC,IAAI;4BAc/C;GAC3B,MAAM,EAAE,YAAY,cAAc;GAClC,IAAI,WAAW;IACb,KAAK,WAAW;IAChB,IAAI,KAAK,UACP,KAAK,SAAS,OAAO,KAAK,oBAAoB;GAElD;EACF;yBAQ0B,UAAyB;GACjD,MAAM,EAAE,YAAY,cAAc;GAClC,MAAM,UAAU,KAAK;GACrB,IAAI,aAAa,SAAS;IACxB,MAAM,sBAAsB,0BAA0B,MAAM;IAC5D,IAAI,qBACF,QAAQ,OACN,QAAQ,SAAS,KAAK,sBAAsB,mBAAmB,CACjE;IAEF,IAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,SACrC,QAAQ,OAAO,KAAK,oBAAoB;GAE5C;EACF;kBAMW;uBAOK;wBAMC;4BAMI;;CAErB,oBAAoB;EAClB,IAAI,CAAC,KAAK,aAAa,MAAM,GAC3B,KAAK,aAAa,QAAQ,KAAK;EAEjC,MAAM,kBAAkB;EACxB,IAAI,CAAC,KAAK,UAAU;GAClB,KAAK,WAAW,kBAAkB,IAChC,KAAK,YAAY,EAAE,UAAU,KAAK,CAAC,CACrC;GACA,MAAM,EAAE,kBAAkB;GAC1B,IAAI,eACF,KAAK,UAAU,IAAI,KAAK,oBAAoB;EAEhD;CACF;CAEA,uBAAuB;EACrB,IAAI,KAAK,UACP,KAAK,SAAS,OAAO,KAAK,oBAAoB;EAEhD,MAAM,qBAAqB;CAC7B;CAEA,QAAQ,mBAAmB;EACzB,MAAM,EAAE,UAAU,SAAS,kBAAkB;EAC7C,IAAI,kBAAkB,IAAI,eAAe,GAAG;GAC1C,IAAI,SAAS;IACX,QAAQ,OACN,KAAK,sBACL,kBAAkB,IAAI,eAAe,CACvC;IACA,IAAI,eACF,QAAQ,IAAI,KAAK,oBAAoB;GAEzC;GACA,KAAK,aACH,YACA,CAAC,iBACC,CAAC,WACD,CAAC,QAAQ,kBAAkB,KAAK,oBAAoB,IAClD,OACA,GACN;EACF;CACF;CAEA,SAAS;EACP,MAAM,EAAE,UAAU,eAAe,gBAAgB,uBAC/C;EACF,IAAI,eAEF,OAAO,IAAI;;;;;yBAKS,0BAAA,MAAiC;qBACtC,SAAS;iBACb,cAAc;kBACb,UAAU,cAAc,EAAE;;yBAElB,uBAAA,MAA8B;YAC5C,WAAW,mBAAmB;GAC9B,OAAO;GACP,OAAO;EACT,CAAC,EAAE;;;EAIT,OAAO,IAAI;CACb;;gBAEgBA;;AAClB;YA3IG,MAAM,QAAQ,CAAA,GAAA,qBAAA,WAAA,cAAA,KAAA,CAAA;YAMd,aAAa,OAAO,CAAA,GAAA,qBAAA,WAAA,gBAAA,KAAA,CAAA;YAgBpB,aAAa,SAAS,CAAA,GAAA,qBAAA,WAAA,kBAAA,KAAA,CAAA;YAsBtB,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,qBAAA,WAAA,YAAA,KAAA,CAAA;YAOzC,SAAS,EAAE,WAAW,iBAAiB,CAAC,CAAA,GAAA,qBAAA,WAAA,iBAAA,KAAA,CAAA;YAMxC,SAAS,EAAE,WAAW,kBAAkB,CAAC,CAAA,GAAA,qBAAA,WAAA,kBAAA,KAAA,CAAA;YAMzC,SAAS,EAAE,WAAW,uBAAuB,CAAC,CAAA,GAAA,qBAAA,WAAA,sBAAA,KAAA,CAAA;mCA9EhDC,cAAc,yBAA+B,CAAA,GAAA,oBAAA;AA4J9C,IAAA,8BAAe"}

package/es/components/structured-list/structured-list.js

@@ -8,7 +8,7 @@
 import "../../globals/settings.js";
 import { forEach } from "../../globals/internal/collection-helpers.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import structured_list_default$1 from "./structured-list.scss.js";
 import { LitElement, html } from "lit";

package/es/components/structured-list/structured-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"structured-list.js","names":["styles","customElement"],"sources":["../../../src/components/structured-list/structured-list.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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport FocusMixin from '../../globals/mixins/focus';\nimport CDSStructuredListRow from './structured-list-row';\nimport styles from './structured-list.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Structured list wrapper.\n *\n * @element cds-structured-list\n */\n@customElement(`${prefix}-structured-list`)\nclass CDSStructuredList extends FocusMixin(LitElement) {\n  /**\n   * The `name` attribute for the `<input>` for selection.\n   * If present, this structured list will be a selectable one.\n   */\n  @property({ attribute: 'selection-name' })\n  selectionName = '';\n\n  /**\n   * Specify if structured list is condensed, default is false\n   */\n  @property({ type: Boolean, reflect: true })\n  condensed = false;\n\n  /**\n   * Specify if structured list is flush, default is false\n   */\n  @property({ type: Boolean, reflect: true })\n  flush = false;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'table');\n    }\n    super.connectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('selectionName')) {\n      // Propagate `selectionName` attribute to descendants until `:host-context()` gets supported in all major browsers\n      forEach(\n        this.querySelectorAll(\n          (this.constructor as typeof CDSStructuredList).selectorRowsWithHeader\n        ),\n        (elem) => {\n          (elem as CDSStructuredListRow).selectionName = this.selectionName;\n        }\n      );\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    const attributes = ['condensed', 'flush'];\n    attributes.forEach((attr) => {\n      if (changedProperties.has(attr)) {\n        // Propagate watched attribute to descendants until `:host-context()` gets supported in all major browsers\n        forEach(\n          this.querySelectorAll(\n            (this.constructor as typeof CDSStructuredList)\n              .selectorRowsWithHeader\n          ),\n          (elem) => {\n            if (this[`${attr}`]) {\n              elem.setAttribute(attr, '');\n            } else {\n              elem.removeAttribute(attr);\n            }\n          }\n        );\n      }\n    });\n  }\n\n  render() {\n    const { condensed, flush, selectionName } = this;\n    const classes = classMap({\n      [`${prefix}--structured-list`]: true,\n      [`${prefix}--structured-list--selection`]: Boolean(selectionName),\n      [`${prefix}--structured-list--condensed`]: condensed,\n      [`${prefix}--structured-list--flush`]: flush,\n    });\n    return html`\n      <section id=\"section\" class=${classes}><slot></slot></section>\n    `;\n  }\n\n  /**\n   * The CSS selector to find the rows, including header rows.\n   */\n  static selectorRowsWithHeader = `${prefix}-structured-list-row,${prefix}-structured-list-header-row`;\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSStructuredList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAA,oBAAA,MACM,0BAA0B,WAAW,WAAW,CAAC;;;uBAMrC;mBAMJ;eAMJ;;CAER,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,QAAQ;AAEpC,QAAM,mBAAmB;;CAG3B,aAAa,mBAAmB;AAC9B,MAAI,kBAAkB,IAAI,gBAAgB,CAExC,SACE,KAAK,iBACF,KAAK,YAAyC,uBAChD,GACA,SAAS;AACP,QAA8B,gBAAgB,KAAK;IAEvD;AAEH,SAAO;;CAGT,QAAQ,mBAAmB;AACN,GAAC,aAAa,QAAQ,CAC9B,SAAS,SAAS;AAC3B,OAAI,kBAAkB,IAAI,KAAK,CAE7B,SACE,KAAK,iBACF,KAAK,YACH,uBACJ,GACA,SAAS;AACR,QAAI,KAAK,GAAG,QACV,MAAK,aAAa,MAAM,GAAG;QAE3B,MAAK,gBAAgB,KAAK;KAG/B;IAEH;;CAGJ,SAAS;EACP,MAAM,EAAE,WAAW,OAAO,kBAAkB;AAO5C,SAAO,IAAI;oCANK,SAAS;IACtB,yBAA+B;IAC/B,oCAA0C,QAAQ,cAAc;IAChE,oCAA0C;IAC1C,gCAAsC;GACxC,CAAC,CAEsC;;;;gCAOV;;;2BACL;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YAhFf,SAAS,EAAE,WAAW,kBAAkB,CAAC,CAAA,EAAA,kBAAA,WAAA,iBAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,aAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,SAAA,KAAA,EAAA;gCAlB5CC,cAAc,sBAA4B,CAAA,EAAA,kBAAA;AAyF3C,IAAA,0BAAe"}
+{"version":3,"file":"structured-list.js","names":["styles","customElement"],"sources":["../../../src/components/structured-list/structured-list.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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport FocusMixin from '../../globals/mixins/focus';\nimport CDSStructuredListRow from './structured-list-row';\nimport styles from './structured-list.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Structured list wrapper.\n *\n * @element cds-structured-list\n */\n@customElement(`${prefix}-structured-list`)\nclass CDSStructuredList extends FocusMixin(LitElement) {\n  /**\n   * The `name` attribute for the `<input>` for selection.\n   * If present, this structured list will be a selectable one.\n   */\n  @property({ attribute: 'selection-name' })\n  selectionName = '';\n\n  /**\n   * Specify if structured list is condensed, default is false\n   */\n  @property({ type: Boolean, reflect: true })\n  condensed = false;\n\n  /**\n   * Specify if structured list is flush, default is false\n   */\n  @property({ type: Boolean, reflect: true })\n  flush = false;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'table');\n    }\n    super.connectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('selectionName')) {\n      // Propagate `selectionName` attribute to descendants until `:host-context()` gets supported in all major browsers\n      forEach(\n        this.querySelectorAll(\n          (this.constructor as typeof CDSStructuredList).selectorRowsWithHeader\n        ),\n        (elem) => {\n          (elem as CDSStructuredListRow).selectionName = this.selectionName;\n        }\n      );\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    const attributes = ['condensed', 'flush'];\n    attributes.forEach((attr) => {\n      if (changedProperties.has(attr)) {\n        // Propagate watched attribute to descendants until `:host-context()` gets supported in all major browsers\n        forEach(\n          this.querySelectorAll(\n            (this.constructor as typeof CDSStructuredList)\n              .selectorRowsWithHeader\n          ),\n          (elem) => {\n            if (this[`${attr}`]) {\n              elem.setAttribute(attr, '');\n            } else {\n              elem.removeAttribute(attr);\n            }\n          }\n        );\n      }\n    });\n  }\n\n  render() {\n    const { condensed, flush, selectionName } = this;\n    const classes = classMap({\n      [`${prefix}--structured-list`]: true,\n      [`${prefix}--structured-list--selection`]: Boolean(selectionName),\n      [`${prefix}--structured-list--condensed`]: condensed,\n      [`${prefix}--structured-list--flush`]: flush,\n    });\n    return html`\n      <section id=\"section\" class=${classes}><slot></slot></section>\n    `;\n  }\n\n  /**\n   * The CSS selector to find the rows, including header rows.\n   */\n  static selectorRowsWithHeader = `${prefix}-structured-list-row,${prefix}-structured-list-header-row`;\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSStructuredList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAA,oBAAA,MACM,0BAA0B,WAAW,UAAU,CAAC,CAAC;;;uBAMrC;mBAMJ;eAMJ;;CAER,oBAAoB;EAClB,IAAI,CAAC,KAAK,aAAa,MAAM,GAC3B,KAAK,aAAa,QAAQ,OAAO;EAEnC,MAAM,kBAAkB;CAC1B;CAEA,aAAa,mBAAmB;EAC9B,IAAI,kBAAkB,IAAI,eAAe,GAEvC,QACE,KAAK,iBACF,KAAK,YAAyC,sBACjD,IACC,SAAS;GACR,KAA+B,gBAAgB,KAAK;EACtD,CACF;EAEF,OAAO;CACT;CAEA,QAAQ,mBAAmB;EAEzB,CADoB,aAAa,OACxB,CAAC,CAAC,SAAS,SAAS;GAC3B,IAAI,kBAAkB,IAAI,IAAI,GAE5B,QACE,KAAK,iBACF,KAAK,YACH,sBACL,IACC,SAAS;IACR,IAAI,KAAK,GAAG,SACV,KAAK,aAAa,MAAM,EAAE;SAE1B,KAAK,gBAAgB,IAAI;GAE7B,CACF;EAEJ,CAAC;CACH;CAEA,SAAS;EACP,MAAM,EAAE,WAAW,OAAO,kBAAkB;EAO5C,OAAO,IAAI;oCANK,SAAS;IACtB,yBAA+B;IAC/B,oCAA0C,QAAQ,aAAa;IAC/D,oCAA0C;IAC1C,gCAAsC;EACzC,CAEsC,EAAE;;CAE1C;;gCAKgC;;;2BACL;GACzB,GAAG,WAAW;GACd,gBAAgB;EAClB;;;gBACgBA;;AAClB;YAjFG,SAAS,EAAE,WAAW,iBAAiB,CAAC,CAAA,GAAA,kBAAA,WAAA,iBAAA,KAAA,CAAA;YAMxC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,aAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,SAAA,KAAA,CAAA;gCAlB3CC,cAAc,qBAA2B,CAAA,GAAA,iBAAA;AAyF1C,IAAA,0BAAe"}

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

@@ -83,6 +83,10 @@ export declare enum TABS_SIZE {
     /**
      * Large size.
      */
-    LARGE = "lg"
+    LARGE = "lg",
+    /**
+     * Extra large size.
+     */
+    EXTRA_LARGE = "xl"
 }
 //# sourceMappingURL=defs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,oBAAY,oBAAoB;IAC9B;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,OAAO,KAAK;IAEZ;;OAEG;IACH,SAAS,cAAc;IAEvB;;OAEG;IACH,SAAS,cAAc;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;;CAKzC,CAAC;AAEF;;GAEG;AACH,oBAAY,cAAc;IACxB;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,KAAK,OAAO;CACb;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;CACb"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,oBAAY,oBAAoB;IAC9B;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,OAAO,KAAK;IAEZ;;OAEG;IACH,SAAS,cAAc;IAEvB;;OAEG;IACH,SAAS,cAAc;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;;CAKzC,CAAC;AAEF;;GAEG;AACH,oBAAY,cAAc;IACxB;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,KAAK,OAAO;CACb;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,WAAW,OAAO;CACnB"}

package/es/components/tabs/defs.js

@@ -95,6 +95,10 @@ let TABS_SIZE = /* @__PURE__ */ function(TABS_SIZE) {
 	* Large size.
 	*/
 	TABS_SIZE["LARGE"] = "lg";
+	/**
+	* Extra large size.
+	*/
+	TABS_SIZE["EXTRA_LARGE"] = "xl";
 	return TABS_SIZE;
 }({});
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tabs/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 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\n/**\n * The keyboard action categories for dropdown.\n */\nexport enum TABS_KEYBOARD_ACTION {\n  /**\n   * Not doing any action.\n   */\n  NONE = 'none',\n\n  /**\n   * Keyboard action to navigate back/forward.\n   */\n  NAVIGATING = 'navigating',\n\n  /**\n   * Keyboard action to Enter/Space.\n   */\n  ACTIVATING = 'activating',\n\n  /**\n   * Keyboard action to navigate to first tab using home key\n   */\n  HOME = 'home',\n\n  /**\n   * Keyboard action to navigate to last tab using end key\n   */\n  END = 'end',\n}\n\n/**\n * Tabs types.\n */\nexport enum TABS_TYPE {\n  /**\n   * Regular tabs.\n   */\n  REGULAR = '',\n\n  /**\n   * Container type.\n   */\n  CONTAINER = 'container',\n\n  /**\n   * Contained type.\n   */\n  CONTAINED = 'contained',\n}\n\n/**\n * Vertical navigation direction, associated with key symbols.\n */\nexport const VERTICAL_NAVIGATION_DIRECTION = {\n  Up: -1,\n  ArrowUp: -1,\n  Down: 1,\n  ArrowDown: 1,\n};\n\n/**\n * Tabs icon sizes.\n */\nexport enum TABS_ICON_SIZE {\n  /**\n   * Default icon size.\n   */\n  DEFAULT = 'default',\n\n  /**\n   * Large icon size.\n   */\n  LARGE = 'lg',\n}\n\n/**\n * Tabs size.\n */\nexport enum TABS_SIZE {\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,uBAAL,yBAAA,sBAAA;;;;AAIL,sBAAA,UAAA;;;;AAKA,sBAAA,gBAAA;;;;AAKA,sBAAA,gBAAA;;;;AAKA,sBAAA,UAAA;;;;AAKA,sBAAA,SAAA;;KACD;;;;AAKD,IAAY,YAAL,yBAAA,WAAA;;;;AAIL,WAAA,aAAA;;;;AAKA,WAAA,eAAA;;;;AAKA,WAAA,eAAA;;KACD;;;;AAKD,MAAa,gCAAgC;CAC3C,IAAI;CACJ,SAAS;CACT,MAAM;CACN,WAAW;CACZ;;;;AAKD,IAAY,iBAAL,yBAAA,gBAAA;;;;AAIL,gBAAA,aAAA;;;;AAKA,gBAAA,WAAA;;KACD;;;;AAKD,IAAY,YAAL,yBAAA,WAAA;;;;AAIL,WAAA,WAAA;;;;AAKA,WAAA,YAAA;;;;AAKA,WAAA,WAAA;;KACD"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tabs/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 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\n/**\n * The keyboard action categories for dropdown.\n */\nexport enum TABS_KEYBOARD_ACTION {\n  /**\n   * Not doing any action.\n   */\n  NONE = 'none',\n\n  /**\n   * Keyboard action to navigate back/forward.\n   */\n  NAVIGATING = 'navigating',\n\n  /**\n   * Keyboard action to Enter/Space.\n   */\n  ACTIVATING = 'activating',\n\n  /**\n   * Keyboard action to navigate to first tab using home key\n   */\n  HOME = 'home',\n\n  /**\n   * Keyboard action to navigate to last tab using end key\n   */\n  END = 'end',\n}\n\n/**\n * Tabs types.\n */\nexport enum TABS_TYPE {\n  /**\n   * Regular tabs.\n   */\n  REGULAR = '',\n\n  /**\n   * Container type.\n   */\n  CONTAINER = 'container',\n\n  /**\n   * Contained type.\n   */\n  CONTAINED = 'contained',\n}\n\n/**\n * Vertical navigation direction, associated with key symbols.\n */\nexport const VERTICAL_NAVIGATION_DIRECTION = {\n  Up: -1,\n  ArrowUp: -1,\n  Down: 1,\n  ArrowDown: 1,\n};\n\n/**\n * Tabs icon sizes.\n */\nexport enum TABS_ICON_SIZE {\n  /**\n   * Default icon size.\n   */\n  DEFAULT = 'default',\n\n  /**\n   * Large icon size.\n   */\n  LARGE = 'lg',\n}\n\n/**\n * Tabs size.\n */\nexport enum TABS_SIZE {\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  /**\n   * Extra large size.\n   */\n  EXTRA_LARGE = 'xl',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,uBAAL,yBAAA,sBAAA;;;;CAIL,qBAAA,UAAA;;;;CAKA,qBAAA,gBAAA;;;;CAKA,qBAAA,gBAAA;;;;CAKA,qBAAA,UAAA;;;;CAKA,qBAAA,SAAA;;AACF,EAAA,CAAA,CAAA;;;;AAKA,IAAY,YAAL,yBAAA,WAAA;;;;CAIL,UAAA,aAAA;;;;CAKA,UAAA,eAAA;;;;CAKA,UAAA,eAAA;;AACF,EAAA,CAAA,CAAA;;;;AAKA,MAAa,gCAAgC;CAC3C,IAAI;CACJ,SAAS;CACT,MAAM;CACN,WAAW;AACb;;;;AAKA,IAAY,iBAAL,yBAAA,gBAAA;;;;CAIL,eAAA,aAAA;;;;CAKA,eAAA,WAAA;;AACF,EAAA,CAAA,CAAA;;;;AAKA,IAAY,YAAL,yBAAA,WAAA;;;;CAIL,UAAA,WAAA;;;;CAKA,UAAA,YAAA;;;;CAKA,UAAA,WAAA;;;;CAKA,UAAA,iBAAA;;AACF,EAAA,CAAA,CAAA"}

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

@@ -1 +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;AAKvC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMpC,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD;;OAEG;IAEH,SAAS,UAAS;IAElB,OAAO,CAAC,YAAY,CAgBlB;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;IAEH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,SAAS;IAIjB,MAAM;IA4CN;;OAEG;IACH,gBAAgB;CAGjB"}
+{"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;AAKvC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMpC,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD;;OAEG;IAEH,SAAS,UAAS;IAElB,OAAO,CAAC,YAAY,CAgBlB;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;IAEH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,SAAS;IAIjB,MAAM;IA+CN;;OAEG;IACH,gBAAgB;CAGjB"}

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

@@ -7,7 +7,7 @@
 
 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 { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import iconLoader from "../../../globals/internal/icon-loader.js";
 import "../../button/index.js";
 import "../defs.js";
@@ -81,6 +81,7 @@ let DismissableTabsWrapper = class DismissableTabsWrapper extends LitElement {
 	}
 	render() {
 		const { resetTabs } = this;
+		const size = this.size || (this.contained ? "lg" : "md");
 		return html`
       <cds-button style="margin-bottom: 3rem" @click="${resetTabs}">
         Reset
@@ -91,7 +92,7 @@ let DismissableTabsWrapper = class DismissableTabsWrapper extends LitElement {
         selected-index="${this.selectedIndex}"
         type="${this.contained ? "contained" : ""}"
         ?dismissable="${this.dismissable}"
-        size="${this.size || "lg"}"
+        size="${size}"
         value="all"
         @cds-tab-closed="${this._handleDismissed}"
         @cds-tabs-beingselected="${this._handleBeforeSelected}">

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 { 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"}
+{"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    const size =\n      this.size || (this.contained ? TABS_SIZE.LARGE : TABS_SIZE.MEDIUM);\n\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=\"${size}\"\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;GAAY;GACjE;IACE,IAAI;IACJ,OAAO;IACP,OAAO;IACP,MAAM;GACR;GACA;IAAE,IAAI;IAAW,OAAO;IAAY,OAAO;IAAW,MAAM;GAAW;GACvE;IACE,IAAI;IACJ,OAAO;IACP,OAAO;IACP,UAAU;IACV,MAAM;GACR;EACF;eAKgB,KAAK;kBAMV;mBAMC;qBAKE;uBAME;uBAMA;;;;;CAWhB,iBAAyB,OAAoB;EAC3C,MAAM,EAAE,UAAU,MAAM;EACxB,KAAK,QAAQ,KAAK,MAAM,QAAQ,GAAG,MAAM,MAAM,KAAK;CACtD;;;;CAKA,sBAA8B,OAAoB;EAChD,IAAI,KAAK,UACP,MAAM,eAAe;CAEzB;CAEA,YAAoB;EAClB,KAAK,QAAQ,CAAC,GAAG,KAAK,YAAY;CACpC;CAEA,SAAS;EACP,MAAM,EAAE,cAAc;EACtB,MAAM,OACJ,KAAK,SAAS,KAAK,YAAA,OAAA;EAErB,OAAO,IAAI;wDACyC,UAAU;;;;qBAI7C,KAAK,SAAS;0BACT,KAAK,cAAc;0BACnB,KAAK,cAAc;gBAC7B,KAAK,YAAA,cAAA,GAAoD;wBACjD,KAAK,YAAY;gBACzB,KAAK;;2BAEM,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,IAAI,IAAI,GAAG,GAAG,IAAI,MAAM;;WAGhE,EAAE;;0BAEiB;UACjB,KAAK,MAAM,KACV,QAAQ,IAAI;;0BAEG,IAAI,GAAG;;qCAEI,IAAI,GAAG;;gBAE5B,IAAI,MAAM;;WAGlB,EAAE;;;CAGR;;;;CAKA,mBAAmB;EACjB,OAAO;CACT;AACF;YAvIG,SAAS;CAAE,MAAM;CAAS,WAAW;AAAa,CAAC,CAAA,GAAA,uBAAA,WAAA,aAAA,KAAA,CAAA;YAuBnD,MAAM,CAAA,GAAA,uBAAA,WAAA,SAAA,KAAA,CAAA;YAMN,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,uBAAA,WAAA,YAAA,KAAA,CAAA;YAM1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,uBAAA,WAAA,aAAA,KAAA,CAAA;YAK1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,uBAAA,WAAA,eAAA,KAAA,CAAA;YAM1B,SAAS,EAAE,WAAW,iBAAiB,CAAC,CAAA,GAAA,uBAAA,WAAA,iBAAA,KAAA,CAAA;YAMxC,SAAS,EAAE,WAAW,iBAAiB,CAAC,CAAA,GAAA,uBAAA,WAAA,iBAAA,KAAA,CAAA;YAMxC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,uBAAA,WAAA,QAAA,KAAA,CAAA;qCA/D5BA,cAAc,oBAAoB,CAAA,GAAA,sBAAA"}

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

@@ -7,7 +7,7 @@
 
 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 { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import tabs_default from "./tabs.scss.js";
 import { LitElement, html } from "lit";
 //#region src/components/tabs/tab-skeleton.ts

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

@@ -1 +1 @@
-{"version":3,"file":"tab-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/tabs/tab-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\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 { prefix } from '../../globals/settings';\nimport styles from './tabs.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Skeleton of tab.\n *\n * @element cds-tab-skeleton\n */\n@customElement(`${prefix}-tab-skeleton`)\nexport default class CDSTabSkeleton extends LitElement {\n  render() {\n    return html`\n      <div class=\"${prefix}--tabs__nav-link\">\n        <span></span>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBe,IAAA,iBAAA,MAAM,uBAAuB,WAAW;CACrD,SAAS;AACP,SAAO,IAAI;0BACY;;;;;;gBAMTA;;;6BAVjBC,cAAc,mBAAyB,CAAA,EAAA,eAAA"}
+{"version":3,"file":"tab-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/tabs/tab-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\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 { prefix } from '../../globals/settings';\nimport styles from './tabs.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Skeleton of tab.\n *\n * @element cds-tab-skeleton\n */\n@customElement(`${prefix}-tab-skeleton`)\nexport default class CDSTabSkeleton extends LitElement {\n  render() {\n    return html`\n      <div class=\"${prefix}--tabs__nav-link\">\n        <span></span>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBe,IAAA,iBAAA,MAAM,uBAAuB,WAAW;CACrD,SAAS;EACP,OAAO,IAAI;0BACY;;;;CAIzB;;gBAEgBA;;AAClB;6BAXCC,cAAc,kBAAwB,CAAA,GAAA,cAAA"}

package/es/components/tabs/tab.js

@@ -7,7 +7,7 @@
 
 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 { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";

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, 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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"}
+{"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-skeleton.js

@@ -7,7 +7,7 @@
 
 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 { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import tabs_default from "./tabs.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";

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

@@ -1 +1 @@
-{"version":3,"file":"tabs-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/tabs/tabs-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\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 { prefix } from '../../globals/settings';\nimport styles from './tabs.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { property } from 'lit/decorators.js';\n\n/**\n * Skeleton of tabs.\n *\n * @element cds-tabs-skeleton\n */\n@customElement(`${prefix}-tabs-skeleton`)\nexport default class CDSTabsSkeleton extends LitElement {\n  /**\n   * Provide the type of Tab\n   */\n  @property({ type: Boolean, reflect: true })\n  contained = false;\n  render() {\n    return html`\n      <ul class=\"${prefix}--tabs__nav\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n\n  static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBe,IAAA,kBAAA,MAAM,wBAAwB,WAAW;;;mBAK1C;;CACZ,SAAS;AACP,SAAO,IAAI;yBACW;;;;;;gBAMRA;;;YAVf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,gBAAA,WAAA,aAAA,KAAA,EAAA;8BAL5CC,cAAc,oBAA0B,CAAA,EAAA,gBAAA"}
+{"version":3,"file":"tabs-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/tabs/tabs-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\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 { prefix } from '../../globals/settings';\nimport styles from './tabs.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { property } from 'lit/decorators.js';\n\n/**\n * Skeleton of tabs.\n *\n * @element cds-tabs-skeleton\n */\n@customElement(`${prefix}-tabs-skeleton`)\nexport default class CDSTabsSkeleton extends LitElement {\n  /**\n   * Provide the type of Tab\n   */\n  @property({ type: Boolean, reflect: true })\n  contained = false;\n  render() {\n    return html`\n      <ul class=\"${prefix}--tabs__nav\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n\n  static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBe,IAAA,kBAAA,MAAM,wBAAwB,WAAW;;;mBAK1C;;CACZ,SAAS;EACP,OAAO,IAAI;yBACW;;;;CAIxB;;gBAEgBA;;AAClB;YAXG,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,aAAA,KAAA,CAAA;8BAL3CC,cAAc,mBAAyB,CAAA,GAAA,eAAA"}

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

@@ -1 +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"}
+{"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,CAoB3B;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

@@ -7,7 +7,7 @@
 
 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 { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import tabs_default from "./tabs.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
@@ -37,6 +37,8 @@ let CDSTabsVertical = class CDSTabsVertical extends LitElement {
 				if (tabs) {
 					tabs.setAttribute("vertical", "");
 					tabs.removeAttribute("type");
+					const size = tabs.getAttribute("size");
+					if (size) tabs.setAttribute("size", size);
 				}
 			} else {
 				this.classList.remove(`cds--css-grid`);

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

@@ -1 +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"}
+{"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        // Preserve size attribute for vertical tabs to use layout tokens\n        const size = tabs.getAttribute('size');\n        if (size) {\n          tabs.setAttribute('size', size);\n        }\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,UAAgB;GAChD,IAAI,EAAE,SAAS;IACb,KAAK,UAAU,IAAI,eAAqB;IACxC,IAAI,MAAM;KACR,KAAK,aAAa,YAAY,EAAE;KAChC,KAAK,gBAAgB,MAAM;KAE3B,MAAM,OAAO,KAAK,aAAa,MAAM;KACrC,IAAI,MACF,KAAK,aAAa,QAAQ,IAAI;IAElC;GACF,OAAO;IACL,KAAK,UAAU,OAAO,eAAqB;IAC3C,IAAI,MAAM;KACR,KAAK,gBAAgB,UAAU;KAC/B,KAAK,aAAa,QAAQ,WAAW;IACvC;GACF;EACF;;CAEA,eAAe;EACb,KAAK,kBAAkB,OAAO,WAAW,wBAAwB;EACjE,KAAK,sBAAsB,KAAK,eAAe;EAC/C,KAAK,gBAAgB,iBAAiB,UAAU,KAAK,qBAAqB;EAE1E,4BAA4B;GAC1B,KAAK,aAAa;EACpB,CAAC;EAGD,CADkB,KAAK,YAAY,cAAc,sBAAoB,EAAA,EAC1D,iBAAiB,oBAAoB;GAC9C,KAAK,aAAa;EACpB,CAAC;CACH;CAEA,QAAQ,mBAAmB;EACzB,MAAM,UAAU,iBAAiB;EACjC,IAAI,kBAAkB,IAAI,cAAc,GACtC,KAAK,aAAa;CAEtB;CAEA,uBAAuB;EACrB,MAAM,qBAAqB;EAC3B,KAAK,iBAAiB,oBACpB,UACA,KAAK,qBACP;EACA,KAAK,kBAAkB;CACzB;CAEA,eAAuB;EACrB,MAAM,aAAa,KAAK,UAAU,SAAS,eAAqB;EAEhE,IAAI,KAAK,cAAc;GACrB,KAAK,MAAM,SAAS,KAAK;GACzB;EACF;EAEA,IAAI,CAAC,YAAY;GACf,KAAK,MAAM,eAAe,QAAQ;GAClC;EACF;EAEA,MAAM,SAAS,MAAM,KACnB,KAAK,iBAA8B,kBAAgB,CACrD;EAEA,IAAI,OAAO,WAAW,GACpB;EAGF,MAAM,eAAe,OAAO,KAAK,UAAU,MAAM,MAAM;EACvD,OAAO,SAAS,UAAU;GACxB,MAAM,SAAS;EACjB,CAAC;EAED,MAAM,eAAe,KAAK,IAAI,GAAG,OAAO,KAAK,UAAU,MAAM,YAAY,CAAC;EAE1E,OAAO,SAAS,OAAO,UAAU;GAC/B,MAAM,SAAS,aAAa;EAC9B,CAAC;EAGD,MAAM,aADS,KAAK,cAA2B,UACvB,CAAC,EAAE,gBAAgB;EAE3C,MAAM,SAAS,KAAK,IAAI,cAAc,UAAU;EAChD,IAAI,SAAS,GACX,KAAK,MAAM,SAAS,GAAG,OAAO;OAE9B,KAAK,MAAM,eAAe,QAAQ;CAEtC;CAEA,SAAS;EACP,OAAO,IAAI;;0BAEY;;;;CAIzB;;gBAEgBA;;AAClB;YA/GG,SAAS,EAAE,WAAW,gBAAgB,CAAC,CAAA,GAAA,gBAAA,WAAA,gBAAA,KAAA,CAAA;8BALzCC,cAAc,mBAAyB,CAAA,GAAA,eAAA"}

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

@@ -155,6 +155,14 @@ export default class CDSTabs extends CDSTabs_base {
      * Whether the rendered Tab children should be dismissable.
      */
     dismissable: any;
+    /**
+     * Specify the size of the tabs.
+     *
+     * Supports `sm` and `md` for line tabs.
+     * Supports `sm`, `md`, and `lg` for contained tabs.
+     * Supports `xl` only when `vertical` is set; otherwise `xl` falls back to `lg`.
+     */
+    size: TABS_SIZE;
     /**
      * Specify the icon size used by icon-only tabs.
      */

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

@@ -8,7 +8,7 @@
 import "../../globals/settings.js";
 import { forEach } from "../../globals/internal/collection-helpers.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
@@ -58,8 +58,9 @@ 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 (this.type === "contained" || this.vertical) {
+			const rawSize = this.getAttribute("size");
+			const size = rawSize === "xl" && !this.vertical ? "lg" : rawSize;
 			if (size) {
 				const value = `var(--cds-layout-size-height-${size})`;
 				this.style.setProperty(`--cds-layout-size-height`, value);
@@ -494,6 +495,7 @@ __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