@crewlethq/ui 0.84.2 → 0.85.0

package/dist/{ChoiceList-JN4PPNFW.css → ChoiceList-ZQMZTEZX.css}

@@ -6,8 +6,14 @@
  * which is the focus ring's colour.
  */
 .crewlet-choice-list {
-  /* The platform's radio, sized here so a panel can line up with the text beside it. */
-  --crewlet-choice-list-radio-size: 13px;
+  /*
+   * THE COMPACT CONTROL STEP, the box a compact Checkbox draws beside the same
+   * 13px words: a control takes the step of the text it sits beside (16px
+   * beside 14px, 14px beside 13px), and at 13px this radio matched no other
+   * control in the kit, so a list nested under a card's 16px radio, or beside
+   * a compact checkbox, drew a third size.
+   */
+  --crewlet-choice-list-radio-size: 14px;
   /* The step between two answers. Every row's pointer target reaches half of it. */
   --crewlet-choice-list-gap: var(--spacing-1);
   /*
@@ -133,7 +139,8 @@
   box-sizing: border-box;
   width: var(--crewlet-choice-list-radio-size);
   height: var(--crewlet-choice-list-radio-size);
-  margin: 3px 0 0;
+  /* Centred on the label's first line: its 13px in the body's leading. */
+  margin: calc((var(--font-size-compact) * var(--font-line-height-body) - var(--crewlet-choice-list-radio-size)) / 2) 0 0;
   border: 1px solid var(--color-border-control);
   border-radius: 50%;
   background: transparent;
@@ -175,28 +182,37 @@
   overflow-wrap: anywhere;
 }
 
-/* Why a disabled choice cannot be made, after its detail on the same line, in the warning ink. */
+/*
+ * WHY A DISABLED CHOICE CANNOT BE MADE, on a line of its own under the
+ * detail, in the warning ink, as a ChoiceCards card puts it on its own row.
+ * Run on after the detail, it read as the detail's next clause, and in a
+ * narrow column it wrapped wherever the detail happened to end.
+ */
 .crewlet-choice-list__reason {
+  display: block;
   color: var(--color-feedback-warning-ink);
 }
 
-.crewlet-choice-list__detail > .crewlet-choice-list__reason:not(:first-child) {
-  margin-inline-start: var(--spacing-2);
-}
-
-/* A tag says something ABOUT an answer ("Suggested"), so it is set in the
-   tertiary ink: in the accent ink it was a second accent mark on the chosen
-   row, beside the radio and the fill that already say which one is chosen. */
+/* A tag says something ABOUT an answer ("Recommended"), so it is set in a
+   quiet ink: in the accent ink it was a second accent mark on the chosen row,
+   beside the radio and the fill that already say which one is chosen. It is
+   the pill a ChoiceCards card draws its tag in, so one word beside a choice's
+   name reads the same in a list as on a card in the same step, where it was an
+   11px capital label here and a pill there. It stands on the label's line. */
 .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-text-tertiary);
+  padding: 0 var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
   white-space: nowrap;
 }
 
+/* On the selected fill the default edge all but vanishes in light, so the tag takes the strong one, as a chosen card's does. */
+.crewlet-choice-list__row.is-checked .crewlet-choice-list__tag {
+  border-color: var(--color-border-strong);
+}
+
 /* A SELECTED CHOICE'S PANEL is part of the choice: it continues the row's
    fill under it, and its content starts where the label does, not under the
    radio. */

package/dist/CodeBlock/index.js

@@ -1,5 +1,5 @@
-export { CodeBlock } from '../chunk-QSWQJX27.js';
-import '../chunk-T5GBTXNC.js';
+export { CodeBlock } from '../chunk-4ME4J3YY.js';
+import '../chunk-ETNQYT5O.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-DGXZ635L.js';

package/dist/ColorSwatch/index.js

@@ -1,5 +1,5 @@
-export { ColorSwatch } from '../chunk-6FBPFG3C.js';
-import '../chunk-T5GBTXNC.js';
+export { ColorSwatch } from '../chunk-6EZX26BD.js';
+import '../chunk-ETNQYT5O.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-7W3LYIOC.js';

package/dist/ContrastBadge/index.js

@@ -1,6 +1,6 @@
-export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-2ZSCHQOA.js';
-import '../chunk-LBGKLYBY.js';
+export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-WMSXPF7T.js';
 import '../chunk-7W3LYIOC.js';
+import '../chunk-LBGKLYBY.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ContrastHelp/index.js

@@ -1,8 +1,8 @@
-export { ContrastHelp } from '../chunk-WMO722J2.js';
-import '../chunk-2ZSCHQOA.js';
+export { ContrastHelp } from '../chunk-TBQFZV4H.js';
+import '../chunk-WMSXPF7T.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-LBGKLYBY.js';
 import '../chunk-EC6EUIAD.js';
-import '../chunk-7W3LYIOC.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-L72URIHR.js';
 import '../chunk-OMV5W53A.js';

package/dist/Copyable/index.js

@@ -1,4 +1,4 @@
-export { CopyButton, Copyable } from '../chunk-T5GBTXNC.js';
+export { CopyButton, Copyable } from '../chunk-ETNQYT5O.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-DGXZ635L.js';

package/dist/{Copyable-IS3MHMPL.css → Copyable-P5AMRHFX.css}

@@ -78,11 +78,15 @@
 
 /* ---- inline ------------------------------------------------------------ */
 
+/* INLINE TAKES THE ROW'S OWN REGISTER: in a detail row it is one of the
+   row's values, so it is their size and ink, in the mono face. At a fixed
+   12px in the secondary ink, an address was the one value in its list a step
+   smaller and quieter than the values around it. */
 .crewlet-copyable--inline .crewlet-copyable__value {
-  font-size: var(--font-size-xs);
+  font-size: inherit;
   background: transparent;
   padding: 0;
-  color: var(--color-text-secondary);
+  color: inherit;
 }
 
 /* ---- block ------------------------------------------------------------- */
@@ -103,13 +107,23 @@
   padding: var(--spacing-2) var(--spacing-3);
 }
 
+/*
+ * A BLOCK SHOWS ITS VALUE WHOLE, wrapped at any character and with every
+ * space kept: it is the variant for an address a reader must allowlist or a
+ * command they must check before running it. Held to one line, it scrolled
+ * past a phone's width behind an ellipsis, with no scrollbar to say there was
+ * more, and the reader saw "https://example.com/webho…" of the address they
+ * were asked to copy into a vendor's form.
+ */
 .crewlet-copyable--block .crewlet-copyable__value {
   font-size: var(--font-size-compact);
   color: var(--color-text-primary);
   background: transparent;
   padding: 0;
-  white-space: nowrap;
-  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  text-overflow: clip;
   flex: 1;
 }
 

package/dist/DataGrid/index.js

@@ -1,4 +1,4 @@
-export { ChooserList, ColumnChooser, DATA_GRID_ICON_TRACK, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, nextGridSort, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-ABRWL5FJ.js';
+export { ChooserList, ColumnChooser, DATA_GRID_ICON_TRACK, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, nextGridSort, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-L2QRKIL4.js';
 import '../chunk-YQ7Q52XU.js';
 import '../chunk-YJQXESOJ.js';
 import '../chunk-PPUR46MK.js';

package/dist/{DataGrid-Q26F2V5Q.css → DataGrid-SAHEL4SN.css}

@@ -665,6 +665,63 @@ button.crewlet-data-grid__row-link {
   overflow-wrap: anywhere;
 }
 
+/* A VALUE THAT LEADS WITH A PICTURE IS NAMED ON ITS WORDS' LINE. The name
+   stands on the value's first baseline, and a row of a mark beside two lines
+   (a vendor's mark beside a name and its host) reads its baseline off its
+   first item, the picture, whose baseline is its bottom edge: the name stood
+   on the second line. The words after the picture take part in baseline
+   alignment instead, so the row's baseline is theirs; beside a picture no
+   taller than they are, they keep the place they had.
+   ONLY A PICTURE WITH NO WORDS OF ITS OWN: an svg or an img, or a box that
+   holds nothing but one. A monogram avatar or an avatar stack has its
+   initials' baseline already, and its name stood on its line; matched by its
+   role, the shorter words beside it rose to the top of the row, off the
+   picture's centre. */
+:where(.crewlet-data-grid[data-stacked])
+  .crewlet-data-grid__cell
+  > *
+  > :is(svg, img, :has(> :is(svg, img)):not(:has(> :not(svg, img)))):first-child
+  + * {
+  align-self: baseline;
+}
+
+/* THE ROW'S ACTIONS STAND ON ITS FIRST LINE, at its end, as a card's head
+   carries its menu. On a line of their own after every value they sat alone
+   under the names, with nothing beside them to say whose they were. */
+:where(.crewlet-data-grid[data-stacked]:not([data-phone-rows='compact']))
+  .crewlet-data-grid__row:has(> .crewlet-data-grid__cell--action) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  column-gap: var(--spacing-2);
+}
+
+:where(.crewlet-data-grid[data-stacked]:not([data-phone-rows='compact']))
+  .crewlet-data-grid__row:has(> .crewlet-data-grid__cell--action)
+  > .crewlet-data-grid__cell:not(.crewlet-data-grid__cell--action) {
+  grid-column: 1;
+}
+
+/* ONLY THE FIRST LINE SHARES ITS WIDTH WITH THE ACTIONS. Their track is sized
+   to them, and a line held to the other track gave that width up with nothing
+   beside it: every line of a card ended a third of a phone's row short of its
+   edge, and its value wrapped. Every line after the first (a value with
+   nothing in it draws none) spans the row. */
+:where(.crewlet-data-grid[data-stacked]:not([data-phone-rows='compact']))
+  .crewlet-data-grid__row:has(> .crewlet-data-grid__cell--action)
+  > .crewlet-data-grid__cell:not(.crewlet-data-grid__cell--action):not(:empty)
+  ~ .crewlet-data-grid__cell:not(.crewlet-data-grid__cell--action) {
+  grid-column: 1 / -1;
+}
+
+:where(.crewlet-data-grid[data-stacked]:not([data-phone-rows='compact']))
+  .crewlet-data-grid__row
+  > .crewlet-data-grid__cell--action {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: center;
+}
+
 /* ---- THE COMPACT ROW (`phoneRows="compact"`) ---------------------------
    TWO LINES, NO LABELS: what the row is, then its marks. One flex run that
    breaks once: the lead cells first, a zero-height full-width `::after`

package/dist/DeepWorkCard/index.js

@@ -1,5 +1,5 @@
-export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-CV2LU2T2.js';
-import '../chunk-RJWO2PC5.js';
+export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-35CKF77R.js';
+import '../chunk-TMML7BHT.js';
 import '../chunk-ZWCK4N4L.js';
 import '../chunk-RQFRRPV6.js';
 import '../chunk-FLW5U7YS.js';
@@ -7,7 +7,7 @@ import '../chunk-LBGKLYBY.js';
 import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-LVJGN5II.js';
+import '../chunk-NAHA62WD.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-ULYHDP7U.js';

package/dist/Disclosure/Disclosure.d.ts

@@ -35,6 +35,15 @@ export interface DisclosureProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
     lazy?: boolean | undefined;
     variant?: DisclosureVariant | undefined;
     size?: DisclosureSize | undefined;
+    /**
+     * Its chevron and its panel start on the line its box starts on: the
+     * trigger's inset is taken back at the start, so only its hover ground and
+     * ring reach past the line, and the panel takes no inset of its own. For a
+     * section opened under a line of text (a request's arguments under the
+     * sentence that asks for it), whose chevron and content then stand on the
+     * words' own edge, as a flush Button does.
+     */
+    flush?: boolean | undefined;
     /**
      * The heading the trigger is wrapped in. Defaults to the level the
      * surrounding surface declares, so the same section is an `h3` on a page
@@ -53,4 +62,4 @@ export interface DisclosureProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
  * controls outside its summary. Two expanders that behave the same and look
  * different is the specific thing a component library exists to stop.
  */
-export declare function Disclosure({ title, meta, count, mono, actions, open: controlledOpen, defaultOpen, onOpenChange, lazy, variant, size, headingLevel, className, children, ...rest }: DisclosureProps): import("react").JSX.Element;
+export declare function Disclosure({ title, meta, count, mono, actions, open: controlledOpen, defaultOpen, onOpenChange, lazy, variant, size, flush, headingLevel, className, children, ...rest }: DisclosureProps): import("react").JSX.Element;

package/dist/Disclosure/index.js

@@ -1,4 +1,4 @@
-export { Disclosure } from '../chunk-LVJGN5II.js';
+export { Disclosure } from '../chunk-NAHA62WD.js';
 export { DisclosureAnatomy } from '../chunk-ULYHDP7U.js';
 import '../chunk-D2GT3CR4.js';
 import '../chunk-PQADV6P6.js';

package/dist/{Disclosure-D727FN5X.css → Disclosure-RJSKKO7Z.css}

@@ -217,6 +217,26 @@
   padding: var(--spacing-1) var(--spacing-2);
 }
 
+/*
+ * FLUSH: the chevron and the panel start on the line the words around the
+ * section start on. The trigger's start inset is taken back (its hover ground
+ * and its inset ring reach into the gutter instead, as a flush Button's do),
+ * and the panel keeps no inset of either side. Inset, a section opened under
+ * a sentence put its chevron and its content a step in from that sentence.
+ */
+.crewlet-disclosure--flush .crewlet-disclosure__trigger {
+  margin-inline-start: calc(-1 * var(--spacing-2));
+  width: calc(100% + var(--spacing-2));
+}
+
+.crewlet-disclosure--flush .crewlet-disclosure__bar > .crewlet-disclosure__trigger {
+  width: auto;
+}
+
+.crewlet-disclosure--flush .crewlet-disclosure__panel {
+  padding-inline: 0;
+}
+
 /*
  * An aside: what was considered, not what was decided. The rule down its edge
  * is what lets a reader skip the block by its shape.

package/dist/LogoSlot/index.js

@@ -1,8 +1,8 @@
-export { LogoSlot, LogoSlotGroup } from '../chunk-6SFDL4QH.js';
+export { LogoSlot, LogoSlotGroup } from '../chunk-P3LNA6G4.js';
 import '../chunk-KQWJWTED.js';
-import '../chunk-2ZSCHQOA.js';
-import '../chunk-LBGKLYBY.js';
+import '../chunk-WMSXPF7T.js';
 import '../chunk-7W3LYIOC.js';
+import '../chunk-LBGKLYBY.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';

package/dist/MarkdownEditor/index.js

@@ -1,6 +1,6 @@
 export { MARKDOWN_FORMATS, MARKDOWN_TEXT_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-TQKQRS2J.js';
 import '../chunk-NXFTCPF6.js';
-import '../chunk-36WK24AI.js';
+import '../chunk-EVM6GYZ2.js';
 import '../chunk-AZYE7NR4.js';
 import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';

package/dist/MemberPicker/MemberPicker.d.ts

@@ -0,0 +1,86 @@
+import { type ReactNode } from 'react';
+/** One member a group holds: an agent, a person. */
+export interface MemberPickerMember {
+    /** Stable identity, and what the value names. */
+    key: string;
+    /** The member's name: its checkbox's name. */
+    name: string;
+    /** One quiet line under the name: what it does, its role. */
+    detail?: ReactNode;
+    /** Its face, decorative beside the name: an avatar. */
+    avatar?: ReactNode;
+}
+/** A group of members granted as one: a team, whose grant reaches members who join it later. */
+export interface MemberPickerGroup {
+    key: string;
+    /** The group's name: its checkbox's name. */
+    label: string;
+    members: readonly MemberPickerMember[];
+}
+/**
+ * What is chosen: whole groups, members on their own, and members left out of
+ * a chosen group. A member is in when its group is chosen and it is not left
+ * out, or when it is chosen on its own.
+ */
+export interface MemberPickerValue {
+    groups: readonly string[];
+    members: readonly string[];
+    except: readonly string[];
+}
+export interface MemberPickerLabels {
+    /** Under a chosen group's name. */
+    later: string;
+    /** A member's mark while its group reaches it: "Through Product". */
+    through: (group: string) => string;
+    /** A member's mark once left out of its chosen group. */
+    leftOut: string;
+    /** The live count: "4 of 6 agents". */
+    summary: (chosen: number, total: number) => string;
+    /** A group's member count: "6 agents". */
+    count: (n: number) => string;
+    /** The expand control's name: "Show the agents in Product". */
+    expand: (group: string) => string;
+}
+export declare const MEMBER_PICKER_LABELS: MemberPickerLabels;
+export interface MemberPickerProps {
+    /** Names the picker for a screen reader: "Who gets Sentry". */
+    label: string;
+    groups: readonly MemberPickerGroup[];
+    /** Members in no group, listed after the groups. */
+    ungrouped?: readonly MemberPickerMember[] | undefined;
+    value: MemberPickerValue;
+    onChange: (value: MemberPickerValue) => void;
+    /** Groups open at first; every group with a member chosen on its own or left out opens too. */
+    defaultOpen?: readonly string[] | undefined;
+    labels?: Partial<MemberPickerLabels> | undefined;
+    className?: string | undefined;
+}
+/** Every member the value reaches, each once. */
+export declare function chosenMembers(groups: readonly MemberPickerGroup[], ungrouped: readonly MemberPickerMember[], value: MemberPickerValue): Set<string>;
+/**
+ * Who gets something, as one list: each group a row with a three-state box,
+ * its member count and, once chosen, that it reaches members who join later;
+ * each group opens to its members, every member a row with its face, its name
+ * and one quiet line. A member a chosen group reaches says so ("Through
+ * Product"), and unticking it leaves it out of that group's grant rather than
+ * dropping the group; a member of an unchosen group is chosen on its own. The
+ * count of everyone reached stays at the top as the choice moves.
+ *
+ * GROUP FIRST, MEMBERS AS OVERRIDES, because a group's grant is the one that
+ * survives the organization changing: it reaches whoever joins, where a list
+ * of names reaches only the names. So choosing a group clears the overrides
+ * inside it, and unchoosing it drops them too, leaving no stale exception.
+ *
+ * A GROUP'S BOX SAYS WHETHER THE GROUP ITSELF IS CHOSEN: ticked when it is
+ * and it reaches every member, mixed when it is chosen with members left out,
+ * or when only some of its members are chosen on their own (even all of them,
+ * since a member who joins later would not be), and empty when nobody in it
+ * is reached. Ticking a mixed group chooses it whole.
+ *
+ * NATIVE CHECKBOXES, a group's partly chosen state set as the DOM's own
+ * `indeterminate`, so a screen reader says "mixed" and Space toggles as the
+ * platform does. The open control is the kit's IconButton with
+ * `aria-expanded`. Ids come from positions, never keys, since a key may hold
+ * a space and an id reference list splits on whitespace.
+ */
+export declare function MemberPicker({ label, groups, ungrouped, value, onChange, defaultOpen, labels: overrides, className, }: MemberPickerProps): import("react").JSX.Element;

package/dist/MemberPicker/index.d.ts

@@ -0,0 +1,3 @@
+import './MemberPicker.css';
+export { MemberPicker, MEMBER_PICKER_LABELS, chosenMembers } from './MemberPicker.js';
+export type { MemberPickerGroup, MemberPickerLabels, MemberPickerMember, MemberPickerProps, MemberPickerValue, } from './MemberPicker.js';

package/dist/MemberPicker/index.js

@@ -0,0 +1,11 @@
+export { MEMBER_PICKER_LABELS, MemberPicker, chosenMembers } from '../chunk-KA4RBKQV.js';
+import '../chunk-YQ7Q52XU.js';
+import '../chunk-O7N6W52M.js';
+import '../chunk-PGCLHYVP.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/MemberPicker-ZD35VEK6.css

@@ -0,0 +1,162 @@
+/*
+ * Who gets something, as one list: a group row with its box, its name and
+ * its count, opening to its members, each a row of face, name and one quiet
+ * line. Rows stand at the kit's compact list height; the only colour is the
+ * box's own accent and a left-out member's quieter ink.
+ *
+ * A LIST'S TYPE, NOT A FORM'S: names in the 13px every list and table row
+ * sets a name in, at the medium weight a group's name takes, and every box the
+ * compact Checkbox's (14px beside 13px words). At the body's 14px, with a
+ * 16px box over 14px ones, it read a step larger than every list around it.
+ */
+.crewlet-member-picker {
+  display: grid;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-member-picker__summary {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-member-picker__list,
+.crewlet-member-picker__members {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-member-picker__list {
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.crewlet-member-picker__group + .crewlet-member-picker__group {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-member-picker__group-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-1);
+}
+
+/* The open control is the kit's small ghost IconButton; only its chevron
+   turns here, a quarter turn once the group is open. */
+.crewlet-member-picker__toggle svg {
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-member-picker__group.is-open .crewlet-member-picker__toggle svg {
+  transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-member-picker__toggle svg {
+    transition: none;
+  }
+}
+
+.crewlet-member-picker__count {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.crewlet-member-picker__members {
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-member-picker__member {
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-control-lg);
+  /* Each member's box under its group's, past the open control and its gap. */
+  padding: var(--spacing-1) var(--spacing-3) var(--spacing-1) calc(var(--spacing-1) + var(--size-control-sm) + var(--spacing-2));
+}
+
+/* A MEMBER'S BOX STANDS UNDER ITS GROUP'S. The bare Checkbox centres its box
+   on the square the pointer floor allows, which set the box half the
+   difference in from the row's edge, a few pixels right of the group's box
+   above it. That inset is taken back, and the pointer square reaches into
+   the row's padding instead. */
+.crewlet-member-picker__members:not(.is-ungrouped) .crewlet-checkbox--bare {
+  margin-inline-start: calc((var(--crewlet-checkbox-size) - var(--size-target-min)) / 2);
+}
+
+.crewlet-member-picker__members.is-ungrouped {
+  border-top: 0;
+  background: transparent;
+}
+
+.crewlet-member-picker__members.is-ungrouped .crewlet-member-picker__member {
+  padding-inline-start: var(--spacing-3);
+}
+
+.crewlet-member-picker__avatar {
+  display: inline-flex;
+  flex: none;
+}
+
+/* The name and its line label the member's box, so they take the pointer a
+   Checkbox's own words take. */
+.crewlet-member-picker__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  cursor: pointer;
+}
+
+.crewlet-member-picker__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-compact);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-member-picker__detail {
+  overflow: hidden;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-member-picker__mark {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+.crewlet-member-picker__member.is-left-out .crewlet-member-picker__name,
+.crewlet-member-picker__mark.is-left-out {
+  color: var(--color-text-tertiary);
+}
+
+@media (width < 480px) {
+  .crewlet-member-picker__member {
+    grid-template-columns: auto auto minmax(0, 1fr);
+    padding-inline-start: var(--spacing-3);
+  }
+
+  .crewlet-member-picker__mark {
+    grid-column: 3;
+  }
+}
+
+/* A group's name is the row's title: the medium weight, at the list's 13px. */
+.crewlet-member-picker__group-row .crewlet-checkbox__label {
+  font-weight: var(--font-weight-medium);
+}

package/dist/MergeConflicts/index.js

@@ -1,5 +1,5 @@
 export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-C42XW5YP.js';
-import '../chunk-36WK24AI.js';
+import '../chunk-EVM6GYZ2.js';
 import '../chunk-AZYE7NR4.js';
 import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';

package/dist/ProposalCard/index.js

@@ -1,6 +1,6 @@
-export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, PROPOSAL_TONES, ProposalCard } from '../chunk-P7HMY3BQ.js';
+export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, PROPOSAL_TONES, ProposalCard } from '../chunk-M33DABTW.js';
 import '../chunk-ZWCK4N4L.js';
-import '../chunk-AOJ6ZA77.js';
+import '../chunk-3MFRTZH6.js';
 import '../chunk-LR4IWUWQ.js';
 import '../chunk-FLW5U7YS.js';
 import '../chunk-LBGKLYBY.js';
@@ -8,7 +8,7 @@ import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-YQ7Q52XU.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-LVJGN5II.js';
+import '../chunk-NAHA62WD.js';
 import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-DGXZ635L.js';

package/dist/RunChip/index.js

@@ -1,7 +1,7 @@
-export { RUN_STATES, RunChip } from '../chunk-X7VZQKIW.js';
-import '../chunk-RJWO2PC5.js';
+export { RUN_STATES, RunChip } from '../chunk-AQ7ZV3CH.js';
+import '../chunk-TMML7BHT.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-LVJGN5II.js';
+import '../chunk-NAHA62WD.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-ULYHDP7U.js';
 import '../chunk-D2GT3CR4.js';

package/dist/SegmentedControl/index.js

@@ -1,4 +1,4 @@
-import '../chunk-36WK24AI.js';
+import '../chunk-EVM6GYZ2.js';
 export { SegmentedControl } from '../chunk-AZYE7NR4.js';
 import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';