@polyxd/react 0.2.0 → 0.2.1

package/dist/skeleton.js

@@ -0,0 +1,30 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** What each pattern's surface usually looks like, so the placeholder has the right silhouette. */
+const PATTERN_SHAPE = {
+    "multi-step-form": "form",
+    "filter-and-browse": "list",
+    "undo-over-confirm": "list",
+    "compare-and-choose": "compare",
+    "confirm-destructive": "dialog",
+    "review-and-submit": "detail",
+};
+/** One placeholder block. `kind` sets its height and radius; `size` its width as a share of the row. */
+function Block({ kind, size }) {
+    return _jsx("span", { className: `pxd-skeleton-block pxd-skeleton-${kind}${size ? ` pxd-skeleton-${size}` : ""}` });
+}
+const Row = ({ children }) => _jsx("div", { className: "pxd-skeleton-row", children: children });
+const times = (n, render) => Array.from({ length: n }, (_, i) => render(i));
+const SHAPES = {
+    list: () => (_jsxs(_Fragment, { children: [_jsx(Block, { kind: "field", size: "full" }), times(5, (i) => (_jsxs(Row, { children: [_jsx(Block, { kind: "square" }), _jsxs("div", { className: "pxd-skeleton-lines", children: [_jsx(Block, { kind: "line", size: i % 2 ? "medium" : "long" }), _jsx(Block, { kind: "small", size: "short" })] })] }, i)))] })),
+    form: () => (_jsxs(_Fragment, { children: [times(4, (i) => (_jsxs("div", { className: "pxd-skeleton-lines", children: [_jsx(Block, { kind: "small", size: "short" }), _jsx(Block, { kind: "field", size: i === 1 ? "medium" : "long" })] }, i))), _jsxs("div", { className: "pxd-skeleton-actions", children: [_jsx(Block, { kind: "button" }), _jsx(Block, { kind: "button" })] })] })),
+    detail: () => (_jsxs(_Fragment, { children: [_jsxs(Row, { children: [_jsx(Block, { kind: "circle" }), _jsxs("div", { className: "pxd-skeleton-lines", children: [_jsxs(Row, { children: [_jsx(Block, { kind: "line", size: "medium" }), _jsx(Block, { kind: "badge" })] }), _jsx(Block, { kind: "small", size: "short" })] })] }), _jsx("div", { className: "pxd-skeleton-dl", children: times(6, (i) => (_jsxs(Row, { children: [_jsx(Block, { kind: "small", size: "short" }), _jsx(Block, { kind: "line", size: i % 3 === 2 ? "medium" : "long" })] }, i))) })] })),
+    dashboard: () => (_jsxs(_Fragment, { children: [_jsx("div", { className: "pxd-skeleton-cards", children: times(3, (i) => (_jsxs("div", { className: "pxd-skeleton-card", children: [_jsx(Block, { kind: "small", size: "short" }), _jsx(Block, { kind: "value", size: "medium" })] }, i))) }), _jsx(Block, { kind: "chart", size: "full" })] })),
+    dialog: () => (_jsxs(_Fragment, { children: [_jsx(Block, { kind: "line", size: "long" }), _jsx(Block, { kind: "line", size: "medium" }), _jsxs("div", { className: "pxd-skeleton-actions", children: [_jsx(Block, { kind: "button" }), _jsx(Block, { kind: "button" })] })] })),
+    compare: () => (_jsx("div", { className: "pxd-skeleton-cards", children: times(3, (c) => (_jsxs("div", { className: "pxd-skeleton-card", children: [_jsx(Block, { kind: "line", size: "medium" }), times(5, (i) => (_jsx(Block, { kind: "small", size: i % 2 ? "short" : "long" }, i)))] }, c))) })),
+};
+/** The loading state for a surface that has not arrived yet: the shape it will take, shimmering. */
+export function PolyxdSkeleton({ title, pattern, shape, theme, mode, density, locale = "en-GB", className }) {
+    const chosen = shape ?? (pattern ? PATTERN_SHAPE[pattern] : undefined) ?? "detail";
+    return (_jsxs("div", { className: ["pxd-surface", "pxd-skeleton", `pxd-skeleton-${chosen}`, className].filter(Boolean).join(" "), "data-pxd-theme": theme, "data-pxd-mode": mode, "data-pxd-density": density, lang: locale, role: "status", "aria-busy": "true", children: [_jsx("span", { className: "pxd-sr-only", children: title ? `Preparing ${title}` : "Preparing" }), _jsxs("div", { className: "pxd-skeleton-body", "aria-hidden": "true", children: [_jsx(Block, { kind: "title", size: chosen === "dialog" ? "short" : "medium" }), SHAPES[chosen]()] })] }));
+}
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

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

package/dist/surface.js

@@ -8,6 +8,7 @@ import { Avatar } from "./components/avatar.js";
 export function PolyxdSurface({ document: doc, data: initial, onAction, onDataChange, onDismiss, theme, mode, density, disclosure = "progressive", locale = "en-GB", resolveMedia, components: overrides, className }) {
     const [data, setData] = useState(() => initial ?? doc.data ?? {});
     const [portal, setPortal] = useState(null);
+    const [root, setRoot] = useState(null);
     const byId = useMemo(() => new Map(doc.components.map((c) => [c.id, c])), [doc]);
     const components = useMemo(() => ({ ...registry, ...overrides }), [overrides]);
     const setValue = useCallback((pointer, value) => setData((d) => {
@@ -23,10 +24,10 @@ export function PolyxdSurface({ document: doc, data: initial, onAction, onDataCh
             return onDismiss?.();
         onAction?.({ name, context: resolveContext(context, data, scope), source });
     }, [data, onAction, onDismiss]);
-    const value = { doc, byId, data, setValue, dispatch, locale, resolveMedia, portal, components, disclosure };
+    const value = { doc, byId, data, setValue, dispatch, locale, resolveMedia, portal, root, components, disclosure };
     const rootIsDialog = byId.get(doc.root)?.component === "Confirm";
     const nav = doc.components.find((c) => c.component === "Navigation" && (!c.kind || c.kind === "main"));
-    return (_jsx(SurfaceContext.Provider, { value: value, children: _jsxs("div", { className: ["pxd-surface", doc.surface.presentation === "panel" ? "pxd-surface-panel" : null, nav ? "pxd-surface-with-nav" : null, className].filter(Boolean).join(" "), "data-pxd-theme": theme, "data-pxd-mode": mode, "data-pxd-density": density, "data-pxd-surface": doc.surface.id, lang: locale, children: [nav && _jsx(Render, { id: nav.id }), _jsxs("div", { className: "pxd-surface-main", children: [!rootIsDialog && _jsx(SurfaceHeader, {}), _jsx(Render, { id: doc.root })] }), _jsx("div", { ref: setPortal, className: "pxd-portal" })] }) }));
+    return (_jsx(SurfaceContext.Provider, { value: value, children: _jsxs("div", { ref: setRoot, className: ["pxd-surface", doc.surface.presentation === "panel" ? "pxd-surface-panel" : null, nav ? "pxd-surface-with-nav" : null, className].filter(Boolean).join(" "), "data-pxd-theme": theme, "data-pxd-mode": mode, "data-pxd-density": density, "data-pxd-surface": doc.surface.id, lang: locale, children: [nav && _jsx(Render, { id: nav.id }), _jsxs("div", { className: "pxd-surface-main", children: [!rootIsDialog && _jsx(SurfaceHeader, {}), _jsx(Render, { id: doc.root })] }), _jsx("div", { ref: setPortal, className: "pxd-portal" })] }) }));
 }
 /** Title, and on a record page: where it sits, what state it's in, and what you can do to it. */
 function SurfaceHeader() {

package/dist/surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"surface.js","sourceRoot":"","sources":["../src/surface.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"surface.js","sourceRoot":"","sources":["../src/surface.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAsB,MAAM,OAAO,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAA0E,MAAM,cAAe,CAAC;AAC/J,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,EAAyB,MAAM,WAAW,CAAC;AAC5F,OAAO,EAAE,QAAQ,EAA0B,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAyB,CAAC;AA2BjD,sCAAsC;AACtC,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,GAAG,aAAa,EAAE,MAAM,GAAG,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAsB;IACvO,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAO,GAAG,EAAE,CAAC,OAAO,IAAI,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;IACxE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAC/D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAC3D,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACjF,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,CAAsC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEpH,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,OAAe,EAAE,KAAc,EAAE,EAAE,CAClC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;QACZ,MAAM,IAAI,GAAG,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;QACpC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC;QACrB,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,EACJ,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;QACxB,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,IAAI,KAAK,YAAY;YAAE,OAAO,SAAS,EAAE,EAAE,CAAC;QAChD,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAC9E,CAAC,EACD,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,CAC5B,CAAC;IAEF,MAAM,KAAK,GAAwB,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;IACvI,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,SAAS,KAAK,SAAS,CAAC;IACjE,MAAM,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,KAAK,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC;IAEvG,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACnC,eACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,CAAC,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,oBACvJ,KAAK,mBACN,IAAI,sBACD,OAAO,sBACP,GAAG,CAAC,OAAO,CAAC,EAAE,EAChC,IAAI,EAAE,MAAM,aAEX,GAAG,IAAI,KAAC,MAAM,IAAC,EAAE,EAAE,GAAG,CAAC,EAAE,GAAI,EAC9B,eAAK,SAAS,EAAC,kBAAkB,aAC9B,CAAC,YAAY,IAAI,KAAC,aAAa,KAAG,EACnC,KAAC,MAAM,IAAC,EAAE,EAAE,GAAG,CAAC,IAAI,GAAI,IACpB,EACN,cAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,YAAY,GAAG,IAC1C,GACkB,CAC3B,CAAC;AACJ,CAAC;AAED,iGAAiG;AACjG,SAAS,aAAa;IACpB,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IACvB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC;IAC/E,MAAM,IAAI,GAAG,CAAC,CAAU,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC;IAC1E,MAAM,KAAK,GAAG,CAAC,QAAQ,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC;IACzE,IAAI,KAAK;QAAE,OAAO,aAAI,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAM,CAAC;IACjE,OAAO,CACL,kBAAQ,SAAS,EAAC,iBAAiB,aAChC,WAAW,IAAI,CACd,cAAK,SAAS,EAAC,iBAAiB,gBAAY,YAAY,YACtD,uBACG,WAAW,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,CAAS,EAAE,EAAE,CAAC,CACtC,uBACG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CACV,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,YACzG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,GACP,CACV,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CACd,IAPM,CAAC,CAQL,CACN,CAAC,GACC,GACD,CACP,EACD,eAAK,SAAS,EAAC,sBAAsB,aAClC,MAAM,KAAK,SAAS,IAAI,KAAC,MAAM,IAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,EAC/E,eAAK,SAAS,EAAC,sBAAsB,aACnC,cAAI,SAAS,EAAC,mBAAmB,aAC9B,KAAK,EACL,KAAK,IAAI,eAAM,SAAS,EAAE,sBAAsB,KAAK,CAAC,IAAI,IAAI,SAAS,EAAE,YAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAQ,IAClG,EACJ,QAAQ,IAAI,YAAG,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAK,IAC3D,EACL,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,MAAM,IAAC,EAAE,EAAE,OAAO,GAAI,GACnB,CACP,IACG,IACC,CACV,CAAC;AACJ,CAAC;AAED,sDAAsD;AACtD,MAAM,UAAU,MAAM,CAAC,EAAE,EAAE,EAAE,KAAK,EAAiC;IACjE,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IACvB,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC5B,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IACvB,MAAM,SAAS,GAAG,KAAK,IAAI,OAAO,CAAC;IACnC,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAAK,KAAK;QAAE,OAAO,IAAI,CAAC;IAClG,MAAM,SAAS,GAAG,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAA8C,CAAC;IAC5F,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC;IACtF,OAAO,KAAK,CAAC,CAAC,CAAC,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,IAAI,GAAyB,CAAC,CAAC,CAAC,IAAI,CAAC;AAC5F,CAAC;AAED,SAAS,gBAAgB,CAAC,EAAE,IAAI,EAAkB;IAChD,OAAO,CACL,eAAK,SAAS,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,6CACd,IAAI,CAAC,SAAS,cAClC,CACP,CAAC;AACJ,CAAC;AAED,+DAA+D;AAC/D,MAAM,UAAU,OAAO,CAAC,IAAU;IAChC,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IACvB,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACvC,MAAM,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC;IAC7B,6EAA6E;IAC7E,MAAM,GAAG,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,EAAE,EAAE,oBAAoB,EAAE,IAAI,CAAC,SAAS,EAA6B,CAAC;IACxG,IAAI,CAAC,CAAC;QAAE,OAAO,GAAG,CAAC;IACnB,MAAM,IAAI,GAAG,CAAC,CAAU,EAAE,EAAE;QAC1B,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACpC,OAAO,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC,CAAC;IACF,OAAO;QACL,GAAG,GAAG;QACN,YAAY,EAAE,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;QAC/D,kBAAkB,EAAE,CAAC,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS;QACjF,WAAW,EAAE,CAAC,CAAC,IAAI;QACnB,aAAa,EAAE,CAAC,CAAC,MAAM,IAAI,SAAS;KACV,CAAC;AAC/B,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polyxd/react",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "React renderer for Polyxd UI documents: Radix primitives styled by design-system tokens",
   "license": "Apache-2.0",
   "type": "module",
@@ -37,7 +37,7 @@
     "react-dom": "^19.3.0"
   },
   "dependencies": {
-    "@polyxd/spec": "^0.2.0",
+    "@polyxd/spec": "^0.2.1",
     "radix-ui": "^1.6.7"
   },
   "repository": {

package/src/styles.css

@@ -4120,3 +4120,289 @@ video.pxd-media {
     transition: none;
   }
 }
+
+/* Keyboard shortcut hints (Action.shortcut): one kbd per key after the label, hidden where there is
+   no keyboard. The hint is decoration; aria-keyshortcuts on the button carries the meaning. */
+.pxd-kbd-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--pxd-space-inline-tight) / 2);
+  margin-inline-start: var(--pxd-space-inline-tight);
+}
+.pxd-kbd {
+  font-family: var(--pxd-type-label-small-family);
+  font-size: var(--pxd-type-label-small-size);
+  font-weight: var(--pxd-type-label-small-weight);
+  line-height: var(--pxd-type-label-small-line-height);
+  letter-spacing: var(--pxd-type-label-small-letter-spacing);
+  font-variant-numeric: tabular-nums;
+  min-width: 1.6em;
+  padding: 0 var(--pxd-space-inline-tight);
+  border: var(--pxd-border-width-default) solid var(--pxd-color-border-default);
+  border-radius: var(--pxd-radius-small);
+  color: var(--pxd-color-text-muted);
+  text-align: center;
+  white-space: nowrap;
+}
+/* On a filled button the muted grey is not guaranteed to contrast with the pack's primary, so the
+   hint borrows the button's own foreground, only slightly faded, and the border fades further. */
+.pxd-button-primary .pxd-kbd,
+.pxd-button-danger .pxd-kbd {
+  color: color-mix(in srgb, currentColor 85%, transparent);
+  border-color: color-mix(in srgb, currentColor 55%, transparent);
+}
+/* A described button stacks label over description; the hint sits in the top trailing corner. */
+.pxd-button-described {
+  position: relative;
+}
+.pxd-button-described .pxd-kbd-hint {
+  position: absolute;
+  inset-inline-end: var(--pxd-space-inset-default);
+  top: var(--pxd-space-stack-tight);
+  margin-inline-start: 0;
+}
+@container pxd (width < 30rem) {
+  /* Stacked action bars are the phone layout, and phones have no keyboard. */
+  .pxd-action-bar .pxd-kbd-hint {
+    display: none;
+  }
+}
+
+/* Skeleton (PolyxdSkeleton): the loading state for a surface that has not arrived yet. Blocks are
+   sized from the type and control tokens so the placeholder has the pack's rhythm, and shimmer
+   with a sweep across two neutral mixes of the surface colour. */
+.pxd-skeleton-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--polyxd-stack-apart);
+}
+.pxd-skeleton-block {
+  --polyxd-skeleton-base: color-mix(in srgb, var(--pxd-color-text-muted) 14%, var(--pxd-color-surface-default));
+  --polyxd-skeleton-sheen: color-mix(in srgb, var(--pxd-color-text-muted) 6%, var(--pxd-color-surface-default));
+  display: block;
+  flex: none;
+  width: 100%;
+  border-radius: var(--pxd-radius-small);
+  background: linear-gradient(90deg, var(--polyxd-skeleton-base) 0 35%, var(--polyxd-skeleton-sheen) 50%, var(--polyxd-skeleton-base) 65% 100%);
+  background-size: 300% 100%;
+  animation: pxd-skeleton-sweep calc(var(--pxd-motion-duration-long) * 4) linear infinite;
+}
+@keyframes pxd-skeleton-sweep {
+  from { background-position: 100% 0; }
+  to { background-position: 0 0; }
+}
+/* Widths as a share of the row, so the lines look like text of varying length. */
+.pxd-skeleton-short { width: 30%; }
+.pxd-skeleton-medium { width: 55%; }
+.pxd-skeleton-long { width: 85%; }
+.pxd-skeleton-full { width: 100%; }
+/* Heights: each text block is one line of the role it stands in for. */
+.pxd-skeleton-title { height: calc(var(--pxd-type-title-page-size) * var(--pxd-type-title-page-line-height)); }
+.pxd-skeleton-line { height: calc(var(--pxd-type-body-default-size) * var(--pxd-type-body-default-line-height)); }
+.pxd-skeleton-small { height: calc(var(--pxd-type-body-small-size) * var(--pxd-type-body-small-line-height)); }
+.pxd-skeleton-value { height: calc(var(--pxd-type-numeric-display-size) * var(--pxd-type-numeric-display-line-height)); }
+.pxd-skeleton-field,
+.pxd-skeleton-button {
+  height: var(--polyxd-control);
+  border-radius: var(--pxd-radius-control);
+}
+.pxd-skeleton-button { width: calc(var(--pxd-size-target-min) * 2.5); }
+.pxd-skeleton-square {
+  width: var(--polyxd-row-height);
+  height: var(--polyxd-row-height);
+  border-radius: var(--pxd-radius-default);
+}
+.pxd-skeleton-circle {
+  width: var(--pxd-size-target-min);
+  height: var(--pxd-size-target-min);
+  border-radius: var(--pxd-radius-full);
+}
+.pxd-skeleton-badge {
+  width: calc(var(--pxd-space-inset-comfortable) * 3);
+  height: calc(var(--pxd-type-label-small-size) * var(--pxd-type-label-small-line-height));
+  border-radius: var(--pxd-radius-full);
+}
+.pxd-skeleton-chart {
+  height: 16rem; /* the chart's own max-height in .pxd-chart-svg */
+  border-radius: var(--pxd-radius-default);
+}
+.pxd-skeleton-row {
+  display: flex;
+  align-items: center;
+  gap: var(--pxd-space-inline-default);
+}
+.pxd-skeleton-lines {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--pxd-space-stack-tight);
+}
+.pxd-skeleton-actions {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  gap: var(--pxd-space-inline-default);
+}
+.pxd-skeleton-dl {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+  gap: var(--polyxd-stack) var(--pxd-space-inline-loose);
+}
+.pxd-skeleton-dl .pxd-skeleton-row {
+  display: contents;
+}
+.pxd-skeleton-cards {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--pxd-space-inline-default);
+}
+.pxd-skeleton-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--polyxd-stack);
+  padding: var(--pxd-space-inset-default);
+  background: var(--pxd-color-surface-raised);
+  border: var(--pxd-border-width-default) solid var(--pxd-color-border-default);
+  border-radius: var(--pxd-radius-default);
+}
+@container pxd (width < 30rem) {
+  .pxd-skeleton-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .pxd-skeleton-actions .pxd-skeleton-button {
+    width: 100%;
+  }
+  .pxd-skeleton-cards {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+/* Reduced motion: flat blocks, no sweep. (The base sheet zeroes the duration; this also removes the gradient.) */
+@media (prefers-reduced-motion: reduce) {
+  .pxd-skeleton-block {
+    background: var(--polyxd-skeleton-base);
+    animation: none;
+  }
+}
+
+/* ---- Form error summary ---- */
+/* Said once at the top of the fields, in the danger tokens as .pxd-field-error is; the links are
+   the surface's link style on the surface itself, where the link colour is guaranteed readable. */
+.pxd-error-summary {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pxd-space-stack-tight);
+  padding: var(--pxd-space-inset-default);
+  border-left: var(--pxd-border-width-strong) solid var(--pxd-color-status-danger-emphasis);
+  background: var(--pxd-color-surface-default);
+  color: var(--pxd-color-text-default);
+}
+.pxd-error-summary:focus-visible {
+  outline-offset: var(--pxd-focus-ring-offset);
+}
+.pxd-error-summary-title {
+  margin: 0;
+  color: var(--pxd-color-status-danger-foreground);
+  font-family: var(--pxd-type-title-item-family);
+  font-size: var(--pxd-type-title-item-size);
+  font-weight: var(--pxd-type-title-item-weight);
+  line-height: var(--pxd-type-title-item-line-height);
+  letter-spacing: var(--pxd-type-title-item-letter-spacing);
+}
+.pxd-error-summary-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pxd-space-stack-tight);
+  margin: 0;
+  padding-left: 1.25em;
+}
+/* A control the summary marked is drawn like one the browser marked. */
+.pxd-input[aria-invalid="true"] {
+  border-color: var(--pxd-color-status-danger-emphasis);
+  border-width: var(--pxd-border-width-strong);
+}
+
+/* ---- ActionBar overflow ---- */
+/* The "More actions" control sits where the least important action would have been. */
+.pxd-action-bar-more {
+  flex: none;
+  align-self: center;
+}
+
+/* ---- Media gallery viewer ---- */
+/* Each resolved picture is a button; the viewer shows one at a time over the surface's scrim. */
+.pxd-gallery-item {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  border-radius: var(--pxd-radius-default);
+  cursor: pointer;
+}
+.pxd-gallery-item .pxd-gallery-image {
+  display: block;
+}
+.pxd-viewer {
+  position: fixed;
+  inset: 0;
+  z-index: 11;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--pxd-space-stack-default);
+  padding: var(--pxd-space-inset-default);
+  color: var(--pxd-color-text-default);
+}
+.pxd-viewer-figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--pxd-space-stack-tight);
+  margin: 0;
+  min-height: 0;
+  max-width: 100%;
+}
+.pxd-viewer-image {
+  max-width: 100%;
+  max-height: 80vh;
+  object-fit: contain;
+  border-radius: var(--pxd-radius-default);
+}
+/* Text and controls sit on the overlay surface, so they are readable whatever is behind the scrim. */
+.pxd-viewer-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--pxd-space-inline-default);
+  width: min(100%, 48rem);
+  padding: var(--pxd-space-inline-tight) var(--pxd-space-inset-compact);
+  background: var(--pxd-color-surface-overlay);
+  border-radius: var(--pxd-radius-default);
+  box-shadow: var(--pxd-shadow-overlay);
+}
+.pxd-viewer-nav {
+  width: auto;
+}
+.pxd-viewer-counter {
+  flex: 1;
+  font-size: var(--pxd-type-body-small-size);
+}
+.pxd-viewer-caption {
+  padding: var(--pxd-space-inline-tight) var(--pxd-space-inset-compact);
+  background: var(--pxd-color-surface-overlay);
+  border-radius: var(--pxd-radius-default);
+  color: var(--pxd-color-text-default);
+  font-size: var(--pxd-type-body-small-size);
+  text-align: center;
+}
+.pxd-viewer-close,
+.pxd-viewer-step {
+  min-width: var(--pxd-size-target-min);
+  min-height: var(--pxd-size-target-min);
+}
+.pxd-viewer-step:disabled {
+  opacity: var(--pxd-opacity-state-disabled);
+  cursor: not-allowed;
+}