@kyndryl-design-system/shidoka-applications 2.68.2 → 2.68.3

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,e as h}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{e as m,a as g,x as u}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as p}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`*,
+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;
@@ -72,9 +72,6 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
     background: transparent;
     visibility: hidden;
   }
-  .overlay.scrolled {
-    top: var(--kd-header-height);
-  }
   .open + .overlay, .child-open + .overlay {
     background: var(--kd-color-background-opacity-inverse-backdrop);
     visibility: visible;
@@ -123,7 +120,7 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
     border-top: none;
     border-radius: 8px;
     background: var(--kd-color-background-container-default);
-    max-height: calc(100vh - var(--kd-header-height));
+    max-height: calc(100vh - var(--kd-header-reserved-space) - 16px);
     box-shadow: var(--kd-elevation-level-1);
   }
   .menu__content.left {
@@ -356,7 +353,7 @@ 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 b=(()=>{var n,b,x,y,_,w,E,z;let O,S,T,C,L,U,j,$,M,W,F=[s("kyn-header")],N=[],Y=p,R=[],q=[],H=[],P=[],A=[],B=[],D=[],G=[],I=[],J=[],K=[],Q=[],V=[],X=[],Z=[],ee=[];return S=class extends Y{constructor(){super(...arguments),n.set(this,i(this,R,"/")),b.set(this,(i(this,q),i(this,H,""))),x.set(this,(i(this,P),i(this,A,void 0))),y.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,x,"f")}set navEls(e){o(this,x,e,"f")}get assignedElements(){return a(this,y,"f")}set assignedElements(e){o(this,y,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 u`
+}`;let b=(()=>{var n,b,x,y,_,w,E,z;let O,S,T,C,L,U,j,$,M,W,F=[s("kyn-header")],N=[],Y=u,R=[],q=[],H=[],P=[],A=[],B=[],D=[],G=[],I=[],J=[],K=[],Q=[],V=[],X=[],Z=[],ee=[];return S=class extends Y{constructor(){super(...arguments),n.set(this,i(this,R,"/")),b.set(this,(i(this,q),i(this,H,""))),x.set(this,(i(this,P),i(this,A,void 0))),y.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,x,"f")}set navEls(e){o(this,x,e,"f")}get assignedElements(){return a(this,y,"f")}set assignedElements(e){o(this,y,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>
 

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  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\n        <div class=\"background\"></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\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","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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"}
+{"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\n        <div class=\"background\"></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\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","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.js

@@ -72,9 +72,6 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
     background: transparent;
     visibility: hidden;
   }
-  .overlay.scrolled {
-    top: var(--kd-header-height);
-  }
   .open + .overlay, .child-open + .overlay {
     background: var(--kd-color-background-opacity-inverse-backdrop);
     visibility: visible;
@@ -123,7 +120,7 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
     border-top: none;
     border-radius: 8px;
     background: var(--kd-color-background-container-default);
-    max-height: calc(100vh - var(--kd-header-height));
+    max-height: calc(100vh - var(--kd-header-reserved-space) - 16px);
     box-shadow: var(--kd-elevation-level-1);
   }
   .menu__content.left {

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, 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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"}
+{"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.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,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`*,
+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 s,r as d,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;
@@ -72,9 +72,6 @@ import{_ as e,a as t,b as o,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
     background: transparent;
     visibility: hidden;
   }
-  .overlay.scrolled {
-    top: var(--kd-header-height);
-  }
   .open + .overlay, .child-open + .overlay {
     background: var(--kd-color-background-opacity-inverse-backdrop);
     visibility: visible;
@@ -123,7 +120,7 @@ import{_ as e,a as t,b as o,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
     border-top: none;
     border-radius: 8px;
     background: var(--kd-color-background-container-default);
-    max-height: calc(100vh - var(--kd-header-height));
+    max-height: calc(100vh - var(--kd-header-reserved-space) - 16px);
     box-shadow: var(--kd-elevation-level-1);
   }
   .menu__content.left {
@@ -279,7 +276,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 g=(()=>{var l,g;let h,k,b,f,y=[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`
+}`;let g=(()=>{var l,g;let h,k,b,f,y=[s("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"
@@ -294,5 +291,5 @@ import{_ as e,a as t,b as o,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
           <slot></slot>
         </div>
       </div>
-    `}_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})],f=[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,f,{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},y,{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};
+    `}_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})],f=[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,f,{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},y,{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=d(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 {\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"}
+{"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

@@ -1,4 +1,4 @@
-import{_ as e,a as t,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as r,o,x as s}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as l,a as d,t as h,r as c,n as m,o as u}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as v}from"../../../vendor/lit-element-DxLLCKb1.js";import{debounce as p}from"../../../common/helpers/helpers.js";import"../../reusable/textInput/textInput.js";import{b as k,d as g,f}from"../../../vendor/@kyndryl-design-system/shidoka-icons-DALQfz_R.js";import"../../../vendor/deepmerge-ts-OFb5ej8y.js";import"../../reusable/button/button.js";import"../../reusable/button/defs.js";import"../../../common/mixins/form-input.js";var b=l`*,
+import{_ as e,a as t,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as r,o,x as s}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as l,a as d,t as c,r as h,n as m,o as u}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as v}from"../../../vendor/lit-element-DxLLCKb1.js";import{debounce as p}from"../../../common/helpers/helpers.js";import"../../reusable/textInput/textInput.js";import{b as k,d as g,f}from"../../../vendor/@kyndryl-design-system/shidoka-icons-DALQfz_R.js";import"../../../vendor/deepmerge-ts-OFb5ej8y.js";import"../../reusable/button/button.js";import"../../reusable/button/defs.js";import"../../../common/mixins/form-input.js";var b=l`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -72,9 +72,6 @@ import{_ as e,a as t,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
     background: transparent;
     visibility: hidden;
   }
-  .overlay.scrolled {
-    top: var(--kd-header-height);
-  }
   .open + .overlay, .child-open + .overlay {
     background: var(--kd-color-background-opacity-inverse-backdrop);
     visibility: visible;
@@ -123,7 +120,7 @@ import{_ as e,a as t,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
     border-top: none;
     border-radius: 8px;
     background: var(--kd-color-background-container-default);
-    max-height: calc(100vh - var(--kd-header-height));
+    max-height: calc(100vh - var(--kd-header-reserved-space) - 16px);
     box-shadow: var(--kd-elevation-level-1);
   }
   .menu__content.left {
@@ -415,7 +412,7 @@ kyn-text-input {
     transform: scaleX(0);
     transform-origin: right;
   }
-}`;let y=(()=>{var l,y,x,w,_,T,z,E,L,$,P,C,M,S,W;let j,A,N,R,B,H,O,Y,K,q,D,F,I,U,X,G,J,Q=[h("kyn-header-link")],V=[],Z=v,ee=[],te=[],ie=[],ae=[],ne=[],re=[],oe=[],se=[],le=[],de=[],he=[],ce=[],me=[],ue=[],ve=[],pe=[],ke=[],ge=[],fe=[],be=[],ye=[],xe=[],we=[],_e=[],Te=[],ze=[],Ee=[],Le=[],$e=[],Pe=[];return A=class extends Z{constructor(){super(...arguments),l.set(this,i(this,ee,!1)),y.set(this,(i(this,te),i(this,ie,""))),x.set(this,(i(this,ae),i(this,ne,"_self"))),w.set(this,(i(this,re),i(this,oe,""))),_.set(this,(i(this,se),i(this,le,!1))),T.set(this,(i(this,de),i(this,he,1))),z.set(this,(i(this,ce),i(this,me,!1))),E.set(this,(i(this,ue),i(this,ve,"Search"))),L.set(this,(i(this,pe),i(this,ke,6))),$.set(this,(i(this,ge),i(this,fe,"Back"))),P.set(this,(i(this,be),i(this,ye,!1))),C.set(this,(i(this,xe),i(this,we,""))),M.set(this,(i(this,_e),i(this,Te,void 0))),this._enterTimer=i(this,ze),S.set(this,i(this,Ee,void 0)),W.set(this,(i(this,Le),i(this,$e,{}))),this._debounceResize=(i(this,Pe),p((()=>{this.determineLevel()})))}get open(){return a(this,l,"f")}set open(e){n(this,l,e,"f")}get href(){return a(this,y,"f")}set href(e){n(this,y,e,"f")}get target(){return a(this,x,"f")}set target(e){n(this,x,e,"f")}get rel(){return a(this,w,"f")}set rel(e){n(this,w,e,"f")}get isActive(){return a(this,_,"f")}set isActive(e){n(this,_,e,"f")}get level(){return a(this,T,"f")}set level(e){n(this,T,e,"f")}get divider(){return a(this,z,"f")}set divider(e){n(this,z,e,"f")}get searchLabel(){return a(this,E,"f")}set searchLabel(e){n(this,E,e,"f")}get searchThreshold(){return a(this,L,"f")}set searchThreshold(e){n(this,L,e,"f")}get backText(){return a(this,$,"f")}set backText(e){n(this,$,e,"f")}get leftPadding(){return a(this,P,"f")}set leftPadding(e){n(this,P,e,"f")}get _searchTerm(){return a(this,C,"f")}set _searchTerm(e){n(this,C,e,"f")}get slottedEls(){return a(this,M,"f")}set slottedEls(e){n(this,M,e,"f")}get _leaveTimer(){return a(this,S,"f")}set _leaveTimer(e){n(this,S,e,"f")}get menuPosition(){return a(this,W,"f")}set menuPosition(e){n(this,W,e,"f")}render(){const e={menu:this.slottedEls.length,[`level--${this.level}`]:!0,divider:this.divider,open:this.open},t={"nav-link":!0,active:this.isActive,interactive:1==this.level,"padding-left":this.leftPadding},i={menu__content:!0,slotted:this.slottedEls.length},a=this.querySelectorAll(":scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link");return s`
+}`;let y=(()=>{var l,y,x,w,_,T,z,E,L,$,P,C,M,S,W;let j,A,N,R,B,H,O,Y,K,q,D,F,I,U,X,G,J,Q=[c("kyn-header-link")],V=[],Z=v,ee=[],te=[],ie=[],ae=[],ne=[],re=[],oe=[],se=[],le=[],de=[],ce=[],he=[],me=[],ue=[],ve=[],pe=[],ke=[],ge=[],fe=[],be=[],ye=[],xe=[],we=[],_e=[],Te=[],ze=[],Ee=[],Le=[],$e=[],Pe=[];return A=class extends Z{constructor(){super(...arguments),l.set(this,i(this,ee,!1)),y.set(this,(i(this,te),i(this,ie,""))),x.set(this,(i(this,ae),i(this,ne,"_self"))),w.set(this,(i(this,re),i(this,oe,""))),_.set(this,(i(this,se),i(this,le,!1))),T.set(this,(i(this,de),i(this,ce,1))),z.set(this,(i(this,he),i(this,me,!1))),E.set(this,(i(this,ue),i(this,ve,"Search"))),L.set(this,(i(this,pe),i(this,ke,6))),$.set(this,(i(this,ge),i(this,fe,"Back"))),P.set(this,(i(this,be),i(this,ye,!1))),C.set(this,(i(this,xe),i(this,we,""))),M.set(this,(i(this,_e),i(this,Te,void 0))),this._enterTimer=i(this,ze),S.set(this,i(this,Ee,void 0)),W.set(this,(i(this,Le),i(this,$e,{}))),this._debounceResize=(i(this,Pe),p((()=>{this.determineLevel()})))}get open(){return a(this,l,"f")}set open(e){n(this,l,e,"f")}get href(){return a(this,y,"f")}set href(e){n(this,y,e,"f")}get target(){return a(this,x,"f")}set target(e){n(this,x,e,"f")}get rel(){return a(this,w,"f")}set rel(e){n(this,w,e,"f")}get isActive(){return a(this,_,"f")}set isActive(e){n(this,_,e,"f")}get level(){return a(this,T,"f")}set level(e){n(this,T,e,"f")}get divider(){return a(this,z,"f")}set divider(e){n(this,z,e,"f")}get searchLabel(){return a(this,E,"f")}set searchLabel(e){n(this,E,e,"f")}get searchThreshold(){return a(this,L,"f")}set searchThreshold(e){n(this,L,e,"f")}get backText(){return a(this,$,"f")}set backText(e){n(this,$,e,"f")}get leftPadding(){return a(this,P,"f")}set leftPadding(e){n(this,P,e,"f")}get _searchTerm(){return a(this,C,"f")}set _searchTerm(e){n(this,C,e,"f")}get slottedEls(){return a(this,M,"f")}set slottedEls(e){n(this,M,e,"f")}get _leaveTimer(){return a(this,S,"f")}set _leaveTimer(e){n(this,S,e,"f")}get menuPosition(){return a(this,W,"f")}set menuPosition(e){n(this,W,e,"f")}render(){const e={menu:this.slottedEls.length,[`level--${this.level}`]:!0,divider:this.divider,open:this.open},t={"nav-link":!0,active:this.isActive,interactive:1==this.level,"padding-left":this.leftPadding},i={menu__content:!0,slotted:this.slottedEls.length},a=this.querySelectorAll(":scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link");return s`
       <div
         class="${r(e)}"
         @pointerleave=${e=>this.handlePointerLeave(e)}
@@ -463,5 +460,5 @@ kyn-text-input {
           <slot name="links" @slotchange=${this._handleLinksSlotChange}></slot>
         </div>
       </div>
-    `}_handleSearch(e){this._searchTerm=e.detail.value.toLowerCase(),this._searchFilter()}_searchFilter(){this.querySelectorAll(":scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link").forEach((e=>{var t,i;const a=null===(i=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector("slot"))||void 0===i?void 0:i.assignedNodes({flatten:!0});let n="";for(let e=0;e<a.length;e++)n+=a[e].textContent.trim();n.toLowerCase().includes(this._searchTerm)?e.style.display="block":e.style.display="none"})),this._positionMenu()}_handleBack(){this.open=!1}_handleLinksSlotChange(){this.requestUpdate()}handlePointerEnter(e){"mouse"===e.pointerType&&this.slottedEls.length&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this.open=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&this.slottedEls.length&&""===this._searchTerm&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this.open=!1}),150))}handleClick(e){let t=!1;this.slottedEls.length&&(t=!0,e.preventDefault(),this.open=!this.open);const i=new CustomEvent("on-click",{detail:{origEvent:e,defaultPrevented:t}});this.dispatchEvent(i)}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1,this._searchTerm="",this._searchFilter())}determineLevel(){const e=this.parentNode,t=e.parentNode;"KYN-HEADER-LINK"===e.nodeName?this.level=e.level+1:"KYN-HEADER-CATEGORY"===e.nodeName&&"KYN-HEADER-LINK"===t.nodeName?this.level=t.level+1:window.innerWidth<672&&"KYN-HEADER-FLYOUT"===e.nodeName?this.level=2:this.level=1}_positionMenu(){var e,t;const i=this.getBoundingClientRect(),a=null===(t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".menu__content"))||void 0===t?void 0:t.getBoundingClientRect(),n=i.top+i.height/2,r=a.height/2,o=n+r>window.innerHeight?n-r-(n+r-window.innerHeight):n-r;this.menuPosition={top:o<56?56:o,left:i.right+8}}firstUpdated(){this.determineLevel()}willUpdate(e){e.has("open")&&this.open&&this._positionMenu()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.addEventListener("resize",this._debounceResize)}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",this._debounceResize),super.disconnectedCallback()}},l=new WeakMap,y=new WeakMap,x=new WeakMap,w=new WeakMap,_=new WeakMap,T=new WeakMap,z=new WeakMap,E=new WeakMap,L=new WeakMap,$=new WeakMap,P=new WeakMap,C=new WeakMap,M=new WeakMap,S=new WeakMap,W=new WeakMap,e(A,"HeaderLink"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=Z[Symbol.metadata])&&void 0!==e?e:null):void 0;N=[m({type:Boolean})],R=[m({type:String})],B=[m({type:String})],H=[m({type:String})],O=[m({type:Boolean})],Y=[d()],K=[m({type:Boolean})],q=[m({type:String})],D=[m({type:Number})],F=[m({type:String})],I=[m({type:Boolean})],U=[d()],X=[u({slot:"links"})],G=[d()],J=[d()],t(A,null,N,{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:i},ee,te),t(A,null,R,{kind:"accessor",name:"href",static:!1,private:!1,access:{has:e=>"href"in e,get:e=>e.href,set:(e,t)=>{e.href=t}},metadata:i},ie,ae),t(A,null,B,{kind:"accessor",name:"target",static:!1,private:!1,access:{has:e=>"target"in e,get:e=>e.target,set:(e,t)=>{e.target=t}},metadata:i},ne,re),t(A,null,H,{kind:"accessor",name:"rel",static:!1,private:!1,access:{has:e=>"rel"in e,get:e=>e.rel,set:(e,t)=>{e.rel=t}},metadata:i},oe,se),t(A,null,O,{kind:"accessor",name:"isActive",static:!1,private:!1,access:{has:e=>"isActive"in e,get:e=>e.isActive,set:(e,t)=>{e.isActive=t}},metadata:i},le,de),t(A,null,Y,{kind:"accessor",name:"level",static:!1,private:!1,access:{has:e=>"level"in e,get:e=>e.level,set:(e,t)=>{e.level=t}},metadata:i},he,ce),t(A,null,K,{kind:"accessor",name:"divider",static:!1,private:!1,access:{has:e=>"divider"in e,get:e=>e.divider,set:(e,t)=>{e.divider=t}},metadata:i},me,ue),t(A,null,q,{kind:"accessor",name:"searchLabel",static:!1,private:!1,access:{has:e=>"searchLabel"in e,get:e=>e.searchLabel,set:(e,t)=>{e.searchLabel=t}},metadata:i},ve,pe),t(A,null,D,{kind:"accessor",name:"searchThreshold",static:!1,private:!1,access:{has:e=>"searchThreshold"in e,get:e=>e.searchThreshold,set:(e,t)=>{e.searchThreshold=t}},metadata:i},ke,ge),t(A,null,F,{kind:"accessor",name:"backText",static:!1,private:!1,access:{has:e=>"backText"in e,get:e=>e.backText,set:(e,t)=>{e.backText=t}},metadata:i},fe,be),t(A,null,I,{kind:"accessor",name:"leftPadding",static:!1,private:!1,access:{has:e=>"leftPadding"in e,get:e=>e.leftPadding,set:(e,t)=>{e.leftPadding=t}},metadata:i},ye,xe),t(A,null,U,{kind:"accessor",name:"_searchTerm",static:!1,private:!1,access:{has:e=>"_searchTerm"in e,get:e=>e._searchTerm,set:(e,t)=>{e._searchTerm=t}},metadata:i},we,_e),t(A,null,X,{kind:"accessor",name:"slottedEls",static:!1,private:!1,access:{has:e=>"slottedEls"in e,get:e=>e.slottedEls,set:(e,t)=>{e.slottedEls=t}},metadata:i},Te,ze),t(A,null,G,{kind:"accessor",name:"_leaveTimer",static:!1,private:!1,access:{has:e=>"_leaveTimer"in e,get:e=>e._leaveTimer,set:(e,t)=>{e._leaveTimer=t}},metadata:i},Ee,Le),t(A,null,J,{kind:"accessor",name:"menuPosition",static:!1,private:!1,access:{has:e=>"menuPosition"in e,get:e=>e.menuPosition,set:(e,t)=>{e.menuPosition=t}},metadata:i},$e,Pe),t(null,j={value:A},Q,{kind:"class",name:A.name,metadata:i},null,V),A=j.value,i&&Object.defineProperty(A,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),A.styles=c(b),i(A,V),A})();export{y as HeaderLink};
+    `}_handleSearch(e){this._searchTerm=e.detail.value.toLowerCase(),this._searchFilter()}_searchFilter(){this.querySelectorAll(":scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link").forEach((e=>{var t,i;const a=null===(i=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector("slot"))||void 0===i?void 0:i.assignedNodes({flatten:!0});let n="";for(let e=0;e<a.length;e++)n+=a[e].textContent.trim();n.toLowerCase().includes(this._searchTerm)?e.style.display="block":e.style.display="none"})),this._positionMenu()}_handleBack(){this.open=!1}_handleLinksSlotChange(){this.requestUpdate()}handlePointerEnter(e){"mouse"===e.pointerType&&this.slottedEls.length&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this.open=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&this.slottedEls.length&&""===this._searchTerm&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this.open=!1}),150))}handleClick(e){let t=!1;this.slottedEls.length&&(t=!0,e.preventDefault(),this.open=!this.open);const i=new CustomEvent("on-click",{detail:{origEvent:e,defaultPrevented:t}});this.dispatchEvent(i)}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1,this._searchTerm="",this._searchFilter())}determineLevel(){const e=this.parentNode,t=e.parentNode;"KYN-HEADER-LINK"===e.nodeName?this.level=e.level+1:"KYN-HEADER-CATEGORY"===e.nodeName&&"KYN-HEADER-LINK"===t.nodeName?this.level=t.level+1:window.innerWidth<672&&"KYN-HEADER-FLYOUT"===e.nodeName?this.level=2:this.level=1}_positionMenu(){var e,t;const i=this.getBoundingClientRect(),a=null===(t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".menu__content"))||void 0===t?void 0:t.getBoundingClientRect(),n=i.top+i.height/2,r=a.height/2,o=n+r>window.innerHeight?n-r-(n+r-window.innerHeight):n-r;this.menuPosition={top:o<56?56:o,left:i.right+8}}firstUpdated(){this.determineLevel()}willUpdate(e){e.has("open")&&this.open&&this._positionMenu()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.addEventListener("resize",this._debounceResize)}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",this._debounceResize),super.disconnectedCallback()}},l=new WeakMap,y=new WeakMap,x=new WeakMap,w=new WeakMap,_=new WeakMap,T=new WeakMap,z=new WeakMap,E=new WeakMap,L=new WeakMap,$=new WeakMap,P=new WeakMap,C=new WeakMap,M=new WeakMap,S=new WeakMap,W=new WeakMap,e(A,"HeaderLink"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=Z[Symbol.metadata])&&void 0!==e?e:null):void 0;N=[m({type:Boolean})],R=[m({type:String})],B=[m({type:String})],H=[m({type:String})],O=[m({type:Boolean})],Y=[d()],K=[m({type:Boolean})],q=[m({type:String})],D=[m({type:Number})],F=[m({type:String})],I=[m({type:Boolean})],U=[d()],X=[u({slot:"links"})],G=[d()],J=[d()],t(A,null,N,{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:i},ee,te),t(A,null,R,{kind:"accessor",name:"href",static:!1,private:!1,access:{has:e=>"href"in e,get:e=>e.href,set:(e,t)=>{e.href=t}},metadata:i},ie,ae),t(A,null,B,{kind:"accessor",name:"target",static:!1,private:!1,access:{has:e=>"target"in e,get:e=>e.target,set:(e,t)=>{e.target=t}},metadata:i},ne,re),t(A,null,H,{kind:"accessor",name:"rel",static:!1,private:!1,access:{has:e=>"rel"in e,get:e=>e.rel,set:(e,t)=>{e.rel=t}},metadata:i},oe,se),t(A,null,O,{kind:"accessor",name:"isActive",static:!1,private:!1,access:{has:e=>"isActive"in e,get:e=>e.isActive,set:(e,t)=>{e.isActive=t}},metadata:i},le,de),t(A,null,Y,{kind:"accessor",name:"level",static:!1,private:!1,access:{has:e=>"level"in e,get:e=>e.level,set:(e,t)=>{e.level=t}},metadata:i},ce,he),t(A,null,K,{kind:"accessor",name:"divider",static:!1,private:!1,access:{has:e=>"divider"in e,get:e=>e.divider,set:(e,t)=>{e.divider=t}},metadata:i},me,ue),t(A,null,q,{kind:"accessor",name:"searchLabel",static:!1,private:!1,access:{has:e=>"searchLabel"in e,get:e=>e.searchLabel,set:(e,t)=>{e.searchLabel=t}},metadata:i},ve,pe),t(A,null,D,{kind:"accessor",name:"searchThreshold",static:!1,private:!1,access:{has:e=>"searchThreshold"in e,get:e=>e.searchThreshold,set:(e,t)=>{e.searchThreshold=t}},metadata:i},ke,ge),t(A,null,F,{kind:"accessor",name:"backText",static:!1,private:!1,access:{has:e=>"backText"in e,get:e=>e.backText,set:(e,t)=>{e.backText=t}},metadata:i},fe,be),t(A,null,I,{kind:"accessor",name:"leftPadding",static:!1,private:!1,access:{has:e=>"leftPadding"in e,get:e=>e.leftPadding,set:(e,t)=>{e.leftPadding=t}},metadata:i},ye,xe),t(A,null,U,{kind:"accessor",name:"_searchTerm",static:!1,private:!1,access:{has:e=>"_searchTerm"in e,get:e=>e._searchTerm,set:(e,t)=>{e._searchTerm=t}},metadata:i},we,_e),t(A,null,X,{kind:"accessor",name:"slottedEls",static:!1,private:!1,access:{has:e=>"slottedEls"in e,get:e=>e.slottedEls,set:(e,t)=>{e.slottedEls=t}},metadata:i},Te,ze),t(A,null,G,{kind:"accessor",name:"_leaveTimer",static:!1,private:!1,access:{has:e=>"_leaveTimer"in e,get:e=>e._leaveTimer,set:(e,t)=>{e._leaveTimer=t}},metadata:i},Ee,Le),t(A,null,J,{kind:"accessor",name:"menuPosition",static:!1,private:!1,access:{has:e=>"menuPosition"in e,get:e=>e.menuPosition,set:(e,t)=>{e.menuPosition=t}},metadata:i},$e,Pe),t(null,j={value:A},Q,{kind:"class",name:A.name,metadata:i},null,V),A=j.value,i&&Object.defineProperty(A,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),A.styles=h(b),i(A,V),A})();export{y as HeaderLink};
 //# sourceMappingURL=headerLink.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"headerLink.js","sources":["../../../../src/components/global/header/headerLink.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { 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 { debounce } from '../../../common/helpers/helpers';\nimport HeaderLinkScss from './headerLink.scss?inline';\nimport '../../reusable/textInput';\nimport arrowIcon 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';\nimport searchIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/search.svg';\n\n/**\n * Component for navigation links within the Header.\n * @fires on-click - Captures the click event and emits the original event details. `detail:{ origEvent: Event ,defaultPrevented: boolean}`\n * @slot unnamed - Slot for link text/content.\n * @slot links - Slot for sublinks (up to two levels).\n * @slot icon - Slot for icon.\n */\n@customElement('kyn-header-link')\nexport class HeaderLink extends LitElement {\n  static override styles = unsafeCSS(HeaderLinkScss);\n\n  /** Link open state. */\n  @property({ type: Boolean })\n  accessor open = false;\n\n  /** Link url. */\n  @property({ type: String })\n  accessor href = '';\n\n  /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n  @property({ type: String })\n  accessor target = '_self' as const;\n\n  /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n  @property({ type: String })\n  accessor rel = '';\n\n  /** Link active state, for example when URL path matches link href. */\n  @property({ type: Boolean })\n  accessor isActive = false;\n\n  /** Link level, supports two levels.\n   * @ignore\n   */\n  @state()\n  accessor level = 1;\n\n  /** DEPRECATED. Adds a 1px shadow to the bottom of the link. */\n  @property({ type: Boolean })\n  accessor divider = false;\n\n  /** Label for sub-menu link search input, which is visible with > 5 sub-links. */\n  @property({ type: String })\n  accessor searchLabel = 'Search';\n\n  /** Number of child links required to show search input. */\n  @property({ type: Number })\n  accessor searchThreshold = 6;\n\n  /** Text for mobile \"Back\" button. */\n  @property({ type: String })\n  accessor backText = 'Back';\n\n  /** Add left padding when icon is not provided to align text with links that do have icons. */\n  @property({ type: Boolean })\n  accessor leftPadding = false;\n\n  /** Text for mobile \"Back\" button. */\n  @state()\n  accessor _searchTerm = '';\n\n  /**\n   * Queries any slotted HTML elements.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links' })\n  accessor slottedEls!: Array<HTMLElement>;\n\n  /** Timeout function to delay flyout open.\n   * @internal\n   */\n  _enterTimer: any;\n\n  /** Timeout function to delay flyout close.\n   * @internal\n   */\n  @state()\n  accessor _leaveTimer: any;\n\n  /** Menu positioning\n   * @internal\n   */\n  @state()\n  accessor menuPosition: any = {};\n\n  override render() {\n    const classes = {\n      menu: this.slottedEls.length,\n      [`level--${this.level}`]: true,\n      divider: this.divider,\n      open: this.open,\n    };\n\n    const linkClasses = {\n      'nav-link': true,\n      active: this.isActive,\n      interactive: this.level == 1,\n      'padding-left': this.leftPadding,\n    };\n\n    const menuClasses = {\n      menu__content: true,\n      slotted: this.slottedEls.length,\n    };\n\n    const Links = this.querySelectorAll(\n      ':scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link'\n    );\n\n    return html`\n      <div\n        class=\"${classMap(classes)}\"\n        @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n        @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n      >\n        <a\n          target=${this.target}\n          rel=${this.rel}\n          href=${this.href}\n          class=${classMap(linkClasses)}\n          @click=${(e: Event) => this.handleClick(e)}\n          @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n        >\n          <slot></slot>\n\n          ${this.slottedEls.length\n            ? html` <span class=\"arrow\">${unsafeSVG(arrowIcon)}</span> `\n            : null}\n        </a>\n\n        <div\n          class=${classMap(menuClasses)}\n          style=${`top: ${this.menuPosition.top}px; left: ${this.menuPosition.left}px;`}\n        >\n          <button class=\"go-back\" @click=${() => this._handleBack()}>\n            <span>${unsafeSVG(backIcon)}</span>\n            ${this.backText}\n          </button>\n\n          ${Links.length >= this.searchThreshold\n            ? html`\n                <kyn-text-input\n                  hideLabel\n                  size=\"sm\"\n                  type=\"search\"\n                  label=${this.searchLabel}\n                  placeholder=${this.searchLabel}\n                  value=${this._searchTerm}\n                  @on-input=${(e: Event) => this._handleSearch(e)}\n                >\n                  <span slot=\"icon\" class=\"search-icon\">\n                    ${unsafeSVG(searchIcon)}\n                  </span>\n                  ${this.searchLabel}\n                </kyn-text-input>\n              `\n            : null}\n\n          <slot name=\"links\" @slotchange=${this._handleLinksSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _handleSearch(e: any) {\n    this._searchTerm = e.detail.value.toLowerCase();\n    this._searchFilter();\n  }\n\n  private _searchFilter() {\n    const Links: any = this.querySelectorAll(\n      ':scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link'\n    );\n\n    Links.forEach((link: any) => {\n      // get link text\n      const nodes: any = link.shadowRoot?.querySelector('slot')?.assignedNodes({\n        flatten: true,\n      });\n      let linkText = '';\n      for (let i = 0; i < nodes.length; i++) {\n        linkText += nodes[i].textContent.trim();\n      }\n\n      if (linkText.toLowerCase().includes(this._searchTerm)) {\n        link.style.display = 'block';\n      } else {\n        link.style.display = 'none';\n      }\n    });\n\n    this._positionMenu();\n  }\n\n  private _handleBack() {\n    this.open = false;\n  }\n\n  private _handleLinksSlotChange() {\n    this.requestUpdate();\n  }\n\n  private handlePointerEnter(e: PointerEvent) {\n    if (e.pointerType === 'mouse' && this.slottedEls.length) {\n      clearTimeout(this._leaveTimer);\n\n      this._enterTimer = setTimeout(() => {\n        this.open = true;\n      }, 150);\n    }\n  }\n\n  private handlePointerLeave(e: PointerEvent) {\n    if (\n      e.pointerType === 'mouse' &&\n      this.slottedEls.length &&\n      this._searchTerm === ''\n    ) {\n      clearTimeout(this._enterTimer);\n\n      this._leaveTimer = setTimeout(() => {\n        this.open = false;\n      }, 150);\n    }\n  }\n\n  private handleClick(e: Event) {\n    let preventDefault = false;\n\n    if (this.slottedEls.length) {\n      preventDefault = true;\n      e.preventDefault();\n      this.open = !this.open;\n    }\n\n    const event = new CustomEvent('on-click', {\n      detail: { origEvent: e, defaultPrevented: preventDefault },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n      this._searchTerm = '';\n      this._searchFilter();\n    }\n  }\n\n  private determineLevel() {\n    const ParentNode: any = this.parentNode;\n    const GrandparentNode: any = ParentNode.parentNode;\n\n    if (ParentNode.nodeName === 'KYN-HEADER-LINK') {\n      this.level = ParentNode.level + 1;\n    } else if (\n      ParentNode.nodeName === 'KYN-HEADER-CATEGORY' &&\n      GrandparentNode.nodeName === 'KYN-HEADER-LINK'\n    ) {\n      this.level = GrandparentNode.level + 1;\n    } else {\n      if (\n        window.innerWidth < 672 &&\n        ParentNode.nodeName === 'KYN-HEADER-FLYOUT'\n      ) {\n        this.level = 2;\n      } else {\n        this.level = 1;\n      }\n    }\n  }\n\n  private _positionMenu() {\n    // determine submenu positioning\n    const LinkBounds: any = this.getBoundingClientRect();\n    const MenuBounds: any = this.shadowRoot\n      ?.querySelector('.menu__content')\n      ?.getBoundingClientRect();\n    const Padding = 8;\n    const HeaderHeight = 56;\n\n    const LinkHalf = LinkBounds.top + LinkBounds.height / 2;\n    const MenuHalf = MenuBounds.height / 2;\n\n    const Top =\n      LinkHalf + MenuHalf > window.innerHeight\n        ? LinkHalf - MenuHalf - (LinkHalf + MenuHalf - window.innerHeight)\n        : LinkHalf - MenuHalf;\n\n    this.menuPosition = {\n      top: Top < HeaderHeight ? HeaderHeight : Top,\n      left: LinkBounds.right + Padding,\n    };\n  }\n\n  /** @internal */\n  private _debounceResize = debounce(() => {\n    this.determineLevel();\n  });\n\n  override firstUpdated() {\n    this.determineLevel();\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('open') && this.open) {\n      this._positionMenu();\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this.handleClickOut(e));\n\n    window?.addEventListener('resize', this._debounceResize);\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n    window?.removeEventListener('resize', this._debounceResize);\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-link': HeaderLink;\n  }\n}\n"],"names":["HeaderLink","customElement","LitElement","_classThis","_classSuper","_HeaderLink_open_accessor_storage","set","this","__runInitializers","_open_initializers","_HeaderLink_href_accessor_storage","_open_extraInitializers","_href_initializers","_HeaderLink_target_accessor_storage","_href_extraInitializers","_target_initializers","_HeaderLink_rel_accessor_storage","_target_extraInitializers","_rel_initializers","_HeaderLink_isActive_accessor_storage","_rel_extraInitializers","_isActive_initializers","_HeaderLink_level_accessor_storage","_isActive_extraInitializers","_level_initializers","_HeaderLink_divider_accessor_storage","_level_extraInitializers","_divider_initializers","_HeaderLink_searchLabel_accessor_storage","_divider_extraInitializers","_searchLabel_initializers","_HeaderLink_searchThreshold_accessor_storage","_searchLabel_extraInitializers","_searchThreshold_initializers","_HeaderLink_backText_accessor_storage","_searchThreshold_extraInitializers","_backText_initializers","_HeaderLink_leftPadding_accessor_storage","_backText_extraInitializers","_leftPadding_initializers","_HeaderLink__searchTerm_accessor_storage","_leftPadding_extraInitializers","__searchTerm_initializers","_HeaderLink_slottedEls_accessor_storage","__searchTerm_extraInitializers","_slottedEls_initializers","_enterTimer","_slottedEls_extraInitializers","_HeaderLink__leaveTimer_accessor_storage","__leaveTimer_initializers","_HeaderLink_menuPosition_accessor_storage","__leaveTimer_extraInitializers","_menuPosition_initializers","_debounceResize","_menuPosition_extraInitializers","debounce","determineLevel","open","__classPrivateFieldGet","value","__classPrivateFieldSet","href","target","rel","isActive","level","divider","searchLabel","searchThreshold","backText","leftPadding","_searchTerm","slottedEls","_leaveTimer","menuPosition","render","classes","menu","length","linkClasses","active","interactive","menuClasses","menu__content","slotted","Links","querySelectorAll","html","classMap","e","handlePointerLeave","handlePointerEnter","handleClick","unsafeSVG","arrowIcon","top","left","_handleBack","backIcon","_handleSearch","searchIcon","_handleLinksSlotChange","detail","toLowerCase","_searchFilter","forEach","link","nodes","_b","_a","shadowRoot","querySelector","assignedNodes","flatten","linkText","i","textContent","trim","includes","style","display","_positionMenu","requestUpdate","pointerType","clearTimeout","setTimeout","preventDefault","event","CustomEvent","origEvent","defaultPrevented","dispatchEvent","handleClickOut","composedPath","ParentNode","parentNode","GrandparentNode","nodeName","window","innerWidth","LinkBounds","getBoundingClientRect","MenuBounds","LinkHalf","height","MenuHalf","Top","innerHeight","right","firstUpdated","willUpdate","changedProps","has","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","_open_decorators","property","type","Boolean","_href_decorators","String","_target_decorators","_rel_decorators","_isActive_decorators","_level_decorators","state","_divider_decorators","_searchLabel_decorators","_searchThreshold_decorators","Number","_backText_decorators","_leftPadding_decorators","__searchTerm_decorators","_slottedEls_decorators","queryAssignedElements","slot","__leaveTimer_decorators","_menuPosition_decorators","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderLinkScss"],"mappings":"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"}
+{"version":3,"file":"headerLink.js","sources":["../../../../src/components/global/header/headerLink.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { 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 { debounce } from '../../../common/helpers/helpers';\nimport HeaderLinkScss from './headerLink.scss?inline';\nimport '../../reusable/textInput';\nimport arrowIcon 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';\nimport searchIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/search.svg';\n\n/**\n * Component for navigation links within the Header.\n * @fires on-click - Captures the click event and emits the original event details. `detail:{ origEvent: Event ,defaultPrevented: boolean}`\n * @slot unnamed - Slot for link text/content.\n * @slot links - Slot for sublinks (up to two levels).\n * @slot icon - Slot for icon.\n */\n@customElement('kyn-header-link')\nexport class HeaderLink extends LitElement {\n  static override styles = unsafeCSS(HeaderLinkScss);\n\n  /** Link open state. */\n  @property({ type: Boolean })\n  accessor open = false;\n\n  /** Link url. */\n  @property({ type: String })\n  accessor href = '';\n\n  /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n  @property({ type: String })\n  accessor target = '_self' as const;\n\n  /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n  @property({ type: String })\n  accessor rel = '';\n\n  /** Link active state, for example when URL path matches link href. */\n  @property({ type: Boolean })\n  accessor isActive = false;\n\n  /** Link level, supports two levels.\n   * @ignore\n   */\n  @state()\n  accessor level = 1;\n\n  /** DEPRECATED. Adds a 1px shadow to the bottom of the link. */\n  @property({ type: Boolean })\n  accessor divider = false;\n\n  /** Label for sub-menu link search input, which is visible with > 5 sub-links. */\n  @property({ type: String })\n  accessor searchLabel = 'Search';\n\n  /** Number of child links required to show search input. */\n  @property({ type: Number })\n  accessor searchThreshold = 6;\n\n  /** Text for mobile \"Back\" button. */\n  @property({ type: String })\n  accessor backText = 'Back';\n\n  /** Add left padding when icon is not provided to align text with links that do have icons. */\n  @property({ type: Boolean })\n  accessor leftPadding = false;\n\n  /** Text for mobile \"Back\" button. */\n  @state()\n  accessor _searchTerm = '';\n\n  /**\n   * Queries any slotted HTML elements.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links' })\n  accessor slottedEls!: Array<HTMLElement>;\n\n  /** Timeout function to delay flyout open.\n   * @internal\n   */\n  _enterTimer: any;\n\n  /** Timeout function to delay flyout close.\n   * @internal\n   */\n  @state()\n  accessor _leaveTimer: any;\n\n  /** Menu positioning\n   * @internal\n   */\n  @state()\n  accessor menuPosition: any = {};\n\n  override render() {\n    const classes = {\n      menu: this.slottedEls.length,\n      [`level--${this.level}`]: true,\n      divider: this.divider,\n      open: this.open,\n    };\n\n    const linkClasses = {\n      'nav-link': true,\n      active: this.isActive,\n      interactive: this.level == 1,\n      'padding-left': this.leftPadding,\n    };\n\n    const menuClasses = {\n      menu__content: true,\n      slotted: this.slottedEls.length,\n    };\n\n    const Links = this.querySelectorAll(\n      ':scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link'\n    );\n\n    return html`\n      <div\n        class=\"${classMap(classes)}\"\n        @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n        @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n      >\n        <a\n          target=${this.target}\n          rel=${this.rel}\n          href=${this.href}\n          class=${classMap(linkClasses)}\n          @click=${(e: Event) => this.handleClick(e)}\n          @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n        >\n          <slot></slot>\n\n          ${this.slottedEls.length\n            ? html` <span class=\"arrow\">${unsafeSVG(arrowIcon)}</span> `\n            : null}\n        </a>\n\n        <div\n          class=${classMap(menuClasses)}\n          style=${`top: ${this.menuPosition.top}px; left: ${this.menuPosition.left}px;`}\n        >\n          <button class=\"go-back\" @click=${() => this._handleBack()}>\n            <span>${unsafeSVG(backIcon)}</span>\n            ${this.backText}\n          </button>\n\n          ${Links.length >= this.searchThreshold\n            ? html`\n                <kyn-text-input\n                  hideLabel\n                  size=\"sm\"\n                  type=\"search\"\n                  label=${this.searchLabel}\n                  placeholder=${this.searchLabel}\n                  value=${this._searchTerm}\n                  @on-input=${(e: Event) => this._handleSearch(e)}\n                >\n                  <span slot=\"icon\" class=\"search-icon\">\n                    ${unsafeSVG(searchIcon)}\n                  </span>\n                  ${this.searchLabel}\n                </kyn-text-input>\n              `\n            : null}\n\n          <slot name=\"links\" @slotchange=${this._handleLinksSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _handleSearch(e: any) {\n    this._searchTerm = e.detail.value.toLowerCase();\n    this._searchFilter();\n  }\n\n  private _searchFilter() {\n    const Links: any = this.querySelectorAll(\n      ':scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link'\n    );\n\n    Links.forEach((link: any) => {\n      // get link text\n      const nodes: any = link.shadowRoot?.querySelector('slot')?.assignedNodes({\n        flatten: true,\n      });\n      let linkText = '';\n      for (let i = 0; i < nodes.length; i++) {\n        linkText += nodes[i].textContent.trim();\n      }\n\n      if (linkText.toLowerCase().includes(this._searchTerm)) {\n        link.style.display = 'block';\n      } else {\n        link.style.display = 'none';\n      }\n    });\n\n    this._positionMenu();\n  }\n\n  private _handleBack() {\n    this.open = false;\n  }\n\n  private _handleLinksSlotChange() {\n    this.requestUpdate();\n  }\n\n  private handlePointerEnter(e: PointerEvent) {\n    if (e.pointerType === 'mouse' && this.slottedEls.length) {\n      clearTimeout(this._leaveTimer);\n\n      this._enterTimer = setTimeout(() => {\n        this.open = true;\n      }, 150);\n    }\n  }\n\n  private handlePointerLeave(e: PointerEvent) {\n    if (\n      e.pointerType === 'mouse' &&\n      this.slottedEls.length &&\n      this._searchTerm === ''\n    ) {\n      clearTimeout(this._enterTimer);\n\n      this._leaveTimer = setTimeout(() => {\n        this.open = false;\n      }, 150);\n    }\n  }\n\n  private handleClick(e: Event) {\n    let preventDefault = false;\n\n    if (this.slottedEls.length) {\n      preventDefault = true;\n      e.preventDefault();\n      this.open = !this.open;\n    }\n\n    const event = new CustomEvent('on-click', {\n      detail: { origEvent: e, defaultPrevented: preventDefault },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n      this._searchTerm = '';\n      this._searchFilter();\n    }\n  }\n\n  private determineLevel() {\n    const ParentNode: any = this.parentNode;\n    const GrandparentNode: any = ParentNode.parentNode;\n\n    if (ParentNode.nodeName === 'KYN-HEADER-LINK') {\n      this.level = ParentNode.level + 1;\n    } else if (\n      ParentNode.nodeName === 'KYN-HEADER-CATEGORY' &&\n      GrandparentNode.nodeName === 'KYN-HEADER-LINK'\n    ) {\n      this.level = GrandparentNode.level + 1;\n    } else {\n      if (\n        window.innerWidth < 672 &&\n        ParentNode.nodeName === 'KYN-HEADER-FLYOUT'\n      ) {\n        this.level = 2;\n      } else {\n        this.level = 1;\n      }\n    }\n  }\n\n  private _positionMenu() {\n    // determine submenu positioning\n    const LinkBounds: any = this.getBoundingClientRect();\n    const MenuBounds: any = this.shadowRoot\n      ?.querySelector('.menu__content')\n      ?.getBoundingClientRect();\n    const Padding = 8;\n    const HeaderHeight = 56;\n\n    const LinkHalf = LinkBounds.top + LinkBounds.height / 2;\n    const MenuHalf = MenuBounds.height / 2;\n\n    const Top =\n      LinkHalf + MenuHalf > window.innerHeight\n        ? LinkHalf - MenuHalf - (LinkHalf + MenuHalf - window.innerHeight)\n        : LinkHalf - MenuHalf;\n\n    this.menuPosition = {\n      top: Top < HeaderHeight ? HeaderHeight : Top,\n      left: LinkBounds.right + Padding,\n    };\n  }\n\n  /** @internal */\n  private _debounceResize = debounce(() => {\n    this.determineLevel();\n  });\n\n  override firstUpdated() {\n    this.determineLevel();\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('open') && this.open) {\n      this._positionMenu();\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this.handleClickOut(e));\n\n    window?.addEventListener('resize', this._debounceResize);\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n    window?.removeEventListener('resize', this._debounceResize);\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-link': HeaderLink;\n  }\n}\n"],"names":["HeaderLink","customElement","LitElement","_classThis","_classSuper","_HeaderLink_open_accessor_storage","set","this","__runInitializers","_open_initializers","_HeaderLink_href_accessor_storage","_open_extraInitializers","_href_initializers","_HeaderLink_target_accessor_storage","_href_extraInitializers","_target_initializers","_HeaderLink_rel_accessor_storage","_target_extraInitializers","_rel_initializers","_HeaderLink_isActive_accessor_storage","_rel_extraInitializers","_isActive_initializers","_HeaderLink_level_accessor_storage","_isActive_extraInitializers","_level_initializers","_HeaderLink_divider_accessor_storage","_level_extraInitializers","_divider_initializers","_HeaderLink_searchLabel_accessor_storage","_divider_extraInitializers","_searchLabel_initializers","_HeaderLink_searchThreshold_accessor_storage","_searchLabel_extraInitializers","_searchThreshold_initializers","_HeaderLink_backText_accessor_storage","_searchThreshold_extraInitializers","_backText_initializers","_HeaderLink_leftPadding_accessor_storage","_backText_extraInitializers","_leftPadding_initializers","_HeaderLink__searchTerm_accessor_storage","_leftPadding_extraInitializers","__searchTerm_initializers","_HeaderLink_slottedEls_accessor_storage","__searchTerm_extraInitializers","_slottedEls_initializers","_enterTimer","_slottedEls_extraInitializers","_HeaderLink__leaveTimer_accessor_storage","__leaveTimer_initializers","_HeaderLink_menuPosition_accessor_storage","__leaveTimer_extraInitializers","_menuPosition_initializers","_debounceResize","_menuPosition_extraInitializers","debounce","determineLevel","open","__classPrivateFieldGet","value","__classPrivateFieldSet","href","target","rel","isActive","level","divider","searchLabel","searchThreshold","backText","leftPadding","_searchTerm","slottedEls","_leaveTimer","menuPosition","render","classes","menu","length","linkClasses","active","interactive","menuClasses","menu__content","slotted","Links","querySelectorAll","html","classMap","e","handlePointerLeave","handlePointerEnter","handleClick","unsafeSVG","arrowIcon","top","left","_handleBack","backIcon","_handleSearch","searchIcon","_handleLinksSlotChange","detail","toLowerCase","_searchFilter","forEach","link","nodes","_b","_a","shadowRoot","querySelector","assignedNodes","flatten","linkText","i","textContent","trim","includes","style","display","_positionMenu","requestUpdate","pointerType","clearTimeout","setTimeout","preventDefault","event","CustomEvent","origEvent","defaultPrevented","dispatchEvent","handleClickOut","composedPath","ParentNode","parentNode","GrandparentNode","nodeName","window","innerWidth","LinkBounds","getBoundingClientRect","MenuBounds","LinkHalf","height","MenuHalf","Top","innerHeight","right","firstUpdated","willUpdate","changedProps","has","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","_open_decorators","property","type","Boolean","_href_decorators","String","_target_decorators","_rel_decorators","_isActive_decorators","_level_decorators","state","_divider_decorators","_searchLabel_decorators","_searchThreshold_decorators","Number","_backText_decorators","_leftPadding_decorators","__searchTerm_decorators","_slottedEls_decorators","queryAssignedElements","slot","__leaveTimer_decorators","_menuPosition_decorators","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderLinkScss"],"mappings":"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"}

package/components/global/header/headerNav.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{e as r,o as a,x as l}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as s,a as d,t as c,r as u,n as m}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as p}from"../../../vendor/lit-element-DxLLCKb1.js";import{g as v,m as h}from"../../../vendor/@kyndryl-design-system/shidoka-icons-DALQfz_R.js";var k=s`*,
+import{_ as e,a as t,b as o,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as r,o as a,x as l}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as s,a as d,t as c,r as u,n as m}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as p}from"../../../vendor/lit-element-DxLLCKb1.js";import{g as v,m as k}from"../../../vendor/@kyndryl-design-system/shidoka-icons-DALQfz_R.js";var h=s`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -72,9 +72,6 @@ import{_ as e,a as t,b as o,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
     background: transparent;
     visibility: hidden;
   }
-  .overlay.scrolled {
-    top: var(--kd-header-height);
-  }
   .open + .overlay, .child-open + .overlay {
     background: var(--kd-color-background-opacity-inverse-backdrop);
     visibility: visible;
@@ -123,7 +120,7 @@ import{_ as e,a as t,b as o,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
     border-top: none;
     border-radius: 8px;
     background: var(--kd-color-background-container-default);
-    max-height: calc(100vh - var(--kd-header-height));
+    max-height: calc(100vh - var(--kd-header-reserved-space) - 16px);
     box-shadow: var(--kd-elevation-level-1);
   }
   .menu__content.left {
@@ -255,12 +252,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._toggleMenuOpen()}
         >
-          ${this.menuOpen?l` <span>${a(v)}</span> `:l` <span>${a(h)}</span> `}
+          ${this.menuOpen?l` <span>${a(v)}</span> `:l` <span>${a(k)}</span> `}
         </button>
 
         <div class="menu__content left">
           <slot></slot>
         </div>
       </div>
-    `}_toggleMenuOpen(){this.menuOpen=!this.menuOpen}_handleClickOut(e){e.composedPath().includes(this)||(this.menuOpen=!1)}willUpdate(e){if(e.has("menuOpen")){const e=new CustomEvent("on-nav-toggle",{composed:!0,bubbles:!0,detail:{open:this.menuOpen}});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),s.set(this,o(this,z,!1)),b.set(this,(o(this,j),o(this,C,"left"))),o(this,M)}},s=new WeakMap,b=new WeakMap,e(f,"HeaderNav"),(()=>{var e;const o="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=O[Symbol.metadata])&&void 0!==e?e:null):void 0;x=[d()],y=[m({type:String,reflect:!0})],t(f,null,x,{kind:"accessor",name:"menuOpen",static:!1,private:!1,access:{has:e=>"menuOpen"in e,get:e=>e.menuOpen,set:(e,t)=>{e.menuOpen=t}},metadata:o},z,j),t(f,null,y,{kind:"accessor",name:"slot",static:!1,private:!1,access:{has:e=>"slot"in e,get:e=>e.slot,set:(e,t)=>{e.slot=t}},metadata:o},C,M),t(null,g={value:f},w,{kind:"class",name:f.name,metadata:o},null,_),f=g.value,o&&Object.defineProperty(f,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:o})})(),f.styles=u(k),o(f,_),f})();export{b as HeaderNav};
+    `}_toggleMenuOpen(){this.menuOpen=!this.menuOpen}_handleClickOut(e){e.composedPath().includes(this)||(this.menuOpen=!1)}willUpdate(e){if(e.has("menuOpen")){const e=new CustomEvent("on-nav-toggle",{composed:!0,bubbles:!0,detail:{open:this.menuOpen}});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),s.set(this,o(this,z,!1)),b.set(this,(o(this,j),o(this,C,"left"))),o(this,M)}},s=new WeakMap,b=new WeakMap,e(f,"HeaderNav"),(()=>{var e;const o="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=O[Symbol.metadata])&&void 0!==e?e:null):void 0;x=[d()],y=[m({type:String,reflect:!0})],t(f,null,x,{kind:"accessor",name:"menuOpen",static:!1,private:!1,access:{has:e=>"menuOpen"in e,get:e=>e.menuOpen,set:(e,t)=>{e.menuOpen=t}},metadata:o},z,j),t(f,null,y,{kind:"accessor",name:"slot",static:!1,private:!1,access:{has:e=>"slot"in e,get:e=>e.slot,set:(e,t)=>{e.slot=t}},metadata:o},C,M),t(null,g={value:f},w,{kind:"class",name:f.name,metadata:o},null,_),f=g.value,o&&Object.defineProperty(f,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:o})})(),f.styles=u(h),o(f,_),f})();export{b as HeaderNav};
 //# sourceMappingURL=headerNav.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"headerNav.js","sources":["../../../../src/components/global/header/headerNav.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport HeaderNavScss from './headerNav.scss?inline';\n\nimport menuIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/hamburger-menu.svg';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\n\n/**\n * Container for header navigation links.\n * @slot unnamed - This element has a slot.\n */\n@customElement('kyn-header-nav')\nexport class HeaderNav extends LitElement {\n  static override styles = unsafeCSS(HeaderNavScss);\n\n  /** Small screen header nav visibility.\n   * @ignore\n   */\n  @state()\n  accessor menuOpen = false;\n\n  /** Force correct slot */\n  @property({ type: String, reflect: true })\n  override accessor slot = 'left';\n\n  override render() {\n    const classes = {\n      'header-nav': true,\n      menu: true,\n      open: this.menuOpen,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        <button\n          class=\"btn interactive\"\n          aria-label=\"Toggle Menu\"\n          title=\"Toggle Menu\"\n          @click=${() => this._toggleMenuOpen()}\n        >\n          ${this.menuOpen\n            ? html` <span>${unsafeSVG(closeIcon)}</span> `\n            : html` <span>${unsafeSVG(menuIcon)}</span> `}\n        </button>\n\n        <div class=\"menu__content left\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _toggleMenuOpen() {\n    this.menuOpen = !this.menuOpen;\n  }\n\n  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.menuOpen = false;\n    }\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('menuOpen')) {\n      const event = new CustomEvent('on-nav-toggle', {\n        composed: true,\n        bubbles: true,\n        detail: { open: this.menuOpen },\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-nav': HeaderNav;\n  }\n}\n"],"names":["HeaderNav","customElement","LitElement","_classThis","_classSuper","menuOpen","__classPrivateFieldGet","this","_HeaderNav_menuOpen_accessor_storage","value","__classPrivateFieldSet","slot","_HeaderNav_slot_accessor_storage","render","classes","menu","open","html","classMap","_toggleMenuOpen","unsafeSVG","closeIcon","menuIcon","_handleClickOut","e","composedPath","includes","willUpdate","changedProps","has","event","CustomEvent","composed","bubbles","detail","dispatchEvent","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","set","__runInitializers","_menuOpen_initializers","_menuOpen_extraInitializers","_slot_initializers","_menuOpen_decorators","state","property","type","String","reflect","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_slot_decorators","_slot_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderNavScss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAcaA,EAAS,6BADrBC,EAAc,0BACgBC,6BAARC,EAAA,cAAQC,EAO7B,YAASC,GAAQ,OAAAC,EAAAC,KAAAC,EAAA,IAAA,CAAjB,YAASH,CAAQI,GAAAC,EAAAH,KAAAC,EAAAC,EAAA,IAAA,CAIjB,QAAkBE,GAAI,OAAAL,EAAAC,KAAAK,EAAA,IAAA,CAAtB,QAAkBD,CAAIF,GAAAC,EAAAH,KAAAK,EAAAH,EAAA,IAAA,CAEb,MAAAI,GACP,MAAMC,EAAU,CACd,cAAc,EACdC,MAAM,EACNC,KAAMT,KAAKF,UAGb,OAAOY,CAAI;mBACIC,EAASJ;;;;;mBAKT,IAAMP,KAAKY;;YAElBZ,KAAKF,SACHY,CAAI,UAAUG,EAAUC,aACxBJ,CAAI,UAAUG,EAAUE;;;;;;;MAU5B,eAAAH,GACNZ,KAAKF,UAAYE,KAAKF,SAGhB,eAAAkB,CAAgBC,GACjBA,EAAEC,eAAeC,SAASnB,QAC7BA,KAAKF,UAAW,GAIX,UAAAsB,CAAWC,GAClB,GAAIA,EAAaC,IAAI,YAAa,CAChC,MAAMC,EAAQ,IAAIC,YAAY,gBAAiB,CAC7CC,UAAU,EACVC,SAAS,EACTC,OAAQ,CAAElB,KAAMT,KAAKF,YAEvBE,KAAK4B,cAAcL,IAId,iBAAAM,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUf,GAAMjB,KAAKgB,gBAAgBC,KAGxD,oBAAAgB,GACPF,SAASG,oBAAoB,SAAUjB,GAAMjB,KAAKgB,gBAAgBC,KAElEa,MAAMG,yDA/DChC,EAAAkC,IAAAnC,KAAAoC,EAAApC,KAAAqC,GAAW,IAIFhC,EAAA8B,IAAAnC,MAAAoC,EAAApC,KAAAsC,GAAAF,EAAApC,KAAAuC,EAAO,yMALxBC,EAAA,CAAAC,QAIAC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAHnCC,EAAAlD,EAAA,KAAA4C,EAAA,CAAAO,KAAA,WAAAC,KAAA,WAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAA7B,IAAA8B,GAAA,aAAAA,EAAAC,IAAAD,GAAAA,EAAStD,SAAQqC,IAAA,CAAAiB,EAAAlD,KAAAkD,EAARtD,SAAQI,CAAA,GAAAoD,SAAAC,GAAAlB,EAAAC,GAIjBQ,EAAAlD,EAAA,KAAA4D,EAAA,CAAAT,KAAA,WAAAC,KAAA,OAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAA7B,IAAA8B,GAAA,SAAAA,EAAAC,IAAAD,GAAAA,EAAkBhD,KAAI+B,IAAA,CAAAiB,EAAAlD,KAAAkD,EAAJhD,KAAIF,CAAA,GAAAoD,SAAAC,GAAAhB,EAAAkB,GAXxBX,EAAA,KAAAY,EAAA,CAAAxD,MAAAN,GAAA+D,EAAA,CAAAZ,KAAA,QAAAC,KAAApD,EAAAoD,KAAAM,SAAAC,GAAA,KAAAK,iHACkBhE,EAAAiE,OAASC,EAAUC,GADxB3B,EAAAxC,EAAAgE,MAAS"}
+{"version":3,"file":"headerNav.js","sources":["../../../../src/components/global/header/headerNav.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport HeaderNavScss from './headerNav.scss?inline';\n\nimport menuIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/hamburger-menu.svg';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\n\n/**\n * Container for header navigation links.\n * @slot unnamed - This element has a slot.\n */\n@customElement('kyn-header-nav')\nexport class HeaderNav extends LitElement {\n  static override styles = unsafeCSS(HeaderNavScss);\n\n  /** Small screen header nav visibility.\n   * @ignore\n   */\n  @state()\n  accessor menuOpen = false;\n\n  /** Force correct slot */\n  @property({ type: String, reflect: true })\n  override accessor slot = 'left';\n\n  override render() {\n    const classes = {\n      'header-nav': true,\n      menu: true,\n      open: this.menuOpen,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        <button\n          class=\"btn interactive\"\n          aria-label=\"Toggle Menu\"\n          title=\"Toggle Menu\"\n          @click=${() => this._toggleMenuOpen()}\n        >\n          ${this.menuOpen\n            ? html` <span>${unsafeSVG(closeIcon)}</span> `\n            : html` <span>${unsafeSVG(menuIcon)}</span> `}\n        </button>\n\n        <div class=\"menu__content left\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _toggleMenuOpen() {\n    this.menuOpen = !this.menuOpen;\n  }\n\n  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.menuOpen = false;\n    }\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('menuOpen')) {\n      const event = new CustomEvent('on-nav-toggle', {\n        composed: true,\n        bubbles: true,\n        detail: { open: this.menuOpen },\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-nav': HeaderNav;\n  }\n}\n"],"names":["HeaderNav","customElement","LitElement","_classThis","_classSuper","menuOpen","__classPrivateFieldGet","this","_HeaderNav_menuOpen_accessor_storage","value","__classPrivateFieldSet","slot","_HeaderNav_slot_accessor_storage","render","classes","menu","open","html","classMap","_toggleMenuOpen","unsafeSVG","closeIcon","menuIcon","_handleClickOut","e","composedPath","includes","willUpdate","changedProps","has","event","CustomEvent","composed","bubbles","detail","dispatchEvent","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","set","__runInitializers","_menuOpen_initializers","_menuOpen_extraInitializers","_slot_initializers","_menuOpen_decorators","state","property","type","String","reflect","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_slot_decorators","_slot_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderNavScss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAcaA,EAAS,6BADrBC,EAAc,0BACgBC,6BAARC,EAAA,cAAQC,EAO7B,YAASC,GAAQ,OAAAC,EAAAC,KAAAC,EAAA,IAAA,CAAjB,YAASH,CAAQI,GAAAC,EAAAH,KAAAC,EAAAC,EAAA,IAAA,CAIjB,QAAkBE,GAAI,OAAAL,EAAAC,KAAAK,EAAA,IAAA,CAAtB,QAAkBD,CAAIF,GAAAC,EAAAH,KAAAK,EAAAH,EAAA,IAAA,CAEb,MAAAI,GACP,MAAMC,EAAU,CACd,cAAc,EACdC,MAAM,EACNC,KAAMT,KAAKF,UAGb,OAAOY,CAAI;mBACIC,EAASJ;;;;;mBAKT,IAAMP,KAAKY;;YAElBZ,KAAKF,SACHY,CAAI,UAAUG,EAAUC,aACxBJ,CAAI,UAAUG,EAAUE;;;;;;;MAU5B,eAAAH,GACNZ,KAAKF,UAAYE,KAAKF,SAGhB,eAAAkB,CAAgBC,GACjBA,EAAEC,eAAeC,SAASnB,QAC7BA,KAAKF,UAAW,GAIX,UAAAsB,CAAWC,GAClB,GAAIA,EAAaC,IAAI,YAAa,CAChC,MAAMC,EAAQ,IAAIC,YAAY,gBAAiB,CAC7CC,UAAU,EACVC,SAAS,EACTC,OAAQ,CAAElB,KAAMT,KAAKF,YAEvBE,KAAK4B,cAAcL,IAId,iBAAAM,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUf,GAAMjB,KAAKgB,gBAAgBC,KAGxD,oBAAAgB,GACPF,SAASG,oBAAoB,SAAUjB,GAAMjB,KAAKgB,gBAAgBC,KAElEa,MAAMG,yDA/DChC,EAAAkC,IAAAnC,KAAAoC,EAAApC,KAAAqC,GAAW,IAIFhC,EAAA8B,IAAAnC,MAAAoC,EAAApC,KAAAsC,GAAAF,EAAApC,KAAAuC,EAAO,yMALxBC,EAAA,CAAAC,QAIAC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAHnCC,EAAAlD,EAAA,KAAA4C,EAAA,CAAAO,KAAA,WAAAC,KAAA,WAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAA7B,IAAA8B,GAAA,aAAAA,EAAAC,IAAAD,GAAAA,EAAStD,SAAQqC,IAAA,CAAAiB,EAAAlD,KAAAkD,EAARtD,SAAQI,CAAA,GAAAoD,SAAAC,GAAAlB,EAAAC,GAIjBQ,EAAAlD,EAAA,KAAA4D,EAAA,CAAAT,KAAA,WAAAC,KAAA,OAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAA7B,IAAA8B,GAAA,SAAAA,EAAAC,IAAAD,GAAAA,EAAkBhD,KAAI+B,IAAA,CAAAiB,EAAAlD,KAAAkD,EAAJhD,KAAIF,CAAA,GAAAoD,SAAAC,GAAAhB,EAAAkB,GAXxBX,EAAA,KAAAY,EAAA,CAAAxD,MAAAN,GAAA+D,EAAA,CAAAZ,KAAA,QAAAC,KAAApD,EAAAoD,KAAAM,SAAAC,GAAA,KAAAK,iHACkBhE,EAAAiE,OAASC,EAAUC,GADxB3B,EAAAxC,EAAAgE,MAAS"}

package/components/global/header/headerNotificationPanel.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t,b as a,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{i as l,t as r,r as o,n as d}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{x as s}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as p}from"../../../vendor/lit-element-DxLLCKb1.js";import"../../reusable/button/button.js";import"../../../common/helpers/helpers.js";import"../../reusable/button/defs.js";var h=l`*,
+import{_ as e,a as t,b as a,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{i as r,t as l,r as o,n as d}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{x as s}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as p}from"../../../vendor/lit-element-DxLLCKb1.js";import"../../reusable/button/button.js";import"../../../common/helpers/helpers.js";import"../../reusable/button/defs.js";var h=r`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -41,13 +41,13 @@ import{_ as e,a as t,b as a,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-height: calc(100vh - var(--kd-header-height) - 48px - 16px - 4px);
+  max-height: calc(100vh - var(--kd-header-reserved-space) - 48px - 16px - 4px);
   /* 48px = mobile back button+, 16px = flyout top/bottom padding, 4px = flyout bottom border */
 }
 @media (min-width: 42rem) {
   .panel-wrapper {
     width: 480px;
-    max-height: calc(80vh - var(--kd-header-height) - 16px - 4px);
+    max-height: calc(96vh - var(--kd-header-reserved-space) - 16px - 4px);
   }
 }
 .panel-header-wrapper {
@@ -120,7 +120,7 @@ import{_ as e,a as t,b as a,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
 .panel-footer {
   text-align: center;
   padding: 12px 0px 4px 0px;
-}`;let m=(()=>{var l,m,c;let x,f,v,g,u,k=[r("kyn-header-notification-panel")],b=[],y=p,w=[],F=[],T=[],z=[],j=[],B=[];return f=class extends y{get panelTitle(){return i(this,l,"f")}set panelTitle(e){n(this,l,e,"f")}get panelFooterBtnText(){return i(this,m,"f")}set panelFooterBtnText(e){n(this,m,e,"f")}get hidePanelFooter(){return i(this,c,"f")}set hidePanelFooter(e){n(this,c,e,"f")}render(){return s` <div class="panel-wrapper">
+}`;let m=(()=>{var r,m,c;let x,f,v,g,u,k=[l("kyn-header-notification-panel")],b=[],y=p,w=[],F=[],T=[],z=[],j=[],B=[];return f=class extends y{get panelTitle(){return i(this,r,"f")}set panelTitle(e){n(this,r,e,"f")}get panelFooterBtnText(){return i(this,m,"f")}set panelFooterBtnText(e){n(this,m,e,"f")}get hidePanelFooter(){return i(this,c,"f")}set hidePanelFooter(e){n(this,c,e,"f")}render(){return s` <div class="panel-wrapper">
       <header class="panel-header-wrapper">
         <div class="panel-header">
           <div class="panel-left">
@@ -144,5 +144,5 @@ import{_ as e,a as t,b as a,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
               >${this.panelFooterBtnText}</kyn-button
             >
           </div>`}
-    </div>`}_handlefooterBtnEvent(e){const t=new CustomEvent("on-footer-btn-click",{detail:{origEvent:e}});this.dispatchEvent(t)}constructor(){super(...arguments),l.set(this,a(this,w,"")),m.set(this,(a(this,F),a(this,T,""))),c.set(this,(a(this,z),a(this,j,!1))),a(this,B)}},l=new WeakMap,m=new WeakMap,c=new WeakMap,e(f,"HeaderNotificationPanel"),(()=>{var e;const a="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=y[Symbol.metadata])&&void 0!==e?e:null):void 0;v=[d({type:String})],g=[d({type:String})],u=[d({type:Boolean})],t(f,null,v,{kind:"accessor",name:"panelTitle",static:!1,private:!1,access:{has:e=>"panelTitle"in e,get:e=>e.panelTitle,set:(e,t)=>{e.panelTitle=t}},metadata:a},w,F),t(f,null,g,{kind:"accessor",name:"panelFooterBtnText",static:!1,private:!1,access:{has:e=>"panelFooterBtnText"in e,get:e=>e.panelFooterBtnText,set:(e,t)=>{e.panelFooterBtnText=t}},metadata:a},T,z),t(f,null,u,{kind:"accessor",name:"hidePanelFooter",static:!1,private:!1,access:{has:e=>"hidePanelFooter"in e,get:e=>e.hidePanelFooter,set:(e,t)=>{e.hidePanelFooter=t}},metadata:a},j,B),t(null,x={value:f},k,{kind:"class",name:f.name,metadata:a},null,b),f=x.value,a&&Object.defineProperty(f,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a})})(),f.styles=o(h),a(f,b),f})();export{m as HeaderNotificationPanel};
+    </div>`}_handlefooterBtnEvent(e){const t=new CustomEvent("on-footer-btn-click",{detail:{origEvent:e}});this.dispatchEvent(t)}constructor(){super(...arguments),r.set(this,a(this,w,"")),m.set(this,(a(this,F),a(this,T,""))),c.set(this,(a(this,z),a(this,j,!1))),a(this,B)}},r=new WeakMap,m=new WeakMap,c=new WeakMap,e(f,"HeaderNotificationPanel"),(()=>{var e;const a="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=y[Symbol.metadata])&&void 0!==e?e:null):void 0;v=[d({type:String})],g=[d({type:String})],u=[d({type:Boolean})],t(f,null,v,{kind:"accessor",name:"panelTitle",static:!1,private:!1,access:{has:e=>"panelTitle"in e,get:e=>e.panelTitle,set:(e,t)=>{e.panelTitle=t}},metadata:a},w,F),t(f,null,g,{kind:"accessor",name:"panelFooterBtnText",static:!1,private:!1,access:{has:e=>"panelFooterBtnText"in e,get:e=>e.panelFooterBtnText,set:(e,t)=>{e.panelFooterBtnText=t}},metadata:a},T,z),t(f,null,u,{kind:"accessor",name:"hidePanelFooter",static:!1,private:!1,access:{has:e=>"hidePanelFooter"in e,get:e=>e.hidePanelFooter,set:(e,t)=>{e.hidePanelFooter=t}},metadata:a},j,B),t(null,x={value:f},k,{kind:"class",name:f.name,metadata:a},null,b),f=x.value,a&&Object.defineProperty(f,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a})})(),f.styles=o(h),a(f,b),f})();export{m as HeaderNotificationPanel};
 //# sourceMappingURL=headerNotificationPanel.js.map

package/components/global/localNav/localNav.js

@@ -63,7 +63,7 @@ nav {
   nav {
     position: fixed;
     z-index: var(--kd-z-local-nav);
-    top: calc(var(--kd-header-height) + 8px + 8px);
+    top: var(--kd-local-nav-offset-top);
     left: 8px;
     bottom: 8px;
     padding-top: 8px;

package/components/global/uiShell/uiShell.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t,b as a,c as l,d as i}from"../../../vendor/tslib-Ac8XvvSX.js";import{i as s,t as n,r as o,o as r}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{x as d}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as c}from"../../../vendor/lit-element-DxLLCKb1.js";var h=s`*,
+import{_ as e,a as t,b as a,c as s,d as l}from"../../../vendor/tslib-Ac8XvvSX.js";import{i,t as n,r as o,o as r}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{x as d}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as c}from"../../../vendor/lit-element-DxLLCKb1.js";var h=i`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -12,12 +12,12 @@ import{_ as e,a as t,b as a,c as l,d as i}from"../../../vendor/tslib-Ac8XvvSX.js
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  padding-top: var(--kd-header-height);
+  padding-top: var(--kd-header-reserved-space);
   box-sizing: border-box;
 }
 @media (min-width: 42rem) {
   :host {
-    padding-top: calc(var(--kd-header-height) + 8px);
+    padding-top: var(--kd-header-reserved-space);
   }
 }
 
@@ -33,13 +33,13 @@ import{_ as e,a as t,b as a,c as l,d as i}from"../../../vendor/tslib-Ac8XvvSX.js
 
 @media (min-width: 42rem) {
   ::slotted(main.has-local-nav) {
-    margin-left: calc(var(--kd-local-nav-width) + 8px);
+    margin-left: var(--kd-local-nav-reserved-space);
   }
 }
 
 @media (min-width: 42rem) {
   ::slotted(main.pinned) {
-    margin-left: calc(var(--kd-local-nav-width-expanded) + 8px);
+    margin-left: var(--kd-local-nav-expanded-reserved-space);
   }
 }
 
@@ -49,13 +49,13 @@ import{_ as e,a as t,b as a,c as l,d as i}from"../../../vendor/tslib-Ac8XvvSX.js
 
 @media (min-width: 42rem) {
   ::slotted(kyn-footer.has-local-nav) {
-    margin-left: calc(var(--kd-local-nav-width) + 8px);
+    margin-left: var(--kd-local-nav-reserved-space);
   }
 }
 
 @media (min-width: 42rem) {
   ::slotted(kyn-footer.pinned) {
-    margin-left: calc(var(--kd-local-nav-width-expanded) + 8px);
+    margin-left: var(--kd-local-nav-expanded-reserved-space);
   }
-}`;let m=(()=>{var s,m,v,p;let f,E,_,g,u,k,b=[n("kyn-ui-shell")],x=[],y=c,w=[],L=[],N=[],S=[],j=[],M=[],W=[],U=[];return E=class extends y{get _headerEl(){return l(this,s,"f")}set _headerEl(e){i(this,s,e,"f")}get _localNavEl(){return l(this,m,"f")}set _localNavEl(e){i(this,m,e,"f")}get _footerEl(){return l(this,v,"f")}set _footerEl(e){i(this,v,e,"f")}get _mainEl(){return l(this,p,"f")}set _mainEl(e){i(this,p,e,"f")}render(){return d` <slot @slotchange=${this.handleSlotChange}></slot> `}firstUpdated(){if(this._localNavEl.length){const e=this._localNavEl[0],t=this._mainEl[0];e.addEventListener("on-toggle",(e=>{e.detail.pinned?t.classList.add("pinned"):t.classList.remove("pinned"),this._footerEl.length&&(e.detail.pinned?this._footerEl[0].classList.add("pinned"):this._footerEl[0].classList.remove("pinned"))}))}}handleSlotChange(){const e=this._mainEl[0];if(this._localNavEl.length){const t=this._localNavEl[0];e.classList.add("has-local-nav"),t.pinned?e.classList.add("pinned"):e.classList.remove("pinned"),this._footerEl.length&&(this._footerEl[0].classList.add("has-local-nav"),t.pinned?this._footerEl[0].classList.add("pinned"):this._footerEl[0].classList.remove("pinned"))}else e.classList.remove("has-local-nav"),e.classList.remove("pinned"),this._footerEl.length&&this._footerEl[0].classList.remove("pinned");this.requestUpdate()}constructor(){super(...arguments),s.set(this,a(this,w,void 0)),m.set(this,(a(this,L),a(this,N,void 0))),v.set(this,(a(this,S),a(this,j,void 0))),p.set(this,(a(this,M),a(this,W,void 0))),a(this,U)}},s=new WeakMap,m=new WeakMap,v=new WeakMap,p=new WeakMap,e(E,"UiShell"),(()=>{var e;const a="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=y[Symbol.metadata])&&void 0!==e?e:null):void 0;_=[r({selector:"kyn-header"})],g=[r({selector:"kyn-local-nav"})],u=[r({selector:"kyn-footer"})],k=[r({selector:"main"})],t(E,null,_,{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:a},w,L),t(E,null,g,{kind:"accessor",name:"_localNavEl",static:!1,private:!1,access:{has:e=>"_localNavEl"in e,get:e=>e._localNavEl,set:(e,t)=>{e._localNavEl=t}},metadata:a},N,S),t(E,null,u,{kind:"accessor",name:"_footerEl",static:!1,private:!1,access:{has:e=>"_footerEl"in e,get:e=>e._footerEl,set:(e,t)=>{e._footerEl=t}},metadata:a},j,M),t(E,null,k,{kind:"accessor",name:"_mainEl",static:!1,private:!1,access:{has:e=>"_mainEl"in e,get:e=>e._mainEl,set:(e,t)=>{e._mainEl=t}},metadata:a},W,U),t(null,f={value:E},b,{kind:"class",name:E.name,metadata:a},null,x),E=f.value,a&&Object.defineProperty(E,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a})})(),E.styles=o(h),a(E,x),E})();export{m as UiShell};
+}`;let m=(()=>{var i,m,v,p;let f,E,_,g,u,k,b=[n("kyn-ui-shell")],y=[],x=c,L=[],w=[],N=[],S=[],j=[],M=[],W=[],U=[];return E=class extends x{get _headerEl(){return s(this,i,"f")}set _headerEl(e){l(this,i,e,"f")}get _localNavEl(){return s(this,m,"f")}set _localNavEl(e){l(this,m,e,"f")}get _footerEl(){return s(this,v,"f")}set _footerEl(e){l(this,v,e,"f")}get _mainEl(){return s(this,p,"f")}set _mainEl(e){l(this,p,e,"f")}render(){return d` <slot @slotchange=${this.handleSlotChange}></slot> `}firstUpdated(){if(this._localNavEl.length){const e=this._localNavEl[0],t=this._mainEl[0];e.addEventListener("on-toggle",(e=>{e.detail.pinned?t.classList.add("pinned"):t.classList.remove("pinned"),this._footerEl.length&&(e.detail.pinned?this._footerEl[0].classList.add("pinned"):this._footerEl[0].classList.remove("pinned"))}))}}handleSlotChange(){const e=this._mainEl[0];if(this._localNavEl.length){const t=this._localNavEl[0];e.classList.add("has-local-nav"),t.pinned?e.classList.add("pinned"):e.classList.remove("pinned"),this._footerEl.length&&(this._footerEl[0].classList.add("has-local-nav"),t.pinned?this._footerEl[0].classList.add("pinned"):this._footerEl[0].classList.remove("pinned"))}else e.classList.remove("has-local-nav"),e.classList.remove("pinned"),this._footerEl.length&&this._footerEl[0].classList.remove("pinned");this.requestUpdate()}constructor(){super(...arguments),i.set(this,a(this,L,void 0)),m.set(this,(a(this,w),a(this,N,void 0))),v.set(this,(a(this,S),a(this,j,void 0))),p.set(this,(a(this,M),a(this,W,void 0))),a(this,U)}},i=new WeakMap,m=new WeakMap,v=new WeakMap,p=new WeakMap,e(E,"UiShell"),(()=>{var e;const a="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=x[Symbol.metadata])&&void 0!==e?e:null):void 0;_=[r({selector:"kyn-header"})],g=[r({selector:"kyn-local-nav"})],u=[r({selector:"kyn-footer"})],k=[r({selector:"main"})],t(E,null,_,{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:a},L,w),t(E,null,g,{kind:"accessor",name:"_localNavEl",static:!1,private:!1,access:{has:e=>"_localNavEl"in e,get:e=>e._localNavEl,set:(e,t)=>{e._localNavEl=t}},metadata:a},N,S),t(E,null,u,{kind:"accessor",name:"_footerEl",static:!1,private:!1,access:{has:e=>"_footerEl"in e,get:e=>e._footerEl,set:(e,t)=>{e._footerEl=t}},metadata:a},j,M),t(E,null,k,{kind:"accessor",name:"_mainEl",static:!1,private:!1,access:{has:e=>"_mainEl"in e,get:e=>e._mainEl,set:(e,t)=>{e._mainEl=t}},metadata:a},W,U),t(null,f={value:E},b,{kind:"class",name:E.name,metadata:a},null,y),E=f.value,a&&Object.defineProperty(E,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a})})(),E.styles=o(h),a(E,y),E})();export{m as UiShell};
 //# sourceMappingURL=uiShell.js.map

package/components/reusable/notification/notificationContainer.js

@@ -1,4 +1,4 @@
-import{_ as t,a as o,b as i,c as e,d as a}from"../../../vendor/tslib-Ac8XvvSX.js";import{i as n,t as r,r as m,n as s}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{x as l}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as c}from"../../../vendor/lit-element-DxLLCKb1.js";var d=n`*,
+import{_ as t,a as e,b as o,c as i,d as a}from"../../../vendor/tslib-Ac8XvvSX.js";import{i as n,t as r,r as s,n as m}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{x as c}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as l}from"../../../vendor/lit-element-DxLLCKb1.js";var d=n`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -14,13 +14,13 @@ import{_ as t,a as o,b as i,c as e,d as a}from"../../../vendor/tslib-Ac8XvvSX.js
 
 .notification-container {
   position: fixed;
-  top: calc(var(--kd-header-height) + 9px);
+  top: calc(var(--kd-header-reserved-space) + 8px);
   padding: 9px;
   right: 12px;
   width: auto;
   min-width: 288px;
   overflow-y: auto;
-  max-height: calc(100vh - var(--kd-header-height) - 32px);
+  max-height: calc(100vh - var(--kd-header-reserved-space) - 32px);
   z-index: 999999;
 }
 .notification-container.bottom {
@@ -36,15 +36,15 @@ import{_ as t,a as o,b as i,c as e,d as a}from"../../../vendor/tslib-Ac8XvvSX.js
   .notification-container {
     min-width: 440px;
     right: 32px;
-    max-height: calc(100vh - var(--kd-header-height) - 64px);
+    max-height: calc(100vh - var(--kd-header-reserved-space) - 64px);
   }
 }
 
 .notification-container ::slotted(kyn-notification) {
   margin-bottom: 16px;
-}`;let h=(()=>{var n;let h,b,p,f=[r("kyn-notification-container")],v=[],u=c,x=[],g=[];return b=class extends u{get bottom(){return e(this,n,"f")}set bottom(t){a(this,n,t,"f")}render(){return l`
+}`;let p=(()=>{var n;let p,b,h,v=[r("kyn-notification-container")],f=[],u=l,x=[],g=[];return b=class extends u{get bottom(){return i(this,n,"f")}set bottom(t){a(this,n,t,"f")}render(){return c`
       <div class="notification-container ${this.bottom?"bottom":""}">
         <slot></slot>
       </div>
-    `}constructor(){super(...arguments),n.set(this,i(this,x,!1)),i(this,g)}},n=new WeakMap,t(b,"NotificationContainer"),(()=>{var t;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(t=u[Symbol.metadata])&&void 0!==t?t:null):void 0;p=[s({type:Boolean})],o(b,null,p,{kind:"accessor",name:"bottom",static:!1,private:!1,access:{has:t=>"bottom"in t,get:t=>t.bottom,set:(t,o)=>{t.bottom=o}},metadata:i},x,g),o(null,h={value:b},f,{kind:"class",name:b.name,metadata:i},null,v),b=h.value,i&&Object.defineProperty(b,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),b.styles=m(d),i(b,v),b})();export{h as NotificationContainer};
+    `}constructor(){super(...arguments),n.set(this,o(this,x,!1)),o(this,g)}},n=new WeakMap,t(b,"NotificationContainer"),(()=>{var t;const o="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(t=u[Symbol.metadata])&&void 0!==t?t:null):void 0;h=[m({type:Boolean})],e(b,null,h,{kind:"accessor",name:"bottom",static:!1,private:!1,access:{has:t=>"bottom"in t,get:t=>t.bottom,set:(t,e)=>{t.bottom=e}},metadata:o},x,g),e(null,p={value:b},v,{kind:"class",name:b.name,metadata:o},null,f),b=p.value,o&&Object.defineProperty(b,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:o})})(),b.styles=s(d),o(b,f),b})();export{p as NotificationContainer};
 //# sourceMappingURL=notificationContainer.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "2.68.2",
+  "version": "2.68.3",
   "description": "Shidoka Web Components for Applications",
   "license": "MIT",
   "main": "index.js",
@@ -28,7 +28,7 @@
     "prepare": "npx husky install"
   },
   "dependencies": {
-    "@kyndryl-design-system/shidoka-foundation": "^2.7.5",
+    "@kyndryl-design-system/shidoka-foundation": "^2.8.0",
     "@kyndryl-design-system/shidoka-icons": "^2.14.1",
     "@lit/context": "^1.1.0",
     "deepmerge-ts": "^7.1.0",