@kyndryl-design-system/shidoka-applications 2.67.3 → 2.68.0

package/components/global/footer/footer.js

@@ -39,15 +39,18 @@ import{_ as t,a as i,b as e,c as o,d as r}from"../../../vendor/tslib-Ac8XvvSX.js
 .footer {
   display: flex;
   flex-direction: column;
-  gap: 0px 16px;
-  padding: 24px var(--kd-spacing-32);
-  background: var(--kd-color-background-container-soft);
-  border-top: 1px solid var(--kd-color-border-variants-light);
+  gap: 24px;
+  padding: 24px 32px;
+  border-radius: 8px;
+  margin: 0 var(--kd-page-gutter) 8px;
+  background: var(--kd-color-background-container-default);
+  box-shadow: var(--kd-elevation-level-1);
 }
 @media (min-width: 42rem) {
   .footer {
     flex-direction: row;
     align-items: center;
+    gap: 16px;
   }
 }
 
@@ -58,9 +61,6 @@ import{_ as t,a as i,b as e,c as o,d as r}from"../../../vendor/tslib-Ac8XvvSX.js
   margin-bottom: 4px;
 }
 
-.logo-container {
-  padding: 10px 0;
-}
 @media (min-width: 42rem) {
   .logo-container {
     margin-left: auto;

package/components/global/header/header.d.ts

@@ -34,11 +34,19 @@ export declare class Header extends LitElement {
      * @internal
      */
     accessor _flyoutsOpen: boolean;
+    /** @internal */
+    accessor _headerEl: HTMLElement;
     render(): import("lit-html").TemplateResult<1>;
     private handleSlotChange;
     private handleRootLinkClick;
     private _handleNavToggle;
     private _handleFlyoutsToggle;
+    /** Morph header on scroll.
+     * @internal */
+    private _handleScroll;
+    /** @internal */
+    private _debounceScroll;
+    firstUpdated(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/components/global/header/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAYlD;;;;;;;;GAQG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BAAyB;IAE/C,6EAA6E;IAE7E,QAAQ,CAAC,OAAO,SAAO;IAEvB,+DAA+D;IAE/D,QAAQ,CAAC,QAAQ,SAAM;IAEvB;;OAEG;IAEH,QAAQ,CAAC,MAAM,EAAG,GAAG,CAAC;IAEtB;;OAEG;IAEH,QAAQ,CAAC,gBAAgB,EAAG,GAAG,CAAC;IAEhC;;OAEG;IAEH,QAAQ,CAAC,OAAO,EAAG,GAAG,CAAC;IAEvB;;OAEG;IAEH,QAAQ,CAAC,QAAQ,UAAS;IAE1B;;OAEG;IAEH,QAAQ,CAAC,YAAY,UAAS;IAErB,MAAM;IAiCf,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,oBAAoB;IAInB,iBAAiB;IAWjB,oBAAoB;CAU9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAC;KACtB;CACF"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAclD;;;;;;;;GAQG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BAAyB;IAE/C,6EAA6E;IAE7E,QAAQ,CAAC,OAAO,SAAO;IAEvB,+DAA+D;IAE/D,QAAQ,CAAC,QAAQ,SAAM;IAEvB;;OAEG;IAEH,QAAQ,CAAC,MAAM,EAAG,GAAG,CAAC;IAEtB;;OAEG;IAEH,QAAQ,CAAC,gBAAgB,EAAG,GAAG,CAAC;IAEhC;;OAEG;IAEH,QAAQ,CAAC,OAAO,EAAG,GAAG,CAAC;IAEvB;;OAEG;IAEH,QAAQ,CAAC,QAAQ,UAAS;IAE1B;;OAEG;IAEH,QAAQ,CAAC,YAAY,UAAS;IAE9B,gBAAgB;IAEhB,QAAQ,CAAC,SAAS,EAAG,WAAW,CAAC;IAExB,MAAM;IAmCf,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,oBAAoB;IAI5B;mBACe;IACf,OAAO,CAAC,aAAa;IAQrB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAEpB;IAEM,YAAY;IAQZ,iBAAiB;IAajB,oBAAoB;CAY9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAC;KACtB;CACF"}

package/components/global/header/header.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js";import{i as n,a as r,r as l,t as s,n as d,o as c}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{e as h,a as g,x as m}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as p}from"../../../vendor/lit-element-DxLLCKb1.js";import{l as u}from"../../../vendor/@kyndryl-design-system/shidoka-foundation-7uii0Jz8.js";var v=n`*,
+import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js";import{i as n,a as r,r as l,t as s,n as d,o as c,e as h}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{e as m,a as g,x as p}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as u}from"../../../vendor/lit-element-DxLLCKb1.js";import{debounce as v}from"../../../common/helpers/helpers.js";import{l as k}from"../../../vendor/@kyndryl-design-system/shidoka-foundation-7uii0Jz8.js";var f=n`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -63,17 +63,20 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
 @media (min-width: 42rem) {
   .overlay {
     position: fixed;
-    top: var(--kd-header-height);
+    top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: -2;
+    z-index: calc(var(--kd-z-header) - 1);
     transition: background-color 300ms ease-out, visibility 300ms ease-out;
     background: transparent;
     visibility: hidden;
   }
-  .open + .overlay {
-    background: var(--kd-color-background-opacity-8);
+  .overlay.scrolled {
+    top: var(--kd-header-height);
+  }
+  .open + .overlay, .child-open + .overlay {
+    background: var(--kd-color-background-opacity-inverse-backdrop);
     visibility: visible;
   }
 }
@@ -120,8 +123,8 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
     left: auto;
     border-top: none;
     background: var(--kd-color-background-container-default);
-    box-shadow: 0px 2px 8px 0px rgba(61, 60, 60, 0.25);
     max-height: calc(100vh - var(--kd-header-height));
+    box-shadow: var(--kd-elevation-level-1);
   }
   .menu__content.left {
     left: -12px;
@@ -237,8 +240,7 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
   right: 0;
   left: 0;
   height: var(--kd-header-height);
-  background: var(--kd-color-background-container-secondary);
-  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+  background: var(--kd-color-background-container-default);
   padding: 4px calc(var(--kd-page-gutter) - 4px) 4px var(--kd-page-gutter);
   transition: z-index 150ms ease-out;
   z-index: var(--kd-z-header);
@@ -246,9 +248,30 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
 .header.child-open {
   z-index: calc(var(--kd-z-header) + 20);
 }
+@media screen and (min-width: 42rem) {
+  .header {
+    box-shadow: var(--kd-elevation-level-1);
+  }
+  .header.loaded {
+    transition: border-radius 150ms ease-out, margin 150ms ease-out, padding 150ms ease-out;
+  }
+  .header:not(.scrolled) {
+    border-radius: 8px;
+    margin: 8px;
+    padding-left: calc(var(--kd-page-gutter) - 8px);
+  }
+}
 .header.left-slotted {
   padding-left: 12px;
 }
+@media (min-width: 42rem) {
+  .header.left-slotted {
+    padding-left: 12px;
+  }
+  .header.left-slotted.scrolled {
+    padding-left: 20px;
+  }
+}
 .header__right {
   display: flex;
   align-items: center;
@@ -322,8 +345,8 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
   background: none;
   padding: 0 8px;
   margin: 0 2px;
-}`;let k=(()=>{var n,k,f,b,x,y,w;let _,z,E,O,T,C,S,U,$,j=[s("kyn-header")],M=[],W=p,L=[],F=[],N=[],R=[],q=[],H=[],P=[],Y=[],A=[],B=[],D=[],G=[],I=[],J=[];return z=class extends W{get rootUrl(){return a(this,n,"f")}set rootUrl(e){o(this,n,e,"f")}get appTitle(){return a(this,k,"f")}set appTitle(e){o(this,k,e,"f")}get navEls(){return a(this,f,"f")}set navEls(e){o(this,f,e,"f")}get assignedElements(){return a(this,b,"f")}set assignedElements(e){o(this,b,e,"f")}get leftEls(){return a(this,x,"f")}set leftEls(e){o(this,x,e,"f")}get _navOpen(){return a(this,y,"f")}set _navOpen(e){o(this,y,e,"f")}get _flyoutsOpen(){return a(this,w,"f")}set _flyoutsOpen(e){o(this,w,e,"f")}render(){const e={header:!0,"left-slotted":this.leftEls.length,"child-open":this._navOpen||this._flyoutsOpen};return m`
-      <header class="${h(e)}">
+}`;let b=(()=>{var n,b,y,x,_,w,E,z;let O,S,T,C,L,U,j,$,M,W,F=[s("kyn-header")],N=[],R=u,Y=[],q=[],H=[],P=[],A=[],B=[],D=[],G=[],I=[],J=[],K=[],Q=[],V=[],X=[],Z=[],ee=[];return S=class extends R{constructor(){super(...arguments),n.set(this,i(this,Y,"/")),b.set(this,(i(this,q),i(this,H,""))),y.set(this,(i(this,P),i(this,A,void 0))),x.set(this,(i(this,B),i(this,D,void 0))),_.set(this,(i(this,G),i(this,I,void 0))),w.set(this,(i(this,J),i(this,K,!1))),E.set(this,(i(this,Q),i(this,V,!1))),z.set(this,(i(this,X),i(this,Z,void 0))),this._debounceScroll=(i(this,ee),v((()=>{this._handleScroll()})))}get rootUrl(){return a(this,n,"f")}set rootUrl(e){o(this,n,e,"f")}get appTitle(){return a(this,b,"f")}set appTitle(e){o(this,b,e,"f")}get navEls(){return a(this,y,"f")}set navEls(e){o(this,y,e,"f")}get assignedElements(){return a(this,x,"f")}set assignedElements(e){o(this,x,e,"f")}get leftEls(){return a(this,_,"f")}set leftEls(e){o(this,_,e,"f")}get _navOpen(){return a(this,w,"f")}set _navOpen(e){o(this,w,e,"f")}get _flyoutsOpen(){return a(this,E,"f")}set _flyoutsOpen(e){o(this,E,e,"f")}get _headerEl(){return a(this,z,"f")}set _headerEl(e){o(this,z,e,"f")}render(){const e={header:!0,"left-slotted":this.leftEls.length,"child-open":this._navOpen||this._flyoutsOpen};return p`
+      <header class="${m(e)}">
         <slot name="left" @slotchange=${this.handleSlotChange}></slot>
 
         <a
@@ -333,7 +356,7 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
           @click="${e=>this.handleRootLinkClick(e)}"
         >
           <slot name="logo" @slotchange=${this.handleSlotChange}>
-            ${g(u)}
+            ${g(k)}
           </slot>
         </a>
 
@@ -345,5 +368,7 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>
       </header>
-    `}handleSlotChange(){this.requestUpdate()}handleRootLinkClick(e){const t=new CustomEvent("on-root-link-click",{detail:{origEvent:e}});this.dispatchEvent(t)}_handleNavToggle(e){this._navOpen=e.detail.open}_handleFlyoutsToggle(e){this._flyoutsOpen=e.detail.open}connectedCallback(){super.connectedCallback(),document.addEventListener("on-nav-toggle",(e=>this._handleNavToggle(e))),document.addEventListener("on-flyouts-toggle",(e=>this._handleFlyoutsToggle(e)))}disconnectedCallback(){document.removeEventListener("on-nav-toggle",(e=>this._handleNavToggle(e))),document.removeEventListener("on-flyouts-toggle",(e=>this._handleFlyoutsToggle(e))),super.disconnectedCallback()}constructor(){super(...arguments),n.set(this,i(this,L,"/")),k.set(this,(i(this,F),i(this,N,""))),f.set(this,(i(this,R),i(this,q,void 0))),b.set(this,(i(this,H),i(this,P,void 0))),x.set(this,(i(this,Y),i(this,A,void 0))),y.set(this,(i(this,B),i(this,D,!1))),w.set(this,(i(this,G),i(this,I,!1))),i(this,J)}},n=new WeakMap,k=new WeakMap,f=new WeakMap,b=new WeakMap,x=new WeakMap,y=new WeakMap,w=new WeakMap,e(z,"Header"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=W[Symbol.metadata])&&void 0!==e?e:null):void 0;E=[d({type:String})],O=[d({type:String})],T=[c({selector:"kyn-header-nav"})],C=[c()],S=[c({slot:"left"})],U=[r()],$=[r()],t(z,null,E,{kind:"accessor",name:"rootUrl",static:!1,private:!1,access:{has:e=>"rootUrl"in e,get:e=>e.rootUrl,set:(e,t)=>{e.rootUrl=t}},metadata:i},L,F),t(z,null,O,{kind:"accessor",name:"appTitle",static:!1,private:!1,access:{has:e=>"appTitle"in e,get:e=>e.appTitle,set:(e,t)=>{e.appTitle=t}},metadata:i},N,R),t(z,null,T,{kind:"accessor",name:"navEls",static:!1,private:!1,access:{has:e=>"navEls"in e,get:e=>e.navEls,set:(e,t)=>{e.navEls=t}},metadata:i},q,H),t(z,null,C,{kind:"accessor",name:"assignedElements",static:!1,private:!1,access:{has:e=>"assignedElements"in e,get:e=>e.assignedElements,set:(e,t)=>{e.assignedElements=t}},metadata:i},P,Y),t(z,null,S,{kind:"accessor",name:"leftEls",static:!1,private:!1,access:{has:e=>"leftEls"in e,get:e=>e.leftEls,set:(e,t)=>{e.leftEls=t}},metadata:i},A,B),t(z,null,U,{kind:"accessor",name:"_navOpen",static:!1,private:!1,access:{has:e=>"_navOpen"in e,get:e=>e._navOpen,set:(e,t)=>{e._navOpen=t}},metadata:i},D,G),t(z,null,$,{kind:"accessor",name:"_flyoutsOpen",static:!1,private:!1,access:{has:e=>"_flyoutsOpen"in e,get:e=>e._flyoutsOpen,set:(e,t)=>{e._flyoutsOpen=t}},metadata:i},I,J),t(null,_={value:z},j,{kind:"class",name:z.name,metadata:i},null,M),z=_.value,i&&Object.defineProperty(z,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),z.styles=l(v),i(z,M),z})();export{k as Header};
+
+      <div class="overlay"></div>
+    `}handleSlotChange(){this.requestUpdate()}handleRootLinkClick(e){const t=new CustomEvent("on-root-link-click",{detail:{origEvent:e}});this.dispatchEvent(t)}_handleNavToggle(e){this._navOpen=e.detail.open}_handleFlyoutsToggle(e){this._flyoutsOpen=e.detail.open||e.detail.childrenOpen}_handleScroll(){window.scrollY>0?this._headerEl.classList.add("scrolled"):this._headerEl.classList.remove("scrolled")}firstUpdated(){this._handleScroll(),setTimeout((()=>{this._headerEl.classList.add("loaded")}),0)}connectedCallback(){super.connectedCallback(),document.addEventListener("on-nav-toggle",(e=>this._handleNavToggle(e))),document.addEventListener("on-flyouts-toggle",(e=>this._handleFlyoutsToggle(e))),window.addEventListener("scroll",this._debounceScroll)}disconnectedCallback(){document.removeEventListener("on-nav-toggle",(e=>this._handleNavToggle(e))),document.removeEventListener("on-flyouts-toggle",(e=>this._handleFlyoutsToggle(e))),window.removeEventListener("scroll",this._debounceScroll),super.disconnectedCallback()}},n=new WeakMap,b=new WeakMap,y=new WeakMap,x=new WeakMap,_=new WeakMap,w=new WeakMap,E=new WeakMap,z=new WeakMap,e(S,"Header"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=R[Symbol.metadata])&&void 0!==e?e:null):void 0;T=[d({type:String})],C=[d({type:String})],L=[c({selector:"kyn-header-nav"})],U=[c()],j=[c({slot:"left"})],$=[r()],M=[r()],W=[h("header")],t(S,null,T,{kind:"accessor",name:"rootUrl",static:!1,private:!1,access:{has:e=>"rootUrl"in e,get:e=>e.rootUrl,set:(e,t)=>{e.rootUrl=t}},metadata:i},Y,q),t(S,null,C,{kind:"accessor",name:"appTitle",static:!1,private:!1,access:{has:e=>"appTitle"in e,get:e=>e.appTitle,set:(e,t)=>{e.appTitle=t}},metadata:i},H,P),t(S,null,L,{kind:"accessor",name:"navEls",static:!1,private:!1,access:{has:e=>"navEls"in e,get:e=>e.navEls,set:(e,t)=>{e.navEls=t}},metadata:i},A,B),t(S,null,U,{kind:"accessor",name:"assignedElements",static:!1,private:!1,access:{has:e=>"assignedElements"in e,get:e=>e.assignedElements,set:(e,t)=>{e.assignedElements=t}},metadata:i},D,G),t(S,null,j,{kind:"accessor",name:"leftEls",static:!1,private:!1,access:{has:e=>"leftEls"in e,get:e=>e.leftEls,set:(e,t)=>{e.leftEls=t}},metadata:i},I,J),t(S,null,$,{kind:"accessor",name:"_navOpen",static:!1,private:!1,access:{has:e=>"_navOpen"in e,get:e=>e._navOpen,set:(e,t)=>{e._navOpen=t}},metadata:i},K,Q),t(S,null,M,{kind:"accessor",name:"_flyoutsOpen",static:!1,private:!1,access:{has:e=>"_flyoutsOpen"in e,get:e=>e._flyoutsOpen,set:(e,t)=>{e._flyoutsOpen=t}},metadata:i},V,X),t(S,null,W,{kind:"accessor",name:"_headerEl",static:!1,private:!1,access:{has:e=>"_headerEl"in e,get:e=>e._headerEl,set:(e,t)=>{e._headerEl=t}},metadata:i},Z,ee),t(null,O={value:S},F,{kind:"class",name:S.name,metadata:i},null,N),S=O.value,i&&Object.defineProperty(S,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),S.styles=l(f),i(S,N),S})();export{b as Header};
 //# sourceMappingURL=header.js.map

package/components/global/header/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","sources":["../../../../src/components/global/header/header.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport HeaderScss from './header.scss?inline';\nimport logo from '@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg';\n\n/**\n * The global Header component.\n * @fires on-menu-toggle - Captures the menu toggle click event and emits the menu open state in the detail. `detail:{ origEvent: Event}`\n * @fires on-root-link-click - Captures the logo link click event and emits the original event details. `detail:{ origEvent: Event}`\n * @slot unnamed - The default slot for all empty space right of the logo/title.\n * @slot logo - Slot for the logo, will overwrite the default logo.\n * @slot left - Slot left of the logo, intended for the header nav.\n * @slot center - Slot between logo/title and right flyouts.\n */\n@customElement('kyn-header')\nexport class Header extends LitElement {\n  static override styles = unsafeCSS(HeaderScss);\n\n  /** URL for the header logo link. Should target the application home page. */\n  @property({ type: String })\n  accessor rootUrl = '/';\n\n  /** App title text next to logo.  Hidden on smaller screens. */\n  @property({ type: String })\n  accessor appTitle = '';\n\n  /** Queries for slotted header-nav.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-header-nav' })\n  accessor navEls!: any;\n\n  /** Queries for all slotted elements.\n   * @internal\n   */\n  @queryAssignedElements()\n  accessor assignedElements!: any;\n\n  /** Queries for elements in left slot.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'left' })\n  accessor leftEls!: any;\n\n  /** header-nav open state\n   * @internal\n   */\n  @state()\n  accessor _navOpen = false;\n\n  /** header-flyouts open state\n   * @internal\n   */\n  @state()\n  accessor _flyoutsOpen = false;\n\n  override render() {\n    const classes = {\n      header: true,\n      'left-slotted': this.leftEls.length,\n      'child-open': this._navOpen || this._flyoutsOpen,\n    };\n\n    return html`\n      <header class=\"${classMap(classes)}\">\n        <slot name=\"left\" @slotchange=${this.handleSlotChange}></slot>\n\n        <a\n          href=\"${this.rootUrl}\"\n          class=\"logo-link interactive\"\n          aria-label=\"${this.rootUrl}\"\n          @click=\"${(e: Event) => this.handleRootLinkClick(e)}\"\n        >\n          <slot name=\"logo\" @slotchange=${this.handleSlotChange}>\n            ${unsafeHTML(logo)}\n          </slot>\n        </a>\n\n        <span class=\"title\">${this.appTitle}</span>\n\n        <slot name=\"center\"></slot>\n\n        <div class=\"header__right\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </div>\n      </header>\n    `;\n  }\n\n  private handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  private handleRootLinkClick(e: Event) {\n    const event = new CustomEvent('on-root-link-click', {\n      detail: { origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleNavToggle(e: any) {\n    this._navOpen = e.detail.open;\n  }\n\n  private _handleFlyoutsToggle(e: any) {\n    this._flyoutsOpen = e.detail.open;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('on-nav-toggle', (e: Event) =>\n      this._handleNavToggle(e)\n    );\n    document.addEventListener('on-flyouts-toggle', (e: Event) =>\n      this._handleFlyoutsToggle(e)\n    );\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('on-nav-toggle', (e: Event) =>\n      this._handleNavToggle(e)\n    );\n    document.removeEventListener('on-flyouts-toggle', (e: Event) =>\n      this._handleFlyoutsToggle(e)\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header': Header;\n  }\n}\n"],"names":["Header","customElement","LitElement","_classThis","_classSuper","rootUrl","__classPrivateFieldGet","this","_Header_rootUrl_accessor_storage","value","__classPrivateFieldSet","appTitle","_Header_appTitle_accessor_storage","navEls","_Header_navEls_accessor_storage","assignedElements","_Header_assignedElements_accessor_storage","leftEls","_Header_leftEls_accessor_storage","_navOpen","_Header__navOpen_accessor_storage","_flyoutsOpen","_Header__flyoutsOpen_accessor_storage","render","classes","header","length","html","classMap","handleSlotChange","e","handleRootLinkClick","unsafeHTML","logo","requestUpdate","event","CustomEvent","detail","origEvent","dispatchEvent","_handleNavToggle","open","_handleFlyoutsToggle","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","set","__runInitializers","_rootUrl_initializers","_rootUrl_extraInitializers","_appTitle_initializers","_appTitle_extraInitializers","_navEls_initializers","_navEls_extraInitializers","_assignedElements_initializers","_assignedElements_extraInitializers","_leftEls_initializers","_leftEls_extraInitializers","__navOpen_initializers","__navOpen_extraInitializers","__flyoutsOpen_initializers","_rootUrl_decorators","property","type","String","_appTitle_decorators","_navEls_decorators","queryAssignedElements","selector","_assignedElements_decorators","_leftEls_decorators","slot","__navOpen_decorators","state","__flyoutsOpen_decorators","__esDecorate","kind","name","static","private","access","has","obj","get","metadata","_metadata","__flyoutsOpen_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderScss"],"mappings":"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"}
+{"version":3,"file":"header.js","sources":["../../../../src/components/global/header/header.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderScss from './header.scss?inline';\nimport logo from '@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg';\n\n/**\n * The global Header component.\n * @fires on-menu-toggle - Captures the menu toggle click event and emits the menu open state in the detail. `detail:{ origEvent: Event}`\n * @fires on-root-link-click - Captures the logo link click event and emits the original event details. `detail:{ origEvent: Event}`\n * @slot unnamed - The default slot for all empty space right of the logo/title.\n * @slot logo - Slot for the logo, will overwrite the default logo.\n * @slot left - Slot left of the logo, intended for the header nav.\n * @slot center - Slot between logo/title and right flyouts.\n */\n@customElement('kyn-header')\nexport class Header extends LitElement {\n  static override styles = unsafeCSS(HeaderScss);\n\n  /** URL for the header logo link. Should target the application home page. */\n  @property({ type: String })\n  accessor rootUrl = '/';\n\n  /** App title text next to logo.  Hidden on smaller screens. */\n  @property({ type: String })\n  accessor appTitle = '';\n\n  /** Queries for slotted header-nav.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-header-nav' })\n  accessor navEls!: any;\n\n  /** Queries for all slotted elements.\n   * @internal\n   */\n  @queryAssignedElements()\n  accessor assignedElements!: any;\n\n  /** Queries for elements in left slot.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'left' })\n  accessor leftEls!: any;\n\n  /** header-nav open state\n   * @internal\n   */\n  @state()\n  accessor _navOpen = false;\n\n  /** header-flyouts open state\n   * @internal\n   */\n  @state()\n  accessor _flyoutsOpen = false;\n\n  /** @internal */\n  @query('header')\n  accessor _headerEl!: HTMLElement;\n\n  override render() {\n    const classes = {\n      header: true,\n      'left-slotted': this.leftEls.length,\n      'child-open': this._navOpen || this._flyoutsOpen,\n    };\n\n    return html`\n      <header class=\"${classMap(classes)}\">\n        <slot name=\"left\" @slotchange=${this.handleSlotChange}></slot>\n\n        <a\n          href=\"${this.rootUrl}\"\n          class=\"logo-link interactive\"\n          aria-label=\"${this.rootUrl}\"\n          @click=\"${(e: Event) => this.handleRootLinkClick(e)}\"\n        >\n          <slot name=\"logo\" @slotchange=${this.handleSlotChange}>\n            ${unsafeHTML(logo)}\n          </slot>\n        </a>\n\n        <span class=\"title\">${this.appTitle}</span>\n\n        <slot name=\"center\"></slot>\n\n        <div class=\"header__right\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </div>\n      </header>\n\n      <div class=\"overlay\"></div>\n    `;\n  }\n\n  private handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  private handleRootLinkClick(e: Event) {\n    const event = new CustomEvent('on-root-link-click', {\n      detail: { origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleNavToggle(e: any) {\n    this._navOpen = e.detail.open;\n  }\n\n  private _handleFlyoutsToggle(e: any) {\n    this._flyoutsOpen = e.detail.open || e.detail.childrenOpen;\n  }\n\n  /** Morph header on scroll.\n   * @internal */\n  private _handleScroll() {\n    if (window.scrollY > 0) {\n      this._headerEl.classList.add('scrolled');\n    } else {\n      this._headerEl.classList.remove('scrolled');\n    }\n  }\n\n  /** @internal */\n  private _debounceScroll = debounce(() => {\n    this._handleScroll();\n  });\n\n  override firstUpdated() {\n    this._handleScroll();\n\n    setTimeout(() => {\n      this._headerEl.classList.add('loaded');\n    }, 0);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('on-nav-toggle', (e: Event) =>\n      this._handleNavToggle(e)\n    );\n    document.addEventListener('on-flyouts-toggle', (e: Event) =>\n      this._handleFlyoutsToggle(e)\n    );\n\n    window.addEventListener('scroll', this._debounceScroll);\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('on-nav-toggle', (e: Event) =>\n      this._handleNavToggle(e)\n    );\n    document.removeEventListener('on-flyouts-toggle', (e: Event) =>\n      this._handleFlyoutsToggle(e)\n    );\n\n    window.removeEventListener('scroll', this._debounceScroll);\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header': Header;\n  }\n}\n"],"names":["Header","customElement","LitElement","_classThis","_classSuper","_Header_rootUrl_accessor_storage","set","this","__runInitializers","_rootUrl_initializers","_Header_appTitle_accessor_storage","_rootUrl_extraInitializers","_appTitle_initializers","_Header_navEls_accessor_storage","_appTitle_extraInitializers","_navEls_initializers","_Header_assignedElements_accessor_storage","_navEls_extraInitializers","_assignedElements_initializers","_Header_leftEls_accessor_storage","_assignedElements_extraInitializers","_leftEls_initializers","_Header__navOpen_accessor_storage","_leftEls_extraInitializers","__navOpen_initializers","_Header__flyoutsOpen_accessor_storage","__navOpen_extraInitializers","__flyoutsOpen_initializers","_Header__headerEl_accessor_storage","__flyoutsOpen_extraInitializers","__headerEl_initializers","_debounceScroll","__headerEl_extraInitializers","debounce","_handleScroll","rootUrl","__classPrivateFieldGet","value","__classPrivateFieldSet","appTitle","navEls","assignedElements","leftEls","_navOpen","_flyoutsOpen","_headerEl","render","classes","header","length","html","classMap","handleSlotChange","e","handleRootLinkClick","unsafeHTML","logo","requestUpdate","event","CustomEvent","detail","origEvent","dispatchEvent","_handleNavToggle","open","_handleFlyoutsToggle","childrenOpen","window","scrollY","classList","add","remove","firstUpdated","setTimeout","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","_rootUrl_decorators","property","type","String","_appTitle_decorators","_navEls_decorators","queryAssignedElements","selector","_assignedElements_decorators","_leftEls_decorators","slot","__navOpen_decorators","state","__flyoutsOpen_decorators","query","__esDecorate","kind","name","static","private","access","has","obj","get","metadata","_metadata","__headerEl_decorators","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderScss"],"mappings":"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"}

package/components/global/header/headerFlyout.d.ts

@@ -36,7 +36,7 @@ export declare class HeaderFlyout extends LitElement {
     private _handleBack;
     private handleClick;
     private handleClickOut;
-    private _handleOverlayClick;
+    willUpdate(changedProps: any): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/components/global/header/headerFlyout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerFlyout.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyout.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAWlD;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAA+B;IAErD,yBAAyB;IAEzB,QAAQ,CAAC,IAAI,UAAS;IAEtB,mFAAmF;IAEnF,QAAQ,CAAC,UAAU,UAAS;IAE5B,uBAAuB;IAEvB,QAAQ,CAAC,SAAS,UAAS;IAE3B,2BAA2B;IAE3B,QAAQ,CAAC,KAAK,SAAM;IAEpB,oDAAoD;IAEpD,QAAQ,CAAC,aAAa,UAAS;IAE/B,2CAA2C;IAE3C,QAAQ,CAAC,eAAe,UAAS;IAEjC;;;OAGG;IAEH,QAAQ,CAAC,aAAa,SAAM;IAE5B,oCAAoC;IAEpC,QAAQ,CAAC,IAAI,SAAM;IAEnB,qCAAqC;IAErC,QAAQ,CAAC,QAAQ,SAAU;IAE3B;;;OAGG;IAEH,QAAQ,CAAC,eAAe,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAErC,MAAM;IAkFf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,mBAAmB;IAIlB,iBAAiB;IAMjB,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}
+{"version":3,"file":"headerFlyout.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyout.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAWlD;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAA+B;IAErD,yBAAyB;IAEzB,QAAQ,CAAC,IAAI,UAAS;IAEtB,mFAAmF;IAEnF,QAAQ,CAAC,UAAU,UAAS;IAE5B,uBAAuB;IAEvB,QAAQ,CAAC,SAAS,UAAS;IAE3B,2BAA2B;IAE3B,QAAQ,CAAC,KAAK,SAAM;IAEpB,oDAAoD;IAEpD,QAAQ,CAAC,aAAa,UAAS;IAE/B,2CAA2C;IAE3C,QAAQ,CAAC,eAAe,UAAS;IAEjC;;;OAGG;IAEH,QAAQ,CAAC,aAAa,SAAM;IAE5B,oCAAoC;IAEpC,QAAQ,CAAC,IAAI,SAAM;IAEnB,qCAAqC;IAErC,QAAQ,CAAC,QAAQ,SAAU;IAE3B;;;OAGG;IAEH,QAAQ,CAAC,eAAe,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAErC,MAAM;IAiFf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IAMb,UAAU,CAAC,YAAY,EAAE,GAAG;IAW5B,iBAAiB;IAMjB,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}

package/components/global/header/headerFlyout.js

@@ -1,4 +1,4 @@
-import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as o,o as r,x as s}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as l,t as d,r as c,n as h,o as m}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as u}from"../../../vendor/lit-element-DxLLCKb1.js";import{b as k,d as p}from"../../../vendor/@kyndryl-design-system/shidoka-icons-DALQfz_R.js";var v=l`*,
+import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as o,o as r,x as s}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as l,t as d,r as c,n as h,o as m}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as u}from"../../../vendor/lit-element-DxLLCKb1.js";import{b as p,d as k}from"../../../vendor/@kyndryl-design-system/shidoka-icons-DALQfz_R.js";var v=l`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -63,17 +63,20 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
 @media (min-width: 42rem) {
   .overlay {
     position: fixed;
-    top: var(--kd-header-height);
+    top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: -2;
+    z-index: calc(var(--kd-z-header) - 1);
     transition: background-color 300ms ease-out, visibility 300ms ease-out;
     background: transparent;
     visibility: hidden;
   }
-  .open + .overlay {
-    background: var(--kd-color-background-opacity-8);
+  .overlay.scrolled {
+    top: var(--kd-header-height);
+  }
+  .open + .overlay, .child-open + .overlay {
+    background: var(--kd-color-background-opacity-inverse-backdrop);
     visibility: visible;
   }
 }
@@ -120,8 +123,8 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
     left: auto;
     border-top: none;
     background: var(--kd-color-background-container-default);
-    box-shadow: 0px 2px 8px 0px rgba(61, 60, 60, 0.25);
     max-height: calc(100vh - var(--kd-header-height));
+    box-shadow: var(--kd-elevation-level-1);
   }
   .menu__content.left {
     left: -12px;
@@ -368,7 +371,7 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
   .label {
     display: none;
   }
-}`;let b=(()=>{var l,b,g,f,x,y,w,z,_,L;let $,T,M,B,C,j,W,E,S,O,A,P,F=[d("kyn-header-flyout")],H=[],X=u,Y=[],q=[],D=[],G=[],I=[],J=[],K=[],N=[],Q=[],R=[],U=[],V=[],Z=[],tt=[],et=[],it=[],at=[],nt=[],ot=[],rt=[];return T=class extends X{get open(){return a(this,l,"f")}set open(t){n(this,l,t,"f")}get anchorLeft(){return a(this,b,"f")}set anchorLeft(t){n(this,b,t,"f")}get hideArrow(){return a(this,g,"f")}set hideArrow(t){n(this,g,t,"f")}get label(){return a(this,f,"f")}set label(t){n(this,f,t,"f")}get hideMenuLabel(){return a(this,x,"f")}set hideMenuLabel(t){n(this,x,t,"f")}get hideButtonLabel(){return a(this,y,"f")}set hideButtonLabel(t){n(this,y,t,"f")}get assistiveText(){return a(this,w,"f")}set assistiveText(t){n(this,w,t,"f")}get href(){return a(this,z,"f")}set href(t){n(this,z,t,"f")}get backText(){return a(this,_,"f")}set backText(t){n(this,_,t,"f")}get slottedElements(){return a(this,L,"f")}set slottedElements(t){n(this,L,t,"f")}render(){const t={menu:!0,open:this.open},e={menu__content:!0,"menu__content--left":this.anchorLeft,slotted:this.slottedElements.length};return s`
+}`;let b=(()=>{var l,b,g,f,x,y,w,z,_,L;let $,T,M,B,C,E,j,W,S,A,O,P,F=[d("kyn-header-flyout")],H=[],U=u,X=[],Y=[],q=[],D=[],G=[],I=[],J=[],K=[],N=[],Q=[],R=[],V=[],Z=[],tt=[],et=[],it=[],at=[],nt=[],ot=[],rt=[];return T=class extends U{get open(){return a(this,l,"f")}set open(t){n(this,l,t,"f")}get anchorLeft(){return a(this,b,"f")}set anchorLeft(t){n(this,b,t,"f")}get hideArrow(){return a(this,g,"f")}set hideArrow(t){n(this,g,t,"f")}get label(){return a(this,f,"f")}set label(t){n(this,f,t,"f")}get hideMenuLabel(){return a(this,x,"f")}set hideMenuLabel(t){n(this,x,t,"f")}get hideButtonLabel(){return a(this,y,"f")}set hideButtonLabel(t){n(this,y,t,"f")}get assistiveText(){return a(this,w,"f")}set assistiveText(t){n(this,w,t,"f")}get href(){return a(this,z,"f")}set href(t){n(this,z,t,"f")}get backText(){return a(this,_,"f")}set backText(t){n(this,_,t,"f")}get slottedElements(){return a(this,L,"f")}set slottedElements(t){n(this,L,t,"f")}render(){const t={menu:!0,open:this.open},e={menu__content:!0,"menu__content--left":this.anchorLeft,slotted:this.slottedElements.length};return s`
       <div class="${o(t)}">
         ${""!==this.href?s`
               <a
@@ -387,7 +390,7 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
                     `}
 
                 <span slot="button" class="arrow">
-                  ${r(k)}
+                  ${r(p)}
                 </span>
               </a>
             `:s`
@@ -406,14 +409,14 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
                     `}
 
                 <span slot="button" class="arrow">
-                  ${r(k)}
+                  ${r(p)}
                 </span>
               </button>
             `}
 
         <div class=${o(e)}>
           <button class="go-back" @click=${()=>this._handleBack()}>
-            <span>${r(p)}</span>
+            <span>${r(k)}</span>
             ${this.backText}
           </button>
 
@@ -426,6 +429,5 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
           <slot></slot>
         </div>
       </div>
-      <div class="overlay" @click=${this._handleOverlayClick}></div>
-    `}_handleBack(){this.open=!1}handleClick(){this.open=!this.open}handleClickOut(t){t.composedPath().includes(this)||(this.open=!1)}_handleOverlayClick(){this.open=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(t=>this.handleClickOut(t)))}disconnectedCallback(){document.removeEventListener("click",(t=>this.handleClickOut(t))),super.disconnectedCallback()}constructor(){super(...arguments),l.set(this,i(this,Y,!1)),b.set(this,(i(this,q),i(this,D,!1))),g.set(this,(i(this,G),i(this,I,!1))),f.set(this,(i(this,J),i(this,K,""))),x.set(this,(i(this,N),i(this,Q,!1))),y.set(this,(i(this,R),i(this,U,!1))),w.set(this,(i(this,V),i(this,Z,""))),z.set(this,(i(this,tt),i(this,et,""))),_.set(this,(i(this,it),i(this,at,"Back"))),L.set(this,(i(this,nt),i(this,ot,void 0))),i(this,rt)}},l=new WeakMap,b=new WeakMap,g=new WeakMap,f=new WeakMap,x=new WeakMap,y=new WeakMap,w=new WeakMap,z=new WeakMap,_=new WeakMap,L=new WeakMap,t(T,"HeaderFlyout"),(()=>{var t;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(t=X[Symbol.metadata])&&void 0!==t?t:null):void 0;M=[h({type:Boolean})],B=[h({type:Boolean})],C=[h({type:Boolean})],j=[h({type:String})],W=[h({type:Boolean})],E=[h({type:Boolean})],S=[h({type:String})],O=[h({type:String})],A=[h({type:String})],P=[m()],e(T,null,M,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:t=>"open"in t,get:t=>t.open,set:(t,e)=>{t.open=e}},metadata:i},Y,q),e(T,null,B,{kind:"accessor",name:"anchorLeft",static:!1,private:!1,access:{has:t=>"anchorLeft"in t,get:t=>t.anchorLeft,set:(t,e)=>{t.anchorLeft=e}},metadata:i},D,G),e(T,null,C,{kind:"accessor",name:"hideArrow",static:!1,private:!1,access:{has:t=>"hideArrow"in t,get:t=>t.hideArrow,set:(t,e)=>{t.hideArrow=e}},metadata:i},I,J),e(T,null,j,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:t=>"label"in t,get:t=>t.label,set:(t,e)=>{t.label=e}},metadata:i},K,N),e(T,null,W,{kind:"accessor",name:"hideMenuLabel",static:!1,private:!1,access:{has:t=>"hideMenuLabel"in t,get:t=>t.hideMenuLabel,set:(t,e)=>{t.hideMenuLabel=e}},metadata:i},Q,R),e(T,null,E,{kind:"accessor",name:"hideButtonLabel",static:!1,private:!1,access:{has:t=>"hideButtonLabel"in t,get:t=>t.hideButtonLabel,set:(t,e)=>{t.hideButtonLabel=e}},metadata:i},U,V),e(T,null,S,{kind:"accessor",name:"assistiveText",static:!1,private:!1,access:{has:t=>"assistiveText"in t,get:t=>t.assistiveText,set:(t,e)=>{t.assistiveText=e}},metadata:i},Z,tt),e(T,null,O,{kind:"accessor",name:"href",static:!1,private:!1,access:{has:t=>"href"in t,get:t=>t.href,set:(t,e)=>{t.href=e}},metadata:i},et,it),e(T,null,A,{kind:"accessor",name:"backText",static:!1,private:!1,access:{has:t=>"backText"in t,get:t=>t.backText,set:(t,e)=>{t.backText=e}},metadata:i},at,nt),e(T,null,P,{kind:"accessor",name:"slottedElements",static:!1,private:!1,access:{has:t=>"slottedElements"in t,get:t=>t.slottedElements,set:(t,e)=>{t.slottedElements=e}},metadata:i},ot,rt),e(null,$={value:T},F,{kind:"class",name:T.name,metadata:i},null,H),T=$.value,i&&Object.defineProperty(T,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),T.styles=c(v),i(T,H),T})();export{b as HeaderFlyout};
+    `}_handleBack(){this.open=!1}handleClick(){this.open=!this.open}handleClickOut(t){t.composedPath().includes(this)||(this.open=!1)}willUpdate(t){if(t.has("open")){const t=new CustomEvent("on-flyout-toggle",{composed:!0,bubbles:!0,detail:{open:this.open}});this.dispatchEvent(t)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(t=>this.handleClickOut(t)))}disconnectedCallback(){document.removeEventListener("click",(t=>this.handleClickOut(t))),super.disconnectedCallback()}constructor(){super(...arguments),l.set(this,i(this,X,!1)),b.set(this,(i(this,Y),i(this,q,!1))),g.set(this,(i(this,D),i(this,G,!1))),f.set(this,(i(this,I),i(this,J,""))),x.set(this,(i(this,K),i(this,N,!1))),y.set(this,(i(this,Q),i(this,R,!1))),w.set(this,(i(this,V),i(this,Z,""))),z.set(this,(i(this,tt),i(this,et,""))),_.set(this,(i(this,it),i(this,at,"Back"))),L.set(this,(i(this,nt),i(this,ot,void 0))),i(this,rt)}},l=new WeakMap,b=new WeakMap,g=new WeakMap,f=new WeakMap,x=new WeakMap,y=new WeakMap,w=new WeakMap,z=new WeakMap,_=new WeakMap,L=new WeakMap,t(T,"HeaderFlyout"),(()=>{var t;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(t=U[Symbol.metadata])&&void 0!==t?t:null):void 0;M=[h({type:Boolean,reflect:!0})],B=[h({type:Boolean})],C=[h({type:Boolean})],E=[h({type:String})],j=[h({type:Boolean})],W=[h({type:Boolean})],S=[h({type:String})],A=[h({type:String})],O=[h({type:String})],P=[m()],e(T,null,M,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:t=>"open"in t,get:t=>t.open,set:(t,e)=>{t.open=e}},metadata:i},X,Y),e(T,null,B,{kind:"accessor",name:"anchorLeft",static:!1,private:!1,access:{has:t=>"anchorLeft"in t,get:t=>t.anchorLeft,set:(t,e)=>{t.anchorLeft=e}},metadata:i},q,D),e(T,null,C,{kind:"accessor",name:"hideArrow",static:!1,private:!1,access:{has:t=>"hideArrow"in t,get:t=>t.hideArrow,set:(t,e)=>{t.hideArrow=e}},metadata:i},G,I),e(T,null,E,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:t=>"label"in t,get:t=>t.label,set:(t,e)=>{t.label=e}},metadata:i},J,K),e(T,null,j,{kind:"accessor",name:"hideMenuLabel",static:!1,private:!1,access:{has:t=>"hideMenuLabel"in t,get:t=>t.hideMenuLabel,set:(t,e)=>{t.hideMenuLabel=e}},metadata:i},N,Q),e(T,null,W,{kind:"accessor",name:"hideButtonLabel",static:!1,private:!1,access:{has:t=>"hideButtonLabel"in t,get:t=>t.hideButtonLabel,set:(t,e)=>{t.hideButtonLabel=e}},metadata:i},R,V),e(T,null,S,{kind:"accessor",name:"assistiveText",static:!1,private:!1,access:{has:t=>"assistiveText"in t,get:t=>t.assistiveText,set:(t,e)=>{t.assistiveText=e}},metadata:i},Z,tt),e(T,null,A,{kind:"accessor",name:"href",static:!1,private:!1,access:{has:t=>"href"in t,get:t=>t.href,set:(t,e)=>{t.href=e}},metadata:i},et,it),e(T,null,O,{kind:"accessor",name:"backText",static:!1,private:!1,access:{has:t=>"backText"in t,get:t=>t.backText,set:(t,e)=>{t.backText=e}},metadata:i},at,nt),e(T,null,P,{kind:"accessor",name:"slottedElements",static:!1,private:!1,access:{has:t=>"slottedElements"in t,get:t=>t.slottedElements,set:(t,e)=>{t.slottedElements=e}},metadata:i},ot,rt),e(null,$={value:T},F,{kind:"class",name:T.name,metadata:i},null,H),T=$.value,i&&Object.defineProperty(T,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),T.styles=c(v),i(T,H),T})();export{b as HeaderFlyout};
 //# sourceMappingURL=headerFlyout.js.map

package/components/global/header/headerFlyout.js.map

@@ -1 +1 @@
-{"version":3,"file":"headerFlyout.js","sources":["../../../../src/components/global/header/headerFlyout.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport {\n  customElement,\n  property,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport HeaderFlyoutScss from './headerFlyout.scss?inline';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-right.svg';\nimport backIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-left.svg';\n\n/**\n * Component for header flyout items.\n * @slot unnamed - Slot for flyout menu content.\n * @slot button - Slot for button/toggle content.\n */\n@customElement('kyn-header-flyout')\nexport class HeaderFlyout extends LitElement {\n  static override styles = unsafeCSS(HeaderFlyoutScss);\n\n  /** Flyout open state. */\n  @property({ type: Boolean })\n  accessor open = false;\n\n  /** Anchor flyout menu to the left edge of the button instead of the right edge. */\n  @property({ type: Boolean })\n  accessor anchorLeft = false;\n\n  /** Hides the arrow. */\n  @property({ type: Boolean })\n  accessor hideArrow = false;\n\n  /** Menu & button label. */\n  @property({ type: String })\n  accessor label = '';\n\n  /** Hide the label at the top of the flyout menu. */\n  @property({ type: Boolean })\n  accessor hideMenuLabel = false;\n\n  /** Hide the label in the mobile button. */\n  @property({ type: Boolean })\n  accessor hideButtonLabel = false;\n\n  /**\n   * DEPRECATED. Use `label` instead.\n   * Button assistive text, title + aria-label.\n   */\n  @property({ type: String })\n  accessor assistiveText = '';\n\n  /** Turns the button into a link. */\n  @property({ type: String })\n  accessor href = '';\n\n  /** Text for mobile \"Back\" button. */\n  @property({ type: String })\n  accessor backText = 'Back';\n\n  /**\n   * Queries any slotted HTML elements.\n   * @ignore\n   */\n  @queryAssignedElements()\n  accessor slottedElements!: Array<HTMLElement>;\n\n  override render() {\n    const classes = {\n      menu: true,\n      open: this.open,\n    };\n\n    const contentClasses = {\n      menu__content: true,\n      'menu__content--left': this.anchorLeft,\n      slotted: this.slottedElements.length,\n    };\n\n    return html`\n      <div class=\"${classMap(classes)}\">\n        ${this.href !== ''\n          ? html`\n              <a\n                class=\"btn interactive\"\n                href=${this.href}\n                title=${this.label || this.assistiveText}\n                aria-label=${this.label || this.assistiveText}\n                @click=${this.handleClick}\n              >\n                <slot name=\"button\"></slot>\n\n                ${!this.hideButtonLabel\n                  ? html`\n                      <span class=\"label\">\n                        ${this.label || this.assistiveText}\n                      </span>\n                    `\n                  : null}\n\n                <span slot=\"button\" class=\"arrow\">\n                  ${unsafeSVG(chevronIcon)}\n                </span>\n              </a>\n            `\n          : html`\n              <button\n                class=\"btn interactive\"\n                title=${this.label || this.assistiveText}\n                aria-label=${this.label || this.assistiveText}\n                @click=${this.handleClick}\n              >\n                <slot name=\"button\"></slot>\n\n                ${!this.hideButtonLabel\n                  ? html`\n                      <span class=\"label\">\n                        ${this.label || this.assistiveText}\n                      </span>\n                    `\n                  : null}\n\n                <span slot=\"button\" class=\"arrow\">\n                  ${unsafeSVG(chevronIcon)}\n                </span>\n              </button>\n            `}\n\n        <div class=${classMap(contentClasses)}>\n          <button class=\"go-back\" @click=${() => this._handleBack()}>\n            <span>${unsafeSVG(backIcon)}</span>\n            ${this.backText}\n          </button>\n\n          ${!this.hideMenuLabel\n            ? html`\n                <div class=\"menu-label\">\n                  ${this.label || this.assistiveText}\n                </div>\n              `\n            : null}\n\n          <slot></slot>\n        </div>\n      </div>\n      <div class=\"overlay\" @click=${this._handleOverlayClick}></div>\n    `;\n  }\n\n  private _handleBack() {\n    this.open = false;\n  }\n\n  private handleClick() {\n    this.open = !this.open;\n  }\n\n  private handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  private _handleOverlayClick() {\n    this.open = false;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this.handleClickOut(e));\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-flyout': HeaderFlyout;\n  }\n}\n"],"names":["HeaderFlyout","customElement","LitElement","_classThis","_classSuper","open","__classPrivateFieldGet","this","_HeaderFlyout_open_accessor_storage","value","__classPrivateFieldSet","anchorLeft","_HeaderFlyout_anchorLeft_accessor_storage","hideArrow","_HeaderFlyout_hideArrow_accessor_storage","label","_HeaderFlyout_label_accessor_storage","hideMenuLabel","_HeaderFlyout_hideMenuLabel_accessor_storage","hideButtonLabel","_HeaderFlyout_hideButtonLabel_accessor_storage","assistiveText","_HeaderFlyout_assistiveText_accessor_storage","href","_HeaderFlyout_href_accessor_storage","backText","_HeaderFlyout_backText_accessor_storage","slottedElements","_HeaderFlyout_slottedElements_accessor_storage","render","classes","menu","contentClasses","menu__content","slotted","length","html","classMap","handleClick","unsafeSVG","chevronIcon","_handleBack","backIcon","_handleOverlayClick","handleClickOut","e","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","set","__runInitializers","_open_initializers","_open_extraInitializers","_anchorLeft_initializers","_anchorLeft_extraInitializers","_hideArrow_initializers","_hideArrow_extraInitializers","_label_initializers","_label_extraInitializers","_hideMenuLabel_initializers","_hideMenuLabel_extraInitializers","_hideButtonLabel_initializers","_hideButtonLabel_extraInitializers","_assistiveText_initializers","_assistiveText_extraInitializers","_href_initializers","_href_extraInitializers","_backText_initializers","_backText_extraInitializers","_slottedElements_initializers","_open_decorators","property","type","Boolean","_anchorLeft_decorators","_hideArrow_decorators","_label_decorators","String","_hideMenuLabel_decorators","_hideButtonLabel_decorators","_assistiveText_decorators","_href_decorators","_backText_decorators","_slottedElements_decorators","queryAssignedElements","__esDecorate","kind","name","static","private","access","has","obj","get","metadata","_metadata","_slottedElements_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderFlyoutScss"],"mappings":"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"}
+{"version":3,"file":"headerFlyout.js","sources":["../../../../src/components/global/header/headerFlyout.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport {\n  customElement,\n  property,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport HeaderFlyoutScss from './headerFlyout.scss?inline';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-right.svg';\nimport backIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-left.svg';\n\n/**\n * Component for header flyout items.\n * @slot unnamed - Slot for flyout menu content.\n * @slot button - Slot for button/toggle content.\n */\n@customElement('kyn-header-flyout')\nexport class HeaderFlyout extends LitElement {\n  static override styles = unsafeCSS(HeaderFlyoutScss);\n\n  /** Flyout open state. */\n  @property({ type: Boolean, reflect: true })\n  accessor open = false;\n\n  /** Anchor flyout menu to the left edge of the button instead of the right edge. */\n  @property({ type: Boolean })\n  accessor anchorLeft = false;\n\n  /** Hides the arrow. */\n  @property({ type: Boolean })\n  accessor hideArrow = false;\n\n  /** Menu & button label. */\n  @property({ type: String })\n  accessor label = '';\n\n  /** Hide the label at the top of the flyout menu. */\n  @property({ type: Boolean })\n  accessor hideMenuLabel = false;\n\n  /** Hide the label in the mobile button. */\n  @property({ type: Boolean })\n  accessor hideButtonLabel = false;\n\n  /**\n   * DEPRECATED. Use `label` instead.\n   * Button assistive text, title + aria-label.\n   */\n  @property({ type: String })\n  accessor assistiveText = '';\n\n  /** Turns the button into a link. */\n  @property({ type: String })\n  accessor href = '';\n\n  /** Text for mobile \"Back\" button. */\n  @property({ type: String })\n  accessor backText = 'Back';\n\n  /**\n   * Queries any slotted HTML elements.\n   * @ignore\n   */\n  @queryAssignedElements()\n  accessor slottedElements!: Array<HTMLElement>;\n\n  override render() {\n    const classes = {\n      menu: true,\n      open: this.open,\n    };\n\n    const contentClasses = {\n      menu__content: true,\n      'menu__content--left': this.anchorLeft,\n      slotted: this.slottedElements.length,\n    };\n\n    return html`\n      <div class=\"${classMap(classes)}\">\n        ${this.href !== ''\n          ? html`\n              <a\n                class=\"btn interactive\"\n                href=${this.href}\n                title=${this.label || this.assistiveText}\n                aria-label=${this.label || this.assistiveText}\n                @click=${this.handleClick}\n              >\n                <slot name=\"button\"></slot>\n\n                ${!this.hideButtonLabel\n                  ? html`\n                      <span class=\"label\">\n                        ${this.label || this.assistiveText}\n                      </span>\n                    `\n                  : null}\n\n                <span slot=\"button\" class=\"arrow\">\n                  ${unsafeSVG(chevronIcon)}\n                </span>\n              </a>\n            `\n          : html`\n              <button\n                class=\"btn interactive\"\n                title=${this.label || this.assistiveText}\n                aria-label=${this.label || this.assistiveText}\n                @click=${this.handleClick}\n              >\n                <slot name=\"button\"></slot>\n\n                ${!this.hideButtonLabel\n                  ? html`\n                      <span class=\"label\">\n                        ${this.label || this.assistiveText}\n                      </span>\n                    `\n                  : null}\n\n                <span slot=\"button\" class=\"arrow\">\n                  ${unsafeSVG(chevronIcon)}\n                </span>\n              </button>\n            `}\n\n        <div class=${classMap(contentClasses)}>\n          <button class=\"go-back\" @click=${() => this._handleBack()}>\n            <span>${unsafeSVG(backIcon)}</span>\n            ${this.backText}\n          </button>\n\n          ${!this.hideMenuLabel\n            ? html`\n                <div class=\"menu-label\">\n                  ${this.label || this.assistiveText}\n                </div>\n              `\n            : null}\n\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _handleBack() {\n    this.open = false;\n  }\n\n  private handleClick() {\n    this.open = !this.open;\n  }\n\n  private handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('open')) {\n      const event = new CustomEvent('on-flyout-toggle', {\n        composed: true,\n        bubbles: true,\n        detail: { open: this.open },\n      });\n      this.dispatchEvent(event);\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this.handleClickOut(e));\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-flyout': HeaderFlyout;\n  }\n}\n"],"names":["HeaderFlyout","customElement","LitElement","_classThis","_classSuper","open","__classPrivateFieldGet","this","_HeaderFlyout_open_accessor_storage","value","__classPrivateFieldSet","anchorLeft","_HeaderFlyout_anchorLeft_accessor_storage","hideArrow","_HeaderFlyout_hideArrow_accessor_storage","label","_HeaderFlyout_label_accessor_storage","hideMenuLabel","_HeaderFlyout_hideMenuLabel_accessor_storage","hideButtonLabel","_HeaderFlyout_hideButtonLabel_accessor_storage","assistiveText","_HeaderFlyout_assistiveText_accessor_storage","href","_HeaderFlyout_href_accessor_storage","backText","_HeaderFlyout_backText_accessor_storage","slottedElements","_HeaderFlyout_slottedElements_accessor_storage","render","classes","menu","contentClasses","menu__content","slotted","length","html","classMap","handleClick","unsafeSVG","chevronIcon","_handleBack","backIcon","handleClickOut","e","composedPath","includes","willUpdate","changedProps","has","event","CustomEvent","composed","bubbles","detail","dispatchEvent","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","set","__runInitializers","_open_initializers","_open_extraInitializers","_anchorLeft_initializers","_anchorLeft_extraInitializers","_hideArrow_initializers","_hideArrow_extraInitializers","_label_initializers","_label_extraInitializers","_hideMenuLabel_initializers","_hideMenuLabel_extraInitializers","_hideButtonLabel_initializers","_hideButtonLabel_extraInitializers","_assistiveText_initializers","_assistiveText_extraInitializers","_href_initializers","_href_extraInitializers","_backText_initializers","_backText_extraInitializers","_slottedElements_initializers","property","type","Boolean","reflect","_anchorLeft_decorators","_hideArrow_decorators","_label_decorators","String","_hideMenuLabel_decorators","_hideButtonLabel_decorators","_assistiveText_decorators","_href_decorators","_backText_decorators","_slottedElements_decorators","queryAssignedElements","__esDecorate","_open_decorators","kind","name","static","private","access","obj","get","metadata","_metadata","_slottedElements_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderFlyoutScss"],"mappings":"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"}

package/components/global/header/headerFlyouts.d.ts

@@ -6,9 +6,16 @@ import { LitElement } from 'lit';
 export declare class HeaderFlyouts extends LitElement {
     static styles: import("lit").CSSResult;
     accessor open: boolean;
+    /**
+     * Queries any slotted header-flyout.
+     * @ignore
+     */
+    accessor _slottedFlyouts: Array<any>;
     render(): import("lit-html").TemplateResult<1>;
     private _toggleOpen;
     private _handleClickOut;
+    private _handleFlyoutToggle;
+    private _emitFlyoutsToggle;
     willUpdate(changedProps: any): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/components/global/header/headerFlyouts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerFlyouts.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyouts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAMlD;;;GAGG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,0BAAgC;IAItD,QAAQ,CAAC,IAAI,UAAS;IAEb,MAAM;IAmBf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,eAAe;IAMd,UAAU,CAAC,YAAY,EAAE,GAAG;IAW5B,iBAAiB;IAMjB,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}
+{"version":3,"file":"headerFlyouts.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyouts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAUlD;;;GAGG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,0BAAgC;IAItD,QAAQ,CAAC,IAAI,UAAS;IAEtB;;;OAGG;IAEH,QAAQ,CAAC,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B,MAAM;IAmBf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,kBAAkB;IAYjB,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,iBAAiB;IASjB,oBAAoB;CAQ9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}

package/components/global/header/headerFlyouts.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t,b as o,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{o as r,x as a}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as l,t as d,r as s,n as c}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as u}from"../../../vendor/lit-element-DxLLCKb1.js";import{o as m}from"../../../vendor/@kyndryl-design-system/shidoka-icons-DALQfz_R.js";var p=l`*,
+import{_ as e,a as t,b as o,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{o as r,x as a}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as l,t as d,r as s,n as c,o as u}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as m}from"../../../vendor/lit-element-DxLLCKb1.js";import{o as p}from"../../../vendor/@kyndryl-design-system/shidoka-icons-DALQfz_R.js";var v=l`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -63,17 +63,20 @@ import{_ as e,a as t,b as o,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
 @media (min-width: 42rem) {
   .overlay {
     position: fixed;
-    top: var(--kd-header-height);
+    top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: -2;
+    z-index: calc(var(--kd-z-header) - 1);
     transition: background-color 300ms ease-out, visibility 300ms ease-out;
     background: transparent;
     visibility: hidden;
   }
-  .open + .overlay {
-    background: var(--kd-color-background-opacity-8);
+  .overlay.scrolled {
+    top: var(--kd-header-height);
+  }
+  .open + .overlay, .child-open + .overlay {
+    background: var(--kd-color-background-opacity-inverse-backdrop);
     visibility: visible;
   }
 }
@@ -120,8 +123,8 @@ import{_ as e,a as t,b as o,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
     left: auto;
     border-top: none;
     background: var(--kd-color-background-container-default);
-    box-shadow: 0px 2px 8px 0px rgba(61, 60, 60, 0.25);
     max-height: calc(100vh - var(--kd-header-height));
+    box-shadow: var(--kd-elevation-level-1);
   }
   .menu__content.left {
     left: -12px;
@@ -276,7 +279,7 @@ import{_ as e,a as t,b as o,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
     z-index: initial;
     padding: 0;
   }
-}`;let b=(()=>{var l;let b,k,v,g=[d("kyn-header-flyouts")],h=[],f=u,x=[],y=[];return k=class extends f{get open(){return i(this,l,"f")}set open(e){n(this,l,e,"f")}render(){return a`
+}`;let g=(()=>{var l,g;let h,k,b,y,f=[d("kyn-header-flyouts")],x=[],_=m,w=[],z=[],F=[],j=[];return k=class extends _{get open(){return i(this,l,"f")}set open(e){n(this,l,e,"f")}get _slottedFlyouts(){return i(this,g,"f")}set _slottedFlyouts(e){n(this,g,e,"f")}render(){return a`
       <div class="header-flyouts menu ${this.open?"open":""}">
         <button
           class="btn interactive"
@@ -284,12 +287,12 @@ import{_ as e,a as t,b as o,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
           title="Toggle Menu"
           @click=${()=>this._toggleOpen()}
         >
-          <span class="overflow-icon">${r(m)}</span>
+          <span class="overflow-icon">${r(p)}</span>
         </button>
 
         <div class="menu__content">
           <slot></slot>
         </div>
       </div>
-    `}_toggleOpen(){this.open=!this.open}_handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}willUpdate(e){if(e.has("open")){const e=new CustomEvent("on-flyouts-toggle",{composed:!0,bubbles:!0,detail:{open:this.open}});this.dispatchEvent(e)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),super.disconnectedCallback()}constructor(){super(...arguments),l.set(this,o(this,x,!1)),o(this,y)}},l=new WeakMap,e(k,"HeaderFlyouts"),(()=>{var e;const o="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=f[Symbol.metadata])&&void 0!==e?e:null):void 0;v=[c({type:Boolean})],t(k,null,v,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:e=>"open"in e,get:e=>e.open,set:(e,t)=>{e.open=t}},metadata:o},x,y),t(null,b={value:k},g,{kind:"class",name:k.name,metadata:o},null,h),k=b.value,o&&Object.defineProperty(k,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:o})})(),k.styles=s(p),o(k,h),k})();export{b as HeaderFlyouts};
+    `}_toggleOpen(){this.open=!this.open}_handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}_handleFlyoutToggle(){this._emitFlyoutsToggle()}_emitFlyoutsToggle(){const e=new CustomEvent("on-flyouts-toggle",{composed:!0,bubbles:!0,detail:{open:this.open,childrenOpen:this._slottedFlyouts.some((e=>e.open))}});this.dispatchEvent(e)}willUpdate(e){e.has("open")&&this._emitFlyoutsToggle()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e))),document.addEventListener("on-flyout-toggle",(()=>this._handleFlyoutToggle()))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),document.removeEventListener("on-flyout-toggle",(()=>this._handleFlyoutToggle())),super.disconnectedCallback()}constructor(){super(...arguments),l.set(this,o(this,w,!1)),g.set(this,(o(this,z),o(this,F,void 0))),o(this,j)}},l=new WeakMap,g=new WeakMap,e(k,"HeaderFlyouts"),(()=>{var e;const o="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=_[Symbol.metadata])&&void 0!==e?e:null):void 0;b=[c({type:Boolean})],y=[u()],t(k,null,b,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:e=>"open"in e,get:e=>e.open,set:(e,t)=>{e.open=t}},metadata:o},w,z),t(k,null,y,{kind:"accessor",name:"_slottedFlyouts",static:!1,private:!1,access:{has:e=>"_slottedFlyouts"in e,get:e=>e._slottedFlyouts,set:(e,t)=>{e._slottedFlyouts=t}},metadata:o},F,j),t(null,h={value:k},f,{kind:"class",name:k.name,metadata:o},null,x),k=h.value,o&&Object.defineProperty(k,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:o})})(),k.styles=s(v),o(k,x),k})();export{g as HeaderFlyouts};
 //# sourceMappingURL=headerFlyouts.js.map

package/components/global/header/headerFlyouts.js.map

@@ -1 +1 @@
-{"version":3,"file":"headerFlyouts.js","sources":["../../../../src/components/global/header/headerFlyouts.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport HeaderFlyoutsScss from './headerFlyouts.scss?inline';\n\nimport overflowIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/overflow.svg';\n\n/**\n * Container for header-flyout components.\n * @slot unnamed - Slot for header-flyout components.\n */\n@customElement('kyn-header-flyouts')\nexport class HeaderFlyouts extends LitElement {\n  static override styles = unsafeCSS(HeaderFlyoutsScss);\n\n  /* Menu open state (small breakpoint). */\n  @property({ type: Boolean })\n  accessor open = false;\n\n  override render() {\n    return html`\n      <div class=\"header-flyouts menu ${this.open ? 'open' : ''}\">\n        <button\n          class=\"btn interactive\"\n          aria-label=\"Toggle Menu\"\n          title=\"Toggle Menu\"\n          @click=${() => this._toggleOpen()}\n        >\n          <span class=\"overflow-icon\">${unsafeSVG(overflowIcon)}</span>\n        </button>\n\n        <div class=\"menu__content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _toggleOpen() {\n    this.open = !this.open;\n  }\n\n  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('open')) {\n      const event = new CustomEvent('on-flyouts-toggle', {\n        composed: true,\n        bubbles: true,\n        detail: { open: this.open },\n      });\n      this.dispatchEvent(event);\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this._handleClickOut(e));\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-flyouts': HeaderFlyouts;\n  }\n}\n"],"names":["HeaderFlyouts","customElement","LitElement","_classThis","_classSuper","open","__classPrivateFieldGet","this","_HeaderFlyouts_open_accessor_storage","value","__classPrivateFieldSet","render","html","_toggleOpen","unsafeSVG","overflowIcon","_handleClickOut","e","composedPath","includes","willUpdate","changedProps","has","event","CustomEvent","composed","bubbles","detail","dispatchEvent","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","set","__runInitializers","_open_initializers","_open_decorators","property","type","Boolean","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_open_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderFlyoutsScss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAYaA,EAAa,yBADzBC,EAAc,8BACoBC,mBAARC,EAAA,cAAQC,EAKjC,QAASC,GAAI,OAAAC,EAAAC,KAAAC,EAAA,IAAA,CAAb,QAASH,CAAII,GAAAC,EAAAH,KAAAC,EAAAC,EAAA,IAAA,CAEJ,MAAAE,GACP,OAAOC,CAAI;wCACyBL,KAAKF,KAAO,OAAS;;;;;mBAK1C,IAAME,KAAKM;;wCAEUC,EAAUC;;;;;;;MAUxC,WAAAF,GACNN,KAAKF,MAAQE,KAAKF,KAGZ,eAAAW,CAAgBC,GACjBA,EAAEC,eAAeC,SAASZ,QAC7BA,KAAKF,MAAO,GAIP,UAAAe,CAAWC,GAClB,GAAIA,EAAaC,IAAI,QAAS,CAC5B,MAAMC,EAAQ,IAAIC,YAAY,oBAAqB,CACjDC,UAAU,EACVC,SAAS,EACTC,OAAQ,CAAEtB,KAAME,KAAKF,QAEvBE,KAAKqB,cAAcL,IAId,iBAAAM,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUf,GAAMV,KAAKS,gBAAgBC,KAGxD,oBAAAgB,GACPF,SAASG,oBAAoB,SAAUjB,GAAMV,KAAKS,gBAAgBC,KAElEa,MAAMG,yDAnDCzB,EAAA2B,IAAA5B,KAAA6B,EAAA7B,KAAA8B,GAAO,yLADfC,EAAA,CAAAC,EAAS,CAAEC,KAAMC,WAClBC,EAAAvC,EAAA,KAAAmC,EAAA,CAAAK,KAAA,WAAAC,KAAA,OAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAzB,IAAA0B,GAAA,SAAAA,EAAAC,IAAAD,GAAAA,EAAS3C,KAAI8B,IAAA,CAAAa,EAAAvC,KAAAuC,EAAJ3C,KAAII,CAAA,GAAAyC,SAAAC,GAAAd,EAAAe,GALfV,EAAA,KAAAW,EAAA,CAAA5C,MAAAN,GAAAmD,EAAA,CAAAX,KAAA,QAAAC,KAAAzC,EAAAyC,KAAAM,SAAAC,GAAA,KAAAI,iHACkBpD,EAAAqD,OAASC,EAAUC,GADxBtB,EAAAjC,EAAAoD,MAAa"}
+{"version":3,"file":"headerFlyouts.js","sources":["../../../../src/components/global/header/headerFlyouts.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport {\n  customElement,\n  property,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport HeaderFlyoutsScss from './headerFlyouts.scss?inline';\n\nimport overflowIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/overflow.svg';\n\n/**\n * Container for header-flyout components.\n * @slot unnamed - Slot for header-flyout components.\n */\n@customElement('kyn-header-flyouts')\nexport class HeaderFlyouts extends LitElement {\n  static override styles = unsafeCSS(HeaderFlyoutsScss);\n\n  /* Menu open state (small breakpoint). */\n  @property({ type: Boolean })\n  accessor open = false;\n\n  /**\n   * Queries any slotted header-flyout.\n   * @ignore\n   */\n  @queryAssignedElements()\n  accessor _slottedFlyouts!: Array<any>;\n\n  override render() {\n    return html`\n      <div class=\"header-flyouts menu ${this.open ? 'open' : ''}\">\n        <button\n          class=\"btn interactive\"\n          aria-label=\"Toggle Menu\"\n          title=\"Toggle Menu\"\n          @click=${() => this._toggleOpen()}\n        >\n          <span class=\"overflow-icon\">${unsafeSVG(overflowIcon)}</span>\n        </button>\n\n        <div class=\"menu__content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _toggleOpen() {\n    this.open = !this.open;\n  }\n\n  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  private _handleFlyoutToggle() {\n    this._emitFlyoutsToggle();\n  }\n\n  private _emitFlyoutsToggle() {\n    const event = new CustomEvent('on-flyouts-toggle', {\n      composed: true,\n      bubbles: true,\n      detail: {\n        open: this.open,\n        childrenOpen: this._slottedFlyouts.some((flyout) => flyout.open),\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('open')) {\n      this._emitFlyoutsToggle();\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\n    document.addEventListener('on-flyout-toggle', () =>\n      this._handleFlyoutToggle()\n    );\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this._handleClickOut(e));\n    document.removeEventListener('on-flyout-toggle', () =>\n      this._handleFlyoutToggle()\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-flyouts': HeaderFlyouts;\n  }\n}\n"],"names":["HeaderFlyouts","customElement","LitElement","_classThis","_classSuper","open","__classPrivateFieldGet","this","_HeaderFlyouts_open_accessor_storage","value","__classPrivateFieldSet","_slottedFlyouts","_HeaderFlyouts__slottedFlyouts_accessor_storage","render","html","_toggleOpen","unsafeSVG","overflowIcon","_handleClickOut","e","composedPath","includes","_handleFlyoutToggle","_emitFlyoutsToggle","event","CustomEvent","composed","bubbles","detail","childrenOpen","some","flyout","dispatchEvent","willUpdate","changedProps","has","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","set","__runInitializers","_open_initializers","_open_extraInitializers","__slottedFlyouts_initializers","_open_decorators","property","type","Boolean","__slottedFlyouts_decorators","queryAssignedElements","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","__slottedFlyouts_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderFlyoutsScss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgBaA,EAAa,6BADzBC,EAAc,8BACoBC,6BAARC,EAAA,cAAQC,EAKjC,QAASC,GAAI,OAAAC,EAAAC,KAAAC,EAAA,IAAA,CAAb,QAASH,CAAII,GAAAC,EAAAH,KAAAC,EAAAC,EAAA,IAAA,CAOb,mBAASE,GAAe,OAAAL,EAAAC,KAAAK,EAAA,IAAA,CAAxB,mBAASD,CAAeF,GAAAC,EAAAH,KAAAK,EAAAH,EAAA,IAAA,CAEf,MAAAI,GACP,OAAOC,CAAI;wCACyBP,KAAKF,KAAO,OAAS;;;;;mBAK1C,IAAME,KAAKQ;;wCAEUC,EAAUC;;;;;;;MAUxC,WAAAF,GACNR,KAAKF,MAAQE,KAAKF,KAGZ,eAAAa,CAAgBC,GACjBA,EAAEC,eAAeC,SAASd,QAC7BA,KAAKF,MAAO,GAIR,mBAAAiB,GACNf,KAAKgB,qBAGC,kBAAAA,GACN,MAAMC,EAAQ,IAAIC,YAAY,oBAAqB,CACjDC,UAAU,EACVC,SAAS,EACTC,OAAQ,CACNvB,KAAME,KAAKF,KACXwB,aAActB,KAAKI,gBAAgBmB,MAAMC,GAAWA,EAAO1B,UAG/DE,KAAKyB,cAAcR,GAGZ,UAAAS,CAAWC,GACdA,EAAaC,IAAI,SACnB5B,KAAKgB,qBAIA,iBAAAa,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUpB,GAAMZ,KAAKW,gBAAgBC,KAC/DmB,SAASC,iBAAiB,oBAAoB,IAC5ChC,KAAKe,wBAIA,oBAAAkB,GACPF,SAASG,oBAAoB,SAAUtB,GAAMZ,KAAKW,gBAAgBC,KAClEmB,SAASG,oBAAoB,oBAAoB,IAC/ClC,KAAKe,wBAGPe,MAAMG,yDA3EChC,EAAAkC,IAAAnC,KAAAoC,EAAApC,KAAAqC,GAAO,IAOPhC,EAAA8B,IAAAnC,MAAAoC,EAAApC,KAAAsC,GAAAF,EAAApC,KAAAuC,OAAA,wMARRC,EAAA,CAAAC,EAAS,CAAEC,KAAMC,WAOjBC,EAAA,CAAAC,KANDC,EAAAlD,EAAA,KAAA4C,EAAA,CAAAO,KAAA,WAAAC,KAAA,OAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvB,IAAAwB,GAAA,SAAAA,EAAAC,IAAAD,GAAAA,EAAStD,KAAIqC,IAAA,CAAAiB,EAAAlD,KAAAkD,EAAJtD,KAAII,CAAA,GAAAoD,SAAAC,GAAAlB,EAAAC,GAObQ,EAAAlD,EAAA,KAAAgD,EAAA,CAAAG,KAAA,WAAAC,KAAA,kBAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvB,IAAAwB,GAAA,oBAAAA,EAAAC,IAAAD,GAAAA,EAAShD,gBAAe+B,IAAA,CAAAiB,EAAAlD,KAAAkD,EAAfhD,gBAAeF,CAAA,GAAAoD,SAAAC,GAAAhB,EAAAiB,GAZ1BV,EAAA,KAAAW,EAAA,CAAAvD,MAAAN,GAAA8D,EAAA,CAAAX,KAAA,QAAAC,KAAApD,EAAAoD,KAAAM,SAAAC,GAAA,KAAAI,iHACkB/D,EAAAgE,OAASC,EAAUC,GADxB1B,EAAAxC,EAAA+D,MAAa"}

package/components/global/header/headerLink.js

@@ -63,17 +63,20 @@ import{_ as e,a as t,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
 @media (min-width: 42rem) {
   .overlay {
     position: fixed;
-    top: var(--kd-header-height);
+    top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: -2;
+    z-index: calc(var(--kd-z-header) - 1);
     transition: background-color 300ms ease-out, visibility 300ms ease-out;
     background: transparent;
     visibility: hidden;
   }
-  .open + .overlay {
-    background: var(--kd-color-background-opacity-8);
+  .overlay.scrolled {
+    top: var(--kd-header-height);
+  }
+  .open + .overlay, .child-open + .overlay {
+    background: var(--kd-color-background-opacity-inverse-backdrop);
     visibility: visible;
   }
 }
@@ -120,8 +123,8 @@ import{_ as e,a as t,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
     left: auto;
     border-top: none;
     background: var(--kd-color-background-container-default);
-    box-shadow: 0px 2px 8px 0px rgba(61, 60, 60, 0.25);
     max-height: calc(100vh - var(--kd-header-height));
+    box-shadow: var(--kd-elevation-level-1);
   }
   .menu__content.left {
     left: -12px;