@crewlethq/ui 0.10.0 → 0.12.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`, `ChoiceList`, `Composer` |
 | 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,32 @@ 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.12.0
+
+0.12.0 adds the parts a question is answered in place with.
+
+**`ChoiceList`** draws one answer from a short list in one bordered box: each choice a native radio with its label, a line of `detail` under it and an optional `tag` at its end ("Recommended"). The whole row selects, the arrow keys move between choices, and the selected row takes the accent's soft fill. A choice marked `separated` is set apart by a dashed rule, and its `panel` is drawn under it only while it is selected, which is how a list ends in "Something else" with a field of its own. `footer` holds the list's Cancel and Submit.
+
+**`Composer`** is a message written in place: a borderless field that grows with its text and a footer strip with the send shortcut, a counter and `actions`, in one box that takes the focus ring as a whole. `onSubmit` runs on Command+Enter (Control+Enter elsewhere) and adds the shortcut's hint; the counter appears from four fifths of `maxLength` (`COMPOSER_COUNTER_AT`).
+
+What to change: nothing. Every addition is new.
+
+## 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/ChoiceList/ChoiceList.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+/** One choice in a [ChoiceList]. */
+export interface ChoiceListOption {
+    /** Stable identity, and what `onChange` is called with. */
+    value: string;
+    /** What the choice is, in a few words. */
+    label: ReactNode;
+    /** One line under the label saying what choosing it means. */
+    detail?: ReactNode;
+    /** A short word at the row's end, such as "Recommended". */
+    tag?: ReactNode;
+    /**
+     * Draws a rule above this choice, setting it apart from the ones before it:
+     * the "Something else" a list of set answers ends with.
+     */
+    separated?: boolean | undefined;
+    /**
+     * Drawn under the choice while it is selected, such as the field a
+     * "Something else" choice opens.
+     */
+    panel?: ReactNode;
+}
+export interface ChoiceListProps {
+    options: readonly ChoiceListOption[];
+    /** The selected choice's `value`, or null when none is. */
+    value: string | null;
+    onChange: (value: string) => void;
+    /** Names the group for a screen reader. */
+    label: string;
+    /** Drawn at the foot of the box, after every choice: its Cancel and Submit. */
+    footer?: ReactNode;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * One answer from a short list, each choice a row with its label, a line of
+ * detail and an optional tag, in one bordered box.
+ *
+ * NATIVE RADIOS, so the arrow keys move the choice and Tab leaves the group as
+ * the platform does, and every row is its radio's label, so the whole row
+ * takes the pointer. A choice's `panel` is drawn under it only while it is
+ * selected, which is how a list ends in "Something else" with a field of its
+ * own without a second control beside the list.
+ */
+export declare function ChoiceList({ options, value, onChange, label, footer, disabled, className }: ChoiceListProps): import("react").JSX.Element;

package/dist/ChoiceList/index.d.ts

@@ -0,0 +1,3 @@
+import './ChoiceList.css';
+export { ChoiceList } from './ChoiceList.js';
+export type { ChoiceListOption, ChoiceListProps } from './ChoiceList.js';

package/dist/ChoiceList/index.js

@@ -0,0 +1,2 @@
+export { ChoiceList } from '../chunk-QBXZLGK2.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ChoiceList-2PQJS4DX.css

@@ -0,0 +1,109 @@
+/*
+ * A short list of answers in one bordered box: a radio, the label with a line
+ * of detail under it, and a tag at the row's end. The selected row takes the
+ * accent's soft fill, so the answer reads at a glance without the radio.
+ */
+.crewlet-choice-list {
+  display: grid;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-choice-list.is-disabled {
+  opacity: 0.6;
+}
+
+.crewlet-choice-list__group {
+  display: grid;
+  gap: var(--spacing-1);
+}
+
+.crewlet-choice-list__item {
+  display: grid;
+  gap: var(--spacing-1);
+}
+
+/* The "Something else" a list ends with, set apart by a dashed rule. */
+.crewlet-choice-list__item.is-separated {
+  padding-top: var(--spacing-1);
+  border-top: 1px dashed var(--color-border-strong);
+}
+
+.crewlet-choice-list__row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-choice-list__row:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-choice-list__row.is-checked {
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-choice-list.is-disabled .crewlet-choice-list__row {
+  cursor: not-allowed;
+}
+
+.crewlet-choice-list__radio {
+  margin: 3px 0 0;
+  accent-color: var(--color-brand-accent);
+  cursor: inherit;
+}
+
+/* A radio draws its own edge, so the ring sits on it, as a checkbox's does. */
+.crewlet-choice-list__radio:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+}
+
+.crewlet-choice-list__text {
+  display: grid;
+  min-width: 0;
+}
+
+.crewlet-choice-list__label {
+  font-size: var(--font-size-compact);
+  font-weight: 500;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-choice-list__detail {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-choice-list__tag {
+  padding-top: 2px;
+  font-size: var(--font-size-2xs);
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--color-brand-accent-ink);
+  white-space: nowrap;
+}
+
+.crewlet-choice-list__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-choice-list__row {
+    transition: none;
+  }
+}

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-GXYNEDNA.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-ZGX2DP7F.js';
+import '../chunk-FTEJPHBI.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';
-import '../chunk-SMBKXWML.js';
+export { CommandPalette } from '../chunk-XV65NTIT.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-ZGX2DP7F.js';
-import '../chunk-BTHX2FS3.js';
-import '../chunk-BHHIIK3M.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-FTEJPHBI.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/Composer/Composer.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode, type TextareaHTMLAttributes } from 'react';
+/** The share of `maxLength` at which the counter appears. */
+export declare const COMPOSER_COUNTER_AT = 0.8;
+export interface ComposerProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'onSubmit' | 'children'> {
+    value: string;
+    onChange: (value: string) => void;
+    /**
+     * Called on Command+Enter (Control+Enter elsewhere). With it, the footer
+     * carries the shortcut's hint.
+     */
+    onSubmit?: (() => void) | undefined;
+    /** Names the field for a screen reader, since it carries no visible label. */
+    label: string;
+    /** The footer's controls, at its end: Cancel and Submit. */
+    actions?: ReactNode;
+    className?: string | undefined;
+}
+/**
+ * A message written in place: a borderless field that grows with its text,
+ * and a footer strip holding the send shortcut, a counter and the actions, in
+ * one box that takes the focus ring as a whole.
+ *
+ * THE COUNTER IS DRAWN ONLY NEAR THE LIMIT, from [COMPOSER_COUNTER_AT] of
+ * `maxLength`: a count under every short reply is noise, and a field that
+ * stops taking text with no warning reads as a broken keyboard.
+ */
+export declare const Composer: import("react").ForwardRefExoticComponent<ComposerProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Composer/index.d.ts

@@ -0,0 +1,3 @@
+import './Composer.css';
+export { COMPOSER_COUNTER_AT, Composer } from './Composer.js';
+export type { ComposerProps } from './Composer.js';

package/dist/Composer/index.js

@@ -0,0 +1,7 @@
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-QSLIN64M.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-FTEJPHBI.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Composer-ABGJIAIR.css

@@ -0,0 +1,88 @@
+/*
+ * A message written in place: the field and its footer strip in one box. The
+ * BOX takes the focus ring, an accent border and a 2px soft halo, so the
+ * field inside draws no border or outline of its own and the footer reads as
+ * part of what is being written.
+ */
+.crewlet-composer {
+  display: grid;
+  overflow: hidden;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-composer:hover {
+  border-color: var(--color-border-strong-hover);
+}
+
+.crewlet-composer:focus-within {
+  border-color: var(--color-brand-accent);
+  box-shadow: 0 0 0 2px var(--color-brand-accent-soft);
+}
+
+.crewlet-composer .crewlet-composer__field {
+  min-height: 68px;
+  max-height: 220px;
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  resize: none;
+}
+
+/* The ring is the box's, above. A transparent outline stays, because forced
+   colors drops the box's shadow and paints an outline in its place. */
+.crewlet-composer .crewlet-composer__field:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+/* Past its cap the field scrolls rather than pushing the page. */
+.crewlet-composer .crewlet-composer__field.is-auto-resize {
+  overflow-y: auto;
+}
+
+.crewlet-composer__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-composer__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-composer__counter {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-composer__spacer {
+  flex: 1;
+}
+
+@media (width < 640px) {
+  .crewlet-composer__hint {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-composer {
+    transition: none;
+  }
+}

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';
-import '../chunk-EUCC37WY.js';
-import '../chunk-BTHX2FS3.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-GOUKOXJK.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-YCTMKKRA.js';
+import '../chunk-TFH6SYWB.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-TEEJSTFG.js';
 import '../chunk-5VNUYO76.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-YCTMKKRA.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-IINFVK3W.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-3CZ7XAVY.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-SMBKXWML.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-JCNUQ3US.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-ZGX2DP7F.js';
-import '../chunk-CVB7O3SZ.js';
-import '../chunk-LSB3EHBW.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-FTEJPHBI.js';
+import '../chunk-GOUKOXJK.js';
+import '../chunk-AV2DXAEL.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-AV2DXAEL.js';
+import '../chunk-OG6CL3EB.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';