@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/navigation.js

@@ -1,30 +1,67 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
 import { css, cva, cx } from "#primitives/css";
-import { Button } from "./button.js";
+import { Button, IconButton } from "./button.js";
+import { icon } from "./icon.js";
 import { Heading } from "./layout.js";
 import { useCiridaeLocale } from "./locale.js";
-export function Pagination({ page, pages, onPageChange, labels: ownLabels, className, ...props }) {
+import { cardSurface } from "./panel.js";
+/*
+ * The bar under a table, the kit's Pagination. Full: the page size at the start, then the summary
+ * and the pager at the end, inset 12px. Simple, with no page size: the summary at the start, the
+ * pager at the end, flush.
+ */
+const pagination = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.controlGap",
+    minHeight: "control.row",
+    paddingInline: "panel.default",
+    lineHeight: "tight",
+    "&[data-type=simple]": { paddingInline: "0" },
+});
+const paginationEnd = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.clusterGap",
+    marginInlineStart: "auto",
+});
+const paginationSummary = css({
+    color: "fg.secondary",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    fontVariantNumeric: "tabular-nums",
+});
+// Simple: the summary and the pager are the bar's own ends.
+const summaryAndPagerAsBarEnds = css({ display: "contents" });
+const pager = css({ display: "flex", alignItems: "center", gap: "layout.tightGap" });
+const pagerAlone = css({ marginInlineStart: "auto" });
+export function Pagination({ page, pages, onPageChange, pageSizeSelect, summary, numbered = false, labels: ownLabels, className, ...props }) {
     const locale = useCiridaeLocale();
     const labels = { ...locale.labels.pagination, ...ownLabels };
-    const visible = Array.from({ length: pages }, (_, index) => index + 1);
-    return (_jsxs("nav", { "aria-label": labels.label, ...props, className: cx(css({ display: "flex", gap: "layout.tightGap" }), className), "data-ciridae-ui": "", children: [_jsx(Button, { variant: "ghost", disabled: pages === 0 || page <= 1, onClick: () => onPageChange(Math.max(1, page - 1)), children: labels.previous }), visible.map((value) => (_jsx(Button, { variant: value === page ? "primary" : "ghost", "aria-current": value === page ? "page" : undefined, onClick: () => onPageChange(value), children: locale.formatNumber(value) }, value))), _jsx(Button, { variant: "ghost", disabled: pages === 0 || page >= pages, onClick: () => onPageChange(Math.min(pages, page + 1)), children: labels.next })] }));
+    const Previous = locale.dir === "rtl" ? CaretRightIcon : CaretLeftIcon;
+    const Next = locale.dir === "rtl" ? CaretLeftIcon : CaretRightIcon;
+    return (_jsxs("nav", { "aria-label": labels.label, ...props, className: cx(pagination, className), "data-ciridae-ui": "", "data-type": pageSizeSelect ? "full" : "simple", children: [pageSizeSelect, _jsxs("div", { className: pageSizeSelect ? paginationEnd : summaryAndPagerAsBarEnds, children: [summary && _jsx("span", { className: paginationSummary, children: summary }), _jsxs("div", { className: cx(pager, !summary && pagerAlone), children: [_jsx(IconButton, { "aria-label": labels.previous, size: "medium", disabled: pages === 0 || page <= 1, onClick: () => onPageChange(Math.max(1, page - 1)), children: _jsx(Previous, { className: icon({ size: "small" }) }) }), numbered &&
+                                Array.from({ length: pages }, (_, index) => index + 1).map((value) => (_jsx(Button, { variant: value === page ? "primary" : "ghost", "aria-current": value === page ? "page" : undefined, onClick: () => onPageChange(value), children: locale.formatNumber(value) }, value))), _jsx(IconButton, { "aria-label": labels.next, size: "medium", disabled: pages === 0 || page >= pages, onClick: () => onPageChange(Math.min(pages, page + 1)), children: _jsx(Next, { className: icon({ size: "small" }) }) })] })] })] }));
 }
 const emptyState = cva({
     base: { display: "grid", placeItems: "center", textAlign: "center" },
     variants: {
         variant: {
-            // A page or panel with nothing in it yet: a dashed frame with room for a heading.
+            // A page or panel with nothing in it yet: no frame, with room around it.
             block: {
-                minHeight: "emptyState.minimum",
-                padding: "panel.roomy",
-                border: "1px dashed token(colors.border.control)",
-                borderRadius: "inset",
+                justifyItems: "center",
+                gap: "layout.clusterGap",
+                paddingBlock: "emptyState.pageBlock",
+                paddingInline: "panel.roomy",
             },
-            // Inside a table or a card that frames it already: the icon in a ring, no frame of its own.
+            // Inside a table or a card that frames it already: tighter, its copy wrapping to the card.
             bare: {
                 justifyItems: "center",
-                gap: "layout.clusterGap",
-                paddingBlock: "panel.roomy",
+                gap: "layout.contentGap",
+                paddingBlock: "emptyState.compactBlock",
                 paddingInline: "panel.comfortable",
             },
             // A list or section with nothing to show: one muted line, no frame.
@@ -45,31 +82,59 @@ const emptyRing = css({
     height: "brand.logo",
     border: "1px solid token(colors.border.control)",
     borderRadius: "round",
-    background: "bg.field",
+    // The field's grey well in light; in dark the deep grey a disabled field wears, not the white
+    // wash of a dark field, so the ring sits below the page rather than lit on it.
+    background: "bg.fieldDisabled",
+    _light: { background: "bg.field" },
     color: "fg.muted",
     fontSize: "icon.small",
 });
 const emptyCopy = css({ display: "grid", gap: "control.iconGap", maxWidth: "card.centered" });
+// The title in the primary ink, whatever the table or card round it sets as its text colour.
+const emptyTitle = css({ color: "fg.primary", lineHeight: "tight" });
 const emptyDescription = css({
     margin: "none",
     color: "fg.muted",
+    _light: { color: "fg.secondary" },
     fontSize: "code",
     fontWeight: "medium",
     letterSpacing: "compact",
-    lineHeight: "body",
+    // A page's one line of help sits on the title's tight line; a card's wraps.
+    lineHeight: "tight",
+    "[data-variant=bare] &": { lineHeight: "body" },
 });
 const emptyActions = css({
     display: "flex",
     flexWrap: "wrap",
     justifyContent: "center",
     gap: "layout.controlGap",
+    paddingBlock: "layout.tightGap",
+    "[data-variant=bare] > &": { paddingBlock: "none" },
 });
-export function EmptyState({ icon, title, description, action, variant = "block", className, ...props }) {
+export function EmptyState({ icon, title, description, action, secondaryAction, variant = "block", className, ...props }) {
     if (variant === "inline") {
         return (_jsxs("section", { ...props, "data-ciridae-ui": "", className: cx(emptyState({ variant }), className), children: [_jsxs("span", { className: css({ display: "inline-flex", alignItems: "center", gap: "control.iconGap" }), children: [icon, title] }), description && _jsx("span", { children: description }), action] }));
     }
-    if (variant === "bare") {
-        return (_jsxs("section", { ...props, "data-ciridae-ui": "", className: cx(emptyState({ variant }), className), children: [icon && (_jsx("span", { className: emptyRing, "aria-hidden": "true", children: icon })), _jsxs("div", { className: emptyCopy, children: [_jsx(Heading, { level: 2, size: "small", children: title }), description && _jsx("p", { className: emptyDescription, children: description })] }), action && _jsx("div", { className: emptyActions, children: action })] }));
-    }
-    return (_jsx("section", { ...props, "data-ciridae-ui": "", className: cx(emptyState({ variant }), className), children: _jsxs("div", { className: css({ display: "grid", justifyItems: "center", gap: "layout.contentGap" }), children: [icon, _jsx(Heading, { level: 2, children: title }), description && _jsx("p", { className: css({ margin: "none", color: "fg.muted" }), children: description }), action] }) }));
+    return (_jsxs("section", { ...props, "data-ciridae-ui": "", "data-variant": variant, className: cx(emptyState({ variant }), className), children: [icon && (_jsx("span", { className: emptyRing, "aria-hidden": "true", children: icon })), _jsxs("div", { className: emptyCopy, children: [_jsx(Heading, { level: 2, size: "small", className: emptyTitle, children: title }), description && _jsx("p", { className: emptyDescription, children: description })] }), (action || secondaryAction) && (_jsxs("div", { className: emptyActions, children: [secondaryAction, action] }))] }));
+}
+// A dashboard tile with nothing to count, worn like the stat tile it stands in for.
+const emptyTile = css(cardSurface, {
+    display: "grid",
+    alignContent: "start",
+    justifyItems: "start",
+    gap: "layout.controlGap",
+    minHeight: "tile.minimum",
+    paddingBlock: "tile.block",
+    paddingInline: "tile.inline",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+const emptyTileLabel = css({ color: "fg.label" });
+const emptyTileValue = css({ color: "fg.primary", fontSize: "body" });
+const emptyTileNote = css({ color: "fg.subtle" });
+/** A stat tile with no figure: its label, a dash in the figure's place, and why. */
+export function EmptyTile({ label, note, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cx(emptyTile, className), "data-ciridae-ui": "", children: [_jsx("span", { className: emptyTileLabel, children: label }), _jsx("span", { className: emptyTileValue, children: "\u2014" }), note && _jsx("span", { className: emptyTileNote, children: note })] }));
 }

package/dist/components/notification-tray.d.ts

@@ -44,4 +44,4 @@ export type NotificationTrayProps = {
     onOpenChange?: (open: boolean) => void;
 };
 export type NotificationLabels = CiridaeLabels["notifications"];
-export declare function NotificationTray({ trigger, notifications, onOpen, onMarkAllRead, footerAction, placement, now, labels: ownLabels, open: ownOpen, onOpenChange, }: NotificationTrayProps): import("@types/react").JSX.Element;
+export declare function NotificationTray({ trigger, notifications, onOpen, onMarkAllRead, footerAction, placement, now, labels: ownLabels, open: ownOpen, onOpenChange, }: NotificationTrayProps): import("react").JSX.Element;

package/dist/components/notification-tray.js

@@ -45,12 +45,13 @@ const popup = css({
     maxWidth: "calc(100vw - token(spacing.layout.pageGap) * 2)",
     padding: "none",
     overflow: "hidden",
-    border: "1px solid token(colors.border.control)",
+    border: "1px solid token(colors.border.divider)",
     borderRadius: "action",
-    background: "bg.card",
+    background: "bg.popover",
+    backdropFilter: "blur(token(blurs.popover))",
     color: "fg.primary",
     textStyle: "body",
-    boxShadow: "card",
+    boxShadow: "soft",
     outline: "none",
 });
 const header = css({
@@ -66,7 +67,7 @@ const caughtUp = css({ color: "fg.muted", fontSize: "caption", fontWeight: "medi
 const filters = css({
     paddingInline: "panel.comfortable",
     paddingBottom: "layout.tightGap",
-    borderBottom: "1px solid token(colors.border.control)",
+    borderBottom: "1px solid token(colors.border.divider)",
 });
 const list = css({
     display: "grid",

package/dist/components/overlays.d.ts

@@ -53,7 +53,7 @@ export type DialogProps = Omit<ComponentProps<typeof BaseDialog.Root>, "children
         content: ReactNode;
     };
 };
-export declare function Dialog({ trigger, finalFocus, title, titleVisibility, icon: titleIcon, description, children, actions, leadingActions, kind, dismiss, closable, pending, dirty, closeLabel: ownCloseLabel, size, holdHeight, aside, onOpenChange, ...rootProps }: DialogProps): import("@types/react").JSX.Element;
+export declare function Dialog({ trigger, finalFocus, title, titleVisibility, icon: titleIcon, description, children, actions, leadingActions, kind, dismiss, closable, pending, dirty, closeLabel: ownCloseLabel, size, holdHeight, aside, onOpenChange, ...rootProps }: DialogProps): import("react").JSX.Element;
 export type AlertDialogProps = Omit<ComponentProps<typeof BaseAlertDialog.Root>, "children" | "actionsRef"> & {
     /** Omit for a dialog opened only through controlled `open`. */
     trigger?: ReactElement;
@@ -77,7 +77,7 @@ export type AlertDialogProps = Omit<ComponentProps<typeof BaseAlertDialog.Root>,
  * closes it, which Base UI keeps as the cancelling path, except while an
  * async confirmation is pending.
  */
-export declare function AlertDialog({ trigger, title, children, confirmLabel, cancelLabel, onConfirm, variant, onOpenChange, ...rootProps }: AlertDialogProps): import("@types/react").JSX.Element;
+export declare function AlertDialog({ trigger, title, children, confirmLabel, cancelLabel, onConfirm, variant, onOpenChange, ...rootProps }: AlertDialogProps): import("react").JSX.Element;
 export type PopoverProps = Omit<ComponentProps<typeof BasePopover.Root>, "children"> & {
     /** The button that opens it. Leave it out and pass `anchor` to open it from elsewhere, such as a menu item. */
     trigger?: ReactElement;
@@ -99,9 +99,11 @@ export type PopoverProps = Omit<ComponentProps<typeof BasePopover.Root>, "childr
      */
     openOnHover?: boolean;
 };
-export declare function Popover({ trigger, anchor, children, density, width, align, openOnHover, ...rootProps }: PopoverProps): import("@types/react").JSX.Element;
+export declare function Popover({ trigger, anchor, children, density, width, align, openOnHover, ...rootProps }: PopoverProps): import("react").JSX.Element;
 export type TooltipProps = Omit<ComponentProps<typeof BaseTooltip.Root>, "children"> & {
     children: ReactElement;
     content: ReactNode;
+    /** A count or shortcut after the content, quieter than it. */
+    meta?: ReactNode;
 };
-export declare function Tooltip({ children, content, ...rootProps }: TooltipProps): import("@types/react").JSX.Element;
+export declare function Tooltip({ children, content, meta, ...rootProps }: TooltipProps): import("react").JSX.Element;

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.d.ts

@@ -20,7 +20,7 @@ export type BreadcrumbsProps = ComponentProps<"nav"> & {
     current?: ReactNode;
 };
 /** The page's trail: its parents, then the page itself as the trail's heading. */
-export declare function Breadcrumbs({ crumbs, current: ownCurrent, ...props }: BreadcrumbsProps): import("@types/react").JSX.Element;
+export declare function Breadcrumbs({ crumbs, current: ownCurrent, ...props }: BreadcrumbsProps): import("react").JSX.Element;
 export type PageFrameProps = Omit<ComponentProps<"main">, "children"> & {
     crumbs: readonly Crumb[];
     /** The header's controls at its far edge, such as filters and the account menu. */
@@ -28,7 +28,7 @@ export type PageFrameProps = Omit<ComponentProps<"main">, "children"> & {
     children: ReactNode;
 };
 /** The main panel of a page: a header with its trail and actions, then the content. */
-export declare function PageFrame({ crumbs, headerActions, children, ...props }: PageFrameProps): import("@types/react").JSX.Element;
+export declare function PageFrame({ crumbs, headerActions, children, ...props }: PageFrameProps): import("react").JSX.Element;
 export type PageHeadingProps = Omit<ComponentProps<"div">, "title"> & {
     title: ReactNode;
     /** Before the title, such as a record's avatar or a project's mark. */
@@ -52,7 +52,7 @@ export type PageHeadingProps = Omit<ComponentProps<"div">, "title"> & {
  * The title a page or a record opens with, the line under it, and its own actions: a node, or menu
  * items behind an `OverflowMenu`.
  */
-export declare function PageHeading({ title, leading, badge, meta, actions, actionsOpen, onActionsOpenChange, level, labels: ownLabels, className, ...props }: PageHeadingProps): import("@types/react").JSX.Element;
+export declare function PageHeading({ title, leading, badge, meta, actions, actionsOpen, onActionsOpenChange, level, labels: ownLabels, className, ...props }: PageHeadingProps): import("react").JSX.Element;
 /** One count: the value that reads, and its muted label, as an object or a `[value, label]` pair. */
 export type Stat = {
     value: ReactNode;
@@ -62,4 +62,4 @@ export type Stat = {
 /** A row of `value label` stats split by dots: the value reads, the label stays muted. */
 export declare function StatLine({ stats, className, ...props }: ComponentProps<"span"> & {
     stats: readonly Stat[];
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

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

@@ -3,17 +3,17 @@ import type { ReactNode } from "react";
 /** The card's surface as a style object, to merge into a `css()` call that adds layout. */
 export declare const cardSurface: import("../styled-system/types/index.js").SystemStyleObject;
 export type CardProps = useRender.ComponentProps<"div">;
-export declare function Card({ render, className, ...props }: CardProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+export declare function Card({ render, className, ...props }: CardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type PanelProps = useRender.ComponentProps<"section"> & {
     /** `default` pads a group of rows; `compact` insets cards by a hairline; `none` runs flush. */
     padding?: "none" | "compact" | "default";
     /** `panel` is the translucent lift off the page; `outline` is the edge alone. */
     tone?: "panel" | "outline";
 };
-export declare function Panel({ padding, tone, render, className, ...props }: PanelProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+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;
@@ -21,4 +21,4 @@ export type PanelHeaderProps = Omit<useRender.ComponentProps<"div">, "title"> &
     level?: 2 | 3 | 4;
 };
 /** A panel's top row: its title and meta, and its actions at the far edge. */
-export declare function PanelHeader({ title, meta, actions, level, render, className, ...props }: PanelHeaderProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+export declare function PanelHeader({ title, meta, actions, level, render, className, ...props }: PanelHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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/profile-header.d.ts

@@ -12,4 +12,4 @@ export type ProfileHeaderProps = Omit<ComponentProps<"header">, "children" | "ti
     description?: ReactNode;
     actions?: ReactNode;
 };
-export declare function ProfileHeader({ name, kind, src, title, team, email, description, actions, className, ...props }: ProfileHeaderProps): import("@types/react").JSX.Element;
+export declare function ProfileHeader({ name, kind, src, title, team, email, description, actions, className, ...props }: ProfileHeaderProps): import("react").JSX.Element;

package/dist/components/progress.d.ts

@@ -2,4 +2,4 @@ import type { ReactNode } from "react";
 export declare function Progress({ value, label }: {
     value: number;
     label?: ReactNode;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/project-avatar.d.ts

@@ -9,4 +9,4 @@ export declare function ProjectAvatar({ projectId, name, size, className, }: {
     name: string;
     size?: ComponentProps<typeof Avatar>["size"];
     className?: string;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/radio-card.d.ts

@@ -9,7 +9,7 @@ export type RadioCardGroupProps = Omit<ComponentProps<typeof BaseRadioGroup>, "d
     value?: string;
     onValueChange?: (value: string) => void;
 };
-export declare function RadioCardGroup({ name, label, defaultValue, value, onValueChange, className, ...props }: RadioCardGroupProps): import("@types/react").JSX.Element;
+export declare function RadioCardGroup({ name, label, defaultValue, value, onValueChange, className, ...props }: RadioCardGroupProps): import("react").JSX.Element;
 export type RadioCardProps = Omit<ComponentProps<typeof BaseRadio.Root>, "children" | "className"> & {
     value: string;
     title: ReactNode;
@@ -19,4 +19,4 @@ export type RadioCardProps = Omit<ComponentProps<typeof BaseRadio.Root>, "childr
     className?: string;
 };
 /** One option of a `RadioCardGroup`. */
-export declare function RadioCard({ title, detail, source: sourceContent, className, ...props }: RadioCardProps): import("@types/react").JSX.Element;
+export declare function RadioCard({ title, detail, source: sourceContent, className, ...props }: RadioCardProps): import("react").JSX.Element;