@crewlethq/ui 0.81.1 → 0.82.0

package/dist/Select/index.js

@@ -1,7 +1,7 @@
-export { Select } from '../chunk-VK45YJLH.js';
-import '../chunk-7KHM2FZH.js';
+export { Select } from '../chunk-3IWZVEXA.js';
+import '../chunk-YGRTX67J.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SelectionBar/index.js

@@ -1,10 +1,10 @@
-export { SelectionBar } from '../chunk-L4HHWG4V.js';
-import '../chunk-NR4CPM4T.js';
-import '../chunk-2G355KDJ.js';
+export { SelectionBar } from '../chunk-XA2QKGBJ.js';
+import '../chunk-NXFTCPF6.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SetupWizard/index.js

@@ -1,12 +1,12 @@
-export { SetupWizard } from '../chunk-5EFLA6BW.js';
+export { SetupWizard } from '../chunk-C75WZMXG.js';
 import '../chunk-RJWO2PC5.js';
 import '../chunk-FPDIHEM4.js';
-import '../chunk-CYQBDZ6M.js';
-import '../chunk-222VILSP.js';
-import '../chunk-IVTQWOXV.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-RTPQDNW3.js';
+import '../chunk-CYQBDZ6M.js';
+import '../chunk-LVJGN5II.js';
 import '../chunk-XSPCITPN.js';
+import '../chunk-ULYHDP7U.js';
+import '../chunk-D2GT3CR4.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ShareDialog/index.js

@@ -1,22 +1,22 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-Q2T4L6ML.js';
-import '../chunk-VK45YJLH.js';
-import '../chunk-C667GCU7.js';
-import '../chunk-7KHM2FZH.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-HFOTRZFU.js';
+import '../chunk-3IWZVEXA.js';
+import '../chunk-XXDB6KPV.js';
 import '../chunk-T5GBTXNC.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
+import '../chunk-YGRTX67J.js';
 import '../chunk-BPCY7ZID.js';
-import '../chunk-N2BF272H.js';
-import '../chunk-BT3GB7HC.js';
-import '../chunk-KTIQSSME.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-HF5L56YQ.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SheetColumnEditor/index.js

@@ -1,29 +1,29 @@
-export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-O222F2IX.js';
-import '../chunk-VK45YJLH.js';
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-IUWP2LSE.js';
+import '../chunk-3IWZVEXA.js';
 import '../chunk-FFMCMSJB.js';
-import '../chunk-7KHM2FZH.js';
+import '../chunk-YGRTX67J.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
-import '../chunk-HEA6TERQ.js';
+import '../chunk-LSOR77RZ.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-6R334YT3.js';
-import '../chunk-2IIHMJMZ.js';
+import '../chunk-YQ7Q52XU.js';
+import '../chunk-GZVAZ3LL.js';
+import '../chunk-HCUECVZ3.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-LMQG3VPG.js';
-import '../chunk-ANTAQAR4.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-YOJAGKTS.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
-import '../chunk-OQG4P5KU.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-D2GT3CR4.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SheetGrid/index.js

@@ -1,25 +1,25 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-2STOSJT3.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-HQFOZJQ4.js';
 import '../chunk-UEOEBOBR.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-MMCYH5LB.js';
 import '../chunk-EFX2YC5T.js';
-import '../chunk-Z2MZTI3H.js';
+import '../chunk-ONNXUS5Y.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
-import '../chunk-KHJIEPZV.js';
+import '../chunk-SM4P2SHB.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-VERJCAJ4.js';
-import '../chunk-I33UIUZD.js';
+import '../chunk-LBGKLYBY.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-BT3GB7HC.js';
-import '../chunk-KTIQSSME.js';
-import '../chunk-2G355KDJ.js';
-import '../chunk-OQG4P5KU.js';
+import '../chunk-3QQIGMY3.js';
+import '../chunk-YOJAGKTS.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Shortcut/index.js

@@ -1,5 +1,5 @@
-export { matchesShortcut, useShortcut } from '../chunk-AYHIF6DH.js';
+export { matchesShortcut, useShortcut } from '../chunk-LZNPL266.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SidePanel/SidePanel.d.ts

@@ -8,15 +8,22 @@ export declare const SIDE_PANEL_MIN_WIDTH = 360;
 /** The widest, in px, before any cap the host applies so the content keeps its floor. */
 export declare const SIDE_PANEL_MAX_WIDTH = 640;
 export interface SidePanelLabels {
-    /** Names the close button: "Close the assistant". */
+    /** Names the close button: "Close Ask Crewlet". */
     close: (title: string) => string;
-    /** Names the grip: "Resize the assistant panel". */
+    /** Names the grip: "Resize the Ask Crewlet panel". */
     resize: (title: string) => string;
 }
 export declare const SIDE_PANEL_LABELS: SidePanelLabels;
 export interface SidePanelProps {
     /** Names the panel; it is the panel's heading, level two. */
     title: string;
+    /**
+     * What the panel is about, after the title on its baseline in the tertiary
+     * ink ("Thread" then the room it is in): text or a link. It drops under the
+     * title when the two do not fit, and the title keeps one line, ellipsised.
+     * Not part of the panel's name. Not drawn with `hideTitle`.
+     */
+    subtitle?: ReactNode;
     /** A mark before the title: the product mark, the glyph of the control that opened it. */
     icon?: ReactNode;
     /** Draw the title for assistive technology only, where the icon says it. */
@@ -93,7 +100,7 @@ export interface SidePanelProps {
  * region, sizes the track and draws the grip in the seam, from the same
  * width the host keeps for both.
  */
-export declare function SidePanel({ title, icon, hideTitle, onClose, actions, footer, flush, width, minWidth, maxWidth, defaultWidth, onWidthChange, onWidthCommit, resizable, initialFocus, labels, className, children, }: SidePanelProps): import("react").JSX.Element;
+export declare function SidePanel({ title, subtitle, icon, hideTitle, onClose, actions, footer, flush, width, minWidth, maxWidth, defaultWidth, onWidthChange, onWidthCommit, resizable, initialFocus, labels, className, children, }: SidePanelProps): import("react").JSX.Element;
 export interface SidePanelFrameProps {
     /** The open panel, if any: a `SidePanel`. */
     panel?: ReactNode;

package/dist/SidePanel/SidePanelBase.d.ts

@@ -29,6 +29,8 @@ export interface SidePanelBaseProps {
     /** A preset's own block class, added beside every part's class. */
     alias?: string | undefined;
     title: string;
+    /** A second line after the title, on its baseline: what the panel is about. */
+    subtitle?: ReactNode;
     icon?: ReactNode;
     onClose: () => void;
     closeLabel: string;
@@ -56,4 +58,4 @@ export interface SidePanelBaseProps {
     className?: string | undefined;
     children: ReactNode;
 }
-export declare function SidePanelBase({ alias, title, icon, onClose, closeLabel, actions, footer, flush, initialFocus, ringHeading, hideTitle, expanded, onExpandedChange, expandLabel, collapseLabel, width, minWidth, maxWidth, defaultWidth, onWidthChange, onWidthCommit, resizable, resizeLabel, className, children, }: SidePanelBaseProps): import("react").JSX.Element;
+export declare function SidePanelBase({ alias, title, subtitle, icon, onClose, closeLabel, actions, footer, flush, initialFocus, ringHeading, hideTitle, expanded, onExpandedChange, expandLabel, collapseLabel, width, minWidth, maxWidth, defaultWidth, onWidthChange, onWidthCommit, resizable, resizeLabel, className, children, }: SidePanelBaseProps): import("react").JSX.Element;

package/dist/SidePanel/index.js

@@ -1,11 +1,11 @@
-import '../chunk-73GUXYYE.js';
-export { SIDE_PANEL_LABELS, SIDE_PANEL_MAX_WIDTH, SIDE_PANEL_MIN_WIDTH, SIDE_PANEL_WIDTH, SidePanel, SidePanelFrame } from '../chunk-CLJGFOTV.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-5AHNW5CP.js';
+export { SIDE_PANEL_LABELS, SIDE_PANEL_MAX_WIDTH, SIDE_PANEL_MIN_WIDTH, SIDE_PANEL_WIDTH, SidePanel, SidePanelFrame } from '../chunk-SKGOKLJD.js';
 import '../chunk-PIYJNCN7.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SidePanel-VXKUKLOJ.css → SidePanel-BKWT6Q6Z.css}

@@ -88,6 +88,42 @@
   border-bottom: 1px solid var(--color-border-default);
 }
 
+/* With a subtitle the head holds one or two lines, so its height is a floor
+   rather than a height, and its controls stay on the first line. */
+.crewlet-side-panel__head--subtitled {
+  align-items: flex-start;
+  height: auto;
+  min-height: var(--crewlet-side-panel-head-height);
+  padding-block: calc((var(--crewlet-side-panel-head-height) - var(--size-control-sm)) / 2);
+  box-sizing: border-box;
+}
+
+/* The title and the subtitle on one baseline, the subtitle dropping under
+   the title when the two do not fit; the title shrinks to its own line and
+   is ellipsised there. Centred on the controls' line while it is one line. */
+.crewlet-side-panel__heading {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: var(--spacing-2);
+  min-width: 0;
+  min-height: var(--size-control-sm);
+  align-content: center;
+}
+
+.crewlet-side-panel__heading > .crewlet-side-panel__title {
+  flex: 0 1 auto;
+}
+
+.crewlet-side-panel__subtitle {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-snug);
+}
+
 .crewlet-side-panel__icon {
   display: inline-flex;
   flex: none;

package/dist/SidebarNav/SidebarNav.d.ts

@@ -24,6 +24,16 @@
  * unread"), because a bare "5" after a name says nothing about what it counts,
  * and both carry those words as required props, so a figure without them does
  * not type-check.
+ *
+ * A LONG LIST READ IN PASSING IS THE SAME COMPONENT, DENSER (`dense`): a room
+ * list beside a conversation, with rows at the target floor, names in the
+ * regular weight, and two states a navigation does not need, `unread` (the
+ * name a step heavier and brighter) and `muted` (the quiet ink). Its groups
+ * can fold (`collapsible`), and a folded group still shows the row the reader
+ * is on and the rows with news, so folding never hides what is calling.
+ *
+ * THE RAIL FOLDED TO ITS MARKS IS `CompactNav`, whose places take these rows'
+ * own prop types, so one list of places feeds both shapes.
  */
 import { type MouseEventHandler, type ReactNode } from 'react';
 export interface SidebarNavProps {
@@ -33,6 +43,16 @@ export interface SidebarNavProps {
      * landmarks both called "navigation".
      */
     label: string;
+    /**
+     * A list read in passing that runs long (a room list, a directory), drawn a
+     * step denser than the application's navigation: rows at the target floor
+     * (24px), the gutter halved so a row's highlight runs nearly from edge to
+     * edge, the row's pad grown by the same step so every glyph and name keeps
+     * the line it was on, a glyph slot as wide as a small face so faces and
+     * glyphs share one column, and names in the regular weight, which is what
+     * lets an `unread` row stand out by weight alone.
+     */
+    dense?: boolean | undefined;
     className?: string | undefined;
     children?: ReactNode;
 }
@@ -80,6 +100,20 @@ export interface NavGroupProps {
      * heading to carry the key, so its rows keep theirs.
      */
     locked?: string | undefined;
+    /**
+     * The heading folds the group: it becomes a button, its chevron in the glyph
+     * column and its words on the label line, and a folded group still draws
+     * the rows a reader must not lose sight of, the one they are on and the
+     * ones marked `unread` (and not `muted`). Only for a NAMED group: the words
+     * are the button's name.
+     */
+    collapsible?: boolean | undefined;
+    /** Whether a collapsible group is folded, for a caller that keeps the state. */
+    collapsed?: boolean | undefined;
+    /** Whether a collapsible group starts folded, for one that leaves the state to the group. */
+    defaultCollapsed?: boolean | undefined;
+    /** Every fold and unfold of a collapsible group. */
+    onCollapsedChange?: ((collapsed: boolean) => void) | undefined;
     className?: string | undefined;
     children?: ReactNode;
 }
@@ -170,6 +204,21 @@ export interface NavItemProps {
      * is the page that says the reader may not read it.
      */
     locked?: string | undefined;
+    /**
+     * Something here is new to the reader: a room with messages they have not
+     * read. The row's name steps up to the primary ink and the medium weight,
+     * which reads in a `dense` list whose names are regular. A screen reader
+     * hears ", unread" after the name unless the row's figure already says
+     * what is waiting, and a folded group keeps the row in view.
+     */
+    unread?: boolean | undefined;
+    /**
+     * The reader asked to hear less from here: the row rests in the quiet ink,
+     * and lifts as every row does under the pointer and while current. It
+     * outranks `unread`, since a muted place's news is not asking for them, and
+     * a screen reader hears ", muted" after the name.
+     */
+    muted?: boolean | undefined;
     /** The row's hint, as the pointer's title: what the destination answers. */
     title?: string | undefined;
     /**
@@ -191,7 +240,7 @@ export interface NavItemProps {
     className?: string | undefined;
 }
 /** The navigation region in the rail. */
-export declare function SidebarNav({ label, className, children }: SidebarNavProps): import("react").JSX.Element;
+export declare function SidebarNav({ label, dense, className, children }: SidebarNavProps): import("react").JSX.Element;
 export declare namespace SidebarNav {
     var Group: typeof NavGroup;
     var Item: typeof NavItem;
@@ -205,6 +254,6 @@ export declare namespace SidebarNav {
  * `<div>` here still carries the label's own padding, which put sixteen blank
  * pixels at the top of the rail and named a group nothing could read.
  */
-export declare function NavGroup({ label, action, locked, className, children }: NavGroupProps): import("react").JSX.Element;
+export declare function NavGroup({ label, action, locked, collapsible, collapsed, defaultCollapsed, onCollapsedChange, className, children, }: NavGroupProps): import("react").JSX.Element;
 /** One row: a glyph, a label, an optional badge, and optionally rows beneath. */
-export declare function NavItem({ label, icon, lead, count, badge, href, current, disabledReason, locked, title, onPrefetch, renderLink, onClick, children, expanded, defaultExpanded, onExpandedChange, expandLabel, className, }: NavItemProps): import("react").JSX.Element;
+export declare function NavItem({ label, icon, lead, count, badge, href, current, disabledReason, locked, unread, muted, title, onPrefetch, renderLink, onClick, children, expanded, defaultExpanded, onExpandedChange, expandLabel, className, }: NavItemProps): import("react").JSX.Element | null;

package/dist/SidebarNav/index.js

@@ -1,4 +1,4 @@
-export { NavGroup, NavItem, SidebarNav } from '../chunk-WCDPFTJZ.js';
+export { NavGroup, NavItem, SidebarNav } from '../chunk-25JQNHTC.js';
 import '../chunk-TEV5REGB.js';
 import '../chunk-HBDA76EZ.js';
 import '../chunk-2YTOOH3A.js';

package/dist/{SidebarNav-VTQ3G4AE.css → SidebarNav-E7PZGGA6.css}

@@ -87,6 +87,61 @@
   color: var(--color-text-tertiary);
 }
 
+/*
+ * A HEADING THAT FOLDS ITS GROUP (`collapsible`): the button is the heading's
+ * words and a chevron, the chevron centred in the glyph column (a nav glyph's
+ * 14px; the xs chevron is 12px) and the words on the label line, so the
+ * headings and the rows of a folded list stay one grid. It is the target
+ * floor tall, the head's own height, and as wide as its words, so the head's
+ * control keeps its own target at the end.
+ *
+ * THE RING IS DRAWN INSIDE ITS EDGE, because the words ellipsize and the box
+ * that cuts them would cut an outset ring on every side.
+ */
+.crewlet-nav-group__toggle {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  min-width: 0;
+  min-height: var(--size-target-min);
+  margin: 0;
+  padding: 0 var(--spacing-1) 0 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  font: inherit;
+  cursor: pointer;
+  transition: color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-nav-group__toggle:hover {
+  color: var(--color-text-primary);
+}
+
+.crewlet-nav-group__toggle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The words take the button's ink, so the heading lifts as one. */
+.crewlet-nav-group__toggle > .crewlet-nav-group__label {
+  color: inherit;
+}
+
+.crewlet-nav-group__chevron {
+  display: inline-flex;
+  flex: none;
+  margin: 0 calc((14px - 12px) / 2);
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* Folded, the chevron points at the words it would open. */
+.crewlet-nav-group--collapsed .crewlet-nav-group__chevron {
+  transform: rotate(-90deg);
+}
+
 /* The heading's control. Pushed to the end whether or not the heading has
    words, and at the floor the heading stands at. */
 .crewlet-nav-group__action {
@@ -332,13 +387,16 @@
  * somebody who cannot separate the hue at all: the filled pill is the signal,
  * the figure is the count.
  *
- * The design's 18px pill, at least as wide as it is tall so a single digit is
- * a round mark and not a lozenge, and following the density like the xs Tag
- * it matches. The label is the on-accent step, the primary action's own pair,
- * on every row alike, because the fill is opaque.
+ * The chrome's one count badge (`--size-badge`, 16px with a 10px figure), at
+ * least as wide as it is tall so a single digit is a round mark and not a
+ * lozenge, and following the density. The same pill is drawn on the compact
+ * rail's tiles and in its flyouts, so a count waiting for the reader is one
+ * mark wherever it is; at 18px with an 11px figure it read louder than the
+ * names beside it. The label is the on-accent step, the primary action's own
+ * pair, on every row alike, because the fill is opaque.
  */
 .crewlet-nav-item__badge {
-  --crewlet-nav-item-badge-size: calc(18px * var(--density, 1));
+  --crewlet-nav-item-badge-size: var(--size-badge);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -347,11 +405,11 @@
   min-width: var(--crewlet-nav-item-badge-size);
   height: var(--crewlet-nav-item-badge-size);
   margin-left: auto;
-  padding: 0 calc(var(--spacing-1) + 1px);
+  padding: 0 var(--size-badge-pad);
   border-radius: var(--radius-pill);
   background: var(--color-brand-accent);
   color: var(--color-text-on-accent);
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-badge);
   font-weight: var(--font-weight-semibold);
   font-variant-numeric: tabular-nums;
   line-height: 1;
@@ -429,8 +487,75 @@
   border-left-color: var(--color-border-strong);
 }
 
+/*
+ * THE DENSE LIST (`dense`): a list read in passing that runs long, a step
+ * denser than the application's navigation.
+ *
+ * Its rows stand at the 24px target floor, the gutter is halved so a row's
+ * highlight runs nearly from edge to edge (a long bar rather than a pill), and
+ * the row's pad grows by exactly what the gutter gave up, so every glyph and
+ * name stays on the line it was on, whatever the surface set the two tokens
+ * to. The glyph column is as wide as a small face (an `Avatar` at `xs`), so a
+ * face, a glyph and a group's count stand in one column and every name starts
+ * on one line. Names are set in the regular weight, a step lighter than the
+ * navigation's, which is what lets an unread row stand out by weight.
+ */
+.crewlet-sidebar-nav--dense {
+  --crewlet-nav-dense-pad: calc(var(--size-nav-row-pad) + var(--size-nav-gutter) - var(--spacing-1));
+  --crewlet-nav-dense-slot: 20px;
+  padding-right: var(--spacing-1);
+  padding-left: var(--spacing-1);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-item__row {
+  min-height: var(--size-target-min);
+  padding-right: var(--crewlet-nav-dense-pad);
+  padding-left: var(--crewlet-nav-dense-pad);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-group__head {
+  padding-right: calc(var(--crewlet-nav-dense-pad) - (var(--size-target-min) - 14px) / 2);
+  padding-left: var(--crewlet-nav-dense-pad);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-item__icon {
+  min-width: var(--crewlet-nav-dense-slot);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-group__chevron {
+  margin-right: calc((var(--crewlet-nav-dense-slot) - 12px) / 2);
+  margin-left: calc((var(--crewlet-nav-dense-slot) - 12px) / 2);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-item__children {
+  margin-left: var(--crewlet-nav-dense-pad);
+  padding-left: calc(var(--crewlet-nav-dense-slot) + var(--spacing-2) + var(--spacing-1) / 2 - var(--crewlet-nav-dense-pad) - 1px);
+}
+
+/*
+ * A ROW WITH NEWS (`unread`): its name a step heavier than its neighbours' and
+ * in the primary ink, which is the whole of the signal in a dense list whose
+ * names are regular. A muted row is never drawn unread (the component drops
+ * the class), so the two rules never meet.
+ */
+.crewlet-nav-item--unread > .crewlet-nav-item__head > .crewlet-nav-item__row {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+/*
+ * A MUTED ROW rests in the quiet ink, glyph and name together, and lifts as
+ * every row does: under the pointer, and while it is the row the reader is on.
+ */
+.crewlet-nav-item--muted > .crewlet-nav-item__head > .crewlet-nav-item__row:not([aria-current]):not(:hover) {
+  color: var(--color-text-tertiary);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-nav-group__action,
+  .crewlet-nav-group__toggle,
+  .crewlet-nav-group__chevron,
   .crewlet-nav-item__row,
   .crewlet-nav-item__chevron {
     transition: none;

package/dist/Skeleton/index.js

@@ -1,3 +1,3 @@
-export { Skeleton } from '../chunk-BRLZXYPA.js';
+export { Skeleton } from '../chunk-I4IUX3JF.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Skeleton-7ZA5ETJM.css → Skeleton-GIXV3KK5.css}

@@ -80,10 +80,12 @@
 .crewlet-skeleton__line--label { height: 13px; width: 40%; margin-bottom: var(--spacing-2); }
 .crewlet-skeleton__line--value { height: 14px; width: 80%; }
 
+/* A face's placeholder takes a face's shape, the rounded square every Avatar
+   is drawn as: at 40px its corner is 8.9px, which the md step rounds to. */
 .crewlet-skeleton__avatar {
   width: 40px;
   height: 40px;
-  border-radius: var(--radius-circle);
+  border-radius: var(--radius-md);
   flex-shrink: 0;
 }
 

package/dist/SlideCompare/index.js

@@ -1,9 +1,9 @@
-export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-DV5L2GRY.js';
-import '../chunk-RMEBFYL7.js';
+export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-XJMES7AE.js';
+import '../chunk-O6EV6GKI.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideFilmstrip/index.js

@@ -1,14 +1,14 @@
-export { SlideFilmstrip } from '../chunk-TPCBPGSB.js';
-import '../chunk-RMEBFYL7.js';
+export { SlideFilmstrip } from '../chunk-T7WESRZF.js';
+import '../chunk-O6EV6GKI.js';
 import '../chunk-MPVMB2DV.js';
-import '../chunk-ANTAQAR4.js';
-import '../chunk-2G355KDJ.js';
-import '../chunk-OQG4P5KU.js';
+import '../chunk-YOJAGKTS.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideGrid/index.js

@@ -1,6 +1,6 @@
-export { SlideGrid } from '../chunk-7MGXHCVK.js';
-import '../chunk-RMEBFYL7.js';
+export { SlideGrid } from '../chunk-6M2N6ETA.js';
+import '../chunk-O6EV6GKI.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideStage/index.js

@@ -1,5 +1,5 @@
-export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-RMEBFYL7.js';
+export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-O6EV6GKI.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-ODEQTPFM.js';