@oods/components-react 0.3.3 → 0.4.1

package/dist/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var React7 = require('react');
+var React9 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
-var jsxRuntime = require('react/jsx-runtime');
 var componentContracts = require('@oods/component-contracts');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -23,342 +23,25 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React7__namespace = /*#__PURE__*/_interopNamespace(React7);
+var React9__namespace = /*#__PURE__*/_interopNamespace(React9);
 
 // src/presentational.tsx
-
-// src/status-map.json
-var status_map_default = {
-  domains: {
-    subscription: {
-      future: {
-        description: "Subscription is scheduled but not yet active.",
-        chip: {
-          foreground: "color.text.info",
-          background: "color.background.info.subtle",
-          border: "color.border.info",
-          icon: "icon.status.scheduled"
-        },
-        banner: {
-          foreground: "color.text.info",
-          background: "color.background.surface.default",
-          border: "color.border.info",
-          icon: "icon.status.scheduled"
-        }
-      },
-      trialing: {
-        description: "Subscription is in a trial period before billing begins.",
-        chip: {
-          foreground: "color.text.accent",
-          background: "color.background.accent.subtle",
-          border: "color.border.accent",
-          icon: "icon.status.trial"
-        },
-        banner: {
-          foreground: "color.text.accent",
-          background: "color.background.surface.default",
-          border: "color.border.accent",
-          icon: "icon.status.trial"
-        }
-      },
-      active: {
-        description: "Subscription is paid and service is provisioned.",
-        chip: {
-          foreground: "color.text.positive",
-          background: "color.background.positive.subtle",
-          border: "color.border.positive",
-          icon: "icon.status.success"
-        },
-        banner: {
-          foreground: "color.text.positive",
-          background: "color.background.surface.default",
-          border: "color.border.positive",
-          icon: "icon.status.success"
-        }
-      },
-      paused: {
-        description: "Billing paused temporarily by finance or customer request.",
-        chip: {
-          foreground: "color.text.neutral",
-          background: "color.background.neutral.subtle",
-          border: "color.border.neutral",
-          icon: "icon.status.paused"
-        },
-        banner: {
-          foreground: "color.text.neutral",
-          background: "color.background.surface.muted",
-          border: "color.border.neutral",
-          icon: "icon.status.paused"
-        }
-      },
-      pending_cancellation: {
-        description: "Subscription will cancel at period end but remains active now.",
-        chip: {
-          foreground: "color.text.info",
-          background: "color.background.info.subtle",
-          border: "color.border.info",
-          icon: "icon.status.pending"
-        },
-        banner: {
-          foreground: "color.text.info",
-          background: "color.background.surface.default",
-          border: "color.border.info",
-          icon: "icon.status.pending"
-        }
-      },
-      past_due: {
-        description: "Renewal payment failed; smart retries ongoing and access retained during the grace window.",
-        chip: {
-          foreground: "color.text.danger",
-          background: "color.background.danger.subtle",
-          border: "color.border.danger",
-          icon: "icon.status.warning"
-        },
-        banner: {
-          foreground: "color.text.onbold",
-          background: "color.background.danger.bold",
-          border: "color.border.danger",
-          icon: "icon.status.warning"
-        }
-      },
-      unpaid: {
-        description: "Payment retries exhausted; service access revoked.",
-        chip: {
-          foreground: "color.text.danger",
-          background: "color.background.danger.subtle",
-          border: "color.border.danger",
-          icon: "icon.status.error"
-        },
-        banner: {
-          foreground: "color.text.onbold",
-          background: "color.background.danger.bold",
-          border: "color.border.danger",
-          icon: "icon.status.error"
-        }
-      },
-      terminated: {
-        description: "Subscription ended; service access revoked and billing stopped.",
-        chip: {
-          foreground: "color.text.disabled",
-          background: "color.background.disabled",
-          border: "color.border.disabled",
-          icon: "icon.status.canceled"
-        },
-        banner: {
-          foreground: "color.text.neutral",
-          background: "color.background.neutral.subtle",
-          border: "color.border.neutral",
-          icon: "icon.status.canceled"
-        }
-      }
-    },
-    invoice: {
-      draft: {
-        description: "Invoice is editable and not yet finalized.",
-        chip: {
-          foreground: "color.text.neutral",
-          background: "color.background.neutral.subtle",
-          border: "color.border.neutral",
-          icon: "icon.status.draft"
-        },
-        banner: {
-          foreground: "color.text.neutral",
-          background: "color.background.surface.muted",
-          border: "color.border.neutral",
-          icon: "icon.status.draft"
-        }
-      },
-      posted: {
-        description: "Invoice finalized with terms before collection.",
-        chip: {
-          foreground: "color.text.info",
-          background: "color.background.info.subtle",
-          border: "color.border.info",
-          icon: "icon.status.pending"
-        },
-        banner: {
-          foreground: "color.text.info",
-          background: "color.background.surface.default",
-          border: "color.border.info",
-          icon: "icon.status.pending"
-        }
-      },
-      paid: {
-        description: "Invoice collected successfully in full.",
-        chip: {
-          foreground: "color.text.positive",
-          background: "color.background.positive.subtle",
-          border: "color.border.positive",
-          icon: "icon.status.success"
-        },
-        banner: {
-          foreground: "color.text.positive",
-          background: "color.background.surface.default",
-          border: "color.border.positive",
-          icon: "icon.status.success"
-        }
-      },
-      past_due: {
-        description: "Invoice is unpaid past its due date.",
-        chip: {
-          foreground: "color.text.danger",
-          background: "color.background.danger.subtle",
-          border: "color.border.danger",
-          icon: "icon.status.error"
-        },
-        banner: {
-          foreground: "color.text.onbold",
-          background: "color.background.danger.bold",
-          border: "color.border.danger",
-          icon: "icon.status.error"
-        }
-      },
-      void: {
-        description: "Invoice canceled and no longer payable.",
-        chip: {
-          foreground: "color.text.disabled",
-          background: "color.background.disabled",
-          border: "color.border.disabled",
-          icon: "icon.status.void"
-        },
-        banner: {
-          foreground: "color.text.neutral",
-          background: "color.background.neutral.subtle",
-          border: "color.border.neutral",
-          icon: "icon.status.void"
-        }
-      }
-    }
-  }
-};
-
-// src/status.ts
-var TONE_ALIASES = {
-  info: "info",
-  informational: "info",
-  accent: "accent",
-  highlight: "accent",
-  positive: "success",
-  success: "success",
-  ok: "success",
-  warning: "warning",
-  caution: "warning",
-  danger: "critical",
-  critical: "critical",
-  error: "critical",
-  negative: "critical",
-  neutral: "neutral",
-  pending: "info"
-};
-var toLabel = (status) => status.split(/[_-]/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join(" ");
-var inferTone = (entry) => {
-  if (!entry) return "neutral";
-  for (const reference of [entry.foreground, entry.background, entry.border]) {
-    const segments = reference.replace(/^\{|\}$/g, "").split(/[\s./_-]+/).reverse();
-    for (const segment of segments) {
-      const tone = TONE_ALIASES[segment.toLowerCase()];
-      if (tone) return tone;
-    }
-  }
-  return "neutral";
-};
-var componentTokenSet = (tone) => {
-  const normalized = tone === "positive" ? "success" : tone === "danger" ? "critical" : tone;
-  return {
-    background: `var(--sys-status-${normalized}-surface)`,
-    border: `var(--sys-status-${normalized}-border)`,
-    foreground: `var(--sys-status-${normalized}-text)`
-  };
-};
-var rawTokenSet = (entry) => {
-  const tone = inferTone(entry);
-  return componentTokenSet(tone);
-};
-var bannerFallback = (tone) => tone === "neutral" ? {
-  background: "var(--cmp-banner-background)",
-  border: "var(--cmp-banner-border)",
-  foreground: "var(--cmp-banner-text)"
-} : componentTokenSet(tone);
-var fallback = (domain, status, tone = "neutral") => ({
-  domain,
-  status,
-  label: toLabel(status || "Unknown"),
-  description: "Status not found in registry; falling back to the requested token set.",
-  tone,
-  badge: { subtle: componentTokenSet(tone), solid: componentTokenSet(tone) },
-  banner: { subtle: bannerFallback(tone), solid: componentTokenSet(tone) }
-});
-var registry = /* @__PURE__ */ new Map();
-for (const [domain, entries] of Object.entries(status_map_default.domains)) {
-  const domainEntries = /* @__PURE__ */ new Map();
-  for (const [status, entry] of Object.entries(entries)) {
-    const tone = inferTone(entry.chip);
-    domainEntries.set(status.toLowerCase(), {
-      domain,
-      status,
-      label: toLabel(status),
-      description: entry.description,
-      tone,
-      iconName: entry.chip.icon ?? entry.banner?.icon,
-      badge: { subtle: rawTokenSet(entry.chip), solid: componentTokenSet(tone) },
-      banner: {
-        subtle: entry.banner ? rawTokenSet(entry.banner) : bannerFallback(tone),
-        solid: componentTokenSet(tone)
-      }
-    });
-  }
-  registry.set(domain, domainEntries);
-}
-var LEGACY_STATUS_ALIASES = {
-  subscription: { delinquent: "unpaid" }
+var REACT_NAMES = {
+  viewBox: "viewBox",
+  fill: "fill",
+  stroke: "stroke",
+  "stroke-width": "strokeWidth",
+  "stroke-linecap": "strokeLinecap",
+  "stroke-linejoin": "strokeLinejoin",
+  "aria-hidden": "aria-hidden",
+  focusable: "focusable"
 };
-Object.freeze([...registry.keys()]);
-function getStatusPresentation(domain, status) {
-  const entries = registry.get(domain);
-  if (!entries) return fallback(domain, status);
-  const normalized = status.toLowerCase();
-  const direct = entries.get(normalized);
-  if (direct) return direct;
-  const alias = LEGACY_STATUS_ALIASES[domain]?.[normalized];
-  const aliased = alias ? entries.get(alias) : void 0;
-  return aliased ? { ...aliased, status, label: toLabel(status) } : fallback(domain, status);
-}
-function getToneTokenSet(tone) {
-  return componentTokenSet(tone);
-}
-function getBannerToneTokenSet(tone) {
-  return bannerFallback(tone);
-}
-var ICON_GLYPHS = {
-  success: "\u2714\uFE0E",
-  warning: "\u26A0\uFE0E",
-  critical: "\u2A2F",
-  danger: "\u2A2F",
-  error: "\u2A2F",
-  negative: "\u2A2F",
-  pending: "\u2026",
-  processing: "\u27F3",
-  paused: "\u23F8",
-  canceled: "\u2205",
-  cancelled: "\u2205",
-  draft: "\u270E",
-  void: "\u2205",
-  paid: "\u2714\uFE0E",
-  info: "\u2139\uFE0E",
-  trial: "\u2605",
-  future: "\u23F2",
-  scheduled: "\u23F2",
-  refunded: "\u21BA",
-  locked: "\u{1F512}",
-  unlocked: "\u{1F513}",
-  default: "\u2022"
-};
-function resolveStatusGlyph(iconName) {
-  const segment = iconName?.split(".").pop()?.toLowerCase();
-  return segment ? ICON_GLYPHS[segment] ?? ICON_GLYPHS.default : void 0;
+var svgProps = Object.fromEntries(Object.entries(componentContracts.STATUS_ICON_SVG_ATTRS).map(([name, value]) => [REACT_NAMES[name] ?? name, value]));
+function StatusIcon({ name }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...svgProps, children: componentContracts.STATUS_ICON_SHAPES[name].map((shape, index) => React9__namespace.createElement(shape.tag, { key: index, ...shape.attrs })) });
 }
 var classes = (...values) => values.filter(Boolean).join(" ");
-var Badge = React7__namespace.forwardRef(
+var Badge = React9__namespace.forwardRef(
   ({
     content,
     status,
@@ -375,11 +58,12 @@ var Badge = React7__namespace.forwardRef(
     "aria-label": ariaLabel,
     ...rest
   }, ref) => {
-    const presentation = status ? getStatusPresentation(domain, status) : void 0;
+    const presentation = status ? componentContracts.getStatusPresentation(domain, status) : void 0;
     const tone = toneOverride ?? presentation?.tone ?? "neutral";
-    const tokenSet = toneOverride !== void 0 ? getToneTokenSet(tone) : emphasis === "solid" ? presentation?.badge.solid ?? getToneTokenSet(tone) : presentation?.badge.subtle ?? getToneTokenSet(tone);
+    const tokenSet = toneOverride !== void 0 ? componentContracts.getToneTokenSet(tone) : emphasis === "solid" ? presentation?.badge.solid ?? componentContracts.getToneTokenSet(tone) : presentation?.badge.subtle ?? componentContracts.getToneTokenSet(tone);
     const resolvedContent = children ?? content ?? presentation?.label ?? status;
-    const resolvedIcon = icon ?? resolveStatusGlyph(presentation?.iconName);
+    const statusIcon = componentContracts.resolveStatusIcon(presentation?.iconName);
+    const resolvedIcon = icon ?? (statusIcon ? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: statusIcon }) : void 0);
     const resolvedShowIcon = showIcon ?? resolvedIcon !== void 0;
     const iconNode = resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__icon", "aria-hidden": "true", children: resolvedIcon }) : null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -411,7 +95,7 @@ var Badge = React7__namespace.forwardRef(
   }
 );
 Badge.displayName = "OODS.Badge";
-var Banner = React7__namespace.forwardRef(
+var Banner = React9__namespace.forwardRef(
   ({
     title,
     detail,
@@ -431,13 +115,14 @@ var Banner = React7__namespace.forwardRef(
     style,
     ...rest
   }, ref) => {
-    const presentation = status ? getStatusPresentation(domain, status) : void 0;
+    const presentation = status ? componentContracts.getStatusPresentation(domain, status) : void 0;
     const tone = toneOverride ?? presentation?.tone ?? "neutral";
-    const tokenSet = emphasis === "solid" ? presentation?.banner.solid ?? getToneTokenSet(tone) : presentation?.banner.subtle ?? getBannerToneTokenSet(tone);
+    const tokenSet = emphasis === "solid" ? presentation?.banner.solid ?? componentContracts.getToneTokenSet(tone) : presentation?.banner.subtle ?? componentContracts.getBannerToneTokenSet(tone);
     const heading = title ?? presentation?.label ?? status;
     const body = detail ?? description ?? children ?? content ?? presentation?.description;
     const role = tone === "critical" || tone === "danger" ? "alert" : "status";
-    const resolvedIcon = icon ?? resolveStatusGlyph(presentation?.iconName);
+    const statusIcon = componentContracts.resolveStatusIcon(presentation?.iconName);
+    const resolvedIcon = icon ?? (statusIcon ? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: statusIcon }) : void 0);
     const resolvedShowIcon = showIcon ?? resolvedIcon !== void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -472,7 +157,7 @@ var Banner = React7__namespace.forwardRef(
               className: "oods-banner-dismiss oods-banner__dismiss",
               "aria-label": dismissLabel,
               onClick: () => onDismiss(),
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xD7" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: "x" })
             }
           ) : null
         ]
@@ -481,7 +166,7 @@ var Banner = React7__namespace.forwardRef(
   }
 );
 Banner.displayName = "OODS.Banner";
-var Button = React7__namespace.forwardRef(
+var Button = React9__namespace.forwardRef(
   ({
     asChild = false,
     content,
@@ -527,7 +212,132 @@ var Button = React7__namespace.forwardRef(
   }
 );
 Button.displayName = "OODS.Button";
-var Card = React7__namespace.forwardRef(
+var noSubscription = () => () => void 0;
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React9__namespace.useEffect : React9__namespace.useLayoutEffect;
+var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
+var hasContent = (node) => node !== void 0 && node !== null && node !== false && node !== "";
+var pageLocks = 0;
+var pageStyle;
+function lockPageScroll() {
+  const page = document.documentElement;
+  if (pageLocks++ === 0) {
+    const scrollbar = window.innerWidth - page.clientWidth;
+    pageStyle = { overflow: page.style.overflow, paddingRight: page.style.paddingRight };
+    if (scrollbar > 0) page.style.paddingRight = `${parseFloat(getComputedStyle(page).paddingRight) + scrollbar}px`;
+    page.style.overflow = "hidden";
+  }
+  let held = true;
+  return () => {
+    if (!held) return;
+    held = false;
+    if (--pageLocks === 0 && pageStyle) {
+      page.style.overflow = pageStyle.overflow;
+      page.style.paddingRight = pageStyle.paddingRight;
+      pageStyle = void 0;
+    }
+  };
+}
+var outsideBox = (event, dialog) => {
+  const box = dialog.getBoundingClientRect();
+  return event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom;
+};
+var Dialog = React9__namespace.forwardRef(
+  ({
+    id,
+    open = false,
+    modal = true,
+    title,
+    description,
+    dismissLabel = "Close",
+    size = "md",
+    actions,
+    children,
+    className,
+    onClose,
+    onKeyDown,
+    onMouseDown,
+    onClick,
+    ...rest
+  }, ref) => {
+    const generatedId = React9__namespace.useId().replace(/[^\w-]/g, "");
+    const dialogId = id ?? `oods-dialog-${generatedId}`;
+    const element = React9__namespace.useRef(null);
+    const openRef = React9__namespace.useRef(open);
+    const scrollLock = React9__namespace.useRef(null);
+    const pressedBackdrop = React9__namespace.useRef(false);
+    const serverMarkup = React9__namespace.useSyncExternalStore(noSubscription, () => false, () => true);
+    const managed = modal && !serverMarkup && canShowModal();
+    const setRef = React9__namespace.useCallback((node) => {
+      element.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }, [ref]);
+    const releaseScroll = React9__namespace.useCallback(() => {
+      scrollLock.current?.();
+      scrollLock.current = null;
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+      openRef.current = open;
+      const dialog = element.current;
+      if (!dialog || !managed) return;
+      if (open && !dialog.open) dialog.showModal();
+      else if (!open && dialog.open) dialog.close();
+      if (open && dialog.open) scrollLock.current ??= lockPageScroll();
+    }, [open, managed]);
+    React9__namespace.useEffect(() => releaseScroll, [releaseScroll]);
+    const requestClose = (event) => {
+      event.preventDefault();
+      onClose?.();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "dialog",
+      {
+        ref: setRef,
+        id: dialogId,
+        className: classes("oods-dialog", className),
+        "data-oods-component": "Dialog",
+        "data-size": size,
+        "aria-labelledby": `${dialogId}-title`,
+        "aria-describedby": hasContent(description) ? `${dialogId}-description` : void 0,
+        open: managed ? void 0 : open,
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (event.key === "Escape" && !event.defaultPrevented) requestClose(event);
+        },
+        onCancel: requestClose,
+        onClose: () => {
+          if (element.current?.open) return;
+          releaseScroll();
+          if (openRef.current) onClose?.();
+        },
+        onMouseDown: (event) => {
+          onMouseDown?.(event);
+          pressedBackdrop.current = managed && event.target === event.currentTarget && outsideBox(event, event.currentTarget);
+        },
+        onClick: (event) => {
+          onClick?.(event);
+          const backdrop = pressedBackdrop.current && event.target === event.currentTarget && outsideBox(event, event.currentTarget);
+          pressedBackdrop.current = false;
+          if (backdrop && !event.defaultPrevented) onClose?.();
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-dialog__header", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-dialog__heading", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { id: `${dialogId}-title`, className: "oods-dialog__title", children: title }),
+              hasContent(description) ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${dialogId}-description`, className: "oods-dialog__description", children: description }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "oods-dialog__close", "aria-label": dismissLabel, onClick: () => onClose?.(), children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: "x" }) })
+          ] }),
+          hasContent(children) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oods-dialog__body", children }) : null,
+          hasContent(actions) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oods-dialog__footer", children: actions }) : null
+        ]
+      }
+    );
+  }
+);
+Dialog.displayName = "OODS.Dialog";
+var Card = React9__namespace.forwardRef(
   ({ as = "div", elevated = false, className, ...rest }, ref) => {
     const Element = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -543,7 +353,7 @@ var Card = React7__namespace.forwardRef(
   }
 );
 Card.displayName = "OODS.Card";
-var Text = React7__namespace.forwardRef(
+var Text = React9__namespace.forwardRef(
   ({
     as = "span",
     content,
@@ -598,7 +408,7 @@ var FieldFrame = ({
 }) => {
   const resolvedHelp = help ?? description;
   const validationTone = validation?.state === "error" ? "critical" : validation?.state === "warning" ? "warning" : validation?.state;
-  const validationTokens = validationTone ? getToneTokenSet(validationTone) : void 0;
+  const validationTokens = validationTone ? componentContracts.getToneTokenSet(validationTone) : void 0;
   const validationStyle = validationTokens ? {
     "--cmp-input-message-border": validationTokens.border,
     "--cmp-input-message-text": validationTokens.foreground,
@@ -652,7 +462,7 @@ var FieldFrame = ({
     }
   );
 };
-var InputPrimitive = React7__namespace.forwardRef(
+var InputPrimitive = React9__namespace.forwardRef(
   ({
     id,
     label,
@@ -722,7 +532,7 @@ var InputPrimitive = React7__namespace.forwardRef(
 );
 InputPrimitive.displayName = "OODS.Input";
 var Input = InputPrimitive;
-var DatePicker = React7__namespace.forwardRef(
+var DatePicker = React9__namespace.forwardRef(
   ({ pickerClassName, pickerStyle, inputClassName, inputStyle, className, style, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes2("oods-date-picker", className), style, "data-oods-component": "DatePicker", children: /* @__PURE__ */ jsxRuntime.jsx(
     Input,
     {
@@ -735,7 +545,7 @@ var DatePicker = React7__namespace.forwardRef(
   ) })
 );
 DatePicker.displayName = "OODS.DatePicker";
-var Checkbox = React7__namespace.forwardRef(
+var Checkbox = React9__namespace.forwardRef(
   ({
     id,
     label,
@@ -798,7 +608,85 @@ var Checkbox = React7__namespace.forwardRef(
   }
 );
 Checkbox.displayName = "OODS.Checkbox";
-var Select = React7__namespace.forwardRef(
+var Switch = React9__namespace.forwardRef(
+  ({
+    id,
+    label,
+    checked,
+    defaultChecked = false,
+    required,
+    help,
+    validation,
+    size = "md",
+    className,
+    style,
+    onClick,
+    onCheckedChange,
+    onUpdate,
+    "aria-describedby": nativeDescription,
+    ...rest
+  }, ref) => {
+    const [internalChecked, setInternalChecked] = React9__namespace.useState(defaultChecked);
+    const on = checked ?? internalChecked;
+    const validationId = validation?.id ?? `${id}-validation`;
+    const describedBy = [nativeDescription, help ? `${id}-help` : void 0, validation?.message ? validationId : void 0].filter(Boolean).join(" ") || void 0;
+    const tone = validation ? validation.state === "error" ? "critical" : validation.state : void 0;
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      const next = !on;
+      if (checked === void 0) setInternalChecked(next);
+      onCheckedChange?.(next);
+      onUpdate?.(next);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: classes2("oods-field", "oods-switch", className),
+        style: {
+          ...tone ? {
+            "--cmp-input-message-border": `var(--sys-status-${tone}-border)`,
+            "--cmp-input-message-text": `var(--sys-status-${tone}-text)`
+          } : {},
+          ...style
+        },
+        "data-oods-component": "Switch",
+        "data-size": size,
+        "data-validation-state": validation?.state,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-switch__row", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                ref,
+                id,
+                type: "button",
+                role: "switch",
+                className: "oods-switch__control",
+                "aria-checked": on,
+                "aria-labelledby": `${id}-label`,
+                "aria-describedby": describedBy,
+                "aria-required": required || void 0,
+                "aria-invalid": validation?.state === "error" || void 0,
+                onClick: handleClick,
+                ...rest,
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-switch__thumb", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { id: `${id}-label`, className: "oods-field-label oods-switch__label", htmlFor: id, children: [
+              label,
+              required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-field-required", "aria-hidden": "true", children: "*" }) : null
+            ] })
+          ] }),
+          help ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${id}-help`, className: "oods-field-help", children: help }) : null,
+          validation?.message ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: validationId, className: "oods-field-error", role: validation.state === "error" ? "alert" : void 0, children: validation.message }) : null
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "OODS.Switch";
+var Select = React9__namespace.forwardRef(
   ({
     id,
     label,
@@ -866,7 +754,7 @@ var Select = React7__namespace.forwardRef(
   }
 );
 Select.displayName = "OODS.Select";
-var Textarea = React7__namespace.forwardRef(
+var Textarea = React9__namespace.forwardRef(
   ({
     id,
     label,
@@ -949,7 +837,7 @@ var maxColumns = (columns) => {
   const count = Number(columns);
   return Number.isFinite(count) && count > 0 ? count : void 0;
 };
-var Grid = React7__namespace.forwardRef(
+var Grid = React9__namespace.forwardRef(
   ({
     columns = "auto-fit",
     minColumnWidth = "16rem",
@@ -979,7 +867,7 @@ var Grid = React7__namespace.forwardRef(
   )
 );
 Grid.displayName = "OODS.Grid";
-var Stack = React7__namespace.forwardRef(
+var Stack = React9__namespace.forwardRef(
   ({
     direction = "column",
     gap = "md",
@@ -1011,19 +899,19 @@ var Stack = React7__namespace.forwardRef(
 );
 Stack.displayName = "OODS.Stack";
 var classes4 = (...values) => values.filter(Boolean).join(" ");
-var TableHead = React7__namespace.forwardRef(
+var TableHead = React9__namespace.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: classes4("oods-table__header", className), ...rest })
 );
 TableHead.displayName = "OODS.Table.Head";
-var TableBody = React7__namespace.forwardRef(
+var TableBody = React9__namespace.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: classes4("oods-table__body", className), ...rest })
 );
 TableBody.displayName = "OODS.Table.Body";
-var TableCaption = React7__namespace.forwardRef(
+var TableCaption = React9__namespace.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("caption", { ref, className: classes4("oods-table__caption", className), ...rest })
 );
 TableCaption.displayName = "OODS.Table.Caption";
-var TableRow = React7__namespace.forwardRef(
+var TableRow = React9__namespace.forwardRef(
   ({
     selectable = false,
     selected = false,
@@ -1062,7 +950,7 @@ var TableRow = React7__namespace.forwardRef(
   }
 );
 TableRow.displayName = "OODS.Table.Row";
-var TableHeaderCell = React7__namespace.forwardRef(
+var TableHeaderCell = React9__namespace.forwardRef(
   ({ numeric = false, className, scope = "col", ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "th",
     {
@@ -1079,7 +967,7 @@ var TableHeaderCell = React7__namespace.forwardRef(
   )
 );
 TableHeaderCell.displayName = "OODS.Table.HeaderCell";
-var TableCell = React7__namespace.forwardRef(
+var TableCell = React9__namespace.forwardRef(
   ({
     numeric = false,
     status,
@@ -1092,9 +980,9 @@ var TableCell = React7__namespace.forwardRef(
     title,
     ...rest
   }, ref) => {
-    const presentation = status ? getStatusPresentation(statusDomain, status) : void 0;
+    const presentation = status ? componentContracts.getStatusPresentation(statusDomain, status) : void 0;
     const tone = toneOverride ?? presentation?.tone;
-    const tokens = tone ? getToneTokenSet(tone) : void 0;
+    const tokens = tone ? componentContracts.getToneTokenSet(tone) : void 0;
     const statusStyle = tokens ? statusEmphasis === "text" ? { "--table-cell-status-foreground": tokens.foreground } : {
       "--table-cell-status-background": tokens.background,
       "--table-cell-status-border": tokens.border,
@@ -1125,9 +1013,10 @@ var TableCell = React7__namespace.forwardRef(
   }
 );
 TableCell.displayName = "OODS.Table.Cell";
-var TableRoot = React7__namespace.forwardRef(
+var TableRoot = React9__namespace.forwardRef(
   ({
     caption,
+    showCaption = true,
     columns,
     rows,
     density = "comfortable",
@@ -1153,7 +1042,7 @@ var TableRoot = React7__namespace.forwardRef(
           "data-density": density,
           ...rest,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            caption ? /* @__PURE__ */ jsxRuntime.jsx(TableCaption, { children: caption }) : null,
+            caption ? /* @__PURE__ */ jsxRuntime.jsx(TableCaption, { "data-visually-hidden": showCaption ? void 0 : "true", children: caption }) : null,
             /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oods-table__row", children: columns?.map((column) => /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: (rows?.length ?? 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oods-table__row", children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: Math.max(columns?.length ?? 0, 1), children: "No rows available." }) }) : rows?.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
               "tr",
@@ -1206,7 +1095,7 @@ var partitionForOverflow = (items, visibleCount, selectedId) => {
     overflowItems: items.filter((item) => !visibleIds.has(item.id))
   };
 };
-var Tabs = React7__namespace.forwardRef(
+var Tabs = React9__namespace.forwardRef(
   ({
     items,
     selectedId,
@@ -1220,22 +1109,22 @@ var Tabs = React7__namespace.forwardRef(
     "aria-label": ariaLabelAttribute,
     ...rest
   }, ref) => {
-    const instanceId = React7__namespace.useId().replaceAll(":", "");
+    const instanceId = React9__namespace.useId().replaceAll(":", "");
     const controlled = selectedId !== void 0;
     const firstEnabled = items.find((item) => !item.disabled && !item.isDisabled)?.id ?? "";
-    const [internalSelectedId, setInternalSelectedId] = React7__namespace.useState(
+    const [internalSelectedId, setInternalSelectedId] = React9__namespace.useState(
       defaultSelectedId ?? firstEnabled
     );
     const activeId = controlled ? selectedId : internalSelectedId;
-    const [focusedId, setFocusedId] = React7__namespace.useState(activeId);
-    const [visibleCount, setVisibleCount] = React7__namespace.useState(items.length);
-    const [menuOpen, setMenuOpen] = React7__namespace.useState(false);
-    const listRef = React7__namespace.useRef(null);
-    const tabRefs = React7__namespace.useRef(/* @__PURE__ */ new Map());
-    const itemWidths = React7__namespace.useRef(/* @__PURE__ */ new Map());
-    const focusRequestedByUser = React7__namespace.useRef(false);
-    React7__namespace.useEffect(() => setFocusedId(activeId), [activeId]);
-    const select = React7__namespace.useCallback(
+    const [focusedId, setFocusedId] = React9__namespace.useState(activeId);
+    const [visibleCount, setVisibleCount] = React9__namespace.useState(items.length);
+    const [menuOpen, setMenuOpen] = React9__namespace.useState(false);
+    const listRef = React9__namespace.useRef(null);
+    const tabRefs = React9__namespace.useRef(/* @__PURE__ */ new Map());
+    const itemWidths = React9__namespace.useRef(/* @__PURE__ */ new Map());
+    const focusRequestedByUser = React9__namespace.useRef(false);
+    React9__namespace.useEffect(() => setFocusedId(activeId), [activeId]);
+    const select = React9__namespace.useCallback(
       (id) => {
         const item = items.find((candidate) => candidate.id === id);
         if (!item || item.disabled || item.isDisabled) return;
@@ -1247,7 +1136,7 @@ var Tabs = React7__namespace.forwardRef(
       },
       [controlled, items, onChange, onUpdate]
     );
-    const measure = React7__namespace.useCallback(() => {
+    const measure = React9__namespace.useCallback(() => {
       const list = listRef.current;
       if (!list || items.length < 2) return;
       const available = list.offsetWidth;
@@ -1271,7 +1160,7 @@ var Tabs = React7__namespace.forwardRef(
       }
       setVisibleCount(Math.max(1, count));
     }, [items.length]);
-    React7__namespace.useLayoutEffect(() => {
+    React9__namespace.useLayoutEffect(() => {
       measure();
       const list = listRef.current;
       if (!list || typeof ResizeObserver === "undefined") return void 0;
@@ -1299,7 +1188,7 @@ var Tabs = React7__namespace.forwardRef(
       if (!nextId) return;
       select(nextId);
     };
-    React7__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       if (focusRequestedByUser.current && visibleItems.some((item) => item.id === focusedId)) {
         focusRequestedByUser.current = false;
         tabRefs.current.get(focusedId)?.focus();
@@ -1421,9 +1310,73 @@ var Tabs = React7__namespace.forwardRef(
   }
 );
 Tabs.displayName = "OODS.Tabs";
+var SegmentedControl = React9__namespace.forwardRef(
+  ({
+    id,
+    label,
+    options,
+    value,
+    defaultValue,
+    name,
+    size = "md",
+    disabled,
+    className,
+    style,
+    onChange,
+    onValueChange,
+    onUpdate,
+    ...rest
+  }, ref) => {
+    const handleChange = (event) => {
+      onChange?.(event);
+      if (event.defaultPrevented) return;
+      onValueChange?.(event.currentTarget.value);
+      onUpdate?.(event.currentTarget.value);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: className ? `oods-field oods-segmented-control ${className}` : "oods-field oods-segmented-control",
+        style,
+        "data-oods-component": "SegmentedControl",
+        "data-size": size,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { id: `${id}-label`, className: "oods-field-label", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref,
+              id,
+              role: "radiogroup",
+              "aria-labelledby": `${id}-label`,
+              className: "oods-segmented-control__track",
+              ...rest,
+              children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "oods-segmented-control__option", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    className: "oods-segmented-control__input",
+                    name: name || id,
+                    value: option.value,
+                    ...value === void 0 ? { defaultChecked: option.value === defaultValue } : { checked: option.value === value },
+                    disabled: disabled || option.disabled,
+                    onChange: handleChange
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-segmented-control__label", children: option.label })
+              ] }, option.value))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SegmentedControl.displayName = "OODS.SegmentedControl";
 var classes6 = (...values) => values.filter(Boolean).join(" ");
 var humanize = (value) => value.split(/[_-]/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join(" ");
-var StatusBadge = React7__namespace.forwardRef(
+var StatusBadge = React9__namespace.forwardRef(
   ({
     status,
     value,
@@ -1446,7 +1399,7 @@ var StatusBadge = React7__namespace.forwardRef(
     ...rest
   }, ref) => {
     const resolvedStatus = status ?? value ?? "unknown";
-    const presentation = getStatusPresentation(domain, resolvedStatus);
+    const presentation = componentContracts.getStatusPresentation(domain, resolvedStatus);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Badge,
       {
@@ -1467,8 +1420,8 @@ var StatusBadge = React7__namespace.forwardRef(
   }
 );
 StatusBadge.displayName = "OODS.StatusBadge";
-function formatPrice(amount, currency, fallback2) {
-  if (amount === void 0 || !Number.isFinite(amount)) return fallback2;
+function formatPrice(amount, currency, fallback) {
+  if (amount === void 0 || !Number.isFinite(amount)) return fallback;
   if (!currency) return new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }).format(amount);
   try {
     return new Intl.NumberFormat(void 0, {
@@ -1479,7 +1432,7 @@ function formatPrice(amount, currency, fallback2) {
     return `${currency.toUpperCase()} ${amount.toFixed(2)}`;
   }
 }
-var PriceBadge = React7__namespace.forwardRef(
+var PriceBadge = React9__namespace.forwardRef(
   ({
     amountCents,
     unitAmountCents,
@@ -1554,7 +1507,7 @@ function normalizeTimelineEvents(values) {
     }];
   });
 }
-var TimelinePrimitive = React7__namespace.forwardRef(
+var TimelinePrimitive = React9__namespace.forwardRef(
   ({
     componentId,
     defaultTitle,
@@ -1632,7 +1585,7 @@ var TimelinePrimitive = React7__namespace.forwardRef(
   }
 );
 TimelinePrimitive.displayName = "OODS.TimelinePrimitive";
-var StatusTimeline = React7__namespace.forwardRef(
+var StatusTimeline = React9__namespace.forwardRef(
   (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     TimelinePrimitive,
     {
@@ -1645,7 +1598,7 @@ var StatusTimeline = React7__namespace.forwardRef(
   )
 );
 StatusTimeline.displayName = "OODS.StatusTimeline";
-var AuditTimeline = React7__namespace.forwardRef(
+var AuditTimeline = React9__namespace.forwardRef(
   ({ auditLog, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     TimelinePrimitive,
     {
@@ -1659,7 +1612,7 @@ var AuditTimeline = React7__namespace.forwardRef(
   )
 );
 AuditTimeline.displayName = "OODS.AuditTimeline";
-var CancellationSummary = React7__namespace.forwardRef(
+var CancellationSummary = React9__namespace.forwardRef(
   ({
     label,
     title = label ?? "Cancellation Summary",
@@ -1716,7 +1669,7 @@ var CancellationSummary = React7__namespace.forwardRef(
   }
 );
 CancellationSummary.displayName = "OODS.CancellationSummary";
-var SearchInput = React7__namespace.forwardRef(
+var SearchInput = React9__namespace.forwardRef(
   ({
     id,
     label = "Search",
@@ -1742,13 +1695,13 @@ var SearchInput = React7__namespace.forwardRef(
     onKeyDown,
     ...rest
   }, ref) => {
-    const generatedId = React7__namespace.useId();
+    const generatedId = React9__namespace.useId();
     const resolvedId = id ?? `oods-search-${generatedId.replace(/:/g, "")}`;
-    const [uncontrolledValue, setUncontrolledValue] = React7__namespace.useState(defaultValue);
+    const [uncontrolledValue, setUncontrolledValue] = React9__namespace.useState(defaultValue);
     const currentValue = value ?? uncontrolledValue;
-    const timerRef = React7__namespace.useRef(void 0);
+    const timerRef = React9__namespace.useRef(void 0);
     const delay = Math.max(0, debounceMs ?? debounce ?? 0);
-    React7__namespace.useEffect(() => () => {
+    React9__namespace.useEffect(() => () => {
       if (timerRef.current !== void 0) clearTimeout(timerRef.current);
     }, []);
     const publish = (nextValue) => {
@@ -1811,7 +1764,7 @@ var SearchInput = React7__namespace.forwardRef(
               "aria-label": "Clear search",
               disabled,
               onClick: clear,
-              children: "\xD7"
+              children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: "x" })
             }
           ) : null
         ]
@@ -1832,7 +1785,7 @@ function visiblePages(page, totalPages) {
   }
   return result;
 }
-var PaginationBar = React7__namespace.forwardRef(
+var PaginationBar = React9__namespace.forwardRef(
   ({
     page = 1,
     pageSize = 25,
@@ -1973,7 +1926,7 @@ function relativeLabel(date, now) {
     unit
   );
 }
-var RelativeTimestamp = React7__namespace.forwardRef(
+var RelativeTimestamp = React9__namespace.forwardRef(
   ({
     datetime,
     timestamp,
@@ -1999,7 +1952,7 @@ var RelativeTimestamp = React7__namespace.forwardRef(
     const date = asDate(raw);
     if (hideWhenEmpty && !date) return null;
     const nowDate = asDate(now) ?? /* @__PURE__ */ new Date();
-    const iso = date?.toISOString() ?? (raw === void 0 ? void 0 : String(raw));
+    const iso = date?.toISOString() ?? (raw === void 0 || raw === "" ? void 0 : String(raw));
     const absolute = componentContracts.formatDateTime(date, { timeZone: timezone });
     const content = relative ?? label ?? text ?? (now !== void 0 && date ? relativeLabel(date, nowDate) : absolute || children || "Unknown time");
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2021,8 +1974,8 @@ RelativeTimestamp.displayName = "OODS.RelativeTimestamp";
 var classes7 = (...values) => values.filter(Boolean).join(" ");
 var firstText = (...values) => values.find((value) => typeof value === "string" && value.trim().length > 0);
 function childContent(children) {
-  const flatten = (value) => React7__namespace.Children.toArray(value).flatMap((node) => {
-    if (React7__namespace.isValidElement(node) && node.type === React7__namespace.Fragment) {
+  const flatten = (value) => React9__namespace.Children.toArray(value).flatMap((node) => {
+    if (React9__namespace.isValidElement(node) && node.type === React9__namespace.Fragment) {
       return flatten(node.props.children);
     }
     return [node];
@@ -2034,16 +1987,16 @@ function childContent(children) {
   }
   return { authored: nodes.length > 0 };
 }
-function headingElement(as, level, fallback2) {
+function headingElement(as, level, fallback) {
   if (as && /^h[1-6]$/.test(as)) return as;
-  const bounded = Number.isFinite(level) ? Math.max(1, Math.min(6, Math.trunc(level))) : fallback2;
+  const bounded = Number.isFinite(level) ? Math.max(1, Math.min(6, Math.trunc(level))) : fallback;
   return `h${bounded}`;
 }
 function notEcho(supporting, heading) {
   if (!supporting || !heading) return supporting;
   return supporting.trim() === heading.trim() ? void 0 : supporting;
 }
-var DetailHeader = React7__namespace.forwardRef(
+var DetailHeader = React9__namespace.forwardRef(
   ({ title, label, text, subtitle, sublabel, description, metadata, meta, level, as, children, className, ...rest }, ref) => {
     const Heading = headingElement(as, level, 2);
     const content = childContent(children);
@@ -2058,7 +2011,7 @@ var DetailHeader = React7__namespace.forwardRef(
   }
 );
 DetailHeader.displayName = "OODS.DetailHeader";
-var CardHeader = React7__namespace.forwardRef(
+var CardHeader = React9__namespace.forwardRef(
   ({ title, label, text, supporting, supportingText, subtitle, description, level, as, children, className, ...rest }, ref) => {
     const Heading = headingElement(as, level, 2);
     const content = childContent(children);
@@ -2071,7 +2024,7 @@ var CardHeader = React7__namespace.forwardRef(
   }
 );
 CardHeader.displayName = "OODS.CardHeader";
-var ColorSwatch = React7__namespace.forwardRef(
+var ColorSwatch = React9__namespace.forwardRef(
   ({ color, value, state, label, children, className, style, ...rest }, ref) => {
     const resolvedColor = firstText(color, value, state);
     const content = childContent(children);
@@ -2096,7 +2049,7 @@ var ColorSwatch = React7__namespace.forwardRef(
   }
 );
 ColorSwatch.displayName = "OODS.ColorSwatch";
-var ColorizedBadge = React7__namespace.forwardRef(
+var ColorizedBadge = React9__namespace.forwardRef(
   ({ label, text, state, value, status, color, hue, swatch, variant, tone, emphasis, children, className, style, ...rest }, ref) => {
     const content = childContent(children);
     const resolvedLabel = content.scalar ?? firstText(label, text, state, value) ?? "Color";
@@ -2126,10 +2079,12 @@ var ColorizedBadge = React7__namespace.forwardRef(
   }
 );
 ColorizedBadge.displayName = "OODS.ColorizedBadge";
-var VizAreaPreview = React7__namespace.forwardRef(
-  ({ width = 640, height = 360, svg, svgNarrow, svgWide, title, description, children, className, style, ...rest }, ref) => {
+var VizAreaPreview = React9__namespace.forwardRef(
+  ({ width = 640, height = 360, svg, svgNarrow, svgWide, svgDark, svgDarkNarrow, svgDarkWide, svgHc, svgHcNarrow, svgHcWide, title, description, children, className, style, ...rest }, ref) => {
     const content = childContent(children);
     if (svg !== void 0) {
+      const layers = componentContracts.vizPreviewLayers({ svg, svgNarrow, svgWide, svgDark, svgDarkNarrow, svgDarkWide, svgHc, svgHcNarrow, svgHcWide });
+      const renders = (layer) => layer.renders.map(([attribute, markup]) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...{ [attribute]: "true" }, dangerouslySetInnerHTML: { __html: markup } }, attribute));
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "figure",
         {
@@ -2148,9 +2103,7 @@ var VizAreaPreview = React7__namespace.forwardRef(
           ...rest,
           children: [
             title && !componentContracts.svgCarriesTitle(svg, title) ? /* @__PURE__ */ jsxRuntime.jsx("figcaption", { children: title }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { "data-viz-svg": "true", dangerouslySetInnerHTML: { __html: componentContracts.assertStaticSvg(svg) } }),
-            svgNarrow !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-viz-svg-narrow": "true", dangerouslySetInnerHTML: { __html: componentContracts.assertStaticSvg(svgNarrow) } }) : null,
-            svgWide !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-viz-svg-wide": "true", dangerouslySetInnerHTML: { __html: componentContracts.assertStaticSvg(svgWide) } }) : null,
+            layers.map((layer) => layer.theme === void 0 ? renders(layer) : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-viz-theme": layer.theme, "data-viz-narrow": layer.narrow ? "true" : void 0, "data-viz-wide": layer.wide ? "true" : void 0, children: renders(layer) }, layer.theme)),
             description ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-viz-description": "true", children: description }) : null
           ]
         }
@@ -2195,13 +2148,13 @@ var descriptorLabel = (descriptor) => firstText(
   typeof descriptor.field === "string" ? descriptor.field : void 0
 ) ?? "Filter";
 function createPanelSection(component, className, panelType, defaultTitle) {
-  const Panel = React7__namespace.forwardRef(
+  const Panel = React9__namespace.forwardRef(
     ({ title, label, heading, name, subtitle, description, metadata, summary: summary2, text, body, emptyMessage, children, className: consumerClassName, ...rest }, ref) => {
       const content = childContent(children);
       const authored = content.authored || content.scalar !== void 0;
       const resolvedTitle = firstText(title, label, heading, name) ?? defaultTitle;
       const resolvedSubtitle = firstText(subtitle, description, metadata);
-      const fallback2 = firstText(summary2, text, body, emptyMessage);
+      const fallback = firstText(summary2, text, body, emptyMessage);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "section",
         {
@@ -2215,7 +2168,7 @@ function createPanelSection(component, className, panelType, defaultTitle) {
               /* @__PURE__ */ jsxRuntime.jsx("h2", { children: resolvedTitle }),
               resolvedSubtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-panel-subtitle": "true", children: resolvedSubtitle }) : null
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { "data-panel-content": "true", children: authored ? children : fallback2 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-panel-summary": "true", children: fallback2 }) : null })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { "data-panel-content": "true", children: authored ? children : fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-panel-summary": "true", children: fallback }) : null })
           ]
         }
       );
@@ -2228,7 +2181,7 @@ var ClassificationPanel = createPanelSection("ClassificationPanel", "oods-classi
 var AddressCollectionPanel = createPanelSection("AddressCollectionPanel", "oods-address-collection-panel", "address", "Addresses");
 var MembershipPanel = createPanelSection("MembershipPanel", "oods-membership-panel", "membership", "Membership");
 var PreferencePanel = createPanelSection("PreferencePanel", "oods-preference-panel", "preference", "Preferences");
-var FilterPanel = React7__namespace.forwardRef(
+var FilterPanel = React9__namespace.forwardRef(
   ({ filters, activeFilters, mode, collapsible = true, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2262,7 +2215,7 @@ var FilterPanel = React7__namespace.forwardRef(
   }
 );
 FilterPanel.displayName = "OODS.FilterPanel";
-var PriceSummary = React7__namespace.forwardRef(
+var PriceSummary = React9__namespace.forwardRef(
   ({
     title,
     label,
@@ -2295,7 +2248,7 @@ var PriceSummary = React7__namespace.forwardRef(
       ["Interval", componentContracts.formatPriceCode(interval ?? billingInterval)]
     ];
     const terms = entries.filter((entry) => entry[1] !== void 0);
-    const fallback2 = firstText(summary2, text, description);
+    const fallback = firstText(summary2, text, description);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -2309,7 +2262,7 @@ var PriceSummary = React7__namespace.forwardRef(
           authored ? children : terms.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("dl", { children: terms.map(([term, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-summary-item": "true", children: [
             /* @__PURE__ */ jsxRuntime.jsx("dt", { children: term }),
             /* @__PURE__ */ jsxRuntime.jsx("dd", { children: value })
-          ] }, term)) }) : fallback2 ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback2 }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
+          ] }, term)) }) : fallback ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
         ]
       }
     );
@@ -2335,7 +2288,7 @@ var normalizeTagItems = (value) => {
   }
   return items.filter((item) => item.length > 0);
 };
-var TagManager = React7__namespace.forwardRef(
+var TagManager = React9__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, tags, value, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2381,10 +2334,12 @@ var asCount = (value) => {
   return void 0;
 };
 function createBadgeFamily(options) {
-  const consumed = /* @__PURE__ */ new Set([...options.labelKeys, ...options.statusKeys, "variant", "tone", "emphasis"]);
-  const Family = React7__namespace.forwardRef((allProps, ref) => {
+  const consumed = /* @__PURE__ */ new Set([...options.labelKeys, ...options.statusKeys, "variant", "tone", "emphasis", ...options.booleanProps ? ["hideWhenFalse"] : []]);
+  const Family = React9__namespace.forwardRef((allProps, ref) => {
     const { children, className, ...rest } = allProps;
     const record = rest;
+    const flag = options.booleanProps?.map((key) => record[key]).find((value) => typeof value === "boolean");
+    if (record.hideWhenFalse === true && flag === false) return null;
     const scalar = (key) => {
       const value = record[key];
       if (typeof value === "boolean" && options.booleanProps?.includes(key)) return String(value);
@@ -2442,7 +2397,7 @@ var PreferenceSummaryBadge = createBadgeFamily({
   labelKeys: ["label", "text", "namespace", "value"],
   statusKeys: ["status", "state", "version"]
 });
-var RoleBadgeList = React7__namespace.forwardRef(
+var RoleBadgeList = React9__namespace.forwardRef(
   ({ roles, badges, roleLabels, value, variant, tone, label, text, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2462,7 +2417,7 @@ var RoleBadgeList = React7__namespace.forwardRef(
   }
 );
 RoleBadgeList.displayName = "OODS.RoleBadgeList";
-var TagPills = React7__namespace.forwardRef(
+var TagPills = React9__namespace.forwardRef(
   ({ tags, value, maxVisible, overflowLabel, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2514,7 +2469,7 @@ var normalizeTimelineItems = (raw) => {
 };
 function createTimelineFamily(options) {
   const consumed = /* @__PURE__ */ new Set(["title", "label", "heading", "name", ...options.eventKeys]);
-  const Family = React7__namespace.forwardRef((allProps, ref) => {
+  const Family = React9__namespace.forwardRef((allProps, ref) => {
     const { children, className, ...rest } = allProps;
     const record = rest;
     const text = (key) => {
@@ -2579,7 +2534,7 @@ var PreferenceTimeline = createTimelineFamily({
   timelineType: "preference",
   eventKeys: ["events", "changes", "history"]
 });
-var AuditEvent = React7__namespace.forwardRef(
+var AuditEvent = React9__namespace.forwardRef(
   ({
     label,
     title,
@@ -2665,7 +2620,7 @@ var addressRecord = (form) => {
   };
   return { street: read("street"), city: read("city"), region: read("region"), postalCode: read("postalCode") };
 };
-var AddressEditor = React7__namespace.forwardRef(
+var AddressEditor = React9__namespace.forwardRef(
   ({
     title,
     label,
@@ -2723,8 +2678,8 @@ var AddressEditor = React7__namespace.forwardRef(
   }
 );
 AddressEditor.displayName = "OODS.AddressEditor";
-var PreferenceEditor = React7__namespace.forwardRef(
-  ({ title, label, heading, name, description, subtitle, hint, namespaces, namespace, document, json, value, children, className, onSubmit, ...rest }, ref) => {
+var PreferenceEditor = React9__namespace.forwardRef(
+  ({ title, label, heading, name, description, subtitle, hint, namespaces, namespace, document: document2, json, value, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
     const resolvedTitle = firstText(title, label, heading, name) ?? "Preference Editor";
@@ -2751,7 +2706,7 @@ var PreferenceEditor = React7__namespace.forwardRef(
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-form-control": "textarea", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Preference Document" }),
-              /* @__PURE__ */ jsxRuntime.jsx("textarea", { name: "preferenceDocument", defaultValue: firstScalar(document, json, value) ?? "" })
+              /* @__PURE__ */ jsxRuntime.jsx("textarea", { name: "preferenceDocument", defaultValue: firstScalar(document2, json, value) ?? "" })
             ] })
           ] }) })
         ]
@@ -2760,7 +2715,7 @@ var PreferenceEditor = React7__namespace.forwardRef(
   }
 );
 PreferenceEditor.displayName = "OODS.PreferenceEditor";
-var RoleAssignmentForm = React7__namespace.forwardRef(
+var RoleAssignmentForm = React9__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, roles, availableRoles, role, defaultRoleId, assignee, member, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2797,7 +2752,7 @@ var RoleAssignmentForm = React7__namespace.forwardRef(
   }
 );
 RoleAssignmentForm.displayName = "OODS.RoleAssignmentForm";
-var StatusSelector = React7__namespace.forwardRef(
+var StatusSelector = React9__namespace.forwardRef(
   ({ label, title, help, options, states, value, status, children, className, onChange, onValueChange, onUpdate, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2839,7 +2794,7 @@ var StatusSelector = React7__namespace.forwardRef(
   }
 );
 StatusSelector.displayName = "OODS.StatusSelector";
-var TagInput = React7__namespace.forwardRef(
+var TagInput = React9__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, tags, value, placeholder, children, className, onChange, onValueChange, onUpdate, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2886,7 +2841,7 @@ var TagInput = React7__namespace.forwardRef(
   }
 );
 TagInput.displayName = "OODS.TagInput";
-var TemplatePicker = React7__namespace.forwardRef(
+var TemplatePicker = React9__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, templates, options, templateId, value, channels, channel, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2924,14 +2879,14 @@ var truncateLabel = (value, maxLength) => {
   const limit = typeof maxLength === "number" ? maxLength : Number(maxLength);
   return !Number.isFinite(limit) || limit <= 0 || value.length <= limit ? value : `${value.slice(0, Math.max(0, limit - 1)).trimEnd()}...`;
 };
-var InlineLabel = React7__namespace.forwardRef(
+var InlineLabel = React9__namespace.forwardRef(
   ({ label, text, value, maxLength, children, className, ...rest }, ref) => {
     const content = childContent(children);
     return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: classes7("oods-inline-label", className), "data-oods-component": "InlineLabel", ...rest, children: content.authored || content.scalar !== void 0 ? children : truncateLabel(firstText(label, text, value) ?? "", maxLength) });
   }
 );
 InlineLabel.displayName = "OODS.InlineLabel";
-var LabelCell = React7__namespace.forwardRef(
+var LabelCell = React9__namespace.forwardRef(
   ({ label, text, value, description, subtitle, sublabel, supporting, truncate, maxLength, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const limit = truncate ? maxLength ?? 40 : maxLength;
@@ -2944,7 +2899,7 @@ var LabelCell = React7__namespace.forwardRef(
   }
 );
 LabelCell.displayName = "OODS.LabelCell";
-var FormLabelGroup = React7__namespace.forwardRef(
+var FormLabelGroup = React9__namespace.forwardRef(
   ({ label, text, title, placeholder, hint, description, htmlFor, for: forId, inputId, children, className, ...rest }, ref) => {
     const detail = firstText(placeholder, hint, description);
     return /* @__PURE__ */ jsxRuntime.jsxs("label", { ref, className: classes7("oods-form-label-group", className), "data-oods-component": "FormLabelGroup", htmlFor: htmlFor ?? forId ?? inputId, ...rest, children: [
@@ -2963,7 +2918,7 @@ var ClassificationBadge = createBadgeFamily({
   labelKeys: ["label", "text", "category", "value"],
   statusKeys: ["status", "state", "mode"]
 });
-var ClassificationEditor = React7__namespace.forwardRef(
+var ClassificationEditor = React9__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, category, primaryCategory, tags, modes, mode, classificationMode, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const tagText = typeof tags === "string" ? tags : tags === void 0 ? "" : JSON.stringify(tags);
@@ -3009,42 +2964,43 @@ var OwnerBadge = createBadgeFamily({
   labelKeys: ["label", "text", "owner", "ownerType", "value"],
   statusKeys: ["status", "state"]
 });
-var OwnershipSummary = React7__namespace.forwardRef(
+var OwnershipSummary = React9__namespace.forwardRef(
   ({ title, label, heading, name, ownerLabel, ownerId, owner_id, ownerType, owner_type, role, ownershipRole, summary: summary2, text, description, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const terms = [["Owner", ownerId === void 0 && owner_id === void 0 && ownerLabel === void 0 ? void 0 : componentContracts.formatReferenceLabel(ownerId ?? owner_id, ownerLabel, "Owner")], ["Owner Type", firstScalar(ownerType, owner_type)], ["Role", firstScalar(role, ownershipRole)]].filter((entry) => entry[1] !== void 0);
-    const fallback2 = firstText(summary2, text, description);
+    const fallback = firstText(summary2, text, description);
     return /* @__PURE__ */ jsxRuntime.jsxs("section", { ref, className: classes7("oods-ownership-summary", className), "data-oods-component": "OwnershipSummary", "data-summary-type": "ownership", ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-summary-title": "true", children: firstText(title, label, heading, name) ?? "Ownership Summary" }),
       content.authored || content.scalar !== void 0 ? children : terms.length ? /* @__PURE__ */ jsxRuntime.jsx("dl", { children: terms.map(([term, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-summary-item": "true", children: [
         /* @__PURE__ */ jsxRuntime.jsx("dt", { children: term }),
         /* @__PURE__ */ jsxRuntime.jsx("dd", { children: value })
-      ] }, term)) }) : fallback2 ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback2 }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
+      ] }, term)) }) : fallback ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
     ] });
   }
 );
 OwnershipSummary.displayName = "OODS.OwnershipSummary";
-var TagSummary = React7__namespace.forwardRef(
+var TagSummary = React9__namespace.forwardRef(
   ({ title, label, heading, name, tagCount, count, tags, summary: summary2, text, description, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const tagText = Array.isArray(tags) ? normalizeTagItems(tags).join(", ") || void 0 : firstText(tags);
     const terms = [["Tag Count", firstScalar(tagCount, count)], ["Tags", tagText]].filter((entry) => entry[1] !== void 0);
-    const fallback2 = firstText(summary2, text, description);
+    const fallback = firstText(summary2, text, description);
     return /* @__PURE__ */ jsxRuntime.jsxs("section", { ref, className: classes7("oods-tags-summary", className), "data-oods-component": "TagSummary", "data-summary-type": "tags", ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-summary-title": "true", children: firstText(title, label, heading, name) ?? "Tag Summary" }),
       content.authored || content.scalar !== void 0 ? children : terms.length ? /* @__PURE__ */ jsxRuntime.jsx("dl", { children: terms.map(([term, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-summary-item": "true", children: [
         /* @__PURE__ */ jsxRuntime.jsx("dt", { children: term }),
         /* @__PURE__ */ jsxRuntime.jsx("dd", { children: value })
-      ] }, term)) }) : fallback2 ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback2 }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
+      ] }, term)) }) : fallback ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
     ] });
   }
 );
 TagSummary.displayName = "OODS.TagSummary";
-var OwnershipMeta = React7__namespace.forwardRef(
-  ({ title, label, heading, name, ownerType, owner_type, role, ownershipRole, children, className, ...rest }, ref) => {
+var OwnershipMeta = React9__namespace.forwardRef(
+  ({ title, label, heading, name, ownerType, owner_type, role, ownershipRole, ownerLabel, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const terms = [["Owner Type", firstScalar(ownerType, owner_type)], ["Role", firstScalar(role, ownershipRole)]].filter((entry) => entry[1] !== void 0);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes7("oods-ownership-meta", className), "data-oods-component": "OwnershipMeta", "data-meta-type": "ownership", ...rest, children: content.authored || content.scalar !== void 0 ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    const phrase = ownerLabel !== void 0 ? componentContracts.ownershipPhrase(ownerLabel, firstScalar(ownerType, owner_type), firstScalar(role, ownershipRole)) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes7("oods-ownership-meta", className), "data-oods-component": "OwnershipMeta", "data-meta-type": "ownership", ...rest, children: content.authored || content.scalar !== void 0 ? children : phrase ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-meta-item": "true", children: phrase }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { "data-meta-title": "true", children: firstText(title, label, heading, name) ?? "Ownership" }),
       terms.map(([term, value]) => /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-meta-item": "true", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
@@ -3078,22 +3034,22 @@ var CancellationBadge = createBadgeFamily({
   booleanProps: ["cancelAtPeriodEnd", "isCancelled", "value"],
   booleanLabels: ["Cancellation scheduled", "No cancellation scheduled"]
 });
-var ArchiveSummary = React7__namespace.forwardRef(
+var ArchiveSummary = React9__namespace.forwardRef(
   ({ title, label, heading, name, isArchived, archived, status, archivedAt, reason, archiveReason, summary: summary2, text, description, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const terms = [["Archived", componentContracts.summaryValue(isArchived ?? archived ?? status)], ["Archived At", archivedAt ? componentContracts.formatDateTime(archivedAt) : void 0], ["Reason", firstText(reason, archiveReason)]].filter((entry) => entry[1] !== void 0);
-    const fallback2 = firstText(summary2, text, description);
+    const fallback = firstText(summary2, text, description);
     return /* @__PURE__ */ jsxRuntime.jsxs("section", { ref, className: classes7("oods-archive-summary", className), "data-oods-component": "ArchiveSummary", "data-summary-type": "archive", ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-summary-title": "true", children: firstText(title, label, heading, name) ?? "Archive Summary" }),
       content.authored || content.scalar !== void 0 ? children : terms.length ? /* @__PURE__ */ jsxRuntime.jsx("dl", { children: terms.map(([term, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-summary-item": "true", children: [
         /* @__PURE__ */ jsxRuntime.jsx("dt", { children: term }),
         /* @__PURE__ */ jsxRuntime.jsx("dd", { children: value })
-      ] }, term)) }) : fallback2 ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback2 }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
+      ] }, term)) }) : fallback ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
     ] });
   }
 );
 ArchiveSummary.displayName = "OODS.ArchiveSummary";
-var PriceCardMeta = React7__namespace.forwardRef(
+var PriceCardMeta = React9__namespace.forwardRef(
   ({ title, label, heading, name, model, pricingModel, interval, billingInterval, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const terms = [["Model", componentContracts.formatPriceCode(firstText(model, pricingModel))], ["Interval", componentContracts.formatPriceCode(firstText(interval, billingInterval))]].filter((entry) => entry[1] !== void 0);
@@ -3111,12 +3067,12 @@ var PriceCardMeta = React7__namespace.forwardRef(
   }
 );
 PriceCardMeta.displayName = "OODS.PriceCardMeta";
-var CancellationForm = React7__namespace.forwardRef(
+var CancellationForm = React9__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, allowedReasons, reasonCode, reason, cancellationReason, embedded, reasonHelp, codeHelp, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const choices = normalizeSelectOptions(allowedReasons ?? ["no_longer_needed", "budget", "duplicate"]);
     if (reasonCode && !choices.some((choice) => choice.value === reasonCode)) choices.unshift({ value: reasonCode, label: reasonCode });
-    return React7__namespace.createElement(embedded ? "fieldset" : "form", {
+    return React9__namespace.createElement(embedded ? "fieldset" : "form", {
       ...rest,
       ref,
       className: classes7("oods-cancellation-form", className),
@@ -3148,11 +3104,11 @@ function BillingSummaryBadge({ id, amount, currency, minorUnits, interval, showI
   return /* @__PURE__ */ jsxRuntime.jsx("span", { id, className: `oods-billing-summary ${className ?? ""}`.trim(), "data-oods-component": "BillingSummaryBadge", children: showInterval ? componentContracts.billingSummary(amount, currency, minorUnits, interval) : componentContracts.formatBillingAmount(amount, currency, minorUnits) });
 }
 function BillingAmountInput({ id, amount, currency = "usd", minorUnits = componentContracts.BILLING_MINOR_UNITS, label = "Billing amount", name, disabled, className, help, onChange }) {
-  const generatedId = React7__namespace.useId();
+  const generatedId = React9__namespace.useId();
   const controlId = id ?? `billing-amount-${generatedId}`;
-  const [text, setText] = React7__namespace.useState(() => componentContracts.billingAmountText(amount, minorUnits));
-  const [error, setError] = React7__namespace.useState(() => componentContracts.billingAmountMessage(amount, minorUnits));
-  React7__namespace.useEffect(() => {
+  const [text, setText] = React9__namespace.useState(() => componentContracts.billingAmountText(amount, minorUnits));
+  const [error, setError] = React9__namespace.useState(() => componentContracts.billingAmountMessage(amount, minorUnits));
+  React9__namespace.useEffect(() => {
     setText(componentContracts.billingAmountText(amount, minorUnits));
     setError(componentContracts.billingAmountMessage(amount, minorUnits));
   }, [amount, minorUnits]);
@@ -3186,10 +3142,10 @@ function BillingAmountInput({ id, amount, currency = "usd", minorUnits = compone
   ] });
 }
 function BillingIntervalSelector({ id, interval, intervals = componentContracts.BILLING_INTERVALS, label = "Billing interval", name, disabled, className, help, onChange }) {
-  const generatedId = React7__namespace.useId();
+  const generatedId = React9__namespace.useId();
   const controlId = id ?? `billing-interval-${generatedId}`;
-  const [value, setValue] = React7__namespace.useState(interval ?? "");
-  React7__namespace.useEffect(() => {
+  const [value, setValue] = React9__namespace.useState(interval ?? "");
+  React9__namespace.useEffect(() => {
     setValue(interval ?? "");
   }, [interval]);
   const error = componentContracts.billingIntervalMessage(value || void 0, intervals);
@@ -3297,8 +3253,8 @@ function AuditSummaryCard({ id, title = "Audit summary", showTransitionCount = t
   ] });
 }
 function SortIndicator({ id, label = "Sort", onChange, "data-oods-action": action, ...values }) {
-  const [state, setState] = React7__namespace.useState(() => componentContracts.initialSort(values));
-  React7__namespace.useEffect(() => setState(componentContracts.initialSort(values)), [values.sortField, values.sortDirection, values.sortActive, values.defaultSortField, values.defaultSortDirection]);
+  const [state, setState] = React9__namespace.useState(() => componentContracts.initialSort(values));
+  React9__namespace.useEffect(() => setState(componentContracts.initialSort(values)), [values.sortField, values.sortDirection, values.sortActive, values.defaultSortField, values.defaultSortDirection]);
   const sort = componentContracts.ariaSort(state);
   return /* @__PURE__ */ jsxRuntime.jsx("table", { id, className: "oods-sort-indicator", "data-oods-component": "SortIndicator", "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", "aria-sort": sort, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "data-oods-action": action, "aria-label": `${label} ${state.field}`, onClick: () => {
     const next = componentContracts.nextSort(state, values.triStateSort);
@@ -3306,14 +3262,15 @@ function SortIndicator({ id, label = "Sort", onChange, "data-oods-action": actio
     onChange?.(next);
   }, children: `${state.field}: ${sort}` }) }) }) }) });
 }
-var TimelineEntryLabel = React7__namespace.forwardRef(({ compact = true, maxLength, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(InlineLabel, { ...props, ref, maxLength: maxLength ?? (compact ? 40 : void 0), "data-oods-component": "TimelineEntryLabel", "data-timeline-label": "true", "data-compact": compact }));
+var TimelineEntryLabel = React9__namespace.forwardRef(({ compact = true, maxLength, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(InlineLabel, { ...props, ref, maxLength: maxLength ?? (compact ? 40 : void 0), "data-oods-component": "TimelineEntryLabel", "data-timeline-label": "true", "data-compact": compact }));
 TimelineEntryLabel.displayName = "OODS.TimelineEntryLabel";
 function eventRecipe(id, kind, title) {
   return function TraitEvent({ id: elementId, title: heading = title, ...values }) {
     const rows = componentContracts.traitEventRows(kind, values);
+    if (!rows.length) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("article", { id: elementId, className: "oods-trait-recipe", "data-oods-component": id, "aria-label": heading, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { children: heading }),
-      rows.length ? /* @__PURE__ */ jsxRuntime.jsx("ol", { children: rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("ol", { children: rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("strong", { children: row.title }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { children: row.at ? /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: row.at, children: row.time }) : row.time }),
         row.actor && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
@@ -3328,7 +3285,7 @@ function eventRecipe(id, kind, title) {
           "Code: ",
           row.code
         ] })
-      ] }, index)) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No events recorded." })
+      ] }, index)) })
     ] });
   };
 }
@@ -3349,9 +3306,9 @@ function CommunicationDetailPanel({ id, title = "Communication", channels = [],
   ] });
 }
 function ColorStatePicker({ id, title = "Color state", colorStates = componentContracts.DEFAULT_COLOR_STATES, value, disabled, onChange }) {
-  const generatedId = React7__namespace.useId();
-  const [selected, setSelected] = React7__namespace.useState(value ?? colorStates[0] ?? "");
-  React7__namespace.useEffect(() => setSelected(value ?? colorStates[0] ?? ""), [value, colorStates]);
+  const generatedId = React9__namespace.useId();
+  const [selected, setSelected] = React9__namespace.useState(value ?? colorStates[0] ?? "");
+  React9__namespace.useEffect(() => setSelected(value ?? colorStates[0] ?? ""), [value, colorStates]);
   return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { id, className: "oods-trait-recipe", "data-oods-component": "ColorStatePicker", children: [
     /* @__PURE__ */ jsxRuntime.jsx("legend", { children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(Select, { id: `${id ?? generatedId}-state`, label: "Color state", name: "color_state", value: selected, disabled, options: [...!colorStates.includes(selected) ? [{ value: selected, label: selected || "Choose state", disabled: true }] : [], ...colorStates.map((value2) => ({ value: value2, label: componentContracts.formatReadOnlyValue(value2, "string", true) }))], onValueChange: (next) => {
@@ -3373,9 +3330,9 @@ function StatusColorLegend({ id, title = "Status colors", colorStates = componen
   ] });
 }
 function GeoFieldMappingForm({ id, title = "Geographic fields", embedded = false, disabled, onChange, ...values }) {
-  const generatedId = React7__namespace.useId();
-  const [value, setValue] = React7__namespace.useState(() => componentContracts.geoFieldMapping(values));
-  React7__namespace.useEffect(() => setValue(componentContracts.geoFieldMapping(values)), [values.latitude, values.longitude, values.identifier, values.autoDetect]);
+  const generatedId = React9__namespace.useId();
+  const [value, setValue] = React9__namespace.useState(() => componentContracts.geoFieldMapping(values));
+  React9__namespace.useEffect(() => setValue(componentContracts.geoFieldMapping(values)), [values.latitude, values.longitude, values.identifier, values.autoDetect]);
   const update = (patch) => {
     const next = { ...value, ...patch };
     setValue(next);
@@ -3409,11 +3366,11 @@ function GeocodablePreview({ id, title = "Geographic data", resolution, requires
 }
 function controls(id) {
   const Component = ({ id: htmlId, title = componentContracts.VIZ_CONTROL_TITLES[id], value, channel = "x", disabled, onChange }) => {
-    const generatedId = React7__namespace.useId();
-    const [current, setCurrent] = React7__namespace.useState(value ?? {});
-    const [drafts, setDrafts] = React7__namespace.useState({});
-    const [errors, setErrors] = React7__namespace.useState({});
-    React7__namespace.useEffect(() => {
+    const generatedId = React9__namespace.useId();
+    const [current, setCurrent] = React9__namespace.useState(value ?? {});
+    const [drafts, setDrafts] = React9__namespace.useState({});
+    const [errors, setErrors] = React9__namespace.useState({});
+    React9__namespace.useEffect(() => {
       setCurrent(value ?? {});
       setDrafts({});
       setErrors({});
@@ -3487,6 +3444,215 @@ var VizLinePreview = preview("VizLinePreview", "line");
 var VizMarkPreview = preview("VizMarkPreview", "bar");
 var VizPointPreview = preview("VizPointPreview", "scatter");
 var VizScatterPreview = preview("VizScatterPreview", "scatter");
+var classes8 = (...values) => values.filter(Boolean).join(" ");
+var Combobox = React9__namespace.forwardRef(
+  ({
+    id,
+    label,
+    options = [],
+    value,
+    defaultValue = "",
+    placeholder,
+    name,
+    required,
+    disabled,
+    help,
+    validation,
+    size = "md",
+    className,
+    style,
+    onValueChange,
+    onUpdate,
+    onKeyDown,
+    onBlur,
+    onClick,
+    "aria-describedby": nativeDescription,
+    ...rest
+  }, ref) => {
+    const [internalValue, setInternalValue] = React9__namespace.useState(defaultValue);
+    const [query, setQuery] = React9__namespace.useState(null);
+    const [open, setOpen] = React9__namespace.useState(false);
+    const [active, setActive] = React9__namespace.useState(-1);
+    const rootRef = React9__namespace.useRef(null);
+    const listboxRef = React9__namespace.useRef(null);
+    const chosenValue = value ?? internalValue;
+    const chosen = options.find((option) => option.value === chosenValue);
+    const text = query ?? chosen?.label ?? "";
+    const needle = (query ?? "").trim().toLowerCase();
+    const matches = options.map((option) => needle === "" || option.label.toLowerCase().includes(needle));
+    const matchCount = matches.filter(Boolean).length;
+    const reachable = options.flatMap((option, index) => matches[index] && !option.disabled ? [index] : []);
+    const optionId = (index) => `${id}-option-${index}`;
+    const validationId = validation?.id ?? `${id}-validation`;
+    const describedBy = [nativeDescription, help ? `${id}-help` : void 0, validation?.message ? validationId : void 0].filter(Boolean).join(" ") || void 0;
+    const tone = validation ? validation.state === "error" ? "critical" : validation.state : void 0;
+    const close = () => {
+      setOpen(false);
+      setActive(-1);
+    };
+    const emit = (next) => {
+      if (value === void 0) setInternalValue(next);
+      onValueChange?.(next);
+      onUpdate?.(next);
+    };
+    const pick = (index) => {
+      const option = options[index];
+      if (!option || option.disabled) return;
+      setQuery(null);
+      close();
+      if (option.value !== chosenValue) emit(option.value);
+    };
+    React9__namespace.useEffect(() => {
+      if (!open) return void 0;
+      const outside = (event) => {
+        if (!rootRef.current?.contains(event.target)) close();
+      };
+      document.addEventListener("pointerdown", outside);
+      return () => document.removeEventListener("pointerdown", outside);
+    }, [open]);
+    React9__namespace.useEffect(() => {
+      if (!open || active < 0) return;
+      const element = listboxRef.current?.children[active];
+      element?.scrollIntoView?.({ block: "nearest" });
+    }, [open, active]);
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || disabled || event.nativeEvent.isComposing) return;
+      const first = reachable[0] ?? -1;
+      const last = reachable[reachable.length - 1] ?? -1;
+      const at = reachable.indexOf(active);
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          setOpen(true);
+          setActive(!open || at === -1 ? first : reachable[(at + 1) % reachable.length]);
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          setOpen(true);
+          setActive(!open || at <= 0 ? last : reachable[at - 1]);
+          return;
+        case "Home":
+        case "End":
+          if (!open) return;
+          event.preventDefault();
+          setActive(event.key === "Home" ? first : last);
+          return;
+        case "Enter":
+          if (!open) return;
+          event.preventDefault();
+          if (active >= 0) pick(active);
+          return;
+        case "Escape":
+          if (open) {
+            event.preventDefault();
+            close();
+            return;
+          }
+          if (text === "" && chosenValue === "") return;
+          event.preventDefault();
+          setQuery(null);
+          if (chosenValue !== "") emit("");
+          return;
+        case "Tab":
+          if (open) close();
+          return;
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: classes8("oods-field", "oods-combobox", className),
+        style: {
+          ...tone ? {
+            "--cmp-input-message-border": `var(--sys-status-${tone}-border)`,
+            "--cmp-input-message-text": `var(--sys-status-${tone}-text)`
+          } : {},
+          ...style
+        },
+        "data-oods-component": "Combobox",
+        "data-size": size,
+        "data-validation-state": validation?.state,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { id: `${id}-label`, className: "oods-field-label", htmlFor: id, children: [
+            label,
+            required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-field-required", "aria-hidden": "true", children: "*" }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-combobox__control", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ...rest,
+                ref,
+                id,
+                type: "text",
+                role: "combobox",
+                className: "oods-field-control oods-combobox__input",
+                value: text,
+                placeholder,
+                autoComplete: "off",
+                "aria-autocomplete": "list",
+                "aria-expanded": open,
+                "aria-controls": `${id}-listbox`,
+                "aria-activedescendant": open && active >= 0 ? optionId(active) : void 0,
+                "aria-describedby": describedBy,
+                "aria-invalid": validation?.state === "error" || void 0,
+                required,
+                disabled,
+                onChange: (event) => {
+                  setQuery(event.currentTarget.value);
+                  setOpen(true);
+                  setActive(-1);
+                },
+                onKeyDown: handleKeyDown,
+                onClick: (event) => {
+                  onClick?.(event);
+                  if (!event.defaultPrevented && !disabled) setOpen(true);
+                },
+                onBlur: (event) => {
+                  onBlur?.(event);
+                  setQuery(null);
+                  close();
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-combobox__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: "chevron-down" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-combobox__popup", hidden: !open, onMouseDown: (event) => event.preventDefault(), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { ref: listboxRef, id: `${id}-listbox`, className: "oods-combobox__listbox", role: "listbox", "aria-labelledby": `${id}-label`, children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "li",
+                {
+                  id: optionId(index),
+                  className: "oods-combobox__option",
+                  role: "option",
+                  "aria-selected": option.value === chosenValue,
+                  "aria-disabled": option.disabled || void 0,
+                  "data-value": option.value,
+                  "data-active": index === active ? "true" : void 0,
+                  hidden: !matches[index],
+                  onClick: () => pick(index),
+                  onPointerMove: () => {
+                    if (!option.disabled && index !== active) setActive(index);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-combobox__option-label", children: option.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-combobox__check", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: "check" }) })
+                  ]
+                },
+                option.value
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-combobox__empty", role: "status", children: open && matchCount === 0 ? "No matches" : "" })
+            ] })
+          ] }),
+          name ? /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: chosenValue }) : null,
+          help ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${id}-help`, className: "oods-field-help", children: help }) : null,
+          validation?.message ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: validationId, className: "oods-field-error", role: validation.state === "error" ? "alert" : void 0, children: validation.message }) : null
+        ]
+      }
+    );
+  }
+);
+Combobox.displayName = "OODS.Combobox";
 
 exports.AddressCollectionPanel = AddressCollectionPanel;
 exports.AddressEditor = AddressEditor;
@@ -3519,10 +3685,12 @@ exports.ClassificationPanel = ClassificationPanel;
 exports.ColorStatePicker = ColorStatePicker;
 exports.ColorSwatch = ColorSwatch;
 exports.ColorizedBadge = ColorizedBadge;
+exports.Combobox = Combobox;
 exports.CommunicationDetailPanel = CommunicationDetailPanel;
 exports.CycleProgressCard = CycleProgressCard;
 exports.DatePicker = DatePicker;
 exports.DetailHeader = DetailHeader;
+exports.Dialog = Dialog;
 exports.FilterPanel = FilterPanel;
 exports.FormLabelGroup = FormLabelGroup;
 exports.GeoFieldMappingForm = GeoFieldMappingForm;
@@ -3553,6 +3721,7 @@ exports.RelativeTimestamp = RelativeTimestamp;
 exports.RoleAssignmentForm = RoleAssignmentForm;
 exports.RoleBadgeList = RoleBadgeList;
 exports.SearchInput = SearchInput;
+exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.SortIndicator = SortIndicator;
 exports.Stack = Stack;
@@ -3561,6 +3730,7 @@ exports.StatusBadge = StatusBadge;
 exports.StatusColorLegend = StatusColorLegend;
 exports.StatusSelector = StatusSelector;
 exports.StatusTimeline = StatusTimeline;
+exports.Switch = Switch;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.TagInput = TagInput;