@calliopelabs/ui 0.6.0 → 0.7.0

package/dist/appearance/AppearancePicker.js

@@ -76,7 +76,7 @@ export function CustomAccentField({ id, value, ground, disabled, onChange, }) {
         : !parsed
             ? t.customAccentInvalid
             : check?.ok
-                ? t.customAccentOk(check.ratio.toFixed(1))
-                : t.customAccentFaint((check?.ratio ?? 1).toFixed(1), MIN_NON_TEXT_CONTRAST, modeFor(ground));
+                ? t.customAccentOk(check.ratio.toFixed(1), ground)
+                : t.customAccentFaint((check?.ratio ?? 1).toFixed(1), MIN_NON_TEXT_CONTRAST, modeFor(ground), ground);
     return (_jsxs("div", { className: "mt-1 flex min-w-0 flex-col gap-1.5", children: [_jsx("label", { htmlFor: id, className: "text-sm font-medium", children: t.customAccent }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("input", { type: "color", "aria-label": t.customAccentPick, disabled: disabled, value: parsed ?? "#2f9e52", onChange: (event) => update(event.target.value), className: "size-8 shrink-0 cursor-pointer rounded-lg border bg-transparent disabled:cursor-not-allowed" }), _jsx("input", { id: id, type: "text", inputMode: "text", spellCheck: false, disabled: disabled, value: draft, placeholder: "#2f9e52", onChange: (event) => update(event.target.value), "aria-invalid": Boolean(draft) && !check?.ok, "aria-describedby": helpId, className: "h-8 w-32 rounded-lg border border-input bg-transparent px-2.5 font-mono text-sm outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50 aria-invalid:border-destructive" }), value && _jsx("span", { className: "text-xs text-muted-foreground", children: t.customAccentInUse })] }), _jsx("p", { id: helpId, "aria-live": "polite", className: cn("text-xs [overflow-wrap:anywhere]", draft && !check?.ok ? "text-danger-fg" : "text-muted-foreground"), children: help })] }));
 }

package/dist/data/DataTable.js

@@ -81,7 +81,7 @@ export function DataTable({ label, controller, columns, getRowId, empty, emptyFi
                 });
         }
     })();
-    const table = (_jsxs("div", { className: "relative overflow-hidden rounded-lg border", "aria-busy": state === "loading" || controller.isStale || undefined, children: [controller.isStale && _jsx(StaleBar, {}), _jsx("div", { className: "[container-type:inline-size] relative w-full overflow-x-auto", children: _jsxs("table", { className: "w-full caption-bottom text-sm", children: [_jsx("caption", { className: "sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { className: "border-b", children: [selection && (_jsx("th", { scope: "col", className: "h-10 w-10 px-(--row-pad-x) align-middle", children: _jsx(Checkbox, { checked: selection.pageSelectionState(pageIds), onCheckedChange: () => selection.togglePage(pageIds), "aria-label": t.selectPage(label), disabled: pageIds.length === 0 }) })), visibleColumns.map((column) => (_jsx("th", { scope: "col", "aria-sort": ariaSort(column.sortKey, sorts), className: cn("h-10 px-(--row-pad-x) text-left align-middle text-2xs font-semibold tracking-[0.08em] whitespace-nowrap text-muted-foreground uppercase", column.width, column.align && ALIGN[column.align], column.headClassName), children: column.sortKey && controller.sortEnabled ? (_jsx(SortHeader, { sortKey: column.sortKey, sorts: sorts, onToggle: controller.toggleSort, children: column.header })) : (column.header) }, column.id)))] }) }), _jsx("tbody", { children: tableBody })] }) })] }));
+    const table = (_jsxs("div", { className: "relative overflow-hidden rounded-lg border", "aria-busy": state === "loading" || controller.isStale || undefined, children: [controller.isStale && _jsx(StaleBar, {}), _jsx("div", { role: "region", "aria-label": label, tabIndex: 0, className: "[container-type:inline-size] relative w-full overflow-x-auto focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: _jsxs("table", { className: "w-full caption-bottom text-sm", children: [_jsx("caption", { className: "sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { className: "border-b", children: [selection && (_jsx("th", { scope: "col", className: "h-10 w-10 px-(--row-pad-x) align-middle", children: _jsx(Checkbox, { checked: selection.pageSelectionState(pageIds), onCheckedChange: () => selection.togglePage(pageIds), "aria-label": t.selectPage(label), disabled: pageIds.length === 0 }) })), visibleColumns.map((column) => (_jsx("th", { scope: "col", "aria-sort": ariaSort(column.sortKey, sorts), className: cn("h-10 px-(--row-pad-x) text-left align-middle text-2xs font-semibold tracking-[0.08em] whitespace-nowrap text-muted-foreground uppercase", column.width, column.align && ALIGN[column.align], column.headClassName), children: column.sortKey && controller.sortEnabled ? (_jsx(SortHeader, { sortKey: column.sortKey, sorts: sorts, onToggle: controller.toggleSort, children: column.header })) : (column.header) }, column.id)))] }) }), _jsx("tbody", { children: tableBody })] }) })] }));
     const cardGrid = (() => {
         const grid = "grid min-w-0 grid-cols-(--list-columns) gap-(--list-gap)";
         const box = "relative min-w-0 rounded-(--list-item-radius) border-(length:--list-item-border) bg-(--list-item-bg) [padding:var(--list-item-pad)]";

package/dist/provider/messages.d.ts

@@ -100,8 +100,9 @@ export interface Messages {
         customAccentHelp: string;
         customAccentInvalid: string;
         customAccentInUse: string;
-        customAccentOk: (ratio: string) => string;
-        customAccentFaint: (ratio: string, min: number, mode: "dark" | "light") => string;
+        /** `ground` is the ground's key, for a message that names it. */
+        customAccentOk: (ratio: string, ground: string) => string;
+        customAccentFaint: (ratio: string, min: number, mode: "dark" | "light", ground: string) => string;
     };
 }
 export declare const defaultMessages: Messages;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calliopelabs/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Calliope AI shared operator UI: app shell, navigation, page frame, data table and list patterns, status colours, design tokens and appearance for Astrolift AI and Zentinelle AI.",
   "keywords": [
     "calliope-ai",