@crewlethq/ui 0.64.0 → 0.65.0

package/dist/{Select-F526HLNR.css → Select-6BQPBOHH.css}

@@ -23,6 +23,14 @@
    */
   --crewlet-select-auto-min-width: 132px;
   --crewlet-select-auto-max-width: 220px;
+  /*
+   * WHERE THE CHEVRON STANDS, read by the chevron and by the room the trigger
+   * keeps for it, so the two cannot drift apart. The inset is a spacing step
+   * (one step inside the value's own, see below); the glyph is the `sm`
+   * glyph's 14px box, which density does not scale.
+   */
+  --crewlet-select-chevron-inset: var(--spacing-2);
+  --crewlet-select-chevron-size: 14px;
 
   position: relative;
   display: inline-flex;
@@ -38,7 +46,16 @@
   transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/*
+ * THE CHEVRON STANDS ONE STEP INSIDE THE VALUE'S INSET, at every size: its
+ * glyph carries 3.5px of side bearing, so 8px against the default size's
+ * 12px puts its ink 12.5px from the edge, level with the value's 13px. The
+ * small size kept the 8px against its own 8px inset, and a quiet picker in a
+ * toolbar stood 9px from its word and 12.5px past its chevron.
+ */
 .crewlet-select--sm {
+  --crewlet-select-chevron-inset: var(--spacing-1);
+
   min-height: var(--size-control-sm);
 }
 
@@ -174,16 +191,23 @@
   color: inherit;
   text-align: left;
   padding: 0 var(--spacing-3);
-  /* Room for the chevron, which sits over the control rather than beside it:
-     its own inset twice over, plus the glyph. */
-  padding-right: var(--spacing-6);
+  /*
+   * Room for the chevron, which sits over the control rather than beside it:
+   * its inset, its glyph and half a step to the words. The glyph is added as
+   * a length rather than folded into a spacing step, because a step scales
+   * with density and the glyph does not: as one step (24px), compact density
+   * left the words 2.6px from the chevron's ink, against 5.5px at the default.
+   */
+  padding-right: calc(
+    var(--crewlet-select-chevron-inset) + var(--crewlet-select-chevron-size) + var(--spacing-1) / 2
+  );
 }
 
+/* The leading inset only: the trailing one is the chevron's room, above. */
 .crewlet-select--sm .crewlet-select__native,
 .crewlet-select--sm .crewlet-select__trigger {
   font-size: var(--font-size-xs);
-  padding: 0 var(--spacing-2);
-  padding-right: var(--spacing-6);
+  padding-left: var(--spacing-2);
 }
 
 .crewlet-select__native:disabled,
@@ -223,7 +247,7 @@
  */
 svg.crewlet-select__chevron {
   position: absolute;
-  right: var(--spacing-2);
+  right: var(--crewlet-select-chevron-inset);
   pointer-events: none;
   color: var(--color-text-muted);
 }
@@ -447,11 +471,17 @@ svg.crewlet-select__chevron {
   outline-color: var(--color-border-selected);
 }
 
+/*
+ * INSET AS THE ROWS UNDER IT ARE: the list's own padding plus a row's, so the
+ * glyph stands in the column the ticks and group headings start on and the
+ * query starts where the option labels do. At a row's inset alone both stood
+ * 4px left of the list they filter.
+ */
 .crewlet-select__search {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
-  padding: var(--spacing-2) var(--spacing-3);
+  padding: var(--spacing-2) calc(var(--spacing-1) + var(--spacing-3));
   border-bottom: 1px solid var(--color-border-default);
   color: var(--color-text-tertiary);
   flex: none;

package/dist/SelectionBar/index.js

@@ -1,4 +1,4 @@
-export { SelectionBar } from '../chunk-6Z4JZHRB.js';
+export { SelectionBar } from '../chunk-WU5JDEEY.js';
 import '../chunk-NR4CPM4T.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-7QTPJDRF.js';

package/dist/{SelectionBar-XPWKUOSC.css → SelectionBar-SCAU6EBY.css}

@@ -13,6 +13,8 @@
   flex-wrap: nowrap;
   gap: var(--spacing-3);
   min-height: var(--size-row-lg);
+  /* The end inset is the start's less Clear's own padding (a small ghost's
+     8px), so Clear's word ends as far in as the count starts. */
   padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-4);
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-lg);
@@ -55,7 +57,9 @@
     left: var(--spacing-3);
     z-index: var(--z-index-overlay);
     gap: var(--spacing-2);
-    padding-inline-start: var(--spacing-3);
+    /* The start steps in to 12px, and the end with it, as above: with the end
+       left at 8px, Clear's word ended 18px in against the count's 13px. */
+    padding-inline: var(--spacing-3) var(--spacing-1);
     box-shadow: var(--shadow-lg);
   }
 }

package/dist/SendButton/index.js

@@ -1,4 +1,4 @@
-export { SEND_BUTTON_LABELS, SendButton } from '../chunk-PBR5C5MX.js';
-import '../chunk-2XWFWNDT.js';
+export { SEND_BUTTON_LABELS, SendButton } from '../chunk-T2GC7UAP.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SetupWizard/index.js

@@ -1,10 +1,10 @@
-export { SetupWizard } from '../chunk-5DCY2QUY.js';
-import '../chunk-DKB73KZI.js';
-import '../chunk-Z4EKUMZW.js';
+export { SetupWizard } from '../chunk-R2YHKVWN.js';
+import '../chunk-FPDIHEM4.js';
+import '../chunk-HJBHP66O.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-P4YORMRZ.js';
-import '../chunk-ZYO2QFU6.js';
-import '../chunk-5KRRJNQO.js';
+import '../chunk-222VILSP.js';
+import '../chunk-IVTQWOXV.js';
+import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-XSPCITPN.js';

package/dist/{SetupWizard-Z54H6RYW.css → SetupWizard-WDOFFNIM.css}

@@ -178,6 +178,16 @@
   margin-inline-start: auto;
 }
 
+/*
+ * A GHOST AT THE ROW'S START is pulled out by its padding and edge, as a card
+ * foot's is (StatusCard.css), so "Exit" starts on the line the title and the
+ * hairline above it start on rather than 13px inside it; only the hover's
+ * ground reaches past. The footer's buttons are the page's own step, medium.
+ */
+.crewlet-setup-wizard__footer-start > .crewlet-btn--ghost.crewlet-btn--medium:first-child {
+  margin-inline-start: calc(-1 * (var(--spacing-3) + 1px));
+}
+
 /*
  * BESIDE THE CONTENT, from 70rem of the wizard's own width: the aside holds in
  * view. Written at the specificity of the wide and no-aside rules above, and
@@ -250,9 +260,17 @@
     gap: var(--spacing-2);
   }
 
+  /*
+   * THE FOLDED PREVIEW HANGS IN THE GUTTER, as a change list's disclosure
+   * does: the trigger's padding and the panel's inset stand outside the
+   * column, so the chevron sits on the edge the fields above start on and the
+   * open preview is as wide as they are, rather than 8px inside it at both
+   * ends.
+   */
   .crewlet-setup-wizard__preview {
     grid-area: aside;
     min-width: 0;
+    margin-inline: calc(var(--spacing-2) * -1);
   }
 
   .crewlet-setup-wizard__preview .crewlet-setup-wizard__aside {
@@ -279,6 +297,13 @@
   .crewlet-setup-wizard__footer-end > :last-child {
     flex: 1 1 100%;
   }
+
+  /* The first row's last action ends it, at the row's end: a ghost there is
+     pulled out as "Exit" is at its start, so the two words stand level with
+     the primary's edges under them. */
+  .crewlet-setup-wizard__footer-end > .crewlet-btn--ghost.crewlet-btn--medium:nth-last-child(2) {
+    margin-inline-end: calc(-1 * (var(--spacing-3) + 1px));
+  }
 }
 
 .crewlet-setup-wizard__position {

package/dist/ShareDialog/index.js

@@ -1,13 +1,13 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-B5ZHJWAZ.js';
-import '../chunk-XQZ6EWOE.js';
-import '../chunk-IOTN23FZ.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-WWXIGN4O.js';
+import '../chunk-VK45YJLH.js';
+import '../chunk-IYG4ETAQ.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-KVWZDCTQ.js';
+import '../chunk-I24FI46B.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-BPCY7ZID.js';
 import '../chunk-CI3VPIJN.js';
-import '../chunk-5AQBPHZD.js';
+import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RTPQDNW3.js';
@@ -16,7 +16,7 @@ import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ShareDialog-4QDCBWMH.css → ShareDialog-72VTMM4K.css}

@@ -140,10 +140,14 @@
 }
 
 /* Under the phone breakpoint the row's controls go under the name, so a
-   role select and a remove control never squeeze the name to an ellipsis. */
+   role select and a remove control never squeeze the name to an ellipsis.
+   They are held off the lines above and below them by a gap of their own:
+   with none, a select's edge sat flush on the name's detail line and the
+   agent's note sat flush under the select. */
 @media (width < 640px) {
   .crewlet-share-dialog__row {
     grid-template-columns: auto minmax(0, 1fr);
+    row-gap: var(--spacing-2);
   }
 
   .crewlet-share-dialog__controls {

package/dist/SheetColumnEditor/index.js

@@ -1,29 +1,29 @@
-export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-OU4FLGOZ.js';
-import '../chunk-XQZ6EWOE.js';
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-SBOUVASH.js';
+import '../chunk-VK45YJLH.js';
 import '../chunk-FFMCMSJB.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
-import '../chunk-QCVAVAF6.js';
+import '../chunk-2EA2GSA2.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-F7VBYCW2.js';
-import '../chunk-27JCHL64.js';
+import '../chunk-W6UVBBNH.js';
+import '../chunk-PVZOP3QK.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-KIPAFCVS.js';
-import '../chunk-ACRRRPWT.js';
-import '../chunk-TLIJG4TP.js';
+import '../chunk-PBCNINMB.js';
+import '../chunk-ANTAQAR4.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-5KRRJNQO.js';
+import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-LODRX4FU.js';
+import '../chunk-T73DMDU4.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SheetGrid/index.js

@@ -1,25 +1,25 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-VVVB3OBW.js';
-import '../chunk-4U2D6BPR.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-OOC6KXNL.js';
+import '../chunk-UEOEBOBR.js';
 import '../chunk-CENOOTAV.js';
-import '../chunk-3BYIWOTV.js';
-import '../chunk-I6POAB4V.js';
-import '../chunk-66X5WDKE.js';
+import '../chunk-MMCYH5LB.js';
+import '../chunk-EFX2YC5T.js';
+import '../chunk-Z2MZTI3H.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-KYIAFNU7.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-5AQBPHZD.js';
+import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-LODRX4FU.js';
+import '../chunk-T73DMDU4.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SheetGrid-XK7T7M34.css → SheetGrid-QGQAYDEY.css}

@@ -126,6 +126,26 @@
   background: var(--color-surface-background);
 }
 
+/*
+ * THE FRAME IS THE SCROLLER'S ONE HAIRLINE ON EVERY SIDE. A cell's trailing
+ * and bottom hairlines are the lines between it and its neighbours, so a cell
+ * with no neighbour laid its line on the scroller's own border: a 2px edge on
+ * the right and at the bottom against 1px at the top and the left, and a
+ * square corner inside the rounded one. The last column leaves its trailing
+ * line to the frame (unless Add column stands after it, which the line keeps
+ * apart), and the last row leaves its bottom line wherever the rows reach the
+ * floor (`__row--floor`, which the component sets). The cell keeps its box,
+ * so its value is centred between the line before it and the frame, as every
+ * other value is between its cell's two lines.
+ */
+.crewlet-sheet-grid__scroller:not(.crewlet-sheet-grid__scroller--add-column) .crewlet-sheet-grid__row > :last-child {
+  border-inline-end-width: 0;
+}
+
+.crewlet-sheet-grid__row--floor > :is(.crewlet-sheet-grid__corner, .crewlet-sheet-grid__header, .crewlet-sheet-grid__rownum, .crewlet-sheet-grid__cell) {
+  border-bottom-width: 0;
+}
+
 .crewlet-sheet-grid__corner,
 .crewlet-sheet-grid__header {
   background: var(--color-surface-subtle);
@@ -326,12 +346,10 @@
 }
 
 /* PENDING (D23): the reader's value, drawn at once, underlined dashed until
-   the engine confirms it. The word is in the cell's description and the strip. */
-.crewlet-sheet-grid__cell--pending > .crewlet-sheet-grid__value {
-  text-decoration: underline dashed var(--color-text-tertiary);
-  text-underline-offset: 3px;
-}
-
+   the engine confirms it. The word is in the cell's description and the strip.
+   ONE RULE, ACROSS THE CELL, for every type: a value of words also took a
+   text underline, so a pending name or number stood over two dashed lines
+   a few pixels apart while a checkbox or a chip had one. */
 .crewlet-sheet-grid__cell--pending > .crewlet-sheet-grid__value::after {
   position: absolute;
   right: var(--spacing-1);
@@ -349,6 +367,26 @@
   color: var(--color-feedback-danger-ink);
 }
 
+/* A REFUSED VALUE KEEPS ITS PLACE. The mark stands at the edge the value does
+   not start from, as the history control does: its auto margin took the
+   slack a number or a rating is pushed to the trailing edge by, and the
+   value jumped to the leading edge on the one cell a reader was asked to
+   look at. A number's and a rating's mark goes first, at the leading edge;
+   a checkbox's stands at the trailing edge out of the flow, so the box stays
+   centred under its header. */
+:is(.crewlet-sheet-grid__cell--number, .crewlet-sheet-grid__cell--rating) > .crewlet-sheet-grid__refused {
+  order: -1;
+  margin-inline: 0 auto;
+  padding-inline: 0 var(--spacing-1);
+}
+
+.crewlet-sheet-grid__cell--checkbox > .crewlet-sheet-grid__refused {
+  position: absolute;
+  inset-inline-end: var(--spacing-2);
+  margin: 0;
+  padding: 0;
+}
+
 .crewlet-sheet-grid__message {
   position: absolute;
   top: 100%;
@@ -479,6 +517,13 @@
   background: var(--color-surface-subtle);
 }
 
+/* On the floor with the header row it stands beside (a sheet with no rows
+   yet), it leaves its hairline to the frame as the headers do: it laid a 2px
+   edge under the control beside the 1px edge under the headers. */
+.crewlet-sheet-grid__add-column--floor {
+  border-bottom-width: 0;
+}
+
 .crewlet-sheet-grid__sync {
   display: inline-flex;
   align-items: center;
@@ -569,12 +614,17 @@
   color: var(--color-text-primary);
 }
 
+/* A field in a form, at the step every field's value takes (an Input's, a
+   Select's, a grid cell's), rather than at whatever size the page's own text
+   is: on a page set at 16px its value stood three pixels larger than the
+   field beside it. */
 .crewlet-sheet-cell {
   position: relative;
   display: inline-flex;
   flex-direction: column;
   gap: var(--spacing-1);
   min-width: 0;
+  font-size: var(--font-size-compact);
 }
 
 .crewlet-sheet-cell__face {
@@ -640,6 +690,36 @@
   font: inherit;
 }
 
+/*
+ * A NUMBER STAYS ON ITS EDGE WHILE IT IS EDITED. A number's and a rating's
+ * value is drawn at the cell's trailing edge in tabular figures, and the field
+ * opened over it set the digits from the leading edge in proportional ones, so
+ * the value jumped 45px across the cell and re-spaced as it opened. The field
+ * takes the column's edge and the value's figures.
+ */
+:is(.crewlet-sheet-grid__cell--number, .crewlet-sheet-grid__cell--rating) .crewlet-sheet-editor__input {
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+/*
+ * A LONE CELL'S EDITOR TAKES ITS FACE'S PLACE AT ITS FACE'S SIZE, so nothing
+ * under the cell moves while it is open. The face is a control-step box with
+ * a border all round and its words a hairline and a step in: a line's field
+ * takes its corners and that inset (it was square, with its words a pixel to
+ * the left), and a list's editor keeps its height while the panel lies over
+ * the page (it kept none, and everything under the cell rose by a face). A
+ * text's line is the face's too (see the overlay's field below).
+ */
+.crewlet-sheet-cell .crewlet-sheet-editor__input {
+  padding-inline: calc(var(--spacing-2) + 1px);
+  border-radius: var(--radius-md);
+}
+
+.crewlet-sheet-cell .crewlet-sheet-editor--list {
+  min-height: var(--size-control-md);
+}
+
 .crewlet-sheet-editor__input:focus-visible,
 .crewlet-sheet-editor__filter:focus-visible,
 .crewlet-sheet-editor__textarea:focus-visible {
@@ -685,6 +765,9 @@
    popover's ground and shadow, and a field that wraps and grows to six lines,
    so the start of a value is never scrolled out of view while it is edited. */
 .crewlet-sheet-editor__overlay {
+  /* Where its words start, the field's and the notes' under it: a step in
+     from the edge of the cell it lies over, its own border taken out. */
+  --crewlet-sheet-editor-inset: calc(var(--spacing-2) - 1px);
   position: absolute;
   top: 0;
   inset-inline-start: 0;
@@ -709,10 +792,13 @@
 
 .crewlet-sheet-editor__overlay > .crewlet-sheet-editor__error,
 .crewlet-sheet-editor__overlay > .crewlet-sheet-editor__conflict {
-  margin: 0 var(--spacing-2) var(--spacing-2);
+  margin: 0 var(--crewlet-sheet-editor-inset) var(--spacing-2);
 }
 
+/* A lone cell's face has a border all round, so the words stand a hairline
+   and a step in, where the face's stood. */
 .crewlet-sheet-cell .crewlet-sheet-editor__overlay {
+  --crewlet-sheet-editor-inset: var(--spacing-2);
   position: relative;
   width: 100%;
   max-width: none;
@@ -730,11 +816,23 @@
   font: inherit;
 }
 
+/*
+ * THE VALUE DOES NOT MOVE WHEN ITS CELL OPENS. One line of the field is the
+ * row it lies over less the overlay's two hairlines, and the line is centred
+ * where the cell centres its value (on the row less the hairline under it),
+ * with the overlay's border taken out of the inline step, so the words start
+ * where the cell's did. Padded a step on every side, a value stood 3.5px
+ * lower and 1px further in than in the cell it replaced, and one line of it
+ * was 38px tall over a 32px row. A longer value grows down from that line.
+ */
 .crewlet-sheet-editor__overlay .crewlet-sheet-editor__textarea {
+  --crewlet-sheet-editor-row: var(--crewlet-sheet-row-height, var(--size-sheet-row));
+  --crewlet-sheet-editor-line: calc(var(--font-line-height-normal) * 1em);
+  --crewlet-sheet-editor-pad: calc((var(--crewlet-sheet-editor-row) - var(--crewlet-sheet-editor-line)) / 2 - 1px);
   display: block;
-  min-height: var(--crewlet-sheet-row-height, var(--size-sheet-row));
-  max-height: calc(var(--crewlet-sheet-editor-lines, 6) * var(--font-line-height-normal) * 1em + 2 * var(--spacing-2));
-  padding: var(--spacing-2);
+  min-height: calc(var(--crewlet-sheet-editor-line) + 2 * var(--crewlet-sheet-editor-pad));
+  max-height: calc(var(--crewlet-sheet-editor-lines, 6) * var(--crewlet-sheet-editor-line) + 2 * var(--crewlet-sheet-editor-pad));
+  padding: calc(var(--crewlet-sheet-editor-pad) - 0.5px) var(--crewlet-sheet-editor-inset) calc(var(--crewlet-sheet-editor-pad) + 0.5px);
   overflow-y: auto;
   border: 0;
   border-radius: var(--radius-md);
@@ -745,6 +843,13 @@
   resize: none;
 }
 
+/* A lone cell's field has the face's line (the control step), centred in it
+   as the face centres its value between its two borders. */
+.crewlet-sheet-cell .crewlet-sheet-editor__overlay .crewlet-sheet-editor__textarea {
+  --crewlet-sheet-editor-row: var(--size-control-md);
+  padding: var(--crewlet-sheet-editor-pad) var(--crewlet-sheet-editor-inset);
+}
+
 .crewlet-sheet-editor__list {
   display: flex;
   flex-direction: column;
@@ -809,6 +914,13 @@
   border-top: 1px solid var(--color-border-default);
 }
 
+/* The rule divides the note from what stands above it; first in its panel
+   (a line editor's, with no error over it), it divided it from nothing. */
+.crewlet-sheet-editor__conflict:first-child {
+  padding-top: 0;
+  border-top: 0;
+}
+
 .crewlet-sheet-editor__conflict-text {
   margin: 0;
   color: var(--color-text-secondary);
@@ -836,6 +948,16 @@
     border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   }
 
+  /* A sheet of its own rather than a field over a cell, so it has no cell's
+     line to keep and is padded a step all round, its notes with it. */
+  .crewlet-sheet-grid .crewlet-sheet-editor--long .crewlet-sheet-editor__overlay {
+    --crewlet-sheet-editor-inset: var(--spacing-2);
+  }
+
+  .crewlet-sheet-grid .crewlet-sheet-editor--long .crewlet-sheet-editor__textarea {
+    --crewlet-sheet-editor-pad: var(--spacing-2);
+    padding: var(--crewlet-sheet-editor-pad) var(--crewlet-sheet-editor-inset);
+  }
 }
 
 @media (forced-colors: active) {

package/dist/SidePanel/index.js

@@ -1,11 +1,11 @@
 import '../chunk-73GUXYYE.js';
-export { SIDE_PANEL_LABELS, SIDE_PANEL_MAX_WIDTH, SIDE_PANEL_MIN_WIDTH, SIDE_PANEL_WIDTH, SidePanel, SidePanelFrame } from '../chunk-PUJUWLCX.js';
+export { SIDE_PANEL_LABELS, SIDE_PANEL_MAX_WIDTH, SIDE_PANEL_MIN_WIDTH, SIDE_PANEL_WIDTH, SidePanel, SidePanelFrame } from '../chunk-CLJGFOTV.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-PIYJNCN7.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SidebarNav/index.js

@@ -1,6 +1,6 @@
-export { NavGroup, NavItem, SidebarNav } from '../chunk-B53FUJ53.js';
+export { NavGroup, NavItem, SidebarNav } from '../chunk-WCDPFTJZ.js';
 import '../chunk-TEV5REGB.js';
-import '../chunk-FYTIJM2T.js';
+import '../chunk-HBDA76EZ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SidebarNav-YI74SPDC.css → SidebarNav-VTQ3G4AE.css}

@@ -48,9 +48,12 @@
  * does not depend on the document's box-sizing: with the rail's own gap it is
  * 14px, the design's space between two runs, at density 1.
  *
- * Its end inset is a step SHORTER than a row's, because the control is a
- * 24px square with its glyph centred in it: the row pad would put the glyph
- * five pixels inside the line every count above and below it ends on.
+ * Its end inset is SHORTER than a row's by the part of the control the glyph
+ * leaves empty, because the control is a 24px square with a nav glyph (`sm`,
+ * 14px) centred in it: the row pad would put the glyph five pixels inside the
+ * line every count above and below it ends on. A plain step shorter left it a
+ * pixel inside at the normal density and nearly two at the compact one, where
+ * the pad shrinks and the square does not.
  */
 .crewlet-nav-group__head {
   display: flex;
@@ -59,7 +62,7 @@
   min-width: 0;
   min-height: var(--size-target-min);
   margin-top: calc(var(--spacing-2) + var(--spacing-1) / 2);
-  padding: 0 var(--spacing-2) 0 var(--size-nav-row-pad);
+  padding: 0 calc(var(--size-nav-row-pad) - (var(--size-target-min) - 14px) / 2) 0 var(--size-nav-row-pad);
 }
 
 /*
@@ -401,6 +404,13 @@
  * path the reader is on the guide steps up to the strong border: the same
  * neutral lift the current row itself takes, and not the accent, which the
  * rail keeps for the one count that asks the reader to act.
+ *
+ * A NESTED ROW'S WORDS START ON ITS PARENT'S WORDS. The guide stands on the
+ * glyph column's start, and the inset after it is a nav glyph (`sm`, 14px)
+ * and the row's gap to its word, less the guide's own pixel and the pad the
+ * nested row takes again. A plain step there stood every nested word 3px
+ * left of its parent's (5px at the compact density), a column that read as
+ * missed rather than indented.
  */
 .crewlet-nav-item__children {
   --crewlet-nav-children-gap: var(--spacing-1);
@@ -409,7 +419,7 @@
   flex-direction: column;
   gap: var(--crewlet-nav-children-gap);
   margin-left: var(--size-nav-row-pad);
-  padding-left: var(--spacing-2);
+  padding-left: calc(14px + var(--spacing-2) + var(--spacing-1) / 2 - var(--size-nav-row-pad) - 1px);
   border-left: 1px solid var(--color-border-default);
 }
 

package/dist/Skeleton/index.js

@@ -1,3 +1,3 @@
-export { Skeleton } from '../chunk-QBI5ETKY.js';
+export { Skeleton } from '../chunk-BRLZXYPA.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';