@crewlethq/ui 0.35.1 → 0.37.0

package/dist/CanvasBoard/index.js

@@ -1,11 +1,11 @@
-export { BOARD_TITLE_MIN_WIDTH, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardRoom, liveBoards, titleSize } from '../chunk-E35CMI5D.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-FHHYXZSP.js';
 import '../chunk-5SZGKSGL.js';
-import '../chunk-3Y56GQPM.js';
+import '../chunk-7VAUGG6B.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-3P4Y5RX6.js';
+import '../chunk-4BYHAOHH.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-6ZJ3N7QI.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/{CanvasBoard-5NNSKY6A.css → CanvasBoard-TS4P356F.css}

@@ -82,19 +82,26 @@
 }
 
 /*
- * HOVER, then SELECTION, in the accent: one screen pixel and then two, over
- * the hairline. Hovering a board's name is hovering its board, which is how a
- * reader finds the board a name belongs to on a crowded canvas.
+ * HOVER, then SELECTION: one screen pixel each, over the hairline. Hover is
+ * the selected edge, the accent mixed toward the canvas, so pointing at a
+ * board previews the pick without claiming it; selection is the full accent,
+ * crisp, with its four corners drawn, which are what say "this one" on a
+ * canvas where a board's own content can be any colour. It was two pixels,
+ * the focus ring's weight in the focus ring's hue, so a picked board and the
+ * board the keyboard was on read alike; the 2px ring is the live board's now
+ * alone ([data-active], below), which takes the pointer like a focused frame.
+ * Hovering a board's name is hovering its board, which is how a reader finds
+ * the board a name belongs to on a crowded canvas.
  */
 .crewlet-canvas-board__board:hover .crewlet-canvas-board__body,
 .crewlet-canvas-board__note:hover {
-  outline: calc(1px * var(--crewlet-canvas-board-unzoom)) solid var(--color-brand-accent);
+  outline: calc(1px * var(--crewlet-canvas-board-unzoom)) solid var(--color-border-selected);
   outline-offset: 0;
 }
 
 .crewlet-canvas-board__board[data-selected] .crewlet-canvas-board__body,
 .crewlet-canvas-board__note[data-selected] {
-  outline: calc(2px * var(--crewlet-canvas-board-unzoom)) solid var(--color-brand-accent);
+  outline: calc(1px * var(--crewlet-canvas-board-unzoom)) solid var(--color-brand-accent);
   outline-offset: 0;
 }
 
@@ -202,7 +209,7 @@
   transform-origin: bottom left;
 }
 
-/* A board drawn too narrow to name goes unnamed (`boardRoom`). */
+/* A board drawn too narrow for even its number goes unnamed (`boardName`). */
 .crewlet-canvas-board__board[data-untitled] > .crewlet-canvas-board__chrome {
   display: none;
 }

package/dist/CanvasToolbar/index.js

@@ -1,9 +1,9 @@
-export { CanvasToolbar, toolForKey } from '../chunk-3Y56GQPM.js';
+export { CanvasToolbar, toolForKey } from '../chunk-7VAUGG6B.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-3P4Y5RX6.js';
+import '../chunk-4BYHAOHH.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-6ZJ3N7QI.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/Card/index.js

@@ -1,4 +1,4 @@
-export { Card } from '../chunk-ACA27MZH.js';
+export { Card } from '../chunk-5QXRI35B.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/{Card-KJOYHDTJ.css → Card-QOVASQNU.css}

@@ -42,7 +42,7 @@
  * `box-shadow: <shadow>, none` is invalid at computed-value time, so the
  * declaration is dropped and the light card loses the elevation the list was
  * built around. Alone on a pseudo element the same token is valid in both
- * themes, and it composes with the selection ring rather than replacing
+ * themes, and it composes with a chosen card's edge rather than replacing
  * whichever was declared last, exactly as the rail does.
  */
 .crewlet-card--elevated::after {
@@ -116,8 +116,8 @@
 /*
  * THE FLUSH RECIPE. The slots reach the card's edges, and the clip is what
  * makes the header's hairline and a table's own corners follow the radius
- * instead of crossing it. The selection ring survives the clip because it is
- * an INSET shadow; an outset one would be cut off here.
+ * instead of crossing it. A chosen card's edge and fill survive the clip
+ * because they are its own border and background.
  */
 .crewlet-card--flush {
   overflow: hidden;
@@ -200,29 +200,34 @@
 
 /* One ring, over the card's own boundary rather than 2px off it, which is two
    edges with a gap between them: the rule every field keeps (see Input.css).
-   A chosen card keeps an accent line inside the ring, since the selection
-   ring below is two pixels deep and the focus ring covers one of them. */
+   On a chosen card it covers the selected edge, and the selected fill inside
+   it still says the card is chosen. */
 .crewlet-card.is-interactive:focus-visible {
   outline: 2px solid var(--color-focus);
   outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 /*
- * Chosen. A ring rather than a tint, because a card carries its own surface
- * and a tint under it would change the ground every value on it was measured
- * against.
+ * Chosen, as every chosen option in the package is drawn: the selected edge
+ * (the accent mixed toward the card) over the selected fill. It was the full
+ * accent border under --shadow-selection, a second accent ring two pixels
+ * deep, which is the focus ring's weight in the focus ring's hue, so a grid
+ * of cards showed the pick and the keyboard's place alike. The fill is laid
+ * as an IMAGE over the card's own surface rather than in place of it, so the
+ * card keeps its ground and the tint composites over it, as it does over a
+ * row.
  */
 .crewlet-card.is-selected {
-  box-shadow: var(--shadow-selection);
-  border-color: var(--color-brand-accent);
+  border-color: var(--color-border-selected);
+  background-image: linear-gradient(var(--color-surface-selected), var(--color-surface-selected));
 }
 
 /* ---- Rails ------------------------------------------------------------- */
 
 /*
  * A state down the leading edge. Drawn as a pseudo element rather than a
- * border or an inset shadow, so it composes with the elevated shadow and the
- * selection ring instead of replacing whichever one was declared last.
+ * border or an inset shadow, so it composes with the elevated shadow and a
+ * chosen card's edge instead of replacing whichever one was declared last.
  */
 .crewlet-card--rail-info::before,
 .crewlet-card--rail-warning::before,

package/dist/Checkbox/index.js

@@ -1,5 +1,6 @@
-export { Checkbox, CheckboxGroup } from '../chunk-CPEPST4S.js';
-import '../chunk-6QFAK2WV.js';
+export { Checkbox, CheckboxGroup } from '../chunk-PJIPUEJ3.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ChoiceButtons/index.js

@@ -1,3 +1,3 @@
-export { ChoiceButtons } from '../chunk-YSJC7AZC.js';
+export { ChoiceButtons } from '../chunk-BWOIUOO3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ChoiceButtons-DJ5EOGUA.css → ChoiceButtons-FLIFXFFS.css}

@@ -36,6 +36,16 @@
     border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/*
+ * AN OPTION WITH A DETAIL STARTS AT ITS TOP. Laid out as tiles (a host's grid
+ * of columns), the options in one row stretch to the tallest, and centred
+ * text put a one-line detail's label lower than its neighbour's two-line
+ * one. A column of options is unchanged: each is as tall as its own text.
+ */
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) {
+  align-items: flex-start;
+}
+
 .crewlet-choice-buttons__option:hover:not([aria-disabled='true']) {
   background: var(--color-surface-elevated);
   border-color: var(--color-border-strong-hover);

package/dist/ChoiceList/index.js

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

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

@@ -1,7 +1,9 @@
 /*
  * 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
- * accent's soft fill, so the answer reads at a glance without the radio.
+ * selected fill (the accent's soft tint), so the answer reads at a glance; the
+ * radio is the mark that clears 3:1, and no row is ever ringed in the accent,
+ * which is the focus ring's colour.
  */
 .crewlet-choice-list {
   /* The platform's radio, sized here so a panel can line up with the text beside it. */
@@ -66,21 +68,47 @@
 }
 
 .crewlet-choice-list__row.is-checked {
-  background: var(--color-brand-accent-soft);
+  background: var(--color-surface-selected);
 }
 
 .crewlet-choice-list.is-disabled .crewlet-choice-list__row {
   cursor: not-allowed;
 }
 
+/*
+ * THE RADIO IS DRAWN, not the platform's. In a dark palette the platform's
+ * own radio fills an unchosen answer with a grey disc, which beside the one
+ * chosen read as a second, muted choice. Drawn here, an unchosen answer is an
+ * empty ring on the control boundary (3:1 on every ground) and the chosen one
+ * the accent ring round an accent dot. Forced colours hand it back to the
+ * platform, which draws it in the system's own colours.
+ */
 .crewlet-choice-list__radio {
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  flex: none;
+  box-sizing: border-box;
   width: var(--crewlet-choice-list-radio-size);
   height: var(--crewlet-choice-list-radio-size);
   margin: 3px 0 0;
-  accent-color: var(--color-brand-accent);
+  border: 1px solid var(--color-border-control);
+  border-radius: 50%;
+  background: transparent;
   cursor: inherit;
 }
 
+.crewlet-choice-list__radio:checked {
+  border-color: var(--color-brand-accent);
+  background: radial-gradient(circle, var(--color-brand-accent) 0 3px, transparent 3.5px);
+}
+
+@media (forced-colors: active) {
+  .crewlet-choice-list__radio {
+    appearance: auto;
+  }
+}
+
 /* A radio draws its own edge, so the ring sits on it, as a checkbox's does. */
 .crewlet-choice-list__radio:focus-visible {
   outline: 2px solid var(--color-focus);
@@ -105,13 +133,16 @@
   overflow-wrap: anywhere;
 }
 
+/* A tag says something ABOUT an answer ("Suggested"), so it is set in the
+   tertiary ink: in the accent ink it was a second accent mark on the chosen
+   row, beside the radio and the fill that already say which one is chosen. */
 .crewlet-choice-list__tag {
   padding-top: 2px;
   font-size: var(--font-size-2xs);
   font-weight: 500;
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  color: var(--color-brand-accent-ink);
+  color: var(--color-text-tertiary);
   white-space: nowrap;
 }
 
@@ -131,7 +162,7 @@
   padding: var(--spacing-1) var(--spacing-2) var(--spacing-3) calc(var(--spacing-2) + var(--crewlet-choice-list-radio-size) + var(--spacing-3));
   border-end-start-radius: var(--radius-sm);
   border-end-end-radius: var(--radius-sm);
-  background: var(--color-brand-accent-soft);
+  background: var(--color-surface-selected);
 }
 
 .crewlet-choice-list__footer {

package/dist/Combobox/index.js

@@ -1,6 +1,7 @@
-export { Combobox } from '../chunk-QS4ZGTEU.js';
+export { Combobox } from '../chunk-PPFX6GRK.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-6QFAK2WV.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/CommandPalette/index.js

@@ -1,7 +1,8 @@
-export { CommandPalette } from '../chunk-ULPL26BU.js';
+export { CommandPalette } from '../chunk-N5SKHIAP.js';
 import '../chunk-XEGZHHRH.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-6QFAK2WV.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/CommentThread/index.js

@@ -1,13 +1,14 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-6JVRY5DQ.js';
-import '../chunk-7DZDSSJS.js';
-import '../chunk-6QFAK2WV.js';
-import '../chunk-SMBKXWML.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-44WJLPQS.js';
+import '../chunk-P6WFZDKS.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-TYKQ33CL.js';
+import '../chunk-RH2NCQBZ.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';

package/dist/Composer/Composer.d.ts

@@ -20,6 +20,10 @@ export interface ComposerProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
  * and a footer strip holding the send shortcut, a counter and the actions, in
  * one box that takes the focus ring as a whole.
  *
+ * THE FOOTER IS DRAWN ONLY WITH SOMETHING IN IT. With no shortcut, counter or
+ * actions there is no strip at all, and one holding only the shortcut's hint
+ * goes on a phone, where the hint is not drawn, rather than stand there empty.
+ *
  * THE COUNTER IS DRAWN ONLY NEAR THE LIMIT, from [COMPOSER_COUNTER_AT] of
  * `maxLength`: a count under every short reply is noise, and a field that
  * stops taking text with no warning reads as a broken keyboard.

package/dist/Composer/index.js

@@ -1,5 +1,6 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-7DZDSSJS.js';
-import '../chunk-6QFAK2WV.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-RH2NCQBZ.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';

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

@@ -1,8 +1,11 @@
 /*
  * A message written in place: the field and its footer strip in one box. The
- * BOX takes the focus ring, an accent border and a 2px soft halo, so the
- * field inside draws no border or outline of its own and the footer reads as
- * part of what is being written.
+ * BOX takes the focus ring every field in the package draws (see Input.css):
+ * an outline over its boundary, 2px for the keyboard and the hairline for a
+ * pointer, so the field inside draws no border or outline of its own and the
+ * footer reads as part of what is being written. It used to recolour the
+ * border to the accent AND lay a 2px soft halo outside it: two highlights for
+ * one state, and the loudest edge on a page whose field was focused on load.
  */
 .crewlet-composer {
   display: grid;
@@ -10,18 +13,23 @@
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   background: var(--color-surface-background);
-  transition:
-    border-color var(--motion-duration-fast) var(--motion-easing-default),
-    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
 .crewlet-composer:hover {
   border-color: var(--color-border-strong-hover);
 }
 
-.crewlet-composer:focus-within {
-  border-color: var(--color-brand-accent);
-  box-shadow: 0 0 0 2px var(--color-brand-accent-soft);
+/* Keyed on the FIELD, not :focus-within: the footer holds the send action,
+   and a reader tabbing onto it is shown that button's ring, not the box's. */
+.crewlet-composer:has(.crewlet-composer__field:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+:root[data-crewlet-focus='pointer'] .crewlet-composer:has(.crewlet-composer__field:focus-visible) {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
 }
 
 .crewlet-composer .crewlet-composer__field {
@@ -34,11 +42,12 @@
   resize: none;
 }
 
-/* The ring is the box's, above. A transparent outline stays, because forced
-   colors drops the box's shadow and paints an outline in its place. */
-.crewlet-composer .crewlet-composer__field:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
+/* The ring is the box's, above, so the field inside never draws one: left to
+   the textarea's own rule it would be a second ring inside the box's, and in
+   forced colours the box's outline is the one the system repaints. Stated on
+   the field at rest, at a weight the textarea's focus rule cannot outrank. */
+.crewlet-composer .crewlet-composer__field.crewlet-textarea {
+  outline: none;
 }
 
 /* Past its cap the field scrolls rather than pushing the page. */
@@ -75,8 +84,10 @@
   flex: 1;
 }
 
+/* On a phone the hint goes, and a footer that held only the hint goes with it. */
 @media (width < 640px) {
-  .crewlet-composer__hint {
+  .crewlet-composer__hint,
+  .crewlet-composer__footer[data-hint-only] {
     display: none;
   }
 }

package/dist/ConfirmField/index.js

@@ -1,6 +1,7 @@
-export { ConfirmField, confirmMatches } from '../chunk-FGYET26P.js';
+export { ConfirmField, confirmMatches } from '../chunk-KJW2AS57.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-6QFAK2WV.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/DataTable/index.js

@@ -1,11 +1,12 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-22CQQDFW.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-JML75PGJ.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-XEGZHHRH.js';
-import '../chunk-CPEPST4S.js';
-import '../chunk-6QFAK2WV.js';
+import '../chunk-PJIPUEJ3.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BUVCV3WI.js';
 import '../chunk-OMV5W53A.js';

package/dist/DataView/index.js

@@ -1,7 +1,7 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-QFNWMWWY.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-GS7ZTHPF.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-22CQQDFW.js';
-import '../chunk-73A7D5CE.js';
+import '../chunk-JML75PGJ.js';
+import '../chunk-L4WZSVMT.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-XEGZHHRH.js';
@@ -9,12 +9,13 @@ import '../chunk-F73MC7EZ.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-PGRPNDWM.js';
 import '../chunk-K3IJQNB7.js';
-import '../chunk-CPEPST4S.js';
-import '../chunk-6QFAK2WV.js';
-import '../chunk-SMBKXWML.js';
+import '../chunk-PJIPUEJ3.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BUVCV3WI.js';

package/dist/DatasetSource/DatasetSource.d.ts

@@ -64,6 +64,10 @@ export interface DatasetSourceProps extends Omit<HTMLAttributes<HTMLDivElement>,
  * it, outside it: a table inside a button is invalid markup and unreachable
  * to a screen reader.
  *
+ * AN OPEN ENTRY IS ONE CARD. Once its preview is drawn, the entry frames the
+ * summary and the preview together, the summary as the card's head, so the
+ * figures read as this source's rather than as the next item of the rail.
+ *
  * A refusal reads as calmly here as on the figure: the reader may not read
  * the data, which is an ordinary state, so it takes the secondary ink and
  * never an error colour.

package/dist/DatasetSource/index.js

@@ -1,4 +1,4 @@
-export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-ZB5O3ELS.js';
+export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-GRYZ5EP3.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';

package/dist/{DatasetSource-XFPZBRXL.css → DatasetSource-SMGX4PS5.css}

@@ -9,6 +9,8 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
+  /* Held transparent at rest so nothing moves when an entry opens. */
+  border: 1px solid transparent;
   border-radius: var(--radius-md);
 }
 
@@ -42,12 +44,23 @@ button.crewlet-dataset-source__summary:focus-visible {
   outline-offset: var(--size-focus-ring-inset-offset);
 }
 
-/* The accent boundary, as a selected card takes it, and the soft accent fill. */
+/*
+ * The selected edge round the WHOLE ENTRY, over the selected fill on its
+ * summary, as every chosen option is drawn: a tint of the accent, never the
+ * full accent the focus ring is drawn in. The edge used to ring the summary
+ * alone, so the settings and figures an open source shows under it hung
+ * below the ring with nothing saying they belonged to it; inside one edge they
+ * read as the entry's own. The rows it opens are what say which entry is open.
+ */
+.crewlet-dataset-source--selected {
+  border-color: var(--color-border-selected);
+}
+
 .crewlet-dataset-source--selected .crewlet-dataset-source__summary {
-  border-color: var(--color-brand-accent);
-  background: var(--color-brand-accent-soft);
+  background: var(--color-surface-selected);
 }
 
+
 .crewlet-dataset-source__head {
   display: flex;
   align-items: center;
@@ -118,9 +131,30 @@ button.crewlet-dataset-source__summary:focus-visible {
   color: var(--color-feedback-warning-ink);
 }
 
+/*
+ * AN OPEN ENTRY IS ONE CARD: the selected edge above frames the summary and
+ * the preview together, the summary its head on the selected fill and the
+ * preview a well under it, inset on the summary's padding, so the figures in
+ * it (cards of their own) stand on a ground that is plainly the source's
+ * rather than the rail's. One line separates head from well, in the same
+ * selected edge, and the head sits INSIDE the frame rather than over it: its
+ * fill laid over the frame's edge would paint that edge out.
+ */
+.crewlet-dataset-source--open {
+  background: var(--color-surface-inset);
+}
+
+.crewlet-dataset-source--open > .crewlet-dataset-source__summary {
+  border-block-end-color: var(--color-border-selected);
+  border-start-start-radius: calc(var(--radius-md) - 1px);
+  border-start-end-radius: calc(var(--radius-md) - 1px);
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
 .crewlet-dataset-source__preview {
   min-width: 0;
-  padding: var(--spacing-2) var(--spacing-3) var(--spacing-3);
+  padding: var(--spacing-3);
 }
 
 .crewlet-dataset-source-list {

package/dist/DateTimePicker/index.js

@@ -1,6 +1,7 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-73A7D5CE.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-L4WZSVMT.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-K3IJQNB7.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/{DateTimePicker-HG2KQXQ6.css → DateTimePicker-2IVTKFV2.css}

@@ -51,10 +51,17 @@
  */
 .crewlet-datetime:focus-visible,
 .crewlet-datetime.is-open {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* 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 {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-datetime.is-disabled,
 .crewlet-datetime:disabled {
   opacity: 0.55;
@@ -177,10 +184,16 @@ svg.crewlet-datetime__chevron {
 
 /* The same one ring the trigger draws, over the box's own boundary. */
 .crewlet-datetime__time-input:focus-visible {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* 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 {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-datetime__footer {
   display: flex;
   align-items: center;

package/dist/DocTabsEditor/index.js

@@ -1,6 +1,7 @@
-export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-QEFHYUCY.js';
+export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-UWGUKMBK.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-6QFAK2WV.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BUVCV3WI.js';
 import '../chunk-OMV5W53A.js';