@crewlethq/ui 0.45.0 → 0.47.0

package/dist/styles.css

@@ -7006,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.
@@ -7165,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 {
@@ -7186,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 {
@@ -7224,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.
@@ -16487,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.
@@ -17051,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. */
@@ -17801,7 +17933,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* List-YHLIZFK4.css */
+/* List-XY445TKY.css */
 /*
  * The non-tabular list. One row recipe, four framings.
  *
@@ -17970,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 ------------------------------------------------------------ */
 
 /*
@@ -18077,7 +18240,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* ListInput-O7LJKOIG.css */
+/* ListInput-WUP2YITQ.css */
 /*
  * ListInput: an ordered list of sentences, written in the box at the top and
  * listed under it.
@@ -18093,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 > * {
@@ -18101,6 +18265,8 @@ a.crewlet-icon-btn {
 }
 
 .crewlet-list-input__items {
+  /* The rows lay themselves out by the list's own width (see NARROW below). */
+  container: crewlet-list-input / inline-size;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -18149,10 +18315,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);
 }
 
 /*
@@ -18220,10 +18451,87 @@ 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;
+}
+
+/*
+ * NARROW: THE WORDS GET THE ROW. Under 28rem a row's grip, number and three
+ * buttons took half of it, so at a 390px phone each policy wrapped at some
+ * twenty characters a line and eight of them stood 1500px tall. There the
+ * row wraps: the number and the field share the first line, and the buttons
+ * stand at the end of a second, under the words. By the list's own width,
+ * not the window's, so a narrow column on a wide screen is narrow too.
+ */
+@container crewlet-list-input (width < 28rem) {
+  .crewlet-list-input__item {
+    flex-wrap: wrap;
+    row-gap: 0;
+  }
+
+  .crewlet-list-input__item > .crewlet-list-input__field {
+    flex-basis: calc(100% - var(--spacing-4) - var(--spacing-2));
+  }
+
+  .crewlet-list-input__item--draggable > .crewlet-list-input__field {
+    flex-basis: calc(100% - var(--spacing-4) * 2 - var(--spacing-2) * 2);
+  }
+
+  .crewlet-list-input__item > .crewlet-list-input__actions {
+    margin-inline-start: auto;
+  }
 }
 
 
@@ -30463,7 +30771,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Text-S3Q4O3IG.css */
+/* Text-XOCOU34C.css */
 /*
  * The type registers, one rule each.
  *
@@ -30532,6 +30840,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);
@@ -31016,7 +31333,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.
  *
@@ -31070,6 +31387,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.45.0",
+  "version": "0.47.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.45.0",
-    "@crewlethq/tokens": "0.45.0",
+    "@crewlethq/icons": "0.47.0",
+    "@crewlethq/tokens": "0.47.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",