@crewlethq/ui 0.44.0 → 0.46.0

package/dist/styles.css

@@ -3986,6 +3986,54 @@ a.crewlet-make-row__item:active {
 }
 
 
+/* AsideLayout-TH5SQZNK.css */
+/*
+ * AsideLayout: a main column with an aside beside it from 56rem of its own
+ * width, and after it below that (AsideLayout.tsx).
+ */
+
+.crewlet-aside-layout {
+  container-type: inline-size;
+  min-width: 0;
+}
+
+.crewlet-aside-layout__columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  gap: var(--spacing-7);
+}
+
+/* EACH COLUMN IS A STACK one step apart, so the blocks in it stand apart
+   evenly without each carrying a margin of its own. */
+.crewlet-aside-layout__main,
+.crewlet-aside-layout__aside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  min-width: 0;
+}
+
+/* FOLLOWING THE MAIN COLUMN, the aside is set off by one hairline, so its
+   facts read as about the page rather than as more of it. */
+.crewlet-aside-layout__aside {
+  padding-top: var(--spacing-6);
+  border-top: 1px solid var(--color-border-default);
+}
+
+@container (min-width: 56rem) {
+  .crewlet-aside-layout__columns {
+    grid-template-columns: minmax(0, 1fr) var(--crewlet-aside-layout-aside, 18rem);
+    gap: var(--spacing-8);
+  }
+
+  .crewlet-aside-layout__aside {
+    padding-top: 0;
+    border-top: 0;
+  }
+}
+
+
 /* AuthLayout-ODHBUPHQ.css */
 /*
  * The sign-in page: one narrow column near the top of the window.
@@ -6958,7 +7006,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* CatalogTile-VPSLCKJE.css */
+/* CatalogTile-26XN7L2A.css */
 /*
  * CatalogTile: mark, name and state, one sentence, and a foot with a quiet
  * fact and one action.
@@ -7117,20 +7165,25 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   height: var(--size-row-sm);
 }
 
+/*
+ * THE NAME IS NEVER CUT. It is what the tile is: "C…" names nothing. Where
+ * the line is short of room the state and the fact wrap under the name rather
+ * than squeezing it, and a name longer than the whole line wraps at a word.
+ * The grid folds a compact tile's tracks before it comes to that (see
+ * TileGrid.css), so the wrap is the fallback and not the layout.
+ */
 .crewlet-catalog-tile--compact .crewlet-catalog-tile__title {
   flex: 1 1 auto;
   flex-direction: row;
+  flex-wrap: wrap;
   align-items: center;
-  gap: var(--spacing-2);
+  gap: 0 var(--spacing-2);
   padding-top: 0;
 }
 
 .crewlet-catalog-tile--compact .crewlet-catalog-tile__name {
-  flex: 0 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  flex: 0 0 auto;
+  max-width: 100%;
 }
 
 .crewlet-catalog-tile--compact .crewlet-catalog-tile__status {
@@ -7138,7 +7191,8 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 .crewlet-catalog-tile--compact .crewlet-catalog-tile__meta {
-  flex: 0 1 auto;
+  flex: none;
+  max-width: 100%;
 }
 
 .crewlet-catalog-tile--compact .crewlet-catalog-tile__description {
@@ -7176,6 +7230,38 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* CharacterCount-S735DICR.css */
+/*
+ * The count of a limited field (CharacterCount.tsx): the help line's own small
+ * step, in its quiet ink until the limit is close.
+ */
+
+.crewlet-character-count {
+  flex: none;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  /* Figures of one width, so the count does not shift as a digit changes. */
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+.crewlet-character-count__of {
+  margin-inline: 0.15em;
+}
+
+.crewlet-character-count--near {
+  color: var(--color-feedback-warning-ink);
+}
+
+/* Past the limit the count is the refusal's ink and weight, so the number
+   that says what to fix is the loudest thing on the line. */
+.crewlet-character-count--over {
+  color: var(--color-feedback-danger-ink);
+  font-weight: var(--font-weight-medium);
+}
+
+
 /* CharacterPicker-ZEYIKUNQ.css */
 /*
  * The grid of characters.
@@ -14926,7 +15012,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* EmptyState-C6HRBGT7.css */
+/* EmptyState-7L4UAQBX.css */
 /*
  * The empty state.
  *
@@ -15001,6 +15087,40 @@ svg.crewlet-datetime__chevron {
   margin-top: var(--spacing-2);
 }
 
+/*
+ * INLINE: one left-aligned row on a dashed hairline, the sentence beside its
+ * action. The dash says "nothing here yet" without a glyph, and the box keeps
+ * the place the content will take, so the page does not move when it is
+ * filled. Narrow, the action wraps under the words.
+ */
+.crewlet-empty-state--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--spacing-2) var(--spacing-4);
+  padding: var(--spacing-3) var(--spacing-4);
+  border: 1px dashed var(--color-border-default);
+  border-radius: var(--radius-md);
+  text-align: start;
+}
+
+.crewlet-empty-state__text {
+  display: flex;
+  flex: 1 1 16rem;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-empty-state--inline .crewlet-empty-state__description {
+  max-width: var(--size-measure);
+}
+
+.crewlet-empty-state--inline .crewlet-empty-state__action {
+  flex: none;
+  margin-top: 0;
+}
+
 
 /* EmptyValue-4B6ODXHT.css */
 /*
@@ -16405,7 +16525,82 @@ a.crewlet-icon-btn {
 }
 
 
-/* Input-OQZBCRX5.css */
+/* InlineEditor-W55DDKML.css */
+/*
+ * InlineEditor: one record's fields, then a bar. It draws no surface of its
+ * own, so it reads as the card or the section it is opened in rather than as
+ * a form dropped on top of it.
+ */
+
+.crewlet-inline-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  margin: 0;
+}
+
+.crewlet-inline-editor__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  min-width: 0;
+}
+
+.crewlet-inline-editor__error {
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-feedback-danger-ink);
+}
+
+/*
+ * THE BAR: the status at its start, the two controls at its end, on one line
+ * where there is room. On a narrow card it wraps whole, the controls keeping
+ * their order at the end, so Save is never the control that falls off.
+ */
+.crewlet-inline-editor__bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2) var(--spacing-3);
+  padding-top: var(--spacing-3);
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: var(--color-border-default);
+}
+
+.crewlet-inline-editor__start,
+.crewlet-inline-editor__end {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-inline-editor__end {
+  margin-inline-start: auto;
+}
+
+.crewlet-inline-editor__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+/* A touch screen has no Mod+Enter to press: the hint goes where no keyboard
+   is the main way in. */
+@media (hover: none) and (pointer: coarse) {
+  .crewlet-inline-editor__hint {
+    display: none;
+  }
+}
+
+
+/* Input-VDSV7VWJ.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and
  * ReadOnlyField.
@@ -16969,6 +17164,25 @@ a.crewlet-icon-btn {
   color: var(--color-text-tertiary);
 }
 
+/*
+ * THE HELP LINE WITH A COUNT AT ITS END (`limit`). The help wraps in the room
+ * the count leaves, and the count keeps its width and its line: it is the
+ * figure a writer glances at, so it does not move as the sentence beside it
+ * wraps.
+ */
+.crewlet-form-field__meta {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+}
+
+.crewlet-form-field__meta > .crewlet-form-field__helper,
+.crewlet-form-field__meta-spacer {
+  flex: 1;
+  min-width: 0;
+}
+
 /* SHOWN ONLY WHILE THE FIELD HAS FOCUS (`helperOnFocus`): a dense form reads as
    labels and values at rest, and the sentence appears under the field the
    reader is in. Still described, so a screen reader hears it on entry. */
@@ -17719,7 +17933,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* List-YHLIZFK4.css */
+/* List-XY445TKY.css */
 /*
  * The non-tabular list. One row recipe, four framings.
  *
@@ -17888,6 +18102,37 @@ a.crewlet-icon-btn {
   color: var(--color-text-tertiary);
 }
 
+/*
+ * COMPACT: a row a small step tall, in the body's size at its normal leading,
+ * so a list of statements that each run to two lines still stands on one
+ * screen. Only the rhythm changes; the number column, the rule between rows
+ * and the inset a card gives them stay where they were.
+ */
+.crewlet-list--compact .crewlet-list__row {
+  min-height: 0;
+  padding-block: var(--spacing-1);
+}
+
+.crewlet-list--compact.crewlet-list--numbered-divided .crewlet-list__row {
+  padding-block: var(--spacing-2);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  text-wrap: pretty;
+}
+
+/*
+ * THE WORDS AT A READING MEASURE (`measure`), while the row and its rule
+ * still span the list. In a card the width of the page a policy otherwise
+ * runs to some 150 characters a line. A maximum, never a width.
+ */
+.crewlet-list--measure-normal .crewlet-list__content {
+  max-inline-size: var(--size-measure);
+}
+
+.crewlet-list--measure-wide .crewlet-list__content {
+  max-inline-size: var(--size-measure-wide);
+}
+
 /* ---- States ------------------------------------------------------------ */
 
 /*
@@ -17995,7 +18240,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* ListInput-O7LJKOIG.css */
+/* ListInput-DP2CSJ22.css */
 /*
  * ListInput: an ordered list of sentences, written in the box at the top and
  * listed under it.
@@ -18011,6 +18256,7 @@ a.crewlet-icon-btn {
 .crewlet-list-input__add {
   display: flex;
   align-items: flex-start;
+  gap: var(--spacing-2);
 }
 
 .crewlet-list-input__add > * {
@@ -18067,10 +18313,75 @@ a.crewlet-icon-btn {
   border-block-end-style: none;
 }
 
-.crewlet-list-input__item > .crewlet-input,
-.crewlet-list-input__item > .crewlet-textarea {
+/*
+ * THE FIELD TAKES THE ROW'S WIDTH, and holds the control with whatever is
+ * said under it (its count, its refusal) as one column, so a note under an
+ * item sits under the item's words and not under its number or its buttons.
+ */
+.crewlet-list-input__field {
+  display: flex;
   flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-list-input__field > .crewlet-input,
+.crewlet-list-input__field > .crewlet-textarea,
+.crewlet-list-input__field > .crewlet-textarea-shell {
+  width: 100%;
+  min-width: 0;
+}
+
+/* What is said under one item: its refusal at the start, its count at the end. */
+.crewlet-list-input__note {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+  padding-bottom: var(--spacing-1);
+}
+
+.crewlet-list-input__error {
   min-width: 0;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-feedback-danger-ink);
+}
+
+/*
+ * THE ROW A REMOVED ITEM LEAVES (`undoRemove`): the item's own place in the
+ * order, at a row's height and on the row's rule, saying what happened in the
+ * quiet ink with Undo beside it, so the list does not close up over the place
+ * an Undo would put it back.
+ */
+.crewlet-list-input__removed {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-block-end-width: 1px;
+  border-block-end-style: solid;
+  border-block-end-color: var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-list-input__removed:last-child {
+  border-block-end-style: none;
+}
+
+.crewlet-list-input__removed-text {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--font-size-compact);
+  color: var(--color-text-secondary);
+}
+
+/* Where the new-item box was, once the list holds all it may. */
+.crewlet-list-input__full {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-tertiary);
 }
 
 /*
@@ -18138,10 +18449,60 @@ a.crewlet-icon-btn {
   opacity: 1;
 }
 
+/*
+ * THE GRIP (`reorderByDrag`) waits with the move pair: the pointer's way to
+ * take hold of a row, shown under the pointer and while the row holds the
+ * focus, in the quiet ink so the row's number stays the first mark on it.
+ */
+.crewlet-list-input__handle {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  margin-inline-start: calc(var(--spacing-1) * -1);
+  color: var(--color-text-tertiary);
+  cursor: grab;
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-list-input__handle:active {
+  cursor: grabbing;
+}
+
+.crewlet-list-input__item:hover .crewlet-list-input__handle,
+.crewlet-list-input__item:focus-within .crewlet-list-input__handle {
+  opacity: 1;
+}
+
+/* The row being dragged keeps its place as an outline, so the list does not
+   close up under the pointer and the reader can see where it came from. */
+.crewlet-list-input__item[data-reorder='dragging'] {
+  outline-width: 1px;
+  outline-style: dashed;
+  outline-color: var(--color-border-strong);
+  outline-offset: -1px;
+}
+
+.crewlet-list-input__item[data-reorder='dragging'] > * {
+  opacity: 0.4;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-list-input__move {
     transition: none;
   }
+
+  .crewlet-list-input__handle {
+    transition: none;
+  }
+}
+
+/* With a hidden legend the add control stands at the end of the box's row. */
+.crewlet-list-input__add-control {
+  display: inline-flex;
+  flex: none;
+  align-self: center;
 }
 
 
@@ -27856,6 +28217,62 @@ svg.crewlet-select__chevron {
 }
 
 
+/* Statement-M4QDXIMO.css */
+/*
+ * Statement: a label over the words a page exists to say (Statement.tsx).
+ *
+ * THE LABEL IS THE MICRO REGISTER and the words are a step over the body, at
+ * the reading measure, so the statement outweighs everything around it and a
+ * line of it is one an eye can follow back.
+ */
+
+.crewlet-statement {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: 0;
+  min-width: 0;
+}
+
+.crewlet-statement__label {
+  margin: 0;
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  line-height: var(--font-line-height-snug);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+/* THE AUTHOR'S OWN LINE BREAKS are kept, and no word stands alone on the last
+   line. A long word (an address, a product name) breaks rather than widening
+   the column. */
+.crewlet-statement__text {
+  margin: 0;
+  max-width: var(--size-measure);
+  font-size: var(--font-size-lg);
+  line-height: var(--font-line-height-relaxed);
+  color: var(--color-text-primary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  text-wrap: pretty;
+}
+
+/* A BLOCK under the label is drawn as given: its own register, the column's
+   width. */
+.crewlet-statement__body {
+  min-width: 0;
+}
+
+/* ON A PHONE the words step down to the body's own step over it, so a
+   mission is a paragraph rather than a poster. */
+@media (width < 640px) {
+  .crewlet-statement__text {
+    font-size: var(--font-size-md);
+  }
+}
+
+
 /* StatusDot-7OMCQCZF.css */
 /*
  * The status dot: a 7px mark in its tone's fill, beside the word it belongs
@@ -30325,7 +30742,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Text-S3Q4O3IG.css */
+/* Text-XOCOU34C.css */
 /*
  * The type registers, one rule each.
  *
@@ -30394,6 +30811,15 @@ b.crewlet-switcher__match {
   color: var(--color-text-primary);
 }
 
+.crewlet-text--passage {
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-relaxed);
+  color: var(--color-text-primary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  text-wrap: pretty;
+}
+
 .crewlet-text--cell {
   font-size: var(--font-size-compact);
   line-height: var(--font-line-height-snug);
@@ -30878,7 +31304,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TileGrid-I6LNYD2H.css */
+/* TileGrid-UYMVVVJK.css */
 /*
  * TileGrid: tiles on a fixed track count that folds by the grid's own width.
  *
@@ -30932,6 +31358,36 @@ b.crewlet-switcher__match {
   }
 }
 
+/*
+ * COMPACT TILES FOLD WIDER. A compact `CatalogTile` puts its mark, name,
+ * state, fact and action on ONE line, which needs about 30rem; the folds above
+ * are sized for a comfortable tile, whose parts stack. Measured at a 1024px
+ * window, two compact tiles on 415px tracks cut the name to its first letter.
+ * So a grid holding a compact tile folds where a track would be narrower than
+ * 30rem, counting the gaps: two tracks need 61rem, three 92rem (folding
+ * straight to one, as three always do), and four 123rem before they go to
+ * two. Declared here, on the grid, because the grid chooses the track count
+ * and the tile cannot.
+ */
+@container crewlet-tile-grid (width < 123rem) {
+  .crewlet-tile-grid[data-columns='4']:has(.crewlet-catalog-tile--compact) > .crewlet-tile-grid__track {
+    --crewlet-tile-grid-tracks: 2;
+  }
+}
+
+@container crewlet-tile-grid (width < 92rem) {
+  .crewlet-tile-grid[data-columns='3']:has(.crewlet-catalog-tile--compact) > .crewlet-tile-grid__track {
+    --crewlet-tile-grid-tracks: 1;
+  }
+}
+
+@container crewlet-tile-grid (width < 61rem) {
+  /* As specific as the two rules above and after them, so it wins at every count. */
+  .crewlet-tile-grid[data-columns]:has(.crewlet-catalog-tile--compact) > .crewlet-tile-grid__track {
+    --crewlet-tile-grid-tracks: 1;
+  }
+}
+
 
 /* TimeWindowPicker-I3HXC74I.css */
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.44.0",
+  "version": "0.46.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.44.0",
-    "@crewlethq/tokens": "0.44.0",
+    "@crewlethq/icons": "0.46.0",
+    "@crewlethq/tokens": "0.46.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",