@ciridae/ui 1.0.4 → 1.0.9

package/dist/components/shell.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import { ListIcon } from "@phosphor-icons/react";
-import { createContext, useContext, useMemo, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { css, cx } from "#primitives/css";
 import { IconButton, IconButtonSizeContext } from "./button.js";
 import { PageHotkeys, useHotkey } from "./hotkeys.js";
@@ -11,9 +11,9 @@ 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",
+    height: "[100dvh]",
     overflow: "hidden",
-    background: "token(gradients.canvas)",
+    background: "[token(gradients.canvas)]",
     color: "fg.primary",
     // Compact line height leaves clipped text room for its descenders throughout the app frame.
     textStyle: "body",
@@ -53,18 +53,18 @@ const sidebar = css({
     // button, with its full labelled content rather than the rail.
     _phone: {
         position: "fixed",
-        insetBlock: "0",
-        insetInlineStart: "0",
+        insetBlock: "none",
+        insetInlineStart: "none",
         zIndex: "drawer",
         width: "shell.sidebar",
         alignItems: "stretch",
-        background: "token(gradients.canvas)",
+        background: "[token(gradients.canvas)]",
         borderInlineEnd: "1px solid token(colors.border.panel)",
         boxShadow: "card",
         transform: "translateX(-100%)",
         _rtl: { transform: "translateX(100%)" },
         visibility: "hidden",
-        transitionProperty: "transform, visibility",
+        transitionProperty: "[transform, visibility]",
         transitionDuration: "fast",
         "&[data-menu-open]": { transform: "none", visibility: "visible" },
     },
@@ -74,7 +74,7 @@ const menuBackdrop = css({
     _phone: {
         display: "block",
         position: "fixed",
-        inset: "0",
+        inset: "none",
         zIndex: "drawer",
         background: "bg.backdrop",
     },
@@ -89,13 +89,13 @@ const main = css({
     marginInlineEnd: "panel.compact",
     border: "1px solid token(colors.border.canvas)",
     borderRadius: "action",
-    background: "token(gradients.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",
+        borderRadius: "none",
+        height: "[100dvh]",
         border: "0",
     },
 });
@@ -109,7 +109,7 @@ const header = css({
     paddingInlineEnd: "control.compactInline",
     paddingInlineStart: "control.inline",
     borderBottom: "1px solid token(colors.border.divider)",
-    "& > :last-child": { minWidth: "0", maxWidth: "100%" },
+    "& > :last-child": { minWidth: "0", maxWidth: "full" },
     // Once the sidebar is gone the header stays one row: the title truncates, the actions keep
     // their width.
     _phone: {
@@ -127,7 +127,6 @@ const header = css({
         "& [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",
@@ -146,11 +145,18 @@ const content = css({
     padding: "var(--app-content-inset)",
     _phone: { "--app-content-inset": "token(spacing.panel.default)" },
 });
+/** Focuses the Menu button now in the ref, which a page change may have replaced. */
+function focusMenuButton(buttonRef, onlyIfFocusIsLost) {
+    if (!onlyIfFocusIsLost || document.activeElement === document.body)
+        buttonRef.current?.focus();
+}
 /** Whether the phone menu (the sidebar slid in over the page) is open. */
 const ShellMenuContext = createContext({
     open: false,
     setOpen: () => undefined,
+    buttonRef: { current: null },
 });
+const menuFocusableSelector = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])";
 /** In the page's scope, so Escape in an overlay over the menu closes only the overlay. */
 function CloseShellMenuOnEscape() {
     const menu = useContext(ShellMenuContext);
@@ -163,13 +169,50 @@ function CloseShellMenuOnEscape() {
 }
 export function AppShell({ className, children, ...props }) {
     const [menuOpen, setMenuOpen] = useState(false);
-    const menu = useMemo(() => ({ open: menuOpen, setOpen: setMenuOpen }), [menuOpen]);
+    const buttonRef = useRef(null);
+    const menu = useMemo(() => ({ open: menuOpen, setOpen: setMenuOpen, buttonRef }), [menuOpen]);
     return (_jsx(ShellMenuContext, { value: menu, children: _jsxs("div", { ...props, className: cx(shell, className), "data-ciridae-ui": "", children: [menuOpen && _jsx("div", { className: menuBackdrop, onClick: () => setMenuOpen(false) }), _jsxs(PageHotkeys, { children: [_jsx(CloseShellMenuOnEscape, {}), children] })] }) }));
 }
-export function AppSidebar({ className, collapsed, onClickCapture, ...props }) {
+export function AppSidebar({ className, collapsed, onClickCapture, onKeyDown, ...props }) {
     const menu = useContext(ShellMenuContext);
+    const sidebarRef = useRef(null);
+    const { buttonRef, open: menuIsOpen } = menu;
+    // The open menu takes the focus and gives it back to the Menu button when it closes.
+    useEffect(() => {
+        if (!menuIsOpen)
+            return;
+        // The sidebar cannot take focus until its visibility transition has started, a frame later.
+        let frame = requestAnimationFrame(() => {
+            frame = requestAnimationFrame(() => sidebarRef.current?.querySelector(menuFocusableSelector)?.focus());
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+            focusMenuButton(buttonRef, false);
+            // A page change replaces the header and its Menu button, which drops the focus again.
+            requestAnimationFrame(() => focusMenuButton(buttonRef, true));
+        };
+    }, [menuIsOpen, buttonRef]);
+    const keepTabInsideMenu = (event) => {
+        onKeyDown?.(event);
+        if (!menu.open || event.key !== "Tab")
+            return;
+        const focusable = [
+            ...event.currentTarget.querySelectorAll(menuFocusableSelector),
+        ].filter((element) => element.checkVisibility());
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (event.shiftKey && document.activeElement === first) {
+            event.preventDefault();
+            last?.focus();
+        }
+        else if (!event.shiftKey && document.activeElement === last) {
+            event.preventDefault();
+            first?.focus();
+        }
+    };
     // Choosing a page from the phone menu closes it, as does an item of a menu opened from it, such
-    // as the account menu; a row's action, such as a pin, and a menu's own trigger do not.
+    // as the account menu; a row's action, such as a pin, the More and Less row, and a menu's own
+    // trigger do not.
     const closeMenuOnNavigation = (event) => {
         onClickCapture?.(event);
         const target = event.target instanceof Element ? event.target : null;
@@ -179,13 +222,13 @@ export function AppSidebar({ className, collapsed, onClickCapture, ...props }) {
             menu.setOpen(false);
         }
     };
-    return (_jsx("aside", { ...props, className: cx(sidebar, className), "data-collapsed": collapsed || undefined, "data-menu-open": menu.open || undefined, onClickCapture: closeMenuOnNavigation }));
+    return (_jsx("aside", { ...props, ref: sidebarRef, className: cx(sidebar, className), "data-collapsed": collapsed || undefined, "data-menu-open": menu.open || undefined, onClickCapture: closeMenuOnNavigation, onKeyDown: keepTabInsideMenu }));
 }
 /** Opens the sidebar as a menu on a phone; hidden at any width that shows the sidebar. */
 function AppMenuButton() {
     const menu = useContext(ShellMenuContext);
     const { labels } = useCiridaeLocale();
-    return (_jsx("span", { className: menuButton, children: _jsx(IconButton, { "aria-label": labels.shell.menu, "aria-expanded": menu.open, variant: "ghost", onClick: () => menu.setOpen(!menu.open), children: _jsx(ListIcon, { className: icon({ size: "small" }) }) }) }));
+    return (_jsx("span", { className: menuButton, children: _jsx(IconButton, { ref: menu.buttonRef, "aria-label": labels.shell.menu, "aria-expanded": menu.open, variant: "ghost", onClick: () => menu.setOpen(!menu.open), children: _jsx(ListIcon, { className: icon({ size: "small" }) }) }) }));
 }
 export function AppMain({ className, ...props }) {
     return _jsx("main", { ...props, className: cx(main, className), "data-ciridae-ui": "" });
@@ -206,13 +249,15 @@ const sidebarRail = css({
     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 sidebarOnly = css({ display: "flex", flexDirection: "column", gap: "[inherit]" });
 const sidebarNav = css({
     display: "flex",
     flexDirection: "column",
     gap: "sidebar.groupGap",
     minHeight: "0",
     overflowY: "auto",
+    // It scrolls when its items outgrow it, so none of them shrinks to fit, the search field included.
+    "& > *": { flexShrink: "0" },
     // Scrolling would clip the ring of anything outer-ringed placed among the items.
     ringRoom: true,
 });
@@ -314,7 +359,7 @@ const crumbButton = css({
     padding: "none",
     border: "0",
     background: "transparent",
-    color: "inherit",
+    color: "[inherit]",
     font: "inherit",
     cursor: "pointer",
     _hover: { textDecoration: "underline" },
@@ -338,9 +383,9 @@ const crumbCurrent = css({
     // The page's heading, but read as a crumb, so it stays on the body face.
     fontFamily: "sans",
     color: "fg.primary",
-    fontSize: "inherit",
+    fontSize: "[inherit]",
     fontWeight: "medium",
-    lineHeight: "inherit",
+    lineHeight: "[inherit]",
 });
 /** The slash between two crumbs. */
 export function AppBreadcrumbSeparator() {
@@ -372,12 +417,12 @@ const account = css({
     display: "flex",
     alignItems: "center",
     gap: "sidebar.markGap",
-    width: "100%",
+    width: "full",
     padding: "control.compactBlock",
     border: "0",
     borderRadius: "keycap",
     background: "transparent",
-    color: "inherit",
+    color: "[inherit]",
     font: "inherit",
     textAlign: "start",
     cursor: "pointer",

package/dist/components/side-panel.js

@@ -17,7 +17,7 @@ const aside = css({
     display: "flex",
     flexDirection: "column",
     flexShrink: "0",
-    width: "400px",
+    width: "overlay.sheetNarrow",
     minWidth: "0",
     minHeight: "0",
     overflow: "hidden",
@@ -31,7 +31,7 @@ const headerRow = css({
     alignItems: "center",
     gap: "layout.controlGap",
     // A list head's height: its block padding round one line of its text.
-    minHeight: "calc(token(spacing.panel.default) * 2 + 16px + 1px)",
+    minHeight: "[calc(token(spacing.panel.default) * 2 + 16px + 1px)]",
     paddingInlineStart: "panel.comfortable",
     paddingInlineEnd: "panel.default",
     borderBottom: "1px solid token(colors.border.panel)",
@@ -88,7 +88,7 @@ const body = css({
     overflowY: "auto",
     padding: "panel.comfortable",
     // A flush body holds its content edge to edge, such as tabs whose panels pad themselves.
-    "&[data-flush]": { display: "flex", flexDirection: "column", gap: "0", padding: "0" },
+    "&[data-flush]": { display: "flex", flexDirection: "column", gap: "none", padding: "none" },
 });
 const footerRow = css({
     display: "flex",

package/dist/components/sidebar.d.ts

@@ -2,7 +2,6 @@ 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"> & {
@@ -31,10 +30,6 @@ 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; `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

@@ -6,7 +6,7 @@ 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",
-    width: "100%",
+    width: "full",
     minWidth: "0",
     flexDirection: "column",
     gap: "layout.clusterGap",
@@ -34,7 +34,6 @@ 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",
@@ -46,22 +45,18 @@ const railRule = css({
     background: "border.divider",
 });
 const divider = css({
-    width: "100%",
+    width: "full",
     height: "border.hairline",
     margin: "none",
     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.
- */
+// 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%",
+    width: "full",
     height: "control.row",
     paddingInline: "control.compactInline",
     border: "0",
@@ -77,27 +72,27 @@ const item = css({
     lineHeight: "tight",
     textAlign: "start",
     cursor: "pointer",
-    transitionProperty: "background, color, border-radius",
+    transitionProperty: "[background, color, border-radius]",
     transitionDuration: "fast",
-    "& > svg:first-child": { opacity: ".7" },
+    "& > svg:first-child": { opacity: "[.7]" },
     "&[data-icon-tone=bronze] > svg:first-child": { color: "accent.bronze" },
     "&:hover, &[aria-pressed=true]": {
         borderRadius: "shell",
-        background: "token(gradients.selected)",
+        background: "[token(gradients.selected)]",
         _light: { background: "bg.rowHover" },
         color: "fg.primary",
-        "& > svg:first-child": { color: "inherit" },
+        "& > svg:first-child": { color: "[inherit]" },
     },
     // 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]": {
         borderRadius: "shell",
         background: "bg.field",
-        boxShadow: "inset 0 0 0 1px token(colors.border.canvas)",
+        boxShadow: "[inset 0 0 0 1px token(colors.border.canvas)]",
         color: "fg.primary",
-        "& > svg:first-child": { color: "inherit", opacity: "1" },
+        "& > svg:first-child": { color: "[inherit]", opacity: "[1]" },
         "&:not([data-icon-only])": {
-            paddingInline: "calc(token(spacing.control.compactInline) + token(sizes.border.hairline))",
+            paddingInline: "[calc(token(spacing.control.compactInline) + token(sizes.border.hairline))]",
         },
     },
     _focusVisible: { borderRadius: "shell", focusRing: "outer" },
@@ -108,16 +103,14 @@ const item = css({
         color: "fg.secondary",
         fontSize: "caption",
     },
-    // 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.compact",
         height: "control.compact",
         paddingInline: "none",
         borderRadius: "round",
-        "& > svg:first-child": { opacity: "1", fontSize: "icon.small" },
+        "& > svg:first-child": { opacity: "[1]", fontSize: "icon.small" },
     },
 });
 const label = css(singleLineText, { flex: "1" });
@@ -127,53 +120,53 @@ const trailingStyle = css({ display: "inline-flex", flexShrink: "0", color: "fg.
 const itemGroup = css({
     display: "flex",
     alignItems: "center",
-    width: "100%",
+    width: "full",
     minWidth: "0",
     borderRadius: "nav",
-    transitionProperty: "background, border-radius",
+    transitionProperty: "[background, border-radius]",
     transitionDuration: "fast",
     "&:hover": {
         borderRadius: "shell",
-        background: "token(gradients.selected)",
+        background: "[token(gradients.selected)]",
         _light: { background: "bg.rowHover" },
     },
     "&:hover > [data-sidebar-row]": { color: "fg.primary" },
     "&:has(> [data-sidebar-row][aria-current=page])": {
         borderRadius: "shell",
         background: "bg.field",
-        boxShadow: "inset 0 0 0 1px token(colors.border.canvas)",
+        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" },
+    "& > [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" },
+    "& > [data-sidebar-row]:focus-visible": { outline: "0" },
     "&:has(> [data-sidebar-row]:focus-visible)": { borderRadius: "shell", focusRing: "outer" },
-    "&:hover > [data-sidebar-action], & > [data-sidebar-action]:focus-within": { opacity: "1" },
+    "&: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.
 const itemAction = css({
     display: "inline-flex",
     flexShrink: "0",
     paddingInlineEnd: "control.trackInset",
-    opacity: "0",
-    transitionProperty: "opacity",
+    opacity: "[0]",
+    transitionProperty: "[opacity]",
     transitionDuration: "fast",
-    _phone: { opacity: "1" },
-    "@media (hover: none)": { opacity: "1" },
+    _phone: { opacity: "[1]" },
+    "@media (hover: none)": { opacity: "[1]" },
 });
 const heading = css({
     display: "flex",
     alignItems: "center",
     gap: "sidebar.markGap",
-    width: "100%",
+    width: "full",
     minWidth: "0",
     paddingBlock: "control.block",
     paddingInline: "control.block",
     border: "0",
     borderRadius: "field",
     background: "transparent",
-    color: "inherit",
+    color: "[inherit]",
     font: "inherit",
     textAlign: "start",
     cursor: "pointer",
@@ -195,7 +188,6 @@ 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": "" });
 }

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

@@ -1,9 +1,8 @@
 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.
+ * 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",

package/dist/components/site-banner.js

@@ -10,14 +10,14 @@ const banner = cva({
         alignItems: "center",
         gap: "layout.controlGap",
         flexShrink: "0",
-        width: "100%",
+        width: "full",
         boxSizing: "border-box",
         paddingBlock: "control.trackInset",
         paddingInline: "control.inline",
         textAlign: "start",
-        fontSize: "11px",
+        fontSize: "[11px]",
         fontWeight: "medium",
-        lineHeight: "16px",
+        lineHeight: "[16px]",
         color: "fg.muted",
     },
     variants: {
@@ -33,7 +33,7 @@ const banner = cva({
 });
 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)" });
+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, onDismiss, className, children, ...props }) {
     const { labels } = useCiridaeLocale();

package/dist/components/skeleton.js

@@ -1,17 +1,17 @@
 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.
+// wash in dark.
 const skeleton = css({
     display: "block",
     flexShrink: "0",
-    background: "token(gradients.skeletonFill)",
+    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)",
+        width: "full",
+        height: "[0.75em]",
+        marginBlock: "[calc((1lh - 0.75em) / 2)]",
         borderRadius: "round",
     },
     "&[data-shape=circle]": {
@@ -24,7 +24,6 @@ const skeleton = css({
         aspectRatio: "1",
         borderRadius: "control",
     },
-    // A status chip's or a badge's placeholder.
     "&[data-shape=pill]": {
         width: "skeleton.pill",
         height: "skeleton.bar",
@@ -33,31 +32,29 @@ const skeleton = css({
     "&[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 small print, such as a row's meta line, under a line of text.
+    "&[data-shape][data-width=full]": { width: "full" },
     "&[data-shape][data-height=caption]": {
         height: "skeleton.caption",
-        marginBlock: "calc((1lh - token(sizes.skeleton.caption)) / 2)",
+        marginBlock: "[calc((1lh - token(sizes.skeleton.caption)) / 2)]",
     },
     "&[data-shape][data-height=text]": {
-        height: "0.75em",
-        marginBlock: "calc((1lh - 0.75em) / 2)",
+        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" },
+    "&[data-shape][data-height=line]": { height: "skeleton.textLine", marginBlock: "none" },
+    "&[data-shape][data-height=smallLine]": { height: "skeleton.caption", marginBlock: "none" },
+    "&[data-shape][data-height=bar]": { height: "skeleton.bar", marginBlock: "none" },
+    "&[data-shape][data-height=badge]": { height: "skeleton.badge", marginBlock: "none" },
+    "&[data-shape][data-height=control]": { height: "control.default", marginBlock: "none" },
+    "&[data-shape][data-height=row]": { height: "control.field", marginBlock: "none" },
+    "&[data-shape][data-height=block]": { height: "full", marginBlock: "none" },
     "&[data-shape][data-height=chart], &[data-shape][data-height='chart.medium']": {
         height: "chart.medium",
-        marginBlock: "0",
+        marginBlock: "none",
     },
-    "&[data-shape][data-height='chart.small']": { height: "chart.small", marginBlock: "0" },
-    "&[data-shape][data-height='chart.large']": { height: "chart.large", marginBlock: "0" },
+    "&[data-shape][data-height='chart.small']": { height: "chart.small", marginBlock: "none" },
+    "&[data-shape][data-height='chart.large']": { height: "chart.large", marginBlock: "none" },
 });
 /**
  * Loading placeholder. `block` fills its box, `text` takes one line of the surrounding text,

package/dist/components/skeletons.d.ts

@@ -13,15 +13,12 @@ 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;