@crewlethq/ui 0.55.0 → 0.56.0

package/dist/Composer-JSGTOW3F.css

@@ -0,0 +1,192 @@
+/*
+ * A message written in place: the field and its footer strip in one box. The
+ * BOX takes the focus ring every field in the package draws (see Input.css):
+ * an outline over its boundary, 2px for the keyboard and the hairline for a
+ * pointer, so the field inside draws no border or outline of its own and the
+ * footer reads as part of what is being written. It used to recolour the
+ * border to the accent AND lay a 2px soft halo outside it: two highlights for
+ * one state, and the loudest edge on a page whose field was focused on load.
+ */
+/*
+ * THE FIELD'S EDGE, as every text field draws it: `--color-border-field`, the
+ * step measured to 3:1 against the ground, stepping up to the control boundary
+ * under the pointer. It drew `--color-border-strong`, which is 1.46:1, so the
+ * box a person types in was the faintest edge on the panel.
+ */
+.crewlet-composer {
+  /* The edge's width, named because the nested send button's corner is
+     derived from it (see .crewlet-composer__trailing). */
+  --crewlet-composer-edge: 1px;
+
+  display: grid;
+  overflow: hidden;
+  border: var(--crewlet-composer-edge) solid var(--color-border-field);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-composer:not(.is-disabled):hover {
+  border-color: var(--color-border-control);
+}
+
+/* The field and, in a chat composer, its send button on one row. */
+.crewlet-composer__row {
+  display: flex;
+  align-items: flex-end;
+  min-width: 0;
+}
+
+/* Keyed on the FIELD, not :focus-within: the footer holds the send action,
+   and a reader tabbing onto it is shown that button's ring, not the box's. */
+.crewlet-composer:has(.crewlet-composer__field:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+:where(:root[data-crewlet-focus='pointer']) .crewlet-composer:has(.crewlet-composer__field:focus-visible) {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
+.crewlet-composer .crewlet-composer__field {
+  flex: 1;
+  min-width: 0;
+  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, so the field inside never draws one: left to
+   the textarea's own rule it would be a second ring inside the box's, and in
+   forced colours the box's outline is the one the system repaints. Stated on
+   the field at rest, at a weight the textarea's focus rule cannot outrank. */
+.crewlet-composer .crewlet-composer__field.crewlet-textarea {
+  outline: none;
+}
+
+/*
+ * A CHAT COMPOSER: the field and its send button share one row. The field
+ * starts as one line exactly as tall as the button and its inset (so the
+ * line sits centred beside it), grows to six lines and then scrolls, and the
+ * button stays on the last line.
+ */
+.crewlet-composer--inline .crewlet-composer__field {
+  --crewlet-composer-line: calc(var(--font-line-height-normal) * var(--font-size-compact));
+  --crewlet-composer-row: calc(var(--size-control-md) + var(--spacing-2));
+
+  min-height: var(--crewlet-composer-row);
+  max-height: 140px;
+  padding-block: max(0px, calc((var(--crewlet-composer-row) - var(--crewlet-composer-line)) / 2));
+}
+
+/*
+ * A PLACEHOLDER NEVER GROWS THE FIELD. It is one line of example or one word
+ * of reason ("Offline"); wrapped to a second line it made the composer jump
+ * taller the moment the connection dropped.
+ */
+.crewlet-composer--inline .crewlet-composer__field::placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * THE SEND BUTTON NESTS IN THE BOX'S CORNER: inset by one spacing step, its
+ * radius is the box's less that inset and the box's own edge, so the two
+ * corners run parallel rather than a square sitting in a rounded box.
+ */
+.crewlet-composer__trailing {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1);
+}
+
+.crewlet-composer__trailing .crewlet-icon-btn {
+  border-radius: calc(var(--radius-md) - var(--spacing-1) - var(--crewlet-composer-edge));
+}
+
+/*
+ * WHAT TRAVELS WITH THE MESSAGE, above the field inside the box's edge: a row
+ * of tags that wraps, on the field's own inset so a tag starts where the text
+ * does.
+ */
+.crewlet-composer__attachments {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-2) var(--spacing-3) 0;
+}
+
+/*
+ * DISABLED, AS A FIELD IS: the whole box at the disabled field's 0.6 and the
+ * not-allowed cursor, so it no longer reads as somewhere to type. Faded once:
+ * the field and a disabled send button inside it keep their own opacity at 1,
+ * or the box's fade and theirs would multiply into a control nobody can read.
+ */
+.crewlet-composer.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.crewlet-composer.is-disabled .crewlet-composer__field.is-disabled,
+.crewlet-composer.is-disabled .crewlet-composer__trailing :disabled,
+.crewlet-composer.is-disabled .crewlet-composer__trailing [aria-disabled='true'] {
+  opacity: 1;
+}
+
+/* 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;
+}
+
+/* On a phone the hint goes, and a footer that held only the hint goes with it. */
+@media (width < 640px) {
+  .crewlet-composer__hint,
+  .crewlet-composer__footer[data-hint-only] {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-composer {
+    transition: none;
+  }
+}

package/dist/ConfirmField/index.js

@@ -1,11 +1,11 @@
-export { ConfirmField, confirmMatches } from '../chunk-ZMBPEHYH.js';
+export { ConfirmField, confirmMatches } from '../chunk-4CBGIRVU.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-XANKR3EP.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ConflictNote/index.js

@@ -1,4 +1,5 @@
-export { CONFLICT_NOTE_LABELS, ConflictNote } from '../chunk-UO7JZVCO.js';
-import '../chunk-OG6CL3EB.js';
+export { CONFLICT_NOTE_LABELS, ConflictNote } from '../chunk-HVEDVKXL.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ContrastHelp/index.js

@@ -1,4 +1,4 @@
-export { ContrastHelp } from '../chunk-KIRQZG3G.js';
+export { ContrastHelp } from '../chunk-YCGZK2E4.js';
 import '../chunk-WW7TU6HE.js';
 import '../chunk-KYIAFNU7.js';
 import '../chunk-KHJIEPZV.js';
@@ -6,7 +6,7 @@ import '../chunk-7W3LYIOC.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Copyable/index.js

@@ -1,7 +1,8 @@
-export { CopyButton, Copyable } from '../chunk-7SHAFLEX.js';
+export { CopyButton, Copyable } from '../chunk-ES4HR34Y.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-OG6CL3EB.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataGrid/driving.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Which grid on screen the keyboard drives.
+ *
+ * A grid whose rows are links takes no focus of its own, so an application
+ * binds its row keys (step down, step up, open) on the window and hands them
+ * to a grid through `handleRef`. With two or three grids on one screen (and a
+ * grid inside a peek beside a grid on the page), exactly one of them may take
+ * a key: the one the reader last pointed at, and with no gesture yet, the
+ * first one mounted that has rows. A grid showing its empty state drives
+ * nothing.
+ *
+ * MODULE STATE RATHER THAN A CONTEXT, because the grids that must agree are
+ * often in different subtrees (the page's and the peek's), and a provider
+ * around both would be the application's frame, which knows nothing about
+ * grids. Every grid re-renders when whose keystroke it is changes, through
+ * one subscription.
+ *
+ * The keys themselves stay the application's: it binds them in its own
+ * keymap, gated on `driving`, so they are checked against every other key it
+ * binds rather than registered behind its back.
+ */
+import type { DataGridBand } from './DataGrid.js';
+/** How many rows a grid draws, its bands' rows included, however deeply grouped. */
+export declare function countDataGridRows<T>(rows: readonly T[] | undefined, bands: readonly DataGridBand<T>[] | undefined): number;
+export interface DataGridDriving {
+    /** Whether this grid takes the row keys now. */
+    driving: boolean;
+    /**
+     * Make this grid the one the keys drive: pass it as the grid's
+     * `onPointerDown`, so a pointer gesture on a grid is the reader saying
+     * which one they are in.
+     */
+    claim: () => void;
+}
+/**
+ * Take part in deciding which grid the keyboard drives.
+ *
+ * `drivable` is whether this grid has rows to step through: pass
+ * `countDataGridRows(rows, bands) > 0`. A grid that cannot drive registers
+ * nothing, and one the reader touched and then left takes nothing with it.
+ */
+export declare function useDataGridDriving(drivableNow: boolean): DataGridDriving;
+/**
+ * Whether ANY grid on screen holds the row keys: for a screen that binds the
+ * same keys to something of its own (a record page stepping through the list
+ * it was opened from), which must stand aside while a grid takes them.
+ */
+export declare function useAnyDataGridDriving(): boolean;

package/dist/DataGrid/index.d.ts

@@ -1,3 +1,5 @@
 import './DataGrid.css';
 export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from './DataGrid.js';
+export { countDataGridRows, useAnyDataGridDriving, useDataGridDriving } from './driving.js';
+export type { DataGridDriving } from './driving.js';
 export type { ColumnChoice, ChooserItem, ChooserListProps, ColumnChooserProps, DataGridActivationEvent, DataGridBand, DataGridColumn, DataGridHandle, DataGridLabels, DataGridProps, GridFit, } from './DataGrid.js';

package/dist/DataGrid/index.js

@@ -1,14 +1,15 @@
-export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from '../chunk-5JDHMDMQ.js';
-import '../chunk-LLHO4FJK.js';
+export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-EDNZHW4K.js';
+import '../chunk-NHJQXDHA.js';
 import '../chunk-PPUR46MK.js';
-import '../chunk-RTPQDNW3.js';
-import '../chunk-XANKR3EP.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-RTPQDNW3.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataTable/index.js

@@ -1,19 +1,20 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-W5GM452Z.js';
-import '../chunk-NWGGH2LN.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-JJ3NOBJ6.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
+import '../chunk-QZ4B72FP.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-LLHO4FJK.js';
-import '../chunk-TMM32U7D.js';
-import '../chunk-OMV5W53A.js';
-import '../chunk-XANKR3EP.js';
+import '../chunk-NHJQXDHA.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-TKS7FTTO.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataView/index.js

@@ -1,29 +1,30 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-ZS63CFDO.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-HL4CPLEK.js';
 import '../chunk-DKB73KZI.js';
-import '../chunk-W5GM452Z.js';
-import '../chunk-ZFM5L7M4.js';
-import '../chunk-NWGGH2LN.js';
-import '../chunk-7KHM2FZH.js';
+import '../chunk-JJ3NOBJ6.js';
+import '../chunk-6NJW5KSX.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
+import '../chunk-QZ4B72FP.js';
+import '../chunk-7KHM2FZH.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-NR4CPM4T.js';
 import '../chunk-KHJIEPZV.js';
-import '../chunk-3CZ7XAVY.js';
+import '../chunk-KS7YIJ4S.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-LLHO4FJK.js';
-import '../chunk-TMM32U7D.js';
-import '../chunk-OMV5W53A.js';
+import '../chunk-NHJQXDHA.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-XANKR3EP.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-TKS7FTTO.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DatasetSource/index.js

@@ -1,7 +1,7 @@
-export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-HQJ24WPM.js';
+export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-AZ5BKSGV.js';
 import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-3CZ7XAVY.js';
+import '../chunk-KS7YIJ4S.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-BZFWDIV6.js';

package/dist/DateTimePicker/index.js

@@ -1,10 +1,11 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-ZFM5L7M4.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-6NJW5KSX.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-KHJIEPZV.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DiffList/DiffList.d.ts

@@ -18,12 +18,21 @@ export interface DiffListLabels {
     to: string;
 }
 export declare const DIFF_LIST_LABELS: DiffListLabels;
+/**
+ * How a row stands. `columns` (the default) puts the path in a 200px track
+ * beside its value, each cut with an ellipsis; `stacked` stands each path
+ * over its value and wraps both, so a value is read rather than cut; `auto`
+ * is `columns` until the list itself is narrower than 480px (a phone sheet, a
+ * narrow card), and `stacked` under that.
+ */
+export type DiffListLayout = 'columns' | 'stacked' | 'auto';
 export interface DiffListProps {
     rows: DiffRow[];
+    layout?: DiffListLayout | undefined;
     /** What an empty diff says. Two identical documents are a fact, not a gap. */
     emptyMessage?: ReactNode;
-    labels?: Partial<DiffListLabels>;
-    className?: string;
+    labels?: Partial<DiffListLabels> | undefined;
+    className?: string | undefined;
 }
 /**
  * The difference between two documents, one path per row.
@@ -44,4 +53,4 @@ export interface DiffListProps {
  * configuration document, where an aligned column of characters is the whole
  * point and a proportional face makes two nearly-identical values look alike.
  */
-export declare function DiffList({ rows, emptyMessage, labels: overrides, className }: DiffListProps): import("react").JSX.Element;
+export declare function DiffList({ rows, emptyMessage, layout, labels: overrides, className }: DiffListProps): import("react").JSX.Element;

package/dist/DiffList/index.d.ts

@@ -1,3 +1,3 @@
 import './DiffList.css';
 export { DiffList, DIFF_LIST_LABELS } from './DiffList.js';
-export type { DiffKind, DiffListLabels, DiffListProps, DiffRow } from './DiffList.js';
+export type { DiffKind, DiffListLabels, DiffListLayout, DiffListProps, DiffRow } from './DiffList.js';

package/dist/DiffList/index.js

@@ -1,3 +1,3 @@
-export { DIFF_LIST_LABELS, DiffList } from '../chunk-LFHCXZO5.js';
+export { DIFF_LIST_LABELS, DiffList } from '../chunk-Z3GDMNMU.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DiffList-3EX64AAE.css → DiffList-GE6YBRLJ.css}

@@ -92,3 +92,56 @@
   font-size: var(--font-size-compact);
   color: var(--color-text-tertiary);
 }
+
+/*
+ * STACKED: each path over its value, both wrapping, so a value is read rather
+ * than cut by the 200px path track. `auto` is the same drawing under 480px of
+ * the list's own width, which a window query cannot know: a list in a 420px
+ * drawer on a wide screen is as narrow as one on a phone.
+ */
+.crewlet-diff-list--auto {
+  container: crewlet-diff-list / inline-size;
+}
+
+.crewlet-diff-list--stacked .crewlet-diff-list__row {
+  grid-template-columns: auto minmax(0, 1fr);
+  row-gap: 0;
+}
+
+.crewlet-diff-list--stacked .crewlet-diff-list__value {
+  grid-column: 2;
+}
+
+.crewlet-diff-list--stacked .crewlet-diff-list__path,
+.crewlet-diff-list--stacked .crewlet-diff-list__value,
+.crewlet-diff-list--stacked .crewlet-diff-list__from,
+.crewlet-diff-list--stacked .crewlet-diff-list__to {
+  overflow: visible;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-diff-list--stacked .crewlet-diff-list__value {
+  flex-wrap: wrap;
+}
+
+@container crewlet-diff-list (width < 480px) {
+  .crewlet-diff-list--auto .crewlet-diff-list__row {
+    grid-template-columns: auto minmax(0, 1fr);
+    row-gap: 0;
+  }
+
+  .crewlet-diff-list--auto .crewlet-diff-list__value {
+    grid-column: 2;
+    flex-wrap: wrap;
+  }
+
+  .crewlet-diff-list--auto .crewlet-diff-list__path,
+  .crewlet-diff-list--auto .crewlet-diff-list__value,
+  .crewlet-diff-list--auto .crewlet-diff-list__from,
+  .crewlet-diff-list--auto .crewlet-diff-list__to {
+    overflow: visible;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+}

package/dist/Disclosure/anatomy.d.ts

@@ -23,6 +23,19 @@ export interface DisclosureAnatomyProps {
      */
     actions?: ReactNode;
     disabled?: boolean | undefined;
+    /**
+     * A mark after the chevron and before the title: the state of what the
+     * section holds (a request's spinner, its check). Decoration; the title
+     * says the state in words.
+     */
+    icon?: ReactNode;
+    /**
+     * There is nothing to open yet (a request with no steps so far). The bar is
+     * drawn as words rather than a button, with the chevron's slot kept and
+     * left unpainted, so nothing shifts when the section gains content and the
+     * trigger becomes a button. `true` by default.
+     */
+    expandable?: boolean | undefined;
     headingLevel: DisclosureHeadingLevel;
     triggerId: string;
     panelId: string;
@@ -40,4 +53,4 @@ export interface DisclosureAnatomyProps {
  * item at a time, the other stands alone. Written twice, the two came to
  * disagree about where the actions go, which is the half that matters.
  */
-export declare function DisclosureAnatomy({ open, onToggle, title, meta, count, mono, actions, disabled, headingLevel, triggerId, panelId, triggerClassName, onKeyDown, }: DisclosureAnatomyProps): import("react").JSX.Element;
+export declare function DisclosureAnatomy({ open, onToggle, title, meta, count, mono, actions, disabled, icon, expandable, headingLevel, triggerId, panelId, triggerClassName, onKeyDown, }: DisclosureAnatomyProps): import("react").JSX.Element;

package/dist/Disclosure/index.js

@@ -1,5 +1,5 @@
-export { Disclosure } from '../chunk-OGXHZHRX.js';
-export { DisclosureAnatomy } from '../chunk-FZVJDJFN.js';
+export { Disclosure } from '../chunk-GG4QZWMQ.js';
+export { DisclosureAnatomy } from '../chunk-TFGCNBWP.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{Disclosure-P4FH3C35.css → Disclosure-FVMA4RW2.css}

@@ -103,6 +103,32 @@
   transform: rotate(0deg);
 }
 
+/*
+ * NOTHING TO OPEN YET: the bar is words rather than a button, and the
+ * chevron keeps its slot unpainted, so the mark after it does not move when
+ * the section gains content and the chevron appears.
+ */
+.crewlet-disclosure__chevron--reserved {
+  visibility: hidden;
+}
+
+.crewlet-disclosure__trigger--static {
+  cursor: default;
+}
+
+/* Words, so nothing answers the pointer. */
+.crewlet-disclosure__trigger--static:hover {
+  background: none;
+  color: var(--color-text-secondary);
+}
+
+/* The section's state mark, between the chevron and the title. */
+.crewlet-disclosure__icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
 .crewlet-disclosure__title {
   min-width: 0;
   overflow: hidden;
@@ -163,6 +189,16 @@
   color: var(--color-text-secondary);
 }
 
+/*
+ * CLOSED IS HIDDEN. The panel closes with the `hidden` attribute, and the
+ * browser's own `[hidden] { display: none }` is a user agent rule that any
+ * author `display` outranks: the flex above drew every closed panel open,
+ * under a trigger that said it was collapsed.
+ */
+.crewlet-disclosure__panel[hidden] {
+  display: none;
+}
+
 /* ---- Sizes and variants ------------------------------------------------ */
 
 /*

package/dist/DocTabsEditor/index.js

@@ -1,14 +1,15 @@
-export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-O2KT7HBD.js';
+export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-5OMV75GE.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-TMM32U7D.js';
-import '../chunk-OMV5W53A.js';
-import '../chunk-XANKR3EP.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-TKS7FTTO.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';