@kyndryl-design-system/shidoka-applications 2.20.1 → 2.20.2

package/components/global/header/headerFlyout.js

@@ -296,7 +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: 8px 12px 0px 8px;
+  padding: 12px 12px 0px 12px;
 }
 @media (min-width: 42rem) {
   .menu-label {

package/components/global/localNav/localNav.js

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as i}from"../../../vendor/lit-html-29220869.js";import{n as t,t as n,l as o,o as a,e as d}from"../../../vendor/lit-446874c7.js";import{i as s,s as l,x as r}from"../../../vendor/lit-element-c6c02f24.js";import{d as p}from"../../../vendor/deepmerge-ts-e62363e6.js";import"../../reusable/button/button.js";import{f as h,p as v}from"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";import"../../../common/helpers/helpers.js";import"../../reusable/button/defs.js";var m=s`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as i}from"../../../vendor/lit-html-29220869.js";import{n as t,t as n,l as o,o as a,e as d}from"../../../vendor/lit-446874c7.js";import{i as r,s,x as l}from"../../../vendor/lit-element-c6c02f24.js";import{d as p}from"../../../vendor/deepmerge-ts-e62363e6.js";import"../../reusable/button/button.js";import{f as h,p as c}from"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";import"../../../common/helpers/helpers.js";import"../../reusable/button/defs.js";var m=r`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -194,11 +194,20 @@ slot[name=search]::slotted(*) {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  height: 48px;
+  height: 40px;
+  transition: background-color 150ms ease-out, color 150ms ease-out, outline-color 150ms ease-out;
+}
+.mobile-toggle:hover {
+  background: var(--kd-color-background-menu-state-hover);
+  color: var(--kd-color-text-button-dark-primary);
 }
 .mobile-toggle:focus-visible {
   outline-color: var(--kd-color-border-variants-focus);
 }
+.mobile-toggle:active {
+  background-color: var(--kd-color-background-menu-state-pressed);
+  color: var(--kd-color-text-button-dark-primary);
+}
 .mobile-toggle svg {
   display: block;
   transition: transform 150ms ease-out;
@@ -228,7 +237,7 @@ slot[name=search]::slotted(*) {
 }
 .pinned .pin-icon {
   transform: rotate(180deg);
-}`;const c={pin:"Pin",unpin:"Unpin",toggleMenu:"Toggle Menu",collapse:"Collapse",menu:"Menu"};let g=class extends l{constructor(){super(...arguments),this.pinned=!1,this.textStrings=c,this._textStrings=c,this._expanded=!1,this._mobileExpanded=!1}render(){return r`
+}`;const v={pin:"Pin",unpin:"Unpin",toggleMenu:"Toggle Menu",collapse:"Collapse",menu:"Menu"};let g=class extends s{constructor(){super(...arguments),this.pinned=!1,this.textStrings=v,this._textStrings=v,this._expanded=!1,this._mobileExpanded=!1}render(){return l`
       <nav
         class=${a({"nav--expanded":this._expanded||this.pinned,"nav--expanded-mobile":this._mobileExpanded,pinned:this.pinned})}
         @pointerleave=${e=>this.handlePointerLeave(e)}
@@ -259,11 +268,11 @@ slot[name=search]::slotted(*) {
             description=${this.pinned?this._textStrings.unpin:this._textStrings.pin}
             @on-click=${e=>this._handleNavToggle(e)}
           >
-            <span class="pin-icon" slot="icon"> ${i(v)} </span>
+            <span class="pin-icon" slot="icon"> ${i(c)} </span>
           </kyn-button>
         </div>
       </nav>
 
       <div class="overlay ${this.pinned?"pinned":""}"></div>
-    `}_handleNavToggle(e){this.pinned=!this.pinned;const i=new CustomEvent("on-toggle",{detail:{pinned:this.pinned,origEvent:e}});this.dispatchEvent(i)}_handleMobileNavToggle(){this._mobileExpanded=!this._mobileExpanded}handlePointerEnter(e){"mouse"===e.pointerType&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this._expanded=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this._expanded=!1}),150))}_updateChildren(){this._navLinks.forEach((e=>{e._navExpanded=this._expanded||this.pinned,e._navExpandedMobile=this._mobileExpanded})),this._dividers.forEach((e=>{e._navExpanded=this._expanded||this.pinned||this._mobileExpanded}))}handleSlotChange(){this._updateChildren(),this.requestUpdate()}_handleLinkActive(e){this._activeLinkText=e.detail.text}willUpdate(e){(e.has("_expanded")||e.has("pinned")||e.has("_mobileExpanded"))&&this._updateChildren(),e.has("textStrings")&&(this._textStrings=p(c,this.textStrings))}_handleClickOut(e){e.composedPath().includes(this)||(this._expanded=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e))),this.addEventListener("on-link-active",(e=>this._handleLinkActive(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),this.removeEventListener("on-link-active",(e=>this._handleLinkActive(e))),super.disconnectedCallback()}};g.styles=m,e([t({type:Boolean})],g.prototype,"pinned",void 0),e([t({type:Object})],g.prototype,"textStrings",void 0),e([n()],g.prototype,"_textStrings",void 0),e([n()],g.prototype,"_expanded",void 0),e([n()],g.prototype,"_mobileExpanded",void 0),e([n()],g.prototype,"_activeLinkText",void 0),e([o({selector:"kyn-local-nav-link"})],g.prototype,"_navLinks",void 0),e([o({selector:"kyn-local-nav-divider"})],g.prototype,"_dividers",void 0),e([n()],g.prototype,"_leaveTimer",void 0),g=e([d("kyn-local-nav")],g);export{g as LocalNav};
+    `}_handleNavToggle(e){this.pinned=!this.pinned;const i=new CustomEvent("on-toggle",{detail:{pinned:this.pinned,origEvent:e}});this.dispatchEvent(i)}_handleMobileNavToggle(){this._mobileExpanded=!this._mobileExpanded}handlePointerEnter(e){"mouse"===e.pointerType&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this._expanded=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this._expanded=!1}),150))}_updateChildren(){this._navLinks.forEach((e=>{e._navExpanded=this._expanded||this.pinned,e._navExpandedMobile=this._mobileExpanded})),this._dividers.forEach((e=>{e._navExpanded=this._expanded||this.pinned||this._mobileExpanded}))}handleSlotChange(){this._updateChildren(),this.requestUpdate()}_handleLinkActive(e){this._activeLinkText=e.detail.text}willUpdate(e){(e.has("_expanded")||e.has("pinned")||e.has("_mobileExpanded"))&&this._updateChildren(),e.has("textStrings")&&(this._textStrings=p(v,this.textStrings))}_handleClickOut(e){e.composedPath().includes(this)||(this._expanded=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e))),this.addEventListener("on-link-active",(e=>this._handleLinkActive(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),this.removeEventListener("on-link-active",(e=>this._handleLinkActive(e))),super.disconnectedCallback()}};g.styles=m,e([t({type:Boolean})],g.prototype,"pinned",void 0),e([t({type:Object})],g.prototype,"textStrings",void 0),e([n()],g.prototype,"_textStrings",void 0),e([n()],g.prototype,"_expanded",void 0),e([n()],g.prototype,"_mobileExpanded",void 0),e([n()],g.prototype,"_activeLinkText",void 0),e([o({selector:"kyn-local-nav-link"})],g.prototype,"_navLinks",void 0),e([o({selector:"kyn-local-nav-divider"})],g.prototype,"_dividers",void 0),e([n()],g.prototype,"_leaveTimer",void 0),g=e([d("kyn-local-nav")],g);export{g as LocalNav};
 //# sourceMappingURL=localNav.js.map

package/components/global/localNav/localNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"localNav.js","sources":["../../../../src/components/global/localNav/localNav.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 { deepmerge } from 'deepmerge-ts';\nimport '../../reusable/button';\nimport LocalNavScss from './localNav.scss';\n\nimport arrowIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport pinIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/side-drawer-out.svg';\n\nconst _defaultTextStrings = {\n  pin: 'Pin',\n  unpin: 'Unpin',\n  toggleMenu: 'Toggle Menu',\n  collapse: 'Collapse',\n  menu: 'Menu',\n};\n\n/**\n * The global Side Navigation component.\n * @slot unnamed - The default slot, for local nav links.\n * @slot search - Slot for a search input\n * @fires on-toggle - Captures the click event and emits the pinned state and original event details.\n */\n@customElement('kyn-local-nav')\nexport class LocalNav extends LitElement {\n  static override styles = LocalNavScss;\n\n  /** Local nav pinned state. */\n  @property({ type: Boolean })\n  pinned = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /** Local nav desktop expanded state.\n   * @internal\n   */\n  @state()\n  _expanded = false;\n\n  /** Local nav mobile expanded state.\n   * @internal\n   */\n  @state()\n  _mobileExpanded = false;\n\n  /** Active Link text.\n   * @internal\n   */\n  @state()\n  _activeLinkText!: string;\n\n  /** Queries top-level slotted links.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-local-nav-link' })\n  _navLinks!: any;\n\n  /** Queries top-level slotted dividers.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-local-nav-divider' })\n  _dividers!: any;\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  override render() {\n    return html`\n      <nav\n        class=${classMap({\n          'nav--expanded': this._expanded || this.pinned,\n          'nav--expanded-mobile': this._mobileExpanded,\n          pinned: this.pinned,\n        })}\n        @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n        @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n      >\n        <button\n          class=\"mobile-toggle\"\n          title=${this._textStrings.toggleMenu}\n          aria-label=${this._textStrings.toggleMenu}\n          @click=${this._handleMobileNavToggle}\n        >\n          ${this._mobileExpanded\n            ? this._textStrings.collapse\n            : this._activeLinkText || this._textStrings.menu}\n          ${unsafeSVG(arrowIcon)}\n        </button>\n\n        <div class=\"search\">\n          <slot name=\"search\"></slot>\n        </div>\n\n        <div class=\"links\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </div>\n\n        <div class=\"toggle-container\">\n          <kyn-button\n            kind=\"ghost\"\n            size=\"small\"\n            description=${this.pinned\n              ? this._textStrings.unpin\n              : this._textStrings.pin}\n            @on-click=${(e: Event) => this._handleNavToggle(e)}\n          >\n            <span class=\"pin-icon\" slot=\"icon\"> ${unsafeSVG(pinIcon)} </span>\n          </kyn-button>\n        </div>\n      </nav>\n\n      <div class=\"overlay ${this.pinned ? 'pinned' : ''}\"></div>\n    `;\n  }\n\n  private _handleNavToggle(e: Event) {\n    this.pinned = !this.pinned;\n\n    const event = new CustomEvent('on-toggle', {\n      detail: { pinned: this.pinned, origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleMobileNavToggle() {\n    this._mobileExpanded = !this._mobileExpanded;\n  }\n\n  private handlePointerEnter(e: PointerEvent) {\n    if (e.pointerType === 'mouse') {\n      clearTimeout(this._leaveTimer);\n\n      this._enterTimer = setTimeout(() => {\n        this._expanded = true;\n      }, 150);\n    }\n  }\n\n  private handlePointerLeave(e: PointerEvent) {\n    if (e.pointerType === 'mouse') {\n      clearTimeout(this._enterTimer);\n\n      this._leaveTimer = setTimeout(() => {\n        this._expanded = false;\n      }, 150);\n    }\n  }\n\n  private _updateChildren() {\n    this._navLinks.forEach((link: any) => {\n      link._navExpanded = this._expanded || this.pinned;\n      link._navExpandedMobile = this._mobileExpanded;\n    });\n\n    this._dividers.forEach((divider: any) => {\n      divider._navExpanded =\n        this._expanded || this.pinned || this._mobileExpanded;\n    });\n  }\n\n  private handleSlotChange() {\n    this._updateChildren();\n    this.requestUpdate();\n  }\n\n  private _handleLinkActive(e: any) {\n    this._activeLinkText = e.detail.text;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (\n      changedProps.has('_expanded') ||\n      changedProps.has('pinned') ||\n      changedProps.has('_mobileExpanded')\n    ) {\n      this._updateChildren();\n    }\n\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this._expanded = false;\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\n    this.addEventListener('on-link-active', (e) => this._handleLinkActive(e));\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this._handleClickOut(e));\n    this.removeEventListener('on-link-active', (e) =>\n      this._handleLinkActive(e)\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-local-nav': LocalNav;\n  }\n}\n"],"names":["_defaultTextStrings","pin","unpin","toggleMenu","collapse","menu","LocalNav","LitElement","constructor","this","pinned","textStrings","_textStrings","_expanded","_mobileExpanded","render","html","classMap","e","handlePointerLeave","handlePointerEnter","_handleMobileNavToggle","_activeLinkText","unsafeSVG","arrowIcon","handleSlotChange","_handleNavToggle","pinIcon","event","CustomEvent","detail","origEvent","dispatchEvent","pointerType","clearTimeout","_leaveTimer","_enterTimer","setTimeout","_updateChildren","_navLinks","forEach","link","_navExpanded","_navExpandedMobile","_dividers","divider","requestUpdate","_handleLinkActive","text","willUpdate","changedProps","has","deepmerge","_handleClickOut","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","LocalNavScss","__decorate","property","type","Boolean","prototype","Object","state","queryAssignedElements","selector","customElement"],"mappings":"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"}
+{"version":3,"file":"localNav.js","sources":["../../../../src/components/global/localNav/localNav.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 { deepmerge } from 'deepmerge-ts';\nimport '../../reusable/button';\nimport LocalNavScss from './localNav.scss';\n\nimport arrowIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport pinIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/side-drawer-out.svg';\n\nconst _defaultTextStrings = {\n  pin: 'Pin',\n  unpin: 'Unpin',\n  toggleMenu: 'Toggle Menu',\n  collapse: 'Collapse',\n  menu: 'Menu',\n};\n\n/**\n * The global Side Navigation component.\n * @slot unnamed - The default slot, for local nav links.\n * @slot search - Slot for a search input\n * @fires on-toggle - Captures the click event and emits the pinned state and original event details.\n */\n@customElement('kyn-local-nav')\nexport class LocalNav extends LitElement {\n  static override styles = LocalNavScss;\n\n  /** Local nav pinned state. */\n  @property({ type: Boolean })\n  pinned = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /** Local nav desktop expanded state.\n   * @internal\n   */\n  @state()\n  _expanded = false;\n\n  /** Local nav mobile expanded state.\n   * @internal\n   */\n  @state()\n  _mobileExpanded = false;\n\n  /** Active Link text.\n   * @internal\n   */\n  @state()\n  _activeLinkText!: string;\n\n  /** Queries top-level slotted links.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-local-nav-link' })\n  _navLinks!: any;\n\n  /** Queries top-level slotted dividers.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-local-nav-divider' })\n  _dividers!: any;\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  override render() {\n    return html`\n      <nav\n        class=${classMap({\n          'nav--expanded': this._expanded || this.pinned,\n          'nav--expanded-mobile': this._mobileExpanded,\n          pinned: this.pinned,\n        })}\n        @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n        @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n      >\n        <button\n          class=\"mobile-toggle\"\n          title=${this._textStrings.toggleMenu}\n          aria-label=${this._textStrings.toggleMenu}\n          @click=${this._handleMobileNavToggle}\n        >\n          ${this._mobileExpanded\n            ? this._textStrings.collapse\n            : this._activeLinkText || this._textStrings.menu}\n          ${unsafeSVG(arrowIcon)}\n        </button>\n\n        <div class=\"search\">\n          <slot name=\"search\"></slot>\n        </div>\n\n        <div class=\"links\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </div>\n\n        <div class=\"toggle-container\">\n          <kyn-button\n            kind=\"ghost\"\n            size=\"small\"\n            description=${this.pinned\n              ? this._textStrings.unpin\n              : this._textStrings.pin}\n            @on-click=${(e: Event) => this._handleNavToggle(e)}\n          >\n            <span class=\"pin-icon\" slot=\"icon\"> ${unsafeSVG(pinIcon)} </span>\n          </kyn-button>\n        </div>\n      </nav>\n\n      <div class=\"overlay ${this.pinned ? 'pinned' : ''}\"></div>\n    `;\n  }\n\n  private _handleNavToggle(e: Event) {\n    this.pinned = !this.pinned;\n\n    const event = new CustomEvent('on-toggle', {\n      detail: { pinned: this.pinned, origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleMobileNavToggle() {\n    this._mobileExpanded = !this._mobileExpanded;\n  }\n\n  private handlePointerEnter(e: PointerEvent) {\n    if (e.pointerType === 'mouse') {\n      clearTimeout(this._leaveTimer);\n\n      this._enterTimer = setTimeout(() => {\n        this._expanded = true;\n      }, 150);\n    }\n  }\n\n  private handlePointerLeave(e: PointerEvent) {\n    if (e.pointerType === 'mouse') {\n      clearTimeout(this._enterTimer);\n\n      this._leaveTimer = setTimeout(() => {\n        this._expanded = false;\n      }, 150);\n    }\n  }\n\n  private _updateChildren() {\n    this._navLinks.forEach((link: any) => {\n      link._navExpanded = this._expanded || this.pinned;\n      link._navExpandedMobile = this._mobileExpanded;\n    });\n\n    this._dividers.forEach((divider: any) => {\n      divider._navExpanded =\n        this._expanded || this.pinned || this._mobileExpanded;\n    });\n  }\n\n  private handleSlotChange() {\n    this._updateChildren();\n    this.requestUpdate();\n  }\n\n  private _handleLinkActive(e: any) {\n    this._activeLinkText = e.detail.text;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (\n      changedProps.has('_expanded') ||\n      changedProps.has('pinned') ||\n      changedProps.has('_mobileExpanded')\n    ) {\n      this._updateChildren();\n    }\n\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this._expanded = false;\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\n    this.addEventListener('on-link-active', (e) => this._handleLinkActive(e));\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this._handleClickOut(e));\n    this.removeEventListener('on-link-active', (e) =>\n      this._handleLinkActive(e)\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-local-nav': LocalNav;\n  }\n}\n"],"names":["_defaultTextStrings","pin","unpin","toggleMenu","collapse","menu","LocalNav","LitElement","constructor","this","pinned","textStrings","_textStrings","_expanded","_mobileExpanded","render","html","classMap","e","handlePointerLeave","handlePointerEnter","_handleMobileNavToggle","_activeLinkText","unsafeSVG","arrowIcon","handleSlotChange","_handleNavToggle","pinIcon","event","CustomEvent","detail","origEvent","dispatchEvent","pointerType","clearTimeout","_leaveTimer","_enterTimer","setTimeout","_updateChildren","_navLinks","forEach","link","_navExpanded","_navExpandedMobile","_dividers","divider","requestUpdate","_handleLinkActive","text","willUpdate","changedProps","has","deepmerge","_handleClickOut","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","LocalNavScss","__decorate","property","type","Boolean","prototype","Object","state","queryAssignedElements","selector","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"localNavLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAavC;;;;;;GAMG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,MAAoB;IAE1C,gBAAgB;IAEhB,IAAI,SAAM;IAEV,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,oBAAoB;IAEpB,MAAM,UAAS;IAEf,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,SAAU;IAElB,yHAAyH;IAEzH,WAAW,UAAS;IAEpB;;OAEG;IAEH,MAAM,SAAK;IAEX;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,kBAAkB,UAAS;IAE3B;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,SAAS,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvB;;;OAGG;IAEH,KAAK,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEV,MAAM;IA+CN,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAelC,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,WAAW;CA2BpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,YAAY,CAAC;KACpC;CACF"}
+{"version":3,"file":"localNavLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAavC;;;;;;GAMG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,MAAoB;IAE1C,gBAAgB;IAEhB,IAAI,SAAM;IAEV,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,oBAAoB;IAEpB,MAAM,UAAS;IAEf,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,SAAU;IAElB,yHAAyH;IAEzH,WAAW,UAAS;IAEpB;;OAEG;IAEH,MAAM,SAAK;IAEX;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,kBAAkB,UAAS;IAE3B;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,SAAS,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvB;;;OAGG;IAEH,KAAK,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEV,MAAM;IAiDN,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAelC,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,WAAW;CA2BpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,YAAY,CAAC;KACpC;CACF"}

package/components/global/localNav/localNavLink.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 a,e as d}from"../../../vendor/lit-446874c7.js";import{i as r,s as l,x as s}from"../../../vendor/lit-element-c6c02f24.js";import{f as p,d as h}from"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";var c=r`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{n as i,t as n,l as o,o as a,e as d}from"../../../vendor/lit-446874c7.js";import{i as l,s as r,x as s}from"../../../vendor/lit-element-c6c02f24.js";import{f as p,d as h}from"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";var c=l`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -53,7 +53,7 @@ a {
     padding: 8px;
   }
 }
-a ::slotted(*) {
+.has-icon a .icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -61,8 +61,18 @@ a ::slotted(*) {
   width: 24px;
   height: 24px;
 }
+a slot[name=icon]::slotted(span),
+a slot[name=icon]::slotted(svg) {
+  width: 16px;
+  height: 16px;
+}
 .left-padding a {
-  padding-left: 32px;
+  padding-left: 28px;
+}
+@media screen and (min-width: 42rem) {
+  .left-padding a {
+    padding-left: 32px;
+  }
 }
 .link-active a {
   background-color: var(--kd-color-background-menu-state-active);
@@ -266,8 +276,7 @@ a:active {
   font-weight: 500;
   color: var(--kd-color-text-level-tertiary-bold);
   text-transform: uppercase;
-  padding: 20px 8px 8px;
-  border-bottom: 1px solid var(--kd-color-border-variants-light);
+  padding: 20px 8px 0;
 }
 @media (min-width: 42rem) {
   .category {
@@ -343,14 +352,16 @@ a:active {
 }
 .expand-icon svg {
   display: block;
-}`;let v=class extends l{constructor(){super(...arguments),this.href="",this.expanded=!1,this.active=!1,this.disabled=!1,this.backText="Back",this.leftPadding=!1,this._level=1,this._navExpanded=!1,this._navExpandedMobile=!1,this._text=""}render(){const e={link:!0,"top-level":1===this._level,"sub-level":this._level>1,"nav-expanded":this._navExpanded||this._navExpandedMobile,"link-expanded":this.expanded,"link-active":this.active,"link-disabled":this.disabled,"has-links":this._navLinks.length,"has-icon":this._icon.length,"left-padding":this.leftPadding&&this._level>1};return s`
+}`;let v=class extends r{constructor(){super(...arguments),this.href="",this.expanded=!1,this.active=!1,this.disabled=!1,this.backText="Back",this.leftPadding=!1,this._level=1,this._navExpanded=!1,this._navExpandedMobile=!1,this._text=""}render(){const e={link:!0,"top-level":1===this._level,"sub-level":this._level>1,"nav-expanded":this._navExpanded||this._navExpandedMobile,"link-expanded":this.expanded,"link-active":this.active,"link-disabled":this.disabled,"has-links":this._navLinks.length,"has-icon":this._icon.length,"left-padding":this.leftPadding&&this._level>1};return s`
       <div class=${a(e)}>
         <a href=${this.href} @click=${e=>this.handleClick(e)}>
           ${this._navLinks.length?s`
                 <span class="expand-icon"> ${t(p)} </span>
               `:null}
 
-          <slot name="icon"></slot>
+          <div class="icon">
+            <slot name="icon"></slot>
+          </div>
 
           <span class="text">
             <slot @slotchange=${this._handleTextSlotChange}></slot>
@@ -369,5 +380,5 @@ a:active {
           <slot name="links" @slotchange=${this._handleLinksSlotChange}></slot>
         </div>
       </div>
-    `}willUpdate(e){e.has("_navExpanded")&&this.updateChildren()}updated(e){if(e.has("active")&&this.active){this._getSlotText();const e=new CustomEvent("on-link-active",{composed:!0,bubbles:!0,detail:{text:this._text}});this.dispatchEvent(e)}}_handleTextSlotChange(){this._getSlotText(),this.requestUpdate()}_getSlotText(){var e;let t="";const i=(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".text slot")).assignedNodes({flatten:!0});for(let e=0;e<i.length;e++)t+=i[e].textContent.trim();this._text=t}_handleLinksSlotChange(){this.updateChildren(),this.requestUpdate()}updateChildren(){this._navLinks.forEach((e=>{e._level=this._level+1,e._navExpanded=this._navExpanded||this._navExpandedMobile})),this._dividers.forEach((e=>{e._navExpanded=this._navExpanded||this._navExpandedMobile}))}_handleBack(){this.expanded=!1}handleClick(e){let t=!1;this.disabled&&(t=!0),this._navLinks.length&&(t=!0,this.expanded=!this.expanded),t&&e.preventDefault(),this.requestUpdate();const i=new CustomEvent("on-click",{detail:{origEvent:e,level:this._level,defaultPrevented:t}});this.dispatchEvent(i)}};v.styles=c,e([i({type:String})],v.prototype,"href",void 0),e([i({type:Boolean})],v.prototype,"expanded",void 0),e([i({type:Boolean,reflect:!0})],v.prototype,"active",void 0),e([i({type:Boolean})],v.prototype,"disabled",void 0),e([i({type:String})],v.prototype,"backText",void 0),e([i({type:Boolean})],v.prototype,"leftPadding",void 0),e([o()],v.prototype,"_level",void 0),e([o()],v.prototype,"_navExpanded",void 0),e([o()],v.prototype,"_navExpandedMobile",void 0),e([o()],v.prototype,"_text",void 0),e([n({slot:"links",selector:"kyn-local-nav-link"})],v.prototype,"_navLinks",void 0),e([n({slot:"links",selector:"kyn-local-nav-divider"})],v.prototype,"_dividers",void 0),e([n({slot:"icon"})],v.prototype,"_icon",void 0),v=e([d("kyn-local-nav-link")],v);export{v as LocalNavLink};
+    `}willUpdate(e){e.has("_navExpanded")&&this.updateChildren()}updated(e){if(e.has("active")&&this.active){this._getSlotText();const e=new CustomEvent("on-link-active",{composed:!0,bubbles:!0,detail:{text:this._text}});this.dispatchEvent(e)}}_handleTextSlotChange(){this._getSlotText(),this.requestUpdate()}_getSlotText(){var e;let t="";const i=(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".text slot")).assignedNodes({flatten:!0});for(let e=0;e<i.length;e++)t+=i[e].textContent.trim();this._text=t}_handleLinksSlotChange(){this.updateChildren(),this.requestUpdate()}updateChildren(){this._navLinks.forEach((e=>{e._level=this._level+1,e._navExpanded=this._navExpanded||this._navExpandedMobile})),this._dividers.forEach((e=>{e._navExpanded=this._navExpanded||this._navExpandedMobile}))}_handleBack(){this.expanded=!1}handleClick(e){let t=!1;this.disabled&&(t=!0),this._navLinks.length&&(t=!0,this.expanded=!this.expanded),t&&e.preventDefault(),this.requestUpdate();const i=new CustomEvent("on-click",{detail:{origEvent:e,level:this._level,defaultPrevented:t}});this.dispatchEvent(i)}};v.styles=c,e([i({type:String})],v.prototype,"href",void 0),e([i({type:Boolean})],v.prototype,"expanded",void 0),e([i({type:Boolean,reflect:!0})],v.prototype,"active",void 0),e([i({type:Boolean})],v.prototype,"disabled",void 0),e([i({type:String})],v.prototype,"backText",void 0),e([i({type:Boolean})],v.prototype,"leftPadding",void 0),e([n()],v.prototype,"_level",void 0),e([n()],v.prototype,"_navExpanded",void 0),e([n()],v.prototype,"_navExpandedMobile",void 0),e([n()],v.prototype,"_text",void 0),e([o({slot:"links",selector:"kyn-local-nav-link"})],v.prototype,"_navLinks",void 0),e([o({slot:"links",selector:"kyn-local-nav-divider"})],v.prototype,"_dividers",void 0),e([o({slot:"icon"})],v.prototype,"_icon",void 0),v=e([d("kyn-local-nav-link")],v);export{v as LocalNavLink};
 //# sourceMappingURL=localNavLink.js.map

package/components/global/localNav/localNavLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"localNavLink.js","sources":["../../../../src/components/global/localNav/localNavLink.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 LocalNavLinkScss from './localNavLink.scss';\n\nimport backIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-left.svg';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\n\n/**\n * Link component for use in the global Side Navigation component.\n * @fires on-click - Captures the click event and emits the original event, level, and if default was prevented.\n * @slot unnamed - The default slot, for the link text.\n * @slot icon - Slot for an icon. Use 16px size. Required for level 1.\n * @slot links - Slot for the next level of links, supports three levels.\n */\n@customElement('kyn-local-nav-link')\nexport class LocalNavLink extends LitElement {\n  static override styles = LocalNavLinkScss;\n\n  /** Link url. */\n  @property({ type: String })\n  href = '';\n\n  /** Expanded state. */\n  @property({ type: Boolean })\n  expanded = false;\n\n  /** Active state. */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\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. Does not apply to level 1. */\n  @property({ type: Boolean })\n  leftPadding = false;\n\n  /** Link level, supports three levels.\n   * @ignore\n   */\n  @state()\n  _level = 1;\n\n  /** The local nav desktop expanded state.\n   * @internal\n   */\n  @state()\n  _navExpanded = false;\n\n  /** The local nav mobile expanded state.\n   * @internal\n   */\n  @state()\n  _navExpandedMobile = false;\n\n  /** The slotted text.\n   * @internal\n   */\n  @state()\n  _text = '';\n\n  /**\n   * Queries slotted links.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-link' })\n  _navLinks!: Array<any>;\n\n  /**\n   * Queries slotted dividers.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-divider' })\n  _dividers!: Array<any>;\n\n  /**\n   * Queries slotted icon.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'icon' })\n  _icon!: Array<any>;\n\n  override render() {\n    const classes = {\n      link: true,\n      'top-level': this._level === 1,\n      'sub-level': this._level > 1,\n      'nav-expanded': this._navExpanded || this._navExpandedMobile,\n      'link-expanded': this.expanded,\n      'link-active': this.active,\n      'link-disabled': this.disabled,\n      'has-links': this._navLinks.length,\n      'has-icon': this._icon.length,\n      'left-padding': this.leftPadding && this._level > 1,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        <a href=${this.href} @click=${(e: Event) => this.handleClick(e)}>\n          ${this._navLinks.length\n            ? html`\n                <span class=\"expand-icon\"> ${unsafeSVG(chevronIcon)} </span>\n              `\n            : null}\n\n          <slot name=\"icon\"></slot>\n\n          <span class=\"text\">\n            <slot @slotchange=${this._handleTextSlotChange}></slot>\n          </span>\n        </a>\n\n        <div class=\"sub-menu\">\n          ${this._navLinks.length\n            ? html`\n                <button class=\"go-back\" @click=${() => this._handleBack()}>\n                  ${unsafeSVG(backIcon)} ${this.backText}\n                </button>\n              `\n            : null}\n\n          <div class=\"category\">${this._text}</div>\n\n          <slot name=\"links\" @slotchange=${this._handleLinksSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('_navExpanded')) {\n      this.updateChildren();\n    }\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('active') && this.active) {\n      this._getSlotText();\n\n      const event = new CustomEvent('on-link-active', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          text: this._text,\n        },\n      });\n      this.dispatchEvent(event);\n    }\n  }\n\n  private _handleTextSlotChange() {\n    this._getSlotText();\n    this.requestUpdate();\n  }\n\n  private _getSlotText() {\n    const Slot: any = this.shadowRoot?.querySelector('.text slot');\n    let text = '';\n\n    const nodes = Slot.assignedNodes({\n      flatten: true,\n    });\n\n    for (let i = 0; i < nodes.length; i++) {\n      text += nodes[i].textContent.trim();\n    }\n\n    this._text = text;\n  }\n\n  private _handleLinksSlotChange() {\n    this.updateChildren();\n    this.requestUpdate();\n  }\n\n  private updateChildren() {\n    this._navLinks.forEach((link: any) => {\n      link._level = this._level + 1;\n      link._navExpanded = this._navExpanded || this._navExpandedMobile;\n    });\n\n    this._dividers.forEach((divider: any) => {\n      divider._navExpanded = this._navExpanded || this._navExpandedMobile;\n    });\n  }\n\n  private _handleBack() {\n    this.expanded = false;\n  }\n\n  private handleClick(e: Event) {\n    let preventDefault = false;\n\n    if (this.disabled) {\n      preventDefault = true;\n    }\n\n    if (this._navLinks.length) {\n      preventDefault = true;\n      this.expanded = !this.expanded;\n    }\n\n    if (preventDefault) {\n      e.preventDefault();\n    }\n\n    this.requestUpdate();\n\n    const event = new CustomEvent('on-click', {\n      detail: {\n        origEvent: e,\n        level: this._level,\n        defaultPrevented: preventDefault,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-local-nav-link': LocalNavLink;\n  }\n}\n"],"names":["LocalNavLink","LitElement","constructor","this","href","expanded","active","disabled","backText","leftPadding","_level","_navExpanded","_navExpandedMobile","_text","render","classes","link","_navLinks","length","_icon","html","classMap","e","handleClick","unsafeSVG","chevronIcon","_handleTextSlotChange","_handleBack","backIcon","_handleLinksSlotChange","willUpdate","changedProps","has","updateChildren","updated","_getSlotText","event","CustomEvent","composed","bubbles","detail","text","dispatchEvent","requestUpdate","nodes","_a","shadowRoot","querySelector","assignedNodes","flatten","i","textContent","trim","forEach","_dividers","divider","preventDefault","origEvent","level","defaultPrevented","styles","LocalNavLinkScss","__decorate","property","type","String","prototype","Boolean","reflect","state","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}
+{"version":3,"file":"localNavLink.js","sources":["../../../../src/components/global/localNav/localNavLink.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 LocalNavLinkScss from './localNavLink.scss';\n\nimport backIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-left.svg';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\n\n/**\n * Link component for use in the global Side Navigation component.\n * @fires on-click - Captures the click event and emits the original event, level, and if default was prevented.\n * @slot unnamed - The default slot, for the link text.\n * @slot icon - Slot for an icon. Use 16px size. Required for level 1.\n * @slot links - Slot for the next level of links, supports three levels.\n */\n@customElement('kyn-local-nav-link')\nexport class LocalNavLink extends LitElement {\n  static override styles = LocalNavLinkScss;\n\n  /** Link url. */\n  @property({ type: String })\n  href = '';\n\n  /** Expanded state. */\n  @property({ type: Boolean })\n  expanded = false;\n\n  /** Active state. */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\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. Does not apply to level 1. */\n  @property({ type: Boolean })\n  leftPadding = false;\n\n  /** Link level, supports three levels.\n   * @ignore\n   */\n  @state()\n  _level = 1;\n\n  /** The local nav desktop expanded state.\n   * @internal\n   */\n  @state()\n  _navExpanded = false;\n\n  /** The local nav mobile expanded state.\n   * @internal\n   */\n  @state()\n  _navExpandedMobile = false;\n\n  /** The slotted text.\n   * @internal\n   */\n  @state()\n  _text = '';\n\n  /**\n   * Queries slotted links.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-link' })\n  _navLinks!: Array<any>;\n\n  /**\n   * Queries slotted dividers.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-divider' })\n  _dividers!: Array<any>;\n\n  /**\n   * Queries slotted icon.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'icon' })\n  _icon!: Array<any>;\n\n  override render() {\n    const classes = {\n      link: true,\n      'top-level': this._level === 1,\n      'sub-level': this._level > 1,\n      'nav-expanded': this._navExpanded || this._navExpandedMobile,\n      'link-expanded': this.expanded,\n      'link-active': this.active,\n      'link-disabled': this.disabled,\n      'has-links': this._navLinks.length,\n      'has-icon': this._icon.length,\n      'left-padding': this.leftPadding && this._level > 1,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        <a href=${this.href} @click=${(e: Event) => this.handleClick(e)}>\n          ${this._navLinks.length\n            ? html`\n                <span class=\"expand-icon\"> ${unsafeSVG(chevronIcon)} </span>\n              `\n            : null}\n\n          <div class=\"icon\">\n            <slot name=\"icon\"></slot>\n          </div>\n\n          <span class=\"text\">\n            <slot @slotchange=${this._handleTextSlotChange}></slot>\n          </span>\n        </a>\n\n        <div class=\"sub-menu\">\n          ${this._navLinks.length\n            ? html`\n                <button class=\"go-back\" @click=${() => this._handleBack()}>\n                  ${unsafeSVG(backIcon)} ${this.backText}\n                </button>\n              `\n            : null}\n\n          <div class=\"category\">${this._text}</div>\n\n          <slot name=\"links\" @slotchange=${this._handleLinksSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('_navExpanded')) {\n      this.updateChildren();\n    }\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('active') && this.active) {\n      this._getSlotText();\n\n      const event = new CustomEvent('on-link-active', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          text: this._text,\n        },\n      });\n      this.dispatchEvent(event);\n    }\n  }\n\n  private _handleTextSlotChange() {\n    this._getSlotText();\n    this.requestUpdate();\n  }\n\n  private _getSlotText() {\n    const Slot: any = this.shadowRoot?.querySelector('.text slot');\n    let text = '';\n\n    const nodes = Slot.assignedNodes({\n      flatten: true,\n    });\n\n    for (let i = 0; i < nodes.length; i++) {\n      text += nodes[i].textContent.trim();\n    }\n\n    this._text = text;\n  }\n\n  private _handleLinksSlotChange() {\n    this.updateChildren();\n    this.requestUpdate();\n  }\n\n  private updateChildren() {\n    this._navLinks.forEach((link: any) => {\n      link._level = this._level + 1;\n      link._navExpanded = this._navExpanded || this._navExpandedMobile;\n    });\n\n    this._dividers.forEach((divider: any) => {\n      divider._navExpanded = this._navExpanded || this._navExpandedMobile;\n    });\n  }\n\n  private _handleBack() {\n    this.expanded = false;\n  }\n\n  private handleClick(e: Event) {\n    let preventDefault = false;\n\n    if (this.disabled) {\n      preventDefault = true;\n    }\n\n    if (this._navLinks.length) {\n      preventDefault = true;\n      this.expanded = !this.expanded;\n    }\n\n    if (preventDefault) {\n      e.preventDefault();\n    }\n\n    this.requestUpdate();\n\n    const event = new CustomEvent('on-click', {\n      detail: {\n        origEvent: e,\n        level: this._level,\n        defaultPrevented: preventDefault,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-local-nav-link': LocalNavLink;\n  }\n}\n"],"names":["LocalNavLink","LitElement","constructor","this","href","expanded","active","disabled","backText","leftPadding","_level","_navExpanded","_navExpandedMobile","_text","render","classes","link","_navLinks","length","_icon","html","classMap","e","handleClick","unsafeSVG","chevronIcon","_handleTextSlotChange","_handleBack","backIcon","_handleLinksSlotChange","willUpdate","changedProps","has","updateChildren","updated","_getSlotText","event","CustomEvent","composed","bubbles","detail","text","dispatchEvent","requestUpdate","nodes","_a","shadowRoot","querySelector","assignedNodes","flatten","i","textContent","trim","forEach","_dividers","divider","preventDefault","origEvent","level","defaultPrevented","styles","LocalNavLinkScss","__decorate","property","type","String","prototype","Boolean","reflect","state","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}

package/components/reusable/tabs/tab.d.ts

@@ -8,7 +8,6 @@ export declare class Tab extends LitElement {
     vertical: boolean;
     private get _vertical();
     aiConnected: boolean;
-    tabStyle: string;
     role: string;
     tabIndex: number;
     'aria-selected': string;

package/components/reusable/tabs/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,MAAW;IAGxB,EAAE,SAAM;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,CAAC,KAAK,CAAQ;IAGrB,QAAQ,UAAS;IAIjB,OAAO,KAAK,SAAS,GAEpB;IAWD,WAAW,UAAS;IAGpB,QAAQ,SAAa;IAGZ,IAAI,SAAS;IAGb,QAAQ,SAAK;IAGtB,eAAe,SAAW;IAG1B,eAAe,SAAM;IAGrB,eAAe,SAAW;IAEjB,MAAM;IAoBN,iBAAiB;IAKjB,oBAAoB;IAKpB,UAAU,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAetD,OAAO,CAAC,YAAY,CASlB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,GAAG,CAAC;KAChB;CACF"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,MAAW;IAGxB,EAAE,SAAM;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,CAAC,KAAK,CAAQ;IAGrB,QAAQ,UAAS;IAIjB,OAAO,KAAK,SAAS,GAEpB;IAWD,WAAW,UAAS;IAGX,IAAI,SAAS;IAGb,QAAQ,SAAK;IAGtB,eAAe,SAAW;IAG1B,eAAe,SAAM;IAGrB,eAAe,SAAW;IAEjB,MAAM;IAkBN,iBAAiB;IAKjB,oBAAoB;IAKpB,UAAU,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAetD,OAAO,CAAC,YAAY,CASlB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,GAAG,CAAC;KAChB;CACF"}

package/components/reusable/tabs/tab.js

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as r,o,e as a}from"../../../vendor/lit-446874c7.js";import{i as d,s as i,x as l}from"../../../vendor/lit-element-c6c02f24.js";var n=d`*,
+import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,t as o,o as r,e as i}from"../../../vendor/lit-446874c7.js";import{i as a,s as d,x as l}from"../../../vendor/lit-element-c6c02f24.js";var s=a`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -37,10 +37,6 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as r,o,e a
   outline: 2px solid transparent;
   outline-offset: -2px;
   transition: outline-color 150ms ease-out;
-  border-radius: 0 0 4px 4px;
-}
-
-:host([data-tab-style=line]) {
   border-radius: 4px 4px 0 0;
 }
 
@@ -56,9 +52,6 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as r,o,e a
   :host([vertical]) {
     border-radius: 0 4px 4px 0;
   }
-  :host([vertical][data-tab-style=line]) {
-    border-radius: 0 4px 4px 0;
-  }
 }
 .tab {
   display: flex;
@@ -67,15 +60,21 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as r,o,e a
   cursor: pointer;
   white-space: nowrap;
   text-align: center;
+  border-radius: 4px 4px 0 0;
+  border-bottom: 1px solid var(--kd-color-border-accent-secondary);
   transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
 }
 .tab ::slotted(svg) {
   display: flex;
 }
+.tab.size--md {
+  height: 48px;
+  padding: 12px 14px;
+}
 .tab.size--sm {
   font-family: var(--kd-font-family-secondary);
-  font-size: var(--kd-font-size-utility-2-sm);
-  line-height: var(--kd-line-height-utility-2-sm);
+  font-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);
   height: 30px;
@@ -83,143 +82,84 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as r,o,e a
 }
 @media (min-width: 42rem) {
   .tab.size--sm {
-    font-size: var(--kd-font-size-utility-2-md);
-    line-height: var(--kd-line-height-utility-2-md);
+    font-size: var(--kd-font-size-utility-3-md);
+    line-height: var(--kd-line-height-utility-3-md);
   }
 }
 @media (min-width: 74rem) {
   .tab.size--sm {
-    font-size: var(--kd-font-size-utility-2-lg);
-    line-height: var(--kd-line-height-utility-2-lg);
+    font-size: var(--kd-font-size-utility-3-lg);
+    line-height: var(--kd-line-height-utility-3-lg);
   }
 }
 @media (min-width: 82rem) {
   .tab.size--sm {
-    font-size: var(--kd-font-size-utility-2-xlg);
-    line-height: var(--kd-line-height-utility-2-xlg);
+    font-size: var(--kd-font-size-utility-3-xlg);
+    line-height: var(--kd-line-height-utility-3-xlg);
   }
 }
 @media (min-width: 99rem) {
   .tab.size--sm {
-    font-size: var(--kd-font-size-utility-2-max);
-    line-height: var(--kd-line-height-utility-2-max);
-  }
-}
-.tab.size--md {
-  height: 48px;
-  padding: 12px 14px;
-}
-@media (min-width: 42rem) {
-  .tab.vertical {
-    border-bottom: none;
-    border-left: 2px solid var(--kd-color-border-accent-secondary);
-    white-space: initial;
-    text-align: left;
+    font-size: var(--kd-font-size-utility-3-max);
+    line-height: var(--kd-line-height-utility-3-max);
   }
 }
-.tab.primary {
-  border-radius: 0 0 4px 4px;
-  border-top: 2px solid var(--kd-color-border-accent-secondary);
-}
-.tab.secondary {
-  border-radius: 4px 4px 0 0;
-  border-bottom: 2px solid var(--kd-color-border-accent-secondary);
-}
 .tab.selected {
   font-weight: 500;
+  border-width: 2px;
+}
+.tab.vertical.selected {
+  border-width: 2px;
 }
 @media (min-width: 42rem) {
   .tab.vertical {
     border-radius: 0 4px 4px 0;
-    border-top: none;
     border-bottom: none;
-    border-left: 2px solid var(--kd-color-border-accent-secondary);
+    border-left: 1px solid var(--kd-color-border-accent-secondary);
+    white-space: initial;
+    text-align: left;
   }
 }
-.tab.primary:not(.disabled) {
-  background: transparent;
+.tab.tab:not(.disabled) {
   color: var(--kd-color-text-level-primary);
 }
-.tab.primary:not(.disabled).selected {
-  color: var(--kd-color-text-level-primary);
-  background: var(--kd-color-background-button-tertiary-state-default);
+.tab.tab:not(.disabled).selected {
   border-color: var(--kd-color-border-button-tertiary-state-focused);
+  color: var(--kd-color-text-link-level-default);
 }
-.tab.primary:not(.disabled):hover, .tab.primary:not(.disabled).selected:hover {
+.tab.tab:not(.disabled):hover, .tab.tab:not(.disabled).selected:hover {
   background: var(--kd-color-background-button-tertiary-state-hover);
-  border-color: var(--kd-color-border-button-tertiary-state-hover);
+  border-color: var(--kd-color-border-button-secondary-state-hover);
   color: var(--kd-color-text-level-primary);
 }
-.tab.primary:not(.disabled):active, .tab.primary:not(.disabled).selected:active {
-  background: var(--kd-color-background-button-tertiary-state-pressed);
-  border-color: var(--kd-color-border-button-tertiary-state-pressed);
+.tab.tab:not(.disabled):active, .tab.tab:not(.disabled).selected:active {
+  background: var(--kd-color-background-button-primary-state-pressed);
+  border-color: var(--kd-color-border-button-secondary-state-hover);
   color: var(--kd-color-text-level-light);
 }
-.tab.primary.ai-connected--true:not(.disabled) {
+.tab.tab.ai-connected--true:not(.disabled) {
   color: var(--kd-color-text-button-ai-default);
   border-color: var(--kd-color-border-level-ai-tertiary);
 }
-.tab.primary.ai-connected--true:not(.disabled).selected {
-  border-color: var(--kd-color-border-level-ai-primary);
-  background: var(--kd-color-background-button-secondary-ai-default);
+.tab.tab.ai-connected--true:not(.disabled).selected {
+  border-color: var(--kd-color-border-button-ai-state-focused);
 }
-.tab.primary.ai-connected--true:not(.disabled):hover, .tab.primary.ai-connected--true:not(.disabled).selected:hover {
+.tab.tab.ai-connected--true:not(.disabled):hover, .tab.tab.ai-connected--true:not(.disabled).selected:hover {
   background: var(--kd-color-background-button-secondary-ai-hover);
-  border-color: var(--kd-color-border-level-ai-primary);
-  color: var(--kd-color-text-level-light);
-}
-.tab.primary.ai-connected--true:not(.disabled):active, .tab.primary.ai-connected--true:not(.disabled).selected:active {
-  background: var(--kd-color-background-button-primary-ai-hover);
   border-color: var(--kd-color-border-button-ai-state-hover);
-  color: var(--kd-color-text-button-dark-primary);
-}
-.tab.secondary:not(.disabled) {
-  color: var(--kd-color-text-level-primary);
-}
-.tab.secondary:not(.disabled).selected {
-  background: var(--kd-color-background-button-tertiary-state-default);
-  border-color: var(--kd-color-border-button-tertiary-state-focused);
-}
-.tab.secondary:not(.disabled):hover, .tab.secondary:not(.disabled).selected:hover {
-  background: var(--kd-color-background-button-tertiary-state-hover);
-  border-color: var(--kd-color-border-button-tertiary-state-hover);
-}
-.tab.secondary:not(.disabled):active, .tab.secondary:not(.disabled).selected:active {
-  background: var(--kd-color-background-button-tertiary-state-pressed);
-  border-color: var(--kd-color-border-button-tertiary-state-pressed);
   color: var(--kd-color-text-level-light);
 }
-.tab.secondary.ai-connected--true:not(.disabled) {
-  color: var(--kd-color-text-button-ai-default);
-  border-color: var(--kd-color-border-level-ai-tertiary);
-}
-.tab.secondary.ai-connected--true:not(.disabled).selected {
-  border-color: var(--kd-color-border-level-ai-primary);
-  background: var(--kd-color-background-button-secondary-ai-default);
-}
-.tab.secondary.ai-connected--true:not(.disabled):hover, .tab.secondary.ai-connected--true:not(.disabled).selected:hover {
-  background: var(--kd-color-background-button-secondary-ai-hover);
-  color: var(--kd-color-text-level-light);
-  border-color: var(--kd-color-border-button-ai-state-hover);
-}
-.tab.secondary.ai-connected--true:not(.disabled):active, .tab.secondary.ai-connected--true:not(.disabled).selected:active {
+.tab.tab.ai-connected--true:not(.disabled):active, .tab.tab.ai-connected--true:not(.disabled).selected:active {
   background: var(--kd-color-background-button-primary-ai-hover);
+  border-color: var(--kd-color-border-button-ai-state-hover);
   color: var(--kd-color-text-button-dark-primary);
-  border-color: var(--kd-color-border-button-ai-state-focused);
 }
 .tab.disabled {
   color: var(--kd-color-text-link-level-disabled);
   cursor: not-allowed;
-}
-.tab.disabled.primary {
-  border-top: 2px solid var(--kd-color-border-variants-light);
-  background: var(--kd-color-background-ui-default-disabled);
-}
-.tab.disabled.secondary {
-  border-bottom: 2px solid var(--kd-color-border-variants-light);
-}`;let c=class extends i{constructor(){super(...arguments),this.id="",this.selected=!1,this.disabled=!1,this._size="md",this.vertical=!1,this.aiConnected=!1,this.tabStyle="primary",this.role="tab",this.tabIndex=0,this["aria-selected"]="false",this["aria-controls"]="",this["aria-disabled"]="false",this._handleClick=e=>{if(!this.selected&&!this.disabled){const t=new CustomEvent("tab-activated",{bubbles:!0,composed:!0,detail:{origEvent:e,tabId:this.id}});this.dispatchEvent(t)}}}get _vertical(){return this.vertical}render(){const e={tab:!0,primary:"primary"===this.tabStyle||"contained"===this.tabStyle,secondary:"secondary"===this.tabStyle||"line"===this.tabStyle,"size--sm":"sm"===this._size,"size--md":"md"===this._size,vertical:this._vertical,selected:this.selected,disabled:this.disabled,[`ai-connected--${this.aiConnected}`]:!0};return l`
-      <div class=${o(e)}>
+}`;let n=class extends d{constructor(){super(...arguments),this.id="",this.selected=!1,this.disabled=!1,this._size="md",this.vertical=!1,this.aiConnected=!1,this.role="tab",this.tabIndex=0,this["aria-selected"]="false",this["aria-controls"]="",this["aria-disabled"]="false",this._handleClick=t=>{if(!this.selected&&!this.disabled){const e=new CustomEvent("tab-activated",{bubbles:!0,composed:!0,detail:{origEvent:t,tabId:this.id}});this.dispatchEvent(e)}}}get _vertical(){return this.vertical}render(){const t={tab:!0,"size--sm":"sm"===this._size,"size--md":"md"===this._size,vertical:this._vertical,selected:this.selected,disabled:this.disabled,[`ai-connected--${this.aiConnected}`]:!0};return l`
+      <div class=${r(t)}>
         <slot></slot>
       </div>
-    `}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._handleClick)}disconnectedCallback(){this.removeEventListener("click",this._handleClick),super.disconnectedCallback()}willUpdate(e){e.has("id")&&(this["aria-controls"]=`${this.id}-panel`),e.has("selected")&&(this["aria-selected"]=this.selected.toString(),this.tabIndex=this.selected?0:-1),e.has("disabled")&&(this["aria-disabled"]=this.disabled.toString())}};c.styles=n,e([t({type:String,reflect:!0})],c.prototype,"id",void 0),e([t({type:Boolean,reflect:!0})],c.prototype,"selected",void 0),e([t({type:Boolean})],c.prototype,"disabled",void 0),e([r()],c.prototype,"_size",void 0),e([t({type:Boolean,reflect:!0,attribute:"vertical"})],c.prototype,"vertical",void 0),e([r()],c.prototype,"_vertical",null),e([t({type:Boolean,reflect:!0,attribute:"data-aiconnected",converter:{fromAttribute:e=>"true"===e,toAttribute:e=>e?"true":"false"}})],c.prototype,"aiConnected",void 0),e([t({type:String,reflect:!0,attribute:"data-tab-style"})],c.prototype,"tabStyle",void 0),e([t({type:String,reflect:!0})],c.prototype,"role",void 0),e([t({type:Number,reflect:!0})],c.prototype,"tabIndex",void 0),e([t({type:String,reflect:!0})],c.prototype,"aria-selected",void 0),e([t({type:String,reflect:!0})],c.prototype,"aria-controls",void 0),e([t({type:String,reflect:!0})],c.prototype,"aria-disabled",void 0),c=e([a("kyn-tab")],c);export{c as Tab};
+    `}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._handleClick)}disconnectedCallback(){this.removeEventListener("click",this._handleClick),super.disconnectedCallback()}willUpdate(t){t.has("id")&&(this["aria-controls"]=`${this.id}-panel`),t.has("selected")&&(this["aria-selected"]=this.selected.toString(),this.tabIndex=this.selected?0:-1),t.has("disabled")&&(this["aria-disabled"]=this.disabled.toString())}};n.styles=s,t([e({type:String,reflect:!0})],n.prototype,"id",void 0),t([e({type:Boolean,reflect:!0})],n.prototype,"selected",void 0),t([e({type:Boolean})],n.prototype,"disabled",void 0),t([o()],n.prototype,"_size",void 0),t([e({type:Boolean,reflect:!0,attribute:"vertical"})],n.prototype,"vertical",void 0),t([o()],n.prototype,"_vertical",null),t([e({type:Boolean,reflect:!0,attribute:"data-aiconnected",converter:{fromAttribute:t=>"true"===t,toAttribute:t=>t?"true":"false"}})],n.prototype,"aiConnected",void 0),t([e({type:String,reflect:!0})],n.prototype,"role",void 0),t([e({type:Number,reflect:!0})],n.prototype,"tabIndex",void 0),t([e({type:String,reflect:!0})],n.prototype,"aria-selected",void 0),t([e({type:String,reflect:!0})],n.prototype,"aria-controls",void 0),t([e({type:String,reflect:!0})],n.prototype,"aria-disabled",void 0),n=t([i("kyn-tab")],n);export{n as Tab};
 //# sourceMappingURL=tab.js.map

package/components/reusable/tabs/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../src/components/reusable/tabs/tab.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabScss from './tab.scss';\n\n@customElement('kyn-tab')\nexport class Tab extends LitElement {\n  static override styles = TabScss;\n\n  @property({ type: String, reflect: true })\n  override id = '';\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @state()\n  private _size = 'md';\n\n  @property({ type: Boolean, reflect: true, attribute: 'vertical' })\n  vertical = false;\n\n  // Keep private state for backward compatibility\n  @state()\n  private get _vertical(): boolean {\n    return this.vertical;\n  }\n\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'data-aiconnected',\n    converter: {\n      fromAttribute: (value: string | null) => value === 'true',\n      toAttribute: (value: boolean) => (value ? 'true' : 'false'),\n    },\n  })\n  aiConnected = false;\n\n  @property({ type: String, reflect: true, attribute: 'data-tab-style' })\n  tabStyle = 'primary';\n\n  @property({ type: String, reflect: true })\n  override role = 'tab';\n\n  @property({ type: Number, reflect: true })\n  override tabIndex = 0;\n\n  @property({ type: String, reflect: true })\n  'aria-selected' = 'false';\n\n  @property({ type: String, reflect: true })\n  'aria-controls' = '';\n\n  @property({ type: String, reflect: true })\n  'aria-disabled' = 'false';\n\n  override render() {\n    const classes = {\n      tab: true,\n      primary: this.tabStyle === 'primary' || this.tabStyle === 'contained',\n      secondary: this.tabStyle === 'secondary' || this.tabStyle === 'line',\n      'size--sm': this._size === 'sm',\n      'size--md': this._size === 'md',\n      vertical: this._vertical,\n      selected: this.selected,\n      disabled: this.disabled,\n      [`ai-connected--${this.aiConnected}`]: true,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this._handleClick);\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('click', this._handleClick);\n    super.disconnectedCallback();\n  }\n\n  override willUpdate(changedProps: Map<string, unknown>) {\n    if (changedProps.has('id')) {\n      this['aria-controls'] = `${this.id}-panel`;\n    }\n\n    if (changedProps.has('selected')) {\n      this['aria-selected'] = this.selected.toString();\n      this.tabIndex = this.selected ? 0 : -1;\n    }\n\n    if (changedProps.has('disabled')) {\n      this['aria-disabled'] = this.disabled.toString();\n    }\n  }\n\n  private _handleClick = (e: Event) => {\n    if (!this.selected && !this.disabled) {\n      const event = new CustomEvent('tab-activated', {\n        bubbles: true,\n        composed: true,\n        detail: { origEvent: e, tabId: this.id },\n      });\n      this.dispatchEvent(event);\n    }\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-tab': Tab;\n  }\n}\n"],"names":["Tab","LitElement","constructor","this","id","selected","disabled","_size","vertical","aiConnected","tabStyle","role","tabIndex","_handleClick","e","event","CustomEvent","bubbles","composed","detail","origEvent","tabId","dispatchEvent","_vertical","render","classes","tab","primary","secondary","html","classMap","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","toString","styles","TabScss","__decorate","property","type","String","reflect","prototype","Boolean","state","attribute","converter","fromAttribute","value","toAttribute","Number","customElement"],"mappings":"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"}
+{"version":3,"file":"tab.js","sources":["../../../../src/components/reusable/tabs/tab.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabScss from './tab.scss';\n\n@customElement('kyn-tab')\nexport class Tab extends LitElement {\n  static override styles = TabScss;\n\n  @property({ type: String, reflect: true })\n  override id = '';\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @state()\n  private _size = 'md';\n\n  @property({ type: Boolean, reflect: true, attribute: 'vertical' })\n  vertical = false;\n\n  // Keep private state for backward compatibility\n  @state()\n  private get _vertical(): boolean {\n    return this.vertical;\n  }\n\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'data-aiconnected',\n    converter: {\n      fromAttribute: (value: string | null) => value === 'true',\n      toAttribute: (value: boolean) => (value ? 'true' : 'false'),\n    },\n  })\n  aiConnected = false;\n\n  @property({ type: String, reflect: true })\n  override role = 'tab';\n\n  @property({ type: Number, reflect: true })\n  override tabIndex = 0;\n\n  @property({ type: String, reflect: true })\n  'aria-selected' = 'false';\n\n  @property({ type: String, reflect: true })\n  'aria-controls' = '';\n\n  @property({ type: String, reflect: true })\n  'aria-disabled' = 'false';\n\n  override render() {\n    const classes = {\n      tab: true,\n      'size--sm': this._size === 'sm',\n      'size--md': this._size === 'md',\n      vertical: this._vertical,\n      selected: this.selected,\n      disabled: this.disabled,\n      [`ai-connected--${this.aiConnected}`]: true,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this._handleClick);\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('click', this._handleClick);\n    super.disconnectedCallback();\n  }\n\n  override willUpdate(changedProps: Map<string, unknown>) {\n    if (changedProps.has('id')) {\n      this['aria-controls'] = `${this.id}-panel`;\n    }\n\n    if (changedProps.has('selected')) {\n      this['aria-selected'] = this.selected.toString();\n      this.tabIndex = this.selected ? 0 : -1;\n    }\n\n    if (changedProps.has('disabled')) {\n      this['aria-disabled'] = this.disabled.toString();\n    }\n  }\n\n  private _handleClick = (e: Event) => {\n    if (!this.selected && !this.disabled) {\n      const event = new CustomEvent('tab-activated', {\n        bubbles: true,\n        composed: true,\n        detail: { origEvent: e, tabId: this.id },\n      });\n      this.dispatchEvent(event);\n    }\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-tab': Tab;\n  }\n}\n"],"names":["Tab","LitElement","constructor","this","id","selected","disabled","_size","vertical","aiConnected","role","tabIndex","_handleClick","e","event","CustomEvent","bubbles","composed","detail","origEvent","tabId","dispatchEvent","_vertical","render","classes","tab","html","classMap","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","toString","styles","TabScss","__decorate","property","type","String","reflect","prototype","Boolean","state","attribute","converter","fromAttribute","value","toAttribute","Number","customElement"],"mappings":"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"}

package/components/reusable/tabs/tabs.d.ts

@@ -7,8 +7,6 @@ import { LitElement } from 'lit';
  */
 export declare class Tabs extends LitElement {
     static styles: any;
-    /** Tab style. `'primary'` or `'secondary'`. `'contained'` and `'line'` are now deprecated. */
-    tabStyle: string;
     /** Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px. */
     tabSize: string;
     /** Vertical orientation. */

package/components/reusable/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC;;;;;GAKG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,MAAY;IAElC,8FAA8F;IAE9F,QAAQ,SAAa;IAErB,kEAAkE;IAElE,OAAO,SAAQ;IAEf,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,oBAAoB;IAEpB,WAAW,UAAS;IAEpB,2FAA2F;IAE3F,sBAAsB,UAAS;IAE/B,kDAAkD;IAElD,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,KAAK,EAAG,GAAG,CAAC;IAEZ;;OAEG;IAEH,UAAU,EAAG,GAAG,CAAC;IAER,MAAM;IAgCN,iBAAiB;IAKjB,oBAAoB;IAKpB,UAAU,CAAC,YAAY,EAAE,GAAG;IAWrC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,eAAe;IAavB;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAMrB;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB;IAahC;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAOxB;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;CA4DxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC;;;;;GAKG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,MAAY;IAElC,kEAAkE;IAElE,OAAO,SAAQ;IAEf,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,oBAAoB;IAEpB,WAAW,UAAS;IAEpB,2FAA2F;IAE3F,sBAAsB,UAAS;IAE/B,kDAAkD;IAElD,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,KAAK,EAAG,GAAG,CAAC;IAEZ;;OAEG;IAEH,UAAU,EAAG,GAAG,CAAC;IAER,MAAM;IA8BN,iBAAiB;IAKjB,oBAAoB;IAKpB,UAAU,CAAC,YAAY,EAAE,GAAG;IAUrC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,eAAe;IAYvB;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAMrB;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB;IAahC;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAOxB;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;CA4DxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}

package/components/reusable/tabs/tabs.js

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as i,e as o}from"../../../vendor/lit-446874c7.js";import{i as s,s as r,x as n}from"../../../vendor/lit-element-c6c02f24.js";var l=s`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as i,e as o}from"../../../vendor/lit-446874c7.js";import{i as s,s as r,x as l}from"../../../vendor/lit-element-c6c02f24.js";var n=s`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -53,28 +53,35 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as
 .tabs {
   display: flex;
   flex-shrink: 0;
+  gap: 4px;
   overflow-x: auto;
+  position: relative;
 }
-.tabs.secondary::after {
+.tabs::after {
   content: "";
-  border-bottom: 2px solid var(--kd-color-border-accent-secondary);
-  flex-grow: 1;
+  border-bottom: 1px solid var(--kd-color-border-accent-secondary);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
 }
-.tabs.secondary.ai-connected--true::after {
-  content: "";
-  border-bottom: 2px solid var(--kd-color-border-level-ai-tertiary);
-  flex-grow: 1;
+.tabs.ai-connected--true::after {
+  border-color: var(--kd-color-border-level-ai-tertiary);
 }
 @media (min-width: 42rem) {
   .vertical .tabs {
     flex-direction: column;
     overflow-x: initial;
   }
-  .vertical .tabs.secondary::after {
-    content: none;
-  }
-  .vertical .tabs.primary:after {
-    background: none;
+  .vertical .tabs.tabs::after {
+    content: "";
+    border-bottom: 0;
+    border-left: 1px solid var(--kd-color-border-accent-secondary);
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
   }
 }
 
@@ -89,7 +96,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as
 }
 .panels:focus-visible {
   outline-color: var(--kd-color-border-variants-focus);
-}`;let d=class extends r{constructor(){super(...arguments),this.tabStyle="primary",this.tabSize="md",this.vertical=!1,this.aiConnected=!1,this.disableAutoFocusUpdate=!1,this.scrollablePanels=!1}render(){const e={wrapper:!0,vertical:this.vertical,scrollable:this.scrollablePanels,[`ai-connected--${this.aiConnected}`]:!0},t={tabs:!0,primary:"primary"===this.tabStyle||"contained"===this.tabStyle,secondary:"secondary"===this.tabStyle||"line"===this.tabStyle,[`ai-connected--${this.aiConnected}`]:!0};return n`
+}`;let d=class extends r{constructor(){super(...arguments),this.tabSize="md",this.vertical=!1,this.aiConnected=!1,this.disableAutoFocusUpdate=!1,this.scrollablePanels=!1}render(){const e={wrapper:!0,vertical:this.vertical,scrollable:this.scrollablePanels,[`ai-connected--${this.aiConnected}`]:!0},t={tabs:!0,[`ai-connected--${this.aiConnected}`]:!0};return l`
       <div class=${i(e)}>
         <div
           class=${i(t)}
@@ -103,5 +110,5 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as
           <slot></slot>
         </div>
       </div>
-    `}connectedCallback(){super.connectedCallback(),this.addEventListener("tab-activated",(e=>this._handleChange(e)))}disconnectedCallback(){this.removeEventListener("tab-activated",(e=>this._handleChange(e))),super.disconnectedCallback()}willUpdate(e){(e.has("tabSize")||e.has("vertical")||e.has("tabStyle")||e.has("aiConnected"))&&this._updateChildren()}_handleSlotChangeTabs(){this._updateChildren()}_updateChildren(){this._tabs.forEach((e=>{e._size=this.tabSize,e.vertical=this.vertical,e.tabStyle=this.tabStyle,e.aiConnected=this.aiConnected})),this._tabPanels.forEach((e=>{e.vertical=this.vertical}))}_handleChange(e){e.stopPropagation(),this._updateChildrenSelection(e.detail.tabId),this._emitChangeEvent(e.detail.origEvent,e.detail.tabId)}_updateChildrenSelection(e,t=!0){this._tabs.forEach((t=>{t.selected=t.id===e})),t&&this._tabPanels.forEach((t=>{t.visible=t.tabId===e}))}_emitChangeEvent(e,t){const a=new CustomEvent("on-change",{detail:{origEvent:e,selectedTabId:t}});this.dispatchEvent(a)}_handleKeyboard(e){const t=this._tabs.length,a=this._tabs.findIndex((e=>e.selected));switch(e.keyCode){case 13:case 32:return void this._updateChildrenSelection(this._tabs[a].id,this.disableAutoFocusUpdate);case 37:case 38:{let i=0===a?t-1:a-1,o=this._tabs[i];return o.disabled&&(i=0===i?t-1:i-1,o=this._tabs[i]),o.focus(),this._updateChildrenSelection(o.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(e,o.id)}case 39:case 40:{let i=a===t-1?0:a+1,o=this._tabs[i];return o.disabled&&(i=i===t-1?0:i+1,o=this._tabs[i]),o.focus(),this._updateChildrenSelection(o.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(e,o.id)}default:return}}};d.styles=l,e([t({type:String})],d.prototype,"tabStyle",void 0),e([t({type:String})],d.prototype,"tabSize",void 0),e([t({type:Boolean})],d.prototype,"vertical",void 0),e([t({type:Boolean})],d.prototype,"aiConnected",void 0),e([t({type:Boolean})],d.prototype,"disableAutoFocusUpdate",void 0),e([t({type:Boolean})],d.prototype,"scrollablePanels",void 0),e([a({slot:"tabs",selector:"kyn-tab"})],d.prototype,"_tabs",void 0),e([a({selector:"kyn-tab-panel"})],d.prototype,"_tabPanels",void 0),d=e([o("kyn-tabs")],d);export{d as Tabs};
+    `}connectedCallback(){super.connectedCallback(),this.addEventListener("tab-activated",(e=>this._handleChange(e)))}disconnectedCallback(){this.removeEventListener("tab-activated",(e=>this._handleChange(e))),super.disconnectedCallback()}willUpdate(e){(e.has("tabSize")||e.has("vertical")||e.has("aiConnected"))&&this._updateChildren()}_handleSlotChangeTabs(){this._updateChildren()}_updateChildren(){this._tabs.forEach((e=>{e._size=this.tabSize,e.vertical=this.vertical,e.aiConnected=this.aiConnected})),this._tabPanels.forEach((e=>{e.vertical=this.vertical}))}_handleChange(e){e.stopPropagation(),this._updateChildrenSelection(e.detail.tabId),this._emitChangeEvent(e.detail.origEvent,e.detail.tabId)}_updateChildrenSelection(e,t=!0){this._tabs.forEach((t=>{t.selected=t.id===e})),t&&this._tabPanels.forEach((t=>{t.visible=t.tabId===e}))}_emitChangeEvent(e,t){const a=new CustomEvent("on-change",{detail:{origEvent:e,selectedTabId:t}});this.dispatchEvent(a)}_handleKeyboard(e){const t=this._tabs.length,a=this._tabs.findIndex((e=>e.selected));switch(e.keyCode){case 13:case 32:return void this._updateChildrenSelection(this._tabs[a].id,this.disableAutoFocusUpdate);case 37:case 38:{let i=0===a?t-1:a-1,o=this._tabs[i];return o.disabled&&(i=0===i?t-1:i-1,o=this._tabs[i]),o.focus(),this._updateChildrenSelection(o.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(e,o.id)}case 39:case 40:{let i=a===t-1?0:a+1,o=this._tabs[i];return o.disabled&&(i=i===t-1?0:i+1,o=this._tabs[i]),o.focus(),this._updateChildrenSelection(o.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(e,o.id)}default:return}}};d.styles=n,e([t({type:String})],d.prototype,"tabSize",void 0),e([t({type:Boolean})],d.prototype,"vertical",void 0),e([t({type:Boolean})],d.prototype,"aiConnected",void 0),e([t({type:Boolean})],d.prototype,"disableAutoFocusUpdate",void 0),e([t({type:Boolean})],d.prototype,"scrollablePanels",void 0),e([a({slot:"tabs",selector:"kyn-tab"})],d.prototype,"_tabs",void 0),e([a({selector:"kyn-tab-panel"})],d.prototype,"_tabPanels",void 0),d=e([o("kyn-tabs")],d);export{d as Tabs};
 //# sourceMappingURL=tabs.js.map

package/components/reusable/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"sourcesContent":["import { 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 TabsScss from './tabs.scss';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for kyn-tab-panel components.\n * @slot tabs - Slot for kyn-tab components.\n * @fires on-change - Emits the new selected Tab ID when switching tabs.\n */\n@customElement('kyn-tabs')\nexport class Tabs extends LitElement {\n  static override styles = TabsScss;\n\n  /** Tab style. `'primary'` or `'secondary'`. `'contained'` and `'line'` are now deprecated. */\n  @property({ type: String })\n  tabStyle = 'primary';\n\n  /** Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px. */\n  @property({ type: String })\n  tabSize = 'md';\n\n  /** Vertical orientation. */\n  @property({ type: Boolean })\n  vertical = false;\n\n  /** AI specifier. */\n  @property({ type: Boolean })\n  aiConnected = false;\n\n  /** Enables tab content change on focus with keyboard navigation/assistive technologies. */\n  @property({ type: Boolean })\n  disableAutoFocusUpdate = false;\n\n  /** Adds scrollable overflow to the tab panels. */\n  @property({ type: Boolean })\n  scrollablePanels = false;\n\n  /** Queries for slotted tabs.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'tabs', selector: 'kyn-tab' })\n  _tabs!: any;\n\n  /** Queries for slotted tab panels.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-tab-panel' })\n  _tabPanels!: any;\n\n  override render() {\n    const wrapperClasses = {\n      wrapper: true,\n      vertical: this.vertical,\n      scrollable: this.scrollablePanels,\n      [`ai-connected--${this.aiConnected}`]: true,\n    };\n\n    const tabsClasses = {\n      tabs: true,\n      primary: this.tabStyle === 'primary' || this.tabStyle === 'contained',\n      secondary: this.tabStyle === 'secondary' || this.tabStyle === 'line',\n      [`ai-connected--${this.aiConnected}`]: true,\n    };\n\n    return html`\n      <div class=${classMap(wrapperClasses)}>\n        <div\n          class=${classMap(tabsClasses)}\n          role=\"tablist\"\n          @keydown=${(e: any) => this._handleKeyboard(e)}\n        >\n          <slot name=\"tabs\" @slotchange=${this._handleSlotChangeTabs}></slot>\n        </div>\n\n        <div class=\"panels\" tabindex=${this.scrollablePanels ? '0' : '-1'}>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('tab-activated', (e) => this._handleChange(e));\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('tab-activated', (e) => this._handleChange(e));\n    super.disconnectedCallback();\n  }\n\n  override willUpdate(changedProps: any) {\n    if (\n      changedProps.has('tabSize') ||\n      changedProps.has('vertical') ||\n      changedProps.has('tabStyle') ||\n      changedProps.has('aiConnected')\n    ) {\n      this._updateChildren();\n    }\n  }\n\n  private _handleSlotChangeTabs() {\n    this._updateChildren();\n  }\n\n  private _updateChildren() {\n    this._tabs.forEach((tab: any) => {\n      tab._size = this.tabSize;\n      tab.vertical = this.vertical;\n      tab.tabStyle = this.tabStyle;\n      tab.aiConnected = this.aiConnected;\n    });\n\n    this._tabPanels.forEach((tabPanel: any) => {\n      tabPanel.vertical = this.vertical;\n    });\n  }\n\n  /**\n   * Updates children and emits a change event based on the provided\n   * event details when a child kyn-tab is clicked.\n   * @param {any} e - The parameter \"e\" is an event object that contains information about the event\n   * that triggered the handleChange function.\n   */\n  private _handleChange(e: any) {\n    e.stopPropagation();\n    this._updateChildrenSelection(e.detail.tabId);\n    this._emitChangeEvent(e.detail.origEvent, e.detail.tabId);\n  }\n\n  /**\n   * Updates the selected property of tabs and the visible property of tab panels based on\n   * the selected tab ID.\n   * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n   * the tab that is currently selected.\n   */\n  private _updateChildrenSelection(selectedTabId: string, updatePanel = true) {\n    // update tabs selected prop\n    this._tabs.forEach((tab: any) => {\n      tab.selected = tab.id === selectedTabId;\n    });\n\n    // update tab-panels visible prop\n    if (!updatePanel) return;\n    this._tabPanels.forEach((tabPanel: any) => {\n      tabPanel.visible = tabPanel.tabId === selectedTabId;\n    });\n  }\n\n  /**\n   * Creates and dispatches a custom event called 'on-change' with the provided original event and\n   * selected tab ID as details.\n   * @param {any} origEvent - The origEvent parameter is the original event object that triggered the\n   * change event. It could be any type of event object, such as a click event or a keydown event.\n   * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n   * the selected tab.\n   */\n  private _emitChangeEvent(origEvent: any, selectedTabId: string) {\n    const event = new CustomEvent('on-change', {\n      detail: { origEvent: origEvent, selectedTabId: selectedTabId },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Handles keyboard events for navigating between tabs.\n   * @param {any} e - The parameter `e` is an event object that represents the keyboard event. It\n   * contains information about the keyboard event, such as the key code of the pressed key.\n   * @returns In this code, the function `_handleKeyboard` returns nothing in all cases\n   * except when the `keyCode` matches the left or right arrow key codes.\n   */\n  private _handleKeyboard(e: any) {\n    const LEFT_ARROW_KEY_CODE = 37;\n    const UP_ARROW_KEY_CODE = 38;\n    const RIGHT_ARROW_KEY_CODE = 39;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const ENTER_KEY_CODE = 13;\n    const SPACE_KEY_CODE = 32;\n    const TabCount = this._tabs.length;\n    const SelectedTabIndex = this._tabs.findIndex((tab: any) => tab.selected);\n\n    switch (e.keyCode) {\n      case ENTER_KEY_CODE:\n      case SPACE_KEY_CODE: {\n        this._updateChildrenSelection(\n          this._tabs[SelectedTabIndex].id,\n          this.disableAutoFocusUpdate\n        );\n        return;\n      }\n      case LEFT_ARROW_KEY_CODE:\n      case UP_ARROW_KEY_CODE: {\n        // activate previous tab\n        let prevIndex =\n          SelectedTabIndex === 0 ? TabCount - 1 : SelectedTabIndex - 1;\n        let prevTab = this._tabs[prevIndex];\n\n        if (prevTab.disabled) {\n          prevIndex = prevIndex === 0 ? TabCount - 1 : prevIndex - 1;\n          prevTab = this._tabs[prevIndex];\n        }\n\n        prevTab.focus();\n\n        this._updateChildrenSelection(prevTab.id, !this.disableAutoFocusUpdate);\n        this._emitChangeEvent(e, prevTab.id);\n        return;\n      }\n      case RIGHT_ARROW_KEY_CODE:\n      case DOWN_ARROW_KEY_CODE: {\n        // activate next tab\n        let nextIndex =\n          SelectedTabIndex === TabCount - 1 ? 0 : SelectedTabIndex + 1;\n        let nextTab = this._tabs[nextIndex];\n\n        if (nextTab.disabled) {\n          nextIndex = nextIndex === TabCount - 1 ? 0 : nextIndex + 1;\n          nextTab = this._tabs[nextIndex];\n        }\n\n        nextTab.focus();\n\n        this._updateChildrenSelection(nextTab.id, !this.disableAutoFocusUpdate);\n        this._emitChangeEvent(e, nextTab.id);\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-tabs': Tabs;\n  }\n}\n"],"names":["Tabs","LitElement","constructor","this","tabStyle","tabSize","vertical","aiConnected","disableAutoFocusUpdate","scrollablePanels","render","wrapperClasses","wrapper","scrollable","tabsClasses","tabs","primary","secondary","html","classMap","e","_handleKeyboard","_handleSlotChangeTabs","connectedCallback","super","addEventListener","_handleChange","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","_updateChildren","_tabs","forEach","tab","_size","_tabPanels","tabPanel","stopPropagation","_updateChildrenSelection","detail","tabId","_emitChangeEvent","origEvent","selectedTabId","updatePanel","selected","id","visible","event","CustomEvent","dispatchEvent","TabCount","length","SelectedTabIndex","findIndex","keyCode","prevIndex","prevTab","disabled","focus","nextIndex","nextTab","styles","TabsScss","__decorate","property","type","String","prototype","Boolean","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"sourcesContent":["import { 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 TabsScss from './tabs.scss';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for kyn-tab-panel components.\n * @slot tabs - Slot for kyn-tab components.\n * @fires on-change - Emits the new selected Tab ID when switching tabs.\n */\n@customElement('kyn-tabs')\nexport class Tabs extends LitElement {\n  static override styles = TabsScss;\n\n  /** Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px. */\n  @property({ type: String })\n  tabSize = 'md';\n\n  /** Vertical orientation. */\n  @property({ type: Boolean })\n  vertical = false;\n\n  /** AI specifier. */\n  @property({ type: Boolean })\n  aiConnected = false;\n\n  /** Enables tab content change on focus with keyboard navigation/assistive technologies. */\n  @property({ type: Boolean })\n  disableAutoFocusUpdate = false;\n\n  /** Adds scrollable overflow to the tab panels. */\n  @property({ type: Boolean })\n  scrollablePanels = false;\n\n  /** Queries for slotted tabs.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'tabs', selector: 'kyn-tab' })\n  _tabs!: any;\n\n  /** Queries for slotted tab panels.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-tab-panel' })\n  _tabPanels!: any;\n\n  override render() {\n    const wrapperClasses = {\n      wrapper: true,\n      vertical: this.vertical,\n      scrollable: this.scrollablePanels,\n      [`ai-connected--${this.aiConnected}`]: true,\n    };\n\n    const tabsClasses = {\n      tabs: true,\n      [`ai-connected--${this.aiConnected}`]: true,\n    };\n\n    return html`\n      <div class=${classMap(wrapperClasses)}>\n        <div\n          class=${classMap(tabsClasses)}\n          role=\"tablist\"\n          @keydown=${(e: any) => this._handleKeyboard(e)}\n        >\n          <slot name=\"tabs\" @slotchange=${this._handleSlotChangeTabs}></slot>\n        </div>\n\n        <div class=\"panels\" tabindex=${this.scrollablePanels ? '0' : '-1'}>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('tab-activated', (e) => this._handleChange(e));\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('tab-activated', (e) => this._handleChange(e));\n    super.disconnectedCallback();\n  }\n\n  override willUpdate(changedProps: any) {\n    if (\n      changedProps.has('tabSize') ||\n      changedProps.has('vertical') ||\n      changedProps.has('aiConnected')\n    ) {\n      this._updateChildren();\n    }\n  }\n\n  private _handleSlotChangeTabs() {\n    this._updateChildren();\n  }\n\n  private _updateChildren() {\n    this._tabs.forEach((tab: any) => {\n      tab._size = this.tabSize;\n      tab.vertical = this.vertical;\n      tab.aiConnected = this.aiConnected;\n    });\n\n    this._tabPanels.forEach((tabPanel: any) => {\n      tabPanel.vertical = this.vertical;\n    });\n  }\n\n  /**\n   * Updates children and emits a change event based on the provided\n   * event details when a child kyn-tab is clicked.\n   * @param {any} e - The parameter \"e\" is an event object that contains information about the event\n   * that triggered the handleChange function.\n   */\n  private _handleChange(e: any) {\n    e.stopPropagation();\n    this._updateChildrenSelection(e.detail.tabId);\n    this._emitChangeEvent(e.detail.origEvent, e.detail.tabId);\n  }\n\n  /**\n   * Updates the selected property of tabs and the visible property of tab panels based on\n   * the selected tab ID.\n   * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n   * the tab that is currently selected.\n   */\n  private _updateChildrenSelection(selectedTabId: string, updatePanel = true) {\n    // update tabs selected prop\n    this._tabs.forEach((tab: any) => {\n      tab.selected = tab.id === selectedTabId;\n    });\n\n    // update tab-panels visible prop\n    if (!updatePanel) return;\n    this._tabPanels.forEach((tabPanel: any) => {\n      tabPanel.visible = tabPanel.tabId === selectedTabId;\n    });\n  }\n\n  /**\n   * Creates and dispatches a custom event called 'on-change' with the provided original event and\n   * selected tab ID as details.\n   * @param {any} origEvent - The origEvent parameter is the original event object that triggered the\n   * change event. It could be any type of event object, such as a click event or a keydown event.\n   * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n   * the selected tab.\n   */\n  private _emitChangeEvent(origEvent: any, selectedTabId: string) {\n    const event = new CustomEvent('on-change', {\n      detail: { origEvent: origEvent, selectedTabId: selectedTabId },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Handles keyboard events for navigating between tabs.\n   * @param {any} e - The parameter `e` is an event object that represents the keyboard event. It\n   * contains information about the keyboard event, such as the key code of the pressed key.\n   * @returns In this code, the function `_handleKeyboard` returns nothing in all cases\n   * except when the `keyCode` matches the left or right arrow key codes.\n   */\n  private _handleKeyboard(e: any) {\n    const LEFT_ARROW_KEY_CODE = 37;\n    const UP_ARROW_KEY_CODE = 38;\n    const RIGHT_ARROW_KEY_CODE = 39;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const ENTER_KEY_CODE = 13;\n    const SPACE_KEY_CODE = 32;\n    const TabCount = this._tabs.length;\n    const SelectedTabIndex = this._tabs.findIndex((tab: any) => tab.selected);\n\n    switch (e.keyCode) {\n      case ENTER_KEY_CODE:\n      case SPACE_KEY_CODE: {\n        this._updateChildrenSelection(\n          this._tabs[SelectedTabIndex].id,\n          this.disableAutoFocusUpdate\n        );\n        return;\n      }\n      case LEFT_ARROW_KEY_CODE:\n      case UP_ARROW_KEY_CODE: {\n        // activate previous tab\n        let prevIndex =\n          SelectedTabIndex === 0 ? TabCount - 1 : SelectedTabIndex - 1;\n        let prevTab = this._tabs[prevIndex];\n\n        if (prevTab.disabled) {\n          prevIndex = prevIndex === 0 ? TabCount - 1 : prevIndex - 1;\n          prevTab = this._tabs[prevIndex];\n        }\n\n        prevTab.focus();\n\n        this._updateChildrenSelection(prevTab.id, !this.disableAutoFocusUpdate);\n        this._emitChangeEvent(e, prevTab.id);\n        return;\n      }\n      case RIGHT_ARROW_KEY_CODE:\n      case DOWN_ARROW_KEY_CODE: {\n        // activate next tab\n        let nextIndex =\n          SelectedTabIndex === TabCount - 1 ? 0 : SelectedTabIndex + 1;\n        let nextTab = this._tabs[nextIndex];\n\n        if (nextTab.disabled) {\n          nextIndex = nextIndex === TabCount - 1 ? 0 : nextIndex + 1;\n          nextTab = this._tabs[nextIndex];\n        }\n\n        nextTab.focus();\n\n        this._updateChildrenSelection(nextTab.id, !this.disableAutoFocusUpdate);\n        this._emitChangeEvent(e, nextTab.id);\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-tabs': Tabs;\n  }\n}\n"],"names":["Tabs","LitElement","constructor","this","tabSize","vertical","aiConnected","disableAutoFocusUpdate","scrollablePanels","render","wrapperClasses","wrapper","scrollable","tabsClasses","tabs","html","classMap","e","_handleKeyboard","_handleSlotChangeTabs","connectedCallback","super","addEventListener","_handleChange","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","_updateChildren","_tabs","forEach","tab","_size","_tabPanels","tabPanel","stopPropagation","_updateChildrenSelection","detail","tabId","_emitChangeEvent","origEvent","selectedTabId","updatePanel","selected","id","visible","event","CustomEvent","dispatchEvent","TabCount","length","SelectedTabIndex","findIndex","keyCode","prevIndex","prevTab","disabled","focus","nextIndex","nextTab","styles","TabsScss","__decorate","property","type","String","prototype","Boolean","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "2.20.1",
+  "version": "2.20.2",
   "description": "Shidoka Web Components for Applications",
   "main": "index.js",
   "type": "module",
@@ -27,7 +27,7 @@
     "prepare": "npx husky install"
   },
   "dependencies": {
-    "@kyndryl-design-system/shidoka-foundation": "^2.4.3",
+    "@kyndryl-design-system/shidoka-foundation": "^2.4.4",
     "@kyndryl-design-system/shidoka-icons": "^2.4.0",
     "@lit/context": "^1.1.0",
     "deepmerge-ts": "^7.1.0",