@oods/components-react 0.3.2 → 0.4.0

package/dist/ported.cjs

@@ -26,337 +26,6 @@ function _interopNamespace(e) {
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 // src/ported.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" }
-};
-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 classes = (...values) => values.filter(Boolean).join(" ");
 var describedByIds = (id, help, validation, nativeDescription) => [
   nativeDescription,
@@ -383,7 +52,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,
@@ -508,17 +177,16 @@ var InputPrimitive = React3__namespace.forwardRef(
 InputPrimitive.displayName = "OODS.Input";
 var Input = InputPrimitive;
 var DatePicker = React3__namespace.forwardRef(
-  ({ pickerClassName, pickerStyle, inputClassName, inputStyle, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ({ pickerClassName, pickerStyle, inputClassName, inputStyle, className, style, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes("oods-date-picker", className), style, "data-oods-component": "DatePicker", children: /* @__PURE__ */ jsxRuntime.jsx(
     Input,
     {
       ref,
       type: "date",
-      "data-oods-component": "DatePicker",
       inputClassName: classes("form-field__date-picker", inputClassName, pickerClassName),
       inputStyle: { ...inputStyle, ...pickerStyle },
       ...rest
     }
-  )
+  ) })
 );
 DatePicker.displayName = "OODS.DatePicker";
 var Checkbox = React3__namespace.forwardRef(
@@ -584,6 +252,84 @@ var Checkbox = React3__namespace.forwardRef(
   }
 );
 Checkbox.displayName = "OODS.Checkbox";
+var Switch = React3__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] = React3__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: classes("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 = React3__namespace.forwardRef(
   ({
     id,
@@ -722,6 +468,20 @@ var Textarea = React3__namespace.forwardRef(
   }
 );
 Textarea.displayName = "OODS.Textarea";
+var REACT_NAMES = {
+  viewBox: "viewBox",
+  fill: "fill",
+  stroke: "stroke",
+  "stroke-width": "strokeWidth",
+  "stroke-linecap": "strokeLinecap",
+  "stroke-linejoin": "strokeLinejoin",
+  "aria-hidden": "aria-hidden",
+  focusable: "focusable"
+};
+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) => React3__namespace.createElement(shape.tag, { key: index, ...shape.attrs })) });
+}
 var classes2 = (...values) => values.filter(Boolean).join(" ");
 var Badge = React3__namespace.forwardRef(
   ({
@@ -740,18 +500,19 @@ var Badge = React3__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 statusable-badge__icon", "aria-hidden": "true", children: resolvedIcon }) : null;
+    const iconNode = resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__icon", "aria-hidden": "true", children: resolvedIcon }) : null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
         ref,
-        className: classes2("oods-badge", "statusable-badge", className),
+        className: classes2("oods-badge", className),
         "data-oods-component": "Badge",
         "data-status": status,
         "data-domain": domain,
@@ -763,16 +524,12 @@ var Badge = React3__namespace.forwardRef(
           "--cmp-badge-background": tokenSet.background,
           "--cmp-badge-border": tokenSet.border,
           "--cmp-badge-text": tokenSet.foreground,
-          "--statusable-badge-background": tokenSet.background,
-          "--statusable-badge-border": tokenSet.border,
-          "--statusable-badge-foreground": tokenSet.foreground,
-          "--statusable-badge-icon-color": tokenSet.foreground,
           ...style
         },
         ...rest,
         children: [
           iconPosition === "start" ? iconNode : null,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__label statusable-badge__label", children: resolvedContent }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__label", children: resolvedContent }),
           iconPosition === "end" ? iconNode : null
         ]
       }
@@ -800,13 +557,14 @@ var Banner = React3__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",
@@ -814,7 +572,7 @@ var Banner = React3__namespace.forwardRef(
         ref,
         role,
         "aria-live": role === "alert" ? "assertive" : "polite",
-        className: classes2("oods-banner", "statusable-banner", className),
+        className: classes2("oods-banner", className),
         "data-oods-component": "Banner",
         "data-status": status,
         "data-domain": domain,
@@ -824,28 +582,24 @@ var Banner = React3__namespace.forwardRef(
           "--cmp-banner-background": tokenSet.background,
           "--cmp-banner-border": tokenSet.border,
           "--cmp-banner-text": tokenSet.foreground,
-          "--statusable-banner-background": tokenSet.background,
-          "--statusable-banner-border": tokenSet.border,
-          "--statusable-banner-foreground": tokenSet.foreground,
-          "--statusable-banner-icon-color": tokenSet.foreground,
           ...style
         },
         ...rest,
         children: [
-          resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-banner__icon statusable-banner__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-banner__content statusable-banner__content", children: [
-            heading ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "oods-banner__title statusable-banner__title", children: heading }) : null,
-            body ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-banner__detail statusable-banner__description", children: body }) : null,
-            actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oods-banner__actions statusable-banner__actions", children: actions }) : null
+          resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-banner__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-banner__content", children: [
+            heading ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "oods-banner__title", children: heading }) : null,
+            body ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-banner__detail", children: body }) : null,
+            actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oods-banner__actions", children: actions }) : null
           ] }),
           onDismiss ? /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
-              className: "oods-banner-dismiss oods-banner__dismiss statusable-banner__dismiss",
+              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
         ]
@@ -900,6 +654,84 @@ var Button = React3__namespace.forwardRef(
   }
 );
 Button.displayName = "OODS.Button";
+var noSubscription = () => () => void 0;
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React3__namespace.useEffect : React3__namespace.useLayoutEffect;
+var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
+var hasContent = (node) => node !== void 0 && node !== null && node !== false && node !== "";
+var Dialog = React3__namespace.forwardRef(
+  ({
+    id,
+    open = false,
+    modal = true,
+    title,
+    description,
+    dismissLabel = "Close",
+    size = "md",
+    actions,
+    children,
+    className,
+    onClose,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const generatedId = React3__namespace.useId().replace(/[^\w-]/g, "");
+    const dialogId = id ?? `oods-dialog-${generatedId}`;
+    const element = React3__namespace.useRef(null);
+    const openRef = React3__namespace.useRef(open);
+    const serverMarkup = React3__namespace.useSyncExternalStore(noSubscription, () => false, () => true);
+    const managed = modal && !serverMarkup && canShowModal();
+    const setRef = React3__namespace.useCallback((node) => {
+      element.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }, [ref]);
+    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();
+    }, [open, managed]);
+    const requestClose = (event) => {
+      event.preventDefault();
+      onClose?.();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "dialog",
+      {
+        ref: setRef,
+        id: dialogId,
+        className: classes2("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 (openRef.current && !element.current?.open) 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 = React3__namespace.forwardRef(
   ({ as = "div", elevated = false, className, ...rest }, ref) => {
     const Element = as;
@@ -965,11 +797,12 @@ var StatusBadge = React3__namespace.forwardRef(
     compact,
     variant,
     title,
+    className,
     "aria-label": ariaLabel,
     ...rest
   }, ref) => {
     const resolvedStatus = status ?? value ?? "unknown";
-    const presentation = getStatusPresentation(domain, resolvedStatus);
+    const presentation = componentContracts.getStatusPresentation(domain, resolvedStatus);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Badge,
       {
@@ -982,6 +815,7 @@ var StatusBadge = React3__namespace.forwardRef(
         content: children ?? content,
         title: title ?? presentation.description,
         "aria-label": ariaLabel ?? label ?? `Status: ${presentation.label}`,
+        className: classes3("oods-status-badge", className),
         "data-oods-component": "StatusBadge",
         ...rest
       }
@@ -989,8 +823,8 @@ var StatusBadge = React3__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, {
@@ -1120,29 +954,29 @@ var TimelinePrimitive = React3__namespace.forwardRef(
         "data-timeline-type": kind,
         ...rest,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "oods-timeline__title", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "oods-timeline__title", "data-timeline-title": "true", children: title }),
           kind === "status" && status ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__current", "data-timeline-current": "true", children: [
             "Current status: ",
             humanize(status)
           ] }) : null,
-          transitionCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          transitionCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { "data-timeline-transitions": "true", children: [
             "Allowed transitions: ",
             allowedTransitions?.join(", ")
           ] }) : null,
-          children ?? /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "oods-timeline__events", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { "data-timeline-empty": "true", children: "No events" }) : visibleEvents.map((event, index) => {
+          children ?? /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "oods-timeline__events", "data-timeline-events": "true", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { "data-timeline-empty": "true", children: "No events" }) : visibleEvents.map((event, index) => {
             const timestamp = event.timestamp ?? event.datetime;
             const actor = event.actor ?? event.actorId ?? event.actor_id;
             const eventLabel = event.label ?? event.title ?? (event.from && event.to ? `${humanize(event.from)} \u2192 ${humanize(event.to)}` : void 0) ?? (event.status ? humanize(event.status) : void 0) ?? (event.state ? humanize(event.state) : void 0) ?? "Event";
             const detail = event.detail ?? event.description;
             return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "oods-timeline__event", "data-timeline-event": "true", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__label", children: eventLabel }),
-              timestamp ? /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: timestamp, children: componentContracts.formatDateTime(timestamp) }) : null,
-              detail ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__detail", children: detail }) : null,
-              showActorId && actor ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__actor", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__label", "data-timeline-label": "true", children: eventLabel }),
+              timestamp ? /* @__PURE__ */ jsxRuntime.jsx("time", { "data-timeline-time": "true", dateTime: timestamp, children: componentContracts.formatDateTime(timestamp) }) : null,
+              detail ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__detail", "data-timeline-detail": "true", children: detail }) : null,
+              showActorId && actor ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__actor", "data-timeline-actor": "true", children: [
                 "Actor: ",
                 actor
               ] }) : null,
-              showReason && event.reason ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__reason", children: [
+              showReason && event.reason ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__reason", "data-timeline-reason": "true", children: [
                 "Reason: ",
                 event.reason
               ] }) : null
@@ -1333,7 +1167,7 @@ var SearchInput = React3__namespace.forwardRef(
               "aria-label": "Clear search",
               disabled,
               onClick: clear,
-              children: "\xD7"
+              children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: "x" })
             }
           ) : null
         ]
@@ -1521,7 +1355,7 @@ var RelativeTimestamp = React3__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(