@crewlethq/ui 0.49.0 → 0.50.0

package/dist/styles.css

@@ -26349,6 +26349,206 @@ svg.crewlet-select__chevron {
 }
 
 
+/* SetupWizard-Y5BTXZX5.css */
+/*
+ * SetupWizard: a setup walked step by step on a page of its own
+ * (SetupWizard.tsx).
+ *
+ * THE GRID. The header across the top, the footer across the bottom, and
+ * between them the rail (240px), the content (one column, at most 640px) and,
+ * from 70rem of the wizard's own width, the aside (320px). Under 70rem the
+ * aside takes the row under the content and the rail runs down beside both.
+ * Under the phone breakpoint every part is one column, in reading order.
+ */
+
+.crewlet-setup-wizard {
+  container-type: inline-size;
+  min-width: 0;
+}
+
+.crewlet-setup-wizard__frame {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+  grid-template-areas:
+    'head head'
+    'rail content'
+    'rail aside'
+    'foot foot';
+  grid-template-rows: auto auto 1fr auto;
+  column-gap: var(--spacing-8);
+  row-gap: var(--spacing-6);
+  min-width: 0;
+}
+
+.crewlet-setup-wizard__head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  grid-area: head;
+  min-width: 0;
+}
+
+.crewlet-setup-wizard__status {
+  display: inline-flex;
+  align-items: center;
+}
+
+/*
+ * THE RAIL stays in view while the content scrolls past it, as a column of
+ * the steps a reader can go back to.
+ */
+.crewlet-setup-wizard__rail {
+  position: sticky;
+  top: var(--spacing-5);
+  align-self: start;
+  grid-area: rail;
+  min-width: 0;
+}
+
+.crewlet-setup-wizard__content {
+  display: flex;
+  flex-direction: column;
+  grid-area: content;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 640px;
+  min-width: 0;
+}
+
+.crewlet-setup-wizard__heading {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+}
+
+/*
+ * The heading takes focus when the step changes. It keeps the browser's own
+ * focus treatment: after a press nothing is drawn, and after a key the ring
+ * shows where the reader now is.
+ */
+
+.crewlet-setup-wizard__lead {
+  margin: var(--spacing-2) 0 0;
+  max-width: var(--size-measure);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-body);
+}
+
+.crewlet-setup-wizard__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  margin-top: var(--spacing-6);
+  min-width: 0;
+}
+
+/* UNDER THE CONTENT, the aside is set off by one hairline, as AsideLayout's is. */
+.crewlet-setup-wizard__aside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  grid-area: aside;
+  box-sizing: border-box;
+  max-width: 640px;
+  min-width: 0;
+  padding-top: var(--spacing-6);
+  border-top: 1px solid var(--color-border-default);
+}
+
+/*
+ * THE FOOTER holds the step's actions at the bottom of the view while the
+ * content scrolls under it, on the sheet's own ground with a hairline above,
+ * and clears the device's safe area where it has one.
+ */
+.crewlet-setup-wizard__footer {
+  position: sticky;
+  bottom: 0;
+  z-index: var(--z-index-sticky);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  grid-area: foot;
+  padding: var(--spacing-3) 0 calc(var(--spacing-3) + env(safe-area-inset-bottom, var(--spacing-0)));
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-background);
+}
+
+/* BESIDE THE CONTENT, from 70rem of the wizard's own width: the aside holds in view. */
+@container (min-width: 70rem) {
+  .crewlet-setup-wizard__frame {
+    grid-template-columns: 240px minmax(0, 1fr) 320px;
+    grid-template-areas:
+      'head head head'
+      'rail content aside'
+      'foot foot foot';
+    grid-template-rows: auto 1fr auto;
+  }
+
+  .crewlet-setup-wizard__aside {
+    position: sticky;
+    top: var(--spacing-5);
+    align-self: start;
+    padding-top: 0;
+    border-top: 0;
+  }
+}
+
+/*
+ * ON A PHONE, one column in reading order: where the reader is, the step, the
+ * folded preview, and the actions. The rail is a row of steps under the
+ * position line, and scrolls away with the page rather than covering it.
+ */
+@media (width < 640px) {
+  .crewlet-setup-wizard__frame {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      'head'
+      'rail'
+      'content'
+      'aside'
+      'foot';
+    grid-template-rows: auto;
+    row-gap: var(--spacing-5);
+  }
+
+  .crewlet-setup-wizard__rail {
+    position: static;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+  }
+
+  .crewlet-setup-wizard__preview {
+    grid-area: aside;
+    min-width: 0;
+  }
+
+  .crewlet-setup-wizard__preview .crewlet-setup-wizard__aside {
+    padding-top: 0;
+    border-top: 0;
+  }
+}
+
+.crewlet-setup-wizard__position {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-setup-wizard__position-step {
+  color: var(--color-text-primary);
+}
+
+
 /* ShareDialog-4QDCBWMH.css */
 /*
  * Three blocks under the title: who to add and at what role, who has access,
@@ -29751,7 +29951,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Stepper-HW4JM3YH.css */
+/* Stepper-QEJI5RGX.css */
 /*
  * The stepper: where a sequence has got to (Stepper.tsx).
  *
@@ -29841,41 +30041,65 @@ svg.crewlet-select__chevron {
 }
 
 /*
- * THE CURRENT STEP, in its tone. The hairline goes transparent rather than
- * away, so the pill keeps its box and the row does not move by a pixel as the
- * current step advances along it, and so forced-colors mode, which draws a
- * transparent border in the system's own colour, still outlines it.
+ * THE CURRENT STEP, in its tone: the pill in a row, the mark in a column. The
+ * hairline goes transparent rather than away, so the pill keeps its box and
+ * the row does not move by a pixel as the current step advances along it, and
+ * so forced-colors mode, which draws a transparent border in the system's own
+ * colour, still outlines it.
  */
-.crewlet-stepper--info .crewlet-stepper__step--current > .crewlet-stepper__chip {
+.crewlet-stepper--info .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--info .crewlet-stepper__step--current .crewlet-stepper__mark {
   border-color: transparent;
   background: var(--color-feedback-info-soft);
   color: var(--color-feedback-info-ink);
 }
 
-.crewlet-stepper--success .crewlet-stepper__step--current > .crewlet-stepper__chip {
+.crewlet-stepper--success .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--success .crewlet-stepper__step--current .crewlet-stepper__mark {
   border-color: transparent;
   background: var(--color-feedback-success-soft);
   color: var(--color-feedback-success-ink);
 }
 
-.crewlet-stepper--warning .crewlet-stepper__step--current > .crewlet-stepper__chip {
+.crewlet-stepper--warning .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--warning .crewlet-stepper__step--current .crewlet-stepper__mark {
   border-color: transparent;
   background: var(--color-feedback-warning-soft);
   color: var(--color-feedback-warning-ink);
 }
 
-.crewlet-stepper--danger .crewlet-stepper__step--current > .crewlet-stepper__chip {
+.crewlet-stepper--danger .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--danger .crewlet-stepper__step--current .crewlet-stepper__mark {
   border-color: transparent;
   background: var(--color-feedback-danger-soft);
   color: var(--color-feedback-danger-ink);
 }
 
-.crewlet-stepper--brand .crewlet-stepper__step--current > .crewlet-stepper__chip {
+.crewlet-stepper--brand .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--brand .crewlet-stepper__step--current .crewlet-stepper__mark {
   border-color: transparent;
   background: var(--color-brand-accent-soft);
   color: var(--color-brand-accent-ink);
 }
 
+/*
+ * A STEP THAT NEEDS ATTENTION is the warning tint under the warning ink, the
+ * pair the palette suite holds to 4.5:1 over every rung, with the warning
+ * glyph: the pill of a step that is not current, and the mark of any step in
+ * a column. A CURRENT pill keeps its tone, so the row still says which step
+ * the reader is on, and carries the glyph in that tone's ink.
+ */
+.crewlet-stepper .crewlet-stepper__step--attention:not(.crewlet-stepper__step--current) > .crewlet-stepper__chip,
+.crewlet-stepper .crewlet-stepper__step--attention .crewlet-stepper__mark {
+  border-color: transparent;
+  background: var(--color-feedback-warning-soft);
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-stepper__warning {
+  flex: none;
+}
+
 /*
  * INSIDE THE PILL THE DOT IS THE PILL'S OWN INK, as a Tag's is, and for the
  * Tag's reason: StatusDot paints the fill step, measured as a mark on the
@@ -29908,8 +30132,157 @@ svg.crewlet-select__chevron {
  * emulated). Opting out also keeps shadows, so the pulsing dot's halo, which
  * is the tone's soft tint and no system colour, is held still inside it.
  */
+/*
+ * A STEP THAT CAN BE PICKED is a button with no look of its own: the pill or
+ * the row it carries draws it, and a hover lays the kit's hover overlay over
+ * a step at rest. The current step keeps its tint under the pointer, since a
+ * tone rule weighs more than the hover. The ring sits inside the step's own
+ * box, over the pill's hairline rather than a second line beside it.
+ */
+.crewlet-stepper__target {
+  appearance: none;
+  margin: 0;
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.crewlet-stepper__chip.crewlet-stepper__target {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+}
+
+.crewlet-stepper__target:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-stepper__target:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/*
+ * THE COLUMN, a setup wizard's rail. Each step is a row: a 20px mark (the
+ * check, the dot, the warning glyph, or the step's number for one still to
+ * come) and beside it the label, with the description and the status words
+ * under it. A hairline in the strong hairline's colour joins one mark to the
+ * next, 4px clear of each, drawn by the step it leaves so nothing trails the
+ * last. The mark is the pills' 20px, following the density as they do, and
+ * the label's line is the mark's height so the two stand level. The row's words follow the same three inks as the pills: the current
+ * step primary and medium, a finished one secondary, the rest tertiary.
+ */
+.crewlet-stepper--vertical {
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: 0;
+}
+
+.crewlet-stepper--vertical .crewlet-stepper__step {
+  position: relative;
+  display: block;
+}
+
+.crewlet-stepper--vertical .crewlet-stepper__step + .crewlet-stepper__step::before {
+  content: none;
+}
+
+.crewlet-stepper--vertical .crewlet-stepper__step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: calc(var(--spacing-2) + 20px * var(--density, 1) + 4px);
+  bottom: calc(4px - var(--spacing-2));
+  left: calc(var(--spacing-2) + 10px * var(--density, 1));
+  width: 1px;
+  background: var(--color-border-strong);
+  pointer-events: none;
+}
+
+.crewlet-stepper__row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-md);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-stepper__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: calc(20px * var(--density, 1));
+  height: calc(20px * var(--density, 1));
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.crewlet-stepper__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-stepper__title {
+  line-height: calc(20px * var(--density, 1));
+  overflow-wrap: anywhere;
+}
+
+.crewlet-stepper__row .crewlet-stepper__label {
+  overflow: visible;
+}
+
+.crewlet-stepper__description,
+.crewlet-stepper__note {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-stepper__step--attention .crewlet-stepper__note {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-stepper__step--done > .crewlet-stepper__row {
+  color: var(--color-text-secondary);
+}
+
+/*
+ * THE CURRENT ROW is lifted as the rail's current row is (SidebarNav): the
+ * elevated rung inside a one-pixel hairline drawn as an outline, so forced
+ * colors keeps it, and it does not move the row by a pixel.
+ */
+.crewlet-stepper__step--current > .crewlet-stepper__row {
+  outline: 1px solid var(--color-border-default);
+  outline-offset: -1px;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-stepper__step--current .crewlet-stepper__description,
+.crewlet-stepper__step--current .crewlet-stepper__note {
+  font-weight: var(--font-weight-regular);
+}
+
 @media (forced-colors: active) {
-  .crewlet-stepper .crewlet-stepper__step--current > .crewlet-stepper__chip {
+  .crewlet-stepper .crewlet-stepper__step--current > .crewlet-stepper__chip,
+  .crewlet-stepper .crewlet-stepper__step--current .crewlet-stepper__mark {
     forced-color-adjust: none;
     border-color: Highlight;
     background: Highlight;
@@ -29924,9 +30297,15 @@ svg.crewlet-select__chevron {
     animation: none;
   }
 
-  .crewlet-stepper__step + .crewlet-stepper__step::before {
+  .crewlet-stepper__step + .crewlet-stepper__step::before,
+  .crewlet-stepper--vertical .crewlet-stepper__step:not(:last-child)::after {
     background: GrayText;
   }
+
+  .crewlet-stepper__target:hover {
+    outline: 1px solid Highlight;
+    outline-offset: var(--size-focus-ring-inset-offset);
+  }
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.49.0",
+  "version": "0.50.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.49.0",
-    "@crewlethq/tokens": "0.49.0",
+    "@crewlethq/icons": "0.50.0",
+    "@crewlethq/tokens": "0.50.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/Stepper-HW4JM3YH.css

@@ -1,176 +0,0 @@
-/*
- * The stepper: where a sequence has got to (Stepper.tsx).
- *
- * THE APPROVED DESIGN'S STEP ROW. Each step is a 20px pill inside the default
- * hairline, the 11px step at the medium weight, 8px inside each end and 5px
- * between a mark and the word; two pills are joined by a 10px rule in the
- * strong hairline's colour with 6px either side of it. A finished step is the
- * secondary ink behind a check, the current step its tone's soft tint under
- * its ink behind its dot, and a step still to come the tertiary ink.
- *
- * EVERY INK IS A MEASURED PAIR. The secondary and tertiary steps are held to
- * 4.5:1 on every opaque rung, and each tone's ink to 4.5:1 on its own soft
- * tint over every rung, by the palette suite in @crewlethq/tokens; the pill
- * draws nothing else. The current pill is the design's `work-soft` under
- * `work-ink` in the default tone, and a Tag's colours in every tone, which is
- * what a chip naming a state is in this kit.
- */
-
-.crewlet-stepper {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  /* The design's 6px between a pill and the rule beside it: a step and a half. */
-  gap: calc(var(--spacing-1) * 1.5);
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.crewlet-stepper__step {
-  display: inline-flex;
-  align-items: center;
-  gap: calc(var(--spacing-1) * 1.5);
-  min-width: 0;
-}
-
-/*
- * THE RULE BETWEEN TWO STEPS is drawn by the second of them, so a sequence of
- * one draws none and nothing trails the last. A pseudo-element, because it is
- * furniture: it carries nothing a reader has to be told, and the list already
- * says the steps are in order. 10px by a hairline, the measure of this one
- * mark, and fixed at every density as a hairline is.
- */
-.crewlet-stepper__step + .crewlet-stepper__step::before {
-  content: '';
-  flex: none;
-  width: 10px;
-  height: 1px;
-  background: var(--color-border-strong);
-}
-
-.crewlet-stepper__chip {
-  display: inline-flex;
-  align-items: center;
-  /* The design's 5px between the check or the dot and the word. */
-  gap: calc(var(--spacing-1) * 1.25);
-  box-sizing: border-box;
-  /* The design's 20px pill, which follows the density with every other step
-     height in the kit. It labels and takes no press, so the 24px target floor
-     is not its to clear. */
-  height: calc(20px * var(--density, 1));
-  max-width: 100%;
-  padding: 0 var(--spacing-2);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-pill);
-  color: var(--color-text-tertiary);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-2xs);
-  font-weight: var(--font-weight-medium);
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.crewlet-stepper__label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.crewlet-stepper__check {
-  flex: none;
-}
-
-.crewlet-stepper__step--done > .crewlet-stepper__chip {
-  color: var(--color-text-secondary);
-}
-
-/*
- * THE CURRENT STEP, in its tone. The hairline goes transparent rather than
- * away, so the pill keeps its box and the row does not move by a pixel as the
- * current step advances along it, and so forced-colors mode, which draws a
- * transparent border in the system's own colour, still outlines it.
- */
-.crewlet-stepper--info .crewlet-stepper__step--current > .crewlet-stepper__chip {
-  border-color: transparent;
-  background: var(--color-feedback-info-soft);
-  color: var(--color-feedback-info-ink);
-}
-
-.crewlet-stepper--success .crewlet-stepper__step--current > .crewlet-stepper__chip {
-  border-color: transparent;
-  background: var(--color-feedback-success-soft);
-  color: var(--color-feedback-success-ink);
-}
-
-.crewlet-stepper--warning .crewlet-stepper__step--current > .crewlet-stepper__chip {
-  border-color: transparent;
-  background: var(--color-feedback-warning-soft);
-  color: var(--color-feedback-warning-ink);
-}
-
-.crewlet-stepper--danger .crewlet-stepper__step--current > .crewlet-stepper__chip {
-  border-color: transparent;
-  background: var(--color-feedback-danger-soft);
-  color: var(--color-feedback-danger-ink);
-}
-
-.crewlet-stepper--brand .crewlet-stepper__step--current > .crewlet-stepper__chip {
-  border-color: transparent;
-  background: var(--color-brand-accent-soft);
-  color: var(--color-brand-accent-ink);
-}
-
-/*
- * INSIDE THE PILL THE DOT IS THE PILL'S OWN INK, as a Tag's is, and for the
- * Tag's reason: StatusDot paints the fill step, measured as a mark on the
- * opaque rungs, and here it stands on the tone's soft tint instead, where
- * nothing measures it. The ink is the step that IS measured on that tint, at
- * 4.5:1, and the colour of the word beside it. A pulsing dot keeps
- * StatusDot's halo, the same soft step drawn once more over the pill, which
- * stands dE 3.92 off it at the least (the light warning pill on the frame).
- *
- * Two classes deep, so it beats StatusDot's own tone rule whichever order the
- * bundle writes the two files in.
- */
-.crewlet-stepper .crewlet-stepper__dot {
-  background: currentColor;
-}
-
-/*
- * FORCED COLORS repaints every background to Canvas, which takes the current
- * step's tint and its dot, so the one step the row is about would read like
- * any other. The current pill is drawn as the system draws a selection,
- * HighlightText on Highlight, with its dot in the same ink, and the rule
- * between two steps in GrayText; the chips' hairlines are borders, which the
- * mode keeps in its own colour.
- *
- * THE CURRENT PILL OPTS OUT OF THE ADJUSTMENT, which is safe only because
- * every colour it draws in that mode is a system colour. Left to it, Chromium
- * paints a Canvas backplate behind every run of text, and HighlightText is
- * written for Highlight, not for Canvas: in a dark high-contrast theme the
- * step's words drew black on black (measured in Chromium 153 with the mode
- * emulated). Opting out also keeps shadows, so the pulsing dot's halo, which
- * is the tone's soft tint and no system colour, is held still inside it.
- */
-@media (forced-colors: active) {
-  .crewlet-stepper .crewlet-stepper__step--current > .crewlet-stepper__chip {
-    forced-color-adjust: none;
-    border-color: Highlight;
-    background: Highlight;
-    color: HighlightText;
-  }
-
-  .crewlet-stepper .crewlet-stepper__dot {
-    background: HighlightText;
-  }
-
-  .crewlet-stepper .crewlet-stepper__dot.is-pulsing::after {
-    animation: none;
-  }
-
-  .crewlet-stepper__step + .crewlet-stepper__step::before {
-    background: GrayText;
-  }
-}