@kyndryl-design-system/shidoka-applications 1.5.4 → 1.6.0

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

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

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

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

package/components/reusable/sideDrawer/index.js

@@ -0,0 +1,2 @@
+export{SideDrawer}from"./sideDrawer.js";
+//# sourceMappingURL=index.js.map

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

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

package/components/reusable/sideDrawer/sideDrawer.d.ts

@@ -0,0 +1,59 @@
+import { LitElement } from 'lit';
+import '@kyndryl-design-system/shidoka-foundation/components/button';
+import '@kyndryl-design-system/shidoka-foundation/components/icon';
+/**
+ * Side Drawer.
+ * @slot unnamed - Slot for drawer body content.
+ * @slot anchor - Slot for the anchor button content.
+ * @fires on-close - Emits the drawer close event with `returnValue` (`'ok'` or `'cancel'`).
+ */
+export declare class SideDrawer extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * Drawer open state.
+     */
+    open: boolean;
+    /**
+     * Drawer size. `'md'`, or `'sm'`.
+     */
+    size: string;
+    /**
+     * Title / Heading text, required.
+     */
+    titleText: string;
+    /**
+     * Label text, optional.
+     */
+    labelText: string;
+    /**
+     * Submit button text.
+     */
+    submitBtnText: string;
+    /**
+     * Cancel button text.
+     */
+    cancelBtnText: string;
+    /** Disables the primary button. */
+    submitBtnDisabled: boolean;
+    /** Determine whether needs footer */
+    hideFooter: boolean;
+    /** Changes the primary button styles to indicate the action is destructive. */
+    destructive: boolean;
+    /** Function to execute before the Drawer can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */
+    beforeClose: Function;
+    /** The dialog element
+     * @internal
+     */
+    _dialog: any;
+    render(): import("lit-html").TemplateResult<1>;
+    private _openDrawer;
+    private _closeDrawer;
+    private _emitCloseEvent;
+    updated(changedProps: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-side-drawer': SideDrawer;
+    }
+}
+//# sourceMappingURL=sideDrawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sideDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,iCAkBpB;IAEF;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,IAAI,SAAQ;IAEZ;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,aAAa,SAAQ;IAErB;;OAEG;IAEH,aAAa,SAAY;IAEzB,mCAAmC;IAEnC,iBAAiB,UAAS;IAE1B,qCAAqC;IAErC,UAAU,UAAS;IAEnB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,6LAA6L;IAE7L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IAuEf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,eAAe;IAUd,OAAO,CAAC,YAAY,EAAE,GAAG;CASnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}

package/components/reusable/sideDrawer/sideDrawer.js

@@ -0,0 +1,73 @@
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as i}from'./../../../external/@lit/reactive-element/decorators/property.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import a from"./sideDrawer.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import n from'./../../../external/@carbon/icons/es/close/32.js';import{css as d}from'./../../../external/@lit/reactive-element/css-tag.js';let c=class extends o{constructor(){super(...arguments),this.open=!1,this.size="md",this.titleText="",this.labelText="",this.submitBtnText="Ok",this.cancelBtnText="Cancel",this.submitBtnDisabled=!1,this.hideFooter=!1,this.destructive=!1}render(){const e={modal:!0,dialog:!0,"size--md":"md"===this.size,"size--sm":"sm"===this.size};return t`
+      <button class="anchor" @click=${this._openDrawer}>
+        <slot name="anchor"></slot>
+      </button>
+
+      <dialog
+        class="${r(e)}"
+        autofocus
+        aria-labelledby="dialogLabel"
+        @cancel=${e=>this._closeDrawer(e,"cancel")}
+      >
+        <div class="drawer-content-wrapper">
+          <!--  Header -->
+          <header>
+            <div class="header-label-title">
+              ${""!==this.labelText?t`<span class="label">${this.labelText}</span>`:null}
+              <h1 id="dialogLabel">${this.titleText}</h1>
+            </div>
+            <div class="close-wrapper">
+              <button
+                class="close"
+                @click=${e=>this._closeDrawer(e,"cancel")}
+              >
+                <kd-icon .icon=${n}></kd-icon>
+              </button>
+            </div>
+          </header>
+          <!-- Body -->
+          <div>
+            <slot></slot>
+          </div>
+        </div>
+        <!-- footer -->
+        ${this.hideFooter?null:t`
+              <div class="dialog-footer">
+                <div class="actions">
+                  <kd-button
+                    value="Ok"
+                    ?disabled=${this.submitBtnDisabled}
+                    ?destructive=${this.destructive}
+                    @click=${e=>this._closeDrawer(e,"ok")}
+                  >
+                    ${this.submitBtnText}
+                  </kd-button>
+
+                  <kd-button
+                    value="Cancel"
+                    kind="secondary"
+                    @click=${e=>this._closeDrawer(e,"cancel")}
+                  >
+                    ${this.cancelBtnText}
+                  </kd-button>
+                </div>
+              </div>
+            `}
+      </dialog>
+    `}_openDrawer(){this.open=!0}_closeDrawer(e,t){(!this.beforeClose||this.beforeClose&&this.beforeClose(t))&&(this.open=!1,this._dialog.returnValue=t,this._emitCloseEvent(e))}_emitCloseEvent(e){const t=new CustomEvent("on-close",{detail:{returnValue:this._dialog.returnValue,origEvent:e}});this.dispatchEvent(t)}updated(e){e.has("open")&&(this.open?this._dialog.showModal():this._dialog.close())}};c.styles=[a,d`
+      @supports (transition-behavior: allow-discrete) {
+        @starting-style {
+          dialog[open] {
+            right: -100%;
+            transform: translateX(100%);
+          }
+        }
+
+        @starting-style {
+          dialog[open]::backdrop {
+            background-color: rgb(0, 0, 0, 0);
+          }
+        }
+      }
+    `],e([i({type:Boolean})],c.prototype,"open",void 0),e([i({type:String})],c.prototype,"size",void 0),e([i({type:String})],c.prototype,"titleText",void 0),e([i({type:String})],c.prototype,"labelText",void 0),e([i({type:String})],c.prototype,"submitBtnText",void 0),e([i({type:String})],c.prototype,"cancelBtnText",void 0),e([i({type:Boolean})],c.prototype,"submitBtnDisabled",void 0),e([i({type:Boolean})],c.prototype,"hideFooter",void 0),e([i({type:Boolean})],c.prototype,"destructive",void 0),e([i({attribute:!1})],c.prototype,"beforeClose",void 0),e([l("dialog")],c.prototype,"_dialog",void 0),c=e([s("kyn-side-drawer")],c);export{c as SideDrawer};
+//# sourceMappingURL=sideDrawer.js.map

package/components/reusable/sideDrawer/sideDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sideDrawer.js","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport SideDrawerScss from './sideDrawer.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Side Drawer.\n * @slot unnamed - Slot for drawer body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the drawer close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n\n@customElement('kyn-side-drawer')\nexport class SideDrawer extends LitElement {\n  static override styles = [\n    SideDrawerScss,\n    css`\n      @supports (transition-behavior: allow-discrete) {\n        @starting-style {\n          dialog[open] {\n            right: -100%;\n            transform: translateX(100%);\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  /**\n   * Drawer open state.\n   */\n  @property({ type: Boolean })\n  open = false;\n\n  /**\n   * Drawer size. `'md'`, or `'sm'`.\n   */\n  @property({ type: String })\n  size = 'md';\n\n  /**\n   * Title / Heading text, required.\n   */\n  @property({ type: String })\n  titleText = '';\n\n  /**\n   * Label text, optional.\n   */\n  @property({ type: String })\n  labelText = '';\n\n  /**\n   * Submit button text.\n   */\n  @property({ type: String })\n  submitBtnText = 'Ok';\n\n  /**\n   * Cancel button text.\n   */\n  @property({ type: String })\n  cancelBtnText = 'Cancel';\n\n  /** Disables the primary button. */\n  @property({ type: Boolean })\n  submitBtnDisabled = false;\n\n  /** Determine whether needs footer */\n  @property({ type: Boolean })\n  hideFooter = false;\n\n  /** Changes the primary button styles to indicate the action is destructive. */\n  @property({ type: Boolean })\n  destructive = false;\n\n  /** Function to execute before the Drawer 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  /** The dialog element\n   * @internal\n   */\n  @query('dialog')\n  _dialog!: any;\n\n  override render() {\n    const classes = {\n      modal: true,\n      dialog: true,\n      'size--md': this.size === 'md',\n      'size--sm': this.size === 'sm',\n    };\n\n    return html`\n      <button class=\"anchor\" @click=${this._openDrawer}>\n        <slot name=\"anchor\"></slot>\n      </button>\n\n      <dialog\n        class=\"${classMap(classes)}\"\n        autofocus\n        aria-labelledby=\"dialogLabel\"\n        @cancel=${(e: Event) => this._closeDrawer(e, 'cancel')}\n      >\n        <div class=\"drawer-content-wrapper\">\n          <!--  Header -->\n          <header>\n            <div class=\"header-label-title\">\n              ${this.labelText !== ''\n                ? html`<span class=\"label\">${this.labelText}</span>`\n                : null}\n              <h1 id=\"dialogLabel\">${this.titleText}</h1>\n            </div>\n            <div class=\"close-wrapper\">\n              <button\n                class=\"close\"\n                @click=${(e: Event) => this._closeDrawer(e, 'cancel')}\n              >\n                <kd-icon .icon=${closeIcon}></kd-icon>\n              </button>\n            </div>\n          </header>\n          <!-- Body -->\n          <div>\n            <slot></slot>\n          </div>\n        </div>\n        <!-- footer -->\n        ${!this.hideFooter\n          ? html`\n              <div class=\"dialog-footer\">\n                <div class=\"actions\">\n                  <kd-button\n                    value=\"Ok\"\n                    ?disabled=${this.submitBtnDisabled}\n                    ?destructive=${this.destructive}\n                    @click=${(e: Event) => this._closeDrawer(e, 'ok')}\n                  >\n                    ${this.submitBtnText}\n                  </kd-button>\n\n                  <kd-button\n                    value=\"Cancel\"\n                    kind=\"secondary\"\n                    @click=${(e: Event) => this._closeDrawer(e, 'cancel')}\n                  >\n                    ${this.cancelBtnText}\n                  </kd-button>\n                </div>\n              </div>\n            `\n          : null}\n      </dialog>\n    `;\n  }\n\n  private _openDrawer() {\n    this.open = true;\n  }\n\n  private _closeDrawer(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  override updated(changedProps: any) {\n    if (changedProps.has('open')) {\n      if (this.open) {\n        this._dialog.showModal();\n      } else {\n        this._dialog.close();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-side-drawer': SideDrawer;\n  }\n}\n"],"names":["SideDrawer","LitElement","constructor","this","open","size","titleText","labelText","submitBtnText","cancelBtnText","submitBtnDisabled","hideFooter","destructive","render","classes","modal","dialog","html","_openDrawer","classMap","e","_closeDrawer","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","SideDrawerScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"qhCAiBO,IAAMA,EAAN,cAAyBC,EAAzBC,kCAyBLC,KAAIC,MAAG,EAMPD,KAAIE,KAAG,KAMPF,KAASG,UAAG,GAMZH,KAASI,UAAG,GAMZJ,KAAaK,cAAG,KAMhBL,KAAaM,cAAG,SAIhBN,KAAiBO,mBAAG,EAIpBP,KAAUQ,YAAG,EAIbR,KAAWS,aAAG,CAqHf,CAzGUC,SACP,MAAMC,EAAU,CACdC,OAAO,EACPC,QAAQ,EACR,WAA0B,OAAdb,KAAKE,KACjB,WAA0B,OAAdF,KAAKE,MAGnB,OAAOY,CAAI;sCACuBd,KAAKe;;;;;iBAK1BC,EAASL;;;kBAGPM,GAAajB,KAAKkB,aAAaD,EAAG;;;;;;gBAMlB,KAAnBjB,KAAKI,UACHU,CAAI,uBAAuBd,KAAKI,mBAChC;qCACmBJ,KAAKG;;;;;yBAKhBc,GAAajB,KAAKkB,aAAaD,EAAG;;iCAE3BE;;;;;;;;;;UAUtBnB,KAAKQ,WAuBJ,KAtBAM,CAAI;;;;;gCAKgBd,KAAKO;mCACFP,KAAKS;6BACVQ,GAAajB,KAAKkB,aAAaD,EAAG;;sBAE1CjB,KAAKK;;;;;;6BAMGY,GAAajB,KAAKkB,aAAaD,EAAG;;sBAE1CjB,KAAKM;;;;;;KAQxB,CAEOS,cACNf,KAAKC,MAAO,CACb,CAEOiB,aAAaD,EAAUG,KAE1BpB,KAAKqB,aACLrB,KAAKqB,aAAerB,KAAKqB,YAAYD,MAEtCpB,KAAKC,MAAO,EACZD,KAAKsB,QAAQF,YAAcA,EAC3BpB,KAAKuB,gBAAgBN,GAExB,CAEOM,gBAAgBN,GACtB,MAAMO,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNN,YAAapB,KAAKsB,QAAQF,YAC1BO,UAAWV,KAGfjB,KAAK4B,cAAcJ,EACpB,CAEQK,QAAQC,GACXA,EAAaC,IAAI,UACf/B,KAAKC,KACPD,KAAKsB,QAAQU,YAEbhC,KAAKsB,QAAQW,QAGlB,GAtLepC,EAAAqC,OAAS,CACvBC,EACAC,CAAG;;;;;;;;;;;;;;;OAsBLC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACL3C,EAAA4C,UAAA,YAAA,GAMbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACN7C,EAAA4C,UAAA,YAAA,GAMZJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACH7C,EAAA4C,UAAA,iBAAA,GAMfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACH7C,EAAA4C,UAAA,iBAAA,GAMfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACG7C,EAAA4C,UAAA,qBAAA,GAMrBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACO7C,EAAA4C,UAAA,qBAAA,GAIzBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACQ3C,EAAA4C,UAAA,yBAAA,GAI1BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACC3C,EAAA4C,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACE3C,EAAA4C,UAAA,mBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEK,WAAW,KACA9C,EAAA4C,UAAA,mBAAA,GAMvBJ,EAAA,CADCO,EAAM,WACO/C,EAAA4C,UAAA,eAAA,GA7EH5C,EAAUwC,EAAA,CADtBQ,EAAc,oBACFhD"}

package/components/reusable/sideDrawer/sideDrawer.scss.js

@@ -0,0 +1,250 @@
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as i}from'./../../../external/@lit/reactive-element/css-tag.js';var e=i`*,
+*::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: inline-block;
+}
+
+dialog {
+  padding: 0;
+  color: inherit;
+  background: var(--kd-color-background-ui-default);
+  border: 1px solid var(--kd-color-border-light);
+  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.12);
+  right: 0;
+  min-height: 100%;
+  left: auto;
+  margin: 0;
+}
+dialog[open] {
+  animation: dialog-in 400ms forwards;
+}
+dialog::backdrop {
+  background: rgba(60, 61, 60, 0.4);
+}
+dialog.size--sm {
+  width: 384px;
+}
+dialog.size--md {
+  width: 800px;
+}
+
+.drawer-content-wrapper {
+  position: relative;
+  padding: 0 32px 32px 32px;
+  height: 100vh;
+  margin-bottom: 10px;
+}
+
+button {
+  appearance: none;
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+  border-radius: 4px;
+  outline: 2px solid transparent;
+  transition: outline-color 150ms ease-out, color 150ms ease-out;
+}
+button:focus {
+  outline-color: var(--kd-color-border-focus);
+}
+button:hover {
+  color: var(--kd-color-text-link-hover);
+}
+button:active {
+  color: var(--kd-color-text-pressed);
+}
+
+.anchor {
+  display: inline-block;
+  width: 100%;
+}
+
+header {
+  z-index: 90;
+  position: sticky;
+  top: 0;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  padding-top: 32px;
+  padding-bottom: 16px;
+}
+
+.header-label-title {
+  display: flex;
+  flex-direction: column;
+  margin-right: 10px;
+}
+
+.close kd-icon {
+  display: block;
+}
+
+.close-wrapper {
+  align-items: center;
+  display: flex;
+}
+
+.label {
+  font-family: var(--kd-font-family-secondary);
+  font-size: var(--kd-font-size-utility-3-sm);
+  line-height: var(--kd-line-height-utility-3-sm);
+  font-weight: var(--kd-font-weight-regular);
+  letter-spacing: var(--kd-letter-spacing-5);
+  color: var(--kd-color-text-placeholder);
+}
+@media (min-width: 42rem) {
+  .label {
+    font-size: var(--kd-font-size-utility-3-md);
+    line-height: var(--kd-line-height-utility-3-md);
+  }
+}
+@media (min-width: 74rem) {
+  .label {
+    font-size: var(--kd-font-size-utility-3-lg);
+    line-height: var(--kd-line-height-utility-3-lg);
+  }
+}
+@media (min-width: 82rem) {
+  .label {
+    font-size: var(--kd-font-size-utility-3-xlg);
+    line-height: var(--kd-line-height-utility-3-xlg);
+  }
+}
+@media (min-width: 99rem) {
+  .label {
+    font-size: var(--kd-font-size-utility-3-max);
+    line-height: var(--kd-line-height-utility-3-max);
+  }
+}
+
+h1 {
+  font-family: var(--kd-font-family-primary);
+  font-size: var(--kd-font-size-body-1-sm);
+  line-height: var(--kd-line-height-body-1-sm);
+  font-weight: var(--kd-font-weight-regular);
+  letter-spacing: var(--kd-letter-spacing-4);
+  margin: 0;
+  order: 1;
+}
+@media (min-width: 42rem) {
+  h1 {
+    font-size: var(--kd-font-size-body-1-md);
+    line-height: var(--kd-line-height-body-1-md);
+  }
+}
+@media (min-width: 74rem) {
+  h1 {
+    font-size: var(--kd-font-size-body-1-lg);
+    line-height: var(--kd-line-height-body-1-lg);
+  }
+}
+@media (min-width: 82rem) {
+  h1 {
+    font-size: var(--kd-font-size-body-1-xlg);
+    line-height: var(--kd-line-height-body-1-xlg);
+  }
+}
+@media (min-width: 99rem) {
+  h1 {
+    font-size: var(--kd-font-size-body-1-max);
+    line-height: var(--kd-line-height-body-1-max);
+  }
+}
+
+.dialog-footer {
+  position: sticky;
+  bottom: 0px;
+  width: 100%;
+  background-color: var(--kd-color-background-accent-subtle);
+  padding: 24px 32px 24px 32px;
+  border-top: 1px solid var(--kd-color-border-light);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+@media (max-width: 42rem) {
+  .actions kd-button {
+    width: 100%;
+    flex-grow: 1;
+  }
+}
+
+.custom-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+@supports (transition-behavior: allow-discrete) {
+  dialog {
+    transition: right 400ms ease, transform 400ms ease, overlay 400ms ease allow-discrete, display 400ms ease allow-discrete;
+    right: -100%;
+    transform: translateX(100%);
+  }
+  dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0);
+    transition: display 400ms allow-discrete, overlay 400ms allow-discrete, background-color 400ms;
+  }
+  dialog[open] {
+    animation: none;
+    right: 0;
+    transform: translateX(0);
+  }
+  dialog[open]::backdrop {
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+}
+@keyframes dialog-in {
+  0% {
+    right: -100%;
+    transform: translateX(100%);
+  }
+  50% {
+    right: -50%;
+    transform: translateX(50%);
+  }
+  100% {
+    right: 0;
+    transform: translateX(0);
+  }
+}`;export{e as default};
+//# sourceMappingURL=sideDrawer.scss.js.map

package/components/reusable/sideDrawer/sideDrawer.scss.js.map

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

package/index.d.ts

@@ -21,4 +21,5 @@ export { Modal } from './components/reusable/modal';
 export { Tooltip } from './components/reusable/tooltip';
 export { Tag, TagGroup } from './components/reusable/tag';
 export { GlobalFilter } from './components/reusable/globalFilter';
+export { SideDrawer } from './components/reusable/sideDrawer';
 //# sourceMappingURL=index.d.ts.map

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,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EACL,WAAW,EACX,gBAAgB,GACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,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,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EACL,WAAW,EACX,gBAAgB,GACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,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,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,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"}

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{HeaderFlyouts}from"./components/global/header/headerFlyouts.js";export{HeaderFlyout}from"./components/global/header/headerFlyout.js";export{HeaderAvatar}from"./components/global/header/headerAvatar.js";export{HeaderPanel}from"./components/global/header/headerPanel.js";export{HeaderPanelLink}from"./components/global/header/headerPanelLink.js";export{LocalNav}from"./components/global/localNav/localNav.js";export{LocalNavLink}from"./components/global/localNav/localNavLink.js";export{Footer}from"./components/global/footer/footer.js";export{FooterNav}from"./components/global/footer/footerNav.js";export{FooterNavLink}from"./components/global/footer/footerLink.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{TextInput}from"./components/reusable/textInput/textInput.js";export{TextArea}from"./components/reusable/textArea/textArea.js";export{ToggleButton}from"./components/reusable/toggleButton/toggleButton.js";export{TimePicker}from"./components/reusable/timepicker/timepicker.js";export{Dropdown}from"./components/reusable/dropdown/dropdown.js";export{DropdownOption}from"./components/reusable/dropdown/dropdownOption.js";export{DatePicker}from"./components/reusable/datePicker/datepicker.js";export{DateRangePicker}from"./components/reusable/daterangepicker/daterangepicker.js";export{BreadcrumbItem}from"./components/reusable/breadcrumbs/breadcrumbItem.js";export{Breadcrumbs}from"./components/reusable/breadcrumbs/breadcrumbs.js";export{Table}from"./components/reusable/table/Table.js";import"./components/reusable/table/table-cell.js";import"./components/reusable/table/table-row.js";import"./components/reusable/table/table-body.js";import"./components/reusable/table/table-head.js";import"./components/reusable/table/table-header.js";import"./components/reusable/table/table-footer.js";import"./components/reusable/table/table-toolbar.js";import"./components/reusable/table/table-container.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";export{DataTable}from"./components/reusable/table/data-table.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";export{GlobalFilter}from"./components/reusable/globalFilter/globalFilter.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{HeaderFlyouts}from"./components/global/header/headerFlyouts.js";export{HeaderFlyout}from"./components/global/header/headerFlyout.js";export{HeaderAvatar}from"./components/global/header/headerAvatar.js";export{HeaderPanel}from"./components/global/header/headerPanel.js";export{HeaderPanelLink}from"./components/global/header/headerPanelLink.js";export{LocalNav}from"./components/global/localNav/localNav.js";export{LocalNavLink}from"./components/global/localNav/localNavLink.js";export{Footer}from"./components/global/footer/footer.js";export{FooterNav}from"./components/global/footer/footerNav.js";export{FooterNavLink}from"./components/global/footer/footerLink.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{TextInput}from"./components/reusable/textInput/textInput.js";export{TextArea}from"./components/reusable/textArea/textArea.js";export{ToggleButton}from"./components/reusable/toggleButton/toggleButton.js";export{TimePicker}from"./components/reusable/timepicker/timepicker.js";export{Dropdown}from"./components/reusable/dropdown/dropdown.js";export{DropdownOption}from"./components/reusable/dropdown/dropdownOption.js";export{DatePicker}from"./components/reusable/datePicker/datepicker.js";export{DateRangePicker}from"./components/reusable/daterangepicker/daterangepicker.js";export{BreadcrumbItem}from"./components/reusable/breadcrumbs/breadcrumbItem.js";export{Breadcrumbs}from"./components/reusable/breadcrumbs/breadcrumbs.js";export{Table}from"./components/reusable/table/Table.js";import"./components/reusable/table/table-cell.js";import"./components/reusable/table/table-row.js";import"./components/reusable/table/table-body.js";import"./components/reusable/table/table-head.js";import"./components/reusable/table/table-header.js";import"./components/reusable/table/table-footer.js";import"./components/reusable/table/table-toolbar.js";import"./components/reusable/table/table-container.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";export{DataTable}from"./components/reusable/table/data-table.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";export{GlobalFilter}from"./components/reusable/globalFilter/globalFilter.js";export{SideDrawer}from"./components/reusable/sideDrawer/sideDrawer.js";
 //# sourceMappingURL=index.js.map

package/package.json

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