@crewlethq/ui 0.57.2 → 0.59.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;
-  }
 }
 
 
@@ -26424,7 +26416,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* RunChip-I2S4VZ3R.css */
+/* RunChip-D3JYPTTO.css */
 /*
  * A request's state on the disclosure trigger. Only what differs from the
  * disclosure is said here: the trigger is as wide as its words (not the whole
@@ -26448,7 +26440,14 @@ button.crewlet-presence-stack__member:focus-visible {
   font-variant-numeric: tabular-nums;
 }
 
-.crewlet-run-chip__separator {
+/*
+ * The separator is drawn, not typed: generated content with no alternative
+ * text, so neither a screen reader nor a copy picks it up beside the comma
+ * the title already says.
+ */
+.crewlet-run-chip__meta::before {
+  content: '\00b7' / '';
+  margin-inline-end: var(--spacing-1);
   color: var(--color-text-tertiary);
 }
 
@@ -31288,22 +31287,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 +31369,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;
@@ -31830,7 +31883,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* StatusCard-6RPEE6UU.css */
+/* StatusCard-AMOI6GBK.css */
 /*
  * A record with a state. The card, its head, its body and its foot are
  * Card's; only what a status card adds is said here.
@@ -31894,6 +31947,115 @@ svg.crewlet-select__chevron {
   }
 }
 
+/*
+ * A RESULT FOLDED TO ITS HEAD. The title is the button that opens it, with
+ * the one chevron every disclosure here draws, turned the same way. The head
+ * may wrap: on a narrow card the utilities a folded card keeps go under the
+ * title rather than cutting it to nothing.
+ */
+.crewlet-status-card--folded > .crewlet-card__header {
+  flex-wrap: wrap;
+  row-gap: var(--spacing-1);
+}
+
+/* `hidden` has to win over the body's own `display: flex`. */
+.crewlet-status-card__body[hidden] {
+  display: none;
+}
+
+.crewlet-status-card__fold-title {
+  min-width: 0;
+}
+
+/*
+ * The button keeps the title's type and pulls its padding into the gutter, so
+ * the chevron sits on the card's text edge. NEUTRAL on hover, as every
+ * disclosure trigger is.
+ */
+.crewlet-status-card__toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+  max-width: calc(100% + var(--spacing-2));
+  min-height: var(--size-row-sm);
+  margin-inline-start: calc(var(--spacing-2) * -1);
+  padding: var(--spacing-1) var(--spacing-2);
+  border: none;
+  border-radius: var(--radius-xs);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-status-card__toggle:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-status-card__toggle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-status-card__chevron {
+  flex: none;
+  color: var(--color-text-tertiary);
+  transform: rotate(-90deg);
+  transition: transform var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-status-card__toggle[aria-expanded='true'] .crewlet-status-card__chevron {
+  transform: rotate(0deg);
+}
+
+/* The title keeps its words and the summary gives up its tail first. */
+.crewlet-status-card__toggle-title {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * The dot is drawn, not written: generated content with no alternative text,
+ * so it is neither read nor copied, and the hidden comma before the summary
+ * is what both say instead.
+ */
+.crewlet-status-card__summary {
+  flex: 0 100 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-status-card__summary::before {
+  content: '\00b7' / '';
+  margin-inline-end: var(--spacing-1);
+}
+
+/* A folded card's utilities, at the end of its head, one small gap apart. */
+.crewlet-status-card__head-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-status-card__toggle,
+  .crewlet-status-card__chevron {
+    transition: none;
+  }
+}
+
 
 /* StatusDot-7OMCQCZF.css */
 /*
@@ -38225,15 +38387,21 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* VisuallyHidden-L552H7OA.css */
+/* VisuallyHidden-AOEXU5EB.css */
 /*
  * Hidden from the eye, read by everything else.
  *
  * The clip rectangle rather than `display: none` or `visibility: hidden`:
  * those two remove the text from the accessibility tree as well as from the
  * page. One pixel rather than zero, because a zero-sized element is skipped by
- * some screen readers. `white-space: nowrap` stops a long sentence wrapping
- * inside that pixel and being read a word at a time.
+ * some screen readers.
+ *
+ * `white-space: pre` for two reasons. It stops a long sentence wrapping inside
+ * that pixel and being read a word at a time. And it keeps the spaces at the
+ * text's edges: the element is positioned, so it lays out as a block of its
+ * own, and a block drops the collapsible spaces that start or end its line.
+ * "removed " came out as "removed", and the label ran into the word after it
+ * in what a screen reader said and in what a copy carried.
  */
 
 .crewlet-visually-hidden {
@@ -38245,7 +38413,7 @@ svg.crewlet-time-window__tick {
   border: 0;
   overflow: hidden;
   clip-path: inset(50%);
-  white-space: nowrap;
+  white-space: pre;
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.57.2",
+  "version": "0.59.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.59.0",
+    "@crewlethq/tokens": "0.59.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;
-  }
-}

package/dist/StatusCard-6RPEE6UU.css

@@ -1,62 +0,0 @@
-/*
- * A record with a state. The card, its head, its body and its foot are
- * Card's; only what a status card adds is said here.
- */
-
-/* The body holds a sentence, a list and a note, one gap apart. */
-.crewlet-status-card__body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-3);
-  min-width: 0;
-  font-size: var(--font-size-compact);
-  line-height: var(--font-line-height-normal);
-  color: var(--color-text-primary);
-}
-
-.crewlet-status-card__body > p {
-  margin: 0;
-}
-
-/* Settled: the body steps back so the strip at the foot reads first. */
-.crewlet-status-card--settled .crewlet-status-card__body {
-  color: var(--color-text-secondary);
-}
-
-/* The strip fills its flush footer edge to edge. */
-.crewlet-status-card__strip {
-  display: block;
-}
-
-/*
- * THE FOOT'S ONE RULE. A decision ends the row; utilities start it, with a
- * ghost button at either end pulled out by its padding and edge so its glyph
- * sits on the card's text edge.
- */
-.crewlet-status-card__actions {
-  flex-wrap: wrap;
-  container: crewlet-status-card-actions / inline-size;
-}
-
-.crewlet-status-card__actions--end {
-  justify-content: flex-end;
-}
-
-.crewlet-status-card__actions--start {
-  justify-content: flex-start;
-}
-
-.crewlet-status-card__actions--start > .crewlet-btn--ghost.crewlet-btn--small:first-child {
-  margin-inline-start: calc(-1 * (var(--spacing-2) + 1px));
-}
-
-.crewlet-status-card__actions--start > .crewlet-btn--ghost.crewlet-btn--small:last-child {
-  margin-inline-end: calc(-1 * (var(--spacing-2) + 1px));
-}
-
-/* A decision on a narrow card (a phone sheet): its buttons share the row as blocks. */
-@container crewlet-status-card-actions (width < 328px) {
-  .crewlet-status-card__actions--end > .crewlet-btn {
-    flex: 1 1 0;
-  }
-}

package/dist/VisuallyHidden-L552H7OA.css

@@ -1,21 +0,0 @@
-/*
- * Hidden from the eye, read by everything else.
- *
- * The clip rectangle rather than `display: none` or `visibility: hidden`:
- * those two remove the text from the accessibility tree as well as from the
- * page. One pixel rather than zero, because a zero-sized element is skipped by
- * some screen readers. `white-space: nowrap` stops a long sentence wrapping
- * inside that pixel and being read a word at a time.
- */
-
-.crewlet-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}

package/dist/chunk-WDIVALLP.js

@@ -1,51 +0,0 @@
-import { Tag } from './chunk-KYIAFNU7.js';
-import { Card } from './chunk-INHXF2CL.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './StatusCard-6RPEE6UU.css';
-import { useId } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function StatusCard({
-  title,
-  subtitle,
-  subtitlePlacement,
-  status,
-  settled = false,
-  bodyPadding = "md",
-  strip,
-  actions,
-  actionsAlign = "end",
-  className,
-  children,
-  ...rest
-}) {
-  const id = useId();
-  const titleId = `${id}-title`;
-  const statusId = `${id}-status`;
-  return /* @__PURE__ */ jsxs(
-    Card,
-    {
-      ...rest,
-      as: "section",
-      "aria-labelledby": status ? `${titleId} ${statusId}` : titleId,
-      className: cx("crewlet-status-card", settled && "crewlet-status-card--settled", className),
-      "data-settled": settled || void 0,
-      children: [
-        /* @__PURE__ */ jsx(
-          Card.Header,
-          {
-            subtitle,
-            subtitlePlacement,
-            actions: status ? /* @__PURE__ */ jsx(Tag, { id: statusId, size: "sm", variant: status.tone, leadingIcon: status.icon, children: status.label }) : void 0,
-            children: /* @__PURE__ */ jsx(Card.Title, { id: titleId, truncate: true, children: title })
-          }
-        ),
-        children === void 0 || children === null || children === false ? null : /* @__PURE__ */ jsx(Card.Body, { padding: bodyPadding, className: "crewlet-status-card__body", children }),
-        strip === void 0 || strip === null || strip === false ? null : /* @__PURE__ */ jsx(Card.Footer, { padding: "none", className: "crewlet-status-card__strip", children: strip }),
-        actions === void 0 || actions === null || actions === false ? null : /* @__PURE__ */ jsx(Card.Footer, { className: cx("crewlet-status-card__actions", `crewlet-status-card__actions--${actionsAlign}`), children: actions })
-      ]
-    }
-  );
-}
-
-export { StatusCard };