@crewlethq/ui 0.35.0 → 0.36.0

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,8 +1,9 @@
-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-SMBKXWML.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.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-WNAYQQ6Y.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-P6WFZDKS.js';
+import '../chunk-RH2NCQBZ.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-YSGLEHND.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,6 +1,7 @@
-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-SMBKXWML.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.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-XMRTFPWX.js';
+import '../chunk-XEGZHHRH.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,20 +1,21 @@
-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-ES4RKQ7B.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-22CQQDFW.js';
-import '../chunk-73A7D5CE.js';
-import '../chunk-STJ7QBC3.js';
-import '../chunk-DTIW4CHZ.js';
+import '../chunk-XMRTFPWX.js';
+import '../chunk-L4WZSVMT.js';
 import '../chunk-XEGZHHRH.js';
 import '../chunk-F73MC7EZ.js';
+import '../chunk-STJ7QBC3.js';
+import '../chunk-DTIW4CHZ.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-SMBKXWML.js';
+import '../chunk-YSGLEHND.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,12 +1,13 @@
-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-RSAQOKH3.js';
 import '../chunk-BUVCV3WI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Document/Document.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, InputHTMLAttributes } from 'react';
+import { type HTMLAttributes, type TextareaHTMLAttributes } from 'react';
 export type DocumentSize = 
 /**
  * A page read on its own: the small step at the relaxed leading, sections at
@@ -61,7 +61,7 @@ export interface DocumentTitleProps extends HTMLAttributes<HTMLHeadingElement> {
  * a size of its own beside the body it heads.
  */
 export declare function DocumentTitle({ as: Tag, className, children, ...rest }: DocumentTitleProps): import("react").JSX.Element;
-export interface DocumentTitleFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+export interface DocumentTitleFieldProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'rows' | 'cols' | 'wrap'> {
     /** Marks the title as refused. Sets `aria-invalid`, which is what a screen reader reads. */
     error?: boolean | undefined;
 }
@@ -76,5 +76,17 @@ export interface DocumentTitleFieldProps extends Omit<InputHTMLAttributes<HTMLIn
  * danger ink when the title is refused. The name is the caller's
  * (`aria-label`, or a label it points at), because a title field's visible
  * cue is its placeholder, and a placeholder is not a name.
+ *
+ * IT WRAPS, AND IT IS STILL ONE LINE OF TEXT. A title is set in the page's
+ * largest type, and an `<input>` cuts what does not fit: on a phone a long
+ * title, or the example in its placeholder, was clipped mid-word ("Weekly
+ * planning, Octobe"). So it is a textarea of one row that grows with what it
+ * holds, as the title it becomes wraps, and every way it could take a second
+ * line is closed: Enter inserts nothing (its `keydown` reaches the caller and
+ * the page exactly as an input's does, and in a form with a submit button it
+ * submits, as an input's Enter does), and a pasted, dropped or autofilled line
+ * break becomes a space before the caller's `onChange` reads the value. It is
+ * named to assistive technology as a single-line text field
+ * (`aria-multiline="false"`).
  */
-export declare function DocumentTitleField({ error, className, ...rest }: DocumentTitleFieldProps): import("react").JSX.Element;
+export declare const DocumentTitleField: import("react").ForwardRefExoticComponent<DocumentTitleFieldProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Document/index.js

@@ -1,2 +1,3 @@
-export { Document, DocumentTitle, DocumentTitleField } from '../chunk-TYKQ33CL.js';
+export { Document, DocumentTitle, DocumentTitleField } from '../chunk-P6WFZDKS.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Document-JUGCSQ4L.css → Document-YFWTWXJP.css}

@@ -327,17 +327,34 @@
  * on no surface of its own, with a line along its foot that answers the
  * pointer, the focus and a refusal. The line is a border rather than a
  * shadow, because forced colours keep a border and drop a shadow.
+ *
+ * ONE PIXEL, AND A TINT, WHERE A POINTER PUT THE CARET. The line is the
+ * hairline under the pointer and the selected edge (the accent mixed toward
+ * the page) once a click has put the caret in it: the reader is already
+ * looking at the title, and a page that focuses its title on load drew a 2px
+ * accent bar under it before anybody had touched anything.
+ *
+ * TWO PIXELS IN THE FOCUS COLOUR FOR THE KEYBOARD, the area WCAG 2.2's focus
+ * appearance asks of an indicator: the border takes the focus colour and a
+ * shadow lays the second pixel under it, with a transparent outline that
+ * forced colours paints in its place. The padding takes the pixel the border
+ * no longer reserves, so the title sits where it always did.
  */
 .crewlet-document-title-field {
   display: block;
   width: 100%;
   min-width: 0;
-  padding: 0 0 var(--spacing-1);
+  padding: 0 0 calc(var(--spacing-1) + 1px);
   border: 0;
-  border-block-end: 2px solid transparent;
+  border-block-end: 1px solid transparent;
   border-radius: 0;
   background: none;
   outline: none;
+  /* A textarea of one row that grows with the title (DocumentTitleField sets
+     its height): no handle, no scrollbar, and the title's own wrapping. */
+  resize: none;
+  overflow: hidden;
+  white-space: pre-wrap;
   transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
@@ -352,12 +369,27 @@
 
 .crewlet-document-title-field:focus-visible {
   border-block-end-color: var(--color-focus);
+  box-shadow: 0 1px 0 var(--color-focus);
+  outline: 2px solid transparent;
+}
+
+:root[data-crewlet-focus='pointer'] .crewlet-document-title-field:focus-visible {
+  border-block-end-color: var(--color-border-selected);
+  box-shadow: none;
 }
 
 .crewlet-document-title-field[aria-invalid='true'] {
   border-block-end-color: var(--color-feedback-danger);
 }
 
+.crewlet-document-title-field[aria-invalid='true']:focus-visible {
+  box-shadow: 0 1px 0 var(--color-feedback-danger);
+}
+
+:root[data-crewlet-focus='pointer'] .crewlet-document-title-field[aria-invalid='true']:focus-visible {
+  border-block-end-color: var(--color-feedback-danger);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-document-title-field {
     transition: none;

package/dist/{Editor-BVQHBF7L.js → Editor-HORWMUM3.js}

@@ -2,7 +2,8 @@ import { richEditorLabels } from './chunk-CSQTDGTS.js';
 import { schema, readMarkdown, writeMarkdown } from './chunk-QH6VYJ3X.js';
 import { safeHref, MARKDOWN_CALLOUT_TONES } from './chunk-BAKPMH3S.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { FormField, Input } from './chunk-6QFAK2WV.js';
+import { FormField, Input } from './chunk-IUYUS2SO.js';
+import './chunk-YSGLEHND.js';
 import './chunk-PQADV6P6.js';
 import { Menu } from './chunk-BUVCV3WI.js';
 import { placePopup, viewportBounds } from './chunk-OMV5W53A.js';

package/dist/FilterChip/index.js

@@ -1,3 +1,3 @@
-export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-5YLON2PW.js';
+export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-UYZZV4DZ.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{FilterChip-EZ4QMW4E.css → FilterChip-VL33P3JL.css}

@@ -81,9 +81,13 @@
   cursor: not-allowed;
 }
 
+/* The selected fill, and the accent's lighter line rather than the selected
+   edge: on a pill this small the 0.6 edge, the fill and the accent ink were
+   three accent marks on one word. The ink is the mark that clears 4.5:1, and
+   the keyboard's 2px focus ring stays the only full-weight line. */
 .crewlet-filter-chip[aria-pressed='true'],
 .crewlet-filter-chip[aria-checked='true'] {
-  background: var(--color-brand-accent-soft);
+  background: var(--color-surface-selected);
   border-color: var(--color-brand-accent-soft-strong);
   color: var(--color-brand-accent-ink);
 }

package/dist/Input/index.js

@@ -1,4 +1,5 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-6QFAK2WV.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{Input-GBZSFXLU.css → Input-ABGOFENS.css}

@@ -81,14 +81,18 @@
  * forced-colors mode drops every box-shadow and keeps outlines: a ring drawn
  * as a shadow disappears for exactly the readers who most need one.
  *
- * It is ONE PIXEL, LAID EXACTLY ON THE BOUNDARY: the field's own hairline,
- * drawn in the focus colour, which is how the console's fields say focus. At
- * two pixels it was a heavy band round every box a caret landed in, and on a
- * form of them the field being typed in read as the loudest thing on the page.
- * Drawn on the boundary rather than outside it, a scroller cannot clip it and
- * the field does not grow a halo the moment a caret lands in it, which is what
- * a filter box in a toolbar of them did to the row it sits in. Every boxed
- * field in the package rings this way (`Input.test.tsx` holds them to it).
+ * It is TWO PIXELS FOR THE KEYBOARD AND ONE FOR A POINTER, laid over the
+ * boundary. Two pixels is the area WCAG 2.2's focus appearance asks of an
+ * indicator, and one pixel (the field's own hairline in the focus colour) was
+ * half of it for every reader tabbing through a form. But at two pixels round
+ * every box a caret landed in, a click into a title or a filter box drew a
+ * heavy band round the one thing the reader was already looking at, so the
+ * rule after this one narrows the ring where the document says the last move
+ * was a pointer. Drawn over the boundary rather than outside it, a scroller
+ * cannot clip it and the field does not grow a halo the moment a caret lands
+ * in it, which is what a filter box in a toolbar of them did to the row it
+ * sits in. Every boxed field in the package rings this way (`Input.test.tsx`
+ * holds them to it).
  *
  * THE BORDER IS LEFT ALONE. Recolouring it under the ring says nothing the
  * ring has not already said, and it is what cost the error state its own
@@ -104,10 +108,28 @@
  * on a pointer press as well as on a tab.
  */
 .crewlet-input:has(.crewlet-input__control:focus-visible) {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/*
+ * NARROWED FOR A POINTER. The ring above is the keyboard's: 2px, the area
+ * WCAG 2.2's focus appearance asks of an indicator, drawn over the boundary
+ * and one pixel into the box. A field matches :focus-visible on a click as
+ * well, and a reader who put the caret there with a pointer is already looking
+ * at it, so where the document says the last move was a pointer
+ * (`data-crewlet-focus`, kept by `trackFocusModality`, which every field
+ * starts) the ring is one pixel in the selected edge, the accent mixed toward
+ * the page: a page that focuses its first field on load drew the focus colour
+ * 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.
+ */
+:root[data-crewlet-focus='pointer'] .crewlet-input:has(.crewlet-input__control:focus-visible) {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-input.is-error {
   border-color: var(--color-feedback-danger);
 }
@@ -128,6 +150,10 @@
   outline-color: var(--color-feedback-danger);
 }
 
+:root[data-crewlet-focus='pointer'] .crewlet-input.is-error:has(.crewlet-input__control:focus-visible) {
+  outline-color: var(--color-feedback-danger);
+}
+
 .crewlet-input.is-disabled {
   opacity: 0.6;
   cursor: not-allowed;
@@ -364,10 +390,16 @@
    on the control itself: a textarea is the field, with nothing wrapped round
    it and nothing focusable inside it. */
 .crewlet-textarea: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-textarea:focus-visible {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-textarea.is-error {
   border-color: var(--color-feedback-danger);
 }
@@ -376,6 +408,10 @@
   outline-color: var(--color-feedback-danger);
 }
 
+:root[data-crewlet-focus='pointer'] .crewlet-textarea.is-error:focus-visible {
+  outline-color: var(--color-feedback-danger);
+}
+
 .crewlet-textarea.is-disabled {
   opacity: 0.6;
   cursor: not-allowed;

package/dist/LayersList/index.js

@@ -1,3 +1,3 @@
-export { LAYERS_LIST_LABELS, LayersList } from '../chunk-ONL54WMH.js';
+export { LAYERS_LIST_LABELS, LayersList } from '../chunk-46RL3E54.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{LayersList-NQZEIPZB.css → LayersList-TBNF4XGL.css}

@@ -68,13 +68,26 @@
   color: var(--color-text-primary);
 }
 
-/* The accent edge every current row in the system takes, in the primary ink.
-   A border, so forced colours keep it. */
+/*
+ * THE PICKED ENTRY IS A SELECTION, drawn as the package draws a chosen
+ * option: the selected fill under the primary ink, as a canvas's layers panel
+ * marks the board picked on it. It used to take the accent rail a CURRENT row
+ * takes (the outline's heading, the page in the rail), which says "you are
+ * here" and beside a canvas read as a second selection ring. The rail's room
+ * is still held, so nothing moves, and forced colours draw it in the system's
+ * own selected colour, since they drop the fill.
+ */
 .crewlet-layers-list__item[aria-current='true'] {
-  border-inline-start-color: var(--color-brand-accent);
+  background: var(--color-surface-selected);
   color: var(--color-text-primary);
 }
 
+@media (forced-colors: active) {
+  .crewlet-layers-list__item[aria-current='true'] {
+    border-inline-start-color: Highlight;
+  }
+}
+
 /* The ring lies inside the entry, where the scroller beside it cannot cut it. */
 .crewlet-layers-list__item:focus-visible {
   outline: 2px solid var(--color-focus);