@kyndryl-design-system/shidoka-applications 2.1.0 → 2.3.0

package/components/reusable/avatar/avatar.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+/**
+ * User avatar.
+ * @slot unnamed - Slot for the profile picture img.
+ */
+export declare class Avatar extends LitElement {
+    static styles: any;
+    /** 1-2 letters to represent the user with the initials in the avatar circle. It also provides a slot that allows an image/photo to replace the initials */
+    initials: string;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-avatar': Avatar;
+    }
+}
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/avatar/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;GAGG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,MAAc;IAEpC,2JAA2J;IAE3J,QAAQ,SAAM;IAEL,MAAM;CAKhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAC;KACtB;CACF"}

package/components/reusable/avatar/avatar.js

@@ -0,0 +1,78 @@
+import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as i,e}from"../../../vendor/lit-6e2a7867.js";import{i as r,s as a,x as o}from"../../../vendor/lit-element-3185f710.js";var n=r`*,
+*::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;
+  }
+}
+
+.avatar-wrapper {
+  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-weight: var(--kd-font-weight-regular);
+  letter-spacing: var(--kd-letter-spacing-5);
+  font-size: 20px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  border-radius: 50%;
+  color: var(--kd-color-text-level-secondary);
+  background: var(--kd-color-background-accent-light);
+  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out;
+  white-space: nowrap;
+  overflow: hidden;
+}
+@media (min-width: 42rem) {
+  .avatar-wrapper {
+    font-size: var(--kd-font-size-utility-2-md);
+    line-height: var(--kd-line-height-utility-2-md);
+  }
+}
+@media (min-width: 74rem) {
+  .avatar-wrapper {
+    font-size: var(--kd-font-size-utility-2-lg);
+    line-height: var(--kd-line-height-utility-2-lg);
+  }
+}
+@media (min-width: 82rem) {
+  .avatar-wrapper {
+    font-size: var(--kd-font-size-utility-2-xlg);
+    line-height: var(--kd-line-height-utility-2-xlg);
+  }
+}
+@media (min-width: 99rem) {
+  .avatar-wrapper {
+    font-size: var(--kd-font-size-utility-2-max);
+    line-height: var(--kd-line-height-utility-2-max);
+  }
+}`;let d=class extends a{constructor(){super(...arguments),this.initials=""}render(){return o` <div class="avatar-wrapper">
+      <slot>${this.initials}</slot>
+    </div>`}};d.styles=n,t([i({type:String})],d.prototype,"initials",void 0),d=t([e("kyn-avatar")],d);export{d as Avatar};
+//# sourceMappingURL=avatar.js.map

package/components/reusable/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../../../src/components/reusable/avatar/avatar.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport AvatarScss from './avatar.scss';\n\n/**\n * User avatar.\n * @slot unnamed - Slot for the profile picture img.\n */\n@customElement('kyn-avatar')\nexport class Avatar extends LitElement {\n  static override styles = AvatarScss;\n\n  /** 1-2 letters to represent the user with the initials in the avatar circle. It also provides a slot that allows an image/photo to replace the initials */\n  @property({ type: String })\n  initials = '';\n\n  override render() {\n    return html` <div class=\"avatar-wrapper\">\n      <slot>${this.initials}</slot>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-avatar': Avatar;\n  }\n}\n"],"names":["Avatar","LitElement","constructor","this","initials","render","html","styles","AvatarScss","__decorate","property","type","String","prototype","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GASO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAKLC,KAAQC,SAAG,EAOZ,CALU,MAAAC,GACP,OAAOC,CAAI;cACDH,KAAKC;WAEhB,GAVeJ,EAAMO,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJZ,EAAAa,UAAA,gBAAA,GALHb,EAAMS,EAAA,CADlBK,EAAc,eACFd"}

package/components/reusable/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './avatar';
+//# sourceMappingURL=index.d.ts.map

package/components/reusable/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/components/reusable/avatar/index.js

@@ -0,0 +1,2 @@
+export{Avatar}from"./avatar.js";import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-6e2a7867.js";import"../../../vendor/lit-element-3185f710.js";
+//# sourceMappingURL=index.js.map

package/components/reusable/avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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/index.d.ts

@@ -6,6 +6,7 @@ export { RadioButton, RadioButtonGroup, } from './components/reusable/radioButto
 export { Checkbox, CheckboxGroup, CheckboxSubgroup, } from './components/reusable/checkbox';
 export { TextInput } from './components/reusable/textInput';
 export { TextArea } from './components/reusable/textArea';
+export { Avatar } from './components/reusable/avatar';
 export { ToggleButton } from './components/reusable/toggleButton';
 export { Dropdown, DropdownOption, DropdownCategory, } from './components/reusable/dropdown';
 export { DatePicker } from './components/reusable/datePicker';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,cAAc,EACd,aAAa,EACb,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,uBAAuB,GACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,eAAe,GAChB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EACL,WAAW,EACX,gBAAgB,GACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EACL,QAAQ,EACR,aAAa,EACb,gBAAgB,GACjB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,gBAAgB,GACjB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,YAAY,EACZ,cAAc,EACd,cAAc,EACd,gBAAgB,GACjB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EACL,YAAY,EACZ,gBAAgB,GACjB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EACL,YAAY,EACZ,qBAAqB,GACtB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,eAAe,GAChB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAEhE,OAAO,EACL,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,MAAM,EACN,WAAW,EACX,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EACL,OAAO,EACP,WAAW,EACX,gBAAgB,GACjB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EACL,WAAW,EACX,iBAAiB,GAClB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -1,2 +1,2 @@
-export{Header}from"./components/global/header/header.js";export{HeaderNav}from"./components/global/header/headerNav.js";export{HeaderLink}from"./components/global/header/headerLink.js";export{HeaderCategory}from"./components/global/header/headerCategory.js";export{HeaderDivider}from"./components/global/header/headerDivider.js";export{HeaderFlyouts}from"./components/global/header/headerFlyouts.js";export{HeaderFlyout}from"./components/global/header/headerFlyout.js";export{HeaderUserProfile}from"./components/global/header/headerUserProfile.js";export{HeaderPanelLink}from"./components/global/header/headerPanelLink.js";export{HeaderNotificationPanel}from"./components/global/header/headerNotificationPanel.js";export{LocalNav}from"./components/global/localNav/localNav.js";export{LocalNavLink}from"./components/global/localNav/localNavLink.js";export{LocalNavDivider}from"./components/global/localNav/localNavDivider.js";export{Footer}from"./components/global/footer/footer.js";export{UiShell}from"./components/global/uiShell/uiShell.js";export{RadioButton}from"./components/reusable/radioButton/radioButton.js";export{RadioButtonGroup}from"./components/reusable/radioButton/radioButtonGroup.js";export{Checkbox}from"./components/reusable/checkbox/checkbox.js";export{CheckboxGroup}from"./components/reusable/checkbox/checkboxGroup.js";export{CheckboxSubgroup}from"./components/reusable/checkbox/checkboxSubgroup.js";export{TextInput}from"./components/reusable/textInput/textInput.js";export{TextArea}from"./components/reusable/textArea/textArea.js";export{ToggleButton}from"./components/reusable/toggleButton/toggleButton.js";export{Dropdown}from"./components/reusable/dropdown/dropdown.js";export{DropdownOption}from"./components/reusable/dropdown/dropdownOption.js";export{DropdownCategory}from"./components/reusable/dropdown/dropdownCategory.js";export{DatePicker}from"./components/reusable/datePicker/datepicker.js";export{DateRangePicker}from"./components/reusable/daterangepicker/daterangepicker.js";export{TimePicker}from"./components/reusable/timepicker/timepicker.js";export{ProgressBar}from"./components/reusable/progressBar/progressBar.js";export{BlockCodeView}from"./components/reusable/blockCodeView/blockCodeView.js";export{InlineCodeView}from"./components/reusable/inlineCodeView/inlineCodeView.js";export{Breadcrumbs}from"./components/reusable/breadcrumbs/breadcrumbs.js";export{T as Table}from"./table-f6b54ef0.js";export{TableCell}from"./components/reusable/table/table-cell.js";export{TableRow}from"./components/reusable/table/table-row.js";export{TableBody}from"./components/reusable/table/table-body.js";export{TableHead}from"./components/reusable/table/table-head.js";export{TableHeader}from"./components/reusable/table/table-header.js";export{TableFoot}from"./components/reusable/table/table-foot.js";export{TableFooter}from"./components/reusable/table/table-footer.js";export{TableLegend}from"./components/reusable/table/table-legend.js";export{TableLegendItem}from"./components/reusable/table/table-legend-item.js";export{TableToolbar}from"./components/reusable/table/table-toolbar.js";export{TableContainer}from"./components/reusable/table/table-container.js";export{TableHeaderRow}from"./components/reusable/table/table-header-row.js";export{TableExpandedRow}from"./components/reusable/table/table-expanded-row.js";import"./components/reusable/table/table.skeleton.js";export{Pagination}from"./components/reusable/pagination/Pagination.js";import"./components/reusable/pagination/pagination-items-range.js";import"./components/reusable/pagination/pagination-page-size-dropdown.js";import"./components/reusable/pagination/pagination-navigation-buttons.js";import"./components/reusable/pagination/pagination.skeleton.js";export{OverflowMenu}from"./components/reusable/overflowMenu/overflowMenu.js";export{OverflowMenuItem}from"./components/reusable/overflowMenu/overflowMenuItem.js";export{Tabs}from"./components/reusable/tabs/tabs.js";export{Tab}from"./components/reusable/tabs/tab.js";export{TabPanel}from"./components/reusable/tabs/tabPanel.js";export{Modal}from"./components/reusable/modal/modal.js";export{Tooltip}from"./components/reusable/tooltip/tooltip.js";export{Tag}from"./components/reusable/tag/tag.js";export{TagGroup}from"./components/reusable/tag/tagGroup.js";import"./components/reusable/tag/tag.skeleton.js";export{GlobalFilter}from"./components/reusable/globalFilter/globalFilter.js";export{SideDrawer}from"./components/reusable/sideDrawer/sideDrawer.js";export{PageTitle}from"./components/reusable/pagetitle/pageTitle.js";export{Notification}from"./components/reusable/notification/notification.js";export{NotificationContainer}from"./components/reusable/notification/notificationContainer.js";export{Widget}from"./components/reusable/widget/widget.js";export{WidgetDragHandle}from"./components/reusable/widget/widgetDragHandle.js";export{WidgetGridstack}from"./components/reusable/widget/widgetGridstack.js";export{Search}from"./components/reusable/search/search.js";export{Loader}from"./components/reusable/loaders/loader.js";export{LoaderInline}from"./components/reusable/loaders/inline.js";export{Skeleton}from"./components/reusable/loaders/skeleton.js";export{NumberInput}from"./components/reusable/numberInput/numberInput.js";export{createOptionsArray,debounce,stringToReactHtml}from"./common/helpers/helpers.js";export{Config,WidgetConstraints,WidgetSizes}from"./common/helpers/gridstack.js";export{SwiperConfig}from"./common/helpers/swiper.js";export{Stepper}from"./components/reusable/stepper/stepper.js";export{StepperItem}from"./components/reusable/stepper/stepperItem.js";export{StepperItemChild}from"./components/reusable/stepper/stepperItemChild.js";export{Button}from"./components/reusable/button/button.js";export{Link}from"./components/reusable/link/link.js";export{Accordion}from"./components/reusable/accordion/accordion.js";export{AccordionItem}from"./components/reusable/accordion/accordionItem.js";export{Card}from"./components/reusable/card/card.js";import"./components/reusable/card/vitalCard.skeleton.js";import"./components/reusable/card/informationalCard.skeleton.js";export{SplitButton}from"./components/reusable/splitButton/splitButton.js";export{SplitButtonOption}from"./components/reusable/splitButton/splitButtonOption.js";export{FloatingContainer}from"./components/reusable/floatingContainer/floatingContainer.js";import"./vendor/tslib-53a81efe.js";import"./vendor/lit-6e2a7867.js";import"./vendor/lit-element-3185f710.js";import"./vendor/lit-html-29220869.js";import"./vendor/@kyndryl-design-system/shidoka-foundation-2d7bab68.js";import"./vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import"./vendor/deepmerge-ts-e62363e6.js";import"./common/mixins/form-input.js";import"./common/helpers/flatpickr.js";import"./vendor/flatpickr-bbd13d61.js";import"./shidoka-flatpickr-theme-42d7c67e.js";import"./vendor/prismjs-61b50099.js";import"./vendor/@lit/context-81eb2692.js";import"./components/reusable/table/table-context.js";import"./components/reusable/table/defs.js";import"./pagination-0ed1cd84.js";import"./tag-22009eb5.js";import"./vendor/query-selector-shadow-dom-013e9d24.js";import"./vendor/gridstack-79fea57d.js";import"./vendor/lottie-web-9ccae634.js";import"./components/reusable/button/defs.js";import"./components/reusable/link/defs.js";import"./cardSample-f60b40aa.js";import"./components/reusable/splitButton/defs.js";
+export{Header}from"./components/global/header/header.js";export{HeaderNav}from"./components/global/header/headerNav.js";export{HeaderLink}from"./components/global/header/headerLink.js";export{HeaderCategory}from"./components/global/header/headerCategory.js";export{HeaderDivider}from"./components/global/header/headerDivider.js";export{HeaderFlyouts}from"./components/global/header/headerFlyouts.js";export{HeaderFlyout}from"./components/global/header/headerFlyout.js";export{HeaderUserProfile}from"./components/global/header/headerUserProfile.js";export{HeaderPanelLink}from"./components/global/header/headerPanelLink.js";export{HeaderNotificationPanel}from"./components/global/header/headerNotificationPanel.js";export{LocalNav}from"./components/global/localNav/localNav.js";export{LocalNavLink}from"./components/global/localNav/localNavLink.js";export{LocalNavDivider}from"./components/global/localNav/localNavDivider.js";export{Footer}from"./components/global/footer/footer.js";export{UiShell}from"./components/global/uiShell/uiShell.js";export{RadioButton}from"./components/reusable/radioButton/radioButton.js";export{RadioButtonGroup}from"./components/reusable/radioButton/radioButtonGroup.js";export{Checkbox}from"./components/reusable/checkbox/checkbox.js";export{CheckboxGroup}from"./components/reusable/checkbox/checkboxGroup.js";export{CheckboxSubgroup}from"./components/reusable/checkbox/checkboxSubgroup.js";export{TextInput}from"./components/reusable/textInput/textInput.js";export{TextArea}from"./components/reusable/textArea/textArea.js";export{Avatar}from"./components/reusable/avatar/avatar.js";export{ToggleButton}from"./components/reusable/toggleButton/toggleButton.js";export{Dropdown}from"./components/reusable/dropdown/dropdown.js";export{DropdownOption}from"./components/reusable/dropdown/dropdownOption.js";export{DropdownCategory}from"./components/reusable/dropdown/dropdownCategory.js";export{DatePicker}from"./components/reusable/datePicker/datepicker.js";export{DateRangePicker}from"./components/reusable/daterangepicker/daterangepicker.js";export{TimePicker}from"./components/reusable/timepicker/timepicker.js";export{ProgressBar}from"./components/reusable/progressBar/progressBar.js";export{BlockCodeView}from"./components/reusable/blockCodeView/blockCodeView.js";export{InlineCodeView}from"./components/reusable/inlineCodeView/inlineCodeView.js";export{Breadcrumbs}from"./components/reusable/breadcrumbs/breadcrumbs.js";export{T as Table}from"./table-f6b54ef0.js";export{TableCell}from"./components/reusable/table/table-cell.js";export{TableRow}from"./components/reusable/table/table-row.js";export{TableBody}from"./components/reusable/table/table-body.js";export{TableHead}from"./components/reusable/table/table-head.js";export{TableHeader}from"./components/reusable/table/table-header.js";export{TableFoot}from"./components/reusable/table/table-foot.js";export{TableFooter}from"./components/reusable/table/table-footer.js";export{TableLegend}from"./components/reusable/table/table-legend.js";export{TableLegendItem}from"./components/reusable/table/table-legend-item.js";export{TableToolbar}from"./components/reusable/table/table-toolbar.js";export{TableContainer}from"./components/reusable/table/table-container.js";export{TableHeaderRow}from"./components/reusable/table/table-header-row.js";export{TableExpandedRow}from"./components/reusable/table/table-expanded-row.js";import"./components/reusable/table/table.skeleton.js";export{Pagination}from"./components/reusable/pagination/Pagination.js";import"./components/reusable/pagination/pagination-items-range.js";import"./components/reusable/pagination/pagination-page-size-dropdown.js";import"./components/reusable/pagination/pagination-navigation-buttons.js";import"./components/reusable/pagination/pagination.skeleton.js";export{OverflowMenu}from"./components/reusable/overflowMenu/overflowMenu.js";export{OverflowMenuItem}from"./components/reusable/overflowMenu/overflowMenuItem.js";export{Tabs}from"./components/reusable/tabs/tabs.js";export{Tab}from"./components/reusable/tabs/tab.js";export{TabPanel}from"./components/reusable/tabs/tabPanel.js";export{Modal}from"./components/reusable/modal/modal.js";export{Tooltip}from"./components/reusable/tooltip/tooltip.js";export{Tag}from"./components/reusable/tag/tag.js";export{TagGroup}from"./components/reusable/tag/tagGroup.js";import"./components/reusable/tag/tag.skeleton.js";export{GlobalFilter}from"./components/reusable/globalFilter/globalFilter.js";export{SideDrawer}from"./components/reusable/sideDrawer/sideDrawer.js";export{PageTitle}from"./components/reusable/pagetitle/pageTitle.js";export{Notification}from"./components/reusable/notification/notification.js";export{NotificationContainer}from"./components/reusable/notification/notificationContainer.js";export{Widget}from"./components/reusable/widget/widget.js";export{WidgetDragHandle}from"./components/reusable/widget/widgetDragHandle.js";export{WidgetGridstack}from"./components/reusable/widget/widgetGridstack.js";export{Search}from"./components/reusable/search/search.js";export{Loader}from"./components/reusable/loaders/loader.js";export{LoaderInline}from"./components/reusable/loaders/inline.js";export{Skeleton}from"./components/reusable/loaders/skeleton.js";export{NumberInput}from"./components/reusable/numberInput/numberInput.js";export{createOptionsArray,debounce,stringToReactHtml}from"./common/helpers/helpers.js";export{Config,WidgetConstraints,WidgetSizes}from"./common/helpers/gridstack.js";export{SwiperConfig}from"./common/helpers/swiper.js";export{Stepper}from"./components/reusable/stepper/stepper.js";export{StepperItem}from"./components/reusable/stepper/stepperItem.js";export{StepperItemChild}from"./components/reusable/stepper/stepperItemChild.js";export{Button}from"./components/reusable/button/button.js";export{Link}from"./components/reusable/link/link.js";export{Accordion}from"./components/reusable/accordion/accordion.js";export{AccordionItem}from"./components/reusable/accordion/accordionItem.js";export{Card}from"./components/reusable/card/card.js";import"./components/reusable/card/vitalCard.skeleton.js";import"./components/reusable/card/informationalCard.skeleton.js";export{SplitButton}from"./components/reusable/splitButton/splitButton.js";export{SplitButtonOption}from"./components/reusable/splitButton/splitButtonOption.js";export{FloatingContainer}from"./components/reusable/floatingContainer/floatingContainer.js";import"./vendor/tslib-53a81efe.js";import"./vendor/lit-6e2a7867.js";import"./vendor/lit-element-3185f710.js";import"./vendor/lit-html-29220869.js";import"./vendor/@kyndryl-design-system/shidoka-foundation-2d7bab68.js";import"./vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import"./vendor/deepmerge-ts-e62363e6.js";import"./common/mixins/form-input.js";import"./common/helpers/flatpickr.js";import"./vendor/flatpickr-bbd13d61.js";import"./shidoka-flatpickr-theme-42d7c67e.js";import"./vendor/prismjs-61b50099.js";import"./vendor/@lit/context-81eb2692.js";import"./components/reusable/table/table-context.js";import"./components/reusable/table/defs.js";import"./pagination-0ed1cd84.js";import"./tag-22009eb5.js";import"./vendor/query-selector-shadow-dom-013e9d24.js";import"./vendor/gridstack-79fea57d.js";import"./vendor/lottie-web-9ccae634.js";import"./components/reusable/button/defs.js";import"./components/reusable/link/defs.js";import"./cardSample-f60b40aa.js";import"./components/reusable/splitButton/defs.js";
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "2.1.0",
+  "version": "2.3.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.1.1",
+    "@kyndryl-design-system/shidoka-foundation": "^2.2.0",
     "@kyndryl-design-system/shidoka-icons": "^2.0.0",
     "@lit/context": "^1.1.0",
     "deepmerge-ts": "^7.1.0",
@@ -56,24 +56,24 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.1.6",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-actions": "^8.4.7",
-    "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-docs": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-storysource": "^8.4.7",
+    "@storybook/addon-a11y": "^8.5.6",
+    "@storybook/addon-actions": "^8.5.6",
+    "@storybook/addon-designs": "^8.2.0",
+    "@storybook/addon-docs": "^8.5.6",
+    "@storybook/addon-essentials": "^8.5.6",
+    "@storybook/addon-interactions": "^8.5.6",
+    "@storybook/addon-links": "^8.5.6",
+    "@storybook/addon-storysource": "^8.5.6",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/addon-themes": "^8.5.6",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/preview-api": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@storybook/test-runner": "^0.21.0",
-    "@storybook/theming": "^8.4.7",
-    "@storybook/web-components": "^8.4.7",
-    "@storybook/web-components-webpack5": "^8.4.7",
+    "@storybook/manager-api": "^8.5.6",
+    "@storybook/preview-api": "^8.5.6",
+    "@storybook/test": "^8.5.6",
+    "@storybook/test-runner": "^0.21.1",
+    "@storybook/theming": "^8.5.6",
+    "@storybook/web-components": "^8.5.6",
+    "@storybook/web-components-webpack5": "^8.5.6",
     "@types/prismjs": "^1.26.4",
     "@types/query-selector-shadow-dom": "^1.0.1",
     "@types/sass": "^1.43.1",
@@ -86,7 +86,7 @@
     "css-loader": "^6.7.3",
     "eslint": "^8.57.0",
     "eslint-plugin-lit-a11y": "^1.1.0-next.1",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-storybook": "^0.11.3",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.2",
     "lit-analyzer": "^2.0.3",
@@ -110,7 +110,7 @@
     "sass": "^1.81.0",
     "sass-loader": "^13.2.0",
     "shadow-dom-testing-library": "^1.11.2",
-    "storybook": "^8.4.7",
+    "storybook": "^8.5.6",
     "storybook-addon-themes": "^6.1.0",
     "storybook-preset-inline-svg": "^1.0.1",
     "svg-inline-loader": "^0.8.2",