@setsquare/ui 0.5.0 → 0.7.0

package/dist/shell/nav-status.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TriangleAlert } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { renderIcon } from '../ui/icon.js';
+// Developer-facing: said once per page.
+let warned = false;
+/** A status with no words to say it would be colour and shape alone: say so in the console. */
+export function warnUnlabelledStatus(component, status, label) {
+    if (!status || label || warned)
+        return;
+    warned = true;
+    console.error(`<${component} status="${status}"> has no statusLabel: the badge is then shown but never said. Give it statusLabel.`);
+}
+/**
+ * The item's icon in a box that holds its status badge. The icon is rendered by `renderIcon`, so a component, an
+ * element or a custom drawing (a progress ring) all work; the box carries the colour, so a drawing that uses
+ * `currentColor` turns brand on the current page even if it ignores `className`.
+ */
+export function NavIcon({ icon, status, className, }) {
+    return (_jsxs("span", { className: cn('nav-icon size-5', className), children: [renderIcon(icon, 'size-5 shrink-0'), status && (_jsx("span", { "aria-hidden": "true", "data-status": status, className: "nav-status" }, status))] }));
+}
+/** The detail as shown: muted and tabular, or the warning colour after a warning icon. Hidden from assistive tech. */
+export function NavDetail({ detail, tone, className, }) {
+    return (_jsxs("span", { "aria-hidden": "true", "data-tone": tone ?? 'neutral', className: cn('inline-flex items-center gap-1 text-[13px] leading-4 font-medium whitespace-nowrap text-muted-foreground tabular-nums', tone === 'warning' && 'font-semibold text-warning', className), children: [tone === 'warning' && _jsx(TriangleAlert, { className: "size-3.5 shrink-0" }), detail] }));
+}
+//# sourceMappingURL=nav-status.js.map

package/dist/shell/nav-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-status.js","sourceRoot":"","sources":["../../src/shell/nav-status.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAiB,MAAM,eAAe,CAAC;AA6B1D,wCAAwC;AACxC,IAAI,MAAM,GAAG,KAAK,CAAC;AACnB,+FAA+F;AAC/F,MAAM,UAAU,oBAAoB,CAAC,SAAiB,EAAE,MAAkB,EAAE,KAAc;IACxF,IAAI,CAAC,MAAM,IAAI,KAAK,IAAI,MAAM;QAAE,OAAO;IACvC,MAAM,GAAG,IAAI,CAAC;IACd,OAAO,CAAC,KAAK,CACX,IAAI,SAAS,YAAY,MAAM,qFAAqF,CACrH,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,IAAI,EACJ,MAAM,EACN,SAAS,GAKV;IACC,OAAO,CACL,gBAAM,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,aAC9C,UAAU,CAAC,IAAI,EAAE,iBAAiB,CAAC,EACnC,MAAM,IAAI,CAET,8BAA+B,MAAM,iBAAc,MAAM,EAAE,SAAS,EAAC,YAAY,IAAtE,MAAM,CAAmE,CACrF,IACI,CACR,CAAC;AACJ,CAAC;AAED,sHAAsH;AACtH,MAAM,UAAU,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,SAAS,GAKV;IACC,OAAO,CACL,+BACc,MAAM,eACP,IAAI,IAAI,SAAS,EAC5B,SAAS,EAAE,EAAE,CACX,uHAAuH,EACvH,IAAI,KAAK,SAAS,IAAI,4BAA4B,EAClD,SAAS,CACV,aAEA,IAAI,KAAK,SAAS,IAAI,KAAC,aAAa,IAAC,SAAS,EAAC,mBAAmB,GAAG,EACrE,MAAM,IACF,CACR,CAAC;AACJ,CAAC"}

package/dist/shell/rail.d.ts

@@ -0,0 +1,73 @@
+import { type ReactNode } from 'react';
+import type { IconProp } from '../ui/icon.js';
+import { type NavItemLiveProps } from './nav-status.js';
+/** The rail's words, for the `labels` prop. App-wide, `SetsquareLabels.rail` over `SetsquareLabels.sidebar`. */
+export interface RailLabels {
+    /** Names the Sheet it becomes on phones; `{product}` is the shell's `productName`. */
+    navigation: string;
+    /** Names the navigation landmark. */
+    primary: string;
+    /** Added to an item's name for its `detail`: "Spend, $1.20". */
+    detail: string;
+    /** The same for a `detailTone="warning"` detail, with words for the warning: "Spend, $1.20, warning". */
+    detailWarning: string;
+    /** Added to an item's name for its `statusLabel`: "Scenes, Claude is working". */
+    status: string;
+}
+export declare const railLabels: RailLabels;
+export interface RailProps {
+    children: ReactNode;
+    labels?: Partial<RailLabels>;
+    className?: string;
+}
+/**
+ * Layout option C: a labelled navigation rail, `--rail-width` wide, used in a DashboardShell instead of Sidebar. Every
+ * item shows its icon over its name, so every destination is visible without the sidebar's width. It never
+ * collapses or expands. On phones it is the same Sheet the Sidebar becomes, with the items as rows. Give the shell
+ * `navigation="rail"`, so AppHeader shows its trigger only where it opens that Sheet.
+ */
+export declare function Rail({ children, labels: given, className }: RailProps): import("react").JSX.Element;
+/** The product's mark, at the top. In the phone's Sheet it sits at the start of the row, as the items do. */
+export declare function RailHeader({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * The items. Scrolls when they are taller than the shell, and is positioned, so the visually hidden group names
+ * inside it scroll with it rather than being laid out against the shell.
+ */
+export declare function RailContent({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/** Pinned to the bottom: help, settings, the account. Put items in a `RailList`, as in a SidebarFooter. */
+export declare function RailFooter({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * A labelled group of items. Its name is visually hidden and names the group for assistive technology; a rule above
+ * it separates it from what comes before. Groups are `role="group"`, not landmarks, so the landmark list stays short.
+ */
+export declare function RailGroup({ label, children, className, }: {
+    label: string;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/** Items outside a group: a list, as a group's are. */
+export declare function RailList({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export type RailItemProps = {
+    href?: string;
+    onPress?: () => void;
+    /** A component, an element, or a drawing of the product's own (a progress ring) that takes `className`. */
+    icon: IconProp;
+    /** The name, always shown under the icon: two lines at most, hyphenated rather than cut off. */
+    children: string;
+    /** Marks the current page: brand-subtle fill, a marker edge, the icon and name in brand at weight 700, and aria-current. */
+    isCurrent?: boolean;
+} & NavItemLiveProps;
+export declare function RailItem({ href, onPress, icon, children, isCurrent, detail, detailTone, status, statusLabel, }: RailItemProps): import("react").JSX.Element;
+//# sourceMappingURL=rail.d.ts.map

package/dist/shell/rail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rail.d.ts","sourceRoot":"","sources":["../../src/shell/rail.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAG9C,OAAO,EAA4C,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAElG,gHAAgH;AAChH,MAAM,WAAW,UAAU;IACzB,sFAAsF;IACtF,UAAU,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,MAAM,EAAE,MAAM,CAAC;IACf,yGAAyG;IACzG,aAAa,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,UAAU,EAAE,UAMxB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,SAAS,+BA4CrE;AAED,6GAA6G;AAC7G,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY9F;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY/F;AAED,2GAA2G;AAC3G,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY9F;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAcA;AAED,uDAAuD;AACvD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAE5F;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2GAA2G;IAC3G,IAAI,EAAE,QAAQ,CAAC;IACf,gGAAgG;IAChG,QAAQ,EAAE,MAAM,CAAC;IACjB,4HAA4H;IAC5H,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,gBAAgB,CAAC;AAErB,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,MAAM,EACN,UAAU,EACV,MAAM,EACN,WAAW,GACZ,EAAE,aAAa,+BAkEf"}

package/dist/shell/rail.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId } from 'react';
+import { Link } from 'react-aria-components';
+import { cn } from '../lib/cn.js';
+import { useLabels } from '../lib/locale.js';
+import { Sheet } from '../ui/sheet.js';
+import { useShell } from './dashboard-shell.js';
+import { NavDetail, NavIcon, warnUnlabelledStatus } from './nav-status.js';
+export const railLabels = {
+    navigation: '{product} navigation',
+    primary: 'Primary',
+    detail: ', {detail}',
+    detailWarning: ', {detail}, warning',
+    status: ', {status}',
+};
+// Developer-facing: said once per page, not once per render.
+let warned = false;
+/**
+ * Layout option C: a labelled navigation rail, `--rail-width` wide, used in a DashboardShell instead of Sidebar. Every
+ * item shows its icon over its name, so every destination is visible without the sidebar's width. It never
+ * collapses or expands. On phones it is the same Sheet the Sidebar becomes, with the items as rows. Give the shell
+ * `navigation="rail"`, so AppHeader shows its trigger only where it opens that Sheet.
+ */
+export function Rail({ children, labels: given, className }) {
+    const { size, mobileNavOpen, setMobileNavOpen, productName, isSizeForced, navigation } = useShell();
+    // The sidebar's app-wide words, then the rail's: a product that switches keeps its translations.
+    const t = useLabels(['sidebar', 'rail'], railLabels, given);
+    useEffect(() => {
+        if (navigation === 'rail' || warned)
+            return;
+        warned = true;
+        console.error('<Rail> is inside a <DashboardShell> without navigation="rail": AppHeader will show a sidebar toggle that does nothing. Pass navigation="rail" to the shell.');
+    }, [navigation]);
+    if (size === 'mobile') {
+        return (_jsx(Sheet, { side: "left", isOpen: mobileNavOpen, onOpenChange: setMobileNavOpen, "aria-label": t('navigation', { product: productName }), children: _jsx("nav", { "aria-label": t('primary'), "data-layout": "rows", className: "group/rail flex h-full min-h-0 flex-col text-sidebar-foreground", children: children }) }));
+    }
+    return (_jsx("nav", { "aria-label": t('primary'), "data-layout": "tiles", style: { viewTransitionName: 'shell-sidebar' }, className: cn('group/rail flex h-full min-h-0 w-rail shrink-0 flex-col text-sidebar-foreground', !isSizeForced && '@max-[48rem]/shell:hidden', className), children: children }));
+}
+/** The product's mark, at the top. In the phone's Sheet it sits at the start of the row, as the items do. */
+export function RailHeader({ children, className }) {
+    return (_jsx("div", { className: cn('flex min-h-[calc(var(--nav-item-height)+12px)] shrink-0 items-center justify-center px-1 pt-3', 'group-data-[layout=rows]/rail:justify-start group-data-[layout=rows]/rail:px-[22px]', className), children: children }));
+}
+/**
+ * The items. Scrolls when they are taller than the shell, and is positioned, so the visually hidden group names
+ * inside it scroll with it rather than being laid out against the shell.
+ */
+export function RailContent({ children, className }) {
+    return (_jsx("div", { className: cn('relative flex min-h-0 flex-1 flex-col gap-(--nav-item-gap) overflow-y-auto px-1 py-3', 'group-data-[layout=rows]/rail:px-3', className), children: children }));
+}
+/** Pinned to the bottom: help, settings, the account. Put items in a `RailList`, as in a SidebarFooter. */
+export function RailFooter({ children, className }) {
+    return (_jsx("div", { className: cn('flex shrink-0 flex-col gap-(--nav-item-gap) border-t border-sidebar-border px-1 py-3', 'group-data-[layout=rows]/rail:px-3', className), children: children }));
+}
+/**
+ * A labelled group of items. Its name is visually hidden and names the group for assistive technology; a rule above
+ * it separates it from what comes before. Groups are `role="group"`, not landmarks, so the landmark list stays short.
+ */
+export function RailGroup({ label, children, className, }) {
+    const id = useId();
+    return (_jsxs("div", { role: "group", "aria-labelledby": id, className: cn('not-first:border-t not-first:border-sidebar-border not-first:pt-3', className), children: [_jsx("h2", { id: id, className: "sr-only", children: label }), _jsx(RailList, { children: children })] }));
+}
+/** Items outside a group: a list, as a group's are. */
+export function RailList({ children, className }) {
+    return _jsx("ul", { className: cn('flex flex-col gap-(--nav-item-gap)', className), children: children });
+}
+export function RailItem({ href, onPress, icon, children, isCurrent, detail, detailTone, status, statusLabel, }) {
+    const t = useLabels(['sidebar', 'rail'], railLabels, undefined);
+    warnUnlabelledStatus('RailItem', status, statusLabel);
+    return (_jsx("li", { children: _jsx(Link, { href: href, onPress: onPress, "aria-current": isCurrent ? 'page' : undefined, className: cn(
+            // Layer 1: the row is the target, the rail's full width and at least --target-min tall.
+            'group/item relative flex min-h-target w-full cursor-pointer items-center text-sidebar-foreground no-underline outline-none'), children: _jsxs("span", { className: cn('relative flex w-full min-w-0 flex-col items-center gap-1 rounded-md px-0.5 py-2', 'group-data-hovered/item:bg-sidebar-accent group-data-hovered/item:text-sidebar-accent-foreground group-data-focus-visible/item:focus-ring', 'group-aria-[current=page]/item:bg-brand-subtle group-aria-[current=page]/item:text-foreground', 
+                // The marker: a 3px edge along the tile's start, an inset shadow so it follows the rounded corners.
+                'group-aria-[current=page]/item:shadow-[inset_3px_0_0_var(--sidebar-primary)]', 
+                // Hovered, the current page keeps its fill: the hover ground under brand text would be a pair the audit doesn't
+                // promise. Stacked variants, so this is more specific than the hover rule whatever order they're written in.
+                'group-data-hovered/item:group-aria-[current=page]/item:bg-brand-subtle group-data-hovered/item:group-aria-[current=page]/item:text-foreground', 
+                // Forced colours drop shadows and fills: there the marker is a bar in Highlight.
+                'forced-colors:group-aria-[current=page]/item:before:absolute forced-colors:group-aria-[current=page]/item:before:inset-y-0 forced-colors:group-aria-[current=page]/item:before:start-0 forced-colors:group-aria-[current=page]/item:before:w-[3px] forced-colors:group-aria-[current=page]/item:before:rounded-s-md forced-colors:group-aria-[current=page]/item:before:bg-[Highlight] forced-colors:group-aria-[current=page]/item:before:forced-color-adjust-none', 
+                // In the phone's Sheet, a row: the icon beside the name, as the Sidebar's are.
+                'group-data-[layout=rows]/rail:min-h-nav-item group-data-[layout=rows]/rail:flex-row group-data-[layout=rows]/rail:gap-3 group-data-[layout=rows]/rail:px-3 group-data-[layout=rows]/rail:py-0', 
+                // The status badge's cut-out follows the ground: the rail, the hovered tile, the current one.
+                '[--nav-cut:var(--sidebar)] group-data-hovered/item:[--nav-cut:var(--sidebar-accent)] group-aria-[current=page]/item:[--nav-cut:var(--brand-subtle)] group-data-hovered/item:group-aria-[current=page]/item:[--nav-cut:var(--brand-subtle)]'), children: [_jsx(NavIcon, { icon: icon, status: status, className: "group-aria-[current=page]/item:text-brand" }), _jsxs("span", { "data-name": "", className: cn('w-full min-w-0 text-center text-[13px] leading-4 font-medium [overflow-wrap:anywhere] hyphens-auto', 'group-aria-[current=page]/item:font-bold group-aria-[current=page]/item:text-brand', 'group-data-[layout=rows]/rail:flex-1 group-data-[layout=rows]/rail:text-start group-data-[layout=rows]/rail:text-sm group-data-[layout=rows]/rail:leading-5'), children: [children, detail && (_jsx("span", { className: "sr-only", children: t(detailTone === 'warning' ? 'detailWarning' : 'detail', { detail }) })), statusLabel && _jsx("span", { className: "sr-only", children: t('status', { status: statusLabel }) })] }), detail && (_jsx(NavDetail, { detail: detail, tone: detailTone, 
+                        // Under the name in a tile, wrapping rather than running out of it; after the name in a row.
+                        className: "max-w-full flex-wrap justify-center text-center whitespace-normal [overflow-wrap:anywhere] group-data-[layout=rows]/rail:whitespace-nowrap" }))] }) }) }));
+}
+//# sourceMappingURL=rail.js.map

package/dist/shell/rail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rail.js","sourceRoot":"","sources":["../../src/shell/rail.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,KAAK,EAAkB,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,oBAAoB,EAAyB,MAAM,iBAAiB,CAAC;AAgBlG,MAAM,CAAC,MAAM,UAAU,GAAe;IACpC,UAAU,EAAE,sBAAsB;IAClC,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,YAAY;IACpB,aAAa,EAAE,qBAAqB;IACpC,MAAM,EAAE,YAAY;CACrB,CAAC;AAQF,6DAA6D;AAC7D,IAAI,MAAM,GAAG,KAAK,CAAC;AAEnB;;;;;GAKG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAa;IACpE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,GACpF,QAAQ,EAAE,CAAC;IACb,iGAAiG;IACjG,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;IAC5D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,KAAK,MAAM,IAAI,MAAM;YAAE,OAAO;QAC5C,MAAM,GAAG,IAAI,CAAC;QACd,OAAO,CAAC,KAAK,CACX,6JAA6J,CAC9J,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACjB,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;QACtB,OAAO,CACL,KAAC,KAAK,IACJ,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,aAAa,EACrB,YAAY,EAAE,gBAAgB,gBAClB,CAAC,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,YAErD,4BACc,CAAC,CAAC,SAAS,CAAC,iBACZ,MAAM,EAClB,SAAS,EAAC,iEAAiE,YAE1E,QAAQ,GACL,GACA,CACT,CAAC;IACJ,CAAC;IACD,OAAO,CACL,4BACc,CAAC,CAAC,SAAS,CAAC,iBACZ,OAAO,EACnB,KAAK,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAC9C,SAAS,EAAE,EAAE,CACX,iFAAiF,EACjF,CAAC,YAAY,IAAI,2BAA2B,EAC5C,SAAS,CACV,YAEA,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,6GAA6G;AAC7G,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA+C;IAC7F,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,+FAA+F,EAC/F,qFAAqF,EACrF,SAAS,CACV,YAEA,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA+C;IAC9F,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,sFAAsF,EACtF,oCAAoC,EACpC,SAAS,CACV,YAEA,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,2GAA2G;AAC3G,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA+C;IAC7F,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,sFAAsF,EACtF,oCAAoC,EACpC,SAAS,CACV,YAEA,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,SAAS,GAKV;IACC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,OAAO,CACL,eACE,IAAI,EAAC,OAAO,qBACK,EAAE,EACnB,SAAS,EAAE,EAAE,CAAC,mEAAmE,EAAE,SAAS,CAAC,aAE7F,aAAI,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,SAAS,YAC5B,KAAK,GACH,EACL,KAAC,QAAQ,cAAE,QAAQ,GAAY,IAC3B,CACP,CAAC;AACJ,CAAC;AAED,uDAAuD;AACvD,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA+C;IAC3F,OAAO,aAAI,SAAS,EAAE,EAAE,CAAC,oCAAoC,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAM,CAAC;AAC7F,CAAC;AAaD,MAAM,UAAU,QAAQ,CAAC,EACvB,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,MAAM,EACN,UAAU,EACV,MAAM,EACN,WAAW,GACG;IACd,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;IAChE,oBAAoB,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;IACtD,OAAO,CACL,uBACE,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,kBACF,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,EAAE,EAAE;YACX,wFAAwF;YACxF,4HAA4H,CAC7H,YAGD,gBACE,SAAS,EAAE,EAAE,CACX,iFAAiF,EACjF,2IAA2I,EAC3I,+FAA+F;gBAC/F,oGAAoG;gBACpG,8EAA8E;gBAC9E,gHAAgH;gBAChH,6GAA6G;gBAC7G,+IAA+I;gBAC/I,iFAAiF;gBACjF,qcAAqc;gBACrc,+EAA+E;gBAC/E,+LAA+L;gBAC/L,8FAA8F;gBAC9F,4OAA4O,CAC7O,aAED,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,2CAA2C,GACrD,EACF,6BACY,EAAE,EACZ,SAAS,EAAE,EAAE,CACX,oGAAoG,EACpG,oFAAoF,EACpF,6JAA6J,CAC9J,aAEA,QAAQ,EACR,MAAM,IAAI,CACT,eAAM,SAAS,EAAC,SAAS,YACtB,CAAC,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,GAChE,CACR,EACA,WAAW,IAAI,eAAM,SAAS,EAAC,SAAS,YAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,GAAQ,IAClF,EACN,MAAM,IAAI,CACT,KAAC,SAAS,IACR,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,UAAU;wBAChB,6FAA6F;wBAC7F,SAAS,EAAC,4IAA4I,GACtJ,CACH,IACI,GACF,GACJ,CACN,CAAC;AACJ,CAAC"}

package/dist/shell/right-panel.d.ts

@@ -1,9 +1,12 @@
 import { type ReactNode } from 'react';
 /** The panel's words, for the `labels` prop. */
 export interface RightPanelLabels {
-    /** Its close button; `{title}` is the panel's title in lower case. */
+    /** Its close button; `{title}` is the panel's title, as written. */
     close: string;
+    /** PanelToggle's name. */
+    toggle: string;
 }
+export declare const rightPanelLabels: RightPanelLabels;
 export interface RightPanelProps {
     /** The panel's heading; also names the landmark or dialog. */
     title: string;
@@ -19,8 +22,10 @@ export interface RightPanelProps {
  */
 export declare function RightPanel({ title, children, footer, labels: given, className }: RightPanelProps): import("react").JSX.Element | null;
 /** Shows and hides the right panel. Put it in the page actions. */
-export declare function PanelToggle({ label }: {
+export declare function PanelToggle({ label, labels, }: {
+    /** @deprecated Use `labels.toggle`. Kept for one release. */
     label?: string;
+    labels?: Partial<RightPanelLabels>;
 }): import("react").JSX.Element;
 /** A titled group inside the panel. */
 export declare function PanelSection({ title, children, className, }: {

package/dist/shell/right-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"right-panel.d.ts","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAQ9D,gDAAgD;AAChD,MAAM,WAAW,gBAAgB;IAC/B,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;CACf;AAID,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,eAAe,sCA4DhG;AAED,mEAAmE;AACnE,wBAAgB,WAAW,CAAC,EAAE,KAAuB,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAa1E;AAED,uCAAuC;AACvC,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAOA"}
+{"version":3,"file":"right-panel.d.ts","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAS9D,gDAAgD;AAChD,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAG9B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,eAAe,sCA6DhG;AAED,mEAAmE;AACnE,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,GACP,EAAE;IACD,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACpC,+BAcA;AAED,uCAAuC;AACvC,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAOA"}

package/dist/shell/right-panel.js

@@ -3,35 +3,41 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
 import { PanelRight, X } from 'lucide-react';
 import { cn } from '../lib/cn.js';
-import { fill, withLabels } from '../lib/labels.js';
+import { literal } from '../lib/labels.js';
+import { useLabels } from '../lib/locale.js';
 import { IconButton } from '../ui/icon-button.js';
 import { Sheet } from '../ui/sheet.js';
 import { useShell } from './dashboard-shell.js';
-const rightPanelLabels = { close: 'Close {title}' };
+export const rightPanelLabels = {
+    close: 'Close {title}',
+    toggle: 'Details panel',
+};
 /**
  * Extra information about the current selection. An <aside> beside main on wide shells,
  * a Sheet (modal dialog) on narrow ones. Closing returns focus to the PanelToggle.
  */
 export function RightPanel({ title, children, footer, labels: given, className }) {
-    const labels = withLabels(rightPanelLabels, given);
+    const t = useLabels('rightPanel', rightPanelLabels, given);
+    const close = t('close', { title });
     const { panelOpen, setPanelOpen, panelMode, panelToggleRef, isSizeForced } = useShell();
     const headingId = useId();
     const foot = footer ? (_jsx("div", { className: "flex gap-(--control-gap) border-t border-border px-4 py-3 *:flex-1", children: footer })) : null;
     const body = (_jsx("div", { className: "relative flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto p-4", children: children }));
     if (panelMode === 'sheet') {
-        return (_jsx(Sheet, { side: "right", title: title, labels: { close: fill(labels.close, { title: title.toLowerCase() }) }, isOpen: panelOpen, onOpenChange: setPanelOpen, footer: foot, children: body }));
+        return (_jsx(Sheet, { side: "right", title: title, labels: { close: literal(close) }, isOpen: panelOpen, onOpenChange: setPanelOpen, footer: foot, children: body }));
     }
     if (!panelOpen)
         return null;
-    return (_jsxs("aside", { "aria-labelledby": headingId, style: { viewTransitionName: 'shell-panel' }, className: cn('flex w-panel shrink-0 flex-col border-l border-border bg-card text-card-foreground', !isSizeForced && '@max-[64rem]/shell:hidden', className), children: [_jsxs("div", { className: "flex min-h-[calc(var(--control-height)+1rem)] items-center justify-between gap-2 border-b border-border py-2 pr-2 pl-4", children: [_jsx("h2", { id: headingId, className: "text-subheading", children: title }), _jsx(IconButton, { label: fill(labels.close, { title: title.toLowerCase() }), icon: X, visualSize: "icon-sm", tooltip: false, className: "justify-end", onPress: () => {
+    return (_jsxs("aside", { "aria-labelledby": headingId, style: { viewTransitionName: 'shell-panel' }, className: cn('flex w-panel shrink-0 flex-col border-l border-border bg-card text-card-foreground', !isSizeForced && '@max-[64rem]/shell:hidden', className), children: [_jsxs("div", { className: "flex min-h-[calc(var(--control-height)+1rem)] items-center justify-between gap-2 border-b border-border py-2 pr-2 pl-4", children: [_jsx("h2", { id: headingId, className: "text-subheading", children: title }), _jsx(IconButton, { label: close, icon: X, visualSize: "icon-sm", tooltip: false, className: "justify-end", onPress: () => {
                             setPanelOpen(false);
                             requestAnimationFrame(() => panelToggleRef.current?.focus());
                         } })] }), body, foot] }));
 }
 /** Shows and hides the right panel. Put it in the page actions. */
-export function PanelToggle({ label = 'Details panel' }) {
+export function PanelToggle({ label, labels, }) {
+    const t = useLabels('rightPanel', rightPanelLabels, labels);
     const { panelOpen, setPanelOpen, panelToggleRef, panelMode } = useShell();
-    return (_jsx(IconButton, { ref: panelToggleRef, label: label, icon: PanelRight, variant: "outline", "aria-expanded": panelMode === 'inline' ? panelOpen : undefined, "aria-haspopup": panelMode === 'sheet' ? 'dialog' : undefined, onPress: () => setPanelOpen(!panelOpen) }));
+    return (_jsx(IconButton, { ref: panelToggleRef, label: label ?? t('toggle'), icon: PanelRight, variant: "outline", "aria-expanded": panelMode === 'inline' ? panelOpen : undefined, "aria-haspopup": panelMode === 'sheet' ? 'dialog' : undefined, onPress: () => setPanelOpen(!panelOpen) }));
 }
 /** A titled group inside the panel. */
 export function PanelSection({ title, children, className, }) {

package/dist/shell/right-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"right-panel.js","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"right-panel.js","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"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"}

package/dist/shell/sidebar.d.ts

@@ -1,16 +1,36 @@
 import { type ReactNode } from 'react';
 import { type Key } from 'react-aria-components';
 import { type IconProp } from '../ui/icon.js';
+import { type NavItemLiveProps } from './nav-status.js';
 /** True when the sidebar shows icons only (never inside the mobile Sheet). */
 export declare const useSidebarCollapsed: () => boolean;
 /** The sidebar's words, for the `labels` prop. */
 export interface SidebarLabels {
     /** Names the Sheet it becomes on phones; `{product}` is the shell's `productName`. */
     navigation: string;
+    /** Names the navigation landmark. */
+    primary: string;
+    /** Added to an item's name for its count, which shows as a number only: "Projects, 12". */
+    count: string;
+    /** A collapsed item's tooltip, with its count: "Projects (12)". */
+    tipCount: string;
+    /** Added to an item's name for its `detail`: "Spend, $1.20". */
+    detail: string;
+    /** The same for a `detailTone="warning"` detail, with words for the warning: "Spend, $1.20, warning". */
+    detailWarning: string;
+    /** Added to an item's name for its `statusLabel`: "Drafts, A draft is waiting for you". */
+    status: string;
+    /** A collapsed item's tooltip with its detail: `{name}` is the tooltip so far. "Spend ($1.20)". */
+    tipDetail: string;
+    /** The same for a warning detail: "Spend ($1.20, warning)". */
+    tipDetailWarning: string;
+    /** A collapsed item's tooltip with its status: `{tip}` is the tooltip so far. "Scenes: Claude is working". */
+    tipStatus: string;
 }
+export declare const sidebarLabels: SidebarLabels;
 export interface SidebarProps {
     children: ReactNode;
-    /** Names the navigation landmark. */
+    /** @deprecated Use `labels.primary`. Kept for one release. */
     label?: string;
     labels?: Partial<SidebarLabels>;
     className?: string;
@@ -19,7 +39,7 @@ export interface SidebarProps {
  * The full-height sidebar. Expanded, collapsed to icons (labels stay in the accessibility tree
  * and show as tooltips), or — on phones — a Sheet opened from the header.
  */
-export declare function Sidebar({ children, label, labels: given, className }: SidebarProps): import("react").JSX.Element;
+export declare function Sidebar({ children, label: givenLabel, labels: given, className }: SidebarProps): import("react").JSX.Element;
 export declare function SidebarHeader({ children, className, }: {
     children: ReactNode;
     className?: string;
@@ -42,17 +62,25 @@ export declare function SidebarList({ children, className }: {
     children: ReactNode;
     className?: string;
 }): import("react").JSX.Element;
-export interface SidebarItemProps {
+export type SidebarItemProps = {
     href?: string;
+    /** A component, an element, or a drawing of the product's own (a progress ring) that takes `className`. */
     icon: IconProp;
     children: string;
-    /** Marks the current page: brand-subtle fill, marker bar and weight 700, plus aria-current. */
+    /** Marks the current page: brand-subtle fill, a marker edge, the icon and name in brand at weight 700, and aria-current. */
     isCurrent?: boolean;
     /** Shown beside the label and read as part of it: "Projects, 12". */
     count?: number;
     onPress?: () => void;
-}
-export declare function SidebarItem({ href, icon, children, isCurrent, count, onPress }: SidebarItemProps): import("react").JSX.Element;
+} & NavItemLiveProps;
+/** A collapsed item's tooltip: its name, then its count, detail and status, each through its own template. */
+export declare function navTooltip(t: (key: 'tipCount' | 'tipDetail' | 'tipDetailWarning' | 'tipStatus', values: Record<string, string | number>) => string, name: string, { count, detail, detailTone, statusLabel, }: {
+    count?: number;
+    detail?: string;
+    detailTone?: string;
+    statusLabel?: string;
+}): string;
+export declare function SidebarItem({ href, icon, children, isCurrent, count, onPress, detail, detailTone, status, statusLabel, }: SidebarItemProps): import("react").JSX.Element;
 export interface SidebarSubItem {
     href: string;
     label: string;
@@ -97,9 +125,14 @@ export interface SidebarTriggerLabels {
     /** Wider, where it collapses the sidebar to icons and back. */
     toggleSidebar: string;
 }
-/** Collapses the sidebar to icons, or opens it as a Sheet on phones. */
+export declare const sidebarTriggerLabels: SidebarTriggerLabels;
+/**
+ * Collapses the sidebar to icons, or opens it as a Sheet on phones. In a shell with `navigation="rail"` there is
+ * nothing to collapse, so it is only there on phones, where it opens the rail's Sheet: before the shell has measured
+ * itself a container query hides it from bp-md up, and once it has (or its size is forced) it isn't rendered there.
+ */
 export declare function SidebarTrigger({ labels: given, className, }: {
     labels?: Partial<SidebarTriggerLabels>;
     className?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 //# sourceMappingURL=sidebar.d.ts.map

package/dist/shell/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/shell/sidebar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/shell/sidebar.tsx"],"names":[],"mappings":"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"}

package/dist/shell/sidebar.js

@@ -1,29 +1,42 @@
 'use client';
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useId } from 'react';
-import { Button as RACButton, Disclosure as RACDisclosure, DisclosurePanel, Link, } from 'react-aria-components';
+import { Button as RACButton, Disclosure as RACDisclosure, DisclosurePanel, Link, useLocale, } from 'react-aria-components';
 import { ChevronDown, ChevronsUpDown, Menu as MenuIcon, PanelLeft } from 'lucide-react';
 import { cn } from '../lib/cn.js';
-import { fill, withLabels } from '../lib/labels.js';
+import { useLabels } from '../lib/locale.js';
 import { IconButton } from '../ui/icon-button.js';
 import { renderIcon } from '../ui/icon.js';
 import { Menu, MenuItem, MenuTrigger, Popover } from '../ui/menu.js';
 import { Sheet } from '../ui/sheet.js';
 import { Tooltip, TooltipTrigger } from '../ui/tooltip.js';
 import { useShell } from './dashboard-shell.js';
+import { NavDetail, NavIcon, warnUnlabelledStatus } from './nav-status.js';
 const SidebarCollapsedContext = createContext(false);
 /** True when the sidebar shows icons only (never inside the mobile Sheet). */
 export const useSidebarCollapsed = () => useContext(SidebarCollapsedContext);
-const sidebarLabels = { navigation: '{product} navigation' };
+export const sidebarLabels = {
+    navigation: '{product} navigation',
+    primary: 'Primary',
+    count: ', {count, number}',
+    tipCount: '{name} ({count, number})',
+    detail: ', {detail}',
+    detailWarning: ', {detail}, warning',
+    status: ', {status}',
+    tipDetail: '{name} ({detail})',
+    tipDetailWarning: '{name} ({detail}, warning)',
+    tipStatus: '{tip}: {status}',
+};
 /**
  * The full-height sidebar. Expanded, collapsed to icons (labels stay in the accessibility tree
  * and show as tooltips), or — on phones — a Sheet opened from the header.
  */
-export function Sidebar({ children, label = 'Primary', labels: given, className }) {
+export function Sidebar({ children, label: givenLabel, labels: given, className }) {
     const { size, sidebarCollapsed, mobileNavOpen, setMobileNavOpen, productName, isSizeForced } = useShell();
-    const labels = withLabels(sidebarLabels, given);
+    const t = useLabels('sidebar', sidebarLabels, given);
+    const label = givenLabel ?? t('primary');
     if (size === 'mobile') {
-        return (_jsx(Sheet, { side: "left", isOpen: mobileNavOpen, onOpenChange: setMobileNavOpen, "aria-label": fill(labels.navigation, { product: productName }), children: _jsx(SidebarCollapsedContext.Provider, { value: false, children: _jsx("nav", { "aria-label": label, className: "flex h-full min-h-0 flex-col text-sidebar-foreground", children: children }) }) }));
+        return (_jsx(Sheet, { side: "left", isOpen: mobileNavOpen, onOpenChange: setMobileNavOpen, "aria-label": t('navigation', { product: productName }), children: _jsx(SidebarCollapsedContext.Provider, { value: false, children: _jsx("nav", { "aria-label": label, className: "flex h-full min-h-0 flex-col text-sidebar-foreground", children: children }) }) }));
     }
     return (_jsx(SidebarCollapsedContext.Provider, { value: sidebarCollapsed, children: _jsx("nav", { "aria-label": label, "data-collapsed": sidebarCollapsed || undefined, style: { viewTransitionName: 'shell-sidebar' }, className: cn('group/sidebar flex h-full min-h-0 w-sidebar shrink-0 flex-col text-sidebar-foreground', 'transition-[width] duration-(--duration-panel) ease-(--ease-standard) motion-reduce:transition-none aaa:transition-none', 'data-collapsed:w-sidebar-collapsed', !isSizeForced && '@max-[48rem]/shell:hidden', className), children: children }) }));
 }
@@ -46,12 +59,33 @@ export function SidebarGroup({ label, children, className, }) {
 export function SidebarList({ children, className }) {
     return _jsx("ul", { className: cn('flex flex-col gap-(--nav-item-gap)', className), children: children });
 }
-export function SidebarItem({ href, icon, children, isCurrent, count, onPress }) {
+/** A collapsed item's tooltip: its name, then its count, detail and status, each through its own template. */
+export function navTooltip(t, name, { count, detail, detailTone, statusLabel, }) {
+    let tip = count != null ? t('tipCount', { name, count }) : name;
+    if (detail)
+        tip = t(detailTone === 'warning' ? 'tipDetailWarning' : 'tipDetail', { name: tip, detail });
+    if (statusLabel)
+        tip = t('tipStatus', { tip, status: statusLabel });
+    return tip;
+}
+export function SidebarItem({ href, icon, children, isCurrent, count, onPress, detail, detailTone, status, statusLabel, }) {
     const collapsed = useSidebarCollapsed();
+    const t = useLabels('sidebar', sidebarLabels, undefined);
+    const { locale } = useLocale();
+    warnUnlabelledStatus('SidebarItem', status, statusLabel);
     const link = (_jsx(Link, { href: href, onPress: onPress, "aria-current": isCurrent ? 'page' : undefined, className: cn(
         // Layer 1: the row is the target, full width and at least --target-min tall.
-        'group/item relative flex min-h-target w-full cursor-pointer items-center text-sm font-medium text-sidebar-foreground no-underline outline-none', 'group-data-collapsed/sidebar:justify-center'), children: _jsxs("span", { className: cn('relative flex min-h-nav-item w-full min-w-0 items-center gap-3 rounded-md px-3', 'group-data-hovered/item:bg-sidebar-accent group-data-hovered/item:text-sidebar-accent-foreground group-data-focus-visible/item:focus-ring', 'group-aria-[current=page]/item:bg-brand-subtle group-aria-[current=page]/item:font-bold group-aria-[current=page]/item:text-foreground', 'group-aria-[current=page]/item:before:absolute group-aria-[current=page]/item:before:inset-y-2 group-aria-[current=page]/item:before:left-0 group-aria-[current=page]/item:before:w-[3px] group-aria-[current=page]/item:before:rounded-full group-aria-[current=page]/item:before:bg-sidebar-primary', 'group-data-collapsed/sidebar:w-nav-item group-data-collapsed/sidebar:justify-center group-data-collapsed/sidebar:px-0'), children: [renderIcon(icon, 'size-5 shrink-0 group-aria-[current=page]/item:text-brand'), _jsxs("span", { className: "min-w-0 flex-1 truncate group-data-collapsed/sidebar:sr-only", children: [children, count != null && _jsxs("span", { className: "sr-only", children: [", ", count] })] }), count != null && (_jsx("span", { "aria-hidden": "true", className: "text-[13px] font-medium text-muted-foreground tabular-nums group-data-collapsed/sidebar:hidden", children: count }))] }) }));
-    return (_jsx("li", { children: collapsed ? (_jsxs(TooltipTrigger, { delay: 300, children: [link, _jsx(Tooltip, { placement: "right", children: count != null ? `${children} (${count})` : children })] })) : (link) }));
+        'group/item relative flex min-h-target w-full cursor-pointer items-center text-sm font-medium text-sidebar-foreground no-underline outline-none', 'group-data-collapsed/sidebar:justify-center'), children: _jsxs("span", { className: cn('relative flex min-h-nav-item w-full min-w-0 items-center gap-3 rounded-md px-3', 'group-data-hovered/item:bg-sidebar-accent group-data-hovered/item:text-sidebar-accent-foreground group-data-focus-visible/item:focus-ring', 
+            // The current page, as RailItem marks it: the fill, the name in brand at weight 700, and a 3px edge along
+            // the start, an inset shadow so it follows the rounded corners. Forced colours drop shadows and fills, so
+            // there the edge is a bar in Highlight.
+            'group-aria-[current=page]/item:bg-brand-subtle group-aria-[current=page]/item:font-bold group-aria-[current=page]/item:text-brand', 'group-aria-[current=page]/item:shadow-[inset_3px_0_0_var(--sidebar-primary)]', 
+            // Hovered, the current page keeps its fill: the hover ground under brand text would be a pair the audit doesn't
+            // promise. Stacked variants, so this is more specific than the hover rule whatever order they're written in.
+            'group-data-hovered/item:group-aria-[current=page]/item:bg-brand-subtle group-data-hovered/item:group-aria-[current=page]/item:text-brand', 'forced-colors:group-aria-[current=page]/item:before:absolute forced-colors:group-aria-[current=page]/item:before:inset-y-0 forced-colors:group-aria-[current=page]/item:before:start-0 forced-colors:group-aria-[current=page]/item:before:w-[3px] forced-colors:group-aria-[current=page]/item:before:rounded-s-md forced-colors:group-aria-[current=page]/item:before:bg-[Highlight] forced-colors:group-aria-[current=page]/item:before:forced-color-adjust-none', 'group-data-collapsed/sidebar:w-nav-item group-data-collapsed/sidebar:justify-center group-data-collapsed/sidebar:px-0', 
+            // The status badge's cut-out follows the ground: the sidebar, the hovered row, the current one.
+            '[--nav-cut:var(--sidebar)] group-data-hovered/item:[--nav-cut:var(--sidebar-accent)] group-aria-[current=page]/item:[--nav-cut:var(--brand-subtle)] group-data-hovered/item:group-aria-[current=page]/item:[--nav-cut:var(--brand-subtle)]'), children: [_jsx(NavIcon, { icon: icon, status: status, className: "group-aria-[current=page]/item:text-brand" }), _jsxs("span", { className: "min-w-0 flex-1 truncate group-data-collapsed/sidebar:sr-only", children: [children, count != null && _jsx("span", { className: "sr-only", children: t('count', { count }) }), detail && (_jsx("span", { className: "sr-only", children: t(detailTone === 'warning' ? 'detailWarning' : 'detail', { detail }) })), statusLabel && _jsx("span", { className: "sr-only", children: t('status', { status: statusLabel }) })] }), count != null && (_jsx("span", { "aria-hidden": "true", className: "text-[13px] font-medium text-muted-foreground tabular-nums group-data-collapsed/sidebar:hidden", children: new Intl.NumberFormat(locale).format(count) })), detail && (_jsx(NavDetail, { detail: detail, tone: detailTone, className: "shrink-0 group-data-collapsed/sidebar:hidden" }))] }) }));
+    return (_jsx("li", { children: collapsed ? (_jsxs(TooltipTrigger, { delay: 300, children: [link, _jsx(Tooltip, { placement: "right", children: navTooltip(t, children, { count, detail, detailTone, statusLabel }) })] })) : (link) }));
 }
 /**
  * A sidebar row with rows under it. Expanded (and in the phone's Sheet), the row is a button that opens and closes
@@ -70,27 +104,47 @@ export function SidebarDisclosure({ icon, children, items, defaultExpanded, }) {
     if (collapsed) {
         return (_jsx("li", { children: _jsxs(MenuTrigger, { children: [_jsxs(TooltipTrigger, { delay: 300, children: [_jsx(RACButton, { className: target, children: _jsxs("span", { className: paint, children: [renderIcon(icon, iconClass), _jsx("span", { className: "sr-only", children: children })] }) }), _jsx(Tooltip, { placement: "right", children: children })] }), _jsx(Popover, { placement: "right top", className: "min-w-56", children: _jsx(Menu, { "aria-label": children, selectionMode: "single", selectedKeys: current ? [current.href] : [], children: items.map((item) => (_jsx(MenuItem, { id: item.href, href: item.href, children: item.label }, item.href))) }) })] }) }));
     }
-    return (_jsx("li", { children: _jsxs(RACDisclosure, { defaultExpanded: defaultExpanded ?? !!current, className: "group/disclosure", children: [_jsx(RACButton, { slot: "trigger", className: target, children: _jsxs("span", { className: paint, children: [renderIcon(icon, iconClass), _jsx("span", { className: "min-w-0 flex-1 truncate", children: children }), _jsx(ChevronDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground group-data-expanded/disclosure:rotate-180" })] }) }), _jsx(DisclosurePanel, { children: _jsx("ul", { className: "flex flex-col gap-(--nav-item-gap) pt-(--nav-item-gap)", children: items.map((item) => (_jsx("li", { children: _jsx(Link, { href: item.href, "aria-current": item.isCurrent ? 'page' : undefined, className: "group/sub relative flex min-h-target w-full cursor-pointer items-center text-sm font-medium text-sidebar-foreground no-underline outline-none", children: _jsx("span", { className: cn('relative flex min-h-nav-item w-full min-w-0 items-center rounded-md ps-11 pe-3', 'group-data-hovered/sub:bg-sidebar-accent group-data-hovered/sub:text-sidebar-accent-foreground group-data-focus-visible/sub:focus-ring', 'group-aria-[current=page]/sub:bg-brand-subtle group-aria-[current=page]/sub:font-bold group-aria-[current=page]/sub:text-foreground', 'group-aria-[current=page]/sub:before:absolute group-aria-[current=page]/sub:before:inset-y-2 group-aria-[current=page]/sub:before:left-0 group-aria-[current=page]/sub:before:w-[3px] group-aria-[current=page]/sub:before:rounded-full group-aria-[current=page]/sub:before:bg-sidebar-primary'), children: _jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }) }) }) }, item.href))) }) })] }) }));
+    return (_jsx("li", { children: _jsxs(RACDisclosure, { defaultExpanded: defaultExpanded ?? !!current, className: "group/disclosure", children: [_jsx(RACButton, { slot: "trigger", className: target, children: _jsxs("span", { className: paint, children: [renderIcon(icon, iconClass), _jsx("span", { className: "min-w-0 flex-1 truncate", children: children }), _jsx(ChevronDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground group-data-expanded/disclosure:rotate-180" })] }) }), _jsx(DisclosurePanel, { children: _jsx("ul", { className: "flex flex-col gap-(--nav-item-gap) pt-(--nav-item-gap)", children: items.map((item) => (_jsx("li", { children: _jsx(Link, { href: item.href, "aria-current": item.isCurrent ? 'page' : undefined, className: "group/sub relative flex min-h-target w-full cursor-pointer items-center text-sm font-medium text-sidebar-foreground no-underline outline-none", children: _jsx("span", { className: cn('relative flex min-h-nav-item w-full min-w-0 items-center rounded-md ps-11 pe-3', 'group-data-hovered/sub:bg-sidebar-accent group-data-hovered/sub:text-sidebar-accent-foreground group-data-focus-visible/sub:focus-ring', 
+                                    // The current page, as RailItem marks it: the fill, the name in brand at weight 700, and a 3px edge along
+                                    // the start, an inset shadow so it follows the rounded corners. Forced colours drop shadows and fills, so
+                                    // there the edge is a bar in Highlight.
+                                    'group-aria-[current=page]/sub:bg-brand-subtle group-aria-[current=page]/sub:font-bold group-aria-[current=page]/sub:text-brand', 'group-aria-[current=page]/sub:shadow-[inset_3px_0_0_var(--sidebar-primary)]', 'group-data-hovered/sub:group-aria-[current=page]/sub:bg-brand-subtle group-data-hovered/sub:group-aria-[current=page]/sub:text-brand', 'forced-colors:group-aria-[current=page]/sub:before:absolute forced-colors:group-aria-[current=page]/sub:before:inset-y-0 forced-colors:group-aria-[current=page]/sub:before:start-0 forced-colors:group-aria-[current=page]/sub:before:w-[3px] forced-colors:group-aria-[current=page]/sub:before:rounded-s-md forced-colors:group-aria-[current=page]/sub:before:bg-[Highlight] forced-colors:group-aria-[current=page]/sub:before:forced-color-adjust-none'), children: _jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }) }) }) }, item.href))) }) })] }) }));
 }
 /** A sidebar row that opens a menu: the workspace switcher at the top, the account menu at the foot. */
 export function SidebarSwitcher({ leading, title, subtitle, menuLabel, children, onAction, selectedKey, placement = 'bottom start', }) {
     const collapsed = useSidebarCollapsed();
     // Named by its content, not an aria-label: the title and subtitle as shown, then the menu's purpose, so the
-    // name always contains the visible text (2.5.3). The commas are for the name; the layout already separates them.
+    // name always contains the visible text (2.5.3). They are a list in the locale's punctuation, which is for the
+    // name only; the layout already separates them.
+    const { locale } = useLocale();
+    const parts = new Intl.ListFormat(locale, { type: 'unit', style: 'short' }).formatToParts(subtitle ? [title, subtitle, menuLabel] : [title, menuLabel]);
+    let element = -1;
     const button = (_jsx(RACButton, { className: cn(
         // Layer 1: the target. Collapsed, it keeps at least --target-min across the rail.
-        'group/switcher flex min-h-target w-full min-w-target cursor-pointer items-center text-left outline-none', 'group-data-collapsed/sidebar:justify-center'), children: _jsxs("span", { className: cn('flex min-h-[calc(var(--nav-item-height)+12px)] w-full min-w-0 items-center gap-3 rounded-md px-2', 'group-data-hovered/switcher:bg-sidebar-accent group-data-pressed/switcher:bg-sidebar-accent group-data-focus-visible/switcher:focus-ring', 'group-data-collapsed/sidebar:w-nav-item group-data-collapsed/sidebar:justify-center group-data-collapsed/sidebar:px-0'), children: [leading, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col group-data-collapsed/sidebar:sr-only", children: [_jsx("span", { className: "truncate text-sm leading-5 font-bold", children: title }), subtitle && (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: ", " }), _jsx("span", { className: "truncate text-[13px] leading-5 text-muted-foreground", children: subtitle })] })), _jsxs("span", { className: "sr-only", children: [", ", menuLabel] })] }), _jsx(ChevronsUpDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground group-data-collapsed/sidebar:hidden" })] }) }));
+        'group/switcher flex min-h-target w-full min-w-target cursor-pointer items-center text-left outline-none', 'group-data-collapsed/sidebar:justify-center'), children: _jsxs("span", { className: cn('flex min-h-[calc(var(--nav-item-height)+12px)] w-full min-w-0 items-center gap-3 rounded-md px-2', 'group-data-hovered/switcher:bg-sidebar-accent group-data-pressed/switcher:bg-sidebar-accent group-data-focus-visible/switcher:focus-ring', 'group-data-collapsed/sidebar:w-nav-item group-data-collapsed/sidebar:justify-center group-data-collapsed/sidebar:px-0'), children: [leading, _jsx("span", { className: "flex min-w-0 flex-1 flex-col group-data-collapsed/sidebar:sr-only", children: parts.map((part, i) => {
+                        if (part.type === 'literal')
+                            return (_jsx("span", { className: "sr-only", children: part.value }, i));
+                        element++;
+                        return element === 0 ? (_jsx("span", { className: "truncate text-sm leading-5 font-bold", children: part.value }, i)) : subtitle && element === 1 ? (_jsx("span", { className: "truncate text-[13px] leading-5 text-muted-foreground", children: part.value }, i)) : (_jsx("span", { className: "sr-only", children: part.value }, i));
+                    }) }), _jsx(ChevronsUpDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground group-data-collapsed/sidebar:hidden" })] }) }));
     return (_jsxs(MenuTrigger, { children: [collapsed ? (_jsxs(TooltipTrigger, { delay: 300, children: [button, _jsx(Tooltip, { placement: "right", children: title })] })) : (button), _jsx(Popover, { placement: collapsed ? 'right top' : placement, className: "min-w-64", children: _jsx(Menu, { onAction: onAction, selectionMode: selectedKey != null ? 'single' : undefined, selectedKeys: selectedKey != null ? [selectedKey] : undefined, children: children }) })] }));
 }
-const sidebarTriggerLabels = {
+export const sidebarTriggerLabels = {
     openNavigation: 'Open navigation',
     toggleSidebar: 'Toggle sidebar',
 };
-/** Collapses the sidebar to icons, or opens it as a Sheet on phones. */
+/**
+ * Collapses the sidebar to icons, or opens it as a Sheet on phones. In a shell with `navigation="rail"` there is
+ * nothing to collapse, so it is only there on phones, where it opens the rail's Sheet: before the shell has measured
+ * itself a container query hides it from bp-md up, and once it has (or its size is forced) it isn't rendered there.
+ */
 export function SidebarTrigger({ labels: given, className, }) {
-    const { size, sidebarCollapsed, toggleSidebar, mobileNavOpen, setMobileNavOpen } = useShell();
-    const mobile = size === 'mobile';
-    const labels = withLabels(sidebarTriggerLabels, given);
-    return (_jsx(IconButton, { className: className, label: mobile ? labels.openNavigation : labels.toggleSidebar, icon: mobile ? MenuIcon : PanelLeft, "aria-expanded": mobile ? mobileNavOpen : !sidebarCollapsed, "aria-haspopup": mobile ? 'dialog' : undefined, onPress: () => (mobile ? setMobileNavOpen(true) : toggleSidebar()) }));
+    const { size, sidebarCollapsed, toggleSidebar, mobileNavOpen, setMobileNavOpen, navigation, isSizeForced, } = useShell();
+    const rail = navigation === 'rail';
+    const mobile = size === 'mobile' || (rail && !isSizeForced);
+    const t = useLabels('sidebarTrigger', sidebarTriggerLabels, given);
+    if (rail && isSizeForced && size !== 'mobile')
+        return null;
+    return (_jsx(IconButton, { className: cn(rail && !isSizeForced && '@min-[48rem]/shell:hidden', className), label: mobile ? t('openNavigation') : t('toggleSidebar'), icon: mobile ? MenuIcon : PanelLeft, "aria-expanded": mobile ? mobileNavOpen : !sidebarCollapsed, "aria-haspopup": mobile ? 'dialog' : undefined, onPress: () => (mobile ? setMobileNavOpen(true) : toggleSidebar()) }));
 }
 //# sourceMappingURL=sidebar.js.map