@arnilo/liveframe-starter 0.0.0-stage → 0.3.0-rc.1

package/dist/design-system.d.ts

@@ -0,0 +1,3 @@
+import { type DesignSystem } from "@arnilo/liveframe";
+/** The starter design system: complete for the starter catalog, with a tone axis and one extension property. */
+export declare const designSystem: DesignSystem;

package/dist/design-system.js

@@ -0,0 +1,276 @@
+import { validateDesignSystem } from "@arnilo/liveframe";
+import { catalog, valid } from "./catalog.js";
+const px = (value) => ({ value, unit: "px" });
+const shadowLayer = (role, alpha, y, blur, spread, inset = false) => ({
+    color: { role, alpha },
+    offsetX: px(0),
+    offsetY: px(y),
+    blur: px(blur),
+    spread: px(spread),
+    ...(inset ? { inset } : {}),
+});
+const values = {
+    "radius.control": { kind: "radius", value: px(6) },
+    "radius.plate": { kind: "radius", value: px(8) },
+    "radius.pill": { kind: "radius", value: px(999) },
+    "border.hairline": { kind: "border-width", value: px(1) },
+    "border.focus": { kind: "border-width", value: px(2) },
+    "space.0": { kind: "spacing", value: px(0) },
+    "space.1": { kind: "spacing", value: px(4) },
+    "space.2": { kind: "spacing", value: px(8) },
+    "space.3": { kind: "spacing", value: px(12) },
+    "space.4": { kind: "spacing", value: px(16) },
+    "space.5": { kind: "spacing", value: px(24) },
+    "space.6": { kind: "spacing", value: px(32) },
+    "space.7": { kind: "spacing", value: px(48) },
+    "size.glyph": { kind: "size", value: px(16) },
+    "size.panel": { kind: "size", value: px(360) },
+    "bp.sm": { kind: "breakpoint", value: px(384) },
+    "bp.md": { kind: "breakpoint", value: px(720) },
+    "motion.fast": { kind: "motion-duration", value: { value: 120, unit: "ms" } },
+    "ease-out": { kind: "easing", value: [0.2, 0, 0, 1] },
+    "opacity.dim": { kind: "opacity", value: 0.5 },
+    "shadow.pop": {
+        kind: "shadow",
+        value: [shadowLayer("shadow.ambient", 0.14, 2, 6, 0), shadowLayer("shadow.ambient", 0.3, 16, 32, -12)],
+    },
+};
+const motion = { transitionDuration: "motion.fast", transitionTiming: "ease-out" };
+const focus = {
+    outlineColor: "focus.ring",
+    outlineWidth: "border.focus",
+    outlineOffset: px(2),
+    outlineStyle: "solid",
+};
+const control = {
+    backgroundColor: "surface.raised",
+    textColor: "accent.text",
+    borderColor: "accent.edge",
+    borderWidth: "border.hairline",
+    borderRadius: "radius.control",
+    paddingX: "space.4",
+    paddingY: "space.0",
+    gap: "space.2",
+    typography: "label",
+    ...motion,
+};
+const field = {
+    backgroundColor: "surface.raised",
+    textColor: "text.primary",
+    placeholderColor: "text.muted",
+    borderColor: "border.strong",
+    borderWidth: "border.hairline",
+    borderRadius: "radius.control",
+    paddingX: "space.3",
+    paddingY: "space.2",
+    typography: "body",
+    ...motion,
+};
+const floating = {
+    backgroundColor: "surface.raised",
+    textColor: "text.primary",
+    borderColor: "border.strong",
+    borderWidth: "border.hairline",
+    borderRadius: "radius.plate",
+    padding: "space.1",
+    typography: "body",
+    shadow: "shadow.pop",
+};
+const item = {
+    backgroundColor: "none",
+    textColor: "text.primary",
+    borderWidth: px(0),
+    borderRadius: "radius.control",
+    paddingX: "space.3",
+    paddingY: "space.2",
+    gap: "space.2",
+    typography: "label",
+};
+const mark = {
+    backgroundColor: "surface.raised",
+    borderColor: "border.strong",
+    borderWidth: "border.hairline",
+    borderRadius: "radius.control",
+};
+const selectedMark = {
+    backgroundColor: "accent.fill",
+    textColor: "text.on-accent",
+    borderColor: "accent.fill",
+};
+const disabledField = {
+    textColor: "text.disabled",
+    backgroundColor: "surface.well",
+    borderColor: "border.subtle",
+};
+const disabledControl = { ...disabledField, backgroundColor: "surface.well" };
+const recipes = {};
+function set(prefix, states) {
+    for (const [state, recipe] of Object.entries(states))
+        recipes[`${prefix}.${state}`] = recipe;
+}
+const empty = {};
+set("box.*.root", { rest: empty });
+set("box.*.rail", { rest: empty });
+set("box.plate.root", {
+    rest: {
+        backgroundColor: "surface.raised",
+        borderColor: "border.subtle",
+        borderWidth: "border.hairline",
+        borderRadius: "radius.plate",
+        padding: "space.4",
+        gap: "space.3",
+    },
+});
+set("box.rule.root", {
+    rest: { borderColor: "border.subtle", borderTopWidth: "border.hairline", paddingY: "space.3", gap: "space.1" },
+});
+set("box.callout.root", { rest: { gap: "space.3", paddingY: "space.1" } });
+set("box.callout.rail", { rest: { backgroundColor: "accent.edge", borderRadius: "radius.pill" } });
+for (const kind of ["stack", "inline", "grid", "icon", "image"])
+    set(`${kind}.*.root`, { rest: empty });
+set("scroll.*.root", { rest: empty });
+set("scroll.*.scrollbar", { rest: empty });
+set("scroll.*.viewport", { rest: { scrollbarThumbColor: "surface.scrollbar", scrollbarTrackColor: "none" } });
+set("separator.*.root", { rest: { borderColor: "border.subtle", borderTopWidth: "border.hairline" } });
+set("text.*.root", { rest: { textColor: "text.primary", typography: "body" } });
+set("hint.*.root", { rest: { textColor: "text.muted", typography: "caption" } });
+set("heading.*.root", { rest: { textColor: "text.primary", typography: "heading.2" } });
+set("link.*.root", {
+    rest: { textColor: "accent.text", typography: "body" },
+    hover: { textColor: "accent.fill.hover" },
+    focus: { ...focus, borderRadius: "radius.control" },
+});
+set("link.*.label", { rest: empty });
+set("button.*.root", {
+    rest: control,
+    hover: { backgroundColor: "surface.hover" },
+    active: { translateY: px(1) },
+    focus,
+    disabled: disabledControl,
+});
+set("button.primary.root", {
+    rest: {
+        backgroundColor: "accent.fill",
+        textColor: "text.on-accent",
+        borderColor: "none",
+        extensions: { sheen: "shadow.highlight" },
+    },
+    hover: { backgroundColor: "accent.fill.hover" },
+    // The page's ink: the one ring colour that clears 3:1 against the page and against the fill (the audit measures both).
+    focus: { ...focus, outlineColor: "text.primary" },
+});
+set("button.ghost.root", {
+    rest: { backgroundColor: "none", borderColor: "none", paddingX: "space.2" },
+});
+for (const slot of ["label", "icon"])
+    set(`button.*.${slot}`, { rest: empty });
+// A critical button reads the same accent roles through a different family (spec §6.2, role aliases).
+set("button.tone:critical.root", { rest: { roles: { accent: "status.critical" } } });
+set("textField.*.root", { rest: { gap: "space.1" } });
+set("textField.*.label", { rest: { textColor: "text.primary", typography: "label" } });
+set("textField.*.input", {
+    rest: field,
+    hover: { borderColor: "text.primary" },
+    focus: { ...focus, outlineOffset: px(1), borderColor: "focus.ring" },
+    disabled: disabledField,
+});
+set("select.*.root", { rest: { gap: "space.1" } });
+set("select.*.label", { rest: { textColor: "text.primary", typography: "label" } });
+set("select.*.trigger", {
+    rest: field,
+    hover: { borderColor: "text.primary" },
+    focus: { ...focus, outlineOffset: px(1), borderColor: "focus.ring" },
+    disabled: disabledField,
+});
+set("select.*.list", { rest: floating });
+set("select.*.option", {
+    rest: item,
+    hover: { backgroundColor: "surface.hover" },
+    focus,
+    selected: { backgroundColor: "surface.selected" },
+});
+set("checkbox.*.root", {
+    rest: { textColor: "text.primary", typography: "label", gap: "space.2" },
+    focus,
+    disabled: { textColor: "text.disabled" },
+});
+set("checkbox.*.label", { rest: empty });
+set("checkbox.*.indicator", { rest: mark, selected: selectedMark, focus });
+set("switch.*.root", {
+    rest: { textColor: "text.primary", typography: "label", gap: "space.3" },
+    focus,
+    disabled: { textColor: "text.disabled" },
+});
+set("switch.*.label", { rest: empty });
+set("switch.*.track", { rest: { ...mark, borderRadius: "radius.pill" }, selected: selectedMark, focus });
+set("switch.*.thumb", {
+    rest: { backgroundColor: "text.primary", borderRadius: "radius.pill" },
+    selected: { backgroundColor: "text.on-accent" },
+});
+set("menu.*.root", { rest: empty });
+set("menu.*.trigger", {
+    rest: { ...control, textColor: "text.primary", borderColor: "border.strong" },
+    hover: { backgroundColor: "surface.hover" },
+    focus,
+    disabled: disabledControl,
+});
+set("menu.*.content", { rest: floating });
+set("menuItem.*.root", {
+    rest: item,
+    hover: { backgroundColor: "surface.hover" },
+    focus,
+    disabled: { textColor: "text.disabled" },
+});
+for (const slot of ["label", "icon"])
+    set(`menuItem.*.${slot}`, { rest: empty });
+set("popover.*.root", { rest: empty });
+set("popover.*.trigger", {
+    rest: { ...control, textColor: "text.primary", borderColor: "border.strong" },
+    hover: { backgroundColor: "surface.hover" },
+    focus,
+});
+set("popover.*.content", { rest: floating });
+set("dialog.*.root", { rest: empty });
+set("dialog.*.backdrop", { rest: { backgroundColor: "surface.scrim", backgroundOpacity: 0.5 } });
+set("dialog.*.content", { rest: { ...floating, padding: "space.5", gap: "space.4" } });
+set("dialog.*.title", { rest: { textColor: "text.primary", typography: "heading.3" } });
+set("dialog.*.close", {
+    rest: { ...control, textColor: "text.primary", borderColor: "border.strong" },
+    hover: { backgroundColor: "surface.hover" },
+    focus,
+});
+set("tooltip.*.root", { rest: empty });
+set("tooltip.*.trigger", { rest: empty });
+set("tooltip.*.content", { rest: { ...floating, typography: "caption" } });
+set("tabs.*.root", { rest: empty });
+set("tabs.*.list", { rest: { gap: "space.1" } });
+// A panel with no focusable content is itself a tab stop, so the kind's focus overlay belongs to it.
+set("tabs.*.panel", { rest: { paddingY: "space.3" }, focus });
+set("tab.*.root", {
+    rest: {
+        backgroundColor: "none",
+        textColor: "text.muted",
+        borderRadius: "radius.control",
+        paddingX: "space.3",
+        paddingY: "space.2",
+        gap: "space.2",
+        typography: "label",
+        ...motion,
+    },
+    hover: { textColor: "text.primary", backgroundColor: "surface.hover" },
+    focus,
+    disabled: { textColor: "text.disabled" },
+    selected: { textColor: "accent.text", shadow: [shadowLayer("accent.fill", 1, -2, 0, 0, true)] },
+});
+set("tab.*.label", { rest: empty });
+set("tab.*.count", { rest: { typography: "mono" } });
+set("tab.*.panel", { rest: empty });
+set("disclosure.*.root", { rest: { textColor: "text.muted", typography: "label", gap: "space.1" } });
+set("disclosure.*.summary", {
+    rest: { textColor: "text.muted", typography: "label", paddingY: "space.1", borderRadius: "radius.control" },
+    hover: { textColor: "text.primary" },
+    focus,
+});
+set("disclosure.*.panel", { rest: { textColor: "text.primary", typography: "body", paddingY: "space.1" } });
+/** The starter design system: complete for the starter catalog, with a tone axis and one extension property. */
+export const designSystem = valid("design system", validateDesignSystem({ format: "liveframe-design-system/1", id: "starter", version: "1.0.0", values, recipes }, { catalog, registry: {} }));

package/dist/implementations.d.ts

@@ -0,0 +1,3 @@
+import { type Implementation } from "@arnilo/liveframe/react";
+/** One React implementation for every primitive of the starter catalog, built on React Aria Components. */
+export declare const implementations: Implementation[];

package/dist/implementations.js

@@ -0,0 +1,153 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { implement } from "@arnilo/liveframe/react";
+import { createElement, useState } from "react";
+import * as Aria from "react-aria-components";
+import { Box, Button, Checkbox, Dialog, Disclosure, Grid, Heading, Hint, Icon, Image, Inline, Link, Menu, MenuItem, Popover, Scroll, Select, Separator, Stack, Switch, Tab, Tabs, Text, TextField, Tooltip, } from "./ui.definitions.gen.js";
+// A host-owned value follows the incoming one when the widget sends a new one, and is local between renders.
+function useValue(incoming) {
+    const [value, setValue] = useState(incoming);
+    const [previous, setPrevious] = useState(incoming);
+    if (previous !== incoming) {
+        setPrevious(incoming);
+        setValue(incoming);
+    }
+    return [value, setValue];
+}
+const tags = {
+    section: "section",
+    article: "article",
+    aside: "aside",
+    header: "header",
+    footer: "footer",
+    nav: "nav",
+    list: "ul",
+    listItem: "li",
+    terms: "dl",
+    term: "dt",
+    detail: "dd",
+    form: "form",
+    group: "div",
+    figure: "figure",
+    status: "div",
+    alert: "div",
+};
+const roles = { group: "group", status: "status", alert: "alert" };
+// `semantics` picks the element; without one a layout primitive stays a plain div.
+function layout(props, className, style, children) {
+    const { semantics, label } = props;
+    return createElement(semantics ? tags[semantics] : "div", {
+        className,
+        style,
+        ...(semantics && semantics in roles ? { role: roles[semantics] } : {}),
+        ...(label ? { "aria-label": label } : {}),
+        ...(semantics === "form" ? { onSubmit: (event) => event.preventDefault() } : {}),
+    }, children);
+}
+// A small generic glyph set. Replace it with your icon registry: the catalog only says an icon has a name.
+const glyphs = {
+    check: "✓",
+    close: "×",
+    plus: "+",
+    minus: "−",
+    alert: "!",
+    info: "i",
+    search: "⌕",
+    "chevron-down": "⌄",
+    "chevron-right": "›",
+    "arrow-right": "→",
+    refresh: "↻",
+};
+const glyph = (name) => glyphs[name] ?? "◇";
+const icon = (name, className) => name ? (_jsx("span", { "aria-hidden": "true", className: className, "data-icon": name, children: glyph(name) })) : null;
+/** One React implementation for every primitive of the starter catalog, built on React Aria Components. */
+export const implementations = [
+    implement(Box, ({ props, slot, style, children }) => layout(props, slot("root"), style, _jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: slot("rail") }), children] }))),
+    implement(Stack, ({ props, slot, style, children }) => layout(props, slot("root"), style, children)),
+    implement(Inline, ({ props, slot, style, children }) => layout(props, slot("root"), style, children)),
+    implement(Grid, ({ props, slot, style, children }) => layout(props, slot("root"), style, children)),
+    implement(Scroll, ({ props, slot, style, children }) => (_jsx("div", { className: slot("root"), style: style, children: _jsx("section", { "aria-label": props.label, 
+            // biome-ignore lint/a11y/noNoninteractiveTabindex: Keyboard users must be able to focus and scroll this named region.
+            tabIndex: 0, className: slot("viewport"), style: {
+                overflowX: props.axis === "vertical" ? "hidden" : "auto",
+                overflowY: props.axis === "horizontal" ? "hidden" : "auto",
+            }, children: children }) }))),
+    implement(Separator, ({ props, slot, style }) => (_jsx(Aria.Separator, { orientation: props.orientation ?? "horizontal", className: slot("root"), style: style }))),
+    implement(Text, ({ props, slot, style, domId }) => (_jsx("span", { id: domId, className: slot("root"), style: style, children: props.text }))),
+    implement(Hint, ({ props, slot, style, domId }) => (_jsx("p", { id: domId, className: slot("root"), style: style, children: props.text }))),
+    implement(Heading, ({ props, slot, style, domId }) => createElement(`h${props.level}`, { id: domId, className: slot("root"), style }, props.text)),
+    implement(Icon, ({ props, slot, style }) => (_jsx("span", { role: "img", "aria-label": props.label, "aria-hidden": !props.label || undefined, className: slot("root"), style: style, "data-icon": props.name, children: glyph(props.name) }))),
+    implement(Image, ({ props, slot, style }) => (_jsx("img", { src: props.src, alt: props.alt, className: slot("root"), style: style }))),
+    implement(Link, ({ props, slot, style }) => (_jsx(Aria.Link, { href: props.href, className: `${slot("root")} starter-link`, style: style, children: _jsx("span", { className: slot("label"), children: props.label }) }))),
+    implement(Button, ({ props, slot, style, emit }) => (_jsxs(Aria.Button, { isDisabled: props.disabled ?? false, ...(props.current ? { "aria-current": "true" } : {}), ...(props.pressed === undefined ? {} : { "aria-pressed": props.pressed }), 
+        // A class that does not move with the variant or tone: the primitive CSS reads the `sheen` extension here.
+        className: `${slot("root")} starter-button`, style: style, onPress: () => emit("onPress"), children: [icon(props.icon, slot("icon")), _jsx("span", { className: slot("label"), children: props.label })] }))),
+    implement(TextField, function TextFieldImplementation({ props, slot, style, emit, domId }) {
+        const [value, setValue] = useValue(props.value ?? "");
+        const input = {
+            id: domId,
+            className: slot("input"),
+            ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
+            onBlur: () => emit("onChange", value),
+            onKeyDown: (event) => {
+                if (event.key === "Enter" &&
+                    !event.nativeEvent.isComposing &&
+                    (!props.multiline || event.ctrlKey || event.metaKey)) {
+                    emit("onChange", value);
+                    emit("onCommit", value);
+                }
+            },
+        };
+        return (_jsxs(Aria.TextField, { className: slot("root"), style: style, value: value, 
+            // Bounds count code points, as the validator does, not UTF-16 units.
+            onChange: (next) => {
+                if (props.maxLength === undefined || Array.from(next).length <= props.maxLength)
+                    setValue(next);
+            }, isDisabled: props.disabled ?? false, isReadOnly: props.readOnly ?? false, ...(props.describedBy === undefined ? {} : { "aria-describedby": props.describedBy }), children: [_jsx(Aria.Label, { className: slot("label"), children: props.label }), props.multiline ? _jsx(Aria.TextArea, { ...input }) : _jsx(Aria.Input, { ...input })] }));
+    }),
+    implement(Select, function SelectImplementation({ props, slot, style, emit, portal }) {
+        const [value, setValue] = useValue(props.value ?? null);
+        return (_jsxs(Aria.Select, { "aria-label": props.label, className: slot("root"), style: style, selectedKey: value, isDisabled: props.disabled ?? false, onSelectionChange: (key) => {
+                const next = key === null ? null : String(key);
+                setValue(next);
+                if (next !== null)
+                    emit("onChange", next);
+            }, children: [_jsx(Aria.Label, { className: slot("label"), children: props.label }), _jsx(Aria.Button, { className: slot("trigger"), children: _jsx(Aria.SelectValue, {}) }), _jsx(Aria.Popover, { ...(portal ? { UNSTABLE_portalContainer: portal } : {}), children: _jsx(Aria.ListBox, { className: slot("list"), items: props.options, children: (option) => (_jsx(Aria.ListBoxItem, { id: option.value, textValue: option.label, isDisabled: option.disabled ?? false, className: slot("option"), children: option.label })) }) })] }));
+    }),
+    implement(Checkbox, function CheckboxImplementation({ props, slot, style, emit }) {
+        const [value, setValue] = useValue(props.checked ?? false);
+        return (_jsx(Aria.Checkbox, { className: slot("root"), style: style, isSelected: value, isDisabled: props.disabled ?? false, onChange: (checked) => {
+                setValue(checked);
+                emit("onChange", checked);
+            }, children: ({ isSelected }) => (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: slot("indicator"), children: isSelected ? glyph("check") : "" }), _jsx("span", { className: slot("label"), children: props.label })] })) }));
+    }),
+    implement(Switch, function SwitchImplementation({ props, slot, style, emit }) {
+        const [value, setValue] = useValue(props.checked ?? false);
+        return (_jsxs(Aria.Switch, { className: slot("root"), style: style, isSelected: value, isDisabled: props.disabled ?? false, onChange: (checked) => {
+                setValue(checked);
+                emit("onChange", checked);
+            }, children: [_jsx("span", { "aria-hidden": "true", className: slot("track"), children: _jsx("span", { className: slot("thumb") }) }), _jsx("span", { className: slot("label"), children: props.label })] }));
+    }),
+    implement(Menu, ({ props, slot, style, items, portal }) => (_jsx("div", { className: slot("root"), style: style, children: _jsxs(Aria.MenuTrigger, { children: [_jsx(Aria.Button, { className: slot("trigger"), isDisabled: props.disabled ?? false, children: props.label }), _jsx(Aria.Popover, { ...(portal ? { UNSTABLE_portalContainer: portal } : {}), className: slot("content"), "data-open": "", children: _jsx(Aria.Menu, { "aria-label": props.label, items: items, children: (node) => (_jsxs(Aria.MenuItem, { id: node.id, textValue: String(node.props.label), isDisabled: node.props.disabled === true, className: node.slot("root"), style: node.style, onAction: () => node.emit("onPress"), children: [icon(typeof node.props.icon === "string" ? node.props.icon : undefined, node.slot("icon")), _jsx("span", { className: node.slot("label"), children: String(node.props.label) })] })) }) })] }) }))),
+    // Drawn by its `menu`, which reads the item's props, slots and events; this binding satisfies the registry.
+    implement(MenuItem, ({ props, slot, style, emit }) => (_jsxs(Aria.MenuItem, { textValue: props.label, className: slot("root"), style: style, isDisabled: props.disabled ?? false, onAction: () => emit("onPress"), children: [icon(props.icon, slot("icon")), _jsx("span", { className: slot("label"), children: props.label })] }))),
+    implement(Popover, ({ props, slot, style, children, portal }) => (_jsx("div", { className: slot("root"), style: style, children: _jsxs(Aria.DialogTrigger, { children: [_jsx(Aria.Button, { className: slot("trigger"), children: props.label }), _jsx(Aria.Popover, { ...(portal ? { UNSTABLE_portalContainer: portal } : {}), className: slot("content"), children: _jsx(Aria.Dialog, { "aria-label": props.label, children: children }) })] }) }))),
+    implement(Dialog, function DialogImplementation({ props, slot, style, children, emit, portal }) {
+        const [open, setOpen] = useValue(props.open ?? false);
+        return (_jsx("div", { className: slot("root"), style: style, children: _jsx(Aria.ModalOverlay, { ...(portal ? { UNSTABLE_portalContainer: portal } : {}), isOpen: open && portal !== undefined, isDismissable: true, onOpenChange: (next) => {
+                    setOpen(next);
+                    if (!next)
+                        emit("onClose");
+                }, className: slot("backdrop"), children: _jsx(Aria.Modal, { children: _jsxs(Aria.Dialog, { className: slot("content"), "aria-label": props.label, children: [_jsx(Aria.Heading, { slot: "title", className: slot("title"), children: props.label }), children, _jsx(Aria.Button, { slot: "close", className: slot("close"), children: "Close" })] }) }) }) }));
+    }),
+    implement(Tooltip, ({ props, slot, style, children, portal }) => (_jsx("span", { className: slot("root"), style: style, children: _jsxs(Aria.TooltipTrigger, { children: [_jsx(Aria.Focusable, { children: _jsx("span", { tabIndex: 0, className: slot("trigger"), children: children }) }), _jsx(Aria.Tooltip, { ...(portal ? { UNSTABLE_portalContainer: portal } : {}), className: slot("content"), children: props.text })] }) }))),
+    implement(Tabs, function TabsImplementation({ props, slot, style, items, emit }) {
+        const [value, setValue] = useValue(props.value ?? String(items[0]?.props.value));
+        return (_jsxs(Aria.Tabs, { className: slot("root"), style: style, selectedKey: value, onSelectionChange: (key) => {
+                setValue(String(key));
+                emit("onChange", String(key));
+            }, children: [_jsx(Aria.TabList, { "aria-label": props.label, className: slot("list"), items: items, children: (node) => (_jsxs(Aria.Tab, { id: String(node.props.value), isDisabled: node.props.disabled === true, className: node.slot("root"), style: node.style, children: [_jsx("span", { className: node.slot("label"), children: String(node.props.label) }), typeof node.props.count === "string" ? (_jsx("span", { className: node.slot("count"), children: node.props.count })) : null] })) }), items.map((node) => (_jsx(Aria.TabPanel, { id: String(node.props.value), className: `${slot("panel")} ${node.slot("panel")}`, children: node.children }, node.id)))] }));
+    }),
+    implement(Disclosure, ({ props, slot, style, children, emit }) => (_jsxs("details", { ...(props.open === undefined ? {} : { open: props.open }), className: slot("root"), style: style, onToggle: (event) => emit("onToggle", event.currentTarget.open), children: [_jsx("summary", { className: slot("summary"), children: props.label }), _jsx("div", { className: slot("panel"), children: children })] }))),
+    // Drawn by its `tabs`, like `menuItem`.
+    implement(Tab, ({ props, slot, style }) => (_jsxs(Aria.Tab, { id: props.value, isDisabled: props.disabled ?? false, className: slot("root"), style: style, children: [_jsx("span", { className: slot("label"), children: props.label }), props.count === undefined ? null : _jsx("span", { className: slot("count"), children: props.count })] }))),
+];

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { catalog } from "./catalog.js";
+export { designSystem } from "./design-system.js";
+export { implementations } from "./implementations.js";
+export { primitiveCss, styles } from "./styles.js";
+export { themes } from "./themes.js";

package/dist/index.js

@@ -0,0 +1,5 @@
+export { catalog } from "./catalog.js";
+export { designSystem } from "./design-system.js";
+export { implementations } from "./implementations.js";
+export { primitiveCss, styles } from "./styles.js";
+export { themes } from "./themes.js";

package/dist/styles.d.ts

@@ -0,0 +1,12 @@
+export declare const primitiveCss = "\n.lf_stack_default_root{display:flex;flex-direction:column}\n.lf_inline_default_root{display:flex;flex-direction:row;align-items:center}\n.lf_grid_default_root{display:grid}\n.lf_scroll_default_viewport{overflow:auto;max-height:100%}\n.starter-button{display:inline-flex;align-items:center;justify-content:center;min-height:2.25rem;cursor:pointer;box-shadow:inset 0 1px 0 var(--lf-p-sheen,transparent)}\n.starter-button[data-disabled]{cursor:default}\n.lf_heading_default_root,.lf_dialog_default_title{margin:0;text-wrap:balance}\n.lf_textField_default_root,.lf_select_default_root{display:flex;flex-direction:column}\n.lf_select_default_trigger{display:flex;justify-content:space-between;align-items:center;min-height:2.25rem;text-align:left}\n.lf_checkbox_default_root,.lf_switch_default_root{display:inline-flex;align-items:center}\n.lf_checkbox_default_indicator{display:inline-flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;line-height:1}\n.lf_switch_default_track{display:inline-flex;align-items:center;width:2.2em;height:1.2em;padding:2px;box-sizing:border-box}\n.lf_switch_default_thumb{width:calc(1.2em - 6px);height:calc(1.2em - 6px)}\n[data-selected] .lf_switch_default_thumb{transform:translateX(1em)}\n.lf_menu_default_trigger,.lf_popover_default_trigger,.lf_dialog_default_close{display:inline-flex;align-items:center;min-height:2.25rem;cursor:pointer}\n.lf_menuItem_default_root,.lf_select_default_option{display:flex;align-items:center;cursor:default;outline:none}\n.lf_dialog_default_backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}\n.lf_dialog_default_content{max-width:90vw;max-height:90vh;overflow:auto}\n.lf_icon_default_root{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1rem;height:1rem}\n.lf_tabs_default_list{display:flex;flex-wrap:wrap;align-items:center}\n.lf_tab_default_root{display:inline-flex;align-items:center;min-height:2.25rem;cursor:pointer}\n.lf_tooltip_default_trigger{display:inline-flex}\n.lf_image_default_root{max-width:100%}\n.starter-link{text-decoration:underline;text-underline-offset:0.15em}\n.lf_box_plate_root{display:grid;align-content:start;min-width:0}\n.lf_box_callout_root{display:grid;grid-template-columns:3px minmax(0,1fr)}\n.lf_box_default_rail,.lf_box_plate_rail,.lf_box_rule_rail{display:none}\n.lf_box_callout_rail{display:block;width:3px}\n.lf_disclosure_default_summary{width:fit-content;min-height:2rem;cursor:pointer}\n";
+/**
+ * The sheets a page loads, in order: base, primitive structure, then one theme sheet and one design-system sheet.
+ * Each theme and design system scopes itself to the surface that names it, so all three themes load at once and a
+ * switch is an attribute change.
+ */
+export declare function styles(): {
+    readonly base: string;
+    readonly primitives: string;
+    readonly themes: string;
+    readonly designSystem: string;
+};

package/dist/styles.js

@@ -0,0 +1,50 @@
+import { baseCss, designSystemCss, themeCss } from "@arnilo/liveframe/css";
+import { catalog, valid } from "./catalog.js";
+import { designSystem } from "./design-system.js";
+import { themes } from "./themes.js";
+// Trusted app CSS owns primitive structure; the design system's recipes own the look (spec §6.2). It names no colour:
+// the one paint it reads is the `sheen` extension, with a transparent fallback.
+export const primitiveCss = `
+.lf_stack_default_root{display:flex;flex-direction:column}
+.lf_inline_default_root{display:flex;flex-direction:row;align-items:center}
+.lf_grid_default_root{display:grid}
+.lf_scroll_default_viewport{overflow:auto;max-height:100%}
+.starter-button{display:inline-flex;align-items:center;justify-content:center;min-height:2.25rem;cursor:pointer;box-shadow:inset 0 1px 0 var(--lf-p-sheen,transparent)}
+.starter-button[data-disabled]{cursor:default}
+.lf_heading_default_root,.lf_dialog_default_title{margin:0;text-wrap:balance}
+.lf_textField_default_root,.lf_select_default_root{display:flex;flex-direction:column}
+.lf_select_default_trigger{display:flex;justify-content:space-between;align-items:center;min-height:2.25rem;text-align:left}
+.lf_checkbox_default_root,.lf_switch_default_root{display:inline-flex;align-items:center}
+.lf_checkbox_default_indicator{display:inline-flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;line-height:1}
+.lf_switch_default_track{display:inline-flex;align-items:center;width:2.2em;height:1.2em;padding:2px;box-sizing:border-box}
+.lf_switch_default_thumb{width:calc(1.2em - 6px);height:calc(1.2em - 6px)}
+[data-selected] .lf_switch_default_thumb{transform:translateX(1em)}
+.lf_menu_default_trigger,.lf_popover_default_trigger,.lf_dialog_default_close{display:inline-flex;align-items:center;min-height:2.25rem;cursor:pointer}
+.lf_menuItem_default_root,.lf_select_default_option{display:flex;align-items:center;cursor:default;outline:none}
+.lf_dialog_default_backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
+.lf_dialog_default_content{max-width:90vw;max-height:90vh;overflow:auto}
+.lf_icon_default_root{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1rem;height:1rem}
+.lf_tabs_default_list{display:flex;flex-wrap:wrap;align-items:center}
+.lf_tab_default_root{display:inline-flex;align-items:center;min-height:2.25rem;cursor:pointer}
+.lf_tooltip_default_trigger{display:inline-flex}
+.lf_image_default_root{max-width:100%}
+.starter-link{text-decoration:underline;text-underline-offset:0.15em}
+.lf_box_plate_root{display:grid;align-content:start;min-width:0}
+.lf_box_callout_root{display:grid;grid-template-columns:3px minmax(0,1fr)}
+.lf_box_default_rail,.lf_box_plate_rail,.lf_box_rule_rail{display:none}
+.lf_box_callout_rail{display:block;width:3px}
+.lf_disclosure_default_summary{width:fit-content;min-height:2rem;cursor:pointer}
+`;
+/**
+ * The sheets a page loads, in order: base, primitive structure, then one theme sheet and one design-system sheet.
+ * Each theme and design system scopes itself to the surface that names it, so all three themes load at once and a
+ * switch is an attribute change.
+ */
+export function styles() {
+    return {
+        base: valid("base sheet", baseCss(catalog)),
+        primitives: primitiveCss,
+        themes: themes.map((theme) => valid(`${theme.id} sheet`, themeCss(theme, catalog))).join("\n"),
+        designSystem: valid("design-system sheet", designSystemCss(designSystem, { catalog, registry: {} })),
+    };
+}

package/dist/themes.d.ts

@@ -0,0 +1,3 @@
+import { type Theme } from "@arnilo/liveframe";
+/** The light, dark and high-contrast themes, validated against the starter vocabulary. */
+export declare const themes: [Theme, ...Theme[]];