@ciridae/ui 1.0.3 → 1.0.5

package/dist/components/overlays.js

@@ -6,8 +6,9 @@ import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { XIcon } from "@phosphor-icons/react";
 import { useCallback, useRef, useState, } from "react";
 import { css, cx } from "#primitives/css";
-import { Button, IconButton } from "./button.js";
+import { Button, ButtonSizeContext, IconButton } from "./button.js";
 import { DialogHeightResetContext } from "./dialog-height-context.js";
+import { glassMenuSurface } from "./glass-menu.js";
 import { HotkeyLayer } from "./hotkeys.js";
 import { icon } from "./icon.js";
 import { heading } from "./layout.js";
@@ -15,18 +16,11 @@ import { useCiridaeLocale } from "./locale.js";
 /** A positioned popup carries its own stacking order; a positioner-anchored one gets it there. */
 const positioner = css({ zIndex: "popover" });
 const tooltipPositioner = css({ zIndex: "tooltip" });
-const popupStyle = css.raw({
+// A popover is the menus' glass sheet, padded for a small form. A popup takes focus when it
+// opens or when its focused content unmounts (a wizard changing step); the sheet draws no ring.
+const popupStyle = css.raw(glassMenuSurface, {
     maxWidth: "overlay.dialog",
     padding: "panel.comfortable",
-    border: "1px solid token(colors.border.control)",
-    borderRadius: "inset",
-    backgroundColor: "bg.card",
-    color: "fg.primary",
-    textStyle: "body",
-    boxShadow: "card",
-    // A popup takes focus when it opens or when its focused content unmounts (a wizard changing
-    // step); it is a container, not a control, so it draws no ring.
-    outline: "none",
 });
 const popup = css(popupStyle);
 // The title and footer stay put; a long body scrolls between them.
@@ -38,17 +32,27 @@ const dialogLayout = css.raw({
     // A dialog's own inset, not the page margin, so page density changes leave it alone.
     padding: "panel.comfortable",
 });
-const dialogPopup = css.raw(popupStyle, dialogLayout, {
+/*
+ * A dialog is a glass shell, 4px round its sheet, holding the sheet itself. `--dialog-sheet` is
+ * the sheet's width; the shell adds its inset and edge. Dark blurs the shell and light the sheet.
+ */
+const dialogShell = css.raw({
+    "--dialog-sheet": "token(sizes.overlay.dialog)",
     zIndex: "dialog",
     position: "fixed",
     top: "50%",
     left: "50%",
+    display: "grid",
+    gridTemplateRows: "minmax(0, 1fr)",
     width: "calc(100vw - token(spacing.layout.pageGap) * 2)",
+    maxWidth: "calc(var(--dialog-sheet) + 2 * (token(spacing.layout.tightGap) + token(sizes.border.hairline)))",
     maxHeight: "calc(100dvh - token(spacing.layout.pageGap) * 2)",
-    border: "1px solid token(colors.border.card)",
-    borderRadius: "inset",
-    background: "bg.surface",
-    boxShadow: "panel",
+    padding: "layout.tightGap",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "shell",
+    background: "bg.modalShell",
+    backdropFilter: "blur(token(blurs.modalShell))",
+    outline: "none",
     transform: "translate(-50%, -50%)",
     transitionProperty: "opacity, transform",
     transitionDuration: "fast",
@@ -58,6 +62,17 @@ const dialogPopup = css.raw(popupStyle, dialogLayout, {
         transform: "translate(-50%, calc(-50% + token(spacing.control.block)))",
     },
 });
+const dialogSheetStyle = css.raw(dialogLayout, {
+    minHeight: "0",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "inset",
+    background: "bg.modalSheet",
+    backdropFilter: "blur(token(blurs.modalSheet))",
+    boxShadow: "soft",
+    color: "fg.primary",
+    textStyle: "body",
+});
+const dialogSheet = css(dialogSheetStyle);
 const visuallyHidden = css({ srOnly: true });
 const backdrop = css({
     position: "fixed",
@@ -77,8 +92,10 @@ const dialogTitle = cx(heading(), css({ display: "flex", alignItems: "center", g
 const dialogDescription = css({
     margin: "none",
     color: "fg.muted",
+    _light: { color: "fg.secondary" },
     fontSize: "body",
-    lineHeight: "compact",
+    fontWeight: "medium",
+    lineHeight: "body",
 });
 // Bleeds past its edges by a control's focus ring, so scrolling does not clip the ring.
 const dialogBody = css({
@@ -98,16 +115,18 @@ const dialogLeadingActions = css({
     gap: "layout.controlGap",
     marginInlineEnd: "auto",
 });
+// Under a divider, its buttons at the default height and close together.
 const dialogFooter = css({
     display: "flex",
     justifyContent: "flex-end",
-    gap: "layout.controlGap",
-    paddingTop: "layout.controlGap",
+    gap: "layout.tightGap",
+    paddingTop: "layout.clusterGap",
+    borderTop: "1px solid token(colors.border.divider)",
 });
-const narrowDialogPopup = css.raw({ maxWidth: "card.centeredForm" });
-const wideDialogPopup = css.raw({ maxWidth: "overlay.dialogWide" });
+const narrowDialogShell = css.raw({ "--dialog-sheet": "token(sizes.card.centeredForm)" });
+const wideDialogShell = css.raw({ "--dialog-sheet": "token(sizes.overlay.dialogWide)" });
 // Beside the dialog's own column, flush to its edges; below it on a narrow screen.
-const splitDialogPopup = css.raw({
+const splitDialogSheet = css.raw({
     padding: "none",
     gap: "none",
     gridTemplateRows: "auto auto",
@@ -163,13 +182,13 @@ export function Dialog({ trigger, finalFocus, title, titleVisibility = "visible"
     const dismissInHeader = dismiss === "header";
     const showCancel = !dismissInHeader;
     const dismissalDisabled = !closable || pending;
-    const dialogContent = (_jsxs(_Fragment, { children: [_jsxs("div", { className: dismissInHeader ? dialogHeaderRow : undefined, children: [_jsxs("div", { className: dialogHeader, children: [titleVisibility === "hidden" ? (_jsx(BaseDialog.Title, { className: visuallyHidden, children: title })) : (_jsxs(BaseDialog.Title, { className: dialogTitle, children: [titleIcon, title] })), description && (_jsx(BaseDialog.Description, { className: dialogDescription, children: description }))] }), dismissInHeader && closable && (_jsx(BaseDialog.Close, { disabled: pending, render: _jsx(IconButton, { "aria-label": closeLabel, size: "compact", variant: "ghost" }), children: _jsx(XIcon, { className: icon({ size: "small" }) }) }))] }), _jsx("div", { className: dialogBody, children: _jsx(DialogHeightResetContext, { value: holdHeight ? resetHeight : null, children: children }) }), ((showCancel && closable) || actions || leadingActions) && (_jsxs("div", { className: dialogFooter, children: [leadingActions && _jsx("div", { className: dialogLeadingActions, children: leadingActions }), showCancel && closable && (_jsx(BaseDialog.Close, { disabled: pending, render: _jsx(Button, { variant: "secondary" }), children: dismissInHeader ? labels.common.cancel : closeLabel })), actions] }))] }));
+    const dialogContent = (_jsxs(_Fragment, { children: [_jsxs("div", { className: dismissInHeader ? dialogHeaderRow : undefined, children: [_jsxs("div", { className: dialogHeader, children: [titleVisibility === "hidden" ? (_jsx(BaseDialog.Title, { className: visuallyHidden, children: title })) : (_jsxs(BaseDialog.Title, { className: dialogTitle, children: [titleIcon, title] })), description && (_jsx(BaseDialog.Description, { className: dialogDescription, children: description }))] }), dismissInHeader && closable && (_jsx(BaseDialog.Close, { disabled: pending, render: _jsx(IconButton, { "aria-label": closeLabel, size: "compact", variant: "ghost" }), children: _jsx(XIcon, { className: icon({ size: "small" }) }) }))] }), _jsx("div", { className: dialogBody, children: _jsx(DialogHeightResetContext, { value: holdHeight ? resetHeight : null, children: children }) }), ((showCancel && closable) || actions || leadingActions) && (_jsx("div", { className: dialogFooter, children: _jsxs(ButtonSizeContext, { value: "medium", children: [leadingActions && _jsx("div", { className: dialogLeadingActions, children: leadingActions }), showCancel && closable && (_jsx(BaseDialog.Close, { disabled: pending, render: _jsx(Button, { variant: "secondary" }), children: dismissInHeader ? labels.common.cancel : closeLabel })), actions] }) }))] }));
     return (_jsxs(BaseDialog.Root, { ...rootProps, onOpenChange: (open, details) => {
             if (!open && (dismissalDisabled || (dirty && details.reason !== "close-press"))) {
                 return details.cancel();
             }
             onOpenChange?.(open, details);
-        }, children: [trigger && _jsx(BaseDialog.Trigger, { render: trigger }), _jsx(BaseDialog.Portal, { children: _jsxs(HotkeyLayer, { children: [_jsx(BaseDialog.Backdrop, { "data-ciridae-ui": "", className: backdrop }), _jsx(BaseDialog.Popup, { finalFocus: finalFocus, ref: holdHeight ? holdTallestHeight : undefined, className: css(dialogPopup, size === "narrow" && aside === undefined && narrowDialogPopup, (size === "wide" || aside !== undefined) && wideDialogPopup, aside !== undefined && splitDialogPopup), "data-ciridae-ui": "", children: aside ? (_jsxs(_Fragment, { children: [_jsx("div", { className: splitDialogMain, children: dialogContent }), _jsx("aside", { className: splitDialogAside, "aria-label": aside.label, children: aside.content })] })) : (dialogContent) })] }) })] }));
+        }, children: [trigger && _jsx(BaseDialog.Trigger, { render: trigger }), _jsx(BaseDialog.Portal, { children: _jsxs(HotkeyLayer, { children: [_jsx(BaseDialog.Backdrop, { "data-ciridae-ui": "", className: backdrop }), _jsx(BaseDialog.Popup, { finalFocus: finalFocus, ref: holdHeight ? holdTallestHeight : undefined, className: css(dialogShell, size === "narrow" && aside === undefined && narrowDialogShell, (size === "wide" || aside !== undefined) && wideDialogShell), "data-ciridae-ui": "", children: aside ? (_jsxs("div", { className: css(dialogSheetStyle, splitDialogSheet), children: [_jsx("div", { className: splitDialogMain, children: dialogContent }), _jsx("aside", { className: splitDialogAside, "aria-label": aside.label, children: aside.content })] })) : (_jsx("div", { className: dialogSheet, children: dialogContent })) })] }) })] }));
 }
 /**
  * A confirmation the reader must answer. Unlike `Dialog` it carries the
@@ -207,13 +226,13 @@ export function AlertDialog({ trigger, title, children, confirmLabel, cancelLabe
             if (!open && pendingRef.current)
                 return details.cancel();
             onOpenChange?.(open, details);
-        }, children: [trigger && _jsx(BaseAlertDialog.Trigger, { render: trigger }), _jsx(BaseAlertDialog.Portal, { children: _jsxs(HotkeyLayer, { children: [_jsx(BaseAlertDialog.Backdrop, { "data-ciridae-ui": "", className: backdrop }), _jsxs(BaseAlertDialog.Popup, { className: css(dialogPopup), "data-ciridae-ui": "", children: [_jsx(BaseAlertDialog.Title, { className: dialogTitle, children: title }), children && _jsx("div", { className: dialogBody, children: children }), _jsxs("div", { className: dialogFooter, children: [_jsx(BaseAlertDialog.Close, { render: _jsx(Button, { variant: "secondary" }), disabled: pending, children: cancelLabel ?? labels.common.cancel }), _jsx(Button, { variant: variant === "danger" ? "danger" : "primary", loading: pending, onClick: () => void confirm(), children: confirmLabel })] })] })] }) })] }));
+        }, children: [trigger && _jsx(BaseAlertDialog.Trigger, { render: trigger }), _jsx(BaseAlertDialog.Portal, { children: _jsxs(HotkeyLayer, { children: [_jsx(BaseAlertDialog.Backdrop, { "data-ciridae-ui": "", className: backdrop }), _jsx(BaseAlertDialog.Popup, { className: css(dialogShell), "data-ciridae-ui": "", children: _jsxs("div", { className: dialogSheet, children: [_jsx(BaseAlertDialog.Title, { className: dialogTitle, children: title }), children && _jsx("div", { className: dialogBody, children: children }), _jsxs("div", { className: dialogFooter, children: [_jsx(BaseAlertDialog.Close, { render: _jsx(Button, { variant: "secondary", size: "medium" }), disabled: pending, children: cancelLabel ?? labels.common.cancel }), _jsx(Button, { variant: variant === "danger" ? "danger" : "primary", size: "medium", loading: pending, onClick: () => void confirm(), children: confirmLabel })] })] }) })] }) })] }));
 }
 // Merged rather than layered, so the density's inset replaces the popup's.
 const popoverPopups = {
     regular: popup,
-    compact: css(popupStyle, { padding: "menu.inset", borderRadius: "action" }),
-    flush: css(popupStyle, { padding: "none", overflow: "hidden", borderRadius: "action" }),
+    compact: css(popupStyle, { padding: "menu.inset" }),
+    flush: css(popupStyle, { padding: "none", overflow: "hidden" }),
 };
 const popoverWidths = {
     narrow: css({ width: "overlay.popoverNarrow" }),
@@ -223,18 +242,28 @@ const popoverWidths = {
 const hoverOpenDelayMs = 300;
 const hoverCloseDelayMs = 150;
 export function Popover({ trigger, anchor, children, density = "regular", width, align, openOnHover = false, ...rootProps }) {
-    return (_jsxs(BasePopover.Root, { ...rootProps, children: [trigger && (_jsx(BasePopover.Trigger, { render: trigger, openOnHover: openOnHover, delay: hoverOpenDelayMs, closeDelay: hoverCloseDelayMs })), _jsx(BasePopover.Portal, { children: _jsx(HotkeyLayer, { enabled: !openOnHover, children: _jsx(BasePopover.Positioner, { className: positioner, sideOffset: 6, align: align, anchor: anchor, children: _jsx(BasePopover.Popup, { className: cx(popoverPopups[density], width && popoverWidths[width]), "data-ciridae-ui": "", initialFocus: openOnHover ? (openType) => openType === "keyboard" : undefined, children: children }) }) }) })] }));
+    return (_jsxs(BasePopover.Root, { ...rootProps, children: [trigger && (_jsx(BasePopover.Trigger, { render: trigger, openOnHover: openOnHover, delay: hoverOpenDelayMs, closeDelay: hoverCloseDelayMs })), _jsx(BasePopover.Portal, { children: _jsx(HotkeyLayer, { enabled: !openOnHover, children: _jsx(BasePopover.Positioner, { className: positioner, sideOffset: 4, align: align, anchor: anchor, children: _jsx(BasePopover.Popup, { className: cx(popoverPopups[density], width && popoverWidths[width]), "data-ciridae-ui": "", initialFocus: openOnHover ? (openType) => openType === "keyboard" : undefined, children: children }) }) }) })] }));
 }
-export function Tooltip({ children, content, ...rootProps }) {
-    return (_jsx(BaseTooltip.Provider, { children: _jsxs(BaseTooltip.Root, { ...rootProps, children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { className: tooltipPositioner, sideOffset: 6, children: _jsx(BaseTooltip.Popup, { className: css({
-                                zIndex: "tooltip",
-                                paddingBlock: "control.compactBlock",
-                                paddingInline: "menu.itemInline",
-                                borderRadius: "action",
-                                background: "fg.primary",
-                                color: "bg.canvas",
-                                fontSize: "caption",
-                                maxWidth: "overlay.tooltip",
-                                textWrap: "pretty",
-                            }), "data-ciridae-ui": "", children: content }) }) })] }) }));
+/* An inverted chip: the primary face, ink in light and white in dark, with the text in the canvas's. */
+const tooltipPopup = css({
+    zIndex: "tooltip",
+    display: "flex",
+    alignItems: "baseline",
+    gap: "layout.controlGap",
+    paddingBlock: "control.compactBlock",
+    paddingInline: "menu.itemInline",
+    borderRadius: "keycap",
+    background: "fg.primary",
+    color: "bg.canvas",
+    _light: { background: "token(gradients.primary)", color: "fg.onAccent" },
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    letterSpacing: "compact",
+    maxWidth: "overlay.tooltip",
+    textWrap: "pretty",
+});
+const tooltipMeta = css({ flexShrink: "0", opacity: "0.6" });
+export function Tooltip({ children, content, meta, ...rootProps }) {
+    return (_jsx(BaseTooltip.Provider, { children: _jsxs(BaseTooltip.Root, { ...rootProps, children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { className: tooltipPositioner, sideOffset: 8, children: _jsxs(BaseTooltip.Popup, { className: tooltipPopup, "data-ciridae-ui": "", children: [content, meta !== undefined && _jsx("span", { className: tooltipMeta, children: meta })] }) }) })] }) }));
 }

package/dist/components/page-frame.js

@@ -61,7 +61,7 @@ const metaLine = css({
     alignItems: "center",
     flexWrap: "wrap",
     gap: "layout.controlGap",
-    color: "fg.muted",
+    color: "fg.label",
     fontSize: "code",
     fontWeight: "medium",
     letterSpacing: "compact",

package/dist/components/panel.d.ts

@@ -13,7 +13,7 @@ export type PanelProps = useRender.ComponentProps<"section"> & {
 export declare function Panel({ padding, tone, render, className, ...props }: PanelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type PanelHeaderProps = Omit<useRender.ComponentProps<"div">, "title"> & {
     title: ReactNode;
-    /** Muted beside the title, such as a count or the period it covers. */
+    /** Muted at the row's far edge, before the actions, such as a count or the period it covers. */
     meta?: ReactNode;
     /** At the row's end, such as a link to the full list. */
     actions?: ReactNode;

package/dist/components/panel.js

@@ -9,13 +9,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useRender } from "@base-ui/react/use-render";
 import { css, cva, cx } from "#primitives/css";
+import { singleLineText } from "./single-line-text.js";
 /** The card's surface as a style object, to merge into a `css()` call that adds layout. */
 export const cardSurface = css.raw({
     minWidth: "0",
-    border: "1px solid token(colors.border.panel)",
+    border: "1px solid token(colors.border.card)",
     borderRadius: "action",
-    background: "bg.hover",
-    _light: { background: "bg.card" },
+    background: "token(gradients.card)",
 });
 const card = css(cardSurface);
 const panel = cva({
@@ -39,7 +39,7 @@ const panel = cva({
             default: { gap: "layout.contentGap", padding: "panel.default" },
         },
         tone: {
-            panel: { borderColor: "border.panel", background: "bg.panel" },
+            panel: { borderColor: "border.panel", background: "token(gradients.panel)" },
             outline: { borderColor: "border.control" },
         },
     },
@@ -55,19 +55,25 @@ const panelHeader = css({
     paddingInline: "panel.comfortable",
     fontSize: "body",
     fontWeight: "medium",
-    // In a padded panel the header is one more row inside the padding.
-    "[data-panel-padding=default] > &": { height: "auto", paddingInline: "none" },
+    lineHeight: "tight",
+    /*
+     * In a padded panel the header is one more row inside the padding, inset from what follows by
+     * the design's 16px: its own padding, less the panel's gap, which it takes back.
+     */
+    "[data-panel-padding=default] > &": {
+        height: "auto",
+        gap: "layout.controlGap",
+        paddingInline: "none",
+        paddingBottom: "panel.comfortable",
+        marginBottom: "calc(token(spacing.layout.contentGap) * -1)",
+    },
 });
-const panelHeaderTitle = css({
+const panelHeaderTitle = css(singleLineText, {
     display: "flex",
     alignItems: "center",
     gap: "control.iconGap",
-    minWidth: "0",
     margin: "none",
     font: "inherit",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
 });
 const panelHeaderMeta = css({ color: "fg.subtle", fontSize: "code" });
 const panelHeaderActions = css({ display: "flex", alignItems: "center", gap: "layout.tightGap" });
@@ -101,7 +107,7 @@ export function PanelHeader({ title, meta, actions, level, render, className, ..
             className: cx(panelHeader, className),
             "data-ciridae-ui": "",
             "data-panel-header": "",
-            children: (_jsxs(_Fragment, { children: [title !== undefined && title !== null && (_jsxs(Title, { className: panelHeaderTitle, children: [title, meta !== undefined && _jsx("span", { className: panelHeaderMeta, children: meta })] })), actions !== undefined && _jsx("span", { className: panelHeaderActions, children: actions })] })),
+            children: (_jsxs(_Fragment, { children: [title !== undefined && title !== null && (_jsx(Title, { className: panelHeaderTitle, children: title })), (meta !== undefined || actions !== undefined) && (_jsxs("span", { className: panelHeaderActions, children: [meta !== undefined && _jsx("span", { className: panelHeaderMeta, children: meta }), actions] }))] })),
         },
     });
 }

package/dist/components/radio-card.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Radio as BaseRadio } from "@base-ui/react/radio";
 import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
 import { css, cx } from "#primitives/css";
-import { checkMark, radioDot } from "./form-controls.js";
+import { checkMark, checkMarkEdge, radioDot } from "./form-controls.js";
 /*
  * A choice drawn as a card: the radio, a title with its detail, and where the option comes from
  * at the far edge. The whole card is the radio, so it takes the hover wash, the focus ring, and,
- * once chosen, the accent wash under the accent's edge.
+ * once chosen, the selected tint under an edge in the text color.
  */
 const cards = css({ display: "grid", gap: "layout.controlGap" });
 const card = css({
@@ -28,10 +28,10 @@ const card = css({
     cursor: "pointer",
     transitionProperty: "background, border-color",
     transitionDuration: "fast",
-    _hover: { background: "bg.glassHover" },
+    _hover: { background: "token(gradients.raisedHover)" },
     "&[data-checked]": {
-        background: "bg.selected",
-        borderColor: "border.selected",
+        background: "token(gradients.selected)",
+        borderColor: "fg.primary",
     },
     _focusVisible: { focusRing: "outer" },
     "&[data-disabled]": { opacity: "disabled", cursor: "not-allowed" },
@@ -42,10 +42,11 @@ const mark = css({
     // the mark down.
     marginTop: "calc((1em - token(sizes.control.radio)) / 2)",
     "[data-checked] > &": {
-        background: "bg.primary",
-        borderColor: "transparent",
+        background: "token(gradients.primary)",
+        _light: { background: "token(gradients.primary)" },
+        _before: { background: "token(gradients.border.primary)" },
     },
-    "[data-checked]:hover > &": { background: "bg.primaryHover" },
+    "[data-checked]:hover > &": { opacity: "checkedHover", _light: { opacity: "1" } },
 });
 const copy = css({ flex: "1", minWidth: "0", display: "grid", gap: "layout.tightGap" });
 const detailText = css({ color: "fg.muted", fontSize: "code" });
@@ -62,5 +63,5 @@ export function RadioCardGroup({ name, label, defaultValue, value, onValueChange
 }
 /** One option of a `RadioCardGroup`. */
 export function RadioCard({ title, detail, source: sourceContent, className, ...props }) {
-    return (_jsxs(BaseRadio.Root, { ...props, className: cx(card, className), "data-ciridae-ui": "", children: [_jsx("span", { className: cx(checkMark({ shape: "round", focus: "row" }), mark), children: _jsx(BaseRadio.Indicator, { className: radioDot }) }), _jsxs("span", { className: copy, children: [_jsx("span", { children: title }), detail !== undefined && _jsx("span", { className: detailText, children: detail })] }), sourceContent !== undefined && _jsx("span", { className: source, children: sourceContent })] }));
+    return (_jsxs(BaseRadio.Root, { ...props, className: cx(card, className), "data-ciridae-ui": "", children: [_jsx("span", { ...checkMarkEdge, className: cx(checkMark({ shape: "round", focus: "row" }), mark), children: _jsx(BaseRadio.Indicator, { className: radioDot }) }), _jsxs("span", { className: copy, children: [_jsx("span", { children: title }), detail !== undefined && _jsx("span", { className: detailText, children: detail })] }), sourceContent !== undefined && _jsx("span", { className: source, children: sourceContent })] }));
 }

package/dist/components/record.d.ts

@@ -48,7 +48,7 @@ export type ItemCardField = {
 };
 export type ItemCardProps = Omit<useRender.ComponentProps<"button">, "children" | "onSelect"> & {
     title: ReactNode;
-    /** One segment per stage, in its status's color. */
+    /** One dot per stage, in its status. */
     progress?: readonly StepStatus[];
     fields: readonly ItemCardField[];
     /** The footer's start: the stage the item is at. */
@@ -64,6 +64,30 @@ export type ItemCardProps = Omit<useRender.ComponentProps<"button">, "children"
     href?: string;
 };
 export declare function ItemCard({ title, progress, fields, status, footer, selected, onSelect, href, render, className, style, ...props }: ItemCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PartRowProps = Omit<ComponentProps<"div">, "children" | "onSelect"> & {
+    /** `wide` is one line, as in a table; `compact` stacks for a narrow column. */
+    layout?: "wide" | "compact";
+    name: ReactNode;
+    /** Under the name, such as the part's phase and amount. */
+    detail?: ReactNode;
+    /** One dot per step, in its status; the kit draws at most four. */
+    progress: readonly StepStatus[];
+    /** The stage the part is at. */
+    stage: ReactNode;
+    /** Whose move it is: `yourMove` sets the next step in the ink, the others in grey. */
+    state: "yourMove" | "waiting" | "done" | "notStarted";
+    /** Before the next step, such as a "Your move" badge. */
+    badge?: ReactNode;
+    next: ReactNode;
+    /** The part's one button, for the reader's move or a nudge while waiting. */
+    action?: {
+        label: ReactNode;
+        onClick: () => void;
+    };
+    selected?: boolean;
+    onSelect?: () => void;
+};
+export declare function PartRow({ layout, name, detail, progress, stage, state, badge, next, action, selected, onSelect, className, ...props }: PartRowProps): import("react").JSX.Element;
 export type RelatedListItem = {
     id: string;
     title: ReactNode;

package/dist/components/record.js

@@ -2,13 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /*
  * The pieces a record's page is laid out with. `DetailLayout` splits it into the work and a side
  * column; `PageHeading` (also exported here) is the record's title row; `RelatedTabs` is the tabbed card of what the
- * record holds; `ItemCard` is one of a record's parts, such as a shipment or a draw; `RelatedList`
+ * record holds; `ItemCard` is one of a record's parts, such as a shipment or a draw, as a card and `PartRow` as
+ * a row; `RelatedList`
  * lists the records and documents it points at.
  */
 import { useRender } from "@base-ui/react/use-render";
 import { CaretRightIcon } from "@phosphor-icons/react";
-import { useLayoutEffect, useRef, useState, } from "react";
+import { Fragment, useLayoutEffect, useRef, useState, } from "react";
 import { css, cx } from "#primitives/css";
+import { Button } from "./button.js";
 import { useControllableState } from "./controllable-state.js";
 import { directional, icon } from "./icon.js";
 import { MutedText } from "./layout.js";
@@ -110,7 +112,10 @@ export function RelatedTabs({ tabs, value, defaultValue, onValueChange, classNam
         return null;
     return (_jsxs(TabsRoot, { value: open.value, onValueChange: (next) => setChosen(String(next)), ...props, className: cx(relatedCard, className), "data-ciridae-ui": "", children: [_jsxs("div", { className: relatedHeader, children: [_jsx(TabsList, { variant: "contained", children: tabs.map((tab) => (_jsx(TabsTab, { value: tab.value, count: tab.count, children: tab.label }, tab.value))) }), open.meta !== undefined && _jsx(MutedText, { className: relatedMeta, children: open.meta })] }), tabs.map((tab) => (_jsx(TabsPanel, { value: tab.value, children: tab.content }, tab.value)))] }));
 }
-/* Item card: one of a record's parts, with its progress as a thin segmented bar. */
+/*
+ * Item card: one of a record's parts, the kit's Part card, with its progress as a mini strip of
+ * step dots. The chosen one lifts onto the solid card inside a green edge.
+ */
 const itemCard = css(cardSurface, {
     display: "grid",
     gap: "layout.clusterGap",
@@ -121,7 +126,11 @@ const itemCard = css(cardSurface, {
     letterSpacing: "compact",
     textDecoration: "none",
     "&:is(button, a)": { cursor: "pointer", _hover: { borderColor: "border.glass" } },
-    "&[data-selected]": { borderColor: "accent.green", _hover: { borderColor: "accent.green" } },
+    "&[data-selected]": {
+        borderColor: "accent.green",
+        boxShadow: "soft",
+        _hover: { borderColor: "accent.green" },
+    },
     _focusVisible: { focusRing: "outer" },
 });
 const itemHeader = css({
@@ -131,20 +140,27 @@ const itemHeader = css({
     gap: "layout.controlGap",
     fontSize: "body",
     fontWeight: "medium",
+    lineHeight: "tight",
     whiteSpace: "nowrap",
 });
-const progressBar = css({ display: "inline-flex", alignItems: "center", gap: "2px" });
-const progressSegment = css({
-    width: "14px",
-    height: "4px",
-    borderRadius: "1px",
-    background: "bg.fill",
-    "&[data-status=done]": { background: "accent.green" },
-    "&[data-status=current]": { background: "accent.yellow" },
-    "&[data-status=agent]": { background: "accent.blue" },
-    "&[data-status=blocked]": { background: "accent.red" },
-    "&[data-status=waiting]": { background: "fg.muted" },
+const progressStrip = css({
+    display: "inline-flex",
+    flexShrink: "0",
+    alignItems: "center",
+    gap: "layout.tightGap",
+});
+// 16px between dots, green out of a finished step as the stage strip's connectors are.
+const progressConnector = css({
+    width: "token(spacing.layout.clusterGap)",
+    height: "border.hairline",
+    borderRadius: "round",
+    background: "border.divider",
+    "&[data-after=done]": { background: "accent.green" },
 });
+/** A part's progress: one 12px dot a step, joined by 16px connectors. */
+function MiniStrip({ progress }) {
+    return (_jsx("span", { className: progressStrip, "aria-hidden": "true", children: progress.map((step, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("span", { className: progressConnector, "data-after": progress[index - 1] === "done" ? "done" : undefined })), _jsx(StepDot, { status: step, size: "chip" })] }, index))) }));
+}
 const itemFields = css({
     display: "grid",
     gap: "layout.controlGap",
@@ -155,7 +171,7 @@ const itemFields = css({
 const itemFieldLabel = css({
     display: "block",
     marginBottom: "layout.controlGap",
-    color: "fg.muted",
+    color: "fg.subtle",
     fontWeight: "regular",
     letterSpacing: "normal",
 });
@@ -188,10 +204,117 @@ export function ItemCard({ title, progress, fields, status, footer, selected = f
             "data-ciridae-ui": "",
             "data-selected": selected || undefined,
             "aria-pressed": onSelect !== undefined && href === undefined ? selected : undefined,
-            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: itemHeader, children: [title, progress && (_jsx("span", { className: progressBar, "aria-hidden": "true", children: progress.map((segment, index) => (_jsx("span", { className: progressSegment, "data-status": segment }, index))) }))] }), _jsxs("span", { className: css({ display: "grid" }), children: [_jsx("span", { className: itemFields, style: columns, children: fields.map((field, index) => (_jsxs("span", { children: [_jsx("span", { className: itemFieldLabel, children: field.label }), field.value] }, index))) }), _jsxs("span", { className: itemFooter, children: [_jsxs("span", { className: itemStatus, children: [_jsx(StepDot, { status: status.status, size: "small" }), status.label] }), footer] })] })] })),
+            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: itemHeader, children: [title, progress && _jsx(MiniStrip, { progress: progress })] }), _jsxs("span", { className: css({ display: "grid" }), children: [_jsx("span", { className: itemFields, style: columns, children: fields.map((field, index) => (_jsxs("span", { children: [_jsx("span", { className: itemFieldLabel, children: field.label }), field.value] }, index))) }), _jsxs("span", { className: itemFooter, children: [_jsxs("span", { className: itemStatus, children: [_jsx(StepDot, { status: status.status, size: "small" }), status.label] }), footer] })] })] })),
         },
     });
 }
+/*
+ * Part row: one of a record's parts as a table-like row, the kit's Part in its Wide and Compact
+ * layouts: name over detail, the mini strip, the stage, a badge for the reader's move, the next
+ * step and at most one action. Wide keeps it on one 56px line, wrapping the detail and next step
+ * only when the row is narrow; compact stacks the name and strip over the rest. The whole row chooses the part through its name; the action stays its own button.
+ */
+const partRow = css({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.clusterGap",
+    minHeight: "calc(token(sizes.control.compact) + token(spacing.panel.default) * 2)",
+    paddingBlock: "panel.default",
+    paddingInline: "panel.comfortable",
+    borderBottom: "1px solid token(colors.border.divider)",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    "&:has([data-part-name]:hover)": { background: "bg.rowHover" },
+    "&[data-selected]": { background: "token(gradients.selected)" },
+    // Wide is a grid, so the strips and stages of a list of parts line up. The name and the next
+    // step share what the strip, stage and action leave, two parts to three, close to the kit's
+    // 240 and 488 in its 1092 row, so a narrow row narrows both rather than starving one.
+    "&[data-layout=wide]": {
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 2fr) max-content 90px minmax(0, 3fr) max-content",
+    },
+    "&[data-layout=compact]": {
+        flexDirection: "column",
+        alignItems: "stretch",
+        gap: "layout.tightGap",
+    },
+});
+const partLine = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    minWidth: "0",
+    "[data-layout=wide] > &": { display: "contents" },
+});
+const partName = css({
+    display: "grid",
+    gap: "control.trackInset",
+    flex: "1 1 0",
+    minWidth: "0",
+    textAlign: "start",
+    "& > *": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+});
+// The name is the row's button: its box stretches over the whole row.
+const partNameButton = css({
+    padding: "none",
+    border: "none",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
+    fontSize: "body",
+    textAlign: "start",
+    cursor: "pointer",
+    _after: { content: '""', position: "absolute", inset: "0" },
+    _focusVisible: { outline: "none", _after: { focusRing: "inset" } },
+});
+// A narrow wide row wraps the detail rather than cut off its amount.
+const partDetail = css({
+    color: "fg.subtle",
+    fontSize: "code",
+    "[data-layout=wide] &": { whiteSpace: "normal", lineHeight: "compact" },
+});
+const partStage = css({
+    flexShrink: "0",
+    color: "fg.subtle",
+    fontSize: "code",
+    whiteSpace: "nowrap",
+    "[data-layout=wide] &": { overflow: "hidden", textOverflow: "ellipsis" },
+});
+const partStatus = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    flexShrink: "0",
+    "[data-layout=wide] > * > &": { display: "contents" },
+});
+// Wide sets the badge after the stage, in the next step's cell; compact leads the status with it.
+const partNextCell = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.clusterGap",
+    minWidth: "0",
+    "[data-layout=compact] &": { display: "contents" },
+});
+const partBadge = css({
+    display: "inline-flex",
+    flexShrink: "0",
+    "[data-layout=compact] &": { order: "-1" },
+});
+// The step the reader acts on wraps in a narrow row, never cut short.
+const partNext = css({
+    minWidth: "0",
+    color: "fg.secondary",
+    fontSize: "caption",
+    lineHeight: "compact",
+    "[data-state=yourMove] &": { color: "fg.primary" },
+});
+// The action sits over the stretched name, so it stays its own button.
+const partAction = css({ position: "relative", flexShrink: "0" });
+export function PartRow({ layout = "wide", name, detail, progress, stage, state, badge, next, action, selected = false, onSelect, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cx(partRow, className), "data-ciridae-ui": "", "data-layout": layout, "data-state": state, "data-selected": selected || undefined, children: [_jsxs("span", { className: partLine, children: [_jsxs("span", { className: partName, children: [onSelect ? (_jsx("button", { type: "button", className: partNameButton, "data-part-name": "", "aria-pressed": selected, onClick: onSelect, children: name })) : (_jsx("span", { className: css({ fontSize: "body" }), children: name })), layout === "wide" && detail !== undefined && (_jsx("span", { className: partDetail, children: detail }))] }), _jsx(MiniStrip, { progress: progress })] }), _jsxs("span", { className: partLine, children: [layout === "compact" && _jsx("span", { className: cx(partName, partDetail), children: detail }), _jsxs("span", { className: partStatus, children: [_jsx("span", { className: partStage, children: stage }), _jsxs("span", { className: partNextCell, children: [badge !== undefined && _jsx("span", { className: partBadge, children: badge }), _jsx("span", { className: partNext, children: next })] }), action && (_jsx(Button, { variant: "secondary", className: partAction, onClick: action.onClick, children: action.label }))] })] })] }));
+}
 /* Related list: the records and documents a record points at, grouped by relation. */
 const groupHeader = css({
     display: "flex",
@@ -221,7 +344,11 @@ const relatedRow = css({
     font: "inherit",
     textAlign: "start",
     textDecoration: "none",
-    "&:is(button, a)": { cursor: "pointer", _hover: { background: "bg.rowHover" } },
+    // The kit's Linked record hovers to the selected glass in dark and the row wash in light.
+    "&:is(button, a)": {
+        cursor: "pointer",
+        _hover: { background: "token(gradients.selected)", _light: { background: "bg.rowHover" } },
+    },
     _focusVisible: { focusRing: "outer" },
 });
 const tile = css({
@@ -234,6 +361,7 @@ const tile = css({
     borderRadius: "action",
     background: "bg.panel",
     color: "fg.secondary",
+    _light: { background: "bg.field" },
     "& svg": { fontSize: "icon.small" },
 });
 const rowTitle = css({
@@ -251,6 +379,7 @@ const rowMeta = css({
     color: "fg.secondary",
     fontSize: "code",
     fontWeight: "medium",
+    lineHeight: "tight",
     "& [data-separator]": { color: "fg.muted" },
     "& [data-tone=info]": { color: "accent.blue" },
     "& [data-tone=success]": { color: "accent.green" },

package/dist/components/segmented-bar.d.ts

@@ -1,11 +1,13 @@
 import { type ComponentProps, type ReactNode } from "react";
 import type { Tone } from "./badge.js";
+/** A segment's hue: a tone by meaning, or `indigo`, the chart's category no status hue covers. */
+export type SegmentedBarHue = Tone | "indigo";
 export type SegmentedBarSegment = {
     id: string;
     label: string;
     value: number;
     /** The segment's color by meaning; `neutral` by default. */
-    tone?: Tone;
+    tone?: SegmentedBarHue;
     /** A color of its own, such as a CSS variable the app themes, over `tone`. */
     color?: string;
 };