@carbon/web-components 2.0.0-rc.2 → 2.0.0-rc.3

package/es/components/tooltip/tooltip.rtl.css.js

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

package/es/components/ui-shell/header-global-action.d.ts

@@ -13,12 +13,27 @@ import CDSButton from '../button/button';
  * @element cds-header-global-action
  */
 declare class CDSHeaderGlobalAction extends CDSButton {
+    protected _buttonNode: HTMLButtonElement;
     /**
      * Specify whether the action is currently active
      */
     active: any;
+    /**
+     * Specify which header panel the button is associated with.
+     */
+    panelId: any;
+    /**
+     * The `aria-label` attribute for the button in its active state.
+     */
+    buttonLabelActive: any;
+    /**
+     * The `aria-label` attribute for the button in its inactive state.
+     */
+    buttonLabelInactive: any;
     connectedCallback(): void;
-    firstUpdated(): void;
+    private _handleClick;
+    updated(): void;
+    shouldUpdate(changedProperties: any): boolean;
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;

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

@@ -1 +1 @@
-{"version":3,"sources":["components/ui-shell/header-global-action.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAIzC;;;;GAIG;AACH,cACM,qBAAsB,SAAQ,SAAS;IAC3C;;OAEG;IAEH,MAAM,MAAC;IAEP,iBAAiB;IAKjB,YAAY;IAYZ,MAAM,CAAC,iBAAiB;;;;MAGtB;IAEF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,qBAAqB,CAAC","file":"header-global-action.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { BUTTON_TOOLTIP_POSITION } from '../button/button';\nimport CDSButton from '../button/button';\nimport styles from './header.scss';\nimport { prefix } from '../../globals/settings';\n\n/**\n * Header global action button\n *\n * @element cds-header-global-action\n */\n@customElement(`${prefix}-header-global-action`)\nclass CDSHeaderGlobalAction extends CDSButton {\n  /**\n   * Specify whether the action is currently active\n   */\n  @property({ type: Boolean, reflect: true })\n  active;\n\n  connectedCallback() {\n    this.tooltipPosition = BUTTON_TOOLTIP_POSITION.BOTTOM;\n    super.connectedCallback();\n  }\n\n  firstUpdated() {\n    const button = this.shadowRoot?.querySelector('button');\n\n    if (button) {\n      button?.classList.add(`${prefix}--header__action`);\n\n      if (this.active) {\n        button?.classList.add(`${prefix}--header__action--active`);\n      }\n    }\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderGlobalAction;\n"]}
+{"version":3,"sources":["components/ui-shell/header-global-action.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAKzC;;;;GAIG;AACH,cACM,qBAAsB,SAAQ,SAAS;IAE3C,SAAS,CAAC,WAAW,EAAG,iBAAiB,CAAC;IAE1C;;OAEG;IAEH,MAAM,MAAC;IAEP;;OAEG;IAEH,OAAO,MAAC;IAER;;OAEG;IAEH,iBAAiB,MAAC;IAElB;;OAEG;IAEH,mBAAmB,MAAC;IAEpB,iBAAiB;IAOjB,OAAO,CAAC,YAAY;IAwBpB,OAAO;IAMP,YAAY,CAAC,iBAAiB,KAAA;IAmB9B,MAAM,CAAC,iBAAiB;;;;MAGtB;IAEF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,qBAAqB,CAAC","file":"header-global-action.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { BUTTON_TOOLTIP_POSITION } from '../button/button';\nimport CDSButton from '../button/button';\nimport HostListener from '../../globals/decorators/host-listener';\nimport styles from './header.scss';\nimport { prefix } from '../../globals/settings';\n\n/**\n * Header global action button\n *\n * @element cds-header-global-action\n */\n@customElement(`${prefix}-header-global-action`)\nclass CDSHeaderGlobalAction extends CDSButton {\n  @query('button')\n  protected _buttonNode!: HTMLButtonElement;\n\n  /**\n   * Specify whether the action is currently active\n   */\n  @property({ type: Boolean, reflect: true })\n  active;\n\n  /**\n   * Specify which header panel the button is associated with.\n   */\n  @property({ type: String, attribute: 'panel-id', reflect: true })\n  panelId;\n\n  /**\n   * The `aria-label` attribute for the button in its active state.\n   */\n  @property({ attribute: 'button-label-active' })\n  buttonLabelActive;\n\n  /**\n   * The `aria-label` attribute for the button in its inactive state.\n   */\n  @property({ attribute: 'button-label-inactive' })\n  buttonLabelInactive;\n\n  connectedCallback() {\n    this.tooltipPosition = BUTTON_TOOLTIP_POSITION.BOTTOM;\n    super.connectedCallback();\n  }\n\n  @HostListener('click', { capture: true })\n  // @ts-ignore\n  private _handleClick(event: Event) {\n    const { disabled } = this;\n    if (disabled) {\n      event.stopPropagation();\n    } else {\n      const panel = document.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  updated() {\n    if (this._buttonNode) {\n      this._buttonNode.classList.add(`${prefix}--header__action`);\n    }\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('active')) {\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; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderGlobalAction;\n"]}

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

@@ -12,9 +12,10 @@ import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
  */
 
 import { LitElement } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
+import { property, customElement, query } from 'lit/decorators.js';
 import { BUTTON_TOOLTIP_POSITION } from '../button/button';
 import CDSButton from '../button/button';
+import HostListener from '../../globals/decorators/host-listener';
 import styles from "././header.css.js";
 import { prefix } from '../../globals/settings';
 
@@ -33,6 +34,11 @@ let CDSHeaderGlobalAction = _decorate([customElement(`${prefix}-header-global-ac
   return {
     F: CDSHeaderGlobalAction,
     d: [{
+      kind: "field",
+      decorators: [query('button')],
+      key: "_buttonNode",
+      value: void 0
+    }, {
       kind: "field",
       decorators: [property({
         type: Boolean,
@@ -40,6 +46,29 @@ let CDSHeaderGlobalAction = _decorate([customElement(`${prefix}-header-global-ac
       })],
       key: "active",
       value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: String,
+        attribute: 'panel-id',
+        reflect: true
+      })],
+      key: "panelId",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'button-label-active'
+      })],
+      key: "buttonLabelActive",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'button-label-inactive'
+      })],
+      key: "buttonLabelInactive",
+      value: void 0
     }, {
       kind: "method",
       key: "connectedCallback",
@@ -48,22 +77,77 @@ let CDSHeaderGlobalAction = _decorate([customElement(`${prefix}-header-global-ac
        * Specify whether the action is currently active
        */
 
+      /**
+       * Specify which header panel the button is associated with.
+       */
+
+      /**
+       * The `aria-label` attribute for the button in its active state.
+       */
+
+      /**
+       * The `aria-label` attribute for the button in its inactive state.
+       */
+
       function connectedCallback() {
         this.tooltipPosition = BUTTON_TOOLTIP_POSITION.BOTTOM;
         _get(_getPrototypeOf(CDSHeaderGlobalAction.prototype), "connectedCallback", this).call(this);
       }
     }, {
       kind: "method",
-      key: "firstUpdated",
-      value: function firstUpdated() {
-        var _this$shadowRoot;
-        const button = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.querySelector('button');
-        if (button) {
-          button === null || button === void 0 ? void 0 : button.classList.add(`${prefix}--header__action`);
+      decorators: [HostListener('click', {
+        capture: true
+      })],
+      key: "_handleClick",
+      value: function _handleClick(event) {
+        const {
+          disabled
+        } = this;
+        if (disabled) {
+          event.stopPropagation();
+        } else {
+          const panel = document.querySelector(`#${this.panelId}`);
+
+          // see if there is related panel for header-global-action button first
+          // and then set the expanded attr of it accordingly
+          if (panel) {
+            const expanded = panel.getAttribute('expanded');
+            if (expanded) {
+              panel.removeAttribute('expanded');
+            } else {
+              panel.setAttribute('expanded', 'true');
+            }
+            const active = !this.active;
+            this.active = active;
+          }
+        }
+      }
+    }, {
+      kind: "method",
+      key: "updated",
+      value: function updated() {
+        if (this._buttonNode) {
+          this._buttonNode.classList.add(`${prefix}--header__action`);
+        }
+      }
+    }, {
+      kind: "method",
+      key: "shouldUpdate",
+      value: function shouldUpdate(changedProperties) {
+        if (changedProperties.has('active')) {
           if (this.active) {
-            button === null || button === void 0 ? void 0 : button.classList.add(`${prefix}--header__action--active`);
+            this._buttonNode.classList.add(`${prefix}--header__action--active`);
+            if (this.buttonLabelActive) {
+              this.tooltipText = this.buttonLabelActive;
+            }
+          } else {
+            this._buttonNode.classList.remove(`${prefix}--header__action--active`);
+            if (this.buttonLabelInactive) {
+              this.tooltipText = this.buttonLabelInactive;
+            }
           }
         }
+        return true;
       }
     }, {
       kind: "field",

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

@@ -1 +1 @@
-{"version":3,"file":"header-global-action.js","names":["LitElement","property","customElement","BUTTON_TOOLTIP_POSITION","CDSButton","styles","prefix","CDSHeaderGlobalAction","_decorate","_initialize","_CDSButton","constructor","args","F","d","kind","decorators","type","Boolean","reflect","key","value","connectedCallback","tooltipPosition","BOTTOM","_get","_getPrototypeOf","prototype","call","firstUpdated","_this$shadowRoot","button","shadowRoot","querySelector","classList","add","active","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/header-global-action.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { BUTTON_TOOLTIP_POSITION } from '../button/button';\nimport CDSButton from '../button/button';\nimport styles from './header.scss';\nimport { prefix } from '../../globals/settings';\n\n/**\n * Header global action button\n *\n * @element cds-header-global-action\n */\n@customElement(`${prefix}-header-global-action`)\nclass CDSHeaderGlobalAction extends CDSButton {\n  /**\n   * Specify whether the action is currently active\n   */\n  @property({ type: Boolean, reflect: true })\n  active;\n\n  connectedCallback() {\n    this.tooltipPosition = BUTTON_TOOLTIP_POSITION.BOTTOM;\n    super.connectedCallback();\n  }\n\n  firstUpdated() {\n    const button = this.shadowRoot?.querySelector('button');\n\n    if (button) {\n      button?.classList.add(`${prefix}--header__action`);\n\n      if (this.active) {\n        button?.classList.add(`${prefix}--header__action--active`);\n      }\n    }\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderGlobalAction;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,KAAK;AAChC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,OAAOC,SAAS,MAAM,kBAAkB;AACxC,OAAOC,MAAM,MAAM,mBAAe;AAClC,SAASC,MAAM,QAAQ,wBAAwB;;AAE/C;AACA;AACA;AACA;AACA;AAJA,IAMMC,qBAAqB,GAAAC,SAAA,EAD1BN,aAAa,CAAE,GAAEI,MAAO,uBAAsB,CAAC,aAAAG,WAAA,EAAAC,UAAA;EAAhD,MACMH,qBAAqB,SAAAG,UAAA,CAAmB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EA8B9C;EAAC;IAAAI,CAAA,EA9BKN,qBAAqB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIxBf,QAAQ,CAAC;QAAEgB,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAC,GAAA;MAAAC,KAAA;IAAA;MAAAN,IAAA;MAAAK,GAAA;MAAAC,KAAA;MAH3C;AACF;AACA;;MAIE,SAAAC,kBAAA,EAAoB;QAClB,IAAI,CAACC,eAAe,GAAGpB,uBAAuB,CAACqB,MAAM;QACrDC,IAAA,CAAAC,eAAA,CATEnB,qBAAqB,CAAAoB,SAAA,8BAAAC,IAAA;MAUzB;IAAC;MAAAb,IAAA;MAAAK,GAAA;MAAAC,KAAA,EAED,SAAAQ,aAAA,EAAe;QAAA,IAAAC,gBAAA;QACb,MAAMC,MAAM,IAAAD,gBAAA,GAAG,IAAI,CAACE,UAAU,cAAAF,gBAAA,uBAAfA,gBAAA,CAAiBG,aAAa,CAAC,QAAQ,CAAC;QAEvD,IAAIF,MAAM,EAAE;UACVA,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEG,SAAS,CAACC,GAAG,CAAE,GAAE7B,MAAO,kBAAiB,CAAC;UAElD,IAAI,IAAI,CAAC8B,MAAM,EAAE;YACfL,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEG,SAAS,CAACC,GAAG,CAAE,GAAE7B,MAAO,0BAAyB,CAAC;UAC5D;QACF;MACF;IAAC;MAAAS,IAAA;MAAAsB,MAAA;MAAAjB,GAAA;MAAAC,MAAA;QAAA,OAAAiB,aAAA,CAAAA,aAAA,KAGItC,UAAU,CAACuC,iBAAiB;UAC/BC,cAAc,EAAE;QAAI;MAAA;IAAA;MAAAzB,IAAA;MAAAsB,MAAA;MAAAjB,GAAA;MAAAC,MAAA;QAAA,OAGNhB,MAAM;MAAA;IAAA;EAAA;AAAA,GA7BYD,SAAS;AAgC7C,eAAeG,qBAAqB"}
+{"version":3,"file":"header-global-action.js","names":["LitElement","property","customElement","query","BUTTON_TOOLTIP_POSITION","CDSButton","HostListener","styles","prefix","CDSHeaderGlobalAction","_decorate","_initialize","_CDSButton","constructor","args","F","d","kind","decorators","key","value","type","Boolean","reflect","String","attribute","connectedCallback","tooltipPosition","BOTTOM","_get","_getPrototypeOf","prototype","call","capture","_handleClick","event","disabled","stopPropagation","panel","document","querySelector","panelId","expanded","getAttribute","removeAttribute","setAttribute","active","updated","_buttonNode","classList","add","shouldUpdate","changedProperties","has","buttonLabelActive","tooltipText","remove","buttonLabelInactive","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/header-global-action.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { BUTTON_TOOLTIP_POSITION } from '../button/button';\nimport CDSButton from '../button/button';\nimport HostListener from '../../globals/decorators/host-listener';\nimport styles from './header.scss';\nimport { prefix } from '../../globals/settings';\n\n/**\n * Header global action button\n *\n * @element cds-header-global-action\n */\n@customElement(`${prefix}-header-global-action`)\nclass CDSHeaderGlobalAction extends CDSButton {\n  @query('button')\n  protected _buttonNode!: HTMLButtonElement;\n\n  /**\n   * Specify whether the action is currently active\n   */\n  @property({ type: Boolean, reflect: true })\n  active;\n\n  /**\n   * Specify which header panel the button is associated with.\n   */\n  @property({ type: String, attribute: 'panel-id', reflect: true })\n  panelId;\n\n  /**\n   * The `aria-label` attribute for the button in its active state.\n   */\n  @property({ attribute: 'button-label-active' })\n  buttonLabelActive;\n\n  /**\n   * The `aria-label` attribute for the button in its inactive state.\n   */\n  @property({ attribute: 'button-label-inactive' })\n  buttonLabelInactive;\n\n  connectedCallback() {\n    this.tooltipPosition = BUTTON_TOOLTIP_POSITION.BOTTOM;\n    super.connectedCallback();\n  }\n\n  @HostListener('click', { capture: true })\n  // @ts-ignore\n  private _handleClick(event: Event) {\n    const { disabled } = this;\n    if (disabled) {\n      event.stopPropagation();\n    } else {\n      const panel = document.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  updated() {\n    if (this._buttonNode) {\n      this._buttonNode.classList.add(`${prefix}--header__action`);\n    }\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('active')) {\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; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderGlobalAction;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/ui-shell/header-menu-button.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGpD;;;;;;;GAOG;AACH,cACM,mBAAoB,SAAQ,wBAAsB;IACtD,OAAO,CAAC,YAAY;IAkBpB;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,iBAAiB,SAA2B;IAE5C;;OAEG;IAEH,mBAAmB,SAA0B;IAE7C;;OAEG;IAEH,YAAY,yBAAqC;IAEjD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAKH,kBAAkB,UAAS;IAE3B,MAAM;IA2BN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC","file":"header-menu-button.d.ts","sourcesContent":["/**\n * @license\n *\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, customElement } from 'lit/decorators.js';\nimport Close20 from '@carbon/icons/lib/close/20';\nimport Menu20 from '@carbon/icons/lib/menu/20';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { SIDE_NAV_COLLAPSE_MODE } from './side-nav';\nimport styles from './header.scss';\n\n/**\n * The trigger button for side nav in header nav.\n *\n * @element cds-header-menu-button\n * @csspart button The button.\n * @csspart toggle-icon The toggle icon.\n * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.\n */\n@customElement(`${prefix}-header-menu-button`)\nclass CDSHeaderMenuButton extends FocusMixin(LitElement) {\n  private _handleClick() {\n    const active = !this.active;\n    this.active = active;\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSHeaderMenuButton).eventToggle,\n        {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            active,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * `true` if the button should represent its active state.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * The `aria-label` attribute for the button in its active state.\n   */\n  @property({ attribute: 'button-label-active' })\n  buttonLabelActive = 'Close navigation menu';\n\n  /**\n   * The `aria-label` attribute for the button in its inactive state.\n   */\n  @property({ attribute: 'button-label-inactive' })\n  buttonLabelInactive = 'Open navigation menu';\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * If `true` will style the side nav to sit below the header\n   */\n  @property({\n    type: Boolean,\n    attribute: 'is-not-child-of-header',\n  })\n  isNotChildOfHeader = false;\n\n  render() {\n    const {\n      active,\n      buttonLabelActive,\n      buttonLabelInactive,\n      disabled,\n      _handleClick: handleClick,\n    } = this;\n    const buttonLabel = active ? buttonLabelActive : buttonLabelInactive;\n    const classes = classMap({\n      [`${prefix}--header__action`]: true,\n      [`${prefix}--header__menu-trigger`]: true,\n      [`${prefix}--header__menu-toggle`]: true,\n      [`${prefix}--header__action--active`]: active,\n    });\n    return html`\n      <button\n        part=\"button\"\n        class=\"${classes}\"\n        ?disabled=${disabled}\n        aria-label=\"${ifDefined(buttonLabel)}\"\n        @click=${handleClick}>\n        ${(active ? Close20 : Menu20)({ slot: '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; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderMenuButton;\n"]}
+{"version":3,"sources":["components/ui-shell/header-menu-button.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIpD;;;;;;;GAOG;AACH,cACM,mBAAoB,SAAQ,wBAAsB;IACtD,OAAO,CAAC,YAAY;IAkBpB;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,iBAAiB,SAA2B;IAE5C;;OAEG;IAEH,mBAAmB,SAA0B;IAE7C;;OAEG;IAEH,YAAY,yBAAqC;IAEjD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAKH,kBAAkB,UAAS;IAE3B,MAAM;IA2BN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC","file":"header-menu-button.d.ts","sourcesContent":["/**\n * @license\n *\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 Close20 from '@carbon/icons/lib/close/20';\nimport Menu20 from '@carbon/icons/lib/menu/20';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { SIDE_NAV_COLLAPSE_MODE } from './side-nav';\nimport styles from './header.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * The trigger button for side nav in header nav.\n *\n * @element cds-header-menu-button\n * @csspart button The button.\n * @csspart toggle-icon The toggle icon.\n * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.\n */\n@customElement(`${prefix}-header-menu-button`)\nclass CDSHeaderMenuButton extends FocusMixin(LitElement) {\n  private _handleClick() {\n    const active = !this.active;\n    this.active = active;\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSHeaderMenuButton).eventToggle,\n        {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            active,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * `true` if the button should represent its active state.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * The `aria-label` attribute for the button in its active state.\n   */\n  @property({ attribute: 'button-label-active' })\n  buttonLabelActive = 'Close navigation menu';\n\n  /**\n   * The `aria-label` attribute for the button in its inactive state.\n   */\n  @property({ attribute: 'button-label-inactive' })\n  buttonLabelInactive = 'Open navigation menu';\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * If `true` will style the side nav to sit below the header\n   */\n  @property({\n    type: Boolean,\n    attribute: 'is-not-child-of-header',\n  })\n  isNotChildOfHeader = false;\n\n  render() {\n    const {\n      active,\n      buttonLabelActive,\n      buttonLabelInactive,\n      disabled,\n      _handleClick: handleClick,\n    } = this;\n    const buttonLabel = active ? buttonLabelActive : buttonLabelInactive;\n    const classes = classMap({\n      [`${prefix}--header__action`]: true,\n      [`${prefix}--header__menu-trigger`]: true,\n      [`${prefix}--header__menu-toggle`]: true,\n      [`${prefix}--header__action--active`]: active,\n    });\n    return html`\n      <button\n        part=\"button\"\n        class=\"${classes}\"\n        ?disabled=${disabled}\n        aria-label=\"${ifDefined(buttonLabel)}\"\n        @click=${handleClick}>\n        ${(active ? Close20 : Menu20)({ slot: '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; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderMenuButton;\n"]}

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

@@ -13,7 +13,7 @@ let _ = t => t,
 
 import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import Close20 from "../../icons/close/20";
 import Menu20 from "../../icons/menu/20";
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -21,6 +21,7 @@ import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import { SIDE_NAV_COLLAPSE_MODE } from './side-nav';
 import styles from "././header.css.js";
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
  * The trigger button for side nav in header nav.
@@ -29,14 +30,7 @@ import styles from "././header.css.js";
  * @csspart button The button.
  * @csspart toggle-icon The toggle icon.
  * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.
- */ /**
-     * The trigger button for side nav in header nav.
-     *
-     * @element cds-header-menu-button
-     * @csspart button The button.
-     * @csspart toggle-icon The toggle icon.
-     * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.
-     */
+ */
 let CDSHeaderMenuButton = _decorate([customElement(`${prefix}-header-menu-button`)], function (_initialize, _FocusMixin) {
   class CDSHeaderMenuButton extends _FocusMixin {
     constructor(...args) {

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

@@ -1 +1 @@
-{"version":3,"file":"header-menu-button.js","names":["classMap","LitElement","html","property","customElement","Close20","Menu20","ifDefined","prefix","FocusMixin","SIDE_NAV_COLLAPSE_MODE","styles","CDSHeaderMenuButton","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","key","value","_handleClick","active","dispatchEvent","CustomEvent","eventToggle","bubbles","cancelable","composed","detail","decorators","type","Boolean","reflect","attribute","RESPONSIVE","render","buttonLabelActive","buttonLabelInactive","disabled","handleClick","buttonLabel","classes","_t","_","slot","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/header-menu-button.ts"],"sourcesContent":["/**\n * @license\n *\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, customElement } from 'lit/decorators.js';\nimport Close20 from '@carbon/icons/lib/close/20';\nimport Menu20 from '@carbon/icons/lib/menu/20';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { SIDE_NAV_COLLAPSE_MODE } from './side-nav';\nimport styles from './header.scss';\n\n/**\n * The trigger button for side nav in header nav.\n *\n * @element cds-header-menu-button\n * @csspart button The button.\n * @csspart toggle-icon The toggle icon.\n * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.\n */\n@customElement(`${prefix}-header-menu-button`)\nclass CDSHeaderMenuButton extends FocusMixin(LitElement) {\n  private _handleClick() {\n    const active = !this.active;\n    this.active = active;\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSHeaderMenuButton).eventToggle,\n        {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            active,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * `true` if the button should represent its active state.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * The `aria-label` attribute for the button in its active state.\n   */\n  @property({ attribute: 'button-label-active' })\n  buttonLabelActive = 'Close navigation menu';\n\n  /**\n   * The `aria-label` attribute for the button in its inactive state.\n   */\n  @property({ attribute: 'button-label-inactive' })\n  buttonLabelInactive = 'Open navigation menu';\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * If `true` will style the side nav to sit below the header\n   */\n  @property({\n    type: Boolean,\n    attribute: 'is-not-child-of-header',\n  })\n  isNotChildOfHeader = false;\n\n  render() {\n    const {\n      active,\n      buttonLabelActive,\n      buttonLabelInactive,\n      disabled,\n      _handleClick: handleClick,\n    } = this;\n    const buttonLabel = active ? buttonLabelActive : buttonLabelInactive;\n    const classes = classMap({\n      [`${prefix}--header__action`]: true,\n      [`${prefix}--header__menu-trigger`]: true,\n      [`${prefix}--header__menu-toggle`]: true,\n      [`${prefix}--header__action--active`]: active,\n    });\n    return html`\n      <button\n        part=\"button\"\n        class=\"${classes}\"\n        ?disabled=${disabled}\n        aria-label=\"${ifDefined(buttonLabel)}\"\n        @click=${handleClick}>\n        ${(active ? Close20 : Menu20)({ slot: '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; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderMenuButton;\n"],"mappings":"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"}
+{"version":3,"file":"header-menu-button.js","names":["classMap","LitElement","html","property","Close20","Menu20","ifDefined","prefix","FocusMixin","SIDE_NAV_COLLAPSE_MODE","styles","carbonElement","customElement","CDSHeaderMenuButton","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","key","value","_handleClick","active","dispatchEvent","CustomEvent","eventToggle","bubbles","cancelable","composed","detail","decorators","type","Boolean","reflect","attribute","RESPONSIVE","render","buttonLabelActive","buttonLabelInactive","disabled","handleClick","buttonLabel","classes","_t","_","slot","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/header-menu-button.ts"],"sourcesContent":["/**\n * @license\n *\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 Close20 from '@carbon/icons/lib/close/20';\nimport Menu20 from '@carbon/icons/lib/menu/20';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { SIDE_NAV_COLLAPSE_MODE } from './side-nav';\nimport styles from './header.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * The trigger button for side nav in header nav.\n *\n * @element cds-header-menu-button\n * @csspart button The button.\n * @csspart toggle-icon The toggle icon.\n * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.\n */\n@customElement(`${prefix}-header-menu-button`)\nclass CDSHeaderMenuButton extends FocusMixin(LitElement) {\n  private _handleClick() {\n    const active = !this.active;\n    this.active = active;\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSHeaderMenuButton).eventToggle,\n        {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            active,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * `true` if the button should represent its active state.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * The `aria-label` attribute for the button in its active state.\n   */\n  @property({ attribute: 'button-label-active' })\n  buttonLabelActive = 'Close navigation menu';\n\n  /**\n   * The `aria-label` attribute for the button in its inactive state.\n   */\n  @property({ attribute: 'button-label-inactive' })\n  buttonLabelInactive = 'Open navigation menu';\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * If `true` will style the side nav to sit below the header\n   */\n  @property({\n    type: Boolean,\n    attribute: 'is-not-child-of-header',\n  })\n  isNotChildOfHeader = false;\n\n  render() {\n    const {\n      active,\n      buttonLabelActive,\n      buttonLabelInactive,\n      disabled,\n      _handleClick: handleClick,\n    } = this;\n    const buttonLabel = active ? buttonLabelActive : buttonLabelInactive;\n    const classes = classMap({\n      [`${prefix}--header__action`]: true,\n      [`${prefix}--header__menu-trigger`]: true,\n      [`${prefix}--header__menu-toggle`]: true,\n      [`${prefix}--header__action--active`]: active,\n    });\n    return html`\n      <button\n        part=\"button\"\n        class=\"${classes}\"\n        ?disabled=${disabled}\n        aria-label=\"${ifDefined(buttonLabel)}\"\n        @click=${handleClick}>\n        ${(active ? Close20 : Menu20)({ slot: '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; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderMenuButton;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,6BAA6B;AACtD,SAASC,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,OAAOC,OAAO,MAAM,sBAA4B;AAChD,OAAOC,MAAM,MAAM,qBAA2B;AAC9C,SAASC,SAAS,QAAQ,8BAA8B;AACxD,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,UAAU,MAAM,4BAA4B;AACnD,SAASC,sBAAsB,QAAQ,YAAY;AACnD,OAAOC,MAAM,MAAM,mBAAe;AAClC,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;;AAExF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,IASMC,mBAAmB,GAAAC,SAAA,EADxBF,aAAa,CAAE,GAAEL,MAAO,qBAAoB,CAAC,aAAAQ,WAAA,EAAAC,WAAA;EAA9C,MACMH,mBAAmB,SAAAG,WAAA,CAAgC;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAiGzD;EAAC;IAAAI,CAAA,EAjGKN,mBAAmB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EACvB,SAAAC,aAAA,EAAuB;QACrB,MAAMC,MAAM,GAAG,CAAC,IAAI,CAACA,MAAM;QAC3B,IAAI,CAACA,MAAM,GAAGA,MAAM;QACpB,IAAI,CAACC,aAAa,CAChB,IAAIC,WAAW,CACZ,IAAI,CAACV,WAAW,CAAgCW,WAAW,EAC5D;UACEC,OAAO,EAAE,IAAI;UACbC,UAAU,EAAE,IAAI;UAChBC,QAAQ,EAAE,IAAI;UACdC,MAAM,EAAE;YACNP;UACF;QACF,CACF,CACF,CAAC;MACH;;MAEA;AACF;AACA;IAFE;MAAAJ,IAAA;MAAAY,UAAA,GAGC9B,QAAQ,CAAC;QAAE+B,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAd,GAAA;MAAAC,MAAA;QAAA,OAClC,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAY,UAAA,GAKb9B,QAAQ,CAAC;QAAEkC,SAAS,EAAE;MAAsB,CAAC,CAAC;MAAAf,GAAA;MAAAC,MAAA;QAAA,OAC3B,uBAAuB;MAAA;IAAA;MAAAF,IAAA;MAAAY,UAAA,GAK1C9B,QAAQ,CAAC;QAAEkC,SAAS,EAAE;MAAwB,CAAC,CAAC;MAAAf,GAAA;MAAAC,MAAA;QAAA,OAC3B,sBAAsB;MAAA;IAAA;MAAAF,IAAA;MAAAY,UAAA,GAK3C9B,QAAQ,CAAC;QAAEiC,OAAO,EAAE,IAAI;QAAEC,SAAS,EAAE;MAAgB,CAAC,CAAC;MAAAf,GAAA;MAAAC,MAAA;QAAA,OACzCd,sBAAsB,CAAC6B,UAAU;MAAA;IAAA;MAAAjB,IAAA;MAAAY,UAAA,GAK/C9B,QAAQ,CAAC;QAAE+B,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAd,GAAA;MAAAC,MAAA;QAAA,OAChC,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAY,UAAA,GAKf9B,QAAQ,CAAC;QACR+B,IAAI,EAAEC,OAAO;QACbE,SAAS,EAAE;MACb,CAAC,CAAC;MAAAf,GAAA;MAAAC,MAAA;QAAA,OACmB,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,KAAA;MA/B1B;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAOE,SAAAgB,OAAA,EAAS;QACP,MAAM;UACJd,MAAM;UACNe,iBAAiB;UACjBC,mBAAmB;UACnBC,QAAQ;UACRlB,YAAY,EAAEmB;QAChB,CAAC,GAAG,IAAI;QACR,MAAMC,WAAW,GAAGnB,MAAM,GAAGe,iBAAiB,GAAGC,mBAAmB;QACpE,MAAMI,OAAO,GAAG7C,QAAQ,CAAC;UACvB,CAAE,GAAEO,MAAO,kBAAiB,GAAG,IAAI;UACnC,CAAE,GAAEA,MAAO,wBAAuB,GAAG,IAAI;UACzC,CAAE,GAAEA,MAAO,uBAAsB,GAAG,IAAI;UACxC,CAAE,GAAEA,MAAO,0BAAyB,GAAGkB;QACzC,CAAC,CAAC;QACF,OAAOvB,IAAI,CAAA4C,EAAA,KAAAA,EAAA,GAAAC,CAAC;AAChB;AACA;AACA,iBAAe,CAAU;AACzB,oBAAkB,CAAW;AAC7B,sBAAoB,CAAyB;AAC7C,iBAAe,CAAc;AAC7B,UAAQ,CAAuD;AAC/D;AACA,KAAI,GANaF,OAAO,EACJH,QAAQ,EACNpC,SAAS,CAACsC,WAAW,CAAC,EAC3BD,WAAW,EAClB,CAAClB,MAAM,GAAGrB,OAAO,GAAGC,MAAM,EAAE;UAAE2C,IAAI,EAAE;QAAc,CAAC,CAAC;MAG5D;;MAEA;AACF;AACA;IAFE;MAAA3B,IAAA;MAAA4B,MAAA;MAAA3B,GAAA;MAAAC,KAAA,EAGA,SAAAK,YAAA,EAAyB;QACvB,OAAQ,GAAErB,MAAO,6BAA4B;MAC/C;IAAC;MAAAc,IAAA;MAAA4B,MAAA;MAAA3B,GAAA;MAAAC,MAAA;QAAA,OAAA2B,aAAA,CAAAA,aAAA,KAGIjD,UAAU,CAACkD,iBAAiB;UAC/BC,cAAc,EAAE;QAAI;MAAA;IAAA;MAAA/B,IAAA;MAAA4B,MAAA;MAAA3B,GAAA;MAAAC,MAAA;QAAA,OAENb,MAAM;MAAA;IAAA;EAAA;AAAA,GAhGUF,UAAU,CAACP,UAAU,CAAC;AAmGxD,eAAeY,mBAAmB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/ui-shell/header-menu-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AAEjD;;;;GAIG;AACH,cACM,iBAAkB,SAAQ,gBAAgB;CAAG;AAEnD,eAAe,iBAAiB,CAAC","file":"header-menu-item.d.ts","sourcesContent":["/**\n * @license\n *\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 { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSHeaderNavItem from './header-nav-item';\n\n/**\n * Header submenu item.\n *\n * @element cds-header-menu-item\n */\n@customElement(`${prefix}-header-menu-item`)\nclass CDSHeaderMenuItem extends CDSHeaderNavItem {}\n\nexport default CDSHeaderMenuItem;\n"]}
+{"version":3,"sources":["components/ui-shell/header-menu-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AAGjD;;;;GAIG;AACH,cACM,iBAAkB,SAAQ,gBAAgB;CAAG;AAEnD,eAAe,iBAAiB,CAAC","file":"header-menu-item.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { prefix } from '../../globals/settings';\nimport CDSHeaderNavItem from './header-nav-item';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Header submenu item.\n *\n * @element cds-header-menu-item\n */\n@customElement(`${prefix}-header-menu-item`)\nclass CDSHeaderMenuItem extends CDSHeaderNavItem {}\n\nexport default CDSHeaderMenuItem;\n"]}

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

@@ -8,9 +8,9 @@ import _decorate from "@babel/runtime/helpers/esm/decorate";
  * LICENSE file in the root directory of this source tree.
  */
 
-import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import CDSHeaderNavItem from './header-nav-item';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
  * Header submenu item.

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

@@ -1 +1 @@
-{"version":3,"file":"header-menu-item.js","names":["customElement","prefix","CDSHeaderNavItem","CDSHeaderMenuItem","_decorate","_initialize","_CDSHeaderNavItem","constructor","args","F","d"],"sources":["components/ui-shell/header-menu-item.ts"],"sourcesContent":["/**\n * @license\n *\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 { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSHeaderNavItem from './header-nav-item';\n\n/**\n * Header submenu item.\n *\n * @element cds-header-menu-item\n */\n@customElement(`${prefix}-header-menu-item`)\nclass CDSHeaderMenuItem extends CDSHeaderNavItem {}\n\nexport default CDSHeaderMenuItem;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,QAAQ,mBAAmB;AACjD,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,gBAAgB,MAAM,mBAAmB;;AAEhD;AACA;AACA;AACA;AACA;AAJA,IAMMC,iBAAiB,GAAAC,SAAA,EADtBJ,aAAa,CAAE,GAAEC,MAAO,mBAAkB,CAAC,aAAAI,WAAA,EAAAC,iBAAA;EAA5C,MACMH,iBAAiB,SAAAG,iBAAA,CAA0B;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAAC;EAAC;IAAAI,CAAA,EAA7CN,iBAAiB;IAAAO,CAAA;EAAA;AAAA,GAASR,gBAAgB;AAEhD,eAAeC,iBAAiB"}
+{"version":3,"file":"header-menu-item.js","names":["prefix","CDSHeaderNavItem","carbonElement","customElement","CDSHeaderMenuItem","_decorate","_initialize","_CDSHeaderNavItem","constructor","args","F","d"],"sources":["components/ui-shell/header-menu-item.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { prefix } from '../../globals/settings';\nimport CDSHeaderNavItem from './header-nav-item';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Header submenu item.\n *\n * @element cds-header-menu-item\n */\n@customElement(`${prefix}-header-menu-item`)\nclass CDSHeaderMenuItem extends CDSHeaderNavItem {}\n\nexport default CDSHeaderMenuItem;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,gBAAgB,MAAM,mBAAmB;AAChD,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;;AAExF;AACA;AACA;AACA;AACA;AAJA,IAMMC,iBAAiB,GAAAC,SAAA,EADtBF,aAAa,CAAE,GAAEH,MAAO,mBAAkB,CAAC,aAAAM,WAAA,EAAAC,iBAAA;EAA5C,MACMH,iBAAiB,SAAAG,iBAAA,CAA0B;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAAC;EAAC;IAAAI,CAAA,EAA7CN,iBAAiB;IAAAO,CAAA;EAAA;AAAA,GAASV,gBAAgB;AAEhD,eAAeG,iBAAiB"}

package/es/components/ui-shell/header-menu.d.ts

@@ -640,7 +640,7 @@ declare class CDSHeaderMenu extends CDSHeaderMenu_base {
     /**
      * The trigger button.
      */
-    private _trigger;
+    protected _topMenuItem: HTMLElement;
     /**
      * keeps track if header menu has any active submenus
      */

package/es/components/ui-shell/header-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ui-shell/header-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYvC;;;;;;;GAOG;AACH,cACM,aAAc,SAAQ,kBAAyC;IACnE;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAe;IAE/B;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAS;IAEnC;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAM7B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAOlC;;OAEG;IAGH,OAAO,CAAC,WAAW;IAMnB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,EAAG,MAAM,CAAC;IAEnB,iBAAiB;IAcjB,OAAO,CAAC,iBAAiB,KAAA;IAUzB,MAAM;IA0CN;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"header-menu.d.ts","sourcesContent":["/**\n * @license\n *\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, customElement, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ChevronDownGlyph from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\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';\n\n/**\n * Header menu.\n *\n * @element cds-header-menu\n * @csspart trigger The trigger button.\n * @csspart trigger-icon The trigger button icon.\n * @csspart menu-body The menu body.\n */\n@customElement(`${prefix}-header-menu`)\nclass CDSHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The trigger button.\n   */\n  @query('a')\n  private _trigger!: 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  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: boolean = !this.expanded) {\n    this.expanded = force;\n    if (!force) {\n      this._trigger.focus();\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on this element.\n   */\n  @HostListener('focusout')\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      _handleKeydownTrigger: handleKeydownTrigger,\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        tabindex=\"0\"\n        class=\"${linkClasses}\"\n        href=\"javascript:void 0\"\n        aria-haspopup=\"menu\"\n        aria-expanded=\"${String(Boolean(expanded))}\"\n        @click=${handleClick}\n        @keydown=${handleKeydownTrigger}>\n        ${triggerContent}${ChevronDownGlyph({\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; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderMenu;\n"]}
+{"version":3,"sources":["components/ui-shell/header-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAavC;;;;;;;GAOG;AACH,cACM,aAAc,SAAQ,kBAAyC;IACnE;;OAEG;IAEH,SAAS,CAAC,YAAY,EAAG,WAAW,CAAC;IAErC;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAS;IAEnC;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;OAEG;IAGH,OAAO,CAAC,qBAAqB;IAM7B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAOlC;;OAEG;IAGH,OAAO,CAAC,WAAW;IAMnB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,EAAG,MAAM,CAAC;IAEnB,iBAAiB;IAcjB,OAAO,CAAC,iBAAiB,KAAA;IAUzB,MAAM;IAyCN;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"header-menu.d.ts","sourcesContent":["/**\n * @license\n *\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, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ChevronDownGlyph from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\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';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Header menu.\n *\n * @element cds-header-menu\n * @csspart trigger The trigger button.\n * @csspart trigger-icon The trigger button icon.\n * @csspart menu-body The menu body.\n */\n@customElement(`${prefix}-header-menu`)\nclass CDSHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The trigger button.\n   */\n  @query('[part=\"trigger\"]')\n  protected _topMenuItem!: HTMLElement;\n\n  /**\n   * keeps track if header menu has any active submenus\n   */\n  private _hasActiveChildren = false;\n\n  /**\n   * Handles `click` event handler on this element.\n   */\n  private _handleClick() {\n    this._handleUserInitiatedToggle();\n  }\n\n  /**\n   * Handler for the `keydown` event on the trigger button.\n   */\n  @HostListener('keydown')\n  // @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: boolean = !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  // @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(Boolean(expanded))}\"\n        @click=${handleClick}>\n        ${triggerContent}${ChevronDownGlyph({\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; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderMenu;\n"]}

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

@@ -15,7 +15,7 @@ let _ = t => t,
 
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LitElement, html } from 'lit';
-import { property, customElement, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import ChevronDownGlyph from "../../icons/chevron--down/16";
 import { prefix } from '../../globals/settings';
@@ -24,6 +24,7 @@ import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
 import { forEach } from '../../globals/internal/collection-helpers';
 import styles from "././header.css.js";
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
  * Header menu.
@@ -32,14 +33,7 @@ import styles from "././header.css.js";
  * @csspart trigger The trigger button.
  * @csspart trigger-icon The trigger button icon.
  * @csspart menu-body The menu body.
- */ /**
-     * Header menu.
-     *
-     * @element cds-header-menu
-     * @csspart trigger The trigger button.
-     * @csspart trigger-icon The trigger button icon.
-     * @csspart menu-body The menu body.
-     */
+ */
 let CDSHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function (_initialize, _HostListenerMixin) {
   class CDSHeaderMenu extends _HostListenerMixin {
     constructor(...args) {
@@ -51,8 +45,8 @@ let CDSHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function
     F: CDSHeaderMenu,
     d: [{
       kind: "field",
-      decorators: [query('a')],
-      key: "_trigger",
+      decorators: [query('[part="trigger"]')],
+      key: "_topMenuItem",
       value: void 0
     }, {
       kind: "field",
@@ -84,6 +78,7 @@ let CDSHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function
        */
     }, {
       kind: "method",
+      decorators: [HostListener('keydown')],
       key: "_handleKeydownTrigger",
       value: function _handleKeydownTrigger({
         key
@@ -104,7 +99,7 @@ let CDSHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function
       value: function _handleUserInitiatedToggle(force = !this.expanded) {
         this.expanded = force;
         if (!force) {
-          this._trigger.focus();
+          this._topMenuItem.focus();
         }
       }
 
@@ -216,8 +211,7 @@ let CDSHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function
           triggerContent,
           menuLabel,
           _hasActiveChildren,
-          _handleClick: handleClick,
-          _handleKeydownTrigger: handleKeydownTrigger
+          _handleClick: handleClick
         } = this;
         const linkClasses = classMap({
           [`${prefix}--header__menu-item`]: true,
@@ -227,13 +221,13 @@ let CDSHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function
         return html(_t || (_t = _`
       <a
         part="trigger"
+        role="button"
         tabindex="0"
         class="${0}"
         href="javascript:void 0"
         aria-haspopup="menu"
         aria-expanded="${0}"
-        @click=${0}
-        @keydown=${0}>
+        @click=${0}>
         ${0}${0}
       </a>
       <ul
@@ -242,7 +236,7 @@ let CDSHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function
         aria-label="${0}">
         <slot></slot>
       </ul>
-    `), linkClasses, String(Boolean(expanded)), handleClick, handleKeydownTrigger, triggerContent, ChevronDownGlyph({
+    `), linkClasses, String(Boolean(expanded)), handleClick, triggerContent, ChevronDownGlyph({
           part: 'trigger-icon',
           class: `${prefix}--header__menu-arrow`
         }), prefix, ifDefined(menuLabel));