@crewlethq/ui 0.37.0 → 0.37.1

package/dist/styles.css

@@ -702,7 +702,7 @@
 }
 
 
-/* AppShell-JTSEOA57.css */
+/* AppShell-JBCZSSX3.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -851,10 +851,11 @@
 /* The same gutter the nav takes, so what the foot says lines up with the rows
    above it rather than sitting further out. */
 .crewlet-app-shell__rail-foot {
+  --crewlet-rail-foot-gap: var(--spacing-1);
   flex: none;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
+  gap: var(--crewlet-rail-foot-gap);
   padding: var(--spacing-2) var(--size-nav-gutter);
   border-top: 1px solid var(--color-border-default);
 }
@@ -914,6 +915,10 @@
 
 .crewlet-app-shell__rail-row--action,
 .crewlet-app-shell__rail-foot > .crewlet-btn {
+  /* Half the foot's gap to each neighbour, so the rows' targets meet
+     (HitArea.css), across the row's 1px border; the account row below
+     reaches back the same way. */
+  --crewlet-hit-area-block: calc(var(--crewlet-rail-foot-gap, 0px) / 2 + 1px);
   cursor: pointer;
   transition:
     background var(--motion-duration-fast) var(--motion-easing-default),
@@ -1340,11 +1345,12 @@
  * the controls off the rail.
  */
 .crewlet-account-row {
+  --crewlet-account-row-pad: var(--spacing-1);
   display: flex;
   align-items: center;
   gap: var(--spacing-1);
   min-width: 0;
-  padding: var(--spacing-1) 0;
+  padding: var(--crewlet-account-row-pad) 0;
 }
 
 .crewlet-account-row__who {
@@ -1361,6 +1367,12 @@
   transition: background var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/* In the rail's foot, the account row reaches up across its own padding to
+   half the foot's gap, to meet the row above (HitArea.css). */
+.crewlet-app-shell__rail-foot .crewlet-account-row__who {
+  --crewlet-hit-area-block-start: calc(var(--crewlet-rail-foot-gap) / 2 + var(--crewlet-account-row-pad));
+}
+
 /* The row as the reader's menu button: a button drawn as the link is. */
 button.crewlet-account-row__who {
   width: 100%;
@@ -3299,7 +3311,7 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
 .crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); }
 
 
-/* ArtifactMakeRow-XBA2MPSY.css */
+/* ArtifactMakeRow-W3RD5YWZ.css */
 /*
  * The "Start a new artifact" tray.
  *
@@ -3328,9 +3340,10 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
 }
 
 .crewlet-make-row__list {
+  --crewlet-make-row-gap: var(--spacing-1);
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--spacing-1);
+  gap: var(--crewlet-make-row-gap);
   margin: 0;
   padding: var(--spacing-1);
   list-style: none;
@@ -3355,6 +3368,10 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
   color: var(--color-text-primary);
   text-decoration: none;
   outline: none;
+  /* Half the gap to each neighbour, so the targets meet (HitArea.css), and
+     the 1px border the reach is measured inside of. */
+  --crewlet-hit-area-block: calc(var(--crewlet-make-row-gap) / 2 + 1px);
+  --crewlet-hit-area-inline: calc(var(--crewlet-make-row-gap) / 2 + 1px);
   transition:
     background-color var(--motion-duration-fast) var(--motion-easing-out),
     border-color var(--motion-duration-fast) var(--motion-easing-out),
@@ -8005,7 +8022,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* ChoiceList-EA2W6MOS.css */
+/* ChoiceList-KFYFAECP.css */
 /*
  * A short list of answers in one bordered box: a radio, the label with a line
  * of detail under it, and a tag at the row's end. The selected row takes the
@@ -8016,8 +8033,10 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 .crewlet-choice-list {
   /* The platform's radio, sized here so a panel can line up with the text beside it. */
   --crewlet-choice-list-radio-size: 13px;
+  /* The step between two answers. Every row's pointer target reaches half of it. */
+  --crewlet-choice-list-gap: var(--spacing-1);
   display: grid;
-  gap: var(--spacing-1);
+  gap: var(--crewlet-choice-list-gap);
   padding: var(--spacing-1);
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
@@ -8030,21 +8049,24 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 
 .crewlet-choice-list__group {
   display: grid;
-  gap: var(--spacing-1);
+  gap: var(--crewlet-choice-list-gap);
 }
 
 .crewlet-choice-list__item {
   display: grid;
-  gap: var(--spacing-1);
+  gap: var(--crewlet-choice-list-gap);
 }
 
 /* The "Something else" a list ends with, set apart by a dashed rule. */
 .crewlet-choice-list__item.is-separated {
-  padding-top: var(--spacing-1);
+  --crewlet-choice-list-rule-pad: var(--spacing-1);
+  padding-top: var(--crewlet-choice-list-rule-pad);
   border-top: 1px dashed var(--color-border-strong);
 }
 
 .crewlet-choice-list__row {
+  /* Half the step to each neighbour, so the targets meet (HitArea.css). */
+  --crewlet-hit-area-block: calc(var(--crewlet-choice-list-gap) / 2);
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: start;
@@ -8055,6 +8077,23 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/*
+ * THE ANSWER AFTER THE RULE reaches up across it, so the pointer leaving the
+ * row above lands on this one rather than on the rule: the dashed line sets
+ * the answer apart for the eye, and is no gap for the hand.
+ */
+.crewlet-choice-list__item.is-separated > .crewlet-choice-list__row {
+  --crewlet-hit-area-block-start: calc(var(--crewlet-choice-list-gap) / 2 + var(--crewlet-choice-list-rule-pad) + 1px);
+}
+
+/*
+ * A ROW WITH ITS PANEL OPEN reaches nothing downward: the panel is part of the
+ * answer and holds controls of its own, which the row must not cover.
+ */
+.crewlet-choice-list__item:has(> .crewlet-choice-list__panel) > .crewlet-choice-list__row {
+  --crewlet-hit-area-block-end: 0px;
+}
+
 /* A choice with a picture: the radio, the picture, the words, the tag. The
    picture centres on the label and its detail together. */
 .crewlet-choice-list__row.has-media {
@@ -8378,7 +8417,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Combobox-4FUVYIE7.css */
+/* Combobox-YDONYDTM.css */
 /*
  * Combobox: a field that offers completions.
  *
@@ -8405,9 +8444,10 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: var(--spacing-1);
+  --crewlet-listbox-gap: 1px;
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: var(--crewlet-listbox-gap);
   /*
    * OPAQUE, and the product's own panel surface: a translucent list over a
    * form puts two sets of words in the same place, and the words underneath
@@ -8461,7 +8501,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* CommandPalette-7CFGVBND.css */
+/* CommandPalette-TOZYLWLE.css */
 /*
  * The command palette: a field, an optional row of scopes, one scroller
  * holding the lead and the list, and a key legend.
@@ -8627,10 +8667,11 @@ a.crewlet-breadcrumb__crumb:focus-visible {
  * draw and no slider to measure, and the bar is each tab's own edge.
  */
 .crewlet-palette__scopes {
+  --crewlet-palette-scope-gap: var(--spacing-4);
   flex-shrink: 0;
   display: flex;
   align-items: stretch;
-  gap: var(--spacing-4);
+  gap: var(--crewlet-palette-scope-gap);
   min-height: var(--size-row-md);
   padding-inline: var(--spacing-4);
   border-bottom: 1px solid var(--color-border-default);
@@ -8659,6 +8700,9 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   font-weight: var(--font-weight-medium);
   white-space: nowrap;
   cursor: pointer;
+  /* Half the gap to each neighbour, so the scopes' targets meet (HitArea.css).
+     The row's own inline padding holds the reach at either end. */
+  --crewlet-hit-area-inline: calc(var(--crewlet-palette-scope-gap) / 2);
 }
 
 .crewlet-palette__scope:hover,
@@ -8873,7 +8917,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Composer-PXITWNEK.css */
+/* Composer-TXULCPPV.css */
 /*
  * A message written in place: the field and its footer strip in one box. The
  * BOX takes the focus ring every field in the package draws (see Input.css):
@@ -8903,7 +8947,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   outline-offset: -1px;
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-composer:has(.crewlet-composer__field:focus-visible) {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-composer:has(.crewlet-composer__field:focus-visible) {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -11939,7 +11983,7 @@ body.crewlet-data-table-resizing {
 }
 
 
-/* DatasetSource-SMGX4PS5.css */
+/* DatasetSource-FFKTD3ZU.css */
 /*
  * DatasetSource: one entry of a dashboard's Sources rail. The title and its
  * source kind, the definition, then where the rows stand, how many there are
@@ -11975,6 +12019,20 @@ body.crewlet-data-table-resizing {
 
 button.crewlet-dataset-source__summary {
   cursor: pointer;
+  /* Half the list's gap to each neighbour, so the entries' targets meet
+     (HitArea.css), across the entry's 1px boundary and the summary's own. */
+  --crewlet-hit-area-block: calc(var(--crewlet-dataset-source-list-gap, 0px) / 2 + 2px);
+}
+
+/* The list has no padding, so its first and last entries reach nothing past
+   it; and an open entry's preview holds controls the summary must not cover. */
+.crewlet-dataset-source-list__item:first-child button.crewlet-dataset-source__summary {
+  --crewlet-hit-area-block-start: 0px;
+}
+
+.crewlet-dataset-source-list__item:last-child button.crewlet-dataset-source__summary,
+.crewlet-dataset-source--open > button.crewlet-dataset-source__summary {
+  --crewlet-hit-area-block-end: 0px;
 }
 
 button.crewlet-dataset-source__summary:hover {
@@ -12100,9 +12158,10 @@ button.crewlet-dataset-source__summary:focus-visible {
 }
 
 .crewlet-dataset-source-list {
+  --crewlet-dataset-source-list-gap: var(--spacing-1);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
+  gap: var(--crewlet-dataset-source-list-gap);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -12113,7 +12172,7 @@ button.crewlet-dataset-source__summary:focus-visible {
 }
 
 
-/* DateTimePicker-2IVTKFV2.css */
+/* DateTimePicker-3A7JIIVL.css */
 /*
  * DateTimePicker: a Select-shaped trigger over a calendar dialog.
  *
@@ -12172,8 +12231,8 @@ button.crewlet-dataset-source__summary:focus-visible {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-datetime:focus-visible,
-:root[data-crewlet-focus='pointer'] .crewlet-datetime.is-open {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-datetime:focus-visible,
+:where(:root[data-crewlet-focus='pointer']) .crewlet-datetime.is-open {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -12305,7 +12364,7 @@ svg.crewlet-datetime__chevron {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-datetime__time-input:focus-visible {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-datetime__time-input:focus-visible {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -13022,7 +13081,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Document-YFWTWXJP.css */
+/* Document-TZ2NBLOR.css */
 /*
  * Rendered markdown, set as a document (Document.tsx).
  *
@@ -13398,7 +13457,7 @@ svg.crewlet-datetime__chevron {
   outline: 2px solid transparent;
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-document-title-field:focus-visible {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-document-title-field:focus-visible {
   border-block-end-color: var(--color-border-selected);
   box-shadow: none;
 }
@@ -13411,7 +13470,7 @@ svg.crewlet-datetime__chevron {
   box-shadow: 0 1px 0 var(--color-feedback-danger);
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-document-title-field[aria-invalid='true']:focus-visible {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-document-title-field[aria-invalid='true']:focus-visible {
   border-block-end-color: var(--color-feedback-danger);
 }
 
@@ -14214,6 +14273,44 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
+/* HitArea-QUOS6ZDJ.css */
+/*
+ * A ROW'S TARGET RUNS TO ITS NEIGHBOUR'S. The rows of one list are drawn a
+ * step apart, and the gap between them belonged to no row: a pointer crossing
+ * the list slowly met the list itself there, so the hand turned into the arrow
+ * and the hover fill went out between every two rows and came back on the
+ * next, which a reader sees as the cursor flickering. Each row that carries
+ * this class reaches half the gap on each side with an empty `::after`, so the
+ * targets meet in the middle of every gap and the drawn rows keep their
+ * spacing. The pseudo-element is part of its row: it takes the row's cursor,
+ * makes the row `:hover`, and a press on it is a press on the row.
+ *
+ * The reach is set on the ROW, from the gap its list is laid out with, as
+ * `--crewlet-hit-area-block` and `--crewlet-hit-area-inline` (each side may be
+ * set alone with the `-start` and `-end` forms). A row that sets none reaches
+ * nowhere. It stays inside the list's own padding, so no scroller grows.
+ *
+ * IT IS MEASURED FROM THE ROW'S PADDING EDGE, which is where an absolutely
+ * placed box starts, so a row drawn with a border (a transparent one
+ * included) adds the border's width to its reach.
+ *
+ * `position: relative` is at zero specificity, so a row positioned on purpose
+ * keeps its own position and is still the pseudo-element's containing block.
+ */
+:where(.crewlet-hit-area) {
+  position: relative;
+}
+
+.crewlet-hit-area::after {
+  content: '';
+  position: absolute;
+  top: calc(var(--crewlet-hit-area-block-start, var(--crewlet-hit-area-block, 0px)) * -1);
+  bottom: calc(var(--crewlet-hit-area-block-end, var(--crewlet-hit-area-block, 0px)) * -1);
+  inset-inline-start: calc(var(--crewlet-hit-area-inline-start, var(--crewlet-hit-area-inline, 0px)) * -1);
+  inset-inline-end: calc(var(--crewlet-hit-area-inline-end, var(--crewlet-hit-area-inline, 0px)) * -1);
+}
+
+
 /* HuePicker-PAIGH6LR.css */
 /*
  * A hue's swatch: the hue itself, as a dot beside its name. The name carries
@@ -14999,7 +15096,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* Input-ABGOFENS.css */
+/* Input-OQZBCRX5.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and
  * ReadOnlyField.
@@ -15126,8 +15223,13 @@ button.crewlet-finding-list__row:focus-visible {
  * round it before anybody had touched a key. A refused field keeps its own
  * colour under a pointer too (below). A document that tracks nothing keeps
  * the keyboard's ring.
+ *
+ * The modality is matched inside :where(), here and in every field's narrowing
+ * rule, so it narrows a ring and never outranks a variant's own: at the
+ * attribute's specificity it beat `.crewlet-input--command`, and the palette's
+ * borderless search field drew a square accent hairline round its text.
  */
-:root[data-crewlet-focus='pointer'] .crewlet-input:has(.crewlet-input__control:focus-visible) {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-input:has(.crewlet-input__control:focus-visible) {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -15152,7 +15254,7 @@ button.crewlet-finding-list__row:focus-visible {
   outline-color: var(--color-feedback-danger);
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-input.is-error:has(.crewlet-input__control:focus-visible) {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-input.is-error:has(.crewlet-input__control:focus-visible) {
   outline-color: var(--color-feedback-danger);
 }
 
@@ -15397,7 +15499,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-textarea:focus-visible {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-textarea:focus-visible {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -15410,7 +15512,7 @@ button.crewlet-finding-list__row:focus-visible {
   outline-color: var(--color-feedback-danger);
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-textarea.is-error:focus-visible {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-textarea.is-error:focus-visible {
   outline-color: var(--color-feedback-danger);
 }
 
@@ -16632,7 +16734,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* Listbox-6WJNJQVQ.css */
+/* Listbox-NQV6E3FS.css */
 /*
  * The listbox register: one look for every list a field offers.
  *
@@ -16707,6 +16809,9 @@ button.crewlet-finding-list__row:focus-visible {
   cursor: pointer;
   /* A row is chosen by the arrows as often as by the pointer, so the highlight
      lands with no transition: a fade would lag a held arrow key. */
+  /* Where a list sets its rows apart, each row's target reaches half the gap
+     (HitArea.css), so the pointer never falls between two of them. */
+  --crewlet-hit-area-block: calc(var(--crewlet-listbox-gap, 0px) / 2);
 }
 
 /*
@@ -16848,7 +16953,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* LivePreview-BROGKR4N.css */
+/* LivePreview-KQEDMQCY.css */
 /*
  * A live preview: the stand-in, the still copy of what the content drew and
  * the live layer it is drawn in, stacked in that order in one box. The box
@@ -16903,6 +17008,19 @@ button.crewlet-finding-list__row:focus-visible {
   transition: none !important;
 }
 
+/* NOR DOES ANYTHING IN IT SCROLL: a copy of a box that scrolled (a sheet
+   wider than the card, a long list) is a picture of its first view, so it
+   draws no scrollbar. Shown, the bar sat across the card as a stray band.
+   The live layer it is copied from draws none either, so what is laid out
+   there (a sheet's room for a bar included) is what the copy shows. */
+:is(.crewlet-live-preview__live, .crewlet-live-preview__still) * {
+  scrollbar-width: none !important;
+}
+
+:is(.crewlet-live-preview__live, .crewlet-live-preview__still) *::-webkit-scrollbar {
+  display: none;
+}
+
 /* THE LIVE LAYER renders out of sight: content that is copied is never seen
    live, only its copy is. A frame's page is kept rather than copied, so a
    framed preview's live layer is what fades in once it has drawn. */
@@ -21832,7 +21950,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* SegmentedControl-FLI45IOW.css */
+/* SegmentedControl-B7XCUOML.css */
 /*
  * SegmentedControl: the pill row, drawn with the Tabs classes.
  *
@@ -21860,8 +21978,10 @@ button.crewlet-presence-stack__member:focus-visible {
  * equal weight in a file that happens to come later takes them back.
  */
 .crewlet-tabs.crewlet-segmented--cards {
+  --crewlet-tabs-gap: var(--spacing-2);
+  --crewlet-tabs-row-gap: var(--spacing-2);
   display: grid;
-  gap: var(--spacing-2);
+  gap: var(--crewlet-tabs-gap);
   width: 100%;
   align-items: stretch;
 }
@@ -21872,6 +21992,9 @@ button.crewlet-presence-stack__member:focus-visible {
  * surface inside a panel of the same surface reads as a second panel.
  */
 .crewlet-segmented--cards .crewlet-segmented__option {
+  /* A card's 1px border is inside the reach (HitArea.css). */
+  --crewlet-hit-area-inline: calc(var(--crewlet-tabs-gap) / 2 + 1px);
+  --crewlet-hit-area-block: calc(var(--crewlet-tabs-row-gap) / 2 + 1px);
   justify-content: flex-start;
   text-align: left;
   /* A sentence under a name is a sentence: it wraps rather than being cut. */
@@ -21916,7 +22039,8 @@ button.crewlet-presence-stack__member:focus-visible {
   /* No gap between ROWS: each chip's target already overhangs its drawing by
      half a step above and below, so two rows' drawings stand a whole step
      apart while their targets meet. */
-  gap: 0 var(--spacing-1);
+  --crewlet-tabs-gap: var(--spacing-1);
+  gap: 0 var(--crewlet-tabs-gap);
 }
 
 /*
@@ -22020,6 +22144,7 @@ button.crewlet-presence-stack__member:focus-visible {
  * every option stays visible and inside the focus ring's room.
  */
 .crewlet-tabs--pill.crewlet-segmented {
+  --crewlet-tabs-row-gap: var(--crewlet-tabs-gap);
   flex-wrap: wrap;
   min-width: 0;
   max-width: 100%;
@@ -22138,7 +22263,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* Select-W3CHTZXP.css */
+/* Select-F526HLNR.css */
 /*
  * Select: one chrome over two controls, and the product's only dropdown.
  *
@@ -22217,7 +22342,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-select:focus-within {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-select:focus-within {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -22280,7 +22405,7 @@ button.crewlet-presence-stack__member:focus-visible {
   outline-color: var(--color-feedback-danger);
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-select.is-error:focus-within {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-select.is-error:focus-within {
   outline-color: var(--color-feedback-danger);
 }
 
@@ -22427,9 +22552,10 @@ svg.crewlet-select__chevron {
 }
 
 .crewlet-select__group {
+  --crewlet-listbox-gap: 1px;
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: var(--crewlet-listbox-gap);
 }
 
 .crewlet-select__option {
@@ -22582,7 +22708,7 @@ svg.crewlet-select__chevron {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-select__search:focus-within {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-select__search:focus-within {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -22857,7 +22983,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SheetGrid-YRDXTIIZ.css */
+/* SheetGrid-XK7T7M34.css */
 /*
  * The editable sheet (SheetGrid.tsx) and its cells (cells.tsx).
  *
@@ -23309,16 +23435,21 @@ svg.crewlet-select__chevron {
 /* ADD COLUMN stands beside the header row, outside the grid's roles: the
    scroller lays the grid and the control side by side, the grid's last track
    still takes the slack up to the control, and the control sticks to the top
-   with the header while the rows scroll under it. */
+   with the header while the rows scroll under it. Its track is the control's
+   own square plus an inset on each side, so the square never fills the track
+   edge to edge. THE GRID GROWS INTO WHATEVER THE CONTROL LEAVES rather than
+   into a width assumed for it: held to 100% less an assumed width, it
+   overflowed by the difference whenever the control drew wider, and the
+   sheet scrolled sideways by a few pixels. */
 .crewlet-sheet-grid__scroller--add-column {
-  --crewlet-sheet-add-column-width: var(--size-target-min);
+  --crewlet-sheet-add-column-width: calc(var(--size-control-sm) + 2 * var(--spacing-1));
   display: flex;
   align-items: flex-start;
 }
 
 .crewlet-sheet-grid__scroller--add-column > .crewlet-sheet-grid__grid {
-  flex: 0 0 auto;
-  min-width: calc(100% - var(--crewlet-sheet-add-column-width));
+  flex: 1 0 auto;
+  min-width: 0;
 }
 
 .crewlet-sheet-grid__add-column {
@@ -23713,7 +23844,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SidebarNav-KF66MLOM.css */
+/* SidebarNav-7SGUZYKK.css */
 /*
  * The rail's navigation.
  *
@@ -23744,9 +23875,12 @@ svg.crewlet-select__chevron {
  * old step, so the gap is paid for many times over by the row it sits beside.
  */
 .crewlet-nav-group {
+  --crewlet-nav-group-gap: calc(var(--spacing-1) / 2);
+  /* What a row reaches across (HitArea.css): its own list's gap. */
+  --crewlet-nav-row-gap: var(--crewlet-nav-group-gap);
   display: flex;
   flex-direction: column;
-  gap: calc(var(--spacing-1) / 2);
+  gap: var(--crewlet-nav-group-gap);
   min-width: 0;
 }
 
@@ -23891,6 +24025,20 @@ svg.crewlet-select__chevron {
   transition:
     background var(--motion-duration-fast) var(--motion-easing-default),
     color var(--motion-duration-fast) var(--motion-easing-default);
+  /* Half the gap to each neighbour, so the targets meet (HitArea.css). */
+  --crewlet-hit-area-block: calc(var(--crewlet-nav-row-gap, 0px) / 2);
+}
+
+/*
+ * AN OPEN ROW AND ITS FIRST NESTED ROW ABUT, with no gap between them to
+ * cross, so neither reaches into the other.
+ */
+.crewlet-nav-item:has(> .crewlet-nav-item__children:not([hidden])) > .crewlet-nav-item__head > .crewlet-nav-item__row {
+  --crewlet-hit-area-block-end: 0px;
+}
+
+.crewlet-nav-item__children > .crewlet-nav-item:first-child > .crewlet-nav-item__head > .crewlet-nav-item__row {
+  --crewlet-hit-area-block-start: 0px;
 }
 
 .crewlet-nav-item__row:hover {
@@ -24102,9 +24250,11 @@ svg.crewlet-select__chevron {
  * rail keeps for the one count that asks the reader to act.
  */
 .crewlet-nav-item__children {
+  --crewlet-nav-children-gap: var(--spacing-1);
+  --crewlet-nav-row-gap: var(--crewlet-nav-children-gap);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
+  gap: var(--crewlet-nav-children-gap);
   margin-left: var(--size-nav-row-pad);
   padding-left: var(--spacing-2);
   border-left: 1px solid var(--color-border-default);
@@ -25136,7 +25286,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SourceEditor-QAYE2JS6.css */
+/* SourceEditor-OKPWPFXK.css */
 /*
  * Source text written in place: a gutter of line numbers beside a real
  * textarea, and the marks a checker placed drawn behind the text. The gutter,
@@ -25176,7 +25326,7 @@ svg.crewlet-select__chevron {
   outline-offset: -1px;
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-source-editor:has(.crewlet-source-editor__field:focus-visible) {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-source-editor:has(.crewlet-source-editor__field:focus-visible) {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -26806,7 +26956,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Tabs-MMZXV5EF.css */
+/* Tabs-WIF7457H.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -26837,8 +26987,9 @@ b.crewlet-switcher__match {
  * row is reachable by the arrow keys either way.
  */
 .crewlet-tabs--underline {
+  --crewlet-tabs-gap: var(--spacing-2);
   display: flex;
-  gap: var(--spacing-2);
+  gap: var(--crewlet-tabs-gap);
   border-bottom: 1px solid var(--color-border-default);
   position: relative;
   width: 100%;
@@ -26912,8 +27063,9 @@ b.crewlet-switcher__match {
  */
 .crewlet-tabs--pill {
   --crewlet-tabs-pill-inset: 1px;
+  --crewlet-tabs-gap: var(--crewlet-tabs-pill-inset);
 
-  gap: var(--crewlet-tabs-pill-inset);
+  gap: var(--crewlet-tabs-gap);
   padding: var(--crewlet-tabs-pill-inset);
   background: var(--color-surface-elevated);
   border: 1px solid var(--color-border-default);
@@ -26974,6 +27126,20 @@ b.crewlet-switcher__match {
     background-color var(--motion-duration-fast) var(--motion-easing-default),
     color var(--motion-duration-fast) var(--motion-easing-default),
     box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+  /* Half the gap to each neighbour, so the targets meet (HitArea.css). A row
+     that wraps reaches across its rows' gap too. */
+  --crewlet-hit-area-inline: calc(var(--crewlet-tabs-gap, 0px) / 2);
+  --crewlet-hit-area-block: calc(var(--crewlet-tabs-row-gap, 0px) / 2);
+}
+
+/* The row's two ends reach nothing past it: the underline row is a scroller,
+   and a target past its last tab would be width it scrolls by. */
+.crewlet-tabs__tab:first-child {
+  --crewlet-hit-area-inline-start: 0px;
+}
+
+.crewlet-tabs__tab:last-child {
+  --crewlet-hit-area-inline-end: 0px;
 }
 
 /*
@@ -27120,9 +27286,10 @@ b.crewlet-switcher__match {
  * (FilterChip draws the same pair).
  */
 .crewlet-tabs--chip {
+  --crewlet-tabs-gap: calc(var(--spacing-1) / 2);
   display: inline-flex;
   align-items: center;
-  gap: calc(var(--spacing-1) / 2);
+  gap: var(--crewlet-tabs-gap);
 }
 
 .crewlet-tabs--chip .crewlet-tabs__tab {
@@ -27817,7 +27984,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TagsInput-7EGBBXHS.css */
+/* TagsInput-CLFHP6I2.css */
 /*
  * TagsInput: several values in one field.
  *
@@ -27897,7 +28064,7 @@ b.crewlet-switcher__match {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-tags-input__box:focus-visible {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-tags-input__box:focus-visible {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -28547,7 +28714,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TimeWindowPicker-DEFDV77Z.css */
+/* TimeWindowPicker-I3HXC74I.css */
 /*
  * TimeWindowPicker: one trigger over one panel.
  *
@@ -28602,8 +28769,8 @@ b.crewlet-switcher__match {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-time-window:focus-visible,
-:root[data-crewlet-focus='pointer'] .crewlet-time-window.is-open {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-time-window:focus-visible,
+:where(:root[data-crewlet-focus='pointer']) .crewlet-time-window.is-open {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -28880,7 +29047,7 @@ svg.crewlet-time-window__tick {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-time-window__masked:has(.crewlet-time-window__masked-input:focus-visible) {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-time-window__masked:has(.crewlet-time-window__masked-input:focus-visible) {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }