@crewlethq/ui 0.39.0 → 0.40.1

package/dist/PropertyList/PropertyList.d.ts

@@ -0,0 +1,88 @@
+import { type ReactNode } from 'react';
+import { type SetBy } from '../ObjectHeader/index.js';
+/** One fact about an object, as a labelled row of its properties. */
+export interface PropertyListItem {
+    /** What the property is called. Also the row's identity within its group. */
+    label: string;
+    /**
+     * The value. Absent (null, undefined or "") draws the dash: the property
+     * exists and holds nothing. `0` and `false` are values and are drawn.
+     */
+    value?: ReactNode;
+    /** A page the value links to. */
+    href?: string | undefined;
+    /** Who last changed it. Never drawn under an absent value, unless the change cleared it. */
+    setBy?: SetBy | undefined;
+    /**
+     * Which change set the value, where the by-line alone cannot tell two apart:
+     * one actor making two edits that both read "2h ago" are still two changes.
+     * Consecutive rows share one by-line only when their by-lines and this agree.
+     */
+    change?: string | undefined;
+    /** Said on hover, where a label needs a sentence the list has no room for. */
+    title?: string | undefined;
+    /**
+     * The label is an IDENTIFIER rather than a word (an environment variable's
+     * name, a tag's key), and wears the mono face. A value that is an identifier
+     * is the caller's to set.
+     */
+    identifierLabel?: boolean | undefined;
+}
+/** A run of properties under one heading. */
+export interface PropertyListGroup {
+    /** The section heading. Left out, the rows run on without one. */
+    name?: string | undefined;
+    items: readonly PropertyListItem[];
+    /**
+     * Said in place of the rows when every one of them is absent: a group nobody
+     * has filled in anywhere is one fact, not one dash per row. Set it only where
+     * the whole group genuinely means one thing when empty ("Nothing scheduled:
+     * no dates, no estimate, no size"); without it every dash stays.
+     */
+    whenAllAbsent?: string | undefined;
+}
+/**
+ * How a group's heading is set. `eyebrow` is the small capitals of a rail
+ * beside an object; `sentence` is sentence case, for a column whose other
+ * sections are titled that way.
+ */
+export type PropertyListHeadings = 'eyebrow' | 'sentence';
+export interface PropertyListProps {
+    groups: readonly PropertyListGroup[];
+    headings?: PropertyListHeadings | undefined;
+    /** What an absent value is read as, in place of the dash. */
+    emptyLabel?: string | undefined;
+    /** The word a by-line's turn link is drawn with. See `SetByLine`. */
+    turnLabel?: string | undefined;
+    /** Names the list for a screen reader, where nothing above it does. */
+    'aria-label'?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * An object's own facts, as labelled rows in sections, beside or under it.
+ *
+ * ONE TERM COLUMN DOWN THE WHOLE LIST. Each group is its own description list,
+ * so a screen reader hears each section as a list named by its heading, and
+ * each is a subgrid of the one grid, so the labels of every section share a
+ * single column instead of restarting it per section. The column is the
+ * description list's own measure (`--crewlet-description-list-term`), so a
+ * page that sets it once lines this list up with every key-value card on it.
+ *
+ * AN ABSENT VALUE IS A DECISION, not a default, and the caller makes it in
+ * one of four ways that are not interchangeable:
+ *
+ *   - the row is LEFT OUT: this object has no such property at all;
+ *   - the row is a DASH (`value` absent): the property exists and holds nothing;
+ *   - the row SAYS SOMETHING: the emptiness means something a reader should know;
+ *   - the WHOLE GROUP says one thing (`whenAllAbsent`), because every property
+ *     in it is absent. Its heading stays: the group exists and is empty, which
+ *     is a different claim from an object that has no such group.
+ *
+ * ONE ATTRIBUTION PER CHANGE, NOT PER ROW. A create sets several fields at
+ * once, and identical by-lines under each of them are one sentence copied out
+ * several times. A run of consecutive rows set by one change draws ONE line,
+ * naming what it covers, under the last of them. AND NEVER UNDER AN ABSENCE:
+ * provenance under a dash claims somebody set nothing. The exception is a
+ * change that emptied the field, which reads "cleared by".
+ */
+export declare function PropertyList({ groups, headings, emptyLabel, turnLabel, 'aria-label': ariaLabel, className, }: PropertyListProps): import("react").JSX.Element;

package/dist/PropertyList/index.d.ts

@@ -0,0 +1,3 @@
+import './PropertyList.css';
+export { PropertyList } from './PropertyList.js';
+export type { PropertyListGroup, PropertyListHeadings, PropertyListItem, PropertyListProps, } from './PropertyList.js';

package/dist/PropertyList/index.js

@@ -0,0 +1,7 @@
+export { PropertyList } from '../chunk-T6MXORP5.js';
+import '../chunk-ODOJJGXH.js';
+import '../chunk-FBSEJO2C.js';
+import '../chunk-MFS6F2P7.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/PropertyList-SCYM66LL.css

@@ -0,0 +1,96 @@
+/*
+ * An object's properties, in sections, on one grid.
+ *
+ * ONE TERM COLUMN DOWN THE WHOLE LIST. Every section is a description list of
+ * its own, laid out as a SUBGRID of this one, so its terms and details sit on
+ * this grid's two tracks and every section's labels start and end where the
+ * others' do. The term track is the description list's own measure,
+ * `--crewlet-description-list-term`, so a page that sets it once lines a list
+ * of properties up with every key-value card on it. Unset, it is the rail's
+ * own: as wide as the longest label, and never under 92px, which a one-word
+ * label ("Due") would otherwise shrink the column to.
+ *
+ * SIDE BY SIDE AT EVERY WIDTH. A list of properties sits in a rail or a card
+ * of its own width, so the window's width says nothing about the room it has;
+ * the description list's narrow step (term over detail) is cancelled below.
+ */
+
+.crewlet-property-list {
+  display: grid;
+  grid-template-columns: var(--crewlet-description-list-term, minmax(92px, max-content)) minmax(0, 1fr);
+  gap: var(--spacing-2) var(--spacing-3);
+  align-items: baseline;
+  min-width: 0;
+  font-size: var(--font-size-compact);
+}
+
+/* Two classes, so the description list's own track and narrow step (one
+   class, in a media query) give way to the subgrid at every width. */
+.crewlet-property-list > .crewlet-property-list__group {
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  gap: inherit;
+  font-size: inherit;
+}
+
+.crewlet-property-list .crewlet-description-list__detail {
+  margin-bottom: 0;
+}
+
+/* THE LABEL IS AN IDENTIFIER (an environment variable's name, a tag's key),
+   set in the mono face; a word stays in the list's own. */
+.crewlet-property-list__identifier {
+  font-family: var(--font-family-mono);
+}
+
+/*
+ * A SECTION'S HEADING, with a hairline above it that separates it from the
+ * section before. The list's FIRST heading has nothing to be separated from,
+ * so it alone loses the hairline; a list that opens with rows of no section
+ * keeps it on its first heading, which has rows above it.
+ */
+.crewlet-property-list__heading {
+  grid-column: 1 / -1;
+  margin-top: var(--spacing-2);
+  padding-top: var(--spacing-2);
+  border-top: 1px solid var(--color-border-default);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-property-list__heading:first-child {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+}
+
+.crewlet-property-list--eyebrow .crewlet-property-list__heading {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.crewlet-property-list--sentence .crewlet-property-list__heading {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+/* A SECTION NOBODY HAS FILLED IN, said once across both tracks in the words
+   its caller wrote. It is a sentence a reader has to read, so it takes the
+   tertiary rung, never the muted one (a floor for a mark). */
+.crewlet-property-list__empty {
+  grid-column: 1 / -1;
+  margin: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* WHO SET IT, under the value rather than beside it: the value is what the
+   reader came for. A line of its own, so a long actor name cannot push the
+   value out of its track. */
+.crewlet-property-list__set-by {
+  display: block;
+  margin-top: 2px;
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+}

package/dist/RelatedRow/RelatedRow.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+export interface RelatedRowProps {
+    /** Where the row goes. */
+    href: string;
+    /** The destination's own glyph, at the small step. */
+    icon: ReactNode;
+    /** The place, by its name. */
+    title: ReactNode;
+    /** One sentence: what is there, and where. */
+    description: ReactNode;
+    /** What the region is called for assistive technology. */
+    label?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * The one related place a page points at, as a quiet linked row under its
+ * content (Policies to the engine's limits, Nodes to its backups).
+ *
+ * A ROW, NOT A FOOTNOTE. A trailing caption ("The caps are in Settings ›
+ * Limits.") was a sentence a reader had to find the link inside. The row
+ * stands on a card's own inset, so its glyph stands under the card heads'
+ * glyphs and its words under their titles, and the whole row is the link.
+ *
+ * An application offers it only to a reader who may open the place: a link to
+ * a page that refuses them is a dead end offered as a way on.
+ */
+export declare function RelatedRow({ href, icon, title, description, label, className }: RelatedRowProps): import("react").JSX.Element;

package/dist/RelatedRow/index.d.ts

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

package/dist/RelatedRow/index.js

@@ -0,0 +1,9 @@
+export { RelatedRow } from '../chunk-ZUTUI27P.js';
+import '../chunk-IKBK4A5O.js';
+import '../chunk-ZAC7SKUN.js';
+import '../chunk-INHXF2CL.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/RelatedRow-2FVS6QQA.css

@@ -0,0 +1,6 @@
+/* RelatedRow: the glyphs in the quiet ink; everything else is the kit's card. */
+.crewlet-related-row__glyph {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}

package/dist/SectionFrame/SectionFrame.d.ts

@@ -0,0 +1,76 @@
+import { type ReactNode } from 'react';
+export interface SectionFrameProps {
+    /**
+     * The column's width, as a CSS length: `236px`, the rail's own. Handed in
+     * rather than fixed, so the number an application counts for its own
+     * layout (a peek's threshold) and the column drawn are one value.
+     */
+    columnWidth: string;
+    /**
+     * The column folds to a one-row picker over the body, which takes the
+     * whole width. The APPLICATION decides when, because the width at which a
+     * section beside the column becomes too narrow is its own arithmetic (its
+     * rail, its sheet, the floor its sections need), and the same answer
+     * usually decides something else too; a second measurement here would be a
+     * second answer to one question.
+     */
+    folded?: boolean | undefined;
+    /** A `SectionFrame.Nav` and a `SectionFrame.Body`. */
+    children?: ReactNode;
+    className?: string | undefined;
+}
+/**
+ * A workspace's sections as a column beside the screen: a list of grouped
+ * sections that stays put while the section beside it scrolls, and that
+ * folds, where the window is too narrow for both, to one row naming the
+ * section the reader is on.
+ *
+ * FLUSH WITH THE SHEET. In an `AppShell` the frame takes back the content
+ * column's padding and gives it to the body, so the column runs the full
+ * height of the view with its hairline, and the section keeps the screen's
+ * own inset. The column is the view's height (`100cqb`, the shell's
+ * scroller is a size container), never the section's, so it sticks for the
+ * whole scroll and a long list scrolls inside itself.
+ */
+export declare function SectionFrame({ columnWidth, folded, className, children }: SectionFrameProps): import("react").JSX.Element;
+export declare namespace SectionFrame {
+    var Nav: typeof SectionFrameNav;
+    var Body: typeof SectionFrameBody;
+}
+export interface SectionFrameNavProps {
+    /**
+     * The workspace the sections belong to, by its name: "Settings". The list
+     * is "Settings sections", and the folded picker reads "Settings Section:
+     * People" to a screen reader.
+     */
+    scope: string;
+    /** The section the reader is on, for the folded picker's row. */
+    current?: {
+        label: string;
+        icon?: ReactNode;
+    } | undefined;
+    /**
+     * The address the reader is on, as the rows' own `href`s write it. A
+     * change of it is an arrival: the picker folds again where the reader
+     * picked a row of this list, and opens where `openOnArrival` asks.
+     */
+    location: string;
+    /**
+     * Arriving here opens the folded picker rather than folding it: the
+     * workspace's own address on a phone, which names no section anybody
+     * picked, where a folded row naming the first section hid every group
+     * under it. A deep link to a section arrives folded, so the section it
+     * named starts right under the picker.
+     */
+    openOnArrival?: boolean | undefined;
+    /** The groups of rows: `SidebarNav.Group`s of `SidebarNav.Item`s. */
+    children?: ReactNode;
+}
+/** The frame's column: the sections list, and the picker it folds to. */
+export declare function SectionFrameNav({ scope, current, location, openOnArrival, children }: SectionFrameNavProps): import("react").JSX.Element;
+export interface SectionFrameBodyProps {
+    children?: ReactNode;
+    className?: string | undefined;
+}
+/** The section beside the column, on the screen's own inset. */
+export declare function SectionFrameBody({ children, className }: SectionFrameBodyProps): import("react").JSX.Element;

package/dist/SectionFrame/index.d.ts

@@ -0,0 +1,3 @@
+import './SectionFrame.css';
+export { SectionFrame, SectionFrameBody, SectionFrameNav } from './SectionFrame.js';
+export type { SectionFrameBodyProps, SectionFrameNavProps, SectionFrameProps } from './SectionFrame.js';

package/dist/SectionFrame/index.js

@@ -0,0 +1,7 @@
+export { SectionFrame, SectionFrameBody, SectionFrameNav } from '../chunk-INVSUFJK.js';
+import '../chunk-E7QLG3PG.js';
+import '../chunk-OHGH7O6T.js';
+import '../chunk-FYTIJM2T.js';
+import '../chunk-2YTOOH3A.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SectionFrame-M62UUVFQ.css

@@ -0,0 +1,164 @@
+/*
+ * SectionFrame: a column of sections beside the screen, and the one-row
+ * picker it folds to.
+ */
+
+/* THE FRAME TAKES THE CONTENT COLUMN'S PADDING BACK and gives it to the body,
+   so the column is flush with the sheet and the section keeps the inset. */
+.crewlet-app-shell__content:has(> .crewlet-section-frame) {
+  min-height: 100%;
+  padding: 0;
+}
+
+.crewlet-section-frame {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: var(--crewlet-section-frame-column) minmax(0, 1fr);
+  min-height: 100%;
+}
+
+/*
+ * AS TALL AS THE VIEW, NEVER AS THE GRID. A sticky box moves only inside its
+ * grid area, which the section beside it makes as tall as its content; sized
+ * against that area the column was exactly as tall as the section, had
+ * nowhere to stick, and a wheel over a long section carried the list off the
+ * top. At the view's height (`100cqb`: the shell's scroller is a size
+ * container) it sticks for the whole scroll and a long list scrolls in itself.
+ *
+ * IT KEEPS THE WHEEL AT ITS ENDS. A box whose bottom is below the fold traps
+ * the wheel; this one is exactly the view and always all on screen, so what
+ * chaining would do is move the section beside it at the list's end, which
+ * is not what the pointer is over.
+ */
+.crewlet-section-frame__nav {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  height: 100cqb;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--spacing-4) 0;
+  border-right: 1px solid var(--color-border-default);
+}
+
+.crewlet-section-frame__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-5);
+  min-width: 0;
+  padding: var(--spacing-5) var(--spacing-5) var(--spacing-10);
+}
+
+/* BESIDE THE SECTION there is room for the whole list: no toggle, and the
+   list is always drawn. */
+.crewlet-section-frame__toggle {
+  display: none;
+}
+
+/*
+ * FOLDED: one pane, the picker above the section. The picker's row is its
+ * own height and the section takes the rest: two `auto` rows split a short
+ * section's spare height and opened a band of nothing between the picker
+ * and the section it names.
+ */
+.crewlet-section-frame[data-folded] {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
+}
+
+/* IN THE FLOW, as tall as it is, on the section's own gutter: the list it
+   unfolds is part of the page rather than a pane of its own. */
+.crewlet-section-frame[data-folded] > .crewlet-section-frame__nav {
+  position: static;
+  height: auto;
+  overflow-y: visible;
+  padding: var(--spacing-2) var(--spacing-5);
+  border-right: none;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+/* ONE ROW NAMING WHERE THE READER IS, which unfolds the list. Its glyph and
+   name stand over the glyphs and names of the rows: the rows' own inset,
+   less the toggle's border. */
+.crewlet-section-frame[data-folded] .crewlet-section-frame__toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  width: 100%;
+  min-height: var(--size-target-min);
+  padding: 0 calc(var(--size-nav-row-pad) - 1px);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  text-align: left;
+  cursor: pointer;
+}
+
+.crewlet-section-frame[data-folded] .crewlet-section-frame__toggle:hover {
+  background: var(--color-surface-hover);
+}
+
+/* INSIDE ITS OWN EDGE, as every control that draws one rings. */
+.crewlet-section-frame__toggle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-section-frame__toggle-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-section-frame__toggle-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* "Section ·" BEFORE THE NAME, in the quiet ink, so the row reads as a
+   control holding the other sections rather than as the page's title. */
+.crewlet-section-frame__toggle-prefix {
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-section-frame__chevron {
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-section-frame__nav[data-open] .crewlet-section-frame__chevron {
+  transform: rotate(180deg);
+}
+
+.crewlet-section-frame[data-folded] .crewlet-section-frame__nav:not([data-open]) .crewlet-section-frame__list {
+  display: none;
+}
+
+.crewlet-section-frame[data-folded] .crewlet-section-frame__nav[data-open] .crewlet-section-frame__list {
+  padding-top: var(--spacing-2);
+}
+
+/* THE LIST TAKES NO GUTTER OF ITS OWN inside the folded picker, which is
+   inset already: with the rail's gutter on top, its glyphs sat 11px right of
+   the toggle's. */
+.crewlet-section-frame[data-folded] .crewlet-section-frame__list > .crewlet-sidebar-nav {
+  padding-inline: 0;
+}
+
+/* A PHONE'S ONE GUTTER: the section and the picker start where every other
+   screen's content does. */
+@media (width < 640px) {
+  .crewlet-section-frame__body {
+    padding: var(--spacing-4) var(--spacing-4) var(--spacing-9);
+  }
+
+  .crewlet-section-frame[data-folded] > .crewlet-section-frame__nav {
+    padding-inline: var(--spacing-4);
+  }
+}

package/dist/SegmentedControl/index.js

@@ -1,8 +1,15 @@
-import '../chunk-4ISUIS6F.js';
-export { SegmentedControl } from '../chunk-2QZ2VPHR.js';
-import '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
+import '../chunk-OOC7Q67K.js';
+export { SegmentedControl } from '../chunk-4OK4DX3V.js';
+import '../chunk-X4IXXLWM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-D6FEHY5G.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SheetColumnEditor/index.js

@@ -1,15 +1,16 @@
-export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-F3WZ5AKM.js';
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-GFYQKMQZ.js';
 import '../chunk-XQZ6EWOE.js';
 import '../chunk-FFMCMSJB.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
-import '../chunk-F4LPQA4E.js';
+import '../chunk-BA32AVKS.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-AXS6MBNH.js';
-import '../chunk-2QZ2VPHR.js';
-import '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
+import '../chunk-4OK4DX3V.js';
+import '../chunk-X4IXXLWM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-TYONQSOK.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';

package/dist/SheetGrid/index.js

@@ -1,15 +1,15 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-JZPK4IXR.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-DKNBGL26.js';
 import '../chunk-O2EGEONV.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-3BYIWOTV.js';
 import '../chunk-I6POAB4V.js';
 import '../chunk-KYIAFNU7.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-66X5WDKE.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';

package/dist/SidebarNav/SidebarNav.d.ts

@@ -69,6 +69,17 @@ export interface NavGroupProps {
      * first row.
      */
     action?: NavGroupAction | undefined;
+    /**
+     * Every row in the group is closed to this reader, for this reason
+     * ("Needs Admin access"). The key is drawn ONCE, after the group's label,
+     * which names the reason for a screen reader and as its title; the rows
+     * stay links, in the quiet ink, without a key each, so a reader who holds
+     * none of a column's access meets one mark per group rather than a wall of
+     * keys. A row still says its own reason (its `locked`) as its title and
+     * after its name. Only for a NAMED group: a run with no label has no
+     * heading to carry the key, so its rows keep theirs.
+     */
+    locked?: string | undefined;
     className?: string | undefined;
     children?: ReactNode;
 }
@@ -79,6 +90,11 @@ export interface NavLinkProps {
     href?: string | undefined;
     'aria-current'?: 'page' | undefined;
     onClick?: MouseEventHandler<HTMLElement> | undefined;
+    /** The row's hint, as the pointer's title. */
+    title?: string | undefined;
+    /** The row's `onPrefetch`, on the pointer reaching it and on focus. */
+    onPointerEnter?: (() => void) | undefined;
+    onFocus?: (() => void) | undefined;
 }
 /**
  * A figure at the end of a row, and what it counts.
@@ -145,6 +161,23 @@ export interface NavItemProps {
      * read after its name.
      */
     disabledReason?: string | undefined;
+    /**
+     * Closed to this reader, and why, as a sentence: "Needs Admin access". The
+     * row stays and stays a link (a place that vanished is one the reader
+     * cannot ask for); its words carry the key after them, the pointer's title
+     * says why, and a screen reader hears the reason after the name. See
+     * `LockedLabel`. Unlike `disabledReason`, the destination is reachable: it
+     * is the page that says the reader may not read it.
+     */
+    locked?: string | undefined;
+    /** The row's hint, as the pointer's title: what the destination answers. */
+    title?: string | undefined;
+    /**
+     * Called when the pointer reaches the row and when it takes focus: the
+     * reader deciding, which is the moment to start fetching where it leads,
+     * so the destination is usually in by the time the press lands.
+     */
+    onPrefetch?: (() => void) | undefined;
     /** Draws the row's element, for a router that owns navigation. */
     renderLink?: ((props: NavLinkProps) => ReactNode) | undefined;
     onClick?: MouseEventHandler<HTMLElement> | undefined;
@@ -172,6 +205,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, className, children }: NavGroupProps): import("react").JSX.Element;
+export declare function NavGroup({ label, action, locked, 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, 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, title, onPrefetch, renderLink, onClick, children, expanded, defaultExpanded, onExpandedChange, expandLabel, className, }: NavItemProps): import("react").JSX.Element;

package/dist/SidebarNav/index.js

@@ -1,4 +1,5 @@
-export { NavGroup, NavItem, SidebarNav } from '../chunk-W7PAIVAP.js';
+export { NavGroup, NavItem, SidebarNav } from '../chunk-E7QLG3PG.js';
+import '../chunk-OHGH7O6T.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{SidebarNav-7SGUZYKK.css → SidebarNav-YI74SPDC.css}

@@ -426,3 +426,13 @@
     transition: none;
   }
 }
+
+/*
+ * A GROUP THE READER HOLDS NONE OF: the key once, after its label (see
+ * `NavGroup`'s `locked`), and its resting rows in the quiet ink, so a closed
+ * column reads as closed at a glance without a key on every row. A pointed
+ * row and the reader's own still lift to the primary step, as every row does.
+ */
+.crewlet-nav-group--locked .crewlet-nav-item__row:not([aria-current]):not(:hover) {
+  color: var(--color-text-tertiary);
+}