@kyndryl-design-system/shidoka-applications 1.7.0 → 1.8.0

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

@@ -6,7 +6,7 @@ import '@kyndryl-design-system/shidoka-foundation/components/icon';
  * @fires on-root-link-click - Captures the logo link click event and emits the original event details.
  * @slot unnamed - The default slot for all empty space right of the logo/title.
  * @slot logo - Slot for the logo, will overwrite the default logo.
- * @slot left - Slot left of the logo, intended for a header panel.
+ * @slot left - Slot left of the logo, intended for the header nav.
  */
 export declare class Header extends LitElement {
     static styles: import("lit").CSSResultGroup;
@@ -14,15 +14,6 @@ export declare class Header extends LitElement {
     rootUrl: string;
     /** App title text next to logo.  Hidden on smaller screens. */
     appTitle: string;
-    /** The breakpoint (in px) to convert the nav to a flyout menu for small screens. */
-    breakpoint: number;
-    /** Adds a 1px shadow to the bottom of the header, for contrast with  white backgrounds. */
-    divider: boolean;
-    /**
-     * Determines if menu should be a flyout or inline depending on screen size.
-     * @ignore
-     */
-    breakpointHit: boolean;
     /** Small screen header nav visibility.
      * @ignore
      */
@@ -40,14 +31,8 @@ export declare class Header extends LitElement {
      */
     leftEls: any;
     render(): import("lit-html").TemplateResult<1>;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     private handleSlotChange;
-    private handleMenuClickOut;
-    private testBreakpoint;
     private handleRootLinkClick;
-    private toggleNavMenu;
-    private emitMenuToggle;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAWvC,OAAO,2DAA2D,CAAC;AAInE;;;;;;;GAOG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,+BAAc;IAEpC,6EAA6E;IAE7E,OAAO,SAAO;IAEd,+DAA+D;IAE/D,QAAQ,SAAM;IAEd,oFAAoF;IAEpF,UAAU,SAAO;IAEjB,2FAA2F;IAE3F,OAAO,UAAS;IAEhB;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,MAAM,EAAG,GAAG,CAAC;IAEb;;OAEG;IAEH,gBAAgB,EAAG,GAAG,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IA2CN,iBAAiB;IAcjB,oBAAoB;IAa7B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,cAAc;CAMvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAC;KACtB;CACF"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;;;GAOG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,+BAAc;IAEpC,6EAA6E;IAE7E,OAAO,SAAO;IAEd,+DAA+D;IAE/D,QAAQ,SAAM;IAEd;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,MAAM,EAAG,GAAG,CAAC;IAEb;;OAEG;IAEH,gBAAgB,EAAG,GAAG,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IA4Bf,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,mBAAmB;CAM5B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAC;KACtB;CACF"}

package/components/global/header/header.js

@@ -1,5 +1,5 @@
-import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as l}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import{unsafeHTML as d}from'./../../../external/lit-html/directives/unsafe-html.js';import{debounce as a}from"../../../common/helpers/helpers.js";import m from"./header.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import p from'./../../../external/@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg.js';import c from'./../../../external/@carbon/icons/es/overflow-menu--vertical/24.js';let h=class extends o{constructor(){super(...arguments),this.rootUrl="/",this.appTitle="",this.breakpoint=672,this.divider=!1,this.breakpointHit=!1,this.menuOpen=!1}render(){const e={header:!0,"breakpoint-hit":this.breakpointHit,divider:this.divider,"left-slotted":this.leftEls.length};return t`
-      <header class="${r(e)}">
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as i}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as r}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as n}from'./../../../external/lit-html/directives/class-map.js';import{unsafeHTML as a}from'./../../../external/lit-html/directives/unsafe-html.js';import d from"./header.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import m from'./../../../external/@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg.js';let p=class extends o{constructor(){super(...arguments),this.rootUrl="/",this.appTitle="",this.menuOpen=!1}render(){const e={header:!0,"left-slotted":this.leftEls.length};return t`
+      <header class="${n(e)}">
         <slot name="left" @slotchange=${this.handleSlotChange}></slot>
         <a
           href="${this.rootUrl}"
@@ -7,7 +7,7 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
           @click="${e=>this.handleRootLinkClick(e)}"
         >
           <slot name="logo" @slotchange=${this.handleSlotChange}>
-            ${d(p)}
+            ${a(m)}
           </slot>
 
           <span class="title">${this.appTitle}</span>
@@ -15,18 +15,7 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
 
         <div class="header__right">
           <slot @slotchange=${this.handleSlotChange}></slot>
-
-          ${!this.breakpointHit&&this.navEls.length?t`
-                <div class="menu">
-                  <button
-                    class="menu-button interactive"
-                    @click=${()=>this.toggleNavMenu()}
-                  >
-                    <kd-icon .icon=${c}></kd-icon>
-                  </button>
-                </div>
-              `:null}
         </div>
       </header>
-    `}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleMenuClickOut(e))),this.testBreakpoint(),null===window||void 0===window||window.addEventListener("resize",a((()=>{this.testBreakpoint()})))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleMenuClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",a((()=>{this.testBreakpoint()}))),super.disconnectedCallback()}handleSlotChange(){this.requestUpdate()}handleMenuClickOut(e){var t;const o=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".menu-button");e.composedPath().includes(this.navEls[0])||e.composedPath().includes(o)||(this.menuOpen=!1,this.emitMenuToggle())}testBreakpoint(){(null===window||void 0===window?void 0:window.innerWidth)>=this.breakpoint?this.breakpointHit=!0:this.breakpointHit=!1}handleRootLinkClick(e){const t=new CustomEvent("on-root-link-click",{detail:{origEvent:e}});this.dispatchEvent(t)}toggleNavMenu(){this.menuOpen=!this.menuOpen,this.emitMenuToggle()}emitMenuToggle(){const e=new CustomEvent("on-menu-toggle",{detail:this.menuOpen});this.dispatchEvent(e)}};h.styles=m,e([s({type:String})],h.prototype,"rootUrl",void 0),e([s({type:String})],h.prototype,"appTitle",void 0),e([s({type:Number})],h.prototype,"breakpoint",void 0),e([s({type:Boolean})],h.prototype,"divider",void 0),e([n()],h.prototype,"breakpointHit",void 0),e([n()],h.prototype,"menuOpen",void 0),e([l({selector:"kyn-header-nav"})],h.prototype,"navEls",void 0),e([l()],h.prototype,"assignedElements",void 0),e([l({slot:"left"})],h.prototype,"leftEls",void 0),h=e([i("kyn-header")],h);export{h as Header};
+    `}handleSlotChange(){this.requestUpdate()}handleRootLinkClick(e){const t=new CustomEvent("on-root-link-click",{detail:{origEvent:e}});this.dispatchEvent(t)}};p.styles=d,e([l({type:String})],p.prototype,"rootUrl",void 0),e([l({type:String})],p.prototype,"appTitle",void 0),e([i()],p.prototype,"menuOpen",void 0),e([r({selector:"kyn-header-nav"})],p.prototype,"navEls",void 0),e([r()],p.prototype,"assignedElements",void 0),e([r({slot:"left"})],p.prototype,"leftEls",void 0),p=e([s("kyn-header")],p);export{p as Header};
 //# sourceMappingURL=header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"header.js","sources":["../../../../src/components/global/header/header.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderScss from './header.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport logo from '@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg';\nimport overflowIcon from '@carbon/icons/es/overflow-menu--vertical/24';\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.\n * @fires on-root-link-click - Captures the logo link click event and emits the original event details.\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 a header panel.\n */\n@customElement('kyn-header')\nexport class Header extends LitElement {\n  static override styles = HeaderScss;\n\n  /** URL for the header logo link. Should target the application home page. */\n  @property({ type: String })\n  rootUrl = '/';\n\n  /** App title text next to logo.  Hidden on smaller screens. */\n  @property({ type: String })\n  appTitle = '';\n\n  /** The breakpoint (in px) to convert the nav to a flyout menu for small screens. */\n  @property({ type: Number })\n  breakpoint = 672;\n\n  /** Adds a 1px shadow to the bottom of the header, for contrast with  white backgrounds. */\n  @property({ type: Boolean })\n  divider = false;\n\n  /**\n   * Determines if menu should be a flyout or inline depending on screen size.\n   * @ignore\n   */\n  @state()\n  breakpointHit = false;\n\n  /** Small screen header nav visibility.\n   * @ignore\n   */\n  @state()\n  menuOpen = false;\n\n  /** Queries for slotted header-nav.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-header-nav' })\n  navEls!: any;\n\n  /** Queries for all slotted elements.\n   * @internal\n   */\n  @queryAssignedElements()\n  assignedElements!: any;\n\n  /** Queries for elements in left slot.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'left' })\n  leftEls!: any;\n\n  override render() {\n    const classes = {\n      header: true,\n      'breakpoint-hit': this.breakpointHit,\n      divider: this.divider,\n      'left-slotted': this.leftEls.length,\n    };\n\n    return html`\n      <header class=\"${classMap(classes)}\">\n        <slot name=\"left\" @slotchange=${this.handleSlotChange}></slot>\n        <a\n          href=\"${this.rootUrl}\"\n          class=\"logo-link interactive\"\n          @click=\"${(e: Event) => this.handleRootLinkClick(e)}\"\n        >\n          <slot name=\"logo\" @slotchange=${this.handleSlotChange}>\n            ${unsafeHTML(logo)}\n          </slot>\n\n          <span class=\"title\">${this.appTitle}</span>\n        </a>\n\n        <div class=\"header__right\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n\n          ${!this.breakpointHit && this.navEls.length\n            ? html`\n                <div class=\"menu\">\n                  <button\n                    class=\"menu-button interactive\"\n                    @click=${() => this.toggleNavMenu()}\n                  >\n                    <kd-icon .icon=${overflowIcon}></kd-icon>\n                  </button>\n                </div>\n              `\n            : null}\n        </div>\n      </header>\n    `;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this.handleMenuClickOut(e));\n\n    this.testBreakpoint();\n    window?.addEventListener(\n      'resize',\n      debounce(() => {\n        this.testBreakpoint();\n      })\n    );\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleMenuClickOut(e));\n\n    window?.removeEventListener(\n      'resize',\n      debounce(() => {\n        this.testBreakpoint();\n      })\n    );\n\n    super.disconnectedCallback();\n  }\n\n  private handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  private handleMenuClickOut(e: any) {\n    const button = this.shadowRoot?.querySelector('.menu-button');\n\n    if (\n      !e.composedPath().includes(this.navEls[0]) &&\n      !e.composedPath().includes(button)\n    ) {\n      this.menuOpen = false;\n      this.emitMenuToggle();\n    }\n  }\n\n  private testBreakpoint() {\n    if (window?.innerWidth >= this.breakpoint) {\n      this.breakpointHit = true;\n    } else {\n      this.breakpointHit = false;\n    }\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 toggleNavMenu() {\n    this.menuOpen = !this.menuOpen;\n\n    this.emitMenuToggle();\n  }\n\n  private emitMenuToggle() {\n    const event = new CustomEvent('on-menu-toggle', {\n      detail: this.menuOpen,\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header': Header;\n  }\n}\n"],"names":["Header","LitElement","constructor","this","rootUrl","appTitle","breakpoint","divider","breakpointHit","menuOpen","render","classes","header","leftEls","length","html","classMap","handleSlotChange","e","handleRootLinkClick","unsafeHTML","logo","navEls","toggleNavMenu","overflowIcon","connectedCallback","super","document","addEventListener","handleMenuClickOut","testBreakpoint","window","debounce","disconnectedCallback","removeEventListener","requestUpdate","button","_a","shadowRoot","querySelector","composedPath","includes","emitMenuToggle","innerWidth","event","CustomEvent","detail","origEvent","dispatchEvent","styles","HeaderScss","__decorate","property","type","String","prototype","Number","Boolean","state","queryAssignedElements","selector","slot","customElement"],"mappings":"orCAwBO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAKLC,KAAOC,QAAG,IAIVD,KAAQE,SAAG,GAIXF,KAAUG,WAAG,IAIbH,KAAOI,SAAG,EAOVJ,KAAaK,eAAG,EAMhBL,KAAQM,UAAG,CAqIZ,CAjHU,MAAAC,GACP,MAAMC,EAAU,CACdC,QAAQ,EACR,iBAAkBT,KAAKK,cACvBD,QAASJ,KAAKI,QACd,eAAgBJ,KAAKU,QAAQC,QAG/B,OAAOC,CAAI;uBACQC,EAASL;wCACQR,KAAKc;;kBAE3Bd,KAAKC;;oBAEFc,GAAaf,KAAKgB,oBAAoBD;;0CAEjBf,KAAKc;cACjCG,EAAWC;;;gCAGOlB,KAAKE;;;;8BAIPF,KAAKc;;aAEtBd,KAAKK,eAAiBL,KAAKmB,OAAOR,OACjCC,CAAI;;;;6BAIW,IAAMZ,KAAKoB;;qCAEHC;;;gBAIvB;;;KAIX,CAEQ,iBAAAC,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUV,GAAMf,KAAK0B,mBAAmBX,KAElEf,KAAK2B,iBACL,OAAAC,aAAA,IAAAA,QAAAA,OAAQH,iBACN,SACAI,GAAS,KACP7B,KAAK2B,gBAAgB,IAG1B,CAEQ,oBAAAG,GACPN,SAASO,oBAAoB,SAAUhB,GAAMf,KAAK0B,mBAAmBX,KAErE,OAAAa,aAAA,IAAAA,QAAAA,OAAQG,oBACN,SACAF,GAAS,KACP7B,KAAK2B,gBAAgB,KAIzBJ,MAAMO,sBACP,CAEO,gBAAAhB,GACNd,KAAKgC,eACN,CAEO,kBAAAN,CAAmBX,SACzB,MAAMkB,EAAwB,QAAfC,EAAAlC,KAAKmC,kBAAU,IAAAD,OAAA,EAAAA,EAAEE,cAAc,gBAG3CrB,EAAEsB,eAAeC,SAAStC,KAAKmB,OAAO,KACtCJ,EAAEsB,eAAeC,SAASL,KAE3BjC,KAAKM,UAAW,EAChBN,KAAKuC,iBAER,CAEO,cAAAZ,IACF,OAAAC,aAAA,IAAAA,YAAA,EAAAA,OAAQY,aAAcxC,KAAKG,WAC7BH,KAAKK,eAAgB,EAErBL,KAAKK,eAAgB,CAExB,CAEO,mBAAAW,CAAoBD,GAC1B,MAAM0B,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,OAAQ,CAAEC,UAAW7B,KAEvBf,KAAK6C,cAAcJ,EACpB,CAEO,aAAArB,GACNpB,KAAKM,UAAYN,KAAKM,SAEtBN,KAAKuC,gBACN,CAEO,cAAAA,GACN,MAAME,EAAQ,IAAIC,YAAY,iBAAkB,CAC9CC,OAAQ3C,KAAKM,WAEfN,KAAK6C,cAAcJ,EACpB,GAjKe5C,EAAMiD,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJtD,EAAAuD,UAAA,eAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJtD,EAAAuD,UAAA,gBAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACDxD,EAAAuD,UAAA,kBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACFzD,EAAAuD,UAAA,eAAA,GAOhBJ,EAAA,CADCO,KACqB1D,EAAAuD,UAAA,qBAAA,GAMtBJ,EAAA,CADCO,KACgB1D,EAAAuD,UAAA,gBAAA,GAMjBJ,EAAA,CADCQ,EAAsB,CAAEC,SAAU,oBACtB5D,EAAAuD,UAAA,cAAA,GAMbJ,EAAA,CADCQ,KACsB3D,EAAAuD,UAAA,wBAAA,GAMvBJ,EAAA,CADCQ,EAAsB,CAAEE,KAAM,UACjB7D,EAAAuD,UAAA,eAAA,GAhDHvD,EAAMmD,EAAA,CADlBW,EAAc,eACF9D"}
+{"version":3,"file":"header.js","sources":["../../../../src/components/global/header/header.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport HeaderScss from './header.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\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.\n * @fires on-root-link-click - Captures the logo link click event and emits the original event details.\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 */\n@customElement('kyn-header')\nexport class Header extends LitElement {\n  static override styles = HeaderScss;\n\n  /** URL for the header logo link. Should target the application home page. */\n  @property({ type: String })\n  rootUrl = '/';\n\n  /** App title text next to logo.  Hidden on smaller screens. */\n  @property({ type: String })\n  appTitle = '';\n\n  /** Small screen header nav visibility.\n   * @ignore\n   */\n  @state()\n  menuOpen = false;\n\n  /** Queries for slotted header-nav.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-header-nav' })\n  navEls!: any;\n\n  /** Queries for all slotted elements.\n   * @internal\n   */\n  @queryAssignedElements()\n  assignedElements!: any;\n\n  /** Queries for elements in left slot.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'left' })\n  leftEls!: any;\n\n  override render() {\n    const classes = {\n      header: true,\n      'left-slotted': this.leftEls.length,\n    };\n\n    return html`\n      <header class=\"${classMap(classes)}\">\n        <slot name=\"left\" @slotchange=${this.handleSlotChange}></slot>\n        <a\n          href=\"${this.rootUrl}\"\n          class=\"logo-link interactive\"\n          @click=\"${(e: Event) => this.handleRootLinkClick(e)}\"\n        >\n          <slot name=\"logo\" @slotchange=${this.handleSlotChange}>\n            ${unsafeHTML(logo)}\n          </slot>\n\n          <span class=\"title\">${this.appTitle}</span>\n        </a>\n\n        <div class=\"header__right\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </div>\n      </header>\n    `;\n  }\n\n  private handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  private handleRootLinkClick(e: Event) {\n    const event = new CustomEvent('on-root-link-click', {\n      detail: { origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header': Header;\n  }\n}\n"],"names":["Header","LitElement","constructor","this","rootUrl","appTitle","menuOpen","render","classes","header","leftEls","length","html","classMap","handleSlotChange","e","handleRootLinkClick","unsafeHTML","logo","requestUpdate","event","CustomEvent","detail","origEvent","dispatchEvent","styles","HeaderScss","__decorate","property","type","String","prototype","state","queryAssignedElements","selector","slot","customElement"],"mappings":"kiCAsBO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAKLC,KAAOC,QAAG,IAIVD,KAAQE,SAAG,GAMXF,KAAQG,UAAG,CA0DZ,CAtCU,MAAAC,GACP,MAAMC,EAAU,CACdC,QAAQ,EACR,eAAgBN,KAAKO,QAAQC,QAG/B,OAAOC,CAAI;uBACQC,EAASL;wCACQL,KAAKW;;kBAE3BX,KAAKC;;oBAEFW,GAAaZ,KAAKa,oBAAoBD;;0CAEjBZ,KAAKW;cACjCG,EAAWC;;;gCAGOf,KAAKE;;;;8BAIPF,KAAKW;;;KAIhC,CAEO,gBAAAA,GACNX,KAAKgB,eACN,CAEO,mBAAAH,CAAoBD,GAC1B,MAAMK,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,OAAQ,CAAEC,UAAWR,KAEvBZ,KAAKqB,cAAcJ,EACpB,GAvEepB,EAAMyB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJ9B,EAAA+B,UAAA,eAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJ9B,EAAA+B,UAAA,gBAAA,GAMdJ,EAAA,CADCK,KACgBhC,EAAA+B,UAAA,gBAAA,GAMjBJ,EAAA,CADCM,EAAsB,CAAEC,SAAU,oBACtBlC,EAAA+B,UAAA,cAAA,GAMbJ,EAAA,CADCM,KACsBjC,EAAA+B,UAAA,wBAAA,GAMvBJ,EAAA,CADCM,EAAsB,CAAEE,KAAM,UACjBnC,EAAA+B,UAAA,eAAA,GAjCH/B,EAAM2B,EAAA,CADlBS,EAAc,eACFpC"}

package/components/global/header/header.scss.js

@@ -4,32 +4,59 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
   box-sizing: border-box;
 }
 
+:root {
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
+}
+
 .interactive {
   border: none;
   cursor: pointer;
   border-radius: 4px;
+  font: inherit;
   transition: background-color 150ms ease-out, color 150ms ease-out, outline-color 150ms ease-out;
-  background: var(--kd-color-background-ui-default);
+  background: transparent;
+  color: inherit;
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 .interactive:hover {
-  background: var(--kd-color-background-primary);
-  color: var(--kd-color-text-inversed);
-}
-.interactive:active {
-  background: var(--kd-color-background-primary-pressed);
-  color: var(--kd-color-text-inversed);
+  background-color: var(--kd-color-background-ui-soft);
+  color: var(--kd-color-text-primary-hover);
 }
 .interactive:focus {
   outline-color: var(--kd-color-border-focus);
+  background-color: var(--kd-color-background-ui-soft);
+  color: var(--kd-color-text-tertiary);
 }
-.interactive.active {
-  color: var(--kd-color-text-link);
-}
-.interactive.active:hover {
+.interactive:active {
+  background-color: var(--kd-color-background-primary-pressed);
   color: var(--kd-color-text-inversed);
 }
+.interactive[disabled] {
+  background-color: var(--kd-color-background-disabled) !important;
+  color: var(--kd-color-text-disabled) !important;
+  cursor: not-allowed !important;
+}
 
 .divider {
   box-shadow: 0 1px 0 var(--kd-color-border-light);
@@ -39,44 +66,48 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 .menu {
   position: relative;
 }
-.menu::after {
-  content: "";
-  display: block;
-  height: 4px;
-}
 .menu .interactive {
   position: relative;
   cursor: pointer;
 }
 .menu__content {
   position: fixed;
-  top: calc(var(--kd-header-height) - 4px);
-  border-top: 4px solid var(--kd-color-background-ui-default);
+  top: calc(var(--kd-header-height));
   right: 0;
   left: 0;
   bottom: 0;
   overflow-y: auto;
-  border-radius: 4px;
-  background: var(--kd-color-background-ui-soft);
+  overflow-x: hidden;
+  background: var(--kd-color-background-accent-subtle);
+  border-bottom: 4px solid var(--kd-color-border-accent-spruce-light);
   transition: visibility 0.15s, opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
   transform: translateY(-20px);
   visibility: hidden;
   opacity: 0;
   z-index: -1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 .menu__content.slotted {
-  padding: 4px;
+  padding: 8px;
 }
 @media (min-width: 42rem) {
   .menu__content {
     position: absolute;
+    top: calc(100% + 12px);
     right: 0;
     bottom: auto;
     left: auto;
     border-top: none;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    background: var(--kd-color-background-ui-soft);
+    box-shadow: 0px 2px 8px 0px rgba(61, 60, 60, 0.25);
     max-height: calc(100vh - var(--kd-header-height));
   }
+  .menu__content.left {
+    left: 0;
+    right: auto;
+  }
 }
 .menu__content strong {
   font-weight: 500;
@@ -86,41 +117,81 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
   left: 0;
 }
 .menu.open .interactive {
-  color: var(--kd-color-text-link);
-  background: var(--kd-color-background-ui-soft);
-}
-.menu.open .interactive:hover {
-  background: var(--kd-color-background-primary);
   color: var(--kd-color-text-inversed);
+  background-color: var(--kd-color-background-focus);
+}
+.menu.open .interactive:active {
+  background-color: var(--kd-color-background-primary-pressed);
 }
 .menu.open .menu__content {
   visibility: visible;
   opacity: 1;
-  transform: translate3d(0px, 0px, 0px);
+  transform: none;
   z-index: initial;
 }
 
-:root {
-  --kd-current-breakpoint: sm;
+.go-back {
+  font-family: var(--kd-font-family-secondary);
+  font-size: var(--kd-font-size-utility-2-sm);
+  line-height: var(--kd-line-height-utility-2-sm);
+  font-weight: var(--kd-font-weight-regular);
+  letter-spacing: var(--kd-letter-spacing-5);
+  display: flex;
+  position: relative;
+  align-items: center;
+  padding: 12px 16px 12px 8px;
+  cursor: pointer;
+  background: none;
+  border: none;
+  margin: 0;
+  border-radius: 4px;
+  width: 100%;
+  transition: background-color 150ms ease-out, color 150ms ease-out, outline-color 150ms ease-out;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  color: var(--kd-color-text-secondary);
 }
 @media (min-width: 42rem) {
-  :root {
-    --kd-current-breakpoint: md;
+  .go-back {
+    font-size: var(--kd-font-size-utility-2-md);
+    line-height: var(--kd-line-height-utility-2-md);
   }
 }
 @media (min-width: 74rem) {
-  :root {
-    --kd-current-breakpoint: lg;
+  .go-back {
+    font-size: var(--kd-font-size-utility-2-lg);
+    line-height: var(--kd-line-height-utility-2-lg);
   }
 }
 @media (min-width: 82rem) {
-  :root {
-    --kd-current-breakpoint: xl;
+  .go-back {
+    font-size: var(--kd-font-size-utility-2-xlg);
+    line-height: var(--kd-line-height-utility-2-xlg);
   }
 }
 @media (min-width: 99rem) {
-  :root {
-    --kd-current-breakpoint: max;
+  .go-back {
+    font-size: var(--kd-font-size-utility-2-max);
+    line-height: var(--kd-line-height-utility-2-max);
+  }
+}
+.go-back kd-icon {
+  margin-right: 16px;
+}
+.go-back:hover {
+  background: var(--kd-color-background-primary);
+  color: var(--kd-color-text-inversed);
+}
+.go-back:active {
+  background: var(--kd-color-background-primary-pressed);
+  color: var(--kd-color-text-inversed);
+}
+.go-back:focus {
+  outline-color: var(--kd-color-border-focus);
+}
+@media (min-width: 42rem) {
+  .go-back {
+    display: none;
   }
 }
 
@@ -135,13 +206,11 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
   right: 0;
   left: 0;
   height: var(--kd-header-height);
-  background: var(--kd-color-background-ui-default);
+  background: var(--kd-color-neutral-webgray);
+  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
   padding: 4px 8px;
   z-index: var(--kd-z-header);
 }
-.header.divider {
-  box-shadow: 0 1px 0 var(--kd-color-border-light);
-}
 @media screen and (min-width: 42rem) {
   .header {
     padding: 4px 24px;
@@ -152,6 +221,8 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 .header__right {
   display: flex;
+  align-items: center;
+  gap: 24px;
   margin-left: auto;
 }
 
@@ -159,7 +230,6 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
   display: flex;
   align-items: center;
   padding: 0 8px;
-  color: var(--kd-color-text-link);
   text-decoration: none;
 }
 .logo-link:hover {
@@ -181,11 +251,12 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
   line-height: var(--kd-line-height-utility-1-sm);
   font-weight: var(--kd-font-weight-regular);
   letter-spacing: var(--kd-letter-spacing-5);
+  font-weight: 300;
   display: none;
   margin-top: -3px;
-  margin-left: 8px;
-  padding-left: 8px;
-  border-left: 1px solid var(--kd-color-border-primary);
+  margin-left: 16px;
+  padding-left: 16px;
+  border-left: 1px solid var(--kd-color-border-light);
 }
 @media (min-width: 42rem) {
   .title {
@@ -211,8 +282,10 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
     line-height: var(--kd-line-height-utility-1-max);
   }
 }
-.breakpoint-hit .title {
-  display: inline;
+@media (min-width: 42rem) {
+  .title {
+    display: inline;
+  }
 }
 
 .menu-button {

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

@@ -1 +1 @@
-{"version":3,"file":"header.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"header.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+/**
+ * Header link category
+ * @slot unnamed - Slot for links.
+ */
+export declare class HeaderCategory extends LitElement {
+    static styles: import("lit").CSSResultGroup;
+    /** Link url. */
+    heading: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-header-category': HeaderCategory;
+    }
+}
+//# sourceMappingURL=headerCategory.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"headerCategory.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerCategory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;GAGG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,+BAAsB;IAE5C,gBAAgB;IAEhB,OAAO,SAAM;IAEJ,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,cAAc,CAAC;KACvC;CACF"}

package/components/global/header/headerCategory.js

@@ -0,0 +1,7 @@
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as r}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import i from"./headerCategory.scss.js";let l=class extends o{constructor(){super(...arguments),this.heading=""}render(){return t`
+      <div class="category">
+        <div class="heading">${this.heading}</div>
+        <slot></slot>
+      </div>
+    `}};l.styles=i,e([s({type:String})],l.prototype,"heading",void 0),l=e([r("kyn-header-category")],l);export{l as HeaderCategory};
+//# sourceMappingURL=headerCategory.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"headerCategory.js","sources":["../../../../src/components/global/header/headerCategory.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport HeaderCategoryScss from './headerCategory.scss';\n\n/**\n * Header link category\n * @slot unnamed - Slot for links.\n */\n@customElement('kyn-header-category')\nexport class HeaderCategory extends LitElement {\n  static override styles = HeaderCategoryScss;\n\n  /** Link url. */\n  @property({ type: String })\n  heading = '';\n\n  override render() {\n    return html`\n      <div class=\"category\">\n        <div class=\"heading\">${this.heading}</div>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-category': HeaderCategory;\n  }\n}\n"],"names":["HeaderCategory","LitElement","constructor","this","heading","render","html","styles","HeaderCategoryScss","__decorate","property","type","String","prototype","customElement"],"mappings":"0lBASO,IAAMA,EAAN,cAA6BC,EAA7B,WAAAC,uBAKLC,KAAOC,QAAG,EAUX,CARU,MAAAC,GACP,OAAOC,CAAI;;+BAEgBH,KAAKC;;;KAIjC,GAbeJ,EAAMO,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACLZ,EAAAa,UAAA,eAAA,GALFb,EAAcS,EAAA,CAD1BK,EAAc,wBACFd"}

package/components/global/header/headerCategory.scss.js

@@ -0,0 +1,68 @@
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as i}from'./../../../external/@lit/reactive-element/css-tag.js';var e=i`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:root {
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
+}
+
+:host {
+  display: block;
+}
+
+.heading {
+  font-family: var(--kd-font-family-secondary);
+  font-size: var(--kd-font-size-utility-2-sm);
+  line-height: var(--kd-line-height-utility-2-sm);
+  font-weight: var(--kd-font-weight-regular);
+  letter-spacing: var(--kd-letter-spacing-5);
+  font-weight: 500;
+  padding: 12px 16px 12px 8px;
+}
+@media (min-width: 42rem) {
+  .heading {
+    font-size: var(--kd-font-size-utility-2-md);
+    line-height: var(--kd-line-height-utility-2-md);
+  }
+}
+@media (min-width: 74rem) {
+  .heading {
+    font-size: var(--kd-font-size-utility-2-lg);
+    line-height: var(--kd-line-height-utility-2-lg);
+  }
+}
+@media (min-width: 82rem) {
+  .heading {
+    font-size: var(--kd-font-size-utility-2-xlg);
+    line-height: var(--kd-line-height-utility-2-xlg);
+  }
+}
+@media (min-width: 99rem) {
+  .heading {
+    font-size: var(--kd-font-size-utility-2-max);
+    line-height: var(--kd-line-height-utility-2-max);
+  }
+}`;export{e as default};
+//# sourceMappingURL=headerCategory.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"headerCategory.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+/**
+ * Header divider
+ */
+export declare class HeaderDivider extends LitElement {
+    static styles: import("lit").CSSResultGroup;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-header-divider': HeaderDivider;
+    }
+}
+//# sourceMappingURL=headerDivider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"headerDivider.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerDivider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;GAEG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,+BAAqB;IAElC,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}

package/components/global/header/headerDivider.js

@@ -0,0 +1,2 @@
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as m}from'./../../../external/lit-element/lit-element.js';import{customElement as r}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import s from"./headerDivider.scss.js";let l=class extends m{render(){return t` <hr /> `}};l.styles=s,l=e([r("kyn-header-divider")],l);export{l as HeaderDivider};
+//# sourceMappingURL=headerDivider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"headerDivider.js","sources":["../../../../src/components/global/header/headerDivider.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport HeaderDividerScss from './headerDivider.scss';\n\n/**\n * Header divider\n */\n@customElement('kyn-header-divider')\nexport class HeaderDivider extends LitElement {\n  static override styles = HeaderDividerScss;\n\n  override render() {\n    return html` <hr /> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-divider': HeaderDivider;\n  }\n}\n"],"names":["HeaderDivider","LitElement","render","html","styles","HeaderDividerScss","__decorate","customElement"],"mappings":"2fAQO,IAAMA,EAAN,cAA4BC,EAGxB,MAAAC,GACP,OAAOC,CAAI,UACZ,GAJeH,EAAMI,OAAGC,EADdL,EAAaM,EAAA,CADzBC,EAAc,uBACFP"}

package/components/global/header/headerDivider.scss.js

@@ -0,0 +1,19 @@
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var o=e`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+}
+
+hr {
+  background: none;
+  border: none;
+  margin: 8px 0;
+  width: 100%;
+  height: 1px;
+  background: var(--kd-color-border-light);
+}`;export{o as default};
+//# sourceMappingURL=headerDivider.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"headerDivider.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import '@kyndryl-design-system/shidoka-foundation/components/icon';
 /**
  * Component for header flyout items.
  * @slot unnamed - Slot for flyout menu content.
@@ -12,28 +13,36 @@ export declare class HeaderFlyout extends LitElement {
     anchorLeft: boolean;
     /** Hides the arrow. */
     hideArrow: boolean;
-    /** Button assistive text, title + aria-label. */
+    /** Menu & button label. */
+    label: string;
+    /** Hide the label at the top of the flyout menu. */
+    hideMenuLabel: boolean;
+    /**
+     * DEPRECATED. Use `label` instead.
+     * Button assistive text, title + aria-label.
+     */
     assistiveText: string;
     /** Turns the button into a link. */
     href: string;
-    /**
-     * Determines if menu should be a small flyout or large flyout for small screens.
-     * @ignore
-     */
-    breakpointHit: boolean;
+    /** Text for mobile "Back" button. */
+    backText: string;
     /**
      * Queries any slotted HTML elements.
      * @ignore
      */
     slottedElements: Array<HTMLElement>;
+    /** Timeout function to delay modal close.
+     * @internal
+     */
+    timer: any;
     render(): import("lit-html").TemplateResult<1>;
+    private _handleBack;
     private handlePointerEnter;
     private handlePointerLeave;
     private handleClick;
     private handleClickOut;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private testBreakpoint;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"headerFlyout.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAavC;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAoB;IAE1C,yBAAyB;IAEzB,IAAI,UAAS;IAEb,mFAAmF;IAEnF,UAAU,UAAS;IAEnB,uBAAuB;IAEvB,SAAS,UAAS;IAElB,iDAAiD;IAEjD,aAAa,SAAM;IAEnB,oCAAoC;IAEpC,IAAI,SAAM;IAEV;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5B,MAAM;IA4Df,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IAMb,iBAAiB;IAcjB,oBAAoB;IAa7B,OAAO,CAAC,cAAc;CAMvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}
+{"version":3,"file":"headerFlyout.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAYvC,OAAO,2DAA2D,CAAC;AAEnE;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAoB;IAE1C,yBAAyB;IAEzB,IAAI,UAAS;IAEb,mFAAmF;IAEnF,UAAU,UAAS;IAEnB,uBAAuB;IAEvB,SAAS,UAAS;IAElB,2BAA2B;IAE3B,KAAK,SAAM;IAEX,oDAAoD;IAEpD,aAAa,UAAS;IAEtB;;;OAGG;IAEH,aAAa,SAAM;IAEnB,oCAAoC;IAEpC,IAAI,SAAM;IAEV,qCAAqC;IAErC,QAAQ,SAAU;IAElB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAErC;;OAEG;IAEH,KAAK,EAAE,GAAG,CAAC;IAEF,MAAM;IA8Ef,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IAMb,iBAAiB;IAMjB,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}