@kyndryl-design-system/shidoka-applications 2.18.0 → 2.18.2

package/common/helpers/swiper.js

@@ -1,2 +1,2 @@
-import{a as e}from"../../vendor/@kyndryl-design-system/shidoka-icons-a6eca21f.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-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};
 //# 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-a6eca21f.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,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`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -98,7 +98,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as s,l as
   position: absolute;
   right: 0.5rem;
   top: 0.5rem;
-}`;const y={sourcesText:"Sources used",foundSources:"Found sources",showMore:"Show more",showLess:"Show less",positiveFeedback:"Share what you liked",negativeFeedback:"Help us improve"};let g=class extends a{constructor(){super(...arguments),this.sourcesOpened=!1,this.feedbackOpened=!1,this.sourcesDisabled=!1,this.feedbackDisabled=!1,this.revealAllSources=!1,this.textStrings=y,this.closeText="Close",this._limitCount=4,this.limitRevealed=!1,this._textStrings=y,this._selectedFeedbackType=null,this.thumbsUpClickCount=0,this.thumbsDownClickCount=0}render(){const e=c({"kyn-sources":!0,opened:this.sourcesOpened,disabled:this.sourcesDisabled}),t=c({"kyn-pos-feedback":!0,disabled:this.feedbackDisabled&&"positive"===this._selectedFeedbackType}),s=c({"kyn-neg-feedback":!0,disabled:this.feedbackDisabled&&"positive"===this._selectedFeedbackType});return l`
+}`;const y={sourcesText:"Sources",foundSources:"Found sources",showMore:"Show more",showLess:"Show less",positiveFeedback:"Share what you liked",negativeFeedback:"Help us improve"};let g=class extends a{constructor(){super(...arguments),this.sourcesOpened=!1,this.feedbackOpened=!1,this.sourcesDisabled=!1,this.feedbackDisabled=!1,this.revealAllSources=!1,this.textStrings=y,this.closeText="Close",this._limitCount=4,this.limitRevealed=!1,this._textStrings=y,this._selectedFeedbackType=null,this.thumbsUpClickCount=0,this.thumbsDownClickCount=0}render(){const e=c({"kyn-sources":!0,opened:this.sourcesOpened,disabled:this.sourcesDisabled}),t=c({"kyn-pos-feedback":!0,disabled:this.feedbackDisabled&&"positive"===this._selectedFeedbackType}),s=c({"kyn-neg-feedback":!0,disabled:this.feedbackDisabled&&"positive"===this._selectedFeedbackType});return l`
       <div class="action-bar">
         <div class="left-div">
           <slot name="copy"></slot>

package/components/ai/sourcesFeedback/aiSourcesFeedback.js.map

@@ -1 +1 @@
-{"version":3,"file":"aiSourcesFeedback.js","sources":["../../../../src/components/ai/sourcesFeedback/aiSourcesFeedback.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { deepmerge } from 'deepmerge-ts';\nimport { classMap } from 'lit-html/directives/class-map.js';\n\nimport stylesheet from './aiSourcesFeedback.scss';\n\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport thumbsUpIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-up.svg';\nimport thumbsDownIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-down.svg';\nimport thumbsUpFilledIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-up-filled.svg';\nimport thumbsDownFilledIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-down-filled.svg';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport '../../reusable/link';\nimport '../../reusable/card';\nimport '../../reusable/button';\n\nconst _defaultTextStrings = {\n  sourcesText: 'Sources used',\n  foundSources: 'Found sources',\n  showMore: 'Show more',\n  showLess: 'Show less',\n  positiveFeedback: 'Share what you liked',\n  negativeFeedback: 'Help us improve',\n};\n\n/**\n * AISourcesFeedback Component.\n *\n * @slot copy - copy button\n * @slot sources - source cards in source panel.\n * @slot feedback-form - Positive feedback form.\n * @fires on-toggle - Emits the `opened` state when the panel item opens/closes.\n * @fires on-feedback-deselected - Emits when thumbs-up or thumbs-down button is deselected.\n */\n\n@customElement('kyn-ai-sources-feedback')\nexport class AISourcesFeedback extends LitElement {\n  static override styles = [stylesheet];\n\n  /** expandable anchor opened state for Sources used. */\n  @property({ type: Boolean })\n  sourcesOpened = false;\n\n  /** expandable anchor opened state for Feedback buttons. */\n  @property({ type: Boolean })\n  feedbackOpened = false;\n\n  /** expandable anchor disabled state for Sources used.. */\n  @property({ type: Boolean })\n  sourcesDisabled = false;\n\n  /** expandable anchor disabled state for Feedback buttons. */\n  @property({ type: Boolean })\n  feedbackDisabled = false;\n\n  /** Limits visible sources behind a \"Show more\" button. */\n  @property({ type: Boolean })\n  revealAllSources = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Close button text. */\n  @property({ type: String })\n  closeText = 'Close';\n\n  /** Number of sources visible when limited.\n   * @internal\n   */\n  @state()\n  _limitCount = 4;\n\n  /** Sources limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /** Selecting Positive or Negative Feedback\n   * @internal\n   */\n  @state()\n  _selectedFeedbackType: any = null;\n\n  /**\n   * Queries slotted sources.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'sources' })\n  _sourceEls!: any;\n\n  /**  Sources anchor text\n   * @internal\n   */\n  @state()\n  sourcesOriginalText: any;\n\n  /**  Tracks the number of clicks on thumbs up icon\n   * @internal\n   */\n  @state() thumbsUpClickCount = 0;\n\n  /**  Tracks the number of clicks on thumbs down icon\n   * @internal\n   */\n  @state() thumbsDownClickCount = 0;\n\n  override render() {\n    const classesSources: any = classMap({\n      'kyn-sources': true,\n      opened: this.sourcesOpened,\n      disabled: this.sourcesDisabled,\n    });\n    const classesFeedback1: any = classMap({\n      'kyn-pos-feedback': true,\n      disabled:\n        this.feedbackDisabled && this._selectedFeedbackType === 'positive',\n    });\n    const classesFeedback2: any = classMap({\n      'kyn-neg-feedback': true,\n      disabled:\n        this.feedbackDisabled && this._selectedFeedbackType === 'positive',\n    });\n    return html`\n      <div class=\"action-bar\">\n        <div class=\"left-div\">\n          <slot name=\"copy\"></slot>\n\n          <div class=\"${classesSources}\">\n            <kyn-button\n              kind=\"ghost\"\n              size=\"small\"\n              class=\"kyn-sources-title\"\n              iconPosition=\"right\"\n              aria-controls=\"kyn-sources-body\"\n              aria-expanded=${this.sourcesOpened}\n              ?disabled=${this.sourcesDisabled}\n              @on-click=\"${(e: Event) => this._handleClick(e, 'sources')}\"\n              id=\"kyn-sources-title\"\n            >\n              ${this._textStrings.sourcesText}\n              <span class=\"expand-icon\" slot=\"icon\"\n                >${unsafeSVG(chevronIcon)}</span\n              >\n            </kyn-button>\n          </div>\n        </div>\n\n        <div class=\"right-div\">\n          <div class=\"${classesFeedback1}\">\n            <kyn-button\n              kind=\"ghost\"\n              size=\"small\"\n              id=\"kyn-feedback-title-positive\"\n              class=\"kyn-feedback-title\"\n              aria-controls=\"kyn-feedback-body\"\n              aria-expanded=${this.feedbackOpened}\n              ?disabled=${this.feedbackDisabled}\n              description=${this._textStrings.positiveFeedback}\n              @on-click=${(e: Event) =>\n                this._handleClick(e, 'feedback', 'positive')}\n            >\n              <span slot=\"icon\">\n                ${unsafeSVG(\n                  this.thumbsUpClickCount % 2 === 0\n                    ? thumbsUpIcon\n                    : thumbsUpFilledIcon\n                )}\n              </span>\n            </kyn-button>\n          </div>\n\n          <div class=\"${classesFeedback2}\">\n            <kyn-button\n              kind=\"ghost\"\n              size=\"small\"\n              id=\"kyn-feedback-title-negative\"\n              class=\"kyn-feedback-title\"\n              aria-controls=\"kyn-feedback-body\"\n              aria-expanded=${this.feedbackOpened}\n              ?disabled=${this.feedbackDisabled}\n              description=${this._textStrings.negativeFeedback}\n              @on-click=\"${(e: Event) =>\n                this._handleClick(e, 'feedback', 'negative')}\"\n            >\n              <span slot=\"icon\"\n                >${unsafeSVG(\n                  this.thumbsDownClickCount % 2 === 0\n                    ? thumbsDownIcon\n                    : thumbsDownFilledIcon\n                )}\n              </span>\n            </kyn-button>\n          </div>\n        </div>\n      </div>\n\n      <div\n        class=\"${classMap({\n          opened: this.sourcesOpened,\n          'kyn-sources-body': true,\n        })}\"\n        id=\"kyn-sources-body\"\n        role=\"region\"\n        aria-labelledby=\"kyn-sources-title\"\n      >\n        <div class=\"close-container\">\n          <kyn-button\n            class=\"close\"\n            @on-click=${(e: Event) => this._handleClick(e, 'sources')}\n            }}\n            kind=\"ghost\"\n            size=\"small\"\n            description=${this.closeText}\n          >\n            <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n          </kyn-button>\n        </div>\n\n        <div class=\"found-sources\">\n          ${this._textStrings.foundSources} (${this._sourceEls.length}) :\n        </div>\n        <div class=\"card-container\">\n          <slot name=\"sources\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        ${!this.revealAllSources && this._sourceEls.length > this._limitCount\n          ? html`\n              <kyn-button\n                class=\"reveal-toggle\"\n                kind=\"ghost\"\n                size=\"small\"\n                @on-click=${() =>\n                  this._toggleLimitRevealed(!this.limitRevealed)}\n              >\n                ${this.limitRevealed\n                  ? html`${this._textStrings.showLess}`\n                  : html`\n                      ${this._textStrings.showMore}\n                      (${this._sourceEls.length - this._limitCount})\n                    `}\n              </kyn-button>\n            `\n          : null}\n      </div>\n\n      <div\n        class=\"${classMap({\n          opened: this.feedbackOpened,\n          'kyn-feedback-body': true,\n        })}\"\n        id=\"kyn-feedback-body\"\n        role=\"region\"\n        aria-labelledby=\"kyn-feedback-title-${this._selectedFeedbackType\n          ? 'positive'\n          : 'negative'}\"\n      >\n        <div class=\"close-container\">\n          <kyn-button\n            class=\"close\"\n            description=${this.closeText}\n            @on-click=${(e: Event) =>\n              this._handleClick(e, 'feedback', this._selectedFeedbackType)}\n            }}\n            kind=\"ghost\"\n            size=\"small\"\n          >\n            <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n          </kyn-button>\n        </div>\n\n        <slot name=\"feedback-form\"></slot>\n      </div>\n    `;\n  }\n  private _handleClick(\n    e: Event,\n    panel: 'sources' | 'feedback',\n    feedbackType?: 'positive' | 'negative'\n  ) {\n    e.preventDefault();\n\n    if (\n      (panel === 'sources' && this.sourcesDisabled) ||\n      (panel === 'feedback' && this.feedbackDisabled)\n    ) {\n      return;\n    }\n\n    const target = e.target as HTMLElement;\n    const isFeedbackButton = target.id?.includes('kyn-feedback-title');\n\n    if (isFeedbackButton && feedbackType) {\n      this._updateFeedbackCounts(feedbackType);\n    }\n\n    if (panel === 'sources' || this._shouldEmitFeedbackEvent(feedbackType)) {\n      this._emitToggleEvent(panel, feedbackType);\n    }\n  }\n\n  private _updateFeedbackCounts(feedbackType: 'positive' | 'negative') {\n    // Checks if the feedbackType was already selected before updating the counts.\n    const wasSelected =\n      (feedbackType === 'positive' && this.thumbsUpClickCount % 2 !== 0) ||\n      (feedbackType === 'negative' && this.thumbsDownClickCount % 2 !== 0);\n\n    if (feedbackType === 'positive') {\n      this.thumbsUpClickCount++;\n      this.thumbsDownClickCount -= this.thumbsDownClickCount % 2;\n    } else {\n      this.thumbsDownClickCount++;\n      this.thumbsUpClickCount -= this.thumbsUpClickCount % 2;\n    }\n\n    if (wasSelected) {\n      this.dispatchEvent(\n        new CustomEvent('on-feedback-deselected', {\n          detail: { feedbackType },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  private _shouldEmitFeedbackEvent(\n    feedbackType?: 'positive' | 'negative'\n  ): boolean {\n    if (!feedbackType) return false;\n    const isOddClick = (count: number) => count % 2 !== 0;\n\n    return (\n      (feedbackType === 'positive' &&\n        (isOddClick(this.thumbsUpClickCount) ||\n          (this.feedbackOpened && !isOddClick(this.thumbsUpClickCount)))) ||\n      (feedbackType === 'negative' &&\n        (isOddClick(this.thumbsDownClickCount) ||\n          (this.feedbackOpened && !isOddClick(this.thumbsDownClickCount))))\n    );\n  }\n\n  private _emitToggleEvent(\n    panel: 'sources' | 'feedback',\n    feedbackType?: 'positive' | 'negative'\n  ) {\n    if (panel === 'sources') {\n      this.sourcesOpened = !this.sourcesOpened;\n      this.feedbackOpened = false;\n    } else if (panel === 'feedback') {\n      this.sourcesOpened = false;\n      this._toggleFeedbackPanel(feedbackType);\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('on-toggle', {\n        detail: {\n          sourcesOpened: this.sourcesOpened,\n          feedbackOpened: this.feedbackOpened,\n          selectedFeedbackType: this._selectedFeedbackType,\n        },\n      })\n    );\n  }\n\n  private _toggleFeedbackPanel(feedbackType?: 'positive' | 'negative') {\n    if (!feedbackType) return;\n\n    if (this._selectedFeedbackType === feedbackType && this.feedbackOpened) {\n      this.feedbackOpened = false;\n      this._selectedFeedbackType = null;\n    } else {\n      this.feedbackOpened = true;\n      this._selectedFeedbackType = feedbackType;\n    }\n  }\n\n  protected _handleSlotChange() {\n    this._toggleLimitRevealed(this.limitRevealed);\n  }\n\n  private _toggleLimitRevealed(revealed: boolean) {\n    this.limitRevealed = revealed;\n\n    this._sourceEls.forEach((sourceEl: any, index: any) => {\n      if (this.revealAllSources || this.limitRevealed) {\n        sourceEl.style.display = 'block';\n      } else {\n        if (index < this._limitCount) {\n          sourceEl.style.display = 'block';\n        } else {\n          sourceEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n      this.sourcesOriginalText = this._textStrings.sourcesText;\n    }\n  }\n\n  protected override updated(changedProps: any): void {\n    if (\n      changedProps.has('revealAllSources') &&\n      changedProps.get('revealAllSources') !== undefined\n    ) {\n      this._toggleLimitRevealed(false);\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('resize', () => this.updateSourcesText());\n  }\n\n  override disconnectedCallback() {\n    window.removeEventListener('resize', () => this.updateSourcesText());\n    super.disconnectedCallback();\n  }\n\n  private updateSourcesText() {\n    this._textStrings.sourcesText =\n      window.innerWidth > 672\n        ? this.sourcesOriginalText\n        : this.sourcesOriginalText.split(' ')[0];\n    this.requestUpdate();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-ai-sources-feedback': AISourcesFeedback;\n  }\n}\n"],"names":["_defaultTextStrings","sourcesText","foundSources","showMore","showLess","positiveFeedback","negativeFeedback","AISourcesFeedback","LitElement","constructor","this","sourcesOpened","feedbackOpened","sourcesDisabled","feedbackDisabled","revealAllSources","textStrings","closeText","_limitCount","limitRevealed","_textStrings","_selectedFeedbackType","thumbsUpClickCount","thumbsDownClickCount","render","classesSources","classMap","opened","disabled","classesFeedback1","classesFeedback2","html","e","_handleClick","unsafeSVG","chevronIcon","thumbsUpIcon","thumbsUpFilledIcon","thumbsDownIcon","thumbsDownFilledIcon","closeIcon","_sourceEls","length","_handleSlotChange","_toggleLimitRevealed","panel","feedbackType","preventDefault","_a","target","id","includes","_updateFeedbackCounts","_shouldEmitFeedbackEvent","_emitToggleEvent","wasSelected","dispatchEvent","CustomEvent","detail","bubbles","composed","isOddClick","count","_toggleFeedbackPanel","selectedFeedbackType","revealed","forEach","sourceEl","index","style","display","willUpdate","changedProps","has","deepmerge","sourcesOriginalText","updated","undefined","get","connectedCallback","super","window","addEventListener","updateSourcesText","disconnectedCallback","removeEventListener","innerWidth","split","requestUpdate","styles","stylesheet","__decorate","property","type","Boolean","prototype","Object","String","state","queryAssignedElements","slot","customElement"],"mappings":"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"}
+{"version":3,"file":"aiSourcesFeedback.js","sources":["../../../../src/components/ai/sourcesFeedback/aiSourcesFeedback.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { deepmerge } from 'deepmerge-ts';\nimport { classMap } from 'lit-html/directives/class-map.js';\n\nimport stylesheet from './aiSourcesFeedback.scss';\n\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport thumbsUpIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-up.svg';\nimport thumbsDownIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-down.svg';\nimport thumbsUpFilledIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-up-filled.svg';\nimport thumbsDownFilledIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-down-filled.svg';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport '../../reusable/link';\nimport '../../reusable/card';\nimport '../../reusable/button';\n\nconst _defaultTextStrings = {\n  sourcesText: 'Sources',\n  foundSources: 'Found sources',\n  showMore: 'Show more',\n  showLess: 'Show less',\n  positiveFeedback: 'Share what you liked',\n  negativeFeedback: 'Help us improve',\n};\n\n/**\n * AISourcesFeedback Component.\n *\n * @slot copy - copy button\n * @slot sources - source cards in source panel.\n * @slot feedback-form - Positive feedback form.\n * @fires on-toggle - Emits the `opened` state when the panel item opens/closes.\n * @fires on-feedback-deselected - Emits when thumbs-up or thumbs-down button is deselected.\n */\n\n@customElement('kyn-ai-sources-feedback')\nexport class AISourcesFeedback extends LitElement {\n  static override styles = [stylesheet];\n\n  /** expandable anchor opened state for Sources used. */\n  @property({ type: Boolean })\n  sourcesOpened = false;\n\n  /** expandable anchor opened state for Feedback buttons. */\n  @property({ type: Boolean })\n  feedbackOpened = false;\n\n  /** expandable anchor disabled state for Sources used.. */\n  @property({ type: Boolean })\n  sourcesDisabled = false;\n\n  /** expandable anchor disabled state for Feedback buttons. */\n  @property({ type: Boolean })\n  feedbackDisabled = false;\n\n  /** Limits visible sources behind a \"Show more\" button. */\n  @property({ type: Boolean })\n  revealAllSources = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Close button text. */\n  @property({ type: String })\n  closeText = 'Close';\n\n  /** Number of sources visible when limited.\n   * @internal\n   */\n  @state()\n  _limitCount = 4;\n\n  /** Sources limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /** Selecting Positive or Negative Feedback\n   * @internal\n   */\n  @state()\n  _selectedFeedbackType: any = null;\n\n  /**\n   * Queries slotted sources.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'sources' })\n  _sourceEls!: any;\n\n  /**  Sources anchor text\n   * @internal\n   */\n  @state()\n  sourcesOriginalText: any;\n\n  /**  Tracks the number of clicks on thumbs up icon\n   * @internal\n   */\n  @state() thumbsUpClickCount = 0;\n\n  /**  Tracks the number of clicks on thumbs down icon\n   * @internal\n   */\n  @state() thumbsDownClickCount = 0;\n\n  override render() {\n    const classesSources: any = classMap({\n      'kyn-sources': true,\n      opened: this.sourcesOpened,\n      disabled: this.sourcesDisabled,\n    });\n    const classesFeedback1: any = classMap({\n      'kyn-pos-feedback': true,\n      disabled:\n        this.feedbackDisabled && this._selectedFeedbackType === 'positive',\n    });\n    const classesFeedback2: any = classMap({\n      'kyn-neg-feedback': true,\n      disabled:\n        this.feedbackDisabled && this._selectedFeedbackType === 'positive',\n    });\n    return html`\n      <div class=\"action-bar\">\n        <div class=\"left-div\">\n          <slot name=\"copy\"></slot>\n\n          <div class=\"${classesSources}\">\n            <kyn-button\n              kind=\"ghost\"\n              size=\"small\"\n              class=\"kyn-sources-title\"\n              iconPosition=\"right\"\n              aria-controls=\"kyn-sources-body\"\n              aria-expanded=${this.sourcesOpened}\n              ?disabled=${this.sourcesDisabled}\n              @on-click=\"${(e: Event) => this._handleClick(e, 'sources')}\"\n              id=\"kyn-sources-title\"\n            >\n              ${this._textStrings.sourcesText}\n              <span class=\"expand-icon\" slot=\"icon\"\n                >${unsafeSVG(chevronIcon)}</span\n              >\n            </kyn-button>\n          </div>\n        </div>\n\n        <div class=\"right-div\">\n          <div class=\"${classesFeedback1}\">\n            <kyn-button\n              kind=\"ghost\"\n              size=\"small\"\n              id=\"kyn-feedback-title-positive\"\n              class=\"kyn-feedback-title\"\n              aria-controls=\"kyn-feedback-body\"\n              aria-expanded=${this.feedbackOpened}\n              ?disabled=${this.feedbackDisabled}\n              description=${this._textStrings.positiveFeedback}\n              @on-click=${(e: Event) =>\n                this._handleClick(e, 'feedback', 'positive')}\n            >\n              <span slot=\"icon\">\n                ${unsafeSVG(\n                  this.thumbsUpClickCount % 2 === 0\n                    ? thumbsUpIcon\n                    : thumbsUpFilledIcon\n                )}\n              </span>\n            </kyn-button>\n          </div>\n\n          <div class=\"${classesFeedback2}\">\n            <kyn-button\n              kind=\"ghost\"\n              size=\"small\"\n              id=\"kyn-feedback-title-negative\"\n              class=\"kyn-feedback-title\"\n              aria-controls=\"kyn-feedback-body\"\n              aria-expanded=${this.feedbackOpened}\n              ?disabled=${this.feedbackDisabled}\n              description=${this._textStrings.negativeFeedback}\n              @on-click=\"${(e: Event) =>\n                this._handleClick(e, 'feedback', 'negative')}\"\n            >\n              <span slot=\"icon\"\n                >${unsafeSVG(\n                  this.thumbsDownClickCount % 2 === 0\n                    ? thumbsDownIcon\n                    : thumbsDownFilledIcon\n                )}\n              </span>\n            </kyn-button>\n          </div>\n        </div>\n      </div>\n\n      <div\n        class=\"${classMap({\n          opened: this.sourcesOpened,\n          'kyn-sources-body': true,\n        })}\"\n        id=\"kyn-sources-body\"\n        role=\"region\"\n        aria-labelledby=\"kyn-sources-title\"\n      >\n        <div class=\"close-container\">\n          <kyn-button\n            class=\"close\"\n            @on-click=${(e: Event) => this._handleClick(e, 'sources')}\n            }}\n            kind=\"ghost\"\n            size=\"small\"\n            description=${this.closeText}\n          >\n            <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n          </kyn-button>\n        </div>\n\n        <div class=\"found-sources\">\n          ${this._textStrings.foundSources} (${this._sourceEls.length}) :\n        </div>\n        <div class=\"card-container\">\n          <slot name=\"sources\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        ${!this.revealAllSources && this._sourceEls.length > this._limitCount\n          ? html`\n              <kyn-button\n                class=\"reveal-toggle\"\n                kind=\"ghost\"\n                size=\"small\"\n                @on-click=${() =>\n                  this._toggleLimitRevealed(!this.limitRevealed)}\n              >\n                ${this.limitRevealed\n                  ? html`${this._textStrings.showLess}`\n                  : html`\n                      ${this._textStrings.showMore}\n                      (${this._sourceEls.length - this._limitCount})\n                    `}\n              </kyn-button>\n            `\n          : null}\n      </div>\n\n      <div\n        class=\"${classMap({\n          opened: this.feedbackOpened,\n          'kyn-feedback-body': true,\n        })}\"\n        id=\"kyn-feedback-body\"\n        role=\"region\"\n        aria-labelledby=\"kyn-feedback-title-${this._selectedFeedbackType\n          ? 'positive'\n          : 'negative'}\"\n      >\n        <div class=\"close-container\">\n          <kyn-button\n            class=\"close\"\n            description=${this.closeText}\n            @on-click=${(e: Event) =>\n              this._handleClick(e, 'feedback', this._selectedFeedbackType)}\n            }}\n            kind=\"ghost\"\n            size=\"small\"\n          >\n            <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n          </kyn-button>\n        </div>\n\n        <slot name=\"feedback-form\"></slot>\n      </div>\n    `;\n  }\n  private _handleClick(\n    e: Event,\n    panel: 'sources' | 'feedback',\n    feedbackType?: 'positive' | 'negative'\n  ) {\n    e.preventDefault();\n\n    if (\n      (panel === 'sources' && this.sourcesDisabled) ||\n      (panel === 'feedback' && this.feedbackDisabled)\n    ) {\n      return;\n    }\n\n    const target = e.target as HTMLElement;\n    const isFeedbackButton = target.id?.includes('kyn-feedback-title');\n\n    if (isFeedbackButton && feedbackType) {\n      this._updateFeedbackCounts(feedbackType);\n    }\n\n    if (panel === 'sources' || this._shouldEmitFeedbackEvent(feedbackType)) {\n      this._emitToggleEvent(panel, feedbackType);\n    }\n  }\n\n  private _updateFeedbackCounts(feedbackType: 'positive' | 'negative') {\n    // Checks if the feedbackType was already selected before updating the counts.\n    const wasSelected =\n      (feedbackType === 'positive' && this.thumbsUpClickCount % 2 !== 0) ||\n      (feedbackType === 'negative' && this.thumbsDownClickCount % 2 !== 0);\n\n    if (feedbackType === 'positive') {\n      this.thumbsUpClickCount++;\n      this.thumbsDownClickCount -= this.thumbsDownClickCount % 2;\n    } else {\n      this.thumbsDownClickCount++;\n      this.thumbsUpClickCount -= this.thumbsUpClickCount % 2;\n    }\n\n    if (wasSelected) {\n      this.dispatchEvent(\n        new CustomEvent('on-feedback-deselected', {\n          detail: { feedbackType },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  private _shouldEmitFeedbackEvent(\n    feedbackType?: 'positive' | 'negative'\n  ): boolean {\n    if (!feedbackType) return false;\n    const isOddClick = (count: number) => count % 2 !== 0;\n\n    return (\n      (feedbackType === 'positive' &&\n        (isOddClick(this.thumbsUpClickCount) ||\n          (this.feedbackOpened && !isOddClick(this.thumbsUpClickCount)))) ||\n      (feedbackType === 'negative' &&\n        (isOddClick(this.thumbsDownClickCount) ||\n          (this.feedbackOpened && !isOddClick(this.thumbsDownClickCount))))\n    );\n  }\n\n  private _emitToggleEvent(\n    panel: 'sources' | 'feedback',\n    feedbackType?: 'positive' | 'negative'\n  ) {\n    if (panel === 'sources') {\n      this.sourcesOpened = !this.sourcesOpened;\n      this.feedbackOpened = false;\n    } else if (panel === 'feedback') {\n      this.sourcesOpened = false;\n      this._toggleFeedbackPanel(feedbackType);\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('on-toggle', {\n        detail: {\n          sourcesOpened: this.sourcesOpened,\n          feedbackOpened: this.feedbackOpened,\n          selectedFeedbackType: this._selectedFeedbackType,\n        },\n      })\n    );\n  }\n\n  private _toggleFeedbackPanel(feedbackType?: 'positive' | 'negative') {\n    if (!feedbackType) return;\n\n    if (this._selectedFeedbackType === feedbackType && this.feedbackOpened) {\n      this.feedbackOpened = false;\n      this._selectedFeedbackType = null;\n    } else {\n      this.feedbackOpened = true;\n      this._selectedFeedbackType = feedbackType;\n    }\n  }\n\n  protected _handleSlotChange() {\n    this._toggleLimitRevealed(this.limitRevealed);\n  }\n\n  private _toggleLimitRevealed(revealed: boolean) {\n    this.limitRevealed = revealed;\n\n    this._sourceEls.forEach((sourceEl: any, index: any) => {\n      if (this.revealAllSources || this.limitRevealed) {\n        sourceEl.style.display = 'block';\n      } else {\n        if (index < this._limitCount) {\n          sourceEl.style.display = 'block';\n        } else {\n          sourceEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n      this.sourcesOriginalText = this._textStrings.sourcesText;\n    }\n  }\n\n  protected override updated(changedProps: any): void {\n    if (\n      changedProps.has('revealAllSources') &&\n      changedProps.get('revealAllSources') !== undefined\n    ) {\n      this._toggleLimitRevealed(false);\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('resize', () => this.updateSourcesText());\n  }\n\n  override disconnectedCallback() {\n    window.removeEventListener('resize', () => this.updateSourcesText());\n    super.disconnectedCallback();\n  }\n\n  private updateSourcesText() {\n    this._textStrings.sourcesText =\n      window.innerWidth > 672\n        ? this.sourcesOriginalText\n        : this.sourcesOriginalText.split(' ')[0];\n    this.requestUpdate();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-ai-sources-feedback': AISourcesFeedback;\n  }\n}\n"],"names":["_defaultTextStrings","sourcesText","foundSources","showMore","showLess","positiveFeedback","negativeFeedback","AISourcesFeedback","LitElement","constructor","this","sourcesOpened","feedbackOpened","sourcesDisabled","feedbackDisabled","revealAllSources","textStrings","closeText","_limitCount","limitRevealed","_textStrings","_selectedFeedbackType","thumbsUpClickCount","thumbsDownClickCount","render","classesSources","classMap","opened","disabled","classesFeedback1","classesFeedback2","html","e","_handleClick","unsafeSVG","chevronIcon","thumbsUpIcon","thumbsUpFilledIcon","thumbsDownIcon","thumbsDownFilledIcon","closeIcon","_sourceEls","length","_handleSlotChange","_toggleLimitRevealed","panel","feedbackType","preventDefault","_a","target","id","includes","_updateFeedbackCounts","_shouldEmitFeedbackEvent","_emitToggleEvent","wasSelected","dispatchEvent","CustomEvent","detail","bubbles","composed","isOddClick","count","_toggleFeedbackPanel","selectedFeedbackType","revealed","forEach","sourceEl","index","style","display","willUpdate","changedProps","has","deepmerge","sourcesOriginalText","updated","undefined","get","connectedCallback","super","window","addEventListener","updateSourcesText","disconnectedCallback","removeEventListener","innerWidth","split","requestUpdate","styles","stylesheet","__decorate","property","type","Boolean","prototype","Object","String","state","queryAssignedElements","slot","customElement"],"mappings":"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"}

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-a6eca21f.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-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";
 //# sourceMappingURL=index.js.map

package/components/global/header/header.js

@@ -140,9 +140,11 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as o,t as
 }
 .menu.open .interactive:hover {
   background: var(--kd-color-background-menu-state-hover);
+  color: var(--kd-color-text-button-dark-primary);
 }
 .menu.open .interactive:active {
-  background-color: var(--kd-color-text-link-level-pressed);
+  background: var(--kd-color-background-menu-state-pressed);
+  color: var(--kd-color-text-button-dark-primary);
 }
 .menu.open .menu__content {
   visibility: visible;
@@ -160,7 +162,9 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as o,t as
   display: flex;
   position: relative;
   align-items: center;
-  padding: 8px 8px 8px 12px;
+  gap: 8px;
+  padding: 8px 12px 8px 8px;
+  height: 40px;
   cursor: pointer;
   background: none;
   border: none;
@@ -197,8 +201,11 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as o,t as
   }
 }
 .go-back span {
-  margin-right: 16px;
-  margin-top: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
 }
 .go-back:hover {
   background: var(--kd-color-background-menu-state-hover);

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

@@ -1 +1 @@
-{"version":3,"file":"header.js","sources":["../../../../src/components/global/header/header.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport HeaderScss from './header.scss';\nimport logo from '@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg';\n\n/**\n * The global Header component.\n * @fires on-menu-toggle - Captures the menu toggle click event and emits the menu open state in the detail.\n * @fires on-root-link-click - Captures the logo link click event and emits the original event details.\n * @slot unnamed - The default slot for all empty space right of the logo/title.\n * @slot logo - Slot for the logo, will overwrite the default logo.\n * @slot left - Slot left of the logo, intended for the header nav.\n * @slot center - Slot between logo/title and right flyouts.\n */\n@customElement('kyn-header')\nexport class Header extends LitElement {\n  static override styles = HeaderScss;\n\n  /** URL for the header logo link. Should target the application home page. */\n  @property({ type: String })\n  rootUrl = '/';\n\n  /** App title text next to logo.  Hidden on smaller screens. */\n  @property({ type: String })\n  appTitle = '';\n\n  /** Queries for slotted header-nav.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-header-nav' })\n  navEls!: any;\n\n  /** Queries for all slotted elements.\n   * @internal\n   */\n  @queryAssignedElements()\n  assignedElements!: any;\n\n  /** Queries for elements in left slot.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'left' })\n  leftEls!: any;\n\n  /** header-nav open state\n   * @internal\n   */\n  @state()\n  _navOpen = false;\n\n  /** header-flyouts open state\n   * @internal\n   */\n  @state()\n  _flyoutsOpen = false;\n\n  override render() {\n    const classes = {\n      header: true,\n      'left-slotted': this.leftEls.length,\n      'child-open': this._navOpen || this._flyoutsOpen,\n    };\n\n    return html`\n      <header class=\"${classMap(classes)}\">\n        <slot name=\"left\" @slotchange=${this.handleSlotChange}></slot>\n\n        <a\n          href=\"${this.rootUrl}\"\n          class=\"logo-link interactive\"\n          @click=\"${(e: Event) => this.handleRootLinkClick(e)}\"\n        >\n          <slot name=\"logo\" @slotchange=${this.handleSlotChange}>\n            ${unsafeHTML(logo)}\n          </slot>\n\n          <span class=\"title\">${this.appTitle}</span>\n        </a>\n\n        <slot name=\"center\"></slot>\n\n        <div class=\"header__right\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </div>\n      </header>\n    `;\n  }\n\n  private handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  private handleRootLinkClick(e: Event) {\n    const event = new CustomEvent('on-root-link-click', {\n      detail: { origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleNavToggle(e: any) {\n    this._navOpen = e.detail.open;\n  }\n\n  private _handleFlyoutsToggle(e: any) {\n    this._flyoutsOpen = e.detail.open;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('on-nav-toggle', (e: Event) =>\n      this._handleNavToggle(e)\n    );\n    document.addEventListener('on-flyouts-toggle', (e: Event) =>\n      this._handleFlyoutsToggle(e)\n    );\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('on-nav-toggle', (e: Event) =>\n      this._handleNavToggle(e)\n    );\n    document.removeEventListener('on-flyouts-toggle', (e: Event) =>\n      this._handleFlyoutsToggle(e)\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header': Header;\n  }\n}\n"],"names":["Header","LitElement","constructor","this","rootUrl","appTitle","_navOpen","_flyoutsOpen","render","classes","header","leftEls","length","html","classMap","handleSlotChange","e","handleRootLinkClick","unsafeHTML","logo","requestUpdate","event","CustomEvent","detail","origEvent","dispatchEvent","_handleNavToggle","open","_handleFlyoutsToggle","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderScss","__decorate","property","type","String","prototype","queryAssignedElements","selector","slot","state","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsBO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAKLC,KAAOC,QAAG,IAIVD,KAAQE,SAAG,GAwBXF,KAAQG,UAAG,EAMXH,KAAYI,cAAG,CA0EhB,CAxEU,MAAAC,GACP,MAAMC,EAAU,CACdC,QAAQ,EACR,eAAgBP,KAAKQ,QAAQC,OAC7B,aAAcT,KAAKG,UAAYH,KAAKI,cAGtC,OAAOM,CAAI;uBACQC,EAASL;wCACQN,KAAKY;;;kBAG3BZ,KAAKC;;oBAEFY,GAAab,KAAKc,oBAAoBD;;0CAEjBb,KAAKY;cACjCG,EAAWC;;;gCAGOhB,KAAKE;;;;;;8BAMPF,KAAKY;;;KAIhC,CAEO,gBAAAA,GACNZ,KAAKiB,eACN,CAEO,mBAAAH,CAAoBD,GAC1B,MAAMK,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,OAAQ,CAAEC,UAAWR,KAEvBb,KAAKsB,cAAcJ,EACpB,CAEO,gBAAAK,CAAiBV,GACvBb,KAAKG,SAAWU,EAAEO,OAAOI,IAC1B,CAEO,oBAAAC,CAAqBZ,GAC3Bb,KAAKI,aAAeS,EAAEO,OAAOI,IAC9B,CAEQ,iBAAAE,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,iBAAkBhB,GAC1Cb,KAAKuB,iBAAiBV,KAExBe,SAASC,iBAAiB,qBAAsBhB,GAC9Cb,KAAKyB,qBAAqBZ,IAE7B,CAEQ,oBAAAiB,GACPF,SAASG,oBAAoB,iBAAkBlB,GAC7Cb,KAAKuB,iBAAiBV,KAExBe,SAASG,oBAAoB,qBAAsBlB,GACjDb,KAAKyB,qBAAqBZ,KAG5Bc,MAAMG,sBACP,GA/GejC,EAAMmC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJxC,EAAAyC,UAAA,eAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJxC,EAAAyC,UAAA,gBAAA,GAMdJ,EAAA,CADCK,EAAsB,CAAEC,SAAU,oBACtB3C,EAAAyC,UAAA,cAAA,GAMbJ,EAAA,CADCK,KACsB1C,EAAAyC,UAAA,wBAAA,GAMvBJ,EAAA,CADCK,EAAsB,CAAEE,KAAM,UACjB5C,EAAAyC,UAAA,eAAA,GAMdJ,EAAA,CADCQ,KACgB7C,EAAAyC,UAAA,gBAAA,GAMjBJ,EAAA,CADCQ,KACoB7C,EAAAyC,UAAA,oBAAA,GAvCVzC,EAAMqC,EAAA,CADlBS,EAAc,eACF9C"}
+{"version":3,"file":"header.js","sources":["../../../../src/components/global/header/header.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport HeaderScss from './header.scss';\nimport logo from '@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg';\n\n/**\n * The global Header component.\n * @fires on-menu-toggle - Captures the menu toggle click event and emits the menu open state in the detail.\n * @fires on-root-link-click - Captures the logo link click event and emits the original event details.\n * @slot unnamed - The default slot for all empty space right of the logo/title.\n * @slot logo - Slot for the logo, will overwrite the default logo.\n * @slot left - Slot left of the logo, intended for the header nav.\n * @slot center - Slot between logo/title and right flyouts.\n */\n@customElement('kyn-header')\nexport class Header extends LitElement {\n  static override styles = HeaderScss;\n\n  /** URL for the header logo link. Should target the application home page. */\n  @property({ type: String })\n  rootUrl = '/';\n\n  /** App title text next to logo.  Hidden on smaller screens. */\n  @property({ type: String })\n  appTitle = '';\n\n  /** Queries for slotted header-nav.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-header-nav' })\n  navEls!: any;\n\n  /** Queries for all slotted elements.\n   * @internal\n   */\n  @queryAssignedElements()\n  assignedElements!: any;\n\n  /** Queries for elements in left slot.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'left' })\n  leftEls!: any;\n\n  /** header-nav open state\n   * @internal\n   */\n  @state()\n  _navOpen = false;\n\n  /** header-flyouts open state\n   * @internal\n   */\n  @state()\n  _flyoutsOpen = false;\n\n  override render() {\n    const classes = {\n      header: true,\n      'left-slotted': this.leftEls.length,\n      'child-open': this._navOpen || this._flyoutsOpen,\n    };\n\n    return html`\n      <header class=\"${classMap(classes)}\">\n        <slot name=\"left\" @slotchange=${this.handleSlotChange}></slot>\n\n        <a\n          href=\"${this.rootUrl}\"\n          class=\"logo-link interactive\"\n          @click=\"${(e: Event) => this.handleRootLinkClick(e)}\"\n        >\n          <slot name=\"logo\" @slotchange=${this.handleSlotChange}>\n            ${unsafeHTML(logo)}\n          </slot>\n\n          <span class=\"title\">${this.appTitle}</span>\n        </a>\n\n        <slot name=\"center\"></slot>\n\n        <div class=\"header__right\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </div>\n      </header>\n    `;\n  }\n\n  private handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  private handleRootLinkClick(e: Event) {\n    const event = new CustomEvent('on-root-link-click', {\n      detail: { origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleNavToggle(e: any) {\n    this._navOpen = e.detail.open;\n  }\n\n  private _handleFlyoutsToggle(e: any) {\n    this._flyoutsOpen = e.detail.open;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('on-nav-toggle', (e: Event) =>\n      this._handleNavToggle(e)\n    );\n    document.addEventListener('on-flyouts-toggle', (e: Event) =>\n      this._handleFlyoutsToggle(e)\n    );\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('on-nav-toggle', (e: Event) =>\n      this._handleNavToggle(e)\n    );\n    document.removeEventListener('on-flyouts-toggle', (e: Event) =>\n      this._handleFlyoutsToggle(e)\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header': Header;\n  }\n}\n"],"names":["Header","LitElement","constructor","this","rootUrl","appTitle","_navOpen","_flyoutsOpen","render","classes","header","leftEls","length","html","classMap","handleSlotChange","e","handleRootLinkClick","unsafeHTML","logo","requestUpdate","event","CustomEvent","detail","origEvent","dispatchEvent","_handleNavToggle","open","_handleFlyoutsToggle","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderScss","__decorate","property","type","String","prototype","queryAssignedElements","selector","slot","state","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsBO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAKLC,KAAOC,QAAG,IAIVD,KAAQE,SAAG,GAwBXF,KAAQG,UAAG,EAMXH,KAAYI,cAAG,CA0EhB,CAxEU,MAAAC,GACP,MAAMC,EAAU,CACdC,QAAQ,EACR,eAAgBP,KAAKQ,QAAQC,OAC7B,aAAcT,KAAKG,UAAYH,KAAKI,cAGtC,OAAOM,CAAI;uBACQC,EAASL;wCACQN,KAAKY;;;kBAG3BZ,KAAKC;;oBAEFY,GAAab,KAAKc,oBAAoBD;;0CAEjBb,KAAKY;cACjCG,EAAWC;;;gCAGOhB,KAAKE;;;;;;8BAMPF,KAAKY;;;KAIhC,CAEO,gBAAAA,GACNZ,KAAKiB,eACN,CAEO,mBAAAH,CAAoBD,GAC1B,MAAMK,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,OAAQ,CAAEC,UAAWR,KAEvBb,KAAKsB,cAAcJ,EACpB,CAEO,gBAAAK,CAAiBV,GACvBb,KAAKG,SAAWU,EAAEO,OAAOI,IAC1B,CAEO,oBAAAC,CAAqBZ,GAC3Bb,KAAKI,aAAeS,EAAEO,OAAOI,IAC9B,CAEQ,iBAAAE,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,iBAAkBhB,GAC1Cb,KAAKuB,iBAAiBV,KAExBe,SAASC,iBAAiB,qBAAsBhB,GAC9Cb,KAAKyB,qBAAqBZ,IAE7B,CAEQ,oBAAAiB,GACPF,SAASG,oBAAoB,iBAAkBlB,GAC7Cb,KAAKuB,iBAAiBV,KAExBe,SAASG,oBAAoB,qBAAsBlB,GACjDb,KAAKyB,qBAAqBZ,KAG5Bc,MAAMG,sBACP,GA/GejC,EAAMmC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJxC,EAAAyC,UAAA,eAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJxC,EAAAyC,UAAA,gBAAA,GAMdJ,EAAA,CADCK,EAAsB,CAAEC,SAAU,oBACtB3C,EAAAyC,UAAA,cAAA,GAMbJ,EAAA,CADCK,KACsB1C,EAAAyC,UAAA,wBAAA,GAMvBJ,EAAA,CADCK,EAAsB,CAAEE,KAAM,UACjB5C,EAAAyC,UAAA,eAAA,GAMdJ,EAAA,CADCQ,KACgB7C,EAAAyC,UAAA,gBAAA,GAMjBJ,EAAA,CADCQ,KACoB7C,EAAAyC,UAAA,oBAAA,GAvCVzC,EAAMqC,EAAA,CADlBS,EAAc,eACF9C"}

package/components/global/header/headerCategory.js

@@ -36,18 +36,23 @@ import{_ as i}from"../../../vendor/tslib-53a81efe.js";import{n as t,e}from"../..
   display: block;
 }
 
+.category {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
 .heading {
   font-family: var(--kd-font-family-secondary);
   font-size: var(--kd-font-size-utility-3-sm);
   line-height: var(--kd-line-height-utility-3-sm);
   font-weight: var(--kd-font-weight-regular);
   letter-spacing: var(--kd-letter-spacing-5);
-  color: var(--kd-color-text-level-tertiary-bold);
-  background: var(--kd-color-background-menu-state-category);
+  color: var(--kd-color-text-title-secondary);
   font-weight: 500;
   text-transform: uppercase;
-  padding: 8px 16px 8px 8px;
-  border-bottom: 1px solid var(--kd-color-border-variants-light);
+  padding: 20px 16px 8px 8px;
+  border-bottom: 1px solid var(--kd-color-border-level-tertiary);
 }
 @media (min-width: 42rem) {
   .heading {

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 */\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"}

package/components/global/header/headerDivider.js

@@ -18,6 +18,6 @@ hr {
   margin: 4px 0;
   width: 100%;
   height: 1px;
-  background: var(--kd-color-border-variants-light);
+  background: var(--kd-color-border-level-tertiary);
 }`;let d=class extends t{render(){return i` <hr /> `}};d.styles=n,d=r([e("kyn-header-divider")],d);export{d as HeaderDivider};
 //# sourceMappingURL=headerDivider.js.map

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-a6eca21f.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 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`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -140,9 +140,11 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
 }
 .menu.open .interactive:hover {
   background: var(--kd-color-background-menu-state-hover);
+  color: var(--kd-color-text-button-dark-primary);
 }
 .menu.open .interactive:active {
-  background-color: var(--kd-color-text-link-level-pressed);
+  background: var(--kd-color-background-menu-state-pressed);
+  color: var(--kd-color-text-button-dark-primary);
 }
 .menu.open .menu__content {
   visibility: visible;
@@ -160,7 +162,9 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
   display: flex;
   position: relative;
   align-items: center;
-  padding: 8px 8px 8px 12px;
+  gap: 8px;
+  padding: 8px 12px 8px 8px;
+  height: 40px;
   cursor: pointer;
   background: none;
   border: none;
@@ -197,8 +201,11 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
   }
 }
 .go-back span {
-  margin-right: 16px;
-  margin-top: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
 }
 .go-back:hover {
   background: var(--kd-color-background-menu-state-hover);
@@ -229,11 +236,11 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
   letter-spacing: var(--kd-letter-spacing-5);
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   width: 100%;
   color: var(--kd-color-icon-primary);
-  padding: 16px 12px 16px 8px;
-  height: 56px;
+  padding: 12px 12px 12px 8px;
+  height: 48px;
   text-decoration: none;
   white-space: nowrap;
 }
@@ -266,8 +273,8 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
 }
 .btn ::slotted([slot=button]) {
   display: flex;
@@ -286,12 +293,11 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as 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);
-  color: var(--kd-color-text-level-tertiary-bold);
-  background: var(--kd-color-background-menu-state-category);
+  color: var(--kd-color-text-title-secondary);
   font-weight: 500;
   text-transform: uppercase;
-  padding: 8px;
-  border-bottom: 1px solid var(--kd-color-border-variants-light);
+  padding: 20px 16px 8px 8px;
+  border-bottom: 1px solid var(--kd-color-border-level-tertiary);
 }
 @media (min-width: 42rem) {
   .menu-label {
@@ -336,6 +342,9 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
   margin-left: auto;
   display: flex;
 }
+.arrow svg {
+  display: block;
+}
 
 @media (max-width: calc(42rem - 1px)) {
   .menu {
@@ -378,9 +387,9 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
                       </span>
                     `}
 
-                <span slot="button" class="arrow"
-                  >${e(s)}</span
-                >
+                <span slot="button" class="arrow">
+                  ${e(s)}
+                </span>
               </a>
             `:d`
               <button
@@ -397,9 +406,9 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
                       </span>
                     `}
 
-                <span slot="button" class="arrow"
-                  >${e(s)}</span
-                >
+                <span slot="button" class="arrow">
+                  ${e(s)}
+                </span>
               </button>
             `}
 

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)}</span\n                >\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)}</span\n                >\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 l}from"../../../vendor/@kyndryl-design-system/shidoka-icons-a6eca21f.js";var d=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-774ccfb8.js";var l=r`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -140,9 +140,11 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
 }
 .menu.open .interactive:hover {
   background: var(--kd-color-background-menu-state-hover);
+  color: var(--kd-color-text-button-dark-primary);
 }
 .menu.open .interactive:active {
-  background-color: var(--kd-color-text-link-level-pressed);
+  background: var(--kd-color-background-menu-state-pressed);
+  color: var(--kd-color-text-button-dark-primary);
 }
 .menu.open .menu__content {
   visibility: visible;
@@ -160,7 +162,9 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
   display: flex;
   position: relative;
   align-items: center;
-  padding: 8px 8px 8px 12px;
+  gap: 8px;
+  padding: 8px 12px 8px 8px;
+  height: 40px;
   cursor: pointer;
   background: none;
   border: none;
@@ -197,8 +201,11 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
   }
 }
 .go-back span {
-  margin-right: 16px;
-  margin-top: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
 }
 .go-back:hover {
   background: var(--kd-color-background-menu-state-hover);
@@ -277,12 +284,12 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
           title="Toggle Menu"
           @click=${()=>this._toggleOpen()}
         >
-          <span class="overflow-icon">${t(l)}</span>
+          <span class="overflow-icon">${t(d)}</span>
         </button>
 
         <div class="menu__content">
           <slot></slot>
         </div>
       </div>
-    `}_toggleOpen(){this.open=!this.open}_handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}willUpdate(e){if(e.has("open")){const e=new CustomEvent("on-flyouts-toggle",{composed:!0,bubbles:!0,detail:{open:this.open}});this.dispatchEvent(e)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),super.disconnectedCallback()}};s.styles=d,e([o({type:Boolean})],s.prototype,"open",void 0),s=e([i("kyn-header-flyouts")],s);export{s as HeaderFlyouts};
+    `}_toggleOpen(){this.open=!this.open}_handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}willUpdate(e){if(e.has("open")){const e=new CustomEvent("on-flyouts-toggle",{composed:!0,bubbles:!0,detail:{open:this.open}});this.dispatchEvent(e)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),super.disconnectedCallback()}};s.styles=l,e([o({type:Boolean})],s.prototype,"open",void 0),s=e([i("kyn-header-flyouts")],s);export{s as HeaderFlyouts};
 //# sourceMappingURL=headerFlyouts.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"headerFlyouts.js","sources":["../../../../src/components/global/header/headerFlyouts.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport HeaderFlyoutsScss from './headerFlyouts.scss';\n\nimport overflowIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/overflow.svg';\n\n/**\n * Container for header-flyout components.\n * @slot unnamed - Slot for header-flyout components.\n */\n@customElement('kyn-header-flyouts')\nexport class HeaderFlyouts extends LitElement {\n  static override styles = HeaderFlyoutsScss;\n\n  /* Menu open state (small breakpoint). */\n  @property({ type: Boolean })\n  open = false;\n\n  override render() {\n    return html`\n      <div class=\"header-flyouts menu ${this.open ? 'open' : ''}\">\n        <button\n          class=\"btn interactive\"\n          aria-label=\"Toggle Menu\"\n          title=\"Toggle Menu\"\n          @click=${() => this._toggleOpen()}\n        >\n          <span class=\"overflow-icon\">${unsafeSVG(overflowIcon)}</span>\n        </button>\n\n        <div class=\"menu__content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _toggleOpen() {\n    this.open = !this.open;\n  }\n\n  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('open')) {\n      const event = new CustomEvent('on-flyouts-toggle', {\n        composed: true,\n        bubbles: true,\n        detail: { open: this.open },\n      });\n      this.dispatchEvent(event);\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this._handleClickOut(e));\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-flyouts': HeaderFlyouts;\n  }\n}\n"],"names":["HeaderFlyouts","LitElement","constructor","this","open","render","html","_toggleOpen","unsafeSVG","overflowIcon","_handleClickOut","e","composedPath","includes","willUpdate","changedProps","has","event","CustomEvent","composed","bubbles","detail","dispatchEvent","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderFlyoutsScss","__decorate","property","type","Boolean","prototype","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAYO,IAAMA,EAAN,cAA4BC,EAA5B,WAAAC,uBAKLC,KAAIC,MAAG,CAqDR,CAnDU,MAAAC,GACP,OAAOC,CAAI;wCACyBH,KAAKC,KAAO,OAAS;;;;;mBAK1C,IAAMD,KAAKI;;wCAEUC,EAAUC;;;;;;;KAQ/C,CAEO,WAAAF,GACNJ,KAAKC,MAAQD,KAAKC,IACnB,CAEO,eAAAM,CAAgBC,GACjBA,EAAEC,eAAeC,SAASV,QAC7BA,KAAKC,MAAO,EAEf,CAEQ,UAAAU,CAAWC,GAClB,GAAIA,EAAaC,IAAI,QAAS,CAC5B,MAAMC,EAAQ,IAAIC,YAAY,oBAAqB,CACjDC,UAAU,EACVC,SAAS,EACTC,OAAQ,CAAEjB,KAAMD,KAAKC,QAEvBD,KAAKmB,cAAcL,EACpB,CACF,CAEQ,iBAAAM,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUf,GAAMR,KAAKO,gBAAgBC,IAChE,CAEQ,oBAAAgB,GACPF,SAASG,oBAAoB,SAAUjB,GAAMR,KAAKO,gBAAgBC,KAElEa,MAAMG,sBACP,GAxDe3B,EAAM6B,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACLlC,EAAAmC,UAAA,YAAA,GALFnC,EAAa+B,EAAA,CADzBK,EAAc,uBACFpC"}
+{"version":3,"file":"headerFlyouts.js","sources":["../../../../src/components/global/header/headerFlyouts.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport HeaderFlyoutsScss from './headerFlyouts.scss';\n\nimport overflowIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/overflow.svg';\n\n/**\n * Container for header-flyout components.\n * @slot unnamed - Slot for header-flyout components.\n */\n@customElement('kyn-header-flyouts')\nexport class HeaderFlyouts extends LitElement {\n  static override styles = HeaderFlyoutsScss;\n\n  /* Menu open state (small breakpoint). */\n  @property({ type: Boolean })\n  open = false;\n\n  override render() {\n    return html`\n      <div class=\"header-flyouts menu ${this.open ? 'open' : ''}\">\n        <button\n          class=\"btn interactive\"\n          aria-label=\"Toggle Menu\"\n          title=\"Toggle Menu\"\n          @click=${() => this._toggleOpen()}\n        >\n          <span class=\"overflow-icon\">${unsafeSVG(overflowIcon)}</span>\n        </button>\n\n        <div class=\"menu__content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _toggleOpen() {\n    this.open = !this.open;\n  }\n\n  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('open')) {\n      const event = new CustomEvent('on-flyouts-toggle', {\n        composed: true,\n        bubbles: true,\n        detail: { open: this.open },\n      });\n      this.dispatchEvent(event);\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this._handleClickOut(e));\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-flyouts': HeaderFlyouts;\n  }\n}\n"],"names":["HeaderFlyouts","LitElement","constructor","this","open","render","html","_toggleOpen","unsafeSVG","overflowIcon","_handleClickOut","e","composedPath","includes","willUpdate","changedProps","has","event","CustomEvent","composed","bubbles","detail","dispatchEvent","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderFlyoutsScss","__decorate","property","type","Boolean","prototype","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAYO,IAAMA,EAAN,cAA4BC,EAA5B,WAAAC,uBAKLC,KAAIC,MAAG,CAqDR,CAnDU,MAAAC,GACP,OAAOC,CAAI;wCACyBH,KAAKC,KAAO,OAAS;;;;;mBAK1C,IAAMD,KAAKI;;wCAEUC,EAAUC;;;;;;;KAQ/C,CAEO,WAAAF,GACNJ,KAAKC,MAAQD,KAAKC,IACnB,CAEO,eAAAM,CAAgBC,GACjBA,EAAEC,eAAeC,SAASV,QAC7BA,KAAKC,MAAO,EAEf,CAEQ,UAAAU,CAAWC,GAClB,GAAIA,EAAaC,IAAI,QAAS,CAC5B,MAAMC,EAAQ,IAAIC,YAAY,oBAAqB,CACjDC,UAAU,EACVC,SAAS,EACTC,OAAQ,CAAEjB,KAAMD,KAAKC,QAEvBD,KAAKmB,cAAcL,EACpB,CACF,CAEQ,iBAAAM,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUf,GAAMR,KAAKO,gBAAgBC,IAChE,CAEQ,oBAAAgB,GACPF,SAASG,oBAAoB,SAAUjB,GAAMR,KAAKO,gBAAgBC,KAElEa,MAAMG,sBACP,GAxDe3B,EAAM6B,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACLlC,EAAAmC,UAAA,YAAA,GALFnC,EAAa+B,EAAA,CADzBK,EAAc,uBACFpC"}

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

@@ -5,6 +5,7 @@ import '../../reusable/textInput';
  * @fires on-click - Captures the click event and emits the original event details.
  * @slot unnamed - Slot for link text/content.
  * @slot links - Slot for sublinks (up to two levels).
+ * @slot icon - Slot for icon.
  */
 export declare class HeaderLink extends LitElement {
     static styles: any;

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;;;;;GAKG;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;IA4Ef,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,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"}