kemet-ui 2.0.3 → 3.0.1

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

@@ -7,6 +7,16 @@ export const stylesBase = css `
   }
 
   :host {
+    --kemet-modal-radius: var(--kemet-border-radius-xl);
+    --kemet-modal-transition-speed: 0.3s;
+    --kemet-modal-dialog-min-width: 0;
+    --kemet-modal-dialog-max-width: none;
+    --kemet-modal-dialog-mobile-width: calc(100% - 2rem);
+    --kemet-modal-dialog-mobile-margin: 0 auto;
+    --kemet-modal-dialog-mobile-padding: 1rem;
+    --kemet-modal-dialog-background-color: rgb(var(--kemet-color-white));
+    --kemet-modal-overlay-background-color: rgb(var(--kemet-color-black) / 20%);
+
     position: fixed;
     display: flex;
     top: 0;
@@ -22,21 +32,40 @@ export const stylesBase = css `
     visibility: visible;
   }
 
-  .content {
+  dialog {
+    display: block;
     position: relative;
     z-index: 3;
     margin: auto;
-    min-width: var(--kemet-modal-content-min-width, 0);
-    max-width: var(--kemet-modal-content-max-width, none);
-    background-color: var(--kemet-modal-content-background-color, var(--kemet-color-white-to-primary));
+    min-width: var(--kemet-modal-dialog-min-width);
+    max-width: var(--kemet-modal-dialog-max-width);
+    border: 0;
+    background: var(--kemet-modal-dialog-background-color);
+  }
+
+  dialog::backdrop {
+    background: none;
+  }
+
+  :host([mobile]) dialog {
+    margin: var(--kemet-modal-dialog-mobile-margin);
+    width: var(--kemet-modal-dialog-mobile-width);
+    padding: var(--kemet-modal-dialog-mobile-padding);
+    inset-block-start: auto;
+  }
+
+  :host([rounded]) dialog {
+    border-radius: var(--kemet-modal-radius);
   }
 
-  :host([mobile]) .content {
-    min-width: var(--kemet-modal-content-mobile-min-width, 100%);
-    min-height: var(--kemet-modal-content-mobile-min-height, 80vh);
-    padding: var(--kemet-modal-content-mobile-padding, 1rem);
+  :host([rounded][mobile]) dialog {
+    border-top-left-radius: var(--kemet-modal-radius);
+    border-top-right-radius: var(--kemet-modal-radius);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
+
   .overlay {
     position: fixed;
     width: 100%;
@@ -46,8 +75,8 @@ export const stylesBase = css `
     left: 0;
     z-index: 1;
     opacity: 0;
-    background: var(--kemet-modal-overlay-background-color, rgba(0,0,0,0.2));
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
+    background: var(--kemet-modal-overlay-background-color);
+    transition: all var(--kemet-modal-transition-speed);
   }
 
   :host([opened]) .overlay {
@@ -57,49 +86,49 @@ export const stylesBase = css `
 `;
 export const stylesEffects = css `
   /* fadein-scaleup */
-  :host([effect="fadein-scaleup"]) .content {
+  :host([effect="fadein-scaleup"]) dialog {
     transform: scale(0.7);
     opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
+    transition: all var(--kemet-modal-transition-speed);
   }
 
-  :host([effect="fadein-scaleup"][opened]) .content {
+  :host([effect="fadein-scaleup"][opened]) dialog {
     transform: scale(1);
     opacity: 1;
   }
 
   /* slide-right */
-  :host([effect="slide-right"]) .content {
+  :host([effect="slide-right"]) dialog {
     transform: translateX(20%);
     opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);
+    transition: all var(--kemet-modal-transition-speed) cubic-bezier(0.25, 0.5, 0.5, 0.9);
   }
 
-  :host([effect="slide-right"][opened]) .content {
+  :host([effect="slide-right"][opened]) dialog {
     transform: translateX(0);
     opacity: 1;
   }
 
   /* slide-bottom */
-  :host([effect="slide-bottom"]) .content {
+  :host([effect="slide-bottom"]) dialog {
     transform: translateY(20%);
     opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
+    transition: all var(--kemet-modal-transition-speed);
   }
 
-  :host([effect="slide-bottom"][opened]) .content {
+  :host([effect="slide-bottom"][opened]) dialog {
     transform: translateY(0);
     opacity: 1;
   }
 
   /* newspaper */
-  :host([effect="newspaper"]) .content {
+  :host([effect="newspaper"]) dialog {
     transform: scale(0) rotate(720deg);
     opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
+    transition: all var(--kemet-modal-transition-speed);
   }
 
-  :host([effect="newspaper"][opened]) .content {
+  :host([effect="newspaper"][opened]) dialog {
     transform: scale(1) rotate(0deg);
     opacity: 1;
   }
@@ -109,14 +138,14 @@ export const stylesEffects = css `
     perspective: 1300px;
   }
 
-  :host([effect="fall"]) .content {
+  :host([effect="fall"]) dialog {
     transform-style: preserve-3d;
     transform: translateZ(600px) rotateX(20deg);
     opacity: 0;
   }
 
-  :host([effect="fall"][opened]) .content {
-    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;
+  :host([effect="fall"][opened]) dialog {
+    transition: all var(--kemet-modal-transition-speed) ease-in;
     transform: translateZ(0px) rotateX(0deg);
     opacity: 1;
   }
@@ -126,14 +155,14 @@ export const stylesEffects = css `
     perspective: 1300px;
   }
 
-  :host([effect="side-fall"]) .content {
+  :host([effect="side-fall"]) dialog {
     transform-style: preserve-3d;
     transform: translate(30%) translateZ(600px) rotate(10deg);
     opacity: 0;
   }
 
-  :host([effect="side-fall"][opened]) .content {
-    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;
+  :host([effect="side-fall"][opened]) dialog {
+    transition: all var(--kemet-modal-transition-speed) ease-in;
     transform: translate(0%) translateZ(0) rotate(0deg);
     opacity: 1;
   }
@@ -143,14 +172,14 @@ export const stylesEffects = css `
     perspective: 1300px;
   }
 
-  :host([effect="flip-horizontal"]) .content {
+  :host([effect="flip-horizontal"]) dialog {
     transform-style: preserve-3d;
     transform: rotateY(-70deg);
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
+    transition: all var(--kemet-modal-transition-speed);
     opacity: 0;
   }
 
-  :host([effect="flip-horizontal"][opened]) .content {
+  :host([effect="flip-horizontal"][opened]) dialog {
     transform: rotateY(0deg);
     opacity: 1;
   }
@@ -160,14 +189,14 @@ export const stylesEffects = css `
     perspective: 1300px;
   }
 
-  :host([effect="flip-vertical"]) .content {
+  :host([effect="flip-vertical"]) dialog {
     transform-style: preserve-3d;
     transform: rotateX(-70deg);
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
+    transition: all var(--kemet-modal-transition-speed);
     opacity: 0;
   }
 
-  :host([effect="flip-vertical"][opened]) .content {
+  :host([effect="flip-vertical"][opened]) dialog {
     transform: rotateX(0deg);
     opacity: 1;
   }
@@ -177,27 +206,27 @@ export const stylesEffects = css `
     perspective: 1300px;
   }
 
-  :host([effect="sign-3d"]) .content {
+  :host([effect="sign-3d"]) dialog {
     transform-style: preserve-3d;
     transform: rotateX(-60deg);
     transform-origin: 50% 0;
     opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
+    transition: all var(--kemet-modal-transition-speed);
   }
 
-  :host([effect="sign-3d"][opened]) .content {
+  :host([effect="sign-3d"][opened]) dialog {
     transform: rotateX(0deg);
     opacity: 1;
   }
 
   /* super-scaled */
-  :host([effect="super-scaled"]) .content {
+  :host([effect="super-scaled"]) dialog {
     transform: scale(2);
     opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
+    transition: all var(--kemet-modal-transition-speed);
   }
 
-  :host([effect="super-scaled"][opened]) .content {
+  :host([effect="super-scaled"][opened]) dialog {
     transform: scale(1);
     opacity: 1;
   }
@@ -207,13 +236,13 @@ export const stylesEffects = css `
     perspective: 1300px;
   }
 
-  :host([effect="slit"]) .content {
+  :host([effect="slit"]) dialog {
     transform-style: preserve-3d;
     transform: translateZ(-3000px) rotateY(90deg);
     opacity: 0;
   }
 
-  :host([effect="slit"][opened]) .content {
+  :host([effect="slit"][opened]) dialog {
     animation: slit .7s forwards ease-out;
   }
 
@@ -233,15 +262,15 @@ export const stylesEffects = css `
     perspective: 1300px;
   }
 
-  :host([effect="rotate-bottom"]) .content {
+  :host([effect="rotate-bottom"]) dialog {
     transform-style: preserve-3d;
     transform: translateY(100%) rotateX(90deg);
     transform-origin: 0 100%;
     opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-out;
+    transition: all var(--kemet-modal-transition-speed) ease-out;
   }
 
-  :host([effect="rotate-bottom"][opened]) .content {
+  :host([effect="rotate-bottom"][opened]) dialog {
     transform: translateY(0%) rotateX(0deg);
     opacity: 1;
   }
@@ -251,15 +280,15 @@ export const stylesEffects = css `
     perspective: 1300px;
   }
 
-  :host([effect="rotate-left"]) .content {
+  :host([effect="rotate-left"]) dialog {
     transform-style: preserve-3d;
     transform: translateZ(100px) translateX(-30%) rotateY(90deg);
     transform-origin: 0 100%;
     opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
+    transition: all var(--kemet-modal-transition-speed);
   }
 
-  :host([effect="rotate-left"][opened]) .content {
+  :host([effect="rotate-left"][opened]) dialog {
     transform: translateZ(0px) translateX(0%) rotateY(0deg);
     opacity: 1;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD5B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgN/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    position: fixed;\n    display: flex;\n    top: 0;\n    left: 0;\n    z-index: 99;\n    width: 100%;\n    height: 100vh;\n    visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  :host([opened]) {\n    visibility: visible;\n  }\n\n  .content {\n    position: relative;\n    z-index: 3;\n    margin: auto;\n    min-width: var(--kemet-modal-content-min-width, 0);\n    max-width: var(--kemet-modal-content-max-width, none);\n    background-color: var(--kemet-modal-content-background-color, var(--kemet-color-white-to-primary));\n  }\n\n  :host([mobile]) .content {\n    min-width: var(--kemet-modal-content-mobile-min-width, 100%);\n    min-height: var(--kemet-modal-content-mobile-min-height, 80vh);\n    padding: var(--kemet-modal-content-mobile-padding, 1rem);\n  }\n\n  .overlay {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    visibility: hidden;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    opacity: 0;\n    background: var(--kemet-modal-overlay-background-color, rgba(0,0,0,0.2));\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([opened]) .overlay {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport const stylesEffects = css`\n  /* fadein-scaleup */\n  :host([effect=\"fadein-scaleup\"]) .content {\n    transform: scale(0.7);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"fadein-scaleup\"][opened]) .content {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* slide-right */\n  :host([effect=\"slide-right\"]) .content {\n    transform: translateX(20%);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);\n  }\n\n  :host([effect=\"slide-right\"][opened]) .content {\n    transform: translateX(0);\n    opacity: 1;\n  }\n\n  /* slide-bottom */\n  :host([effect=\"slide-bottom\"]) .content {\n    transform: translateY(20%);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"slide-bottom\"][opened]) .content {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  /* newspaper */\n  :host([effect=\"newspaper\"]) .content {\n    transform: scale(0) rotate(720deg);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"newspaper\"][opened]) .content {\n    transform: scale(1) rotate(0deg);\n    opacity: 1;\n  }\n\n  /* fall */\n  :host([effect=\"fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"fall\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(600px) rotateX(20deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"fall\"][opened]) .content {\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;\n    transform: translateZ(0px) rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* side-fall */\n  :host([effect=\"side-fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"side-fall\"]) .content {\n    transform-style: preserve-3d;\n    transform: translate(30%) translateZ(600px) rotate(10deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"side-fall\"][opened]) .content {\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;\n    transform: translate(0%) translateZ(0) rotate(0deg);\n    opacity: 1;\n  }\n\n  /* flip-horizontal */\n  :host([effect=\"flip-horizontal\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-horizontal\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateY(-70deg);\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-horizontal\"][opened]) .content {\n    transform: rotateY(0deg);\n    opacity: 1;\n  }\n\n  /* flip-vertical */\n  :host([effect=\"flip-vertical\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-vertical\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateX(-70deg);\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-vertical\"][opened]) .content {\n    transform: rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* sign-3d */\n  :host([effect=\"sign-3d\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"sign-3d\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateX(-60deg);\n    transform-origin: 50% 0;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"sign-3d\"][opened]) .content {\n    transform: rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* super-scaled */\n  :host([effect=\"super-scaled\"]) .content {\n    transform: scale(2);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"super-scaled\"][opened]) .content {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* slit */\n  :host([effect=\"slit\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"slit\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(-3000px) rotateY(90deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"slit\"][opened]) .content {\n    animation: slit .7s forwards ease-out;\n  }\n\n  @keyframes slit {\n    50% {\n      transform: translateZ(-250px) rotateY(89deg);\n      opacity: 1;\n      animation-timing-function: ease-in;}\n    100% {\n      transform: translateZ(0) rotateY(0deg);\n      opacity: 1;\n    }\n  }\n\n  /* rotate-bottom */\n  :host([effect=\"rotate-bottom\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"rotate-bottom\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateY(100%) rotateX(90deg);\n    transform-origin: 0 100%;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-out;\n  }\n\n  :host([effect=\"rotate-bottom\"][opened]) .content {\n    transform: translateY(0%) rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* rotate-left */\n  :host([effect=\"rotate-left\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"rotate-left\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n    transform-origin: 0 100%;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"rotate-left\"][opened]) .content {\n    transform: translateZ(0px) translateX(0%) rotateY(0deg);\n    opacity: 1;\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoF5B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgN/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-modal-radius: var(--kemet-border-radius-xl);\n    --kemet-modal-transition-speed: 0.3s;\n    --kemet-modal-dialog-min-width: 0;\n    --kemet-modal-dialog-max-width: none;\n    --kemet-modal-dialog-mobile-width: calc(100% - 2rem);\n    --kemet-modal-dialog-mobile-margin: 0 auto;\n    --kemet-modal-dialog-mobile-padding: 1rem;\n    --kemet-modal-dialog-background-color: rgb(var(--kemet-color-white));\n    --kemet-modal-overlay-background-color: rgb(var(--kemet-color-black) / 20%);\n\n    position: fixed;\n    display: flex;\n    top: 0;\n    left: 0;\n    z-index: 99;\n    width: 100%;\n    height: 100vh;\n    visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  :host([opened]) {\n    visibility: visible;\n  }\n\n  dialog {\n    display: block;\n    position: relative;\n    z-index: 3;\n    margin: auto;\n    min-width: var(--kemet-modal-dialog-min-width);\n    max-width: var(--kemet-modal-dialog-max-width);\n    border: 0;\n    background: var(--kemet-modal-dialog-background-color);\n  }\n\n  dialog::backdrop {\n    background: none;\n  }\n\n  :host([mobile]) dialog {\n    margin: var(--kemet-modal-dialog-mobile-margin);\n    width: var(--kemet-modal-dialog-mobile-width);\n    padding: var(--kemet-modal-dialog-mobile-padding);\n    inset-block-start: auto;\n  }\n\n  :host([rounded]) dialog {\n    border-radius: var(--kemet-modal-radius);\n  }\n\n  :host([rounded][mobile]) dialog {\n    border-top-left-radius: var(--kemet-modal-radius);\n    border-top-right-radius: var(--kemet-modal-radius);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n\n  .overlay {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    visibility: hidden;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    opacity: 0;\n    background: var(--kemet-modal-overlay-background-color);\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([opened]) .overlay {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport const stylesEffects = css`\n  /* fadein-scaleup */\n  :host([effect=\"fadein-scaleup\"]) dialog {\n    transform: scale(0.7);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([effect=\"fadein-scaleup\"][opened]) dialog {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* slide-right */\n  :host([effect=\"slide-right\"]) dialog {\n    transform: translateX(20%);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed) cubic-bezier(0.25, 0.5, 0.5, 0.9);\n  }\n\n  :host([effect=\"slide-right\"][opened]) dialog {\n    transform: translateX(0);\n    opacity: 1;\n  }\n\n  /* slide-bottom */\n  :host([effect=\"slide-bottom\"]) dialog {\n    transform: translateY(20%);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([effect=\"slide-bottom\"][opened]) dialog {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  /* newspaper */\n  :host([effect=\"newspaper\"]) dialog {\n    transform: scale(0) rotate(720deg);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([effect=\"newspaper\"][opened]) dialog {\n    transform: scale(1) rotate(0deg);\n    opacity: 1;\n  }\n\n  /* fall */\n  :host([effect=\"fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"fall\"]) dialog {\n    transform-style: preserve-3d;\n    transform: translateZ(600px) rotateX(20deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"fall\"][opened]) dialog {\n    transition: all var(--kemet-modal-transition-speed) ease-in;\n    transform: translateZ(0px) rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* side-fall */\n  :host([effect=\"side-fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"side-fall\"]) dialog {\n    transform-style: preserve-3d;\n    transform: translate(30%) translateZ(600px) rotate(10deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"side-fall\"][opened]) dialog {\n    transition: all var(--kemet-modal-transition-speed) ease-in;\n    transform: translate(0%) translateZ(0) rotate(0deg);\n    opacity: 1;\n  }\n\n  /* flip-horizontal */\n  :host([effect=\"flip-horizontal\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-horizontal\"]) dialog {\n    transform-style: preserve-3d;\n    transform: rotateY(-70deg);\n    transition: all var(--kemet-modal-transition-speed);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-horizontal\"][opened]) dialog {\n    transform: rotateY(0deg);\n    opacity: 1;\n  }\n\n  /* flip-vertical */\n  :host([effect=\"flip-vertical\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-vertical\"]) dialog {\n    transform-style: preserve-3d;\n    transform: rotateX(-70deg);\n    transition: all var(--kemet-modal-transition-speed);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-vertical\"][opened]) dialog {\n    transform: rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* sign-3d */\n  :host([effect=\"sign-3d\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"sign-3d\"]) dialog {\n    transform-style: preserve-3d;\n    transform: rotateX(-60deg);\n    transform-origin: 50% 0;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([effect=\"sign-3d\"][opened]) dialog {\n    transform: rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* super-scaled */\n  :host([effect=\"super-scaled\"]) dialog {\n    transform: scale(2);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([effect=\"super-scaled\"][opened]) dialog {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* slit */\n  :host([effect=\"slit\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"slit\"]) dialog {\n    transform-style: preserve-3d;\n    transform: translateZ(-3000px) rotateY(90deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"slit\"][opened]) dialog {\n    animation: slit .7s forwards ease-out;\n  }\n\n  @keyframes slit {\n    50% {\n      transform: translateZ(-250px) rotateY(89deg);\n      opacity: 1;\n      animation-timing-function: ease-in;}\n    100% {\n      transform: translateZ(0) rotateY(0deg);\n      opacity: 1;\n    }\n  }\n\n  /* rotate-bottom */\n  :host([effect=\"rotate-bottom\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"rotate-bottom\"]) dialog {\n    transform-style: preserve-3d;\n    transform: translateY(100%) rotateX(90deg);\n    transform-origin: 0 100%;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed) ease-out;\n  }\n\n  :host([effect=\"rotate-bottom\"][opened]) dialog {\n    transform: translateY(0%) rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* rotate-left */\n  :host([effect=\"rotate-left\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"rotate-left\"]) dialog {\n    transform-style: preserve-3d;\n    transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n    transform-origin: 0 100%;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([effect=\"rotate-left\"][opened]) dialog {\n    transform: translateZ(0px) translateX(0%) rotateY(0deg);\n    opacity: 1;\n  }\n`;\n"]}

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

@@ -7,16 +7,6 @@ import '../../kemet-tabs/kemet-tab-panel';
 const meta = {
     title: 'Components / Password',
     component: 'kemet-password',
-};
-export default meta;
-const Template = ({ rules, message }) => html `
-  <kemet-field slug="new-password" label="New Password">
-    <kemet-input slot="input" type="password" name="new-password"></kemet-input>
-    <kemet-password slot="component" message=${message} .rules=${rules}></kemet-password>
-  </kemet-field>
-`;
-export const Standard = {
-    render: (args) => Template(args),
     args: {
         rules: [
             { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },
@@ -25,13 +15,15 @@ export const Standard = {
         ],
         message: 'Please make sure you meet all the requirements.',
     },
-    argTypes: {
-        rules: {
-            control: { type: 'array' },
-        },
-        message: {
-            control: { type: 'text' },
-        },
-    }
+};
+export default meta;
+const Template = (args) => html `
+  <kemet-field slug="new-password" label="New Password">
+    <kemet-input slot="input" type="password" name="new-password"></kemet-input>
+    <kemet-password slot="component" message=${args.message} .rules=${args.rules}></kemet-password>
+  </kemet-field>
+`;
+export const Standard = {
+    render: (args) => Template(args),
 };
 //# sourceMappingURL=stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-password/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAE3B,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;CAC5B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;;+CAGE,OAAO,WAAW,KAAK;;CAErE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,4BAA4B,EAAE;YAChE,EAAE,OAAO,EAAE,wBAAwB,EAAE,OAAO,EAAE,yBAAyB,EAAE;YACzE,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,2BAA2B,EAAE;SACjE;QACD,OAAO,EAAE,iDAAiD;KAC3D;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-password';\n\nimport '../../kemet-input/kemet-input';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Password',\n  component: 'kemet-password',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({ rules, message }) => html`\n  <kemet-field slug=\"new-password\" label=\"New Password\">\n    <kemet-input slot=\"input\" type=\"password\" name=\"new-password\"></kemet-input>\n    <kemet-password slot=\"component\" message=${message} .rules=${rules}></kemet-password>\n  </kemet-field>\n`;\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    rules: [\n      { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n      { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },\n      { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },\n    ],\n    message: 'Please make sure you meet all the requirements.',\n  },\n  argTypes: {\n    rules: {\n      control: { type: 'array' },\n    },\n    message: {\n      control: { type: 'text' },\n    },\n  }\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-password/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAE3B,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,4BAA4B,EAAE;YAChE,EAAE,OAAO,EAAE,wBAAwB,EAAE,OAAO,EAAE,yBAAyB,EAAE;YACzE,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,2BAA2B,EAAE;SACjE;QACD,OAAO,EAAE,iDAAiD;KAC3D;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;+CAGgB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,KAAK;;CAE/E,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACtC,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-password';\n\nimport '../../kemet-input/kemet-input';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Password',\n  component: 'kemet-password',\n  args: {\n    rules: [\n      { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n      { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },\n      { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },\n    ],\n    message: 'Please make sure you meet all the requirements.',\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-field slug=\"new-password\" label=\"New Password\">\n    <kemet-input slot=\"input\" type=\"password\" name=\"new-password\"></kemet-input>\n    <kemet-password slot=\"component\" message=${args.message} .rules=${args.rules}></kemet-password>\n  </kemet-field>\n`;\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n};\n"]}

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 import { KemetFieldInterface } from '../kemet-field/types';
 import { KemetInputInterface } from '../kemet-input/types';
 import { KemetTextareaInterface } from '../kemet-textarea/types';
@@ -26,9 +26,14 @@ import { TypeStatus } from './types';
  * @csspart rules - A description of rules to follow.
  *
  */
+interface IOptions {
+    pattern: string;
+    message: string;
+    meetsCriteria?: boolean;
+}
 export default class KemetPassword extends LitElement {
     static styles: import("lit").CSSResult[];
-    rules: any[];
+    rules: IOptions[];
     show: boolean;
     value: string;
     message: string;
@@ -39,26 +44,26 @@ export default class KemetPassword extends LitElement {
     field: KemetFieldInterface;
     input: KemetInputInterface | KemetTextareaInterface;
     firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     /**
      * Makes the list of rules
      * @private
-     * @returns {templateResults} the criteria rules
+     * @returns {TemplateResult<1>[]} the criteria rules
      */
-    makeRules(): import("lit-html").TemplateResult<1>[];
+    makeRules(): TemplateResult<1>[];
     /**
      * Makes the check icon if the criteria has been met
      * @param {boolean} meetsCriteria
      * @private
-     * @returns {templateResults} an icon component
+     * @returns {TemplateResult} an icon component
      */
-    makeCheckIcon(meetsCriteria: any): import("lit-html").TemplateResult<1>;
+    makeCheckIcon(meetsCriteria: boolean): TemplateResult;
     /**
      * Handles the kemet-input-input event
      * @param {*} event
      * @private
      */
-    handleInput(event: any): void;
+    handleInput(event: CustomEvent): void;
     /**
      * Determines the strength of the password
      * @private
@@ -75,3 +80,4 @@ declare global {
         'kemet-password': KemetPassword;
     }
 }
+export {};

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

@@ -3,29 +3,6 @@ import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { emitEvent } from '../../utilities/misc/events';
 import { stylesBase } from './styles';
-/**
- * @since 1.2.0
- * @status stable
- *
- * @tagname kemet-password
- * @summary Gauges the strength of a password entered by the user.
- *
- * @prop {array} rules - An array of objects containing the rules the password must meet.
- * @prop {boolean} show - Controls the display of the component.
- * @prop {string} value - The value of the input component.
- * @prop {string} message - A message that is above the rules.
- * @prop {string} strength - The strength of the password. Weak | Better | Strong.
- * @prop {string} icon
- * @prop {number} iconSize
- *
- * @event kemet-password-status - Fires when there's a change in status.
- *
- * @csspart status - The status message.
- * @csspart indicator - The strength indicator bars.
- * @csspart message - A message to display to the user.
- * @csspart rules - A description of rules to follow.
- *
- */
 let KemetPassword = class KemetPassword extends LitElement {
     constructor() {
         super(...arguments);
@@ -66,17 +43,16 @@ let KemetPassword = class KemetPassword extends LitElement {
     /**
      * Makes the list of rules
      * @private
-     * @returns {templateResults} the criteria rules
+     * @returns {TemplateResult<1>[]} the criteria rules
      */
     makeRules() {
         if (this.input) {
-            const rules = this.rules.map((rule, index) => {
+            return this.rules.map((rule, index) => {
                 const regExp = new RegExp(rule.pattern);
                 const meetsCriteria = regExp.test(this.input.value);
                 this.rules[index].meetsCriteria = meetsCriteria;
                 return html `<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;
             });
-            return rules;
         }
         return null;
     }
@@ -84,7 +60,7 @@ let KemetPassword = class KemetPassword extends LitElement {
      * Makes the check icon if the criteria has been met
      * @param {boolean} meetsCriteria
      * @private
-     * @returns {templateResults} an icon component
+     * @returns {TemplateResult} an icon component
      */
     makeCheckIcon(meetsCriteria) {
         if (meetsCriteria) {
@@ -138,12 +114,7 @@ let KemetPassword = class KemetPassword extends LitElement {
      * @private
      */
     visibility() {
-        if (this.value.length > 0) {
-            this.show = true;
-        }
-        else {
-            this.show = false;
-        }
+        this.show = this.value.length > 0;
     }
 };
 KemetPassword.styles = [stylesBase];

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-password.js","sourceRoot":"","sources":["../../../src/components/kemet-password/kemet-password.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,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAIxD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH,IAAqB,aAAa,GAAlC,MAAqB,aAAc,SAAQ,UAAU;IAArD;;QAIE,UAAK,GAAU;YACb,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,4BAA4B,EAAE;YAChE,EAAE,OAAO,EAAE,wBAAwB,EAAE,OAAO,EAAE,yBAAyB,EAAE;YACzE,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,2BAA2B,EAAE;SACjE,CAAC;QASF,YAAO,GAAW,iDAAiD,CAAC;QAMpE,SAAI,GAAW,QAAQ,CAAC;QAGxB,aAAQ,GAAW,EAAE,CAAC;IAmIxB,CAAC;IAxHC,YAAY;QACV,WAAW;QACX,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QACzC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAExD,mBAAmB;QACnB,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAChF,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;qCAEsB,IAAI,CAAC,QAAQ;kBAChC,IAAI,CAAC,QAAQ;;;;;;;4CAOa,IAAI,CAAC,OAAO;;YAE5C,IAAI,CAAC,SAAS,EAAE;;;KAGvB,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACH,SAAS;QACP,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC3C,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBACxC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBACpD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,aAAa,CAAC;gBAChD,OAAO,IAAI,CAAA,OAAO,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,OAAO,OAAO,CAAC;YAC7E,CAAC,CAAC,CAAC;YAEH,OAAO,KAAK,CAAC;SACd;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;;OAKG;IACH,aAAa,CAAC,aAAa;QACzB,IAAI,aAAa,EAAE;YACjB,OAAO,IAAI,CAAA,oBAAoB,IAAI,CAAC,IAAI,SAAS,IAAI,CAAC,QAAQ,gBAAgB,CAAC;SAChF;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,KAAK;QACf,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED;;;OAGG;IACH,WAAW;QACT,oEAAoE;QACpE,mEAAmE;QACnE,kEAAkE;QAClE,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC;YACtE,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,UAAU,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;YAE3E,IAAI,kBAAkB,IAAI,IAAI,EAAE;gBAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;gBACvB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;aACvB;YAED,IAAI,kBAAkB,GAAG,IAAI,IAAI,kBAAkB,IAAI,IAAI,EAAE;gBAC3D,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;gBACzB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;aACvB;YAED,IAAI,kBAAkB,GAAG,IAAI,EAAE;gBAC7B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;gBACzB,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;aACzB;YAED,SAAS,CAAC,IAAI,EAAE,uBAAuB,EAAE;gBACvC,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,QAAQ,EAAE,EAAE,qBAAqB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;gBAC9D,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;QACL,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAED;;;OAGG;IACH,UAAU;QACR,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SAClB;aAAM;YACL,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB;IACH,CAAC;CACF,CAAA;AA5JQ,oBAAM,GAAG,CAAC,UAAU,CAAC,CAAC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAKxB;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC7B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACyC;AAGpE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACL;AAGtB;IADC,KAAK,EAAE;6CACW;AAGnB;IADC,KAAK,EAAE;4CACmB;AAG3B;IADC,KAAK,EAAE;4CAC4C;AAnCjC,aAAa;IADjC,aAAa,CAAC,gBAAgB,CAAC;GACX,aAAa,CA6JjC;eA7JoB,aAAa","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { KemetInputInterface } from '../kemet-input/types';\nimport { KemetTextareaInterface } from '../kemet-textarea/types';\nimport { stylesBase } from './styles';\nimport { TypeStatus } from './types';\n\n/**\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-password\n * @summary Gauges the strength of a password entered by the user.\n *\n * @prop {array} rules - An array of objects containing the rules the password must meet.\n * @prop {boolean} show - Controls the display of the component.\n * @prop {string} value - The value of the input component.\n * @prop {string} message - A message that is above the rules.\n * @prop {string} strength - The strength of the password. Weak | Better | Strong.\n * @prop {string} icon\n * @prop {number} iconSize\n *\n * @event kemet-password-status - Fires when there's a change in status.\n *\n * @csspart status - The status message.\n * @csspart indicator - The strength indicator bars.\n * @csspart message - A message to display to the user.\n * @csspart rules - A description of rules to follow.\n *\n */\n\n@customElement('kemet-password')\nexport default class KemetPassword extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Array })\n  rules: any[] = [\n    { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n    { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },\n    { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  show: boolean;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  message: string = 'Please make sure you meet all the requirements.';\n\n  @property({ type: String })\n  strength: string;\n\n  @property({ type: String })\n  icon: string = 'check2';\n\n  @property({ type: Number })\n  iconSize: number = 16;\n\n  @state()\n  status: TypeStatus;\n\n  @state()\n  field: KemetFieldInterface;\n\n  @state()\n  input: KemetInputInterface | KemetTextareaInterface;\n\n  firstUpdated() {\n    // elements\n    this.field = this.closest('kemet-field');\n    this.input = this.field.querySelector('[slot=\"input\"]');\n\n    // events listeners\n    this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));\n  }\n\n  render() {\n    return html`\n      <div role=\"alert\" aria-live=\"assertive\">\n        <div class=\"status status--${this.strength}\" part=\"status\">\n          <span>${this.strength}</span>\n          <ul class=\"indicator\" part=\"indicator\">\n            <li></li>\n            <li></li>\n            <li></li>\n          </ul>\n        </div>\n        <p class=\"message\" part=\"message\">${this.message}</p>\n        <ul class=\"rules\" part=\"rules\">\n          ${this.makeRules()}\n        </ul>\n      </div>\n    `;\n  }\n\n  /**\n   * Makes the list of rules\n   * @private\n   * @returns {templateResults} the criteria rules\n   */\n  makeRules() {\n    if (this.input) {\n      const rules = this.rules.map((rule, index) => {\n        const regExp = new RegExp(rule.pattern);\n        const meetsCriteria = regExp.test(this.input.value);\n        this.rules[index].meetsCriteria = meetsCriteria;\n        return html`<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;\n      });\n\n      return rules;\n    }\n\n    return null;\n  }\n\n  /**\n   * Makes the check icon if the criteria has been met\n   * @param {boolean} meetsCriteria\n   * @private\n   * @returns {templateResults} an icon component\n   */\n  makeCheckIcon(meetsCriteria) {\n    if (meetsCriteria) {\n      return html`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles the kemet-input-input event\n   * @param {*} event\n   * @private\n   */\n  handleInput(event) {\n    this.value = event.detail;\n    this.setStrength();\n    this.visibility();\n  }\n\n  /**\n   * Determines the strength of the password\n   * @private\n   */\n  setStrength() {\n    // We use a setTimeout here because makeRules adds the meetsCriteria\n    // property to the rules. We need that to be set by render() before\n    // setting the Strength because the percentage calc is based on it\n    setTimeout(() => {\n      const totalRules = this.rules.length;\n      const metRules = this.rules.filter(rule => rule.meetsCriteria).length;\n      const metRulesPercentage = Math.round((metRules / totalRules) * 100) / 100;\n\n      if (metRulesPercentage <= 0.33) {\n        this.strength = 'weak';\n        this.status = 'error';\n      }\n\n      if (metRulesPercentage > 0.33 && metRulesPercentage <= 0.67) {\n        this.strength = 'better';\n        this.status = 'error';\n      }\n\n      if (metRulesPercentage > 0.67) {\n        this.strength = 'strong';\n        this.status = 'success';\n      }\n\n      emitEvent(this, 'kemet-password-status', {\n        status: this.status,\n        validity: { meetsPasswordCriteria: this.status === 'success' },\n        element: this,\n      });\n    }, 1);\n  }\n\n  /**\n   * Determines whether to show or hide the component\n   * @private\n   */\n  visibility() {\n    if (this.value.length > 0) {\n      this.show = true;\n    } else {\n      this.show = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-password': KemetPassword\n  }\n}\n"]}
+{"version":3,"file":"kemet-password.js","sourceRoot":"","sources":["../../../src/components/kemet-password/kemet-password.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { KemetInputInterface } from '../kemet-input/types';\nimport { KemetTextareaInterface } from '../kemet-textarea/types';\nimport { stylesBase } from './styles';\nimport { TypeStatus } from './types';\n\n/**\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-password\n * @summary Gauges the strength of a password entered by the user.\n *\n * @prop {array} rules - An array of objects containing the rules the password must meet.\n * @prop {boolean} show - Controls the display of the component.\n * @prop {string} value - The value of the input component.\n * @prop {string} message - A message that is above the rules.\n * @prop {string} strength - The strength of the password. Weak | Better | Strong.\n * @prop {string} icon\n * @prop {number} iconSize\n *\n * @event kemet-password-status - Fires when there's a change in status.\n *\n * @csspart status - The status message.\n * @csspart indicator - The strength indicator bars.\n * @csspart message - A message to display to the user.\n * @csspart rules - A description of rules to follow.\n *\n */\n\ninterface IOptions {\n  pattern: string;\n  message: string;\n  meetsCriteria?: boolean;\n}\n\n@customElement('kemet-password')\nexport default class KemetPassword extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Array })\n  rules: IOptions[] = [\n    { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n    { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },\n    { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  show: boolean;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  message: string = 'Please make sure you meet all the requirements.';\n\n  @property({ type: String })\n  strength: string;\n\n  @property({ type: String })\n  icon: string = 'check2';\n\n  @property({ type: Number })\n  iconSize: number = 16;\n\n  @state()\n  status: TypeStatus;\n\n  @state()\n  field: KemetFieldInterface;\n\n  @state()\n  input: KemetInputInterface | KemetTextareaInterface;\n\n  firstUpdated() {\n    // elements\n    this.field = this.closest('kemet-field');\n    this.input = this.field.querySelector('[slot=\"input\"]');\n\n    // events listeners\n    this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));\n  }\n\n  render() {\n    return html`\n      <div role=\"alert\" aria-live=\"assertive\">\n        <div class=\"status status--${this.strength}\" part=\"status\">\n          <span>${this.strength}</span>\n          <ul class=\"indicator\" part=\"indicator\">\n            <li></li>\n            <li></li>\n            <li></li>\n          </ul>\n        </div>\n        <p class=\"message\" part=\"message\">${this.message}</p>\n        <ul class=\"rules\" part=\"rules\">\n          ${this.makeRules()}\n        </ul>\n      </div>\n    `;\n  }\n\n  /**\n   * Makes the list of rules\n   * @private\n   * @returns {TemplateResult<1>[]} the criteria rules\n   */\n  makeRules(): TemplateResult<1>[] {\n    if (this.input) {\n      return this.rules.map((rule, index) => {\n        const regExp = new RegExp(rule.pattern);\n        const meetsCriteria = regExp.test(this.input.value);\n        this.rules[index].meetsCriteria = meetsCriteria;\n        return html`<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;\n      });\n    }\n\n    return null;\n  }\n\n  /**\n   * Makes the check icon if the criteria has been met\n   * @param {boolean} meetsCriteria\n   * @private\n   * @returns {TemplateResult} an icon component\n   */\n  makeCheckIcon(meetsCriteria: boolean): TemplateResult {\n    if (meetsCriteria) {\n      return html`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles the kemet-input-input event\n   * @param {*} event\n   * @private\n   */\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n    this.setStrength();\n    this.visibility();\n  }\n\n  /**\n   * Determines the strength of the password\n   * @private\n   */\n  setStrength() {\n    // We use a setTimeout here because makeRules adds the meetsCriteria\n    // property to the rules. We need that to be set by render() before\n    // setting the Strength because the percentage calc is based on it\n    setTimeout(() => {\n      const totalRules = this.rules.length;\n      const metRules = this.rules.filter(rule => rule.meetsCriteria).length;\n      const metRulesPercentage = Math.round((metRules / totalRules) * 100) / 100;\n\n      if (metRulesPercentage <= 0.33) {\n        this.strength = 'weak';\n        this.status = 'error';\n      }\n\n      if (metRulesPercentage > 0.33 && metRulesPercentage <= 0.67) {\n        this.strength = 'better';\n        this.status = 'error';\n      }\n\n      if (metRulesPercentage > 0.67) {\n        this.strength = 'strong';\n        this.status = 'success';\n      }\n\n      emitEvent(this, 'kemet-password-status', {\n        status: this.status,\n        validity: { meetsPasswordCriteria: this.status === 'success' },\n        element: this,\n      });\n    }, 1);\n  }\n\n  /**\n   * Determines whether to show or hide the component\n   * @private\n   */\n  visibility() {\n    this.show = this.value.length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-password': KemetPassword\n  }\n}\n"]}

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

@@ -27,11 +27,11 @@ export const stylesBase = css `
 
   .status--weak,
   .status--better {
-    color: var(--kemet-color-error);
+    color: rgb(var(--kemet-color-error));
   }
 
   .status--strong {
-    color: var(--kemet-color-success);
+    color: rgb(var(--kemet-color-success));
   }
 
   .indicator {
@@ -47,20 +47,20 @@ export const stylesBase = css `
   }
 
   .status--weak .indicator li:nth-child(1) {
-    background-color: var(--kemet-color-error);
+    background-color: rgb(var(--kemet-color-error));
   }
 
   .status--better .indicator li:nth-child(1),
   .status--better .indicator li:nth-child(2) {
-    background-color: var(--kemet-color-error);
+    background-color: rgb(var(--kemet-color-error));
   }
 
   .status--strong .indicator li {
-    background-color: var(--kemet-color-success);
+    background-color: rgb(var(--kemet-color-success));
   }
 
   .rules {
-    color: var(--kemet-color-background);
+    color: rgb(var(--kemet-color-foreground));
     line-height: 1.5;
     list-style: none;
     font-size: 90%;
@@ -72,7 +72,7 @@ export const stylesBase = css `
   }
 
   .rules kemet-icon {
-    color: var(--kemet-color-success);
+    color: rgb(var(--kemet-color-success));
     position: absolute;
     left: -2rem;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-password/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6E5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    color: inherit;\n    display: none;\n  }\n\n  :host([show]) {\n    display: block;\n  }\n\n  p {\n    margin: 1.6rem 0;\n  }\n\n  .status {\n    display: grid;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n    line-height: 1;\n    margin-top: 0.8rem;\n  }\n\n  .status > span {\n    text-transform: capitalize;\n  }\n\n  .status--weak,\n  .status--better {\n    color: var(--kemet-color-error);\n  }\n\n  .status--strong {\n    color: var(--kemet-color-success);\n  }\n\n  .indicator {\n    display: flex;\n    gap: 0.4rem;\n    margin: 0;\n    list-style: none;\n  }\n\n  .indicator li {\n    width: 1.6rem;\n    height: 0.2rem;\n  }\n\n  .status--weak .indicator li:nth-child(1) {\n    background-color: var(--kemet-color-error);\n  }\n\n  .status--better .indicator li:nth-child(1),\n  .status--better .indicator li:nth-child(2) {\n    background-color: var(--kemet-color-error);\n  }\n\n  .status--strong .indicator li {\n    background-color: var(--kemet-color-success);\n  }\n\n  .rules {\n    color: var(--kemet-color-background);\n    line-height: 1.5;\n    list-style: none;\n    font-size: 90%;\n    padding-left: 2rem;\n  }\n\n  .rules li {\n    position: relative;\n  }\n\n  .rules kemet-icon {\n    color: var(--kemet-color-success);\n    position: absolute;\n    left: -2rem;\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-password/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6E5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    color: inherit;\n    display: none;\n  }\n\n  :host([show]) {\n    display: block;\n  }\n\n  p {\n    margin: 1.6rem 0;\n  }\n\n  .status {\n    display: grid;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n    line-height: 1;\n    margin-top: 0.8rem;\n  }\n\n  .status > span {\n    text-transform: capitalize;\n  }\n\n  .status--weak,\n  .status--better {\n    color: rgb(var(--kemet-color-error));\n  }\n\n  .status--strong {\n    color: rgb(var(--kemet-color-success));\n  }\n\n  .indicator {\n    display: flex;\n    gap: 0.4rem;\n    margin: 0;\n    list-style: none;\n  }\n\n  .indicator li {\n    width: 1.6rem;\n    height: 0.2rem;\n  }\n\n  .status--weak .indicator li:nth-child(1) {\n    background-color: rgb(var(--kemet-color-error));\n  }\n\n  .status--better .indicator li:nth-child(1),\n  .status--better .indicator li:nth-child(2) {\n    background-color: rgb(var(--kemet-color-error));\n  }\n\n  .status--strong .indicator li {\n    background-color: rgb(var(--kemet-color-success));\n  }\n\n  .rules {\n    color: rgb(var(--kemet-color-foreground));\n    line-height: 1.5;\n    list-style: none;\n    font-size: 90%;\n    padding-left: 2rem;\n  }\n\n  .rules li {\n    position: relative;\n  }\n\n  .rules kemet-icon {\n    color: rgb(var(--kemet-color-success));\n    position: absolute;\n    left: -2rem;\n  }\n`;\n"]}

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

@@ -4,7 +4,9 @@ import '../kemet-popper-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 OnClick: Story;