@crewlethq/ui 0.12.0 → 0.13.0

package/dist/HuePicker/index.js

@@ -1,8 +1,8 @@
 import '../chunk-EXHQ2QVW.js';
-export { HuePicker } from '../chunk-K5Q2DK3P.js';
+export { HuePicker } from '../chunk-NXDEPUVG.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-EBBAAQDY.js';
-import '../chunk-JHQUT4WJ.js';
+import '../chunk-26PEPONN.js';
+import '../chunk-4LDTQWS7.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ImageUpload/index.js

@@ -1,4 +1,4 @@
-export { ImageUpload } from '../chunk-LAQK4V3Z.js';
-import '../chunk-3UK4VFSK.js';
+export { ImageUpload } from '../chunk-DJMLHCLD.js';
+import '../chunk-6NIZCQUM.js';
 import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ImageUpload-L2GE4JUM.css → ImageUpload-NVGMN7DP.css}

@@ -1,10 +1,13 @@
 /*
  * ImageUpload, the click-to-upload affordance built on Avatar.
  *
- * WHITE ON THE SCRIM, from tokens, in both palettes. The overlay used to spell
+ * WHITE ON THE SCRIM, from tokens, in every theme. The overlay used to spell
  * its own rgba(0, 0, 0, 0.5) and three shades of white; the scrim and the
- * on-accent step are the two values the palette already measures for exactly
- * this, which is a label drawn on something dark whatever is behind it.
+ * on-scrim step are the two values the palette measures for exactly this,
+ * which is a label drawn on something dark whatever is behind it. The
+ * on-accent step is not: a theme whose accent is light labels it dark. The
+ * remove button is the danger fill, and takes the on-danger step for the
+ * same reason.
  *
  * NO LITERAL FALLBACKS INSIDE var(). A fallback is what renders whenever the
  * token name is misspelt, so it hides the very failure it looks like
@@ -91,7 +94,7 @@
   justify-content: center;
   gap: 2px;
   background: var(--color-surface-scrim);
-  color: var(--color-text-on-accent);
+  color: var(--color-text-on-scrim);
   opacity: 0;
   transition: opacity var(--motion-duration-base) var(--motion-easing-default);
   pointer-events: none;
@@ -136,7 +139,7 @@
   height: calc(var(--crewlet-image-upload-size) * 0.3);
   border-radius: var(--radius-circle);
   border: 2px solid var(--color-surface-scrim);
-  border-top-color: var(--color-text-on-accent);
+  border-top-color: var(--color-text-on-scrim);
   animation: crewlet-image-upload-spin calc(var(--motion-duration-slow) * 2.5) linear infinite;
 }
 
@@ -166,7 +169,7 @@
   border-radius: var(--radius-circle);
   background: var(--color-feedback-danger);
   border: 2px solid var(--color-surface-background);
-  color: var(--color-text-on-accent);
+  color: var(--color-text-on-danger);
   cursor: pointer;
   opacity: 0;
   transition: opacity var(--motion-duration-fast) var(--motion-easing-default);

package/dist/InboxList/InboxList.d.ts

@@ -0,0 +1,116 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type LiHTMLAttributes, type MouseEvent, type ReactNode } from 'react';
+import { type HeadingLevel } from '../utils/headingLevel.js';
+export interface InboxListProps extends HTMLAttributes<HTMLElement> {
+    /** Names the list as a landmark: "Inbox". */
+    label: string;
+}
+/**
+ * The column of an inbox: what reached a person, grouped, one row each, read
+ * in full in a pane beside it.
+ *
+ * A NAVIGATION, NOT A TABLE. Every row opens something, and a reader moves
+ * between them to read one at a time. It promises no columns, so it draws
+ * none, and its rows are as tall as their words rather than one fixed height.
+ */
+export declare function InboxList({ label, className, children, ...rest }: InboxListProps): import("react").JSX.Element;
+export declare namespace InboxList {
+    var Group: typeof InboxGroup;
+    var Row: typeof InboxRow;
+    var More: typeof InboxMore;
+    var Toggle: typeof InboxToggle;
+}
+export interface InboxGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** The group's name: "Needs you", "Updates". */
+    label: ReactNode;
+    /**
+     * Names the group for a screen reader only. For rows a control above them
+     * already introduces, such as the snoozed ones under their own toggle.
+     */
+    hideLabel?: boolean | undefined;
+    /** Overrides the level the label is rendered at. */
+    headingLevel?: HeadingLevel | undefined;
+}
+/**
+ * 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, 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. */
+    title: ReactNode;
+    /** A word after the name where the row is not a plain question or update: "coding run", "stopped". */
+    qualifier?: ReactNode;
+    /** `danger` sets the qualifier in the danger ink, for a seat that has stopped. */
+    qualifierTone?: InboxRowTone | undefined;
+    /** At the end of the first line: when it arrived. */
+    meta?: ReactNode;
+    /** Before the words: an avatar, drawn at the target size. */
+    leading?: ReactNode;
+    /** What the row says, in up to three lines. */
+    children?: ReactNode;
+    /** Drawn after the words in the quiet ink, inside the same three lines: a comment's own text. */
+    excerpt?: ReactNode;
+    /**
+     * Under the row and OUTSIDE its control, so it can be a control of its own:
+     * the task the row is about, as a link.
+     */
+    aside?: ReactNode;
+    /** This row is the one open beside the list. */
+    selected?: boolean | undefined;
+    /** Not read yet: the name is heavier, the words take the primary ink, and the state is read out. */
+    unread?: boolean | undefined;
+    /** Read after the row's words when `unread`. */
+    unreadLabel?: string | undefined;
+    /** It waits on the reader: the words take the primary ink. */
+    actionable?: boolean | undefined;
+    /** Settled: the words are struck through in the quiet ink, and the state is read out. */
+    done?: boolean | undefined;
+    /** Read after the row's words when `done`: "Answered", "Resolved". */
+    doneLabel?: string | undefined;
+    /** Opens the row as a link. */
+    href?: string | undefined;
+    /**
+     * Opens the row as a button, or, beside `href`, takes the press first: a
+     * router calls `preventDefault` on a plain click and lets a modified one
+     * open the link in a tab.
+     */
+    onClick?: ((event: MouseEvent<HTMLElement>) => void) | undefined;
+}
+/**
+ * One row: WHO, then WHAT in up to three lines, then the task it is about.
+ *
+ * THE ROW IS ONE CONTROL and the task is another. A link nested inside a
+ * button is invalid and unreachable by keyboard, so the task sits under the
+ * control, in the same item, and lines up with the words above it. The item
+ * takes the hover and the selected fill as a whole, so the two read as one row.
+ *
+ * THE SELECTED FILL IS NEUTRAL. An inbox is read one row after another, and an
+ * accent tint on the open row made the column read as a column of alerts; the
+ * pressed fill says "here" without saying "look". The control carries
+ * `aria-current`, so the row is announced as the open one where focus is.
+ *
+ * NOTHING IS CUT AT THE EDGE. The name ellipsizes, the time never wraps, and
+ * 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, href, onClick, className, children, ...rest }: InboxRowProps): import("react").JSX.Element;
+export type InboxMoreProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * The end of the list: the quiet toggles that open what is not in it by
+ * default, the snoozed rows and the earlier ones. Two words at the bottom
+ * rather than a filter bar at the top, because a reader opens them rarely
+ * and a filter bar is read every time.
+ */
+export declare function InboxMore({ className, children, ...rest }: InboxMoreProps): import("react").JSX.Element;
+export interface InboxToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /** Whether the rows it opens are shown. */
+    expanded: boolean;
+}
+/**
+ * One of those toggles: a word in the quiet ink that opens rows under it.
+ * Its own `aria-expanded` says whether they are open, and the ink steps up to
+ * the primary while they are.
+ */
+export declare function InboxToggle({ expanded, className, children, ...rest }: InboxToggleProps): import("react").JSX.Element;

package/dist/InboxList/index.d.ts

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

package/dist/InboxList/index.js

@@ -0,0 +1,5 @@
+export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chunk-XYCADWZN.js';
+import '../chunk-RK4XPHVG.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/InboxList-YMFWKGGS.css

@@ -0,0 +1,252 @@
+/*
+ * The inbox's column: groups of rows, each row a control with the task it is
+ * about under it, and the quiet toggles at the end.
+ *
+ * EVERY TRACK IS minmax(0, 1fr). An `auto` track grows to its widest content,
+ * and a row holding a long unbroken word pushed the whole column past its
+ * edge, cutting every row off at the right.
+ */
+
+.crewlet-inbox-list {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: start;
+  gap: 2px;
+  min-width: 0;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-body);
+}
+
+.crewlet-inbox-list__group {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 2px;
+  min-width: 0;
+}
+
+/* The heading's own line box is the label's, so the label sits where it is drawn. */
+.crewlet-inbox-list__label {
+  margin: 0;
+  padding: var(--spacing-3) var(--spacing-2) var(--spacing-1);
+  font: inherit;
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-inbox-list__rows {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* ---- The row ------------------------------------------------------------ */
+
+/*
+ * The ITEM takes the hover and the selected fill, so the control and the task
+ * under it read as one row. The selected fill is the neutral pressed step, and
+ * 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.
+ */
+.crewlet-inbox-row {
+  min-width: 0;
+  border-radius: var(--radius-md);
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-inbox-row:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-inbox-row--selected,
+.crewlet-inbox-row--selected:hover {
+  background: var(--color-surface-pressed);
+}
+
+/*
+ * FORCED COLORS repaints every author background to Canvas, which takes the
+ * open row's fill with it, so the row the pane is showing would look like
+ * every other. An outline is the one mark the mode keeps, drawn inside the row
+ * so the scroller does not clip it, in the system's colour for exactly this.
+ */
+@media (forced-colors: active) {
+  .crewlet-inbox-row--selected {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}
+
+.crewlet-inbox-row__control {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  width: 100%;
+  min-width: 0;
+  padding: calc(var(--spacing-2) + var(--spacing-1) / 2) var(--spacing-2) var(--spacing-1);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* With no task under it, the control closes the row at the same padding it opened with. */
+.crewlet-inbox-row__control:only-child {
+  padding-bottom: calc(var(--spacing-2) + var(--spacing-1) / 2);
+}
+
+/*
+ * The ring is drawn INSIDE: the list sits in a clipping scroller, where an
+ * outset ring is cut off on the first and last rows and painted over by the
+ * row below.
+ */
+.crewlet-inbox-row__control:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-inbox-row__leading {
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+  width: var(--size-target-min);
+  margin-top: 1px;
+}
+
+.crewlet-inbox-row__main {
+  display: grid;
+  flex: 1;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-inbox-row__head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-inbox-row__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+.crewlet-inbox-row__qualifier {
+  flex: none;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-inbox-row__qualifier--danger {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-inbox-row__meta {
+  flex: none;
+  margin-inline-start: auto;
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-inbox-row__text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-inbox-row__excerpt {
+  color: var(--color-text-tertiary);
+}
+
+/* Unread: a heavier name, and the words in the primary ink. */
+.crewlet-inbox-row__control--unread .crewlet-inbox-row__title {
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-inbox-row__control--unread .crewlet-inbox-row__text,
+.crewlet-inbox-row__control--actionable .crewlet-inbox-row__text {
+  color: var(--color-text-primary);
+}
+
+/*
+ * Settled. The strike is drawn in the strong hairline rather than the text's
+ * own ink, so the words under it stay legible; the state is also read out,
+ * because a line through a word says nothing to somebody listening.
+ */
+.crewlet-inbox-row__control--done .crewlet-inbox-row__text {
+  text-decoration: line-through;
+  text-decoration-color: var(--color-border-strong);
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * The task, under the words and lined up with them: the control's start pad,
+ * the leading slot and the gap after it.
+ */
+.crewlet-inbox-row__aside {
+  min-width: 0;
+  padding:
+    0 var(--spacing-2) calc(var(--spacing-2) + var(--spacing-1) / 2)
+    calc(var(--spacing-2) + var(--size-target-min) + var(--spacing-2) + var(--spacing-1) / 2);
+  overflow-wrap: anywhere;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+/* ---- The end of the list ---------------------------------------------- */
+
+.crewlet-inbox-list__more {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--spacing-4) + var(--spacing-1) / 2);
+  padding: calc(var(--spacing-3) + var(--spacing-1) / 2) var(--spacing-2) 0;
+}
+
+.crewlet-inbox-list__toggle {
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  font: inherit;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition: color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-inbox-list__toggle:hover,
+.crewlet-inbox-list__toggle[aria-expanded='true'] {
+  color: var(--color-text-primary);
+}
+
+.crewlet-inbox-list__toggle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-inbox-row {
+    transition: none;
+  }
+
+  .crewlet-inbox-list__toggle {
+    transition: none;
+  }
+}

package/dist/KeyChip/KeyChip.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'react';
+export interface KeyChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The key as the system mints it: `FAIR`, `ENG`, `SPLIT`. */
+    children: string;
+    /**
+     * What a search typed. The letters it matched are drawn bold: the start of
+     * the key first, then anywhere in it.
+     */
+    highlight?: string | undefined;
+}
+/**
+ * A project's key, drawn as the small mono chip every surface draws it as: a
+ * row in the rail, a crumb, a row in a switcher, a cell in a directory.
+ *
+ * ONE CHIP. It was drawn by hand twice, by the rail's row and by the
+ * dashboard's own stylesheet, with two radii and two paddings for one fact.
+ *
+ * It is text, not a control, and carries no role: the key is read as part of
+ * whatever it labels, so a row reads "FAIR Product and Engineering".
+ */
+export declare function KeyChip({ children, highlight, className, ...rest }: KeyChipProps): import("react").JSX.Element;

package/dist/KeyChip/index.d.ts

@@ -0,0 +1,3 @@
+import './KeyChip.css';
+export { KeyChip } from './KeyChip.js';
+export type { KeyChipProps } from './KeyChip.js';

package/dist/KeyChip/index.js

@@ -0,0 +1,2 @@
+export { KeyChip } from '../chunk-FYTIJM2T.js';
+import '../chunk-ODEQTPFM.js';

package/dist/KeyChip-4XJU4BBE.css

@@ -0,0 +1,30 @@
+/*
+ * A project's key as a chip: the raised rung inside the plain hairline, in the
+ * mono face at the micro step and the secondary ink.
+ *
+ * The rail's suite measures this ink on this fill against every ground a rail
+ * row can have (SidebarNav.test.tsx), because the rail is where the chip sits
+ * on the most grounds: the frame, a pointed row and the current row.
+ */
+.crewlet-key-chip {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  padding: 0 calc(var(--spacing-1) + 1px);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-normal);
+  line-height: var(--font-line-height-body);
+  white-space: nowrap;
+}
+
+/* The letters a search matched: the weight carries it, in the primary ink. */
+.crewlet-key-chip__match {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}

package/dist/Link/Link.d.ts

@@ -3,8 +3,16 @@ export type LinkVariant =
 /** A navigation: the accent ink, underlined on hover. */
 'default'
 /** An identity a reader clicks through to: neutral ink, underlined on hover. */
- | 'subtle';
-export type LinkSize = 'body' | 'caption';
+ | 'subtle'
+/**
+ * A reference set among other words, the task a question is about, say: a
+ * softer ink than a navigation, never underlined, stepping up to the full
+ * accent ink on hover.
+ */
+ | 'quiet';
+export type LinkSize = 'body' | 'caption'
+/** The size of the words around it, for a link set inside a sentence. */
+ | 'inherit';
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     variant?: LinkVariant | undefined;
     size?: LinkSize | undefined;
@@ -41,5 +49,12 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  * instruction, a seat's name in a row, say. It is still underlined on hover
  * and still takes the focus ring, because a link a reader cannot find is not
  * quieter, it is hidden.
+ *
+ * `quiet` is for a reference that sits in a column of rows or inside a
+ * sentence, where every row drawing a full accent link would turn the column
+ * into a column of links. It keeps an ink of its own, measured to 4.5:1 on
+ * every surface and pressed row, so it is still found by colour and by its
+ * place, and it keeps the focus ring. It draws no underline even on hover:
+ * the ink stepping up to the accent is the signal that it is live.
  */
 export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/Link/index.js

@@ -1,3 +1,3 @@
-export { Link } from '../chunk-ZPSOF6VL.js';
+export { Link } from '../chunk-FBSEJO2C.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Link-6BEFNMN2.css → Link-WPMVLKLY.css}

@@ -1,5 +1,6 @@
 /*
- * A link, in the two registers a console needs: a navigation and an identity.
+ * A link, in the three registers a console needs: a navigation, an identity
+ * and a quiet reference.
  *
  * The ink is the accent's INK step, not the accent fill. The fill is a mark
  * and clears 3:1; text has to clear 4.5:1, and at caption size it is exactly
@@ -32,10 +33,44 @@
   color: var(--color-brand-accent-ink);
 }
 
+/*
+ * A reference among other words. Its own ink sits between the accent ink and
+ * the secondary text, so a column of rows that each name a task does not read
+ * as a column of links, and the hover steps it up to the full accent ink with
+ * no underline. The ink is a token rather than a mix of two, because a mix is
+ * a colour nobody measured; this one clears 4.5:1 on every surface and on a
+ * pressed row.
+ */
+.crewlet-link--quiet {
+  color: var(--color-text-link-quiet);
+}
+
+.crewlet-link--quiet:hover {
+  color: var(--color-brand-accent-ink);
+  text-decoration: none;
+}
+
+/*
+ * FORCED COLORS paints every link in LinkText whatever its state, so the step
+ * up to the accent ink cannot be seen there, and a hover with no underline is
+ * no hover at all. The rule under the words is the one mark the mode leaves to
+ * the author, so it is where the quiet variant's hover goes in that mode.
+ */
+@media (forced-colors: active) {
+  .crewlet-link--quiet:hover {
+    text-decoration: underline;
+  }
+}
+
 .crewlet-link--body {
   font-size: var(--font-size-sm);
 }
 
+/* Set inside a sentence: the sentence's own size, whatever it is. */
+.crewlet-link--inherit {
+  font-size: inherit;
+}
+
 /*
  * A caption-sized link takes the caption's SIZE and keeps the link's ink. It
  * is medium weight and does not wrap, because the thing it names (an event id,

package/dist/ListInput/index.js

@@ -1,9 +1,9 @@
-export { ListInput } from '../chunk-GARACZAH.js';
+export { ListInput } from '../chunk-LZP7FGT7.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-FTEJPHBI.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Listbox/index.d.ts

@@ -3,3 +3,5 @@ export { useListbox } from './useListbox.js';
 export type { Listbox, ListboxOptions } from './useListbox.js';
 export { TYPE_AHEAD_WINDOW, useOptionKeys } from './useOptionKeys.js';
 export type { OptionKeys, OptionKeysOptions } from './useOptionKeys.js';
+export { HIGHLIGHT_REST_MS, useHighlightRest } from './useHighlightRest.js';
+export type { HighlightRest } from './useHighlightRest.js';

package/dist/Listbox/index.js

@@ -1,2 +1,2 @@
-export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from '../chunk-6MU7HNB4.js';
+export { HIGHLIGHT_REST_MS, TYPE_AHEAD_WINDOW, useHighlightRest, useListbox, useOptionKeys } from '../chunk-F73MC7EZ.js';
 import '../chunk-R25RGPUB.js';

package/dist/Listbox/useHighlightRest.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Where a list's highlight COMES TO REST, told once per resting place.
+ *
+ * WHY IT EXISTS. A list that previews what its highlight is on (a theme the
+ * whole screen repaints in while the reader decides) has to know where the
+ * reader STOPPED, not every row they passed. A key moves the highlight on
+ * purpose, so where a key lands is told at once. A pointer crosses rows on
+ * its way somewhere else, so a row it passes over is told only once the
+ * pointer has rested on it for `HIGHLIGHT_REST_MS`; told on every row it
+ * crossed, a list over a screen that repaints would flash every theme between
+ * the pointer's start and its goal.
+ *
+ * THE RULES IT KEEPS.
+ *
+ * - A RESTING PLACE IS TOLD ONCE. Telling the same row twice is a second
+ *   repaint of a screen already showing it, so a re-render, or a list handed
+ *   new option objects for the same rows, says nothing.
+ * - A KEY CANCELS A POINTER STILL ON ITS WAY. Where the arrows put the
+ *   highlight wins over a row the pointer had not yet rested on.
+ * - `null` IS NOWHERE, and it is told when the list stops offering anything:
+ *   it closed, it emptied, the pointer left it, or the component went away.
+ *   A preview never outlives the list that started it.
+ *
+ * It owns no markup and no highlight: the component keeps its own, and hands
+ * this the KEY of each row the highlight reaches (a value, an id).
+ */
+/** How long a pointer rests on a row before the row is where the highlight rests, in milliseconds. */
+export declare const HIGHLIGHT_REST_MS = 120;
+export interface HighlightRest {
+    /** The highlight moved by a key or by the list itself, or left the list (`null`): told now. */
+    now: (key: string | null) => void;
+    /** The pointer came onto a row: told once it rests there. */
+    rest: (key: string) => void;
+}
+export declare function useHighlightRest(onRest: ((key: string | null) => void) | undefined): HighlightRest;