@kyndryl-design-system/shidoka-applications 2.9.4 → 2.10.1

package/components/reusable/card/card.d.ts

@@ -16,6 +16,8 @@ export declare class Card extends LitElement {
     target: any;
     /** Hide card border. Useful when clickable card use inside `<kyn-notification>` component. */
     hideBorder: boolean;
+    /** Set this to `true` for AI theme. */
+    aiConnected: boolean;
     /** Set this to `true` for highlight */
     highlight: boolean;
     render(): import("lit").TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC;;;;GAIG;AAEH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,MAAY;IAElC,4CAA4C;IAE5C,IAAI,SAAY;IAEhB,yCAAyC;IAEzC,IAAI,SAAM;IAEV,sKAAsK;IAEtK,GAAG,SAAM;IAET,sKAAsK;IAEtK,MAAM,EAAE,GAAG,CAAW;IAEtB,8FAA8F;IAE9F,UAAU,UAAS;IAEnB,uCAAuC;IAEvC,SAAS,UAAS;IAET,MAAM;IA+Bf,OAAO,CAAC,WAAW;CAMpB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC;;;;GAIG;AAEH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,MAAY;IAElC,4CAA4C;IAE5C,IAAI,SAAY;IAEhB,yCAAyC;IAEzC,IAAI,SAAM;IAEV,sKAAsK;IAEtK,GAAG,SAAM;IAET,sKAAsK;IAEtK,MAAM,EAAE,GAAG,CAAW;IAEtB,8FAA8F;IAE9F,UAAU,UAAS;IAEnB,uCAAuC;IAEvC,WAAW,UAAS;IACpB,uCAAuC;IAEvC,SAAS,UAAS;IAET,MAAM;IAmCf,OAAO,CAAC,WAAW;CAMpB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}

package/components/reusable/card/card.js

@@ -1,4 +1,4 @@
-import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as t}from"../../../vendor/lit-6e2a7867.js";import{i,s as a,x as d}from"../../../vendor/lit-element-3185f710.js";var l=i`*,
+import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as t}from"../../../vendor/lit-6e2a7867.js";import{i as a,s as i,x as l}from"../../../vendor/lit-element-3185f710.js";var d=a`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -37,10 +37,19 @@ import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as
   position: relative;
   padding: 16px;
   background-color: var(--kd-color-background-container-default);
-  outline: 1px solid var(--kd-color-border-level-secondary);
+  outline: 1px solid var(--kd-color-border-card-default);
   border-radius: 8px;
   height: 100%;
 }
+.card-wrapper.ai-Connected {
+  background-color: var(--kd-color-background-ui-hollow-default);
+  outline: 1px solid var(--kd-color-border-variants-light);
+}
+.card-wrapper.ai-highlight {
+  outline: 1px solid var(--kd-color-border-button-ai-state-default);
+  background: var(--kd-color-background-container-ai-default);
+  color: var(--kd-color-text-level-primary);
+}
 .card-wrapper-clickable {
   position: relative;
   display: inline-block;
@@ -61,15 +70,40 @@ import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as
   outline-color: var(--kd-color-border-ui-hover);
   box-shadow: var(--kd-elevation-level-2);
 }
+.card-wrapper-clickable.ai-Connected {
+  background-color: var(--kd-color-background-ui-hollow-default);
+}
+.card-wrapper-clickable.ai-Connected:hover {
+  outline-color: var(--kd-color-border-button-ai-state-hover);
+  box-shadow: var(--kd-elevation-level-2-ai);
+}
+.card-wrapper-clickable.ai-Connected:focus {
+  outline-color: var(--kd-color-border-button-ai-state-hover);
+  box-shadow: var(--kd-elevation-level-2-ai);
+}
+.card-wrapper-clickable.ai-highlight {
+  background: var(--kd-color-background-container-ai-default);
+}
+.card-wrapper-clickable.ai-highlight:hover {
+  outline-color: var(--kd-color-border-button-ai-state-hover);
+  box-shadow: var(--kd-elevation-level-2-ai);
+}
+.card-wrapper-clickable.ai-highlight:focus {
+  outline-color: var(--kd-color-border-button-ai-state-hover);
+  box-shadow: var(--kd-elevation-level-2-ai);
+}
 .card-border {
-  outline: 1px solid var(--kd-color-border-level-secondary);
+  outline: 1px solid var(--kd-color-border-card-clickable);
   box-shadow: var(--kd-elevation-level-1);
 }
+.card-border.ai-Connected {
+  outline: 1px solid var(--kd-color-border-button-ai-state-default);
+}
 .card-highlight {
   outline: 1px solid var(--kd-color-background-highlight-border);
   background: var(--kd-color-background-highlight-fill);
   color: var(--kd-color-text-level-primary);
-}`;let n=class extends a{constructor(){super(...arguments),this.type="normal",this.href="",this.rel="",this.target="_self",this.hideBorder=!1,this.highlight=!1}render(){const r={"card-wrapper-clickable":!0,"card-border":!1===this.hideBorder,"card-highlight":this.highlight},o={"card-wrapper":!0,"card-highlight":this.highlight};return d`${"clickable"===this.type?d`<a
+}`;let c=class extends i{constructor(){super(...arguments),this.type="normal",this.href="",this.rel="",this.target="_self",this.hideBorder=!1,this.aiConnected=!1,this.highlight=!1}render(){const r={"card-wrapper-clickable":!0,"card-border":!1===this.hideBorder,"ai-Connected":this.aiConnected,"card-highlight":this.highlight,"ai-highlight":this.aiConnected&&this.highlight},o={"card-wrapper":!0,"ai-Connected":this.aiConnected,"card-highlight":this.highlight,"ai-highlight":this.aiConnected&&this.highlight};return l`${"clickable"===this.type?l`<a
           part="card-wrapper"
           class="${e(r)}"
           href=${this.href}
@@ -78,10 +112,10 @@ import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as
           @click=${r=>this.handleClick(r)}
         >
           <slot></slot>
-        </a>`:d`<div
+        </a>`:l`<div
           part="card-wrapper"
           class="${e(o)}"
         >
           <slot></slot>
-        </div>`} `}handleClick(r){const o=new CustomEvent("on-card-click",{detail:{origEvent:r}});this.dispatchEvent(o)}};n.styles=l,r([o({type:String})],n.prototype,"type",void 0),r([o({type:String})],n.prototype,"href",void 0),r([o({type:String})],n.prototype,"rel",void 0),r([o({type:String})],n.prototype,"target",void 0),r([o({type:Boolean})],n.prototype,"hideBorder",void 0),r([o({type:Boolean})],n.prototype,"highlight",void 0),n=r([t("kyn-card")],n);export{n as Card};
+        </div>`} `}handleClick(r){const o=new CustomEvent("on-card-click",{detail:{origEvent:r}});this.dispatchEvent(o)}};c.styles=d,r([o({type:String})],c.prototype,"type",void 0),r([o({type:String})],c.prototype,"href",void 0),r([o({type:String})],c.prototype,"rel",void 0),r([o({type:String})],c.prototype,"target",void 0),r([o({type:Boolean})],c.prototype,"hideBorder",void 0),r([o({type:Boolean})],c.prototype,"aiConnected",void 0),r([o({type:Boolean})],c.prototype,"highlight",void 0),c=r([t("kyn-card")],c);export{c as Card};
 //# sourceMappingURL=card.js.map

package/components/reusable/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../src/components/reusable/card/card.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport CardScss from './card.scss';\n\n/**\n * Card.\n * @fires on-card-click - Captures the click event of clickable card and emits the original event details. Use `e.stopPropogation()` / `e.preventDefault()` for any internal clickable elements when card type is `'clickable'` to stop bubbling / prevent event.\n * @slot unnamed - Slot for card contents.\n */\n\n@customElement('kyn-card')\nexport class Card extends LitElement {\n  static override styles = CardScss;\n\n  /** Card Type. `'normal'` & `'clickable'` */\n  @property({ type: String })\n  type = 'normal';\n\n  /** Card link url for clickable cards. */\n  @property({ type: String })\n  href = '';\n\n  /** Use for Card type `'clickable'`. 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  /** Defines a target attribute for where to load the URL in case of clickable card. Possible options include `'_self'` (deafult), `'_blank'`, `'_parent`', `'_top'` */\n  @property({ type: String })\n  target: any = '_self';\n\n  /** Hide card border. Useful when clickable card use inside `<kyn-notification>` component. */\n  @property({ type: Boolean })\n  hideBorder = false;\n\n  /** Set this to `true` for highlight */\n  @property({ type: Boolean })\n  highlight = false;\n\n  override render() {\n    const cardWrapperClasses = {\n      'card-wrapper-clickable': true,\n      'card-border': this.hideBorder === false,\n      'card-highlight': this.highlight,\n    };\n\n    const cardWrapperDefaultClasses = {\n      'card-wrapper': true,\n      'card-highlight': this.highlight,\n    };\n\n    return html`${this.type === 'clickable'\n      ? html`<a\n          part=\"card-wrapper\"\n          class=\"${classMap(cardWrapperClasses)}\"\n          href=${this.href}\n          target=${this.target}\n          rel=${this.rel}\n          @click=${(e: Event) => this.handleClick(e)}\n        >\n          <slot></slot>\n        </a>`\n      : html`<div\n          part=\"card-wrapper\"\n          class=\"${classMap(cardWrapperDefaultClasses)}\"\n        >\n          <slot></slot>\n        </div>`} `;\n  }\n\n  private handleClick(e: Event) {\n    const event = new CustomEvent('on-card-click', {\n      detail: { origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-card': Card;\n  }\n}\n"],"names":["Card","LitElement","constructor","this","type","href","rel","target","hideBorder","highlight","render","cardWrapperClasses","cardWrapperDefaultClasses","html","classMap","e","handleClick","event","CustomEvent","detail","origEvent","dispatchEvent","styles","CardScss","__decorate","property","String","prototype","Boolean","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAaO,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAKLC,KAAIC,KAAG,SAIPD,KAAIE,KAAG,GAIPF,KAAGG,IAAG,GAINH,KAAMI,OAAQ,QAIdJ,KAAUK,YAAG,EAIbL,KAASM,WAAG,CAuCb,CArCU,MAAAC,GACP,MAAMC,EAAqB,CACzB,0BAA0B,EAC1B,eAAmC,IAApBR,KAAKK,WACpB,iBAAkBL,KAAKM,WAGnBG,EAA4B,CAChC,gBAAgB,EAChB,iBAAkBT,KAAKM,WAGzB,OAAOI,CAAI,GAAiB,cAAdV,KAAKC,KACfS,CAAI;;mBAEOC,EAASH;iBACXR,KAAKE;mBACHF,KAAKI;gBACRJ,KAAKG;mBACDS,GAAaZ,KAAKa,YAAYD;;;cAI1CF,CAAI;;mBAEOC,EAASF;;;kBAIzB,CAEO,WAAAI,CAAYD,GAClB,MAAME,EAAQ,IAAIC,YAAY,gBAAiB,CAC7CC,OAAQ,CAAEC,UAAWL,KAEvBZ,KAAKkB,cAAcJ,EACpB,GA9DejB,EAAMsB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAErB,KAAMsB,UACF1B,EAAA2B,UAAA,YAAA,GAIhBH,EAAA,CADCC,EAAS,CAAErB,KAAMsB,UACR1B,EAAA2B,UAAA,YAAA,GAIVH,EAAA,CADCC,EAAS,CAAErB,KAAMsB,UACT1B,EAAA2B,UAAA,WAAA,GAITH,EAAA,CADCC,EAAS,CAAErB,KAAMsB,UACI1B,EAAA2B,UAAA,cAAA,GAItBH,EAAA,CADCC,EAAS,CAAErB,KAAMwB,WACC5B,EAAA2B,UAAA,kBAAA,GAInBH,EAAA,CADCC,EAAS,CAAErB,KAAMwB,WACA5B,EAAA2B,UAAA,iBAAA,GAzBP3B,EAAIwB,EAAA,CADhBK,EAAc,aACF7B"}
+{"version":3,"file":"card.js","sources":["../../../../src/components/reusable/card/card.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport CardScss from './card.scss';\n\n/**\n * Card.\n * @fires on-card-click - Captures the click event of clickable card and emits the original event details. Use `e.stopPropogation()` / `e.preventDefault()` for any internal clickable elements when card type is `'clickable'` to stop bubbling / prevent event.\n * @slot unnamed - Slot for card contents.\n */\n\n@customElement('kyn-card')\nexport class Card extends LitElement {\n  static override styles = CardScss;\n\n  /** Card Type. `'normal'` & `'clickable'` */\n  @property({ type: String })\n  type = 'normal';\n\n  /** Card link url for clickable cards. */\n  @property({ type: String })\n  href = '';\n\n  /** Use for Card type `'clickable'`. 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  /** Defines a target attribute for where to load the URL in case of clickable card. Possible options include `'_self'` (deafult), `'_blank'`, `'_parent`', `'_top'` */\n  @property({ type: String })\n  target: any = '_self';\n\n  /** Hide card border. Useful when clickable card use inside `<kyn-notification>` component. */\n  @property({ type: Boolean })\n  hideBorder = false;\n\n  /** Set this to `true` for AI theme. */\n  @property({ type: Boolean })\n  aiConnected = false;\n  /** Set this to `true` for highlight */\n  @property({ type: Boolean })\n  highlight = false;\n\n  override render() {\n    const cardWrapperClasses = {\n      'card-wrapper-clickable': true,\n      'card-border': this.hideBorder === false,\n      'ai-Connected': this.aiConnected,\n      'card-highlight': this.highlight,\n      'ai-highlight': this.aiConnected && this.highlight,\n    };\n\n    const cardWrapperDefaultClasses = {\n      'card-wrapper': true,\n      'ai-Connected': this.aiConnected,\n      'card-highlight': this.highlight,\n      'ai-highlight': this.aiConnected && this.highlight,\n    };\n\n    return html`${this.type === 'clickable'\n      ? html`<a\n          part=\"card-wrapper\"\n          class=\"${classMap(cardWrapperClasses)}\"\n          href=${this.href}\n          target=${this.target}\n          rel=${this.rel}\n          @click=${(e: Event) => this.handleClick(e)}\n        >\n          <slot></slot>\n        </a>`\n      : html`<div\n          part=\"card-wrapper\"\n          class=\"${classMap(cardWrapperDefaultClasses)}\"\n        >\n          <slot></slot>\n        </div>`} `;\n  }\n\n  private handleClick(e: Event) {\n    const event = new CustomEvent('on-card-click', {\n      detail: { origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-card': Card;\n  }\n}\n"],"names":["Card","LitElement","constructor","this","type","href","rel","target","hideBorder","aiConnected","highlight","render","cardWrapperClasses","cardWrapperDefaultClasses","html","classMap","e","handleClick","event","CustomEvent","detail","origEvent","dispatchEvent","styles","CardScss","__decorate","property","String","prototype","Boolean","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAaO,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAKLC,KAAIC,KAAG,SAIPD,KAAIE,KAAG,GAIPF,KAAGG,IAAG,GAINH,KAAMI,OAAQ,QAIdJ,KAAUK,YAAG,EAIbL,KAAWM,aAAG,EAGdN,KAASO,WAAG,CA2Cb,CAzCU,MAAAC,GACP,MAAMC,EAAqB,CACzB,0BAA0B,EAC1B,eAAmC,IAApBT,KAAKK,WACpB,eAAgBL,KAAKM,YACrB,iBAAkBN,KAAKO,UACvB,eAAgBP,KAAKM,aAAeN,KAAKO,WAGrCG,EAA4B,CAChC,gBAAgB,EAChB,eAAgBV,KAAKM,YACrB,iBAAkBN,KAAKO,UACvB,eAAgBP,KAAKM,aAAeN,KAAKO,WAG3C,OAAOI,CAAI,GAAiB,cAAdX,KAAKC,KACfU,CAAI;;mBAEOC,EAASH;iBACXT,KAAKE;mBACHF,KAAKI;gBACRJ,KAAKG;mBACDU,GAAab,KAAKc,YAAYD;;;cAI1CF,CAAI;;mBAEOC,EAASF;;;kBAIzB,CAEO,WAAAI,CAAYD,GAClB,MAAME,EAAQ,IAAIC,YAAY,gBAAiB,CAC7CC,OAAQ,CAAEC,UAAWL,KAEvBb,KAAKmB,cAAcJ,EACpB,GArEelB,EAAMuB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEtB,KAAMuB,UACF3B,EAAA4B,UAAA,YAAA,GAIhBH,EAAA,CADCC,EAAS,CAAEtB,KAAMuB,UACR3B,EAAA4B,UAAA,YAAA,GAIVH,EAAA,CADCC,EAAS,CAAEtB,KAAMuB,UACT3B,EAAA4B,UAAA,WAAA,GAITH,EAAA,CADCC,EAAS,CAAEtB,KAAMuB,UACI3B,EAAA4B,UAAA,cAAA,GAItBH,EAAA,CADCC,EAAS,CAAEtB,KAAMyB,WACC7B,EAAA4B,UAAA,kBAAA,GAInBH,EAAA,CADCC,EAAS,CAAEtB,KAAMyB,WACE7B,EAAA4B,UAAA,mBAAA,GAGpBH,EAAA,CADCC,EAAS,CAAEtB,KAAMyB,WACA7B,EAAA4B,UAAA,iBAAA,GA5BP5B,EAAIyB,EAAA,CADhBK,EAAc,aACF9B"}

package/components/reusable/modal/modal.js

@@ -1,4 +1,4 @@
-import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../../vendor/lit-html-29220869.js";import{n as o,i,o as a,e as l}from"../../../vendor/lit-6e2a7867.js";import{i as n,s as r,x as s}from"../../../vendor/lit-element-3185f710.js";import"../button/button.js";import{c as d}from"../../../vendor/@kyndryl-design-system/shidoka-icons-e426f09b.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";var c=n`*,
+import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../../vendor/lit-html-29220869.js";import{n as o,i,o as a,e as n}from"../../../vendor/lit-6e2a7867.js";import{i as l,s as r,x as s}from"../../../vendor/lit-element-3185f710.js";import"../button/button.js";import{c as d}from"../../../vendor/@kyndryl-design-system/shidoka-icons-e426f09b.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";var c=l`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -62,7 +62,8 @@ dialog.size--xl {
 }
 dialog.ai-connected {
   box-shadow: var(--kd-elevation-level-3-ai);
-  background: var(--kd-color-background-container-ai-subtle);
+  border: none;
+  background: linear-gradient(180deg, var(--kd-color-background-gradients-ai-linear-top-gradient-1) 0%, var(--kd-color-background-gradients-ai-linear-bottom-gradient-1) 70.5%);
 }
 
 form {
@@ -299,7 +300,7 @@ slot[name=footer]::slotted(*) {
               `}
         </form>
       </dialog>
-    `}_openModal(){this.open=!0}_closeModal(t,e){(!this.beforeClose||this.beforeClose&&this.beforeClose(e))&&(this.open=!1,this._dialog.returnValue=e,this._emitCloseEvent(t))}_emitCloseEvent(t){const e=new CustomEvent("on-close",{detail:{returnValue:this._dialog.returnValue,origEvent:t}});this.dispatchEvent(e)}_emitOpenEvent(){const t=new CustomEvent("on-open");this.dispatchEvent(t)}updated(t){t.has("open")&&(this.open?(this._dialog.showModal(),this._emitOpenEvent()):this._dialog.close())}};h.styles=[c,n`
+    `}_openModal(){this.open=!0}_closeModal(t,e){(!this.beforeClose||this.beforeClose&&this.beforeClose(e))&&(this.open=!1,this._dialog.returnValue=e,this._emitCloseEvent(t))}_emitCloseEvent(t){const e=new CustomEvent("on-close",{detail:{returnValue:this._dialog.returnValue,origEvent:t}});this.dispatchEvent(e)}_emitOpenEvent(){const t=new CustomEvent("on-open");this.dispatchEvent(t)}updated(t){t.has("open")&&(this.open?(this._dialog.showModal(),this._emitOpenEvent()):this._dialog.close())}};h.styles=[c,l`
       @supports (transition-behavior: allow-discrete) {
         @starting-style {
           dialog[open] {
@@ -314,5 +315,5 @@ slot[name=footer]::slotted(*) {
           }
         }
       }
-    `],t([o({type:Boolean})],h.prototype,"open",void 0),t([o({type:String})],h.prototype,"size",void 0),t([o({type:String})],h.prototype,"titleText",void 0),t([o({type:String})],h.prototype,"labelText",void 0),t([o({type:String})],h.prototype,"okText",void 0),t([o({type:String})],h.prototype,"cancelText",void 0),t([o({type:Boolean})],h.prototype,"destructive",void 0),t([o({type:Boolean})],h.prototype,"okDisabled",void 0),t([o({type:Boolean})],h.prototype,"secondaryDisabled",void 0),t([o({type:Boolean})],h.prototype,"hideFooter",void 0),t([o({type:String})],h.prototype,"secondaryButtonText",void 0),t([o({type:Boolean})],h.prototype,"showSecondaryButton",void 0),t([o({type:Boolean})],h.prototype,"hideCancelButton",void 0),t([o({attribute:!1})],h.prototype,"beforeClose",void 0),t([o({type:String})],h.prototype,"closeText",void 0),t([i("dialog")],h.prototype,"_dialog",void 0),t([o({type:Boolean,reflect:!0})],h.prototype,"aiConnected",void 0),t([o({type:Boolean})],h.prototype,"disableScroll",void 0),h=t([l("kyn-modal")],h);export{h as Modal};
+    `],t([o({type:Boolean})],h.prototype,"open",void 0),t([o({type:String})],h.prototype,"size",void 0),t([o({type:String})],h.prototype,"titleText",void 0),t([o({type:String})],h.prototype,"labelText",void 0),t([o({type:String})],h.prototype,"okText",void 0),t([o({type:String})],h.prototype,"cancelText",void 0),t([o({type:Boolean})],h.prototype,"destructive",void 0),t([o({type:Boolean})],h.prototype,"okDisabled",void 0),t([o({type:Boolean})],h.prototype,"secondaryDisabled",void 0),t([o({type:Boolean})],h.prototype,"hideFooter",void 0),t([o({type:String})],h.prototype,"secondaryButtonText",void 0),t([o({type:Boolean})],h.prototype,"showSecondaryButton",void 0),t([o({type:Boolean})],h.prototype,"hideCancelButton",void 0),t([o({attribute:!1})],h.prototype,"beforeClose",void 0),t([o({type:String})],h.prototype,"closeText",void 0),t([i("dialog")],h.prototype,"_dialog",void 0),t([o({type:Boolean,reflect:!0})],h.prototype,"aiConnected",void 0),t([o({type:Boolean})],h.prototype,"disableScroll",void 0),h=t([n("kyn-modal")],h);export{h as Modal};
 //# sourceMappingURL=modal.js.map

package/components/reusable/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ModalScss from './modal.scss';\n\nimport '../button';\n\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @slot footer - Slot for the footer content which replaces the ok, cancel, and second ary buttons.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n * @fires on-open - Emits the modal open event.\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n  static override styles = [\n    ModalScss,\n    css`\n      @supports (transition-behavior: allow-discrete) {\n        @starting-style {\n          dialog[open] {\n            opacity: 0;\n            transform: scale(0);\n          }\n        }\n\n        @starting-style {\n          dialog[open]::backdrop {\n            background-color: rgb(0, 0, 0, 0);\n          }\n        }\n      }\n    `,\n  ];\n\n  /** Modal open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Modal size. `'auto'`, `'md'`, or `'lg', or `'xl'`. */\n  @property({ type: String })\n  size = 'auto';\n\n  /** Title/heading text, required. */\n  @property({ type: String })\n  titleText = '';\n\n  /** Label text, optional. */\n  @property({ type: String })\n  labelText = '';\n\n  /** OK button text. */\n  @property({ type: String })\n  okText = 'OK';\n\n  /** Cancel button text. */\n  @property({ type: String })\n  cancelText = 'Cancel';\n\n  /** Changes the primary button styles to indicate the action is destructive. */\n  @property({ type: Boolean })\n  destructive = false;\n\n  /** Disables the primary button. */\n  @property({ type: Boolean })\n  okDisabled = false;\n\n  /** Disables the secondary button. */\n  @property({ type: Boolean })\n  secondaryDisabled = false;\n\n  /** Hides the footer/action buttons to create a passive modal. */\n  @property({ type: Boolean })\n  hideFooter = false;\n\n  /** Secondary button text. */\n  @property({ type: String })\n  secondaryButtonText = 'Secondary';\n\n  /** Hides the secondary button. */\n  @property({ type: Boolean })\n  showSecondaryButton = false;\n\n  /** Hides the cancel button. */\n  @property({ type: Boolean })\n  hideCancelButton = false;\n\n  /** Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n  @property({ attribute: false })\n  beforeClose!: Function;\n\n  /** Close button text. */\n  @property({ type: String })\n  closeText = 'Close';\n\n  /** The dialog element\n   * @internal\n   */\n  @query('dialog')\n  _dialog!: any;\n\n  /** Determines if the component is themed for GenAI.*/\n  @property({ type: Boolean, reflect: true })\n  aiConnected = false;\n\n  /** Disables scroll on the modal body to allow scrolling of nested elements inside. */\n  @property({ type: Boolean })\n  disableScroll = false;\n\n  override render() {\n    const classes = {\n      modal: true,\n      'size--md': this.size === 'md',\n      'size--lg': this.size === 'lg',\n      'size--xl': this.size === 'xl',\n      'ai-connected': this.aiConnected,\n    };\n\n    return html`\n      <span class=\"anchor\" @click=${this._openModal}>\n        <slot name=\"anchor\"></slot>\n      </span>\n\n      <dialog\n        class=\"${classMap(classes)}\"\n        aria-labelledby=\"dialogLabel\"\n        @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n      >\n        <form method=\"dialog\">\n          <kyn-button\n            class=\"close\"\n            kind=\"ghost\"\n            size=\"small\"\n            description=${this.closeText}\n            @click=${(e: Event) => this._closeModal(e, 'cancel')}\n          >\n            <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n          </kyn-button>\n          <header>\n            <div>\n              <h1 id=\"dialogLabel\">${this.titleText}</h1>\n              ${this.labelText !== ''\n                ? html`<span class=\"label\">${this.labelText}</span>`\n                : null}\n            </div>\n          </header>\n\n          <div class=\"body ${this.disableScroll ? 'disableScroll' : ''}\">\n            <slot></slot>\n          </div>\n\n          ${!this.hideFooter\n            ? html`\n                <slot name=\"footer\">\n                  <div class=\"footer\">\n                    <kyn-button\n                      class=\"action-button\"\n                      value=\"ok\"\n                      kind=${this.destructive\n                        ? 'primary-destructive'\n                        : this.aiConnected\n                        ? 'primary-ai'\n                        : 'primary'}\n                      ?disabled=${this.okDisabled}\n                      @click=${(e: Event) => this._closeModal(e, 'ok')}\n                    >\n                      ${this.okText}\n                    </kyn-button>\n                    ${this.showSecondaryButton\n                      ? html`\n                          <kyn-button\n                            class=\"action-button\"\n                            value=\"Secondary\"\n                            kind=${this.aiConnected ? 'outline-ai' : 'outline'}\n                            ?disabled=${this.secondaryDisabled}\n                            @click=${(e: Event) =>\n                              this._closeModal(e, 'secondary')}\n                          >\n                            ${this.secondaryButtonText}\n                          </kyn-button>\n                        `\n                      : null}\n                    ${this.hideCancelButton\n                      ? null\n                      : html`\n                          <kyn-button\n                            class=\"action-button\"\n                            value=\"cancel\"\n                            kind=\"ghost\"\n                            @click=${(e: Event) =>\n                              this._closeModal(e, 'cancel')}\n                          >\n                            ${this.cancelText}\n                          </kyn-button>\n                        `}\n                    <!--\n            <div class=\"custom-actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n            -->\n                  </div>\n                </slot>\n              `\n            : null}\n        </form>\n      </dialog>\n    `;\n  }\n\n  private _openModal() {\n    this.open = true;\n  }\n\n  private _closeModal(e: Event, returnValue: string) {\n    if (\n      !this.beforeClose ||\n      (this.beforeClose && this.beforeClose(returnValue))\n    ) {\n      this.open = false;\n      this._dialog.returnValue = returnValue;\n      this._emitCloseEvent(e);\n    }\n  }\n\n  private _emitCloseEvent(e: Event) {\n    const event = new CustomEvent('on-close', {\n      detail: {\n        returnValue: this._dialog.returnValue,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _emitOpenEvent() {\n    const event = new CustomEvent('on-open');\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('open')) {\n      if (this.open) {\n        this._dialog.showModal();\n        this._emitOpenEvent();\n      } else {\n        this._dialog.close();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-modal': Modal;\n  }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","destructive","okDisabled","secondaryDisabled","hideFooter","secondaryButtonText","showSecondaryButton","hideCancelButton","closeText","aiConnected","disableScroll","render","classes","modal","html","_openModal","classMap","e","_closeModal","unsafeSVG","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","_emitOpenEvent","updated","changedProps","has","showModal","close","styles","ModalScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ModalScss from './modal.scss';\n\nimport '../button';\n\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @slot footer - Slot for the footer content which replaces the ok, cancel, and second ary buttons.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n * @fires on-open - Emits the modal open event.\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n  static override styles = [\n    ModalScss,\n    css`\n      @supports (transition-behavior: allow-discrete) {\n        @starting-style {\n          dialog[open] {\n            opacity: 0;\n            transform: scale(0);\n          }\n        }\n\n        @starting-style {\n          dialog[open]::backdrop {\n            background-color: rgb(0, 0, 0, 0);\n          }\n        }\n      }\n    `,\n  ];\n\n  /** Modal open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Modal size. `'auto'`, `'md'`, or `'lg', or `'xl'`. */\n  @property({ type: String })\n  size = 'auto';\n\n  /** Title/heading text, required. */\n  @property({ type: String })\n  titleText = '';\n\n  /** Label text, optional. */\n  @property({ type: String })\n  labelText = '';\n\n  /** OK button text. */\n  @property({ type: String })\n  okText = 'OK';\n\n  /** Cancel button text. */\n  @property({ type: String })\n  cancelText = 'Cancel';\n\n  /** Changes the primary button styles to indicate the action is destructive. */\n  @property({ type: Boolean })\n  destructive = false;\n\n  /** Disables the primary button. */\n  @property({ type: Boolean })\n  okDisabled = false;\n\n  /** Disables the secondary button. */\n  @property({ type: Boolean })\n  secondaryDisabled = false;\n\n  /** Hides the footer/action buttons to create a passive modal. */\n  @property({ type: Boolean })\n  hideFooter = false;\n\n  /** Secondary button text. */\n  @property({ type: String })\n  secondaryButtonText = 'Secondary';\n\n  /** Hides the secondary button. */\n  @property({ type: Boolean })\n  showSecondaryButton = false;\n\n  /** Hides the cancel button. */\n  @property({ type: Boolean })\n  hideCancelButton = false;\n\n  /** Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n  @property({ attribute: false })\n  beforeClose!: Function;\n\n  /** Close button text. */\n  @property({ type: String })\n  closeText = 'Close';\n\n  /** The dialog element\n   * @internal\n   */\n  @query('dialog')\n  _dialog!: any;\n\n  /** Determines if the component is themed for GenAI.*/\n  @property({ type: Boolean, reflect: true })\n  aiConnected = false;\n\n  /** Disables scroll on the modal body to allow scrolling of nested elements inside. */\n  @property({ type: Boolean })\n  disableScroll = false;\n\n  override render() {\n    const classes = {\n      modal: true,\n      'size--md': this.size === 'md',\n      'size--lg': this.size === 'lg',\n      'size--xl': this.size === 'xl',\n      'ai-connected': this.aiConnected,\n    };\n\n    return html`\n      <span class=\"anchor\" @click=${this._openModal}>\n        <slot name=\"anchor\"></slot>\n      </span>\n\n      <dialog\n        class=\"${classMap(classes)}\"\n        aria-labelledby=\"dialogLabel\"\n        @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n      >\n        <form method=\"dialog\">\n          <kyn-button\n            class=\"close\"\n            kind=\"ghost\"\n            size=\"small\"\n            description=${this.closeText}\n            @click=${(e: Event) => this._closeModal(e, 'cancel')}\n          >\n            <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n          </kyn-button>\n          <header>\n            <div>\n              <h1 id=\"dialogLabel\">${this.titleText}</h1>\n              ${this.labelText !== ''\n                ? html`<span class=\"label\">${this.labelText}</span>`\n                : null}\n            </div>\n          </header>\n\n          <div class=\"body ${this.disableScroll ? 'disableScroll' : ''}\">\n            <slot></slot>\n          </div>\n\n          ${!this.hideFooter\n            ? html`\n                <slot name=\"footer\">\n                  <div class=\"footer\">\n                    <kyn-button\n                      class=\"action-button\"\n                      value=\"ok\"\n                      kind=${this.destructive\n                        ? 'primary-destructive'\n                        : this.aiConnected\n                        ? 'primary-ai'\n                        : 'primary'}\n                      ?disabled=${this.okDisabled}\n                      @click=${(e: Event) => this._closeModal(e, 'ok')}\n                    >\n                      ${this.okText}\n                    </kyn-button>\n                    ${this.showSecondaryButton\n                      ? html`\n                          <kyn-button\n                            class=\"action-button\"\n                            value=\"Secondary\"\n                            kind=${this.aiConnected ? 'outline-ai' : 'outline'}\n                            ?disabled=${this.secondaryDisabled}\n                            @click=${(e: Event) =>\n                              this._closeModal(e, 'secondary')}\n                          >\n                            ${this.secondaryButtonText}\n                          </kyn-button>\n                        `\n                      : null}\n                    ${this.hideCancelButton\n                      ? null\n                      : html`\n                          <kyn-button\n                            class=\"action-button\"\n                            value=\"cancel\"\n                            kind=\"ghost\"\n                            @click=${(e: Event) =>\n                              this._closeModal(e, 'cancel')}\n                          >\n                            ${this.cancelText}\n                          </kyn-button>\n                        `}\n                    <!--\n            <div class=\"custom-actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n            -->\n                  </div>\n                </slot>\n              `\n            : null}\n        </form>\n      </dialog>\n    `;\n  }\n\n  private _openModal() {\n    this.open = true;\n  }\n\n  private _closeModal(e: Event, returnValue: string) {\n    if (\n      !this.beforeClose ||\n      (this.beforeClose && this.beforeClose(returnValue))\n    ) {\n      this.open = false;\n      this._dialog.returnValue = returnValue;\n      this._emitCloseEvent(e);\n    }\n  }\n\n  private _emitCloseEvent(e: Event) {\n    const event = new CustomEvent('on-close', {\n      detail: {\n        returnValue: this._dialog.returnValue,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _emitOpenEvent() {\n    const event = new CustomEvent('on-open');\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('open')) {\n      if (this.open) {\n        this._dialog.showModal();\n        this._emitOpenEvent();\n      } else {\n        this._dialog.close();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-modal': Modal;\n  }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","destructive","okDisabled","secondaryDisabled","hideFooter","secondaryButtonText","showSecondaryButton","hideCancelButton","closeText","aiConnected","disableScroll","render","classes","modal","html","_openModal","classMap","e","_closeModal","unsafeSVG","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","_emitOpenEvent","updated","changedProps","has","showModal","close","styles","ModalScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","reflect","customElement"],"mappings":"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"}

package/components/reusable/sideDrawer/sideDrawer.js

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{n as o,i,o as a,c as n,e as r}from"../../../vendor/lit-6e2a7867.js";import{i as l,s,x as d}from"../../../vendor/lit-element-3185f710.js";import"../button/button.js";import{c}from"../../../vendor/@kyndryl-design-system/shidoka-icons-e426f09b.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";var h=l`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{n as i,i as o,o as a,c as n,e as r}from"../../../vendor/lit-6e2a7867.js";import{i as l,s as d,x as s}from"../../../vendor/lit-element-3185f710.js";import"../button/button.js";import{c}from"../../../vendor/@kyndryl-design-system/shidoka-icons-e426f09b.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";var h=l`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -66,7 +66,7 @@ dialog {
 }
 dialog.ai-connected {
   box-shadow: var(--kd-elevation-level-3-ai);
-  background: var(--kd-color-background-container-ai-subtle);
+  background: linear-gradient(180deg, var(--kd-color-background-gradients-ai-linear-top-gradient-1) 0%, var(--kd-color-background-gradients-ai-linear-bottom-gradient-1) 70.5%);
 }
 dialog[open] {
   animation: dialog-in 400ms forwards;
@@ -266,7 +266,7 @@ form {
   100% {
     transform: none;
   }
-}`;let p=class extends s{constructor(){super(...arguments),this.open=!1,this.size="md",this.titleText="",this.labelText="",this.submitBtnText="Ok",this.cancelBtnText="Cancel",this.closeBtnDescription="Close",this.submitBtnDisabled=!1,this.hideFooter=!1,this.destructive=!1,this.secondaryButtonText="Secondary",this.showSecondaryButton=!1,this.hideCancelButton=!1,this.aiConnected=!1}render(){const e={modal:!0,dialog:!0,"size--md":"md"===this.size,"size--standard":"standard"===this.size,"size--sm":"sm"===this.size,"ai-connected":this.aiConnected},o={"dialog-footer":!0,"ai-connected":this.aiConnected},i={"header-title":!0,"ai-connected":this.aiConnected};return d`
+}`;let p=class extends d{constructor(){super(...arguments),this.open=!1,this.size="md",this.titleText="",this.labelText="",this.submitBtnText="Ok",this.cancelBtnText="Cancel",this.closeBtnDescription="Close",this.submitBtnDisabled=!1,this.hideFooter=!1,this.destructive=!1,this.secondaryButtonText="Secondary",this.showSecondaryButton=!1,this.hideCancelButton=!1,this.aiConnected=!1}render(){const e={modal:!0,dialog:!0,"size--md":"md"===this.size,"size--standard":"standard"===this.size,"size--sm":"sm"===this.size,"ai-connected":this.aiConnected},i={"dialog-footer":!0,"ai-connected":this.aiConnected},o={"header-title":!0,"ai-connected":this.aiConnected};return s`
       <span class="anchor" @click=${this._openDrawer}>
         <slot name="anchor"></slot>
       </span>
@@ -280,10 +280,10 @@ form {
           <!--  Header -->
           <header>
             <div class="header-label-title">
-              <h1 class="${a(i)}" id="dialogLabel">
+              <h1 class="${a(o)}" id="dialogLabel">
                 ${this.titleText}
               </h1>
-              ${""!==this.labelText?d`<span class="label">${this.labelText}</span>`:null}
+              ${""!==this.labelText?s`<span class="label">${this.labelText}</span>`:null}
             </div>
 
             <kyn-button
@@ -308,8 +308,8 @@ form {
           </div>
 
           <!-- footer -->
-          ${this.hideFooter?null:d`
-                <div class="${a(o)}">
+          ${this.hideFooter?null:s`
+                <div class="${a(i)}">
                   <div class="actions">
                     <kyn-button
                       class="action-button"
@@ -321,7 +321,7 @@ form {
                       ${this.submitBtnText}
                     </kyn-button>
 
-                    ${this.showSecondaryButton?d`
+                    ${this.showSecondaryButton?s`
                           <kyn-button
                             class="action-button"
                             value="Secondary"
@@ -331,7 +331,7 @@ form {
                             ${this.secondaryButtonText}
                           </kyn-button>
                         `:null}
-                    ${this.hideCancelButton?null:d`
+                    ${this.hideCancelButton?null:s`
                           <kyn-button
                             class="action-button"
                             value="Cancel"
@@ -360,5 +360,5 @@ form {
           }
         }
       }
-    `],e([o({type:Boolean})],p.prototype,"open",void 0),e([o({type:String})],p.prototype,"size",void 0),e([o({type:String})],p.prototype,"titleText",void 0),e([o({type:String})],p.prototype,"labelText",void 0),e([o({type:String})],p.prototype,"submitBtnText",void 0),e([o({type:String})],p.prototype,"cancelBtnText",void 0),e([o({type:String})],p.prototype,"closeBtnDescription",void 0),e([o({type:Boolean})],p.prototype,"submitBtnDisabled",void 0),e([o({type:Boolean})],p.prototype,"hideFooter",void 0),e([o({type:Boolean})],p.prototype,"destructive",void 0),e([o({type:String})],p.prototype,"secondaryButtonText",void 0),e([o({type:Boolean})],p.prototype,"showSecondaryButton",void 0),e([o({type:Boolean})],p.prototype,"hideCancelButton",void 0),e([o({attribute:!1})],p.prototype,"beforeClose",void 0),e([o({type:Boolean})],p.prototype,"aiConnected",void 0),e([i("dialog")],p.prototype,"_dialog",void 0),p=e([r("kyn-side-drawer")],p);export{p as SideDrawer};
+    `],e([i({type:Boolean})],p.prototype,"open",void 0),e([i({type:String})],p.prototype,"size",void 0),e([i({type:String})],p.prototype,"titleText",void 0),e([i({type:String})],p.prototype,"labelText",void 0),e([i({type:String})],p.prototype,"submitBtnText",void 0),e([i({type:String})],p.prototype,"cancelBtnText",void 0),e([i({type:String})],p.prototype,"closeBtnDescription",void 0),e([i({type:Boolean})],p.prototype,"submitBtnDisabled",void 0),e([i({type:Boolean})],p.prototype,"hideFooter",void 0),e([i({type:Boolean})],p.prototype,"destructive",void 0),e([i({type:String})],p.prototype,"secondaryButtonText",void 0),e([i({type:Boolean})],p.prototype,"showSecondaryButton",void 0),e([i({type:Boolean})],p.prototype,"hideCancelButton",void 0),e([i({attribute:!1})],p.prototype,"beforeClose",void 0),e([i({type:Boolean})],p.prototype,"aiConnected",void 0),e([o("dialog")],p.prototype,"_dialog",void 0),p=e([r("kyn-side-drawer")],p);export{p as SideDrawer};
 //# sourceMappingURL=sideDrawer.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "2.9.4",
+  "version": "2.10.1",
   "description": "Shidoka Web Components for Applications",
   "main": "index.js",
   "type": "module",