@kyndryl-design-system/shidoka-applications 1.1.22 → 1.2.1

package/components/global/footer/footer.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --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 {

package/components/global/footer/footer.scss.js.map

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

package/components/global/header/header.scss.js

@@ -101,7 +101,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --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 {

package/components/global/header/header.scss.js.map

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

package/components/global/header/headerAvatar.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --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 {

package/components/global/header/headerAvatar.scss.js.map

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

package/components/global/header/headerFlyout.scss.js

@@ -1,4 +1,4 @@
-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 e}from'./../../../external/@lit/reactive-element/css-tag.js';var t=e`*,
+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 e}from'./../../../external/@lit/reactive-element/css-tag.js';var r=e`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -101,7 +101,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --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 {
@@ -180,5 +200,5 @@ kd-icon {
 }
 .open kd-icon {
   transform: rotate(-180deg);
-}`;export{t as default};
+}`;export{r as default};
 //# sourceMappingURL=headerFlyout.scss.js.map

package/components/global/header/headerFlyout.scss.js.map

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

package/components/global/header/headerLink.scss.js

@@ -1,4 +1,4 @@
-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 e}from'./../../../external/@lit/reactive-element/css-tag.js';var o=e`*,
+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 e}from'./../../../external/@lit/reactive-element/css-tag.js';var t=e`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -101,7 +101,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --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 {
@@ -226,5 +246,5 @@ kd-icon {
 
 .static {
   flex-direction: column;
-}`;export{o as default};
+}`;export{t as default};
 //# sourceMappingURL=headerLink.scss.js.map

package/components/global/header/headerLink.scss.js.map

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

package/components/global/header/headerPanel.scss.js

@@ -101,7 +101,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --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 {

package/components/global/header/headerPanel.scss.js.map

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

package/components/global/header/headerPanelLink.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --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 {

package/components/global/header/headerPanelLink.scss.js.map

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

package/components/global/localNav/localNav.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --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 {

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

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

package/components/reusable/breadcrumbs/breadcrumbs.scss.js

@@ -6,7 +6,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --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;
+  }
 }
 
 .breadcrumbs {

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

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

package/components/reusable/checkbox/checkboxGroup.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --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 {
@@ -26,6 +46,9 @@ legend {
   letter-spacing: var(--kd-letter-spacing-5);
   text-transform: uppercase;
   font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   padding: 0;
   margin-bottom: 8px;
 }

package/components/reusable/checkbox/checkboxGroup.scss.js.map

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

package/components/reusable/datePicker/datepicker.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --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 {
@@ -20,7 +40,9 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
   letter-spacing: var(--kd-letter-spacing-5);
   text-transform: uppercase;
   font-weight: 500;
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   padding: 0;
   margin-bottom: 8px;
 }

package/components/reusable/datePicker/datepicker.scss.js.map

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

package/components/reusable/daterangepicker/daterangepicker.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --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 {
@@ -20,7 +40,9 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
   letter-spacing: var(--kd-letter-spacing-5);
   text-transform: uppercase;
   font-weight: 500;
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   padding: 0;
   margin-bottom: 8px;
 }

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

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

package/components/reusable/dropdown/dropdown.scss.js

@@ -5,7 +5,27 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 :root {
-  --kd-grid-max-width: 99rem;
+  --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 {
@@ -20,7 +40,9 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
   letter-spacing: var(--kd-letter-spacing-5);
   text-transform: uppercase;
   font-weight: 500;
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   padding: 0;
   margin-bottom: 8px;
 }

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

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

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

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

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

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

package/components/reusable/modal/index.js

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

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

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

package/components/reusable/modal/modal.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+import '@kyndryl-design-system/shidoka-foundation/components/button';
+import '@kyndryl-design-system/shidoka-foundation/components/icon';
+/**
+ * Modal.
+ * @slot unnamed - Slot for modal body content.
+ * @slot anchor - Slot for the anchor button content.
+ * @slot actions - Slot for custom action buttons. Custom action buttons will not trigger the `on-close` event.
+ * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).
+ */
+export declare class Modal extends LitElement {
+    static styles: import("lit").CSSResultGroup;
+    /** Modal open state. */
+    open: boolean;
+    /** Modal size. `'auto'`, `'md'`, or `'lg'`. */
+    size: string;
+    /** Title/heading text, required. */
+    titleText: string;
+    /** Label text, optional. */
+    labelText: string;
+    /** OK button text. */
+    okText: string;
+    /** Cancel button text. */
+    cancelText: string;
+    /** 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`. */
+    beforeClose: Function;
+    /** The dialog element
+     * @internal
+     */
+    _dialog: any;
+    render(): import("lit-html").TemplateResult<1>;
+    private _openModal;
+    private _closeModal;
+    private _emitCloseEvent;
+    updated(changedProps: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-modal': Modal;
+    }
+}
+//# sourceMappingURL=modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAInE;;;;;;GAMG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,+BAAa;IAEnC,wBAAwB;IAExB,IAAI,UAAS;IAEb,+CAA+C;IAE/C,IAAI,SAAU;IAEd,oCAAoC;IAEpC,SAAS,SAAM;IAEf,4BAA4B;IAE5B,SAAS,SAAM;IAEf,sBAAsB;IAEtB,MAAM,SAAQ;IAEd,0BAA0B;IAE1B,UAAU,SAAY;IAEtB,4LAA4L;IAE5L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IA8Df,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,eAAe;IAUd,OAAO,CAAC,YAAY,EAAE,GAAG;CASnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,KAAK,CAAC;KACpB;CACF"}

package/components/reusable/modal/modal.js

@@ -0,0 +1,52 @@
+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 l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{query as i}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as a}from'./../../../external/lit-html/directives/class-map.js';import n from"./modal.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import d from'./../../../external/@carbon/icons/es/close/32.js';let r=class extends o{constructor(){super(...arguments),this.open=!1,this.size="auto",this.titleText="",this.labelText="",this.okText="OK",this.cancelText="Cancel"}render(){const e={modal:!0,"size--md":"md"===this.size,"size--lg":"lg"===this.size};return t`
+      <button class="anchor" @click=${this._openModal}>
+        <slot name="anchor"></slot>
+      </button>
+
+      <dialog
+        class="${a(e)}"
+        autofocus
+        aria-labelledby="dialogLabel"
+        @cancel=${e=>this._closeModal(e,"cancel")}
+      >
+        <button
+          class="close"
+          @click=${e=>this._closeModal(e,"cancel")}
+        >
+          <kd-icon .icon=${d}></kd-icon>
+        </button>
+
+        <header>
+          <div>
+            ${""!==this.labelText?t`<span class="label">${this.labelText}</span>`:null}
+            <h1 id="dialogLabel">${this.titleText}</h1>
+          </div>
+        </header>
+
+        <form method="dialog" class="body">
+          <slot></slot>
+
+          <div class="actions">
+            <kd-button
+              value="ok"
+              @click=${e=>this._closeModal(e,"ok")}
+            >
+              ${this.okText}
+            </kd-button>
+
+            <kd-button
+              value="cancel"
+              kind="secondary"
+              @click=${e=>this._closeModal(e,"cancel")}
+            >
+              ${this.cancelText}
+            </kd-button>
+
+            <div class="custom-actions">
+              <slot name="actions"></slot>
+            </div>
+          </div>
+        </form>
+      </dialog>
+    `}_openModal(){this.open=!0}_closeModal(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())}};r.styles=n,e([l({type:Boolean})],r.prototype,"open",void 0),e([l({type:String})],r.prototype,"size",void 0),e([l({type:String})],r.prototype,"titleText",void 0),e([l({type:String})],r.prototype,"labelText",void 0),e([l({type:String})],r.prototype,"okText",void 0),e([l({type:String})],r.prototype,"cancelText",void 0),e([l({attribute:!1})],r.prototype,"beforeClose",void 0),e([i("dialog")],r.prototype,"_dialog",void 0),r=e([s("kyn-modal")],r);export{r as Modal};
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { LitElement, html } 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 '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @slot actions - Slot for custom action buttons. Custom action buttons will not trigger the `on-close` event.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n  static override styles = ModalScss;\n\n  /** Modal open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Modal size. `'auto'`, `'md'`, or `'lg'`. */\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  /** 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  /** The dialog element\n   * @internal\n   */\n  @query('dialog')\n  _dialog!: any;\n\n  override render() {\n    const classes = {\n      modal: true,\n      'size--md': this.size === 'md',\n      'size--lg': this.size === 'lg',\n    };\n\n    return html`\n      <button class=\"anchor\" @click=${this._openModal}>\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._closeModal(e, 'cancel')}\n      >\n        <button\n          class=\"close\"\n          @click=${(e: Event) => this._closeModal(e, 'cancel')}\n        >\n          <kd-icon .icon=${closeIcon}></kd-icon>\n        </button>\n\n        <header>\n          <div>\n            ${this.labelText !== ''\n              ? html`<span class=\"label\">${this.labelText}</span>`\n              : null}\n            <h1 id=\"dialogLabel\">${this.titleText}</h1>\n          </div>\n        </header>\n\n        <form method=\"dialog\" class=\"body\">\n          <slot></slot>\n\n          <div class=\"actions\">\n            <kd-button\n              value=\"ok\"\n              @click=${(e: Event) => this._closeModal(e, 'ok')}\n            >\n              ${this.okText}\n            </kd-button>\n\n            <kd-button\n              value=\"cancel\"\n              kind=\"secondary\"\n              @click=${(e: Event) => this._closeModal(e, 'cancel')}\n            >\n              ${this.cancelText}\n            </kd-button>\n\n            <div class=\"custom-actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\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  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-modal': Modal;\n  }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","render","classes","modal","html","_openModal","classMap","e","_closeModal","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","ModalScss","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"m8BAkBO,IAAMA,EAAN,cAAoBC,EAApBC,kCAKLC,KAAIC,MAAG,EAIPD,KAAIE,KAAG,OAIPF,KAASG,UAAG,GAIZH,KAASI,UAAG,GAIZJ,KAAMK,OAAG,KAITL,KAAUM,WAAG,QA4Gd,CAhGUC,SACP,MAAMC,EAAU,CACdC,OAAO,EACP,WAA0B,OAAdT,KAAKE,KACjB,WAA0B,OAAdF,KAAKE,MAGnB,OAAOQ,CAAI;sCACuBV,KAAKW;;;;;iBAK1BC,EAASJ;;;kBAGPK,GAAab,KAAKc,YAAYD,EAAG;;;;mBAIhCA,GAAab,KAAKc,YAAYD,EAAG;;2BAE1BE;;;;;cAKM,KAAnBf,KAAKI,UACHM,CAAI,uBAAuBV,KAAKI,mBAChC;mCACmBJ,KAAKG;;;;;;;;;;uBAUhBU,GAAab,KAAKc,YAAYD,EAAG;;gBAEzCb,KAAKK;;;;;;uBAMGQ,GAAab,KAAKc,YAAYD,EAAG;;gBAEzCb,KAAKM;;;;;;;;;KAUlB,CAEOK,aACNX,KAAKC,MAAO,CACb,CAEOa,YAAYD,EAAUG,KAEzBhB,KAAKiB,aACLjB,KAAKiB,aAAejB,KAAKiB,YAAYD,MAEtChB,KAAKC,MAAO,EACZD,KAAKkB,QAAQF,YAAcA,EAC3BhB,KAAKmB,gBAAgBN,GAExB,CAEOM,gBAAgBN,GACtB,MAAMO,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNN,YAAahB,KAAKkB,QAAQF,YAC1BO,UAAWV,KAGfb,KAAKwB,cAAcJ,EACpB,CAEQK,QAAQC,GACXA,EAAaC,IAAI,UACf3B,KAAKC,KACPD,KAAKkB,QAAQU,YAEb5B,KAAKkB,QAAQW,QAGlB,GAnIehC,EAAMiC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACLtC,EAAAuC,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACJxC,EAAAuC,UAAA,YAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACHxC,EAAAuC,UAAA,iBAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACHxC,EAAAuC,UAAA,iBAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACJxC,EAAAuC,UAAA,cAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACIxC,EAAAuC,UAAA,kBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEK,WAAW,KACAzC,EAAAuC,UAAA,mBAAA,GAMvBJ,EAAA,CADCO,EAAM,WACO1C,EAAAuC,UAAA,eAAA,GAnCHvC,EAAKmC,EAAA,CADjBQ,EAAc,cACF3C"}