@jobber/components 8.8.0 → 8.8.1

package/dist/styles.css

@@ -9,6 +9,14 @@
  *   3. The active <circle>'s stroke-dasharray expands and contracts so the
  *      visible arc length grows and shrinks (Layer 3); stroke-dashoffset
  *      slides the arc around the ring across the cycle.
+ *
+ * Durations are Material's spec scaled by 1.15× for a calmer pace
+ * (Material: 1568 / 5332 / 1333). The cycle:arc ratio is held at exactly
+ * 4:1 (6132 = 4 × 1533) so the four blooms per rotation stay evenly spaced.
+ *
+ * The `small` variant uses only Layer 1 — a fixed-length arc spun at a
+ * constant speed (~1.8× faster than base) — because the layered
+ * expand/rotate motion reads as too busy at the smaller size.
  */
 
 .YST686vLR3c- {
@@ -43,24 +51,14 @@
   height: var(--space-base);
 }
 
-/*
- * Layer 1 — continuous linear rotation on the SVG.
- *
- * The three indicator durations (1568ms outer rotation, 5332ms inner
- * 8-phase cycle, 1333ms arc expand/contract) are taken from Material
- * Web's published progress-motion spec. They are tuned against each
- * other to produce the canonical Material rhythm and are intentionally
- * inlined as literals because no other component currently consumes
- * them; promote them to design tokens once a second consumer (e.g. a
- * future `ProgressIndicator`) needs the same values.
- */
+/* Layer 1 — continuous linear rotation on the SVG. */
 
 .Av9z-aLocss- {
   display: block;
   width: 100%;
   height: 100%;
-  -webkit-animation: WvHFS--Nm80- 1568ms linear infinite;
-          animation: WvHFS--Nm80- 1568ms linear infinite;
+  -webkit-animation: WvHFS--Nm80- 1803ms linear infinite;
+          animation: WvHFS--Nm80- 1803ms linear infinite;
   will-change: transform;
 }
 
@@ -78,14 +76,12 @@
 }
 
 /*
- * Layer 2 + 3 — the active arc.
+ * Layer 2 + 3 — the active arc. The circle has circumference 2π·20 ≈ 125.66
+ * (SVG units); the "200" gap exceeds it so only one segment shows at a time.
+ * stroke-linecap: round gives the soft pill-shaped tips.
  *
- * The circle has circumference 2π·20 ≈ 125.66 (SVG units). The dasharray
- * (visible, gap) interpolates so the visible portion grows from ~1 unit to
- * ~95 units, while the dashoffset slides the arc around the ring. The
- * combined cycle is the canonical Material rhythm.
- *
- * stroke-linecap: round produces the soft pill-shaped tips on the arc.
+ * The expand animation is delayed by half its period so it starts fully
+ * bloomed and its phase is offset from the rotation start.
  */
 
 ._9XO0290QNCY- {
@@ -96,16 +92,35 @@
   stroke-linecap: round;
   -webkit-transform-origin: center;
           transform-origin: center;
-  -webkit-animation:
-    SHHICknKvqA- 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,
-    _0m0Nzc5awnA- 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-          animation:
-    SHHICknKvqA- 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,
-    _0m0Nzc5awnA- 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  -webkit-animation: SHHICknKvqA- 6132ms cubic-bezier(0.4, 0, 0.2, 1) infinite
+      both,
+    _0m0Nzc5awnA- 1533ms linear infinite both;
+          animation: SHHICknKvqA- 6132ms cubic-bezier(0.4, 0, 0.2, 1) infinite
+      both,
+    _0m0Nzc5awnA- 1533ms linear infinite both;
+  -webkit-animation-delay: 0s, -766.5ms;
+          animation-delay: 0s, -766.5ms;
+}
+
+/*
+ * Small renders as a simple fixed-length arc spun only by the SVG
+ * (Layer 1). The 8-phase rotation (Layer 2) and the tail-chasing expand
+ * (Layer 3) read as too busy at this size, so both are disabled and the
+ * arc is given a constant length instead. It also spins ~1.8× faster
+ * (1803ms ÷ 1.8 ≈ 1000ms) so the simpler single arc still feels lively.
+ */
+
+._888S5Y2IeZ8- .Av9z-aLocss- {
+  -webkit-animation-duration: 1000ms;
+          animation-duration: 1000ms;
 }
 
 ._888S5Y2IeZ8- ._9XO0290QNCY- {
   stroke-width: 6;
+  stroke-dasharray: 40, 200;
+  stroke-dashoffset: 0;
+  -webkit-animation: none;
+          animation: none;
 }
 
 @-webkit-keyframes WvHFS--Nm80- {
@@ -196,38 +211,53 @@
 
 /*
  * Layer 3 — expand/contract the visible arc length via stroke-dasharray
- * while shifting it around the ring via stroke-dashoffset. The "200" gap
- * value exceeds the circle's circumference, ensuring only one stroke
- * segment is visible at a time.
+ * while sliding it around the ring via stroke-dashoffset.
+ *
+ * Rhythm (cycle = 4 × arc, so one breath = two rotation phases):
+ *   - bloom open  0 → 50%   (one full rotation phase)
+ *   - deflate     50 → 80%  (tail catches the head)
+ *   - hold        80 → 100% (a beat before re-blooming)
+ *
+ * The minimum length stays at 8 (not ~0) so the arc never pinches to a dot,
+ * and the 100% keyframe matches 0% with the offset advanced one full
+ * circumference (≈125.66) so the loop is seamless — no catch-up blink.
  */
 
 @-webkit-keyframes _0m0Nzc5awnA- {
   0% {
-    stroke-dasharray: 1, 200;
+    stroke-dasharray: 8, 200;
     stroke-dashoffset: 0;
   }
   50% {
     stroke-dasharray: 90, 200;
     stroke-dashoffset: -35;
   }
+  80% {
+    stroke-dasharray: 8, 200;
+    stroke-dashoffset: -125.66;
+  }
   100% {
-    stroke-dasharray: 90, 200;
-    stroke-dashoffset: -125;
+    stroke-dasharray: 8, 200;
+    stroke-dashoffset: -125.66;
   }
 }
 
 @keyframes _0m0Nzc5awnA- {
   0% {
-    stroke-dasharray: 1, 200;
+    stroke-dasharray: 8, 200;
     stroke-dashoffset: 0;
   }
   50% {
     stroke-dasharray: 90, 200;
     stroke-dashoffset: -35;
   }
+  80% {
+    stroke-dasharray: 8, 200;
+    stroke-dashoffset: -125.66;
+  }
   100% {
-    stroke-dasharray: 90, 200;
-    stroke-dashoffset: -125;
+    stroke-dasharray: 8, 200;
+    stroke-dashoffset: -125.66;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.8.0",
+  "version": "8.8.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -556,5 +556,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "954f61ec1d4a5015f706979a120c55af6115a711"
+  "gitHead": "0bea341f82566e833ac0fe3486e829dc706918fe"
 }