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

package/es-custom/components/content-switcher/content-switcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-switcher.js","names":["styles","customElement"],"sources":["../../../src/components/content-switcher/content-switcher.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 { prefix } from '../../globals/settings';\nimport { forEach, indexOf } from '../../globals/internal/collection-helpers';\nimport { NAVIGATION_DIRECTION, CONTENT_SWITCHER_SIZE } from './defs';\nimport CDSContentSwitcherItem from './content-switcher-item';\nimport styles from './content-switcher.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { NAVIGATION_DIRECTION, CONTENT_SWITCHER_SIZE };\n\n/**\n * @param index The index\n * @param length The length of the array.\n * @returns The new index, adjusting overflow/underflow.\n */\nconst capIndex = (index: number, length: number) => {\n  if (index < 0) {\n    return length - 1;\n  }\n  if (index >= length) {\n    return 0;\n  }\n  return index;\n};\n\n/**\n * Content switcher.\n *\n * @element cds-custom-content-switcher\n * @fires cds-custom-content-switcher-beingselected\n *   The custom event fired before a content switcher item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-custom-content-switcher-selected - The custom event fired after a a content switcher item is selected upon a user gesture.\n */\n@customElement(`${prefix}-content-switcher`)\nclass CDSContentSwitcher extends LitElement {\n  /**\n   * Handles `mouseover`/`mouseout` events on `<slot>`.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   * @param event.type The event type.\n   */\n  private _handleHover({ target, type }: MouseEvent) {\n    const { selectorItem } = this.constructor as typeof CDSContentSwitcher;\n    const items = this.querySelectorAll(selectorItem);\n    const index =\n      type !== 'mouseover'\n        ? -1\n        : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          indexOf(items, (target as Element).closest(selectorItem)!);\n\n    if ((target as Element).closest(selectorItem)?.hasAttribute('disabled')) {\n      return;\n    }\n\n    const nextIndex = index < 0 ? index : index + 1;\n    forEach(this.querySelectorAll(selectorItem), (elem, i) => {\n      // Specifies child `<cds-custom-content-switcher-item>` to hide its divider instead of using CSS,\n      // until `:host-context()` gets supported in all major browsers\n      (elem as CDSContentSwitcherItem).hideDivider = i === nextIndex;\n    });\n\n    const { selectorItemSelected } = this\n      .constructor as typeof CDSContentSwitcher;\n    const selectedItem = this.querySelector(selectorItemSelected);\n    const nextItem = this._getNextItem(\n      selectedItem as CDSContentSwitcherItem,\n      1\n    );\n    (nextItem as CDSContentSwitcherItem).hideDivider = true;\n  }\n\n  /**\n   * @param target The current event target.\n   * @returns The item to be selected.\n   */\n  protected _getCurrentItem(target: HTMLElement) {\n    const items = this.querySelectorAll(\n      (this.constructor as typeof CDSContentSwitcher).selectorItemEnabled\n    );\n    const { selectorItem } = this.constructor as typeof CDSContentSwitcher;\n    const containerItem = target.closest(\n      selectorItem\n    ) as CDSContentSwitcherItem;\n    const index = indexOf(items, containerItem);\n    return items[index] ?? null;\n  }\n\n  /**\n   * @param currentItem The currently selected item.\n   * @param direction The navigation direction.\n   * @returns The item to be selected.\n   */\n  protected _getNextItem(\n    currentItem: CDSContentSwitcherItem,\n    direction: number\n  ) {\n    const items = this.querySelectorAll(\n      (this.constructor as typeof CDSContentSwitcher).selectorItemEnabled\n    );\n    const currentIndex = indexOf(items, currentItem);\n    const nextIndex = capIndex(currentIndex + direction, items.length);\n    return nextIndex === currentIndex ? null : items[nextIndex];\n  }\n\n  /**\n   * Handles `click` event on content switcher item.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   */\n  protected _handleClick({ target }: MouseEvent) {\n    const currentItem = this._getCurrentItem(target as HTMLElement);\n    this._handleUserInitiatedSelectItem(\n      currentItem as CDSContentSwitcherItem,\n      'mouse'\n    );\n  }\n\n  /**\n   * Handles `keydown` event on the top-level element in the shadow DOM.\n   *\n   * @param event The event.\n   * @param event.key The event key.\n   */\n  protected _handleKeydown({ key }: KeyboardEvent) {\n    if (key in NAVIGATION_DIRECTION) {\n      this._navigate(NAVIGATION_DIRECTION[key]);\n    }\n  }\n\n  /**\n   * Handles user-initiated selection of a content switcher item.\n   *\n   * @param [item] The content switcher item user wants to select.\n   */\n  protected _handleUserInitiatedSelectItem(\n    item: CDSContentSwitcherItem,\n    interactionType?: 'mouse' | 'keyboard' | 'activation' | undefined\n  ) {\n    if (\n      (item && !item.disabled && item.value !== this.value) ||\n      (this.selectionMode === 'manual' &&\n        interactionType === 'keyboard' &&\n        !item.disabled)\n    ) {\n      if (this.selectionMode !== 'manual' || interactionType !== 'keyboard') {\n        const init = {\n          bubbles: true,\n          composed: true,\n          detail: {\n            item,\n          },\n        };\n        const constructor = this.constructor as typeof CDSContentSwitcher;\n        const beforeSelectEvent = new CustomEvent(\n          constructor.eventBeforeSelect,\n          {\n            ...init,\n            cancelable: true,\n          }\n        );\n        if (this.dispatchEvent(beforeSelectEvent)) {\n          this._selectionDidChange(item, interactionType);\n\n          // Add extra event details (index, name, text) to match the React `onChange`\n          const items = this.querySelectorAll(constructor.selectorItem);\n          const index = Array.from(items).indexOf(item);\n          const name = item.getAttribute('name') ?? undefined;\n          const text =\n            item.textContent?.trim() ||\n            item.getAttribute('aria-label')?.trim() ||\n            undefined;\n\n          const afterSelectEvent = new CustomEvent(constructor.eventSelect, {\n            bubbles: true,\n            composed: true,\n            detail: {\n              item,\n              index,\n              name,\n              text,\n            },\n          });\n          this.dispatchEvent(afterSelectEvent);\n        }\n      } else {\n        this._selectionDidChange(item, interactionType);\n      }\n    }\n  }\n\n  /**\n   * Navigates through content switcher items.\n   *\n   * @param direction `-1` to navigate backward, `1` to navigate forward.\n   */\n  protected _navigate(direction: number) {\n    const { selectorItemFocused } = this\n      .constructor as typeof CDSContentSwitcher;\n    const nextItem = this._getNextItem(\n      this.querySelector(selectorItemFocused) as CDSContentSwitcherItem,\n      direction\n    );\n    if (nextItem) {\n      this._handleUserInitiatedSelectItem(\n        nextItem as CDSContentSwitcherItem,\n        'keyboard'\n      );\n      this.requestUpdate();\n    }\n  }\n\n  /**\n   * A callback that runs after change in content switcher selection upon user interaction is confirmed.\n   *\n   * @param itemToSelect A content switcher item.\n   */\n\n  protected _selectionDidChange(\n    itemToSelect: CDSContentSwitcherItem,\n    interactionType?: 'mouse' | 'keyboard' | 'activation' | undefined\n  ) {\n    if (this.selectionMode === 'manual' && interactionType === 'keyboard') {\n      // In manual mode, only focus the item without changing the selection\n      Promise.resolve().then(() => {\n        itemToSelect.focus();\n      });\n\n      return;\n    }\n\n    this.value = itemToSelect.value;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSContentSwitcher).selectorItemSelected\n      ),\n      (item) => {\n        (item as CDSContentSwitcherItem).selected = false;\n      }\n    );\n    itemToSelect.selected = true;\n    // Waits for rendering with the new state that updates `tabindex`\n    Promise.resolve().then(() => {\n      itemToSelect.focus();\n\n      const { selectorItem } = this.constructor as typeof CDSContentSwitcher;\n      const items = this.querySelectorAll(selectorItem);\n      const index = indexOf(\n        items,\n        (itemToSelect as Element).closest(selectorItem)! // eslint-disable-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      );\n      const nextIndex = index < 0 ? index : index + 1;\n      forEach(this.querySelectorAll(selectorItem), (elem, i) => {\n        // Specifies child `<cds-custom-content-switcher-item>` to hide its divider instead of using CSS,\n        // until `:host-context()` gets supported in all major browsers\n        (elem as CDSContentSwitcherItem).hideDivider = i === nextIndex;\n      });\n    });\n  }\n\n  /**\n   * The value of the selected item.\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * Specify a selected index for the initially selected content\n   */\n  @property({ type: Number, attribute: 'selected-index' })\n  selectedIndex = 0;\n\n  /**\n   * Choose whether or not to automatically change selection on focus when left/right arrow pressed. Defaults to 'automatic'\n   */\n  @property({ attribute: 'selection-mode' })\n  selectionMode = 'automatic';\n\n  /**\n   * Content switcher size.\n   */\n  @property({ reflect: true })\n  size = CONTENT_SWITCHER_SIZE.REGULAR;\n\n  /**\n   * Icon only.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'icon' })\n  iconOnly = false;\n\n  /**\n   * `true` to use the low contrast version.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'low-contrast' })\n  lowContrast = false;\n\n  firstUpdated() {\n    this._updateSelectedItemFromIndex();\n  }\n\n  // Validate a selected index for the initially selected content\n  _updateSelectedItemFromIndex() {\n    const { selectorItemEnabled } = this\n      .constructor as typeof CDSContentSwitcher;\n    const items = this.querySelectorAll(selectorItemEnabled);\n    if (\n      items.length > 0 &&\n      this.selectedIndex >= 0 &&\n      this.selectedIndex < items.length\n    ) {\n      const itemToSelect = items[this.selectedIndex] as CDSContentSwitcherItem;\n      this._selectionDidChange(\n        itemToSelect,\n        this.selectionMode === 'manual' ? 'activation' : 'mouse'\n      );\n    }\n  }\n\n  _updateSelectedItemFromValue(changedProps) {\n    if (changedProps.has('value')) {\n      const { selectorItem } = this.constructor as typeof CDSContentSwitcher;\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as CDSContentSwitcherItem).selected =\n          (elem as CDSContentSwitcherItem).value === this.value;\n      });\n    }\n  }\n\n  shouldUpdate(changedProps) {\n    if (changedProps.has('iconOnly') || changedProps.has('selectedIndex')) {\n      const items = this.querySelectorAll(`${prefix}-content-switcher-item`);\n      const allIcon = Array.from(items).every((item) =>\n        item.hasAttribute('icon')\n      );\n      this.iconOnly = allIcon;\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('selectedIndex')) {\n      this._updateSelectedItemFromIndex();\n    }\n\n    this._updateSelectedItemFromValue(changedProperties);\n\n    if (changedProperties.has('size')) {\n      const items = this.querySelectorAll(`${prefix}-content-switcher-item`);\n      items.forEach((item) => {\n        const size = this.size || 'md';\n        item.setAttribute('size', size);\n      });\n    }\n  }\n\n  _handleSlotchange() {\n    const { selectorItemSelected } = this\n      .constructor as typeof CDSContentSwitcher;\n    const selectedItem = this.querySelector(selectorItemSelected);\n    const nextItem = this._getNextItem(\n      selectedItem as CDSContentSwitcherItem,\n      1\n    );\n\n    // Specifies child `<cds-custom-content-switcher-item>` to hide its divider instead of using CSS,\n    // until `:host-context()` gets supported in all major browsers\n    if (nextItem) {\n      (nextItem as CDSContentSwitcherItem).hideDivider = true;\n    }\n  }\n\n  /**\n   * A selector that will return content switcher items.\n   */\n  static get selectorItem() {\n    return `${prefix}-content-switcher-item`;\n  }\n\n  /**\n   * A selector that will return content switcher icon items.\n   */\n  static get selectorIconItem() {\n    return `${prefix}-content-switcher-item[icon]`;\n  }\n\n  /**\n   * A selector that will return enabled content switcher items.\n   */\n  static get selectorItemEnabled() {\n    return `${prefix}-content-switcher-item:not([disabled])`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-content-switcher-item[selected]`;\n  }\n\n  /**\n   * A selector that will return focused items.\n   */\n  static get selectorItemFocused() {\n    return `${prefix}-content-switcher-item:focus`;\n  }\n\n  /**\n   * The name of the custom event fired before a content switcher item is selected upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated selection.\n   */\n  static get eventBeforeSelect() {\n    return `${prefix}-content-switcher-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a content switcher item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-content-switcher-selected`;\n  }\n\n  render() {\n    const {\n      _handleHover: handleHover,\n      _handleKeydown: handleKeydown,\n      _handleSlotchange: handleSlotchange,\n    } = this;\n    return html`\n      <slot\n        @click=\"${this._handleClick}\"\n        @keydown=\"${handleKeydown}\"\n        @mouseover=\"${handleHover}\"\n        @mouseout=\"${handleHover}\"\n        @slotchange=${handleSlotchange}></slot>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSContentSwitcher;\n"],"mappings":"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"}
+{"version":3,"file":"content-switcher.js","names":["styles","customElement"],"sources":["../../../src/components/content-switcher/content-switcher.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 { prefix } from '../../globals/settings';\nimport { forEach, indexOf } from '../../globals/internal/collection-helpers';\nimport { NAVIGATION_DIRECTION, CONTENT_SWITCHER_SIZE } from './defs';\nimport CDSContentSwitcherItem from './content-switcher-item';\nimport styles from './content-switcher.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { NAVIGATION_DIRECTION, CONTENT_SWITCHER_SIZE };\n\n/**\n * @param index The index\n * @param length The length of the array.\n * @returns The new index, adjusting overflow/underflow.\n */\nconst capIndex = (index: number, length: number) => {\n  if (index < 0) {\n    return length - 1;\n  }\n  if (index >= length) {\n    return 0;\n  }\n  return index;\n};\n\n/**\n * Content switcher.\n *\n * @element cds-custom-content-switcher\n * @fires cds-custom-content-switcher-beingselected\n *   The custom event fired before a content switcher item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-custom-content-switcher-selected - The custom event fired after a a content switcher item is selected upon a user gesture.\n */\n@customElement(`${prefix}-content-switcher`)\nclass CDSContentSwitcher extends LitElement {\n  /**\n   * Handles `mouseover`/`mouseout` events on `<slot>`.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   * @param event.type The event type.\n   */\n  private _handleHover({ target, type }: MouseEvent) {\n    const { selectorItem } = this.constructor as typeof CDSContentSwitcher;\n    const items = this.querySelectorAll(selectorItem);\n    const index =\n      type !== 'mouseover'\n        ? -1\n        : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          indexOf(items, (target as Element).closest(selectorItem)!);\n\n    if ((target as Element).closest(selectorItem)?.hasAttribute('disabled')) {\n      return;\n    }\n\n    const nextIndex = index < 0 ? index : index + 1;\n    forEach(this.querySelectorAll(selectorItem), (elem, i) => {\n      // Specifies child `<cds-custom-content-switcher-item>` to hide its divider instead of using CSS,\n      // until `:host-context()` gets supported in all major browsers\n      (elem as CDSContentSwitcherItem).hideDivider = i === nextIndex;\n    });\n\n    const { selectorItemSelected } = this\n      .constructor as typeof CDSContentSwitcher;\n    const selectedItem = this.querySelector(selectorItemSelected);\n    const nextItem = this._getNextItem(\n      selectedItem as CDSContentSwitcherItem,\n      1\n    );\n    (nextItem as CDSContentSwitcherItem).hideDivider = true;\n  }\n\n  /**\n   * @param target The current event target.\n   * @returns The item to be selected.\n   */\n  protected _getCurrentItem(target: HTMLElement) {\n    const items = this.querySelectorAll(\n      (this.constructor as typeof CDSContentSwitcher).selectorItemEnabled\n    );\n    const { selectorItem } = this.constructor as typeof CDSContentSwitcher;\n    const containerItem = target.closest(\n      selectorItem\n    ) as CDSContentSwitcherItem;\n    const index = indexOf(items, containerItem);\n    return items[index] ?? null;\n  }\n\n  /**\n   * @param currentItem The currently selected item.\n   * @param direction The navigation direction.\n   * @returns The item to be selected.\n   */\n  protected _getNextItem(\n    currentItem: CDSContentSwitcherItem,\n    direction: number\n  ) {\n    const items = this.querySelectorAll(\n      (this.constructor as typeof CDSContentSwitcher).selectorItemEnabled\n    );\n    const currentIndex = indexOf(items, currentItem);\n    const nextIndex = capIndex(currentIndex + direction, items.length);\n    return nextIndex === currentIndex ? null : items[nextIndex];\n  }\n\n  /**\n   * Handles `click` event on content switcher item.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   */\n  protected _handleClick({ target }: MouseEvent) {\n    const currentItem = this._getCurrentItem(target as HTMLElement);\n    this._handleUserInitiatedSelectItem(\n      currentItem as CDSContentSwitcherItem,\n      'mouse'\n    );\n  }\n\n  /**\n   * Handles `keydown` event on the top-level element in the shadow DOM.\n   *\n   * @param event The event.\n   * @param event.key The event key.\n   */\n  protected _handleKeydown({ key }: KeyboardEvent) {\n    if (key in NAVIGATION_DIRECTION) {\n      this._navigate(NAVIGATION_DIRECTION[key]);\n    }\n  }\n\n  /**\n   * Handles user-initiated selection of a content switcher item.\n   *\n   * @param [item] The content switcher item user wants to select.\n   */\n  protected _handleUserInitiatedSelectItem(\n    item: CDSContentSwitcherItem,\n    interactionType?: 'mouse' | 'keyboard' | 'activation' | undefined\n  ) {\n    if (\n      (item && !item.disabled && item.value !== this.value) ||\n      (this.selectionMode === 'manual' &&\n        interactionType === 'keyboard' &&\n        !item.disabled)\n    ) {\n      if (this.selectionMode !== 'manual' || interactionType !== 'keyboard') {\n        const init = {\n          bubbles: true,\n          composed: true,\n          detail: {\n            item,\n          },\n        };\n        const constructor = this.constructor as typeof CDSContentSwitcher;\n        const beforeSelectEvent = new CustomEvent(\n          constructor.eventBeforeSelect,\n          {\n            ...init,\n            cancelable: true,\n          }\n        );\n        if (this.dispatchEvent(beforeSelectEvent)) {\n          this._selectionDidChange(item, interactionType);\n\n          // Add extra event details (index, name, text) to match the React `onChange`\n          const items = this.querySelectorAll(constructor.selectorItem);\n          const index = Array.from(items).indexOf(item);\n          const name = item.getAttribute('name') ?? undefined;\n          const text =\n            item.textContent?.trim() ||\n            item.getAttribute('aria-label')?.trim() ||\n            undefined;\n\n          const afterSelectEvent = new CustomEvent(constructor.eventSelect, {\n            bubbles: true,\n            composed: true,\n            detail: {\n              item,\n              index,\n              name,\n              text,\n            },\n          });\n          this.dispatchEvent(afterSelectEvent);\n        }\n      } else {\n        this._selectionDidChange(item, interactionType);\n      }\n    }\n  }\n\n  /**\n   * Navigates through content switcher items.\n   *\n   * @param direction `-1` to navigate backward, `1` to navigate forward.\n   */\n  protected _navigate(direction: number) {\n    const { selectorItemFocused } = this\n      .constructor as typeof CDSContentSwitcher;\n    const nextItem = this._getNextItem(\n      this.querySelector(selectorItemFocused) as CDSContentSwitcherItem,\n      direction\n    );\n    if (nextItem) {\n      this._handleUserInitiatedSelectItem(\n        nextItem as CDSContentSwitcherItem,\n        'keyboard'\n      );\n      this.requestUpdate();\n    }\n  }\n\n  /**\n   * A callback that runs after change in content switcher selection upon user interaction is confirmed.\n   *\n   * @param itemToSelect A content switcher item.\n   */\n\n  protected _selectionDidChange(\n    itemToSelect: CDSContentSwitcherItem,\n    interactionType?: 'mouse' | 'keyboard' | 'activation' | undefined\n  ) {\n    if (this.selectionMode === 'manual' && interactionType === 'keyboard') {\n      // In manual mode, only focus the item without changing the selection\n      Promise.resolve().then(() => {\n        itemToSelect.focus();\n      });\n\n      return;\n    }\n\n    this.value = itemToSelect.value;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSContentSwitcher).selectorItemSelected\n      ),\n      (item) => {\n        (item as CDSContentSwitcherItem).selected = false;\n      }\n    );\n    itemToSelect.selected = true;\n    // Waits for rendering with the new state that updates `tabindex`\n    Promise.resolve().then(() => {\n      itemToSelect.focus();\n\n      const { selectorItem } = this.constructor as typeof CDSContentSwitcher;\n      const items = this.querySelectorAll(selectorItem);\n      const index = indexOf(\n        items,\n        (itemToSelect as Element).closest(selectorItem)! // eslint-disable-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      );\n      const nextIndex = index < 0 ? index : index + 1;\n      forEach(this.querySelectorAll(selectorItem), (elem, i) => {\n        // Specifies child `<cds-custom-content-switcher-item>` to hide its divider instead of using CSS,\n        // until `:host-context()` gets supported in all major browsers\n        (elem as CDSContentSwitcherItem).hideDivider = i === nextIndex;\n      });\n    });\n  }\n\n  /**\n   * The value of the selected item.\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * Specify a selected index for the initially selected content\n   */\n  @property({ type: Number, attribute: 'selected-index' })\n  selectedIndex = 0;\n\n  /**\n   * Choose whether or not to automatically change selection on focus when left/right arrow pressed. Defaults to 'automatic'\n   */\n  @property({ attribute: 'selection-mode' })\n  selectionMode = 'automatic';\n\n  /**\n   * Content switcher size.\n   */\n  @property({ reflect: true })\n  size = CONTENT_SWITCHER_SIZE.REGULAR;\n\n  /**\n   * Icon only.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'icon' })\n  iconOnly = false;\n\n  /**\n   * `true` to use the low contrast version.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'low-contrast' })\n  lowContrast = false;\n\n  firstUpdated() {\n    this._updateSelectedItemFromIndex();\n  }\n\n  // Validate a selected index for the initially selected content\n  _updateSelectedItemFromIndex() {\n    const { selectorItemEnabled } = this\n      .constructor as typeof CDSContentSwitcher;\n    const items = this.querySelectorAll(selectorItemEnabled);\n    if (\n      items.length > 0 &&\n      this.selectedIndex >= 0 &&\n      this.selectedIndex < items.length\n    ) {\n      const itemToSelect = items[this.selectedIndex] as CDSContentSwitcherItem;\n      this._selectionDidChange(\n        itemToSelect,\n        this.selectionMode === 'manual' ? 'activation' : 'mouse'\n      );\n    }\n  }\n\n  _updateSelectedItemFromValue(changedProps) {\n    if (changedProps.has('value')) {\n      const { selectorItem } = this.constructor as typeof CDSContentSwitcher;\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as CDSContentSwitcherItem).selected =\n          (elem as CDSContentSwitcherItem).value === this.value;\n      });\n    }\n  }\n\n  shouldUpdate(changedProps) {\n    if (changedProps.has('iconOnly') || changedProps.has('selectedIndex')) {\n      const items = this.querySelectorAll(`${prefix}-content-switcher-item`);\n      const allIcon = Array.from(items).every((item) =>\n        item.hasAttribute('icon')\n      );\n      this.iconOnly = allIcon;\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('selectedIndex')) {\n      this._updateSelectedItemFromIndex();\n    }\n\n    this._updateSelectedItemFromValue(changedProperties);\n\n    if (changedProperties.has('size')) {\n      const items = this.querySelectorAll(`${prefix}-content-switcher-item`);\n      items.forEach((item) => {\n        const size = this.size || 'md';\n        item.setAttribute('size', size);\n      });\n    }\n  }\n\n  _handleSlotchange() {\n    const { selectorItemSelected } = this\n      .constructor as typeof CDSContentSwitcher;\n    const selectedItem = this.querySelector(selectorItemSelected);\n    const nextItem = this._getNextItem(\n      selectedItem as CDSContentSwitcherItem,\n      1\n    );\n\n    // Specifies child `<cds-custom-content-switcher-item>` to hide its divider instead of using CSS,\n    // until `:host-context()` gets supported in all major browsers\n    if (nextItem) {\n      (nextItem as CDSContentSwitcherItem).hideDivider = true;\n    }\n  }\n\n  /**\n   * A selector that will return content switcher items.\n   */\n  static get selectorItem() {\n    return `${prefix}-content-switcher-item`;\n  }\n\n  /**\n   * A selector that will return content switcher icon items.\n   */\n  static get selectorIconItem() {\n    return `${prefix}-content-switcher-item[icon]`;\n  }\n\n  /**\n   * A selector that will return enabled content switcher items.\n   */\n  static get selectorItemEnabled() {\n    return `${prefix}-content-switcher-item:not([disabled])`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-content-switcher-item[selected]`;\n  }\n\n  /**\n   * A selector that will return focused items.\n   */\n  static get selectorItemFocused() {\n    return `${prefix}-content-switcher-item:focus`;\n  }\n\n  /**\n   * The name of the custom event fired before a content switcher item is selected upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated selection.\n   */\n  static get eventBeforeSelect() {\n    return `${prefix}-content-switcher-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a content switcher item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-content-switcher-selected`;\n  }\n\n  render() {\n    const {\n      _handleHover: handleHover,\n      _handleKeydown: handleKeydown,\n      _handleSlotchange: handleSlotchange,\n    } = this;\n    return html`\n      <slot\n        @click=\"${this._handleClick}\"\n        @keydown=\"${handleKeydown}\"\n        @mouseover=\"${handleHover}\"\n        @mouseout=\"${handleHover}\"\n        @slotchange=${handleSlotchange}></slot>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSContentSwitcher;\n"],"mappings":"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"}

package/es-custom/components/content-switcher/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/content-switcher/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2025\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 * Navigation direction, associated with key symbols.\n */\nexport const NAVIGATION_DIRECTION = {\n  Left: -1,\n  ArrowLeft: -1,\n  Right: 1,\n  ArrowRight: 1,\n};\n\n/**\n * Button size.\n */\nexport enum CONTENT_SWITCHER_SIZE {\n  /**\n   * Regular size.\n   */\n  REGULAR = '',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  /**\n   * @deprecated\n   * X-Large size.\n   */\n  EXTRA_LARGE = 'xl',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,MAAa,uBAAuB;CAClC,MAAM;CACN,WAAW;CACX,OAAO;CACP,YAAY;CACb;;;;AAKD,IAAY,wBAAL,yBAAA,uBAAA;;;;AAIL,uBAAA,aAAA;;;;AAKA,uBAAA,WAAA;;;;AAKA,uBAAA,WAAA;;;;;AAMA,uBAAA,iBAAA;;KACD"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/content-switcher/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2025\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 * Navigation direction, associated with key symbols.\n */\nexport const NAVIGATION_DIRECTION = {\n  Left: -1,\n  ArrowLeft: -1,\n  Right: 1,\n  ArrowRight: 1,\n};\n\n/**\n * Button size.\n */\nexport enum CONTENT_SWITCHER_SIZE {\n  /**\n   * Regular size.\n   */\n  REGULAR = '',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  /**\n   * @deprecated\n   * X-Large size.\n   */\n  EXTRA_LARGE = 'xl',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,MAAa,uBAAuB;CAClC,MAAM;CACN,WAAW;CACX,OAAO;CACP,YAAY;AACd;;;;AAKA,IAAY,wBAAL,yBAAA,uBAAA;;;;CAIL,sBAAA,aAAA;;;;CAKA,sBAAA,WAAA;;;;CAKA,sBAAA,WAAA;;;;;CAMA,sBAAA,iBAAA;;AACF,EAAA,CAAA,CAAA"}

package/es-custom/components/copy/copy.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 icon_button_default from "../icon-button/icon-button.js";
 import copy_button_default from "../copy-button/copy-button.scss.js";
 import { html } from "lit";

package/es-custom/components/copy/copy.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy.js","names":["CDSIconButton","styles","customElement"],"sources":["../../../src/components/copy/copy.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 { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from '../copy-button/copy-button.scss?lit';\nimport CDSIconButton from '../icon-button/icon-button';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Copy.\n *\n * @element cds-custom-copy\n */\n@customElement(`${prefix}-copy`)\nclass CDSCopy extends CDSIconButton {\n  /**\n   * `true` to show the feedback tooltip.\n   */\n  private _showFeedback = false;\n\n  /**\n   * `true` to show the feedback tooltip.\n   */\n  private _animation = '';\n\n  private _createHandleFeedbackTooltip = () => {\n    let timeoutId: number | undefined;\n    return (timeout: number) => {\n      const buttonClasses = this.shadowRoot?.querySelector('button')?.classList;\n\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n        timeoutId = undefined;\n      }\n      this._showFeedback = true;\n      buttonClasses?.add(`${prefix}--copy-btn--animating`);\n      this._animation = 'fade-in';\n      buttonClasses?.add(`${prefix}--copy-btn--${this._animation}`);\n      this.requestUpdate();\n      timeoutId = setTimeout(() => {\n        this._showFeedback = false;\n        this._animation = 'fade-out';\n        buttonClasses?.remove(`${prefix}--copy-btn--fade-in`);\n        buttonClasses?.add(`${prefix}--copy-btn--${this._animation}`);\n        this.requestUpdate();\n      }, timeout) as unknown as number;\n    };\n  };\n\n  /**\n   * Handles showing/hiding the feedback tooltip.\n   */\n  private _handleFeedbackTooltip = this._createHandleFeedbackTooltip();\n\n  /**\n   * Handles `click` event on the copy button.\n   */\n  private _handleClickButton() {\n    this._handleFeedbackTooltip(this.feedbackTimeout);\n  }\n\n  /**\n   * Specify the string that is displayed when the button is clicked and the content is copi\n   */\n  @property()\n  feedback = 'Copied!';\n\n  /**\n   * The number in milliseconds to determine how long the tooltip should remain.\n   */\n  @property({ type: Number, attribute: 'feedback-timeout' })\n  feedbackTimeout = 2000;\n\n  protected _renderTooltipContent() {\n    return html`\n      <cds-custom-tooltip-content>\n        ${this._showFeedback\n          ? this.feedback\n          : html`<slot name=\"tooltip-content\"></slot>`}\n      </cds-custom-tooltip-content>\n    `;\n  }\n\n  connectedCallback() {\n    this.closeOnActivation = false;\n\n    this.addEventListener('click', this._handleClickButton);\n\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    this.shadowRoot\n      ?.querySelector('button')\n      ?.addEventListener('animationend', () => {\n        if (this._animation === 'fade-out') {\n          const buttonClasses =\n            this.shadowRoot?.querySelector('button')?.classList;\n          buttonClasses?.remove(`${prefix}--copy-btn--animating`);\n          buttonClasses?.remove(`${prefix}--copy-btn--${this._animation}`);\n          this._animation = '';\n        }\n      });\n\n    super.updated(changedProperties);\n\n    this.shadowRoot // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n      ?.querySelector('button') // @ts-ignore: TS thinks `host` doesn't exist on `parentNode`\n      ?.setAttribute('aria-label', this.parentNode?.host.textContent);\n  }\n\n  static styles = styles;\n}\n\nexport default CDSCopy;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAA,UAAA,MACM,gBAAgBA,oBAAc;;;uBAIV;oBAKH;4CAEwB;GAC3C,IAAI;AACJ,WAAQ,YAAoB;IAC1B,MAAM,gBAAgB,KAAK,YAAY,cAAc,SAAS,EAAE;AAEhE,QAAI,WAAW;AACb,kBAAa,UAAU;AACvB,iBAAY,KAAA;;AAEd,SAAK,gBAAgB;AACrB,mBAAe,IAAI,2BAAiC;AACpD,SAAK,aAAa;AAClB,mBAAe,IAAI,kBAAwB,KAAK,aAAa;AAC7D,SAAK,eAAe;AACpB,gBAAY,iBAAiB;AAC3B,UAAK,gBAAgB;AACrB,UAAK,aAAa;AAClB,oBAAe,OAAO,yBAA+B;AACrD,oBAAe,IAAI,kBAAwB,KAAK,aAAa;AAC7D,UAAK,eAAe;OACnB,QAAQ;;;gCAOkB,KAAK,8BAA8B;kBAazD;yBAMO;;;;;CAdlB,qBAA6B;AAC3B,OAAK,uBAAuB,KAAK,gBAAgB;;CAenD,wBAAkC;AAChC,SAAO,IAAI;;UAEL,KAAK,gBACH,KAAK,WACL,IAAI,uCAAuC;;;;CAKrD,oBAAoB;AAClB,OAAK,oBAAoB;AAEzB,OAAK,iBAAiB,SAAS,KAAK,mBAAmB;AAEvD,QAAM,mBAAmB;;CAG3B,QAAQ,mBAAmB;AACzB,OAAK,YACD,cAAc,SAAS,EACvB,iBAAiB,sBAAsB;AACvC,OAAI,KAAK,eAAe,YAAY;IAClC,MAAM,gBACJ,KAAK,YAAY,cAAc,SAAS,EAAE;AAC5C,mBAAe,OAAO,2BAAiC;AACvD,mBAAe,OAAO,kBAAwB,KAAK,aAAa;AAChE,SAAK,aAAa;;IAEpB;AAEJ,QAAM,QAAQ,kBAAkB;AAEhC,OAAK,YACD,cAAc,SAAS,EACvB,aAAa,cAAc,KAAK,YAAY,KAAK,YAAY;;;gBAGnDC;;;YA/Cf,UAAU,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAMV,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAoB,CAAC,CAAA,EAAA,QAAA,WAAA,mBAAA,KAAA,EAAA;sBAzD3DC,cAAc,WAAiB,CAAA,EAAA,QAAA;AAqGhC,IAAA,eAAe"}
+{"version":3,"file":"copy.js","names":["CDSIconButton","styles","customElement"],"sources":["../../../src/components/copy/copy.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 { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from '../copy-button/copy-button.scss?lit';\nimport CDSIconButton from '../icon-button/icon-button';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Copy.\n *\n * @element cds-custom-copy\n */\n@customElement(`${prefix}-copy`)\nclass CDSCopy extends CDSIconButton {\n  /**\n   * `true` to show the feedback tooltip.\n   */\n  private _showFeedback = false;\n\n  /**\n   * `true` to show the feedback tooltip.\n   */\n  private _animation = '';\n\n  private _createHandleFeedbackTooltip = () => {\n    let timeoutId: number | undefined;\n    return (timeout: number) => {\n      const buttonClasses = this.shadowRoot?.querySelector('button')?.classList;\n\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n        timeoutId = undefined;\n      }\n      this._showFeedback = true;\n      buttonClasses?.add(`${prefix}--copy-btn--animating`);\n      this._animation = 'fade-in';\n      buttonClasses?.add(`${prefix}--copy-btn--${this._animation}`);\n      this.requestUpdate();\n      timeoutId = setTimeout(() => {\n        this._showFeedback = false;\n        this._animation = 'fade-out';\n        buttonClasses?.remove(`${prefix}--copy-btn--fade-in`);\n        buttonClasses?.add(`${prefix}--copy-btn--${this._animation}`);\n        this.requestUpdate();\n      }, timeout) as unknown as number;\n    };\n  };\n\n  /**\n   * Handles showing/hiding the feedback tooltip.\n   */\n  private _handleFeedbackTooltip = this._createHandleFeedbackTooltip();\n\n  /**\n   * Handles `click` event on the copy button.\n   */\n  private _handleClickButton() {\n    this._handleFeedbackTooltip(this.feedbackTimeout);\n  }\n\n  /**\n   * Specify the string that is displayed when the button is clicked and the content is copi\n   */\n  @property()\n  feedback = 'Copied!';\n\n  /**\n   * The number in milliseconds to determine how long the tooltip should remain.\n   */\n  @property({ type: Number, attribute: 'feedback-timeout' })\n  feedbackTimeout = 2000;\n\n  protected _renderTooltipContent() {\n    return html`\n      <cds-custom-tooltip-content>\n        ${this._showFeedback\n          ? this.feedback\n          : html`<slot name=\"tooltip-content\"></slot>`}\n      </cds-custom-tooltip-content>\n    `;\n  }\n\n  connectedCallback() {\n    this.closeOnActivation = false;\n\n    this.addEventListener('click', this._handleClickButton);\n\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    this.shadowRoot\n      ?.querySelector('button')\n      ?.addEventListener('animationend', () => {\n        if (this._animation === 'fade-out') {\n          const buttonClasses =\n            this.shadowRoot?.querySelector('button')?.classList;\n          buttonClasses?.remove(`${prefix}--copy-btn--animating`);\n          buttonClasses?.remove(`${prefix}--copy-btn--${this._animation}`);\n          this._animation = '';\n        }\n      });\n\n    super.updated(changedProperties);\n\n    this.shadowRoot // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n      ?.querySelector('button') // @ts-ignore: TS thinks `host` doesn't exist on `parentNode`\n      ?.setAttribute('aria-label', this.parentNode?.host.textContent);\n  }\n\n  static styles = styles;\n}\n\nexport default CDSCopy;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAA,UAAA,MACM,gBAAgBA,oBAAc;;;uBAIV;oBAKH;4CAEwB;GAC3C,IAAI;GACJ,QAAQ,YAAoB;IAC1B,MAAM,gBAAgB,KAAK,YAAY,cAAc,QAAQ,CAAC,EAAE;IAEhE,IAAI,WAAW;KACb,aAAa,SAAS;KACtB,YAAY,KAAA;IACd;IACA,KAAK,gBAAgB;IACrB,eAAe,IAAI,0BAAgC;IACnD,KAAK,aAAa;IAClB,eAAe,IAAI,kBAAwB,KAAK,YAAY;IAC5D,KAAK,cAAc;IACnB,YAAY,iBAAiB;KAC3B,KAAK,gBAAgB;KACrB,KAAK,aAAa;KAClB,eAAe,OAAO,wBAA8B;KACpD,eAAe,IAAI,kBAAwB,KAAK,YAAY;KAC5D,KAAK,cAAc;IACrB,GAAG,OAAO;GACZ;EACF;gCAKiC,KAAK,6BAA6B;kBAaxD;yBAMO;;;;;CAdlB,qBAA6B;EAC3B,KAAK,uBAAuB,KAAK,eAAe;CAClD;CAcA,wBAAkC;EAChC,OAAO,IAAI;;UAEL,KAAK,gBACH,KAAK,WACL,IAAI,uCAAuC;;;CAGrD;CAEA,oBAAoB;EAClB,KAAK,oBAAoB;EAEzB,KAAK,iBAAiB,SAAS,KAAK,kBAAkB;EAEtD,MAAM,kBAAkB;CAC1B;CAEA,QAAQ,mBAAmB;EACzB,KAAK,YACD,cAAc,QAAQ,CAAC,EACvB,iBAAiB,sBAAsB;GACvC,IAAI,KAAK,eAAe,YAAY;IAClC,MAAM,gBACJ,KAAK,YAAY,cAAc,QAAQ,CAAC,EAAE;IAC5C,eAAe,OAAO,0BAAgC;IACtD,eAAe,OAAO,kBAAwB,KAAK,YAAY;IAC/D,KAAK,aAAa;GACpB;EACF,CAAC;EAEH,MAAM,QAAQ,iBAAiB;EAE/B,KAAK,YACD,cAAc,QAAQ,CAAC,EACvB,aAAa,cAAc,KAAK,YAAY,KAAK,WAAW;CAClE;;gBAEgBC;;AAClB;YAhDG,SAAS,CAAA,GAAA,QAAA,WAAA,YAAA,KAAA,CAAA;YAMT,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAmB,CAAC,CAAA,GAAA,QAAA,WAAA,mBAAA,KAAA,CAAA;sBAzD1DC,cAAc,UAAgB,CAAA,GAAA,OAAA;AAqG/B,IAAA,eAAe"}

package/es-custom/components/copy-button/copy-button.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 FocusMixin from "../../globals/mixins/focus.js";
 import "../popover/defs.js";

package/es-custom/components/copy-button/copy-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.js","names":["styles","customElement"],"sources":["../../../src/components/copy-button/copy-button.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\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 { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport Copy16 from '@carbon/icons/es/copy/16.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './copy-button.scss?lit';\nimport { POPOVER_ALIGNMENT } from '../popover/defs';\nimport '../copy/copy';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/**\n * Copy button.\n *\n * @element cds-custom-copy-button\n */\n@customElement(`${prefix}-copy-button`)\nclass CDSCopyButton extends FocusMixin(LitElement) {\n  /**\n   * Specify an optional className to be added to your Button\n   */\n  @property({ reflect: true, attribute: 'button-class-name' })\n  buttonClassName;\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Specify the string that is displayed when the button is clicked and the content is copi\n   */\n  @property()\n  feedback = 'Copied!';\n\n  /**\n   * How the tooltip is aligned to the trigger button.\n   */\n  @property({ reflect: true })\n  align = POPOVER_ALIGNMENT.BOTTOM;\n\n  /**\n   * Specify whether a auto align functionality should be applied\n   */\n  @property({ type: Boolean, reflect: true })\n  autoAlign = false;\n\n  /**\n   * The number in milliseconds to determine how long the tooltip should remain.\n   */\n  @property({ type: Number, attribute: 'feedback-timeout' })\n  feedbackTimeout = 2000;\n\n  render() {\n    const {\n      buttonClassName,\n      disabled,\n      feedback,\n      feedbackTimeout,\n      align,\n      autoAlign,\n    } = this;\n\n    let classes = `${prefix}--copy-btn`;\n\n    if (buttonClassName) {\n      classes += ` ${buttonClassName}`;\n    }\n\n    return html`\n      <cds-custom-copy\n        ?disabled=${disabled}\n        ?autoalign=${autoAlign}\n        feedback=${feedback}\n        feedback-timeout=${feedbackTimeout}\n        button-class-name=${classes}\n        exportparts=\"button\"\n        align=${align}>\n        ${iconLoader(Copy16, {\n          slot: 'icon',\n          class: `${prefix}--snippet__icon`,\n        })}\n        <slot slot=\"tooltip-content\"></slot>\n      </cds-custom-copy>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSCopyButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAA,gBAAA,MACM,sBAAsB,WAAW,WAAW,CAAC;;;kBAWtC;kBAMA;;mBAYC;yBAMM;;CAElB,SAAS;EACP,MAAM,EACJ,iBACA,UACA,UACA,iBACA,OACA,cACE;EAEJ,IAAI,UAAU;AAEd,MAAI,gBACF,YAAW,IAAI;AAGjB,SAAO,IAAI;;oBAEK,SAAS;qBACR,UAAU;mBACZ,SAAS;2BACD,gBAAgB;4BACf,QAAQ;;gBAEpB,MAAM;UACZ,WAAW,QAAQ;GACnB,MAAM;GACN,OAAO;GACR,CAAC,CAAC;;;;;;gBAMOA;;;YAnEf,SAAS;CAAE,SAAS;CAAM,WAAW;CAAqB,CAAC,CAAA,EAAA,cAAA,WAAA,mBAAA,KAAA,EAAA;YAM3D,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,UAAU,CAAA,EAAA,cAAA,WAAA,YAAA,KAAA,EAAA;YAMV,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,cAAA,WAAA,SAAA,KAAA,EAAA;YAM3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,aAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAoB,CAAC,CAAA,EAAA,cAAA,WAAA,mBAAA,KAAA,EAAA;4BAnC3DC,cAAc,kBAAwB,CAAA,EAAA,cAAA;AA2EvC,IAAA,sBAAe"}
+{"version":3,"file":"copy-button.js","names":["styles","customElement"],"sources":["../../../src/components/copy-button/copy-button.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\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 { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport Copy16 from '@carbon/icons/es/copy/16.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './copy-button.scss?lit';\nimport { POPOVER_ALIGNMENT } from '../popover/defs';\nimport '../copy/copy';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/**\n * Copy button.\n *\n * @element cds-custom-copy-button\n */\n@customElement(`${prefix}-copy-button`)\nclass CDSCopyButton extends FocusMixin(LitElement) {\n  /**\n   * Specify an optional className to be added to your Button\n   */\n  @property({ reflect: true, attribute: 'button-class-name' })\n  buttonClassName;\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Specify the string that is displayed when the button is clicked and the content is copi\n   */\n  @property()\n  feedback = 'Copied!';\n\n  /**\n   * How the tooltip is aligned to the trigger button.\n   */\n  @property({ reflect: true })\n  align = POPOVER_ALIGNMENT.BOTTOM;\n\n  /**\n   * Specify whether a auto align functionality should be applied\n   */\n  @property({ type: Boolean, reflect: true })\n  autoAlign = false;\n\n  /**\n   * The number in milliseconds to determine how long the tooltip should remain.\n   */\n  @property({ type: Number, attribute: 'feedback-timeout' })\n  feedbackTimeout = 2000;\n\n  render() {\n    const {\n      buttonClassName,\n      disabled,\n      feedback,\n      feedbackTimeout,\n      align,\n      autoAlign,\n    } = this;\n\n    let classes = `${prefix}--copy-btn`;\n\n    if (buttonClassName) {\n      classes += ` ${buttonClassName}`;\n    }\n\n    return html`\n      <cds-custom-copy\n        ?disabled=${disabled}\n        ?autoalign=${autoAlign}\n        feedback=${feedback}\n        feedback-timeout=${feedbackTimeout}\n        button-class-name=${classes}\n        exportparts=\"button\"\n        align=${align}>\n        ${iconLoader(Copy16, {\n          slot: 'icon',\n          class: `${prefix}--snippet__icon`,\n        })}\n        <slot slot=\"tooltip-content\"></slot>\n      </cds-custom-copy>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSCopyButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAA,gBAAA,MACM,sBAAsB,WAAW,UAAU,CAAC,CAAC;;;kBAWtC;kBAMA;;mBAYC;yBAMM;;CAElB,SAAS;EACP,MAAM,EACJ,iBACA,UACA,UACA,iBACA,OACA,cACE;EAEJ,IAAI,UAAU;EAEd,IAAI,iBACF,WAAW,IAAI;EAGjB,OAAO,IAAI;;oBAEK,SAAS;qBACR,UAAU;mBACZ,SAAS;2BACD,gBAAgB;4BACf,QAAQ;;gBAEpB,MAAM;UACZ,WAAW,QAAQ;GACnB,MAAM;GACN,OAAO;EACT,CAAC,EAAE;;;;CAIT;;gBAEgBA;;AAClB;YApEG,SAAS;CAAE,SAAS;CAAM,WAAW;AAAoB,CAAC,CAAA,GAAA,cAAA,WAAA,mBAAA,KAAA,CAAA;YAM1D,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;YAMT,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,cAAA,WAAA,SAAA,KAAA,CAAA;YAM1B,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,aAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAmB,CAAC,CAAA,GAAA,cAAA,WAAA,mBAAA,KAAA,CAAA;4BAnC1DC,cAAc,iBAAuB,CAAA,GAAA,aAAA;AA2EtC,IAAA,sBAAe"}