kuinetic 0.1.0 → 0.1.2

package/dist/kuinetic.css

@@ -105,9 +105,11 @@
   }
   [data-kui-fx~=confetti-burst] {
     --kui-feedback-burst-duration: 900ms;
+    --kui-pop-scale: 1.15;
   }
   [data-kui-fx~=count-bump] {
     --kui-feedback-pop-duration: 280ms;
+    --kui-pop-scale: 1.3;
   }
   [data-kui-fx~=count-compact] {
     --kui-from: 0;
@@ -202,6 +204,10 @@
   }
   [data-kui-fx~=heart-burst] {
     --kui-feedback-burst-duration: 700ms;
+    --kui-pop-scale: 1.4;
+  }
+  [data-kui-fx~=highlight-sweep] {
+    --kui-sweep-color: gold;
   }
   [data-kui-fx~=line-grid-drift] {
     --kui-ambient-gradient-duration: 16s;
@@ -785,7 +791,7 @@
   @keyframes kui-blur-up {
     from {
       translate: 0 var(--kui-distance, 24px);
-      filter: blur(16px);
+      filter: blur(var(--kui-blur, 16px));
     }
     to {
       translate: 0 0;
@@ -986,7 +992,7 @@
       linear-gradient(
         100deg,
         transparent 30%,
-        color-mix(in srgb, currentColor 70%, transparent) 50%,
+        color-mix(in srgb, var(--kui-sweep-color, currentColor) 70%, transparent) 50%,
         transparent 70%);
     background-size: 260% 100%;
     -webkit-background-clip: text;
@@ -1002,7 +1008,7 @@
     }
   }
   [data-kui-fx~=highlight-sweep] {
-    background-image: linear-gradient(90deg, color-mix(in srgb, gold 55%, transparent) 0 100%);
+    background-image: linear-gradient(90deg, color-mix(in srgb, var(--kui-sweep-color, currentColor) 55%, transparent) 0 100%);
     background-repeat: no-repeat;
     background-size: 0% 100%;
     padding: 0 0.05em;
@@ -1013,7 +1019,7 @@
     }
   }
   [data-kui-fx~=underline-draw] {
-    background-image: linear-gradient(currentColor, currentColor);
+    background-image: linear-gradient(var(--kui-sweep-color, currentColor), var(--kui-sweep-color, currentColor));
     background-repeat: no-repeat;
     background-position: 0 100%;
     background-size: 0% 2px;
@@ -1054,7 +1060,7 @@
       font-style: oblique var(--kui-from-slant, 0deg);
     }
     to {
-      font-style: oblique var(--kui-to-slant, -10deg);
+      font-style: oblique var(--kui-to-slant, 10deg);
     }
   }
   [data-kui-fx~=marquee],
@@ -1071,6 +1077,7 @@
       translate: -50% 0;
     }
   }
+  @property --kui-redaction-x { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
   [data-kui-fx~=redaction-reveal] {
     position: relative;
     display: inline-block;
@@ -1079,12 +1086,12 @@
     content: "";
     position: absolute;
     inset: 0;
-    background: #111;
-    clip-path: inset(0 0 0 0);
+    background: var(--kui-bar-color, #111);
+    clip-path: inset(0 0 0 var(--kui-redaction-x));
   }
   @keyframes kui-redaction-reveal {
     to {
-      clip-path: inset(0 0 0 100%);
+      --kui-redaction-x: 100%;
     }
   }
   [data-kui-fx~=text-3d-extrude] {
@@ -1099,8 +1106,8 @@
   }
   @keyframes kui-text-3d-extrude {
     from {
-      rotate: -6deg;
-      translate: 0 12px;
+      rotate: var(--kui-from-angle, -20deg);
+      translate: 0 var(--kui-distance, 32px);
     }
     to {
       rotate: 0deg;
@@ -1230,14 +1237,30 @@
   [data-kui-fx~=strength-meter][data-kui-strength-level="1"] ~ .kui-meter > *:nth-child(-n+1),
   [data-kui-fx~=strength-meter][data-kui-strength-level="2"] ~ .kui-meter > *:nth-child(-n+2),
   [data-kui-fx~=strength-meter][data-kui-strength-level="3"] ~ .kui-meter > *:nth-child(-n+3),
-  [data-kui-fx~=strength-meter][data-kui-strength-level="4"] ~ .kui-meter > *:nth-child(-n+4) {
+  [data-kui-fx~=strength-meter][data-kui-strength-level="4"] ~ .kui-meter > *:nth-child(-n+4),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="5"] ~ .kui-meter > *:nth-child(-n+5),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="6"] ~ .kui-meter > *:nth-child(-n+6),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="7"] ~ .kui-meter > *:nth-child(-n+7),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="8"] ~ .kui-meter > *:nth-child(-n+8),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="9"] ~ .kui-meter > *:nth-child(-n+9),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="10"] ~ .kui-meter > *:nth-child(-n+10),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="11"] ~ .kui-meter > *:nth-child(-n+11),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="12"] ~ .kui-meter > *:nth-child(-n+12),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="13"] ~ .kui-meter > *:nth-child(-n+13),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="14"] ~ .kui-meter > *:nth-child(-n+14),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="15"] ~ .kui-meter > *:nth-child(-n+15),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="16"] ~ .kui-meter > *:nth-child(-n+16),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="17"] ~ .kui-meter > *:nth-child(-n+17),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="18"] ~ .kui-meter > *:nth-child(-n+18),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="19"] ~ .kui-meter > *:nth-child(-n+19),
+  [data-kui-fx~=strength-meter][data-kui-strength-level="20"] ~ .kui-meter > *:nth-child(-n+20) {
     opacity: 1;
     background: var(--kui-meter-on, #2e9e5b);
   }
   [data-kui-fx~=toggle-morph] ~ .kui-track {
     display: inline-block;
-    width: 40px;
-    height: 22px;
+    width: calc(40px * var(--kui-toggle-scale, 1));
+    height: calc(22px * var(--kui-toggle-scale, 1));
     border-radius: 999px;
     background: var(--dim, #9a8d80);
     transition: background-color 200ms ease-out;
@@ -1245,12 +1268,12 @@
   }
   [data-kui-fx~=toggle-morph] ~ .kui-track .kui-thumb {
     position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 18px;
-    height: 18px;
+    top: calc(2px * var(--kui-toggle-scale, 1));
+    left: calc(2px * var(--kui-toggle-scale, 1));
+    width: calc(18px * var(--kui-toggle-scale, 1));
+    height: calc(18px * var(--kui-toggle-scale, 1));
     border-radius: 50%;
-    background: #fff;
+    background: var(--kui-thumb-color, #fff);
     translate: 0 0;
     transition: translate 200ms ease-out;
   }
@@ -1258,7 +1281,7 @@
     background: var(--accent, #d2691e);
   }
   [data-kui-fx~=toggle-morph]:checked ~ .kui-track .kui-thumb {
-    translate: 18px 0;
+    translate: calc(18px * var(--kui-toggle-scale, 1)) 0;
   }
   [data-kui-fx~=checkbox-draw] ~ svg path {
     stroke-dasharray: 24;
@@ -1270,8 +1293,8 @@
   }
   [data-kui-fx~=radio-fill] ~ .kui-dot {
     display: inline-block;
-    width: 10px;
-    height: 10px;
+    width: calc(10px * var(--kui-radio-scale, 1));
+    height: calc(10px * var(--kui-radio-scale, 1));
     border-radius: 50%;
     background: var(--accent, #d2691e);
     scale: 0;
@@ -1329,7 +1352,21 @@
   [data-kui-fx~=step-progress][data-kui-step="2"] > *:nth-child(-n+3),
   [data-kui-fx~=step-progress][data-kui-step="3"] > *:nth-child(-n+4),
   [data-kui-fx~=step-progress][data-kui-step="4"] > *:nth-child(-n+5),
-  [data-kui-fx~=step-progress][data-kui-step="5"] > *:nth-child(-n+6) {
+  [data-kui-fx~=step-progress][data-kui-step="5"] > *:nth-child(-n+6),
+  [data-kui-fx~=step-progress][data-kui-step="6"] > *:nth-child(-n+7),
+  [data-kui-fx~=step-progress][data-kui-step="7"] > *:nth-child(-n+8),
+  [data-kui-fx~=step-progress][data-kui-step="8"] > *:nth-child(-n+9),
+  [data-kui-fx~=step-progress][data-kui-step="9"] > *:nth-child(-n+10),
+  [data-kui-fx~=step-progress][data-kui-step="10"] > *:nth-child(-n+11),
+  [data-kui-fx~=step-progress][data-kui-step="11"] > *:nth-child(-n+12),
+  [data-kui-fx~=step-progress][data-kui-step="12"] > *:nth-child(-n+13),
+  [data-kui-fx~=step-progress][data-kui-step="13"] > *:nth-child(-n+14),
+  [data-kui-fx~=step-progress][data-kui-step="14"] > *:nth-child(-n+15),
+  [data-kui-fx~=step-progress][data-kui-step="15"] > *:nth-child(-n+16),
+  [data-kui-fx~=step-progress][data-kui-step="16"] > *:nth-child(-n+17),
+  [data-kui-fx~=step-progress][data-kui-step="17"] > *:nth-child(-n+18),
+  [data-kui-fx~=step-progress][data-kui-step="18"] > *:nth-child(-n+19),
+  [data-kui-fx~=step-progress][data-kui-step="19"] > *:nth-child(-n+20) {
     opacity: 1;
     background: var(--accent, #d2691e);
   }
@@ -1647,7 +1684,7 @@
       opacity: 0.6;
     }
     50% {
-      scale: 1.15;
+      scale: var(--kui-pulse-scale, 1.15);
       opacity: 1;
     }
   }
@@ -1708,11 +1745,11 @@
   }
   [data-kui-fx~=spinner-dots] {
     display: inline-block;
-    width: 8px;
-    height: 8px;
+    width: var(--kui-dot-size, 8px);
+    height: var(--kui-dot-size, 8px);
     border-radius: 50%;
     background: currentColor;
-    box-shadow: -16px 0 currentColor, 16px 0 currentColor;
+    box-shadow: calc(var(--kui-dot-size, 8px) * -2) 0 currentColor, calc(var(--kui-dot-size, 8px) * 2) 0 currentColor;
     --kui-fx-spinner-dots-iterations: infinite;
   }
   @keyframes kui-spinner-dots {
@@ -1828,7 +1865,7 @@
       scale: 0.4;
     }
     60% {
-      scale: 1.18;
+      scale: var(--kui-pop-scale, 1.18);
     }
     100% {
       scale: 1;
@@ -1839,7 +1876,7 @@
       scale: 1;
     }
     50% {
-      scale: 1.3;
+      scale: var(--kui-pop-scale, 1.18);
     }
   }
   [data-kui-fx~=heart-burst] {
@@ -1850,7 +1887,7 @@
       scale: 1;
     }
     30% {
-      scale: 1.4;
+      scale: var(--kui-pop-scale, 1.18);
     }
     55% {
       scale: 0.9;
@@ -1863,23 +1900,23 @@
     background-image:
       radial-gradient(
         circle at 20% 20%,
-        #f43f5e 0 3px,
+        var(--kui-c1, #f43f5e) 0 3px,
         transparent 3px),
       radial-gradient(
         circle at 75% 15%,
-        #fbbf24 0 3px,
+        var(--kui-c2, #fbbf24) 0 3px,
         transparent 3px),
       radial-gradient(
         circle at 50% 75%,
-        #34d399 0 3px,
+        var(--kui-c3, #34d399) 0 3px,
         transparent 3px),
       radial-gradient(
         circle at 85% 65%,
-        #60a5fa 0 3px,
+        var(--kui-c4, #60a5fa) 0 3px,
         transparent 3px),
       radial-gradient(
         circle at 15% 65%,
-        #c084fc 0 3px,
+        var(--kui-c5, #c084fc) 0 3px,
         transparent 3px);
     background-repeat: no-repeat;
   }
@@ -1889,7 +1926,7 @@
       opacity: 0;
     }
     40% {
-      scale: 1.15;
+      scale: var(--kui-pop-scale, 1.18);
       opacity: 1;
     }
     100% {
@@ -1916,7 +1953,7 @@
       translate: 0 0;
     }
     45% {
-      translate: 0 36px;
+      translate: 0 var(--kui-pull-distance, 36px);
     }
     100% {
       translate: 0 0;
@@ -2023,13 +2060,13 @@
     transition: translate var(--kui-lift-duration, 220ms) var(--kui-lift-ease, ease-out);
   }
   [data-kui-fx~=lift]:focus-visible {
-    translate: 0 -6px;
+    translate: 0 calc(var(--kui-lift-distance, 6px) * -1);
   }
   [data-kui-fx~=lift-shadow] {
     transition: translate var(--kui-lift-shadow-duration, 220ms) var(--kui-lift-shadow-ease, ease-out), box-shadow var(--kui-lift-shadow-duration, 220ms) var(--kui-lift-shadow-ease, ease-out);
   }
   [data-kui-fx~=lift-shadow]:focus-visible {
-    translate: 0 -6px;
+    translate: 0 calc(var(--kui-lift-distance, 6px) * -1);
     box-shadow: 0 14px 28px -12px rgb(0 0 0 / 0.45);
   }
   [data-kui-fx~=shine-sweep] {
@@ -2044,7 +2081,7 @@
       linear-gradient(
         115deg,
         transparent 40%,
-        rgb(255 255 255 / 0.35) 50%,
+        var(--kui-c1, rgb(255 255 255 / 0.35)) 50%,
         transparent 60%);
     background-size: 220% 100%;
     background-position: 120% 0;
@@ -2232,10 +2269,10 @@
   }
   @media (hover: hover) and (pointer: fine) {
     [data-kui-fx~=lift]:hover {
-      translate: 0 -6px;
+      translate: 0 calc(var(--kui-lift-distance, 6px) * -1);
     }
     [data-kui-fx~=lift-shadow]:hover {
-      translate: 0 -6px;
+      translate: 0 calc(var(--kui-lift-distance, 6px) * -1);
       box-shadow: 0 14px 28px -12px rgb(0 0 0 / 0.45);
     }
     [data-kui-fx~=shine-sweep]:hover::after {
@@ -2312,7 +2349,7 @@
     background: var(--accent, #d2691e);
   }
   .kui-cursor-dot-invert {
-    background: #fff;
+    background: var(--kui-invert-color, #fff);
     mix-blend-mode: difference;
   }
   .kui-cursor-dot-label {
@@ -2320,7 +2357,7 @@
     padding: 0.4em 0.8em;
     border-radius: 999px;
     background: var(--accent, #d2691e);
-    color: #fff;
+    color: var(--kui-label-color, #fff);
     font-size: 0.75rem;
     font-family:
       ui-monospace,