@crewlethq/ui 0.14.0 → 0.15.1

package/dist/index.js

@@ -1,52 +1,52 @@
 import './chunk-6AR2T5Y4.js';
 import './chunk-AER7UDD4.js';
 export { Timeline, TimelineItem } from './chunk-O67VF5MS.js';
-export { ToastProvider, Toaster, useToast } from './chunk-CBZSSKH3.js';
-export { TreeCanvas } from './chunk-RZ7RGECB.js';
+export { ToastProvider, Toaster, useToast } from './chunk-QH3AKP2N.js';
+export { TreeCanvas } from './chunk-2OLCUNG7.js';
 export { TagGroup } from './chunk-E6UWRXNM.js';
 export { TagsInput } from './chunk-JCO3SIST.js';
+export { Text } from './chunk-23DHIMJA.js';
 export { ThemeGallery } from './chunk-KLIEPFEZ.js';
 export { ThemeSwatch } from './chunk-MNFU2RNT.js';
-export { Text } from './chunk-23DHIMJA.js';
 export { DensitySwitcher, ThemeSwitcher } from './chunk-SBRE7IML.js';
 export { ThemeToggle } from './chunk-6TSZCBID.js';
 export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from './chunk-K3OWD7BJ.js';
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-IFM63LAG.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-DY77H372.js';
 export { StatGroup } from './chunk-QVAFL2LE.js';
-export { Switch } from './chunk-A722MUNR.js';
-export { Switcher } from './chunk-Y6NR7QJ3.js';
 export { Stepper } from './chunk-5QWIJSQM.js';
+export { Switch } from './chunk-A722MUNR.js';
+export { Switcher } from './chunk-LCF4WPYS.js';
 export { Table } from './chunk-V2N3BMOT.js';
 export { Section } from './chunk-A2UXBCLO.js';
 export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
-export { Select } from './chunk-IXUU5DLZ.js';
+export { Select } from './chunk-FC4YTTFJ.js';
 export { matchesShortcut, useShortcut } from './chunk-2FPENTCF.js';
 export { NavGroup, NavItem, SidebarNav } from './chunk-UCCC7YVZ.js';
 export { Skeleton } from './chunk-W5J7R5EB.js';
 export { StatCard } from './chunk-IKB6HFGK.js';
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-75WOCYGC.js';
-export { TreeGrid } from './chunk-6LXMLQUM.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 { Outline, scrollToHeading, useActiveHeading } from './chunk-A5YKNRG6.js';
 export { PricingCard } from './chunk-UCYIRDND.js';
 export { Tag } from './chunk-LOECRMHA.js';
 export { StatusDot } from './chunk-WIATRXEJ.js';
-export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from './chunk-ZAJHGDAW.js';
 export { Prose } from './chunk-JCSA3XVH.js';
+export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from './chunk-ZAJHGDAW.js';
 export { SearchTrigger } from './chunk-6DRDCT22.js';
 export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from './chunk-77IEHFY4.js';
 import './chunk-VYY56AMX.js';
 export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from './chunk-4PZ6FJKW.js';
 export { NewItemsNotice } from './chunk-PXU6HOZB.js';
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './chunk-IHGKPEEV.js';
-export { OrgLabel } from './chunk-6OF2DBKY.js';
-export { Outline, scrollToHeading, useActiveHeading } from './chunk-A5YKNRG6.js';
-export { AutoGrid, Inline, Spacer, Stack } from './chunk-W4ENKCXJ.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './chunk-FY2R4U4Q.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-YYBD73OI.js';
+export { TreeGrid } from './chunk-B2Z2CDM5.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-22M7OXKW.js';
+export { AutoGrid, Inline, Spacer, Stack } from './chunk-ZAC7SKUN.js';
 export { Link } from './chunk-FBSEJO2C.js';
 export { List, ListItem } from './chunk-DS2C73RJ.js';
 export { ListInput } from './chunk-GARACZAH.js';
+export { useFullscreen } from './chunk-XDTYBF2F.js';
 export { Highlight, highlightRanges, highlightTerms } from './chunk-H6VKCIWV.js';
 import './chunk-EXHQ2QVW.js';
-export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './chunk-5YLON2PW.js';
 export { ImageUpload } from './chunk-DJMLHCLD.js';
 export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from './chunk-XYCADWZN.js';
 export { InlineCode } from './chunk-NN62JQLR.js';
@@ -54,65 +54,65 @@ export { Document, DocumentTitle } from './chunk-WI6K5M5X.js';
 export { EmptyState } from './chunk-RA2ULG6H.js';
 export { EntityChip } from './chunk-DDTDN5L2.js';
 export { ErrorBoundary } from './chunk-XX2VQE55.js';
-export { FactList } from './chunk-URYDN2KA.js';
-export { Tooltip } from './chunk-CQY5NTRS.js';
 export { Eyebrow } from './chunk-RK4XPHVG.js';
-export { useFullscreen } from './chunk-XDTYBF2F.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-5IXMLWGW.js';
+export { FactList } from './chunk-JI5AVQLA.js';
+export { Tooltip } from './chunk-QWOPX2MN.js';
+export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './chunk-5YLON2PW.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-4EOJR52M.js';
 export { PageHeader } from './chunk-HOXGBLEY.js';
 export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from './chunk-3CZ7XAVY.js';
 export { Toolbar, ToolbarOverflow, ToolbarWide } from './chunk-PGRPNDWM.js';
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-3VVKJ7AZ.js';
-export { Menu } from './chunk-TFH6SYWB.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-TK6YC5QT.js';
+export { Menu } from './chunk-NS7BVLL3.js';
 export { EMPTY_VALUE, EmptyValue } from './chunk-EUCC37WY.js';
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from './chunk-AXNQCAFC.js';
-export { DescriptionList, DescriptionListItem } from './chunk-XN4JBAN3.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from './chunk-GUHP5JHC.js';
+export { DescriptionList, DescriptionListItem } from './chunk-F2XSYBKH.js';
 export { DIFF_LIST_LABELS, DiffList } from './chunk-LFHCXZO5.js';
 export { Disclosure } from './chunk-S4RCG44T.js';
-export { ChoiceButtons } from './chunk-YSJC7AZC.js';
 export { Checkbox } from './chunk-YCTMKKRA.js';
+export { ChoiceButtons } from './chunk-YSJC7AZC.js';
 export { ChoiceList } from './chunk-QBXZLGK2.js';
+export { CodeBlock } from './chunk-KGTQ5CVD.js';
+export { CopyButton, Copyable } from './chunk-YACKC3K2.js';
+export { useClipboard, writeClipboard } from './chunk-5VNUYO76.js';
 export { Combobox } from './chunk-4Y7WKXAW.js';
-export { CommandPalette } from './chunk-WYQOHFML.js';
-export { ConfirmModal, Modal } from './chunk-TFMJH2E6.js';
+export { CommandPalette } from './chunk-IYZZL3MZ.js';
+export { ConfirmModal, Modal } from './chunk-K4VORB64.js';
 export { HIGHLIGHT_REST_MS, TYPE_AHEAD_WINDOW, useHighlightRest, useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 export { COMPOSER_COUNTER_AT, Composer } from './chunk-QSLIN64M.js';
 export { Kbd, isApplePlatform, keyGlyph } from './chunk-SMBKXWML.js';
 export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from './chunk-FTEJPHBI.js';
-export { CodeBlock } from './chunk-KGTQ5CVD.js';
-export { CopyButton, Copyable } from './chunk-YACKC3K2.js';
-export { useClipboard, writeClipboard } from './chunk-5VNUYO76.js';
 export { Container } from './chunk-QVE4GJAT.js';
 export { Breadcrumb } from './chunk-VWNC2L6W.js';
 export { KeyChip } from './chunk-FYTIJM2T.js';
-export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from './chunk-GXQ3B46I.js';
 export { Callout } from './chunk-R6FBDTP3.js';
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from './chunk-2PZBIHRV.js';
-import './chunk-53DVJCVW.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from './chunk-AMH67MLM.js';
+import './chunk-VYOKRN2I.js';
 export { Button, ButtonLink } from './chunk-OG6CL3EB.js';
+export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from './chunk-GXQ3B46I.js';
 export { Card } from './chunk-EG6NYWVK.js';
 export { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 import './chunk-3L5NHASN.js';
-export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from './chunk-4WNNEDKO.js';
+export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from './chunk-MLT2HBPN.js';
 export { Accordion, AccordionItem } from './chunk-G2AVKPSL.js';
 export { DisclosureAnatomy } from './chunk-ENJUPIND.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './chunk-PQADV6P6.js';
-export { ADD_PILL_MS, AddPill } from './chunk-74WGARJE.js';
+export { ADD_PILL_MS, AddPill } from './chunk-TROLVEZY.js';
 export { Announcer, announce, useAnnouncer } from './chunk-RSAQOKH3.js';
-export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './chunk-L3CTFFLZ.js';
+export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './chunk-H3XOMT7W.js';
 import './chunk-IG75YMUN.js';
 export { IconButton } from './chunk-4FQT6ZAY.js';
-export { AvatarStack, avatarStackLabel } from './chunk-6NIZCQUM.js';
-export { AvatarPicker } from './chunk-4FFHJBEN.js';
+export { AvatarStack, avatarStackLabel } from './chunk-ZPWUVVIB.js';
+export { AvatarPicker } from './chunk-EFNHOVC2.js';
 export { HuePicker } from './chunk-NXDEPUVG.js';
 export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from './chunk-AYKXMIOR.js';
 export { SegmentedControl } from './chunk-26PEPONN.js';
 export { TabPanel, Tabs, tabId } from './chunk-4LDTQWS7.js';
-export { Popover } from './chunk-O2ZDZZS7.js';
+export { Popover } from './chunk-BWRGFKJP.js';
 export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from './chunk-YXMCUKFI.js';
 import './chunk-CBOICT64.js';
 export { Count } from './chunk-BHHIIK3M.js';
-export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from './chunk-7RPGY3JE.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';
 export { VisuallyHidden } from './chunk-BZFWDIV6.js';
 export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials } from './chunk-HI6Q2UXQ.js';

package/dist/styles.css

@@ -88,7 +88,7 @@
 }
 
 
-/* AddPill-V4TQXJ53.css */
+/* AddPill-RYCY56P4.css */
 /*
  * The control that adds a child (AddPill.tsx).
  *
@@ -499,7 +499,9 @@
 /* THE FILL IS FOR A FILLED DRAWING, and a glyph is a stroke. Painting the
    inside of a Lucide glyph turns every closed shape in it solid and every
    open one into a smear, so a `.crewlet-glyph` keeps the fill its own frame
-   decides and takes the ink through its stroke, which is `currentColor`. */
+   decides and takes the ink through its stroke, which is `currentColor`.
+   A drawing here cuts its holes as geometry, never through a mask: this rule
+   repaints a mask's paths and groups as well, and fills its holes with ink. */
 .crewlet-add-pill__section svg:not(.crewlet-glyph),
 .crewlet-add-pill__section svg:not(.crewlet-glyph) g,
 .crewlet-add-pill__section svg:not(.crewlet-glyph) path {
@@ -535,7 +537,7 @@
 }
 
 
-/* AppShell-CEVLW4QG.css */
+/* AppShell-6QUD7NWM.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -753,7 +755,44 @@
     color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-.crewlet-app-shell__rail-row--action:hover {
+/*
+ * A CONTROL IN THE FOOT IS A ROW OF THE RAIL'S OWN GRAMMAR: the nav row's 30px
+ * step, its glyph-to-word gap, its word size and weight, and its secondary ink
+ * lifting to the primary under the pointer, as Settings above it is drawn. So
+ * the engine's row under Settings reads as one more row of the rail rather
+ * than as a caption, its words start on the line the nav's words start on, and
+ * it keeps one height in every state it says: one line of the compact step.
+ * A status line the rail only states keeps the quieter caption above, and the
+ * status block keeps its card.
+ *
+ * Its mark takes a nav glyph's width, `sm` (14px), whatever the mark is, so a
+ * 7px status dot is centred where the glyph above it is centred and the words
+ * beside it start where "Settings" starts.
+ */
+.crewlet-app-shell__rail-row--action:not(.crewlet-app-shell__rail-row--block),
+.crewlet-app-shell__rail-foot > .crewlet-btn {
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  min-height: var(--size-nav-row);
+  padding-block: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-snug);
+  line-height: var(--font-line-height-tight);
+}
+
+.crewlet-app-shell__rail-row--action:not(.crewlet-app-shell__rail-row--block) > .crewlet-app-shell__rail-row-icon {
+  min-width: 14px;
+}
+
+/*
+ * OPEN IS POINTED AT. The row a panel is open from keeps the hover's lift for
+ * as long as the panel is open, drawn from `aria-expanded` so the picture and
+ * what a screen reader is told cannot come apart, as the switcher's trigger
+ * draws it.
+ */
+.crewlet-app-shell__rail-row--action:hover,
+.crewlet-app-shell__rail-row--action[aria-expanded='true'] {
   background: var(--color-surface-hover);
   color: var(--color-text-primary);
 }
@@ -831,6 +870,42 @@
   flex: none;
 }
 
+/*
+ * THE COUNT: how many of something the row reports, after its words, drawn as
+ * a count in the nav is: the caption step, tabular figures so a count that
+ * ticks up does not move the words beside it, and a mark half a step off the
+ * figure. It is the tertiary step, as the nav's is, unless what it counts is
+ * wrong: a warning count is the warning ink, figure and mark together, which
+ * @crewlethq/tokens holds to 4.5:1 on the rail and under the hover overlay
+ * (RAIL_PAINTS), so on the row a panel is open from too.
+ */
+.crewlet-app-shell__rail-row-count {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  gap: calc(var(--spacing-1) + 1px);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-app-shell__rail-row-count-mark {
+  display: inline-flex;
+}
+
+.crewlet-app-shell__rail-row-count--warning {
+  color: var(--color-feedback-warning-ink);
+}
+
+/* The chevron that says the row opens a panel, in the quiet step: a mark, not
+   a word, and it stays quiet while the row lifts, as the panel's own name is
+   what a reader is told. */
+.crewlet-app-shell__rail-row-opens {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
 /*
  * THE STATUS BLOCK: a row given a `detail` is the approved design's engine
  * status, its words over a second line, on the card rung inside the plain
@@ -1088,7 +1163,7 @@
 }
 
 
-/* Avatar-BPJ36QZR.css */
+/* Avatar-I4NFP3WQ.css */
 /*
  * The identity badge.
  *
@@ -1251,9 +1326,9 @@
 
 /*
  * THE CHARACTER FILLS MOST OF THE PLATE, centred by its own frame (it frames
- * every silhouette square on what it draws), with the plate's corner clear of
- * it: a wide character such as the original Crewlet reaches the plate's
- * sides, a tall one its top and its foot, and none touches the curve.
+ * every silhouette square on its optical centre), with the plate's corner
+ * clear of it: a wide character such as the original Crewlet reaches the
+ * plate's sides, a tall one its top and its foot, and none touches the curve.
  */
 .crewlet-avatar--character {
   border: 1px solid transparent;
@@ -3297,7 +3372,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Charts-JUERFLAR.css */
+/* Charts-JYW4X5ZL.css */
 /* The chart kit: a legend, a ranked bar list, a stacked bar, stacked
    columns, an activity strip, a time series and the reading layer they share. Hand-drawn rather than a charting library, for one reason that
    decides it: every mark here reads tokens, in two themes, at the contrast
@@ -3705,6 +3780,16 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   min-width: 0;
 }
 
+/*
+ * A FILL CHART GROWS INTO THE HEIGHT IT IS GIVEN (`height="fill"`). The figure
+ * flexes, so in a card a taller neighbour stretches it takes the spare height,
+ * and its rows (a style property) spend all of it on the plot's row. Nowhere to
+ * grow, it is as tall as its content, the plot at its least.
+ */
+.crewlet-stacked-columns--fill {
+  flex: 1 1 auto;
+}
+
 /*
  * EACH WORD IS A BOX OF NO HEIGHT, spread from the top of the plot to its
  * baseline, with the word centred on it: so every word stands exactly on the
@@ -3819,12 +3904,19 @@ a.crewlet-breadcrumb__crumb:focus-visible {
  * legend at its END, top right, where the design's Spend card draws it; the
  * legend is flushed to the end of that row and wraps from there. Below, the
  * legend starts under the axis, a step clear of the dates.
+ *
+ * ON A CARD TOO NARROW FOR BOTH, THE LEGEND TAKES A ROW OF ITS OWN, under the
+ * heading and still flushed to the end. Held on one line, the two shrank
+ * together and the legend stood beside the title as a column of one series a
+ * line. The rows stand a step apart, closer than the head stands to the plot,
+ * so the legend still reads as the head's.
  */
 .crewlet-stacked-columns__head {
   grid-column: 1 / -1;
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
-  gap: var(--spacing-4);
+  gap: var(--spacing-2) var(--spacing-4);
   margin-bottom: var(--spacing-3);
   min-width: 0;
 }
@@ -8065,7 +8157,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* DescriptionList-YYY3V3O6.css */
+/* DescriptionList-IXMRCSMK.css */
 /*
  * Metadata pairs on one grid.
  *
@@ -8126,6 +8218,30 @@ svg.crewlet-datetime__chevron {
   }
 }
 
+/*
+ * FIT: the term column is as wide as its longest term, and the pairs stay side
+ * by side at every width. It is for a panel of its own width, such as a
+ * popover, where the window's width says nothing about the room the list has:
+ * the narrow rule above is a question about the window, and a 260px panel is
+ * 260px on a phone and on a desktop alike. Its terms are a word each, so the
+ * column they take is a word wide and the details keep the rest.
+ *
+ * Written AFTER the narrow rule, which it overrides at the same weight, so
+ * nothing here has to outrank a media query.
+ */
+.crewlet-description-list--fit {
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--spacing-2) var(--spacing-4);
+}
+
+.crewlet-description-list--fit.crewlet-description-list--dense {
+  gap: var(--spacing-1) var(--spacing-3);
+}
+
+.crewlet-description-list--fit .crewlet-description-list__detail {
+  margin-bottom: 0;
+}
+
 
 /* DiffList-3EX64AAE.css */
 /* DiffList: one path per row, with its mark, its word and its tint.
@@ -10679,7 +10795,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Layer-NAFSGCFA.css */
+/* Layer-J222IFNX.css */
 /*
  * The portal target a LayerHost provides.
  *
@@ -10691,13 +10807,23 @@ svg.crewlet-datetime__chevron {
  * Its container establishes the positioning context. A host whose parent is
  * static covers the nearest positioned ancestor instead, which is the
  * viewport in the common case and is still a usable bound.
+ *
+ * IT TAKES NO PLACE IN THE STACKING ORDER OF ITS OWN. Every surface drawn in
+ * it carries its own step in the layer band, its depth in the stack, and that
+ * is what decides what paints on top. A z-index here made the host a stacking
+ * context at the bottom of the band, which held everything inside it under
+ * whatever the page stacked above that step: the shell's open drawer takes
+ * the band's own steps beside the host rather than inside it, so a panel
+ * opened from the drawer was drawn under the drawer it came from. A surface
+ * at the same step as the drawer's rail, which is the next one opened above
+ * it, paints over the rail because the host follows the shell in the
+ * document.
  */
 
 .crewlet-layer-host {
   position: absolute;
   inset: 0;
   pointer-events: none;
-  z-index: var(--z-index-layer-base);
 }
 
 .crewlet-layer-host > * {
@@ -10705,7 +10831,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Layout-2ZCV3IGF.css */
+/* Layout-ZBEGLXAE.css */
 /*
  * Stack, Inline, Spacer and AutoGrid.
  *
@@ -10733,6 +10859,24 @@ svg.crewlet-datetime__chevron {
   flex-direction: row;
 }
 
+/*
+ * DRAWN AS A LIST, IT IS STILL A RUN OF ITEMS. A Stack or an Inline spends no
+ * pixel of its own, and a `ul` or an `ol` arrives with the browser's: a margin
+ * above and below, a 40px indent and a marker on every item, so a list of five
+ * names laid out as a Stack was pushed in and bulleted. They are taken back,
+ * and the element stays a list to a screen reader. A list that wants its
+ * markers is `List variant="bulleted"`.
+ *
+ * Inside :where(), so the rule weighs one class like every other here and a
+ * caller's own class still decides what it sets.
+ */
+:where(ul, ol).crewlet-stack,
+:where(ul, ol).crewlet-inline {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 /*
  * A GRID OF CARDS KEEPS ITS TRACKS. `auto-fill` lays down every track the row
  * has room for and leaves the empty ones empty; `auto-fit`, which this was,
@@ -12611,7 +12755,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* OrgLabel-6WSKJQOT.css */
+/* OrgLabel-R5KY7C3W.css */
 /*
  * What a node of an org chart and a row of an org table both say
  * (OrgLabel.tsx).
@@ -12693,7 +12837,12 @@ svg.crewlet-datetime__chevron {
    inside of a Lucide glyph turns every closed shape in it solid and every
    open one into a smear (a person's head and shoulders, a unit's building, a
    warning's triangle, each a blob), so a `.crewlet-glyph` keeps the fill its
-   own frame decides and takes the ink through its stroke. */
+   own frame decides and takes the ink through its stroke.
+
+   A DRAWING HERE CUTS ITS HOLES AS GEOMETRY. This rule repaints every path and
+   group in the zone, a mask's included, so a hole cut by a mask fills with a
+   share of the ink that changes with the hue: every agent's eyes on the chart
+   did, until the Crewlet characters cut their faces into their own paths. */
 .crewlet-org-label__icon svg:not(.crewlet-glyph),
 .crewlet-org-label__icon svg:not(.crewlet-glyph) g,
 .crewlet-org-label__icon svg:not(.crewlet-glyph) path {
@@ -19899,7 +20048,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* Toaster-VZKISP2S.css */
+/* Toaster-EOOOTSJT.css */
 /*
  * The toast stack, drawn as the first release drew it (24a60c3): a dark strip
  * on the page's deepest ground with the large shadow and the rim light, a
@@ -20004,10 +20153,12 @@ svg.crewlet-time-window__tick {
 
 /*
  * A VARIANT IS ITS MARK AND ITS WASH. The words stay in the strip's own inks
- * and the edge stays the hairline, so a failure is a rose mark on a faint rose
- * wash rather than a red strip: the outcome is said by the glyph and the title,
- * and the sentence beside them is read in the ink every sentence is read in.
- * Information is the neutral mark on the neutral wash.
+ * and the edge stays the hairline, so a failure is a rose mark rather than a
+ * red strip: the outcome is said by the glyph and the title, and the sentence
+ * beside them is read in the ink every sentence is read in. The wash is the
+ * countdown, so only a toast that counts down draws one: a success is a moss
+ * mark on a faint moss wash, and a failure, sticky unless it is given a
+ * duration, draws none. Information is the neutral mark on the neutral wash.
  */
 .crewlet-toast--success {
   --crewlet-toast-mark: var(--color-feedback-success-ink);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "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.14.0",
-    "@crewlethq/tokens": "0.14.0"
+    "@crewlethq/icons": "0.15.1",
+    "@crewlethq/tokens": "0.15.1"
   },
   "peerDependencies": {
     "react": ">=18",

package/dist/Layer-NAFSGCFA.css

@@ -1,23 +0,0 @@
-/*
- * The portal target a LayerHost provides.
- *
- * It covers its container so a surface placed against its rectangle is placed
- * against the container, and it is inert until something is drawn in it: an
- * empty host over a canvas must not swallow the drag that pans the canvas.
- * Each overlay inside takes pointer events back for its own panel.
- *
- * Its container establishes the positioning context. A host whose parent is
- * static covers the nearest positioned ancestor instead, which is the
- * viewport in the common case and is still a usable bound.
- */
-
-.crewlet-layer-host {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: var(--z-index-layer-base);
-}
-
-.crewlet-layer-host > * {
-  pointer-events: auto;
-}