kemet-ui 2.0.3 → 3.0.1

package/dist/components/kemet-input/styles.js

@@ -1,18 +1,35 @@
 import { css } from 'lit';
 export const stylesBase = css `
   :host {
+    --kemet-input-height: 50px;
+    --kemet-input-padding: 0.5rem 1rem;
+    --kemet-input-border: 1px solid rgb(var(--kemet-color-foreground));
+    --kemet-input-border-color-error: 1px solid rgb(var(--kemet-color-error));
+    --kemet-input-border-color-success: 1px solid rgb(var(--kemet-color-success));
+    --kemet-input-border-color-warning: 1px solid rgb(var(--kemet-color-warning));
+    --kemet-input-icon-left-padding: 3rem;
+    --kemet-input-icon-right-padding: 3rem;
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);
+    --kemet-input-border-filled: none;
+    --kemet-input-color-filled: rgb(var(--kemet-color-white));
+    --kemet-input-background-color-filled: rgb(var(--kemet-color-primary));
+    --kemet-input-color-filled: rgb(var(--kemet-color-white));
+    --kemet-input-background-color-error: rgb(var(--kemet-color-error));
+    --kemet-input-background-color-success: rgb(var(--kemet-color-success));
+    --kemet-input-background-color-warning: rgb(var(--kemet-color-warning));
+
     position: relative;
     display: block;
   }
 
   input {
-    color: var(--kemet-color-text);
+    color: rgb(var(--kemet-color-text));
     display: block;
     font-size: 1rem;
     width: 100%;
-    height: var(--kemet-input-height, 50px);
-    padding: var(--kemet-input-padding, 0.5rem 1rem);
-    border: var(--kemet-input-border, 1px solid var(--kemet-color-background));
+    height: var(--kemet-input-height);
+    padding: var(--kemet-input-padding);
+    border: var(--kemet-input-border);
     appearance: none;
     box-sizing: border-box;
     background-color: transparent;
@@ -30,15 +47,15 @@ export const stylesBase = css `
   }
 
   :host([status='error']) input {
-    border: var(--kemet-input-border-color-error, 1px solid var(--kemet-color-error));
+    border: var(--kemet-input-border-color-error);
   }
 
   :host([status='success']) input {
-    border: var(--kemet-input-border-color-success, 1px solid var(--kemet-color-success));
+    border: var(--kemet-input-border-color-success);
   }
 
   :host([status='warning']) input {
-    border: var(--kemet-input-border-color-warning, 1px solid var(--kemet-color-warning));
+    border: var(--kemet-input-border-color-warning);
   }
 
   :host([disabled]) input {
@@ -46,42 +63,42 @@ export const stylesBase = css `
   }
 
   :host([icon-left]) input {
-    padding-left: var(--kemet-input-icon-left-padding, 3rem);
+    padding-left: var(--kemet-input-icon-left-padding);
   }
 
   :host([icon-right]) input {
-    padding-right: var(--kemet-input-icon-right-padding, 3rem);
+    padding-right: var(--kemet-input-icon-right-padding);
   }
 
   :host([rounded]) input {
-    border-radius: var(--kemet-input-border-radius-rounded, var(--kemet-border-radius));
+    border-radius: var(--kemet-input-border-radius-rounded);
   }
 
   :host([filled]) input {
-    border: var(--kemet-input-border-filled, none);
-    color: var(--kemet-input-color-filled, var(--kemet-color-white));
-    background-color: var(--kemet-input-background-color-filled, var(--kemet-color-primary));
+    border: var(--kemet-input-border-filled);
+    color: var(--kemet-input-color-filled);
+    background-color: var(--kemet-input-background-color-filled);
   }
 
   :host([filled]) kemet-icon,
   :host([filled]) input::placeholder {
-    color: var(--kemet-input-color-filled, var(--kemet-color-white));
+    color: var(--kemet-input-color-filled);
   }
 
   :host([status='error'][filled]) input {
-    background-color: var(--kemet-input-background-color-error, var(--kemet-color-error));
+    background-color: var(--kemet-input-background-color-error);
   }
 
   :host([status='success'][filled]) input {
-    background-color: var(--kemet-input-background-color-success, var(--kemet-color-success));
+    background-color: var(--kemet-input-background-color-success);
   }
 
   :host([status='warning'][filled]) input {
-    background-color: var(--kemet-input-background-color-warning, var(--kemet-color-warning));
+    background-color: var(--kemet-input-background-color-warning);
   }
 
   kemet-icon {
-    color: var(--kemet-color-text);
+    color: rgb(var(--kemet-color-text));
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -101,15 +118,15 @@ export const stylesBase = css `
   }
 
   :host([status='error']) kemet-icon {
-    color: var(--kemet-color-error);
+    color: rgb(var(--kemet-color-error));
   }
 
   :host([status='warning']) kemet-icon {
-    color: var(--kemet-color-error);
+    color: rgb(var(--kemet-color-error));
   }
 
   :host([status='success']) kemet-icon {
-    color: var(--kemet-color-success);
+    color: rgb(var(--kemet-color-success));
   }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/components/kemet-input/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgH5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    position: relative;\n    display: block;\n  }\n\n  input {\n    color: var(--kemet-color-text);\n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    height: var(--kemet-input-height, 50px);\n    padding: var(--kemet-input-padding, 0.5rem 1rem);\n    border: var(--kemet-input-border, 1px solid var(--kemet-color-background));\n    appearance: none;\n    box-sizing: border-box;\n    background-color: transparent;\n  }\n\n  input[type='color'] {\n    min-width: 10rem;\n  }\n\n  input[type='search']::-webkit-search-decoration,\n  input[type='search']::-webkit-search-cancel-button,\n  input[type='search']::-webkit-search-results-button,\n  input[type='search']::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  :host([status='error']) input {\n    border: var(--kemet-input-border-color-error, 1px solid var(--kemet-color-error));\n  }\n\n  :host([status='success']) input {\n    border: var(--kemet-input-border-color-success, 1px solid var(--kemet-color-success));\n  }\n\n  :host([status='warning']) input {\n    border: var(--kemet-input-border-color-warning, 1px solid var(--kemet-color-warning));\n  }\n\n  :host([disabled]) input {\n    opacity: 0.5;\n  }\n\n  :host([icon-left]) input {\n    padding-left: var(--kemet-input-icon-left-padding, 3rem);\n  }\n\n  :host([icon-right]) input {\n    padding-right: var(--kemet-input-icon-right-padding, 3rem);\n  }\n\n  :host([rounded]) input {\n    border-radius: var(--kemet-input-border-radius-rounded, var(--kemet-border-radius));\n  }\n\n  :host([filled]) input {\n    border: var(--kemet-input-border-filled, none);\n    color: var(--kemet-input-color-filled, var(--kemet-color-white));\n    background-color: var(--kemet-input-background-color-filled, var(--kemet-color-primary));\n  }\n\n  :host([filled]) kemet-icon,\n  :host([filled]) input::placeholder {\n    color: var(--kemet-input-color-filled, var(--kemet-color-white));\n  }\n\n  :host([status='error'][filled]) input {\n    background-color: var(--kemet-input-background-color-error, var(--kemet-color-error));\n  }\n\n  :host([status='success'][filled]) input {\n    background-color: var(--kemet-input-background-color-success, var(--kemet-color-success));\n  }\n\n  :host([status='warning'][filled]) input {\n    background-color: var(--kemet-input-background-color-warning, var(--kemet-color-warning));\n  }\n\n  kemet-icon {\n    color: var(--kemet-color-text);\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  kemet-icon.left {\n    left: 1rem;\n  }\n\n  kemet-icon.right {\n    right: 1rem;\n  }\n\n  kemet-icon.eye,\n  kemet-icon.search {\n    cursor: pointer;\n  }\n\n  :host([status='error']) kemet-icon {\n    color: var(--kemet-color-error);\n  }\n\n  :host([status='warning']) kemet-icon {\n    color: var(--kemet-color-error);\n  }\n\n  :host([status='success']) kemet-icon {\n    color: var(--kemet-color-success);\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiI5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-input-height: 50px;\n    --kemet-input-padding: 0.5rem 1rem;\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-input-border-color-error: 1px solid rgb(var(--kemet-color-error));\n    --kemet-input-border-color-success: 1px solid rgb(var(--kemet-color-success));\n    --kemet-input-border-color-warning: 1px solid rgb(var(--kemet-color-warning));\n    --kemet-input-icon-left-padding: 3rem;\n    --kemet-input-icon-right-padding: 3rem;\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);\n    --kemet-input-border-filled: none;\n    --kemet-input-color-filled: rgb(var(--kemet-color-white));\n    --kemet-input-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-input-color-filled: rgb(var(--kemet-color-white));\n    --kemet-input-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-input-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-input-background-color-warning: rgb(var(--kemet-color-warning));\n\n    position: relative;\n    display: block;\n  }\n\n  input {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    height: var(--kemet-input-height);\n    padding: var(--kemet-input-padding);\n    border: var(--kemet-input-border);\n    appearance: none;\n    box-sizing: border-box;\n    background-color: transparent;\n  }\n\n  input[type='color'] {\n    min-width: 10rem;\n  }\n\n  input[type='search']::-webkit-search-decoration,\n  input[type='search']::-webkit-search-cancel-button,\n  input[type='search']::-webkit-search-results-button,\n  input[type='search']::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  :host([status='error']) input {\n    border: var(--kemet-input-border-color-error);\n  }\n\n  :host([status='success']) input {\n    border: var(--kemet-input-border-color-success);\n  }\n\n  :host([status='warning']) input {\n    border: var(--kemet-input-border-color-warning);\n  }\n\n  :host([disabled]) input {\n    opacity: 0.5;\n  }\n\n  :host([icon-left]) input {\n    padding-left: var(--kemet-input-icon-left-padding);\n  }\n\n  :host([icon-right]) input {\n    padding-right: var(--kemet-input-icon-right-padding);\n  }\n\n  :host([rounded]) input {\n    border-radius: var(--kemet-input-border-radius-rounded);\n  }\n\n  :host([filled]) input {\n    border: var(--kemet-input-border-filled);\n    color: var(--kemet-input-color-filled);\n    background-color: var(--kemet-input-background-color-filled);\n  }\n\n  :host([filled]) kemet-icon,\n  :host([filled]) input::placeholder {\n    color: var(--kemet-input-color-filled);\n  }\n\n  :host([status='error'][filled]) input {\n    background-color: var(--kemet-input-background-color-error);\n  }\n\n  :host([status='success'][filled]) input {\n    background-color: var(--kemet-input-background-color-success);\n  }\n\n  :host([status='warning'][filled]) input {\n    background-color: var(--kemet-input-background-color-warning);\n  }\n\n  kemet-icon {\n    color: rgb(var(--kemet-color-text));\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  kemet-icon.left {\n    left: 1rem;\n  }\n\n  kemet-icon.right {\n    right: 1rem;\n  }\n\n  kemet-icon.eye,\n  kemet-icon.search {\n    cursor: pointer;\n  }\n\n  :host([status='error']) kemet-icon {\n    color: rgb(var(--kemet-color-error));\n  }\n\n  :host([status='warning']) kemet-icon {\n    color: rgb(var(--kemet-color-error));\n  }\n\n  :host([status='success']) kemet-icon {\n    color: rgb(var(--kemet-color-success));\n  }\n`;\n"]}

package/dist/components/kemet-modal/docs/stories.d.ts

@@ -4,7 +4,9 @@ import '../kemet-modal-close';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
+import '../../kemet-button/kemet-button';
 declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const Standard: Story;
+export declare const Rounded: Story;

package/dist/components/kemet-modal/docs/stories.js

@@ -1,15 +1,26 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../kemet-modal';
 import '../kemet-modal-close';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
+import '../../kemet-button/kemet-button';
 const meta = {
     title: 'Components / Modal',
     component: 'kemet-modal',
+    args: {
+        displayCloseBtn: true,
+    },
+    argTypes: {
+        effect: {
+            control: { type: 'select' },
+            options: ['fadein-scaleup', 'slide-right', 'slide-bottom', 'newspaper', 'fall', 'side-fall', 'flip-horizontal', 'flip-vertical', 'sign-3d', 'super-scaled', 'slit', 'rotate-bottom', 'rotate-left'],
+        },
+    },
 };
 export default meta;
-const Template = ({ displayCloseBtn = true, minWidth = '0', maxWidth = 'none', overlayColor = 'rgba(0,0,0,0.2)', transitionSpeed = '0.3s', opened = false, effect = 'fall', closeOnClick = false, }) => {
+const Template = (args) => {
     const openModal = () => {
         const modal = document.querySelector('kemet-modal');
         modal.opened = true;
@@ -17,85 +28,31 @@ const Template = ({ displayCloseBtn = true, minWidth = '0', maxWidth = 'none', o
     const makeCloseBtn = (display) => {
         if (display) {
             return html `
-        <kemet-modal-close tabindex="0" role="button" aria-label="Close Button">
-          <kemet-icon icon="x-circle" size="24"></kemet-icon>
+        <kemet-modal-close tabindex="0" role="button" aria-label="Close Button" style="display:flex;">
+          <kemet-icon icon="x-circle" size="24" kemet-background-color="white" kemet-border-radius="circle"></kemet-icon>
         </kemet-modal-close>
       `;
         }
         return null;
     };
-    const temp = html `
-    <style>
-      kemet-modal {
-        --kemet-modal-min-width: ${minWidth};
-        --kemet-modal-max-width: ${maxWidth};
-        --kemet-modal-overlay-background-color: ${overlayColor};
-        --kemet-modal-transition-speed: ${transitionSpeed};
-      }
-    </style>
+    return html `
     <kemet-button @click="${() => openModal()}">Open Modal</kemet-button>
-    <kemet-modal ?opened=${opened} effect="${effect}" ?close-on-click="${closeOnClick}">
-      <div kemet-elevation="layer5" kemet-padding="tiny:normal">
-        ${makeCloseBtn(displayCloseBtn)}
-        <h2 kemet-margin="tiny:none">Modal Title</h2>
-        <p>Your modal contents <a href="http://google.com">here</a>.</p>
+    <kemet-modal ?opened=${args.opened} ?rounded=${args.rounded} effect="${ifDefined(args.effect)}" ?close-on-click="${args.closeOnClick}">
+      <div kemet-padding="xl">
+        ${makeCloseBtn(args.displayCloseBtn)}
+        <h2 kemet-margin="none">Modal Title</h2>
+        <p>Your modal contents <a href="http://google.com" kemet-color="primary"><strong>here</strong></a>.</p>
       </div>
     </kemet-modal>
   `;
-    return temp;
 };
 export const Standard = {
     render: (args) => Template(args),
-    argTypes: {
-        displayCloseBtn: {
-            control: { type: 'boolean' },
-        },
-        minWidth: {
-            control: { type: 'text' },
-        },
-        maxWidth: {
-            control: { type: 'text' },
-        },
-        overlayColor: {
-            control: { type: 'color' },
-        },
-        transitionSpeed: {
-            control: { type: 'text' },
-        },
-        opened: {
-            control: { type: 'boolean' },
-        },
-        effect: {
-            control: { type: 'select' },
-            options: [
-                'fadein-scaleup',
-                'slide-right',
-                'slide-bottom',
-                'newspaper',
-                'fall',
-                'side-fall',
-                'flip-horizontal',
-                'flip-vertical',
-                'sign-3d',
-                'super-scaled',
-                'slit',
-                'rotate-bottom',
-                'rotate-left',
-            ],
-        },
-        closeOnClick: {
-            control: { type: 'boolean' },
-        },
-    },
+};
+export const Rounded = {
+    render: (args) => Template(args),
     args: {
-        displayCloseBtn: true,
-        minWidth: '0',
-        maxWidth: 'none',
-        overlayColor: 'rgba(0,0,0,0.2)',
-        transitionSpeed: '0.3s',
-        opened: false,
-        effect: 'fall',
-        closeOnClick: false,
-    },
+        rounded: true
+    }
 };
 //# sourceMappingURL=stories.js.map

package/dist/components/kemet-modal/docs/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,eAAe,GAAG,IAAI,EACtB,QAAQ,GAAG,GAAG,EACd,QAAQ,GAAG,MAAM,EACjB,YAAY,GAAG,iBAAiB,EAChC,eAAe,GAAG,MAAM,EACxB,MAAM,GAAG,KAAK,EACd,MAAM,GAAG,MAAM,EACf,YAAY,GAAG,KAAK,GACrB,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACpD,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE;QAC/B,IAAI,OAAO,EAAE;YACX,OAAO,IAAI,CAAA;;;;OAIV,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG,IAAI,CAAA;;;mCAGgB,QAAQ;mCACR,QAAQ;kDACO,YAAY;0CACpB,eAAe;;;4BAG7B,GAAG,EAAE,CAAC,SAAS,EAAE;2BAClB,MAAM,YAAY,MAAM,sBAAsB,YAAY;;UAE3E,YAAY,CAAC,eAAe,CAAC;;;;;GAKpC,CAAC;IAEF,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAEhC,QAAQ,EAAE;QACR,eAAe,EAAE;YACf,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,eAAe,EAAE;YACf,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE;gBACP,gBAAgB;gBAChB,aAAa;gBACb,cAAc;gBACd,WAAW;gBACX,MAAM;gBACN,WAAW;gBACX,iBAAiB;gBACjB,eAAe;gBACf,SAAS;gBACT,cAAc;gBACd,MAAM;gBACN,eAAe;gBACf,aAAa;aACd;SACF;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;KACF;IAED,IAAI,EAAE;QACJ,eAAe,EAAE,IAAI;QACrB,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,MAAM;QAChB,YAAY,EAAE,iBAAiB;QAC/B,eAAe,EAAE,MAAM;QACvB,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;KACpB;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-modal';\nimport '../kemet-modal-close';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Modal',\n  component: 'kemet-modal',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  displayCloseBtn = true,\n  minWidth = '0',\n  maxWidth = 'none',\n  overlayColor = 'rgba(0,0,0,0.2)',\n  transitionSpeed = '0.3s',\n  opened = false,\n  effect = 'fall',\n  closeOnClick = false,\n}) => {\n  const openModal = () => {\n    const modal = document.querySelector('kemet-modal');\n    modal.opened = true;\n  };\n\n  const makeCloseBtn = (display) => {\n    if (display) {\n      return html`\n        <kemet-modal-close tabindex=\"0\" role=\"button\" aria-label=\"Close Button\">\n          <kemet-icon icon=\"x-circle\" size=\"24\"></kemet-icon>\n        </kemet-modal-close>\n      `;\n    }\n\n    return null;\n  };\n\n  const temp = html`\n    <style>\n      kemet-modal {\n        --kemet-modal-min-width: ${minWidth};\n        --kemet-modal-max-width: ${maxWidth};\n        --kemet-modal-overlay-background-color: ${overlayColor};\n        --kemet-modal-transition-speed: ${transitionSpeed};\n      }\n    </style>\n    <kemet-button @click=\"${() => openModal()}\">Open Modal</kemet-button>\n    <kemet-modal ?opened=${opened} effect=\"${effect}\" ?close-on-click=\"${closeOnClick}\">\n      <div kemet-elevation=\"layer5\" kemet-padding=\"tiny:normal\">\n        ${makeCloseBtn(displayCloseBtn)}\n        <h2 kemet-margin=\"tiny:none\">Modal Title</h2>\n        <p>Your modal contents <a href=\"http://google.com\">here</a>.</p>\n      </div>\n    </kemet-modal>\n  `;\n\n  return temp;\n};\n\nexport const Standard: Story = {\n  render: (args) => Template(args),\n\n  argTypes: {\n    displayCloseBtn: {\n      control: { type: 'boolean' },\n    },\n    minWidth: {\n      control: { type: 'text' },\n    },\n    maxWidth: {\n      control: { type: 'text' },\n    },\n    overlayColor: {\n      control: { type: 'color' },\n    },\n    transitionSpeed: {\n      control: { type: 'text' },\n    },\n    opened: {\n      control: { type: 'boolean' },\n    },\n    effect: {\n      control: { type: 'select' },\n      options: [\n        'fadein-scaleup',\n        'slide-right',\n        'slide-bottom',\n        'newspaper',\n        'fall',\n        'side-fall',\n        'flip-horizontal',\n        'flip-vertical',\n        'sign-3d',\n        'super-scaled',\n        'slit',\n        'rotate-bottom',\n        'rotate-left',\n      ],\n    },\n    closeOnClick: {\n      control: { type: 'boolean' },\n    },\n  },\n\n  args: {\n    displayCloseBtn: true,\n    minWidth: '0',\n    maxWidth: 'none',\n    overlayColor: 'rgba(0,0,0,0.2)',\n    transitionSpeed: '0.3s',\n    opened: false,\n    effect: 'fall',\n    closeOnClick: false,\n  },\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAIxD,OAAO,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC;AAEzC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE;QACJ,eAAe,EAAE,IAAI;KACtB;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,gBAAgB,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,aAAa,CAAC;SACpM;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACpD,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE;QAC/B,IAAI,OAAO,EAAE;YACX,OAAO,IAAI,CAAA;;;;OAIV,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;4BACe,GAAG,EAAE,CAAC,SAAS,EAAE;2BAClB,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,OAAO,YAAY,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,sBAAsB,IAAI,CAAC,YAAY;;UAE9H,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;GAKzC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAChC,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport { TypeEffect } from '../types';\n\nimport '../kemet-modal';\nimport '../kemet-modal-close';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\nimport '../../kemet-button/kemet-button';\n\nconst meta: Meta = {\n  title: 'Components / Modal',\n  component: 'kemet-modal',\n  args: {\n    displayCloseBtn: true,\n  },\n  argTypes: {\n    effect: {\n      control: { type: 'select' },\n      options: ['fadein-scaleup', 'slide-right', 'slide-bottom', 'newspaper', 'fall', 'side-fall', 'flip-horizontal', 'flip-vertical', 'sign-3d', 'super-scaled', 'slit', 'rotate-bottom', 'rotate-left'],\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const openModal = () => {\n    const modal = document.querySelector('kemet-modal');\n    modal.opened = true;\n  };\n\n  const makeCloseBtn = (display) => {\n    if (display) {\n      return html`\n        <kemet-modal-close tabindex=\"0\" role=\"button\" aria-label=\"Close Button\" style=\"display:flex;\">\n          <kemet-icon icon=\"x-circle\" size=\"24\" kemet-background-color=\"white\" kemet-border-radius=\"circle\"></kemet-icon>\n        </kemet-modal-close>\n      `;\n    }\n\n    return null;\n  };\n\n  return html`\n    <kemet-button @click=\"${() => openModal()}\">Open Modal</kemet-button>\n    <kemet-modal ?opened=${args.opened} ?rounded=${args.rounded} effect=\"${ifDefined(args.effect)}\" ?close-on-click=\"${args.closeOnClick}\">\n      <div kemet-padding=\"xl\">\n        ${makeCloseBtn(args.displayCloseBtn)}\n        <h2 kemet-margin=\"none\">Modal Title</h2>\n        <p>Your modal contents <a href=\"http://google.com\" kemet-color=\"primary\"><strong>here</strong></a>.</p>\n      </div>\n    </kemet-modal>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args) => Template(args),\n};\n\nexport const Rounded: Story = {\n  render: (args) => Template(args),\n  args: {\n    rounded: true\n  }\n};\n"]}

package/dist/components/kemet-modal/kemet-modal-close.js

@@ -28,7 +28,7 @@ KemetModalClose.styles = [
         position: absolute;
         top: 0.5rem;
         right: 0.5rem;
-        border-radius: 50%;
+        border-radius: var(--kemet-border-radius-circle);
         cursor: pointer;
       }
     `,

package/dist/components/kemet-modal/kemet-modal-close.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-modal-close.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/kemet-modal-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;GASG;AAGH,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,UAAU;IAarD,MAAM;QACJ,OAAO,IAAI,CAAA;qBACM,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;KAC/D,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,2BAA2B,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAA;AArBQ,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,CAAC;AAXiB,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CAsBnC;eAtBoB,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal-close\n * @summary A close button for a modal.\n *\n * @event kemet-modal-close-pressed - Fires when the close button is pressed\n *\n */\n\n@customElement('kemet-modal-close')\nexport default class KemetModalClose extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        border-radius: 50%;\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-modal-close-pressed', this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal-close': KemetModalClose\n  }\n}\n"]}
+{"version":3,"file":"kemet-modal-close.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/kemet-modal-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;GASG;AAGH,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,UAAU;IAarD,MAAM;QACJ,OAAO,IAAI,CAAA;qBACM,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;KAC/D,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,2BAA2B,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAA;AArBQ,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,CAAC;AAXiB,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CAsBnC;eAtBoB,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal-close\n * @summary A close button for a modal.\n *\n * @event kemet-modal-close-pressed - Fires when the close button is pressed\n *\n */\n\n@customElement('kemet-modal-close')\nexport default class KemetModalClose extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        border-radius: var(--kemet-border-radius-circle);\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-modal-close-pressed', this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal-close': KemetModalClose\n  }\n}\n"]}

package/dist/components/kemet-modal/kemet-modal.d.ts

@@ -5,7 +5,7 @@ import { TypeEffect } from './types';
  * @status stable
  *
  * @tagname kemet-modal
- * @summary A dialog that has many built in effects and flexible styles.
+ * @summary A dialog that has many built-in effects and flexible styles.
  *
  * @prop {boolean} opened
  * @prop {string} effect
@@ -13,14 +13,17 @@ import { TypeEffect } from './types';
  * @prop {string} breakpoint
  * @prop {boolean} mobile
  *
- * @csspart content - The main contents of the modal.
+ * @csspart dialog - The main contents of the modal.
  * @csspart overlay - The surrounding scrim of the modal.
  *
- * @cssproperty --kemet-modal-content-min-width - The minimum width of the content. Default: 0.
- * @cssproperty --kemet-modal-content-max-width - The maximum width of the content. Default: none.
- * @cssproperty --kemet-modal-content-background-color - The background color of the content. Default: --kemet-color-white.
- * @cssproperty --kemet-modal-content-mobile-min-width - The min with of the mobile content. Default: 100%.
- * @cssproperty --kemet-modal-content-mobile-min-height - The min height of the mobile content. Default: 80vh.
+ * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners
+ * @cssproperty --kemet-modal-dialog-min-width - The minimum width of the dialog.
+ * @cssproperty --kemet-modal-dialog-max-width - The maximum width of the dialog.
+ * @cssproperty --kemet-modal-dialog-background-color - The background color of the dialog.
+ * @cssproperty --kemet-modal-dialog-mobile-width - The width of the mobile dialog.
+ * @cssproperty --kemet-modal-dialog-mobile-margin - The margins of the mobile dialog.
+ * @cssproperty --kemet-modal-dialog-mobile-padding - The padding of the mobile dialog.
+ * @cssproperty --kemet-modal-overlay-background-color - The color of the backdrop overlay.
  *
  * @event kemet-modal-opened - Fires when the modal opens
  * @event kemet-modal-closed - Fires when the modal closes
@@ -33,14 +36,21 @@ export default class KemetModal extends LitElement {
     closeOnClick: boolean;
     breakpoint: string;
     mobile: boolean;
+    rounded: boolean;
+    /** @internal */
+    dialogElement: HTMLDialogElement;
+    /** @internal */
     focusableSelector: string;
-    focusableElements: any;
+    /** @internal */
+    focusableElements: NodeListOf<Element>;
     constructor();
     firstUpdated(): void;
-    updated(prevProps: any): void;
+    updated(prevProps: Map<string, never>): void;
     render(): import("lit-html").TemplateResult<1>;
     isMobile(): void;
-    handleFocusableDown(event: any): void;
+    handleOpen(): void;
+    handleClose(): void;
+    handleFocusableDown(event: KeyboardEvent): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/kemet-modal/kemet-modal.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state, } from 'lit/decorators.js';
 import { stylesBase, stylesEffects } from './styles';
 import { emitEvent } from '../../utilities/misc/events';
 /**
@@ -8,7 +8,7 @@ import { emitEvent } from '../../utilities/misc/events';
  * @status stable
  *
  * @tagname kemet-modal
- * @summary A dialog that has many built in effects and flexible styles.
+ * @summary A dialog that has many built-in effects and flexible styles.
  *
  * @prop {boolean} opened
  * @prop {string} effect
@@ -16,14 +16,17 @@ import { emitEvent } from '../../utilities/misc/events';
  * @prop {string} breakpoint
  * @prop {boolean} mobile
  *
- * @csspart content - The main contents of the modal.
+ * @csspart dialog - The main contents of the modal.
  * @csspart overlay - The surrounding scrim of the modal.
  *
- * @cssproperty --kemet-modal-content-min-width - The minimum width of the content. Default: 0.
- * @cssproperty --kemet-modal-content-max-width - The maximum width of the content. Default: none.
- * @cssproperty --kemet-modal-content-background-color - The background color of the content. Default: --kemet-color-white.
- * @cssproperty --kemet-modal-content-mobile-min-width - The min with of the mobile content. Default: 100%.
- * @cssproperty --kemet-modal-content-mobile-min-height - The min height of the mobile content. Default: 80vh.
+ * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners
+ * @cssproperty --kemet-modal-dialog-min-width - The minimum width of the dialog.
+ * @cssproperty --kemet-modal-dialog-max-width - The maximum width of the dialog.
+ * @cssproperty --kemet-modal-dialog-background-color - The background color of the dialog.
+ * @cssproperty --kemet-modal-dialog-mobile-width - The width of the mobile dialog.
+ * @cssproperty --kemet-modal-dialog-mobile-margin - The margins of the mobile dialog.
+ * @cssproperty --kemet-modal-dialog-mobile-padding - The padding of the mobile dialog.
+ * @cssproperty --kemet-modal-overlay-background-color - The color of the backdrop overlay.
  *
  * @event kemet-modal-opened - Fires when the modal opens
  * @event kemet-modal-closed - Fires when the modal closes
@@ -36,7 +39,7 @@ let KemetModal = class KemetModal extends LitElement {
         this.closeOnClick = false;
         this.breakpoint = '600px';
         // bindings
-        this.addEventListener('kemet-modal-close-pressed', () => { this.opened = false; });
+        this.addEventListener('kemet-modal-close-pressed', () => { this.handleClose(); });
     }
     firstUpdated() {
         // standard properties
@@ -46,40 +49,36 @@ let KemetModal = class KemetModal extends LitElement {
         // events
         this.addEventListener('keyup', (event) => {
             if (event.key === 'Escape') {
-                this.opened = false;
+                this.handleClose();
             }
         });
         this.addEventListener('click', (event) => {
             const targetElement = event.target;
             if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-modal') {
-                this.opened = false;
+                this.handleClose();
             }
         });
         window.addEventListener('resize', () => {
             this.isMobile();
         });
         this.focusableElements.forEach((element) => {
-            element.addEventListener('keydown', event => this.handleFocusableDown(event));
+            element.addEventListener('keydown', (event) => this.handleFocusableDown(event));
         });
     }
     updated(prevProps) {
         if (!prevProps.get('opened') && this.opened === true) {
-            setTimeout(() => {
-                var _a;
-                (_a = this.focusableElements[0]) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 100);
-            emitEvent(this, 'kemet-modal-opened', this);
+            this.handleOpen();
         }
         if (prevProps.get('opened') && this.opened === false) {
-            emitEvent(this, 'kemet-modal-closed', this);
+            this.handleClose();
         }
         this.isMobile();
     }
     render() {
         return html `
-      <div class="content" part="content">
+      <dialog part="dialog" @close=${() => this.handleClose()}>
         <slot></slot>
-      </div>
+      </dialog>
       <div class="overlay" part="overlay"></div>
     `;
     }
@@ -87,6 +86,20 @@ let KemetModal = class KemetModal extends LitElement {
         const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
         this.mobile = mediaQuery.matches;
     }
+    handleOpen() {
+        var _a;
+        this.opened = true;
+        if ((_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal)
+            this.dialogElement.showModal();
+        emitEvent(this, 'kemet-modal-opened', this);
+    }
+    handleClose() {
+        var _a;
+        this.opened = false;
+        if ((_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close)
+            this.dialogElement.close();
+        emitEvent(this, 'kemet-modal-closed', this);
+    }
     handleFocusableDown(event) {
         const firstFocusable = this.focusableElements[0];
         const lastFocusable = this.focusableElements[this.focusableElements.length - 1];
@@ -118,6 +131,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], KemetModal.prototype, "mobile", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetModal.prototype, "rounded", void 0);
+__decorate([
+    query('dialog')
+], KemetModal.prototype, "dialogElement", void 0);
 __decorate([
     state()
 ], KemetModal.prototype, "focusableSelector", void 0);

package/dist/components/kemet-modal/kemet-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-modal.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/kemet-modal.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAGxD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAGH,IAAqB,UAAU,GAA/B,MAAqB,UAAW,SAAQ,UAAU;IAwBhD;QACE,KAAK,EAAE,CAAC;QArBV,WAAM,GAAY,KAAK,CAAC;QAMxB,iBAAY,GAAY,KAAK,CAAC;QAG9B,eAAU,GAAW,OAAO,CAAC;QAc3B,WAAW;QACX,IAAI,CAAC,gBAAgB,CAAC,2BAA2B,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACrF,CAAC;IAED,YAAY;QACV,sBAAsB;QACtB,gBAAgB;QAChB,IAAI,CAAC,iBAAiB,GAAG,oLAAoL,CAAC;QAC9M,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAEvE,SAAS;QACT,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACvC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBAC1B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACrB;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACvC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAqB,CAAC;YAClD,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,IAAI,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,EAAE;gBAC7F,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACrB;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACzC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC;QAChF,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CAAC,SAAS;QACf,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;YACpD,UAAU,CAAC,GAAG,EAAE;;gBACd,MAAA,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;YACrC,CAAC,EAAE,GAAG,CAAC,CAAC;YAER,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;SAC7C;QAED,IAAI,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;YACpD,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;SAC7C;QAED,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;KAKV,CAAC;IACJ,CAAC;IAED,QAAQ;QACN,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;QACxE,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC;IACnC,CAAC;IAED,mBAAmB,CAAC,KAAK;QACvB,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACjD,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAEhF,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACvB,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,cAAc,EAAE;gBAC/D,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,aAAa,CAAC,KAAK,EAAE,CAAC;aACvB;iBAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,aAAa,EAAE;gBACtE,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,cAAc,CAAC,KAAK,EAAE,CAAC;aACxB;SACF;IACH,CAAC;CACF,CAAA;AAvGQ,iBAAM,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;AAG5C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACnB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACvB;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;gDAC3B;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACE;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAGhB;IADC,KAAK,EAAE;qDACkB;AAG1B;IADC,KAAK,EAAE;qDACe;AAtBJ,UAAU;IAD9B,aAAa,CAAC,aAAa,CAAC;GACR,UAAU,CAwG9B;eAxGoB,UAAU","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase, stylesEffects } from './styles';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { TypeEffect } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal\n * @summary A dialog that has many built in effects and flexible styles.\n *\n * @prop {boolean} opened\n * @prop {string} effect\n * @prop {boolean} closeOnClick\n * @prop {string} breakpoint\n * @prop {boolean} mobile\n *\n * @csspart content - The main contents of the modal.\n * @csspart overlay - The surrounding scrim of the modal.\n *\n * @cssproperty --kemet-modal-content-min-width - The minimum width of the content. Default: 0.\n * @cssproperty --kemet-modal-content-max-width - The maximum width of the content. Default: none.\n * @cssproperty --kemet-modal-content-background-color - The background color of the content. Default: --kemet-color-white.\n * @cssproperty --kemet-modal-content-mobile-min-width - The min with of the mobile content. Default: 100%.\n * @cssproperty --kemet-modal-content-mobile-min-height - The min height of the mobile content. Default: 80vh.\n *\n * @event kemet-modal-opened - Fires when the modal opens\n * @event kemet-modal-closed - Fires when the modal closes\n *\n */\n\n@customElement('kemet-modal')\nexport default class KemetModal extends LitElement {\n  static styles = [stylesBase, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = false;\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect;\n\n  @property({ type: Boolean, attribute: 'close-on-click' })\n  closeOnClick: boolean = false;\n\n  @property({ type: String })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true })\n  mobile: boolean;\n\n  @state()\n  focusableSelector: string;\n\n  @state()\n  focusableElements: any;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-modal-close-pressed', () => { this.opened = false; });\n  }\n\n  firstUpdated() {\n    // standard properties\n    /** @internal */\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.focusableElements = this.querySelectorAll(this.focusableSelector);\n\n    // events\n    this.addEventListener('keyup', (event) => {\n      if (event.key === 'Escape') {\n        this.opened = false;\n      }\n    });\n\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-modal') {\n        this.opened = false;\n      }\n    });\n\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    this.focusableElements.forEach((element) => {\n      element.addEventListener('keydown', event => this.handleFocusableDown(event));\n    });\n  }\n\n  updated(prevProps) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      setTimeout(() => {\n        this.focusableElements[0]?.focus();\n      }, 100);\n\n      emitEvent(this, 'kemet-modal-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-modal-closed', this);\n    }\n\n    this.isMobile();\n  }\n\n  render() {\n    return html`\n      <div class=\"content\" part=\"content\">\n        <slot></slot>\n      </div>\n      <div class=\"overlay\" part=\"overlay\"></div>\n    `;\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  handleFocusableDown(event) {\n    const firstFocusable = this.focusableElements[0];\n    const lastFocusable = this.focusableElements[this.focusableElements.length - 1];\n\n    if (event.key === 'Tab') {\n      if (event.shiftKey && document.activeElement === firstFocusable) {\n        event.preventDefault();\n        lastFocusable.focus();\n      } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n        event.preventDefault();\n        firstFocusable.focus();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal': KemetModal\n  }\n}\n"]}
+{"version":3,"file":"kemet-modal.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/kemet-modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { stylesBase, stylesEffects } from './styles';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { TypeEffect } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal\n * @summary A dialog that has many built-in effects and flexible styles.\n *\n * @prop {boolean} opened\n * @prop {string} effect\n * @prop {boolean} closeOnClick\n * @prop {string} breakpoint\n * @prop {boolean} mobile\n *\n * @csspart dialog - The main contents of the modal.\n * @csspart overlay - The surrounding scrim of the modal.\n *\n * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners\n * @cssproperty --kemet-modal-dialog-min-width - The minimum width of the dialog.\n * @cssproperty --kemet-modal-dialog-max-width - The maximum width of the dialog.\n * @cssproperty --kemet-modal-dialog-background-color - The background color of the dialog.\n * @cssproperty --kemet-modal-dialog-mobile-width - The width of the mobile dialog.\n * @cssproperty --kemet-modal-dialog-mobile-margin - The margins of the mobile dialog.\n * @cssproperty --kemet-modal-dialog-mobile-padding - The padding of the mobile dialog.\n * @cssproperty --kemet-modal-overlay-background-color - The color of the backdrop overlay.\n *\n * @event kemet-modal-opened - Fires when the modal opens\n * @event kemet-modal-closed - Fires when the modal closes\n *\n */\n\n@customElement('kemet-modal')\nexport default class KemetModal extends LitElement {\n  static styles = [stylesBase, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = false;\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect;\n\n  @property({ type: Boolean, attribute: 'close-on-click' })\n  closeOnClick: boolean = false;\n\n  @property({ type: String })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true })\n  mobile: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean;\n\n  /** @internal */\n  @query('dialog')\n  dialogElement: HTMLDialogElement;\n\n  /** @internal */\n  @state()\n  focusableSelector: string;\n\n  /** @internal */\n  @state()\n  focusableElements: NodeListOf<Element>;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-modal-close-pressed', () => { this.handleClose(); });\n  }\n\n  firstUpdated() {\n    // standard properties\n    /** @internal */\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.focusableElements = this.querySelectorAll(this.focusableSelector);\n\n    // events\n    this.addEventListener('keyup', (event) => {\n      if (event.key === 'Escape') {\n        this.handleClose();\n      }\n    });\n\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-modal') {\n        this.handleClose();\n      }\n    });\n\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    this.focusableElements.forEach((element) => {\n      element.addEventListener('keydown', (event: KeyboardEvent) => this.handleFocusableDown(event));\n    });\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.handleOpen();\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.handleClose();\n    }\n\n    this.isMobile();\n  }\n\n  render() {\n    return html`\n      <dialog part=\"dialog\" @close=${() => this.handleClose()}>\n        <slot></slot>\n      </dialog>\n      <div class=\"overlay\" part=\"overlay\"></div>\n    `;\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  handleOpen() {\n    this.opened = true;\n    if (this.dialogElement?.showModal) this.dialogElement.showModal();\n    emitEvent(this, 'kemet-modal-opened', this);\n  }\n\n  handleClose() {\n    this.opened = false;\n    if (this.dialogElement?.close) this.dialogElement.close();\n    emitEvent(this, 'kemet-modal-closed', this);\n  }\n\n  handleFocusableDown(event: KeyboardEvent) {\n    const firstFocusable = this.focusableElements[0] as HTMLElement;\n    const lastFocusable = this.focusableElements[this.focusableElements.length - 1] as HTMLElement;\n\n    if (event.key === 'Tab') {\n      if (event.shiftKey && document.activeElement === firstFocusable) {\n        event.preventDefault();\n        lastFocusable.focus();\n      } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n        event.preventDefault();\n        firstFocusable.focus();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal': KemetModal\n  }\n}\n"]}