@carbon/web-components 2.52.0 → 2.53.0

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["CDSPopover","popoverStyles","styles","customElement"],"sources":["../../../src/components/tooltip/tooltip.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 { adoptStyles } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSPopover from '../popover/popover';\nimport '../popover/popover-content';\nimport styles from './tooltip.scss?lit';\nimport popoverStyles from '../popover/popover.scss?lit';\nimport CDSTooltipContent from './tooltip-content';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Trigger button of tooltip.\n *\n * @element cds-custom-tooltip\n */\n@customElement(`${prefix}-tooltip`)\nclass CDSTooltip extends HostListenerMixin(CDSPopover) {\n  /**\n   * Specify how the trigger should align with the tooltip\n   */\n  @property({ reflect: true, type: String })\n  align = 'top';\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   * `true` if this tooltip is in a data table row\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'data-table' })\n  dataTable = false;\n\n  /**\n   * Specify whether the tooltip should be closed when clicked\n   */\n  @property({ reflect: true, type: Boolean })\n  closeOnActivation = false;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, type: Boolean })\n  defaultOpen = false;\n\n  /**\n   * Specify the duration in milliseconds to delay before displaying the tooltip\n   */\n  @property({ attribute: 'enter-delay-ms', type: Number })\n  enterDelayMs = 100;\n\n  /**\n   * Specify the duration in milliseconds to delay before hiding the tooltip\n   */\n  @property({ attribute: 'leave-delay-ms', type: Number })\n  leaveDelayMs = 300;\n\n  /**\n   * Only open tooltip on keyboard interactions, this is used for interactive tags\n   * (ie. operational-tag, selectable-tag)\n   */\n  @property({ attribute: 'keyboard-only', type: Boolean })\n  keyboardOnly = false;\n\n  /**\n   * Specify the size of the tooltip\n   */\n  @property({ reflect: true })\n  size = false;\n\n  /**\n   * Specify the timeout reference for the tooltip\n   */\n  @property({ reflect: true })\n  timeoutId = 0;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, attribute: 'toolbar-action', type: Boolean })\n  toolbarAction = false;\n\n  /**\n   * Track if last interaction was a keyboard interaction\n   */\n  private lastInteractionWasKeyboard = false;\n\n  /**\n   * Handles opening of tooltip\n   */\n  private _showTooltip = async () => {\n    window.clearTimeout(this.timeoutId);\n    this.timeoutId = window.setTimeout(async () => {\n      this.open = true;\n      const { open, updateComplete } = this;\n      if (open) {\n        await updateComplete;\n        const { selectorTooltipContent } = this\n          .constructor as typeof CDSTooltip;\n        (this.querySelector(selectorTooltipContent) as HTMLElement)?.focus();\n      }\n    }, this.enterDelayMs);\n  };\n\n  /**\n   * Handles `mouseover` event on this element.\n   */\n  private _handleHover = (event) => {\n    if (this.keyboardOnly) {\n      if (event instanceof FocusEvent && this.lastInteractionWasKeyboard) {\n        this._showTooltip();\n      }\n    } else {\n      this._showTooltip();\n    }\n  };\n\n  /**\n   * Handles `mouseleave` event on this element.\n   */\n  private _handleHoverOut = async () => {\n    window.clearTimeout(this.timeoutId);\n    this.timeoutId = window.setTimeout(async () => {\n      const { open } = this;\n      if (open) {\n        this.open = false;\n      }\n    }, this.leaveDelayMs);\n  };\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 = async () => {\n    this.lastInteractionWasKeyboard = false;\n    if (this.closeOnActivation) {\n      this._handleHoverOut();\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 = async (event) => {\n    // needed for interactive tags for when the tag is focused from tabbing into it\n    // tooltip is expected to open only from keyboard interaction\n    if (event.key === 'Tab') {\n      this.lastInteractionWasKeyboard = true;\n    }\n    if (event.key === ' ' || event.key === 'Enter' || event.key === 'Escape') {\n      this.lastInteractionWasKeyboard = true;\n      if (this.closeOnActivation) {\n        this._handleHoverOut();\n      }\n    }\n  };\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const component = (target as HTMLSlotElement).assignedNodes().filter(\n      (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim() // eslint-disable-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    );\n    if (!component[0]) {\n      return;\n    }\n\n    (component[0] as HTMLElement).addEventListener('focus', this._handleHover);\n    (component[0] as HTMLElement).addEventListener(\n      'focusout',\n      this._handleHoverOut\n    );\n\n    if (!this.keyboardOnly) {\n      (component[0] as HTMLElement).addEventListener(\n        'mouseover',\n        this._handleHover\n      );\n      (component[0] as HTMLElement).addEventListener(\n        'mouseleave',\n        this._handleHoverOut\n      );\n    }\n    this.requestUpdate();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('highContrast')) {\n      this.setAttribute('highContrast', '');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    window.addEventListener('keydown', this._handleKeydown, true);\n    super.connectedCallback();\n\n    adoptStyles(this.renderRoot as ShadowRoot, [popoverStyles, styles]);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('keydown', this._handleKeydown, true);\n    super.disconnectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { selectorTooltipContent } = this.constructor as typeof CDSTooltip;\n    const toolTipContent = this.querySelector(selectorTooltipContent);\n\n    if (changedProperties.has('defaultOpen')) {\n      this.open = this.defaultOpen;\n    }\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        toolTipContent?.setAttribute('open', '');\n      } else {\n        toolTipContent?.removeAttribute('open');\n      }\n    }\n\n    ['align', 'caret', 'autoalign', 'dropShadow'].forEach((name) => {\n      if (changedProperties.has(name)) {\n        const { [name as keyof CDSTooltip]: value } = this;\n        (toolTipContent as CDSTooltipContent)[name] = value;\n      }\n    });\n\n    if (this.hasAttribute('highcontrast')) {\n      toolTipContent?.setAttribute('highcontrast', '');\n    }\n\n    this.shadowRoot\n      ?.querySelector(`.${prefix}--popover-container`)\n      ?.classList.add(`${prefix}--tooltip`);\n\n    super.updated(changedProperties);\n  }\n\n  /**\n   * A selector that will return the CDSTooltipContent.\n   */\n  static get selectorTooltipContent() {\n    return `${prefix}-tooltip-content`;\n  }\n}\n\nexport default CDSTooltip;\n"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","names":["CDSPopover","popoverStyles","styles","customElement"],"sources":["../../../src/components/tooltip/tooltip.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 { adoptStyles } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSPopover from '../popover/popover';\nimport '../popover/popover-content';\nimport styles from './tooltip.scss?lit';\nimport popoverStyles from '../popover/popover.scss?lit';\nimport CDSTooltipContent from './tooltip-content';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Trigger button of tooltip.\n *\n * @element cds-custom-tooltip\n */\n@customElement(`${prefix}-tooltip`)\nclass CDSTooltip extends HostListenerMixin(CDSPopover) {\n  /**\n   * Specify how the trigger should align with the tooltip\n   */\n  @property({ reflect: true, type: String })\n  align = 'top';\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   * `true` if this tooltip is in a data table row\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'data-table' })\n  dataTable = false;\n\n  /**\n   * Specify whether the tooltip should be closed when clicked\n   */\n  @property({ reflect: true, type: Boolean })\n  closeOnActivation = false;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, type: Boolean })\n  defaultOpen = false;\n\n  /**\n   * Specify the duration in milliseconds to delay before displaying the tooltip\n   */\n  @property({ attribute: 'enter-delay-ms', type: Number })\n  enterDelayMs = 100;\n\n  /**\n   * Specify the duration in milliseconds to delay before hiding the tooltip\n   */\n  @property({ attribute: 'leave-delay-ms', type: Number })\n  leaveDelayMs = 300;\n\n  /**\n   * Only open tooltip on keyboard interactions, this is used for interactive tags\n   * (ie. operational-tag, selectable-tag)\n   */\n  @property({ attribute: 'keyboard-only', type: Boolean })\n  keyboardOnly = false;\n\n  /**\n   * Specify the size of the tooltip\n   */\n  @property({ reflect: true })\n  size = false;\n\n  /**\n   * Specify the timeout reference for the tooltip\n   */\n  @property({ reflect: true })\n  timeoutId = 0;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, attribute: 'toolbar-action', type: Boolean })\n  toolbarAction = false;\n\n  /**\n   * Track if last interaction was a keyboard interaction\n   */\n  private lastInteractionWasKeyboard = false;\n\n  /**\n   * Handles opening of tooltip\n   */\n  private _showTooltip = async () => {\n    window.clearTimeout(this.timeoutId);\n    this.timeoutId = window.setTimeout(async () => {\n      this.open = true;\n      const { open, updateComplete } = this;\n      if (open) {\n        await updateComplete;\n        const { selectorTooltipContent } = this\n          .constructor as typeof CDSTooltip;\n        (this.querySelector(selectorTooltipContent) as HTMLElement)?.focus();\n      }\n    }, this.enterDelayMs);\n  };\n\n  /**\n   * Handles `mouseover` event on this element.\n   */\n  private _handleHover = (event) => {\n    if (this.keyboardOnly) {\n      if (event instanceof FocusEvent && this.lastInteractionWasKeyboard) {\n        this._showTooltip();\n      }\n    } else {\n      this._showTooltip();\n    }\n  };\n\n  /**\n   * Handles `mouseleave` event on this element.\n   */\n  private _handleHoverOut = async () => {\n    window.clearTimeout(this.timeoutId);\n    this.timeoutId = window.setTimeout(async () => {\n      const { open } = this;\n      if (open) {\n        this.open = false;\n      }\n    }, this.leaveDelayMs);\n  };\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 = async () => {\n    this.lastInteractionWasKeyboard = false;\n    if (this.closeOnActivation) {\n      this._handleHoverOut();\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 = async (event) => {\n    // needed for interactive tags for when the tag is focused from tabbing into it\n    // tooltip is expected to open only from keyboard interaction\n    if (event.key === 'Tab') {\n      this.lastInteractionWasKeyboard = true;\n    }\n    if (event.key === ' ' || event.key === 'Enter' || event.key === 'Escape') {\n      this.lastInteractionWasKeyboard = true;\n      if (this.closeOnActivation) {\n        this._handleHoverOut();\n      }\n    }\n  };\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const component = (target as HTMLSlotElement).assignedNodes().filter(\n      (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim() // eslint-disable-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    );\n    if (!component[0]) {\n      return;\n    }\n\n    (component[0] as HTMLElement).addEventListener('focus', this._handleHover);\n    (component[0] as HTMLElement).addEventListener(\n      'focusout',\n      this._handleHoverOut\n    );\n\n    if (!this.keyboardOnly) {\n      (component[0] as HTMLElement).addEventListener(\n        'mouseover',\n        this._handleHover\n      );\n      (component[0] as HTMLElement).addEventListener(\n        'mouseleave',\n        this._handleHoverOut\n      );\n    }\n    this.requestUpdate();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('highContrast')) {\n      this.setAttribute('highContrast', '');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    window.addEventListener('keydown', this._handleKeydown, true);\n    super.connectedCallback();\n\n    adoptStyles(this.renderRoot as ShadowRoot, [popoverStyles, styles]);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('keydown', this._handleKeydown, true);\n    super.disconnectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { selectorTooltipContent } = this.constructor as typeof CDSTooltip;\n    const toolTipContent = this.querySelector(selectorTooltipContent);\n\n    if (changedProperties.has('defaultOpen')) {\n      this.open = this.defaultOpen;\n    }\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        toolTipContent?.setAttribute('open', '');\n      } else {\n        toolTipContent?.removeAttribute('open');\n      }\n    }\n\n    ['align', 'caret', 'autoalign', 'dropShadow'].forEach((name) => {\n      if (changedProperties.has(name)) {\n        const { [name as keyof CDSTooltip]: value } = this;\n        (toolTipContent as CDSTooltipContent)[name] = value;\n      }\n    });\n\n    if (this.hasAttribute('highcontrast')) {\n      toolTipContent?.setAttribute('highcontrast', '');\n    }\n\n    this.shadowRoot\n      ?.querySelector(`.${prefix}--popover-container`)\n      ?.classList.add(`${prefix}--tooltip`);\n\n    super.updated(changedProperties);\n  }\n\n  /**\n   * A selector that will return the CDSTooltipContent.\n   */\n  static get selectorTooltipContent() {\n    return `${prefix}-tooltip-content`;\n  }\n}\n\nexport default CDSTooltip;\n"],"mappings":"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"}

package/es-custom/components/tooltip/tooltip.scss.js

@@ -6,10 +6,9 @@
  */
 
 import { css } from "lit";
-
 //#region src/components/tooltip/tooltip.scss?lit
 var tooltip_default = css([".cds-custom--layer-one,:root{--cds-layer:var(--cds-layer-01,#f4f4f4);--cds-layer-active:var(--cds-layer-active-01,#c6c6c6);--cds-layer-background:var(--cds-layer-background-01,#fff);--cds-layer-hover:var(--cds-layer-hover-01,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01,#a8a8a8);--cds-field:var(--cds-field-01,#f4f4f4);--cds-field-hover:var(--cds-field-hover-01,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01,#c6c6c6);--cds-border-strong:var(--cds-border-strong-01,#8d8d8d);--cds-border-tile:var(--cds-border-tile-01,#c6c6c6)}.cds-custom--layer-two{--cds-layer:var(--cds-layer-02,#fff);--cds-layer-active:var(--cds-layer-active-02,#c6c6c6);--cds-layer-background:var(--cds-layer-background-02,#f4f4f4);--cds-layer-hover:var(--cds-layer-hover-02,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02,#a8a8a8);--cds-field:var(--cds-field-02,#fff);--cds-field-hover:var(--cds-field-hover-02,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01,#c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02,#c6c6c6);--cds-border-strong:var(--cds-border-strong-02,#8d8d8d);--cds-border-tile:var(--cds-border-tile-02,#a8a8a8)}.cds-custom--layer-three{--cds-layer:var(--cds-layer-03,#f4f4f4);--cds-layer-active:var(--cds-layer-active-03,#c6c6c6);--cds-layer-background:var(--cds-layer-background-03,#fff);--cds-layer-hover:var(--cds-layer-hover-03,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03,#a8a8a8);--cds-field:var(--cds-field-03,#f4f4f4);--cds-field-hover:var(--cds-field-hover-03,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03,#c6c6c6);--cds-border-strong:var(--cds-border-strong-03,#8d8d8d);--cds-border-tile:var(--cds-border-tile-03,#c6c6c6)}.cds-custom--layer-one.cds-custom--layer__with-background,.cds-custom--layer-three.cds-custom--layer__with-background,.cds-custom--layer-two.cds-custom--layer__with-background{background-color:var(--cds-layer-background)}@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds-custom--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds-custom--assistive-text,.cds-custom--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds-custom--popover-container{display:inline-block}.cds-custom--popover-container:not(.cds-custom--popover--auto-align){position:relative}.cds-custom--popover--high-contrast .cds-custom--popover{--cds-popover-background-color:var(--cds-background-inverse,#393939);--cds-popover-text-color:var(--cds-text-inverse,#fff)}.cds-custom--popover--drop-shadow .cds-custom--popover{filter:var(--cds-popover-drop-shadow,drop-shadow(0 .125rem .125rem rgba(0,0,0,.2)))}.cds-custom--popover--border>.cds-custom--popover>.cds-custom--popover-content{outline:1px solid var(--cds-popover-border-color,var(--cds-border-subtle));outline-offset:-1px}.cds-custom--popover--caret{--cds-popover-offset:0.625rem}.cds-custom--popover{inset:0;pointer-events:none;position:absolute;z-index:6000}.cds-custom--popover-content{--cds-layout-size-height-sm:2rem}.cds-custom--layout--size-sm :where(.cds-custom--popover-content),.cds-custom--popover-content.cds-custom--layout--size-sm{--cds-layout-size-height:var(--cds-layout-size-height-sm)}.cds-custom--popover-content{--cds-layout-size-height-md:2.5rem}.cds-custom--layout--size-md :where(.cds-custom--popover-content),.cds-custom--popover-content.cds-custom--layout--size-md{--cds-layout-size-height:var(--cds-layout-size-height-md)}.cds-custom--popover-content{--cds-layout-size-height-lg:3rem}.cds-custom--layout--size-lg :where(.cds-custom--popover-content),.cds-custom--popover-content.cds-custom--layout--size-lg{--cds-layout-size-height:var(--cds-layout-size-height-lg)}.cds-custom--popover-content{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds-custom--popover-content *,.cds-custom--popover-content :after,.cds-custom--popover-content :before{box-sizing:inherit}.cds-custom--popover-content{background-color:var(--cds-popover-background-color,var(--cds-layer));border-radius:var(--cds-popover-border-radius,2px);color:var(--cds-popover-text-color,var(--cds-text-primary,#161616));display:none;inline-size:-moz-max-content;inline-size:max-content;max-inline-size:23rem;pointer-events:auto;position:absolute;z-index:6000}.cds-custom--popover--open>.cds-custom--popover>.cds-custom--popover-content{display:block}.cds-custom--popover--background-token__background>.cds-custom--popover>.cds-custom--popover-content{background-color:var(--cds-background,#fff)}.cds-custom--popover-content:before{content:\"\";display:none;position:absolute}.cds-custom--popover--open>.cds-custom--popover>.cds-custom--popover-content:before{display:block}.cds-custom--popover--auto-align.cds-custom--popover-caret,.cds-custom--popover-caret{display:none;position:absolute;will-change:transform;z-index:6000}.cds-custom--popover--auto-align.cds-custom--popover-caret:after,.cds-custom--popover-caret:after{background-color:var(--cds-popover-background-color,var(--cds-layer));content:\"\";display:block;position:absolute}.cds-custom--popover--auto-align.cds-custom--popover-caret:before,.cds-custom--popover-caret:before{background-color:var(--cds-popover-border-color,var(--cds-border-subtle));content:\"\";display:none;position:absolute}.cds-custom--popover--background-token__background>.cds-custom--popover>.cds-custom--popover-caret:after{background-color:var(--cds-background,#fff)}.cds-custom--popover--auto-align.cds-custom--popover--caret.cds-custom--popover--open>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--border .cds-custom--popover--auto-align.cds-custom--popover-caret:before,.cds-custom--popover--border .cds-custom--popover-caret:before,.cds-custom--popover--caret.cds-custom--popover--open>.cds-custom--popover>.cds-custom--popover-caret{display:block}.cds-custom--popover--tab-tip>.cds-custom--popover>.cds-custom--popover-caret{display:none}.cds-custom--popover--bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-block-end:0;inset-inline-start:50%;transform:translate(-50%,calc(100% + var(--cds-popover-offset, 0rem)))}.cds-custom--popover--bottom-end:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--bottom-start:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--bottom:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content{inset-block-end:-.25rem}.cds-custom--popover--top-end:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--top-start:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--top:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content{inset-block-start:-.25rem}.cds-custom--popover--bottom-start:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--top-start:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content{inset-inline-start:calc(50% - var(--cds-popover-offset, 0rem) - 1rem)}.cds-custom--popover--bottom-end:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--top-end:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content{inset-inline-end:calc(50% - var(--cds-popover-offset, 0rem) - 1rem)}.cds-custom--popover--right-end:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--right-start:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--right:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content{inset-inline-start:calc(100% + .25rem)}.cds-custom--popover--left-end:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--left-start:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--left:not(.cds-custom--popover--caret):not(.cds-custom--popover--auto-align):not(.cds-custom--popover--tab-tip)>.cds-custom--popover>.cds-custom--popover-content{inset-inline-end:calc(100% + .25rem)}[dir=rtl] .cds-custom--popover--bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{transform:translate(50%,calc(100% + var(--cds-popover-offset, 0rem)))}.cds-custom--popover--bottom-left:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--bottom-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-block-end:0;inset-inline-start:calc(50% - var(--cds-popover-offset, 0rem));transform:translate(calc(var(--cds-popover-offset, 0rem)*-1),calc(100% + var(--cds-popover-offset, 0rem)))}[dir=rtl] .cds-custom--popover--bottom-left:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--bottom-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-inline-end:calc(50% - var(--cds-popover-offset, 0rem));inset-inline-start:auto}.cds-custom--popover--bottom-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--bottom-right:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-block-end:0;inset-inline-end:calc(50% - var(--cds-popover-offset, 0rem));transform:translate(var(--cds-popover-offset,0),calc(100% + var(--cds-popover-offset, 0rem)))}[dir=rtl] .cds-custom--popover--bottom-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--bottom-right:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-inline-start:calc(50% - var(--cds-popover-offset, 0rem))}.cds-custom--popover--bottom-end>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--bottom-left>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--bottom-right>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--bottom-start>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--bottom>.cds-custom--popover>.cds-custom--popover-content:before{block-size:var(--cds-popover-offset,0);inset-block-start:0;inset-inline:0;transform:translateY(-100%)}.cds-custom--popover--bottom-end>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--bottom-left>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--bottom-right>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--bottom-start>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--bottom>.cds-custom--popover>.cds-custom--popover-caret{block-size:var(--cds-popover-caret-height,.375rem);inline-size:var(--cds-popover-caret-width,.75rem);inset-block-end:0;inset-inline-start:50%;transform:translate(-50%,var(--cds-popover-offset,0))}.cds-custom--popover--border.cds-custom--popover--bottom-end>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--bottom-left>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--bottom-right>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--bottom-start>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--bottom>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--bottom-end>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--bottom-left>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--bottom-right>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--bottom-start>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--bottom>.cds-custom--popover>.cds-custom--popover-caret:after{block-size:var(--cds-popover-caret-height,.375rem);clip-path:polygon(0 100%,50% 0,100% 100%);inline-size:var(--cds-popover-caret-width,.75rem)}.cds-custom--popover--border.cds-custom--popover--bottom-end>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--bottom-left>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--bottom-right>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--bottom-start>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--bottom>.cds-custom--popover>.cds-custom--popover-caret:after{inline-size:calc(var(--cds-popover-caret-width, .75rem) - 1px);inset-block-start:1px;inset-inline-start:.5px}[dir=rtl] .cds-custom--popover--bottom-end>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--bottom-left>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--bottom-right>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--bottom-start>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--bottom>.cds-custom--popover>.cds-custom--popover-caret{transform:translate(50%,var(--cds-popover-offset,0))}.cds-custom--popover--bottom-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--bottom-left.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--bottom-right.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--bottom-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret{block-size:var(--cds-popover-caret-height,.375rem);inline-size:var(--cds-popover-caret-width,.75rem)}.cds-custom--popover--border.cds-custom--popover--bottom-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--bottom-left.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--bottom-right.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--bottom-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--bottom-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--bottom-left.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--bottom-right.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--bottom-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after{block-size:var(--cds-popover-caret-height,.375rem);clip-path:polygon(0 100%,50% 0,100% 100%);inline-size:var(--cds-popover-caret-width,.75rem)}.cds-custom--popover--border.cds-custom--popover--bottom-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--bottom-left.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--bottom-right.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--bottom-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after{inline-size:calc(var(--cds-popover-caret-width, .75rem) - 1px);inset-block-start:1px;inset-inline-start:.5px}.cds-custom--popover--top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-block-start:0;inset-inline-start:50%;transform:translate(-50%,calc(-100% - var(--cds-popover-offset, 0rem)))}[dir=rtl] .cds-custom--popover--top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{transform:translate(50%,calc(-100% - var(--cds-popover-offset, 0rem)))}.cds-custom--popover--top-left:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--top-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-block-start:0;inset-inline-start:calc(50% - var(--cds-popover-offset, 0rem));transform:translate(calc(var(--cds-popover-offset, 0rem)*-1),calc(-100% - var(--cds-popover-offset, 0rem)))}[dir=rtl] .cds-custom--popover--top-left:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--top-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-inline-end:calc(50% - var(--cds-popover-offset, 0rem));inset-inline-start:auto}.cds-custom--popover--top-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--top-right:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-block-start:0;inset-inline-end:calc(50% - var(--cds-popover-offset, 0rem));transform:translate(var(--cds-popover-offset,0),calc(-100% - var(--cds-popover-offset, 0rem)))}[dir=rtl] .cds-custom--popover--top-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--top-right:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-inline-start:calc(50% - var(--cds-popover-offset, 0rem))}.cds-custom--popover--top-end>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--top-left>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--top-right>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--top-start>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--top>.cds-custom--popover>.cds-custom--popover-content:before{block-size:var(--cds-popover-offset,0);inset-block-end:0;inset-inline:0;transform:translateY(100%)}.cds-custom--popover--top-end>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--top-left>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--top-right>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--top-start>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--top>.cds-custom--popover>.cds-custom--popover-caret{block-size:var(--cds-popover-caret-height,.375rem);inline-size:var(--cds-popover-caret-width,.75rem);inset-block-start:0;inset-inline-start:50%;transform:translate(-50%,calc(var(--cds-popover-offset, 0rem)*-1))}.cds-custom--popover--border.cds-custom--popover--top-end>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--top-left>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--top-right>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--top-start>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--top>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--top-end>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--top-left>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--top-right>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--top-start>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--top>.cds-custom--popover>.cds-custom--popover-caret:after{block-size:var(--cds-popover-caret-height,.375rem);clip-path:polygon(0 0,50% 100%,100% 0);inline-size:var(--cds-popover-caret-width,.75rem)}.cds-custom--popover--border.cds-custom--popover--top-end>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--top-left>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--top-right>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--top-start>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--top>.cds-custom--popover>.cds-custom--popover-caret:after{inline-size:calc(var(--cds-popover-caret-width, .75rem) - 1px);inset-block-start:-1px;inset-inline-start:.5px}[dir=rtl] .cds-custom--popover--top-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--top-left:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--top-right:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--top-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret{transform:translate(50%,calc(var(--cds-popover-offset, 0rem)*-1))}.cds-custom--popover--top-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--top-left.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--top-right.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--top-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret{block-size:var(--cds-popover-caret-height,.375rem);inline-size:var(--cds-popover-caret-width,.75rem)}.cds-custom--popover--border.cds-custom--popover--top-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--top-left.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--top-right.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--top-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--top-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--top-left.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--top-right.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--top-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after{block-size:var(--cds-popover-caret-height,.375rem);clip-path:polygon(0 0,50% 100%,100% 0);inline-size:var(--cds-popover-caret-width,.75rem)}.cds-custom--popover--border.cds-custom--popover--top-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--top-left.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--top-right.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--top-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after{inline-size:calc(var(--cds-popover-caret-width, .75rem) - 1px);inset-block-start:-1px;inset-inline-start:.5px}.cds-custom--popover--right:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-block-start:50%;inset-inline-start:100%;transform:translate(var(--cds-popover-offset,0),-50%)}.cds-custom--popover--right-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--right-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-block-start:50%;inset-inline-start:100%;transform:translate(var(--cds-popover-offset,0),calc(var(--cds-popover-offset, 0rem)*.5*-1 - 16px))}.cds-custom--popover--right-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--right-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-block-end:50%;inset-inline-start:100%;transform:translate(var(--cds-popover-offset,0),calc(var(--cds-popover-offset, 0rem)*.5 + 16px))}[dir=rtl] .cds-custom--popover--right-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--right-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--right-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--right-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--right:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-inline-end:100%;inset-inline-start:auto}.cds-custom--popover--right-bottom>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--right-end>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--right-start>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--right-top>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--right>.cds-custom--popover>.cds-custom--popover-content:before{inline-size:var(--cds-popover-offset,0);inset-block:0;inset-inline-start:0;transform:translateX(-100%)}.cds-custom--popover--right-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--right-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--right-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--right-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--right:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret{block-size:var(--cds-popover-caret-width,.75rem);inline-size:var(--cds-popover-caret-height,.375rem);inset-block-start:50%;inset-inline-start:100%;transform:translate(calc(var(--cds-popover-offset, 0rem) - 100%),-50%)}.cds-custom--popover--right-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--right-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--right-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--right-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--right:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after{block-size:var(--cds-popover-caret-width,.75rem);clip-path:polygon(0 50%,100% 0,100% 100%);inline-size:var(--cds-popover-caret-height,.375rem)}[dir=rtl] .cds-custom--popover--right-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--right-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--right-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--right-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--right:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret{inset-inline-end:100%;inset-inline-start:auto}.cds-custom--popover--border.cds-custom--popover--right-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--right-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--right-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--right-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--right:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:before{block-size:var(--cds-popover-caret-width,.75rem);clip-path:polygon(0 50%,100% 0,100% 100%);inline-size:var(--cds-popover-caret-height,.375rem)}.cds-custom--popover--border.cds-custom--popover--right-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--right-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--right-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--right-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--right:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after{inset-inline-start:1px}[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after{inset-inline-start:-1px}.cds-custom--popover--right-bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--right-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--right-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--right-top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--right.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret{block-size:var(--cds-popover-caret-width,.75rem);inline-size:var(--cds-popover-caret-height,.375rem)}.cds-custom--popover--border.cds-custom--popover--right-bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--right-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--right-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--right-top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--right.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--right-bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--right-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--right-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--right-top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--right.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after{block-size:var(--cds-popover-caret-width,.75rem);clip-path:polygon(0 50%,100% 0,100% 100%);inline-size:var(--cds-popover-caret-height,.375rem)}.cds-custom--popover--border.cds-custom--popover--right-bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--right-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--right-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--right-top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--right.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after{inset-inline-start:1px}[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right-bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right-top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before{margin-inline-start:1px}[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right-bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right-top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--right.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after{inset-inline-start:0}.cds-custom--popover--left:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-block-start:50%;inset-inline-end:100%;transform:translate(calc(var(--cds-popover-offset, 0rem)*-1 + .1px),-50%)}.cds-custom--popover--left-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--left-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-block-start:50%;inset-inline-end:100%;transform:translate(calc(var(--cds-popover-offset, 0rem)*-1),calc(var(--cds-popover-offset, 0rem)*-.5 - 16px))}.cds-custom--popover--left-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--left-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-block-end:50%;inset-inline-end:100%;transform:translate(calc(var(--cds-popover-offset, 0rem)*-1),calc(var(--cds-popover-offset, 0rem)*.5 + 16px))}[dir=rtl] .cds-custom--popover--left-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--left-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--left-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--left-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--left:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-inline-end:auto;inset-inline-start:100%}.cds-custom--popover--left-bottom>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--left-end>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--left-start>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--left-top>.cds-custom--popover>.cds-custom--popover-content:before,.cds-custom--popover--left>.cds-custom--popover>.cds-custom--popover-content:before{inline-size:var(--cds-popover-offset,0);inset-block:0;inset-inline-end:0;transform:translateX(100%)}.cds-custom--popover--left-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--left-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--left-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--left-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,.cds-custom--popover--left:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret{block-size:var(--cds-popover-caret-width,.75rem);inline-size:var(--cds-popover-caret-height,.375rem);inset-block-start:50%;inset-inline-end:100%;transform:translate(calc(var(--cds-popover-offset, 0rem)*-1 + 100%),-50%)}.cds-custom--popover--left-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--left-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--left-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--left-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--left:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after{block-size:var(--cds-popover-caret-width,.75rem);clip-path:polygon(0 0,100% 50%,0 100%);inline-size:var(--cds-popover-caret-height,.375rem)}[dir=rtl] .cds-custom--popover--left-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--left-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--left-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--left-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret,[dir=rtl] .cds-custom--popover--left:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret{inset-inline-end:auto;inset-inline-start:100%}.cds-custom--popover--border.cds-custom--popover--left-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--left-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--left-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--left-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--left:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:before{block-size:var(--cds-popover-caret-width,.75rem);clip-path:polygon(0 0,100% 50%,0 100%);inline-size:var(--cds-popover-caret-height,.375rem)}.cds-custom--popover--border.cds-custom--popover--left-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--left-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--left-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--left-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--left:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after{inset-inline-start:-1px}[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left-bottom:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left-top:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-caret:after{inset-inline-start:1px}.cds-custom--popover--left-bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--left-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--left-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--left-top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret,.cds-custom--popover--left.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret{block-size:var(--cds-popover-caret-width,.75rem);inline-size:var(--cds-popover-caret-height,.375rem)}.cds-custom--popover--border.cds-custom--popover--left-bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--left-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--left-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--left-top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--border.cds-custom--popover--left.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,.cds-custom--popover--left-bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--left-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--left-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--left-top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--left.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after{block-size:var(--cds-popover-caret-width,.75rem);clip-path:polygon(0 0,100% 50%,0 100%);inline-size:var(--cds-popover-caret-height,.375rem)}.cds-custom--popover--border.cds-custom--popover--left-bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--left-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--left-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--left-top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,.cds-custom--popover--border.cds-custom--popover--left.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after{inset-inline-start:-1px}[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left-bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left-top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:before{margin-inline-start:-1px}[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left-bottom.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left-end.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left-start.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left-top.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after,[dir=rtl] .cds-custom--popover--border.cds-custom--popover--left.cds-custom--popover--auto-align>.cds-custom--popover>.cds-custom--popover-content>.cds-custom--popover-caret:after{inset-inline-start:0}.cds-custom--popover--tab-tip>.cds-custom--popover>.cds-custom--popover-content{border-radius:0}.cds-custom--popover--tab-tip.cds-custom--popover--bottom-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--tab-tip.cds-custom--popover--top-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--tab-tip.cds-custom--popover--bottom-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--tab-tip.cds-custom--popover--top-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-inline-start:0}.cds-custom--popover--tab-tip.cds-custom--popover--bottom-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,.cds-custom--popover--tab-tip.cds-custom--popover--top-end:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--tab-tip.cds-custom--popover--bottom-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content,[dir=rtl] .cds-custom--popover--tab-tip.cds-custom--popover--top-start:not(.cds-custom--popover--auto-align)>.cds-custom--popover>.cds-custom--popover-content{inset-inline-end:0;inset-inline-start:auto}.cds-custom--popover--tab-tip .cds-custom--popover{will-change:filter}.cds-custom--popover--tab-tip__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;cursor:pointer;display:inline-block;font-family:inherit;font-size:100%;inline-size:100%;margin:0;padding:0;text-align:start;vertical-align:baseline}.cds-custom--popover--tab-tip__button *,.cds-custom--popover--tab-tip__button :after,.cds-custom--popover--tab-tip__button :before{box-sizing:inherit}.cds-custom--popover--tab-tip__button::-moz-focus-inner{border:0}.cds-custom--popover--tab-tip__button{align-items:center;block-size:2rem;display:inline-flex;inline-size:2rem;justify-content:center;position:relative}.cds-custom--popover--tab-tip__button:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--popover--tab-tip__button:focus{outline-style:dotted}}.cds-custom--popover--tab-tip__button:hover{background-color:var(--cds-layer-hover)}.cds-custom--popover--tab-tip.cds-custom--popover--open .cds-custom--popover--tab-tip__button{background:var(--cds-layer);box-shadow:0 2px 2px rgba(0,0,0,.2)}.cds-custom--popover--tab-tip.cds-custom--popover--open .cds-custom--popover--tab-tip__button:not(:focus):after{background:var(--cds-layer);block-size:2px;content:\"\";inline-size:100%;inset-block-end:0;position:absolute;z-index:6001}.cds-custom--popover--tab-tip__button svg{fill:var(--cds-icon-primary,#161616)}.cds-custom--tooltip{--cds-popover-offset:12px}.cds-custom--tooltip-content,:host(cds-custom-tooltip-content) ::slotted(.cds-custom-tooltip-content){font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);max-inline-size:18rem;overflow-wrap:break-word;padding:var(--cds-tooltip-padding-block,1rem) var(--cds-tooltip-padding-inline,1rem)}.cds-custom--icon-tooltip{--cds-tooltip-padding-block:0.125rem;--cds-popover-caret-width:0.5rem;--cds-popover-caret-height:0.25rem;--cds-popover-offset:0.5rem}.cds-custom--icon-tooltip .cds-custom--tooltip-content,:host(cds-custom-tooltip-content) .cds-custom--icon-tooltip ::slotted(.cds-custom-tooltip-content){font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.cds-custom--definition-term{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;cursor:pointer;display:inline-block;font-family:inherit;font-size:100%;inline-size:100%;margin:0;padding:0;text-align:start;vertical-align:baseline}.cds-custom--definition-term *,.cds-custom--definition-term :after,.cds-custom--definition-term :before{box-sizing:inherit}.cds-custom--definition-term::-moz-focus-inner{border:0}.cds-custom--definition-term{border-block-end:1px dotted var(--cds-border-strong);border-radius:0;color:var(--cds-text-primary,#161616)}.cds-custom--definition-term:focus{outline:1px solid var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds-custom--definition-term:focus{outline-style:dotted}}.cds-custom--definition-term:focus,.cds-custom--definition-term:hover{border-block-end-color:var(--cds-border-interactive,#0f62fe)}.cds-custom--definition-tooltip,:host(cds-custom-definition-tooltip) cds-custom-popover-content::part(content){font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);max-inline-size:11rem;padding:.5rem 1rem;text-wrap:auto;word-break:break-word}:host(cds-custom-tooltip[data-table]){display:contents}:host(cds-custom-tooltip[data-table]):hover ::slotted(button){background-color:var(--cds-layer-selected-hover)!important}:host(cds-custom-tooltip[data-table][size=sm]) ::slotted(button),:host(cds-custom-tooltip[data-table][size=xs]) ::slotted(button){block-size:calc(100% + 1px)!important}:host(cds-custom-tooltip[toolbar-action]) ::slotted(button){outline:none!important}:host(cds-custom-tooltip-content){word-break:break-word}"]);
-
 //#endregion
 export { tooltip_default as default };
+
 //# sourceMappingURL=tooltip.scss.js.map

package/es-custom/components/tree-view/defs.js

@@ -23,7 +23,7 @@ let TREE_SIZE = /* @__PURE__ */ function(TREE_SIZE) {
 	TREE_SIZE["EXTRA_SMALL"] = "xs";
 	return TREE_SIZE;
 }({});
-
 //#endregion
 export { TREE_SIZE };
+
 //# sourceMappingURL=defs.js.map

package/es-custom/components/tree-view/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tree-view/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 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\nexport enum TREE_SIZE {\n  /**\n   * Small\n   */\n  SMALL = 'sm',\n\n  /**\n   * Extra small size.\n   */\n  EXTRA_SMALL = 'xs',\n}\n"],"mappings":";;;;;;;;;;;;;;AAOA,IAAY,gDAAL;;;;AAIL;;;;AAKA"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tree-view/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 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\nexport enum TREE_SIZE {\n  /**\n   * Small\n   */\n  SMALL = 'sm',\n\n  /**\n   * Extra small size.\n   */\n  EXTRA_SMALL = 'xs',\n}\n"],"mappings":";;;;;;;;;;;;;;AAOA,IAAY,YAAL,yBAAA,WAAA;;;;AAIL,WAAA,WAAA;;;;AAKA,WAAA,iBAAA;;KACD"}

package/es-custom/components/tree-view/tree-node.js

@@ -5,16 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import tree_view_default from "./tree-view.scss.js";
 import { LitElement, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import CaretDown16 from "@carbon/icons/es/caret--down/16.js";
-
 //#region src/components/tree-view/tree-node.ts
 /**
 * Copyright IBM Corp. 2025, 2025
@@ -44,7 +43,7 @@ let CDSTreeNode = class CDSTreeNode extends LitElement {
 				if (hasIcon) return depth + 2 + depth * .5;
 				return depth + 2.5;
 			};
-			const label = this.shadowRoot.querySelector(`.${prefix}--tree-node__label`);
+			const label = this.shadowRoot.querySelector(`.cds-custom--tree-node__label`);
 			if (label) {
 				label.style.marginInlineStart = `-${calcOffset()}rem`;
 				label.style.paddingInlineStart = `${calcOffset()}rem`;
@@ -70,7 +69,7 @@ let CDSTreeNode = class CDSTreeNode extends LitElement {
 	*/
 	_handleSlotChange({ target }) {
 		const { _depth: depth, disabled } = this;
-		const items = target.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === `${prefix}-tree-node`);
+		const items = target.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === `cds-custom-tree-node`);
 		items.forEach((item) => {
 			item._depth = depth + 1;
 			item.disabled = disabled;
@@ -89,7 +88,7 @@ let CDSTreeNode = class CDSTreeNode extends LitElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this._hasChildren = Array.from(this.children).some((node) => node.tagName.toLowerCase() === `${prefix}-tree-node`);
+		this._hasChildren = Array.from(this.children).some((node) => node.tagName.toLowerCase() === `cds-custom-tree-node`);
 		this._hasIcon = Array.from(this.children).some((node) => node.getAttribute("slot") === "icon");
 		if (!this.hasAttribute("role") && !this.href) this.setAttribute("role", "treeitem");
 		if (this._hasChildren && !this.href) this.setAttribute("aria-expanded", String(this.isExpanded));
@@ -126,20 +125,20 @@ let CDSTreeNode = class CDSTreeNode extends LitElement {
 	}
 	render() {
 		const { disabled, isExpanded, href, id, label, onClick, _hasChildren: hasChildren, _handleIconSlotChange: handleIconSlotChange, _handleSlotChange: handleSlotChange, _handleToggleClick: handleToggleClick } = this;
-		let toggleClasses = `${prefix}--tree-parent-node__toggle-icon`;
-		if (isExpanded) toggleClasses += `${prefix}--tree-parent-node__toggle-icon--expanded`;
+		let toggleClasses = `cds-custom--tree-parent-node__toggle-icon`;
+		if (isExpanded) toggleClasses += `cds-custom--tree-parent-node__toggle-icon--expanded`;
 		const linkClasses = classMap({
-			[`${prefix}--tree-node`]: true,
-			[`${prefix}--tree-node--active`]: this.active,
-			[`${prefix}--tree-node--disabled`]: disabled,
-			[`${prefix}--tree-node--selected`]: this.selected,
-			[`${prefix}--tree-node--with-icon`]: this._hasIcon,
-			[`${prefix}--tree-leaf-node`]: !this._hasChildren,
-			[`${prefix}--tree-parent-node`]: this._hasChildren
+			[`cds-custom--tree-node`]: true,
+			[`cds-custom--tree-node--active`]: this.active,
+			[`cds-custom--tree-node--disabled`]: disabled,
+			[`cds-custom--tree-node--selected`]: this.selected,
+			[`cds-custom--tree-node--with-icon`]: this._hasIcon,
+			[`cds-custom--tree-leaf-node`]: !this._hasChildren,
+			[`cds-custom--tree-parent-node`]: this._hasChildren
 		});
 		const subTreeClasses = classMap({
-			[`${prefix}--tree-node__children`]: true,
-			[`${prefix}--tree-node__hidden`]: !isExpanded
+			[`cds-custom--tree-node__children`]: true,
+			[`cds-custom--tree-node__hidden`]: !isExpanded
 		});
 		return html`
       ${!hasChildren ? html`
@@ -151,13 +150,13 @@ let CDSTreeNode = class CDSTreeNode extends LitElement {
                   aria-current=${!this.href ? this.active || void 0 : this.active ? "page" : void 0}
                   tabindex=${disabled ? -1 : void 0}
                   @click=${onClick}>
-                  <div id="label" class="${prefix}--tree-node__label">
+                  <div id="label" class="${"cds-custom"}--tree-node__label">
                     <slot
                       name="icon"
                       @slotchange=${handleIconSlotChange}></slot>
                     ${label}
                   </div>
-                </a>` : html` <div id="label" class="${prefix}--tree-node__label">
+                </a>` : html` <div id="label" class="${"cds-custom"}--tree-node__label">
                   <slot name="icon" @slotchange=${handleIconSlotChange}></slot>
                   ${label}
                 </div>`}
@@ -170,14 +169,14 @@ let CDSTreeNode = class CDSTreeNode extends LitElement {
                     href=${!disabled ? href : void 0}
                     tabindex=${disabled ? -1 : void 0}
                     @click=${onClick}>
-                    <div id="label" class="${prefix}--tree-node__label">
+                    <div id="label" class="${"cds-custom"}--tree-node__label">
                       <span
-                        class="${prefix}--tree-parent-node__toggle"
+                        class="${"cds-custom"}--tree-parent-node__toggle"
                         ?disabled=${disabled}
                         @click=${handleToggleClick}>
                         ${iconLoader(CaretDown16, { class: toggleClasses })}
                       </span>
-                      <span class="${prefix}--tree-node__label__details">
+                      <span class="${"cds-custom"}--tree-node__label__details">
                         <slot
                           name="icon"
                           @slotchange=${handleIconSlotChange}></slot>
@@ -190,14 +189,14 @@ let CDSTreeNode = class CDSTreeNode extends LitElement {
                     role="group"
                     class="${subTreeClasses}">
                     <slot @slotchange=${handleSlotChange}></slot>
-                  </ul>` : html`<div id="label" class="${prefix}--tree-node__label">
+                  </ul>` : html`<div id="label" class="${"cds-custom"}--tree-node__label">
                     <span
-                      class="${prefix}--tree-parent-node__toggle"
+                      class="${"cds-custom"}--tree-parent-node__toggle"
                       ?disabled=${disabled}
                       @click=${handleToggleClick}>
                       ${iconLoader(CaretDown16, { class: toggleClasses })}
                     </span>
-                    <span class="${prefix}--tree-node__label__details">
+                    <span class="${"cds-custom"}--tree-node__label__details">
                       <slot
                         name="icon"
                         @slotchange=${handleIconSlotChange}></slot>
@@ -217,13 +216,13 @@ let CDSTreeNode = class CDSTreeNode extends LitElement {
 	* The name of the custom event fired when node is selected.
 	*/
 	static get eventSelected() {
-		return `${prefix}-tree-node-selected`;
+		return `cds-custom-tree-node-selected`;
 	}
 	/**
 	* The name of the custom event fired when a node is toggled
 	*/
 	static get eventToggled() {
-		return `${prefix}-tree-node-toggled`;
+		return `cds-custom-tree-node-toggled`;
 	}
 	static {
 		this.styles = tree_view_default;
@@ -250,9 +249,9 @@ __decorate([property({
 	reflect: true
 })], CDSTreeNode.prototype, "selected", void 0);
 __decorate([property({ type: Function })], CDSTreeNode.prototype, "onClick", void 0);
-CDSTreeNode = __decorate([carbonElement(`${prefix}-tree-node`)], CDSTreeNode);
+CDSTreeNode = __decorate([carbonElement(`cds-custom-tree-node`)], CDSTreeNode);
 var tree_node_default = CDSTreeNode;
-
 //#endregion
 export { tree_node_default as default };
+
 //# sourceMappingURL=tree-node.js.map

package/es-custom/components/tree-view/tree-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node.js","names":["styles","customElement"],"sources":["../../../src/components/tree-view/tree-node.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 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\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport CaretDown16 from '@carbon/icons/es/caret--down/16.js';\n\nimport styles from './tree-view.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Tree node.\n *\n * @element cds-custom-tree-node\n * @fires eventSelected\n *   The name of the custom event fired when node is selected.\n * @fires eventToggled\n *   The name of the custom event fired when a node is toggled.\n */\n@customElement(`${prefix}-tree-node`)\nclass CDSTreeNode extends LitElement {\n  private _hasChildren = false;\n  private _hasIcon = false;\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleSlotChange({ target }: Event) {\n    const { _depth: depth, disabled } = this;\n    const items = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter(\n        (node) =>\n          node.nodeType === Node.ELEMENT_NODE &&\n          (node as Element).tagName.toLowerCase() === `${prefix}-tree-node`\n      );\n\n    items.forEach((item) => {\n      (item as CDSTreeNode)._depth = depth + 1;\n      (item as CDSTreeNode).disabled = disabled;\n    });\n\n    this._hasChildren = items.length > 0;\n    if (this._hasChildren) this.setAttribute('parent', '');\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles icon's `slotchange` event.\n   */\n  private _handleIconSlotChange({ target }: Event) {\n    this._hasIcon = (target as HTMLSlotElement).assignedNodes().length > 0;\n    if (this._hasIcon) this.setAttribute('has-icon', '');\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles style updates based on depth\n   */\n  private _handleStyles = () => {\n    const {\n      _depth: depth,\n      _hasChildren: hasChildren,\n      _hasIcon: hasIcon,\n    } = this;\n    const calcOffset = () => {\n      if (hasChildren && hasIcon) {\n        return depth + 1 + depth * 0.5;\n      }\n\n      if (hasChildren) {\n        return depth + 1;\n      }\n\n      if (hasIcon) {\n        return depth + 2 + depth * 0.5;\n      }\n\n      return depth + 2.5;\n    };\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    const label = this.shadowRoot!.querySelector(\n      `.${prefix}--tree-node__label`\n    );\n    if (label) {\n      (label as HTMLElement).style.marginInlineStart = `-${calcOffset()}rem`;\n      (label as HTMLElement).style.paddingInlineStart = `${calcOffset()}rem`;\n    }\n  };\n\n  _handleToggleClick = (event) => {\n    const { disabled, href } = this;\n    if (disabled) return;\n    event.stopPropagation();\n    if (href) {\n      event.preventDefault();\n    }\n    this.isExpanded = !this.isExpanded;\n    if (this.hasAttribute('aria-expanded')) {\n      this.setAttribute('aria-expanded', String(this.isExpanded));\n    }\n  };\n\n  /**\n   * sets if tree node is active\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * disabled property\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * **Note:** this is controlled by the parent TreeView component, do not set manually.\n   * TreeNode depth to determine spacing\n   */\n  @state()\n  private _depth = 0;\n\n  /**\n   * Specify if the TreeNode is expanded (only applicable to parent nodes)\n   */\n  @property({ type: Boolean, attribute: 'is-expanded' })\n  isExpanded = false;\n\n  /**\n   * Optional: The URL the TreeNode is linking to\n   */\n  @property({})\n  href;\n\n  /**\n   * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active, props.selected and aria-owns\n   */\n  @property({})\n  id = Math.random().toString(16).slice(2);\n\n  /**\n   * Rendered label for the TreeNode\n   */\n  @property({})\n  label!: string;\n\n  /**\n   * sets if tree node is selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * when adding an href to control the click functionality\n   */\n  @property({ type: Function })\n  onClick?: (event: Event) => void;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Detect children on first render\n    this._hasChildren = Array.from(this.children).some(\n      (node) => node.tagName.toLowerCase() === `${prefix}-tree-node`\n    );\n\n    this._hasIcon = Array.from(this.children).some(\n      (node) => node.getAttribute('slot') === 'icon'\n    );\n\n    if (!this.hasAttribute('role') && !this.href) {\n      this.setAttribute('role', 'treeitem');\n    }\n\n    if (this._hasChildren && !this.href) {\n      this.setAttribute('aria-expanded', String(this.isExpanded));\n    }\n\n    if (!this.hasAttribute('aria-label')) {\n      this.setAttribute('aria-label', this.label);\n    }\n  }\n\n  private _dispatchSelectedEvent(value) {\n    const { eventSelected } = this.constructor as typeof CDSTreeNode;\n    this.dispatchEvent(\n      new CustomEvent(eventSelected, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value,\n        },\n      })\n    );\n  }\n\n  private _dispatchToggledEvent(value, expanded) {\n    const { eventToggled } = this.constructor as typeof CDSTreeNode;\n    this.dispatchEvent(\n      new CustomEvent(eventToggled, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value,\n          expanded: expanded,\n        },\n      })\n    );\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('_depth')) {\n      this._handleStyles();\n    }\n    if (changedProperties.has('selected')) {\n      if (!this.href) {\n        this.setAttribute(\n          'aria-selected',\n          String(\n            !this.href ? (this.disabled ? undefined : this.selected) : undefined\n          )\n        );\n      }\n\n      if (this.selected) {\n        this._dispatchSelectedEvent(this.label);\n      }\n    }\n\n    if (changedProperties.has('active') && !this.href) {\n      this.setAttribute(\n        'aria-current',\n        String(\n          !this.href\n            ? this.active || undefined\n            : this.active\n              ? 'page'\n              : undefined\n        )\n      );\n    }\n\n    if (changedProperties.has('disabled')) {\n      this.setAttribute('aria-disabled', String(this.disabled));\n    }\n\n    if (changedProperties.has('isExpanded')) {\n      this._dispatchToggledEvent(this.label, this.isExpanded);\n    }\n  }\n\n  render() {\n    const {\n      disabled,\n      isExpanded,\n      href,\n      id,\n      label,\n      onClick,\n      _hasChildren: hasChildren,\n      _handleIconSlotChange: handleIconSlotChange,\n      _handleSlotChange: handleSlotChange,\n      _handleToggleClick: handleToggleClick,\n    } = this;\n\n    let toggleClasses = `${prefix}--tree-parent-node__toggle-icon`;\n    if (isExpanded) {\n      toggleClasses += `${prefix}--tree-parent-node__toggle-icon--expanded`;\n    }\n\n    const linkClasses = classMap({\n      [`${prefix}--tree-node`]: true,\n      [`${prefix}--tree-node--active`]: this.active,\n      [`${prefix}--tree-node--disabled`]: disabled,\n      [`${prefix}--tree-node--selected`]: this.selected,\n      [`${prefix}--tree-node--with-icon`]: this._hasIcon,\n      [`${prefix}--tree-leaf-node`]: !this._hasChildren,\n      [`${prefix}--tree-parent-node`]: this._hasChildren,\n    });\n\n    const subTreeClasses = classMap({\n      [`${prefix}--tree-node__children`]: true,\n      [`${prefix}--tree-node__hidden`]: !isExpanded,\n    });\n\n    return html`\n      ${!hasChildren\n        ? html`\n            ${href\n              ? html`<a\n                  class=${linkClasses}\n                  href=${!disabled ? href : undefined}\n                  role=\"treeitem\"\n                  ?aria-disabled=${disabled}\n                  aria-current=${!this.href\n                    ? this.active || undefined\n                    : this.active\n                      ? 'page'\n                      : undefined}\n                  tabindex=${disabled ? -1 : undefined}\n                  @click=${onClick}>\n                  <div id=\"label\" class=\"${prefix}--tree-node__label\">\n                    <slot\n                      name=\"icon\"\n                      @slotchange=${handleIconSlotChange}></slot>\n                    ${label}\n                  </div>\n                </a>`\n              : html` <div id=\"label\" class=\"${prefix}--tree-node__label\">\n                  <slot name=\"icon\" @slotchange=${handleIconSlotChange}></slot>\n                  ${label}\n                </div>`}\n          `\n        : html`\n            ${href\n              ? html` <a\n                    role=\"treeitem\"\n                    class=${linkClasses}\n                    aria-expanded=${!!isExpanded}\n                    aria-owns=\"subtree-id-${id}\"\n                    href=${!disabled ? href : undefined}\n                    tabindex=${disabled ? -1 : undefined}\n                    @click=${onClick}>\n                    <div id=\"label\" class=\"${prefix}--tree-node__label\">\n                      <span\n                        class=\"${prefix}--tree-parent-node__toggle\"\n                        ?disabled=${disabled}\n                        @click=${handleToggleClick}>\n                        ${iconLoader(CaretDown16, { class: toggleClasses })}\n                      </span>\n                      <span class=\"${prefix}--tree-node__label__details\">\n                        <slot\n                          name=\"icon\"\n                          @slotchange=${handleIconSlotChange}></slot>\n                        ${label}\n                      </span>\n                    </div>\n                  </a>\n                  <ul\n                    id=\"subtree-id-${id}\"\n                    role=\"group\"\n                    class=\"${subTreeClasses}\">\n                    <slot @slotchange=${handleSlotChange}></slot>\n                  </ul>`\n              : html`<div id=\"label\" class=\"${prefix}--tree-node__label\">\n                    <span\n                      class=\"${prefix}--tree-parent-node__toggle\"\n                      ?disabled=${disabled}\n                      @click=${handleToggleClick}>\n                      ${iconLoader(CaretDown16, { class: toggleClasses })}\n                    </span>\n                    <span class=\"${prefix}--tree-node__label__details\">\n                      <slot\n                        name=\"icon\"\n                        @slotchange=${handleIconSlotChange}></slot>\n                      ${label}\n                    </span>\n                  </div>\n                  <ul\n                    id=\"subtree-id-${id}\"\n                    role=\"group\"\n                    class=\"${subTreeClasses}\">\n                    <slot @slotchange=${handleSlotChange}></slot>\n                  </ul>`}\n          `}\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when node is selected.\n   */\n  static get eventSelected() {\n    return `${prefix}-tree-node-selected`;\n  }\n\n  /**\n   * The name of the custom event fired when a node is toggled\n   */\n  static get eventToggled() {\n    return `${prefix}-tree-node-toggled`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTreeNode;\n"],"mappings":"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"}
+{"version":3,"file":"tree-node.js","names":["styles","customElement"],"sources":["../../../src/components/tree-view/tree-node.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 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\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport CaretDown16 from '@carbon/icons/es/caret--down/16.js';\n\nimport styles from './tree-view.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Tree node.\n *\n * @element cds-custom-tree-node\n * @fires eventSelected\n *   The name of the custom event fired when node is selected.\n * @fires eventToggled\n *   The name of the custom event fired when a node is toggled.\n */\n@customElement(`${prefix}-tree-node`)\nclass CDSTreeNode extends LitElement {\n  private _hasChildren = false;\n  private _hasIcon = false;\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleSlotChange({ target }: Event) {\n    const { _depth: depth, disabled } = this;\n    const items = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter(\n        (node) =>\n          node.nodeType === Node.ELEMENT_NODE &&\n          (node as Element).tagName.toLowerCase() === `${prefix}-tree-node`\n      );\n\n    items.forEach((item) => {\n      (item as CDSTreeNode)._depth = depth + 1;\n      (item as CDSTreeNode).disabled = disabled;\n    });\n\n    this._hasChildren = items.length > 0;\n    if (this._hasChildren) this.setAttribute('parent', '');\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles icon's `slotchange` event.\n   */\n  private _handleIconSlotChange({ target }: Event) {\n    this._hasIcon = (target as HTMLSlotElement).assignedNodes().length > 0;\n    if (this._hasIcon) this.setAttribute('has-icon', '');\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles style updates based on depth\n   */\n  private _handleStyles = () => {\n    const {\n      _depth: depth,\n      _hasChildren: hasChildren,\n      _hasIcon: hasIcon,\n    } = this;\n    const calcOffset = () => {\n      if (hasChildren && hasIcon) {\n        return depth + 1 + depth * 0.5;\n      }\n\n      if (hasChildren) {\n        return depth + 1;\n      }\n\n      if (hasIcon) {\n        return depth + 2 + depth * 0.5;\n      }\n\n      return depth + 2.5;\n    };\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    const label = this.shadowRoot!.querySelector(\n      `.${prefix}--tree-node__label`\n    );\n    if (label) {\n      (label as HTMLElement).style.marginInlineStart = `-${calcOffset()}rem`;\n      (label as HTMLElement).style.paddingInlineStart = `${calcOffset()}rem`;\n    }\n  };\n\n  _handleToggleClick = (event) => {\n    const { disabled, href } = this;\n    if (disabled) return;\n    event.stopPropagation();\n    if (href) {\n      event.preventDefault();\n    }\n    this.isExpanded = !this.isExpanded;\n    if (this.hasAttribute('aria-expanded')) {\n      this.setAttribute('aria-expanded', String(this.isExpanded));\n    }\n  };\n\n  /**\n   * sets if tree node is active\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * disabled property\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * **Note:** this is controlled by the parent TreeView component, do not set manually.\n   * TreeNode depth to determine spacing\n   */\n  @state()\n  private _depth = 0;\n\n  /**\n   * Specify if the TreeNode is expanded (only applicable to parent nodes)\n   */\n  @property({ type: Boolean, attribute: 'is-expanded' })\n  isExpanded = false;\n\n  /**\n   * Optional: The URL the TreeNode is linking to\n   */\n  @property({})\n  href;\n\n  /**\n   * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active, props.selected and aria-owns\n   */\n  @property({})\n  id = Math.random().toString(16).slice(2);\n\n  /**\n   * Rendered label for the TreeNode\n   */\n  @property({})\n  label!: string;\n\n  /**\n   * sets if tree node is selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * when adding an href to control the click functionality\n   */\n  @property({ type: Function })\n  onClick?: (event: Event) => void;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Detect children on first render\n    this._hasChildren = Array.from(this.children).some(\n      (node) => node.tagName.toLowerCase() === `${prefix}-tree-node`\n    );\n\n    this._hasIcon = Array.from(this.children).some(\n      (node) => node.getAttribute('slot') === 'icon'\n    );\n\n    if (!this.hasAttribute('role') && !this.href) {\n      this.setAttribute('role', 'treeitem');\n    }\n\n    if (this._hasChildren && !this.href) {\n      this.setAttribute('aria-expanded', String(this.isExpanded));\n    }\n\n    if (!this.hasAttribute('aria-label')) {\n      this.setAttribute('aria-label', this.label);\n    }\n  }\n\n  private _dispatchSelectedEvent(value) {\n    const { eventSelected } = this.constructor as typeof CDSTreeNode;\n    this.dispatchEvent(\n      new CustomEvent(eventSelected, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value,\n        },\n      })\n    );\n  }\n\n  private _dispatchToggledEvent(value, expanded) {\n    const { eventToggled } = this.constructor as typeof CDSTreeNode;\n    this.dispatchEvent(\n      new CustomEvent(eventToggled, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value,\n          expanded: expanded,\n        },\n      })\n    );\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('_depth')) {\n      this._handleStyles();\n    }\n    if (changedProperties.has('selected')) {\n      if (!this.href) {\n        this.setAttribute(\n          'aria-selected',\n          String(\n            !this.href ? (this.disabled ? undefined : this.selected) : undefined\n          )\n        );\n      }\n\n      if (this.selected) {\n        this._dispatchSelectedEvent(this.label);\n      }\n    }\n\n    if (changedProperties.has('active') && !this.href) {\n      this.setAttribute(\n        'aria-current',\n        String(\n          !this.href\n            ? this.active || undefined\n            : this.active\n              ? 'page'\n              : undefined\n        )\n      );\n    }\n\n    if (changedProperties.has('disabled')) {\n      this.setAttribute('aria-disabled', String(this.disabled));\n    }\n\n    if (changedProperties.has('isExpanded')) {\n      this._dispatchToggledEvent(this.label, this.isExpanded);\n    }\n  }\n\n  render() {\n    const {\n      disabled,\n      isExpanded,\n      href,\n      id,\n      label,\n      onClick,\n      _hasChildren: hasChildren,\n      _handleIconSlotChange: handleIconSlotChange,\n      _handleSlotChange: handleSlotChange,\n      _handleToggleClick: handleToggleClick,\n    } = this;\n\n    let toggleClasses = `${prefix}--tree-parent-node__toggle-icon`;\n    if (isExpanded) {\n      toggleClasses += `${prefix}--tree-parent-node__toggle-icon--expanded`;\n    }\n\n    const linkClasses = classMap({\n      [`${prefix}--tree-node`]: true,\n      [`${prefix}--tree-node--active`]: this.active,\n      [`${prefix}--tree-node--disabled`]: disabled,\n      [`${prefix}--tree-node--selected`]: this.selected,\n      [`${prefix}--tree-node--with-icon`]: this._hasIcon,\n      [`${prefix}--tree-leaf-node`]: !this._hasChildren,\n      [`${prefix}--tree-parent-node`]: this._hasChildren,\n    });\n\n    const subTreeClasses = classMap({\n      [`${prefix}--tree-node__children`]: true,\n      [`${prefix}--tree-node__hidden`]: !isExpanded,\n    });\n\n    return html`\n      ${!hasChildren\n        ? html`\n            ${href\n              ? html`<a\n                  class=${linkClasses}\n                  href=${!disabled ? href : undefined}\n                  role=\"treeitem\"\n                  ?aria-disabled=${disabled}\n                  aria-current=${!this.href\n                    ? this.active || undefined\n                    : this.active\n                      ? 'page'\n                      : undefined}\n                  tabindex=${disabled ? -1 : undefined}\n                  @click=${onClick}>\n                  <div id=\"label\" class=\"${prefix}--tree-node__label\">\n                    <slot\n                      name=\"icon\"\n                      @slotchange=${handleIconSlotChange}></slot>\n                    ${label}\n                  </div>\n                </a>`\n              : html` <div id=\"label\" class=\"${prefix}--tree-node__label\">\n                  <slot name=\"icon\" @slotchange=${handleIconSlotChange}></slot>\n                  ${label}\n                </div>`}\n          `\n        : html`\n            ${href\n              ? html` <a\n                    role=\"treeitem\"\n                    class=${linkClasses}\n                    aria-expanded=${!!isExpanded}\n                    aria-owns=\"subtree-id-${id}\"\n                    href=${!disabled ? href : undefined}\n                    tabindex=${disabled ? -1 : undefined}\n                    @click=${onClick}>\n                    <div id=\"label\" class=\"${prefix}--tree-node__label\">\n                      <span\n                        class=\"${prefix}--tree-parent-node__toggle\"\n                        ?disabled=${disabled}\n                        @click=${handleToggleClick}>\n                        ${iconLoader(CaretDown16, { class: toggleClasses })}\n                      </span>\n                      <span class=\"${prefix}--tree-node__label__details\">\n                        <slot\n                          name=\"icon\"\n                          @slotchange=${handleIconSlotChange}></slot>\n                        ${label}\n                      </span>\n                    </div>\n                  </a>\n                  <ul\n                    id=\"subtree-id-${id}\"\n                    role=\"group\"\n                    class=\"${subTreeClasses}\">\n                    <slot @slotchange=${handleSlotChange}></slot>\n                  </ul>`\n              : html`<div id=\"label\" class=\"${prefix}--tree-node__label\">\n                    <span\n                      class=\"${prefix}--tree-parent-node__toggle\"\n                      ?disabled=${disabled}\n                      @click=${handleToggleClick}>\n                      ${iconLoader(CaretDown16, { class: toggleClasses })}\n                    </span>\n                    <span class=\"${prefix}--tree-node__label__details\">\n                      <slot\n                        name=\"icon\"\n                        @slotchange=${handleIconSlotChange}></slot>\n                      ${label}\n                    </span>\n                  </div>\n                  <ul\n                    id=\"subtree-id-${id}\"\n                    role=\"group\"\n                    class=\"${subTreeClasses}\">\n                    <slot @slotchange=${handleSlotChange}></slot>\n                  </ul>`}\n          `}\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when node is selected.\n   */\n  static get eventSelected() {\n    return `${prefix}-tree-node-selected`;\n  }\n\n  /**\n   * The name of the custom event fired when a node is toggled\n   */\n  static get eventToggled() {\n    return `${prefix}-tree-node-toggled`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTreeNode;\n"],"mappings":"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"}

package/es-custom/components/tree-view/tree-view.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
 import { TREE_SIZE } from "./defs.js";
@@ -15,7 +15,6 @@ import tree_view_default$1 from "./tree-view.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-
 //#region src/components/tree-view/tree-view.ts
 /**
 * Copyright IBM Corp. 2025, 2026
@@ -36,7 +35,7 @@ let CDSTreeView = class CDSTreeView extends HostListenerMixin(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this.hideLabel = false;
-		this.size = TREE_SIZE.SMALL;
+		this.size = "sm";
 		this._click = ({ target }) => {
 			if (target.disabled) return;
 			this.querySelectorAll(_CDSTreeView.selectorTreeNode).forEach((node) => {
@@ -131,11 +130,11 @@ let CDSTreeView = class CDSTreeView extends HostListenerMixin(LitElement) {
 		const { hideLabel, label, size } = this;
 		const labelId = "tree-view__label";
 		const treeClasses = classMap({
-			[`${prefix}--tree`]: true,
-			[`${prefix}--tree--${size}`]: size
+			[`cds-custom--tree`]: true,
+			[`cds-custom--tree--${size}`]: size
 		});
 		return html`
-      ${!hideLabel ? html`<label id=${labelId} class=${`${prefix}--label`}
+      ${!hideLabel ? html`<label id=${labelId} class=${`cds-custom--label`}
               >${label}
             </label>` : null}
       <ul
@@ -148,7 +147,7 @@ let CDSTreeView = class CDSTreeView extends HostListenerMixin(LitElement) {
     `;
 	}
 	static get selectorTreeNode() {
-		return `${prefix}-tree-node`;
+		return `cds-custom-tree-node`;
 	}
 	static {
 		this.styles = tree_view_default$1;
@@ -162,9 +161,9 @@ __decorate([property()], CDSTreeView.prototype, "label", void 0);
 __decorate([property({ reflect: true })], CDSTreeView.prototype, "size", void 0);
 __decorate([HostListener("click")], CDSTreeView.prototype, "_click", void 0);
 __decorate([HostListener("keydown")], CDSTreeView.prototype, "_handleKeyDown", void 0);
-CDSTreeView = _CDSTreeView = __decorate([carbonElement(`${prefix}-tree-view`)], CDSTreeView);
+CDSTreeView = _CDSTreeView = __decorate([carbonElement(`cds-custom-tree-view`)], CDSTreeView);
 var tree_view_default = CDSTreeView;
-
 //#endregion
 export { TREE_SIZE, tree_view_default as default };
+
 //# sourceMappingURL=tree-view.js.map

package/es-custom/components/tree-view/tree-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.js","names":["styles","customElement"],"sources":["../../../src/components/tree-view/tree-view.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 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 { TREE_SIZE } from './defs';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport styles from './tree-view.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport CDSTreeNode from './tree-node';\n\nexport { TREE_SIZE };\n/**\n * Tree view.\n *\n * @element cds-custom-tree-view\n */\n@customElement(`${prefix}-tree-view`)\nclass CDSTreeView extends HostListenerMixin(LitElement) {\n  /**\n   * Specify whether or not the label should be hidden\n   */\n  @property({ type: Boolean, attribute: 'hide-label' })\n  hideLabel = false;\n\n  /**\n   * Provide the label text that will be read by a screen reader\n   */\n  @property()\n  label!: string;\n\n  /**\n   * Specify the size of the tree from a list of available sizes.\n   */\n  @property({ reflect: true })\n  size = TREE_SIZE.SMALL;\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 _click = ({ target }) => {\n    if ((target as CDSTreeNode).disabled) return;\n\n    const nodes = this.querySelectorAll(CDSTreeView.selectorTreeNode);\n    nodes.forEach((node) => {\n      const isTarget = node === target;\n      const isLink = (node as CDSTreeNode).hasAttribute('href');\n      const element = isLink ? node.shadowRoot?.querySelector('a') : node;\n      (node as CDSTreeNode).selected = isTarget;\n      (node as CDSTreeNode).active = isTarget;\n      if (!isTarget) {\n        if (isLink) {\n          (element as CDSTreeNode).setAttribute('tabindex', '-1');\n        } else {\n          (element as CDSTreeNode).removeAttribute('tabindex');\n        }\n      } else (element as CDSTreeNode).setAttribute('tabindex', '0');\n    });\n  };\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 { key } = event;\n    const nodes = Array.from(\n      this.querySelectorAll(CDSTreeView.selectorTreeNode)\n    ).filter(\n      (node) => node.checkVisibility() && !node.hasAttribute('disabled')\n    );\n\n    const allNodes = Array.from(\n      this.querySelectorAll(CDSTreeView.selectorTreeNode)\n    ).filter((node) => !node.hasAttribute('disabled'));\n\n    const withLinks = (nodes[0] as CDSTreeNode).href;\n\n    const currentIndex = nodes.findIndex((node) =>\n      withLinks\n        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          node.shadowRoot?.querySelector('a')!.getAttribute('tabindex') === '0'\n        : node.getAttribute('tabindex') === '0'\n    );\n\n    let nextIndex = currentIndex;\n\n    switch (key) {\n      case 'ArrowDown':\n        nextIndex = Math.min(currentIndex + 1, nodes.length - 1);\n        break;\n      case 'ArrowUp':\n        nextIndex = Math.max(currentIndex - 1, 0);\n        break;\n      case 'Home':\n        nextIndex = 0;\n        break;\n      case 'End':\n        nextIndex = nodes.length - 1;\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        allNodes.forEach((node) => {\n          (node as CDSTreeNode).selected = false;\n          (node as CDSTreeNode).active = false;\n        });\n        (nodes[currentIndex] as CDSTreeNode).selected = true;\n        (nodes[currentIndex] as CDSTreeNode).active = true;\n        break;\n      case 'ArrowRight':\n        if ((nodes[currentIndex] as CDSTreeNode).hasAttribute('parent')) {\n          (nodes[currentIndex] as CDSTreeNode).isExpanded = true;\n          nodes[currentIndex].setAttribute('aria-expanded', 'true');\n        }\n        break;\n      case 'ArrowLeft':\n        if (!nodes[currentIndex].hasAttribute('parent')) {\n          const temp = nodes.findIndex(\n            (node) => node === nodes[currentIndex].parentElement\n          );\n          nextIndex = temp === -1 ? currentIndex : temp;\n        } else {\n          (nodes[currentIndex] as CDSTreeNode).isExpanded = false;\n          nodes[currentIndex].setAttribute('aria-expanded', 'false');\n        }\n        break;\n    }\n\n    if (nextIndex !== currentIndex) {\n      nodes.forEach((node) => {\n        if (!withLinks) {\n          node.removeAttribute('tabindex');\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          node.shadowRoot?.querySelector('a')!.setAttribute('tabindex', '-1');\n        }\n      });\n      const element = withLinks\n        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          (nodes[nextIndex] as CDSTreeNode).shadowRoot!.querySelector('a')\n        : nodes[nextIndex];\n      (element as CDSTreeNode).setAttribute('tabindex', '0');\n      (element as CDSTreeNode).focus();\n      event.preventDefault();\n    }\n  };\n\n  private async _setInitialFocus() {\n    await this.updateComplete;\n\n    const nodes = this.querySelectorAll(CDSTreeView.selectorTreeNode);\n    if (nodes.length > 0) {\n      const selectedNode =\n        Array.from(nodes).find((node) => (node as CDSTreeNode).selected) ||\n        nodes[0];\n      const element = (selectedNode as CDSTreeNode).href\n        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          (selectedNode as CDSTreeNode).shadowRoot!.querySelector('a')\n        : selectedNode;\n      (element as CDSTreeNode).setAttribute('tabindex', '0');\n    }\n  }\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'tree');\n    }\n\n    if (!this.hasAttribute('aria-label')) {\n      this.setAttribute('aria-label', this.label);\n    }\n  }\n\n  updated(changedProperties) {\n    this._setInitialFocus();\n\n    if (changedProperties.has('size')) {\n      const items = this.querySelectorAll(CDSTreeView.selectorTreeNode);\n      items.forEach((item) => {\n        (item as CDSTreeNode).setAttribute('size', this.size);\n      });\n    }\n  }\n\n  render() {\n    const { hideLabel, label, size } = this;\n    const labelId = 'tree-view__label';\n    const treeClasses = classMap({\n      [`${prefix}--tree`]: true,\n      [`${prefix}--tree--${size}`]: size,\n    });\n    return html`\n      ${\n        !hideLabel\n          ? html`<label id=${labelId} class=${`${prefix}--label`}\n              >${label}\n            </label>`\n          : null\n      }\n      <ul\n        aria-label=${hideLabel ? label : undefined}\n        aria-labelledby=${!hideLabel ? labelId : undefined}\n        class=${treeClasses}\n        role=\"tree\">\n        <slot><slot>\n      </ul>\n    `;\n  }\n\n  static get selectorTreeNode() {\n    return `${prefix}-tree-node`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTreeView;\n"],"mappings":"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"}
+{"version":3,"file":"tree-view.js","names":["styles","customElement"],"sources":["../../../src/components/tree-view/tree-view.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 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 { TREE_SIZE } from './defs';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport styles from './tree-view.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport CDSTreeNode from './tree-node';\n\nexport { TREE_SIZE };\n/**\n * Tree view.\n *\n * @element cds-custom-tree-view\n */\n@customElement(`${prefix}-tree-view`)\nclass CDSTreeView extends HostListenerMixin(LitElement) {\n  /**\n   * Specify whether or not the label should be hidden\n   */\n  @property({ type: Boolean, attribute: 'hide-label' })\n  hideLabel = false;\n\n  /**\n   * Provide the label text that will be read by a screen reader\n   */\n  @property()\n  label!: string;\n\n  /**\n   * Specify the size of the tree from a list of available sizes.\n   */\n  @property({ reflect: true })\n  size = TREE_SIZE.SMALL;\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 _click = ({ target }) => {\n    if ((target as CDSTreeNode).disabled) return;\n\n    const nodes = this.querySelectorAll(CDSTreeView.selectorTreeNode);\n    nodes.forEach((node) => {\n      const isTarget = node === target;\n      const isLink = (node as CDSTreeNode).hasAttribute('href');\n      const element = isLink ? node.shadowRoot?.querySelector('a') : node;\n      (node as CDSTreeNode).selected = isTarget;\n      (node as CDSTreeNode).active = isTarget;\n      if (!isTarget) {\n        if (isLink) {\n          (element as CDSTreeNode).setAttribute('tabindex', '-1');\n        } else {\n          (element as CDSTreeNode).removeAttribute('tabindex');\n        }\n      } else (element as CDSTreeNode).setAttribute('tabindex', '0');\n    });\n  };\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 { key } = event;\n    const nodes = Array.from(\n      this.querySelectorAll(CDSTreeView.selectorTreeNode)\n    ).filter(\n      (node) => node.checkVisibility() && !node.hasAttribute('disabled')\n    );\n\n    const allNodes = Array.from(\n      this.querySelectorAll(CDSTreeView.selectorTreeNode)\n    ).filter((node) => !node.hasAttribute('disabled'));\n\n    const withLinks = (nodes[0] as CDSTreeNode).href;\n\n    const currentIndex = nodes.findIndex((node) =>\n      withLinks\n        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          node.shadowRoot?.querySelector('a')!.getAttribute('tabindex') === '0'\n        : node.getAttribute('tabindex') === '0'\n    );\n\n    let nextIndex = currentIndex;\n\n    switch (key) {\n      case 'ArrowDown':\n        nextIndex = Math.min(currentIndex + 1, nodes.length - 1);\n        break;\n      case 'ArrowUp':\n        nextIndex = Math.max(currentIndex - 1, 0);\n        break;\n      case 'Home':\n        nextIndex = 0;\n        break;\n      case 'End':\n        nextIndex = nodes.length - 1;\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        allNodes.forEach((node) => {\n          (node as CDSTreeNode).selected = false;\n          (node as CDSTreeNode).active = false;\n        });\n        (nodes[currentIndex] as CDSTreeNode).selected = true;\n        (nodes[currentIndex] as CDSTreeNode).active = true;\n        break;\n      case 'ArrowRight':\n        if ((nodes[currentIndex] as CDSTreeNode).hasAttribute('parent')) {\n          (nodes[currentIndex] as CDSTreeNode).isExpanded = true;\n          nodes[currentIndex].setAttribute('aria-expanded', 'true');\n        }\n        break;\n      case 'ArrowLeft':\n        if (!nodes[currentIndex].hasAttribute('parent')) {\n          const temp = nodes.findIndex(\n            (node) => node === nodes[currentIndex].parentElement\n          );\n          nextIndex = temp === -1 ? currentIndex : temp;\n        } else {\n          (nodes[currentIndex] as CDSTreeNode).isExpanded = false;\n          nodes[currentIndex].setAttribute('aria-expanded', 'false');\n        }\n        break;\n    }\n\n    if (nextIndex !== currentIndex) {\n      nodes.forEach((node) => {\n        if (!withLinks) {\n          node.removeAttribute('tabindex');\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          node.shadowRoot?.querySelector('a')!.setAttribute('tabindex', '-1');\n        }\n      });\n      const element = withLinks\n        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          (nodes[nextIndex] as CDSTreeNode).shadowRoot!.querySelector('a')\n        : nodes[nextIndex];\n      (element as CDSTreeNode).setAttribute('tabindex', '0');\n      (element as CDSTreeNode).focus();\n      event.preventDefault();\n    }\n  };\n\n  private async _setInitialFocus() {\n    await this.updateComplete;\n\n    const nodes = this.querySelectorAll(CDSTreeView.selectorTreeNode);\n    if (nodes.length > 0) {\n      const selectedNode =\n        Array.from(nodes).find((node) => (node as CDSTreeNode).selected) ||\n        nodes[0];\n      const element = (selectedNode as CDSTreeNode).href\n        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          (selectedNode as CDSTreeNode).shadowRoot!.querySelector('a')\n        : selectedNode;\n      (element as CDSTreeNode).setAttribute('tabindex', '0');\n    }\n  }\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'tree');\n    }\n\n    if (!this.hasAttribute('aria-label')) {\n      this.setAttribute('aria-label', this.label);\n    }\n  }\n\n  updated(changedProperties) {\n    this._setInitialFocus();\n\n    if (changedProperties.has('size')) {\n      const items = this.querySelectorAll(CDSTreeView.selectorTreeNode);\n      items.forEach((item) => {\n        (item as CDSTreeNode).setAttribute('size', this.size);\n      });\n    }\n  }\n\n  render() {\n    const { hideLabel, label, size } = this;\n    const labelId = 'tree-view__label';\n    const treeClasses = classMap({\n      [`${prefix}--tree`]: true,\n      [`${prefix}--tree--${size}`]: size,\n    });\n    return html`\n      ${\n        !hideLabel\n          ? html`<label id=${labelId} class=${`${prefix}--label`}\n              >${label}\n            </label>`\n          : null\n      }\n      <ul\n        aria-label=${hideLabel ? label : undefined}\n        aria-labelledby=${!hideLabel ? labelId : undefined}\n        class=${treeClasses}\n        role=\"tree\">\n        <slot><slot>\n      </ul>\n    `;\n  }\n\n  static get selectorTreeNode() {\n    return `${prefix}-tree-node`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTreeView;\n"],"mappings":"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"}