@crewlethq/ui 0.21.0 → 0.23.0

package/dist/index.js

@@ -1,35 +1,36 @@
 import './chunk-MSSZHDZI.js';
 export { TreeCanvas } from './chunk-TBIZSQHB.js';
-export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from './chunk-73QBUUYX.js';
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from './chunk-APS747CR.js';
 export { VersionTimeline } from './chunk-UNZ7TVV5.js';
 import './chunk-U5LQ2AS5.js';
-export { DensitySwitcher, ThemeSwitcher } from './chunk-2ONWEDQT.js';
 export { ThemeToggle } from './chunk-NP2C4Y4E.js';
+export { DensitySwitcher, ThemeSwitcher } from './chunk-IPM2E6UI.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from './chunk-Z24ZUSTX.js';
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-NUZC6PJX.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-LREN6TUG.js';
 export { Timeline, TimelineItem } from './chunk-AUQPBL4O.js';
 export { ToastProvider, Toaster, useToast } from './chunk-QH3AKP2N.js';
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from './chunk-MUGM7SEG.js';
 export { TagGroup } from './chunk-E6UWRXNM.js';
-export { TagsInput } from './chunk-7ZNKEPLN.js';
-export { Table } from './chunk-V2N3BMOT.js';
+export { TagsInput } from './chunk-2CQLNML5.js';
 export { Text } from './chunk-IKBK4A5O.js';
 export { ThemeGallery } from './chunk-KLIEPFEZ.js';
 export { ThemeSwatch } from './chunk-MNFU2RNT.js';
 export { NavGroup, NavItem, SidebarNav } from './chunk-UCCC7YVZ.js';
-export { StatCard } from './chunk-IKB6HFGK.js';
 export { StatGroup } from './chunk-JXRI5YD2.js';
+export { StatCard } from './chunk-IKB6HFGK.js';
 export { Stepper } from './chunk-5QWIJSQM.js';
-export { Switcher } from './chunk-7X5WOECO.js';
+export { Switcher } from './chunk-KG6XRG5Z.js';
+export { Table } from './chunk-V2N3BMOT.js';
 export { Section } from './chunk-A2UXBCLO.js';
-export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from './chunk-XMGB3ZAT.js';
 export { Select } from './chunk-FC4YTTFJ.js';
 export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from './chunk-36CWC2NH.js';
+export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
 export { matchesShortcut, useShortcut } from './chunk-2FPENTCF.js';
+export { PrincipalPicker } from './chunk-ZITJKF6Z.js';
+export { QR_DARK, QR_LIGHT, QR_QUIET_ZONE, QrCode, qrModulePath, qrModules } from './chunk-Y56FM3K4.js';
 export { Prose } from './chunk-JCSA3XVH.js';
 export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from './chunk-ZAJHGDAW.js';
-export { QR_DARK, QR_LIGHT, QR_QUIET_ZONE, QrCode, qrModulePath, qrModules } from './chunk-Y56FM3K4.js';
 export { FRAME_HELLO_TIMEOUT_MS, SandboxedFrame } from './chunk-VYDFB6PJ.js';
 export { Skeleton } from './chunk-W5J7R5EB.js';
 export { SearchTrigger } from './chunk-6DRDCT22.js';
@@ -40,21 +41,20 @@ import './chunk-CENOOTAV.js';
 export { PricingCard } from './chunk-DQSXWQMJ.js';
 export { Tag } from './chunk-GFV4LJHH.js';
 export { StatusDot } from './chunk-WIATRXEJ.js';
-export { PrincipalPicker } from './chunk-JEDWC3GI.js';
 export { NewItemsNotice } from './chunk-PXU6HOZB.js';
 export { Note } from './chunk-63WJLRB2.js';
 export { FactLine, ObjectHeader, SetByLine } from './chunk-I7WXZOWA.js';
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './chunk-TBMDMXEX.js';
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-6A7P6II6.js';
-export { TreeGrid } from './chunk-T5TFZ2JB.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-AMNN4WDX.js';
+export { TreeGrid } from './chunk-VEB5ERRE.js';
 export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, placeGroups, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState } from './chunk-MY374UUD.js';
 export { OrgLabel } from './chunk-AKEZ3G5V.js';
 export { Outline, scrollToHeading, useActiveHeading } from './chunk-A5YKNRG6.js';
 export { List, ListItem } from './chunk-DS2C73RJ.js';
-export { ListInput } from './chunk-YSJYWQSP.js';
+export { ListInput } from './chunk-D5JZN3ML.js';
 export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor } from './chunk-5XACKNYR.js';
-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';
 export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from './chunk-4PZ6FJKW.js';
 export { AutoGrid, Inline, Spacer, Stack } from './chunk-ZAC7SKUN.js';
 export { Link } from './chunk-FBSEJO2C.js';
@@ -63,47 +63,48 @@ export { DEFAULT_FRAME_THEME, EXTERNAL_URL_MAX, FRAME_BRIDGE, FRAME_MESSAGE, FRA
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from './chunk-ZXXDZJQN.js';
 export { useFullscreen } from './chunk-XDTYBF2F.js';
 export { Highlight, highlightRanges, highlightTerms } from './chunk-H6VKCIWV.js';
-import './chunk-FFMCMSJB.js';
 export { IconTile } from './chunk-IXJHTFXG.js';
+import './chunk-FFMCMSJB.js';
 export { ImageUpload } from './chunk-YDBC4DNW.js';
 export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from './chunk-XYCADWZN.js';
 export { EntityChip } from './chunk-4KWOKX2B.js';
 export { ErrorBoundary } from './chunk-XX2VQE55.js';
 export { Eyebrow } from './chunk-RK4XPHVG.js';
-export { FactList } from './chunk-JI5AVQLA.js';
 export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './chunk-5YLON2PW.js';
+export { FactList } from './chunk-JI5AVQLA.js';
 export { FollowBanner } from './chunk-FW7HN6AP.js';
 export { DescriptionList, DescriptionListItem } from './chunk-F2XSYBKH.js';
 export { DIFF_LIST_LABELS, DiffList } from './chunk-LFHCXZO5.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';
+export { PageHeader } from './chunk-HOXGBLEY.js';
+export { Toolbar, ToolbarOverflow, ToolbarWide } from './chunk-PGRPNDWM.js';
 export { DIFF_SUMMARY_LABELS, DIFF_VIEW_LABELS, DiffSummary, DiffView, MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines } from './chunk-BVWSLXTY.js';
-export { Disclosure } from './chunk-S4RCG44T.js';
 export { Divider } from './chunk-6KWNXIDE.js';
+export { Disclosure } from './chunk-S4RCG44T.js';
 export { DownloadButton } from './chunk-BJCFNRGH.js';
 export { downloadText, safeFilename, useDownload } from './chunk-F6NZOVWL.js';
-export { ConfirmField, confirmMatches } from './chunk-YSY6UJ4F.js';
+export { ConfirmField, confirmMatches } from './chunk-FGYET26P.js';
 export { InlineCode } from './chunk-5CLW2CXT.js';
 export { CONFLICT_NOTE_LABELS, ConflictNote } from './chunk-UO7JZVCO.js';
 export { Container } from './chunk-QVE4GJAT.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-35UKQ33X.js';
 export { CursorFlag } from './chunk-3BYIWOTV.js';
 export { PresenceRing, presenceHueClass } from './chunk-I6POAB4V.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-AV6YX4GZ.js';
-export { PageHeader } from './chunk-HOXGBLEY.js';
-export { Toolbar, ToolbarOverflow, ToolbarWide } from './chunk-PGRPNDWM.js';
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from './chunk-RE6ED5TO.js';
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-LG244LY7.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from './chunk-WG5WUFBX.js';
+export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from './chunk-MLT2HBPN.js';
 export { ChoiceButtons } from './chunk-YSJC7AZC.js';
 export { ChoiceList } from './chunk-QBXZLGK2.js';
 export { CodeBlock } from './chunk-GDDE4UM7.js';
 export { CopyButton, Copyable } from './chunk-W46LPU4R.js';
 export { useClipboard, writeClipboard } from './chunk-STJ7QBC3.js';
 export { useOutcome } from './chunk-DTIW4CHZ.js';
-export { Combobox } from './chunk-LOLELDBW.js';
-export { CommandPalette } from './chunk-4HRB62EA.js';
+export { Combobox } from './chunk-QS4ZGTEU.js';
+export { CommandPalette } from './chunk-GTLJXJ3U.js';
 export { ConfirmModal, Modal } from './chunk-F4DPAJCN.js';
 export { HIGHLIGHT_REST_MS, TYPE_AHEAD_WINDOW, useHighlightRest, useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
-export { COMMENT_THREAD_LABELS, CommentThread } from './chunk-IC64IWOO.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from './chunk-PBNP7H2C.js';
 export { Document, DocumentTitle } from './chunk-WI6K5M5X.js';
-export { COMPOSER_COUNTER_AT, Composer } from './chunk-VJLYGPPE.js';
+export { COMPOSER_COUNTER_AT, Composer } from './chunk-RIEDQSA4.js';
 export { Kbd, isApplePlatform, keyGlyph } from './chunk-SMBKXWML.js';
 export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from './chunk-GXQ3B46I.js';
 export { Callout } from './chunk-SVSCLHHI.js';
@@ -114,27 +115,26 @@ export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COL
 export { PRESENCE_ACTIVITIES, PRESENCE_LABELS, assignPresenceHues, collapseSessions, joinNames, presenceLabels, presenceOrder } from './chunk-S35G6PNC.js';
 export { Tooltip } from './chunk-QWOPX2MN.js';
 import './chunk-3L5NHASN.js';
-export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from './chunk-MLT2HBPN.js';
 export { ArrangeGroup } from './chunk-35XVR5JQ.js';
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from './chunk-AIVZVKYZ.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from './chunk-SJCKMSQK.js';
 export { Switch } from './chunk-A722MUNR.js';
 export { DEFAULT_REORDER_LABELS, moveKey, useReorder, useReorderLists } from './chunk-XJ2QEBMM.js';
-export { Checkbox, CheckboxGroup } from './chunk-I6NZKJGK.js';
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from './chunk-Q55TXPA3.js';
+export { Checkbox, CheckboxGroup } from './chunk-IASV5UCP.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from './chunk-6QFAK2WV.js';
 export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from './chunk-TODND5AD.js';
 export { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-4KP4RC3O.js';
 export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from './chunk-3CZ7XAVY.js';
 export { EMPTY_VALUE, EmptyValue } from './chunk-EUCC37WY.js';
 export { AuthLayout } from './chunk-WHZFDS62.js';
-export { AvatarStack, avatarStackLabel } from './chunk-UAN5NE7M.js';
-export { AvatarPicker } from './chunk-T7ICFXEC.js';
-export { HuePicker } from './chunk-XU4ZUGLE.js';
-export { SegmentedControl } from './chunk-26PEPONN.js';
-export { TabPanel, Tabs, tabId } from './chunk-4LDTQWS7.js';
+export { AvatarPicker } from './chunk-U63Y5OCW.js';
+export { HuePicker } from './chunk-OQT7GSKJ.js';
+export { SegmentedControl } from './chunk-7QL2OFP6.js';
+export { TabPanel, Tabs, tabId } from './chunk-XJFOOXCF.js';
 export { Popover } from './chunk-BWRGFKJP.js';
 export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from './chunk-AYKXMIOR.js';
 export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from './chunk-5PSXBL73.js';
 import './chunk-CBOICT64.js';
+export { AvatarStack, avatarStackLabel } from './chunk-UAN5NE7M.js';
 export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarInitialsName, avatarPixels, avatarTint, getInitials } from './chunk-5OM447RW.js';
 export { BrandLockup } from './chunk-7KBNFFM3.js';
 export { Breadcrumb } from './chunk-VWNC2L6W.js';
@@ -148,9 +148,9 @@ export { DisclosureAnatomy } from './chunk-ENJUPIND.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './chunk-PQADV6P6.js';
 export { Count } from './chunk-BHHIIK3M.js';
 export { ADD_PILL_MS, AddPill } from './chunk-TROLVEZY.js';
-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';
-export { Menu } from './chunk-4MIM356A.js';
+export { Menu } from './chunk-UFKUWVMV.js';
 export { Button, ButtonLink } from './chunk-OG6CL3EB.js';
 export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from './chunk-HMPFGIWM.js';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from './chunk-R25RGPUB.js';

package/dist/styles.css

@@ -9193,7 +9193,7 @@ body.crewlet-data-table-resizing {
 }
 
 
-/* DateTimePicker-NJ6XH2TE.css */
+/* DateTimePicker-HG2KQXQ6.css */
 /*
  * DateTimePicker: a Select-shaped trigger over a calendar dialog.
  *
@@ -9355,7 +9355,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;
@@ -11447,7 +11447,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Input-3KVSNUO5.css */
+/* Input-GBZSFXLU.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and
  * ReadOnlyField.
@@ -11461,12 +11461,14 @@ svg.crewlet-datetime__chevron {
  * 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
@@ -11490,7 +11492,7 @@ svg.crewlet-datetime__chevron {
   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. */
@@ -11505,8 +11507,13 @@ svg.crewlet-datetime__chevron {
 
 .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);
 }
 
 /*
@@ -11794,7 +11801,7 @@ svg.crewlet-datetime__chevron {
   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;
@@ -13155,7 +13162,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* MarkdownEditor-ZLSHTOIZ.css */
+/* MarkdownEditor-WOKV7CLK.css */
 /*
  * Writing markdown (MarkdownEditor.tsx): the bar, the source or its preview,
  * and the footer, in ONE box.
@@ -13177,14 +13184,15 @@ svg.crewlet-datetime__chevron {
   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) {
@@ -13304,7 +13312,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Menu-XIJ4LQUT.css */
+/* Menu-KEKAD3BZ.css */
 /*
  * The menu button's panel.
  *
@@ -13341,9 +13349,15 @@ svg.crewlet-datetime__chevron {
    * 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;
@@ -13500,6 +13514,7 @@ svg.crewlet-datetime__chevron {
 .crewlet-menu__text {
   display: flex;
   flex-direction: column;
+  gap: calc(var(--spacing-1) / 2);
   min-width: 0;
 }
 
@@ -13509,9 +13524,14 @@ svg.crewlet-datetime__chevron {
   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;
 }
 
@@ -13529,11 +13549,17 @@ svg.crewlet-datetime__chevron {
 /*
  * 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);
@@ -20357,7 +20383,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Switcher-B44Q4WF4.css */
+/* Switcher-K3EPA2RB.css */
 /*
  * The switcher: a button that is the page's name, and a banded panel under it
  * (a search band, a list that scrolls, and a footer that does not).
@@ -20578,17 +20604,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'] {
@@ -20985,7 +21017,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Tabs-ITJYJFMU.css */
+/* Tabs-CJGO35BH.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -21293,8 +21325,9 @@ b.crewlet-switcher__match {
  * 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;
@@ -21322,11 +21355,17 @@ b.crewlet-switcher__match {
   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;
 }
 
@@ -21966,7 +22005,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TagsInput-P2HS5QL4.css */
+/* TagsInput-XMXTI5Q4.css */
 /*
  * TagsInput: several values in one field.
  *
@@ -22018,7 +22057,7 @@ b.crewlet-switcher__match {
   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
@@ -22660,7 +22699,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TimeWindowPicker-BZ5HHATU.css */
+/* TimeWindowPicker-T763GLXH.css */
 /*
  * TimeWindowPicker: one trigger over one panel.
  *
@@ -22963,7 +23002,7 @@ svg.crewlet-time-window__tick {
   min-height: var(--size-control-sm);
   padding: 0 var(--spacing-2);
   background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-field);
   border-radius: var(--radius-md);
   font-family: var(--font-family-mono);
   font-size: var(--font-size-compact);
@@ -24890,7 +24929,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* TreeGrid-FBX3MSJA.css */
+/* TreeGrid-UCPV37XB.css */
 /*
  * A hierarchy as rows and columns (TreeGrid.tsx).
  *
@@ -24937,6 +24976,18 @@ svg.crewlet-time-window__tick {
   border-radius: var(--radius-lg);
 }
 
+/*
+ * INSIDE A FLUSH CARD THE CARD IS THE FRAME. A flush card exists so that a
+ * table's rows reach its edges (Card.css), and a grid that drew its own border
+ * and corner there was a second rounded box one pixel inside the first, with
+ * the card's footer hanging outside it. The rows keep their own hairlines.
+ */
+.crewlet-card--flush .crewlet-tree-grid__grid {
+  background: none;
+  border: none;
+  border-radius: 0;
+}
+
 .crewlet-tree-grid__row {
   display: grid;
   grid-template-columns: var(--crewlet-tree-grid-columns, minmax(0, 1fr));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.21.0",
-    "@crewlethq/tokens": "0.21.0",
+    "@crewlethq/icons": "0.23.0",
+    "@crewlethq/tokens": "0.23.0",
     "uqr": "0.1.3"
   },
   "peerDependencies": {