@kyndryl-design-system/shidoka-applications 2.70.11 → 2.71.0

package/components/global/header/header.js

@@ -1,4 +1,4 @@
-import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPrivateFieldGet as a,__classPrivateFieldSet as o}from"tslib";import{css as n,LitElement as r,unsafeCSS as l,html as s}from"lit";import{customElement as d,property as c,queryAssignedElements as h,state as m,query as g}from"lit/decorators.js";import{classMap as p}from"lit/directives/class-map.js";import{unsafeHTML as u}from"lit-html/directives/unsafe-html.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{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPrivateFieldGet as a,__classPrivateFieldSet as o}from"tslib";import{css as n,LitElement as r,unsafeCSS as l,html as s}from"lit";import{customElement as d,property as c,queryAssignedElements as h,state as m,query as p}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{unsafeHTML as u}from"lit-html/directives/unsafe-html.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;
@@ -98,8 +98,8 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
   overflow-y: auto;
   overflow-x: hidden;
   background: var(--kd-color-background-container-default);
-  transition: visibility 300ms, opacity 300ms ease-in-out, transform 300ms ease-in-out;
-  transform: translateY(-20px);
+  transition: visibility 120ms ease-out, opacity 120ms ease-out;
+  transform: none;
   visibility: hidden;
   opacity: 0;
   z-index: -1;
@@ -108,7 +108,7 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
   gap: 2px;
 }
 .menu__content.slotted {
-  padding: 8px;
+  padding: 8px 12px;
 }
 @media (min-width: 42rem) {
   .menu__content {
@@ -127,6 +127,9 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
     left: -12px;
     right: auto;
   }
+  .menu__content.categories-open {
+    box-shadow: none;
+  }
 }
 .menu__content strong {
   font-weight: var(--kd-font-weight-medium);
@@ -163,8 +166,8 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
   position: relative;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px;
-  height: 40px;
+  padding: 6px 12px 6px 8px;
+  height: 30px;
   cursor: pointer;
   background: none;
   border: none;
@@ -353,8 +356,8 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
   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,Y=[d("kyn-header")],F=[],N=r,R=[],q=[],H=[],P=[],A=[],B=[],D=[],G=[],I=[],J=[],K=[],Q=[],V=[],X=[],Z=[],ee=[];return S=class extends N{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 s`
-      <header class="${p(e)}">
+}`;let b=(()=>{var n,b,x,y,_,w,E,z;let O,S,T,C,L,U,$,j,M,W,F=[d("kyn-header")],N=[],Y=r,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 s`
+      <header class="${g(e)}">
         <slot name="left" @slotchange=${this.handleSlotChange}></slot>
 
         <a
@@ -380,5 +383,5 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
       </header>
 
       <div class="overlay"></div>
-    `}handleSlotChange(){this.requestUpdate()}handleRootLinkClick(e){const t=new CustomEvent("on-root-link-click",{detail:{origEvent:e}});this.dispatchEvent(t)}_handleNavToggle(e){this._navOpen=e.detail.open}_handleFlyoutsToggle(e){this._flyoutsOpen=e.detail.open||e.detail.childrenOpen}_handleScroll(){window.scrollY>0?this._headerEl.classList.add("scrolled"):this._headerEl.classList.remove("scrolled")}firstUpdated(){this._handleScroll()}connectedCallback(){super.connectedCallback(),document.addEventListener("on-nav-toggle",(e=>this._handleNavToggle(e))),document.addEventListener("on-flyouts-toggle",(e=>this._handleFlyoutsToggle(e))),window.addEventListener("scroll",this._debounceScroll)}disconnectedCallback(){document.removeEventListener("on-nav-toggle",(e=>this._handleNavToggle(e))),document.removeEventListener("on-flyouts-toggle",(e=>this._handleFlyoutsToggle(e))),window.removeEventListener("scroll",this._debounceScroll),super.disconnectedCallback()}},n=new WeakMap,b=new WeakMap,x=new WeakMap,y=new WeakMap,_=new WeakMap,w=new WeakMap,E=new WeakMap,z=new WeakMap,e(S,"Header"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=N[Symbol.metadata])&&void 0!==e?e:null):void 0;T=[c({type:String})],C=[c({type:String})],L=[h({selector:"kyn-header-nav"})],U=[h()],$=[h({slot:"left"})],j=[m()],M=[m()],W=[g("header")],t(S,null,T,{kind:"accessor",name:"rootUrl",static:!1,private:!1,access:{has:e=>"rootUrl"in e,get:e=>e.rootUrl,set:(e,t)=>{e.rootUrl=t}},metadata:i},R,q),t(S,null,C,{kind:"accessor",name:"appTitle",static:!1,private:!1,access:{has:e=>"appTitle"in e,get:e=>e.appTitle,set:(e,t)=>{e.appTitle=t}},metadata:i},H,P),t(S,null,L,{kind:"accessor",name:"navEls",static:!1,private:!1,access:{has:e=>"navEls"in e,get:e=>e.navEls,set:(e,t)=>{e.navEls=t}},metadata:i},A,B),t(S,null,U,{kind:"accessor",name:"assignedElements",static:!1,private:!1,access:{has:e=>"assignedElements"in e,get:e=>e.assignedElements,set:(e,t)=>{e.assignedElements=t}},metadata:i},D,G),t(S,null,$,{kind:"accessor",name:"leftEls",static:!1,private:!1,access:{has:e=>"leftEls"in e,get:e=>e.leftEls,set:(e,t)=>{e.leftEls=t}},metadata:i},I,J),t(S,null,j,{kind:"accessor",name:"_navOpen",static:!1,private:!1,access:{has:e=>"_navOpen"in e,get:e=>e._navOpen,set:(e,t)=>{e._navOpen=t}},metadata:i},K,Q),t(S,null,M,{kind:"accessor",name:"_flyoutsOpen",static:!1,private:!1,access:{has:e=>"_flyoutsOpen"in e,get:e=>e._flyoutsOpen,set:(e,t)=>{e._flyoutsOpen=t}},metadata:i},V,X),t(S,null,W,{kind:"accessor",name:"_headerEl",static:!1,private:!1,access:{has:e=>"_headerEl"in e,get:e=>e._headerEl,set:(e,t)=>{e._headerEl=t}},metadata:i},Z,ee),t(null,O={value:S},Y,{kind:"class",name:S.name,metadata:i},null,F),S=O.value,i&&Object.defineProperty(S,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),S.styles=l(f),i(S,F),S})();export{b as Header};
+    `}handleSlotChange(){this.requestUpdate()}handleRootLinkClick(e){const t=new CustomEvent("on-root-link-click",{detail:{origEvent:e}});this.dispatchEvent(t)}_handleNavToggle(e){this._navOpen=e.detail.open}_handleFlyoutsToggle(e){this._flyoutsOpen=e.detail.open||e.detail.childrenOpen}_handleScroll(){window.scrollY>0?this._headerEl.classList.add("scrolled"):this._headerEl.classList.remove("scrolled")}firstUpdated(){this._handleScroll()}connectedCallback(){super.connectedCallback(),document.addEventListener("on-nav-toggle",(e=>this._handleNavToggle(e))),document.addEventListener("on-flyouts-toggle",(e=>this._handleFlyoutsToggle(e))),window.addEventListener("scroll",this._debounceScroll)}disconnectedCallback(){document.removeEventListener("on-nav-toggle",(e=>this._handleNavToggle(e))),document.removeEventListener("on-flyouts-toggle",(e=>this._handleFlyoutsToggle(e))),window.removeEventListener("scroll",this._debounceScroll),super.disconnectedCallback()}},n=new WeakMap,b=new WeakMap,x=new WeakMap,y=new WeakMap,_=new WeakMap,w=new WeakMap,E=new WeakMap,z=new WeakMap,e(S,"Header"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=Y[Symbol.metadata])&&void 0!==e?e:null):void 0;T=[c({type:String})],C=[c({type:String})],L=[h({selector:"kyn-header-nav"})],U=[h()],$=[h({slot:"left"})],j=[m()],M=[m()],W=[p("header")],t(S,null,T,{kind:"accessor",name:"rootUrl",static:!1,private:!1,access:{has:e=>"rootUrl"in e,get:e=>e.rootUrl,set:(e,t)=>{e.rootUrl=t}},metadata:i},R,q),t(S,null,C,{kind:"accessor",name:"appTitle",static:!1,private:!1,access:{has:e=>"appTitle"in e,get:e=>e.appTitle,set:(e,t)=>{e.appTitle=t}},metadata:i},H,P),t(S,null,L,{kind:"accessor",name:"navEls",static:!1,private:!1,access:{has:e=>"navEls"in e,get:e=>e.navEls,set:(e,t)=>{e.navEls=t}},metadata:i},A,B),t(S,null,U,{kind:"accessor",name:"assignedElements",static:!1,private:!1,access:{has:e=>"assignedElements"in e,get:e=>e.assignedElements,set:(e,t)=>{e.assignedElements=t}},metadata:i},D,G),t(S,null,$,{kind:"accessor",name:"leftEls",static:!1,private:!1,access:{has:e=>"leftEls"in e,get:e=>e.leftEls,set:(e,t)=>{e.leftEls=t}},metadata:i},I,J),t(S,null,j,{kind:"accessor",name:"_navOpen",static:!1,private:!1,access:{has:e=>"_navOpen"in e,get:e=>e._navOpen,set:(e,t)=>{e._navOpen=t}},metadata:i},K,Q),t(S,null,M,{kind:"accessor",name:"_flyoutsOpen",static:!1,private:!1,access:{has:e=>"_flyoutsOpen"in e,get:e=>e._flyoutsOpen,set:(e,t)=>{e._flyoutsOpen=t}},metadata:i},V,X),t(S,null,W,{kind:"accessor",name:"_headerEl",static:!1,private:!1,access:{has:e=>"_headerEl"in e,get:e=>e._headerEl,set:(e,t)=>{e._headerEl=t}},metadata:i},Z,ee),t(null,O={value:S},F,{kind:"class",name:S.name,metadata:i},null,N),S=O.value,i&&Object.defineProperty(S,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),S.styles=l(f),i(S,N),S})();export{b as Header};
 //# sourceMappingURL=header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"header.js","sources":["../../../../src/components/global/header/header.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  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/headerCategories.d.ts

@@ -0,0 +1,150 @@
+import { LitElement, type PropertyValueMap } from 'lit';
+import './headerCategory';
+import '../../reusable/button/button';
+import './headerLink';
+declare const _defaultTextStrings: {
+    back: string;
+    more: string;
+};
+type HeaderTextStrings = typeof _defaultTextStrings;
+export interface HeaderCategoryLinkType {
+    id: string;
+    label: string;
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    rel?: string;
+}
+export interface HeaderCategoryType {
+    id: string;
+    heading: string;
+    links: HeaderCategoryLinkType[];
+}
+export interface HeaderLinkRendererContext {
+    tabId: string;
+    categoryId: string;
+    view: 'root' | 'detail';
+}
+export type HeaderMegaLinkRenderer = (link: HeaderCategoryLinkType, context?: HeaderLinkRendererContext) => string | null;
+export interface MegaTabConfig {
+    categories: HeaderCategoryType[];
+}
+export interface MegaTabsConfig {
+    [tabId: string]: MegaTabConfig;
+}
+export interface HeaderMegaChangeDetail {
+    activeMegaTabId: string;
+    activeMegaCategoryId: string | null;
+}
+type HeaderView = 'root' | 'detail';
+interface SlottedLinkData {
+    href: string;
+    inner: string;
+    target?: string;
+    rel?: string;
+}
+interface SlottedCategoryData {
+    id: string;
+    heading: string;
+    links: SlottedLinkData[];
+}
+/**
+ * Header categories wrapper for mega menu.
+ *
+ * @slot unnamed - Slot for header category elements.
+ *
+ * Controlled via `activeMegaTabId` / `activeMegaCategoryId` but encapsulates
+ * all categorical/mega-nav view behavior (root/detail, "More", "Back").
+ *
+ * Emits `on-nav-change` so parents can mirror state for tabs, routing, etc.
+ *
+ * Modes:
+ * - JSON mode
+ *   - Provide `tabsConfig` and categories/links are rendered from config.
+ *   - Each link may specify `href`, `target`, and `rel`.
+ *   - Optional `linkRenderer` hook can be supplied to fully control the
+ *     slotted content inside each `<kyn-header-link>`.
+ *
+ * - Slotted/manual mode
+ *   - Omit `tabsConfig` and slot `<kyn-header-category>` / `<kyn-header-link>`
+ *     elements directly in the light DOM.
+ *   - Slotted `<kyn-header-link>` `href`, `target`, and `rel` attributes are
+ *     preserved.
+ *   - Root view will:
+ *       - truncate visible links per category at `maxRootLinks`
+ *       - inject a "More" link when there are additional links
+ *   - "More" switches to a detail view for that category, and the Back button
+ *     returns to the root view.
+ */
+export declare class HeaderCategories extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Configuration object for the mega nav (tab id -> categories/links). */
+    accessor tabsConfig: MegaTabsConfig | null;
+    /** Currently active tab id. */
+    accessor activeMegaTabId: string;
+    /** Currently active category id in detail view, or null for root view (controlled). */
+    accessor activeMegaCategoryId: string | null;
+    /** Max number of links to render in root columns before showing "More". */
+    accessor maxRootLinks: number;
+    /**
+     * Optional text overrides, merged with defaults.
+     * e.g. <kyn-header-categories .textStrings=${{ more: 'More items' }}>
+     */
+    accessor textStrings: Partial<HeaderTextStrings> | null;
+    /** Resolved text strings (defaults + overrides). */
+    accessor _textStrings: HeaderTextStrings;
+    /** Number of links per column in the detail view (JSON mode only). */
+    accessor detailLinksPerColumn: number;
+    /**
+     * Current visual view for styling ('root' | 'detail').
+     * Derived from `activeMegaCategoryId` but reflected for CSS hooks.
+     */
+    accessor view: HeaderView;
+    /**
+     * Optional hook to render the entire link content slotted into <kyn-header-link>.
+     *
+     * IMPORTANT:
+     * - This must return an HTML string or null.
+     * - The string is rendered via unsafeHTML; consumers are responsible for sanitizing
+     *   any dynamic content they inject here.
+     *
+     * This API is intentionally framework-agnostic: React, Vue, Angular, etc. can all
+     * build a string and pass it in.
+     *
+     * If not provided, a simple circle-icon + label placeholder is used.
+     */
+    accessor linkRenderer: HeaderMegaLinkRenderer | null;
+    /** Internal representation of slotted categories */
+    accessor _slottedCategories: SlottedCategoryData[];
+    private _buildSlottedTimeout?;
+    private readonly _boundHandleNavToggle;
+    private get _isJsonMode();
+    private get _tabConfig();
+    private chunkBy;
+    private normalizeHeaderLinkTarget;
+    private _emitChange;
+    setRootView(tabId?: string): void;
+    openCategoryDetail(tabId: string, categoryId: string, e?: Event): void;
+    handleBackClick(e?: Event): void;
+    private _handleNavToggle;
+    willUpdate(changed: PropertyValueMap<this>): void;
+    updated(changed: PropertyValueMap<this>): void;
+    private renderLinkContent;
+    private renderCategoryColumn;
+    private renderRootView;
+    private renderDetailView;
+    private _buildSlottedCategories;
+    private renderSlottedRoot;
+    private computeDetailColumns;
+    private renderSlottedDetail;
+    private _scheduleBuildSlottedCategories;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-header-categories': HeaderCategories;
+    }
+}
+export {};
+//# sourceMappingURL=headerCategories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"headerCategories.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerCategories.ts"],"names":[],"mappings":"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"}

package/components/global/header/headerCategories.js

@@ -0,0 +1,242 @@
+import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPrivateFieldGet as a,__classPrivateFieldSet as n}from"tslib";import{unsafeSVG as s}from"lit-html/directives/unsafe-svg.js";import{unsafeHTML as r}from"lit-html/directives/unsafe-html.js";import{css as o,LitElement as l,unsafeCSS as d,html as h}from"lit";import{customElement as g,property as c,state as u}from"lit/decorators.js";import"./headerCategory.js";import"../../reusable/button/button.js";import"./headerLink.js";import{h as m,i as v}from"../../../vendor/@kyndryl-design-system/shidoka-icons-oqOblwTK.js";import{ifDefined as k}from"lit/directives/if-defined.js";import"lit-html/directives/class-map.js";import"../../../common/helpers/helpers.js";import"../../reusable/button/defs.js";import"lit/directives/class-map.js";import"../../reusable/textInput/textInput.js";import"deepmerge-ts";import"../../../common/mixins/form-input.js";var p=o`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+@media (min-width: 672px) {
+  :host {
+    padding-right: 10%;
+    width: calc(100vw - 230px);
+    max-width: calc(100vw - 230px);
+  }
+}
+.header-categories {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+.header-categories__inner {
+  display: block;
+  column-width: 160px;
+  column-gap: 32px;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+.header-categories__back-slot {
+  display: block;
+  margin-top: 16px;
+}
+
+.header-categories__inner > * {
+  break-inside: avoid;
+  -webkit-column-break-inside: avoid;
+  page-break-inside: avoid;
+  margin: 0 0 16px;
+}
+
+slot.header-categories__slot::slotted(*) {
+  display: block;
+  break-inside: avoid;
+  -webkit-column-break-inside: avoid;
+  page-break-inside: avoid;
+  margin: 0 0 16px;
+}
+
+/* ---------------------------------------------------------------------
+   ROOT VIEW (MASONRY)
+   ------------------------------------------------------------------ */
+:host(:not([view=detail])) .header-categories__inner {
+  column-width: 160px;
+}
+
+@media (min-width: 896px) {
+  :host(:not([view=detail])) .header-categories__inner {
+    column-width: 180px;
+  }
+}
+@media (min-width: 1152px) {
+  :host(:not([view=detail])) .header-categories__inner {
+    column-width: 200px;
+  }
+}
+/* ---------------------------------------------------------------------
+   DETAIL VIEW
+   ------------------------------------------------------------------ */
+:host([view=detail]) {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+:host([view=detail]) .header-categories__inner {
+  overflow: auto;
+}
+
+:host([view=detail]) .header-detail-columns {
+  display: flex;
+  align-items: flex-start;
+  gap: 0 32px;
+  width: max-content;
+  box-sizing: border-box;
+}
+
+:host([view=detail]) .header-detail-columns > div {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 0 0 200px;
+}
+
+:host([view=detail]) .header-detail-columns--single {
+  max-width: 360px;
+  width: auto;
+}
+
+:host([view=detail]) .header-detail-columns kyn-header-link {
+  width: 100%;
+  min-width: 0;
+}
+
+@media (min-width: 42rem) {
+  :host([view=detail]) .header-detail-columns > div {
+    min-width: 160px;
+  }
+}`;const b={back:"Back",more:"More"},y="root",f="detail",w="#";let x=(()=>{var o,x,_,C,$,M,S,T,I,L;let R,D,j,A,W,z,E,H,P,V,B,N,O=[g("kyn-header-categories")],J=[],q=l,U=[],Y=[],F=[],G=[],K=[],Q=[],X=[],Z=[],ee=[],te=[],ie=[],ae=[],ne=[],se=[],re=[],oe=[],le=[],de=[],he=[],ge=[];return D=class extends q{constructor(){super(...arguments),o.set(this,i(this,U,null)),x.set(this,(i(this,Y),i(this,F,""))),_.set(this,(i(this,G),i(this,K,null))),C.set(this,(i(this,Q),i(this,X,4))),$.set(this,(i(this,Z),i(this,ee,null))),M.set(this,(i(this,te),i(this,ie,b))),S.set(this,(i(this,ae),i(this,ne,6))),T.set(this,(i(this,se),i(this,re,y))),I.set(this,(i(this,oe),i(this,le,null))),L.set(this,(i(this,de),i(this,he,[]))),this._buildSlottedTimeout=i(this,ge),this._boundHandleNavToggle=e=>this._handleNavToggle(e)}get tabsConfig(){return a(this,o,"f")}set tabsConfig(e){n(this,o,e,"f")}get activeMegaTabId(){return a(this,x,"f")}set activeMegaTabId(e){n(this,x,e,"f")}get activeMegaCategoryId(){return a(this,_,"f")}set activeMegaCategoryId(e){n(this,_,e,"f")}get maxRootLinks(){return a(this,C,"f")}set maxRootLinks(e){n(this,C,e,"f")}get textStrings(){return a(this,$,"f")}set textStrings(e){n(this,$,e,"f")}get _textStrings(){return a(this,M,"f")}set _textStrings(e){n(this,M,e,"f")}get detailLinksPerColumn(){return a(this,S,"f")}set detailLinksPerColumn(e){n(this,S,e,"f")}get view(){return a(this,T,"f")}set view(e){n(this,T,e,"f")}get linkRenderer(){return a(this,I,"f")}set linkRenderer(e){n(this,I,e,"f")}get _slottedCategories(){return a(this,L,"f")}set _slottedCategories(e){n(this,L,e,"f")}get _isJsonMode(){return null!=this.tabsConfig}get _tabConfig(){var e;return this.tabsConfig&&null!==(e=this.tabsConfig[this.activeMegaTabId])&&void 0!==e?e:null}chunkBy(e,t){if(!e||t<=0)return[[]];const i=[];for(let a=0;a<e.length;a+=t)i.push(e.slice(a,a+t));return i}normalizeHeaderLinkTarget(e){return"_blank"===e||"_parent"===e||"_top"===e?e:"_self"}_emitChange(){const e={activeMegaTabId:this.activeMegaTabId,activeMegaCategoryId:this.activeMegaCategoryId};this.dispatchEvent(new CustomEvent("on-nav-change",{detail:e,composed:!0,bubbles:!0}))}setRootView(e){this.activeMegaTabId=null!=e?e:this.activeMegaTabId,this.activeMegaCategoryId=null,this.view=y,this._emitChange(),this._isJsonMode||this._buildSlottedCategories()}openCategoryDetail(e,t,i){i&&(i.preventDefault(),i.stopPropagation()),this.activeMegaTabId=e,this.activeMegaCategoryId=t,this.view=f,this._emitChange(),this._isJsonMode||this._buildSlottedCategories()}handleBackClick(e){e&&(e.preventDefault(),e.stopPropagation()),this.setRootView(this.activeMegaTabId),this.updateComplete.then((()=>{const e=Array.from(this.querySelectorAll("kyn-header-link")).find((e=>e.hasAttribute("isactive")));e&&e.focus&&e.focus()}))}_handleNavToggle(e){var t;Boolean(null===(t=e.detail)||void 0===t?void 0:t.open)||this.setRootView(this.activeMegaTabId)}willUpdate(e){var t;e.has("textStrings")&&(this._textStrings={...b,...null!==(t=this.textStrings)&&void 0!==t?t:{}})}updated(e){if(e.has("activeMegaCategoryId")||e.has("activeMegaTabId")){const e=null==this.activeMegaCategoryId?y:f;this.view!==e&&(this.view=e)}}renderLinkContent(e,t){if(this.linkRenderer){const i=this.linkRenderer(e,t);if("string"==typeof i&&i.trim().length>0)return h`${r(i)}`;null!=i&&"string"!=typeof i&&console.warn("[kyn-header-categories] linkRenderer must return a string or null. Received: "+typeof i)}return h`${e.label}`}renderCategoryColumn(e,t){var i;if(!t)return null;const a=null!==(i=t.links)&&void 0!==i?i:[];return h`
+      <kyn-header-category heading=${t.heading}>
+        ${a.slice(0,this.maxRootLinks).map((i=>{var a;const n=this.normalizeHeaderLinkTarget(i.target);return h`
+            <kyn-header-link
+              href=${null!==(a=i.href)&&void 0!==a?a:w}
+              target=${n}
+              rel=${k(i.rel)}
+            >
+              ${this.renderLinkContent(i,{tabId:e,categoryId:t.id,view:y})}
+            </kyn-header-link>
+          `}))}
+        ${a.length>this.maxRootLinks?h`
+              <kyn-header-link
+                href=${w}
+                @click=${i=>this.openCategoryDetail(e,t.id,i)}
+                @keydown=${i=>{"Enter"!==i.key&&" "!==i.key||(i.preventDefault(),this.openCategoryDetail(e,t.id,i))}}
+              >
+                <span style="margin-right: 8px;">
+                  ${s(m)}
+                </span>
+                <span>${this._textStrings.more}</span>
+              </kyn-header-link>
+            `:null}
+      </kyn-header-category>
+    `}renderRootView(){var e,t;const i=null!==(t=null===(e=this._tabConfig)||void 0===e?void 0:e.categories)&&void 0!==t?t:[];return h`${i.map((e=>this.renderCategoryColumn(this.activeMegaTabId,e)))}`}renderDetailView(){var e,t,i;const a=null!==(t=null===(e=this._tabConfig)||void 0===e?void 0:e.categories)&&void 0!==t?t:[],n=null!==(i=a.find((e=>e.id===this.activeMegaCategoryId)))&&void 0!==i?i:a[0];if(!n)return null;const s=this.computeDetailColumns(n.links),r=1===s.length;return h`
+      <kyn-header-category
+        heading=${`${n.heading} – ${this._textStrings.more}`}
+      >
+        <div
+          id=${`detail-${n.id}`}
+          class="header-detail-columns ${r?"header-detail-columns--single":""}"
+          role="region"
+          aria-label=${`${n.heading} – ${this._textStrings.more}`}
+        >
+          ${s.map((e=>h`
+              <div>
+                ${e.map((e=>{var t;const i=this.normalizeHeaderLinkTarget(e.target);return h`
+                    <kyn-header-link
+                      href=${null!==(t=e.href)&&void 0!==t?t:w}
+                      target=${i}
+                      rel=${k(e.rel)}
+                    >
+                      ${this.renderLinkContent(e,{tabId:this.activeMegaTabId,categoryId:n.id,view:f})}
+                    </kyn-header-link>
+                  `}))}
+              </div>
+            `))}
+        </div>
+      </kyn-header-category>
+    `}_buildSlottedCategories(){if(this._isJsonMode)return;const e=Array.from(this.querySelectorAll("kyn-header-category"));if(!e.length)return void(this._slottedCategories=[]);const t=e.map(((e,t)=>{var i,a;const n=null!==(i=e.getAttribute("id"))&&void 0!==i?i:`category-${t+1}`,s=null!==(a=e.getAttribute("heading"))&&void 0!==a?a:"",r=Array.from(e.querySelectorAll("kyn-header-link")).filter((t=>t.parentElement===e)).filter((e=>"true"!==e.dataset.kynMoreLink)).map((e=>{var t,i,a;return{href:null!==(t=e.getAttribute("href"))&&void 0!==t?t:w,target:null!==(i=e.getAttribute("target"))&&void 0!==i?i:void 0,rel:null!==(a=e.getAttribute("rel"))&&void 0!==a?a:void 0,inner:e.innerHTML}}));return{id:n,heading:s,links:r}}));this._slottedCategories=t}renderSlottedRoot(){const e=this._slottedCategories;return e.length?h`${e.map((e=>h`
+        <kyn-header-category heading=${e.heading}>
+          ${e.links.slice(0,this.maxRootLinks).map((e=>{const t=this.normalizeHeaderLinkTarget(e.target);return h`
+              <kyn-header-link
+                href=${e.href}
+                target=${t}
+                rel=${k(e.rel)}
+              >
+                ${r(e.inner)}
+              </kyn-header-link>
+            `}))}
+          ${e.links.length>this.maxRootLinks?h`
+                <kyn-header-link
+                  href=${w}
+                  @click=${t=>this.openCategoryDetail(this.activeMegaTabId,e.id,t)}
+                  @keydown=${t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.openCategoryDetail(this.activeMegaTabId,e.id,t))}}
+                >
+                  <span style="margin-right: 8px;">
+                    ${s(m)}
+                  </span>
+                  <span>${this._textStrings.more}</span>
+                </kyn-header-link>
+              `:null}
+        </kyn-header-category>
+      `))}`:null}computeDetailColumns(e){const t=null!=e?e:[];if(!t.length)return[];const i=Math.max(this.detailLinksPerColumn,1),a=Math.ceil(t.length/i),n=Math.min(4,Math.max(1,a)),s=Math.ceil(t.length/n);return this.chunkBy(t,s)}renderSlottedDetail(){var e;const t=this._slottedCategories;if(!t.length)return null;const i=null!==(e=t.find((e=>e.id===this.activeMegaCategoryId)))&&void 0!==e?e:t[0];if(!i)return null;const a=this.computeDetailColumns(i.links),n=1===a.length;return h`
+      <kyn-header-category
+        heading=${`${i.heading} – ${this._textStrings.more}`}
+      >
+        <div
+          id=${`detail-${i.id}`}
+          class="header-detail-columns ${n?"header-detail-columns--single":""}"
+          role="region"
+          aria-label=${`${i.heading} – ${this._textStrings.more}`}
+        >
+          ${a.map((e=>h`
+              <div>
+                ${e.map((e=>{const t=this.normalizeHeaderLinkTarget(e.target);return h`
+                    <kyn-header-link
+                      href=${e.href}
+                      target=${t}
+                      rel=${k(e.rel)}
+                    >
+                      ${r(e.inner)}
+                    </kyn-header-link>
+                  `}))}
+              </div>
+            `))}
+        </div>
+      </kyn-header-category>
+    `}_scheduleBuildSlottedCategories(){"undefined"!=typeof window?(this._buildSlottedTimeout&&window.clearTimeout(this._buildSlottedTimeout),this._buildSlottedTimeout=window.setTimeout((()=>{this._buildSlottedCategories(),this._buildSlottedTimeout=void 0}),40)):this._buildSlottedCategories()}render(){const e=this.view,t=this._isJsonMode?e===y?this.renderRootView():this.renderDetailView():e===y?this.renderSlottedRoot():this.renderSlottedDetail();return h`
+      <div class="header-categories" data-view=${e}>
+        <div class="header-categories__inner">${null!=t?t:h``}</div>
+
+        <!-- hidden slot used only to observe light DOM changes (edge case) -->
+        <slot
+          class="header-categories__slot"
+          style="display: none;"
+          @slotchange=${()=>this._scheduleBuildSlottedCategories()}
+        ></slot>
+
+        ${e===f?h`
+              <div class="header-categories__back-slot">
+                <kyn-button
+                  size="small"
+                  kind="tertiary"
+                  @click=${e=>this.handleBackClick(e)}
+                  style="display: inline-flex; align-items: center;"
+                >
+                  <span
+                    style="display: inline-flex; align-items: center; margin-right: 8px;"
+                  >
+                    ${s(v)}
+                  </span>
+                  ${this._textStrings.back}
+                </kyn-button>
+              </div>
+            `:null}
+      </div>
+    `}connectedCallback(){var e;super.connectedCallback(),null===(e=this.ownerDocument)||void 0===e||e.addEventListener("on-nav-toggle",this._boundHandleNavToggle),this._buildSlottedCategories()}disconnectedCallback(){var e;null===(e=this.ownerDocument)||void 0===e||e.removeEventListener("on-nav-toggle",this._boundHandleNavToggle),this._buildSlottedTimeout&&(window.clearTimeout(this._buildSlottedTimeout),this._buildSlottedTimeout=void 0),super.disconnectedCallback()}},o=new WeakMap,x=new WeakMap,_=new WeakMap,C=new WeakMap,$=new WeakMap,M=new WeakMap,S=new WeakMap,T=new WeakMap,I=new WeakMap,L=new WeakMap,e(D,"HeaderCategories"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=q[Symbol.metadata])&&void 0!==e?e:null):void 0;j=[c({attribute:!1})],A=[c({type:String})],W=[c({type:String})],z=[c({type:Number})],E=[c({type:Object})],H=[u()],P=[c({type:Number})],V=[c({type:String,reflect:!0})],B=[c({attribute:!1})],N=[u()],t(D,null,j,{kind:"accessor",name:"tabsConfig",static:!1,private:!1,access:{has:e=>"tabsConfig"in e,get:e=>e.tabsConfig,set:(e,t)=>{e.tabsConfig=t}},metadata:i},U,Y),t(D,null,A,{kind:"accessor",name:"activeMegaTabId",static:!1,private:!1,access:{has:e=>"activeMegaTabId"in e,get:e=>e.activeMegaTabId,set:(e,t)=>{e.activeMegaTabId=t}},metadata:i},F,G),t(D,null,W,{kind:"accessor",name:"activeMegaCategoryId",static:!1,private:!1,access:{has:e=>"activeMegaCategoryId"in e,get:e=>e.activeMegaCategoryId,set:(e,t)=>{e.activeMegaCategoryId=t}},metadata:i},K,Q),t(D,null,z,{kind:"accessor",name:"maxRootLinks",static:!1,private:!1,access:{has:e=>"maxRootLinks"in e,get:e=>e.maxRootLinks,set:(e,t)=>{e.maxRootLinks=t}},metadata:i},X,Z),t(D,null,E,{kind:"accessor",name:"textStrings",static:!1,private:!1,access:{has:e=>"textStrings"in e,get:e=>e.textStrings,set:(e,t)=>{e.textStrings=t}},metadata:i},ee,te),t(D,null,H,{kind:"accessor",name:"_textStrings",static:!1,private:!1,access:{has:e=>"_textStrings"in e,get:e=>e._textStrings,set:(e,t)=>{e._textStrings=t}},metadata:i},ie,ae),t(D,null,P,{kind:"accessor",name:"detailLinksPerColumn",static:!1,private:!1,access:{has:e=>"detailLinksPerColumn"in e,get:e=>e.detailLinksPerColumn,set:(e,t)=>{e.detailLinksPerColumn=t}},metadata:i},ne,se),t(D,null,V,{kind:"accessor",name:"view",static:!1,private:!1,access:{has:e=>"view"in e,get:e=>e.view,set:(e,t)=>{e.view=t}},metadata:i},re,oe),t(D,null,B,{kind:"accessor",name:"linkRenderer",static:!1,private:!1,access:{has:e=>"linkRenderer"in e,get:e=>e.linkRenderer,set:(e,t)=>{e.linkRenderer=t}},metadata:i},le,de),t(D,null,N,{kind:"accessor",name:"_slottedCategories",static:!1,private:!1,access:{has:e=>"_slottedCategories"in e,get:e=>e._slottedCategories,set:(e,t)=>{e._slottedCategories=t}},metadata:i},he,ge),t(null,R={value:D},O,{kind:"class",name:D.name,metadata:i},null,J),D=R.value,i&&Object.defineProperty(D,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),D.styles=d(p),i(D,J),D})();export{x as HeaderCategories};
+//# sourceMappingURL=headerCategories.js.map