@kyndryl-design-system/shidoka-applications 2.18.4 → 2.20.0

package/common/helpers/swiper.js

@@ -1,2 +1,2 @@
-import{a as e}from"../../vendor/@kyndryl-design-system/shidoka-icons-774ccfb8.js";const n={slidesPerView:1.25,centeredSlides:!0,spaceBetween:16,breakpoints:{672:{slidesPerView:"auto",spaceBetween:24}},keyboard:{enabled:!0},mousewheel:{enabled:!0,forceToAxis:!0},navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"},scrollbar:{el:".swiper-scrollbar",draggable:!0},pagination:{el:".swiper-pagination",clickable:!0,type:"fraction"},on:{init:function(n){n.navigation.prevEl.innerHTML=e,n.navigation.nextEl.innerHTML=e,t(n)},transitionEnd:function(e){t(e)},scrollbarDragEnd:function(e){t(e)}}},t=e=>{const n=e.el.getBoundingClientRect();e.slides.forEach((e=>{const t=e.getBoundingClientRect();t.left<n.left||t.right>n.width+n.left?(e.classList.add("off-screen"),e.setAttribute("aria-disabled","true")):(e.classList.remove("off-screen"),e.setAttribute("aria-disabled","false"))}))};export{n as SwiperConfig};
+import{a as e}from"../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";const n={slidesPerView:1.25,centeredSlides:!0,spaceBetween:16,breakpoints:{672:{slidesPerView:"auto",spaceBetween:24}},keyboard:{enabled:!0},mousewheel:{enabled:!0,forceToAxis:!0},navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"},scrollbar:{el:".swiper-scrollbar",draggable:!0},pagination:{el:".swiper-pagination",clickable:!0,type:"fraction"},on:{init:function(n){n.navigation.prevEl.innerHTML=e,n.navigation.nextEl.innerHTML=e,t(n)},transitionEnd:function(e){t(e)},scrollbarDragEnd:function(e){t(e)}}},t=e=>{const n=e.el.getBoundingClientRect();e.slides.forEach((e=>{const t=e.getBoundingClientRect();t.left<n.left||t.right>n.width+n.left?(e.classList.add("off-screen"),e.setAttribute("aria-disabled","true")):(e.classList.remove("off-screen"),e.setAttribute("aria-disabled","false"))}))};export{n as SwiperConfig};
 //# sourceMappingURL=swiper.js.map

package/components/ai/sourcesFeedback/aiSourcesFeedback.js

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as s,l as i,c as o,e as n}from"../../../vendor/lit-446874c7.js";import{i as d,s as a,x as l}from"../../../vendor/lit-element-c6c02f24.js";import{d as r}from"../../../vendor/deepmerge-ts-e62363e6.js";import{e as c}from"../../../vendor/lit-html-29220869.js";import{f as p,F as h,G as u,H as b,I as k,c as m}from"../../../vendor/@kyndryl-design-system/shidoka-icons-774ccfb8.js";import"../../reusable/link/link.js";import"../../reusable/card/card.js";import"../../reusable/card/vitalCard.skeleton.js";import"../../reusable/card/informationalCard.skeleton.js";import"../../reusable/button/button.js";import"../../reusable/link/defs.js";import"../../reusable/loaders/skeleton.js";import"../../../cardSample-a67570dc.js";import"../../../common/helpers/helpers.js";import"../../reusable/button/defs.js";var v=d`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as s,l as i,c as o,e as n}from"../../../vendor/lit-446874c7.js";import{i as d,s as a,x as l}from"../../../vendor/lit-element-c6c02f24.js";import{d as r}from"../../../vendor/deepmerge-ts-e62363e6.js";import{e as c}from"../../../vendor/lit-html-29220869.js";import{f as p,D as h,E as u,F as b,G as k,c as m}from"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";import"../../reusable/link/link.js";import"../../reusable/card/card.js";import"../../reusable/card/vitalCard.skeleton.js";import"../../reusable/card/informationalCard.skeleton.js";import"../../reusable/button/button.js";import"../../reusable/link/defs.js";import"../../reusable/loaders/skeleton.js";import"../../../cardSample-a67570dc.js";import"../../../common/helpers/helpers.js";import"../../reusable/button/defs.js";var v=d`*,
 *::before,
 *::after {
   box-sizing: border-box;

package/components/ai/sourcesFeedback/index.js

@@ -1,2 +1,2 @@
-export{AISourcesFeedback}from"./aiSourcesFeedback.js";import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-446874c7.js";import"../../../vendor/lit-element-c6c02f24.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-774ccfb8.js";import"../../reusable/link/link.js";import"../../reusable/link/defs.js";import"../../reusable/card/card.js";import"../../reusable/card/vitalCard.skeleton.js";import"../../reusable/loaders/skeleton.js";import"../../../cardSample-a67570dc.js";import"../../reusable/card/informationalCard.skeleton.js";import"../../reusable/button/button.js";import"../../../common/helpers/helpers.js";import"../../reusable/button/defs.js";
+export{AISourcesFeedback}from"./aiSourcesFeedback.js";import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-446874c7.js";import"../../../vendor/lit-element-c6c02f24.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";import"../../reusable/link/link.js";import"../../reusable/link/defs.js";import"../../reusable/card/card.js";import"../../reusable/card/vitalCard.skeleton.js";import"../../reusable/loaders/skeleton.js";import"../../../cardSample-a67570dc.js";import"../../reusable/card/informationalCard.skeleton.js";import"../../reusable/button/button.js";import"../../../common/helpers/helpers.js";import"../../reusable/button/defs.js";
 //# sourceMappingURL=index.js.map

package/components/global/header/header.js

@@ -163,7 +163,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as o,t as
   position: relative;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px 8px 8px;
+  padding: 8px 12px;
   height: 40px;
   cursor: pointer;
   background: none;

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

@@ -2,11 +2,14 @@ import { LitElement } from 'lit';
 /**
  * Header link category
  * @slot unnamed - Slot for links.
+ * @slot icon - Slot for icon.
  */
 export declare class HeaderCategory extends LitElement {
     static styles: any;
-    /** Link url. */
+    /** Category text. */
     heading: string;
+    /** Add left padding when icon is not provided to align text with links that do have icons. */
+    leftPadding: boolean;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +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,MAAsB;IAE5C,gBAAgB;IAEhB,OAAO,SAAM;IAEJ,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,cAAc,CAAC;KACvC;CACF"}
+{"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;;;;GAIG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,MAAsB;IAE5C,qBAAqB;IAErB,OAAO,SAAM;IAEb,8FAA8F;IAE9F,WAAW,UAAS;IAEX,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,cAAc,CAAC;KACvC;CACF"}

package/components/global/header/headerCategory.js

@@ -1,4 +1,4 @@
-import{_ as i}from"../../../vendor/tslib-53a81efe.js";import{n as t,e}from"../../../vendor/lit-446874c7.js";import{i as r,s as o,x as n}from"../../../vendor/lit-element-c6c02f24.js";var d=r`*,
+import{_ as i}from"../../../vendor/tslib-53a81efe.js";import{n as t,e}from"../../../vendor/lit-446874c7.js";import{i as n,s as r,x as d}from"../../../vendor/lit-element-c6c02f24.js";var a=n`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -48,11 +48,13 @@ import{_ as i}from"../../../vendor/tslib-53a81efe.js";import{n as t,e}from"../..
   line-height: var(--kd-line-height-utility-3-sm);
   font-weight: var(--kd-font-weight-regular);
   letter-spacing: var(--kd-letter-spacing-5);
+  display: flex;
+  align-items: center;
+  gap: 8px;
   color: var(--kd-color-text-title-secondary);
   font-weight: 500;
   text-transform: uppercase;
-  padding: 20px 16px 8px 8px;
-  border-bottom: 1px solid var(--kd-color-border-level-tertiary);
+  padding: 20px 12px 0 12px;
 }
 @media (min-width: 42rem) {
   .heading {
@@ -77,10 +79,24 @@ import{_ as i}from"../../../vendor/tslib-53a81efe.js";import{n as t,e}from"../..
     font-size: var(--kd-font-size-utility-3-max);
     line-height: var(--kd-line-height-utility-3-max);
   }
-}`;let a=class extends o{constructor(){super(...arguments),this.heading=""}render(){return n`
+}
+.heading.left-padding {
+  padding-left: 36px;
+}
+
+slot[name=icon]::slotted(*) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+}`;let o=class extends r{constructor(){super(...arguments),this.heading="",this.leftPadding=!1}render(){return d`
       <div class="category">
-        <div class="heading">${this.heading}</div>
+        <div class="heading ${this.leftPadding?"left-padding":""}">
+          <slot name="icon"></slot>
+          ${this.heading}
+        </div>
         <slot></slot>
       </div>
-    `}};a.styles=d,i([t({type:String})],a.prototype,"heading",void 0),a=i([e("kyn-header-category")],a);export{a as HeaderCategory};
+    `}};o.styles=a,i([t({type:String})],o.prototype,"heading",void 0),i([t({type:Boolean})],o.prototype,"leftPadding",void 0),o=i([e("kyn-header-category")],o);export{o as HeaderCategory};
 //# sourceMappingURL=headerCategory.js.map

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

@@ -1 +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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GASO,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"}
+{"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 * @slot icon - Slot for icon.\n */\n@customElement('kyn-header-category')\nexport class HeaderCategory extends LitElement {\n  static override styles = HeaderCategoryScss;\n\n  /** Category text. */\n  @property({ type: String })\n  heading = '';\n\n  /** Add left padding when icon is not provided to align text with links that do have icons. */\n  @property({ type: Boolean })\n  leftPadding = false;\n\n  override render() {\n    return html`\n      <div class=\"category\">\n        <div class=\"heading ${this.leftPadding ? 'left-padding' : ''}\">\n          <slot name=\"icon\"></slot>\n          ${this.heading}\n        </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","leftPadding","render","html","styles","HeaderCategoryScss","__decorate","property","type","String","prototype","Boolean","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUO,IAAMA,EAAN,cAA6BC,EAA7B,WAAAC,uBAKLC,KAAOC,QAAG,GAIVD,KAAWE,aAAG,CAaf,CAXU,MAAAC,GACP,OAAOC,CAAI;;8BAEeJ,KAAKE,YAAc,eAAiB;;YAEtDF,KAAKC;;;;KAKd,GApBeJ,EAAMQ,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACLb,EAAAc,UAAA,eAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACEf,EAAAc,UAAA,mBAAA,GATTd,EAAcU,EAAA,CAD1BM,EAAc,wBACFhB"}

package/components/global/header/headerFlyout.js

@@ -1,4 +1,4 @@
-import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../../vendor/lit-html-29220869.js";import{n as i,l as o,o as r,e as n}from"../../../vendor/lit-446874c7.js";import{i as a,s as l,x as d}from"../../../vendor/lit-element-c6c02f24.js";import{b as s,d as c}from"../../../vendor/@kyndryl-design-system/shidoka-icons-774ccfb8.js";var h=a`*,
+import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../../vendor/lit-html-29220869.js";import{n as i,l as o,o as n,e as r}from"../../../vendor/lit-446874c7.js";import{i as a,s as l,x as s}from"../../../vendor/lit-element-c6c02f24.js";import{b as d,d as c}from"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";var h=a`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -163,7 +163,7 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
   position: relative;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px 8px 8px;
+  padding: 8px 12px;
   height: 40px;
   cursor: pointer;
   background: none;
@@ -296,8 +296,7 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
   color: var(--kd-color-text-title-secondary);
   font-weight: 500;
   text-transform: uppercase;
-  padding: 20px 16px 8px 8px;
-  border-bottom: 1px solid var(--kd-color-border-level-tertiary);
+  padding: 8px 12px 0px 8px;
 }
 @media (min-width: 42rem) {
   .menu-label {
@@ -369,9 +368,9 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
   .label {
     display: none;
   }
-}`;let m=class extends l{constructor(){super(...arguments),this.open=!1,this.anchorLeft=!1,this.hideArrow=!1,this.label="",this.hideMenuLabel=!1,this.hideButtonLabel=!1,this.assistiveText="",this.href="",this.backText="Back"}render(){const t={menu:!0,open:this.open},i={menu__content:!0,"menu__content--left":this.anchorLeft,slotted:this.slottedElements.length};return d`
-      <div class="${r(t)}">
-        ${""!==this.href?d`
+}`;let m=class extends l{constructor(){super(...arguments),this.open=!1,this.anchorLeft=!1,this.hideArrow=!1,this.label="",this.hideMenuLabel=!1,this.hideButtonLabel=!1,this.assistiveText="",this.href="",this.backText="Back"}render(){const t={menu:!0,open:this.open},i={menu__content:!0,"menu__content--left":this.anchorLeft,slotted:this.slottedElements.length};return s`
+      <div class="${n(t)}">
+        ${""!==this.href?s`
               <a
                 class="btn interactive"
                 href=${this.href}
@@ -381,17 +380,17 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
               >
                 <slot name="button"></slot>
 
-                ${this.hideButtonLabel?null:d`
+                ${this.hideButtonLabel?null:s`
                       <span class="label">
                         ${this.label||this.assistiveText}
                       </span>
                     `}
 
                 <span slot="button" class="arrow">
-                  ${e(s)}
+                  ${e(d)}
                 </span>
               </a>
-            `:d`
+            `:s`
               <button
                 class="btn interactive"
                 title=${this.label||this.assistiveText}
@@ -400,25 +399,25 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
               >
                 <slot name="button"></slot>
 
-                ${this.hideButtonLabel?null:d`
+                ${this.hideButtonLabel?null:s`
                       <span class="label">
                         ${this.label||this.assistiveText}
                       </span>
                     `}
 
                 <span slot="button" class="arrow">
-                  ${e(s)}
+                  ${e(d)}
                 </span>
               </button>
             `}
 
-        <div class=${r(i)}>
+        <div class=${n(i)}>
           <button class="go-back" @click=${()=>this._handleBack()}>
             <span>${e(c)}</span>
             ${this.backText}
           </button>
 
-          ${this.hideMenuLabel?null:d`
+          ${this.hideMenuLabel?null:s`
                 <div class="menu-label">
                   ${this.label||this.assistiveText}
                 </div>
@@ -428,5 +427,5 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
         </div>
       </div>
       <div class="overlay" @click=${this._handleOverlayClick}></div>
-    `}_handleBack(){this.open=!1}handleClick(){this.open=!this.open}handleClickOut(t){t.composedPath().includes(this)||(this.open=!1)}_handleOverlayClick(){this.open=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(t=>this.handleClickOut(t)))}disconnectedCallback(){document.removeEventListener("click",(t=>this.handleClickOut(t))),super.disconnectedCallback()}};m.styles=h,t([i({type:Boolean})],m.prototype,"open",void 0),t([i({type:Boolean})],m.prototype,"anchorLeft",void 0),t([i({type:Boolean})],m.prototype,"hideArrow",void 0),t([i({type:String})],m.prototype,"label",void 0),t([i({type:Boolean})],m.prototype,"hideMenuLabel",void 0),t([i({type:Boolean})],m.prototype,"hideButtonLabel",void 0),t([i({type:String})],m.prototype,"assistiveText",void 0),t([i({type:String})],m.prototype,"href",void 0),t([i({type:String})],m.prototype,"backText",void 0),t([o()],m.prototype,"slottedElements",void 0),m=t([n("kyn-header-flyout")],m);export{m as HeaderFlyout};
+    `}_handleBack(){this.open=!1}handleClick(){this.open=!this.open}handleClickOut(t){t.composedPath().includes(this)||(this.open=!1)}_handleOverlayClick(){this.open=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(t=>this.handleClickOut(t)))}disconnectedCallback(){document.removeEventListener("click",(t=>this.handleClickOut(t))),super.disconnectedCallback()}};m.styles=h,t([i({type:Boolean})],m.prototype,"open",void 0),t([i({type:Boolean})],m.prototype,"anchorLeft",void 0),t([i({type:Boolean})],m.prototype,"hideArrow",void 0),t([i({type:String})],m.prototype,"label",void 0),t([i({type:Boolean})],m.prototype,"hideMenuLabel",void 0),t([i({type:Boolean})],m.prototype,"hideButtonLabel",void 0),t([i({type:String})],m.prototype,"assistiveText",void 0),t([i({type:String})],m.prototype,"href",void 0),t([i({type:String})],m.prototype,"backText",void 0),t([o()],m.prototype,"slottedElements",void 0),m=t([r("kyn-header-flyout")],m);export{m as HeaderFlyout};
 //# sourceMappingURL=headerFlyout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"headerFlyout.js","sources":["../../../../src/components/global/header/headerFlyout.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } 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';\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 = HeaderFlyoutScss;\n\n  /** Flyout open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Anchor flyout menu to the left edge of the button instead of the right edge. */\n  @property({ type: Boolean })\n  anchorLeft = false;\n\n  /** Hides the arrow. */\n  @property({ type: Boolean })\n  hideArrow = false;\n\n  /** Menu & button label. */\n  @property({ type: String })\n  label = '';\n\n  /** Hide the label at the top of the flyout menu. */\n  @property({ type: Boolean })\n  hideMenuLabel = false;\n\n  /** Hide the label in the mobile button. */\n  @property({ type: Boolean })\n  hideButtonLabel = false;\n\n  /**\n   * DEPRECATED. Use `label` instead.\n   * Button assistive text, title + aria-label.\n   */\n  @property({ type: String })\n  assistiveText = '';\n\n  /** Turns the button into a link. */\n  @property({ type: String })\n  href = '';\n\n  /** Text for mobile \"Back\" button. */\n  @property({ type: String })\n  backText = 'Back';\n\n  /**\n   * Queries any slotted HTML elements.\n   * @ignore\n   */\n  @queryAssignedElements()\n  slottedElements!: Array<HTMLElement>;\n\n  override render() {\n    const classes = {\n      menu: true,\n      open: this.open,\n    };\n\n    const contentClasses = {\n      menu__content: true,\n      'menu__content--left': this.anchorLeft,\n      slotted: this.slottedElements.length,\n    };\n\n    return html`\n      <div class=\"${classMap(classes)}\">\n        ${this.href !== ''\n          ? html`\n              <a\n                class=\"btn interactive\"\n                href=${this.href}\n                title=${this.label || this.assistiveText}\n                aria-label=${this.label || this.assistiveText}\n                @click=${this.handleClick}\n              >\n                <slot name=\"button\"></slot>\n\n                ${!this.hideButtonLabel\n                  ? html`\n                      <span class=\"label\">\n                        ${this.label || this.assistiveText}\n                      </span>\n                    `\n                  : null}\n\n                <span slot=\"button\" class=\"arrow\">\n                  ${unsafeSVG(chevronIcon)}\n                </span>\n              </a>\n            `\n          : html`\n              <button\n                class=\"btn interactive\"\n                title=${this.label || this.assistiveText}\n                aria-label=${this.label || this.assistiveText}\n                @click=${this.handleClick}\n              >\n                <slot name=\"button\"></slot>\n\n                ${!this.hideButtonLabel\n                  ? html`\n                      <span class=\"label\">\n                        ${this.label || this.assistiveText}\n                      </span>\n                    `\n                  : null}\n\n                <span slot=\"button\" class=\"arrow\">\n                  ${unsafeSVG(chevronIcon)}\n                </span>\n              </button>\n            `}\n\n        <div class=${classMap(contentClasses)}>\n          <button class=\"go-back\" @click=${() => this._handleBack()}>\n            <span>${unsafeSVG(backIcon)}</span>\n            ${this.backText}\n          </button>\n\n          ${!this.hideMenuLabel\n            ? html`\n                <div class=\"menu-label\">\n                  ${this.label || this.assistiveText}\n                </div>\n              `\n            : null}\n\n          <slot></slot>\n        </div>\n      </div>\n      <div class=\"overlay\" @click=${this._handleOverlayClick}></div>\n    `;\n  }\n\n  private _handleBack() {\n    this.open = false;\n  }\n\n  private handleClick() {\n    this.open = !this.open;\n  }\n\n  private handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  private _handleOverlayClick() {\n    this.open = false;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this.handleClickOut(e));\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-flyout': HeaderFlyout;\n  }\n}\n"],"names":["HeaderFlyout","LitElement","constructor","this","open","anchorLeft","hideArrow","label","hideMenuLabel","hideButtonLabel","assistiveText","href","backText","render","classes","menu","contentClasses","menu__content","slotted","slottedElements","length","html","classMap","handleClick","unsafeSVG","chevronIcon","_handleBack","backIcon","_handleOverlayClick","handleClickOut","e","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderFlyoutScss","__decorate","property","type","Boolean","prototype","String","queryAssignedElements","customElement"],"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 } 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';\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 = HeaderFlyoutScss;\n\n  /** Flyout open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Anchor flyout menu to the left edge of the button instead of the right edge. */\n  @property({ type: Boolean })\n  anchorLeft = false;\n\n  /** Hides the arrow. */\n  @property({ type: Boolean })\n  hideArrow = false;\n\n  /** Menu & button label. */\n  @property({ type: String })\n  label = '';\n\n  /** Hide the label at the top of the flyout menu. */\n  @property({ type: Boolean })\n  hideMenuLabel = false;\n\n  /** Hide the label in the mobile button. */\n  @property({ type: Boolean })\n  hideButtonLabel = false;\n\n  /**\n   * DEPRECATED. Use `label` instead.\n   * Button assistive text, title + aria-label.\n   */\n  @property({ type: String })\n  assistiveText = '';\n\n  /** Turns the button into a link. */\n  @property({ type: String })\n  href = '';\n\n  /** Text for mobile \"Back\" button. */\n  @property({ type: String })\n  backText = 'Back';\n\n  /**\n   * Queries any slotted HTML elements.\n   * @ignore\n   */\n  @queryAssignedElements()\n  slottedElements!: Array<HTMLElement>;\n\n  override render() {\n    const classes = {\n      menu: true,\n      open: this.open,\n    };\n\n    const contentClasses = {\n      menu__content: true,\n      'menu__content--left': this.anchorLeft,\n      slotted: this.slottedElements.length,\n    };\n\n    return html`\n      <div class=\"${classMap(classes)}\">\n        ${this.href !== ''\n          ? html`\n              <a\n                class=\"btn interactive\"\n                href=${this.href}\n                title=${this.label || this.assistiveText}\n                aria-label=${this.label || this.assistiveText}\n                @click=${this.handleClick}\n              >\n                <slot name=\"button\"></slot>\n\n                ${!this.hideButtonLabel\n                  ? html`\n                      <span class=\"label\">\n                        ${this.label || this.assistiveText}\n                      </span>\n                    `\n                  : null}\n\n                <span slot=\"button\" class=\"arrow\">\n                  ${unsafeSVG(chevronIcon)}\n                </span>\n              </a>\n            `\n          : html`\n              <button\n                class=\"btn interactive\"\n                title=${this.label || this.assistiveText}\n                aria-label=${this.label || this.assistiveText}\n                @click=${this.handleClick}\n              >\n                <slot name=\"button\"></slot>\n\n                ${!this.hideButtonLabel\n                  ? html`\n                      <span class=\"label\">\n                        ${this.label || this.assistiveText}\n                      </span>\n                    `\n                  : null}\n\n                <span slot=\"button\" class=\"arrow\">\n                  ${unsafeSVG(chevronIcon)}\n                </span>\n              </button>\n            `}\n\n        <div class=${classMap(contentClasses)}>\n          <button class=\"go-back\" @click=${() => this._handleBack()}>\n            <span>${unsafeSVG(backIcon)}</span>\n            ${this.backText}\n          </button>\n\n          ${!this.hideMenuLabel\n            ? html`\n                <div class=\"menu-label\">\n                  ${this.label || this.assistiveText}\n                </div>\n              `\n            : null}\n\n          <slot></slot>\n        </div>\n      </div>\n      <div class=\"overlay\" @click=${this._handleOverlayClick}></div>\n    `;\n  }\n\n  private _handleBack() {\n    this.open = false;\n  }\n\n  private handleClick() {\n    this.open = !this.open;\n  }\n\n  private handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  private _handleOverlayClick() {\n    this.open = false;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this.handleClickOut(e));\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-flyout': HeaderFlyout;\n  }\n}\n"],"names":["HeaderFlyout","LitElement","constructor","this","open","anchorLeft","hideArrow","label","hideMenuLabel","hideButtonLabel","assistiveText","href","backText","render","classes","menu","contentClasses","menu__content","slotted","slottedElements","length","html","classMap","handleClick","unsafeSVG","chevronIcon","_handleBack","backIcon","_handleOverlayClick","handleClickOut","e","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderFlyoutScss","__decorate","property","type","Boolean","prototype","String","queryAssignedElements","customElement"],"mappings":"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"}

package/components/global/header/headerFlyouts.js

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{n as o,e as i}from"../../../vendor/lit-446874c7.js";import{i as r,s as n,x as a}from"../../../vendor/lit-element-c6c02f24.js";import{o as d}from"../../../vendor/@kyndryl-design-system/shidoka-icons-774ccfb8.js";var l=r`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{n as o,e as i}from"../../../vendor/lit-446874c7.js";import{i as r,s as n,x as a}from"../../../vendor/lit-element-c6c02f24.js";import{o as d}from"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";var l=r`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -163,7 +163,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
   position: relative;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px 8px 8px;
+  padding: 8px 12px;
   height: 40px;
   cursor: pointer;
   background: none;

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

@@ -29,6 +29,8 @@ export declare class HeaderLink extends LitElement {
     searchLabel: string;
     /** Text for mobile "Back" button. */
     backText: string;
+    /** Add left padding when icon is not provided to align text with links that do have icons. */
+    leftPadding: boolean;
     /** Text for mobile "Back" button. */
     _searchTerm: string;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"headerLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerLink.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,0BAA0B,CAAC;AAKlC;;;;;;GAMG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,MAAkB;IAExC,uBAAuB;IAEvB,IAAI,UAAS;IAEb,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,UAAoB;IAE1B,oIAAoI;IAEpI,GAAG,SAAM;IAET,sEAAsE;IAEtE,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,SAAK;IAEV,+DAA+D;IAE/D,OAAO,UAAS;IAEhB,iFAAiF;IAEjF,WAAW,SAAY;IAEvB,qCAAqC;IAErC,QAAQ,SAAU;IAElB,qCAAqC;IAErC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAEhC;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,YAAY,EAAE,GAAG,CAAM;IAEd,MAAM;IA6Ef,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAyBrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,aAAa;IAuBrB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAEpB;IAEM,YAAY;IAIZ,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,iBAAiB;IAQjB,oBAAoB;CAO9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}
+{"version":3,"file":"headerLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerLink.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,0BAA0B,CAAC;AAKlC;;;;;;GAMG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,MAAkB;IAExC,uBAAuB;IAEvB,IAAI,UAAS;IAEb,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,UAAoB;IAE1B,oIAAoI;IAEpI,GAAG,SAAM;IAET,sEAAsE;IAEtE,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,SAAK;IAEV,+DAA+D;IAE/D,OAAO,UAAS;IAEhB,iFAAiF;IAEjF,WAAW,SAAY;IAEvB,qCAAqC;IAErC,QAAQ,SAAU;IAElB,8FAA8F;IAE9F,WAAW,UAAS;IAEpB,qCAAqC;IAErC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAEhC;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,YAAY,EAAE,GAAG,CAAM;IAEd,MAAM;IA8Ef,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAyBrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAuBtB,OAAO,CAAC,aAAa;IAuBrB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAEpB;IAEM,YAAY;IAIZ,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,iBAAiB;IAQjB,oBAAoB;CAO9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}

package/components/global/header/headerLink.js

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{n as i,t as o,l as n,o as r,e as a}from"../../../vendor/lit-446874c7.js";import{i as l,s,x as d}from"../../../vendor/lit-element-c6c02f24.js";import{debounce as c}from"../../../common/helpers/helpers.js";import"../../reusable/textInput/textInput.js";import{b as h,d as v,s as p}from"../../../vendor/@kyndryl-design-system/shidoka-icons-774ccfb8.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../../reusable/button/button.js";import"../../reusable/button/defs.js";import"../../../common/mixins/form-input.js";var m=l`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{n as i,t as o,l as n,o as r,e as a}from"../../../vendor/lit-446874c7.js";import{i as l,s,x as d}from"../../../vendor/lit-element-c6c02f24.js";import{debounce as c}from"../../../common/helpers/helpers.js";import"../../reusable/textInput/textInput.js";import{b as h,d as v,s as m}from"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../../reusable/button/button.js";import"../../reusable/button/defs.js";import"../../../common/mixins/form-input.js";var p=l`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -163,7 +163,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
   position: relative;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px 8px 8px;
+  padding: 8px 12px;
   height: 40px;
   cursor: pointer;
   background: none;
@@ -234,7 +234,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
   position: relative;
   align-items: center;
   gap: 8px;
-  padding: 12px 12px 12px 8px;
+  padding: 12px;
   text-decoration: none;
   color: var(--kd-color-text-level-primary);
   white-space: nowrap;
@@ -243,10 +243,8 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
-@media (min-width: 42rem) {
-  .nav-link {
-    padding-right: 16px;
-  }
+.nav-link.left-padding {
+  padding-left: 36px;
 }
 .nav-link:focus-visible {
   outline-color: var(--kd-color-border-variants-focus);
@@ -272,8 +270,8 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
 }
 
 .search-icon {
@@ -314,14 +312,8 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
     line-height: var(--kd-line-height-utility-2-max);
   }
 }
-.level--2 ::slotted(span),
-.level--2 ::slotted(svg), .level--3 ::slotted(span),
-.level--3 ::slotted(svg) {
-  width: 16px;
-  height: 16px;
-}
 .level--2 .nav-link {
-  padding: 8px 16px 8px 8px;
+  padding: 8px 12px;
   height: 40px;
 }
 .level--3 .nav-link {
@@ -330,7 +322,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
   line-height: var(--kd-line-height-utility-2-sm);
   font-weight: var(--kd-font-weight-regular);
   letter-spacing: var(--kd-letter-spacing-5);
-  padding: 6px 16px 6px 8px;
+  padding: 6px 12px;
   height: 30px;
 }
 @media (min-width: 42rem) {
@@ -420,7 +412,7 @@ kyn-text-input {
     transform: scaleX(0);
     transform-origin: right;
   }
-}`;let u=class extends s{constructor(){super(...arguments),this.open=!1,this.href="",this.target="_self",this.rel="",this.isActive=!1,this.level=1,this.divider=!1,this.searchLabel="Search",this.backText="Back",this._searchTerm="",this.menuPosition={},this._debounceResize=c((()=>{this.determineLevel()}))}render(){const e={menu:this.slottedEls.length,[`level--${this.level}`]:!0,divider:this.divider,open:this.open},i={"nav-link":!0,active:this.isActive,interactive:1==this.level},o={menu__content:!0,slotted:this.slottedEls.length},n=this.querySelectorAll(":scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link");return d`
+}`;let u=class extends s{constructor(){super(...arguments),this.open=!1,this.href="",this.target="_self",this.rel="",this.isActive=!1,this.level=1,this.divider=!1,this.searchLabel="Search",this.backText="Back",this.leftPadding=!1,this._searchTerm="",this.menuPosition={},this._debounceResize=c((()=>{this.determineLevel()}))}render(){const e={menu:this.slottedEls.length,[`level--${this.level}`]:!0,divider:this.divider,open:this.open},i={"nav-link":!0,active:this.isActive,interactive:1==this.level,"padding-left":this.leftPadding},o={menu__content:!0,slotted:this.slottedEls.length},n=this.querySelectorAll(":scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link");return d`
       <div
         class="${r(e)}"
         @pointerleave=${e=>this.handlePointerLeave(e)}
@@ -458,7 +450,7 @@ kyn-text-input {
                   @on-input=${e=>this._handleSearch(e)}
                 >
                   <span slot="icon" class="search-icon">
-                    ${t(p)}
+                    ${t(m)}
                   </span>
                   ${this.searchLabel}
                 </kyn-text-input>
@@ -467,5 +459,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 o=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<o.length;e++)n+=o[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;"KYN-HEADER-LINK"===e.nodeName||"links"===e.slot?this.level=e.level+1:window.innerWidth<672&&"KYN-HEADER-FLYOUT"===e.nodeName?this.level=2:this.level=1}_positionMenu(){var e,t;const i=this.getBoundingClientRect(),o=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=o.height/2,a=n+r>window.innerHeight?n-r-(n+r-window.innerHeight):n-r;this.menuPosition={top:a<56?56:a,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()}};u.styles=m,e([i({type:Boolean})],u.prototype,"open",void 0),e([i({type:String})],u.prototype,"href",void 0),e([i({type:String})],u.prototype,"target",void 0),e([i({type:String})],u.prototype,"rel",void 0),e([i({type:Boolean})],u.prototype,"isActive",void 0),e([o()],u.prototype,"level",void 0),e([i({type:Boolean})],u.prototype,"divider",void 0),e([i({type:String})],u.prototype,"searchLabel",void 0),e([i({type:String})],u.prototype,"backText",void 0),e([o()],u.prototype,"_searchTerm",void 0),e([n({slot:"links"})],u.prototype,"slottedEls",void 0),e([o()],u.prototype,"_leaveTimer",void 0),e([o()],u.prototype,"menuPosition",void 0),u=e([a("kyn-header-link")],u);export{u 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 o=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<o.length;e++)n+=o[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(),o=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=o.height/2,a=n+r>window.innerHeight?n-r-(n+r-window.innerHeight):n-r;this.menuPosition={top:a<56?56:a,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()}};u.styles=p,e([i({type:Boolean})],u.prototype,"open",void 0),e([i({type:String})],u.prototype,"href",void 0),e([i({type:String})],u.prototype,"target",void 0),e([i({type:String})],u.prototype,"rel",void 0),e([i({type:Boolean})],u.prototype,"isActive",void 0),e([o()],u.prototype,"level",void 0),e([i({type:Boolean})],u.prototype,"divider",void 0),e([i({type:String})],u.prototype,"searchLabel",void 0),e([i({type:String})],u.prototype,"backText",void 0),e([i({type:Boolean})],u.prototype,"leftPadding",void 0),e([o()],u.prototype,"_searchTerm",void 0),e([n({slot:"links"})],u.prototype,"slottedEls",void 0),e([o()],u.prototype,"_leaveTimer",void 0),e([o()],u.prototype,"menuPosition",void 0),u=e([a("kyn-header-link")],u);export{u 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 } 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';\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.\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 = HeaderLinkScss;\n\n  /** Link open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Link url. */\n  @property({ type: String })\n  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  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  rel = '';\n\n  /** Link active state, for example when URL path matches link href. */\n  @property({ type: Boolean })\n  isActive = false;\n\n  /** Link level, supports two levels.\n   * @ignore\n   */\n  @state()\n  level = 1;\n\n  /** DEPRECATED. Adds a 1px shadow to the bottom of the link. */\n  @property({ type: Boolean })\n  divider = false;\n\n  /** Label for sub-menu link search input, which is visible with > 5 sub-links. */\n  @property({ type: String })\n  searchLabel = 'Search';\n\n  /** Text for mobile \"Back\" button. */\n  @property({ type: String })\n  backText = 'Back';\n\n  /** Text for mobile \"Back\" button. */\n  @state()\n  _searchTerm = '';\n\n  /**\n   * Queries any slotted HTML elements.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links' })\n  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  _leaveTimer: any;\n\n  /** Menu positioning\n   * @internal\n   */\n  @state()\n  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    };\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 > 5\n            ? html`\n                <kyn-text-input\n                  hideLabel\n                  size=\"sm\"\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\n    if (\n      ParentNode.nodeName === 'KYN-HEADER-LINK' ||\n      ParentNode.slot === 'links'\n    ) {\n      this.level = ParentNode.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","LitElement","constructor","this","open","href","target","rel","isActive","level","divider","searchLabel","backText","_searchTerm","menuPosition","_debounceResize","debounce","determineLevel","render","classes","menu","slottedEls","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","value","toLowerCase","_searchFilter","forEach","link","nodes","_b","_a","shadowRoot","querySelector","assignedNodes","flatten","linkText","i","textContent","trim","includes","style","display","_positionMenu","requestUpdate","pointerType","clearTimeout","_leaveTimer","_enterTimer","setTimeout","preventDefault","event","CustomEvent","origEvent","defaultPrevented","dispatchEvent","handleClickOut","composedPath","ParentNode","parentNode","nodeName","slot","window","innerWidth","LinkBounds","getBoundingClientRect","MenuBounds","LinkHalf","height","MenuHalf","Top","innerHeight","right","firstUpdated","willUpdate","changedProps","has","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderLinkScss","__decorate","property","type","Boolean","prototype","String","state","queryAssignedElements","customElement"],"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 } 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';\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.\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 = HeaderLinkScss;\n\n  /** Link open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Link url. */\n  @property({ type: String })\n  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  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  rel = '';\n\n  /** Link active state, for example when URL path matches link href. */\n  @property({ type: Boolean })\n  isActive = false;\n\n  /** Link level, supports two levels.\n   * @ignore\n   */\n  @state()\n  level = 1;\n\n  /** DEPRECATED. Adds a 1px shadow to the bottom of the link. */\n  @property({ type: Boolean })\n  divider = false;\n\n  /** Label for sub-menu link search input, which is visible with > 5 sub-links. */\n  @property({ type: String })\n  searchLabel = 'Search';\n\n  /** Text for mobile \"Back\" button. */\n  @property({ type: String })\n  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  leftPadding = false;\n\n  /** Text for mobile \"Back\" button. */\n  @state()\n  _searchTerm = '';\n\n  /**\n   * Queries any slotted HTML elements.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links' })\n  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  _leaveTimer: any;\n\n  /** Menu positioning\n   * @internal\n   */\n  @state()\n  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 > 5\n            ? html`\n                <kyn-text-input\n                  hideLabel\n                  size=\"sm\"\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","LitElement","constructor","this","open","href","target","rel","isActive","level","divider","searchLabel","backText","leftPadding","_searchTerm","menuPosition","_debounceResize","debounce","determineLevel","render","classes","menu","slottedEls","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","value","toLowerCase","_searchFilter","forEach","link","nodes","_b","_a","shadowRoot","querySelector","assignedNodes","flatten","linkText","i","textContent","trim","includes","style","display","_positionMenu","requestUpdate","pointerType","clearTimeout","_leaveTimer","_enterTimer","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","styles","HeaderLinkScss","__decorate","property","type","Boolean","prototype","String","state","queryAssignedElements","slot","customElement"],"mappings":"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"}

package/components/global/header/headerNav.js

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{t as o,n as i,o as n,e as r}from"../../../vendor/lit-446874c7.js";import{i as a,s as d,x as l}from"../../../vendor/lit-element-c6c02f24.js";import{e as s,m as c}from"../../../vendor/@kyndryl-design-system/shidoka-icons-774ccfb8.js";var u=a`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{t as o,n as i,o as n,e as r}from"../../../vendor/lit-446874c7.js";import{i as a,s as d,x as l}from"../../../vendor/lit-element-c6c02f24.js";import{e as s,m as c}from"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";var u=a`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -163,7 +163,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
   position: relative;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px 8px 8px;
+  padding: 8px 12px;
   height: 40px;
   cursor: pointer;
   background: none;

package/components/global/header/index.js

@@ -1,2 +1,2 @@
-export{Header}from"./header.js";export{HeaderNav}from"./headerNav.js";export{HeaderLink}from"./headerLink.js";export{HeaderCategory}from"./headerCategory.js";export{HeaderDivider}from"./headerDivider.js";export{HeaderFlyouts}from"./headerFlyouts.js";export{HeaderFlyout}from"./headerFlyout.js";export{HeaderUserProfile}from"./headerUserProfile.js";export{HeaderPanelLink}from"./headerPanelLink.js";export{HeaderNotificationPanel}from"./headerNotificationPanel.js";import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-446874c7.js";import"../../../vendor/lit-element-c6c02f24.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@kyndryl-design-system/shidoka-foundation-2d7bab68.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-774ccfb8.js";import"../../../common/helpers/helpers.js";import"../../reusable/textInput/textInput.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../../reusable/button/button.js";import"../../reusable/button/defs.js";import"../../../common/mixins/form-input.js";import"../../reusable/link/link.js";import"../../reusable/link/defs.js";
+export{Header}from"./header.js";export{HeaderNav}from"./headerNav.js";export{HeaderLink}from"./headerLink.js";export{HeaderCategory}from"./headerCategory.js";export{HeaderDivider}from"./headerDivider.js";export{HeaderFlyouts}from"./headerFlyouts.js";export{HeaderFlyout}from"./headerFlyout.js";export{HeaderUserProfile}from"./headerUserProfile.js";export{HeaderPanelLink}from"./headerPanelLink.js";export{HeaderNotificationPanel}from"./headerNotificationPanel.js";import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-446874c7.js";import"../../../vendor/lit-element-c6c02f24.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@kyndryl-design-system/shidoka-foundation-2d7bab68.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";import"../../../common/helpers/helpers.js";import"../../reusable/textInput/textInput.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../../reusable/button/button.js";import"../../reusable/button/defs.js";import"../../../common/mixins/form-input.js";import"../../reusable/link/link.js";import"../../reusable/link/defs.js";
 //# sourceMappingURL=index.js.map

package/components/global/localNav/index.js

@@ -1,2 +1,2 @@
-export{LocalNav}from"./localNav.js";export{LocalNavLink}from"./localNavLink.js";export{LocalNavDivider}from"./localNavDivider.js";import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/lit-446874c7.js";import"../../../vendor/lit-element-c6c02f24.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../../reusable/button/button.js";import"../../../common/helpers/helpers.js";import"../../reusable/button/defs.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-774ccfb8.js";
+export{LocalNav}from"./localNav.js";export{LocalNavLink}from"./localNavLink.js";export{LocalNavDivider}from"./localNavDivider.js";import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/lit-446874c7.js";import"../../../vendor/lit-element-c6c02f24.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../../reusable/button/button.js";import"../../../common/helpers/helpers.js";import"../../reusable/button/defs.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"localNav.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNav.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,uBAAuB,CAAC;AAc/B;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,MAAgB;IAEtC,8BAA8B;IAE9B,MAAM,UAAS;IAEf,iCAAiC;IAEjC,WAAW;;;;;;MAAuB;IAElC;;OAEG;IAEH,YAAY;;;;;;MAAuB;IAEnC;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,eAAe,UAAS;IAExB;;OAEG;IAEH,eAAe,EAAG,MAAM,CAAC;IAEzB;;OAEG;IAEH,SAAS,EAAG,GAAG,CAAC;IAEhB;;OAEG;IAEH,SAAS,EAAG,GAAG,CAAC;IAEhB;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAE,GAAG,CAAC;IAER,MAAM;IAiDf,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,iBAAiB;IAIhB,UAAU,CAAC,YAAY,EAAE,GAAG;IAcrC,OAAO,CAAC,eAAe;IAMd,iBAAiB;IAOjB,oBAAoB;CAQ9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,QAAQ,CAAC;KAC3B;CACF"}
+{"version":3,"file":"localNav.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNav.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,uBAAuB,CAAC;AAc/B;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,MAAgB;IAEtC,8BAA8B;IAE9B,MAAM,UAAS;IAEf,iCAAiC;IAEjC,WAAW;;;;;;MAAuB;IAElC;;OAEG;IAEH,YAAY;;;;;;MAAuB;IAEnC;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,eAAe,UAAS;IAExB;;OAEG;IAEH,eAAe,EAAG,MAAM,CAAC;IAEzB;;OAEG;IAEH,SAAS,EAAG,GAAG,CAAC;IAEhB;;OAEG;IAEH,SAAS,EAAG,GAAG,CAAC;IAEhB;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAE,GAAG,CAAC;IAER,MAAM;IAiDf,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,iBAAiB;IAIhB,UAAU,CAAC,YAAY,EAAE,GAAG;IAcrC,OAAO,CAAC,eAAe;IAMd,iBAAiB;IAOjB,oBAAoB;CAQ9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,QAAQ,CAAC;KAC3B;CACF"}