@ciridae/ui 1.0.3 → 1.0.5

package/dist/components/shell.js

@@ -7,14 +7,13 @@ import { IconButton, IconButtonSizeContext } from "./button.js";
 import { PageHotkeys, useHotkey } from "./hotkeys.js";
 import { icon } from "./icon.js";
 import { useCiridaeLocale } from "./locale.js";
+import { singleLineTextClass } from "./single-line-text.js";
 // The sidebar sits flush against the window; only the main panel is inset from the edges.
 const shell = css({
     display: "flex",
     height: "100dvh",
-    paddingBlock: "panel.compact",
-    paddingInlineEnd: "panel.compact",
     overflow: "hidden",
-    background: "bg.canvas",
+    background: "token(gradients.canvas)",
     color: "fg.primary",
     // Compact line height leaves clipped text room for its descenders throughout the app frame.
     textStyle: "body",
@@ -23,26 +22,23 @@ const shell = css({
 const sidebar = css({
     display: "flex",
     flexDirection: "column",
-    gap: "sidebar.groupGap",
-    paddingBlock: "panel.sidebarBlock",
-    // The first row, a control's height such as the workspace switcher, centres on the header's
-    // line beside it: half the difference, plus the main panel's 1px edge.
-    // The last row, the account, mirrors it at the foot: as far inside the main panel's bottom edge
-    // as the first row sits inside its top.
-    _notPhone: {
-        paddingBlock: "calc((token(sizes.shell.header) - token(sizes.control.default)) / 2 + 1px)",
-    },
+    // Between the navigation and the footer; the navigation's own groups stand `sidebar.groupGap` apart.
+    gap: "sidebar.footerGap",
+    paddingBlock: "sidebar.block",
     paddingInline: "sidebar.inline",
     width: "shell.sidebar",
     flexShrink: "0",
     overflowY: "auto",
     // The rail swaps every expanded control for its `data-compact-sidebar` icon twin.
     "& [data-compact-sidebar]": { display: "none" },
-    "&[data-collapsed]": {
-        width: "shell.collapsed",
-        alignItems: "center",
-        "& [data-expanded-sidebar]": { display: "none" },
-        "& [data-compact-sidebar]": { display: "flex" },
+    // A phone's menu always shows the labelled navigation, whatever the desktop sidebar's state.
+    _notPhone: {
+        "&[data-collapsed]": {
+            width: "shell.collapsed",
+            alignItems: "center",
+            "& [data-expanded-sidebar]": { display: "none" },
+            "& [data-compact-sidebar]": { display: "flex" },
+        },
     },
     _rail: {
         width: "shell.collapsed",
@@ -62,7 +58,7 @@ const sidebar = css({
         zIndex: "drawer",
         width: "shell.sidebar",
         alignItems: "stretch",
-        background: "bg.canvas",
+        background: "token(gradients.canvas)",
         borderInlineEnd: "1px solid token(colors.border.panel)",
         boxShadow: "card",
         transform: "translateX(-100%)",
@@ -89,12 +85,15 @@ const main = css({
     flexDirection: "column",
     flex: "1",
     minWidth: "0",
-    border: "1px solid token(colors.border.panel)",
+    marginBlock: "panel.compact",
+    marginInlineEnd: "panel.compact",
+    border: "1px solid token(colors.border.canvas)",
     borderRadius: "action",
-    background: "bg.panel",
+    background: "token(gradients.panel)",
     overflow: "hidden",
     // Only once the panel spans the whole window does rounding read as a gap.
     _phone: {
+        margin: "none",
         borderRadius: "0",
         height: "100dvh",
         border: "0",
@@ -109,7 +108,7 @@ const header = css({
     flexShrink: "0",
     paddingInlineEnd: "control.compactInline",
     paddingInlineStart: "control.inline",
-    borderBottom: "1px solid token(colors.border.panel)",
+    borderBottom: "1px solid token(colors.border.divider)",
     "& > :last-child": { minWidth: "0", maxWidth: "100%" },
     // Once the sidebar is gone the header stays one row: the title truncates, the actions keep
     // their width.
@@ -118,22 +117,25 @@ const header = css({
         padding: "panel.default",
         "& > [data-header-title]": {
             minWidth: "0",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
+            overflowX: "clip",
+            overflowY: "visible",
             textOverflow: "ellipsis",
-            lineHeight: "compact",
+            whiteSpace: "nowrap",
         },
         // The actions hold one line: a slicer keeps its value and drops the dimension it names.
         "& > :last-child": { flexShrink: "0", flexWrap: "nowrap" },
         "& [data-slicer-label]": { srOnly: true },
     },
 });
+// The trail's parents; the page itself, last, is in the primary text.
 const headerTitle = css({
     flex: "1",
     minWidth: "0",
     color: "fg.muted",
+    _light: { color: "fg.secondary" },
     fontSize: "caption",
     fontWeight: "medium",
+    lineHeight: "tight",
 });
 const content = css({
     flex: "1",
@@ -201,14 +203,14 @@ const sidebarRail = css({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    gap: "layout.tightGap",
+    gap: "sidebar.groupGap",
 });
 /* One sidebar's content stacks at its container's own gap, so a footer's controls keep their room. */
 const sidebarOnly = css({ display: "flex", flexDirection: "column", gap: "inherit" });
 const sidebarNav = css({
     display: "flex",
     flexDirection: "column",
-    gap: "layout.controlGap",
+    gap: "sidebar.groupGap",
     minHeight: "0",
     overflowY: "auto",
     // Scrolling would clip the ring of anything outer-ringed placed among the items.
@@ -216,11 +218,9 @@ const sidebarNav = css({
 });
 const sidebarFooter = css({
     marginTop: "auto",
-    // Room above the footer's first control, so it never sits tight under the last nav row.
-    paddingTop: "layout.contentGap",
     display: "flex",
     flexDirection: "column",
-    gap: "layout.contentGap",
+    gap: "layout.controlGap",
     // A phone shows the footer in its menu at full width, as the expanded sidebar does.
     _rail: { _notPhone: { alignItems: "center" } },
 });
@@ -270,7 +270,7 @@ const headerActions = css({
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end",
-    gap: "layout.contentGap",
+    gap: "layout.tightGap",
     minWidth: "0",
 });
 /** The header's copy of the rail, for widths where the sidebar is gone altogether. */
@@ -290,9 +290,9 @@ const crumbs = css({
     whiteSpace: "nowrap",
     "& > :last-child": {
         minWidth: "0",
-        overflow: "hidden",
+        overflowX: "clip",
+        overflowY: "visible",
         textOverflow: "ellipsis",
-        lineHeight: "compact",
     },
     _phone: { gap: "layout.tightGap" },
     "& a:hover": { textDecoration: "underline" },
@@ -331,7 +331,7 @@ export function AppBreadcrumbs({ className, ...props }) {
     const { labels } = useCiridaeLocale();
     return _jsx("nav", { "aria-label": labels.shell.breadcrumb, ...props, className: cx(crumbs, className) });
 }
-const crumbSeparator = css({ color: "fg.muted" });
+const crumbSeparator = css({ color: "fg.subtle" });
 // The page's title, as its one h1, set in the trail's own type.
 const crumbCurrent = css({
     margin: "none",
@@ -373,9 +373,9 @@ const account = css({
     alignItems: "center",
     gap: "sidebar.markGap",
     width: "100%",
-    padding: "layout.tightGap",
+    padding: "control.compactBlock",
     border: "0",
-    borderRadius: "action",
+    borderRadius: "keycap",
     background: "transparent",
     color: "inherit",
     font: "inherit",
@@ -393,25 +393,23 @@ const accountAvatarOnly = css({
     cursor: "pointer",
     _focusVisible: { focusRing: "outer" },
 });
+// The name and the detail under it, 4px apart as the design's account row stacks them: each line
+// sits at its type's own height, so without the gap the two would touch.
 const accountCopy = css({
     display: "grid",
+    gap: "layout.tightGap",
     flex: "1",
     minWidth: "0",
-    "& > *": {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        lineHeight: "compact",
-    },
-    "& > :last-child": { color: "fg.muted", fontSize: "caption" },
+    "& > strong": { fontWeight: "medium" },
+    "& > :nth-child(2)": { color: "fg.muted", fontSize: "caption" },
 });
 /**
- * The signed-in account as a menu trigger: avatar, name, and a detail line, or with `compact` the
- * avatar alone.
+ * The signed-in account as a menu trigger: avatar, name, and a detail line if given, or with
+ * `compact` the avatar alone.
  */
 export function AppAccountButton({ avatar, name, detail, trailing, compact = false, className, ...props }) {
     if (compact) {
         return (_jsx("button", { type: "button", ...props, className: cx(accountAvatarOnly, className), children: avatar }));
     }
-    return (_jsxs("button", { type: "button", ...props, className: cx(account, className), children: [avatar, _jsxs("span", { className: accountCopy, children: [_jsx("strong", { children: name }), _jsx("span", { children: detail })] }), trailing] }));
+    return (_jsxs("button", { type: "button", ...props, className: cx(account, className), children: [avatar, _jsxs("span", { className: accountCopy, children: [_jsx("strong", { className: singleLineTextClass, children: name }), detail && _jsx("span", { className: singleLineTextClass, children: detail })] }), trailing] }));
 }

package/dist/components/sidebar.d.ts

@@ -2,6 +2,8 @@ import { useRender } from "@base-ui/react/use-render";
 import type { ComponentProps, ReactNode } from "react";
 export declare function SidebarNavigation({ className, ...props }: ComponentProps<"nav">): import("react").JSX.Element;
 export declare function SidebarDivider({ className, ...props }: ComponentProps<"hr">): import("react").JSX.Element;
+/** Opens a labelled section in the rail, as its label does in the expanded sidebar. */
+export declare function SidebarRailRule({ className, ...props }: ComponentProps<"hr">): import("react").JSX.Element;
 export declare function SidebarPanel({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
 export declare function SidebarSection({ label, action, iconTone, className, children, ...props }: ComponentProps<"div"> & {
     label?: ReactNode;
@@ -29,7 +31,10 @@ export type SidebarItemProps = useRender.ComponentProps<"button"> & {
     active?: boolean;
     /** Tint the leading icon bronze while inactive, as the Projects hub sidebar does. */
     iconTone?: "bronze";
-    /** `compact` is a secondary list's row, such as recently opened records. */
-    size?: "regular" | "compact";
+    /**
+     * `compact` is a secondary list's row, such as recently opened records; `short` a shorter row
+     * in the body type, such as the settings sidebar's Back to app.
+     */
+    size?: "regular" | "compact" | "short";
 };
 export declare function SidebarItem({ icon, trailing, action, active, iconTone, size, href, render, className, children, ...props }: SidebarItemProps): import("react").JSX.Element;

package/dist/components/sidebar.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRender } from "@base-ui/react/use-render";
 import { css, cx } from "#primitives/css";
 import { IconButtonSizeContext } from "./button.js";
+import { singleLineText } from "./single-line-text.js";
 // Navigation sits in the shell's sidebar; it is not a panel of its own.
 const navigation = css({
     display: "flex",
@@ -33,6 +34,17 @@ const sectionLabel = css({
     "&[data-icon-tone=bronze] > svg": { color: "accent.bronze" },
 });
 const sectionAction = css({ display: "inline-flex", marginInlineStart: "auto" });
+// A labelled section's mark in the rail, where there is no room for its label: a short rule.
+const railRule = css({
+    flexShrink: "0",
+    width: "sidebar.railRule",
+    height: "border.hairline",
+    marginTop: "none",
+    marginInline: "auto",
+    marginBottom: "panel.default",
+    border: "0",
+    background: "border.divider",
+});
 const divider = css({
     width: "100%",
     height: "border.hairline",
@@ -40,15 +52,20 @@ const divider = css({
     border: "0",
     background: "border.hairline",
 });
+/*
+ * A row is square-cornered at rest; hovered, open or focused it rounds into a pill. The open page
+ * sits on the canvas's field face inside its edge; a hover is a faint wash in light and the
+ * selected glass in dark.
+ */
 const item = css({
     display: "flex",
     alignItems: "center",
     gap: "layout.controlGap",
     width: "100%",
-    height: "control.small",
+    height: "control.row",
     paddingInline: "control.compactInline",
     border: "0",
-    borderRadius: "action",
+    borderRadius: "nav",
     background: "transparent",
     // Muted against the dark canvas; light keeps every item at full contrast, as Round 2 does.
     color: "fg.muted",
@@ -60,24 +77,30 @@ const item = css({
     lineHeight: "tight",
     textAlign: "start",
     cursor: "pointer",
-    transitionProperty: "background, color",
+    transitionProperty: "background, color, border-radius",
     transitionDuration: "fast",
     "& > svg:first-child": { opacity: ".7" },
     "&[data-icon-tone=bronze] > svg:first-child": { color: "accent.bronze" },
     "&:hover, &[aria-pressed=true]": {
-        background: "bg.hover",
+        borderRadius: "shell",
+        background: "token(gradients.selected)",
+        _light: { background: "bg.rowHover" },
         color: "fg.primary",
         "& > svg:first-child": { color: "inherit" },
     },
-    // The open page keeps the hover shape and size, so moving between pages shifts nothing; the
-    // accent wash and the panel's own edge are what mark it.
+    // The open page keeps the hover shape and size; the field face and the canvas's edge mark it.
+    // The design counts that edge inside the row, so its content sits a hairline further in.
     "&[aria-current=page]": {
-        background: "bg.selected",
-        boxShadow: "inset 0 0 0 1px token(colors.border.panel)",
+        borderRadius: "shell",
+        background: "bg.field",
+        boxShadow: "inset 0 0 0 1px token(colors.border.canvas)",
         color: "fg.primary",
         "& > svg:first-child": { color: "inherit", opacity: "1" },
+        "&:not([data-icon-only])": {
+            paddingInline: "calc(token(spacing.control.compactInline) + token(sizes.border.hairline))",
+        },
     },
-    _focusVisible: { focusRing: "inset" },
+    _focusVisible: { borderRadius: "shell", focusRing: "outer" },
     // A secondary list under the navigation, such as recently opened records: a shorter row in
     // smaller, quieter text, so it reads apart from the pages above it.
     "&[data-size=compact]": {
@@ -85,23 +108,19 @@ const item = css({
         color: "fg.secondary",
         fontSize: "caption",
     },
-    // With no label it is the rail's square: the same hover, open-page fill and edge, icon only.
+    // A shorter row in the body type, such as the settings sidebar's way back to the app.
+    "&[data-size=short]": { height: "sidebar.shortRow" },
+    // With no label it is the rail's round button: the same hover, open-page face and edge, icon only.
     "&[data-icon-only]": {
         justifyContent: "center",
-        width: "control.default",
-        height: "control.default",
+        width: "control.compact",
+        height: "control.compact",
         paddingInline: "none",
-        "& > svg:first-child": { opacity: "1", fontSize: "icon.rail" },
+        borderRadius: "round",
+        "& > svg:first-child": { opacity: "1", fontSize: "icon.small" },
     },
 });
-const label = css({
-    minWidth: "0",
-    flex: "1",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    lineHeight: "compact",
-});
+const label = css(singleLineText, { flex: "1" });
 const trailingStyle = css({ display: "inline-flex", flexShrink: "0", color: "fg.subtle" });
 // A row with an action: the group draws the row's hover, open-page fill and edge, so they span the
 // action too, and the row inside it stays transparent.
@@ -110,21 +129,26 @@ const itemGroup = css({
     alignItems: "center",
     width: "100%",
     minWidth: "0",
-    borderRadius: "action",
-    transitionProperty: "background",
+    borderRadius: "nav",
+    transitionProperty: "background, border-radius",
     transitionDuration: "fast",
-    "&:hover": { background: "bg.hover" },
+    "&:hover": {
+        borderRadius: "shell",
+        background: "token(gradients.selected)",
+        _light: { background: "bg.rowHover" },
+    },
     "&:hover > [data-sidebar-row]": { color: "fg.primary" },
     "&:has(> [data-sidebar-row][aria-current=page])": {
-        background: "bg.selected",
-        boxShadow: "inset 0 0 0 1px token(colors.border.panel)",
+        borderRadius: "shell",
+        background: "bg.field",
+        boxShadow: "inset 0 0 0 1px token(colors.border.canvas)",
     },
     // The group draws the one wash; the row inside never adds its own on hover or when current.
     "& > [data-sidebar-row]": { minWidth: "0" },
     "& > [data-sidebar-row], & > [data-sidebar-row]:is(:hover, [aria-current=page], [aria-pressed=true])": { background: "transparent", boxShadow: "none" },
     // Focus rings the whole row, action included, not just the link inside it.
     "& > [data-sidebar-row]:focus-visible": { outline: "none" },
-    "&:has(> [data-sidebar-row]:focus-visible)": { focusRing: "inset" },
+    "&:has(> [data-sidebar-row]:focus-visible)": { borderRadius: "shell", focusRing: "outer" },
     "&:hover > [data-sidebar-action], & > [data-sidebar-action]:focus-within": { opacity: "1" },
 });
 // Revealed on hover or focus; always shown where there is no hover to reveal it.
@@ -171,6 +195,10 @@ export function SidebarNavigation({ className, ...props }) {
 export function SidebarDivider({ className, ...props }) {
     return _jsx("hr", { ...props, className: cx(divider, className), "data-ciridae-ui": "" });
 }
+/** Opens a labelled section in the rail, as its label does in the expanded sidebar. */
+export function SidebarRailRule({ className, ...props }) {
+    return _jsx("hr", { ...props, className: cx(railRule, className), "data-ciridae-ui": "" });
+}
 export function SidebarPanel({ className, ...props }) {
     return _jsx("div", { ...props, className: cx(panel, className), "data-ciridae-ui": "" });
 }

package/dist/components/single-line-text.d.ts

@@ -0,0 +1,2 @@
+export declare const singleLineText: import("../styled-system/types/index.js").SystemStyleObject;
+export declare const singleLineTextClass: string;

package/dist/components/single-line-text.js

@@ -0,0 +1,16 @@
+import { css } from "#primitives/css";
+/*
+ * One line of text at the type's own height, as the design sets every single-line label, cut
+ * with an ellipsis when it runs out of room. It clips sideways only, so the descenders that reach
+ * below a line box that tight stay whole. Compose it at the top level of a `css()` call, or as the
+ * class `singleLineTextClass`: Panda does not extract it from under a nested selector.
+ */
+export const singleLineText = css.raw({
+    minWidth: "0",
+    overflowX: "clip",
+    overflowY: "visible",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    lineHeight: "tight",
+});
+export const singleLineTextClass = css(singleLineText);

package/dist/components/site-banner.d.ts

@@ -19,7 +19,10 @@ declare const banner: import("../styled-system/types/index.js").RecipeRuntimeFn<
         };
     };
 }>;
-export type SiteBannerProps = ComponentProps<"div"> & RecipeVariantProps<typeof banner>;
+export type SiteBannerProps = ComponentProps<"div"> & RecipeVariantProps<typeof banner> & {
+    /** Adds a close button at the strip's end. */
+    onDismiss?: () => void;
+};
 /** A quiet, full-width site notice, separate from page-level status banners. */
-export declare function SiteBanner({ tone, className, ...props }: SiteBannerProps): import("react").JSX.Element;
+export declare function SiteBanner({ tone, onDismiss, className, children, ...props }: SiteBannerProps): import("react").JSX.Element;
 export {};

package/dist/components/site-banner.js

@@ -1,12 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cva, cx } from "#primitives/css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from "@phosphor-icons/react";
+import { css, cva, cx } from "#primitives/css";
+import { IconButton } from "./button.js";
+import { icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
 const banner = cva({
     base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "layout.controlGap",
         flexShrink: "0",
         width: "100%",
         boxSizing: "border-box",
-        paddingBlock: "2px",
-        paddingInline: "16px",
+        paddingBlock: "control.trackInset",
+        paddingInline: "control.inline",
         textAlign: "start",
         fontSize: "11px",
         fontWeight: "medium",
@@ -24,7 +31,11 @@ const banner = cva({
     },
     defaultVariants: { tone: "info" },
 });
+const message = css({ flex: "1", minWidth: "0" });
+// The strip keeps its height: the button reaches past the line by as much as it is taller.
+const dismissButton = css({ marginBlock: "calc((1lh - token(sizes.control.shortcut)) / 2)" });
 /** A quiet, full-width site notice, separate from page-level status banners. */
-export function SiteBanner({ tone, className, ...props }) {
-    return _jsx("div", { ...props, className: cx(banner({ tone }), className) });
+export function SiteBanner({ tone, onDismiss, className, children, ...props }) {
+    const { labels } = useCiridaeLocale();
+    return (_jsxs("div", { ...props, className: cx(banner({ tone }), className), children: [_jsx("span", { className: message, children: children }), onDismiss && (_jsx(IconButton, { "aria-label": labels.common.dismiss, variant: "ghost", size: "compact", className: dismissButton, onClick: onDismiss, children: _jsx(XIcon, { className: icon({ size: "compact" }) }) }))] }));
 }

package/dist/components/skeleton.d.ts

@@ -1,14 +1,15 @@
 import type { ComponentProps } from "react";
 export type SkeletonWidth = "short" | "medium" | "long" | "full" | `${number}%`;
-export type SkeletonHeight = "text" | "caption" | "control" | "row" | "block" | "chart" | "chart.small" | "chart.medium" | "chart.large";
+export type SkeletonHeight = "text" | "caption" | "line" | "smallLine" | "bar" | "badge" | "control" | "row" | "block" | "chart" | "chart.small" | "chart.medium" | "chart.large";
 /**
- * Loading placeholder with a shimmer. `block` fills its box, `text` takes one line of the
- * surrounding text, `circle` stands in for avatars and icons, and `square` for logos and tiles. Size it with `width` (a token
- * length, `full`, or a percentage of its box) and `height` (a line of text or caption, a control,
- * a list row, the whole box, or a chart's height).
+ * Loading placeholder. `block` fills its box, `text` takes one line of the surrounding text,
+ * `circle` stands in for an avatar, `square` for a checkbox, and `pill` for a status chip. Size it
+ * with `width` (a token length, `full`, or a percentage of its box) and `height` (a line of text
+ * or small print, the design's fixed line or small line, a bar, a small badge, a control, a list
+ * row, the whole box, or a chart's height).
  */
 export declare function Skeleton({ shape, width, height, className, style, ...props }: ComponentProps<"span"> & {
-    shape?: "block" | "text" | "circle" | "square";
+    shape?: "block" | "text" | "circle" | "square" | "pill";
     /** A token width, for a value of roughly known length, or a share of the box such as `"60%"`. */
     width?: SkeletonWidth;
     height?: SkeletonHeight;

package/dist/components/skeleton.js

@@ -1,43 +1,54 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { css, cx } from "#primitives/css";
+// The design draws placeholders flat, with no shimmer: the canvas's gradient in light, a white
+// wash in dark. Every bar is fully rounded except the block, the box and the bar.
 const skeleton = css({
     display: "block",
     flexShrink: "0",
-    background: "token(gradients.skeleton)",
-    backgroundSize: "200% 100%",
-    animation: "skeletonShimmer 1.6s ease-in-out infinite",
-    _motionReduce: { animation: "none" },
-    "&[data-shape=block]": { minHeight: "skeleton.line", borderRadius: "action" },
+    background: "token(gradients.skeletonFill)",
+    "&[data-shape=block]": { minHeight: "skeleton.line", borderRadius: "control" },
     // One line of the surrounding text: the bar is shorter than the line box and centered in it.
     "&[data-shape=text]": {
         width: "100%",
         height: "0.75em",
         marginBlock: "calc((1lh - 0.75em) / 2)",
-        borderRadius: "keycap",
+        borderRadius: "round",
     },
     "&[data-shape=circle]": {
-        width: "control.compact",
+        width: "avatar.menu",
         aspectRatio: "1",
         borderRadius: "round",
     },
     "&[data-shape=square]": {
-        width: "control.compact",
+        width: "control.checkbox",
         aspectRatio: "1",
-        borderRadius: "action",
+        borderRadius: "control",
+    },
+    // A status chip's or a badge's placeholder.
+    "&[data-shape=pill]": {
+        width: "skeleton.pill",
+        height: "skeleton.bar",
+        borderRadius: "round",
     },
     "&[data-shape][data-width=short]": { width: "skeleton.short" },
     "&[data-shape][data-width=medium]": { width: "skeleton.medium" },
     "&[data-shape][data-width=long]": { width: "skeleton.long" },
     "&[data-shape][data-width=full]": { width: "100%" },
-    // A line of caption text, as `text` is a line of the surrounding text.
+    // A line of small print, such as a row's meta line, under a line of text.
     "&[data-shape][data-height=caption]": {
-        height: "calc(token(fontSizes.caption) * 0.75)",
-        marginBlock: "calc((1lh - token(fontSizes.caption) * 0.75) / 2)",
+        height: "skeleton.caption",
+        marginBlock: "calc((1lh - token(sizes.skeleton.caption)) / 2)",
     },
     "&[data-shape][data-height=text]": {
         height: "0.75em",
         marginBlock: "calc((1lh - 0.75em) / 2)",
     },
+    // The design's fixed text bars, with no line box round them: a line, and a small one.
+    "&[data-shape][data-height=line]": { height: "skeleton.textLine", marginBlock: "0" },
+    "&[data-shape][data-height=smallLine]": { height: "skeleton.caption", marginBlock: "0" },
+    // A bar in a chart's or a breakdown's placeholder, and a small badge's.
+    "&[data-shape][data-height=bar]": { height: "skeleton.bar", marginBlock: "0" },
+    "&[data-shape][data-height=badge]": { height: "skeleton.badge", marginBlock: "0" },
     "&[data-shape][data-height=control]": { height: "control.default", marginBlock: "0" },
     "&[data-shape][data-height=row]": { height: "control.field", marginBlock: "0" },
     "&[data-shape][data-height=block]": { height: "100%", marginBlock: "0" },
@@ -49,10 +60,11 @@ const skeleton = css({
     "&[data-shape][data-height='chart.large']": { height: "chart.large", marginBlock: "0" },
 });
 /**
- * Loading placeholder with a shimmer. `block` fills its box, `text` takes one line of the
- * surrounding text, `circle` stands in for avatars and icons, and `square` for logos and tiles. Size it with `width` (a token
- * length, `full`, or a percentage of its box) and `height` (a line of text or caption, a control,
- * a list row, the whole box, or a chart's height).
+ * Loading placeholder. `block` fills its box, `text` takes one line of the surrounding text,
+ * `circle` stands in for an avatar, `square` for a checkbox, and `pill` for a status chip. Size it
+ * with `width` (a token length, `full`, or a percentage of its box) and `height` (a line of text
+ * or small print, the design's fixed line or small line, a bar, a small badge, a control, a list
+ * row, the whole box, or a chart's height).
  */
 export function Skeleton({ shape = "block", width, height, className, style, ...props }) {
     const percent = width?.endsWith("%") ? width : undefined;

package/dist/components/skeletons.d.ts

@@ -13,6 +13,18 @@ export declare function PageHeaderSkeleton({ avatar, actions, }: {
 export declare function PanelSkeleton({ rows }: {
     rows?: number;
 }): import("react").JSX.Element;
+/** Stands in for list rows: a line of text over a line of small print, then a status chip. */
+export declare function ListRowsSkeleton({ rows }: {
+    rows?: number;
+}): import("react").JSX.Element;
+/** Stands in for a stat tile: its label, a small badge for the figure, and a line of small print. */
+export declare function StatTileSkeleton({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/** Stands in for a card: a title and its meta line, labelled bars, and a takeaway under a rule. */
+export declare function CardSkeleton({ bars }: {
+    bars?: number;
+}): import("react").JSX.Element;
 /** Placeholder for a row's compact edit and delete icon buttons. */
 export declare function RowActionsSkeleton(): import("react").JSX.Element;
 /**