@crewlethq/ui 0.57.2 → 0.58.0

package/dist/styles.css

@@ -17852,7 +17852,7 @@ a.crewlet-icon-btn {
 .crewlet-icon-tile--blue { --crewlet-icon-tile-fill: var(--color-node-blue-fill); --crewlet-icon-tile-ink: var(--color-node-blue-ink); }
 
 
-/* ImageUpload-NVGMN7DP.css */
+/* ImageUpload-CYC3Y7M2.css */
 /*
  * ImageUpload, the click-to-upload affordance built on Avatar.
  *
@@ -17989,19 +17989,14 @@ a.crewlet-icon-btn {
   font-weight: var(--font-weight-medium);
 }
 
+/*
+ * The package's one ring (Spinner), sized to the control. It takes the
+ * overlay's on-scrim ink as its current colour, and its turn, its arc and its
+ * reduced-motion stop are Spinner.css's: this rule sets only the em it is
+ * measured in.
+ */
 .crewlet-image-upload__spinner {
-  width: calc(var(--crewlet-image-upload-size) * 0.3);
-  height: calc(var(--crewlet-image-upload-size) * 0.3);
-  border-radius: var(--radius-circle);
-  border: 2px solid var(--color-surface-scrim);
-  border-top-color: var(--color-text-on-scrim);
-  animation: crewlet-image-upload-spin calc(var(--motion-duration-slow) * 2.5) linear infinite;
-}
-
-@keyframes crewlet-image-upload-spin {
-  to {
-    transform: rotate(360deg);
-  }
+  font-size: calc(var(--crewlet-image-upload-size) * 0.3);
 }
 
 /*
@@ -18053,19 +18048,16 @@ a.crewlet-icon-btn {
 }
 
 /*
- * The ring holds still. The trigger already carries aria-busy, and the control
- * is disabled while the upload is out, so nothing about the state is carried
- * by the motion alone.
+ * The overlay and the remove target hold still. The ring is Spinner's, which
+ * stops itself. The trigger already carries aria-busy, and the control is
+ * disabled while the upload is out, so nothing about the state is carried by
+ * the motion alone.
  */
 @media (prefers-reduced-motion: reduce) {
   .crewlet-image-upload__overlay,
   .crewlet-image-upload__remove {
     transition: none;
   }
-
-  .crewlet-image-upload__spinner {
-    animation: none;
-  }
 }
 
 
@@ -31288,22 +31280,64 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Spinner-XZ2TVYE5.css */
+/* Spinner-PM37OCHI.css */
 /*
  * The package's one ring. See Spinner.tsx for why it is inline-block, why it
  * stays open when it stops, and why its ink is the current colour.
  */
+
+/*
+ * THE ARC'S LENGTH, registered so it can be animated. An unregistered custom
+ * property animates in a single step at the halfway point, which would make
+ * the arc jump rather than breathe. Its initial value is the arc at rest: three
+ * quarters of the ring, the right quarter open.
+ */
+@property --crewlet-spinner-arc {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 270deg;
+}
+
+/*
+ * The ring is a full 2px border cut to an arc by a mask, so the stroke is the
+ * same 2px at every size and the arc's length can move while the ring turns.
+ * The arc is centred on the left (270deg), so it grows and shrinks at both ends
+ * at once and the open quarter at rest sits on the right. Each end is feathered
+ * over a few degrees, so it reads as a soft cap rather than a hard cut. A mask
+ * reads only alpha, so its black is opacity rather than a colour.
+ */
 .crewlet-spinner {
+  --crewlet-spinner-from: calc(270deg - var(--crewlet-spinner-arc) / 2);
   display: inline-block;
   box-sizing: border-box;
   flex: none;
   width: 1em;
   height: 1em;
   border: 2px solid currentColor;
-  border-right-color: transparent;
   border-radius: var(--radius-circle);
   opacity: 0.7;
-  animation: crewlet-spinner-turn var(--motion-duration-slow) linear infinite;
+  -webkit-mask-image: conic-gradient(
+    from var(--crewlet-spinner-from),
+    transparent 0deg,
+    #000 6deg,
+    #000 calc(var(--crewlet-spinner-arc) - 6deg),
+    transparent var(--crewlet-spinner-arc)
+  );
+  mask-image: conic-gradient(
+    from var(--crewlet-spinner-from),
+    transparent 0deg,
+    #000 6deg,
+    #000 calc(var(--crewlet-spinner-arc) - 6deg),
+    transparent var(--crewlet-spinner-arc)
+  );
+  /*
+   * Two motions, one definition for every ring in the package: one steady turn
+   * a second, and the arc breathing between a quarter and three quarters of the
+   * ring on a slower cycle, so the ends ease apart and together while it turns.
+   */
+  animation:
+    crewlet-spinner-turn var(--motion-duration-turn) linear infinite,
+    crewlet-spinner-sweep var(--motion-duration-sweep) var(--motion-easing-in-out) infinite;
 }
 
 /* The glyph scale of @crewlethq/icons: xs 12px, sm 14px, md 16px. */
@@ -31328,8 +31362,20 @@ svg.crewlet-select__chevron {
   }
 }
 
+@keyframes crewlet-spinner-sweep {
+  0%,
+  100% {
+    --crewlet-spinner-arc: 90deg;
+  }
+
+  50% {
+    --crewlet-spinner-arc: 270deg;
+  }
+}
+
 /* It stops, and keeps its open quarter: a closed ring reads as an empty status
-   circle, the open one still reads as pending. */
+   circle, the open one still reads as pending. With both motions off, the arc
+   takes its registered initial value, three quarters of the ring. */
 @media (prefers-reduced-motion: reduce) {
   .crewlet-spinner {
     animation: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.57.2",
+  "version": "0.58.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.57.2",
-    "@crewlethq/tokens": "0.57.2",
+    "@crewlethq/icons": "0.58.0",
+    "@crewlethq/tokens": "0.58.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/Spinner-XZ2TVYE5.css

@@ -1,46 +0,0 @@
-/*
- * The package's one ring. See Spinner.tsx for why it is inline-block, why it
- * stays open when it stops, and why its ink is the current colour.
- */
-.crewlet-spinner {
-  display: inline-block;
-  box-sizing: border-box;
-  flex: none;
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: var(--radius-circle);
-  opacity: 0.7;
-  animation: crewlet-spinner-turn var(--motion-duration-slow) linear infinite;
-}
-
-/* The glyph scale of @crewlethq/icons: xs 12px, sm 14px, md 16px. */
-.crewlet-spinner--xs {
-  width: var(--font-size-xs);
-  height: var(--font-size-xs);
-}
-
-.crewlet-spinner--sm {
-  width: var(--font-size-sm);
-  height: var(--font-size-sm);
-}
-
-.crewlet-spinner--md {
-  width: var(--font-size-md);
-  height: var(--font-size-md);
-}
-
-@keyframes crewlet-spinner-turn {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* It stops, and keeps its open quarter: a closed ring reads as an empty status
-   circle, the open one still reads as pending. */
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-spinner {
-    animation: none;
-  }
-}