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

package/es-custom/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-custom--layer-one,:root{--cds-layer:var(--cds-layer-01,#f4f4f4);--cds-layer-active:var(--cds-layer-active-01,#c6c6c6);--cds-layer-background:var(--cds-layer-background-01,#fff);--cds-layer-hover:var(--cds-layer-hover-01,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01,#a8a8a8);--cds-field:var(--cds-field-01,#f4f4f4);--cds-field-hover:var(--cds-field-hover-01,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01,#c6c6c6);--cds-border-strong:var(--cds-border-strong-01,#8d8d8d);--cds-border-tile:var(--cds-border-tile-01,#c6c6c6)}.cds-custom--layer-two{--cds-layer:var(--cds-layer-02,#fff);--cds-layer-active:var(--cds-layer-active-02,#c6c6c6);--cds-layer-background:var(--cds-layer-background-02,#f4f4f4);--cds-layer-hover:var(--cds-layer-hover-02,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02,#a8a8a8);--cds-field:var(--cds-field-02,#fff);--cds-field-hover:var(--cds-field-hover-02,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01,#c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02,#c6c6c6);--cds-border-strong:var(--cds-border-strong-02,#8d8d8d);--cds-border-tile:var(--cds-border-tile-02,#a8a8a8)}.cds-custom--layer-three{--cds-layer:var(--cds-layer-03,#f4f4f4);--cds-layer-active:var(--cds-layer-active-03,#c6c6c6);--cds-layer-background:var(--cds-layer-background-03,#fff);--cds-layer-hover:var(--cds-layer-hover-03,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03,#a8a8a8);--cds-field:var(--cds-field-03,#f4f4f4);--cds-field-hover:var(--cds-field-hover-03,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03,#c6c6c6);--cds-border-strong:var(--cds-border-strong-03,#8d8d8d);--cds-border-tile:var(--cds-border-tile-03,#c6c6c6)}.cds-custom--layer-one.cds-custom--layer__with-background,.cds-custom--layer-three.cds-custom--layer__with-background,.cds-custom--layer-two.cds-custom--layer__with-background{background-color:var(--cds-layer-background)}@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}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-custom--fieldset{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds-custom--fieldset *,.cds-custom--fieldset :after,.cds-custom--fieldset :before{box-sizing:inherit}.cds-custom--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-custom--label html{font-size:100%}.cds-custom--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-custom--label code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds-custom--label strong{font-weight:600}.cds-custom--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-custom--label,.cds-custom--label .cds-custom--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds-custom--label .cds-custom--toggletip-label{font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333)}.cds-custom--label--no-margin{margin-block-end:0}.cds-custom--label+.cds-custom--tooltip{inset-block-start:.2rem;inset-inline-start:.5rem;position:relative}.cds-custom--label+.cds-custom--tooltip .cds-custom--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-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger *,.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger :after,.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger :before{box-sizing:inherit}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger::-moz-focus-inner{border:0}.cds-custom--label+.cds-custom--tooltip .cds-custom--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-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds-custom--label+.cds-custom--toggletip{inset-block-start:.2rem;inset-inline-start:.5rem}.cds-custom--label.cds-custom--skeleton{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds-custom--label.cds-custom--skeleton:active,.cds-custom--label.cds-custom--skeleton:focus,.cds-custom--label.cds-custom--skeleton:hover{border:none;cursor:default;outline:none}.cds-custom--label.cds-custom--skeleton:before{animation:cds-custom--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-custom--label.cds-custom--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--label.cds-custom--skeleton{background:CanvasText}.cds-custom--label.cds-custom--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds-custom--label.cds-custom--skeleton{block-size:.875rem;inline-size:4.6875rem}input[type=number],input[type=text].cds-custom--number{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif}.cds-custom--combo-box[data-invalid]:not(.cds-custom--multi-select--selected) .cds-custom--text-input:not(:focus),.cds-custom--list-box[data-invalid]:not(.cds-custom--multi-select--invalid--focused,.cds-custom--combo-box--invalid--focused),.cds-custom--number[data-invalid] input[type=number]:not(:focus),.cds-custom--number[data-invalid] input[type=text]:not(:focus),.cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input:not(:focus),.cds-custom--text-area__wrapper[data-invalid]>.cds-custom--text-area--invalid:not(:focus),.cds-custom--text-input__field-wrapper[data-invalid]>.cds-custom--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-custom--combo-box[data-invalid]:not(.cds-custom--multi-select--selected) .cds-custom--text-input:not(:focus),.cds-custom--list-box[data-invalid]:not(.cds-custom--multi-select--invalid--focused,.cds-custom--combo-box--invalid--focused),.cds-custom--number[data-invalid] input[type=number]:not(:focus),.cds-custom--number[data-invalid] input[type=text]:not(:focus),.cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input:not(:focus),.cds-custom--text-area__wrapper[data-invalid]>.cds-custom--text-area--invalid:not(:focus),.cds-custom--text-input__field-wrapper[data-invalid]>.cds-custom--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds-custom--date-picker-input__wrapper--invalid~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper--warn~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper~.cds-custom--form-requirement,.cds-custom--list-box--warning~.cds-custom--form-requirement,.cds-custom--list-box[data-invalid]~.cds-custom--form-requirement,.cds-custom--number[data-invalid] .cds-custom--number__input-wrapper~.cds-custom--form-requirement,.cds-custom--number__input-wrapper--warning~.cds-custom--form-requirement,.cds-custom--select--warning .cds-custom--select-input__wrapper~.cds-custom--form-requirement,.cds-custom--select-input__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-area__wrapper--warn~.cds-custom--form-requirement,.cds-custom--text-area__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper--warning>.cds-custom--text-input~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper--warning~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--time-picker--invalid~.cds-custom--form-requirement,.cds-custom--time-picker--warning~.cds-custom--form-requirement,.cds-custom--time-picker[data-invalid]~.cds-custom--form-requirement,input[data-invalid]~.cds-custom--form-requirement{display:block;font-weight:400;max-block-size:12.5rem;overflow:visible}.cds-custom--select--inline.cds-custom--select--warning .cds-custom--select-input--inline__wrapper~.cds-custom--form-requirement,.cds-custom--select-input--inline__wrapper[data-invalid]~.cds-custom--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-custom--date-picker-input__wrapper--invalid~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper~.cds-custom--form-requirement,.cds-custom--list-box[data-invalid]~.cds-custom--form-requirement,.cds-custom--number[data-invalid] .cds-custom--number__input-wrapper~.cds-custom--form-requirement,.cds-custom--select-input--inline__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--select-input__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-area__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--time-picker--invalid~.cds-custom--form-requirement,.cds-custom--time-picker[data-invalid]~.cds-custom--form-requirement,input[data-invalid]~.cds-custom--form-requirement{color:var(--cds-text-error,#da1e28)}.cds-custom--form--fluid .cds-custom--text-input__field-wrapper--warning,.cds-custom--form--fluid .cds-custom--text-input__field-wrapper[data-invalid]{display:block}.cds-custom--form--fluid input[data-invalid]{outline:none}.cds-custom--form--fluid .cds-custom--form-requirement{margin:0;padding:.5rem 2.5rem .5rem 1rem}input:not(output,[data-invalid]):-moz-ui-invalid{box-shadow:none}.cds-custom--form-requirement html{font-size:100%}.cds-custom--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-custom--form-requirement code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds-custom--form-requirement strong{font-weight:600}.cds-custom--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-custom--select--inline .cds-custom--form__helper-text{margin-block-start:0}.cds-custom--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-custom--form__helper-text--disabled,.cds-custom--label--disabled,fieldset[disabled] .cds-custom--form__helper-text,fieldset[disabled] .cds-custom--label{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds-custom--tree{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds-custom--tree *,.cds-custom--tree :after,.cds-custom--tree :before{box-sizing:inherit}.cds-custom--tree{overflow:hidden}.cds-custom--tree-node,:host(cds-custom-tree-node:not([href])){background-color:var(--cds-layer-01,#f4f4f4);color:var(--cds-text-secondary,#525252);padding-inline-start:1rem}.cds-custom--tree-node:focus{outline:none}.cds-custom--tree-node:hover{cursor:pointer}.cds-custom--tree-node--hidden{display:none}.cds-custom--tree-node__children{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds-custom--tree-node__children *,.cds-custom--tree-node__children :after,.cds-custom--tree-node__children :before{box-sizing:inherit}.cds-custom--tree-node__children{list-style-type:none}.cds-custom--tree-node--with-icon .cds-custom--tree-node,.cds-custom--tree-node--with-icon :host(cds-custom-tree-node:not([href])){margin-inline-start:.5rem}.cds-custom--tree-node:focus>.cds-custom--tree-node__label{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--tree-node:focus>.cds-custom--tree-node__label{outline-style:dotted}}.cds-custom--tree-node.cds-custom--tree-parent-node>.cds-custom--tree-node__label{inline-size:auto}.cds-custom--tree-node--disabled:focus>.cds-custom--tree-node__label{outline:none}.cds-custom--tree-node--disabled,.cds-custom--tree-node--disabled .cds-custom--tree-node__label:hover,.cds-custom--tree-node--disabled .cds-custom--tree-node__label:hover .cds-custom--tree-node__label__details,:host(cds-custom-tree-node[disabled]:not([href])),:host(cds-custom-tree-node[disabled]:not([href])) .cds-custom--tree-node__label:hover,:host(cds-custom-tree-node[disabled]:not([href])) .cds-custom--tree-node__label:hover .cds-custom--tree-node__label__details{background-color:var(--cds-field-01,#f4f4f4);color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds-custom--tree-node--disabled .cds-custom--tree-node__icon,.cds-custom--tree-node--disabled .cds-custom--tree-node__label:hover .cds-custom--tree-node__icon,.cds-custom--tree-node--disabled .cds-custom--tree-node__label:hover .cds-custom--tree-parent-node__toggle-icon,.cds-custom--tree-node--disabled .cds-custom--tree-parent-node__toggle-icon,:host(cds-custom-tree-node:not([href])) .cds-custom--tree-node--disabled ::slotted([slot=icon]),:host(cds-custom-tree-node[disabled]:not([href])) .cds-custom--tree-node__icon,:host(cds-custom-tree-node[disabled]:not([href])) .cds-custom--tree-parent-node__toggle-icon,:host(cds-custom-tree-node[disabled]:not([href])):host(cds-custom-tree-node:not([href])) ::slotted([slot=icon]){fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds-custom--tree-node--disabled,.cds-custom--tree-node--disabled .cds-custom--tree-parent-node__toggle-icon:hover,:host(cds-custom-tree-node[disabled]:not([href])),:host(cds-custom-tree-node[disabled]:not([href])) .cds-custom--tree-parent-node__toggle-icon:hover{cursor:not-allowed}:host(cds-custom-tree-node[href][parent]) a.cds-custom--tree-node,li a.cds-custom--tree-node{text-decoration:none}:host(cds-custom-tree-node[href][parent]) a.cds-custom--tree-node:not(.cds-custom--tree-node--disabled),li a.cds-custom--tree-node:not(.cds-custom--tree-node--disabled){color:var(--cds-text-secondary,#525252)}:host(cds-custom-tree-node[href][parent]),li.cds-custom--tree-node-link-parent{background-color:var(--cds-layer-01,#f4f4f4);display:flex;flex-direction:column}:host(cds-custom-tree-node[href][parent])>.cds-custom--tree-node__children,li.cds-custom--tree-node-link-parent>.cds-custom--tree-node__children{padding-inline-start:1rem}.cds-custom--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-custom--tree-node__label:hover{background-color:var(--cds-layer-hover-01,#e8e8e8);color:var(--cds-text-primary,#161616)}.cds-custom--tree-node:not(.cds-custom--tree-parent-node) .cds-custom--tree-node__label,:not(.cds-custom--tree-parent-node):host(cds-custom-tree-node:not([href])) .cds-custom--tree-node__label{padding-block:.4375rem .4375rem}.cds-custom--tree-node__label:hover .cds-custom--tree-node__label__details{color:var(--cds-text-primary,#161616)}.cds-custom--tree-node__label:hover .cds-custom--tree-node__icon,.cds-custom--tree-node__label:hover .cds-custom--tree-parent-node__toggle-icon,:host(cds-custom-tree-node:not([href])) .cds-custom--tree-node__label:hover ::slotted([slot=icon]){fill:var(--cds-icon-primary,#161616)}.cds-custom--tree-leaf-node,:host(cds-custom-tree-node:not([parent]):not([href])){display:flex;padding-inline-start:2.5rem}.cds-custom--tree-leaf-node.cds-custom--tree-node--with-icon{padding-inline-start:2rem}.cds-custom--tree-leaf-node.cds-custom--tree-node--with-icon .cds-custom--tree-leaf-node,.cds-custom--tree-leaf-node.cds-custom--tree-node--with-icon :host(cds-custom-tree-node:not([parent]):not([href])){padding-inline-start:1.5rem}.cds-custom--tree-node__label__details{align-items:center;display:flex;min-inline-size:0}.cds-custom--tree-node--with-icon .cds-custom--tree-parent-node__toggle{margin-inline-end:0}.cds-custom--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-custom--tree-parent-node__toggle:hover{cursor:pointer}.cds-custom--tree-parent-node__toggle:focus{outline:none}.cds-custom--tree-parent-node__toggle-icon{fill:var(--cds-icon-secondary,#525252);transform:rotate(-90deg);transition:all .11s cubic-bezier(.2,0,.38,.9)}.cds-custom--tree-parent-node__toggle-icon--expanded{transform:rotate(0)}.cds-custom--tree-node__icon,:host(cds-custom-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-custom--tree-parent-node__toggle+.cds-custom--tree-node__label__details .cds-custom--tree-node__icon,:host(cds-custom-tree-node:not([href])) .cds-custom--tree-parent-node__toggle+.cds-custom--tree-node__label__details ::slotted([slot=icon]){margin-inline-start:.25rem}.cds-custom--tree-node--selected>.cds-custom--tree-node__label,:host(cds-custom-tree-node[selected]:not([href]))>.cds-custom--tree-node__label{background-color:var(--cds-layer-selected-01,#e0e0e0);color:var(--cds-text-primary,#161616)}.cds-custom--tree-node--selected>.cds-custom--tree-node__label:hover,:host(cds-custom-tree-node[selected]:not([href]))>.cds-custom--tree-node__label:hover{background-color:var(--cds-layer-selected-hover-01,#d1d1d1)}.cds-custom--tree-node--selected>.cds-custom--tree-node__label .cds-custom--tree-node__icon,.cds-custom--tree-node--selected>.cds-custom--tree-node__label .cds-custom--tree-parent-node__toggle-icon,:host(cds-custom-tree-node:not([href])) .cds-custom--tree-node--selected>.cds-custom--tree-node__label ::slotted([slot=icon]),:host(cds-custom-tree-node[selected]:not([href])):host(cds-custom-tree-node:not([href]))>.cds-custom--tree-node__label ::slotted([slot=icon]),:host(cds-custom-tree-node[selected]:not([href]))>.cds-custom--tree-node__label .cds-custom--tree-node__icon,:host(cds-custom-tree-node[selected]:not([href]))>.cds-custom--tree-node__label .cds-custom--tree-parent-node__toggle-icon{fill:var(--cds-icon-primary,#161616)}.cds-custom--tree-node--active>.cds-custom--tree-node__label,:host(cds-custom-tree-node[active]:not([href]))>.cds-custom--tree-node__label{position:relative}.cds-custom--tree-node--active>.cds-custom--tree-node__label:before,:host(cds-custom-tree-node[active]:not([href]))>.cds-custom--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-custom--tree--xs .cds-custom--tree-node__label{min-block-size:1.5rem}.cds-custom--tree--xs .cds-custom--tree-node:not(.cds-custom--tree-parent-node) .cds-custom--tree-node__label,.cds-custom--tree--xs :not(.cds-custom--tree-parent-node):host(cds-custom-tree-node:not([href])) .cds-custom--tree-node__label{padding:0}.cds-custom--tree--xs .cds-custom--tree-parent-node__toggle{margin-block-start:0}.cds-custom--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-custom--tree-node__label .cds-custom--icon-tooltip{inline-size:100%}.cds-custom--tree-node__label .cds-custom--icon-tooltip .cds-custom--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-custom--tree-node__label .cds-custom--icon-tooltip .cds-custom--btn--icon-only .cds-custom--tree-node__label__text{color:inherit;inline-size:100%}.cds-custom--tree-node__label .cds-custom--tooltip-content{padding:1rem}.cds-custom--tree-node__label .cds-custom--popover-container{inline-size:100%}.cds-custom--tree .cds-custom--tree-node__label .cds-custom--tooltip-trigger__wrapper .cds-custom--btn--ghost:focus{box-shadow:none;outline:2px solid var(--cds-focus,#0f62fe)}:host(cds-custom-tree-view){display:block}:host(cds-custom-tree-node){box-sizing:border-box;display:list-item}:host(cds-custom-tree-node) .cds-custom--tree-node__label{box-sizing:inherit}:host(cds-custom-tree-node) .cds-custom--tree-node__hidden{display:none}:host(cds-custom-tree-node) .cds-custom--tree-parent-node__toggle{box-sizing:inherit}:host(cds-custom-tree-node:focus-visible){outline:none}:host(cds-custom-tree-node:focus-visible) .cds-custom--tree-node__label{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-custom-tree-node:focus-visible) .cds-custom--tree-node__label{outline-style:dotted}}:host(cds-custom-tree-node:not([parent]):not([href])) .cds-custom--tree-node__label{padding-block:.4375rem}:host(cds-custom-tree-node[href]) .cds-custom--tree-node,:host(cds-custom-tree-node[href]) :host(cds-custom-tree-node:not([href])){box-sizing:inherit}:host(cds-custom-tree-node[href]) .cds-custom--tree-node__label{padding-block:0}:host(cds-custom-tree-node[has-icon]:not([parent]:not([href]))){padding-inline-start:2rem}:host(cds-custom-tree-node[has-icon]:not([href])){padding-inline-start:.5rem}:host(cds-custom-tree-node[has-icon]:not([href])) .cds-custom--tree-parent-node__toggle{margin-inline-end:0}:host(cds-custom-tree-node[has-icon][parent]:not([href])){padding-inline-start:1rem}:host(cds-custom-tree-node[has-icon]:not([href])) ::slotted(cds-custom-tree-node){margin-inline-start:.5rem}:host(cds-custom-tree-node:not([href])[size=xs]) .cds-custom--tree-node__label{min-block-size:1.5rem}:host(cds-custom-tree-node:not([href])[size=xs]) .cds-custom--tree-parent-node__toggle{margin-block-start:0}:host(cds-custom-tree-node:not([href])[size=xs]:not([parent])) .cds-custom--tree-node__label{padding:0}:host(cds-custom-tree-node[href]) a{text-decoration:none}"]);
-
 //#endregion
 export { tree_view_default as default };
+
 //# sourceMappingURL=tree-view.scss.js.map

package/es-custom/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-custom/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-custom/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-custom--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-custom--header__action--active`);
 				if (this.buttonLabelActive) this.tooltipText = this.buttonLabelActive;
 			} else {
-				this._buttonNode.classList.remove(`${prefix}--header__action--active`);
+				this._buttonNode.classList.remove(`cds-custom--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-custom--header__action--active`);
 			if (this.buttonLabelActive) this.tooltipText = this.buttonLabelActive;
 		} else {
-			this._buttonNode.classList.remove(`${prefix}--header__action--active`);
+			this._buttonNode.classList.remove(`cds-custom--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-custom-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-custom/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-custom-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-custom-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-custom/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-custom--header__action`]: true,
+			[`cds-custom--header__menu-trigger`]: true,
+			[`cds-custom--header__menu-toggle`]: true,
+			[`cds-custom--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-custom-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-custom-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-custom/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-custom-header-menu-button\n * @csspart button The button.\n * @csspart toggle-icon The toggle icon.\n * @fires cds-custom-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-custom-header-menu-button\n * @csspart button The button.\n * @csspart toggle-icon The toggle icon.\n * @fires cds-custom-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-custom/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-custom-header-menu-item
 */
 let CDSHeaderMenuItem = class CDSHeaderMenuItem extends header_nav_item_default {};
-CDSHeaderMenuItem = __decorate([carbonElement(`${prefix}-header-menu-item`)], CDSHeaderMenuItem);
+CDSHeaderMenuItem = __decorate([carbonElement(`cds-custom-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-custom/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-custom-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-custom-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-custom/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-custom--header__menu-item`]: true,
+			[`cds-custom--header__menu-title`]: true,
+			[`cds-custom--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-custom--header__menu-arrow`
 		})}
       </a>
       <ul
         part="menu-body"
-        class="${prefix}--header__menu"
+        class="${"cds-custom"}--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-custom-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-custom-header-menu`)], CDSHeaderMenu);
 var header_menu_default = CDSHeaderMenu;
-
 //#endregion
 export { header_menu_default as default };
+
 //# sourceMappingURL=header-menu.js.map

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

package/es-custom/components/ui-shell/header-name.js

@@ -5,15 +5,14 @@
  * 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 FocusMixin from "../../globals/mixins/focus.js";
 import header_default from "./header.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-
 //#region src/components/ui-shell/header-name.ts
 /**
 * Copyright IBM Corp. 2019, 2023
@@ -32,12 +31,12 @@ let CDSHeaderName = class CDSHeaderName extends FocusMixin(LitElement) {
 	render() {
 		const { href, prefix: namePrefix } = this;
 		const namePrefixPart = !namePrefix ? void 0 : html`
-          <span part="prefix" class="${prefix}--header__name--prefix"
+          <span part="prefix" class="${"cds-custom"}--header__name--prefix"
             >${namePrefix}</span
           >
         `;
 		return html`
-      <a part="link" class="${prefix}--header__name" href="${ifDefined(href)}"
+      <a part="link" class="${"cds-custom"}--header__name" href="${ifDefined(href)}"
         >${namePrefixPart}&nbsp;<span><slot></slot></span
       ></a>
     `;
@@ -54,9 +53,9 @@ let CDSHeaderName = class CDSHeaderName extends FocusMixin(LitElement) {
 };
 __decorate([property()], CDSHeaderName.prototype, "href", void 0);
 __decorate([property()], CDSHeaderName.prototype, "prefix", void 0);
-CDSHeaderName = __decorate([carbonElement(`${prefix}-header-name`)], CDSHeaderName);
+CDSHeaderName = __decorate([carbonElement(`cds-custom-header-name`)], CDSHeaderName);
 var header_name_default = CDSHeaderName;
-
 //#endregion
 export { header_name_default as default };
+
 //# sourceMappingURL=header-name.js.map

package/es-custom/components/ui-shell/header-name.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-name.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/header-name.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './header.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * The product name UI in header nav.\n *\n * @element cds-custom-header-name\n * @csspart link The link.\n * @csspart prefix The prefix content.\n */\n@customElement(`${prefix}-header-name`)\nclass CDSHeaderName extends FocusMixin(LitElement) {\n  /**\n   * Link `href`.\n   */\n  @property()\n  href!: string;\n\n  /**\n   * The product name prefix.\n   */\n  @property()\n  prefix!: string;\n\n  render() {\n    const { href, prefix: namePrefix } = this;\n    const namePrefixPart = !namePrefix\n      ? undefined\n      : html`\n          <span part=\"prefix\" class=\"${prefix}--header__name--prefix\"\n            >${namePrefix}</span\n          >\n        `;\n    return html`\n      <a part=\"link\" class=\"${prefix}--header__name\" href=\"${ifDefined(href)}\"\n        >${namePrefixPart}&nbsp;<span><slot></slot></span\n      ></a>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSHeaderName;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,0BACM,sBAAsB,WAAW,WAAW,CAAC;CAajD,SAAS;EACP,MAAM,EAAE,MAAM,QAAQ,eAAe;EACrC,MAAM,iBAAiB,CAAC,aACpB,SACA,IAAI;uCAC2B,OAAO;eAC/B,WAAW;;;AAGtB,SAAO,IAAI;8BACe,OAAO,wBAAwB,UAAU,KAAK,CAAC;WAClE,eAAe;;;;;2BAKG;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YA7Bf,UAAU;YAMV,UAAU;4BAXZC,cAAc,GAAG,OAAO,cAAc;AAqCvC,0BAAe"}
+{"version":3,"file":"header-name.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/header-name.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './header.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * The product name UI in header nav.\n *\n * @element cds-custom-header-name\n * @csspart link The link.\n * @csspart prefix The prefix content.\n */\n@customElement(`${prefix}-header-name`)\nclass CDSHeaderName extends FocusMixin(LitElement) {\n  /**\n   * Link `href`.\n   */\n  @property()\n  href!: string;\n\n  /**\n   * The product name prefix.\n   */\n  @property()\n  prefix!: string;\n\n  render() {\n    const { href, prefix: namePrefix } = this;\n    const namePrefixPart = !namePrefix\n      ? undefined\n      : html`\n          <span part=\"prefix\" class=\"${prefix}--header__name--prefix\"\n            >${namePrefix}</span\n          >\n        `;\n    return html`\n      <a part=\"link\" class=\"${prefix}--header__name\" href=\"${ifDefined(href)}\"\n        >${namePrefixPart}&nbsp;<span><slot></slot></span\n      ></a>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSHeaderName;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAA,gBAAA,MACM,sBAAsB,WAAW,WAAW,CAAC;CAajD,SAAS;EACP,MAAM,EAAE,MAAM,QAAQ,eAAe;EACrC,MAAM,iBAAiB,CAAC,aACpB,KAAA,IACA,IAAI;6CACkC;eAC/B,WAAW;;;AAGtB,SAAO,IAAI;oCACsB,wBAAwB,UAAU,KAAK,CAAC;WAClE,eAAe;;;;;2BAKG;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YA7Bf,UAAU,CAAA,EAAA,cAAA,WAAA,QAAA,KAAA,EAAA;YAMV,UAAU,CAAA,EAAA,cAAA,WAAA,UAAA,KAAA,EAAA;4BAXZC,cAAc,kBAAwB,CAAA,EAAA,cAAA;AAqCvC,IAAA,sBAAe"}

package/es-custom/components/ui-shell/header-nav-item.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 FocusMixin from "../../globals/mixins/focus.js";
 import header_default from "./header.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-
 //#region src/components/ui-shell/header-nav-item.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -41,14 +40,14 @@ let CDSHeaderNavItem = class CDSHeaderNavItem extends FocusMixin(LitElement) {
       <a
         part="link"
         class="${classMap({
-			[`${prefix}--header__menu-item`]: true,
-			[`${prefix}--header__menu-item--current`]: isActive && ariaCurrent !== "page"
+			[`cds-custom--header__menu-item`]: true,
+			[`cds-custom--header__menu-item--current`]: isActive && ariaCurrent !== "page"
 		})}"
         tabindex="0"
         href="${ifDefined(href)}"
         rel="${ifDefined(rel)}"
         target="${ifDefined(target)}">
-        <span part="title" class="${prefix}--text-truncate--end"
+        <span part="title" class="${"cds-custom"}--text-truncate--end"
           ><slot>${title}</slot></span
         >
       </a>
@@ -77,9 +76,9 @@ __decorate([property({
 	attribute: "aria-current"
 })], CDSHeaderNavItem.prototype, "ariaCurrent", void 0);
 __decorate([property({ reflect: true })], CDSHeaderNavItem.prototype, "role", void 0);
-CDSHeaderNavItem = __decorate([carbonElement(`${prefix}-header-nav-item`)], CDSHeaderNavItem);
+CDSHeaderNavItem = __decorate([carbonElement(`cds-custom-header-nav-item`)], CDSHeaderNavItem);
 var header_nav_item_default = CDSHeaderNavItem;
-
 //#endregion
 export { header_nav_item_default as default };
+
 //# sourceMappingURL=header-nav-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"header-nav-item.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/header-nav-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\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 FocusMixin from '../../globals/mixins/focus';\nimport styles from './header.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Header nav item.\n *\n * @element cds-custom-header-nav-item\n * @csspart link The link.\n * @csspart title The title.\n */\n@customElement(`${prefix}-header-nav-item`)\nclass CDSHeaderNavItem extends FocusMixin(LitElement) {\n  /**\n   * Link `href`.\n   */\n  @property()\n  href!: string;\n\n  /**\n   * The link type.\n   */\n  @property({ reflect: true })\n  rel!: string;\n\n  /**\n   * The link target.\n   */\n  @property({ reflect: true })\n  target!: string;\n\n  /**\n   * The title.\n   */\n  @property()\n  title!: string;\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' })\n  isActive = false;\n\n  /**\n   * indicates that this element represents the current item\n   */\n  @property({ type: String, attribute: 'aria-current' })\n  ariaCurrent;\n\n  /**\n   * As child of <ul>, this element must have role of listitem\n   */\n  @property({ reflect: true })\n  role = 'listitem';\n\n  render() {\n    const { ariaCurrent, href, isActive, title, rel, target } = this;\n    const linkClass = classMap({\n      [`${prefix}--header__menu-item`]: true,\n      [`${prefix}--header__menu-item--current`]:\n        isActive && ariaCurrent !== 'page',\n    });\n\n    return html`\n      <a\n        part=\"link\"\n        class=\"${linkClass}\"\n        tabindex=\"0\"\n        href=\"${ifDefined(href)}\"\n        rel=\"${ifDefined(rel)}\"\n        target=\"${ifDefined(target)}\">\n        <span part=\"title\" class=\"${prefix}--text-truncate--end\"\n          ><slot>${title}</slot></span\n        >\n      </a>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSHeaderNavItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,6BACM,yBAAyB,WAAW,WAAW,CAAC;;;kBA6BzC;cAYJ;;CAEP,SAAS;EACP,MAAM,EAAE,aAAa,MAAM,UAAU,OAAO,KAAK,WAAW;AAO5D,SAAO,IAAI;;;iBANO,SAAS;IACxB,GAAG,OAAO,uBAAuB;IACjC,GAAG,OAAO,gCACT,YAAY,gBAAgB;GAC/B,CAAC,CAKqB;;gBAEX,UAAU,KAAK,CAAC;eACjB,UAAU,IAAI,CAAC;kBACZ,UAAU,OAAO,CAAC;oCACA,OAAO;mBACxB,MAAM;;;;;;2BAMI;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YAlEf,UAAU;YAMV,SAAS,EAAE,SAAS,MAAM,CAAC;YAM3B,SAAS,EAAE,SAAS,MAAM,CAAC;YAM3B,UAAU;YAMV,SAAS;CAAE,MAAM;CAAS,WAAW;CAAa,CAAC;YAMnD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAgB,CAAC;YAMrD,SAAS,EAAE,SAAS,MAAM,CAAC;+BAzC7BC,cAAc,GAAG,OAAO,kBAAkB;AA0E3C,8BAAe"}
+{"version":3,"file":"header-nav-item.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/header-nav-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\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 FocusMixin from '../../globals/mixins/focus';\nimport styles from './header.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Header nav item.\n *\n * @element cds-custom-header-nav-item\n * @csspart link The link.\n * @csspart title The title.\n */\n@customElement(`${prefix}-header-nav-item`)\nclass CDSHeaderNavItem extends FocusMixin(LitElement) {\n  /**\n   * Link `href`.\n   */\n  @property()\n  href!: string;\n\n  /**\n   * The link type.\n   */\n  @property({ reflect: true })\n  rel!: string;\n\n  /**\n   * The link target.\n   */\n  @property({ reflect: true })\n  target!: string;\n\n  /**\n   * The title.\n   */\n  @property()\n  title!: string;\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' })\n  isActive = false;\n\n  /**\n   * indicates that this element represents the current item\n   */\n  @property({ type: String, attribute: 'aria-current' })\n  ariaCurrent;\n\n  /**\n   * As child of <ul>, this element must have role of listitem\n   */\n  @property({ reflect: true })\n  role = 'listitem';\n\n  render() {\n    const { ariaCurrent, href, isActive, title, rel, target } = this;\n    const linkClass = classMap({\n      [`${prefix}--header__menu-item`]: true,\n      [`${prefix}--header__menu-item--current`]:\n        isActive && ariaCurrent !== 'page',\n    });\n\n    return html`\n      <a\n        part=\"link\"\n        class=\"${linkClass}\"\n        tabindex=\"0\"\n        href=\"${ifDefined(href)}\"\n        rel=\"${ifDefined(rel)}\"\n        target=\"${ifDefined(target)}\">\n        <span part=\"title\" class=\"${prefix}--text-truncate--end\"\n          ><slot>${title}</slot></span\n        >\n      </a>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSHeaderNavItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAA,mBAAA,MACM,yBAAyB,WAAW,WAAW,CAAC;;;kBA6BzC;cAYJ;;CAEP,SAAS;EACP,MAAM,EAAE,aAAa,MAAM,UAAU,OAAO,KAAK,WAAW;AAO5D,SAAO,IAAI;;;iBANO,SAAS;IACxB,2BAAiC;IACjC,oCACC,YAAY,gBAAgB;GAC/B,CAAC,CAKqB;;gBAEX,UAAU,KAAK,CAAC;eACjB,UAAU,IAAI,CAAC;kBACZ,UAAU,OAAO,CAAC;0CACO;mBACxB,MAAM;;;;;;2BAMI;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YAlEf,UAAU,CAAA,EAAA,iBAAA,WAAA,QAAA,KAAA,EAAA;YAMV,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,iBAAA,WAAA,OAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,iBAAA,WAAA,UAAA,KAAA,EAAA;YAM3B,UAAU,CAAA,EAAA,iBAAA,WAAA,SAAA,KAAA,EAAA;YAMV,SAAS;CAAE,MAAM;CAAS,WAAW;CAAa,CAAC,CAAA,EAAA,iBAAA,WAAA,YAAA,KAAA,EAAA;YAMnD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAgB,CAAC,CAAA,EAAA,iBAAA,WAAA,eAAA,KAAA,EAAA;YAMrD,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,iBAAA,WAAA,QAAA,KAAA,EAAA;+BAzC7BC,cAAc,sBAA4B,CAAA,EAAA,iBAAA;AA0E3C,IAAA,0BAAe"}