@carbon/web-components 2.52.0 → 2.53.0

package/es/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--tree`]: true,
+			[`cds--tree--${size}`]: size
 		});
 		return html`
-      ${!hideLabel ? html`<label id=${labelId} class=${`${prefix}--label`}
+      ${!hideLabel ? html`<label id=${labelId} class=${`cds--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-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-tree-view`)], CDSTreeView);
 var tree_view_default = CDSTreeView;
-
 //#endregion
 export { TREE_SIZE, tree_view_default as default };
+
 //# sourceMappingURL=tree-view.js.map

package/es/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-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-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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"}

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

@@ -6,10 +6,9 @@
  */
 
 import { css } from "lit";
-
 //#region src/components/tree-view/tree-view.scss?lit
 var tree_view_default = css([".cds--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--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--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--layer-one.cds--layer__with-background,.cds--layer-three.cds--layer__with-background,.cds--layer-two.cds--layer__with-background{background-color:var(--cds-layer-background)}@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--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}}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds--fieldset *,.cds--fieldset :after,.cds--fieldset :before{box-sizing:inherit}.cds--form-item{align-items:flex-start;display:flex;flex:1 1 auto;flex-direction:column;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--label html{font-size:100%}.cds--label body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds--label strong{font-weight:600}.cds--label{color:var(--cds-text-secondary,#525252);display:inline-block;font-weight:var(--cds-label-01-font-weight,400);font-weight:400;line-height:var(--cds-label-01-line-height,1.33333);line-height:1rem;margin-block-end:.5rem;vertical-align:baseline}.cds--label,.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label .cds--toggletip-label{font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333)}.cds--label--no-margin{margin-block-end:0}.cds--label+.cds--tooltip{inset-block-start:.2rem;inset-inline-start:.5rem;position:relative}.cds--label+.cds--tooltip .cds--tooltip__trigger{-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--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger :after,.cds--label+.cds--tooltip .cds--tooltip__trigger :before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger{align-items:center;display:flex;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);justify-content:center;letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333)}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{inset-block-start:.2rem;inset-inline-start:.5rem}.cds--label.cds--skeleton{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:none}.cds--label.cds--skeleton:before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--label.cds--skeleton{background:CanvasText}.cds--label.cds--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds--label.cds--skeleton{block-size:.875rem;inline-size:4.6875rem}input[type=number],input[type=text].cds--number{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,.cds--combo-box--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--number[data-invalid] input[type=text]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,.cds--combo-box--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--number[data-invalid] input[type=text]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper--warn~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker--warning~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;font-weight:400;max-block-size:12.5rem;overflow:visible}.cds--select--inline.cds--select--warning .cds--select-input--inline__wrapper~.cds--form-requirement,.cds--select-input--inline__wrapper[data-invalid]~.cds--form-requirement{display:inline-flex;inline-size:100%;margin:0;margin-block-end:0;max-block-size:100%;overflow:visible;padding-inline-start:.5rem}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input--inline__wrapper[data-invalid]~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:none}.cds--form--fluid .cds--form-requirement{margin:0;padding:.5rem 2.5rem .5rem 1rem}input:not(output,[data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds--form-requirement strong{font-weight:600}.cds--form-requirement{display:none;font-size:var(--cds-helper-text-01-font-size,.75rem);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);line-height:var(--cds-helper-text-01-line-height,1.33333);margin:.25rem 0 0;max-block-size:0;overflow:hidden}.cds--select--inline .cds--form__helper-text{margin-block-start:0}.cds--form__helper-text{color:var(--cds-text-helper,#6f6f6f);font-size:var(--cds-helper-text-01-font-size,.75rem);inline-size:100%;letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);line-height:var(--cds-helper-text-01-line-height,1.33333);margin-block-start:.25rem;opacity:1;z-index:0}.cds--form__helper-text--disabled,.cds--label--disabled,fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds--tree{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds--tree *,.cds--tree :after,.cds--tree :before{box-sizing:inherit}.cds--tree{overflow:hidden}.cds--tree-node,:host(cds-tree-node:not([href])){background-color:var(--cds-layer-01,#f4f4f4);color:var(--cds-text-secondary,#525252);padding-inline-start:1rem}.cds--tree-node:focus{outline:none}.cds--tree-node:hover{cursor:pointer}.cds--tree-node--hidden{display:none}.cds--tree-node__children{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds--tree-node__children *,.cds--tree-node__children :after,.cds--tree-node__children :before{box-sizing:inherit}.cds--tree-node__children{list-style-type:none}.cds--tree-node--with-icon .cds--tree-node,.cds--tree-node--with-icon :host(cds-tree-node:not([href])){margin-inline-start:.5rem}.cds--tree-node:focus>.cds--tree-node__label{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tree-node:focus>.cds--tree-node__label{outline-style:dotted}}.cds--tree-node.cds--tree-parent-node>.cds--tree-node__label{inline-size:auto}.cds--tree-node--disabled:focus>.cds--tree-node__label{outline:none}.cds--tree-node--disabled,.cds--tree-node--disabled .cds--tree-node__label:hover,.cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__label__details,:host(cds-tree-node[disabled]:not([href])),:host(cds-tree-node[disabled]:not([href])) .cds--tree-node__label:hover,:host(cds-tree-node[disabled]:not([href])) .cds--tree-node__label:hover .cds--tree-node__label__details{background-color:var(--cds-field-01,#f4f4f4);color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds--tree-node--disabled .cds--tree-node__icon,.cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__icon,.cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon,.cds--tree-node--disabled .cds--tree-parent-node__toggle-icon,:host(cds-tree-node:not([href])) .cds--tree-node--disabled ::slotted([slot=icon]),:host(cds-tree-node[disabled]:not([href])) .cds--tree-node__icon,:host(cds-tree-node[disabled]:not([href])) .cds--tree-parent-node__toggle-icon,:host(cds-tree-node[disabled]:not([href])):host(cds-tree-node:not([href])) ::slotted([slot=icon]){fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds--tree-node--disabled,.cds--tree-node--disabled .cds--tree-parent-node__toggle-icon:hover,:host(cds-tree-node[disabled]:not([href])),:host(cds-tree-node[disabled]:not([href])) .cds--tree-parent-node__toggle-icon:hover{cursor:not-allowed}:host(cds-tree-node[href][parent]) a.cds--tree-node,li a.cds--tree-node{text-decoration:none}:host(cds-tree-node[href][parent]) a.cds--tree-node:not(.cds--tree-node--disabled),li a.cds--tree-node:not(.cds--tree-node--disabled){color:var(--cds-text-secondary,#525252)}:host(cds-tree-node[href][parent]),li.cds--tree-node-link-parent{background-color:var(--cds-layer-01,#f4f4f4);display:flex;flex-direction:column}:host(cds-tree-node[href][parent])>.cds--tree-node__children,li.cds--tree-node-link-parent>.cds--tree-node__children{padding-inline-start:1rem}.cds--tree-node__label{align-items:center;box-sizing:border-box;display:flex;flex:1;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);inline-size:100%;letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572);min-block-size:2rem;padding-inline-end:1rem;position:relative}.cds--tree-node__label:hover{background-color:var(--cds-layer-hover-01,#e8e8e8);color:var(--cds-text-primary,#161616)}.cds--tree-node:not(.cds--tree-parent-node) .cds--tree-node__label,:not(.cds--tree-parent-node):host(cds-tree-node:not([href])) .cds--tree-node__label{padding-block:.4375rem .4375rem}.cds--tree-node__label:hover .cds--tree-node__label__details{color:var(--cds-text-primary,#161616)}.cds--tree-node__label:hover .cds--tree-node__icon,.cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon,:host(cds-tree-node:not([href])) .cds--tree-node__label:hover ::slotted([slot=icon]){fill:var(--cds-icon-primary,#161616)}.cds--tree-leaf-node,:host(cds-tree-node:not([parent]):not([href])){display:flex;padding-inline-start:2.5rem}.cds--tree-leaf-node.cds--tree-node--with-icon{padding-inline-start:2rem}.cds--tree-leaf-node.cds--tree-node--with-icon .cds--tree-leaf-node,.cds--tree-leaf-node.cds--tree-node--with-icon :host(cds-tree-node:not([parent]):not([href])){padding-inline-start:1.5rem}.cds--tree-node__label__details{align-items:center;display:flex;min-inline-size:0}.cds--tree-node--with-icon .cds--tree-parent-node__toggle{margin-inline-end:0}.cds--tree-parent-node__toggle{align-items:center;block-size:1.5rem;border:0;display:flex;inline-size:1.5rem;margin-inline:-.25rem .25rem;padding-inline-start:.25rem}.cds--tree-parent-node__toggle:hover{cursor:pointer}.cds--tree-parent-node__toggle:focus{outline:none}.cds--tree-parent-node__toggle-icon{fill:var(--cds-icon-secondary,#525252);transform:rotate(-90deg);transition:all .11s cubic-bezier(.2,0,.38,.9)}.cds--tree-parent-node__toggle-icon--expanded{transform:rotate(0)}.cds--tree-node__icon,:host(cds-tree-node:not([href])) ::slotted([slot=icon]){fill:var(--cds-icon-secondary,#525252);margin-inline:.5rem .5rem;min-block-size:1rem;min-inline-size:1rem}.cds--tree-parent-node__toggle+.cds--tree-node__label__details .cds--tree-node__icon,:host(cds-tree-node:not([href])) .cds--tree-parent-node__toggle+.cds--tree-node__label__details ::slotted([slot=icon]){margin-inline-start:.25rem}.cds--tree-node--selected>.cds--tree-node__label,:host(cds-tree-node[selected]:not([href]))>.cds--tree-node__label{background-color:var(--cds-layer-selected-01,#e0e0e0);color:var(--cds-text-primary,#161616)}.cds--tree-node--selected>.cds--tree-node__label:hover,:host(cds-tree-node[selected]:not([href]))>.cds--tree-node__label:hover{background-color:var(--cds-layer-selected-hover-01,#d1d1d1)}.cds--tree-node--selected>.cds--tree-node__label .cds--tree-node__icon,.cds--tree-node--selected>.cds--tree-node__label .cds--tree-parent-node__toggle-icon,:host(cds-tree-node:not([href])) .cds--tree-node--selected>.cds--tree-node__label ::slotted([slot=icon]),:host(cds-tree-node[selected]:not([href])):host(cds-tree-node:not([href]))>.cds--tree-node__label ::slotted([slot=icon]),:host(cds-tree-node[selected]:not([href]))>.cds--tree-node__label .cds--tree-node__icon,:host(cds-tree-node[selected]:not([href]))>.cds--tree-node__label .cds--tree-parent-node__toggle-icon{fill:var(--cds-icon-primary,#161616)}.cds--tree-node--active>.cds--tree-node__label,:host(cds-tree-node[active]:not([href]))>.cds--tree-node__label{position:relative}.cds--tree-node--active>.cds--tree-node__label:before,:host(cds-tree-node[active]:not([href]))>.cds--tree-node__label:before{background-color:var(--cds-interactive,#0f62fe);block-size:100%;content:\"\";inline-size:.25rem;inset-block-start:0;inset-inline-start:0;position:absolute}.cds--tree--xs .cds--tree-node__label{min-block-size:1.5rem}.cds--tree--xs .cds--tree-node:not(.cds--tree-parent-node) .cds--tree-node__label,.cds--tree--xs :not(.cds--tree-parent-node):host(cds-tree-node:not([href])) .cds--tree-node__label{padding:0}.cds--tree--xs .cds--tree-parent-node__toggle{margin-block-start:0}.cds--tree-node__label__text{display:block;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);line-height:1.2;overflow:hidden;padding-inline-start:.25rem;text-overflow:ellipsis;white-space:nowrap}.cds--tree-node__label .cds--icon-tooltip{inline-size:100%}.cds--tree-node__label .cds--icon-tooltip .cds--btn--icon-only{background:transparent;block-size:auto;border:none;color:inherit;inline-size:100%;min-block-size:unset;padding:0;text-align:start}.cds--tree-node__label .cds--icon-tooltip .cds--btn--icon-only .cds--tree-node__label__text{color:inherit;inline-size:100%}.cds--tree-node__label .cds--tooltip-content{padding:1rem}.cds--tree-node__label .cds--popover-container{inline-size:100%}.cds--tree .cds--tree-node__label .cds--tooltip-trigger__wrapper .cds--btn--ghost:focus{box-shadow:none;outline:2px solid var(--cds-focus,#0f62fe)}:host(cds-tree-view){display:block}:host(cds-tree-node){box-sizing:border-box;display:list-item}:host(cds-tree-node) .cds--tree-node__label{box-sizing:inherit}:host(cds-tree-node) .cds--tree-node__hidden{display:none}:host(cds-tree-node) .cds--tree-parent-node__toggle{box-sizing:inherit}:host(cds-tree-node:focus-visible){outline:none}:host(cds-tree-node:focus-visible) .cds--tree-node__label{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-tree-node:focus-visible) .cds--tree-node__label{outline-style:dotted}}:host(cds-tree-node:not([parent]):not([href])) .cds--tree-node__label{padding-block:.4375rem}:host(cds-tree-node[href]) .cds--tree-node,:host(cds-tree-node[href]) :host(cds-tree-node:not([href])){box-sizing:inherit}:host(cds-tree-node[href]) .cds--tree-node__label{padding-block:0}:host(cds-tree-node[has-icon]:not([parent]:not([href]))){padding-inline-start:2rem}:host(cds-tree-node[has-icon]:not([href])){padding-inline-start:.5rem}:host(cds-tree-node[has-icon]:not([href])) .cds--tree-parent-node__toggle{margin-inline-end:0}:host(cds-tree-node[has-icon][parent]:not([href])){padding-inline-start:1rem}:host(cds-tree-node[has-icon]:not([href])) ::slotted(cds-tree-node){margin-inline-start:.5rem}:host(cds-tree-node:not([href])[size=xs]) .cds--tree-node__label{min-block-size:1.5rem}:host(cds-tree-node:not([href])[size=xs]) .cds--tree-parent-node__toggle{margin-block-start:0}:host(cds-tree-node:not([href])[size=xs]:not([parent])) .cds--tree-node__label{padding:0}:host(cds-tree-node[href]) a{text-decoration:none}"]);
-
 //#endregion
 export { tree_view_default as default };
+
 //# sourceMappingURL=tree-view.scss.js.map

package/es/components/ui-shell/defs.js

@@ -49,7 +49,7 @@ let SIDE_NAV_USAGE_MODE = /* @__PURE__ */ function(SIDE_NAV_USAGE_MODE) {
 	SIDE_NAV_USAGE_MODE["HEADER_NAV"] = "header-nav";
 	return SIDE_NAV_USAGE_MODE;
 }({});
-
 //#endregion
 export { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };
+
 //# sourceMappingURL=defs.js.map

package/es/components/ui-shell/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/ui-shell/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Collapse modes of side nav.\n */\nexport enum SIDE_NAV_COLLAPSE_MODE {\n  /**\n   * Fixed mode.\n   * In this mode, side nav is non-collapsible.\n   */\n  FIXED = 'fixed',\n\n  /**\n   * Rail mode.\n   * In this mode, side nav can be collapsed to a narrower width (\"rail\" look) with a toggle button.\n   */\n  RAIL = 'rail',\n\n  /**\n   * Responsive mode.\n   * In this mode, side nav sticks in wider screen, and can be completely collapsed with a toggle button in narrower screen.\n   */\n  RESPONSIVE = 'responsive',\n}\n\n/**\n * The usage purpose of side nav.\n */\nexport enum SIDE_NAV_USAGE_MODE {\n  /**\n   * Regular usage.\n   */\n  REGULAR = '',\n\n  /**\n   * To represent header nav.\n   * In this mode, side nav is hidden when header nav is shown, and side nav is shown then header nav is hidden.\n   * This mode can be used only with `SIDE_NAV_COLLAPSE_MODE.REGULAR`.\n   */\n  HEADER_NAV = 'header-nav',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,0EAAL;;;;;AAKL;;;;;AAMA;;;;;AAMA;;;;;;AAMF,IAAY,oEAAL;;;;AAIL;;;;;;AAOA"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/ui-shell/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Collapse modes of side nav.\n */\nexport enum SIDE_NAV_COLLAPSE_MODE {\n  /**\n   * Fixed mode.\n   * In this mode, side nav is non-collapsible.\n   */\n  FIXED = 'fixed',\n\n  /**\n   * Rail mode.\n   * In this mode, side nav can be collapsed to a narrower width (\"rail\" look) with a toggle button.\n   */\n  RAIL = 'rail',\n\n  /**\n   * Responsive mode.\n   * In this mode, side nav sticks in wider screen, and can be completely collapsed with a toggle button in narrower screen.\n   */\n  RESPONSIVE = 'responsive',\n}\n\n/**\n * The usage purpose of side nav.\n */\nexport enum SIDE_NAV_USAGE_MODE {\n  /**\n   * Regular usage.\n   */\n  REGULAR = '',\n\n  /**\n   * To represent header nav.\n   * In this mode, side nav is hidden when header nav is shown, and side nav is shown then header nav is hidden.\n   * This mode can be used only with `SIDE_NAV_COLLAPSE_MODE.REGULAR`.\n   */\n  HEADER_NAV = 'header-nav',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,yBAAL,yBAAA,wBAAA;;;;;AAKL,wBAAA,WAAA;;;;;AAMA,wBAAA,UAAA;;;;;AAMA,wBAAA,gBAAA;;KACD;;;;AAKD,IAAY,sBAAL,yBAAA,qBAAA;;;;AAIL,qBAAA,aAAA;;;;;;AAOA,qBAAA,gBAAA;;KACD"}

package/es/components/ui-shell/header-global-action.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 HostListener from "../../globals/decorators/host-listener.js";
-import { BUTTON_KIND, BUTTON_SIZE, BUTTON_TOOLTIP_POSITION } from "../button/defs.js";
+import "../button/defs.js";
 import button_default from "../button/button.js";
 import header_default from "./header.scss.js";
 import { LitElement } from "lit";
 import { property, query } from "lit/decorators.js";
-
 //#region src/components/ui-shell/header-global-action.ts
 /**
 * Copyright IBM Corp. 2023, 2025
@@ -40,9 +39,9 @@ let CDSHeaderGlobalAction = class CDSHeaderGlobalAction extends button_default {
 		};
 	}
 	connectedCallback() {
-		this.tooltipPosition = BUTTON_TOOLTIP_POSITION.BOTTOM;
-		this.kind = BUTTON_KIND.GHOST;
-		this.size = BUTTON_SIZE.LARGE;
+		this.tooltipPosition = "bottom";
+		this.kind = "ghost";
+		this.size = "lg";
 		super.connectedCallback();
 	}
 	firstUpdated() {
@@ -78,7 +77,8 @@ let CDSHeaderGlobalAction = class CDSHeaderGlobalAction extends button_default {
 			if (panel) {
 				if (panel.getAttribute("expanded")) panel.removeAttribute("expanded");
 				else panel.setAttribute("expanded", "true");
-				this.active = !this.active;
+				const active = !this.active;
+				this.active = active;
 			}
 		}
 	}
@@ -95,22 +95,22 @@ let CDSHeaderGlobalAction = class CDSHeaderGlobalAction extends button_default {
 	}
 	updated(changedProperties) {
 		if (this._buttonNode) {
-			this._buttonNode.classList.add(`${prefix}--header__action`);
+			this._buttonNode.classList.add(`cds--header__action`);
 			if (changedProperties.has("active") || changedProperties.size === 0) if (this.active) {
-				this._buttonNode.classList.add(`${prefix}--header__action--active`);
+				this._buttonNode.classList.add(`cds--header__action--active`);
 				if (this.buttonLabelActive) this.tooltipText = this.buttonLabelActive;
 			} else {
-				this._buttonNode.classList.remove(`${prefix}--header__action--active`);
+				this._buttonNode.classList.remove(`cds--header__action--active`);
 				if (this.buttonLabelInactive) this.tooltipText = this.buttonLabelInactive;
 			}
 		}
 	}
 	shouldUpdate(changedProperties) {
 		if (changedProperties.has("active") && this._buttonNode) if (this.active) {
-			this._buttonNode.classList.add(`${prefix}--header__action--active`);
+			this._buttonNode.classList.add(`cds--header__action--active`);
 			if (this.buttonLabelActive) this.tooltipText = this.buttonLabelActive;
 		} else {
-			this._buttonNode.classList.remove(`${prefix}--header__action--active`);
+			this._buttonNode.classList.remove(`cds--header__action--active`);
 			if (this.buttonLabelInactive) this.tooltipText = this.buttonLabelInactive;
 		}
 		return true;
@@ -140,9 +140,9 @@ __decorate([property({ attribute: "button-label-inactive" })], CDSHeaderGlobalAc
 __decorate([HostListener("focusout")], CDSHeaderGlobalAction.prototype, "_handleFocusOut", null);
 __decorate([HostListener("click", { capture: true })], CDSHeaderGlobalAction.prototype, "_handleClick", null);
 __decorate([HostListener("keydown", { capture: true })], CDSHeaderGlobalAction.prototype, "_handleKeyDown", null);
-CDSHeaderGlobalAction = __decorate([carbonElement(`${prefix}-header-global-action`)], CDSHeaderGlobalAction);
+CDSHeaderGlobalAction = __decorate([carbonElement(`cds-header-global-action`)], CDSHeaderGlobalAction);
 var header_global_action_default = CDSHeaderGlobalAction;
-
 //#endregion
 export { header_global_action_default as default };
+
 //# sourceMappingURL=header-global-action.js.map

package/es/components/ui-shell/header-global-action.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-global-action.js","names":["CDSButton","styles","customElement"],"sources":["../../../src/components/ui-shell/header-global-action.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 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 { LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport {\n  BUTTON_TOOLTIP_POSITION,\n  BUTTON_KIND,\n  BUTTON_SIZE,\n} from '../button/button';\nimport CDSButton from '../button/button';\nimport HostListener from '../../globals/decorators/host-listener';\nimport styles from './header.scss?lit';\nimport { prefix } from '../../globals/settings';\n\n/**\n * Header global action button\n *\n * @element cds-header-global-action\n */\n@customElement(`${prefix}-header-global-action`)\nclass CDSHeaderGlobalAction extends CDSButton {\n  @query('button')\n  protected _buttonNode!: HTMLButtonElement;\n\n  /**\n   * Specify whether the action is currently active\n   */\n  @property({ type: Boolean, reflect: true })\n  active;\n\n  /**\n   * Specify which header panel the button is associated with.\n   */\n  @property({ type: String, attribute: 'panel-id', reflect: true })\n  panelId;\n\n  /**\n   * The `aria-label` attribute for the button in its active state.\n   */\n  @property({ attribute: 'button-label-active' })\n  buttonLabelActive;\n\n  /**\n   * The `aria-label` attribute for the button in its inactive state.\n   */\n  @property({ attribute: 'button-label-inactive' })\n  buttonLabelInactive;\n\n  connectedCallback() {\n    this.tooltipPosition = BUTTON_TOOLTIP_POSITION.BOTTOM;\n    this.kind = BUTTON_KIND.GHOST;\n    this.size = BUTTON_SIZE.LARGE;\n    super.connectedCallback();\n  }\n\n  firstUpdated() {\n    document.addEventListener('click', this._handleDocumentClick, true);\n    document.addEventListener('focusin', this._handleDocumentFocusIn, true);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this._handleDocumentClick, true);\n    document.removeEventListener('focusin', this._handleDocumentFocusIn, true);\n    super.disconnectedCallback();\n  }\n\n  private _handleDocumentClick = (event: MouseEvent) => {\n    const path = event.composedPath();\n    this._handlePanelCloseIfFocusOutside(path);\n  };\n\n  private _handleDocumentFocusIn = (event: FocusEvent) => {\n    const path = event.composedPath();\n    this._handlePanelCloseIfFocusOutside(path);\n  };\n\n  private _handlePanelCloseIfFocusOutside(path: EventTarget[]) {\n    const panel = this.ownerDocument?.querySelector(`#${this.panelId}`);\n    const isInside = path.some(\n      (el) =>\n        el instanceof HTMLElement && (panel?.contains(el) || this.contains(el))\n    );\n\n    if (panel && !isInside) {\n      panel.removeAttribute('expanded');\n      this.active = false;\n    }\n  }\n\n  @HostListener('focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _handleFocusOut(event: FocusEvent) {\n    const panel = this.ownerDocument?.querySelector(`#${this.panelId}`);\n    const relatedTarget = event.relatedTarget as HTMLElement;\n\n    if (\n      panel &&\n      relatedTarget &&\n      !this.contains(relatedTarget) &&\n      !panel.contains(relatedTarget)\n    ) {\n      panel.removeAttribute('expanded');\n      this.active = false;\n    }\n  }\n\n  @HostListener('click', { capture: true })\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _handleClick(event: Event) {\n    const { disabled } = this;\n    if (disabled) {\n      event.stopPropagation();\n    } else {\n      const panel = this.ownerDocument?.querySelector(`#${this.panelId}`);\n\n      // see if there is related panel for header-global-action button first\n      // and then set the expanded attr of it accordingly\n      if (panel) {\n        const expanded = panel.getAttribute('expanded');\n\n        if (expanded) {\n          panel.removeAttribute('expanded');\n        } else {\n          panel.setAttribute('expanded', 'true');\n        }\n\n        const active = !this.active;\n        this.active = active;\n      }\n    }\n  }\n\n  @HostListener('keydown', { capture: true })\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _handleKeyDown(event: KeyboardEvent) {\n    const { key } = event;\n    if (key === 'Enter' || key === ' ') {\n      event.preventDefault();\n      this._handleClick(event);\n    } else if (key === 'Escape') {\n      const panel = this.ownerDocument?.querySelector(`#${this.panelId}`);\n      if (panel) {\n        panel.removeAttribute('expanded');\n      }\n      this.active = false;\n    }\n  }\n\n  updated(changedProperties) {\n    if (this._buttonNode) {\n      this._buttonNode.classList.add(`${prefix}--header__action`);\n\n      if (changedProperties.has('active') || changedProperties.size === 0) {\n        if (this.active) {\n          this._buttonNode.classList.add(`${prefix}--header__action--active`);\n\n          if (this.buttonLabelActive) {\n            this.tooltipText = this.buttonLabelActive;\n          }\n        } else {\n          this._buttonNode.classList.remove(\n            `${prefix}--header__action--active`\n          );\n\n          if (this.buttonLabelInactive) {\n            this.tooltipText = this.buttonLabelInactive;\n          }\n        }\n      }\n    }\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('active') && this._buttonNode) {\n      if (this.active) {\n        this._buttonNode.classList.add(`${prefix}--header__action--active`);\n\n        if (this.buttonLabelActive) {\n          this.tooltipText = this.buttonLabelActive;\n        }\n      } else {\n        this._buttonNode.classList.remove(`${prefix}--header__action--active`);\n\n        if (this.buttonLabelInactive) {\n          this.tooltipText = this.buttonLabelInactive;\n        }\n      }\n    }\n    return true;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default CDSHeaderGlobalAction;\n"],"mappings":"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"}
+{"version":3,"file":"header-global-action.js","names":["CDSButton","styles","customElement"],"sources":["../../../src/components/ui-shell/header-global-action.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 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 { LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport {\n  BUTTON_TOOLTIP_POSITION,\n  BUTTON_KIND,\n  BUTTON_SIZE,\n} from '../button/button';\nimport CDSButton from '../button/button';\nimport HostListener from '../../globals/decorators/host-listener';\nimport styles from './header.scss?lit';\nimport { prefix } from '../../globals/settings';\n\n/**\n * Header global action button\n *\n * @element cds-header-global-action\n */\n@customElement(`${prefix}-header-global-action`)\nclass CDSHeaderGlobalAction extends CDSButton {\n  @query('button')\n  protected _buttonNode!: HTMLButtonElement;\n\n  /**\n   * Specify whether the action is currently active\n   */\n  @property({ type: Boolean, reflect: true })\n  active;\n\n  /**\n   * Specify which header panel the button is associated with.\n   */\n  @property({ type: String, attribute: 'panel-id', reflect: true })\n  panelId;\n\n  /**\n   * The `aria-label` attribute for the button in its active state.\n   */\n  @property({ attribute: 'button-label-active' })\n  buttonLabelActive;\n\n  /**\n   * The `aria-label` attribute for the button in its inactive state.\n   */\n  @property({ attribute: 'button-label-inactive' })\n  buttonLabelInactive;\n\n  connectedCallback() {\n    this.tooltipPosition = BUTTON_TOOLTIP_POSITION.BOTTOM;\n    this.kind = BUTTON_KIND.GHOST;\n    this.size = BUTTON_SIZE.LARGE;\n    super.connectedCallback();\n  }\n\n  firstUpdated() {\n    document.addEventListener('click', this._handleDocumentClick, true);\n    document.addEventListener('focusin', this._handleDocumentFocusIn, true);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this._handleDocumentClick, true);\n    document.removeEventListener('focusin', this._handleDocumentFocusIn, true);\n    super.disconnectedCallback();\n  }\n\n  private _handleDocumentClick = (event: MouseEvent) => {\n    const path = event.composedPath();\n    this._handlePanelCloseIfFocusOutside(path);\n  };\n\n  private _handleDocumentFocusIn = (event: FocusEvent) => {\n    const path = event.composedPath();\n    this._handlePanelCloseIfFocusOutside(path);\n  };\n\n  private _handlePanelCloseIfFocusOutside(path: EventTarget[]) {\n    const panel = this.ownerDocument?.querySelector(`#${this.panelId}`);\n    const isInside = path.some(\n      (el) =>\n        el instanceof HTMLElement && (panel?.contains(el) || this.contains(el))\n    );\n\n    if (panel && !isInside) {\n      panel.removeAttribute('expanded');\n      this.active = false;\n    }\n  }\n\n  @HostListener('focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _handleFocusOut(event: FocusEvent) {\n    const panel = this.ownerDocument?.querySelector(`#${this.panelId}`);\n    const relatedTarget = event.relatedTarget as HTMLElement;\n\n    if (\n      panel &&\n      relatedTarget &&\n      !this.contains(relatedTarget) &&\n      !panel.contains(relatedTarget)\n    ) {\n      panel.removeAttribute('expanded');\n      this.active = false;\n    }\n  }\n\n  @HostListener('click', { capture: true })\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _handleClick(event: Event) {\n    const { disabled } = this;\n    if (disabled) {\n      event.stopPropagation();\n    } else {\n      const panel = this.ownerDocument?.querySelector(`#${this.panelId}`);\n\n      // see if there is related panel for header-global-action button first\n      // and then set the expanded attr of it accordingly\n      if (panel) {\n        const expanded = panel.getAttribute('expanded');\n\n        if (expanded) {\n          panel.removeAttribute('expanded');\n        } else {\n          panel.setAttribute('expanded', 'true');\n        }\n\n        const active = !this.active;\n        this.active = active;\n      }\n    }\n  }\n\n  @HostListener('keydown', { capture: true })\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _handleKeyDown(event: KeyboardEvent) {\n    const { key } = event;\n    if (key === 'Enter' || key === ' ') {\n      event.preventDefault();\n      this._handleClick(event);\n    } else if (key === 'Escape') {\n      const panel = this.ownerDocument?.querySelector(`#${this.panelId}`);\n      if (panel) {\n        panel.removeAttribute('expanded');\n      }\n      this.active = false;\n    }\n  }\n\n  updated(changedProperties) {\n    if (this._buttonNode) {\n      this._buttonNode.classList.add(`${prefix}--header__action`);\n\n      if (changedProperties.has('active') || changedProperties.size === 0) {\n        if (this.active) {\n          this._buttonNode.classList.add(`${prefix}--header__action--active`);\n\n          if (this.buttonLabelActive) {\n            this.tooltipText = this.buttonLabelActive;\n          }\n        } else {\n          this._buttonNode.classList.remove(\n            `${prefix}--header__action--active`\n          );\n\n          if (this.buttonLabelInactive) {\n            this.tooltipText = this.buttonLabelInactive;\n          }\n        }\n      }\n    }\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('active') && this._buttonNode) {\n      if (this.active) {\n        this._buttonNode.classList.add(`${prefix}--header__action--active`);\n\n        if (this.buttonLabelActive) {\n          this.tooltipText = this.buttonLabelActive;\n        }\n      } else {\n        this._buttonNode.classList.remove(`${prefix}--header__action--active`);\n\n        if (this.buttonLabelInactive) {\n          this.tooltipText = this.buttonLabelInactive;\n        }\n      }\n    }\n    return true;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default CDSHeaderGlobalAction;\n"],"mappings":"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"}

package/es/components/ui-shell/header-menu-button.js

@@ -5,13 +5,13 @@
  * 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 FocusMixin from "../../globals/mixins/focus.js";
 import header_default from "./header.scss.js";
-import { SIDE_NAV_COLLAPSE_MODE } from "./defs.js";
+import "./defs.js";
 import "./side-nav.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
@@ -19,7 +19,6 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import Close16 from "@carbon/icons/es/close/16.js";
 import Menu16 from "@carbon/icons/es/menu/16.js";
-
 //#region src/components/ui-shell/header-menu-button.ts
 /**
 * Copyright IBM Corp. 2019, 2023
@@ -41,7 +40,7 @@ let CDSHeaderMenuButton = class CDSHeaderMenuButton extends FocusMixin(LitElemen
 		this.active = false;
 		this.buttonLabelActive = "Close navigation menu";
 		this.buttonLabelInactive = "Open navigation menu";
-		this.collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;
+		this.collapseMode = "responsive";
 		this.disabled = false;
 		this.isNotChildOfHeader = false;
 	}
@@ -62,10 +61,10 @@ let CDSHeaderMenuButton = class CDSHeaderMenuButton extends FocusMixin(LitElemen
       <button
         part="button"
         class="${classMap({
-			[`${prefix}--header__action`]: true,
-			[`${prefix}--header__menu-trigger`]: true,
-			[`${prefix}--header__menu-toggle`]: true,
-			[`${prefix}--header__action--active`]: active
+			[`cds--header__action`]: true,
+			[`cds--header__menu-trigger`]: true,
+			[`cds--header__menu-toggle`]: true,
+			[`cds--header__action--active`]: active
 		})}"
         ?disabled=${disabled}
         aria-label="${ifDefined(buttonLabel)}"
@@ -78,7 +77,7 @@ let CDSHeaderMenuButton = class CDSHeaderMenuButton extends FocusMixin(LitElemen
 	* The name of the custom event fired after this header menu button is toggled upon a user gesture.
 	*/
 	static get eventToggle() {
-		return `${prefix}-header-menu-button-toggled`;
+		return `cds-header-menu-button-toggled`;
 	}
 	static {
 		this.shadowRootOptions = {
@@ -108,9 +107,9 @@ __decorate([property({
 	type: Boolean,
 	attribute: "is-not-child-of-header"
 })], CDSHeaderMenuButton.prototype, "isNotChildOfHeader", void 0);
-CDSHeaderMenuButton = __decorate([carbonElement(`${prefix}-header-menu-button`)], CDSHeaderMenuButton);
+CDSHeaderMenuButton = __decorate([carbonElement(`cds-header-menu-button`)], CDSHeaderMenuButton);
 var header_menu_button_default = CDSHeaderMenuButton;
-
 //#endregion
 export { header_menu_button_default as default };
+
 //# sourceMappingURL=header-menu-button.js.map

package/es/components/ui-shell/header-menu-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-menu-button.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/header-menu-button.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport Menu16 from '@carbon/icons/es/menu/16.js';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { SIDE_NAV_COLLAPSE_MODE } from './side-nav';\nimport styles from './header.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * The trigger button for side nav in header nav.\n *\n * @element cds-header-menu-button\n * @csspart button The button.\n * @csspart toggle-icon The toggle icon.\n * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.\n */\n@customElement(`${prefix}-header-menu-button`)\nclass CDSHeaderMenuButton extends FocusMixin(LitElement) {\n  private _handleClick() {\n    const active = !this.active;\n    this.active = active;\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSHeaderMenuButton).eventToggle,\n        {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            active,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * `true` if the button should represent its active state.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * The `aria-label` attribute for the button in its active state.\n   */\n  @property({ attribute: 'button-label-active' })\n  buttonLabelActive = 'Close navigation menu';\n\n  /**\n   * The `aria-label` attribute for the button in its inactive state.\n   */\n  @property({ attribute: 'button-label-inactive' })\n  buttonLabelInactive = 'Open navigation menu';\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * If `true` will style the side nav to sit below the header\n   */\n  @property({\n    type: Boolean,\n    attribute: 'is-not-child-of-header',\n  })\n  isNotChildOfHeader = false;\n\n  render() {\n    const {\n      active,\n      buttonLabelActive,\n      buttonLabelInactive,\n      disabled,\n      _handleClick: handleClick,\n    } = this;\n    const buttonLabel = active ? buttonLabelActive : buttonLabelInactive;\n    const classes = classMap({\n      [`${prefix}--header__action`]: true,\n      [`${prefix}--header__menu-trigger`]: true,\n      [`${prefix}--header__menu-toggle`]: true,\n      [`${prefix}--header__action--active`]: active,\n    });\n    return html`\n      <button\n        part=\"button\"\n        class=\"${classes}\"\n        ?disabled=${disabled}\n        aria-label=\"${ifDefined(buttonLabel)}\"\n        @click=${handleClick}>\n        ${iconLoader(active ? Close16 : Menu16, { part: 'toggle-icon' })}\n      </button>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this header menu button is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSHeaderMenuButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,gCACM,4BAA4B,WAAW,WAAW,CAAC;;;gBAuB9C;2BAMW;6BAME;sBAMP,uBAAuB;kBAM3B;4BASU;;CAvDrB,AAAQ,eAAe;EACrB,MAAM,SAAS,CAAC,KAAK;AACrB,OAAK,SAAS;AACd,OAAK,cACH,IAAI,YACD,KAAK,YAA2C,aACjD;GACE,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQ,EACN,QACD;GACF,CACF,CACF;;CA0CH,SAAS;EACP,MAAM,EACJ,QACA,mBACA,qBACA,UACA,cAAc,gBACZ;EACJ,MAAM,cAAc,SAAS,oBAAoB;AAOjD,SAAO,IAAI;;;iBANK,SAAS;IACtB,GAAG,OAAO,oBAAoB;IAC9B,GAAG,OAAO,0BAA0B;IACpC,GAAG,OAAO,yBAAyB;IACnC,GAAG,OAAO,4BAA4B;GACxC,CAAC,CAImB;oBACL,SAAS;sBACP,UAAU,YAAY,CAAC;iBAC5B,YAAY;UACnB,WAAW,SAAS,UAAU,QAAQ,EAAE,MAAM,eAAe,CAAC,CAAC;;;;;;;CAQvE,WAAW,cAAc;AACvB,SAAO,GAAG,OAAO;;;2BAGQ;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YA1Ef,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS,EAAE,WAAW,uBAAuB,CAAC;YAM9C,SAAS,EAAE,WAAW,yBAAyB,CAAC;YAMhD,SAAS;CAAE,SAAS;CAAM,WAAW;CAAiB,CAAC;YAMvD,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CACR,MAAM;CACN,WAAW;CACZ,CAAC;kCAxDHC,cAAc,GAAG,OAAO,qBAAqB;AAoG9C,iCAAe"}
+{"version":3,"file":"header-menu-button.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/header-menu-button.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport Menu16 from '@carbon/icons/es/menu/16.js';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { SIDE_NAV_COLLAPSE_MODE } from './side-nav';\nimport styles from './header.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * The trigger button for side nav in header nav.\n *\n * @element cds-header-menu-button\n * @csspart button The button.\n * @csspart toggle-icon The toggle icon.\n * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.\n */\n@customElement(`${prefix}-header-menu-button`)\nclass CDSHeaderMenuButton extends FocusMixin(LitElement) {\n  private _handleClick() {\n    const active = !this.active;\n    this.active = active;\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSHeaderMenuButton).eventToggle,\n        {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            active,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * `true` if the button should represent its active state.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * The `aria-label` attribute for the button in its active state.\n   */\n  @property({ attribute: 'button-label-active' })\n  buttonLabelActive = 'Close navigation menu';\n\n  /**\n   * The `aria-label` attribute for the button in its inactive state.\n   */\n  @property({ attribute: 'button-label-inactive' })\n  buttonLabelInactive = 'Open navigation menu';\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * If `true` will style the side nav to sit below the header\n   */\n  @property({\n    type: Boolean,\n    attribute: 'is-not-child-of-header',\n  })\n  isNotChildOfHeader = false;\n\n  render() {\n    const {\n      active,\n      buttonLabelActive,\n      buttonLabelInactive,\n      disabled,\n      _handleClick: handleClick,\n    } = this;\n    const buttonLabel = active ? buttonLabelActive : buttonLabelInactive;\n    const classes = classMap({\n      [`${prefix}--header__action`]: true,\n      [`${prefix}--header__menu-trigger`]: true,\n      [`${prefix}--header__menu-toggle`]: true,\n      [`${prefix}--header__action--active`]: active,\n    });\n    return html`\n      <button\n        part=\"button\"\n        class=\"${classes}\"\n        ?disabled=${disabled}\n        aria-label=\"${ifDefined(buttonLabel)}\"\n        @click=${handleClick}>\n        ${iconLoader(active ? Close16 : Menu16, { part: 'toggle-icon' })}\n      </button>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this header menu button is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSHeaderMenuButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAA,sBAAA,MACM,4BAA4B,WAAW,WAAW,CAAC;;;gBAuB9C;2BAMW;6BAME;;kBAYX;4BASU;;CAvDrB,eAAuB;EACrB,MAAM,SAAS,CAAC,KAAK;AACrB,OAAK,SAAS;AACd,OAAK,cACH,IAAI,YACD,KAAK,YAA2C,aACjD;GACE,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQ,EACN,QACD;GACF,CACF,CACF;;CA0CH,SAAS;EACP,MAAM,EACJ,QACA,mBACA,qBACA,UACA,cAAc,gBACZ;EACJ,MAAM,cAAc,SAAS,oBAAoB;AAOjD,SAAO,IAAI;;;iBANK,SAAS;IACtB,wBAA8B;IAC9B,8BAAoC;IACpC,6BAAmC;IACnC,gCAAsC;GACxC,CAAC,CAImB;oBACL,SAAS;sBACP,UAAU,YAAY,CAAC;iBAC5B,YAAY;UACnB,WAAW,SAAS,UAAU,QAAQ,EAAE,MAAM,eAAe,CAAC,CAAC;;;;;;;CAQvE,WAAW,cAAc;AACvB,SAAO;;;2BAGkB;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YA1Ef,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,UAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,WAAW,uBAAuB,CAAC,CAAA,EAAA,oBAAA,WAAA,qBAAA,KAAA,EAAA;YAM9C,SAAS,EAAE,WAAW,yBAAyB,CAAC,CAAA,EAAA,oBAAA,WAAA,uBAAA,KAAA,EAAA;YAMhD,SAAS;CAAE,SAAS;CAAM,WAAW;CAAiB,CAAC,CAAA,EAAA,oBAAA,WAAA,gBAAA,KAAA,EAAA;YAMvD,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CACR,MAAM;CACN,WAAW;CACZ,CAAC,CAAA,EAAA,oBAAA,WAAA,sBAAA,KAAA,EAAA;kCAxDHC,cAAc,yBAA+B,CAAA,EAAA,oBAAA;AAoG9C,IAAA,6BAAe"}

package/es/components/ui-shell/header-menu-item.js

@@ -5,11 +5,10 @@
  * 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 header_nav_item_default from "./header-nav-item.js";
-
 //#region src/components/ui-shell/header-menu-item.ts
 /**
 * Copyright IBM Corp. 2019, 2023
@@ -23,9 +22,9 @@ import header_nav_item_default from "./header-nav-item.js";
 * @element cds-header-menu-item
 */
 let CDSHeaderMenuItem = class CDSHeaderMenuItem extends header_nav_item_default {};
-CDSHeaderMenuItem = __decorate([carbonElement(`${prefix}-header-menu-item`)], CDSHeaderMenuItem);
+CDSHeaderMenuItem = __decorate([carbonElement(`cds-header-menu-item`)], CDSHeaderMenuItem);
 var header_menu_item_default = CDSHeaderMenuItem;
-
 //#endregion
 export { header_menu_item_default as default };
+
 //# sourceMappingURL=header-menu-item.js.map

package/es/components/ui-shell/header-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-menu-item.js","names":["CDSHeaderNavItem","customElement"],"sources":["../../../src/components/ui-shell/header-menu-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { prefix } from '../../globals/settings';\nimport CDSHeaderNavItem from './header-nav-item';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Header submenu item.\n *\n * @element cds-header-menu-item\n */\n@customElement(`${prefix}-header-menu-item`)\nclass CDSHeaderMenuItem extends CDSHeaderNavItem {}\n\nexport default CDSHeaderMenuItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgBA,8BACM,0BAA0BA,wBAAiB;gCADhDC,cAAc,GAAG,OAAO,mBAAmB;AAG5C,+BAAe"}
+{"version":3,"file":"header-menu-item.js","names":["CDSHeaderNavItem","customElement"],"sources":["../../../src/components/ui-shell/header-menu-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { prefix } from '../../globals/settings';\nimport CDSHeaderNavItem from './header-nav-item';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Header submenu item.\n *\n * @element cds-header-menu-item\n */\n@customElement(`${prefix}-header-menu-item`)\nclass CDSHeaderMenuItem extends CDSHeaderNavItem {}\n\nexport default CDSHeaderMenuItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBA,IAAA,oBAAA,MACM,0BAA0BA,wBAAiB;gCADhDC,cAAc,uBAA6B,CAAA,EAAA,kBAAA;AAG5C,IAAA,2BAAe"}

package/es/components/ui-shell/header-menu.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { forEach } from "../../globals/internal/collection-helpers.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.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 FocusMixin from "../../globals/mixins/focus.js";
 import HostListener from "../../globals/decorators/host-listener.js";
@@ -19,7 +19,6 @@ import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import ChevronDown16 from "@carbon/icons/es/chevron--down/16.js";
-
 //#region src/components/ui-shell/header-menu.ts
 /**
 * Copyright IBM Corp. 2019, 2026
@@ -95,9 +94,9 @@ let CDSHeaderMenu = class CDSHeaderMenu extends HostListenerMixin(FocusMixin(Lit
         role="button"
         tabindex="0"
         class="${classMap({
-			[`${prefix}--header__menu-item`]: true,
-			[`${prefix}--header__menu-title`]: true,
-			[`${prefix}--header__menu-item--current`]: isActive || _hasActiveChildren && !expanded
+			[`cds--header__menu-item`]: true,
+			[`cds--header__menu-title`]: true,
+			[`cds--header__menu-item--current`]: isActive || _hasActiveChildren && !expanded
 		})}"
         href="javascript:void 0"
         aria-haspopup="menu"
@@ -105,12 +104,12 @@ let CDSHeaderMenu = class CDSHeaderMenu extends HostListenerMixin(FocusMixin(Lit
         @click=${handleClick}>
         ${triggerContent}${iconLoader(ChevronDown16, {
 			part: "trigger-icon",
-			class: `${prefix}--header__menu-arrow`
+			class: `cds--header__menu-arrow`
 		})}
       </a>
       <ul
         part="menu-body"
-        class="${prefix}--header__menu"
+        class="${"cds"}--header__menu"
         aria-label="${ifDefined(menuLabel)}">
         <slot></slot>
       </ul>
@@ -120,7 +119,7 @@ let CDSHeaderMenu = class CDSHeaderMenu extends HostListenerMixin(FocusMixin(Lit
 	* A selector that will return the menu items.
 	*/
 	static get selectorItem() {
-		return `${prefix}-header-menu-item`;
+		return `cds-header-menu-item`;
 	}
 	static {
 		this.shadowRootOptions = {
@@ -146,9 +145,9 @@ __decorate([property({
 })], CDSHeaderMenu.prototype, "isActive", void 0);
 __decorate([property({ attribute: "trigger-content" })], CDSHeaderMenu.prototype, "triggerContent", void 0);
 __decorate([property({ attribute: "menu-label" })], CDSHeaderMenu.prototype, "menuLabel", void 0);
-CDSHeaderMenu = __decorate([carbonElement(`${prefix}-header-menu`)], CDSHeaderMenu);
+CDSHeaderMenu = __decorate([carbonElement(`cds-header-menu`)], CDSHeaderMenu);
 var header_menu_default = CDSHeaderMenu;
-
 //#endregion
 export { header_menu_default as default };
+
 //# sourceMappingURL=header-menu.js.map

package/es/components/ui-shell/header-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-menu.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/header-menu.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport ChevronDown16 from '@carbon/icons/es/chevron--down/16.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport CDSHeaderMenuItem from './header-menu-item';\nimport styles from './header.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Header menu.\n *\n * @element cds-header-menu\n * @csspart trigger The trigger button.\n * @csspart trigger-icon The trigger button icon.\n * @csspart menu-body The menu body.\n */\n@customElement(`${prefix}-header-menu`)\nclass CDSHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The trigger button.\n   */\n  @query('[part=\"trigger\"]')\n  protected _topMenuItem!: HTMLElement;\n\n  /**\n   * keeps track if header menu has any active submenus\n   */\n  private _hasActiveChildren = false;\n\n  /**\n   * Handles `click` event handler on this element.\n   */\n  private _handleClick() {\n    this._handleUserInitiatedToggle();\n  }\n\n  /**\n   * Handler for the `keydown` event on the trigger button.\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 _handleKeydownTrigger({ key }: KeyboardEvent) {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles user-initiated toggling the open state.\n   *\n   * @param [force] If specified, forces the open state to the given one.\n   */\n  private _handleUserInitiatedToggle(force = !this.expanded) {\n    this.expanded = force;\n    if (!force) {\n      this._topMenuItem.focus();\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on this element.\n   */\n  @HostListener('focusout')\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 _handleBlur({ relatedTarget }: FocusEvent) {\n    if (!this.contains(relatedTarget as Node)) {\n      this.expanded = false;\n    }\n  }\n\n  /**\n   * `true` if the menu should be expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.\n   */\n  @property({ type: Boolean, attribute: 'is-active', reflect: true })\n  isActive = false;\n\n  /**\n   * The content of the trigger button.\n   */\n  @property({ attribute: 'trigger-content' })\n  triggerContent = '';\n\n  /**\n   * The `aria-label` attribute for the menu UI.\n   */\n  @property({ attribute: 'menu-label' })\n  menuLabel!: string;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    const { selectorItem } = this.constructor as typeof CDSHeaderMenu;\n    forEach(this.querySelectorAll(selectorItem), (elem) => {\n      if ((elem as CDSHeaderMenuItem).isActive === true) {\n        this._hasActiveChildren = true;\n      }\n    });\n\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      const { selectorItem } = this.constructor as typeof CDSHeaderMenu;\n      const { expanded } = this;\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as HTMLElement).tabIndex = expanded ? 0 : -1;\n      });\n    }\n  }\n\n  render() {\n    const {\n      expanded,\n      isActive,\n      triggerContent,\n      menuLabel,\n      _hasActiveChildren,\n      _handleClick: handleClick,\n    } = this;\n\n    const linkClasses = classMap({\n      [`${prefix}--header__menu-item`]: true,\n      [`${prefix}--header__menu-title`]: true,\n      [`${prefix}--header__menu-item--current`]:\n        isActive || (_hasActiveChildren && !expanded),\n    });\n\n    return html`\n      <a\n        part=\"trigger\"\n        role=\"button\"\n        tabindex=\"0\"\n        class=\"${linkClasses}\"\n        href=\"javascript:void 0\"\n        aria-haspopup=\"menu\"\n        aria-expanded=\"${String(expanded)}\"\n        @click=${handleClick}>\n        ${triggerContent}${iconLoader(ChevronDown16, {\n          part: 'trigger-icon',\n          class: `${prefix}--header__menu-arrow`,\n        })}\n      </a>\n      <ul\n        part=\"menu-body\"\n        class=\"${prefix}--header__menu\"\n        aria-label=\"${ifDefined(menuLabel)}\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n\n  /**\n   * A selector that will return the menu items.\n   */\n  static get selectorItem() {\n    return `${prefix}-header-menu-item`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSHeaderMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,0BACM,sBAAsB,kBAAkB,WAAW,WAAW,CAAC,CAAC;;;4BAUvC;kBAiDlB;kBAMA;wBAMM;;;;;CAxDjB,AAAQ,eAAe;AACrB,OAAK,4BAA4B;;;;;CAMnC,AAGQ,sBAAsB,EAAE,OAAsB;AACpD,MAAI,QAAQ,SAAS,QAAQ,SAC3B,MAAK,2BAA2B,MAAM;;;;;;;CAS1C,AAAQ,2BAA2B,QAAQ,CAAC,KAAK,UAAU;AACzD,OAAK,WAAW;AAChB,MAAI,CAAC,MACH,MAAK,aAAa,OAAO;;;;;CAO7B,AAGQ,YAAY,EAAE,iBAA6B;AACjD,MAAI,CAAC,KAAK,SAAS,cAAsB,CACvC,MAAK,WAAW;;CA4BpB,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,WAAW;EAEvC,MAAM,EAAE,iBAAiB,KAAK;AAC9B,UAAQ,KAAK,iBAAiB,aAAa,GAAG,SAAS;AACrD,OAAK,KAA2B,aAAa,KAC3C,MAAK,qBAAqB;IAE5B;AAEF,QAAM,mBAAmB;;CAG3B,QAAQ,mBAAmB;AACzB,MAAI,kBAAkB,IAAI,WAAW,EAAE;GACrC,MAAM,EAAE,iBAAiB,KAAK;GAC9B,MAAM,EAAE,aAAa;AACrB,WAAQ,KAAK,iBAAiB,aAAa,GAAG,SAAS;AACrD,IAAC,KAAqB,WAAW,WAAW,IAAI;KAChD;;;CAIN,SAAS;EACP,MAAM,EACJ,UACA,UACA,gBACA,WACA,oBACA,cAAc,gBACZ;AASJ,SAAO,IAAI;;;;;iBAPS,SAAS;IAC1B,GAAG,OAAO,uBAAuB;IACjC,GAAG,OAAO,wBAAwB;IAClC,GAAG,OAAO,gCACT,YAAa,sBAAsB,CAAC;GACvC,CAAC,CAOuB;;;yBAGJ,OAAO,SAAS,CAAC;iBACzB,YAAY;UACnB,iBAAiB,WAAW,eAAe;GAC3C,MAAM;GACN,OAAO,GAAG,OAAO;GAClB,CAAC,CAAC;;;;iBAIM,OAAO;sBACF,UAAU,UAAU,CAAC;;;;;;;;CASzC,WAAW,eAAe;AACxB,SAAO,GAAG,OAAO;;;2BAGQ;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YAvJf,MAAM,qBAAmB;YAkBzB,aAAa,UAAU;YAwBvB,aAAa,WAAW;YAYxB,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAS,WAAW;CAAa,SAAS;CAAM,CAAC;YAMlE,SAAS,EAAE,WAAW,mBAAmB,CAAC;YAM1C,SAAS,EAAE,WAAW,cAAc,CAAC;4BA7EvCC,cAAc,GAAG,OAAO,cAAc;AA+JvC,0BAAe"}
+{"version":3,"file":"header-menu.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/header-menu.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport ChevronDown16 from '@carbon/icons/es/chevron--down/16.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport CDSHeaderMenuItem from './header-menu-item';\nimport styles from './header.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Header menu.\n *\n * @element cds-header-menu\n * @csspart trigger The trigger button.\n * @csspart trigger-icon The trigger button icon.\n * @csspart menu-body The menu body.\n */\n@customElement(`${prefix}-header-menu`)\nclass CDSHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The trigger button.\n   */\n  @query('[part=\"trigger\"]')\n  protected _topMenuItem!: HTMLElement;\n\n  /**\n   * keeps track if header menu has any active submenus\n   */\n  private _hasActiveChildren = false;\n\n  /**\n   * Handles `click` event handler on this element.\n   */\n  private _handleClick() {\n    this._handleUserInitiatedToggle();\n  }\n\n  /**\n   * Handler for the `keydown` event on the trigger button.\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 _handleKeydownTrigger({ key }: KeyboardEvent) {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles user-initiated toggling the open state.\n   *\n   * @param [force] If specified, forces the open state to the given one.\n   */\n  private _handleUserInitiatedToggle(force = !this.expanded) {\n    this.expanded = force;\n    if (!force) {\n      this._topMenuItem.focus();\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on this element.\n   */\n  @HostListener('focusout')\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 _handleBlur({ relatedTarget }: FocusEvent) {\n    if (!this.contains(relatedTarget as Node)) {\n      this.expanded = false;\n    }\n  }\n\n  /**\n   * `true` if the menu should be expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.\n   */\n  @property({ type: Boolean, attribute: 'is-active', reflect: true })\n  isActive = false;\n\n  /**\n   * The content of the trigger button.\n   */\n  @property({ attribute: 'trigger-content' })\n  triggerContent = '';\n\n  /**\n   * The `aria-label` attribute for the menu UI.\n   */\n  @property({ attribute: 'menu-label' })\n  menuLabel!: string;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    const { selectorItem } = this.constructor as typeof CDSHeaderMenu;\n    forEach(this.querySelectorAll(selectorItem), (elem) => {\n      if ((elem as CDSHeaderMenuItem).isActive === true) {\n        this._hasActiveChildren = true;\n      }\n    });\n\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      const { selectorItem } = this.constructor as typeof CDSHeaderMenu;\n      const { expanded } = this;\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as HTMLElement).tabIndex = expanded ? 0 : -1;\n      });\n    }\n  }\n\n  render() {\n    const {\n      expanded,\n      isActive,\n      triggerContent,\n      menuLabel,\n      _hasActiveChildren,\n      _handleClick: handleClick,\n    } = this;\n\n    const linkClasses = classMap({\n      [`${prefix}--header__menu-item`]: true,\n      [`${prefix}--header__menu-title`]: true,\n      [`${prefix}--header__menu-item--current`]:\n        isActive || (_hasActiveChildren && !expanded),\n    });\n\n    return html`\n      <a\n        part=\"trigger\"\n        role=\"button\"\n        tabindex=\"0\"\n        class=\"${linkClasses}\"\n        href=\"javascript:void 0\"\n        aria-haspopup=\"menu\"\n        aria-expanded=\"${String(expanded)}\"\n        @click=${handleClick}>\n        ${triggerContent}${iconLoader(ChevronDown16, {\n          part: 'trigger-icon',\n          class: `${prefix}--header__menu-arrow`,\n        })}\n      </a>\n      <ul\n        part=\"menu-body\"\n        class=\"${prefix}--header__menu\"\n        aria-label=\"${ifDefined(menuLabel)}\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n\n  /**\n   * A selector that will return the menu items.\n   */\n  static get selectorItem() {\n    return `${prefix}-header-menu-item`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSHeaderMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAA,gBAAA,MACM,sBAAsB,kBAAkB,WAAW,WAAW,CAAC,CAAC;;;4BAUvC;kBAiDlB;kBAMA;wBAMM;;;;;CAxDjB,eAAuB;AACrB,OAAK,4BAA4B;;;;;CAMnC,sBAG8B,EAAE,OAAsB;AACpD,MAAI,QAAQ,SAAS,QAAQ,SAC3B,MAAK,2BAA2B,MAAM;;;;;;;CAS1C,2BAAmC,QAAQ,CAAC,KAAK,UAAU;AACzD,OAAK,WAAW;AAChB,MAAI,CAAC,MACH,MAAK,aAAa,OAAO;;;;;CAO7B,YAGoB,EAAE,iBAA6B;AACjD,MAAI,CAAC,KAAK,SAAS,cAAsB,CACvC,MAAK,WAAW;;CA4BpB,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,WAAW;EAEvC,MAAM,EAAE,iBAAiB,KAAK;AAC9B,UAAQ,KAAK,iBAAiB,aAAa,GAAG,SAAS;AACrD,OAAK,KAA2B,aAAa,KAC3C,MAAK,qBAAqB;IAE5B;AAEF,QAAM,mBAAmB;;CAG3B,QAAQ,mBAAmB;AACzB,MAAI,kBAAkB,IAAI,WAAW,EAAE;GACrC,MAAM,EAAE,iBAAiB,KAAK;GAC9B,MAAM,EAAE,aAAa;AACrB,WAAQ,KAAK,iBAAiB,aAAa,GAAG,SAAS;AACpD,SAAqB,WAAW,WAAW,IAAI;KAChD;;;CAIN,SAAS;EACP,MAAM,EACJ,UACA,UACA,gBACA,WACA,oBACA,cAAc,gBACZ;AASJ,SAAO,IAAI;;;;;iBAPS,SAAS;IAC1B,2BAAiC;IACjC,4BAAkC;IAClC,oCACC,YAAa,sBAAsB,CAAC;GACvC,CAAC,CAOuB;;;yBAGJ,OAAO,SAAS,CAAC;iBACzB,YAAY;UACnB,iBAAiB,WAAW,eAAe;GAC3C,MAAM;GACN,OAAO;GACR,CAAC,CAAC;;;;uBAIa;sBACF,UAAU,UAAU,CAAC;;;;;;;;CASzC,WAAW,eAAe;AACxB,SAAO;;;2BAGkB;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YAvJf,MAAM,qBAAmB,CAAA,EAAA,cAAA,WAAA,gBAAA,KAAA,EAAA;YAkBzB,aAAa,UAAU,CAAA,EAAA,cAAA,WAAA,yBAAA,KAAA;YAwBvB,aAAa,WAAW,CAAA,EAAA,cAAA,WAAA,eAAA,KAAA;YAYxB,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,WAAW;CAAa,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,YAAA,KAAA,EAAA;YAMlE,SAAS,EAAE,WAAW,mBAAmB,CAAC,CAAA,EAAA,cAAA,WAAA,kBAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,WAAW,cAAc,CAAC,CAAA,EAAA,cAAA,WAAA,aAAA,KAAA,EAAA;4BA7EvCC,cAAc,kBAAwB,CAAA,EAAA,cAAA;AA+JvC,IAAA,sBAAe"}