@threadlabs/looma 0.14.8 → 0.15.0

package/editor/chunks/extensions.js

@@ -8,7 +8,7 @@ import { gapCursor } from "@tiptap/pm/gapcursor";
 import { common, createLowlight } from "lowlight";
 import { DOMParser, Node as Node$2 } from "@tiptap/pm/model";
 import MarkdownIt from "markdown-it";
-import { CellSelection, TableMap, addColumn, addColumnAfter, addColumnBefore, addRow, addRowAfter, addRowBefore, cellAround, columnResizing, deleteCellSelection, deleteColumn, deleteRow, deleteTable, fixTables, goToNextCell, mergeCells, setCellAttr, splitCell, tableEditing, toggleHeader, toggleHeaderCell } from "@tiptap/pm/tables";
+import { CellSelection, TableMap, addColumn, addColumnAfter, addColumnBefore, addRow, addRowAfter, addRowBefore, cellAround, columnResizing, deleteCellSelection, deleteColumn, deleteRow, deleteTable, fixTables, goToNextCell, mergeCells, moveTableColumn, moveTableRow, setCellAttr, splitCell, tableEditing, toggleHeader, toggleHeaderCell } from "@tiptap/pm/tables";
 //#region src/editor/extensions/active-block.ts
 /**
 * Marks the top-level block holding the caret so a stylesheet can show where
@@ -6754,6 +6754,12 @@ function getDefaultEditorExtensions(options = {}) {
 //#endregion
 //#region src/editor/extensions/table-commands.ts
 var NO_TABLE_CAPABILITIES = {
+	canToggleHeaderRow: false,
+	canToggleHeaderColumn: false,
+	canMoveRowUp: false,
+	canMoveRowDown: false,
+	canMoveColumnLeft: false,
+	canMoveColumnRight: false,
 	canAddRowBefore: false,
 	canAddRowAfter: false,
 	canAddColumnBefore: false,
@@ -6787,14 +6793,45 @@ function getActiveTableUiState(editor) {
 		showToolbar: false,
 		cellAlignment: "left",
 		cellBackground: null,
+		headerRow: false,
+		headerColumn: false,
 		capabilities: { ...NO_TABLE_CAPABILITIES }
 	};
+	const table = findTable(editor)?.node;
+	const map = table ? TableMap.get(table) : null;
+	const headerRow = Boolean(table && map && Array.from({ length: map.width }, (_, column) => table.nodeAt(map.map[column])?.type.name === "tableHeader").every(Boolean));
+	const headerColumn = Boolean(table && map && Array.from({ length: map.height }, (_, row) => table.nodeAt(map.map[row * map.width])?.type.name === "tableHeader").every(Boolean));
+	const position = selectedTableCell(editor);
+	const canMove = (axis, delta) => {
+		if (!position || !map) return false;
+		const { row, column, cellPos } = position;
+		const from = axis === "row" ? row : column;
+		if (from + delta < 0 || from + delta >= (axis === "row" ? map.height : map.width)) return false;
+		const command = axis === "row" ? moveTableRow : moveTableColumn;
+		try {
+			return command({
+				from,
+				to: from + delta,
+				pos: cellPos
+			})(editor.state);
+		} catch {
+			return false;
+		}
+	};
 	return {
 		active: true,
 		showToolbar: true,
 		cellAlignment: getActiveTableCellAlignment(editor),
 		cellBackground: getActiveTableCellBackground(editor),
+		headerRow,
+		headerColumn,
 		capabilities: {
+			canToggleHeaderRow: editor.can().toggleHeaderRow(),
+			canToggleHeaderColumn: editor.can().toggleHeaderColumn(),
+			canMoveRowUp: canMove("row", -1),
+			canMoveRowDown: canMove("row", 1),
+			canMoveColumnLeft: canMove("column", -1),
+			canMoveColumnRight: canMove("column", 1),
 			canAddRowBefore: editor.can().addRowBefore(),
 			canAddRowAfter: editor.can().addRowAfter(),
 			canAddColumnBefore: editor.can().addColumnBefore(),
@@ -6831,6 +6868,36 @@ function handleTableAction(editor, detail) {
 		case "add-row-after": return editor.chain().focus().addRowAfter().run();
 		case "add-column-before": return editor.chain().focus().addColumnBefore().run();
 		case "add-column-after": return editor.chain().focus().addColumnAfter().run();
+		case "toggle-header-row": return editor.chain().focus().toggleHeaderRow().run();
+		case "toggle-header-column": return editor.chain().focus().toggleHeaderColumn().run();
+		case "move-row-up":
+		case "move-row-down":
+		case "move-column-left":
+		case "move-column-right": {
+			const position = selectedTableCell(editor);
+			if (!position) return false;
+			const { row, column, cellPos } = position;
+			const axis = detail.action.startsWith("move-row") ? "row" : "column";
+			const from = axis === "row" ? row : column;
+			const delta = detail.action.endsWith("up") || detail.action.endsWith("left") ? -1 : 1;
+			const table = findTable(editor)?.node;
+			if (!table) return false;
+			const map = TableMap.get(table);
+			if (from + delta < 0 || from + delta >= (axis === "row" ? map.height : map.width)) return false;
+			const command = axis === "row" ? moveTableRow : moveTableColumn;
+			let moved = false;
+			try {
+				moved = command({
+					from,
+					to: from + delta,
+					pos: cellPos
+				})(editor.state, editor.view.dispatch);
+			} catch {
+				return false;
+			}
+			if (moved) editor.view.focus();
+			return moved;
+		}
 		case "delete-row": return editor.chain().focus().deleteRow().run();
 		case "delete-column": return editor.chain().focus().deleteColumn().run();
 		case "delete-table": return editor.chain().focus().deleteTable().run();
@@ -6907,6 +6974,19 @@ function findTable(editor) {
 function findSelectedCellPosition(editor) {
 	return cellAround(editor.state.selection.$from)?.pos ?? null;
 }
+function selectedTableCell(editor) {
+	const table = findTable(editor);
+	const cellPos = findSelectedCellPosition(editor);
+	if (!table || cellPos === null) return null;
+	const relative = cellPos - table.pos - 1;
+	if (relative < 0 || relative >= table.node.content.size) return null;
+	const rect = TableMap.get(table.node).findCell(relative);
+	return {
+		row: rect.top,
+		column: rect.left,
+		cellPos
+	};
+}
 function selectTableAxis(editor, axis, rowIndex, columnIndex) {
 	const tableInfo = findTable(editor);
 	if (!tableInfo) return false;
@@ -7007,7 +7087,7 @@ function handleTableOverlayAction(editor, detail) {
 	if (!tableInfo) return false;
 	const { action } = detail;
 	if (action === "select-row" || action === "select-column") return selectTableAxis(editor, action === "select-row" ? "row" : "column", detail.rowIndex, detail.columnIndex);
-	if (action === "open-cell-menu") return true;
+	if (action === "open-cell-menu" || action === "open-row-menu" || action === "open-column-menu") return true;
 	if (!("boundaryIndex" in detail)) return false;
 	const { boundaryIndex } = detail;
 	const { pos: tablePos, node: table } = tableInfo;

package/editor/extensions/table-commands.d.ts

@@ -22,6 +22,12 @@ export interface InsertTableAtRangeOptions {
  * Tiptap's schema/selection rules or optimistically enabling invalid actions.
  */
 export interface TableActionCapabilities {
+    canToggleHeaderRow: boolean;
+    canToggleHeaderColumn: boolean;
+    canMoveRowUp: boolean;
+    canMoveRowDown: boolean;
+    canMoveColumnLeft: boolean;
+    canMoveColumnRight: boolean;
     canAddRowBefore: boolean;
     canAddRowAfter: boolean;
     canAddColumnBefore: boolean;
@@ -43,6 +49,8 @@ export interface ActiveTableUiState {
     showToolbar: boolean;
     cellAlignment: TableCellAlignment;
     cellBackground: TableCellBackground;
+    headerRow: boolean;
+    headerColumn: boolean;
     capabilities: TableActionCapabilities;
 }
 /**

package/editor/icons.d.ts

@@ -9,7 +9,9 @@ export declare const LOOMA_ICONS: {
     'book-user': IconNode;
     braces: IconNode;
     calculator: IconNode;
+    check: IconNode;
     'circle-check': IconNode;
+    'circle-dot': IconNode;
     'circle-x': IconNode;
     'chevron-down': IconNode;
     'chevron-left': IconNode;
@@ -32,6 +34,7 @@ export declare const LOOMA_ICONS: {
     info: IconNode;
     italic: IconNode;
     'layout-dashboard': IconNode;
+    link: IconNode;
     list: IconNode;
     'list-ordered': IconNode;
     'list-todo': IconNode;
@@ -58,8 +61,10 @@ export declare const LOOMA_ICONS: {
     'triangle-alert': IconNode;
     truck: IconNode;
     underline: IconNode;
+    'user-round': IconNode;
     users: IconNode;
     undo: IconNode;
+    x: IconNode;
 };
 /** Stable key selecting an icon from Looma's shipped interaction vocabulary. */
 export type LoomaIconName = keyof typeof LOOMA_ICONS;

package/editor/index.js

@@ -1,7 +1,7 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS, t as TABLE_CELL_BACKGROUND_OPTIONS } from "./chunks/table-backgrounds.js";
 import { n as resolveTableCellAt, t as measureTableOverlayGeometry } from "./chunks/ui.js";
 import { A as LOOMA_ACTIVE_BLOCK_CLASS, C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, M as LoomaActiveBlock, N as LoomaActiveBlockPluginKey, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, j as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, k as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "./chunks/extensions.js";
-import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bold, BookUser, Braces, Calculator, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleQuestionMark, CircleX, CodeXml, Columns3, CreditCard, Ellipsis, Eraser, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, Image, Info, Italic, LayoutDashboard, List, ListOrdered, ListTodo, LoaderCircle, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Settings, Split, Strikethrough, Table2, Trash2, TriangleAlert, Truck, Underline, Undo2, Users } from "lucide";
+import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bold, BookUser, Braces, Calculator, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDot, CircleQuestionMark, CircleX, CodeXml, Columns3, CreditCard, Ellipsis, Eraser, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, Image, Info, Italic, LayoutDashboard, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Settings, Split, Strikethrough, Table2, Trash2, TriangleAlert, Truck, Underline, Undo2, UserRound, Users, X } from "lucide";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
 var LOOMA_ICONS = {
@@ -13,7 +13,9 @@ var LOOMA_ICONS = {
 	"book-user": BookUser,
 	braces: Braces,
 	calculator: Calculator,
+	check: Check,
 	"circle-check": CircleCheck,
+	"circle-dot": CircleDot,
 	"circle-x": CircleX,
 	"chevron-down": ChevronDown,
 	"chevron-left": ChevronLeft,
@@ -36,6 +38,7 @@ var LOOMA_ICONS = {
 	info: Info,
 	italic: Italic,
 	"layout-dashboard": LayoutDashboard,
+	link: Link,
 	list: List,
 	"list-ordered": ListOrdered,
 	"list-todo": ListTodo,
@@ -62,8 +65,10 @@ var LOOMA_ICONS = {
 	"triangle-alert": TriangleAlert,
 	truck: Truck,
 	underline: Underline,
+	"user-round": UserRound,
 	users: Users,
-	undo: Undo2
+	undo: Undo2,
+	x: X
 };
 function serializeAttributes(attributes) {
 	return Object.entries(attributes).map(([name, value]) => ` ${name}="${escapeAttribute(value)}"`).join("");

package/editor/insert-table-grid.d.ts

@@ -1,5 +1,5 @@
 /** Event contract for the declarative table-dimension picker. */
-/** Confirmed table dimensions emitted after preview state has been committed. */
+/** Table dimensions emitted when a cell is activated. */
 export interface InsertTableEventDetail {
     rows: number;
     cols: number;

package/editor/mention-menu.d.ts

@@ -2,8 +2,10 @@
 /** Zero-based candidate position requested by pointer-driven menu highlighting. */
 export interface MentionMenuHighlightEventDetail {
     index: number;
+    value: string;
 }
 /** Zero-based candidate position the host should commit as the chosen mention. */
 export interface MentionMenuSelectEventDetail {
     index: number;
+    value: string;
 }

package/editor/slash-menu.d.ts

@@ -6,6 +6,7 @@ import type { LoomaIconName } from "./icons.js";
  * headless extension executes the command from its current ephemeral snapshot.
  */
 export interface SlashMenuItem {
+    value?: string;
     title: string;
     description: string;
     icon: LoomaIconName;
@@ -13,10 +14,12 @@ export interface SlashMenuItem {
 /** Pointer-hover request; selection remains owned by the suggestion extension. */
 export interface SlashMenuHighlightEventDetail {
     index: number;
+    value: string;
 }
 /** Activation request for an item in the current published snapshot. */
 export interface SlashMenuSelectEventDetail {
     index: number;
+    value: string;
 }
 /**
  * A viewport rectangle accepted by the slash-menu anchor.

package/editor/table-context-menu.d.ts

@@ -5,7 +5,7 @@ import type { TableCellBackgroundAction } from "./table-backgrounds.js";
  * Keeping this as data prevents the reusable menu from importing or mutating a
  * particular editor implementation.
  */
-export type TableContextMenuAction = "align-left" | "align-center" | "align-right" | TableCellBackgroundAction | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "delete-row" | "delete-column" | "delete-table" | "clear-cells" | "merge-cells" | "split-cell";
+export type TableContextMenuAction = "align-left" | "align-center" | "align-right" | TableCellBackgroundAction | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "toggle-header-row" | "toggle-header-column" | "move-row-up" | "move-row-down" | "move-column-left" | "move-column-right" | "delete-row" | "delete-column" | "delete-table" | "clear-cells" | "merge-cells" | "split-cell";
 /** Adapter-facing payload that keeps the menu independent of editor commands. */
 export interface TableContextMenuActionEventDetail {
     action: TableContextMenuAction;

package/editor/table-overlay.d.ts

@@ -9,7 +9,7 @@ export type TableInsertionAction = "add-row-before" | "add-row-after" | "add-col
  * UI stays independent of Tiptap/ProseMirror positions; adapters translate
  * these logical coordinates with `handleTableOverlayAction`.
  */
-export type TableOverlayAction = TableInsertionAction | "select-row" | "select-column" | "open-cell-menu";
+export type TableOverlayAction = TableInsertionAction | "select-row" | "select-column" | "open-cell-menu" | "open-row-menu" | "open-column-menu";
 /**
  * Discriminated action payload.
  * Boundary indices refer to entries in the measured boundary arrays. Cell
@@ -24,7 +24,7 @@ export type TableOverlayActionEventDetail = {
     rowIndex: number;
     columnIndex: number;
 } | {
-    action: "open-cell-menu";
+    action: "open-cell-menu" | "open-row-menu" | "open-column-menu";
     rowIndex: number;
     columnIndex: number;
     anchor: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.14.8",
+  "version": "0.15.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-avatar-group.css

@@ -36,7 +36,7 @@
       justify-content: center;
       inline-size: 2.5rem;
       block-size: 2.5rem;
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       border: 1px solid var(--ui-border-strong);
       background: var(--ui-surface-elevated);
       color: var(--ui-text-primary);
@@ -72,7 +72,6 @@
     :where([data-slotted], [data-slotted] *):is(*) {
       margin-inline-start: -0.5rem;
       flex-shrink: 0;
-      border-radius: 999px;
     }
 
     :where([data-slotted], [data-slotted] *):is(*:first-child) {

package/styles/ui-avatar.css

@@ -3,6 +3,10 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-avatar-radius {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-avatar-surface {
       syntax: "*";
       inherits: false;
@@ -19,12 +23,13 @@
 /* This component's hooks style the element they are set on, and never a nested one. */
 
     :scope {
+      --_ui-default-icon-size: 1.25rem;
       display: inline-grid;
       place-items: center;
       overflow: hidden;
       inline-size: 2.5rem;
       block-size: 2.5rem;
-      border-radius: 999px;
+      border-radius: var(--ui-avatar-radius, var(--ui-radius-round));
       border: 1px solid var(--ui-avatar-border, var(--ui-border-strong));
       background: var(--ui-avatar-surface, var(--ui-accent-soft));
       color: var(--ui-avatar-text, var(--ui-accent-subtle-text, var(--ui-accent-solid)));
@@ -35,11 +40,16 @@
     }
 
     :scope[data-ui-avatar-state~="size=sm"] {
+      --_ui-default-icon-size: 1rem;
       inline-size: 1.75rem;
       block-size: 1.75rem;
       font-size: var(--ui-font-size-xs);
     }
 
+    :scope[data-ui-avatar-state~="shape=square"] {
+      border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
+    }
+
     /* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
        outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
     :scope[data-ui-avatar-state~="active"] {

package/styles/ui-badge.css

@@ -47,6 +47,7 @@
       --_badge-text: var(--ui-text-secondary);
       /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
       --_badge-border: var(--ui-surface-subtle);
+      --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-surface));
 
       display: inline-flex;
       align-items: center;
@@ -55,7 +56,7 @@
       padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2));
       border: 1px solid var(--ui-badge-border, var(--_badge-border));
       border-radius: var(--ui-radius-round);
-      background: var(--ui-badge-surface, var(--_badge-surface));
+      background: var(--_badge-outline-surface);
       color: var(--ui-badge-text, var(--_badge-text));
       font-family: var(--ui-font-family-sans);
       font-size: var(--ui-badge-font-size, var(--ui-font-size-sm));
@@ -138,6 +139,37 @@
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
+    :scope[data-ui-badge-state~="variant=outline"] {
+      --_badge-surface: var(--ui-surface-default);
+      --_badge-border: var(--ui-border-strong);
+      --_badge-text: var(--ui-text-secondary);
+    }
+
+    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"] {
+      --_badge-border: var(--ui-accent-solid);
+      --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
+    }
+
+    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"] {
+      --_badge-border: var(--ui-danger-solid);
+      --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
+    }
+
+    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"] {
+      --_badge-border: var(--ui-success-solid);
+      --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
+    }
+
+    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"] {
+      --_badge-border: var(--ui-warning-solid);
+      --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
+    }
+
+    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"] {
+      --_badge-border: var(--ui-info-solid);
+      --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
+    }
+
     /* A tag is flat at the start and points at the end. The point is cut from the box, so it has no
        outline to follow: the edge is the fill. The end padding grows by the point's depth so the
        label never runs into it. */
@@ -156,6 +188,40 @@
       clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
     }
 
+    /* The tag clips its point, including the native border. Draw the outer shape in the border
+       colour and an inset inner shape in the surface colour to keep a visible diagonal edge. */
+    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"] {
+      position: relative;
+      isolation: isolate;
+      background: var(--ui-badge-border, var(--_badge-border));
+    }
+
+    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"]::before {
+      content: "";
+      position: absolute;
+      inset: 1px;
+      z-index: -1;
+      background: var(--_badge-outline-surface);
+      clip-path: polygon(0 0, calc(100% - var(--_badge-point)) 0, 100% 50%, calc(100% - var(--_badge-point)) 100%, 0 100%);
+      pointer-events: none;
+    }
+
+    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"]:dir(rtl)::before {
+      clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
+    }
+
+    @media (forced-colors: active) {
+      :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"] {
+        forced-color-adjust: none;
+        background: CanvasText;
+        color: CanvasText;
+      }
+
+      :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"]::before {
+        background: Canvas;
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;
@@ -174,5 +240,11 @@
        outline to follow: the edge is the fill. The end padding grows by the point's depth so the
        label never runs into it. */
 
+    /* The tag clips its point, including the native border. Draw the outer shape in the border
+       colour and an inset inner shape in the surface colour to keep a visible diagonal edge. */
+
+    @media (forced-colors: active) {
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-button.css

@@ -106,7 +106,7 @@
       border-style: solid;
       border-width: 1px;
       border-color: var(--ui-button-border, var(--_tone));
-      border-radius: var(--ui-button-radius, var(--ui-radius-md));
+      border-radius: var(--ui-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
       background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
       color: var(--ui-button-text, var(--_tone-text));
       font: inherit;
@@ -125,6 +125,10 @@
       margin: 0;
     }
 
+    .pending-spinner {
+      margin-inline-end: var(--ui-space-2);
+    }
+
     @supports (text-box-trim: trim-both) {
       :scope {
         text-box-trim: trim-both;
@@ -265,6 +269,10 @@
       box-shadow: none;
     }
 
+    :scope[data-ui-button-state~="pending"]:focus-visible {
+      box-shadow: var(--ui-focus-halo);
+    }
+
     /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
        it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
        the way hover washes the live one, so it stays light in every tone. An opaque mix toward the

package/styles/ui-callout.css

@@ -91,7 +91,7 @@
       min-inline-size: 0;
     }
 
-    :scope[data-ui-callout-state~="tone=note"] {
+    :scope[data-ui-callout-state~="tone=neutral"], :scope[data-ui-callout-state~="tone=note"] {
       --_callout-surface: var(--ui-surface-muted);
       --_callout-border: var(--ui-border-strong);
       --_callout-icon: var(--ui-text-secondary);

package/styles/ui-checkbox.css

@@ -3,6 +3,10 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-checkbox-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-checkbox-size {
       syntax: "*";
       inherits: false;
@@ -13,6 +17,7 @@
     :scope {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-checkbox-size: var(--ui-checkbox-size);
+      --_ui-checkbox-invalid-border: var(--ui-checkbox-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
 
       display: inline-flex;
       align-items: flex-start;
@@ -110,6 +115,10 @@
       outline-offset: 2px;
     }
 
+    :scope[data-ui-checkbox-state~="invalid"] input {
+      border-color: var(--_ui-checkbox-invalid-border);
+    }
+
     :scope[data-ui-checkbox-state~="disabled"] {
       color: var(--ui-disabled-text);
       cursor: not-allowed;

package/styles/ui-combobox.css

@@ -39,6 +39,30 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-combobox-radius {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-combobox-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-combobox-popup-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-combobox-popup-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-combobox-popup-radius {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-combobox-popup-shadow {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-combobox"]) to ([data-component], [data-slotted]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
@@ -54,6 +78,12 @@
       --_ui-combobox-item-min-block-size: var(--ui-combobox-item-min-block-size);
       --_ui-combobox-item-input-min-inline-size: var(--ui-combobox-item-input-min-inline-size);
       --_ui-combobox-item-item-max-inline-size: var(--ui-combobox-item-item-max-inline-size);
+      --_ui-combobox-radius: var(--ui-combobox-radius);
+      --_ui-combobox-invalid-border: var(--ui-combobox-invalid-border);
+      --_ui-combobox-popup-surface: var(--ui-combobox-popup-surface);
+      --_ui-combobox-popup-border: var(--ui-combobox-popup-border);
+      --_ui-combobox-popup-radius: var(--ui-combobox-popup-radius);
+      --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
 
       display: grid;
       gap: var(--ui-space-1);
@@ -80,7 +110,7 @@
       display: flex;
       min-inline-size: 0;
       border: 1px solid var(--ui-control-border, var(--ui-border-default));
-      border-radius: var(--ui-radius-md);
+      border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: var(--ui-control-inset);
       transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
@@ -198,8 +228,9 @@
     .field:has(input:disabled) {
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
     }
-    :scope[data-ui-combobox-state~="validationStatus=error"] .field {
-      border-color: var(--ui-danger-solid, var(--ui-accent-active));
+    :scope[data-ui-combobox-state~="validationStatus=error"] .field,
+    :scope[data-ui-combobox-state~="invalid"] .field {
+      border-color: var(--_ui-combobox-invalid-border, var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active))));
     }
     .popup {
       box-sizing: border-box;
@@ -209,11 +240,11 @@
       overflow: auto;
       margin: 0;
       padding: var(--ui-space-1);
-      border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-md);
-      background: var(--ui-surface-elevated);
+      border: 1px solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
+      background: var(--_ui-combobox-popup-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
-      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      box-shadow: var(--_ui-combobox-popup-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
     [hidden] {
       display: none;