kemet-ui 4.0.2 → 5.0.0

package/dist/elements/loader/styles.css.js

@@ -0,0 +1,427 @@
+// src/elements/loader/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  --kemet-loader-color: var(--kemet-color-brand-primary-base);
+  --kemet-loader-thickness: 4px;
+  --kemet-loader-dot-size: 24px;
+  --kemet-loader-size: 48px;
+
+  /* private variables */
+  --_kemet-loader-three-dot-gap: calc(var(--kemet-loader-dot-size) * 0.5);
+  --_kemet-loader-circle-radius: calc(var(--kemet-loader-dot-size) * 2.04);
+  --_kemet-loader-spinner-radius: calc(var(--kemet-loader-size) * 0.43);
+  --_kemet-loader-spinner-bar-width: calc(var(--kemet-loader-size) * 0.07);
+  --_kemet-loader-spinner-bar-height: calc(var(--kemet-loader-size) * 0.26);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+:host([variant=three-dots]) > div {
+  display: inline-flex;
+  gap: var(--_kemet-loader-three-dot-gap);
+  align-items: center;
+  justify-content: center;
+}
+
+/* NO BORDER SPINNER */
+.nb-spinner {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background: transparent;
+  border-top: var(--kemet-loader-thickness) solid;
+  border-right: var(--kemet-loader-thickness) solid transparent;
+  border-radius: 50%;
+  animation: 1s spin linear infinite;
+}
+
+/* BORDER TOP SPINNER */
+.bt-spinner {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: transparent;
+  border: var(--kemet-loader-thickness) solid;
+  border-top-color: var(--kemet-loader-color);
+  animation: 1s spin linear infinite;
+}
+
+/* DOUBLE BORDER SPINNER */
+.db-spinner {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: transparent;
+  border: var(--kemet-loader-thickness) solid #222;
+  border-top-color: var(--kemet-loader-color);
+  border-bottom-color: var(--kemet-loader-color);
+  animation: 1s spin linear infinite;
+}
+
+/* DOUBLE SPINNER */
+.double-spinner {
+  position: relative;
+}
+
+.dbl-spinner {
+  position: absolute;
+  border-radius: 50%;
+  background-color: transparent;
+  border: var(--kemet-loader-thickness) solid transparent;
+  border-top: var(--kemet-loader-thickness) solid;
+  border-left: var(--kemet-loader-thickness) solid;
+  animation: 2s spin linear infinite;
+}
+
+.dbl-spinner--2 {
+  border: var(--kemet-loader-thickness) solid transparent;
+  border-right: var(--kemet-loader-thickness) solid var(--kemet-loader-color);
+  border-bottom: var(--kemet-loader-thickness) solid var(--kemet-loader-color);
+  animation: 1s spin linear infinite;
+}
+
+
+/* 3 DOT LOADER */
+.dot-loader {
+  width: var(--kemet-loader-dot-size);
+  height: var(--kemet-loader-dot-size);
+  border-radius: 50%;
+  background-color: var(--kemet-loader-color);
+  position: relative;
+  animation: 1.2s grow ease-in-out infinite;
+}
+
+.dot-loader--2 {
+  animation: 1.2s grow ease-in-out infinite 0.15555s;
+}
+
+.dot-loader--3 {
+  animation: 1.2s grow ease-in-out infinite 0.3s;
+}
+
+
+/* CIRCLE DOT LOADER */
+.circle-loader {
+  position: relative;
+  display: flex;
+  align-self: center;
+  justify-self: center;
+  width: calc(var(--_kemet-loader-circle-radius) * 2 + var(--kemet-loader-dot-size));
+  height: calc(var(--_kemet-loader-circle-radius) * 2 + var(--kemet-loader-dot-size));
+}
+
+.circle-loader div {
+  height: var(--kemet-loader-dot-size);
+  width: var(--kemet-loader-dot-size);
+  background-color: var(--kemet-loader-color);
+  border-radius: 50%;
+  position: absolute;
+  animation: 0.8s opaque ease-in-out infinite both;
+  transform: translate(-50%, -50%);
+}
+
+.circle-loader > div:nth-child(1) {
+  top: calc(50% + var(--_kemet-loader-circle-radius) * -1);
+  left: 50%;
+}
+
+.circle-loader > div:nth-child(2) {
+  top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);
+  left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);
+  animation-delay: 0.1s;
+}
+
+.circle-loader > div:nth-child(3) {
+  top: 50%;
+  left: calc(50% + var(--_kemet-loader-circle-radius));
+  animation-delay: 0.2s;
+}
+
+.circle-loader > div:nth-child(4) {
+  top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);
+  left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);
+  animation-delay: 0.3s;
+}
+
+.circle-loader > div:nth-child(5) {
+  top: calc(50% + var(--_kemet-loader-circle-radius));
+  left: 50%;
+  animation-delay: 0.4s;
+}
+
+.circle-loader > div:nth-child(6) {
+  top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);
+  left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);
+  animation-delay: 0.5s;
+}
+
+.circle-loader > div:nth-child(7) {
+  top: 50%;
+  left: calc(50% + var(--_kemet-loader-circle-radius) * -1);
+  animation-delay: 0.6s;
+}
+
+.circle-loader > div:nth-child(8) {
+  top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);
+  left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);
+  animation-delay: 0.7s;
+}
+
+
+/* MESH LOADER */
+.mesh-loader {
+  overflow: hidden;
+  height: inherit;
+  width: inherit;
+}
+
+.mesh-loader .circle {
+  width: var(--kemet-loader-dot-size);
+  height: var(--kemet-loader-dot-size);
+  position: absolute;
+  background: var(--kemet-loader-color);
+  border-radius: 50%;
+  margin: calc(var(--kemet-loader-dot-size) / -2);
+  animation: mesh 3s ease-in-out infinite -1.5s;
+}
+
+.mesh-loader > div .circle:last-child {
+  animation-delay: 0s;
+}
+
+.mesh-loader > div {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.mesh-loader > div:last-child {
+  transform: rotate(90deg);
+}
+
+
+/* SPINNER 13 */
+.ml-loader {
+  position: relative;
+  width: calc(var(--_kemet-loader-spinner-radius) * 2);
+  height: calc(var(--_kemet-loader-spinner-radius) * 2);
+}
+
+.ml-loader div {
+  transform-origin: var(--_kemet-loader-spinner-radius) var(--_kemet-loader-spinner-radius);
+  animation: 1.2s opaque ease-in-out infinite both;
+}
+
+.ml-loader div::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: calc(var(--_kemet-loader-spinner-radius) - var(--_kemet-loader-spinner-bar-width) / 2);
+  width: var(--_kemet-loader-spinner-bar-width);
+  height: var(--_kemet-loader-spinner-bar-height);
+  border-radius: 10px;
+  background-color: var(--kemet-loader-color);
+}
+
+.ml-loader div:nth-child(1) {
+  transform: rotate(0);
+}
+
+.ml-loader div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: 0.1s;
+}
+
+.ml-loader div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: 0.2s;
+}
+
+.ml-loader div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: 0.3s;
+}
+
+.ml-loader div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: 0.4s;
+}
+
+.ml-loader div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: 0.5s;
+}
+
+.ml-loader div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: 0.6s;
+}
+
+.ml-loader div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: 0.7s;
+}
+
+.ml-loader div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: 0.8s;
+}
+
+.ml-loader div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: 0.9s;
+}
+
+.ml-loader div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: 1s;
+}
+
+.ml-loader div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 1.1s;
+}
+
+.ml-loader div:nth-child(13) {
+  transform: rotate(360deg);
+  animation-delay: 1.2s;
+}
+
+
+
+@keyframes rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinBack {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(-720deg);
+    transform: rotate(-720deg);
+  }
+}
+
+@keyframes spinBorder {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+    border-width: 15px;
+  }
+  50% {
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+    border-width: 3px;
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+    border-width: 15px;
+  }
+}
+
+@keyframes grow {
+  0%, 40%, 100% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+
+@keyframes pulsate {
+  0% {
+    -webkit-transform: rotate(45deg) scale(0.8);
+    transform: rotate(45deg) scale(0.8);
+    transform: rotate(45deg) scale(0.8);
+  }
+  5% {
+    -webkit-transform: rotate(45deg) scale(0.9);
+    transform: rotate(45deg) scale(0.9);
+  }
+  10% {
+    -webkit-transform: rotate(45deg) scale(0.8);
+    transform: rotate(45deg) scale(0.8);
+  }
+  15% {
+    -webkit-transform: rotate(45deg) scale(1);
+    transform: rotate(45deg) scale(1);
+  }
+  50% {
+    -webkit-transform: rotate(45deg) scale(0.8);
+    transform: rotate(45deg) scale(0.8);
+  }
+  100% {
+    -webkit-transform: rotate(45deg) scale(0.8);
+    transform: rotate(45deg) scale(0.8);
+  }
+}
+
+@keyframes opaque {
+  0% {
+    opacity: 0.1;
+  }
+  40% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0.1;
+  }
+}
+
+@keyframes mesh {
+  0% {
+    -webkit-transform-origin: 50% -100%;
+    transform-origin: 50% -100%;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  50% {
+    -webkit-transform-origin: 50% -100%;
+    transform-origin: 50% -100%;
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+  50.1% {
+    -webkit-transform-origin: 50% 200%;
+    transform-origin: 50% 200%;
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform-origin: 50% 200%;
+    transform-origin: 50% 200%;
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

package/dist/elements/loader/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/loader/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-loader-color: var(--kemet-color-brand-primary-base);\n  --kemet-loader-thickness: 4px;\n  --kemet-loader-dot-size: 24px;\n  --kemet-loader-size: 48px;\n\n  /* private variables */\n  --_kemet-loader-three-dot-gap: calc(var(--kemet-loader-dot-size) * 0.5);\n  --_kemet-loader-circle-radius: calc(var(--kemet-loader-dot-size) * 2.04);\n  --_kemet-loader-spinner-radius: calc(var(--kemet-loader-size) * 0.43);\n  --_kemet-loader-spinner-bar-width: calc(var(--kemet-loader-size) * 0.07);\n  --_kemet-loader-spinner-bar-height: calc(var(--kemet-loader-size) * 0.26);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n:host([variant=three-dots]) > div {\n  display: inline-flex;\n  gap: var(--_kemet-loader-three-dot-gap);\n  align-items: center;\n  justify-content: center;\n}\n\n/* NO BORDER SPINNER */\n.nb-spinner {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  background: transparent;\n  border-top: var(--kemet-loader-thickness) solid;\n  border-right: var(--kemet-loader-thickness) solid transparent;\n  border-radius: 50%;\n  animation: 1s spin linear infinite;\n}\n\n/* BORDER TOP SPINNER */\n.bt-spinner {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid;\n  border-top-color: var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n/* DOUBLE BORDER SPINNER */\n.db-spinner {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid #222;\n  border-top-color: var(--kemet-loader-color);\n  border-bottom-color: var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n/* DOUBLE SPINNER */\n.double-spinner {\n  position: relative;\n}\n\n.dbl-spinner {\n  position: absolute;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid transparent;\n  border-top: var(--kemet-loader-thickness) solid;\n  border-left: var(--kemet-loader-thickness) solid;\n  animation: 2s spin linear infinite;\n}\n\n.dbl-spinner--2 {\n  border: var(--kemet-loader-thickness) solid transparent;\n  border-right: var(--kemet-loader-thickness) solid var(--kemet-loader-color);\n  border-bottom: var(--kemet-loader-thickness) solid var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n\n/* 3 DOT LOADER */\n.dot-loader {\n  width: var(--kemet-loader-dot-size);\n  height: var(--kemet-loader-dot-size);\n  border-radius: 50%;\n  background-color: var(--kemet-loader-color);\n  position: relative;\n  animation: 1.2s grow ease-in-out infinite;\n}\n\n.dot-loader--2 {\n  animation: 1.2s grow ease-in-out infinite 0.15555s;\n}\n\n.dot-loader--3 {\n  animation: 1.2s grow ease-in-out infinite 0.3s;\n}\n\n\n/* CIRCLE DOT LOADER */\n.circle-loader {\n  position: relative;\n  display: flex;\n  align-self: center;\n  justify-self: center;\n  width: calc(var(--_kemet-loader-circle-radius) * 2 + var(--kemet-loader-dot-size));\n  height: calc(var(--_kemet-loader-circle-radius) * 2 + var(--kemet-loader-dot-size));\n}\n\n.circle-loader div {\n  height: var(--kemet-loader-dot-size);\n  width: var(--kemet-loader-dot-size);\n  background-color: var(--kemet-loader-color);\n  border-radius: 50%;\n  position: absolute;\n  animation: 0.8s opaque ease-in-out infinite both;\n  transform: translate(-50%, -50%);\n}\n\n.circle-loader > div:nth-child(1) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -1);\n  left: 50%;\n}\n\n.circle-loader > div:nth-child(2) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  animation-delay: 0.1s;\n}\n\n.circle-loader > div:nth-child(3) {\n  top: 50%;\n  left: calc(50% + var(--_kemet-loader-circle-radius));\n  animation-delay: 0.2s;\n}\n\n.circle-loader > div:nth-child(4) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  animation-delay: 0.3s;\n}\n\n.circle-loader > div:nth-child(5) {\n  top: calc(50% + var(--_kemet-loader-circle-radius));\n  left: 50%;\n  animation-delay: 0.4s;\n}\n\n.circle-loader > div:nth-child(6) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  animation-delay: 0.5s;\n}\n\n.circle-loader > div:nth-child(7) {\n  top: 50%;\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -1);\n  animation-delay: 0.6s;\n}\n\n.circle-loader > div:nth-child(8) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  animation-delay: 0.7s;\n}\n\n\n/* MESH LOADER */\n.mesh-loader {\n  overflow: hidden;\n  height: inherit;\n  width: inherit;\n}\n\n.mesh-loader .circle {\n  width: var(--kemet-loader-dot-size);\n  height: var(--kemet-loader-dot-size);\n  position: absolute;\n  background: var(--kemet-loader-color);\n  border-radius: 50%;\n  margin: calc(var(--kemet-loader-dot-size) / -2);\n  animation: mesh 3s ease-in-out infinite -1.5s;\n}\n\n.mesh-loader > div .circle:last-child {\n  animation-delay: 0s;\n}\n\n.mesh-loader > div {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n}\n\n.mesh-loader > div:last-child {\n  transform: rotate(90deg);\n}\n\n\n/* SPINNER 13 */\n.ml-loader {\n  position: relative;\n  width: calc(var(--_kemet-loader-spinner-radius) * 2);\n  height: calc(var(--_kemet-loader-spinner-radius) * 2);\n}\n\n.ml-loader div {\n  transform-origin: var(--_kemet-loader-spinner-radius) var(--_kemet-loader-spinner-radius);\n  animation: 1.2s opaque ease-in-out infinite both;\n}\n\n.ml-loader div::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: calc(var(--_kemet-loader-spinner-radius) - var(--_kemet-loader-spinner-bar-width) / 2);\n  width: var(--_kemet-loader-spinner-bar-width);\n  height: var(--_kemet-loader-spinner-bar-height);\n  border-radius: 10px;\n  background-color: var(--kemet-loader-color);\n}\n\n.ml-loader div:nth-child(1) {\n  transform: rotate(0);\n}\n\n.ml-loader div:nth-child(2) {\n  transform: rotate(30deg);\n  animation-delay: 0.1s;\n}\n\n.ml-loader div:nth-child(3) {\n  transform: rotate(60deg);\n  animation-delay: 0.2s;\n}\n\n.ml-loader div:nth-child(4) {\n  transform: rotate(90deg);\n  animation-delay: 0.3s;\n}\n\n.ml-loader div:nth-child(5) {\n  transform: rotate(120deg);\n  animation-delay: 0.4s;\n}\n\n.ml-loader div:nth-child(6) {\n  transform: rotate(150deg);\n  animation-delay: 0.5s;\n}\n\n.ml-loader div:nth-child(7) {\n  transform: rotate(180deg);\n  animation-delay: 0.6s;\n}\n\n.ml-loader div:nth-child(8) {\n  transform: rotate(210deg);\n  animation-delay: 0.7s;\n}\n\n.ml-loader div:nth-child(9) {\n  transform: rotate(240deg);\n  animation-delay: 0.8s;\n}\n\n.ml-loader div:nth-child(10) {\n  transform: rotate(270deg);\n  animation-delay: 0.9s;\n}\n\n.ml-loader div:nth-child(11) {\n  transform: rotate(300deg);\n  animation-delay: 1s;\n}\n\n.ml-loader div:nth-child(12) {\n  transform: rotate(330deg);\n  animation-delay: 1.1s;\n}\n\n.ml-loader div:nth-child(13) {\n  transform: rotate(360deg);\n  animation-delay: 1.2s;\n}\n\n\n\n@keyframes rotate {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin {\n  from {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spinBack {\n  from {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(-720deg);\n    transform: rotate(-720deg);\n  }\n}\n\n@keyframes spinBorder {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n    border-width: 15px;\n  }\n  50% {\n    -webkit-transform: rotate(180deg);\n    transform: rotate(180deg);\n    border-width: 3px;\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n    border-width: 15px;\n  }\n}\n\n@keyframes grow {\n  0%, 40%, 100% {\n    -webkit-transform: scale(0);\n            transform: scale(0);\n  }\n  40% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n}\n\n@keyframes pulsate {\n  0% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  5% {\n    -webkit-transform: rotate(45deg) scale(0.9);\n    transform: rotate(45deg) scale(0.9);\n  }\n  10% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  15% {\n    -webkit-transform: rotate(45deg) scale(1);\n    transform: rotate(45deg) scale(1);\n  }\n  50% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  100% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n}\n\n@keyframes opaque {\n  0% {\n    opacity: 0.1;\n  }\n  40% {\n    opacity: 1;\n  }\n  80% {\n    opacity: 0.1;\n  }\n  100% {\n    opacity: 0.1;\n  }\n}\n\n@keyframes mesh {\n  0% {\n    -webkit-transform-origin: 50% -100%;\n    transform-origin: 50% -100%;\n    -webkit-transform: rotate(0);\n    transform: rotate(0);\n  }\n  50% {\n    -webkit-transform-origin: 50% -100%;\n    transform-origin: 50% -100%;\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n  50.1% {\n    -webkit-transform-origin: 50% 200%;\n    transform-origin: 50% 200%;\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform-origin: 50% 200%;\n    transform-origin: 50% 200%;\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/password/index.d.ts

@@ -0,0 +1,91 @@
+import * as lit from 'lit';
+import { LitElement, TemplateResult } from 'lit';
+import { E as EnumAppearances, H as HTMLKemetFieldElement, c as HTMLKemetInputElement, f as HTMLKemetTextareaElement } from '../../constants-W9QKPlZP.js';
+import '../icon/index.js';
+import 'lit-html';
+import '../../form-controller-3q581XcZ.js';
+
+interface InterfaceOptions {
+    pattern: string;
+    message: string;
+    meetsCriteria?: boolean;
+}
+interface InterfacePasswordStrengthChangeDetails {
+    appearance: EnumAppearances;
+    meetsPasswordCriteria: boolean;
+    element: KemetPassword;
+}
+/**
+ * @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-strength-change - Fires when there's a change in strength.
+ *
+ * @csspart strength - Indicates password strength.
+ * @csspart indicator - The strength indicator bars.
+ * @csspart message - A message to display to the user.
+ * @csspart rules - A description of rules to follow.
+ *
+ */
+declare class KemetPassword extends LitElement {
+    static styles: lit.CSSResult[];
+    rules: InterfaceOptions[];
+    show: boolean;
+    value: string;
+    message: string;
+    strength: string;
+    icon: string;
+    iconSize: number;
+    appearance?: EnumAppearances;
+    field: HTMLKemetFieldElement;
+    input: HTMLKemetInputElement | HTMLKemetTextareaElement;
+    firstUpdated(): void;
+    render(): TemplateResult<1>;
+    /**
+     * Makes the list of rules
+     * @private
+     * @returns {TemplateResult<1>[]} the criteria rules
+     */
+    makeRules(): TemplateResult<1>[];
+    /**
+     * Makes the check icon if the criteria has been met
+     * @param {boolean} meetsCriteria
+     * @private
+     * @returns {TemplateResult} an icon component
+     */
+    makeCheckIcon(meetsCriteria: boolean): TemplateResult;
+    /**
+     * Handles the kemet-input-input event
+     * @param {*} event
+     * @private
+     */
+    handleInput(event: Event): void;
+    /**
+     * Determines the strength of the password
+     * @private
+     */
+    setStrength(): void;
+    /**
+     * Determines whether to show or hide the component
+     * @private
+     */
+    visibility(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-password': KemetPassword;
+    }
+}
+
+export { type InterfacePasswordStrengthChangeDetails, KemetPassword as default };