@crewlethq/ui 0.21.0 → 0.23.0

package/README.md

@@ -203,6 +203,28 @@ 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.23.0
+
+**A text field's edge is quieter.** `Input`, the textarea, `TagsInput`, `MarkdownEditor` and the typed boxes inside `DateTimePicker` and `TimeWindowPicker` draw `--color-border-field` (new in `@crewlethq/tokens` 0.23.0): the secondary button's edge lifted only as far as 3:1 on the surfaces a field stands on, rather than the control boundary that was the brightest edge on the page. Under the pointer the edge steps up to `--color-border-control`; it used to step down to the hover hairline and fade. Checkboxes, switches and editors inside a row keep `--color-border-control`.
+
+**A chosen chip draws the accent's soft pair.** The chip that is on in a `Tabs` chip row, and the current row of a `Switcher`, take `--color-brand-accent-soft` with a `--color-brand-accent-soft-strong` hairline, as a chosen `FilterChip` does, instead of a full-strength accent ring. A switcher row the arrows or the pointer are on keeps the listbox's own fill.
+
+**Inside a flush card the `TreeGrid` draws no frame of its own.** The card is the frame, so the grid's border, corner and ground step aside and its rows run to the card's edges, its footer included.
+
+What to change: nothing.
+
+## Changes in 0.22.0
+
+**`Menu` takes `width`** (`'content'`, the default, or `'trigger'`). `'trigger'` keeps the panel no narrower than its trigger, so a trigger that spans a column opens a menu that covers it edge to edge, and still lets it grow past the trigger when a row needs the room.
+
+**`Menu` takes `trailingIcon`**, a glyph after a text trigger's words, such as a picker's chevron. It is drawn as the button's trailing icon, a gap away from the words, where a glyph written into `trigger` sat flush against them.
+
+**`Menu` reads more easily.** A header's name and value share one line (`Access … Admin`), and a row's description is one type step under its label rather than two.
+
+**`AppShell.AccountRow`'s menu covers the row.** Pressing who you are opens a menu at least as wide as the row itself.
+
+What to change: nothing.
+
 ## Changes in 0.21.0
 
 **`AppShell.AccountRow` takes `menu`** (`AccountRowMenu`: `label`, `header`, `items`): pressing who you are opens the reader's own menu instead of linking anywhere, which is where a reader looks for their account and for signing out. The row becomes the menu button, ending in the up-and-down chevron a menu's trigger draws, keeps the account page's current-row lift (`data-current`), and the menu's header holds the facts the row does not already say, such as the reader's access. Given, `menu` takes the place of `href`.
@@ -345,7 +367,7 @@ What to change: a screen that leaned on `max` to clear old failures now keeps th
 
 **Toasts are the first release's strip again**: a dark strip on `--color-surface-background` with the large shadow and the rim light, a 12px corner, a 20px mark, a slide in from the right, and the countdown as a wash behind the words that drains from the right. A variant spends its hue on its mark (the feedback ink step) and its wash (the feedback soft step) only, so a failure is a rose mark on a faint rose wash with a rose action, never red words on a red edge. Reduced motion keeps the strip still and draws no wash.
 
-**A picker's boundary is a button's.** `Select`, `DateTimePicker` and `TimeWindowPicker` draw their trigger on `--color-border-strong`, as the secondary button does, and step to `--color-border-strong-hover` under the pointer. Text boxes, checkboxes and switches keep `--color-border-control` at 3:1, as do the typed boxes inside the pickers' panels.
+**A picker's boundary is a button's.** `Select`, `DateTimePicker` and `TimeWindowPicker` draw their trigger on `--color-border-strong`, as the secondary button does, and step to `--color-border-strong-hover` under the pointer. Text boxes and the typed boxes inside the pickers' panels draw `--color-border-field` (see 0.23.0); checkboxes and switches keep `--color-border-control` at 3:1.
 
 **A `Select` list that leads with marks ends its rows with the tick**, so a swatch, an avatar or a glyph starts at the panel's edge. A list of words keeps the tick's column first.
 

package/dist/AppShell/index.js

@@ -1,6 +1,6 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-G5TAKMEA.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-BFQK7CYJ.js';
 import '../chunk-IG75YMUN.js';
-import '../chunk-4MIM356A.js';
+import '../chunk-UFKUWVMV.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/ArrangeList/index.js

@@ -1,8 +1,8 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-AIVZVKYZ.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-SJCKMSQK.js';
 import '../chunk-A722MUNR.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-I6NZKJGK.js';
-import '../chunk-Q55TXPA3.js';
+import '../chunk-IASV5UCP.js';
+import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/AvatarPicker/index.js

@@ -1,7 +1,7 @@
-export { AvatarPicker } from '../chunk-T7ICFXEC.js';
-import '../chunk-XU4ZUGLE.js';
-import '../chunk-26PEPONN.js';
-import '../chunk-4LDTQWS7.js';
+export { AvatarPicker } from '../chunk-U63Y5OCW.js';
+import '../chunk-OQT7GSKJ.js';
+import '../chunk-7QL2OFP6.js';
+import '../chunk-XJFOOXCF.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-5PSXBL73.js';

package/dist/Checkbox/index.js

@@ -1,5 +1,5 @@
-export { Checkbox, CheckboxGroup } from '../chunk-I6NZKJGK.js';
-import '../chunk-Q55TXPA3.js';
+export { Checkbox, CheckboxGroup } from '../chunk-IASV5UCP.js';
+import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Combobox/index.js

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

package/dist/CommandPalette/index.js

@@ -1,8 +1,8 @@
-export { CommandPalette } from '../chunk-4HRB62EA.js';
+export { CommandPalette } from '../chunk-GTLJXJ3U.js';
 import '../chunk-F4DPAJCN.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-Q55TXPA3.js';
+import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-OG6CL3EB.js';

package/dist/CommentThread/index.js

@@ -1,8 +1,8 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-IC64IWOO.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-PBNP7H2C.js';
 import '../chunk-WI6K5M5X.js';
-import '../chunk-VJLYGPPE.js';
+import '../chunk-RIEDQSA4.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-Q55TXPA3.js';
+import '../chunk-6QFAK2WV.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';

package/dist/Composer/index.js

@@ -1,6 +1,6 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-VJLYGPPE.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-RIEDQSA4.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-Q55TXPA3.js';
+import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ConfirmField/index.js

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

package/dist/DataTable/index.js

@@ -1,13 +1,13 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-LG244LY7.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-35UKQ33X.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-F4DPAJCN.js';
-import '../chunk-I6NZKJGK.js';
-import '../chunk-Q55TXPA3.js';
+import '../chunk-IASV5UCP.js';
+import '../chunk-6QFAK2WV.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-4MIM356A.js';
+import '../chunk-UFKUWVMV.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/DataView/index.js

@@ -1,23 +1,23 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-AV6YX4GZ.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-JCSXFAXG.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-RE6ED5TO.js';
-import '../chunk-LG244LY7.js';
+import '../chunk-35UKQ33X.js';
+import '../chunk-WG5WUFBX.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-F4DPAJCN.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-I6NZKJGK.js';
-import '../chunk-Q55TXPA3.js';
+import '../chunk-IASV5UCP.js';
+import '../chunk-6QFAK2WV.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-4MIM356A.js';
+import '../chunk-UFKUWVMV.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/DateTimePicker/index.js

@@ -1,4 +1,4 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-RE6ED5TO.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-WG5WUFBX.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-OG6CL3EB.js';

package/dist/{DateTimePicker-NJ6XH2TE.css → DateTimePicker-HG2KQXQ6.css}

@@ -159,7 +159,7 @@ svg.crewlet-datetime__chevron {
   font-variant-numeric: tabular-nums;
   color: var(--color-text-primary);
   background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-field);
   /* A box is a box: the corner every field in the package wears. */
   border-radius: var(--radius-md);
   outline: none;

package/dist/HuePicker/index.js

@@ -1,7 +1,7 @@
 import '../chunk-FFMCMSJB.js';
-export { HuePicker } from '../chunk-XU4ZUGLE.js';
-import '../chunk-26PEPONN.js';
-import '../chunk-4LDTQWS7.js';
+export { HuePicker } from '../chunk-OQT7GSKJ.js';
+import '../chunk-7QL2OFP6.js';
+import '../chunk-XJFOOXCF.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';

package/dist/Input/index.js

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

package/dist/{Input-3KVSNUO5.css → Input-GBZSFXLU.css}

@@ -11,12 +11,14 @@
  * with padding on all four sides a 32px field drew 39px tall, so a field, the
  * button beside it and the select beside that were three heights.
  *
- * THE BOUNDARY IS --color-border-control, not the default border. A text
- * box, a checkbox and a switch are the three things on a page whose OUTLINE
- * is the control: with the ordinary hairline they measured 1.27:1 in light
- * and 1.75:1 in dark, which is a box a reader has to already know is there.
- * It is the one place this register does not follow the product's own
- * stylesheet, which draws every field on the panel hairline.
+ * THE BOUNDARY IS --color-border-field, not the default border. A text box
+ * is one of the few things on a page whose OUTLINE is the control: with the
+ * ordinary hairline it measured 1.27:1 in light and 1.75:1 in dark, which is
+ * a box a reader has to already know is there. The field step is the strong
+ * border lifted only as far as 3:1 on the rungs a field stands on, so it
+ * clears that floor without being the brightest edge on the page, which the
+ * control boundary was: held to every row composite a checkbox meets, it
+ * measured 4.9:1 on the card a search box nearly always sits on.
  *
  * AND A FOCUSED FIELD SHOWS ONE RING, drawn as an outline over that boundary.
  * Every field in this package states that rule for itself and states it the
@@ -40,7 +42,7 @@
   width: 100%;
   min-height: var(--size-control-md);
   background-color: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-field);
   border-radius: var(--radius-md);
   /* The boundary is the only thing that moves here. The ring is an outline,
      which takes no transition, and nothing else paints a shadow. */
@@ -55,8 +57,13 @@
 
 .crewlet-input--sm { min-height: var(--size-control-sm); }
 
+/*
+ * UNDER THE POINTER THE EDGE STEPS UP, to the control boundary. The hover
+ * border is a hairline step, darker than the field's own edge, so a field
+ * that took it faded as the pointer reached it.
+ */
 .crewlet-input:hover {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-control);
 }
 
 /*
@@ -344,7 +351,7 @@
   line-height: var(--font-line-height-normal);
   color: var(--color-text-primary);
   background-color: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-field);
   border-radius: var(--radius-md);
   transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
   box-sizing: border-box;

package/dist/ListInput/index.js

@@ -1,6 +1,6 @@
-export { ListInput } from '../chunk-YSJYWQSP.js';
+export { ListInput } from '../chunk-D5JZN3ML.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-Q55TXPA3.js';
+import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/MarkdownEditor/index.js

@@ -1,8 +1,8 @@
-export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-QQGWES46.js';
-import '../chunk-VYY56AMX.js';
+export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-CS65QSIJ.js';
+import '../chunk-M54K52ZU.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-26PEPONN.js';
-import '../chunk-4LDTQWS7.js';
+import '../chunk-7QL2OFP6.js';
+import '../chunk-XJFOOXCF.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-HMPFGIWM.js';

package/dist/{MarkdownEditor-ZLSHTOIZ.css → MarkdownEditor-WOKV7CLK.css}

@@ -19,14 +19,15 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-field);
   border-radius: var(--radius-md);
   background: var(--color-surface-subtle);
   transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
 .crewlet-markdown-editor:hover {
-  border-color: var(--color-border-hover);
+  /* A step up from the field's edge, as every field takes (see Input.css). */
+  border-color: var(--color-border-control);
 }
 
 .crewlet-markdown-editor:has(.crewlet-markdown-editor__field:focus-visible) {

package/dist/Menu/Menu.d.ts

@@ -58,6 +58,11 @@
  *   menu itself rather than sitting beside a second button that does. The
  *   caller spreads the props it is handed on its element, which keeps every
  *   rule above, the focus coming back included.
+ * - IT CAN BE NO NARROWER THAN ITS TRIGGER (`width="trigger"`): a trigger
+ *   that spans a column, such as the signed-in reader at the foot of the
+ *   rail, opens a panel that covers it edge to edge, and that still grows
+ *   past it when a row needs the room, so a description reads on one line
+ *   rather than wrapping into a column of short lines.
  * - A HEADER SAYS WHAT THE ACTIONS ARE ABOUT (`header`): a line of facts
  *   above the items, such as the access a signed-in reader carries. It is
  *   not an item, so the arrows never stop on it, and the menu is described by
@@ -124,6 +129,12 @@ export interface MenuProps {
     icon?: ReactNode;
     /** Visible trigger text; without it the trigger is an icon button named by `label`. */
     trigger?: ReactNode;
+    /**
+     * A glyph after the trigger's text, such as the chevron of a picker. Drawn
+     * as the button's trailing icon, a gap away from the words; a glyph written
+     * into `trigger` instead sits flush against them. Read only with `trigger`.
+     */
+    trailingIcon?: ReactNode;
     triggerVariant?: ButtonVariant | undefined;
     /** -1 for a pointer-only trigger whose actions the keyboard reaches another way. */
     triggerTabIndex?: number | undefined;
@@ -131,6 +142,12 @@ export interface MenuProps {
     onOpenChange?: ((open: boolean) => void) | undefined;
     /** Which edge of the trigger the menu lines up with. */
     align?: 'start' | 'end' | undefined;
+    /**
+     * How wide the panel is: its longest row (`content`, the default), or its
+     * longest row but never narrower than its trigger (`trigger`), for a
+     * trigger that spans a column.
+     */
+    width?: 'content' | 'trigger' | undefined;
     /**
      * The caller's own trigger, in place of the menu's button: an element given
      * these props. `label` still names the menu; the trigger names itself.
@@ -140,5 +157,5 @@ export interface MenuProps {
     header?: ReactNode;
     className?: string | undefined;
 }
-export declare function Menu({ label, items, icon, trigger, triggerVariant, triggerTabIndex, open: controlled, onOpenChange, align, renderTrigger, header, className, }: MenuProps): import("react").JSX.Element;
+export declare function Menu({ label, items, icon, trigger, trailingIcon, triggerVariant, triggerTabIndex, open: controlled, onOpenChange, align, width, renderTrigger, header, className, }: MenuProps): import("react").JSX.Element;
 export {};

package/dist/Menu/index.js

@@ -1,4 +1,4 @@
-export { Menu } from '../chunk-4MIM356A.js';
+export { Menu } from '../chunk-UFKUWVMV.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/{Menu-XIJ4LQUT.css → Menu-KEKAD3BZ.css}

@@ -34,9 +34,15 @@
    * however long that label was and the 320px was a number nothing read. A
    * width is clamped by the ceiling, and the label that no longer fits is the
    * one that truncates.
+   *
+   * A FLOOR, when the trigger sets one (`width="trigger"`, which writes
+   * --crewlet-menu-floor): the panel is never narrower than a trigger that
+   * spans a column. The ceiling is lifted to meet it, so the two never cross
+   * and the rule above still holds.
    */
   width: max-content;
-  max-width: 320px;
+  min-width: var(--crewlet-menu-floor, 0px);
+  max-width: max(320px, var(--crewlet-menu-floor, 0px));
   max-height: min(360px, 60vh);
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -193,6 +199,7 @@
 .crewlet-menu__text {
   display: flex;
   flex-direction: column;
+  gap: calc(var(--spacing-1) / 2);
   min-width: 0;
 }
 
@@ -202,9 +209,14 @@
   white-space: nowrap;
 }
 
+/*
+ * ONE STEP UNDER THE LABEL, not two. At 11px under a 13px label the second
+ * line read as fine print; at 12px in the tertiary ink it is still plainly the
+ * lesser line, and it is legible at a glance.
+ */
 .crewlet-menu__description {
   color: var(--color-text-tertiary);
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-xs);
   white-space: normal;
 }
 
@@ -222,11 +234,17 @@
 /*
  * Facts above the items, across the panel's full width with a hairline under
  * them: what the actions below are about, read rather than pressed.
+ *
+ * A NAME AND ITS VALUE SHARE ONE LINE, the name at the start and the value at
+ * the end, as a property reads ("Access … Admin"). Stacked, the pair spent two
+ * lines on one fact. A value too long for the line wraps beneath its name.
  */
 .crewlet-menu__header {
   display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-1) var(--spacing-2);
   margin: calc(var(--spacing-1) * -1) calc(var(--spacing-1) * -1) var(--spacing-1);
   padding: var(--spacing-2) var(--spacing-3);
   border-bottom: 1px solid var(--color-border-default);

package/dist/OrgTable/index.js

@@ -1,5 +1,5 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-6A7P6II6.js';
-import '../chunk-T5TFZ2JB.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-AMNN4WDX.js';
+import '../chunk-VEB5ERRE.js';
 import '../chunk-MY374UUD.js';
 import '../chunk-AKEZ3G5V.js';
 import '../chunk-VYOKRN2I.js';

package/dist/PeopleRail/index.js

@@ -1,8 +1,8 @@
 export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-J4OKGJQ6.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-S35G6PNC.js';
-import '../chunk-UAN5NE7M.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';

package/dist/PresenceStack/index.js

@@ -2,8 +2,8 @@ export { PresenceStack } from '../chunk-YM3GJHGW.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-I6POAB4V.js';
 import '../chunk-S35G6PNC.js';
-import '../chunk-UAN5NE7M.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PrincipalPicker/index.js

@@ -1,7 +1,7 @@
-export { PrincipalPicker } from '../chunk-JEDWC3GI.js';
-import '../chunk-LOLELDBW.js';
+export { PrincipalPicker } from '../chunk-ZITJKF6Z.js';
+import '../chunk-QS4ZGTEU.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-Q55TXPA3.js';
+import '../chunk-6QFAK2WV.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';

package/dist/SegmentedControl/index.js

@@ -1,6 +1,6 @@
-import '../chunk-VYY56AMX.js';
-export { SegmentedControl } from '../chunk-26PEPONN.js';
-import '../chunk-4LDTQWS7.js';
+import '../chunk-M54K52ZU.js';
+export { SegmentedControl } from '../chunk-7QL2OFP6.js';
+import '../chunk-XJFOOXCF.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/SheetGrid/index.js

@@ -8,8 +8,8 @@ import '../chunk-PPAQFGS2.js';
 import '../chunk-YYZRLLLY.js';
 import '../chunk-S35G6PNC.js';
 import '../chunk-QWOPX2MN.js';
-import '../chunk-UAN5NE7M.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';

package/dist/Switcher/index.js

@@ -1,8 +1,8 @@
-export { Switcher } from '../chunk-7X5WOECO.js';
+export { Switcher } from '../chunk-KG6XRG5Z.js';
 import '../chunk-W5J7R5EB.js';
 import '../chunk-F4DPAJCN.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-Q55TXPA3.js';
+import '../chunk-6QFAK2WV.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-PQADV6P6.js';

package/dist/{Switcher-B44Q4WF4.css → Switcher-K3EPA2RB.css}

@@ -218,17 +218,23 @@ svg.crewlet-switcher-trigger__chevron {
 }
 
 /*
- * THE CURRENT SUBJECT, outlined by its own accent hairline inside the row: an
+ * THE CURRENT SUBJECT, in the accent's soft pair: the tint, and the line
+ * paired with it drawn inside the row, as a chosen chip is (see Tabs.css). An
  * outline rather than a shadow, so forced-colours mode keeps it. The row the
- * arrows are on takes the raised fill as every listbox row does; both can land
- * on one row, and it never gains a second border.
+ * arrows are on takes the raised fill as every listbox row does, and keeps it
+ * when it is the current row too, so the tint never hides where the arrows
+ * are; that row keeps the line, and it never gains a second border.
  */
 .crewlet-listbox__option.crewlet-switcher__option.is-current {
   color: var(--color-text-primary);
-  outline: 1px solid var(--color-brand-accent);
+  outline: 1px solid var(--color-brand-accent-soft-strong);
   outline-offset: -1px;
 }
 
+.crewlet-listbox__option.crewlet-switcher__option.is-current:not([aria-selected='true']):not(:hover) {
+  background: var(--color-brand-accent-soft);
+}
+
 /* A HELD ROW answers no pointer: no fill under it, and the reason in the quiet
    ink at its end says why. */
 .crewlet-listbox__option.crewlet-switcher__option[aria-disabled='true'] {

package/dist/Tabs/index.js

@@ -1,4 +1,4 @@
-export { TabPanel, Tabs, tabId } from '../chunk-4LDTQWS7.js';
+export { TabPanel, Tabs, tabId } from '../chunk-XJFOOXCF.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{Tabs-ITJYJFMU.css → Tabs-CJGO35BH.css}

@@ -305,8 +305,9 @@
  * QUIET CHIPS WITH NO WELL: the lenses of an object or a scope, set beside its
  * name in a page's bar. A well round them was a second box beside the name the
  * lenses are about, and a raised chip inside it a second highlight. Here the
- * chip that is on is drawn by its own border in the accent and nothing else,
- * which is the kit's one way of saying "this one is chosen".
+ * chip that is on is drawn in the accent's soft pair, the tint and the line
+ * paired with it, which is how the kit says "this one is chosen" on a chip
+ * (FilterChip draws the same pair).
  */
 .crewlet-tabs--chip {
   display: inline-flex;
@@ -334,11 +335,17 @@
   background: none;
 }
 
-/* An outline rather than a border, so a chip turning on does not move its
-   neighbours by a pixel, and forced-colors mode keeps it. */
+/*
+ * THE SOFT PAIR, not the solid accent. A full-strength accent ring round a
+ * chip is the brightest edge in the bar, louder than the name the lenses are
+ * about; the soft tint says which chip is on and the paired line gives it an
+ * edge. An outline rather than a border, so a chip turning on does not move
+ * its neighbours by a pixel, and forced-colors mode keeps it.
+ */
 .crewlet-tabs--chip .crewlet-tabs__tab.is-active {
+  background: var(--color-brand-accent-soft);
   color: var(--color-text-primary);
-  outline: 1px solid var(--color-brand-accent);
+  outline: 1px solid var(--color-brand-accent-soft-strong);
   outline-offset: -1px;
 }
 

package/dist/TagsInput/index.js

@@ -1,4 +1,4 @@
-export { TagsInput } from '../chunk-7ZNKEPLN.js';
+export { TagsInput } from '../chunk-2CQLNML5.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-F73MC7EZ.js';

package/dist/{TagsInput-P2HS5QL4.css → TagsInput-XMXTI5Q4.css}

@@ -49,7 +49,7 @@
   line-height: var(--font-line-height-normal);
   color: var(--color-text-primary);
   background-color: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-field);
   border-radius: var(--radius-md);
   outline: none;
   /* The boundary is the only thing that moves. The ring is an outline, which

package/dist/ThemeSwitcher/index.js

@@ -1,9 +1,9 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-2ONWEDQT.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-IPM2E6UI.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
-import '../chunk-VYY56AMX.js';
+import '../chunk-M54K52ZU.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
-import '../chunk-26PEPONN.js';
-import '../chunk-4LDTQWS7.js';
+import '../chunk-7QL2OFP6.js';
+import '../chunk-XJFOOXCF.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';