@silverpoint/core 0.6.0 → 0.8.0

package/dist/ui.js

@@ -1,5 +1,13 @@
 import { DEFAULTS } from './chunk-KFBSQH5G.js';
-import { round2, roundPathData, arcPath, circlePath, diagnose, resolveSeed } from './chunk-OLYKR5PS.js';
+export { uiSortRows } from './chunk-NI7B6UEO.js';
+import { arcPath, circlePath, resolveSeed } from './chunk-46QELMCG.js';
+import { paletteStyle, resolvePalette } from './chunk-ANJSW5JX.js';
+import { round2, roundPathData } from './chunk-5MP3BLZK.js';
+import { uiRequireName } from './chunk-G7N4X5XD.js';
+export { uiRequireName } from './chunk-G7N4X5XD.js';
+import { safeHref, el, root, frame, tone, glyph, slot, baseOf, text, headingTag, nativeInput, sr, UI_GLYPHS, cssLength, iconClose } from './chunk-6YFO7OP3.js';
+export { UI_GLYPHS } from './chunk-6YFO7OP3.js';
+import { diagnose } from './chunk-WYFRHI4S.js';
 
 // src/ui/catalog.ts
 var BATCH = {
@@ -15,14 +23,17 @@ var BATCH = {
   Slider: "B2",
   Rate: "B2"
 };
-var row = (name, group, states) => Object.freeze({
+var row = (name, group, states, family2 = "ui", batch = BATCH[name] ?? "B3") => Object.freeze({
   name,
-  batch: BATCH[name] ?? "B3",
+  batch,
   slug: name.replace(/[A-Z]/g, (m, i) => (i ? "-" : "") + m.toLowerCase()),
   component: `Sp${name}`,
   group,
+  family: family2,
   states: Object.freeze([...states])
 });
+var composed = (name, group, batch, states) => row(name, group, states, "composed", batch);
+var overlay = (name, states) => row(name, "overlays", states, "overlay", "B");
 var UI_COMPONENTS = /* @__PURE__ */ Object.freeze([
   row("Button", "actions", ["default", "primary", "danger", "disabled"]),
   row("Input", "data-entry", ["empty", "filled", "invalid", "disabled"]),
@@ -40,13 +51,34 @@ var UI_COMPONENTS = /* @__PURE__ */ Object.freeze([
   row("Divider", "data-display", ["plain", "text"]),
   row("Progress", "feedback", ["line", "circle", "indeterminate"]),
   row("Alert", "feedback", ["info", "success", "warning", "error"]),
-  row("Skeleton", "feedback", ["paragraph", "avatar"])
+  row("Skeleton", "feedback", ["paragraph", "avatar"]),
+  composed("Surface", "building-blocks", "A1", ["frame-card", "tone-2"]),
+  composed("Glyph", "building-blocks", "A1", ["all"]),
+  composed("Table", "data-display", "A1", ["plain", "sorted-striped", "empty"]),
+  composed("Pagination", "navigation", "A2", ["middle", "total"]),
+  composed("Breadcrumb", "navigation", "A1", ["three"]),
+  composed("Avatar", "data-display", "A1", ["initials", "square", "group"]),
+  composed("Statistic", "data-display", "A1", ["plain", "trend-down"]),
+  composed("Descriptions", "data-display", "A1", ["bordered", "plain"]),
+  composed("TimelineList", "data-display", "A1", ["mixed"]),
+  composed("Collapse", "disclosure", "A2", ["one-open", "accordion-disabled"]),
+  composed("Empty", "data-display", "A1", ["plain"]),
+  composed("Result", "data-display", "A1", ["success", "error"]),
+  composed("Textarea", "data-entry", "A2", ["count", "invalid"]),
+  composed("InputNumber", "data-entry", "A2", ["value", "at-min"]),
+  overlay("Modal", ["open"]),
+  overlay("Drawer", ["end-open"]),
+  overlay("Popover", ["open"]),
+  overlay("Tooltip", ["open"]),
+  overlay("Select", ["placeholder", "open-selected"]),
+  overlay("DropdownMenu", ["open"]),
+  overlay("Toast", ["info", "error-action"])
 ]);
 
 // src/ui/value.ts
 var DEFAULT_RANGE = { min: 0, max: 100, step: 1 };
-function warn(component, property, message) {
-  if (process.env.NODE_ENV !== "production") diagnose("SP017", component, { property, message });
+function warn(component, property, message2) {
+  if (process.env.NODE_ENV !== "production") diagnose("SP017", component, { property, message: message2 });
 }
 var tidy = (x) => Number.parseFloat(x.toPrecision(12));
 function uiRange(range, component = "UiValue") {
@@ -57,14 +89,14 @@ function uiRange(range, component = "UiValue") {
   return DEFAULT_RANGE;
 }
 function uiValue(value, range, component = "UiValue") {
-  const valid = uiRange(range, component);
-  const { min, max, step } = valid;
+  const valid2 = uiRange(range, component);
+  const { min, max, step } = valid2;
   let next = Number.isFinite(value) ? Math.min(Math.max(value, min), max) : min;
   if (step !== void 0) {
     const steps = Math.min(Math.round((next - min) / step), Math.floor(tidy((max - min) / step)));
     next = tidy(min + steps * step);
   }
-  const corrected = valid !== range || next !== value;
+  const corrected = valid2 !== range || next !== value;
   if (next !== value) warn(component, "value", `${value} is drawn as ${next}.`);
   return { value: next, fraction: round2((next - min) / (max - min)), corrected };
 }
@@ -112,13 +144,13 @@ function uiSelectedKey(items, value, fallback) {
 function uiSteps(items, current, component = "SpSteps") {
   const steps = uiItems(items, component);
   if (steps.length === 0) return [];
-  const last = steps.length - 1;
-  const at = Number.isFinite(current) ? Math.min(Math.max(Math.round(current), 0), last) : 0;
+  const last2 = steps.length - 1;
+  const at = Number.isFinite(current) ? Math.min(Math.max(Math.round(current), 0), last2) : 0;
   if (at !== current && process.env.NODE_ENV !== "production") {
     diagnose("SP017", component, { property: "current", message: `${current} is drawn as ${at}.` });
   }
   const statuses = steps.map((item, i) => item.status ?? (i < at ? "finish" : i === at ? "process" : "wait"));
-  return steps.map((item, i) => ({ key: item.key, status: statuses[i], connector: i < last ? statuses[i + 1] : null, current: i === at }));
+  return steps.map((item, i) => ({ key: item.key, status: statuses[i], connector: i < last2 ? statuses[i + 1] : null, current: i === at }));
 }
 
 // src/ui/keyboard.ts
@@ -127,12 +159,12 @@ function direction(key, orientation, dir) {
   const forward = key === "ArrowRight" ? 1 : key === "ArrowLeft" ? -1 : 0;
   return dir === "rtl" ? -forward : forward;
 }
-function uiRovingKey(state, key, orientation, dir) {
-  const { index, count, disabled } = state;
-  const enabled = (i2) => disabled[i2] !== true;
+function uiRovingKey(state2, key, orientation, dir) {
+  const { index, count, disabled } = state2;
+  const enabled2 = (i2) => disabled[i2] !== true;
   if (key === "Home" || key === "End") {
     const step2 = key === "Home" ? 1 : -1;
-    for (let n = 0, i2 = key === "Home" ? 0 : count - 1; n < count; n++, i2 += step2) if (enabled(i2)) return i2;
+    for (let n = 0, i2 = key === "Home" ? 0 : count - 1; n < count; n++, i2 += step2) if (enabled2(i2)) return i2;
     return index;
   }
   const step = direction(key, orientation, dir);
@@ -140,7 +172,7 @@ function uiRovingKey(state, key, orientation, dir) {
   let i = index < 0 || index >= count ? step > 0 ? -1 : count : index;
   for (let n = 0; n < count; n++) {
     i = ((i + step) % count + count) % count;
-    if (enabled(i)) return i;
+    if (enabled2(i)) return i;
   }
   return index;
 }
@@ -198,13 +230,6 @@ function uiFrameOutline(kind) {
   };
 }
 
-// src/ui/names.ts
-function uiRequireName(component, text2, label) {
-  if (process.env.NODE_ENV === "production") return;
-  if (text2?.trim() || label?.trim()) return;
-  diagnose("SP018", component, { property: "label" });
-}
-
 // src/ui/tokens.ts
 var UI_TOKEN_DEFAULTS = /* @__PURE__ */ Object.freeze({
   frame: "css",
@@ -212,11 +237,14 @@ var UI_TOKEN_DEFAULTS = /* @__PURE__ */ Object.freeze({
   controlHeight: Object.freeze({ sm: 24, md: 32, lg: 40 }),
   radius: 2,
   focusWidth: 2,
-  tone: Object.freeze({ selected: 3, primary: 2, danger: 4, disabled: 1, alertError: 1 })
+  tone: Object.freeze({ selected: 3, primary: 2, danger: 4, disabled: 1, alertError: 1 }),
+  backdrop: 2,
+  rowTone: 1
 });
 var MIN_HEIGHT = 24;
 var MIN_FOCUS = 2;
 var within = (value, lo, hi, fallback) => Number.isFinite(value) ? Math.min(Math.max(value, lo), hi) : fallback;
+var level = (value, fallback) => value === void 0 ? fallback : Math.round(within(value, 1, 4, fallback));
 function resolveUiTokens(ground) {
   const ui = ground.ui ?? UI_TOKEN_DEFAULTS;
   const inked = ui.frame === "inked" && ground.tonalMechanism === "hatch";
@@ -231,7 +259,9 @@ function resolveUiTokens(ground) {
     },
     radius: within(ui.radius, 0, Infinity, 2),
     focusWidth: within(ui.focusWidth, MIN_FOCUS, Infinity, 2),
-    tone: ui.tone
+    tone: ui.tone,
+    backdrop: level(ui.backdrop, 2),
+    rowTone: level(ui.rowTone, 1)
   };
 }
 
@@ -247,10 +277,10 @@ function family(gap, angle) {
   const height = Math.abs(cos) < EPSILON ? lines * gap : lines * gap / Math.abs(cos);
   const offset = (x, y) => -sin * x + cos * y;
   const corners = [offset(0, 0), offset(width, 0), offset(0, height), offset(width, height)];
-  const first = Math.ceil(Math.min(...corners) / gap - 0.5);
-  const last = Math.floor(Math.max(...corners) / gap - 0.5);
+  const first2 = Math.ceil(Math.min(...corners) / gap - 0.5);
+  const last2 = Math.floor(Math.max(...corners) / gap - 0.5);
   const strokes = [];
-  for (let k = first; k <= last; k++) {
+  for (let k = first2; k <= last2; k++) {
     const c = (k + 0.5) * gap;
     const at = (t) => ({ x: -sin * c + cos * t, y: cos * c + sin * t, t });
     const hits = [
@@ -260,11 +290,11 @@ function family(gap, angle) {
     const from = hits[0];
     const to = hits.at(-1);
     if (!from || !to || to.t - from.t < EPSILON * 1e3) continue;
-    const clamp = (v, hi) => round2(Math.min(Math.max(v, 0), hi));
+    const clamp2 = (v, hi) => round2(Math.min(Math.max(v, 0), hi));
     const w = round2(width);
     const h = round2(height);
     strokes.push({
-      d: `M${clamp(from.x, w)},${clamp(from.y, h)}L${clamp(to.x, w)},${clamp(to.y, h)}`,
+      d: `M${clamp2(from.x, w)},${clamp2(from.y, h)}L${clamp2(to.x, w)},${clamp2(to.y, h)}`,
       role: "ornament",
       part: "ink"
     });
@@ -278,75 +308,264 @@ function uiToneTile(spec) {
   return layers;
 }
 
-// src/ui/view-kit.ts
-function clean(attrs) {
-  const out = {};
-  for (const [name, value] of Object.entries(attrs)) if (value !== void 0 && value !== false) out[name] = value;
-  return out;
-}
-var el = (tag, attrs, children = [], bind) => ({
-  tag,
-  attrs: clean(attrs),
-  children,
-  ...bind ? { bind } : {}
-});
-var text = (value) => ({ text: value });
-var slot = (name) => ({ slot: name });
-function root(slug, props, r, attrs = {}) {
-  return {
-    class: ["sp-ui", `sp-${slug}`, `sp-ground-${r.ground}`, props.className].filter(Boolean).join(" "),
-    "data-ground": r.ground,
-    "data-substrate": r.substrate,
-    "data-mode": r.mode,
-    "data-size": r.size,
-    "data-frame": String(r.frame),
-    ...attrs
+// src/ui/pages.ts
+function warn2(component, property, message2) {
+  if (process.env.NODE_ENV !== "production") diagnose("SP017", component, { property, message: message2 });
+}
+function uiPageWindow(count, current, siblings) {
+  const first2 = Math.max(2, current - siblings);
+  const last2 = Math.min(count - 1, current + siblings);
+  const pages = [1];
+  if (first2 > 2) pages.push("start-gap");
+  for (let page2 = first2; page2 <= last2; page2++) pages.push(page2);
+  if (last2 < count - 1) pages.push("end-gap");
+  if (count > 1) pages.push(count);
+  return pages;
+}
+function uiPagination(total, pageSize, current, component = "SpPagination") {
+  let corrected = false;
+  if (!(Number.isInteger(total) && total >= 0)) {
+    warn2(component, "total", `${total} is drawn as 0.`);
+    [total, corrected] = [0, true];
+  }
+  if (!(Number.isInteger(pageSize) && pageSize >= 1)) {
+    warn2(component, "pageSize", `${pageSize} is drawn as 10.`);
+    [pageSize, corrected] = [10, true];
+  }
+  const count = Math.max(1, Math.ceil(total / pageSize));
+  const page2 = Number.isFinite(current) ? Math.min(Math.max(Math.round(current), 1), count) : 1;
+  if (page2 !== current) {
+    warn2(component, "current", `${current} is drawn as ${page2}.`);
+    corrected = true;
+  }
+  return { count, current: page2, start: total ? (page2 - 1) * pageSize + 1 : 0, end: Math.min(total, page2 * pageSize), corrected };
+}
+
+// src/ui/number.ts
+function warn3(component, property, message2) {
+  if (process.env.NODE_ENV !== "production") diagnose("SP017", component, { property, message: message2 });
+}
+var tidy2 = (x) => Number.parseFloat(x.toPrecision(12));
+function valid(range, component) {
+  const drop = (property, value, as) => {
+    warn3(component, property, `${value} is ${as}.`);
+    return void 0;
   };
+  let min = range.min !== void 0 && !Number.isFinite(range.min) ? drop("min", range.min, "ignored") : range.min;
+  let max = range.max !== void 0 && !Number.isFinite(range.max) ? drop("max", range.max, "ignored") : range.max;
+  if (min !== void 0 && max !== void 0 && min > max) min = max = drop("min", `The bounds ${min}..${max}`, "ignored");
+  const { step: s, precision: p } = range;
+  const step = s !== void 0 && !(Number.isFinite(s) && s > 0) ? drop("step", s, "drawn as 1") ?? 1 : s;
+  const precision = p !== void 0 && !(Number.isInteger(p) && p >= 0 && p <= 15) ? drop("precision", p, "ignored") : p;
+  return { min, max, step, precision };
 }
-var frame = (kind) => el("span", { part: "sp-frame", "data-kind": kind, "aria-hidden": "true" });
-var tone = (value, kind) => el("span", { part: "sp-tone", "data-tone": value, "data-kind": kind, "aria-hidden": "true" });
-var UI_GLYPHS = Object.freeze({
-  tick: "M3.5,8.5L6.5,11.5L12.5,4.5",
-  dash: "M4,8H12",
-  cross: "M4.5,4.5L11.5,11.5M11.5,4.5L4.5,11.5",
-  warning: "M8,2.5L14.5,13.5H1.5Z M8,6.5V9.5 M8,11.5V11.5",
-  /** A radio's selection: filled by ui.css. */
-  dot: "M11,8A3,3 0 1,1 5,8A3,3 0 1,1 11,8Z",
-  /** A Rate mark (C-2). */
-  lozenge: "M8,1.5L14.5,8L8,14.5L1.5,8Z",
-  info: "M14.5,8A6.5,6.5 0 1,1 1.5,8A6.5,6.5 0 1,1 14.5,8Z M8,7.5V11.5 M8,4.75V4.75"
-});
-var glyph = (name) => el("svg", { part: "sp-mark", "data-glyph": name, viewBox: "0 0 16 16", "aria-hidden": "true" }, [el("path", { d: UI_GLYPHS[name] })]);
-var sr = (value) => el("span", { class: "sp-ui-sr" }, [text(value)]);
-var baseOf = (props) => props.id ?? props.name;
-function nativeInput(type, attrs) {
-  return el("input", { type, class: "sp-ui-native", ...attrs }, [], "native");
+function clamp(value, { min, max, precision }) {
+  let next = value;
+  if (min !== void 0) next = Math.max(min, next);
+  if (max !== void 0) next = Math.min(max, next);
+  if (precision !== void 0) next = Math.round(tidy2(next * 10 ** precision)) / 10 ** precision;
+  return tidy2(next);
+}
+function uiNumberValue(value, range, component = "SpInputNumber") {
+  const r = valid(range, component);
+  if (value === null) return { value: null, corrected: false, atMin: false, atMax: false, range: r };
+  const next = Number.isFinite(value) ? clamp(value, r) : clamp(r.min ?? 0, r);
+  if (next !== value) warn3(component, "value", `${value} is drawn as ${next}.`);
+  return { value: next, corrected: next !== value, atMin: r.min !== void 0 && next <= r.min, atMax: r.max !== void 0 && next >= r.max, range: r };
+}
+function uiNumberStep(value, direction2, range, component = "SpInputNumber") {
+  const r = valid(range, component);
+  const base = value !== null && Number.isFinite(value) ? value : r.min ?? 0;
+  return clamp(base + direction2 * (r.step ?? 1), r);
+}
+
+// src/ui/initials.ts
+function uiInitials(name) {
+  const words = (name ?? "").replace(/-/g, " ").split(/\s+/).filter(Boolean);
+  return words.slice(0, 2).map((word) => [...word][0].toUpperCase()).join("") || "?";
+}
+
+// src/ui/listbox.ts
+function seek(state2, from, step) {
+  for (let i = from; i >= 0 && i < state2.count; i += step) if (state2.disabled[i] !== true) return i;
+  return -1;
+}
+var first = (s) => seek(s, 0, 1);
+var last = (s) => seek(s, s.count - 1, -1);
+var enabled = (s, i) => i >= 0 && i < s.count && s.disabled[i] !== true;
+function arrow(state2, step, wrap) {
+  const { active, count } = state2;
+  if (active < 0 || active >= count) return step > 0 ? first(state2) : last(state2);
+  const next = seek(state2, active + step, step);
+  if (next >= 0) return next;
+  return wrap ? step > 0 ? first(state2) : last(state2) : active;
+}
+function page(state2, step) {
+  const target = Math.min(Math.max((state2.active < 0 ? 0 : state2.active) + 10 * step, 0), state2.count - 1);
+  const found = seek(state2, target, step);
+  return found >= 0 ? found : seek(state2, target, step > 0 ? -1 : 1);
+}
+function uiListKey(state2, key, kind) {
+  const { active } = state2;
+  const keep = (i) => i < 0 ? active : i;
+  if (!state2.open) {
+    if (key === "Home") return { active: keep(first(state2)), intent: "open" };
+    if (key === "End") return { active: keep(last(state2)), intent: "open" };
+    if (kind === "menu" && key === "ArrowUp") return { active: keep(last(state2)), intent: "open" };
+    if (["ArrowDown", "ArrowUp", "Enter", " "].includes(key)) {
+      const start = kind === "listbox" && enabled(state2, active) ? active : first(state2);
+      return { active: keep(start), intent: "open" };
+    }
+    return { active };
+  }
+  switch (key) {
+    case "ArrowDown":
+      return { active: keep(arrow(state2, 1, kind === "menu")) };
+    case "ArrowUp":
+      return { active: keep(arrow(state2, -1, kind === "menu")) };
+    case "Home":
+      return { active: keep(first(state2)) };
+    case "End":
+      return { active: keep(last(state2)) };
+    case "PageDown":
+    case "PageUp":
+      return kind === "listbox" ? { active: keep(page(state2, key === "PageDown" ? 1 : -1)) } : { active };
+    case "Enter":
+    case " ":
+      return { active, intent: enabled(state2, active) ? "select" : "close" };
+    case "Tab":
+      return { active, intent: kind === "listbox" && enabled(state2, active) ? "select" : "close" };
+    case "Escape":
+      return { active, intent: "close" };
+    default:
+      return { active };
+  }
+}
+function uiTypeahead(labels, disabled, buffer, from) {
+  const typed = buffer.toLowerCase();
+  if (!typed) return -1;
+  const single = [...typed].every((c) => c === typed[0]);
+  const prefix = single ? typed[0] : typed;
+  const count = labels.length;
+  const start = single ? from + 1 : Math.max(from, 0);
+  for (let n = 0; n < count; n++) {
+    const i = ((start + n) % count + count) % count;
+    if (disabled[i] !== true && labels[i].trim().toLowerCase().startsWith(prefix)) return i;
+  }
+  return -1;
+}
+
+// src/ui/place.ts
+var OPPOSITE = { top: "bottom", bottom: "top", start: "end", end: "start" };
+var shift = (at, extent, size, padding) => Math.max(padding, Math.min(at, size - padding - extent));
+function uiPlace(input) {
+  const { anchor: a, floating: f, viewport: v, align, offset, padding, dir } = input;
+  const vertical = (side2) => side2 === "top" || side2 === "bottom";
+  const isLeft = (side2) => side2 === "start" === (dir === "ltr");
+  const main = (side2) => {
+    if (side2 === "bottom") return a.y + a.height + offset;
+    if (side2 === "top") return a.y - offset - f.height;
+    return isLeft(side2) ? a.x - offset - f.width : a.x + a.width + offset;
+  };
+  const fits = (side2) => {
+    const at = main(side2);
+    const [extent, size] = vertical(side2) ? [f.height, v.height] : [f.width, v.width];
+    return at >= padding && at + extent <= size - padding;
+  };
+  const side = !fits(input.side) && fits(OPPOSITE[input.side]) ? OPPOSITE[input.side] : input.side;
+  if (vertical(side)) {
+    const fromLeft = align === "center" ? null : align === "start" === (dir === "ltr");
+    const x = fromLeft === null ? a.x + (a.width - f.width) / 2 : fromLeft ? a.x : a.x + a.width - f.width;
+    return { x: round2(shift(x, f.width, v.width, padding)), y: round2(main(side)), side, align };
+  }
+  const y = align === "center" ? a.y + (a.height - f.height) / 2 : align === "start" ? a.y : a.y + a.height - f.height;
+  return { x: round2(main(side)), y: round2(shift(y, f.height, v.height, padding)), side, align };
+}
+
+// src/ui/anchor.ts
+function uiAnchor(anchor, floating, options) {
+  const view = floating.ownerDocument?.defaultView;
+  if (!view) return () => {
+  };
+  const place = () => {
+    const { width, height } = floating.getBoundingClientRect();
+    const at = uiPlace({
+      anchor: anchor.getBoundingClientRect(),
+      floating: { width, height },
+      viewport: { width: view.innerWidth, height: view.innerHeight },
+      side: options.side,
+      align: options.align,
+      offset: options.offset ?? 6,
+      padding: options.padding ?? 8,
+      dir: anchor.closest("[dir]")?.getAttribute("dir") === "rtl" ? "rtl" : "ltr"
+    });
+    floating.style.setProperty("--sp-ui-x", `${at.x}px`);
+    floating.style.setProperty("--sp-ui-y", `${at.y}px`);
+    floating.setAttribute("data-side", at.side);
+  };
+  place();
+  view.addEventListener("scroll", place, { capture: true, passive: true });
+  view.addEventListener("resize", place);
+  const sized = view.ResizeObserver ? new view.ResizeObserver(place) : void 0;
+  sized?.observe(anchor);
+  sized?.observe(floating);
+  return () => {
+    view.removeEventListener("scroll", place, { capture: true });
+    view.removeEventListener("resize", place);
+    sized?.disconnect();
+  };
+}
+
+// src/ui/overlay.ts
+function showing(element) {
+  try {
+    return element.matches(":popover-open");
+  } catch {
+    return false;
+  }
+}
+function uiOverlaySync(element, kind, open) {
+  if (kind === "popover") {
+    if (typeof element.showPopover !== "function") return;
+    if (open !== showing(element)) {
+      if (open) element.showPopover();
+      else element.hidePopover?.();
+    }
+    return;
+  }
+  if (open && !element.open) {
+    if (kind === "modal") element.showModal?.();
+    else element.show?.();
+  } else if (!open && element.open) element.close?.();
 }
 
 // src/ui/view.ts
 var FRAME_SLOTS = 6;
 function resolveUi(props, env) {
-  const { provider = {}, cell = {} } = env;
-  const ground = props.ground ?? cell.ground ?? provider.ground ?? DEFAULTS.ground;
+  const { provider = {}, cell: cell2 = {} } = env;
+  const ground = props.ground ?? cell2.ground ?? provider.ground ?? DEFAULTS.ground;
   return {
     ground: typeof ground === "string" ? ground : ground.name,
-    substrate: props.substrate ?? cell.substrate ?? provider.substrate ?? DEFAULTS.substrate,
-    mode: env.forcedPrecision ? "precision" : props.mode ?? cell.mode ?? provider.mode ?? DEFAULTS.mode,
+    substrate: props.substrate ?? cell2.substrate ?? provider.substrate ?? DEFAULTS.substrate,
+    mode: env.forcedPrecision ? "precision" : props.mode ?? cell2.mode ?? provider.mode ?? DEFAULTS.mode,
     size: props.size ?? "md",
-    frame: uiFrameVariant(props.seed, props.id, FRAME_SLOTS)
+    frame: uiFrameVariant(props.seed, props.id, FRAME_SLOTS),
+    // Colours are not mode: a forced precision leaves them as resolved (REQ-468).
+    palette: paletteStyle(resolvePalette(provider.palette, cell2.palette, props.palette))
   };
 }
 function uiButtonView(props, r, content) {
   uiRequireName("SpButton", content.text, props.label);
   const variant = props.variant ?? "default";
-  const link = props.href !== void 0;
+  const href = safeHref(props.href, "SpButton");
+  const link = href !== void 0;
   const toned = props.disabled ? "disabled" : variant === "default" ? void 0 : variant;
   return el(
     link ? "a" : "button",
     root("button", props, r, {
       id: props.id,
       type: link ? void 0 : props.type ?? "button",
-      href: link && !props.disabled ? props.href : void 0,
+      href: link && !props.disabled ? href : void 0,
       disabled: !link && props.disabled === true,
       "aria-disabled": link && props.disabled ? "true" : void 0,
       "aria-label": props.label,
@@ -361,14 +580,14 @@ function uiButtonView(props, r, content) {
     ]
   );
 }
-function uiInputView(props, r, state) {
+function uiInputView(props, r, state2) {
   const base = baseOf(props);
-  const message = props.message ? props.message : void 0;
-  const messageId = message && base ? `${base}--message` : void 0;
+  const message2 = props.message ? props.message : void 0;
+  const messageId = message2 && base ? `${base}--message` : void 0;
   return el("span", root("input", props, r, { "data-invalid": props.invalid ? "true" : void 0 }), [
     el("span", { class: "sp-ui-box" }, [
       frame("control"),
-      ...state.prefix ? [el("span", { class: "sp-ui-affix", "data-slot": "prefix" }, [slot("prefix")])] : [],
+      ...state2.prefix ? [el("span", { class: "sp-ui-affix", "data-slot": "prefix" }, [slot("prefix")])] : [],
       el(
         "input",
         {
@@ -376,7 +595,7 @@ function uiInputView(props, r, state) {
           id: props.id,
           type: props.type ?? "text",
           name: props.name,
-          value: state.value,
+          value: state2.value,
           placeholder: props.placeholder,
           disabled: props.disabled === true,
           readonly: props.readOnly === true,
@@ -387,10 +606,10 @@ function uiInputView(props, r, state) {
         [],
         "native"
       ),
-      ...state.suffix ? [el("span", { class: "sp-ui-affix", "data-slot": "suffix" }, [slot("suffix")])] : [],
+      ...state2.suffix ? [el("span", { class: "sp-ui-affix", "data-slot": "suffix" }, [slot("suffix")])] : [],
       ...props.invalid ? [glyph("warning")] : []
     ]),
-    ...message ? [el("span", { class: "sp-ui-message", id: messageId }, [text(message)])] : []
+    ...message2 ? [el("span", { class: "sp-ui-message", id: messageId }, [text(message2)])] : []
   ]);
 }
 function nativeCheckbox(props, checked, role) {
@@ -401,16 +620,16 @@ function nativeCheckbox(props, checked, role) {
     "native"
   );
 }
-function uiCheckboxView(props, r, state) {
+function uiCheckboxView(props, r, state2) {
   return el("label", root("checkbox", props, r, { "data-indeterminate": props.indeterminate ? "true" : void 0 }), [
-    nativeCheckbox(props, state.checked),
+    nativeCheckbox(props, state2.checked),
     el("span", { class: "sp-ui-box", "aria-hidden": "true" }, [frame("box"), tone("selected", "box"), glyph("tick"), glyph("dash")]),
     el("span", { class: "sp-ui-label" }, [text(props.label)])
   ]);
 }
-function uiSwitchView(props, r, state) {
+function uiSwitchView(props, r, state2) {
   return el("label", root("switch", props, r), [
-    nativeCheckbox(props, state.checked, "switch"),
+    nativeCheckbox(props, state2.checked, "switch"),
     el("span", { class: "sp-ui-track", "aria-hidden": "true" }, [frame("pill"), tone("selected", "pill"), el("span", { part: "sp-knob" })]),
     el("span", { class: "sp-ui-label" }, [text(props.label)])
   ]);
@@ -426,7 +645,7 @@ function uiCardView(props, r, slots) {
       frame("card"),
       ...header ? [
         el("div", { class: "sp-ui-card-header" }, [
-          ...titled ? [el(`h${props.headingLevel ?? 3}`, { class: "sp-ui-card-title", id: titleId }, [text(props.title)])] : [],
+          ...titled ? [el(headingTag(props.headingLevel, "SpCard"), { class: "sp-ui-card-title", id: titleId }, [text(props.title)])] : [],
           ...slots.extra ? [el("div", { class: "sp-ui-card-extra" }, [slot("extra")])] : []
         ]),
         el("span", { part: "sp-rule", "aria-hidden": "true" })
@@ -454,11 +673,11 @@ function uiDividerView(props, r) {
 
 // src/ui/view-b2.ts
 var heighten = () => el("span", { part: "sp-heighten", "aria-hidden": "true" });
-var legend = (label, forSight) => el("legend", { class: forSight ? "sp-ui-legend" : "sp-ui-legend sp-ui-sr" }, [text(label)]);
+var legend = (label2, forSight) => el("legend", { class: forSight ? "sp-ui-legend" : "sp-ui-legend sp-ui-sr" }, [text(label2)]);
 var groupName = (props) => props.name ?? (props.id ? `${props.id}--value` : void 0);
-function uiRadioGroupView(props, r, state) {
+function uiRadioGroupView(props, r, state2) {
   const items = uiItems(props.items, "SpRadioGroup");
-  const value = uiSelectedKey(items, state.value, "none");
+  const value = uiSelectedKey(items, state2.value, "none");
   return el("fieldset", root("radio-group", props, r, { id: props.id, "data-orientation": props.orientation ?? "vertical" }), [
     legend(props.label, true),
     ...items.map(
@@ -476,9 +695,9 @@ function uiRadioGroupView(props, r, state) {
     )
   ]);
 }
-function uiSegmentedView(props, r, state) {
+function uiSegmentedView(props, r, state2) {
   const items = uiItems(props.items, "SpSegmented");
-  const value = uiSelectedKey(items, state.value, "first");
+  const value = uiSelectedKey(items, state2.value, "first");
   const name = groupName(props);
   return el("fieldset", root("segmented", props, r, { id: props.id, "data-block": props.block ? "true" : void 0 }), [
     legend(props.label, false),
@@ -497,9 +716,9 @@ function uiSegmentedView(props, r, state) {
     ])
   ]);
 }
-function uiTabsView(props, r, state) {
+function uiTabsView(props, r, state2) {
   const items = uiItems(props.items, "SpTabs");
-  const value = uiSelectedKey(items, state.value, "first");
+  const value = uiSelectedKey(items, state2.value, "first");
   const vertical = props.orientation === "vertical";
   const id = props.id;
   return el("div", root("tabs", props, r, { id, "data-orientation": vertical ? "vertical" : "horizontal" }), [
@@ -543,11 +762,11 @@ function uiTabPanelView(props, tabs) {
     [slot("content")]
   );
 }
-function uiSliderView(props, r, state) {
-  const valid = uiRange({ min: props.min ?? 0, max: props.max ?? 100, step: props.step ?? 1 }, "SpSlider");
-  const { value, fraction } = uiValue(state.value, valid, "SpSlider");
-  const span = valid.max - valid.min;
-  const marks = (props.marks ?? []).filter((m) => Number.isFinite(m) && m >= valid.min && m <= valid.max);
+function uiSliderView(props, r, state2) {
+  const valid2 = uiRange({ min: props.min ?? 0, max: props.max ?? 100, step: props.step ?? 1 }, "SpSlider");
+  const { value, fraction } = uiValue(state2.value, valid2, "SpSlider");
+  const span = valid2.max - valid2.min;
+  const marks = (props.marks ?? []).filter((m) => Number.isFinite(m) && m >= valid2.min && m <= valid2.max);
   return el("label", root("slider", props, r, { style: `--sp-ui-fraction: ${fraction}`, "data-disabled": props.disabled ? "true" : void 0 }), [
     el("span", { class: "sp-ui-label" }, [text(props.label)]),
     el("span", { class: "sp-ui-rail" }, [
@@ -561,9 +780,9 @@ function uiSliderView(props, r, state) {
           class: "sp-ui-range",
           id: props.id,
           name: props.name,
-          min: String(valid.min),
-          max: String(valid.max),
-          step: String(valid.step ?? 1),
+          min: String(valid2.min),
+          max: String(valid2.max),
+          step: String(valid2.step ?? 1),
           value: String(value),
           disabled: props.disabled === true
         },
@@ -575,14 +794,14 @@ function uiSliderView(props, r, state) {
       el(
         "span",
         { class: "sp-ui-scale", "aria-hidden": "true" },
-        marks.map((m) => el("span", { class: "sp-ui-scale-mark", style: `--sp-ui-at: ${round2((m - valid.min) / span)}` }, [text(String(m))]))
+        marks.map((m) => el("span", { class: "sp-ui-scale-mark", style: `--sp-ui-at: ${round2((m - valid2.min) / span)}` }, [text(String(m))]))
       )
     ] : []
   ]);
 }
-function uiRateView(props, r, state) {
+function uiRateView(props, r, state2) {
   const count = uiRateCount(props.count);
-  const { value } = uiValue(state.value, { min: 0, max: count, step: 1 }, "SpRate");
+  const { value } = uiValue(state2.value, { min: 0, max: count, step: 1 }, "SpRate");
   const name = groupName(props);
   const readOnly = props.readOnly === true;
   return el(
@@ -608,7 +827,7 @@ function uiRateView(props, r, state) {
 }
 
 // src/ui/view-b3.ts
-var closeButton = (label) => el("button", { type: "button", class: "sp-ui-close", "aria-label": label }, [glyph("cross")], "close");
+var closeButton = (label2) => el("button", { type: "button", class: "sp-ui-close", "aria-label": label2 }, [glyph("cross")], "close");
 function uiStepsView(props, r) {
   const steps = uiSteps(props.items, props.current);
   const titles = new Map(props.items.map((item) => [item.key, item]));
@@ -631,13 +850,13 @@ function uiStepsView(props, r) {
   );
 }
 function uiTagView(props, r, content) {
-  const level = String(props.tone ?? 1);
-  const label = props.closeLabel ?? (content.text ? `Remove ${content.text}` : "Remove");
-  return el("span", root("tag", props, r, { id: props.id, "data-tone": level }), [
+  const level2 = String(props.tone ?? 1);
+  const label2 = props.closeLabel ?? (content.text ? `Remove ${content.text}` : "Remove");
+  return el("span", root("tag", props, r, { id: props.id, "data-tone": level2 }), [
     frame("control"),
-    tone(level, "control"),
+    tone(level2, "control"),
     el("span", { class: "sp-ui-label sp-ui-plate" }, [slot("content")]),
-    ...props.closable ? [closeButton(label)] : []
+    ...props.closable ? [closeButton(label2)] : []
   ]);
 }
 function uiBadgeView(props, r, content) {
@@ -684,7 +903,7 @@ function uiProgressView(props, r) {
   );
 }
 var ALERT_GLYPHS = { info: "info", success: "tick", warning: "warning", error: "cross" };
-function uiAlertView(props, r, state) {
+function uiAlertView(props, r, state2) {
   const kind = props.kind ?? "info";
   const error = kind === "error";
   return el("div", root("alert", props, r, { id: props.id, role: error || kind === "warning" ? "alert" : "status", "data-kind": kind }), [
@@ -695,7 +914,7 @@ function uiAlertView(props, r, state) {
       ...props.title ? [el("div", { class: "sp-ui-alert-title" }, [text(props.title)])] : [],
       el("div", { class: "sp-ui-alert-text" }, [slot("content")])
     ]),
-    ...state.closable ? [closeButton(props.closeLabel ?? "Close")] : []
+    ...state2.closable ? [closeButton(props.closeLabel ?? "Close")] : []
   ]);
 }
 function uiSkeletonView(props, r) {
@@ -711,6 +930,601 @@ function uiSkeletonView(props, r) {
   ]);
 }
 
-export { UI_COMPONENTS, UI_FRAME_KINDS, UI_GLYPHS, UI_PROGRESS_VIEWBOX, UI_TOKEN_DEFAULTS, resolveUi, resolveUiTokens, uiAlertView, uiBadgeView, uiButtonView, uiCardView, uiCheckboxView, uiDividerView, uiFrameOutline, uiFrameVariant, uiInputView, uiIsRovingKey, uiItems, uiProgressArc, uiProgressView, uiRadioGroupView, uiRange, uiRateCount, uiRateView, uiRequireName, uiRovingFocus, uiRovingKey, uiSegmentedView, uiSelectedKey, uiSkeletonView, uiSliderView, uiSteps, uiStepsView, uiSwitchView, uiTabPanelView, uiTabsView, uiTagView, uiToneTile, uiValue };
+// src/ui/view-composed.ts
+function warn4(component, property, message2) {
+  if (process.env.NODE_ENV !== "production") diagnose("SP017", component, { property, message: message2 });
+}
+var heighten2 = () => el("span", { part: "sp-heighten", "aria-hidden": "true" });
+var heading = (level2, component, attrs, title) => el(headingTag(level2, component), attrs, [text(title)]);
+var maybeText = (value) => value === "" ? [] : [text(value)];
+function keyed(items, component) {
+  const seen = /* @__PURE__ */ new Set();
+  return items.filter((item) => {
+    if (item.key === void 0) return true;
+    if (!seen.has(item.key)) return seen.add(item.key), true;
+    if (process.env.NODE_ENV !== "production") diagnose("SP019", component, { property: "items", message: `The key "${item.key}" repeats; that item is skipped.` });
+    return false;
+  });
+}
+var IDENT = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+var UNSAFE_TAGS = /* @__PURE__ */ new Set(["script", "style", "iframe", "object", "embed", "template", "noscript"]);
+function uiSurfaceView(props, r) {
+  let tag = props.as ?? "div";
+  if (!IDENT.test(tag) || UNSAFE_TAGS.has(tag)) {
+    warn4("SpSurface", "as", `${JSON.stringify(tag)} is drawn as "div".`);
+    tag = "div";
+  }
+  let name = props.name;
+  if (name !== void 0 && !IDENT.test(name)) {
+    warn4("SpSurface", "name", `${JSON.stringify(name)} adds no class.`);
+    name = void 0;
+  }
+  const attrs = root("surface", props, r, { id: props.id });
+  if (name) attrs.class = `${attrs.class} sp-${name}`;
+  return el(tag, attrs, [
+    ...props.frame ? [frame(props.frame)] : [],
+    ...props.tone !== void 0 ? [tone(String(props.tone), props.frame ?? "box")] : [],
+    slot("content")
+  ]);
+}
+function uiGlyphView(props, r) {
+  const known = Object.hasOwn(UI_GLYPHS, props.glyph);
+  if (!known) warn4("SpGlyph", "glyph", `${JSON.stringify(props.glyph)} is not a glyph; nothing is drawn.`);
+  return el(
+    "svg",
+    root("glyph", props, r, { id: props.id, part: "sp-mark", "data-glyph": props.glyph, viewBox: "0 0 16 16", "aria-hidden": "true" }),
+    known ? [el("path", { d: UI_GLYPHS[props.glyph] })] : []
+  );
+}
+var cell = (value) => value === null || value === void 0 ? "" : String(value);
+function uiTableView(props, r) {
+  const columns = uiItems(props.columns, "SpTable");
+  const order = props.sortOrder ?? "asc";
+  const sorted = columns.find((column) => column.key === props.sortKey && column.sortable === true);
+  const rows = props.data;
+  const headers = columns.map((column) => {
+    const width = cssLength(column.width, "SpTable", "columns");
+    const title = column.title ?? column.key;
+    const active = column === sorted;
+    return el(
+      "th",
+      {
+        scope: "col",
+        "data-align": column.align,
+        "aria-sort": active ? order === "asc" ? "ascending" : "descending" : void 0,
+        style: width ? `width:${width}` : void 0
+      },
+      column.sortable ? [
+        el("button", { type: "button", class: "sp-ui-sort", "data-key": column.key }, [
+          el("span", { class: "sp-ui-label" }, [text(title)]),
+          glyph(active ? order === "asc" ? "sortUp" : "sortDown" : "sort")
+        ], "sort")
+      ] : [text(title)]
+    );
+  });
+  const body = rows.length === 0 ? [el("tr", {}, [el("td", { class: "sp-ui-table-empty", colspan: String(columns.length) }, [text(props.emptyText ?? "No data")])])] : rows.map(
+    (row2) => el(
+      "tr",
+      { "data-key": props.rowKey !== void 0 ? cell(row2[props.rowKey]) : void 0 },
+      // The text sits on a plate, so a toned row keeps the contrast of the substrate (Data Model §3.8).
+      columns.map((column) => {
+        const value = cell(row2[column.key]);
+        return el("td", { "data-align": column.align }, value === "" ? [] : [el("span", { class: "sp-ui-plate" }, [text(value)])]);
+      })
+    )
+  );
+  return el(
+    "div",
+    root("table", props, r, {
+      id: props.id,
+      "data-striped": props.striped ? "true" : void 0,
+      "data-hoverable": props.hoverable !== false ? "true" : void 0
+    }),
+    [
+      ...props.bordered !== false ? [frame("card")] : [],
+      el("div", { class: "sp-ui-table-scroll" }, [
+        el("table", { class: "sp-ui-table" }, [
+          ...props.caption ? [el("caption", {}, [text(props.caption)])] : [],
+          el("thead", {}, [el("tr", {}, headers)]),
+          el("tbody", {}, body)
+        ])
+      ])
+    ]
+  );
+}
+function uiPaginationView(props, r, state2) {
+  const { count, current, start, end } = uiPagination(props.total, props.pageSize ?? 10, state2.current);
+  const pageLabel = props.pageLabel ?? "Page";
+  const off = props.disabled === true;
+  const button = (page2, label2, disabled, content) => el("li", {}, [
+    el("button", { type: "button", class: "sp-ui-page", "data-page": String(page2), "aria-label": label2, disabled: off || disabled }, [frame("control"), ...content], "page")
+  ]);
+  const pages = uiPageWindow(count, current, props.siblings ?? 1).map(
+    (entry) => typeof entry === "string" ? el("li", { class: "sp-ui-page-gap", "aria-hidden": "true" }, [glyph("ellipsis")]) : entry === current ? el("li", {}, [
+      el("span", { class: "sp-ui-page", "aria-current": "page" }, [
+        frame("control"),
+        heighten2(),
+        el("span", { class: "sp-ui-label sp-ui-plate" }, [sr(`${pageLabel} `), text(String(entry))])
+      ])
+    ]) : button(entry, `${pageLabel} ${entry}`, false, [el("span", { class: "sp-ui-label" }, [text(String(entry))])])
+  );
+  const summary = (props.totalTemplate ?? "{start}\u2013{end} of {total}").split("{start}").join(String(start)).split("{end}").join(String(end)).split("{total}").join(String(Math.max(0, props.total || 0)));
+  return el("nav", root("pagination", props, r, { id: props.id, "aria-label": props.label ?? "Pagination", "data-disabled": off ? "true" : void 0 }), [
+    ...props.showTotal ? [el("span", { class: "sp-ui-page-total" }, [text(summary)])] : [],
+    el("ul", { class: "sp-ui-pages" }, [
+      button(current - 1, props.previousLabel ?? "Previous page", current <= 1, [glyph("chevronLeft")]),
+      ...pages,
+      button(current + 1, props.nextLabel ?? "Next page", current >= count, [glyph("chevronRight")])
+    ])
+  ]);
+}
+function uiBreadcrumbView(props, r) {
+  const items = keyed(props.items, "SpBreadcrumb");
+  return el("nav", root("breadcrumb", props, r, { id: props.id, "aria-label": props.label ?? "Breadcrumb" }), [
+    el(
+      "ol",
+      { class: "sp-ui-crumbs" },
+      items.map((item, i) => {
+        const last2 = i === items.length - 1;
+        const href = last2 ? void 0 : safeHref(item.href, "SpBreadcrumb", "items");
+        const inner = last2 ? el("span", { "aria-current": "page" }, [text(item.label)]) : href !== void 0 ? el("a", { href }, [text(item.label)]) : el("span", {}, [text(item.label)]);
+        return el("li", { class: "sp-ui-crumb" }, [inner]);
+      })
+    )
+  ]);
+}
+function uiAvatarView(props, r) {
+  const name = props.alt ?? props.name ?? props.initials;
+  uiRequireName("SpAvatar", name, void 0);
+  let size = props.pixelSize;
+  if (size !== void 0 && !(Number.isFinite(size) && size > 0)) {
+    warn4("SpAvatar", "pixelSize", `${size} is dropped.`);
+    size = void 0;
+  }
+  const square = props.shape === "square";
+  const image = props.src !== void 0;
+  return el(
+    "span",
+    root("avatar", props, r, {
+      id: props.id,
+      role: image ? void 0 : "img",
+      "aria-label": image ? void 0 : name,
+      "data-shape": square ? "square" : "circle",
+      style: size !== void 0 ? `--sp-ui-avatar-size:${Math.round(size * 100) / 100}px` : void 0
+    }),
+    [
+      frame(square ? "box" : "round"),
+      image ? el("img", { class: "sp-ui-avatar-image", src: props.src, alt: props.alt ?? props.name ?? "" }) : el("span", { class: "sp-ui-avatar-initials", "aria-hidden": "true" }, [text(props.initials ?? uiInitials(props.name))])
+    ]
+  );
+}
+function uiAvatarGroupView(props, r) {
+  return el("div", root("avatar-group", props, r, { id: props.id, role: "group", "aria-label": props.label }), [slot("content")]);
+}
+function uiStatisticView(props, r) {
+  const affix = (value) => el("span", { class: "sp-ui-statistic-affix" }, [text(value)]);
+  const up = props.trend === "up";
+  return el("div", root("statistic", props, r, { id: props.id, "data-trend": props.trend }), [
+    el("span", { class: "sp-ui-statistic-title" }, [text(props.title)]),
+    el("span", { class: "sp-ui-statistic-value" }, [
+      ...props.prefix ? [affix(props.prefix)] : [],
+      el("span", { class: "sp-ui-statistic-number" }, [text(String(props.value))]),
+      ...props.suffix ? [affix(props.suffix)] : []
+    ]),
+    ...props.trend ? [
+      el("span", { class: "sp-ui-statistic-trend", "data-trend": props.trend }, [
+        glyph(up ? "arrowUp" : "arrowDown"),
+        props.delta ? el("span", { class: "sp-ui-statistic-delta" }, [text(props.delta)]) : sr(up ? "Up" : "Down")
+      ])
+    ] : []
+  ]);
+}
+function uiDescriptionsView(props, r) {
+  let columns = props.columns ?? 3;
+  const fixed = Number.isFinite(columns) ? Math.min(6, Math.max(1, Math.round(columns))) : 3;
+  if (fixed !== columns) warn4("SpDescriptions", "columns", `${columns} is drawn as ${fixed}.`);
+  columns = fixed;
+  const titled = props.title !== void 0;
+  const titleId = titled && props.id ? `${props.id}--title` : void 0;
+  const bordered = props.bordered !== false;
+  return el(
+    "section",
+    root("descriptions", props, r, {
+      id: props.id,
+      "aria-labelledby": titleId,
+      "aria-label": titled && !titleId ? props.title : void 0,
+      "data-bordered": bordered ? "true" : void 0,
+      "data-columns": String(columns)
+    }),
+    [
+      ...bordered ? [frame("card")] : [],
+      ...titled ? [heading(props.headingLevel, "SpDescriptions", { class: "sp-ui-descriptions-title", id: titleId }, props.title)] : [],
+      el(
+        "dl",
+        {},
+        keyed(props.items, "SpDescriptions").map(
+          (item) => el("div", { class: "sp-ui-description" }, [el("dt", {}, [text(item.label)]), el("dd", {}, maybeText(item.value))])
+        )
+      )
+    ]
+  );
+}
+function uiTimelineListView(props, r) {
+  let current = false;
+  const items = keyed(props.items, "SpTimelineList").map((item) => {
+    let status = item.status ?? "done";
+    if (status === "current") {
+      if (current) {
+        warn4("SpTimelineList", "items", `A second current item, "${item.title}", is drawn as done.`);
+        status = "done";
+      }
+      current = true;
+    }
+    const mark = status === "done" ? [tone("selected", "round")] : status === "current" ? [heighten2()] : status === "error" ? [glyph("cross")] : [];
+    return el("li", { class: "sp-ui-timeline-item", "data-status": status, "aria-current": status === "current" ? "step" : void 0 }, [
+      el("span", { class: "sp-ui-timeline-mark", "aria-hidden": "true" }, [frame("round"), ...mark]),
+      el("span", { class: "sp-ui-timeline-text" }, [
+        ...item.time ? [el("span", { class: "sp-ui-timeline-time" }, [text(item.time)])] : [],
+        el("span", { class: "sp-ui-timeline-title" }, [text(item.title)]),
+        ...item.description ? [el("span", { class: "sp-ui-timeline-description" }, [text(item.description)])] : []
+      ])
+    ]);
+  });
+  return el("ol", root("timeline-list", props, r, { id: props.id, "aria-label": props.label }), items);
+}
+function uiCollapseView(props, r) {
+  return el("div", root("collapse", props, r, { id: props.id, "data-accordion": props.accordion ? "true" : void 0 }), [
+    ...props.bordered !== false ? [frame("card")] : [],
+    slot("content")
+  ]);
+}
+function uiCollapseGroup(props) {
+  if (!props.accordion) return void 0;
+  if (props.id) return `${props.id}--accordion`;
+  warn4("SpCollapse", "id", "An accordion needs an id to name its items; they open independently.");
+  return void 0;
+}
+function uiCollapseItemView(props, r, state2) {
+  return el(
+    "details",
+    root("collapse-item", props, r, { id: props.id, name: state2.group, open: state2.open, "data-disabled": props.disabled ? "true" : void 0 }),
+    [
+      // A disabled item's summary leaves the Tab order: no `disabled` attribute exists for it (REQ-522).
+      el("summary", { class: "sp-ui-collapse-summary", "aria-disabled": props.disabled ? "true" : void 0, tabindex: props.disabled ? "-1" : void 0 }, [
+        el("span", { class: "sp-ui-label" }, [text(props.title)]),
+        glyph("chevronDown")
+      ], "summary"),
+      el("div", { class: "sp-ui-collapse-body" }, [slot("content")])
+    ]
+  );
+}
+function uiEmptyView(props, r, slots) {
+  return el("div", root("empty", props, r, { id: props.id }), [
+    el("span", { class: "sp-ui-empty-tray", "aria-hidden": "true" }, [tone("1", "control"), frame("control")]),
+    el("p", { class: "sp-ui-empty-description" }, [text(props.description ?? "No data")]),
+    ...slots.extra ? [el("div", { class: "sp-ui-empty-extra" }, [slot("extra")])] : []
+  ]);
+}
+var RESULT_GLYPHS = { success: "tick", info: "info", warning: "warning", error: "cross" };
+function uiResultView(props, r, slots) {
+  const status = props.status ?? "info";
+  const alert = status === "warning" || status === "error";
+  return el("div", root("result", props, r, { id: props.id, role: alert ? "alert" : "status", "data-status": status }), [
+    el("span", { class: "sp-ui-result-mark", "aria-hidden": "true" }, [frame("round"), glyph(RESULT_GLYPHS[status])]),
+    heading(props.headingLevel, "SpResult", { class: "sp-ui-result-title" }, props.title),
+    ...props.subtitle ? [el("p", { class: "sp-ui-result-subtitle" }, [text(props.subtitle)])] : [],
+    ...slots.extra ? [el("div", { class: "sp-ui-result-extra" }, [slot("extra")])] : []
+  ]);
+}
+function message(props) {
+  const base = baseOf(props);
+  const id = props.message && base ? `${base}--message` : void 0;
+  return { id, node: props.message ? [el("span", { class: "sp-ui-message", id }, [text(props.message)])] : [] };
+}
+function uiTextareaView(props, r, state2) {
+  const said = message(props);
+  const max = props.maxLength !== void 0 && Number.isInteger(props.maxLength) && props.maxLength >= 0 ? props.maxLength : void 0;
+  return el("span", root("input sp-textarea", props, r, { "data-invalid": props.invalid ? "true" : void 0 }), [
+    el("span", { class: "sp-ui-box" }, [
+      frame("control"),
+      el(
+        "textarea",
+        {
+          class: "sp-ui-control",
+          id: props.id,
+          name: props.name,
+          rows: String(props.rows ?? 3),
+          maxlength: max !== void 0 ? String(max) : void 0,
+          placeholder: props.placeholder,
+          disabled: props.disabled === true,
+          readonly: props.readOnly === true,
+          "aria-label": props.label,
+          "aria-invalid": props.invalid ? "true" : void 0,
+          "aria-describedby": said.id
+        },
+        maybeText(state2.value),
+        "native"
+      ),
+      ...props.invalid ? [glyph("warning")] : []
+    ]),
+    ...props.showCount ? [el("span", { class: "sp-ui-count" }, [text(max !== void 0 ? `${state2.value.length} / ${max}` : String(state2.value.length))])] : [],
+    ...said.node
+  ]);
+}
+function uiInputNumberView(props, r, state2) {
+  const { value, atMin, atMax, range } = uiNumberValue(state2.value, props, "SpInputNumber");
+  const said = message(props);
+  const locked = props.disabled === true || props.readOnly === true;
+  const stepper = (direction2, label2, disabled, mark) => el("button", { type: "button", class: "sp-ui-stepper", "data-step": direction2, "aria-label": label2, tabindex: "-1", disabled: locked || disabled }, [glyph(mark)], "stepper");
+  return el("span", root("input sp-input-number", props, r, { "data-invalid": props.invalid ? "true" : void 0 }), [
+    el("span", { class: "sp-ui-box" }, [
+      frame("control"),
+      stepper("-1", props.decrementLabel ?? "Decrease", atMin, "dash"),
+      el(
+        "input",
+        {
+          class: "sp-ui-control",
+          type: "number",
+          inputmode: "decimal",
+          id: props.id,
+          name: props.name,
+          min: range.min !== void 0 ? String(range.min) : void 0,
+          max: range.max !== void 0 ? String(range.max) : void 0,
+          step: String(range.step ?? 1),
+          value: value === null ? "" : String(value),
+          placeholder: props.placeholder,
+          disabled: props.disabled === true,
+          readonly: props.readOnly === true,
+          "aria-label": props.label,
+          "aria-invalid": props.invalid ? "true" : void 0,
+          "aria-describedby": said.id
+        },
+        [],
+        "native"
+      ),
+      stepper("1", props.incrementLabel ?? "Increase", atMax, "plus"),
+      ...props.invalid ? [glyph("warning")] : []
+    ]),
+    ...said.node
+  ]);
+}
+
+// src/ui/view-overlay.ts
+var heighten3 = () => el("span", { part: "sp-heighten", "aria-hidden": "true" });
+var state = (open) => open ? "open" : "closed";
+var style = (property, value) => value !== void 0 ? `${property}:${value}` : void 0;
+var label = (value, plate) => el("span", { class: plate ? "sp-ui-label sp-ui-plate" : "sp-ui-label" }, [text(value)]);
+function uiTriggerView() {
+  return el("span", { class: "sp-ui-trigger" }, [slot("trigger")], "trigger");
+}
+var CONTROLS = {
+  dialog: ["dialog", "dialog"],
+  popover: ["dialog", "popover"],
+  menu: ["menu", "menu"]
+};
+function uiTriggerAria(kind, id, open) {
+  if (kind === "tooltip") return id ? { "aria-describedby": `${id}--tooltip` } : {};
+  const [popup, part] = CONTROLS[kind];
+  return { "aria-haspopup": popup, "aria-expanded": String(open), ...id ? { "aria-controls": `${id}--${part}` } : {} };
+}
+function uiSelectItems(items) {
+  return uiItems(
+    items.map((item) => typeof item === "string" ? { key: item, label: item } : item),
+    "SpSelect"
+  );
+}
+var actionable = (entry) => entry.type === void 0 || entry.type === "item";
+function uiMenuItems(entries) {
+  return uiItems(entries, "SpDropdownMenu").filter(actionable).map((entry) => ({ key: entry.key, label: entry.label, ...entry.disabled ? { disabled: true } : {} }));
+}
+function uiToastDuration(duration, toaster) {
+  const ms = duration ?? toaster ?? 5e3;
+  if (ms === Infinity || Number.isFinite(ms) && ms >= 1e3) return ms;
+  if (process.env.NODE_ENV !== "production") diagnose("SP017", "SpToast", { property: "duration", message: `${ms} ms is drawn as 1000 ms.` });
+  return 1e3;
+}
+function dialog(component, slug, props, r, open, footer, attrs) {
+  uiRequireName(component, props.title, props.label);
+  const { id, title } = props;
+  const titleId = title !== void 0 && id ? `${id}--title` : void 0;
+  const descriptionId = props.description && id ? `${id}--description` : void 0;
+  const closable = props.closable !== false;
+  const header = title !== void 0 || closable;
+  return el(
+    "dialog",
+    root(slug, props, r, {
+      id: id ? `${id}--dialog` : void 0,
+      "aria-labelledby": titleId,
+      "aria-label": titleId ? void 0 : title ?? props.label,
+      "aria-describedby": descriptionId,
+      "data-state": state(open),
+      ...attrs
+    }),
+    [
+      frame("card"),
+      ...header ? [
+        el("div", { class: "sp-ui-overlay-header" }, [
+          ...title !== void 0 ? [el("h2", { class: "sp-ui-overlay-title", id: titleId }, [text(title)])] : [],
+          ...closable ? [iconClose(props.closeLabel ?? "Close")] : []
+        ]),
+        el("span", { part: "sp-rule", "aria-hidden": "true" })
+      ] : [],
+      ...props.description ? [el("p", { class: "sp-ui-overlay-description", id: descriptionId }, [text(props.description)])] : [],
+      el("div", { class: "sp-ui-overlay-body" }, [slot("content")]),
+      ...footer ? [el("div", { class: "sp-ui-overlay-footer" }, [slot("footer")])] : []
+    ],
+    "dialog"
+  );
+}
+function uiModalView(props, r, s, slots) {
+  return dialog("SpModal", "modal", props, r, s.open, slots.footer === true, {
+    style: style("--sp-ui-overlay-width", cssLength(props.width, "SpModal", "width"))
+  });
+}
+function uiDrawerView(props, r, s, slots) {
+  return dialog("SpDrawer", "drawer", props, r, s.open, slots.footer === true, {
+    "data-side": props.side ?? "end",
+    style: style("--sp-ui-drawer-extent", cssLength(props.extent, "SpDrawer", "extent"))
+  });
+}
+function uiPopoverView(props, r, s) {
+  uiRequireName("SpPopover", props.title, props.label);
+  const { id, title } = props;
+  const titleId = title !== void 0 && id ? `${id}--title` : void 0;
+  const header = title !== void 0 || props.closable === true;
+  return el(
+    "div",
+    root("popover", props, r, {
+      id: id ? `${id}--popover` : void 0,
+      popover: "auto",
+      role: "dialog",
+      "aria-labelledby": titleId,
+      "aria-label": titleId ? void 0 : title ?? props.label,
+      "data-state": state(s.open),
+      style: style("--sp-ui-overlay-width", cssLength(props.width, "SpPopover", "width"))
+    }),
+    [
+      frame("card"),
+      ...header ? [
+        el("div", { class: "sp-ui-overlay-header" }, [
+          ...title !== void 0 ? [el("div", { class: "sp-ui-overlay-title", id: titleId }, [text(title)])] : [],
+          ...props.closable ? [iconClose(props.closeLabel ?? "Close")] : []
+        ])
+      ] : [],
+      el("div", { class: "sp-ui-overlay-body" }, [slot("content")])
+    ],
+    "popover"
+  );
+}
+function uiTooltipView(props, r, s) {
+  return el(
+    "div",
+    root("tooltip", props, r, { id: props.id ? `${props.id}--tooltip` : void 0, popover: "manual", role: "tooltip", "data-state": state(s.open) }),
+    [frame("control"), el("span", { class: "sp-ui-tooltip-text" }, [text(props.text)])],
+    "popover"
+  );
+}
+function uiSelectView(props, r, s) {
+  uiRequireName("SpSelect", void 0, props.label);
+  const items = uiSelectItems(props.items);
+  const value = uiSelectedKey(items, s.value, "none");
+  const chosen = items.find((item) => item.key === value);
+  const { id } = props;
+  const optionId = (key) => id ? `${id}--option-${key}` : void 0;
+  const active = s.open ? items.find((item) => item.key === s.active && item.disabled !== true) : void 0;
+  const options = items.map((item) => {
+    const isActive = item === active;
+    const isChosen = item === chosen;
+    return el(
+      "div",
+      {
+        class: "sp-ui-option",
+        role: "option",
+        id: optionId(item.key),
+        "data-key": item.key,
+        "aria-selected": String(isChosen),
+        "aria-disabled": item.disabled ? "true" : void 0
+      },
+      [...isActive ? [heighten3()] : [], label(item.label, isActive), ...isChosen ? [glyph("tick")] : []],
+      "option"
+    );
+  });
+  return el("span", root("select", props, r, { id, style: style("--sp-ui-select-width", cssLength(props.width, "SpSelect", "width")) }), [
+    el(
+      "button",
+      {
+        type: "button",
+        class: "sp-ui-select-trigger",
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": String(s.open),
+        "aria-controls": id ? `${id}--listbox` : void 0,
+        "aria-activedescendant": active ? optionId(active.key) : void 0,
+        "aria-label": props.label,
+        "aria-required": props.required ? "true" : void 0,
+        disabled: props.disabled === true
+      },
+      [
+        frame("control"),
+        el("span", { class: "sp-ui-select-value", "data-placeholder": chosen ? void 0 : "true" }, [text(chosen?.label ?? props.placeholder ?? "Select\u2026")]),
+        glyph("chevronDown")
+      ],
+      "trigger"
+    ),
+    el("div", { class: "sp-ui-select-content", popover: "auto", "data-state": state(s.open) }, [
+      frame("card"),
+      el("div", { role: "listbox", id: id ? `${id}--listbox` : void 0, "aria-label": props.label }, options)
+    ], "popover"),
+    ...props.name ? [el("input", { type: "hidden", name: props.name, value: value ?? "" })] : []
+  ]);
+}
+function uiDropdownMenuView(props, r, s, slots) {
+  const { id } = props;
+  const entries = uiItems(props.items, "SpDropdownMenu");
+  const active = s.open ? entries.find((entry) => actionable(entry) && entry.key === s.active && entry.disabled !== true) : void 0;
+  const children = entries.map((entry) => {
+    if (entry.type === "separator") return el("div", { class: "sp-ui-menu-separator", role: "separator" });
+    if (entry.type === "label") return el("div", { class: "sp-ui-menu-label", role: "presentation" }, [text(entry.label)]);
+    const isActive = entry === active;
+    return el(
+      "div",
+      {
+        class: "sp-ui-menuitem",
+        role: "menuitem",
+        tabindex: "-1",
+        "data-key": entry.key,
+        "aria-disabled": entry.disabled ? "true" : void 0,
+        "data-danger": entry.danger ? "true" : void 0
+      },
+      [
+        ...isActive ? [heighten3()] : [],
+        label(entry.label, isActive),
+        ...entry.shortcut ? [el("span", { class: "sp-ui-menu-shortcut", "aria-hidden": "true" }, [text(entry.shortcut)])] : []
+      ],
+      "menuitem"
+    );
+  });
+  const trigger = slots.trigger ? uiTriggerView() : el(
+    "button",
+    { type: "button", class: "sp-ui-menu-trigger", ...uiTriggerAria("menu", id, s.open) },
+    [frame("control"), el("span", { class: "sp-ui-label" }, [text(props.label)]), glyph("chevronDown")],
+    "trigger"
+  );
+  return el("span", root("dropdown-menu", props, r, { id }), [
+    trigger,
+    el(
+      "div",
+      { class: "sp-ui-menu", id: id ? `${id}--menu` : void 0, popover: "auto", role: "menu", "aria-label": props.label, "data-state": state(s.open) },
+      [frame("card"), ...children],
+      "popover"
+    )
+  ]);
+}
+var TOAST_GLYPHS = { info: "info", success: "tick", warning: "warning", error: "cross" };
+function uiToastView(props, r, s, slots) {
+  const kind = props.kind ?? "info";
+  const urgent = kind === "warning" || kind === "error";
+  return el("li", root("toast", props, r, { id: props.id, role: "listitem", "data-kind": kind, "data-state": state(s.open) }), [
+    frame("card"),
+    el("div", { class: "sp-ui-toast-body", role: urgent ? "alert" : "status" }, [
+      glyph(TOAST_GLYPHS[kind]),
+      el("div", { class: "sp-ui-toast-text" }, [
+        el("span", { class: "sp-ui-toast-title" }, [text(props.title)]),
+        ...props.description ? [el("span", { class: "sp-ui-toast-description" }, [text(props.description)])] : []
+      ])
+    ]),
+    ...slots.action ? [el("div", { class: "sp-ui-toast-action" }, [slot("action")])] : [],
+    iconClose(props.closeLabel ?? "Dismiss")
+  ]);
+}
+function uiToasterView(props, r) {
+  return el(
+    "section",
+    root("toaster", props, r, { id: props.id, "aria-label": props.label ?? "Notifications", "data-position": props.position ?? "bottom-end" }),
+    [el("ol", { class: "sp-ui-toaster-list", role: "list" }, [slot("content")])]
+  );
+}
+
+export { UI_COMPONENTS, UI_FRAME_KINDS, UI_PROGRESS_VIEWBOX, UI_TOKEN_DEFAULTS, resolveUi, resolveUiTokens, uiAlertView, uiAnchor, uiAvatarGroupView, uiAvatarView, uiBadgeView, uiBreadcrumbView, uiButtonView, uiCardView, uiCheckboxView, uiCollapseGroup, uiCollapseItemView, uiCollapseView, uiDescriptionsView, uiDividerView, uiDrawerView, uiDropdownMenuView, uiEmptyView, uiFrameOutline, uiFrameVariant, uiGlyphView, uiInitials, uiInputNumberView, uiInputView, uiIsRovingKey, uiItems, uiListKey, uiMenuItems, uiModalView, uiNumberStep, uiNumberValue, uiOverlaySync, uiPageWindow, uiPagination, uiPaginationView, uiPlace, uiPopoverView, uiProgressArc, uiProgressView, uiRadioGroupView, uiRange, uiRateCount, uiRateView, uiResultView, uiRovingFocus, uiRovingKey, uiSegmentedView, uiSelectItems, uiSelectView, uiSelectedKey, uiSkeletonView, uiSliderView, uiStatisticView, uiSteps, uiStepsView, uiSurfaceView, uiSwitchView, uiTabPanelView, uiTableView, uiTabsView, uiTagView, uiTextareaView, uiTimelineListView, uiToastDuration, uiToastView, uiToasterView, uiToneTile, uiTooltipView, uiTriggerAria, uiTriggerView, uiTypeahead, uiValue };
 //# sourceMappingURL=ui.js.map
 //# sourceMappingURL=ui.js.map