@crewlethq/ui 0.37.0 → 0.37.1

package/README.md

@@ -204,6 +204,30 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.37.1
+
+### Sheets
+
+**`SheetGrid`'s Add column fits the header's end.** Its track was the 24px pointer-target floor, narrower than the small icon button it holds (26px at the normal density, more at comfortable), so the square filled the track edge to edge and pushed it wider. The track is now the button's square plus a 4px inset on each side, at every density, and the plus is drawn at the button's own glyph size.
+
+**`SheetGrid` with Add column no longer scrolls sideways by a few pixels.** The grid was held to the scroller's width less an assumed width for the Add column control, so it overflowed by however much wider the control drew (2px at the default density), and the platform drew a horizontal scrollbar under a sheet with room to spare. The grid now grows into whatever room the control leaves.
+
+**`fit="content"` makes room for a horizontal scrollbar.** Sized exactly to its rows, a sheet wider than its box lost the scrollbar's height to it wherever the platform draws scrollbars in the layout, and scrolled down by that much as well. The grid measures the bar and adds its height, so a wide, short sheet scrolls sideways only.
+
+**A `LivePreview` still copy draws no scrollbar,** and nor does the live layer it is copied from. A copy of a box that scrolled (a sheet wider than its card) is a picture of its first view, and its scrollbar sat across the card as a stray band; with none in the live layer either, a sheet there leaves no room for one under its rows.
+
+### Focus
+
+**Focus handed back after a pointer press draws no ring.** A trigger focused again when its palette, menu, listbox or popover closes matched `:focus-visible`, because the field inside always did, so a palette opened with a click and closed with Escape left the sidebar's search box ringed. `returnFocus(el)` (exported with `FOCUS_RETURNED_ATTRIBUTE`) focuses the element and marks it until it blurs, and the base stylesheet in `@crewlethq/tokens` keeps the ring off a marked element while the modality is the pointer's. A key pressed afterwards brings it back. The modal stack, `Menu`, `Popover`, `Select`, `Switcher`, `Canvas`'s zoom field and `ArtifactBar`'s rename all hand focus back through it.
+
+**A shortcut outside a field is the keyboard** (`trackFocusModality`). Cmd+K or Ctrl+K opens the palette, so closing it with Escape rings whatever focus returns to. Inside a field a shortcut is still neither, since it is copy, paste or undo.
+
+**The palette's search field draws no ring under the pointer either.** Every field's pointer narrowing now matches the modality inside `:where()`, so it narrows a ring and never outranks a variant's own. Matched bare, it beat `Input`'s command variant and drew a square accent hairline round the palette's borderless field.
+
+### Hit areas
+
+**The rows of a list meet at their targets.** A list draws its rows a step apart, and the gap between two rows used to belong to no row: a pointer crossing a 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 reads as the cursor flickering. Measured on the sheet create page's "Start from" list, a slow pass down it switched the cursor 14 times and crossed six dead strips of 4px; it now switches twice, on entering and leaving. Each row reaches half the gap on each side with an empty `::after`, so the drawn spacing is unchanged and the targets meet in the middle of the gap. The reach is `HIT_AREA_CLASS` (`HitArea.css`), set on the row from the gap its list is laid out with as `--crewlet-hit-area-block` and `--crewlet-hit-area-inline`, measured from the row's padding edge. `ChoiceList` (with the answer after a dashed rule reaching up across it, and a row with its panel open reaching nothing downward), `SidebarNav`'s rows and nested rows, the rail foot's `AppShellRailRow` and `AccountRow`, `ArtifactMakeRow`'s tray, `Tabs` in every variant, `SegmentedControl`, `Select`'s and `Combobox`'s options, `DatasetSourceList`'s entries and the command palette's scopes take it. A list of an application's own takes it the same way (Foundations / Hit areas). No scroller grows: the reach stays inside each list's padding, and a scrolling row of tabs reaches nothing past its first and last tab.
+
 ## Changes in 0.37.0
 
 ### An artifact list with an identity

package/dist/AgentHandoffPanel/index.js

@@ -1,16 +1,16 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-EOQFPZEE.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-YSG3DW7W.js';
 import '../chunk-AUQPBL4O.js';
 import '../chunk-3TFDQLW3.js';
 import '../chunk-MICH6QSJ.js';
-import '../chunk-RH2NCQBZ.js';
+import '../chunk-ISA2O2BK.js';
 import '../chunk-Y5BD4MTE.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AppShell/index.d.ts

@@ -1,3 +1,4 @@
+import '../HitArea/HitArea.css';
 import './AppShell.css';
 export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './AppShell.js';
 export { AccountRow } from './AccountRow.js';

package/dist/AppShell/index.js

@@ -1,9 +1,11 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-PGZ2R3ON.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-HDHZWIFL.js';
 import '../chunk-RTPQDNW3.js';
-import '../chunk-BUVCV3WI.js';
+import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{AppShell-JTSEOA57.css → AppShell-JBCZSSX3.css}

@@ -146,10 +146,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);
 }
@@ -209,6 +210,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),
@@ -635,11 +640,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 {
@@ -656,6 +662,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%;

package/dist/ArrangeList/index.js

@@ -1,11 +1,11 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-27GD7LVR.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-ZMWXE4GT.js';
 import '../chunk-A722MUNR.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-PJIPUEJ3.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+import '../chunk-AXS6MBNH.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactBar/index.js

@@ -1,17 +1,19 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-APDKUGSH.js';
-import '../chunk-WKEPORNM.js';
-import '../chunk-6ZJ3N7QI.js';
-import '../chunk-CCAXYHQS.js';
-import '../chunk-VL6CUNSX.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-S27UBCVX.js';
+import '../chunk-4ISUIS6F.js';
+import '../chunk-2QZ2VPHR.js';
+import '../chunk-7SDUKCNW.js';
 import '../chunk-RKKO7QHH.js';
+import '../chunk-I33UIUZD.js';
 import '../chunk-ILDNJHRU.js';
 import '../chunk-CE2THTQR.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-BUVCV3WI.js';
+import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactCover/index.js

@@ -1,5 +1,5 @@
-export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-JQLS3MZB.js';
-import '../chunk-P6WFZDKS.js';
+export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-FWBKMPNR.js';
+import '../chunk-PWG3VHRQ.js';
 import '../chunk-CE2THTQR.js';
-import '../chunk-YSGLEHND.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactMakeRow/index.d.ts

@@ -1,3 +1,4 @@
+import '../HitArea/HitArea.css';
 import '../ArtifactKindIllustration/ArtifactKinds.css';
 import './ArtifactMakeRow.css';
 export { ArtifactMakeRow } from './ArtifactMakeRow.js';

package/dist/ArtifactMakeRow/index.js

@@ -1,4 +1,5 @@
-export { ArtifactMakeRow } from '../chunk-EAKC24BW.js';
+export { ArtifactMakeRow } from '../chunk-NS4NSHVX.js';
 import '../chunk-CE2THTQR.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ArtifactMakeRow-XBA2MPSY.css → ArtifactMakeRow-W3RD5YWZ.css}

@@ -26,9 +26,10 @@
 }
 
 .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;
@@ -53,6 +54,10 @@
   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),

package/dist/AvatarPicker/index.js

@@ -1,14 +1,16 @@
-export { AvatarPicker } from '../chunk-GYBDPCRC.js';
-import '../chunk-SUXP4OBT.js';
-import '../chunk-K3IJQNB7.js';
+export { AvatarPicker } from '../chunk-ECGGQX2H.js';
+import '../chunk-F4LPQA4E.js';
+import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-YEVG2X5R.js';
-import '../chunk-CCAXYHQS.js';
-import '../chunk-VL6CUNSX.js';
+import '../chunk-2QZ2VPHR.js';
+import '../chunk-7SDUKCNW.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2YTOOH3A.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Canvas/index.js

@@ -1,10 +1,11 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-4BYHAOHH.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-DAERKOOG.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-6ZJ3N7QI.js';
+import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasBoard/index.js

@@ -1,14 +1,15 @@
-export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-FHHYXZSP.js';
+export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-C7OKDYBH.js';
 import '../chunk-5SZGKSGL.js';
-import '../chunk-7VAUGG6B.js';
-import '../chunk-PGRPNDWM.js';
-import '../chunk-4BYHAOHH.js';
+import '../chunk-B5UHX5UC.js';
+import '../chunk-NR4CPM4T.js';
+import '../chunk-DAERKOOG.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-6ZJ3N7QI.js';
+import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasToolbar/index.js

@@ -1,12 +1,13 @@
-export { CanvasToolbar, toolForKey } from '../chunk-7VAUGG6B.js';
-import '../chunk-PGRPNDWM.js';
-import '../chunk-4BYHAOHH.js';
+export { CanvasToolbar, toolForKey } from '../chunk-B5UHX5UC.js';
+import '../chunk-NR4CPM4T.js';
+import '../chunk-DAERKOOG.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-6ZJ3N7QI.js';
+import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChangeMark/index.js

@@ -1,8 +1,9 @@
-export { ChangeMark } from '../chunk-47JQAGRV.js';
+export { ChangeMark } from '../chunk-66X5WDKE.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-6ZJ3N7QI.js';
+import '../chunk-I33UIUZD.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Checkbox/index.js

@@ -1,7 +1,7 @@
-export { Checkbox, CheckboxGroup } from '../chunk-PJIPUEJ3.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+export { Checkbox, CheckboxGroup } from '../chunk-AXS6MBNH.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChoiceList/index.d.ts

@@ -1,3 +1,4 @@
+import '../HitArea/HitArea.css';
 import './ChoiceList.css';
 export { ChoiceList } from './ChoiceList.js';
 export type { ChoiceListOption, ChoiceListProps } from './ChoiceList.js';

package/dist/ChoiceList/index.js

@@ -1,2 +1,3 @@
-export { ChoiceList } from '../chunk-WZGYIVYH.js';
+export { ChoiceList } from '../chunk-EAQLI2SO.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ChoiceList-EA2W6MOS.css → ChoiceList-KFYFAECP.css}

@@ -8,8 +8,10 @@
 .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);
@@ -22,21 +24,24 @@
 
 .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;
@@ -47,6 +52,23 @@
   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 {

package/dist/Combobox/index.d.ts

@@ -1,3 +1,4 @@
+import '../HitArea/HitArea.css';
 import './Combobox.css';
 export { Combobox } from './Combobox.js';
 export type { ComboboxListRender, ComboboxOption, ComboboxProps } from './Combobox.js';

package/dist/Combobox/index.js

@@ -1,9 +1,10 @@
-export { Combobox } from '../chunk-PPFX6GRK.js';
-import '../chunk-F73MC7EZ.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+export { Combobox } from '../chunk-EAEJ7CDM.js';
+import '../chunk-7KHM2FZH.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Combobox-4FUVYIE7.css → Combobox-YDONYDTM.css}

@@ -24,9 +24,10 @@
   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

package/dist/CommandPalette/index.d.ts

@@ -1,3 +1,4 @@
+import '../HitArea/HitArea.css';
 import './CommandPalette.css';
 export { CommandPalette } from './CommandPalette.js';
 export type { CommandPaletteGroup, CommandPaletteItem, CommandPaletteProps, CommandPaletteScope, CommandPaletteScopeProps, } from './CommandPalette.js';

package/dist/CommandPalette/index.js

@@ -1,14 +1,15 @@
-export { CommandPalette } from '../chunk-N5SKHIAP.js';
-import '../chunk-XEGZHHRH.js';
-import '../chunk-F73MC7EZ.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+export { CommandPalette } from '../chunk-A72JPXIV.js';
+import '../chunk-SVGARBDY.js';
+import '../chunk-7KHM2FZH.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{CommandPalette-7CFGVBND.css → CommandPalette-TOZYLWLE.css}

@@ -163,10 +163,11 @@
  * 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);
@@ -195,6 +196,9 @@
   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,

package/dist/CommentThread/index.js

@@ -1,17 +1,17 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-44WJLPQS.js';
-import '../chunk-P6WFZDKS.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-MMPKN7WV.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-RH2NCQBZ.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+import '../chunk-PWG3VHRQ.js';
+import '../chunk-ISA2O2BK.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Composer/index.js

@@ -1,8 +1,8 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-RH2NCQBZ.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-ISA2O2BK.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Composer-PXITWNEK.css → Composer-TXULCPPV.css}

@@ -27,7 +27,7 @@
   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);
 }

package/dist/ConfirmField/index.js

@@ -1,8 +1,8 @@
-export { ConfirmField, confirmMatches } from '../chunk-KJW2AS57.js';
+export { ConfirmField, confirmMatches } from '../chunk-PEUGPAKH.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataTable/index.js

@@ -1,17 +1,17 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-JML75PGJ.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-A23KDROH.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-XEGZHHRH.js';
-import '../chunk-PJIPUEJ3.js';
+import '../chunk-SVGARBDY.js';
+import '../chunk-AXS6MBNH.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-BUVCV3WI.js';
+import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataView/index.js

@@ -1,27 +1,27 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-GS7ZTHPF.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-MG3HTY6F.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-JML75PGJ.js';
-import '../chunk-L4WZSVMT.js';
+import '../chunk-A23KDROH.js';
+import '../chunk-UB6MLXUL.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-XEGZHHRH.js';
-import '../chunk-F73MC7EZ.js';
+import '../chunk-SVGARBDY.js';
+import '../chunk-7KHM2FZH.js';
+import '../chunk-KHJIEPZV.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-PGRPNDWM.js';
-import '../chunk-K3IJQNB7.js';
-import '../chunk-PJIPUEJ3.js';
+import '../chunk-NR4CPM4T.js';
+import '../chunk-AXS6MBNH.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-BUVCV3WI.js';
+import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DatasetSource/index.d.ts

@@ -1,3 +1,4 @@
+import '../HitArea/HitArea.css';
 import './DatasetSource.css';
 export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from './DatasetSource.js';
 export type { DatasetSourceKind, DatasetSourceLabels, DatasetSourceListProps, DatasetSourceProps, } from './DatasetSource.js';