@crewlethq/ui 0.10.0 → 0.11.0

package/README.md

@@ -42,7 +42,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | ---- | ---------- |
 | Actions | `Button` and `ButtonLink` (variants `primary`, `secondary`, `outline`, `ghost`, `accent`, `danger`; sizes `small`, `medium`, `large`; shapes `square`, `pill`), `IconButton`, `Menu`, `Link`, `Copyable`, `CopyButton`, `Kbd` |
 | Content and text | `Text` (the eight registers), `Prose`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime` |
-| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker` |
+| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList` |
 | Data display | `DataTable`, `CopyableCell`, `Table`, `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `Skeleton`, `Eyebrow` |
 | List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, plus the filter model (`filterDefsFromColumns`, `applyColumnFilters`, `filterPredicate`, `blankFilterValue`) |
 | Feedback and overlays | `Callout`, `Toaster`, `Modal` (with `variant="sheet"`), `ConfirmModal`, `CommandPalette`, `Tooltip`, `Popover`, `Announcer` |
@@ -191,6 +191,22 @@ 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.11.0
+
+0.11.0 adds the parts a dense editing form is built from.
+
+**`FactList`** draws facts a form shows and does not edit as 32px rows in one bordered box: the label on the left, the value on the right. A row with a `reason` carries a lock and says why in a tooltip on hover and to a screen reader after its value, in place of a caption under every value.
+
+**`AvatarPicker`** is an agent's badge that opens its own picker. Pressing it opens the characters and the hues in a popover, and each choice applies as it is made; a `disabled` one is the badge alone. It replaces a `CharacterPicker` and a `HuePicker` drawn open in a form.
+
+**`Tabs` take a `marker`** per item: `{ tone: 'danger', count, label }` for problems, or `{ tone: 'warning' | 'changed', label }` for a 6px dot. One per tab, the most urgent, and it stands in for the item's `count` while set; `label` is what a screen reader hears. `TabsMarker` is its type.
+
+**`FormField` takes `helperOnFocus`**: the helper is still in `aria-describedby`, and is drawn only while the field has focus, so a form whose every field carries a sentence reads as labels and values at rest. `ListInput` passes the same prop to its field.
+
+`@crewlethq/icons` adds `LockGlyph` (Lucide's `lock`), which `FactList` draws.
+
+What to change: nothing. Every addition is new.
+
 ## Breaking changes in 0.10.0
 
 0.10.0 moves an agent's state off the ring round its badge and onto a small badge on its corner.

package/dist/Accordion/index.js

@@ -1,6 +1,6 @@
-export { Accordion, AccordionItem } from '../chunk-RIAZM6L3.js';
-import '../chunk-FZVJDJFN.js';
-import '../chunk-BHHIIK3M.js';
+export { Accordion, AccordionItem } from '../chunk-G2AVKPSL.js';
+import '../chunk-ENJUPIND.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AppShell/index.js

@@ -1,6 +1,6 @@
-export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-OVLJEVQS.js';
+export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-7LD6P32I.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AvatarPicker/AvatarPicker.d.ts

@@ -0,0 +1,32 @@
+import { type CrewletCharacterId } from '@crewlethq/icons/characters';
+import { type AvatarSize } from '../Avatar/Avatar.js';
+import { type NodeHue } from '../utils/nodeHue.js';
+/** An agent's look: its character and the hue it is drawn in. */
+export interface AvatarPickerValue {
+    character: CrewletCharacterId;
+    hue: NodeHue;
+}
+export interface AvatarPickerProps {
+    value: AvatarPickerValue;
+    onChange: (next: AvatarPickerValue) => void;
+    /** The agent's name, for the button's accessible name. */
+    name: string;
+    /** The badge's size. 40px, the size a form's header draws an identity at. */
+    size?: AvatarSize | undefined;
+    /** The characters offered, in order. Every character, by default. */
+    characters?: readonly CrewletCharacterId[] | undefined;
+    /** The badge is drawn, and nothing opens. */
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * An agent's badge that opens its own picker: press it and the characters and
+ * the hues open in a popover beside it.
+ *
+ * THE BADGE IS THE CONTROL. The two pickers drawn open in a form took about
+ * 330px for a choice made once, so the form keeps one badge, marked with a
+ * pencil pip as the thing that changes it, and the grid opens on demand. A
+ * choice applies as it is made, as the pickers' own radios do; Escape or a
+ * press outside closes the popover.
+ */
+export declare function AvatarPicker({ value, onChange, name, size, characters, disabled, className, }: AvatarPickerProps): import("react").JSX.Element;

package/dist/AvatarPicker/index.d.ts

@@ -0,0 +1,3 @@
+import './AvatarPicker.css';
+export { AvatarPicker } from './AvatarPicker.js';
+export type { AvatarPickerProps, AvatarPickerValue } from './AvatarPicker.js';

package/dist/AvatarPicker/index.js

@@ -0,0 +1,14 @@
+export { AvatarPicker } from '../chunk-HV6IZFBK.js';
+import '../chunk-K5Q2DK3P.js';
+import '../chunk-AYKXMIOR.js';
+import '../chunk-EBBAAQDY.js';
+import '../chunk-JHQUT4WJ.js';
+import '../chunk-PDUZO35I.js';
+import '../chunk-YXMCUKFI.js';
+import '../chunk-CBOICT64.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-HI6Q2UXQ.js';
+import '../chunk-ODEQTPFM.js';

package/dist/AvatarPicker-PREY36MG.css

@@ -0,0 +1,54 @@
+/*
+ * The badge as a button, with a pencil pip on its corner saying it changes
+ * the badge. No chrome of its own beyond the focus ring: the badge is the
+ * control's face.
+ */
+.crewlet-avatar-picker {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-lg);
+  background: none;
+  cursor: pointer;
+}
+
+button.crewlet-avatar-picker:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-avatar-picker__pip {
+  position: absolute;
+  right: calc(var(--spacing-1) * -1);
+  bottom: calc(var(--spacing-1) * -1);
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-circle);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+}
+
+button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
+  color: var(--color-text-primary);
+}
+
+.crewlet-avatar-picker__body {
+  display: grid;
+  gap: var(--spacing-2);
+  width: max-content;
+  max-width: 100%;
+  padding: var(--spacing-3);
+}
+
+.crewlet-avatar-picker__label {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}

package/dist/Canvas/index.js

@@ -1,8 +1,8 @@
-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-VE6LD3KM.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';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Card/index.js

@@ -1,6 +1,6 @@
-export { Card } from '../chunk-CEOXFO3E.js';
+export { Card } from '../chunk-EG6NYWVK.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
-import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CharacterPicker/index.js

@@ -1,4 +1,5 @@
-export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-UO5UK7V2.js';
+import '../chunk-3L5NHASN.js';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-YXMCUKFI.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CodeBlock/index.js

@@ -1,7 +1,7 @@
-export { CodeBlock } from '../chunk-MORLKUGM.js';
-import '../chunk-26SCUACK.js';
+export { CodeBlock } from '../chunk-KGTQ5CVD.js';
+import '../chunk-YACKC3K2.js';
 import '../chunk-5VNUYO76.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Combobox/index.js

@@ -1,8 +1,8 @@
-export { Combobox } from '../chunk-UYK72NOS.js';
+export { Combobox } from '../chunk-ELZKOVEC.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-ZGX2DP7F.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette/index.js

@@ -1,13 +1,13 @@
-export { CommandPalette } from '../chunk-IGWPZZIB.js';
+export { CommandPalette } from '../chunk-6SDGRKQ7.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-ZGX2DP7F.js';
-import '../chunk-BTHX2FS3.js';
-import '../chunk-BHHIIK3M.js';
+import '../chunk-TEEJSTFG.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Copyable/index.js

@@ -1,6 +1,6 @@
-export { CopyButton, Copyable } from '../chunk-26SCUACK.js';
+export { CopyButton, Copyable } from '../chunk-YACKC3K2.js';
 import '../chunk-5VNUYO76.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataTable/index.js

@@ -1,14 +1,14 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-CVB7O3SZ.js';
-import '../chunk-LSB3EHBW.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-R4ZJB5YX.js';
+import '../chunk-TFH6SYWB.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-BTHX2FS3.js';
+import '../chunk-TEEJSTFG.js';
+import '../chunk-5VNUYO76.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-YCTMKKRA.js';
-import '../chunk-5VNUYO76.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataView/index.js

@@ -1,25 +1,25 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-EUT7VBQG.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-CIOKUMVC.js';
 import '../chunk-PGRPNDWM.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-HOXGBLEY.js';
+import '../chunk-JCNUQ3US.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-ZGX2DP7F.js';
-import '../chunk-CVB7O3SZ.js';
-import '../chunk-LSB3EHBW.js';
+import '../chunk-R4ZJB5YX.js';
+import '../chunk-TFH6SYWB.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-BTHX2FS3.js';
-import '../chunk-5I56UXBJ.js';
-import '../chunk-PDUZO35I.js';
+import '../chunk-TEEJSTFG.js';
+import '../chunk-5VNUYO76.js';
 import '../chunk-GXQ3B46I.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-YCTMKKRA.js';
-import '../chunk-5VNUYO76.js';
-import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-PDUZO35I.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DateTimePicker/index.js

@@ -1,9 +1,9 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-5I56UXBJ.js';
-import '../chunk-PDUZO35I.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-JCNUQ3US.js';
 import '../chunk-GXQ3B46I.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-PDUZO35I.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Disclosure/index.js

@@ -1,6 +1,6 @@
-export { Disclosure } from '../chunk-MICH6QSJ.js';
-export { DisclosureAnatomy } from '../chunk-FZVJDJFN.js';
-import '../chunk-BHHIIK3M.js';
+export { Disclosure } from '../chunk-S4RCG44T.js';
+export { DisclosureAnatomy } from '../chunk-ENJUPIND.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/FactList/FactList.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+/** One read-only fact: what it is, its value, and why it cannot be changed here. */
+export interface FactListItem {
+    /** Stable identity within the list. */
+    key: string;
+    /** What the fact is: "Handle", "Placement". */
+    label: ReactNode;
+    /** Its value, as text or a short node (a link, a tag). */
+    value: ReactNode;
+    /**
+     * Why it cannot be changed here, in one sentence. Shown as a tooltip when
+     * the pointer rests on the row, and read by a screen reader after the value;
+     * with one, the row is drawn with a lock.
+     */
+    reason?: string | undefined;
+}
+export interface FactListProps {
+    items: readonly FactListItem[];
+    /** Names the list for a screen reader, where nothing above it does. */
+    label?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * Facts a form shows and does not edit, as rows in one bordered box: the label
+ * on the left, the value on the right, 32px a row.
+ *
+ * ONE LINE A FACT. A read-only value used to be drawn as a label, the value
+ * and a sentence under it, three lines each, so a form's locked facts
+ * outweighed its fields. The sentence is the row's tooltip now, and the lock
+ * says there is one. It is a description list, so a screen reader reads each
+ * label with its value.
+ */
+export declare function FactList({ items, label, className }: FactListProps): import("react").JSX.Element;

package/dist/FactList/index.d.ts

@@ -0,0 +1,3 @@
+import './FactList.css';
+export { FactList } from './FactList.js';
+export type { FactListItem, FactListProps } from './FactList.js';

package/dist/FactList/index.js

@@ -0,0 +1,6 @@
+export { FactList } from '../chunk-URYDN2KA.js';
+import '../chunk-CQY5NTRS.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/FactList-G2H73NFR.css

@@ -0,0 +1,57 @@
+/*
+ * Read-only facts in one bordered box, a 32px row each: label and lock on the
+ * left, the value on the right. The rows share the box's hairline between
+ * them, so a list of six reads as one object rather than six cards.
+ */
+.crewlet-fact-list {
+  display: grid;
+  margin: 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.crewlet-fact-list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: 32px;
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-fact-list__row + .crewlet-fact-list__row {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-fact-list__row.is-locked {
+  cursor: help;
+}
+
+.crewlet-fact-list__label {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-fact-list__lock {
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-fact-list__value {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-secondary);
+  text-align: right;
+  overflow-wrap: anywhere;
+}

package/dist/HuePicker/index.js

@@ -1,7 +1,8 @@
-export { HuePicker } from '../chunk-26TXVHN2.js';
+import '../chunk-EXHQ2QVW.js';
+export { HuePicker } from '../chunk-K5Q2DK3P.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-LPHHDCN3.js';
-import '../chunk-HEOVQZL7.js';
+import '../chunk-EBBAAQDY.js';
+import '../chunk-JHQUT4WJ.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Input/FormField.d.ts

@@ -19,6 +19,13 @@ export interface FormFieldProps extends Omit<HTMLAttributes<HTMLElement>, 'child
     requiredNews?: boolean | undefined;
     /** Where the value comes from, or what shape it takes. */
     helper?: ReactNode;
+    /**
+     * Show the helper only while the field has focus. For a dense form whose
+     * every field carries a sentence: at rest the form is labels and values,
+     * and the sentence appears under the field the reader is in. It stays in
+     * `aria-describedby` either way, so a screen reader hears it on entry.
+     */
+    helperOnFocus?: boolean | undefined;
     /** Why the last value was refused. */
     error?: ReactNode;
     /** A control rendered beside the label, such as an Add button. */
@@ -58,4 +65,4 @@ export interface FormFieldProps extends Omit<HTMLAttributes<HTMLElement>, 'child
  * instant, the only line that said what right looks like disappeared. Both
  * lines are joined into `aria-describedby` in reading order, help first.
  */
-export declare const FormField: ({ label, required, optional, requiredNews, helper, error, labelAction, as, describedBy, htmlFor, className, children, ...rest }: FormFieldProps) => import("react").JSX.Element;
+export declare const FormField: ({ label, required, optional, requiredNews, helper, helperOnFocus, error, labelAction, as, describedBy, htmlFor, className, children, ...rest }: FormFieldProps) => import("react").JSX.Element;

package/dist/Input/index.js

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

package/dist/{Input-DRFNI26F.css → Input-RAKNQJCV.css}

@@ -502,6 +502,13 @@
   color: var(--color-text-tertiary);
 }
 
+/* SHOWN ONLY WHILE THE FIELD HAS FOCUS (`helperOnFocus`): a dense form reads as
+   labels and values at rest, and the sentence appears under the field the
+   reader is in. Still described, so a screen reader hears it on entry. */
+.crewlet-form-field--helper-on-focus:not(:focus-within) .crewlet-form-field__helper {
+  display: none;
+}
+
 /*
  * The error line, on the danger INK. It stays BESIDE the help rather than
  * replacing it: a reader told they are wrong needs the line that says what

package/dist/ListInput/ListInput.d.ts

@@ -10,6 +10,8 @@ export interface ListInputProps {
     multiline?: boolean | undefined;
     /** Where the values come from, or what shape they take. */
     helper?: ReactNode | undefined;
+    /** Show the helper only while the list has focus, as `FormField`'s `helperOnFocus`. */
+    helperOnFocus?: boolean | undefined;
     /** Why the last value was refused. */
     error?: ReactNode | undefined;
     /** Shown in the new-item box. */
@@ -65,4 +67,4 @@ export interface ListInputProps {
  *
  * Ported from the engine dashboard's `ui/ListField.tsx`.
  */
-export declare function ListInput({ label, itemName, value, onChange, multiline, helper, error, placeholder, disabled, optional, enterHint, addLabel, itemLabel, newItemLabel, moveUpLabel, moveDownLabel, removeLabel, addedMessage, removedMessage, movedMessage, }: ListInputProps): import("react").JSX.Element;
+export declare function ListInput({ label, itemName, value, onChange, multiline, helper, helperOnFocus, error, placeholder, disabled, optional, enterHint, addLabel, itemLabel, newItemLabel, moveUpLabel, moveDownLabel, removeLabel, addedMessage, removedMessage, movedMessage, }: ListInputProps): import("react").JSX.Element;

package/dist/ListInput/index.js

@@ -1,10 +1,10 @@
-export { ListInput } from '../chunk-6HXH57BL.js';
+export { ListInput } from '../chunk-LZP7FGT7.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-ZGX2DP7F.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Menu/index.js

@@ -1,7 +1,7 @@
-export { Menu } from '../chunk-LSB3EHBW.js';
+export { Menu } from '../chunk-TFH6SYWB.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Modal/index.js

@@ -1,8 +1,8 @@
-export { ConfirmModal, Modal } from '../chunk-BTHX2FS3.js';
+export { ConfirmModal, Modal } from '../chunk-TEEJSTFG.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -1,13 +1,13 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-7FFDJQ23.js';
-import '../chunk-SX2DFTQV.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-ZMJHK7DR.js';
+import '../chunk-MCPKHYMC.js';
 import '../chunk-S3BCVWTU.js';
 import '../chunk-6OF2DBKY.js';
 import '../chunk-53DVJCVW.js';
 import '../chunk-74WGARJE.js';
-import '../chunk-7RPGY3JE.js';
-import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-3UK4VFSK.js';
-import '../chunk-HI6Q2UXQ.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
+import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SegmentedControl/index.js

@@ -1,6 +1,6 @@
-import '../chunk-UI6HWAWE.js';
-export { SegmentedControl } from '../chunk-LPHHDCN3.js';
-import '../chunk-HEOVQZL7.js';
+import '../chunk-UAQIUSSK.js';
+export { SegmentedControl } from '../chunk-EBBAAQDY.js';
+import '../chunk-JHQUT4WJ.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Tabs/Tabs.d.ts

@@ -10,10 +10,28 @@ export interface TabsItem {
     icon?: ReactNode;
     /** How many things are behind this tab. Drawn as a Count beside the label. */
     count?: number | null;
+    /**
+     * What needs the reader behind this tab, drawn after the label: problems
+     * as a danger count, a warning or an unsaved change as a 6px dot. It
+     * replaces the count while it is set. `label` is what a screen reader hears.
+     */
+    marker?: TabsMarker | undefined;
     disabled?: boolean;
     /** Any extra props the consumer's renderItem needs to read. */
     [key: string]: unknown;
 }
+/**
+ * A tab's marker. ONE PER TAB, the most urgent: a problem, then a warning,
+ * then a change, so a row of tabs reads as "where is something wrong" first.
+ */
+export type TabsMarker = {
+    tone: 'danger';
+    count: number;
+    label: string;
+} | {
+    tone: 'warning' | 'changed';
+    label: string;
+};
 export interface TabsRenderItemProps {
     item: TabsItem;
     /**

package/dist/Tabs/index.d.ts

@@ -1,3 +1,3 @@
 import './Tabs.css';
 export { TabPanel, Tabs, tabId } from './Tabs.js';
-export type { TabPanelProps, TabsItem, TabsProps, TabsRenderItemProps, TabsSize, TabsVariant, } from './Tabs.js';
+export type { TabPanelProps, TabsItem, TabsMarker, TabsProps, TabsRenderItemProps, TabsSize, TabsVariant, } from './Tabs.js';

package/dist/Tabs/index.js

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