@crewlethq/ui 0.4.4 → 0.5.0

package/dist/{DataView-256YF32J.css → DataView-N6JX464S.css}

@@ -182,10 +182,11 @@
  * and without the boundary a reader reads them as a row of the table's own.
  *
  * A SOLID HAIRLINE. The fence was dashed, and a dashed edge MEANS SOMETHING
- * ELSE here: it is the mark a card or a node wears when it stands for somebody
- * outside the system, on the canvas and in every chart. Two meanings for one
- * stroke is how a reader learns neither. Every boundary in this system is the
- * same hairline; what differs is where it is drawn.
+ * ELSE here: it marks a place nothing fills yet, an empty card slot, a unit
+ * with no lead, the ghost of a node being added. A fence round chips that are
+ * there is not one of those, and two meanings for one stroke is how a reader
+ * learns neither. Every boundary in this system is the same hairline; what
+ * differs is where it is drawn.
  */
 .crewlet-filter-axis-bar {
   display: flex;

package/dist/DateTimePicker/index.js

@@ -1,9 +1,9 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-DB2VDLVR.js';
-import '../chunk-EFSG7HNU.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-YIMOT5OO.js';
+import '../chunk-AUS5FNQE.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
-import '../chunk-BZYDZBAN.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
+import '../chunk-ETYEBKR4.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DiffList/index.js

@@ -1,3 +1,3 @@
-export { DIFF_LIST_LABELS, DiffList } from '../chunk-AQTBF4EB.js';
+export { DIFF_LIST_LABELS, DiffList } from '../chunk-LFHCXZO5.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Disclosure/index.js

@@ -1,5 +1,5 @@
-export { Disclosure } from '../chunk-LWKJQTOM.js';
-export { DisclosureAnatomy } from '../chunk-5KPQ6D7N.js';
+export { Disclosure } from '../chunk-MICH6QSJ.js';
+export { DisclosureAnatomy } from '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';

package/dist/EntityChip/EntityChip.d.ts

@@ -1,14 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type AvatarSizeStep } from '../Avatar/index.js';
-/**
- * Whether the engine runs this one.
- *
- * `human` draws the badge with a dashed edge, which is structure and not
- * status: a human seat is a real seat that no agent occupies. It is carried by
- * the edge rather than by a hue, so the status hues keep meaning only what
- * they mean.
- */
-export type EntityChipVariant = 'agent' | 'human';
+import { type AvatarKind, type AvatarSizeStep } from '../Avatar/index.js';
 export interface EntityChipProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     /** Who or what this is. Drawn as initials and read as the chip's own text. */
     name: string;
@@ -19,7 +10,13 @@ export interface EntityChipProps extends Omit<HTMLAttributes<HTMLElement>, 'chil
      * this look on a router's own Link while keeping its navigation.
      */
     asChild?: boolean | undefined;
-    variant?: EntityChipVariant | undefined;
+    /**
+     * Whether the engine runs this one: an `agent` (the default) is drawn as a
+     * squircle, a `human` seat as a circle, which is `Avatar`'s own kind. That is
+     * structure rather than status, so it is carried by the outline rather than
+     * by a hue and the state hues keep meaning only what they mean.
+     */
+    kind?: AvatarKind | undefined;
     /** The badge's step. The name takes the surrounding text size either way. */
     size?: AvatarSizeStep | undefined;
     children?: ReactNode;
@@ -37,4 +34,4 @@ export interface EntityChipProps extends Omit<HTMLAttributes<HTMLElement>, 'chil
  * The badge is DECORATIVE here: the name is printed right beside it, and a
  * badge that was also read would make every row say the name twice.
  */
-export declare function EntityChip({ name, href, asChild, variant, size, className, children, ...rest }: EntityChipProps): import("react").JSX.Element;
+export declare function EntityChip({ name, href, asChild, kind, size, className, children, ...rest }: EntityChipProps): import("react").JSX.Element;

package/dist/EntityChip/index.d.ts

@@ -1,3 +1,3 @@
 import './EntityChip.css';
 export { EntityChip } from './EntityChip.js';
-export type { EntityChipProps, EntityChipVariant } from './EntityChip.js';
+export type { EntityChipProps } from './EntityChip.js';

package/dist/EntityChip/index.js

@@ -1,3 +1,3 @@
-export { EntityChip } from '../chunk-QYOFACSP.js';
-import '../chunk-PNFASD6F.js';
+export { EntityChip } from '../chunk-WSOFKOLP.js';
+import '../chunk-IA232OTU.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ErrorBoundary/index.js

@@ -1,4 +1,4 @@
-export { ErrorBoundary } from '../chunk-7EM5T4ME.js';
-import '../chunk-BZYDZBAN.js';
+export { ErrorBoundary } from '../chunk-4IQD3HUQ.js';
+import '../chunk-ETYEBKR4.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ErrorBoundary-ME36CQTA.css → ErrorBoundary-U2PA3LY2.css}

@@ -10,14 +10,14 @@
   flex-direction: column;
   align-items: flex-start;
   gap: var(--spacing-3);
-  /* The panel's own body inset and its lift: a fallback is still a panel of
-     the product, and one drawn without the rim read as a block of unstyled
-     text where the screen should have been. */
+  /* The card's own recipe and its body inset: a fallback is still a panel of
+     the product, and one drawn without the card's ground and hairline read as
+     a block of unstyled text where the screen should have been. Flat, as
+     every card is. */
   padding: var(--spacing-4);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
   background: var(--color-surface-subtle);
-  box-shadow: var(--shadow-xs), var(--shadow-hairline);
   max-width: var(--size-measure);
 }
 

package/dist/IconButton/index.js

@@ -1,3 +1,3 @@
-export { IconButton } from '../chunk-F27EPQ7D.js';
+export { IconButton } from '../chunk-4UQ7SMPK.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{IconButton-VQGNMJDI.css → IconButton-TVEUWK6L.css}

@@ -88,13 +88,13 @@
  */
 .crewlet-icon-btn--secondary {
   background: var(--color-surface-subtle);
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-strong);
   color: var(--color-text-primary);
 }
 
 .crewlet-icon-btn--secondary:hover:not(:disabled):not([aria-disabled='true']) {
   background: var(--color-surface-elevated);
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 .crewlet-icon-btn--secondary:active:not(:disabled):not([aria-disabled='true']) {

package/dist/ImageUpload/ImageUpload.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import { type AvatarShape } from '../Avatar/index.js';
+import { type AvatarKind } from '../Avatar/index.js';
 export interface ImageUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
     /** Current image source. When set, the control shows the image and the overlay label reads "Change". */
     src?: string | undefined;
@@ -8,11 +8,14 @@ export interface ImageUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, '
     /** Rendered width and height in pixels. */
     size?: number | undefined;
     /**
-     * Outline shape passed through to the preview and fallback. Defaults to
-     * "square", as Avatar does: what this control takes is normally a company
-     * logo, and a wide mark cropped into a circle loses its ends.
+     * The picture is an Avatar, so it takes the Avatar's kind, and with it the
+     * outline the preview, the fallback, the trigger and the overlay are all
+     * drawn in. `agent`, the default as it is Avatar's, is the squircle, which
+     * is also the outline for a mark that is not a person, a company's logo
+     * among them: a wide mark cropped into a circle loses its ends. `human` is
+     * a person's round picture.
      */
-    shape?: AvatarShape | undefined;
+    kind?: AvatarKind | undefined;
     /** When true, the control is display only: no overlay, no remove button, no file picker. */
     readOnly?: boolean | undefined;
     /** When true, the control shows a spinner and ignores interaction while an upload is in flight. */
@@ -29,9 +32,9 @@ export interface ImageUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, '
  * current image (or an initials fallback), an overlay with a camera icon and
  * an "Upload" or "Change" label (shown on hover, or always while no image is
  * set), a hidden file input, a remove button, and an uploading state. One
- * primitive covers both square logos and round profile pictures.
+ * primitive covers both a logo in the squircle and a person's round picture.
  *
  * The selection callback hands back the raw File rather than a data URL because
  * the upload now happens over the network.
  */
-export declare const ImageUpload: ({ src, name, size, shape, readOnly, uploading, accept, onSelect, onRemove, className, style, ...rest }: ImageUploadProps) => import("react").JSX.Element;
+export declare const ImageUpload: ({ src, name, size, kind, readOnly, uploading, accept, onSelect, onRemove, className, style, ...rest }: ImageUploadProps) => import("react").JSX.Element;

package/dist/ImageUpload/index.js

@@ -1,3 +1,3 @@
-export { ImageUpload } from '../chunk-5WS6L6FA.js';
-import '../chunk-PNFASD6F.js';
+export { ImageUpload } from '../chunk-CAIHUYXV.js';
+import '../chunk-IA232OTU.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ImageUpload-HKFIZR6D.css → ImageUpload-YCHJMUGX.css}

@@ -17,10 +17,11 @@
      of the six places that read it: a fallback repeated six times is six
      places for the default to drift apart. */
   --crewlet-image-upload-size: 64px;
-  /* The corner that box takes, set per instance beside the size. Declared here
-     for the same reason the size is: a default repeated as a var() fallback at
-     each place that reads it is several places for one default to drift. */
-  --crewlet-image-upload-corner: var(--radius-lg);
+  /* The corner that box takes, set per instance beside the size from Avatar's
+     own `avatarCorner`, which is the one statement of the ladder a script can
+     read. There is deliberately NO default here: the only right value is a
+     proportion of the size, and a stylesheet can only restate that proportion,
+     which is how the trigger and the picture under it came apart before. */
   position: relative;
   display: inline-flex;
   flex-shrink: 0;
@@ -40,21 +41,34 @@
   cursor: pointer;
 }
 
-/* Shape modifiers keep the trigger, the overlay and the Avatar corners in step. */
-.crewlet-image-upload--circle .crewlet-image-upload__trigger,
-.crewlet-image-upload--circle .crewlet-image-upload__overlay {
+/* The kind modifiers keep the trigger, the overlay and the Avatar outlines in
+   step. A person's picture is a circle. */
+.crewlet-image-upload--human .crewlet-image-upload__trigger,
+.crewlet-image-upload--human .crewlet-image-upload__overlay {
   border-radius: var(--radius-circle);
 }
 
 /* THE SAME CORNER THE PICTURE INSIDE TAKES, which is why it is a variable
-   rather than a step: Avatar moves a square badge's radius with its box, so a
+   rather than a step: Avatar moves an agent badge's corner with its box, so a
    trigger pinned to one step is rounder or squarer than the badge under it at
    every size but one, and the badge's corners show through the overlay. */
-.crewlet-image-upload--square .crewlet-image-upload__trigger,
-.crewlet-image-upload--square .crewlet-image-upload__overlay {
+.crewlet-image-upload--agent .crewlet-image-upload__trigger,
+.crewlet-image-upload--agent .crewlet-image-upload__overlay {
   border-radius: var(--crewlet-image-upload-corner);
 }
 
+/* AND THE SAME SQUIRCLE, where the browser draws one, for the same reason:
+   Avatar.css states why its squircle is a whole one at the circle token, and
+   this is that rule for the two frames over the picture. The suite holds the
+   two blocks to one declaration list. */
+@supports (corner-shape: squircle) {
+  .crewlet-image-upload--agent .crewlet-image-upload__trigger,
+  .crewlet-image-upload--agent .crewlet-image-upload__overlay {
+    corner-shape: squircle;
+    border-radius: var(--radius-circle);
+  }
+}
+
 .crewlet-image-upload__trigger:disabled {
   cursor: default;
 }

package/dist/Input/index.js

@@ -1,5 +1,5 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-GKHAKGOF.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-DSUY5F4E.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-F27EPQ7D.js';
+import '../chunk-4UQ7SMPK.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Kbd/Kbd.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 /**
  * Whether the reader is on an Apple platform, where Command is the command key.
  *
@@ -19,9 +19,12 @@ export interface KbdProps extends HTMLAttributes<HTMLElement> {
      * A shortcut as the keys it is pressed with, in order: `['Mod', 'Shift',
      * 'z']`. `Mod` is the platform's command key, so one hint is right on both.
      *
-     * With `keys`, the caps are drawn hidden and ONE SENTENCE is read instead:
-     * "Command plus Shift plus Z". A screen reader given the glyphs reads
-     * "place of interest sign Z", which names nothing anybody presses.
+     * The chord is drawn as ONE cap, in the platform's own notation: `⌘⇧Z` on
+     * an Apple platform, where the menus print a chord's symbols run together,
+     * and `Ctrl+Shift+Z` everywhere else, where they print them joined by a
+     * plus. The cap is drawn hidden and ONE SENTENCE is read instead: "Command
+     * plus Shift plus Z". A screen reader given the glyphs reads "place of
+     * interest sign Z", which names nothing anybody presses.
      */
     keys?: readonly string[] | undefined;
     /** Overrides platform detection, for a suite or a screenshot. */
@@ -36,5 +39,12 @@ export interface KbdProps extends HTMLAttributes<HTMLElement> {
  * `keys` is a whole shortcut, which needs the platform mapping and the spoken
  * sentence. A hint that says Ctrl+Z to somebody on a Mac names a key they do
  * not press.
+ *
+ * A CHORD IS ONE CAP. The keys of a shortcut are pressed together, so they
+ * are printed together, `⌘K` as the approved design draws every shortcut it
+ * shows; a cap per key read as a sequence to press one after another. Each
+ * key is still its own `kbd` inside the cap, which is how a key combination
+ * is marked up. Two shortcuts are two `Kbd`s: `↑` and `↓` beside "to move" are
+ * two keys that each do it, not a chord.
  */
 export declare const Kbd: ({ subtle, keys, apple, className, children, ...rest }: KbdProps) => import("react").JSX.Element;

package/dist/Kbd/index.js

@@ -1,3 +1,3 @@
-export { Kbd, isApplePlatform, keyGlyph } from '../chunk-SFZOKW2G.js';
+export { Kbd, isApplePlatform, keyGlyph } from '../chunk-KJ34ZBBI.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Kbd-JPLDVJIP.css

@@ -0,0 +1,71 @@
+/*
+ * A keycap: the key's name on a small raised tile.
+ *
+ * THE APPROVED DESIGN'S CAP: the raised rung inside the strong hairline, at
+ * the smallest radius, in the mono face at the micro step and the tertiary
+ * ink. The raised fill is what makes it a KEY rather than a word in a box, so
+ * the cap is flat on every side: the heavier bottom edge it used to carry was
+ * a second way of saying "raised" that the fill now says, and it stood the
+ * cap a pixel taller than the line it sits in.
+ */
+.crewlet-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--color-border-strong);
+  background: var(--color-surface-elevated);
+  /*
+   * The MONO face, not the surrounding one. A keycap is a literal: the reader
+   * is being told which character is printed on a key, and a proportional face
+   * draws `l`, `I` and `1` as three widths of the same mark.
+   */
+  font-family: var(--font-family-mono);
+  font-variant-ligatures: none;
+  font-size: var(--font-size-2xs);
+  /* THE DOCUMENT'S OWN LEADING, because a cap is drawn INSIDE a line of text
+     and not beside it: a hint at the end of a search field, a key named in a
+     sentence, a shortcut in a menu row. Tightened it stood a pixel under the
+     line it sits in and the row it was in wobbled by that pixel wherever a
+     cap appeared and wherever one did not. */
+  line-height: var(--font-line-height-body);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+/*
+ * A key inside a CHORD's cap. The whole chord is one cap, so each key in it
+ * is text on that cap and nothing more, run together with the next as the
+ * platform prints a chord. It is a `kbd` of its own because that is what a key
+ * inside a key combination is, and a user agent's `kbd` rule would otherwise
+ * set its own face and size on it.
+ */
+.crewlet-kbd__key {
+  font: inherit;
+}
+
+/*
+ * A quieter cap: FLATTER, not fainter. The opacity this replaces multiplied
+ * the ink as well as the frame, and 0.7 of a text step measures 3.43:1 on the
+ * panel, so a hint printing the key a reader is told to press was the one
+ * thing on the row they could not read. The cap gives up its raised fill and
+ * takes the plain hairline instead, and keeps the tertiary ink, which is
+ * measured at 4.5:1 on every surface the package paints on.
+ */
+.crewlet-kbd--subtle {
+  border-color: var(--color-border-default);
+  background: none;
+}
+
+/*
+ * A whole shortcut: the cap drawn, and one sentence read instead of it. The
+ * cap is hidden from assistive technology by the component; this only lays
+ * it out.
+ */
+.crewlet-kbd-combo {
+  display: inline-flex;
+  align-items: center;
+}

package/dist/Layer/index.js

@@ -1,3 +1,3 @@
 export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from '../chunk-7RPGY3JE.js';
-export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from '../chunk-ITHXJHBB.js';
+export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Link/index.js

@@ -1,3 +1,3 @@
-export { Link } from '../chunk-2ZQMA2WB.js';
+export { Link } from '../chunk-ZPSOF6VL.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/List/index.js

@@ -1,3 +1,3 @@
-export { List, ListItem } from '../chunk-HZ5XZNPS.js';
+export { List, ListItem } from '../chunk-DS2C73RJ.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{List-XTHESXLR.css → List-MYJIV6MP.css}

@@ -144,14 +144,24 @@
  * A row that failed. The rail is the scannable half and the glyph beside it is
  * the honest one: a reader who cannot tell the rail's hue from the row above
  * still meets a mark and a word.
+ *
+ * Both take the danger INK step, not the fill, because both are drawn on the
+ * row, and the row is sometimes the accent tint: a failed row can also be the
+ * one the reader is on. The fill is measured to 3:1 on the opaque surfaces and
+ * no further, so a fill rail on a selected or hovered row clears it only by
+ * the luck of the current palette (the red this list drew measured 3.00:1 on
+ * a hovered row inside a raised surface in dark); the ink clears 4.5:1 on
+ * every row ground, the accent tint included, which is where the palette
+ * suite holds a row's state rail (DATA_MARKS) and where the DataTable suite's
+ * sheet scan now holds this one.
  */
 .crewlet-list__item--danger > .crewlet-list__row {
-  box-shadow: inset 2px 0 0 var(--color-feedback-danger);
+  box-shadow: inset 2px 0 0 var(--color-feedback-danger-ink);
 }
 
 .crewlet-list__danger-mark {
   flex: none;
-  color: var(--color-feedback-danger);
+  color: var(--color-feedback-danger-ink);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/ListInput/index.js

@@ -1,10 +1,10 @@
-export { ListInput } from '../chunk-FSOW3ARP.js';
-import '../chunk-SFZOKW2G.js';
-import '../chunk-GKHAKGOF.js';
+export { ListInput } from '../chunk-PQNILU27.js';
+import '../chunk-KJ34ZBBI.js';
+import '../chunk-DSUY5F4E.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Listbox/index.js

@@ -1,2 +1,2 @@
-export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from '../chunk-KIC7BZYJ.js';
-import '../chunk-ITHXJHBB.js';
+export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from '../chunk-6MU7HNB4.js';
+import '../chunk-R25RGPUB.js';

package/dist/Listbox/useListbox.d.ts

@@ -17,6 +17,8 @@
  *   so the highlight stays on a row that exists instead of jumping to the top.
  * - ENTER TAKES THE HIGHLIGHTED OPTION and is prevented, because the field is
  *   usually inside a form that submits on Enter, and choosing is not saving.
+ *   Enter held with Command, Control or Option is not Enter: it is left to
+ *   whatever owns that chord.
  *   Tab takes it too where the list is a completion (`tabCommits`); a
  *   multi-select leaves Tab to move focus, as every form control does.
  * - ESCAPE CLOSES THE LIST AND NOTHING ELSE. It stops there, so the dialog or

package/dist/{Listbox-ZXYYNN6U.css → Listbox-6WJNJQVQ.css}

@@ -62,8 +62,8 @@
    * The SECONDARY step, not the primary one. A list of candidates is read by
    * running the eye down it for the one that matches, and rows drawn at full
    * strength all shout at once; the row the reader is actually on is the one
-   * that takes the accent and its ink. The step is held at 4.5:1 on every
-   * ground a row can sit on, so quieter is not fainter.
+   * that lifts to the primary ink. The step is held at 4.5:1 on every ground a
+   * row can sit on, so quieter is not fainter.
    */
   color: var(--color-text-secondary);
   font-size: var(--font-size-compact);
@@ -75,14 +75,39 @@
 }
 
 /*
- * The active row, whether the arrows put it there or a hover did. The accent
- * is what means "here", and it is a tint plus its ink step rather than a fill
- * with a label on it.
+ * The active row, whether the arrows put it there or a hover did: the RAISED
+ * rung with the label lifted to the primary ink, as the approved palette draws
+ * it. Every list here opens on a card (a popover, a dialog), and raised is held
+ * dE 3 off the card by @crewlethq/tokens because a chip or a well has no border
+ * of its own, which is what this row is; every text step clears 4.5:1 on it.
+ *
+ * It used to be the accent's soft tint with the accent ink. The accent is the
+ * primary action's fill and the focus ring, so a violet row under the arrows
+ * read as a second primary on every surface that offers a list, the same
+ * reason the rail's current row stopped wearing it. What the accent still
+ * marks in a list is a CHOICE made (a multi-select's tick), not where the
+ * arrows are.
  */
 .crewlet-listbox__option[aria-selected='true'],
 .crewlet-listbox__option:hover {
-  background: var(--color-brand-accent-soft);
-  color: var(--color-brand-accent-ink);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+}
+
+/*
+ * FORCED COLORS repaints every author background to Canvas, which took the
+ * highlight with it: the arrows moved through a list in which no row looked
+ * any different, in every Select, Combobox and command palette. An outline is
+ * the one mark the mode keeps, drawn inside the row so the list's own clip
+ * does not cut it, in the system's colour for exactly this.
+ */
+@media (forced-colors: active) {
+  .crewlet-listbox__option[aria-selected='true'] {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-color: Highlight;
+    outline-offset: -2px;
+  }
 }
 
 .crewlet-listbox__option[aria-disabled='true'] {

package/dist/Menu/index.js

@@ -1,7 +1,7 @@
-export { Menu } from '../chunk-T43A26SD.js';
+export { Menu } from '../chunk-IPVQKAHO.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
-import '../chunk-BZYDZBAN.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
+import '../chunk-ETYEBKR4.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';