@crewlethq/ui 0.83.0 → 0.84.0

package/dist/{CatalogTile-6VF36JWA.css → CatalogTile-TMOSGSV3.css}

@@ -79,9 +79,10 @@
   overflow-wrap: anywhere;
 }
 
-/* A state in words (a StatusDot's label) at a Tag's caption step, so a row
-   reads the same whichever one a tile carries. It inherited the page's size,
-   and on a 16px page "Connected" stood taller than the name before it. */
+/* THE STATE, the tone's dot and its word, at the caption step the fact
+   beside it takes, so a compact tile's line reads name, state, fact at one
+   height. It inherited the page's size, and on a 16px page "Connected" stood
+   taller than the name before it. */
 .crewlet-catalog-tile__status {
   display: inline-flex;
   font-size: var(--font-size-xs);

package/dist/CompactNav/CompactNav.d.ts

@@ -24,7 +24,7 @@
  */
 import { type MouseEventHandler, type ReactNode } from 'react';
 import { type PlacementRect } from '../Layer/index.js';
-import type { NavFigure, NavLinkProps } from '../SidebarNav/index.js';
+import type { NavBadge, NavFigure, NavLinkProps } from '../SidebarNav/index.js';
 export interface CompactNavProps {
     /** Names the navigation region, as `SidebarNav`'s label does. */
     label: string;
@@ -45,9 +45,11 @@ interface CompactPlace {
     current?: boolean | undefined;
     /**
      * How many things here are waiting on the reader: the accent figure on the
-     * tile's corner, as `SidebarNav.Item`'s badge.
+     * tile's corner, as `SidebarNav.Item`'s badge. `tone: 'quiet'` draws it as
+     * the quiet figure, as the full rail's quiet badge, and keeps it out of a
+     * group's sum.
      */
-    badge?: NavFigure | undefined;
+    badge?: NavBadge | undefined;
     /** How many of something the place holds: the quiet figure, as `SidebarNav.Item`'s count. */
     count?: NavFigure | undefined;
     /**
@@ -123,7 +125,8 @@ export interface CompactNavGroupProps {
  * badge's own value with a `+`, since there is more than it says.
  *
  * The quiet counts are not carried: a count says how much a place holds, and
- * a sum of how much six places hold is a figure about nothing.
+ * a sum of how much six places hold is a figure about nothing. Nor is a quiet
+ * badge: the group's figure is the accent, and only what calls is added to it.
  */
 export declare function groupBadge(links: readonly Pick<CompactNavLink, 'badge'>[]): (number | string) | undefined;
 /**
@@ -157,8 +160,9 @@ lift?: number): {
  * whatever came next in the document.
  *
  * EVERY PLACE IS A REAL LINK, so a modified press opens a tab as it does in
- * the full rail; choosing one closes the flyout and, where the keyboard chose
- * it, hands focus back to the tile.
+ * the full rail; choosing one closes the flyout, and focus follows the
+ * navigation: where the page it opened took focus it stays there, and where
+ * it is still in the flyout it goes back to the tile, by a press as by a key.
  *
  * WHAT OPENED IT DECIDES WHAT CLOSES IT. Opened by the pointer resting on the
  * tile, it closes when the pointer leaves both; opened by a press or the keys,

package/dist/CompactNav/index.js

@@ -1,4 +1,4 @@
-export { CompactNav, CompactNavGroup, CompactNavItem, CompactNavSeparator, groupBadge, placeFlyout } from '../chunk-ICE3D63E.js';
+export { CompactNav, CompactNavGroup, CompactNavItem, CompactNavSeparator, groupBadge, placeFlyout } from '../chunk-QWRAWKB2.js';
 import '../chunk-TEV5REGB.js';
 import '../chunk-HTS5RJ7S.js';
 import '../chunk-OMV5W53A.js';

package/dist/DataView/index.js

@@ -4,9 +4,9 @@ import '../chunk-K4LZXSKZ.js';
 import '../chunk-7K6LVM5I.js';
 import '../chunk-WANKINXG.js';
 import '../chunk-ZXXZESCD.js';
+import '../chunk-YGRTX67J.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-YGRTX67J.js';
 import '../chunk-EE3DJMSQ.js';
 import '../chunk-NXFTCPF6.js';
 import '../chunk-EC6EUIAD.js';

package/dist/DirectoryList/index.js

@@ -1,3 +1,3 @@
-export { DirectoryList } from '../chunk-SRDNGGZE.js';
+export { DirectoryList } from '../chunk-RKIJAXQA.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DirectoryList-XZOWYOA3.css → DirectoryList-IXQIMNFS.css}

@@ -17,7 +17,12 @@
   font-family: var(--font-family-sans);
 }
 
-/* The groups take the room and scroll on their own, so the foot stays put. */
+/* The groups take the room and scroll on their own, so the foot stays put.
+
+   THEIR INSET IS INSIDE THE SCROLLER. The gutter is reserved whether or not
+   they scroll, and the lines end a step before it: a line's state pill stood
+   against the scrollbar, and moved by its width when the list grew long
+   enough to scroll. */
 .crewlet-directory__groups {
   display: flex;
   flex: 1 1 auto;
@@ -26,7 +31,9 @@
      under it rather than a band between two runs of them. */
   gap: var(--spacing-3);
   min-height: 0;
+  padding-right: var(--spacing-2);
   overflow-y: auto;
+  scrollbar-gutter: stable;
 }
 
 .crewlet-directory__group {

package/dist/InboxList/InboxList.d.ts

@@ -48,13 +48,27 @@ export interface InboxGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'titl
     /** Whether a collapsible group starts open, when the group holds it. */
     defaultOpen?: boolean | undefined;
     onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * The latest row to arrive in the group, as a token (the row's key): each
+     * new value plays a brief wash of the accent over the group's label and
+     * count, so a row that lands in a closed group (Answered) is seen to land.
+     * Pass it only for a row that has just arrived, never on a first draw.
+     */
+    arrived?: string | number | undefined;
 }
+/**
+ * The motion a leaving row waits for: its height closing, a transition of the
+ * row's own `grid-template-rows` (InboxList.css). A suite fakes exactly this.
+ */
+export declare const INBOX_ROW_LEAVE: {
+    readonly transitions: readonly ["grid-template-rows"];
+};
 /**
  * A labelled run of rows. The label is a heading set in the micro-label
  * register, so a reader navigating by heading lands on each group and a
  * reader scanning sees where one ends.
  */
-export declare function InboxGroup({ label, hideLabel, headingLevel, count, collapsible, open: controlledOpen, defaultOpen, onOpenChange, className, children, ...rest }: InboxGroupProps): import("react").JSX.Element;
+export declare function InboxGroup({ label, hideLabel, headingLevel, count, collapsible, open: controlledOpen, defaultOpen, onOpenChange, arrived, className, children, ...rest }: InboxGroupProps): import("react").JSX.Element;
 export type InboxRowTone = 'default' | 'danger';
 export interface InboxRowProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'onClick' | 'title'> {
     /** Who the row is from: a seat's or a person's name. */
@@ -114,6 +128,18 @@ export interface InboxRowProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'on
      * open the link in a tab.
      */
     onClick?: ((event: MouseEvent<HTMLElement>) => void) | undefined;
+    /**
+     * On its way out: the row stays drawn, inert, while its height closes, so
+     * the rows under it slide up rather than jump, and is drawn no more once it
+     * has closed. An `InboxGroup` does this itself for a keyed row that leaves
+     * its children, and a wrapper the host draws its rows through forwards
+     * this and `onLeft` to its `InboxRow`; pass it for a list of your own.
+     */
+    leaving?: boolean | undefined;
+    /** Runs once a leaving row has closed and is drawn no more, once for each leave. */
+    onLeft?: (() => void) | undefined;
+    /** Just arrived: a brief wash of the accent that fades back to the row's own ground. */
+    arrived?: boolean | undefined;
 }
 /**
  * One row: WHO, then WHAT in up to three lines, then the task it is about.
@@ -137,7 +163,7 @@ export interface InboxRowProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'on
  * the words take up to three lines before they stop, so a row says what it is
  * rather than its first few words.
  */
-export declare function InboxRow({ title, qualifier, qualifierTone, meta, leading, excerpt, aside, selected, unread, unreadLabel, actionable, done, doneLabel, status, outcome, outcomeIcon, outcomeTone, href, onClick, className, children, ...rest }: InboxRowProps): import("react").JSX.Element;
+export declare function InboxRow({ title, qualifier, qualifierTone, meta, leading, excerpt, aside, selected, unread, unreadLabel, actionable, done, doneLabel, status, outcome, outcomeIcon, outcomeTone, href, onClick, leaving, onLeft, arrived, className, children, ...rest }: InboxRowProps): import("react").JSX.Element | null;
 export type InboxMoreProps = HTMLAttributes<HTMLDivElement>;
 /**
  * The end of the list: the quiet toggles that open what is not in it by

package/dist/InboxList/index.d.ts

@@ -1,3 +1,3 @@
 import './InboxList.css';
-export { InboxList, InboxGroup, InboxRow, InboxMore, InboxToggle } from './InboxList.js';
+export { InboxList, InboxGroup, InboxRow, InboxMore, InboxToggle, INBOX_ROW_LEAVE } from './InboxList.js';
 export type { InboxListProps, InboxGroupProps, InboxRowProps, InboxRowTone, InboxMoreProps, InboxToggleProps, } from './InboxList.js';

package/dist/InboxList/index.js

@@ -1,5 +1,10 @@
-export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chunk-QPHD4UUG.js';
+export { INBOX_ROW_LEAVE, InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chunk-F6ZUM66S.js';
 import '../chunk-RK4XPHVG.js';
+import '../chunk-6C7GQOBV.js';
+import '../chunk-PCAT2EFB.js';
+import '../chunk-YJQXESOJ.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{InboxList-OFGSX5IH.css → InboxList-X5Q5WWAI.css}

@@ -26,6 +26,9 @@
 
 /* The heading's own line box is the label's, so the label sits where it is drawn. */
 .crewlet-inbox-list__label {
+  /* The arrival's wash stands behind the label's words, inside it. */
+  position: relative;
+  isolation: isolate;
   margin: 0;
   padding: var(--spacing-3) var(--spacing-2) var(--spacing-1);
   font: inherit;
@@ -33,6 +36,32 @@
   line-height: var(--font-line-height-snug);
 }
 
+/*
+ * A ROW ARRIVED: a wash of the accent that fades back to the ground, over the
+ * row itself, or over a group's label and count where the row landed in a
+ * closed group. The row's keyframes name no last step, so the wash returns
+ * to whatever the row draws of its own (hover, selected).
+ */
+.crewlet-inbox-list__arrival {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: var(--radius-xs);
+  pointer-events: none;
+  animation: crewlet-inbox-arrive calc(var(--motion-duration-moderate) * 8) var(--motion-easing-out) both;
+}
+
+.crewlet-inbox-row--arrived {
+  animation: crewlet-inbox-arrive calc(var(--motion-duration-moderate) * 8) var(--motion-easing-out);
+}
+
+@keyframes crewlet-inbox-arrive {
+  0%,
+  40% {
+    background: var(--color-brand-accent-soft-strong);
+  }
+}
+
 /* The count after a label, in the quiet ink and the label's own register. */
 .crewlet-inbox-list__count {
   margin-inline-start: var(--spacing-1);
@@ -107,12 +136,38 @@
  * a selected row takes no hover on top of it: both are a background on the
  * same element, and a composite of the two is a colour nothing has measured.
  */
+/* ONE TRACK, so a leaving row can close its height (below). */
 .crewlet-inbox-row {
+  display: grid;
+  grid-template-rows: 1fr;
   min-width: 0;
   border-radius: var(--radius-md);
   transition: background var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+.crewlet-inbox-row__body {
+  min-width: 0;
+  min-height: 0;
+}
+
+/*
+ * A ROW LEAVING closes its one track to nothing and fades, on the slow step
+ * with the emphasized curve, the motion a column opens and shuts by, so the
+ * rows under it slide up into its place. The shell's presence waits on the
+ * track's transition (`INBOX_ROW_LEAVE`), and the row is inert all the while.
+ */
+.crewlet-inbox-row--leaving {
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows var(--motion-duration-slow) var(--motion-easing-emphasized),
+    opacity var(--motion-duration-moderate) var(--motion-easing-out);
+}
+
+.crewlet-inbox-row--leaving .crewlet-inbox-row__body {
+  overflow: hidden;
+}
+
 .crewlet-inbox-row:hover {
   background: var(--color-surface-hover);
 }
@@ -349,7 +404,7 @@
 }
 
 /* A row with no leading slot: the words start at the control's own pad, and so does the task. */
-.crewlet-inbox-row:not(:has(.crewlet-inbox-row__leading)) > .crewlet-inbox-row__aside {
+.crewlet-inbox-row:not(:has(.crewlet-inbox-row__leading)) .crewlet-inbox-row__aside {
   padding-inline-start: var(--spacing-2);
 }
 
@@ -385,10 +440,16 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .crewlet-inbox-row {
+  .crewlet-inbox-row,
+  .crewlet-inbox-row--leaving {
     transition: none;
   }
 
+  .crewlet-inbox-row--arrived,
+  .crewlet-inbox-list__arrival {
+    animation: none;
+  }
+
   .crewlet-inbox-list__toggle,
   .crewlet-inbox-list__chevron {
     transition: none;

package/dist/ListDetail/ListDetail.d.ts

@@ -21,6 +21,12 @@ export interface ListDetailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
  * column. The list column is `--crewlet-list-detail-list` wide (17rem by
  * default), with a hairline between the two.
  *
+ * THE DETAIL'S SCROLLBAR IS ON THE SHEET'S EDGE. Placed directly in a fill
+ * screen's column, it reaches past the column's end pad, and the detail
+ * keeps the screen's side inset inside itself, with its scrollbar's gutter
+ * always reserved: its content ends under the bar's last control, and a
+ * trailing control never touches the scrollbar.
+ *
  * BELOW 640px OF ITS OWN WIDTH IT IS ONE PANE, the one `showing` names: the
  * list and a reading detail do not both fit, whether the window is a phone or
  * an aside beside the screen has taken the room. The application gives its

package/dist/ListDetail/index.js

@@ -1,2 +1,2 @@
-export { ListDetail } from '../chunk-YBC2CYPD.js';
+export { ListDetail } from '../chunk-O4VTQMEF.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ListDetail-N3L7PB46.css → ListDetail-JGESKTR7.css}

@@ -10,6 +10,17 @@
  * drew the detail 130px wide beside a 17rem list. The phone rule below is the
  * one decision that stays the window's: on a phone the page scrolls as a
  * whole rather than each pane on its own.
+ *
+ * ON A SCREEN THAT FILLS THE WINDOW, THE PANE THAT SCROLLS IS ITS OUTERMOST
+ * BOX, and its inset is padding inside it. Standing directly in the fill
+ * column, the ListDetail reaches past the column's end pad to the sheet's
+ * edge (below), so the scrollbar is the sheet's last pixel; the detail then
+ * reserves its scrollbar's gutter whether or not it scrolls, and keeps the
+ * screen's side inset between its content and that gutter, so a trailing
+ * control (a header's Disconnect, a tile's Open) never touches the scrollbar,
+ * does not move when the detail grows long enough to scroll, and ends under
+ * the bar's last control. Anywhere else (a scrolling or a flush screen, or
+ * outside a shell) it is as wide as its box, with nothing reserved.
  */
 
 /* THE HAIRLINE STANDS MIDWAY between the two panes: the list's inset before it
@@ -17,6 +28,9 @@
    the list than to the detail it divides it from; the two still add to 64. */
 .crewlet-list-detail {
   --crewlet-list-detail-gutter: var(--spacing-7);
+  /* The inset at a scrolling pane's end: the screen's own side inset in a
+     shell, so the page's two edges match. */
+  --crewlet-list-detail-end: var(--crewlet-app-shell-inset, var(--spacing-5));
 
   container: crewlet-list-detail / inline-size;
   display: flex;
@@ -27,6 +41,21 @@
   min-height: 0;
 }
 
+/* STANDING IN A FILL SCREEN'S COLUMN, IT TAKES THE COLUMN'S END PAD BACK: the
+   inset and the scrollbar's width, which the shell publishes for exactly
+   this (`--crewlet-app-shell-bleed-end`, AppShell.css). The detail keeps the
+   same inset inside itself, and reserves its gutter, there and only there. */
+:where(.crewlet-app-shell--fill:not(.crewlet-app-shell--fill-flush) .crewlet-app-shell__content) > .crewlet-list-detail {
+  margin-right: calc(var(--crewlet-app-shell-bleed-end, 0px) * -1);
+}
+
+:where(.crewlet-app-shell--fill:not(.crewlet-app-shell--fill-flush) .crewlet-app-shell__content)
+  > .crewlet-list-detail
+  .crewlet-list-detail__detail {
+  padding-right: var(--crewlet-list-detail-end);
+  scrollbar-gutter: stable;
+}
+
 .crewlet-list-detail__panes {
   display: grid;
   flex: 1 1 auto;
@@ -68,6 +97,15 @@
     overflow-y: auto;
   }
 
+  /* The list is the pane that scrolls now, and takes the detail's end where
+     the ListDetail reaches the sheet. */
+  :where(.crewlet-app-shell--fill:not(.crewlet-app-shell--fill-flush) .crewlet-app-shell__content)
+    > .crewlet-list-detail
+    .crewlet-list-detail__list {
+    padding-right: var(--crewlet-list-detail-end);
+    scrollbar-gutter: stable;
+  }
+
   .crewlet-list-detail--showing-list .crewlet-list-detail__detail,
   .crewlet-list-detail--showing-detail .crewlet-list-detail__list {
     display: none;

package/dist/ReadingPane/ReadingPane.d.ts

@@ -3,7 +3,23 @@ import { type HeadingLevel } from '../utils/headingLevel.js';
 export interface ReadingPaneProps extends HTMLAttributes<HTMLElement> {
     /** Overrides the level the title is rendered at. */
     headingLevel?: HeadingLevel | undefined;
+    /**
+     * What the pane shows, as a key: the item's id. A new value draws the new
+     * item afresh and plays it in, a short fade and rise on the moderate step
+     * (`READING_PANE_ENTER` on the column; nothing moves under reduced motion),
+     * and moves focus to its title, without scrolling the page, where the reader
+     * was last in the pane (focus came into it, or a press landed in it): the
+     * control they answered with went with the old item. A reader in the list
+     * beside the pane, or nowhere (a live update), keeps their place.
+     */
+    contentKey?: string | number | undefined;
+    /** Where focus goes after a change of `contentKey`, in place of the title. */
+    focusTarget?: (() => HTMLElement | null | undefined) | undefined;
 }
+/** The keyframes a new item plays in by, on the column: the one motion a suite fakes. */
+export declare const READING_PANE_ENTER: {
+    readonly animations: readonly ["crewlet-reading-pane-enter"];
+};
 /**
  * One item read in full, top to bottom, in one column: the line saying who is
  * asking and about what, the question in large type, its context, the
@@ -19,7 +35,7 @@ export interface ReadingPaneProps extends HTMLAttributes<HTMLElement> {
  * The article is named by its title, so a reader moving by landmark hears the
  * question rather than "article".
  */
-export declare function ReadingPane({ headingLevel, className, children, ...rest }: ReadingPaneProps): import("react").JSX.Element;
+export declare function ReadingPane({ headingLevel, contentKey, focusTarget, className, children, ...rest }: ReadingPaneProps): import("react").JSX.Element;
 export declare namespace ReadingPane {
     var Byline: typeof ReadingPaneByline;
     var Title: typeof ReadingPaneTitle;

package/dist/ReadingPane/index.d.ts

@@ -1,3 +1,3 @@
 import './ReadingPane.css';
-export { ReadingPane, ReadingPaneByline, ReadingPaneTitle, ReadingPaneLead, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneOutcome, ReadingPaneSection, } from './ReadingPane.js';
+export { ReadingPane, ReadingPaneByline, ReadingPaneTitle, ReadingPaneLead, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneOutcome, ReadingPaneSection, READING_PANE_ENTER, } from './ReadingPane.js';
 export type { ReadingPaneProps, ReadingPaneBylineProps, ReadingPaneTitleProps, ReadingPaneLeadProps, ReadingPaneQuoteProps, ReadingPaneReasoningProps, ReadingPaneOutcomeProps, ReadingPaneSectionProps, } from './ReadingPane.js';

package/dist/ReadingPane/index.js

@@ -1,4 +1,5 @@
-export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from '../chunk-Q7N2ATMC.js';
+export { READING_PANE_ENTER, ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from '../chunk-64JNKLLP.js';
 import '../chunk-RK4XPHVG.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ReadingPane-VLYOWMCM.css → ReadingPane-VFTRDPC5.css}

@@ -32,6 +32,25 @@
   }
 }
 
+/* A NEW ITEM PLAYS IN (`contentKey`): a short fade and rise, so the reader
+   sees the pane move on rather than its words change under them. */
+.crewlet-reading-pane__column--entering {
+  animation: crewlet-reading-pane-enter var(--motion-duration-moderate) var(--motion-easing-out);
+}
+
+@keyframes crewlet-reading-pane-enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--spacing-2));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-reading-pane__column--entering {
+    animation: none;
+  }
+}
+
 /* ---- The byline -------------------------------------------------------- */
 
 .crewlet-reading-pane__byline {

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-AUSFKGKL.js';
+export { RichEditor, preloadRichEditor } from '../chunk-3AMWXJQX.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-2DMTW2Y3.js';
 import '../chunk-KOJPDCGQ.js';
 import '../chunk-KBZO4B33.js';

package/dist/SectionFrame/index.js

@@ -1,5 +1,5 @@
-export { SectionFrame, SectionFrameBody, SectionFrameNav } from '../chunk-YRNNUCQP.js';
-import '../chunk-25JQNHTC.js';
+export { SectionFrame, SectionFrameBody, SectionFrameNav } from '../chunk-7BDBO2NP.js';
+import '../chunk-BRK3HXGZ.js';
 import '../chunk-TEV5REGB.js';
 import '../chunk-HBDA76EZ.js';
 import '../chunk-2YTOOH3A.js';

package/dist/ShareDialog/index.js

@@ -1,10 +1,10 @@
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-AQNP3KQU.js';
 import '../chunk-3IWZVEXA.js';
 import '../chunk-ZXXZESCD.js';
+import '../chunk-YGRTX67J.js';
 import '../chunk-T5GBTXNC.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-YGRTX67J.js';
 import '../chunk-BPCY7ZID.js';
 import '../chunk-HF5L56YQ.js';
 import '../chunk-IRONPJB4.js';

package/dist/SidebarNav/SidebarNav.d.ts

@@ -36,6 +36,7 @@
  * own prop types, so one list of places feeds both shapes.
  */
 import { type MouseEventHandler, type ReactNode } from 'react';
+import type { CountTone } from '../Count/index.js';
 export interface SidebarNavProps {
     /**
      * Names the navigation region. A page with two of them ("Sections" and
@@ -148,6 +149,20 @@ export interface NavFigure {
      */
     label: string;
 }
+/**
+ * A figure of what waits on the reader, and how loudly it asks.
+ *
+ * `attention` (the default) is the accent's filled pill, the one hue in the
+ * chrome: what the reader is asked to act on, the unread in an inbox.
+ * `quiet` keeps the pill's round shape and its place at the row's end, in
+ * the quiet count's grey: work that is the reader's own and is waiting, but
+ * not calling (the open tasks assigned to them). The vocabulary is `Count`'s
+ * own (`CountTone`), so a figure is quiet or calling in the same words
+ * wherever it stands.
+ */
+export interface NavBadge extends NavFigure {
+    tone?: CountTone | undefined;
+}
 /** A quiet figure: how many of something the destination holds. */
 export interface NavCount extends NavFigure {
     /**
@@ -180,9 +195,10 @@ export interface NavItemProps {
      * of what is waiting on the reader is the one thing in the rail that asks
      * them to act, which is what the accent means; it is a FILL carrying a
      * figure rather than a figure in a hue, so it still reads to somebody who
-     * cannot separate the hue. Anything else is a `count`.
+     * cannot separate the hue. Anything else is a `count`. `tone: 'quiet'`
+     * keeps the pill and draws it in the quiet count's grey (`NavBadge`).
      */
-    badge?: NavFigure | undefined;
+    badge?: NavBadge | undefined;
     href?: string | undefined;
     /** Whether this row is the screen the reader is on. */
     current?: boolean | undefined;

package/dist/SidebarNav/index.d.ts

@@ -1,4 +1,4 @@
 import '../HitArea/HitArea.css';
 import './SidebarNav.css';
 export { NavGroup, NavItem, SidebarNav } from './SidebarNav.js';
-export type { NavCount, NavFigure, NavGroupAction, NavGroupProps, NavItemProps, NavLinkProps, SidebarNavProps, } from './SidebarNav.js';
+export type { NavBadge, NavCount, NavFigure, NavGroupAction, NavGroupProps, NavItemProps, NavLinkProps, SidebarNavProps, } from './SidebarNav.js';

package/dist/SidebarNav/index.js

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

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

@@ -415,6 +415,26 @@
   line-height: 1;
 }
 
+/*
+ * A QUIET BADGE keeps the pill, its size and its place at the row's end, and
+ * takes the quiet count's grey: a neutral wash (`--color-fill-soft`, the
+ * ground of a quiet label at rest) carrying the secondary ink, for work that
+ * is the reader's own and waiting, but not calling. The secondary ink rather
+ * than the count's tertiary, because on a wash over a hovered row the
+ * tertiary measured 4.41:1 in light; it is the ink the compact rail's quiet
+ * figure takes, so the two shapes draw the same grey. On the reader's own row
+ * its ink lifts to the row's, as the count's does; the suite measures the
+ * pair on every ground a row can have.
+ */
+.crewlet-nav-item__badge--quiet {
+  background: var(--color-fill-soft);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-nav-item__row[aria-current='page'] .crewlet-nav-item__badge--quiet {
+  color: inherit;
+}
+
 /* Beside a count the badge is the second figure, not a second push to the
    end: two auto margins would split the room between them and float the
    count into the middle of the row. */

package/dist/{chunk-AUSFKGKL.js → chunk-3AMWXJQX.js}

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-5D5Z3LBQ.js').then(
+  loading ??= import('./Editor-VGNB35NJ.js').then(
     (module) => {
       engine = module.Editor;
       return engine;