@kyndryl-design-system/shidoka-applications 2.0.1 → 2.2.0

package/components/reusable/link/defs.d.ts

@@ -1,6 +1,7 @@
 export declare enum LINK_TYPES {
     PRIMARY = "primary",
-    SECONDARY = "secondary"
+    SECONDARY = "secondary",
+    AI_CONNECTED = "ai"
 }
 export declare enum LINK_SIZES {
     MEDIUM = "md",

package/components/reusable/link/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/link/defs.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,SAAS,cAAc;CACxB;AAED,oBAAY,UAAU;IACpB,MAAM,OAAO;IACb,KAAK,OAAO;IACZ,KAAK,OAAO;CACb;AAED,oBAAY,YAAY;IACtB,KAAK,WAAW;IAChB,IAAI,UAAU;IACd,MAAM,YAAY;IAClB,GAAG,SAAS;CACb;AAED,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,UAAU,eAAe;CAC1B;AAED,oBAAY,WAAW;IACrB,IAAI,SAAS;IACb,IAAI,SAAS;CACd"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/link/defs.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,YAAY,OAAO;CACpB;AAED,oBAAY,UAAU;IACpB,MAAM,OAAO;IACb,KAAK,OAAO;IACZ,KAAK,OAAO;CACb;AAED,oBAAY,YAAY;IACtB,KAAK,WAAW;IAChB,IAAI,UAAU;IACd,MAAM,YAAY;IAClB,GAAG,SAAS;CACb;AAED,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,UAAU,eAAe;CAC1B;AAED,oBAAY,WAAW;IACrB,IAAI,SAAS;IACb,IAAI,SAAS;CACd"}

package/components/reusable/link/defs.js

@@ -1,2 +1,2 @@
-var n,o,t,A,a;!function(n){n.PRIMARY="primary",n.SECONDARY="secondary"}(n||(n={})),function(n){n.MEDIUM="md",n.LARGE="lg",n.SMALL="sm"}(o||(o={})),function(n){n.BLANK="_blank",n.SELF="_self",n.PARENT="_parent",n.TOP="_top"}(t||(t={})),function(n){n.INLINE="inline",n.STANDALONE="standalone"}(A||(A={})),function(n){n.AUTO="auto",n.DARK="dark"}(a||(a={}));export{a as LINK_SHADES,o as LINK_SIZES,t as LINK_TARGETS,n as LINK_TYPES,A as LINK_VARIANTS};
+var n,A,a,o,t;!function(n){n.PRIMARY="primary",n.SECONDARY="secondary",n.AI_CONNECTED="ai"}(n||(n={})),function(n){n.MEDIUM="md",n.LARGE="lg",n.SMALL="sm"}(A||(A={})),function(n){n.BLANK="_blank",n.SELF="_self",n.PARENT="_parent",n.TOP="_top"}(a||(a={})),function(n){n.INLINE="inline",n.STANDALONE="standalone"}(o||(o={})),function(n){n.AUTO="auto",n.DARK="dark"}(t||(t={}));export{t as LINK_SHADES,A as LINK_SIZES,a as LINK_TARGETS,n as LINK_TYPES,o as LINK_VARIANTS};
 //# sourceMappingURL=defs.js.map

package/components/reusable/link/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","sources":["../../../../src/components/reusable/link/defs.ts"],"sourcesContent":["export enum LINK_TYPES {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n}\n\nexport enum LINK_SIZES {\n  MEDIUM = 'md',\n  LARGE = 'lg',\n  SMALL = 'sm',\n}\n\nexport enum LINK_TARGETS {\n  BLANK = '_blank',\n  SELF = '_self',\n  PARENT = '_parent',\n  TOP = '_top',\n}\n\nexport enum LINK_VARIANTS {\n  INLINE = 'inline',\n  STANDALONE = 'standalone',\n}\n\nexport enum LINK_SHADES {\n  AUTO = 'auto',\n  DARK = 'dark',\n}\n"],"names":["LINK_TYPES","LINK_SIZES","LINK_TARGETS","LINK_VARIANTS","LINK_SHADES"],"mappings":"IAAYA,EAKAC,EAMAC,EAOAC,EAKAC,GAvBZ,SAAYJ,GACVA,EAAA,QAAA,UACAA,EAAA,UAAA,WACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAED,SAAYC,GACVA,EAAA,OAAA,KACAA,EAAA,MAAA,KACAA,EAAA,MAAA,IACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAED,SAAYC,GACVA,EAAA,MAAA,SACAA,EAAA,KAAA,QACAA,EAAA,OAAA,UACAA,EAAA,IAAA,MACD,CALD,CAAYA,IAAAA,EAKX,CAAA,IAED,SAAYC,GACVA,EAAA,OAAA,SACAA,EAAA,WAAA,YACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAED,SAAYC,GACVA,EAAA,KAAA,OACAA,EAAA,KAAA,MACD,CAHD,CAAYA,IAAAA,EAGX,CAAA"}
+{"version":3,"file":"defs.js","sources":["../../../../src/components/reusable/link/defs.ts"],"sourcesContent":["export enum LINK_TYPES {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  AI_CONNECTED = 'ai',\n}\n\nexport enum LINK_SIZES {\n  MEDIUM = 'md',\n  LARGE = 'lg',\n  SMALL = 'sm',\n}\n\nexport enum LINK_TARGETS {\n  BLANK = '_blank',\n  SELF = '_self',\n  PARENT = '_parent',\n  TOP = '_top',\n}\n\nexport enum LINK_VARIANTS {\n  INLINE = 'inline',\n  STANDALONE = 'standalone',\n}\n\nexport enum LINK_SHADES {\n  AUTO = 'auto',\n  DARK = 'dark',\n}\n"],"names":["LINK_TYPES","LINK_SIZES","LINK_TARGETS","LINK_VARIANTS","LINK_SHADES"],"mappings":"IAAYA,EAMAC,EAMAC,EAOAC,EAKAC,GAxBZ,SAAYJ,GACVA,EAAA,QAAA,UACAA,EAAA,UAAA,YACAA,EAAA,aAAA,IACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAED,SAAYC,GACVA,EAAA,OAAA,KACAA,EAAA,MAAA,KACAA,EAAA,MAAA,IACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAED,SAAYC,GACVA,EAAA,MAAA,SACAA,EAAA,KAAA,QACAA,EAAA,OAAA,UACAA,EAAA,IAAA,MACD,CALD,CAAYA,IAAAA,EAKX,CAAA,IAED,SAAYC,GACVA,EAAA,OAAA,SACAA,EAAA,WAAA,YACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAED,SAAYC,GACVA,EAAA,KAAA,OACAA,EAAA,KAAA,MACD,CAHD,CAAYA,IAAAA,EAGX,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/link/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI/D;;;;;GAKG;AAEH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,QAAgB;IAEtC,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,EAAE,YAAY,CAAqB;IAEzC,oDAAoD;IAEpD,IAAI,EAAE,UAAU,CAAsB;IAEtC,oIAAoI;IAEpI,GAAG,SAAM;IAET,yCAAyC;IAIzC,QAAQ,UAAS;IAEjB,iHAAiH;IAEjH,UAAU,UAAS;IAEnB,kCAAkC;IAElC,QAAQ,UAAS;IAEjB;;;;SAIK;IAEL,KAAK,cAAoB;IAEhB,MAAM;IAqBf,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,WAAW;CAWpB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/link/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI/D;;;;;GAKG;AAEH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,QAAgB;IAEtC,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,EAAE,YAAY,CAAqB;IAEzC,oDAAoD;IAEpD,IAAI,EAAE,UAAU,CAAsB;IAEtC,oIAAoI;IAEpI,GAAG,SAAM;IAET,yCAAyC;IAIzC,QAAQ,UAAS;IAEjB,iHAAiH;IAEjH,UAAU,UAAS;IAEnB,kCAAkC;IAElC,QAAQ,UAAS;IAEjB;;;;SAIK;IAEL,KAAK,cAAoB;IAEhB,MAAM;IAqBf,OAAO,CAAC,cAAc;IAwBtB,OAAO,CAAC,WAAW;CAWpB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}

package/components/reusable/link/link.js

@@ -1,4 +1,4 @@
-import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,e as n}from"../../../vendor/lit-6e2a7867.js";import{i as o,s as i,x as l}from"../../../vendor/lit-element-3185f710.js";import{e as r}from"../../../vendor/lit-html-29220869.js";import{LINK_TARGETS as s,LINK_TYPES as a,LINK_SHADES as d}from"./defs.js";var k=o`*,
+import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,e as n}from"../../../vendor/lit-6e2a7867.js";import{i as o,s as i,x as l}from"../../../vendor/lit-element-3185f710.js";import{e as r}from"../../../vendor/lit-html-29220869.js";import{LINK_TARGETS as a,LINK_TYPES as s,LINK_SHADES as d}from"./defs.js";var k=o`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -120,7 +120,30 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,e as n}from"
   -moz-transition: 300ms ease-in-out;
   -o-transition: 300ms ease-in-out;
   -webkit-transition: 300ms ease-in-out;
-}`;let c=class extends i{constructor(){super(...arguments),this.href="",this.target=s.SELF,this.kind=a.PRIMARY,this.rel="",this.disabled=!1,this.standalone=!1,this.iconLeft=!1,this.shade=d.AUTO}render(){const t=this.returnClassMap();return l`
+}
+.kyn-link-text-ai {
+  color: var(--kd-color-background-link-ai-default);
+}
+.kyn-link-text-ai:hover {
+  color: var(--kd-color-background-link-ai-hover);
+}
+.kyn-link-text-ai:focus {
+  color: var(--kd-color-background-link-ai-focused);
+  outline: 1px solid var(--kd-color-border-button-ai-state-focused);
+  -webkit-transition: outline 100ms ease-in-out;
+  -moz-transition: outline 100ms ease-in-out;
+  -o-transition: outline 100ms ease-in-out;
+  transition: outline 100ms ease-in-out;
+  text-decoration: none;
+}
+.kyn-link-text-ai:active {
+  color: var(--kd-color-background-link-ai-pressed);
+  text-decoration: underline;
+  outline: none;
+}
+.kyn-link-text-ai.kyn-link-text-disabled {
+  color: var(--kd-color-background-link-ai-disabled);
+}`;let c=class extends i{constructor(){super(...arguments),this.href="",this.target=a.SELF,this.kind=s.PRIMARY,this.rel="",this.disabled=!1,this.standalone=!1,this.iconLeft=!1,this.shade=d.AUTO}render(){const t=this.returnClassMap();return l`
       <a
         class="kyn-link-text ${t}"
         target=${this.target}
@@ -135,5 +158,5 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,e as n}from"
           <slot name="icon"></slot>
         </span>
       </a>
-    `}returnClassMap(){return this.disabled?r({"kyn-link-text-disabled":this.disabled,"icon-left":this.iconLeft}):r({"kyn-link-text-primary":(this.kind===a.PRIMARY||!this.kind)&&"auto"===this.shade,"kyn-link-text-primary-dark":this.kind===a.PRIMARY&&"dark"===this.shade,"kyn-link-text-secondary":this.kind===a.SECONDARY,"kyn-link-text-inline":!this.standalone,"kyn-link-text-standalone":this.standalone,"icon-left":this.iconLeft})}handleClick(t){if(this.disabled)return void t.preventDefault();const e=new CustomEvent("on-click",{detail:{href:this.href,origEvent:t}});this.dispatchEvent(e)}};c.styles=[k],t([e({type:String})],c.prototype,"href",void 0),t([e({type:String})],c.prototype,"target",void 0),t([e({type:String})],c.prototype,"kind",void 0),t([e({type:String})],c.prototype,"rel",void 0),t([e({type:Boolean,reflect:!0})],c.prototype,"disabled",void 0),t([e({type:Boolean})],c.prototype,"standalone",void 0),t([e({type:Boolean})],c.prototype,"iconLeft",void 0),t([e({type:String})],c.prototype,"shade",void 0),c=t([n("kyn-link")],c);export{c as Link};
+    `}returnClassMap(){const t={"kyn-link-text-disabled":this.disabled,"icon-left":this.iconLeft,"kyn-link-text-ai":this.kind===s.AI_CONNECTED};return this.disabled?r(t):r({...t,"kyn-link-text-primary":(this.kind===s.PRIMARY||!this.kind)&&"auto"===this.shade,"kyn-link-text-primary-dark":this.kind===s.PRIMARY&&"dark"===this.shade,"kyn-link-text-secondary":this.kind===s.SECONDARY,"kyn-link-text-inline":!this.standalone,"kyn-link-text-standalone":this.standalone})}handleClick(t){if(this.disabled)return void t.preventDefault();const e=new CustomEvent("on-click",{detail:{href:this.href,origEvent:t}});this.dispatchEvent(e)}};c.styles=[k],t([e({type:String})],c.prototype,"href",void 0),t([e({type:String})],c.prototype,"target",void 0),t([e({type:String})],c.prototype,"kind",void 0),t([e({type:String})],c.prototype,"rel",void 0),t([e({type:Boolean,reflect:!0})],c.prototype,"disabled",void 0),t([e({type:Boolean})],c.prototype,"standalone",void 0),t([e({type:Boolean})],c.prototype,"iconLeft",void 0),t([e({type:String})],c.prototype,"shade",void 0),c=t([n("kyn-link")],c);export{c as Link};
 //# sourceMappingURL=link.js.map

package/components/reusable/link/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":["../../../../src/components/reusable/link/link.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { LINK_TYPES, LINK_TARGETS, LINK_SHADES } from './defs';\n\nimport LinkStyles from './link.scss';\n\n/**\n * Component for navigation links.\n * @fires on-click - Captures the click event and emits the original event details.\n * @slot unnamed - Slot for link text.\n * @slot icon - Slot for an icon.\n */\n\n@customElement('kyn-link')\nexport class Link extends LitElement {\n  static override styles = [LinkStyles];\n\n  /** Link url. */\n  @property({ type: String })\n  href = '';\n\n  /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n  @property({ type: String })\n  target: LINK_TARGETS = LINK_TARGETS.SELF;\n\n  /** The Link type. Primary(App) or Secondary(Web).*/\n  @property({ type: String })\n  kind: LINK_TYPES = LINK_TYPES.PRIMARY;\n\n  /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n  @property({ type: String })\n  rel = '';\n\n  /** Determines if the link is disabled.*/\n  // Reference for disabled links:\n  // https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Whether you want the standalone Link. By default false. Use this prop. (true) with icon with link variant. */\n  @property({ type: Boolean })\n  standalone = false;\n\n  /** Positions icon on the left. */\n  @property({ type: Boolean })\n  iconLeft = false;\n\n  /**\n   * Determines the shade of the link. By default `auto`.\n   * Set this prop to `dark` manually when the link needs to have a better contrast for visibility on light backgroud, irrespective of the theme.\n   * **NOTE**: Applicable only for **primary** link.\n   * */\n  @property({ type: String })\n  shade = LINK_SHADES.AUTO;\n\n  override render() {\n    const classes = this.returnClassMap();\n\n    return html`\n      <a\n        class=\"kyn-link-text ${classes}\"\n        target=${this.target}\n        part=\"link\"\n        rel=${this.rel}\n        href=${this.href ? this.href : 'javascript:void(0)'}\n        ?disabled=${this.disabled}\n        @click=${(e: Event) => this.handleClick(e)}\n      >\n        <span class=\"kyn-link-text-span-flex\">\n          <slot></slot>\n          <slot name=\"icon\"></slot>\n        </span>\n      </a>\n    `;\n  }\n  // -- Apply classes according to states, kind etc. -- //\n  private returnClassMap() {\n    if (this.disabled) {\n      return classMap({\n        ['kyn-link-text-disabled']: this.disabled,\n        'icon-left': this.iconLeft,\n      });\n    } else {\n      return classMap({\n        ['kyn-link-text-primary']:\n          (this.kind === LINK_TYPES.PRIMARY || !this.kind) &&\n          this.shade === 'auto',\n        ['kyn-link-text-primary-dark']:\n          this.kind === LINK_TYPES.PRIMARY && this.shade === 'dark',\n        ['kyn-link-text-secondary']: this.kind === LINK_TYPES.SECONDARY,\n        ['kyn-link-text-inline']: !this.standalone,\n        ['kyn-link-text-standalone']: this.standalone,\n        'icon-left': this.iconLeft,\n      });\n    }\n  }\n\n  private handleClick(e: Event) {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    const event = new CustomEvent('on-click', {\n      detail: { href: this.href, origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-link': Link;\n  }\n}\n"],"names":["Link","LitElement","constructor","this","href","target","LINK_TARGETS","SELF","kind","LINK_TYPES","PRIMARY","rel","disabled","standalone","iconLeft","shade","LINK_SHADES","AUTO","render","classes","returnClassMap","html","e","handleClick","classMap","SECONDARY","preventDefault","event","CustomEvent","detail","origEvent","dispatchEvent","styles","LinkStyles","__decorate","property","type","String","prototype","Boolean","reflect","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAeO,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAKLC,KAAIC,KAAG,GAIPD,KAAAE,OAAuBC,EAAaC,KAIpCJ,KAAAK,KAAmBC,EAAWC,QAI9BP,KAAGQ,IAAG,GAMNR,KAAQS,UAAG,EAIXT,KAAUU,YAAG,EAIbV,KAAQW,UAAG,EAQXX,KAAAY,MAAQC,EAAYC,IAuDrB,CArDU,MAAAC,GACP,MAAMC,EAAUhB,KAAKiB,iBAErB,OAAOC,CAAI;;+BAEgBF;iBACdhB,KAAKE;;cAERF,KAAKQ;eACJR,KAAKC,KAAOD,KAAKC,KAAO;oBACnBD,KAAKS;iBACPU,GAAanB,KAAKoB,YAAYD;;;;;;;KAQ7C,CAEO,cAAAF,GACN,OAAIjB,KAAKS,SACAY,EAAS,CACd,yBAA4BrB,KAAKS,SACjC,YAAaT,KAAKW,WAGbU,EAAS,CACd,yBACGrB,KAAKK,OAASC,EAAWC,UAAYP,KAAKK,OAC5B,SAAfL,KAAKY,MACP,6BACEZ,KAAKK,OAASC,EAAWC,SAA0B,SAAfP,KAAKY,MAC3C,0BAA6BZ,KAAKK,OAASC,EAAWgB,UACtD,wBAA2BtB,KAAKU,WAChC,2BAA8BV,KAAKU,WACnC,YAAaV,KAAKW,UAGvB,CAEO,WAAAS,CAAYD,GAClB,GAAInB,KAAKS,SAEP,YADAU,EAAEI,iBAIJ,MAAMC,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CAAEzB,KAAMD,KAAKC,KAAM0B,UAAWR,KAExCnB,KAAK4B,cAAcJ,EACpB,GA5Fe3B,EAAAgC,OAAS,CAACC,GAI1BC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACRrC,EAAAsC,UAAA,YAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACuBrC,EAAAsC,UAAA,cAAA,GAIzCJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACoBrC,EAAAsC,UAAA,YAAA,GAItCJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACTrC,EAAAsC,UAAA,WAAA,GAMTJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACnBxC,EAAAsC,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACCvC,EAAAsC,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDvC,EAAAsC,UAAA,gBAAA,GAQjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACOrC,EAAAsC,UAAA,aAAA,GAvCdtC,EAAIkC,EAAA,CADhBO,EAAc,aACFzC"}
+{"version":3,"file":"link.js","sources":["../../../../src/components/reusable/link/link.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { LINK_TYPES, LINK_TARGETS, LINK_SHADES } from './defs';\n\nimport LinkStyles from './link.scss';\n\n/**\n * Component for navigation links.\n * @fires on-click - Captures the click event and emits the original event details.\n * @slot unnamed - Slot for link text.\n * @slot icon - Slot for an icon.\n */\n\n@customElement('kyn-link')\nexport class Link extends LitElement {\n  static override styles = [LinkStyles];\n\n  /** Link url. */\n  @property({ type: String })\n  href = '';\n\n  /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n  @property({ type: String })\n  target: LINK_TARGETS = LINK_TARGETS.SELF;\n\n  /** The Link type. Primary(App) or Secondary(Web).*/\n  @property({ type: String })\n  kind: LINK_TYPES = LINK_TYPES.PRIMARY;\n\n  /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n  @property({ type: String })\n  rel = '';\n\n  /** Determines if the link is disabled.*/\n  // Reference for disabled links:\n  // https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Whether you want the standalone Link. By default false. Use this prop. (true) with icon with link variant. */\n  @property({ type: Boolean })\n  standalone = false;\n\n  /** Positions icon on the left. */\n  @property({ type: Boolean })\n  iconLeft = false;\n\n  /**\n   * Determines the shade of the link. By default `auto`.\n   * Set this prop to `dark` manually when the link needs to have a better contrast for visibility on light backgroud, irrespective of the theme.\n   * **NOTE**: Applicable only for **primary** link.\n   * */\n  @property({ type: String })\n  shade = LINK_SHADES.AUTO;\n\n  override render() {\n    const classes = this.returnClassMap();\n\n    return html`\n      <a\n        class=\"kyn-link-text ${classes}\"\n        target=${this.target}\n        part=\"link\"\n        rel=${this.rel}\n        href=${this.href ? this.href : 'javascript:void(0)'}\n        ?disabled=${this.disabled}\n        @click=${(e: Event) => this.handleClick(e)}\n      >\n        <span class=\"kyn-link-text-span-flex\">\n          <slot></slot>\n          <slot name=\"icon\"></slot>\n        </span>\n      </a>\n    `;\n  }\n  // -- Apply classes according to states, kind etc. -- //\n  private returnClassMap() {\n    const baseClasses = {\n      ['kyn-link-text-disabled']: this.disabled,\n      'icon-left': this.iconLeft,\n      ['kyn-link-text-ai']: this.kind === LINK_TYPES.AI_CONNECTED,\n    };\n\n    if (this.disabled) {\n      return classMap(baseClasses);\n    } else {\n      return classMap({\n        ...baseClasses,\n        ['kyn-link-text-primary']:\n          (this.kind === LINK_TYPES.PRIMARY || !this.kind) &&\n          this.shade === 'auto',\n        ['kyn-link-text-primary-dark']:\n          this.kind === LINK_TYPES.PRIMARY && this.shade === 'dark',\n        ['kyn-link-text-secondary']: this.kind === LINK_TYPES.SECONDARY,\n        ['kyn-link-text-inline']: !this.standalone,\n        ['kyn-link-text-standalone']: this.standalone,\n      });\n    }\n  }\n\n  private handleClick(e: Event) {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    const event = new CustomEvent('on-click', {\n      detail: { href: this.href, origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-link': Link;\n  }\n}\n"],"names":["Link","LitElement","constructor","this","href","target","LINK_TARGETS","SELF","kind","LINK_TYPES","PRIMARY","rel","disabled","standalone","iconLeft","shade","LINK_SHADES","AUTO","render","classes","returnClassMap","html","e","handleClick","baseClasses","AI_CONNECTED","classMap","SECONDARY","preventDefault","event","CustomEvent","detail","origEvent","dispatchEvent","styles","LinkStyles","__decorate","property","type","String","prototype","Boolean","reflect","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAeO,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAKLC,KAAIC,KAAG,GAIPD,KAAAE,OAAuBC,EAAaC,KAIpCJ,KAAAK,KAAmBC,EAAWC,QAI9BP,KAAGQ,IAAG,GAMNR,KAAQS,UAAG,EAIXT,KAAUU,YAAG,EAIbV,KAAQW,UAAG,EAQXX,KAAAY,MAAQC,EAAYC,IA0DrB,CAxDU,MAAAC,GACP,MAAMC,EAAUhB,KAAKiB,iBAErB,OAAOC,CAAI;;+BAEgBF;iBACdhB,KAAKE;;cAERF,KAAKQ;eACJR,KAAKC,KAAOD,KAAKC,KAAO;oBACnBD,KAAKS;iBACPU,GAAanB,KAAKoB,YAAYD;;;;;;;KAQ7C,CAEO,cAAAF,GACN,MAAMI,EAAc,CAClB,yBAA4BrB,KAAKS,SACjC,YAAaT,KAAKW,SAClB,mBAAsBX,KAAKK,OAASC,EAAWgB,cAGjD,OAAItB,KAAKS,SACAc,EAASF,GAETE,EAAS,IACXF,EACH,yBACGrB,KAAKK,OAASC,EAAWC,UAAYP,KAAKK,OAC5B,SAAfL,KAAKY,MACP,6BACEZ,KAAKK,OAASC,EAAWC,SAA0B,SAAfP,KAAKY,MAC3C,0BAA6BZ,KAAKK,OAASC,EAAWkB,UACtD,wBAA2BxB,KAAKU,WAChC,2BAA8BV,KAAKU,YAGxC,CAEO,WAAAU,CAAYD,GAClB,GAAInB,KAAKS,SAEP,YADAU,EAAEM,iBAIJ,MAAMC,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CAAE3B,KAAMD,KAAKC,KAAM4B,UAAWV,KAExCnB,KAAK8B,cAAcJ,EACpB,GA/Fe7B,EAAAkC,OAAS,CAACC,GAI1BC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACRvC,EAAAwC,UAAA,YAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACuBvC,EAAAwC,UAAA,cAAA,GAIzCJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACoBvC,EAAAwC,UAAA,YAAA,GAItCJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACTvC,EAAAwC,UAAA,WAAA,GAMTJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACnB1C,EAAAwC,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACCzC,EAAAwC,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDzC,EAAAwC,UAAA,gBAAA,GAQjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACOvC,EAAAwC,UAAA,aAAA,GAvCdxC,EAAIoC,EAAA,CADhBO,EAAc,aACF3C"}

package/components/reusable/table/story-helpers/table-story.sample.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-story.sample.d.ts","sourceRoot":"","sources":["../../../../../src/components/reusable/table/story-helpers/table-story.sample.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,cAAc,CAAC;AAMtB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;AAW1B,OAAO,UAAU,CAAC;AAGlB,cACM,YAAa,SAAQ,UAAU;IACnC,OAAgB,MAAM,0BAMpB;IAEF;;;OAGG;IAEH,OAAO,CAAC,QAAQ,CAA2B;IAG3C,IAAI,EAAE,GAAG,CAAM;IAGf,YAAY,UAAM;IAGlB,iBAAiB,UAAS;IAG1B,OAAO,UAAS;IAGhB,YAAY,UAAS;IAGrB,KAAK,UAAS;IAGd,WAAW,UAAS;IAGpB,aAAa,SAAK;IAGlB,gBAAgB,UAAS;IAGzB,QAAQ,UAAS;IAGjB,UAAU,SAAiB;IAG3B,aAAa,SAAoB;IAGjC,cAAc,UAAS;IAGvB,UAAU,UAAS;IAGnB,QAAQ,SAAK;IAGb,UAAU,SAAK;IAGf,eAAe,WAAW;IAE1B,8CAA8C;IAE9C,cAAc,UAAS;IAEvB,6CAA6C;IAE7C,oBAAoB,UAAS;IAE7B,6CAA6C;IAE7C,qBAAqB,UAAS;IAE9B;;;;OAIG;IAEH,sBAAsB,SAAU;IAEhC;;OAEG;IACG,gBAAgB,CAAC,KAAK,EAAE,WAAW;IAQzC;;OAEG;IACG,kBAAkB,CAAC,KAAK,EAAE,WAAW;IAO3C,oBAAoB,CAAC,CAAC,EAAE,WAAW;IAMnC,eAAe,CAAC,CAAC,EAAE,WAAW;IAM9B,iBAAiB,CAAC,CAAC,EAAE,WAAW;IAMhC,iBAAiB,CAAC,CAAC,EAAE,WAAW;IAMhC,gBAAgB,CAAC,CAAC,EAAE,WAAW;IAMzB,YAAY,CAAC,EAAE,EAAE,MAAM;IAavB,kBAAkB;IAaxB,wBAAwB,CAAC,CAAC,EAAE,WAAW;IAO9B,YAAY;IAIZ,MAAM;CAmLhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"table-story.sample.d.ts","sourceRoot":"","sources":["../../../../../src/components/reusable/table/story-helpers/table-story.sample.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,cAAc,CAAC;AAMtB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;AAW1B,OAAO,UAAU,CAAC;AAGlB,cACM,YAAa,SAAQ,UAAU;IACnC,OAAgB,MAAM,0BAMpB;IAEF;;;OAGG;IAEH,OAAO,CAAC,QAAQ,CAA2B;IAG3C,IAAI,EAAE,GAAG,CAAM;IAGf,YAAY,UAAM;IAGlB,iBAAiB,UAAS;IAG1B,OAAO,UAAS;IAGhB,YAAY,UAAS;IAGrB,KAAK,UAAS;IAGd,WAAW,UAAS;IAGpB,aAAa,SAAK;IAGlB,gBAAgB,UAAS;IAGzB,QAAQ,UAAS;IAGjB,UAAU,SAAiB;IAG3B,aAAa,SAAoB;IAGjC,cAAc,UAAS;IAGvB,UAAU,UAAS;IAGnB,QAAQ,SAAK;IAGb,UAAU,SAAK;IAGf,eAAe,WAAW;IAE1B,8CAA8C;IAE9C,cAAc,UAAS;IAEvB,6CAA6C;IAE7C,oBAAoB,UAAS;IAE7B,6CAA6C;IAE7C,qBAAqB,UAAS;IAE9B;;;;OAIG;IAEH,sBAAsB,SAAU;IAEhC;;OAEG;IACG,gBAAgB,CAAC,KAAK,EAAE,WAAW;IAQzC;;OAEG;IACG,kBAAkB,CAAC,KAAK,EAAE,WAAW;IAO3C,oBAAoB,CAAC,CAAC,EAAE,WAAW;IAMnC,eAAe,CAAC,CAAC,EAAE,WAAW;IAM9B,iBAAiB,CAAC,CAAC,EAAE,WAAW;IAMhC,iBAAiB,CAAC,CAAC,EAAE,WAAW;IAMhC,gBAAgB,CAAC,CAAC,EAAE,WAAW;IAMzB,YAAY,CAAC,EAAE,EAAE,MAAM;IAavB,kBAAkB;IAaxB,wBAAwB,CAAC,CAAC,EAAE,WAAW;IAO9B,YAAY;IAIZ,MAAM;CAiLhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/components/reusable/table/table.d.ts

@@ -28,8 +28,8 @@ export declare class Table extends LitElement {
      */
     striped?: boolean;
     /**
-     * stickyHeader: Boolean indicating whether the table header
-     * should be sticky.
+     * stickyHeader: Boolean indicating whether the table header should be sticky.
+     * Must also set a height or max-height on kyn-table-container.
      * @type {boolean}
      * @default false
      */

package/components/reusable/tabs/tabPanel.js

@@ -1,9 +1,33 @@
-import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,t as i,o as a,e as o}from"../../../vendor/lit-6e2a7867.js";import{i as p,s as d,x as l}from"../../../vendor/lit-element-3185f710.js";var r=p`*,
+import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,t as i,o as r,e as o}from"../../../vendor/lit-6e2a7867.js";import{i as a,s as d,x as n}from"../../../vendor/lit-element-3185f710.js";var p=a`*,
 *::before,
 *::after {
   box-sizing: border-box;
 }
 
+:root {
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
+}
+
 :host {
   display: none;
 }
@@ -18,10 +42,12 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,t as i,o as
 .tab-panel.no-padding {
   padding: 24px 0;
 }
-.tab-panel.vertical {
-  padding: 12px 24px;
-}
-.tab-panel.vertical.no-padding {
-  padding: 12px 24px;
-}`;let n=class extends d{constructor(){super(...arguments),this.tabId="",this.visible=!1,this.noPadding=!1,this._vertical=!1,this.id="",this.role="tabpanel",this["aria-labelledby"]=""}render(){const t={"tab-panel":!0,vertical:this._vertical,"no-padding":this.noPadding};return l` <div class=${a(t)}><slot></slot></div> `}willUpdate(t){t.has("tabId")&&(this.id=this.tabId+"-panel",this["aria-labelledby"]=this.tabId)}};n.styles=r,t([e({type:String})],n.prototype,"tabId",void 0),t([e({type:Boolean,reflect:!0})],n.prototype,"visible",void 0),t([e({type:Boolean})],n.prototype,"noPadding",void 0),t([i()],n.prototype,"_vertical",void 0),t([e({type:String,reflect:!0})],n.prototype,"id",void 0),t([e({type:String,reflect:!0})],n.prototype,"role",void 0),t([e({type:String,reflect:!0})],n.prototype,"aria-labelledby",void 0),n=t([o("kyn-tab-panel")],n);export{n as TabPanel};
+@media (min-width: 42rem) {
+  .tab-panel.vertical {
+    padding: 12px 24px;
+  }
+  .tab-panel.vertical.no-padding {
+    padding: 12px 24px;
+  }
+}`;let l=class extends d{constructor(){super(...arguments),this.tabId="",this.visible=!1,this.noPadding=!1,this._vertical=!1,this.id="",this.role="tabpanel",this["aria-labelledby"]=""}render(){const t={"tab-panel":!0,vertical:this._vertical,"no-padding":this.noPadding};return n` <div class=${r(t)}><slot></slot></div> `}willUpdate(t){t.has("tabId")&&(this.id=this.tabId+"-panel",this["aria-labelledby"]=this.tabId)}};l.styles=p,t([e({type:String})],l.prototype,"tabId",void 0),t([e({type:Boolean,reflect:!0})],l.prototype,"visible",void 0),t([e({type:Boolean})],l.prototype,"noPadding",void 0),t([i()],l.prototype,"_vertical",void 0),t([e({type:String,reflect:!0})],l.prototype,"id",void 0),t([e({type:String,reflect:!0})],l.prototype,"role",void 0),t([e({type:String,reflect:!0})],l.prototype,"aria-labelledby",void 0),l=t([o("kyn-tab-panel")],l);export{l as TabPanel};
 //# sourceMappingURL=tabPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabPanel.js","sources":["../../../../src/components/reusable/tabs/tabPanel.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabPanelScss from './tabPanel.scss';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for tab content.\n */\n@customElement('kyn-tab-panel')\nexport class TabPanel extends LitElement {\n  static override styles = TabPanelScss;\n\n  /** Matching Tab ID, required. */\n  @property({ type: String })\n  tabId = '';\n\n  /** Tab Panel visible state.  Must match Tab selected state. */\n  @property({ type: Boolean, reflect: true })\n  visible = false;\n\n  /** Remove side padding (left/right) on tab panel. */\n  @property({ type: Boolean })\n  noPadding = false;\n\n  /** Vertical orientation. Inherited.\n   * @internal\n   */\n  @state()\n  private _vertical = false;\n\n  /** Tab Panel ID.\n   * @internal\n   */\n  @property({ type: String, reflect: true })\n  override id = '';\n\n  /** aria role.\n   * @internal\n   */\n  @property({ type: String, reflect: true })\n  override role = 'tabpanel';\n\n  /** aria-labelledby, derived from tabId.\n   * @internal\n   */\n  @property({ type: String, reflect: true })\n  'aria-labelledby' = '';\n\n  override render() {\n    const classes = {\n      'tab-panel': true,\n      vertical: this._vertical,\n      'no-padding': this.noPadding,\n    };\n\n    return html` <div class=${classMap(classes)}><slot></slot></div> `;\n  }\n\n  /**\n   * Updates the id and aria-labelledby properties based on the changed tabId property.\n   * @param {any} changedProps - The `changedProps` parameter is an object that contains the properties\n   * that have changed in the component. It is used to determine which properties have been updated and\n   * perform specific actions based on those changes.\n   */\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('tabId')) {\n      this.id = this.tabId + '-panel';\n      this['aria-labelledby'] = this.tabId;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-tab-panel': TabPanel;\n  }\n}\n"],"names":["TabPanel","LitElement","constructor","this","tabId","visible","noPadding","_vertical","id","role","render","classes","vertical","html","classMap","willUpdate","changedProps","has","styles","TabPanelScss","__decorate","property","type","String","prototype","Boolean","reflect","state","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;GAUO,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAKLC,KAAKC,MAAG,GAIRD,KAAOE,SAAG,EAIVF,KAASG,WAAG,EAMJH,KAASI,WAAG,EAMXJ,KAAEK,GAAG,GAMLL,KAAIM,KAAG,WAMhBN,KAAiB,mBAAG,EAwBrB,CAtBU,MAAAO,GACP,MAAMC,EAAU,CACd,aAAa,EACbC,SAAUT,KAAKI,UACf,aAAcJ,KAAKG,WAGrB,OAAOO,CAAI,eAAeC,EAASH,yBACpC,CAQQ,UAAAI,CAAWC,GACdA,EAAaC,IAAI,WACnBd,KAAKK,GAAKL,KAAKC,MAAQ,SACvBD,KAAK,mBAAqBA,KAAKC,MAElC,GA3DeJ,EAAMkB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPvB,EAAAwB,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACpB1B,EAAAwB,UAAA,eAAA,GAIhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACAzB,EAAAwB,UAAA,iBAAA,GAMlBJ,EAAA,CADCO,KACyB3B,EAAAwB,UAAA,iBAAA,GAM1BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQG,SAAS,KAClB1B,EAAAwB,UAAA,UAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQG,SAAS,KACR1B,EAAAwB,UAAA,YAAA,GAM3BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQG,SAAS,KACZ1B,EAAAwB,UAAA,uBAAA,GArCZxB,EAAQoB,EAAA,CADpBQ,EAAc,kBACF5B"}
+{"version":3,"file":"tabPanel.js","sources":["../../../../src/components/reusable/tabs/tabPanel.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabPanelScss from './tabPanel.scss';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for tab content.\n */\n@customElement('kyn-tab-panel')\nexport class TabPanel extends LitElement {\n  static override styles = TabPanelScss;\n\n  /** Matching Tab ID, required. */\n  @property({ type: String })\n  tabId = '';\n\n  /** Tab Panel visible state.  Must match Tab selected state. */\n  @property({ type: Boolean, reflect: true })\n  visible = false;\n\n  /** Remove side padding (left/right) on tab panel. */\n  @property({ type: Boolean })\n  noPadding = false;\n\n  /** Vertical orientation. Inherited.\n   * @internal\n   */\n  @state()\n  private _vertical = false;\n\n  /** Tab Panel ID.\n   * @internal\n   */\n  @property({ type: String, reflect: true })\n  override id = '';\n\n  /** aria role.\n   * @internal\n   */\n  @property({ type: String, reflect: true })\n  override role = 'tabpanel';\n\n  /** aria-labelledby, derived from tabId.\n   * @internal\n   */\n  @property({ type: String, reflect: true })\n  'aria-labelledby' = '';\n\n  override render() {\n    const classes = {\n      'tab-panel': true,\n      vertical: this._vertical,\n      'no-padding': this.noPadding,\n    };\n\n    return html` <div class=${classMap(classes)}><slot></slot></div> `;\n  }\n\n  /**\n   * Updates the id and aria-labelledby properties based on the changed tabId property.\n   * @param {any} changedProps - The `changedProps` parameter is an object that contains the properties\n   * that have changed in the component. It is used to determine which properties have been updated and\n   * perform specific actions based on those changes.\n   */\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('tabId')) {\n      this.id = this.tabId + '-panel';\n      this['aria-labelledby'] = this.tabId;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-tab-panel': TabPanel;\n  }\n}\n"],"names":["TabPanel","LitElement","constructor","this","tabId","visible","noPadding","_vertical","id","role","render","classes","vertical","html","classMap","willUpdate","changedProps","has","styles","TabPanelScss","__decorate","property","type","String","prototype","Boolean","reflect","state","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUO,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAKLC,KAAKC,MAAG,GAIRD,KAAOE,SAAG,EAIVF,KAASG,WAAG,EAMJH,KAASI,WAAG,EAMXJ,KAAEK,GAAG,GAMLL,KAAIM,KAAG,WAMhBN,KAAiB,mBAAG,EAwBrB,CAtBU,MAAAO,GACP,MAAMC,EAAU,CACd,aAAa,EACbC,SAAUT,KAAKI,UACf,aAAcJ,KAAKG,WAGrB,OAAOO,CAAI,eAAeC,EAASH,yBACpC,CAQQ,UAAAI,CAAWC,GACdA,EAAaC,IAAI,WACnBd,KAAKK,GAAKL,KAAKC,MAAQ,SACvBD,KAAK,mBAAqBA,KAAKC,MAElC,GA3DeJ,EAAMkB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPvB,EAAAwB,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACpB1B,EAAAwB,UAAA,eAAA,GAIhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACAzB,EAAAwB,UAAA,iBAAA,GAMlBJ,EAAA,CADCO,KACyB3B,EAAAwB,UAAA,iBAAA,GAM1BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQG,SAAS,KAClB1B,EAAAwB,UAAA,UAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQG,SAAS,KACR1B,EAAAwB,UAAA,YAAA,GAM3BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQG,SAAS,KACZ1B,EAAAwB,UAAA,uBAAA,GArCZxB,EAAQoB,EAAA,CADpBQ,EAAc,kBACF5B"}

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

@@ -15,6 +15,8 @@ export declare class Tabs extends LitElement {
     vertical: boolean;
     /** Enables tab content change on focus with keyboard navigation/assistive technologies. */
     disableAutoFocusUpdate: boolean;
+    /** Adds scrollable overflow to the tab panels. */
+    scrollablePanels: boolean;
     /** Queries for slotted tabs.
      * @internal
      */

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,4CAA4C;IAE5C,QAAQ,SAAe;IAEvB,kEAAkE;IAElE,OAAO,SAAQ;IAEf,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,2FAA2F;IAE3F,sBAAsB,UAAS;IAE/B;;OAEG;IAEH,KAAK,EAAG,GAAG,CAAC;IAEZ;;OAEG;IAEH,UAAU,EAAG,GAAG,CAAC;IAER,MAAM;IA6BN,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"}
+{"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,4CAA4C;IAE5C,QAAQ,SAAe;IAEvB,kEAAkE;IAElE,OAAO,SAAQ;IAEf,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,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 t}from"../../../vendor/tslib-53a81efe.js";import{n as e,l as a,o as i,e as s}from"../../../vendor/lit-6e2a7867.js";import{i as o,s as n,x as r}from"../../../vendor/lit-element-3185f710.js";var d=o`*,
+import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,l as a,o as i,e as o}from"../../../vendor/lit-6e2a7867.js";import{i as s,s as l,x as n}from"../../../vendor/lit-element-3185f710.js";var r=s`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -36,15 +36,19 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,l as a,o as
   display: flex;
   flex-direction: column;
 }
+.wrapper.scrollable {
+  align-items: stretch;
+  height: 100%;
+}
 @media (min-width: 42rem) {
   .wrapper.vertical {
     flex-direction: row;
-    align-items: flex-start;
   }
 }
 
 .tabs {
   display: flex;
+  flex-shrink: 0;
   gap: 2px;
   overflow-x: auto;
 }
@@ -66,11 +70,23 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,l as a,o as
   .vertical .tabs.line::after {
     content: none;
   }
+  .vertical .tabs.contained:after {
+    background: none;
+  }
 }
 
 .panels {
   flex-grow: 1;
-}`;let l=class extends n{constructor(){super(...arguments),this.tabStyle="contained",this.tabSize="md",this.vertical=!1,this.disableAutoFocusUpdate=!1}render(){const t={wrapper:!0,vertical:this.vertical},e={tabs:!0,contained:"contained"===this.tabStyle,line:"line"===this.tabStyle};return r`
+  overflow-y: auto;
+  height: 100%;
+}
+.scrollable .panels {
+  transition: outline 150ms ease-out;
+  outline: 2px solid transparent;
+}
+.panels:focus {
+  outline-color: var(--kd-color-border-variants-focus);
+}`;let d=class extends l{constructor(){super(...arguments),this.tabStyle="contained",this.tabSize="md",this.vertical=!1,this.disableAutoFocusUpdate=!1,this.scrollablePanels=!1}render(){const t={wrapper:!0,vertical:this.vertical,scrollable:this.scrollablePanels},e={tabs:!0,contained:"contained"===this.tabStyle,line:"line"===this.tabStyle};return n`
       <div class=${i(t)}>
         <div
           class=${i(e)}
@@ -80,9 +96,9 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,l as a,o as
           <slot name="tabs" @slotchange=${this._handleSlotChangeTabs}></slot>
         </div>
 
-        <div class="panels">
+        <div class="panels" tabindex=${this.scrollablePanels?"0":"-1"}>
           <slot></slot>
         </div>
       </div>
-    `}connectedCallback(){super.connectedCallback(),this.addEventListener("tab-activated",(t=>this._handleChange(t)))}disconnectedCallback(){this.removeEventListener("tab-activated",(t=>this._handleChange(t))),super.disconnectedCallback()}willUpdate(t){(t.has("tabSize")||t.has("vertical")||t.has("tabStyle"))&&this._updateChildren()}_handleSlotChangeTabs(){this._updateChildren()}_updateChildren(){this._tabs.forEach((t=>{t._size=this.tabSize,t._vertical=this.vertical,t._tabStyle=this.tabStyle})),this._tabPanels.forEach((t=>{t._vertical=this.vertical}))}_handleChange(t){t.stopPropagation(),this._updateChildrenSelection(t.detail.tabId),this._emitChangeEvent(t.detail.origEvent,t.detail.tabId)}_updateChildrenSelection(t,e=!0){this._tabs.forEach((e=>{e.selected=e.id===t})),e&&this._tabPanels.forEach((e=>{e.visible=e.tabId===t}))}_emitChangeEvent(t,e){const a=new CustomEvent("on-change",{detail:{origEvent:t,selectedTabId:e}});this.dispatchEvent(a)}_handleKeyboard(t){const e=this._tabs.length,a=this._tabs.findIndex((t=>t.selected));switch(t.keyCode){case 13:case 32:return void this._updateChildrenSelection(this._tabs[a].id,this.disableAutoFocusUpdate);case 37:case 38:{let i=0===a?e-1:a-1,s=this._tabs[i];return s.disabled&&(i=0===i?e-1:i-1,s=this._tabs[i]),s.focus(),this._updateChildrenSelection(s.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(t,s.id)}case 39:case 40:{let i=a===e-1?0:a+1,s=this._tabs[i];return s.disabled&&(i=i===e-1?0:i+1,s=this._tabs[i]),s.focus(),this._updateChildrenSelection(s.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(t,s.id)}default:return}}};l.styles=d,t([e({type:String})],l.prototype,"tabStyle",void 0),t([e({type:String})],l.prototype,"tabSize",void 0),t([e({type:Boolean})],l.prototype,"vertical",void 0),t([e({type:Boolean})],l.prototype,"disableAutoFocusUpdate",void 0),t([a({slot:"tabs",selector:"kyn-tab"})],l.prototype,"_tabs",void 0),t([a({selector:"kyn-tab-panel"})],l.prototype,"_tabPanels",void 0),l=t([s("kyn-tabs")],l);export{l as Tabs};
+    `}connectedCallback(){super.connectedCallback(),this.addEventListener("tab-activated",(t=>this._handleChange(t)))}disconnectedCallback(){this.removeEventListener("tab-activated",(t=>this._handleChange(t))),super.disconnectedCallback()}willUpdate(t){(t.has("tabSize")||t.has("vertical")||t.has("tabStyle"))&&this._updateChildren()}_handleSlotChangeTabs(){this._updateChildren()}_updateChildren(){this._tabs.forEach((t=>{t._size=this.tabSize,t._vertical=this.vertical,t._tabStyle=this.tabStyle})),this._tabPanels.forEach((t=>{t._vertical=this.vertical}))}_handleChange(t){t.stopPropagation(),this._updateChildrenSelection(t.detail.tabId),this._emitChangeEvent(t.detail.origEvent,t.detail.tabId)}_updateChildrenSelection(t,e=!0){this._tabs.forEach((e=>{e.selected=e.id===t})),e&&this._tabPanels.forEach((e=>{e.visible=e.tabId===t}))}_emitChangeEvent(t,e){const a=new CustomEvent("on-change",{detail:{origEvent:t,selectedTabId:e}});this.dispatchEvent(a)}_handleKeyboard(t){const e=this._tabs.length,a=this._tabs.findIndex((t=>t.selected));switch(t.keyCode){case 13:case 32:return void this._updateChildrenSelection(this._tabs[a].id,this.disableAutoFocusUpdate);case 37:case 38:{let i=0===a?e-1:a-1,o=this._tabs[i];return o.disabled&&(i=0===i?e-1:i-1,o=this._tabs[i]),o.focus(),this._updateChildrenSelection(o.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(t,o.id)}case 39:case 40:{let i=a===e-1?0:a+1,o=this._tabs[i];return o.disabled&&(i=i===e-1?0:i+1,o=this._tabs[i]),o.focus(),this._updateChildrenSelection(o.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(t,o.id)}default:return}}};d.styles=r,t([e({type:String})],d.prototype,"tabStyle",void 0),t([e({type:String})],d.prototype,"tabSize",void 0),t([e({type:Boolean})],d.prototype,"vertical",void 0),t([e({type:Boolean})],d.prototype,"disableAutoFocusUpdate",void 0),t([e({type:Boolean})],d.prototype,"scrollablePanels",void 0),t([a({slot:"tabs",selector:"kyn-tab"})],d.prototype,"_tabs",void 0),t([a({selector:"kyn-tab-panel"})],d.prototype,"_tabPanels",void 0),d=t([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. `'contained'` or `'line'`. */\n  @property({ type: String })\n  tabStyle = 'contained';\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  /** Enables tab content change on focus with keyboard navigation/assistive technologies. */\n  @property({ type: Boolean })\n  disableAutoFocusUpdate = 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    };\n\n    const tabsClasses = {\n      tabs: true,\n      contained: this.tabStyle === 'contained',\n      line: this.tabStyle === 'line',\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\">\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    ) {\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    });\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","disableAutoFocusUpdate","render","wrapperClasses","wrapper","tabsClasses","tabs","contained","line","html","classMap","e","_handleKeyboard","_handleSlotChangeTabs","connectedCallback","super","addEventListener","_handleChange","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","_updateChildren","_tabs","forEach","tab","_size","_vertical","_tabStyle","_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  /** Tab style. `'contained'` or `'line'`. */\n  @property({ type: String })\n  tabStyle = 'contained';\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  /** 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    };\n\n    const tabsClasses = {\n      tabs: true,\n      contained: this.tabStyle === 'contained',\n      line: this.tabStyle === 'line',\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    ) {\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    });\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","disableAutoFocusUpdate","scrollablePanels","render","wrapperClasses","wrapper","scrollable","tabsClasses","tabs","contained","line","html","classMap","e","_handleKeyboard","_handleSlotChangeTabs","connectedCallback","super","addEventListener","_handleChange","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","_updateChildren","_tabs","forEach","tab","_size","_vertical","_tabStyle","_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.0.1",
+  "version": "2.2.0",
   "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.0.0",
+    "@kyndryl-design-system/shidoka-foundation": "^2.1.2",
     "@kyndryl-design-system/shidoka-icons": "^2.0.0",
     "@lit/context": "^1.1.0",
     "deepmerge-ts": "^7.1.0",

package/table-f6b54ef0.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-f6b54ef0.js","sources":["../src/components/reusable/table/table.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ContextProvider } from '@lit/context';\nimport { tableContext } from './table-context';\n\nimport { TableRow } from './table-row';\nimport { TableHeaderRow } from './table-header-row';\n\nimport styles from './table.scss';\n\n/**\n * `kyn-table` Web Component.\n * This component provides a table with sorting, pagination, and selection capabilities.\n * It is designed to be used with the `kyn-table-toolbar` and `kyn-table-container` components.\n * @fires on-row-selection-change - Dispatched when the selection state of a row is toggled.\n * @fires on-all-rows-selection-change - Dispatched when the selection state of all rows is toggled.\n */\n\n@customElement('kyn-table')\nexport class Table extends LitElement {\n  static override styles = [styles];\n\n  /** aria role.\n   * @internal\n   */\n  @property({ type: String, reflect: true })\n  override role = 'table';\n\n  /**\n   * checkboxSelection: Boolean indicating whether rows should be\n   * selectable using checkboxes.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean })\n  checkboxSelection?: boolean;\n\n  /**\n   * striped: Boolean indicating whether rows should have alternate\n   * coloring.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean })\n  striped?: boolean;\n\n  /**\n   * stickyHeader: Boolean indicating whether the table header\n   * should be sticky.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean })\n  stickyHeader?: boolean;\n\n  /**\n   * dense: Boolean indicating whether the table should be displayed\n   * in dense mode.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean })\n  dense?: boolean;\n\n  /**\n   * fixedLayout: Boolean indicating whether the table should have a fixed layout.\n   * This will set the table's layout to fixed, which means the table and column widths\n   * will be determined by the width of the columns and not by the content of the cells.\n   * This can be useful when you want to have a consistent column width across multiple tables.\n   * @type {boolean}\n   * @default false\n   * */\n  @property({ type: Boolean })\n  fixedLayout?: boolean;\n\n  /**\n   * _provider: Context provider for the table.\n   * @ignore\n   * @private\n   */\n  @state()\n  private _provider = new ContextProvider(this, tableContext);\n\n  /**\n   * updated: Lifecycle method called when the element is updated.\n   */\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n\n    // Create an object to hold the new values\n    const newValues: Partial<any> = {};\n\n    // Check each property in _propsToCheck and add it to newValues if it has really changed\n    if (changedProperties.has('dense')) newValues.dense = this.dense;\n    if (changedProperties.has('striped')) newValues.striped = this.striped;\n    if (changedProperties.has('checkboxSelection'))\n      newValues.checkboxSelection = this.checkboxSelection;\n    if (changedProperties.has('stickyHeader'))\n      newValues.stickyHeader = this.stickyHeader;\n\n    // Update the context provider with the new values\n    this._provider.setValue(newValues);\n  }\n\n  /**\n   * tableHeaderRow: Reference to the header row of the table.\n   * @ignore\n   * @private\n   */\n  @state()\n  private _tableHeaderRow: TableHeaderRow | null = null;\n\n  /**\n   * allRows: Array of objects representing each row in the data table.\n   * @ignore\n   * @private\n   */\n  @state()\n  private _allRows: TableRow[] = [];\n\n  /**\n   * selectedRows: Set of row ids that are currently selected.\n   * @ignore\n   * @private\n   */\n  @state()\n  private _selectedRows: TableRow[] = [];\n\n  /**\n   * selectedRowIds: Set of row ids that are currently selected.\n   * @ignore\n   * @private\n   */\n  @state()\n  private _selectedRowIds: Set<string> = new Set();\n\n  /**\n   * headerCheckboxIndeterminate: Boolean indicating whether the header\n   * checkbox is in an indeterminate state.\n   * @ignore\n   * @private\n   */\n  @state()\n  private _headerCheckboxIndeterminate = false;\n\n  /**\n   * headerCheckboxChecked: Boolean indicating whether the header checkbox is\n   * checked.\n   * @ignore\n   * @private\n   */\n  @state()\n  private _headerCheckboxChecked = false;\n\n  /**\n   * Updates the state of the header checkbox based on the number of\n   * selected rows.\n   * @private\n   */\n  private _updateHeaderCheckbox() {\n    if (this._selectedRows.length === 0 || this._allRows.length === 0) {\n      this._headerCheckboxIndeterminate = false;\n      this._headerCheckboxChecked = false;\n    } else if (this._selectedRows.length === this._allRows.length) {\n      this._headerCheckboxIndeterminate = false;\n      this._headerCheckboxChecked = true;\n    } else {\n      this._headerCheckboxIndeterminate = true;\n      this._headerCheckboxChecked = false;\n    }\n\n    this._tableHeaderRow?.updateHeaderCheckboxState(\n      this._headerCheckboxIndeterminate,\n      this._headerCheckboxChecked\n    );\n  }\n\n  /**\n   * Handles the change of selection state for a specific row.\n   */\n  private _handleRowSelectionChange(event: CustomEvent) {\n    event.stopPropagation();\n\n    const { target } = event;\n    const { _selectedRows: selectedRows } = this;\n\n    if (!this.contains(target as TableRow)) {\n      return;\n    }\n\n    if (selectedRows.includes(target as TableRow)) {\n      this._selectedRows = selectedRows.filter((e) => e !== target);\n      this._selectedRowIds.delete((target as TableRow).rowId);\n    } else {\n      this._selectedRows.push(target as TableRow);\n      this._selectedRowIds.add((target as TableRow).rowId);\n    }\n\n    this._updateHeaderCheckbox();\n\n    const init = {\n      bubbles: false,\n      cancelable: true,\n      composed: true,\n      detail: {\n        selectedRow: target,\n        selectedRows: this._selectedRows,\n      },\n    };\n    this.dispatchEvent(new CustomEvent('on-row-selection-change', init));\n  }\n\n  /**\n   * Toggles the selection state of all rows in the table.\n   */\n  private _toggleSelectionAll(event: CustomEvent) {\n    event.stopPropagation();\n\n    const {\n      detail: { checked },\n      target,\n    } = event;\n    const { _allRows: allRows } = this;\n\n    if (!this.contains(target as TableRow)) {\n      return;\n    }\n\n    allRows.forEach((row) => {\n      if ((row as TableRow).disabled) return;\n\n      (row as TableRow).selected = checked;\n    });\n\n    this._selectedRows = [...allRows.filter((row) => row.selected)];\n    this._selectedRowIds = new Set(this._selectedRows.map((row) => row.rowId));\n\n    this._updateHeaderCheckbox();\n\n    const init = {\n      bubbles: false,\n      cancelable: true,\n      composed: true,\n      detail: {\n        selectedRows: this._selectedRows,\n      },\n    };\n    this.dispatchEvent(new CustomEvent('on-all-rows-selection-change', init));\n  }\n\n  /**\n   * Resets the selection state of all rows in the table.\n   * This method is called when the table is reset or cleared.\n   * @public\n   * @returns void\n   */\n  public updateAfterExternalChanges() {\n    // Re-query the DOM to update the _allRows based on current children elements\n    this._allRows = Array.from(this.querySelectorAll('kyn-tr'));\n\n    // Update _selectedRows based on whether the row elements are marked as selected\n    this._selectedRows = this._allRows.filter((row) => row.selected);\n\n    this._updateHeaderCheckbox();\n    this.requestUpdate();\n  }\n\n  /**\n   * Returns the selected rows in the table.\n   * @returns Array of selected rows.\n   * @public\n   */\n  public getSelectedRows() {\n    return this._selectedRows;\n  }\n\n  /**\n   * Handles the change of rows in the table body.\n   * @param {CustomEvent} event - The custom event containing the updated rows.\n   * @private\n   */\n  private _handleRowsChange(event: CustomEvent) {\n    const {\n      detail: { rows },\n    } = event;\n    event.stopPropagation();\n\n    this._allRows = rows;\n    this._updateSelectionStates();\n    this._updateHeaderCheckbox();\n  }\n\n  private _updateSelectionStates() {\n    // Temporary array to hold updated selected rows\n    const updatedSelectedRows: TableRow[] = [];\n\n    // Loop through all rows to update their selected state and rebuild the selectedRows array\n    this._allRows.forEach((row) => {\n      if (this._selectedRowIds.has(row.rowId)) {\n        row.selected = true; // Update the selected property if the rowId matches\n        updatedSelectedRows.push(row); // Add the actual row element to the updated selected rows array\n      } else if (row.selected) {\n        this._selectedRowIds.add(row.rowId); // Add the rowId to the selectedRowIds set\n        updatedSelectedRows.push(row); // Add the actual row element to the updated selected rows array\n      }\n    });\n\n    // Replace the old selectedRows with the updated selected rows\n    this._selectedRows = updatedSelectedRows;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener(\n      'on-header-checkbox-toggle',\n      this._toggleSelectionAll as EventListener\n    );\n    this.addEventListener(\n      'on-row-select',\n      this._handleRowSelectionChange as EventListener\n    );\n    this.addEventListener(\n      'on-rows-change',\n      this._handleRowsChange as EventListener\n    );\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener(\n      'on-header-checkbox-toggle',\n      this._toggleSelectionAll as EventListener\n    );\n    this.removeEventListener(\n      'on-row-select',\n      this._handleRowSelectionChange as EventListener\n    );\n    this.removeEventListener(\n      'on-rows-change',\n      this._handleRowsChange as EventListener\n    );\n  }\n\n  override firstUpdated() {\n    this._tableHeaderRow = this.querySelector('kyn-header-tr');\n  }\n\n  override render() {\n    return html` <slot></slot> `;\n  }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-table': Table;\n  }\n}\n"],"names":["Table","LitElement","constructor","this","role","_provider","ContextProvider","tableContext","_tableHeaderRow","_allRows","_selectedRows","_selectedRowIds","Set","_headerCheckboxIndeterminate","_headerCheckboxChecked","updated","changedProperties","super","newValues","has","dense","striped","checkboxSelection","stickyHeader","setValue","_updateHeaderCheckbox","length","_a","updateHeaderCheckboxState","_handleRowSelectionChange","event","stopPropagation","target","selectedRows","contains","includes","filter","e","delete","rowId","push","add","init","bubbles","cancelable","composed","detail","selectedRow","dispatchEvent","CustomEvent","_toggleSelectionAll","checked","allRows","forEach","row","disabled","selected","map","updateAfterExternalChanges","Array","from","querySelectorAll","requestUpdate","getSelectedRows","_handleRowsChange","rows","_updateSelectionStates","updatedSelectedRows","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","querySelector","render","html","styles","__decorate","property","type","String","reflect","prototype","Boolean","state","customElement"],"mappings":"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"}
+{"version":3,"file":"table-f6b54ef0.js","sources":["../src/components/reusable/table/table.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ContextProvider } from '@lit/context';\nimport { tableContext } from './table-context';\n\nimport { TableRow } from './table-row';\nimport { TableHeaderRow } from './table-header-row';\n\nimport styles from './table.scss';\n\n/**\n * `kyn-table` Web Component.\n * This component provides a table with sorting, pagination, and selection capabilities.\n * It is designed to be used with the `kyn-table-toolbar` and `kyn-table-container` components.\n * @fires on-row-selection-change - Dispatched when the selection state of a row is toggled.\n * @fires on-all-rows-selection-change - Dispatched when the selection state of all rows is toggled.\n */\n\n@customElement('kyn-table')\nexport class Table extends LitElement {\n  static override styles = [styles];\n\n  /** aria role.\n   * @internal\n   */\n  @property({ type: String, reflect: true })\n  override role = 'table';\n\n  /**\n   * checkboxSelection: Boolean indicating whether rows should be\n   * selectable using checkboxes.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean })\n  checkboxSelection?: boolean;\n\n  /**\n   * striped: Boolean indicating whether rows should have alternate\n   * coloring.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean })\n  striped?: boolean;\n\n  /**\n   * stickyHeader: Boolean indicating whether the table header should be sticky.\n   * Must also set a height or max-height on kyn-table-container.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean })\n  stickyHeader?: boolean;\n\n  /**\n   * dense: Boolean indicating whether the table should be displayed\n   * in dense mode.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean })\n  dense?: boolean;\n\n  /**\n   * fixedLayout: Boolean indicating whether the table should have a fixed layout.\n   * This will set the table's layout to fixed, which means the table and column widths\n   * will be determined by the width of the columns and not by the content of the cells.\n   * This can be useful when you want to have a consistent column width across multiple tables.\n   * @type {boolean}\n   * @default false\n   * */\n  @property({ type: Boolean })\n  fixedLayout?: boolean;\n\n  /**\n   * _provider: Context provider for the table.\n   * @ignore\n   * @private\n   */\n  @state()\n  private _provider = new ContextProvider(this, tableContext);\n\n  /**\n   * updated: Lifecycle method called when the element is updated.\n   */\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n\n    // Create an object to hold the new values\n    const newValues: Partial<any> = {};\n\n    // Check each property in _propsToCheck and add it to newValues if it has really changed\n    if (changedProperties.has('dense')) newValues.dense = this.dense;\n    if (changedProperties.has('striped')) newValues.striped = this.striped;\n    if (changedProperties.has('checkboxSelection'))\n      newValues.checkboxSelection = this.checkboxSelection;\n    if (changedProperties.has('stickyHeader'))\n      newValues.stickyHeader = this.stickyHeader;\n\n    // Update the context provider with the new values\n    this._provider.setValue(newValues);\n  }\n\n  /**\n   * tableHeaderRow: Reference to the header row of the table.\n   * @ignore\n   * @private\n   */\n  @state()\n  private _tableHeaderRow: TableHeaderRow | null = null;\n\n  /**\n   * allRows: Array of objects representing each row in the data table.\n   * @ignore\n   * @private\n   */\n  @state()\n  private _allRows: TableRow[] = [];\n\n  /**\n   * selectedRows: Set of row ids that are currently selected.\n   * @ignore\n   * @private\n   */\n  @state()\n  private _selectedRows: TableRow[] = [];\n\n  /**\n   * selectedRowIds: Set of row ids that are currently selected.\n   * @ignore\n   * @private\n   */\n  @state()\n  private _selectedRowIds: Set<string> = new Set();\n\n  /**\n   * headerCheckboxIndeterminate: Boolean indicating whether the header\n   * checkbox is in an indeterminate state.\n   * @ignore\n   * @private\n   */\n  @state()\n  private _headerCheckboxIndeterminate = false;\n\n  /**\n   * headerCheckboxChecked: Boolean indicating whether the header checkbox is\n   * checked.\n   * @ignore\n   * @private\n   */\n  @state()\n  private _headerCheckboxChecked = false;\n\n  /**\n   * Updates the state of the header checkbox based on the number of\n   * selected rows.\n   * @private\n   */\n  private _updateHeaderCheckbox() {\n    if (this._selectedRows.length === 0 || this._allRows.length === 0) {\n      this._headerCheckboxIndeterminate = false;\n      this._headerCheckboxChecked = false;\n    } else if (this._selectedRows.length === this._allRows.length) {\n      this._headerCheckboxIndeterminate = false;\n      this._headerCheckboxChecked = true;\n    } else {\n      this._headerCheckboxIndeterminate = true;\n      this._headerCheckboxChecked = false;\n    }\n\n    this._tableHeaderRow?.updateHeaderCheckboxState(\n      this._headerCheckboxIndeterminate,\n      this._headerCheckboxChecked\n    );\n  }\n\n  /**\n   * Handles the change of selection state for a specific row.\n   */\n  private _handleRowSelectionChange(event: CustomEvent) {\n    event.stopPropagation();\n\n    const { target } = event;\n    const { _selectedRows: selectedRows } = this;\n\n    if (!this.contains(target as TableRow)) {\n      return;\n    }\n\n    if (selectedRows.includes(target as TableRow)) {\n      this._selectedRows = selectedRows.filter((e) => e !== target);\n      this._selectedRowIds.delete((target as TableRow).rowId);\n    } else {\n      this._selectedRows.push(target as TableRow);\n      this._selectedRowIds.add((target as TableRow).rowId);\n    }\n\n    this._updateHeaderCheckbox();\n\n    const init = {\n      bubbles: false,\n      cancelable: true,\n      composed: true,\n      detail: {\n        selectedRow: target,\n        selectedRows: this._selectedRows,\n      },\n    };\n    this.dispatchEvent(new CustomEvent('on-row-selection-change', init));\n  }\n\n  /**\n   * Toggles the selection state of all rows in the table.\n   */\n  private _toggleSelectionAll(event: CustomEvent) {\n    event.stopPropagation();\n\n    const {\n      detail: { checked },\n      target,\n    } = event;\n    const { _allRows: allRows } = this;\n\n    if (!this.contains(target as TableRow)) {\n      return;\n    }\n\n    allRows.forEach((row) => {\n      if ((row as TableRow).disabled) return;\n\n      (row as TableRow).selected = checked;\n    });\n\n    this._selectedRows = [...allRows.filter((row) => row.selected)];\n    this._selectedRowIds = new Set(this._selectedRows.map((row) => row.rowId));\n\n    this._updateHeaderCheckbox();\n\n    const init = {\n      bubbles: false,\n      cancelable: true,\n      composed: true,\n      detail: {\n        selectedRows: this._selectedRows,\n      },\n    };\n    this.dispatchEvent(new CustomEvent('on-all-rows-selection-change', init));\n  }\n\n  /**\n   * Resets the selection state of all rows in the table.\n   * This method is called when the table is reset or cleared.\n   * @public\n   * @returns void\n   */\n  public updateAfterExternalChanges() {\n    // Re-query the DOM to update the _allRows based on current children elements\n    this._allRows = Array.from(this.querySelectorAll('kyn-tr'));\n\n    // Update _selectedRows based on whether the row elements are marked as selected\n    this._selectedRows = this._allRows.filter((row) => row.selected);\n\n    this._updateHeaderCheckbox();\n    this.requestUpdate();\n  }\n\n  /**\n   * Returns the selected rows in the table.\n   * @returns Array of selected rows.\n   * @public\n   */\n  public getSelectedRows() {\n    return this._selectedRows;\n  }\n\n  /**\n   * Handles the change of rows in the table body.\n   * @param {CustomEvent} event - The custom event containing the updated rows.\n   * @private\n   */\n  private _handleRowsChange(event: CustomEvent) {\n    const {\n      detail: { rows },\n    } = event;\n    event.stopPropagation();\n\n    this._allRows = rows;\n    this._updateSelectionStates();\n    this._updateHeaderCheckbox();\n  }\n\n  private _updateSelectionStates() {\n    // Temporary array to hold updated selected rows\n    const updatedSelectedRows: TableRow[] = [];\n\n    // Loop through all rows to update their selected state and rebuild the selectedRows array\n    this._allRows.forEach((row) => {\n      if (this._selectedRowIds.has(row.rowId)) {\n        row.selected = true; // Update the selected property if the rowId matches\n        updatedSelectedRows.push(row); // Add the actual row element to the updated selected rows array\n      } else if (row.selected) {\n        this._selectedRowIds.add(row.rowId); // Add the rowId to the selectedRowIds set\n        updatedSelectedRows.push(row); // Add the actual row element to the updated selected rows array\n      }\n    });\n\n    // Replace the old selectedRows with the updated selected rows\n    this._selectedRows = updatedSelectedRows;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener(\n      'on-header-checkbox-toggle',\n      this._toggleSelectionAll as EventListener\n    );\n    this.addEventListener(\n      'on-row-select',\n      this._handleRowSelectionChange as EventListener\n    );\n    this.addEventListener(\n      'on-rows-change',\n      this._handleRowsChange as EventListener\n    );\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener(\n      'on-header-checkbox-toggle',\n      this._toggleSelectionAll as EventListener\n    );\n    this.removeEventListener(\n      'on-row-select',\n      this._handleRowSelectionChange as EventListener\n    );\n    this.removeEventListener(\n      'on-rows-change',\n      this._handleRowsChange as EventListener\n    );\n  }\n\n  override firstUpdated() {\n    this._tableHeaderRow = this.querySelector('kyn-header-tr');\n  }\n\n  override render() {\n    return html` <slot></slot> `;\n  }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-table': Table;\n  }\n}\n"],"names":["Table","LitElement","constructor","this","role","_provider","ContextProvider","tableContext","_tableHeaderRow","_allRows","_selectedRows","_selectedRowIds","Set","_headerCheckboxIndeterminate","_headerCheckboxChecked","updated","changedProperties","super","newValues","has","dense","striped","checkboxSelection","stickyHeader","setValue","_updateHeaderCheckbox","length","_a","updateHeaderCheckboxState","_handleRowSelectionChange","event","stopPropagation","target","selectedRows","contains","includes","filter","e","delete","rowId","push","add","init","bubbles","cancelable","composed","detail","selectedRow","dispatchEvent","CustomEvent","_toggleSelectionAll","checked","allRows","forEach","row","disabled","selected","map","updateAfterExternalChanges","Array","from","querySelectorAll","requestUpdate","getSelectedRows","_handleRowsChange","rows","_updateSelectionStates","updatedSelectedRows","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","querySelector","render","html","styles","__decorate","property","type","String","reflect","prototype","Boolean","state","customElement"],"mappings":"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"}