@crewlethq/ui 0.44.0 → 0.46.0

package/dist/DataView/index.js

@@ -1,26 +1,28 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-AACPFUZW.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-KOJKX3U6.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-UFXLNC2N.js';
-import '../chunk-GI3S6RMM.js';
+import '../chunk-PWZT6CZY.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-FYINAYAJ.js';
+import '../chunk-6AKG2VLR.js';
 import '../chunk-7KHM2FZH.js';
+import '../chunk-NR4CPM4T.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-NR4CPM4T.js';
-import '../chunk-EY7LACIR.js';
+import '../chunk-RWET7W22.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-ZI5G5RS7.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-PCI7ZJ6Z.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/DateTimePicker/index.js

@@ -2,8 +2,8 @@ export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-UFXLNC
 import '../chunk-KHJIEPZV.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/DocTabsEditor/index.js

@@ -1,12 +1,13 @@
-export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-W53CWWX3.js';
+export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-RCKRJXFV.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-ZI5G5RS7.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
-import '../chunk-PCI7ZJ6Z.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/EditingStatus/index.js

@@ -1,2 +1,3 @@
-export { EditingStatus } from '../chunk-TC7DJTXI.js';
+export { EditingStatus } from '../chunk-MULOZYHL.js';
+import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Editor-FXO2JVWK.js → Editor-6FXHMW64.js}

@@ -2,12 +2,14 @@ import { richEditorLabels } from './chunk-CSQTDGTS.js';
 import { schema, readMarkdown, writeMarkdown } from './chunk-QH6VYJ3X.js';
 import { safeHref, MARKDOWN_CALLOUT_TONES } from './chunk-BAKPMH3S.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
-import { FormField, Input } from './chunk-ZI5G5RS7.js';
+import { FormField, Input } from './chunk-Z734SV4E.js';
+import './chunk-XCUUI7E7.js';
 import './chunk-PQADV6P6.js';
-import { Menu } from './chunk-PCI7ZJ6Z.js';
+import './chunk-RSAQOKH3.js';
+import { Menu } from './chunk-TMM32U7D.js';
 import { placePopup, viewportBounds } from './chunk-OMV5W53A.js';
-import { usePopupLayer } from './chunk-H5XTJ7GJ.js';
 import { Button } from './chunk-OG6CL3EB.js';
+import { usePopupLayer } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import './chunk-NUZHC6MM.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/EmptyState/EmptyState.d.ts

@@ -1,6 +1,13 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 import { type HeadingLevel } from '../utils/headingLevel.js';
-export type EmptyStateSize = 'default' | 'compact';
+/**
+ * `default` is a screen's, `compact` a panel's, both centred under a glyph.
+ * `inline` is a field's or a section's: one left-aligned row on a dashed
+ * hairline, the sentence beside its one action and no glyph, for a part of a
+ * page that is empty while the rest of it is not (a mission nobody has
+ * written, a list with nothing in it yet).
+ */
+export type EmptyStateSize = 'default' | 'compact' | 'inline';
 export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /** A glyph, drawn large and quiet. Replaced by `illustration` when both are given. */
     icon?: ReactNode;
@@ -17,7 +24,7 @@ export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
     description: ReactNode;
     /** What would fill it, as a control: "Create the first seat", "Connect Slack". */
     action?: ReactNode;
-    /** `compact` is for an empty state inside a panel rather than a screen. */
+    /** How much room it takes; see [EmptyStateSize]. */
     size?: EmptyStateSize | undefined;
     /**
      * The heading level of the title. Taken from where the component finds

package/dist/EmptyState/index.js

@@ -1,3 +1,3 @@
-export { EmptyState } from '../chunk-RA2ULG6H.js';
+export { EmptyState } from '../chunk-PPUR46MK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{EmptyState-C6HRBGT7.css → EmptyState-7L4UAQBX.css}

@@ -71,3 +71,37 @@
 .crewlet-empty-state__action {
   margin-top: var(--spacing-2);
 }
+
+/*
+ * INLINE: one left-aligned row on a dashed hairline, the sentence beside its
+ * action. The dash says "nothing here yet" without a glyph, and the box keeps
+ * the place the content will take, so the page does not move when it is
+ * filled. Narrow, the action wraps under the words.
+ */
+.crewlet-empty-state--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--spacing-2) var(--spacing-4);
+  padding: var(--spacing-3) var(--spacing-4);
+  border: 1px dashed var(--color-border-default);
+  border-radius: var(--radius-md);
+  text-align: start;
+}
+
+.crewlet-empty-state__text {
+  display: flex;
+  flex: 1 1 16rem;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-empty-state--inline .crewlet-empty-state__description {
+  max-width: var(--size-measure);
+}
+
+.crewlet-empty-state--inline .crewlet-empty-state__action {
+  flex: none;
+  margin-top: 0;
+}

package/dist/FollowBanner/index.js

@@ -1,8 +1,8 @@
-export { FollowBanner } from '../chunk-OED6LUWE.js';
+export { FollowBanner } from '../chunk-4A4QG6UC.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/HuePicker/index.js

@@ -1,16 +1,16 @@
 import '../chunk-FFMCMSJB.js';
-export { HuePicker, HueSwatch } from '../chunk-QOP7QYUW.js';
+export { HuePicker, HueSwatch } from '../chunk-34RMTXDZ.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-BF5WV7NM.js';
-import '../chunk-KA75QPFM.js';
+import '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-PCI7ZJ6Z.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/InlineEditor/InlineEditor.d.ts

@@ -0,0 +1,86 @@
+import { type FormHTMLAttributes, type ReactNode } from 'react';
+import { type EditingStatusLabels } from '../EditingStatus/index.js';
+/** Every string the editor's bar draws. */
+export interface InlineEditorLabels {
+    save: string;
+    cancel: string;
+    /** Why Save does nothing while nothing has changed. */
+    unchanged: string;
+    /** Why Save does nothing while a field refuses its value. */
+    invalid: string;
+    /** Why Cancel does nothing while the save is in flight. */
+    saving: string;
+    /** The words after the shortcut's keycap: "to save". */
+    shortcut: string;
+    status?: Partial<EditingStatusLabels> | undefined;
+}
+export declare const INLINE_EDITOR_LABELS: InlineEditorLabels;
+export interface InlineEditorProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'children' | 'aria-label'> {
+    /** The form's name, for a reader moving by landmark: "Edit the mission". */
+    label: string;
+    /** The fields. Their values, and what a save sends, are the caller's. */
+    children: ReactNode;
+    /** Save was asked for: the button, or Mod+Enter from inside the form. Not called while Save is unavailable. */
+    onSave: () => void;
+    /** Cancel was asked for: the button, or Escape from inside the form. Not called while saving. */
+    onCancel: () => void;
+    /** Anything differs from what was opened. Save waits for it, and the bar says so. */
+    dirty: boolean;
+    /** A save is in flight: Save spins, and neither Save nor Cancel can be pressed again. */
+    saving?: boolean | undefined;
+    /** A field refuses its value. Save waits for it. */
+    invalid?: boolean | undefined;
+    /** Why the last save failed, said as an alert above the bar. */
+    error?: ReactNode;
+    /** A note above the bar that is not an error: a `ConflictNote` once the record moved on. */
+    notice?: ReactNode;
+    /**
+     * Puts the focus in the first field when the editor opens, at the end of
+     * what it holds. ON by default, because an editor is opened by a press of
+     * Edit, and the reader's next keystroke is meant for the field, not for the
+     * button that has gone. Named as `ListInput`'s is.
+     */
+    focusOnMount?: boolean | undefined;
+    /** Draws the Mod+Enter keycap beside Save. ON by default. */
+    shortcutHint?: boolean | undefined;
+    /** Controls at the start of the bar, after the status: a "Reset to the default" link. */
+    secondaryActions?: ReactNode;
+    labels?: Partial<InlineEditorLabels> | undefined;
+}
+/**
+ * One record edited where it is read: its fields, then a bar with the editing
+ * status at its start and Cancel and Save at its end.
+ *
+ * WHY IT EXISTS. A page that shows a mission, a list of policies or a goal and
+ * lets the reader change it has the same five decisions to make every time,
+ * and each one made differently is a page that behaves unlike its neighbour:
+ * which keys save and cancel, whether a Save with nothing to save can be
+ * pressed, where the failure is said, where the focus goes when the form
+ * opens, and what the reader is told while the save is in flight. This is
+ * those five, once.
+ *
+ * IT OWNS NO STATE. The draft, the save call, what happens on a conflict and
+ * where the focus goes once the editor closes are the caller's: the record is
+ * the caller's, and so is the button that opened the editor, which is the one
+ * place the focus belongs when it closes.
+ *
+ * THE KEYS. Mod+Enter saves from any field and Escape cancels, each only
+ * once nothing inside has claimed the key first (an open menu's Escape closes
+ * the menu, not the editor) and never in the middle of an input method's
+ * composition. Enter alone belongs to the field: a newline in a paragraph,
+ * the next item in a list, and NOTHING in a single-line field. A browser
+ * submits a form on Enter in a one-line input, and here that would save a
+ * record mid-edit from the key a writer presses to finish a word, so the
+ * editor refuses that implicit submission: saving is always the one gesture.
+ *
+ * CANCEL DISCARDS AT ONCE. Escape and Cancel call `onCancel` whatever the
+ * draft holds, because whether a draft is worth a question is the caller's
+ * call. A caller holding a draft worth keeping asks first in `onCancel` while
+ * `dirty` ("Discard your changes to the mission?"), and closes only on yes.
+ *
+ * SAVE IS NEVER A DEAD BUTTON. While nothing has changed, while a field
+ * refuses its value and while a save is in flight it stays reachable and says
+ * why it does nothing, rather than being natively disabled, which takes the
+ * focus away from the reader who just pressed it.
+ */
+export declare function InlineEditor({ label, children, onSave, onCancel, dirty, saving, invalid, error, notice, focusOnMount, shortcutHint, secondaryActions, labels: overrides, className, onKeyDown, ...rest }: InlineEditorProps): import("react").JSX.Element;

package/dist/InlineEditor/index.d.ts

@@ -0,0 +1,3 @@
+import './InlineEditor.css';
+export { INLINE_EDITOR_LABELS, InlineEditor } from './InlineEditor.js';
+export type { InlineEditorLabels, InlineEditorProps } from './InlineEditor.js';

package/dist/InlineEditor/index.js

@@ -0,0 +1,9 @@
+export { INLINE_EDITOR_LABELS, InlineEditor } from '../chunk-7P336RA5.js';
+import '../chunk-MULOZYHL.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-NUZHC6MM.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/InlineEditor-W55DDKML.css

@@ -0,0 +1,72 @@
+/*
+ * InlineEditor: one record's fields, then a bar. It draws no surface of its
+ * own, so it reads as the card or the section it is opened in rather than as
+ * a form dropped on top of it.
+ */
+
+.crewlet-inline-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  margin: 0;
+}
+
+.crewlet-inline-editor__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  min-width: 0;
+}
+
+.crewlet-inline-editor__error {
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-feedback-danger-ink);
+}
+
+/*
+ * THE BAR: the status at its start, the two controls at its end, on one line
+ * where there is room. On a narrow card it wraps whole, the controls keeping
+ * their order at the end, so Save is never the control that falls off.
+ */
+.crewlet-inline-editor__bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2) var(--spacing-3);
+  padding-top: var(--spacing-3);
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: var(--color-border-default);
+}
+
+.crewlet-inline-editor__start,
+.crewlet-inline-editor__end {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-inline-editor__end {
+  margin-inline-start: auto;
+}
+
+.crewlet-inline-editor__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+/* A touch screen has no Mod+Enter to press: the hint goes where no keyboard
+   is the main way in. */
+@media (hover: none) and (pointer: coarse) {
+  .crewlet-inline-editor__hint {
+    display: none;
+  }
+}

package/dist/Input/FormField.d.ts

@@ -1,4 +1,13 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+import { type CharacterCountLabels } from '../CharacterCount/index.js';
+/** A field's length limit, and how much of it the value uses. */
+export interface FormFieldLimit {
+    /** How many characters the value holds. `countCharacters` counts them as a reader would. */
+    length: number;
+    /** The most it may hold. */
+    max: number;
+    labels?: Partial<CharacterCountLabels> | undefined;
+}
 /** What a field's control needs to know about the row it sits in. */
 export interface FormFieldRender {
     /** The id the label points at. Put it on the control. */
@@ -28,6 +37,14 @@ export interface FormFieldProps extends Omit<HTMLAttributes<HTMLElement>, 'child
     helperOnFocus?: boolean | undefined;
     /** Why the last value was refused. */
     error?: ReactNode;
+    /**
+     * A length limit: the count is drawn at the end of the help line ("120 /
+     * 500"), joined into the description after the help and before the error,
+     * and a value past it marks the field invalid. A SOFT limit, never a
+     * `maxLength`: what was typed or pasted stays, and the count says by how
+     * much it is over. See `CharacterCount`.
+     */
+    limit?: FormFieldLimit | undefined;
     /** A control rendered beside the label, such as an Add button. */
     labelAction?: ReactNode;
     /**
@@ -65,4 +82,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, helperOnFocus, error, labelAction, as, describedBy, htmlFor, className, children, ...rest }: FormFieldProps) => import("react").JSX.Element;
+export declare const FormField: ({ label, required, optional, requiredNews, helper, helperOnFocus, error, limit, labelAction, as, describedBy, htmlFor, className, children, ...rest }: FormFieldProps) => import("react").JSX.Element;

package/dist/Input/Textarea.d.ts

@@ -12,5 +12,21 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
      * hinting that Enter adds the value. It does not take the pointer.
      */
     trailing?: ReactNode;
+    /**
+     * A value of ONE LINE that wraps so it can be read whole: a mission, a
+     * policy, a title with a long tail. A one-line `Input` scrolls a long value
+     * sideways, so a 160-character mission shows only its last words while it
+     * is being edited; this field wraps it instead, and still holds one line.
+     * Enter inserts no line break (the key stays the surrounding form's or
+     * list's to act on), and a line break pasted or dropped in is folded into
+     * a space, and said so (`foldedMessage`), since the value is then not
+     * quite what was pasted. `aria-multiline` is false, so it is announced as
+     * the one-line field it is. Pair it with `autoResize` and `rows={1}`.
+     */
+    singleLine?: boolean;
+    /** Said through the page's `Announcer` when a `singleLine` field folds line breaks it was given. */
+    foldedMessage?: string;
 }
+/** A value with its line breaks, and the space around each, folded into one space. */
+export declare function foldLineBreaks(text: string): string;
 export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Input/index.d.ts

@@ -1,12 +1,12 @@
 import './Input.css';
 export { Input, InputAffix } from './Input.js';
 export type { InputAffixProps, InputAppearance, InputProps, InputSize, InputWidth } from './Input.js';
-export { Textarea } from './Textarea.js';
+export { Textarea, foldLineBreaks } from './Textarea.js';
 export type { TextareaProps } from './Textarea.js';
 export { Label } from './Label.js';
 export type { LabelProps } from './Label.js';
 export { FormField } from './FormField.js';
-export type { FormFieldProps, FormFieldRender } from './FormField.js';
+export type { FormFieldLimit, FormFieldProps, FormFieldRender } from './FormField.js';
 export { FormRow } from './FormRow.js';
 export type { FormRowProps } from './FormRow.js';
 export { FormSection } from './FormSection.js';

package/dist/Input/index.js

@@ -1,5 +1,8 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-ZI5G5RS7.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea, foldLineBreaks } from '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{Input-OQZBCRX5.css → Input-VDSV7VWJ.css}

@@ -561,6 +561,25 @@
   color: var(--color-text-tertiary);
 }
 
+/*
+ * THE HELP LINE WITH A COUNT AT ITS END (`limit`). The help wraps in the room
+ * the count leaves, and the count keeps its width and its line: it is the
+ * figure a writer glances at, so it does not move as the sentence beside it
+ * wraps.
+ */
+.crewlet-form-field__meta {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+}
+
+.crewlet-form-field__meta > .crewlet-form-field__helper,
+.crewlet-form-field__meta-spacer {
+  flex: 1;
+  min-width: 0;
+}
+
 /* 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. */

package/dist/LinkInterstitial/index.js

@@ -1,11 +1,11 @@
-export { LinkInterstitial, openExternal } from '../chunk-UAGDFEBG.js';
-import '../chunk-FYINAYAJ.js';
+export { LinkInterstitial, openExternal } from '../chunk-DY4DQ7EB.js';
 import '../chunk-5CLW2CXT.js';
+import '../chunk-6AKG2VLR.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/List/List.d.ts

@@ -32,6 +32,21 @@ export interface ListProps extends HTMLAttributes<HTMLElement> {
      * row measures itself against the same track list.
      */
     template?: string | undefined;
+    /**
+     * How much room a row takes. `comfortable` (the default) is the list as it
+     * always was. `compact` sets the rows a small step apart in the body's size
+     * at its normal leading, for a card that has to hold a long list on one
+     * screen: eight standing policies of two lines each, on a page that also
+     * shows the mission and the vision above them.
+     */
+    density?: 'comfortable' | 'compact' | undefined;
+    /**
+     * Holds each row's words to a reading measure while the row itself, and the
+     * rule under it, still spans the list: `normal` is prose's (68ch), `wide`
+     * is a list of statements read one at a time (80ch), a company's policies.
+     * Unset, the words take the row's width, as a feed's do.
+     */
+    measure?: 'normal' | 'wide' | undefined;
 }
 /**
  * The non-tabular list: an activity feed, a set of search results, a
@@ -43,7 +58,7 @@ export interface ListProps extends HTMLAttributes<HTMLElement> {
  * means nothing. What a feed does want is alignment, which `template` gives it
  * without the promise.
  */
-export declare function List({ variant, template, className, style, children, ...rest }: ListProps): import("react").JSX.Element;
+export declare function List({ variant, template, density, measure, className, style, children, ...rest }: ListProps): import("react").JSX.Element;
 export declare namespace List {
     var Item: typeof ListItem;
 }

package/dist/List/index.js

@@ -1,3 +1,3 @@
-export { List, ListItem } from '../chunk-NZWX27J7.js';
+export { List, ListItem } from '../chunk-TDQ262TB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{List-YHLIZFK4.css → List-XY445TKY.css}

@@ -166,6 +166,37 @@
   color: var(--color-text-tertiary);
 }
 
+/*
+ * COMPACT: a row a small step tall, in the body's size at its normal leading,
+ * so a list of statements that each run to two lines still stands on one
+ * screen. Only the rhythm changes; the number column, the rule between rows
+ * and the inset a card gives them stay where they were.
+ */
+.crewlet-list--compact .crewlet-list__row {
+  min-height: 0;
+  padding-block: var(--spacing-1);
+}
+
+.crewlet-list--compact.crewlet-list--numbered-divided .crewlet-list__row {
+  padding-block: var(--spacing-2);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  text-wrap: pretty;
+}
+
+/*
+ * THE WORDS AT A READING MEASURE (`measure`), while the row and its rule
+ * still span the list. In a card the width of the page a policy otherwise
+ * runs to some 150 characters a line. A maximum, never a width.
+ */
+.crewlet-list--measure-normal .crewlet-list__content {
+  max-inline-size: var(--size-measure);
+}
+
+.crewlet-list--measure-wide .crewlet-list__content {
+  max-inline-size: var(--size-measure-wide);
+}
+
 /* ---- States ------------------------------------------------------------ */
 
 /*