@oods/components-vue 0.3.0

package/dist/index.js

@@ -0,0 +1,2995 @@
+import { defineComponent, h, ref, computed, useId, watch, nextTick, onMounted, onBeforeUnmount, isVNode, Text as Text$1, Comment, Fragment } from 'vue';
+import { svgCarriesTitle, assertStaticSvg, formatPriceAmount, formatPriceCode, formatReferenceLabel, summaryValue, formatDateTime, dateTimeInputValue, formatReadOnlyValue, BILLING_MINOR_UNITS, billingSummary, formatBillingAmount, billingAmountText, billingAmountMessage, parseBillingAmount, BILLING_INTERVALS, billingIntervalMessage, billingCycle, auditSummary, initialSort, ariaSort, nextSort, recipeItemLabels, DEFAULT_COLOR_STATES, geoFieldMapping, currencyMinorUnits, billingPaymentSummary, billingPaymentRows, traitEventRows, vizControlFields, VIZ_CONTROL_TITLES, vizFieldValue, vizSummaryRows, editVizIntent } from '@oods/component-contracts';
+
+// src/primitives.ts
+var toneProp = String;
+var emphasisProp = String;
+var sizeProp = String;
+var STATUS_TONES = {
+  active: "success",
+  paid: "success",
+  success: "success",
+  successful: "success",
+  future: "info",
+  pending: "info",
+  pending_cancellation: "info",
+  posted: "info",
+  processing: "info",
+  trialing: "accent",
+  caution: "warning",
+  warning: "warning",
+  delinquent: "critical",
+  error: "critical",
+  failed: "critical",
+  past_due: "critical",
+  unpaid: "critical"
+};
+var DOMAIN_STATUS_TONES = {
+  subscription: {
+    future: "info",
+    trialing: "accent",
+    active: "success",
+    paused: "neutral",
+    pending_cancellation: "info",
+    past_due: "critical",
+    unpaid: "critical",
+    terminated: "neutral"
+  },
+  invoice: {
+    draft: "neutral",
+    posted: "info",
+    paid: "success",
+    past_due: "critical",
+    void: "neutral"
+  }
+};
+function normalizeStatus(status) {
+  return status?.trim().toLowerCase().replace(/[\s-]+/g, "_") ?? "";
+}
+function resolveTone(tone, status, domain) {
+  const normalizedStatus = normalizeStatus(status);
+  const normalizedDomain = domain?.trim().toLowerCase() ?? "";
+  return tone ?? DOMAIN_STATUS_TONES[normalizedDomain]?.[normalizedStatus] ?? STATUS_TONES[normalizedStatus] ?? "neutral";
+}
+function tokenTone(tone) {
+  if (tone === "positive") return "success";
+  if (tone === "danger") return "critical";
+  return tone;
+}
+function statusLabel(status) {
+  return normalizeStatus(status).split("_").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join(" ");
+}
+function slotOrValue(slot, value) {
+  return slot ? slot() : value;
+}
+var Badge = defineComponent({
+  name: "OodsBadge",
+  props: {
+    content: { type: [String, Number], default: void 0 },
+    status: String,
+    domain: { type: String, default: "subscription" },
+    tone: toneProp,
+    emphasis: { type: emphasisProp, default: "subtle" },
+    icon: { type: [String, Number, Object], default: void 0 }
+  },
+  setup(props, { slots }) {
+    return () => {
+      const tone = resolveTone(props.tone, props.status, props.domain);
+      const palette = tokenTone(tone);
+      return h("span", {
+        class: "oods-badge",
+        "data-oods-component": "Badge",
+        "data-status": props.status,
+        "data-domain": props.domain,
+        "data-tone": tone,
+        "data-emphasis": props.emphasis,
+        style: {
+          "--cmp-badge-background": `var(--sys-status-${palette}-surface)`,
+          "--cmp-badge-border": `var(--sys-status-${palette}-border)`,
+          "--cmp-badge-text": `var(--sys-status-${palette}-text)`
+        }
+      }, [
+        props.icon || slots.icon ? h("span", { class: "oods-badge-icon", "aria-hidden": "true" }, [slotOrValue(slots.icon, props.icon)]) : null,
+        slotOrValue(slots.default, props.content ?? statusLabel(props.status))
+      ]);
+    };
+  }
+});
+var Banner = defineComponent({
+  name: "OodsBanner",
+  props: {
+    title: { type: String, default: "" },
+    detail: { type: String, default: "" },
+    content: { type: [String, Number], default: "" },
+    status: String,
+    domain: { type: String, default: "subscription" },
+    tone: toneProp,
+    emphasis: { type: emphasisProp, default: "subtle" },
+    dismissLabel: String
+  },
+  emits: {
+    dismiss: () => true
+  },
+  setup(props, { emit, slots }) {
+    return () => {
+      const tone = resolveTone(props.tone, props.status, props.domain);
+      const palette = tokenTone(tone);
+      return h("section", {
+        class: "oods-banner",
+        "data-oods-component": "Banner",
+        "data-status": props.status,
+        "data-domain": props.domain,
+        "data-tone": tone,
+        "data-emphasis": props.emphasis,
+        role: tone === "critical" || tone === "danger" ? "alert" : "status",
+        "aria-live": tone === "critical" || tone === "danger" ? "assertive" : "polite",
+        style: {
+          "--cmp-banner-background": `var(--sys-status-${palette}-surface)`,
+          "--cmp-banner-border": `var(--sys-status-${palette}-border)`,
+          "--cmp-banner-text": `var(--sys-status-${palette}-text)`
+        }
+      }, [
+        h("div", { class: "oods-banner-content" }, [
+          props.title || props.status || slots.title ? h("strong", { class: "oods-banner-title" }, [
+            slotOrValue(slots.title, props.title || statusLabel(props.status))
+          ]) : null,
+          props.detail ? h("p", { class: "oods-banner-detail" }, props.detail) : null,
+          slots.default || props.content ? h(slots.default ? "div" : "p", { class: "oods-banner-body" }, [slotOrValue(slots.default, props.content)]) : null,
+          slots.actions ? h("div", { class: "oods-banner-actions" }, slots.actions()) : null
+        ]),
+        props.dismissLabel ? h("button", {
+          type: "button",
+          class: "oods-banner-dismiss",
+          "aria-label": props.dismissLabel,
+          onClick: () => emit("dismiss")
+        }, [h("span", { "aria-hidden": "true" }, "\xD7")]) : null
+      ]);
+    };
+  }
+});
+var Button = defineComponent({
+  name: "OodsButton",
+  props: {
+    content: { type: [String, Number], default: "" },
+    intent: { type: String, default: "neutral" },
+    size: { type: sizeProp, default: "md" },
+    disabled: Boolean,
+    type: { type: String, default: "button" }
+  },
+  emits: {
+    activate: (_event) => true
+  },
+  setup(props, { emit, slots }) {
+    return () => h("button", {
+      type: props.type,
+      disabled: props.disabled,
+      class: "oods-button",
+      "data-oods-component": "Button",
+      "data-intent": props.intent,
+      "data-size": props.size,
+      style: {
+        "--cmp-button-background": "var(--sys-surface-interactive-primary-default)",
+        "--cmp-button-background-hover": "var(--sys-surface-interactive-primary-hover)",
+        "--cmp-button-background-disabled": "var(--sys-surface-disabled)",
+        "--cmp-button-border": "var(--sys-border-subtle)",
+        "--cmp-button-text": "var(--sys-text-on-interactive)",
+        "--cmp-button-text-disabled": "var(--sys-text-disabled)"
+      },
+      onClick: (event) => emit("activate", event)
+    }, [slotOrValue(slots.default, props.content)]);
+  }
+});
+var SAFE_CARD_ELEMENTS = /* @__PURE__ */ new Set(["div", "article", "section", "aside"]);
+var Card = defineComponent({
+  name: "OodsCard",
+  props: {
+    elevated: Boolean,
+    as: { type: String, default: "div" }
+  },
+  setup(props, { slots }) {
+    return () => h(SAFE_CARD_ELEMENTS.has(props.as) ? props.as : "div", {
+      class: "oods-card",
+      "data-oods-component": "Card",
+      "data-elevated": String(props.elevated)
+    }, slots.default?.());
+  }
+});
+var GAP_VALUES = {
+  xs: "var(--cmp-spacing-inline-xs, 0.5rem)",
+  sm: "var(--cmp-spacing-inline-sm, 0.75rem)",
+  md: "var(--cmp-spacing-stack-default, 1rem)",
+  lg: "var(--cmp-spacing-stack-lg, 1.5rem)",
+  xl: "var(--cmp-spacing-stack-xl, 2rem)"
+};
+function resolveGap(gap) {
+  return GAP_VALUES[gap] ?? gap;
+}
+function maxColumns(columns) {
+  const count = Number(columns);
+  return Number.isFinite(count) && count > 0 ? count : void 0;
+}
+var Grid = defineComponent({
+  name: "OodsGrid",
+  props: {
+    columns: { type: [Number, String], default: "auto-fit" },
+    minColumnWidth: { type: String, default: "16rem" },
+    gap: { type: String, default: "md" },
+    align: { type: String, default: "stretch" },
+    justify: { type: String, default: "normal" }
+  },
+  setup(props, { slots }) {
+    return () => h("div", {
+      class: "oods-grid",
+      "data-oods-component": "Grid",
+      "data-max-columns": maxColumns(props.columns),
+      style: {
+        "--oods-grid-columns": String(props.columns),
+        "--oods-grid-min-column": props.minColumnWidth,
+        "--oods-layout-gap": resolveGap(props.gap),
+        "--oods-layout-align": props.align,
+        "--oods-layout-justify": props.justify
+      }
+    }, slots.default?.());
+  }
+});
+var Stack = defineComponent({
+  name: "OodsStack",
+  props: {
+    direction: { type: String, default: "column" },
+    gap: { type: String, default: "md" },
+    align: { type: String, default: "stretch" },
+    justify: { type: String, default: "flex-start" },
+    wrap: Boolean
+  },
+  setup(props, { slots }) {
+    return () => h("div", {
+      class: "oods-stack",
+      "data-oods-component": "Stack",
+      style: {
+        "--oods-stack-direction": props.direction,
+        "--oods-stack-wrap": props.wrap ? "wrap" : "nowrap",
+        "--oods-layout-gap": resolveGap(props.gap),
+        "--oods-layout-align": props.align,
+        "--oods-layout-justify": props.justify
+      }
+    }, slots.default?.());
+  }
+});
+var SAFE_TEXT_ELEMENTS = /* @__PURE__ */ new Set([
+  "span",
+  "p",
+  "strong",
+  "em",
+  "small",
+  "div",
+  "label",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6"
+]);
+var Text = defineComponent({
+  name: "OodsText",
+  props: {
+    content: { type: [String, Number], default: "" },
+    label: String,
+    as: { type: String, default: "span" },
+    size: { type: sizeProp, default: "md" },
+    weight: { type: String, default: "normal" }
+  },
+  setup(props, { slots }) {
+    return () => h(SAFE_TEXT_ELEMENTS.has(props.as) ? props.as : "span", {
+      class: "oods-text",
+      "data-oods-component": "Text",
+      "data-size": props.size,
+      "data-weight": props.weight,
+      "aria-description": props.label
+    }, [slotOrValue(slots.default, props.content)]);
+  }
+});
+function firstText(...values) {
+  return values.find((value) => typeof value === "string" && value.trim().length > 0);
+}
+function headingElement(as, level, fallback) {
+  if (as && /^h[1-6]$/.test(as)) return as;
+  const resolvedLevel = level !== void 0 && Number.isFinite(level) ? Math.min(6, Math.max(1, Math.trunc(level))) : fallback;
+  return `h${resolvedLevel}`;
+}
+function authoredContent(value) {
+  function flatten(child) {
+    if (Array.isArray(child)) return child.flatMap(flatten);
+    if (child == null || typeof child === "boolean" || isVNode(child) && child.type === Comment) return [];
+    if (isVNode(child) && child.type === Fragment) return flatten(child.children);
+    return [child];
+  }
+  const content = flatten(value);
+  const meaningful = content.some((child) => {
+    if (typeof child === "string") return child.trim().length > 0;
+    if (isVNode(child) && child.type === Text$1) return String(child.children ?? "").trim().length > 0;
+    return true;
+  });
+  return meaningful ? content : [];
+}
+function scalarContent(content) {
+  if (!content.length) return void 0;
+  if (!content.every((child) => typeof child === "string" || typeof child === "number" || isVNode(child) && child.type === Text$1)) return void 0;
+  return content.map((child) => String(isVNode(child) ? child.children : child)).join("");
+}
+var DetailHeader = defineComponent({
+  name: "OodsDetailHeader",
+  props: {
+    title: String,
+    label: String,
+    text: String,
+    subtitle: String,
+    sublabel: String,
+    description: String,
+    metadata: String,
+    meta: String,
+    as: String,
+    level: Number
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const scalar = scalarContent(content);
+      const title = scalar ?? firstText(props.title, props.label, props.text) ?? "Details";
+      const subtitle = notEcho(firstText(props.subtitle, props.sublabel, props.description), title);
+      const metadata = firstText(props.metadata, props.meta);
+      return h(
+        "header",
+        { class: "oods-detail-header", "data-oods-component": "DetailHeader" },
+        content.length && scalar === void 0 ? content : [
+          h(headingElement(props.as, props.level, 2), title),
+          subtitle ? h("span", { "data-oods-subtitle": "true" }, subtitle) : null,
+          metadata ? h("span", { "data-oods-metadata": "true" }, metadata) : null
+        ]
+      );
+    };
+  }
+});
+function notEcho(supporting, heading) {
+  if (!supporting || !heading) return supporting;
+  return supporting.trim() === heading.trim() ? void 0 : supporting;
+}
+var CardHeader = defineComponent({
+  name: "OodsCardHeader",
+  props: {
+    title: String,
+    label: String,
+    text: String,
+    supporting: String,
+    supportingText: String,
+    subtitle: String,
+    description: String,
+    as: String,
+    level: Number
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const scalar = scalarContent(content);
+      const title = scalar ?? firstText(props.title, props.label, props.text) ?? "Card";
+      const supporting = notEcho(firstText(props.supporting, props.supportingText, props.subtitle, props.description), title);
+      return h(
+        "header",
+        { class: "oods-card-header", "data-oods-component": "CardHeader" },
+        content.length && scalar === void 0 ? content : [
+          h(headingElement(props.as, props.level, 2), title),
+          supporting ? h("span", { "data-oods-supporting": "true" }, supporting) : null
+        ]
+      );
+    };
+  }
+});
+var ColorSwatch = defineComponent({
+  name: "OodsColorSwatch",
+  props: { color: String, value: String, state: String, label: String },
+  setup(props, { slots }) {
+    return () => {
+      const color = firstText(props.color, props.value, props.state) ?? "default";
+      const content = authoredContent(slots.default?.());
+      const scalar = scalarContent(content);
+      const label = firstText(scalar, props.label) ?? color;
+      return h("span", {
+        class: "oods-color-swatch",
+        "data-oods-component": "ColorSwatch",
+        "data-summary-type": "color-swatch",
+        "data-swatch-color": color,
+        style: { "--oods-swatch-color": color === "default" ? void 0 : color }
+      }, [
+        h("span", { "data-oods-swatch-chip": "true", "aria-hidden": "true" }),
+        h("span", { "data-oods-swatch-label": "true" }, label),
+        ...scalar === void 0 ? content : []
+      ]);
+    };
+  }
+});
+var ColorizedBadge = defineComponent({
+  name: "OodsColorizedBadge",
+  props: {
+    label: String,
+    text: String,
+    state: String,
+    value: String,
+    status: String,
+    color: String,
+    hue: String,
+    swatch: String,
+    variant: String,
+    tone: String,
+    emphasis: String
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const scalar = scalarContent(content);
+      const label = firstText(scalar, props.label, props.text, props.state, props.value) ?? "Color";
+      const status = firstText(props.status, props.state, props.value);
+      const color = firstText(props.color, props.hue, props.swatch, props.state);
+      const variant = firstText(props.variant) ?? "colorized";
+      return h(Badge, {
+        status,
+        tone: props.tone,
+        emphasis: props.emphasis,
+        "data-oods-component": "ColorizedBadge",
+        "data-badge-status": status,
+        "data-badge-color": color,
+        "data-badge-variant": variant,
+        style: { "--oods-badge-color": color }
+      }, {
+        icon: () => h("span", { "data-oods-badge-marker": "true", "aria-hidden": "true" }),
+        default: () => [
+          h("span", { "data-oods-badge-label": "true" }, label),
+          ...scalar === void 0 ? content : []
+        ]
+      });
+    };
+  }
+});
+var VizAreaPreview = defineComponent({
+  name: "OodsVizAreaPreview",
+  props: {
+    svg: String,
+    /** The same chart rendered at the narrow size; the figure shows it instead of svg when its own inline size is at most 600px. */
+    svgNarrow: String,
+    /** The same chart rendered at the wide size; the figure shows it instead of svg when its own inline size is at least 900px. */
+    svgWide: String,
+    title: String,
+    description: String,
+    width: { type: Number, default: 640 },
+    height: { type: Number, default: 360 }
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      if (props.svg !== void 0) return h("figure", {
+        class: "oods-viz-area-preview",
+        "data-oods-component": "VizAreaPreview",
+        "data-viz-preview-type": "area",
+        "data-viz-rendered": "true",
+        "data-viz-width": props.width,
+        "data-viz-height": props.height,
+        ...props.svgNarrow !== void 0 ? { "data-viz-narrow": "true" } : {},
+        ...props.svgWide !== void 0 ? { "data-viz-wide": "true" } : {},
+        role: "img",
+        "aria-label": props.title ?? props.description ?? "Payment amounts",
+        style: { "--oods-viz-width": `${props.width}px` }
+      }, [
+        ...props.title && !svgCarriesTitle(props.svg, props.title) ? [h("figcaption", props.title)] : [],
+        h("div", { "data-viz-svg": "true", innerHTML: assertStaticSvg(props.svg) }),
+        ...props.svgNarrow !== void 0 ? [h("div", { "data-viz-svg-narrow": "true", innerHTML: assertStaticSvg(props.svgNarrow) })] : [],
+        ...props.svgWide !== void 0 ? [h("div", { "data-viz-svg-wide": "true", innerHTML: assertStaticSvg(props.svgWide) })] : [],
+        ...props.description ? [h("p", { "data-viz-description": "true" }, props.description)] : []
+      ]);
+      return h("div", {
+        class: "oods-viz-area-preview",
+        "data-oods-component": "VizAreaPreview",
+        "data-viz-preview-type": "area",
+        "data-viz-width": props.width,
+        "data-viz-height": props.height,
+        style: { "--oods-viz-width": `${props.width}px`, "--oods-viz-height": `${props.height}px` }
+      }, content.length ? content : [
+        h("div", { "data-viz-preview-placeholder": "true" }, `Area preview (${props.width} x ${props.height})`)
+      ]);
+    };
+  }
+});
+function firstScalar(...values) {
+  for (const value of values) {
+    if (typeof value === "string") {
+      if (value.trim().length > 0) return value;
+      continue;
+    }
+    if (typeof value === "number" || typeof value === "boolean") return String(value);
+  }
+  return void 0;
+}
+function isRecord(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function descriptorLabel(descriptor) {
+  return firstText(descriptor.label, descriptor.field) ?? "Filter";
+}
+var PANEL_SECTION_PROPS = {
+  title: String,
+  label: String,
+  heading: String,
+  name: String,
+  subtitle: String,
+  description: String,
+  metadata: String,
+  summary: String,
+  text: String,
+  body: String,
+  emptyMessage: String
+};
+function createPanelSection(component, className, panelType, defaultTitle) {
+  return defineComponent({
+    name: `Oods${component}`,
+    props: PANEL_SECTION_PROPS,
+    setup(props, { slots }) {
+      return () => {
+        const content = authoredContent(slots.default?.());
+        const title = firstText(props.title, props.label, props.heading, props.name) ?? defaultTitle;
+        const subtitle = firstText(props.subtitle, props.description, props.metadata);
+        const fallback = firstText(props.summary, props.text, props.body, props.emptyMessage);
+        return h("section", {
+          class: className,
+          "data-oods-component": component,
+          "data-panel-type": panelType
+        }, [
+          h("header", { "data-panel-header": "true" }, [
+            h("h2", title),
+            subtitle ? h("span", { "data-panel-subtitle": "true" }, subtitle) : null
+          ]),
+          h("div", { "data-panel-content": "true" }, content.length ? content : fallback ? [h("span", { "data-panel-summary": "true" }, fallback)] : [])
+        ]);
+      };
+    }
+  });
+}
+var ClassificationPanel = createPanelSection("ClassificationPanel", "oods-classification-panel", "classification", "Classification");
+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 = defineComponent({
+  name: "OodsFilterPanel",
+  props: {
+    filters: { type: Array, default: () => [] },
+    activeFilters: { type: Array, default: () => [] },
+    mode: String,
+    collapsible: { type: Boolean, default: true }
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const mode = firstText(props.mode) ?? "immediate";
+      const descriptors = (Array.isArray(props.filters) ? props.filters : []).filter(isRecord);
+      const activeCount = Array.isArray(props.activeFilters) ? props.activeFilters.length : 0;
+      return h("aside", {
+        class: "oods-filter-panel",
+        "data-oods-component": "FilterPanel",
+        "data-behavioral": "filter",
+        "data-filter-mode": mode,
+        role: "region",
+        "aria-label": "Filters"
+      }, content.length ? content : [
+        activeCount > 0 ? h("div", { "data-active-filters": "true", "aria-live": "polite" }, [
+          h("span", { "data-filter-count": "true" }, `${activeCount} active`),
+          h("button", { type: "button", "data-filter-clear-all": "true" }, "Clear all")
+        ]) : null,
+        ...descriptors.map((descriptor, index) => h("fieldset", {
+          key: index,
+          "data-filter-section": "true",
+          "data-collapsible": props.collapsible ? "true" : void 0
+        }, [h("legend", descriptorLabel(descriptor))])),
+        mode === "batch" ? h("button", { type: "button", "data-filter-apply": "true" }, "Apply") : null
+      ]);
+    };
+  }
+});
+var PriceSummary = defineComponent({
+  name: "OodsPriceSummary",
+  props: {
+    title: String,
+    label: String,
+    heading: String,
+    name: String,
+    amount: [String, Number],
+    amountCents: [String, Number],
+    unitAmountCents: [String, Number],
+    minorUnits: Number,
+    currency: String,
+    currencyCode: String,
+    model: String,
+    pricingModel: String,
+    interval: String,
+    billingInterval: String,
+    summary: String,
+    text: String,
+    description: String
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const title = firstText(props.title, props.label, props.heading, props.name) ?? "Price Summary";
+      const terms = [
+        ["Amount", [props.amount, props.amountCents, props.unitAmountCents, props.currency, props.currencyCode, props.model, props.pricingModel, props.interval, props.billingInterval].some((value) => value !== void 0) ? formatPriceAmount(props.amount ?? props.amountCents ?? props.unitAmountCents, firstText(props.currency, props.currencyCode), props.minorUnits) : void 0],
+        ["Currency", firstScalar(props.currency, props.currencyCode)],
+        ["Model", formatPriceCode(props.model ?? props.pricingModel)],
+        ["Interval", formatPriceCode(props.interval ?? props.billingInterval)]
+      ].filter((entry) => entry[1] !== void 0);
+      const fallback = firstText(props.summary, props.text, props.description);
+      return h("section", {
+        class: "oods-price-summary",
+        "data-oods-component": "PriceSummary",
+        "data-summary-type": "price"
+      }, [
+        h("h2", { "data-summary-title": "true" }, title),
+        ...content.length ? content : terms.length ? [h("dl", terms.map(([term, value]) => h("div", { key: term, "data-summary-item": "true" }, [h("dt", term), h("dd", value)])))] : fallback ? [h("p", { "data-summary-fallback": "true" }, fallback)] : [h("dl")]
+      ]);
+    };
+  }
+});
+function normalizeTagItems(value) {
+  if (!Array.isArray(value)) return [];
+  const items = [];
+  for (const entry of value) {
+    if (entry === void 0 || entry === null) continue;
+    if (isRecord(entry)) {
+      const text = firstScalar(entry.label, entry.name, entry.role, entry.value, entry.id);
+      if (text) items.push(text);
+      continue;
+    }
+    items.push(typeof entry === "object" ? JSON.stringify(entry) : String(entry));
+  }
+  return items.filter((item) => item.length > 0);
+}
+var TagManager = defineComponent({
+  name: "OodsTagManager",
+  props: {
+    title: String,
+    label: String,
+    heading: String,
+    name: String,
+    description: String,
+    subtitle: String,
+    hint: String,
+    tags: Array,
+    value: Array
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const title = firstText(props.title, props.label, props.heading, props.name) ?? "Tag Manager";
+      const subtitle = firstText(props.description, props.subtitle, props.hint);
+      const items = normalizeTagItems(props.tags ?? props.value);
+      return h("form", {
+        class: "oods-tag-manager",
+        "data-oods-component": "TagManager",
+        "data-form-type": "tag-manager",
+        // The add control is unwired: submitting never navigates.
+        onSubmit: (event) => event.preventDefault()
+      }, [
+        h("header", { "data-form-header": "true" }, [
+          h("h2", title),
+          subtitle ? h("span", { "data-form-subtitle": "true" }, subtitle) : null
+        ]),
+        h("div", { "data-form-content": "true" }, content.length ? content : [
+          h("div", { "data-tag-list": "true" }, items.map((tag, index) => h("span", { key: index, "data-tag-item": "true" }, tag))),
+          h("label", { "data-form-control": "input" }, [
+            h("span", "Add Tag"),
+            h("input", { type: "text", name: "newTag", placeholder: "Type a tag" })
+          ])
+        ])
+      ]);
+    };
+  }
+});
+function asCount(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim().length > 0) {
+    const parsed = Number.parseInt(value, 10);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return void 0;
+}
+function createBadgeFamily(options) {
+  const props = {
+    label: String,
+    text: String,
+    value: String,
+    status: String,
+    state: String,
+    variant: String,
+    tone: String,
+    emphasis: String
+  };
+  for (const key of options.extraProps) props[key] = String;
+  for (const key of options.booleanProps ?? []) props[key] = { type: [String, Boolean], default: void 0 };
+  return defineComponent({
+    name: `Oods${options.component}`,
+    props,
+    setup(componentProps, { slots }) {
+      return () => {
+        const record = componentProps;
+        const content = authoredContent(slots.default?.());
+        const scalar = scalarContent(content);
+        const read = (key) => typeof record[key] === "boolean" && options.booleanProps?.includes(key) ? String(record[key]) : record[key];
+        const label = scalar ?? firstText(...options.labelKeys.map((key) => options.component === "CancellationBadge" && typeof record[key] === "boolean" && options.booleanProps?.includes(key) ? record[key] ? "Cancellation scheduled" : "No cancellation scheduled" : read(key))) ?? options.defaultLabel;
+        const status = firstText(...options.statusKeys.map(read));
+        const variant = firstText(record.variant) ?? options.defaultVariant;
+        return h(Badge, {
+          status,
+          tone: record.tone,
+          emphasis: record.emphasis,
+          class: options.className,
+          "data-oods-component": options.component,
+          "data-badge-status": status,
+          "data-badge-variant": variant
+        }, {
+          default: () => content.length && scalar === void 0 ? content : [h("span", { "data-oods-badge-label": "true" }, label)]
+        });
+      };
+    }
+  });
+}
+var AddressSummaryBadge = createBadgeFamily({
+  component: "AddressSummaryBadge",
+  className: "oods-address-summary-badge",
+  defaultLabel: "Address",
+  defaultVariant: "address",
+  labelKeys: ["label", "text", "role", "value"],
+  statusKeys: ["status", "state", "role"],
+  extraProps: ["role"]
+});
+var MessageStatusBadge = createBadgeFamily({
+  component: "MessageStatusBadge",
+  className: "oods-message-status-badge",
+  defaultLabel: "Message",
+  defaultVariant: "message",
+  labelKeys: ["label", "text", "status", "delivery", "value"],
+  statusKeys: ["status", "state", "delivery", "value"],
+  extraProps: ["delivery"]
+});
+var PreferenceSummaryBadge = createBadgeFamily({
+  component: "PreferenceSummaryBadge",
+  className: "oods-preference-summary-badge",
+  defaultLabel: "Preferences",
+  defaultVariant: "preference",
+  labelKeys: ["label", "text", "namespace", "value"],
+  statusKeys: ["status", "state", "version"],
+  extraProps: ["namespace", "version"]
+});
+var RoleBadgeList = defineComponent({
+  name: "OodsRoleBadgeList",
+  props: {
+    roles: Array,
+    badges: Array,
+    roleLabels: Array,
+    value: Array,
+    variant: String,
+    tone: String,
+    label: String,
+    text: String
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const items = normalizeTagItems(props.roles ?? props.badges ?? props.roleLabels ?? props.value);
+      const variant = firstText(props.variant, props.tone) ?? "roles";
+      return h("span", {
+        class: "oods-role-badge-list",
+        "data-oods-component": "RoleBadgeList",
+        "data-badge-variant": variant
+      }, content.length ? content : items.length ? items.map((role, index) => h("span", { key: index, "data-role-badge": "true" }, role)) : [firstText(props.label, props.text) ?? "Roles"]);
+    };
+  }
+});
+var TagPills = defineComponent({
+  name: "OodsTagPills",
+  props: {
+    tags: Array,
+    value: Array,
+    maxVisible: [Number, String],
+    overflowLabel: String
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const items = normalizeTagItems(props.tags ?? props.value);
+      const limit = asCount(props.maxVisible) ?? items.length;
+      const visible = items.slice(0, Math.max(0, limit));
+      const overflow = items.length - visible.length;
+      const template = firstText(props.overflowLabel);
+      const overflowText = overflow > 0 ? template ? template.replace("{{ tag_count }}", String(items.length)) : `+${overflow}` : "";
+      return h("div", {
+        class: "oods-tag-pills",
+        "data-oods-component": "TagPills",
+        "data-summary-type": "tag-pills"
+      }, content.length ? content : [
+        ...visible.map((tag, index) => h("span", { key: index, "data-tag-pill": "true" }, tag)),
+        overflowText ? h("span", { "data-tag-overflow": "true" }, overflowText) : null
+      ]);
+    };
+  }
+});
+function normalizeTimelineItems(raw) {
+  if (!Array.isArray(raw)) return [];
+  const items = [];
+  for (const entry of raw) {
+    if (entry === void 0 || entry === null) continue;
+    if (isRecord(entry)) {
+      items.push({
+        label: firstScalar(entry.label, entry.title, entry.event, entry.status, entry.state, entry.text, entry.name) ?? "Event",
+        timestamp: firstScalar(entry.timestamp, entry.datetime, entry.time, entry.at, entry.createdAt, entry.updatedAt),
+        detail: firstScalar(entry.detail, entry.description, entry.reason, entry.message, entry.from, entry.to)
+      });
+      continue;
+    }
+    items.push({ label: typeof entry === "object" ? JSON.stringify(entry) : String(entry) });
+  }
+  return items;
+}
+function createTimelineFamily(options) {
+  const props = { title: String, label: String, heading: String, name: String };
+  for (const key of options.eventKeys) props[key] = Array;
+  return defineComponent({
+    name: `Oods${options.component}`,
+    props,
+    setup(componentProps, { slots }) {
+      return () => {
+        const record = componentProps;
+        const content = authoredContent(slots.default?.());
+        const title = firstText(record.title, record.label, record.heading, record.name) ?? options.defaultTitle;
+        const events = normalizeTimelineItems(options.eventKeys.map((key) => record[key]).find((value) => Array.isArray(value)));
+        return h("div", {
+          class: options.className,
+          "data-oods-component": options.component,
+          "data-timeline-type": options.timelineType,
+          role: "log",
+          "aria-label": title
+        }, [
+          h("h2", { "data-timeline-title": "true" }, title),
+          h("ol", { "data-timeline-events": "true" }, content.length ? content : events.length ? events.map((item, index) => h("li", { key: index }, [h("article", { "data-timeline-event": "true" }, [
+            h("p", { "data-timeline-label": "true" }, item.label),
+            item.timestamp ? h("time", { "data-timeline-time": "true", datetime: item.timestamp }, item.timestamp) : null,
+            item.detail ? h("p", { "data-timeline-detail": "true" }, item.detail) : null
+          ])])) : [h("li", { "data-timeline-empty": "true" }, "No events")])
+        ]);
+      };
+    }
+  });
+}
+var AddressValidationTimeline = createTimelineFamily({
+  component: "AddressValidationTimeline",
+  className: "oods-address-validation-timeline",
+  defaultTitle: "Address Validation Timeline",
+  timelineType: "address-validation",
+  eventKeys: ["events", "validations", "history"]
+});
+var MembershipAuditTimeline = createTimelineFamily({
+  component: "MembershipAuditTimeline",
+  className: "oods-membership-audit-timeline",
+  defaultTitle: "Membership Timeline",
+  timelineType: "membership",
+  eventKeys: ["events", "memberships", "history"]
+});
+var MessageEventTimeline = createTimelineFamily({
+  component: "MessageEventTimeline",
+  className: "oods-message-event-timeline",
+  defaultTitle: "Message Timeline",
+  timelineType: "message",
+  eventKeys: ["events", "messages", "statuses"]
+});
+var PreferenceTimeline = createTimelineFamily({
+  component: "PreferenceTimeline",
+  className: "oods-preference-timeline",
+  defaultTitle: "Preference Timeline",
+  timelineType: "preference",
+  eventKeys: ["events", "changes", "history"]
+});
+var AuditEvent = defineComponent({
+  name: "OodsAuditEvent",
+  props: {
+    label: String,
+    title: String,
+    event: String,
+    status: String,
+    state: String,
+    reason: String,
+    text: String,
+    timestamp: String,
+    datetime: String,
+    time: String,
+    at: String,
+    createdAt: String,
+    updatedAt: String,
+    detail: String,
+    description: String,
+    message: String,
+    from: String,
+    to: String,
+    code: String
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const label = firstText(props.label, props.title, props.event, props.status, props.state, props.reason, props.text) ?? "Audit Event";
+      const timestamp = firstText(props.timestamp, props.datetime, props.time, props.at, props.createdAt, props.updatedAt);
+      const detail = firstText(props.detail, props.description, props.reason, props.message, props.from, props.to, props.code);
+      return h("article", {
+        class: "oods-audit-event",
+        "data-oods-component": "AuditEvent",
+        "data-event-type": "audit"
+      }, content.length ? content : [
+        timestamp ? h("time", { "data-event-time": "true", datetime: timestamp }, timestamp) : null,
+        h("p", { "data-event-label": "true" }, label),
+        detail ? h("p", { "data-event-detail": "true" }, detail) : null
+      ]);
+    };
+  }
+});
+function normalizeSelectOptions(raw) {
+  if (!Array.isArray(raw)) return [];
+  const choices = [];
+  for (const entry of raw) {
+    if (isRecord(entry)) {
+      const text = (key) => typeof entry[key] === "string" && entry[key].length > 0 ? entry[key] : void 0;
+      const value2 = text("value") ?? text("id") ?? text("label") ?? "";
+      const label = text("label") ?? text("name") ?? formatReadOnlyValue(value2, "string", true);
+      if (!value2 && !label) continue;
+      choices.push({ value: value2, label });
+      continue;
+    }
+    if (entry === void 0 || entry === null) continue;
+    const value = typeof entry === "object" ? JSON.stringify(entry) : String(entry);
+    if (!value) continue;
+    choices.push({ value, label: formatReadOnlyValue(value, "string", true) });
+  }
+  return choices;
+}
+function selectOptionNodes(choices, selected) {
+  return choices.length ? choices.map((choice, index) => h("option", { key: index, value: choice.value, selected: choice.value === selected }, choice.label)) : [h("option", { value: "" }, "Select...")];
+}
+var preventSubmit = (event) => {
+  event.preventDefault();
+};
+var FORM_SHELL_PROPS = {
+  title: String,
+  label: String,
+  heading: String,
+  name: String,
+  description: String,
+  subtitle: String,
+  hint: String
+};
+function formHeader(title, subtitle) {
+  return h("header", { "data-form-header": "true" }, [
+    h("h2", title),
+    subtitle ? h("span", { "data-form-subtitle": "true" }, subtitle) : null
+  ]);
+}
+function fieldsetHeader(title, subtitle) {
+  return [h("legend", title), subtitle ? h("span", { "data-form-subtitle": "true" }, subtitle) : null];
+}
+function addressRecord(form) {
+  const read = (name) => {
+    const control = form?.elements.namedItem(name);
+    return control instanceof HTMLInputElement ? control.value : "";
+  };
+  return { street: read("street"), city: read("city"), region: read("region"), postalCode: read("postalCode") };
+}
+var AddressEditor = defineComponent({
+  name: "OodsAddressEditor",
+  props: {
+    ...FORM_SHELL_PROPS,
+    street: String,
+    line1: String,
+    addressLine1: String,
+    city: String,
+    region: String,
+    state: String,
+    postalCode: String,
+    zip: String
+  },
+  emits: { change: (_address) => true },
+  setup(props, { emit, slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const title = firstText(props.title, props.label, props.heading, props.name) ?? "Address Editor";
+      const subtitle = firstText(props.description, props.subtitle, props.hint);
+      const publish = (event) => emit("change", addressRecord(event.target.form));
+      const control = (fieldLabel, fieldName, initial) => h("label", { "data-form-control": "input" }, [
+        h("span", fieldLabel),
+        h("input", { type: "text", name: fieldName, value: initial, onInput: publish })
+      ]);
+      return h("form", {
+        class: "oods-address-editor",
+        "data-oods-component": "AddressEditor",
+        "data-form-type": "address-editor",
+        onSubmit: preventSubmit
+      }, [
+        formHeader(title, subtitle),
+        h("div", { "data-form-content": "true" }, content.length ? content : [
+          control("Street", "street", firstText(props.street, props.line1, props.addressLine1)),
+          control("City", "city", firstText(props.city)),
+          control("Region", "region", firstText(props.region, props.state)),
+          control("Postal Code", "postalCode", firstText(props.postalCode, props.zip))
+        ])
+      ]);
+    };
+  }
+});
+var PreferenceEditor = defineComponent({
+  name: "OodsPreferenceEditor",
+  props: {
+    ...FORM_SHELL_PROPS,
+    namespaces: Array,
+    namespace: String,
+    document: String,
+    json: String,
+    value: String
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const title = firstText(props.title, props.label, props.heading, props.name) ?? "Preference Editor";
+      const subtitle = firstText(props.description, props.subtitle, props.hint);
+      const choices = normalizeSelectOptions(Array.isArray(props.namespaces) ? props.namespaces : ["default"]);
+      const selected = firstText(props.namespace) ?? choices[0]?.value;
+      return h("form", {
+        class: "oods-preference-editor",
+        "data-oods-component": "PreferenceEditor",
+        "data-form-type": "preference-editor",
+        onSubmit: preventSubmit
+      }, [
+        formHeader(title, subtitle),
+        h("div", { "data-form-content": "true" }, content.length ? content : [
+          h("label", { "data-form-control": "select" }, [h("span", "Namespace"), h("select", { name: "namespace", value: selected }, selectOptionNodes(choices, selected))]),
+          h("label", { "data-form-control": "textarea" }, [h("span", "Preference Document"), h("textarea", { name: "preferenceDocument", value: firstScalar(props.document, props.json, props.value) ?? "" })])
+        ])
+      ]);
+    };
+  }
+});
+var RoleAssignmentForm = defineComponent({
+  name: "OodsRoleAssignmentForm",
+  props: {
+    ...FORM_SHELL_PROPS,
+    roles: Array,
+    availableRoles: Array,
+    role: String,
+    defaultRoleId: String,
+    assignee: String,
+    member: String
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const title = firstText(props.title, props.label, props.heading, props.name) ?? "Role Assignment";
+      const subtitle = firstText(props.description, props.subtitle, props.hint);
+      const choices = normalizeSelectOptions(props.roles ?? props.availableRoles ?? []);
+      const selected = firstText(props.role, props.defaultRoleId) ?? choices[0]?.value;
+      return h("form", {
+        class: "oods-role-assignment-form",
+        "data-oods-component": "RoleAssignmentForm",
+        "data-form-type": "role-assignment",
+        onSubmit: preventSubmit
+      }, [
+        formHeader(title, subtitle),
+        h("div", { "data-form-content": "true" }, content.length ? content : [
+          h("label", { "data-form-control": "select" }, [h("span", "Role"), h("select", { name: "role", value: selected }, selectOptionNodes(choices, selected))]),
+          h("label", { "data-form-control": "input" }, [h("span", "Assignee"), h("input", { type: "text", name: "assignee", value: firstText(props.assignee, props.member) })])
+        ])
+      ]);
+    };
+  }
+});
+var StatusSelector = defineComponent({
+  name: "OodsStatusSelector",
+  props: {
+    label: String,
+    title: String,
+    help: String,
+    options: Array,
+    states: Array,
+    value: String,
+    status: String,
+    modelValue: String
+  },
+  emits: { "update:modelValue": (_value) => true, change: (_value) => true },
+  setup(props, { emit, slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const label = firstText(props.label, props.title) ?? "Status";
+      const choices = normalizeSelectOptions(props.options ?? props.states ?? ["draft", "active", "inactive"]);
+      const selected = props.modelValue ?? props.value ?? firstText(props.status);
+      const onChange = (event) => {
+        const next = event.target.value;
+        emit("update:modelValue", next);
+        emit("change", next);
+      };
+      return h("div", {
+        class: "oods-status-selector",
+        "data-oods-component": "StatusSelector",
+        "data-summary-type": "status-selector"
+      }, content.length ? content : [
+        h("label", { "data-form-control": "select" }, [
+          h("span", label),
+          h("select", { name: "status", value: selected, onChange }, selectOptionNodes(choices, selected))
+        ]),
+        props.help ? h("p", { class: "oods-field-help" }, props.help) : null
+      ]);
+    };
+  }
+});
+var TagInput = defineComponent({
+  name: "OodsTagInput",
+  props: {
+    ...FORM_SHELL_PROPS,
+    tags: Array,
+    value: String,
+    placeholder: String,
+    modelValue: String
+  },
+  emits: { "update:modelValue": (_value) => true, input: (_value) => true, change: (_value) => true },
+  setup(props, { emit, slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const title = firstText(props.title, props.label, props.heading, props.name) ?? "Tag Input";
+      const subtitle = firstText(props.description, props.subtitle, props.hint);
+      const items = normalizeTagItems(props.tags);
+      const current = props.modelValue ?? props.value;
+      const read = (event) => event.target.value;
+      return h("fieldset", {
+        class: "oods-tag-input",
+        "data-oods-component": "TagInput",
+        "data-form-type": "tag-input"
+      }, [
+        ...fieldsetHeader(title, subtitle),
+        h("div", { "data-form-content": "true" }, content.length ? content : [
+          h("label", { "data-form-control": "input" }, [
+            h("span", "Tag"),
+            h("input", {
+              type: "text",
+              name: "tag",
+              placeholder: firstText(props.placeholder),
+              value: current,
+              onInput: (event) => {
+                emit("update:modelValue", read(event));
+                emit("input", read(event));
+              },
+              onChange: (event) => emit("change", read(event))
+            })
+          ]),
+          items.length ? h("div", { "data-tag-list": "true" }, items.map((tag, index) => h("span", { key: index, "data-tag-item": "true" }, tag))) : null
+        ])
+      ]);
+    };
+  }
+});
+var TemplatePicker = defineComponent({
+  name: "OodsTemplatePicker",
+  props: {
+    ...FORM_SHELL_PROPS,
+    templates: Array,
+    options: Array,
+    templateId: String,
+    value: String,
+    channels: Array,
+    channel: String
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const title = firstText(props.title, props.label, props.heading, props.name) ?? "Template Picker";
+      const subtitle = firstText(props.description, props.subtitle, props.hint);
+      const templateChoices = normalizeSelectOptions(props.templates ?? props.options ?? []);
+      const channelChoices = normalizeSelectOptions(props.channels ?? ["email", "sms", "in_app"]);
+      const selectedTemplate = firstText(props.templateId, props.value) ?? templateChoices[0]?.value;
+      const selectedChannel = firstText(props.channel) ?? channelChoices[0]?.value;
+      return h("fieldset", {
+        class: "oods-template-picker",
+        "data-oods-component": "TemplatePicker",
+        "data-form-type": "template-picker"
+      }, [
+        ...fieldsetHeader(title, subtitle),
+        h("div", { "data-form-content": "true" }, content.length ? content : [
+          h("label", { "data-form-control": "select" }, [h("span", "Template"), h("select", { name: "template", value: selectedTemplate }, selectOptionNodes(templateChoices, selectedTemplate))]),
+          h("label", { "data-form-control": "select" }, [h("span", "Channel"), h("select", { name: "channel", value: selectedChannel }, selectOptionNodes(channelChoices, selectedChannel))])
+        ])
+      ]);
+    };
+  }
+});
+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 = defineComponent({
+  name: "OodsInlineLabel",
+  props: { label: String, text: String, value: String, maxLength: [Number, String] },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      return h(
+        "span",
+        { class: "oods-inline-label", "data-oods-component": "InlineLabel" },
+        content.length ? content : truncateLabel(firstText(props.label, props.text, props.value) ?? "", props.maxLength)
+      );
+    };
+  }
+});
+var LabelCell = defineComponent({
+  name: "OodsLabelCell",
+  props: { label: String, text: String, value: String, description: String, subtitle: String, sublabel: String, supporting: String, truncate: Boolean, maxLength: [Number, String] },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const limit = props.truncate ? props.maxLength ?? 40 : props.maxLength;
+      const description = notEcho(firstText(props.description, props.subtitle, props.sublabel, props.supporting), firstText(props.label, props.text, props.value));
+      return h(
+        "span",
+        { class: "oods-label-cell", "data-oods-component": "LabelCell" },
+        content.length ? content : [
+          h("span", { "data-oods-label-cell-primary": "true" }, truncateLabel(firstText(props.label, props.text, props.value) ?? "", limit)),
+          description ? h("span", { "data-oods-label-cell-description": "true" }, truncateLabel(description, limit)) : null
+        ]
+      );
+    };
+  }
+});
+var FormLabelGroup = defineComponent({
+  name: "OodsFormLabelGroup",
+  props: { label: String, text: String, title: String, placeholder: String, hint: String, description: String, htmlFor: String, for: String, inputId: String },
+  setup(props, { slots }) {
+    return () => {
+      const hint = firstText(props.placeholder, props.hint, props.description);
+      return h("label", { class: "oods-form-label-group", "data-oods-component": "FormLabelGroup", for: props.htmlFor ?? props.for ?? props.inputId }, [
+        h("span", { "data-oods-form-label": "true" }, firstText(props.label, props.text, props.title) ?? "Label"),
+        ...authoredContent(slots.default?.()),
+        hint ? h("span", { "data-oods-form-hint": "true" }, hint) : null
+      ]);
+    };
+  }
+});
+var ClassificationBadge = createBadgeFamily({
+  component: "ClassificationBadge",
+  className: "oods-classification-badge",
+  defaultLabel: "Classification",
+  defaultVariant: "classification",
+  labelKeys: ["label", "text", "category", "value"],
+  statusKeys: ["status", "state", "mode"],
+  extraProps: ["category", "mode"]
+});
+var ClassificationEditor = defineComponent({
+  name: "OodsClassificationEditor",
+  props: {
+    title: String,
+    label: String,
+    heading: String,
+    name: String,
+    description: String,
+    subtitle: String,
+    hint: String,
+    category: String,
+    primaryCategory: String,
+    tags: [String, Array],
+    modes: Array,
+    mode: String,
+    classificationMode: String
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const tagText = typeof props.tags === "string" ? props.tags : props.tags === void 0 ? "" : JSON.stringify(props.tags);
+      const choices = normalizeSelectOptions(Array.isArray(props.modes) ? props.modes : ["strict", "flexible"]);
+      const selected = firstText(props.mode, props.classificationMode) ?? choices[0]?.value;
+      return h("form", { class: "oods-classification-editor", "data-oods-component": "ClassificationEditor", "data-form-type": "classification-editor", onSubmit: (event) => event.preventDefault() }, [
+        formHeader(firstText(props.title, props.label, props.heading, props.name) ?? "Classification Editor", firstText(props.description, props.subtitle, props.hint)),
+        h("div", { "data-form-content": "true" }, content.length ? content : [
+          h("label", { "data-form-control": "input" }, [h("span", "Category"), h("input", { type: "text", name: "category", value: firstText(props.category, props.primaryCategory) ?? "" })]),
+          h("label", { "data-form-control": "input" }, [h("span", "Tags"), h("input", { type: "text", name: "tags", placeholder: "tag-1, tag-2", value: tagText })]),
+          h("label", { "data-form-control": "select" }, [h("span", "Mode"), h("select", { name: "mode", value: selected }, selectOptionNodes(choices, selected))])
+        ])
+      ]);
+    };
+  }
+});
+var OwnerBadge = createBadgeFamily({
+  component: "OwnerBadge",
+  className: "oods-owner-badge",
+  defaultLabel: "Owner",
+  defaultVariant: "owner",
+  labelKeys: ["label", "text", "owner", "ownerType", "value"],
+  statusKeys: ["status", "state"],
+  extraProps: ["owner", "ownerType"]
+});
+var OwnershipSummary = defineComponent({
+  name: "OodsOwnershipSummary",
+  props: { title: String, label: String, heading: String, name: String, ownerLabel: String, ownerId: String, owner_id: String, ownerType: String, owner_type: String, role: String, ownershipRole: String, summary: String, text: String, description: String },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const terms = [["Owner", props.ownerId === void 0 && props.owner_id === void 0 && props.ownerLabel === void 0 ? void 0 : formatReferenceLabel(props.ownerId ?? props.owner_id, props.ownerLabel, "Owner")], ["Owner Type", firstScalar(props.ownerType, props.owner_type)], ["Role", firstScalar(props.role, props.ownershipRole)]].filter((entry) => entry[1] !== void 0);
+      const fallback = firstText(props.summary, props.text, props.description);
+      return h("section", { class: "oods-ownership-summary", "data-oods-component": "OwnershipSummary", "data-summary-type": "ownership" }, [
+        h("h2", { "data-summary-title": "true" }, firstText(props.title, props.label, props.heading, props.name) ?? "Ownership Summary"),
+        ...content.length ? content : terms.length ? [h("dl", terms.map(([term, value]) => h("div", { key: term, "data-summary-item": "true" }, [h("dt", term), h("dd", value)])))] : fallback ? [h("p", { "data-summary-fallback": "true" }, fallback)] : [h("dl")]
+      ]);
+    };
+  }
+});
+var TagSummary = defineComponent({
+  name: "OodsTagSummary",
+  props: { title: String, label: String, heading: String, name: String, tagCount: [Number, String], count: [Number, String], tags: [String, Array], summary: String, text: String, description: String },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const tagText = Array.isArray(props.tags) ? normalizeTagItems(props.tags).join(", ") || void 0 : firstText(props.tags);
+      const terms = [["Tag Count", firstScalar(props.tagCount, props.count)], ["Tags", tagText]].filter((entry) => entry[1] !== void 0);
+      const fallback = firstText(props.summary, props.text, props.description);
+      return h("section", { class: "oods-tags-summary", "data-oods-component": "TagSummary", "data-summary-type": "tags" }, [
+        h("h2", { "data-summary-title": "true" }, firstText(props.title, props.label, props.heading, props.name) ?? "Tag Summary"),
+        ...content.length ? content : terms.length ? [h("dl", terms.map(([term, value]) => h("div", { key: term, "data-summary-item": "true" }, [h("dt", term), h("dd", value)])))] : fallback ? [h("p", { "data-summary-fallback": "true" }, fallback)] : [h("dl")]
+      ]);
+    };
+  }
+});
+var OwnershipMeta = defineComponent({
+  name: "OodsOwnershipMeta",
+  props: { title: String, label: String, heading: String, name: String, ownerType: String, owner_type: String, role: String, ownershipRole: String },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const terms = [["Owner Type", firstScalar(props.ownerType, props.owner_type)], ["Role", firstScalar(props.role, props.ownershipRole)]].filter((entry) => entry[1] !== void 0);
+      return h("div", { class: "oods-ownership-meta", "data-oods-component": "OwnershipMeta", "data-meta-type": "ownership" }, content.length ? content : [
+        h("span", { "data-meta-title": "true" }, firstText(props.title, props.label, props.heading, props.name) ?? "Ownership"),
+        ...terms.map(([term, value]) => h("span", { key: term, "data-meta-item": "true" }, [h("strong", `${term}:`), ` ${value}`]))
+      ]);
+    };
+  }
+});
+var ArchivePill = createBadgeFamily({
+  component: "ArchivePill",
+  className: "oods-archive-pill",
+  defaultLabel: "Archive",
+  defaultVariant: "archive",
+  labelKeys: ["label", "text", "status", "state", "isArchived", "value"],
+  statusKeys: ["status", "state", "isArchived", "value"],
+  extraProps: ["isArchived"],
+  booleanProps: ["isArchived", "value"]
+});
+var CancellationBadge = createBadgeFamily({
+  component: "CancellationBadge",
+  className: "oods-cancellation-badge",
+  defaultLabel: "Cancellation",
+  defaultVariant: "cancellation",
+  labelKeys: ["label", "text", "status", "state", "cancelAtPeriodEnd", "value"],
+  statusKeys: ["status", "state", "cancelAtPeriodEnd", "isCancelled", "value"],
+  extraProps: ["cancelAtPeriodEnd", "isCancelled"],
+  booleanProps: ["cancelAtPeriodEnd", "isCancelled", "value"]
+});
+var ArchiveSummary = defineComponent({
+  name: "OodsArchiveSummary",
+  props: { title: String, label: String, heading: String, name: String, isArchived: { type: [String, Boolean], default: void 0 }, archived: { type: [String, Boolean], default: void 0 }, status: { type: [String, Boolean], default: void 0 }, archivedAt: String, reason: String, archiveReason: String, summary: String, text: String, description: String },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const terms = [["Archived", summaryValue(props.isArchived ?? props.archived ?? props.status)], ["Archived At", props.archivedAt ? formatDateTime(props.archivedAt) : void 0], ["Reason", firstText(props.reason, props.archiveReason)]].filter((entry) => entry[1] !== void 0);
+      const fallback = firstText(props.summary, props.text, props.description);
+      return h("section", { class: "oods-archive-summary", "data-oods-component": "ArchiveSummary", "data-summary-type": "archive" }, [
+        h("h2", { "data-summary-title": "true" }, firstText(props.title, props.label, props.heading, props.name) ?? "Archive Summary"),
+        ...content.length ? content : terms.length ? [h("dl", terms.map(([term, value]) => h("div", { key: term, "data-summary-item": "true" }, [h("dt", term), h("dd", value)])))] : fallback ? [h("p", { "data-summary-fallback": "true" }, fallback)] : [h("dl")]
+      ]);
+    };
+  }
+});
+var PriceCardMeta = defineComponent({
+  name: "OodsPriceCardMeta",
+  props: { title: String, label: String, heading: String, name: String, model: String, pricingModel: String, interval: String, billingInterval: String },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const terms = [["Model", firstText(props.model, props.pricingModel)], ["Interval", firstText(props.interval, props.billingInterval)]].filter((entry) => entry[1] !== void 0);
+      return h("div", { class: "oods-price-card-meta", "data-oods-component": "PriceCardMeta", "data-meta-type": "price" }, content.length ? content : [
+        h("span", { "data-meta-title": "true" }, firstText(props.title, props.label, props.heading, props.name) ?? "Price"),
+        ...terms.map(([term, value]) => h("span", { key: term, "data-meta-item": "true" }, [h("strong", `${term}:`), ` ${value}`]))
+      ]);
+    };
+  }
+});
+var CancellationForm = defineComponent({
+  name: "OodsCancellationForm",
+  props: {
+    title: String,
+    label: String,
+    heading: String,
+    name: String,
+    description: String,
+    subtitle: String,
+    hint: String,
+    allowedReasons: Array,
+    reasonCode: String,
+    reason: String,
+    cancellationReason: String,
+    embedded: Boolean,
+    reasonHelp: String,
+    codeHelp: String
+  },
+  setup(props, { slots }) {
+    return () => {
+      const content = authoredContent(slots.default?.());
+      const choices = normalizeSelectOptions(props.allowedReasons ?? ["no_longer_needed", "budget", "duplicate"]);
+      if (props.reasonCode && !choices.some((choice) => choice.value === props.reasonCode)) choices.unshift({ value: props.reasonCode, label: props.reasonCode });
+      return h(props.embedded ? "fieldset" : "form", { class: "oods-cancellation-form", "data-oods-component": "CancellationForm", "data-form-type": "cancellation", onSubmit: props.embedded ? void 0 : (event) => event.preventDefault() }, [
+        formHeader(firstText(props.title, props.label, props.heading, props.name) ?? "Cancellation Form", firstText(props.description, props.subtitle, props.hint)),
+        h("div", { "data-form-content": "true" }, content.length ? content : [
+          h("label", { "data-form-control": "select" }, [h("span", "Reason Code"), props.allowedReasons?.length === 0 ? h("input", { name: "reasonCode", value: props.reasonCode ?? "" }) : h("select", { name: "reasonCode", value: props.reasonCode }, selectOptionNodes(choices, props.reasonCode))]),
+          props.codeHelp ? h("p", { class: "oods-field-help" }, props.codeHelp) : null,
+          h("label", { "data-form-control": "textarea" }, [h("span", "Reason"), h("textarea", { name: "reason", value: firstText(props.reason, props.cancellationReason) ?? "" })]),
+          props.reasonHelp ? h("p", { class: "oods-field-help" }, props.reasonHelp) : null
+        ])
+      ]);
+    };
+  }
+});
+function validationStyle(validation) {
+  if (!validation) return void 0;
+  const tone = validation.state === "error" ? "critical" : validation.state;
+  return {
+    "--cmp-input-message-border": `var(--sys-status-${tone}-border)`,
+    "--cmp-input-message-text": `var(--sys-status-${tone}-text)`
+  };
+}
+function useFieldMetadata(componentName, props, slots) {
+  const generatedId = useId();
+  const controlId = computed(() => props.id || `oods-${componentName.toLowerCase()}-${generatedId}`);
+  const helpId = computed(() => `${controlId.value}-help`);
+  const validationId = computed(() => `${controlId.value}-validation`);
+  const describedBy = computed(() => {
+    const ids = [];
+    if (props.help || slots.help) ids.push(helpId.value);
+    if (props.validation?.message || slots.validation) ids.push(validationId.value);
+    return ids.length > 0 ? ids.join(" ") : void 0;
+  });
+  return { controlId, helpId, validationId, describedBy };
+}
+function renderField(componentName, props, slots, metadata, control) {
+  const label = slots.label?.() ?? props.label;
+  const help = slots.help?.() ?? props.help;
+  const validation = slots.validation?.() ?? props.validation?.message;
+  return h("div", {
+    class: "oods-field",
+    "data-oods-component": componentName,
+    style: validationStyle(props.validation)
+  }, [
+    label ? h("label", { class: "oods-field-label", for: metadata.controlId.value }, [label, props.required ? h("span", { class: "oods-field-required", "aria-hidden": "true" }, "*") : null]) : null,
+    control,
+    help ? h("p", { id: metadata.helpId.value, class: "oods-field-help" }, help) : null,
+    validation ? h("p", {
+      id: metadata.validationId.value,
+      class: "oods-field-error",
+      role: props.validation?.state === "error" ? "alert" : void 0
+    }, validation) : null
+  ]);
+}
+var textFieldProps = {
+  id: String,
+  label: String,
+  modelValue: String,
+  value: String,
+  defaultValue: { type: String, default: "" },
+  placeholder: String,
+  required: Boolean,
+  disabled: Boolean,
+  readOnly: Boolean,
+  help: String,
+  validation: Object,
+  name: String,
+  min: String,
+  max: String,
+  step: [String, Number]
+};
+function eventValue(event) {
+  return event.target.value;
+}
+var Input = defineComponent({
+  name: "OodsInput",
+  props: {
+    ...textFieldProps,
+    type: { type: String, default: "text" }
+  },
+  emits: {
+    "update:modelValue": (_value) => true,
+    input: (_value) => true,
+    change: (_value) => true
+  },
+  setup(props, { emit, slots }) {
+    const internalValue = ref(props.defaultValue);
+    const currentValue = computed(() => props.modelValue ?? props.value ?? internalValue.value);
+    const metadata = useFieldMetadata("Input", props, slots);
+    const updateValue = (nextValue) => {
+      if (props.modelValue === void 0 && props.value === void 0) internalValue.value = nextValue;
+      emit("update:modelValue", nextValue);
+      emit("input", nextValue);
+    };
+    return () => renderField("Input", props, slots, metadata, h("input", {
+      id: metadata.controlId.value,
+      class: "oods-field-control",
+      type: props.type,
+      name: props.name,
+      value: props.type === "datetime-local" ? dateTimeInputValue(currentValue.value) : currentValue.value,
+      placeholder: props.placeholder,
+      required: props.required,
+      disabled: props.disabled,
+      readonly: props.readOnly,
+      min: props.min,
+      max: props.max,
+      step: props.step,
+      "aria-invalid": props.validation?.state === "error" ? "true" : void 0,
+      "aria-describedby": metadata.describedBy.value,
+      "aria-errormessage": props.validation?.state === "error" ? metadata.validationId.value : void 0,
+      onInput: (event) => updateValue(eventValue(event)),
+      onChange: (event) => emit("change", eventValue(event))
+    }));
+  }
+});
+var DatePicker = defineComponent({
+  name: "OodsDatePicker",
+  inheritAttrs: false,
+  props: textFieldProps,
+  emits: {
+    "update:modelValue": (_value) => true,
+    input: (_value) => true,
+    change: (_value) => true
+  },
+  setup(props, { attrs, emit, slots }) {
+    return () => h("div", {
+      ...attrs,
+      class: ["oods-date-picker", attrs.class],
+      "data-oods-component": "DatePicker"
+    }, [h(Input, {
+      ...props,
+      type: "date",
+      "onUpdate:modelValue": (value) => emit("update:modelValue", value),
+      onInput: (value) => emit("input", value),
+      onChange: (value) => emit("change", value)
+    }, slots)]);
+  }
+});
+var Textarea = defineComponent({
+  name: "OodsTextarea",
+  props: {
+    ...textFieldProps,
+    rows: { type: Number, default: 3 }
+  },
+  emits: {
+    "update:modelValue": (_value) => true,
+    input: (_value) => true,
+    change: (_value) => true
+  },
+  setup(props, { emit, slots }) {
+    const internalValue = ref(props.defaultValue);
+    const currentValue = computed(() => props.modelValue ?? props.value ?? internalValue.value);
+    const metadata = useFieldMetadata("Textarea", props, slots);
+    const updateValue = (nextValue) => {
+      if (props.modelValue === void 0 && props.value === void 0) internalValue.value = nextValue;
+      emit("update:modelValue", nextValue);
+      emit("input", nextValue);
+    };
+    return () => renderField("Textarea", props, slots, metadata, h("textarea", {
+      id: metadata.controlId.value,
+      class: "oods-field-control",
+      name: props.name,
+      value: currentValue.value,
+      rows: props.rows,
+      placeholder: props.placeholder,
+      required: props.required,
+      disabled: props.disabled,
+      readonly: props.readOnly,
+      "aria-invalid": props.validation?.state === "error" ? "true" : void 0,
+      "aria-describedby": metadata.describedBy.value,
+      "aria-errormessage": props.validation?.state === "error" ? metadata.validationId.value : void 0,
+      onInput: (event) => updateValue(eventValue(event)),
+      onChange: (event) => emit("change", eventValue(event))
+    }));
+  }
+});
+var Select = defineComponent({
+  name: "OodsSelect",
+  props: {
+    id: String,
+    label: String,
+    modelValue: String,
+    value: String,
+    defaultValue: { type: String, default: "" },
+    placeholder: String,
+    required: Boolean,
+    disabled: Boolean,
+    help: String,
+    validation: Object,
+    name: String,
+    options: { type: Array, default: () => [] }
+  },
+  emits: {
+    "update:modelValue": (_value) => true,
+    change: (_value) => true
+  },
+  setup(props, { emit, slots }) {
+    const internalValue = ref(props.defaultValue);
+    const currentValue = computed(() => props.modelValue ?? props.value ?? internalValue.value);
+    const metadata = useFieldMetadata("Select", props, slots);
+    const selectValue = (nextValue) => {
+      if (props.modelValue === void 0 && props.value === void 0) internalValue.value = nextValue;
+      emit("update:modelValue", nextValue);
+      emit("change", nextValue);
+    };
+    return () => renderField("Select", props, slots, metadata, h("select", {
+      id: metadata.controlId.value,
+      class: "oods-field-control",
+      name: props.name,
+      value: currentValue.value,
+      required: props.required,
+      disabled: props.disabled,
+      "aria-invalid": props.validation?.state === "error" ? "true" : void 0,
+      "aria-describedby": metadata.describedBy.value,
+      "aria-errormessage": props.validation?.state === "error" ? metadata.validationId.value : void 0,
+      onChange: (event) => selectValue(eventValue(event))
+    }, [
+      props.placeholder ? h("option", {
+        value: "",
+        selected: currentValue.value === "",
+        disabled: true
+      }, props.placeholder) : null,
+      ...props.options.map((option) => h("option", {
+        key: option.value,
+        value: option.value,
+        selected: option.value === currentValue.value,
+        disabled: option.disabled
+      }, slots.option?.({ option }) ?? option.label))
+    ]));
+  }
+});
+var Checkbox = defineComponent({
+  name: "OodsCheckbox",
+  props: {
+    id: String,
+    label: String,
+    modelValue: { type: Boolean, default: void 0 },
+    checked: { type: Boolean, default: void 0 },
+    defaultChecked: Boolean,
+    required: Boolean,
+    disabled: Boolean,
+    help: String,
+    validation: Object,
+    name: String
+  },
+  emits: {
+    "update:modelValue": (_value) => true,
+    change: (_value) => true
+  },
+  setup(props, { emit, slots }) {
+    const internalChecked = ref(props.defaultChecked);
+    const currentChecked = computed(() => props.modelValue ?? props.checked ?? internalChecked.value);
+    const metadata = useFieldMetadata("Checkbox", props, slots);
+    const change = (event) => {
+      const checked = event.target.checked;
+      if (props.modelValue === void 0 && props.checked === void 0) internalChecked.value = checked;
+      emit("update:modelValue", checked);
+      emit("change", checked);
+    };
+    return () => {
+      const label = slots.label?.() ?? props.label;
+      const help = slots.help?.() ?? props.help;
+      const validation = slots.validation?.() ?? props.validation?.message;
+      return h("div", {
+        class: "oods-field",
+        "data-oods-component": "Checkbox",
+        style: validationStyle(props.validation)
+      }, [
+        h("label", { class: "oods-checkbox", for: metadata.controlId.value }, [
+          h("input", {
+            id: metadata.controlId.value,
+            type: "checkbox",
+            name: props.name,
+            checked: currentChecked.value,
+            required: props.required,
+            disabled: props.disabled,
+            "aria-invalid": props.validation?.state === "error" ? "true" : void 0,
+            "aria-describedby": metadata.describedBy.value,
+            "aria-errormessage": props.validation?.state === "error" ? metadata.validationId.value : void 0,
+            onChange: change
+          }),
+          h("span", { class: "oods-field-label" }, [
+            label,
+            props.required ? h("span", { class: "oods-field-required", "aria-hidden": "true" }, "*") : null
+          ])
+        ]),
+        help ? h("p", { id: metadata.helpId.value, class: "oods-field-help" }, help) : null,
+        validation ? h("p", {
+          id: metadata.validationId.value,
+          class: "oods-field-error",
+          role: props.validation?.state === "error" ? "alert" : void 0
+        }, validation) : null
+      ]);
+    };
+  }
+});
+var TableCaption = defineComponent({
+  name: "OodsTableCaption",
+  setup(_props, { slots }) {
+    return () => h("caption", {}, slots.default?.());
+  }
+});
+var TableHead = defineComponent({
+  name: "OodsTableHead",
+  setup(_props, { slots }) {
+    return () => h("thead", {}, slots.default?.());
+  }
+});
+var TableBody = defineComponent({
+  name: "OodsTableBody",
+  setup(_props, { slots }) {
+    return () => h("tbody", {}, slots.default?.());
+  }
+});
+var TableRow = defineComponent({
+  name: "OodsTableRow",
+  setup(_props, { slots }) {
+    return () => h("tr", {}, slots.default?.());
+  }
+});
+var TableHeaderCell = defineComponent({
+  name: "OodsTableHeaderCell",
+  props: {
+    scope: { type: String, default: "col" }
+  },
+  setup(props, { slots }) {
+    return () => h("th", { scope: props.scope }, slots.default?.());
+  }
+});
+var TableCell = defineComponent({
+  name: "OodsTableCell",
+  setup(_props, { slots }) {
+    return () => h("td", {}, slots.default?.());
+  }
+});
+var Table = defineComponent({
+  name: "OodsTable",
+  props: {
+    caption: { type: String, default: "" },
+    columns: { type: Array, default: () => [] },
+    rows: { type: Array, default: () => [] },
+    density: { type: String, default: "default" },
+    selectable: Boolean
+  },
+  emits: {
+    rowActivate: (_rowId) => true
+  },
+  setup(props, { emit, slots }) {
+    const activate = (row) => emit("rowActivate", row.id);
+    return () => h("table", {
+      class: "oods-table",
+      "data-oods-component": "Table",
+      "data-density": props.density
+    }, [
+      h(TableCaption, {}, {
+        default: () => slots.caption?.() ?? props.caption
+      }),
+      h(TableHead, {}, {
+        default: () => slots.head?.() ?? h(TableRow, {}, {
+          default: () => props.columns.map((column) => h(TableHeaderCell, { key: column.key }, {
+            default: () => slots.headerCell?.({ column }) ?? column.label
+          }))
+        })
+      }),
+      h(TableBody, {}, {
+        default: () => slots.body?.() ?? (props.rows.length === 0 ? h(TableRow, {}, {
+          default: () => h(TableCell, {
+            colspan: Math.max(props.columns.length, 1)
+          }, {
+            default: () => "No rows available."
+          })
+        }) : props.rows.map((row, rowIndex) => slots.row?.({ row, rowIndex, activate: () => activate(row) }) ?? h(TableRow, { key: row.id }, {
+          default: () => props.columns.map((column, columnIndex) => {
+            const content = slots.cell?.({ row, column, value: row[column.key] }) ?? String(row[column.key] ?? "");
+            return h(TableCell, { key: column.key }, {
+              default: () => props.selectable && columnIndex === 0 ? h("button", {
+                type: "button",
+                class: "oods-table-row-action",
+                onClick: () => activate(row)
+              }, content) : content
+            });
+          })
+        })))
+      })
+    ]);
+  }
+});
+function itemDisabled(item) {
+  return item.disabled === true || item.isDisabled === true;
+}
+function enabledItems(items) {
+  return items.filter((item) => !itemDisabled(item));
+}
+function initialTabId(items, preferred) {
+  if (preferred && items.some((item) => item.id === preferred && !itemDisabled(item))) return preferred;
+  return enabledItems(items)[0]?.id ?? "";
+}
+function domId(value) {
+  return value.replace(/[^A-Za-z0-9_-]/g, "-");
+}
+var Tabs = defineComponent({
+  name: "OodsTabs",
+  props: {
+    items: { type: Array, default: () => [] },
+    selectedId: String,
+    defaultSelectedId: String,
+    size: { type: String, default: "md" },
+    overflowLabel: { type: String, default: "More" },
+    ariaLabel: { type: String, default: "Tabs" }
+  },
+  emits: {
+    "update:selectedId": (_id) => true,
+    change: (_id) => true
+  },
+  setup(props, { emit, slots }) {
+    const baseId = domId(useId());
+    const internalSelectedId = ref(initialTabId(props.items, props.defaultSelectedId));
+    const activeId = computed(() => props.selectedId !== void 0 ? initialTabId(props.items, props.selectedId) : initialTabId(props.items, internalSelectedId.value));
+    const tabRefs = /* @__PURE__ */ new Map();
+    const tabWidths = /* @__PURE__ */ new Map();
+    const listRef = ref();
+    const visibleLimit = ref(Number.POSITIVE_INFINITY);
+    const overflowOpen = ref(false);
+    let resizeObserver;
+    const visibleItems = computed(() => {
+      if (visibleLimit.value >= props.items.length) return [...props.items];
+      const count = Math.max(1, visibleLimit.value);
+      const visible = props.items.slice(0, count);
+      const active = props.items.find((item) => item.id === activeId.value);
+      if (active && !visible.some((item) => item.id === active.id)) {
+        visible.splice(Math.max(visible.length - 1, 0), 1, active);
+        visible.sort((left, right) => props.items.findIndex((item) => item.id === left.id) - props.items.findIndex((item) => item.id === right.id));
+      }
+      return visible;
+    });
+    const overflowItems = computed(() => props.items.filter((item) => !visibleItems.value.some((visible) => visible.id === item.id)));
+    const tabId = (id) => `oods-${baseId}-tab-${domId(id)}`;
+    const panelId = (id) => `oods-${baseId}-panel-${domId(id)}`;
+    const focusTab = (id) => nextTick(() => tabRefs.get(id)?.focus());
+    const selectTab = (id) => {
+      const item = props.items.find((candidate) => candidate.id === id);
+      if (!item || itemDisabled(item)) return;
+      if (props.selectedId === void 0) internalSelectedId.value = id;
+      emit("update:selectedId", id);
+      emit("change", id);
+      void focusTab(id);
+    };
+    const onTabKeydown = (event, currentId) => {
+      const available = enabledItems(props.items);
+      if (available.length === 0) return;
+      const currentIndex = Math.max(available.findIndex((item) => item.id === currentId), 0);
+      let nextIndex;
+      if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % available.length;
+      if (event.key === "ArrowLeft") nextIndex = (currentIndex - 1 + available.length) % available.length;
+      if (event.key === "Home") nextIndex = 0;
+      if (event.key === "End") nextIndex = available.length - 1;
+      if (nextIndex === void 0) return;
+      event.preventDefault();
+      selectTab(available[nextIndex].id);
+    };
+    const recalculateOverflow = () => {
+      const list = listRef.value;
+      if (!list || list.clientWidth <= 0 || props.items.length <= 1) {
+        visibleLimit.value = Number.POSITIVE_INFINITY;
+        return;
+      }
+      for (const [id, element] of tabRefs) {
+        if (element.offsetWidth > 0) tabWidths.set(id, element.offsetWidth);
+      }
+      const widths = props.items.map((item) => tabWidths.get(item.id) ?? 120);
+      const total = widths.reduce((sum, width) => sum + width, 0);
+      if (total <= list.clientWidth) {
+        visibleLimit.value = Number.POSITIVE_INFINITY;
+        return;
+      }
+      const availableWidth = Math.max(list.clientWidth - 96, 0);
+      let usedWidth = 0;
+      let count = 0;
+      for (const width of widths) {
+        if (count > 0 && usedWidth + width > availableWidth) break;
+        usedWidth += width;
+        count += 1;
+      }
+      visibleLimit.value = Math.max(1, count);
+    };
+    watch(
+      () => props.items,
+      (items) => {
+        if (!items.some((item) => item.id === internalSelectedId.value && !itemDisabled(item))) {
+          internalSelectedId.value = initialTabId(items, props.defaultSelectedId);
+        }
+        void nextTick(recalculateOverflow);
+      }
+    );
+    onMounted(() => {
+      void nextTick(recalculateOverflow);
+      if (typeof ResizeObserver === "function" && listRef.value) {
+        resizeObserver = new ResizeObserver(recalculateOverflow);
+        resizeObserver.observe(listRef.value);
+      } else if (typeof window !== "undefined") {
+        window.addEventListener("resize", recalculateOverflow);
+      }
+    });
+    onBeforeUnmount(() => {
+      resizeObserver?.disconnect();
+      if (typeof window !== "undefined") window.removeEventListener("resize", recalculateOverflow);
+    });
+    return () => h("div", {
+      class: "oods-tabs",
+      "data-oods-component": "Tabs",
+      "data-size": props.size
+    }, [
+      h("div", {
+        ref: listRef,
+        class: "oods-tab-list",
+        role: "tablist",
+        "aria-label": props.ariaLabel
+      }, [
+        ...visibleItems.value.map((item) => h("button", {
+          key: item.id,
+          ref: (element) => {
+            if (element instanceof HTMLButtonElement) tabRefs.set(item.id, element);
+            else tabRefs.delete(item.id);
+          },
+          id: tabId(item.id),
+          class: "oods-tab",
+          type: "button",
+          role: "tab",
+          disabled: itemDisabled(item),
+          tabindex: item.id === activeId.value ? 0 : -1,
+          "aria-selected": item.id === activeId.value,
+          "aria-controls": panelId(item.id),
+          "data-tab-id": item.id,
+          onClick: () => selectTab(item.id),
+          onKeydown: (event) => onTabKeydown(event, item.id)
+        }, slots.itemLabel?.({ item, selected: item.id === activeId.value }) ?? [item.label])),
+        overflowItems.value.length > 0 ? h("div", { class: "oods-tabs-overflow" }, [
+          h("button", {
+            type: "button",
+            class: "oods-tabs-overflow-trigger",
+            "aria-label": `${props.overflowLabel} tabs`,
+            "aria-haspopup": "menu",
+            "aria-expanded": overflowOpen.value,
+            onClick: () => {
+              overflowOpen.value = !overflowOpen.value;
+            }
+          }, props.overflowLabel),
+          overflowOpen.value ? h("div", { class: "oods-tabs-overflow-menu", role: "menu" }, overflowItems.value.map((item) => h("button", {
+            key: item.id,
+            type: "button",
+            role: "menuitem",
+            disabled: itemDisabled(item),
+            "aria-current": item.id === activeId.value ? "page" : void 0,
+            onClick: () => {
+              selectTab(item.id);
+              overflowOpen.value = false;
+            }
+          }, [item.label]))) : null
+        ]) : null
+      ]),
+      ...props.items.map((item) => h("div", {
+        key: item.id,
+        id: panelId(item.id),
+        class: "oods-tab-panel",
+        role: "tabpanel",
+        tabindex: 0,
+        hidden: item.id !== activeId.value,
+        "aria-labelledby": tabId(item.id)
+      }, slots.panel?.({ item, selected: item.id === activeId.value }) ?? [item.panel]))
+    ]);
+  }
+});
+
+// src/ported-core.ts
+var STATUS_METADATA = {
+  subscription: {
+    future: {
+      description: "Subscription is scheduled but not yet active.",
+      tone: "info",
+      icon: "\u23F2"
+    },
+    trialing: {
+      description: "Subscription is in a trial period before billing begins.",
+      tone: "accent",
+      icon: "\u2605"
+    },
+    active: {
+      description: "Subscription is paid and service is provisioned.",
+      tone: "success",
+      icon: "\u2714\uFE0E"
+    },
+    paused: {
+      description: "Billing paused temporarily by finance or customer request.",
+      tone: "neutral",
+      icon: "\u23F8"
+    },
+    pending_cancellation: {
+      description: "Subscription will cancel at period end but remains active now.",
+      tone: "info",
+      icon: "\u2026"
+    },
+    past_due: {
+      description: "Renewal payment failed; smart retries ongoing and access retained during the grace window.",
+      tone: "critical",
+      icon: "\u26A0\uFE0E"
+    },
+    unpaid: {
+      description: "Payment retries exhausted; service access revoked.",
+      tone: "critical",
+      icon: "\u2A2F"
+    },
+    terminated: {
+      description: "Subscription ended; service access revoked and billing stopped.",
+      tone: "neutral",
+      icon: "\u2205"
+    }
+  },
+  invoice: {
+    draft: {
+      description: "Invoice is editable and not yet finalized.",
+      tone: "neutral",
+      icon: "\u270E"
+    },
+    posted: {
+      description: "Invoice finalized with terms before collection.",
+      tone: "info",
+      icon: "\u2026"
+    },
+    paid: {
+      description: "Invoice collected successfully in full.",
+      tone: "success",
+      icon: "\u2714\uFE0E"
+    },
+    past_due: {
+      description: "Invoice is unpaid past its due date.",
+      tone: "critical",
+      icon: "\u2A2F"
+    },
+    void: {
+      description: "Invoice canceled and no longer payable.",
+      tone: "neutral",
+      icon: "\u2205"
+    }
+  }
+};
+var STATUS_ALIASES = {
+  subscription: { delinquent: "unpaid" }
+};
+function isRecord2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function firstText2(record, keys) {
+  for (const key of keys) {
+    const value = record[key];
+    if (value === void 0 || value === null || value === "") continue;
+    if (typeof value === "string") return value;
+    if (typeof value === "number" || typeof value === "boolean") return String(value);
+  }
+  return void 0;
+}
+function statusLabel2(status) {
+  return status.split(/[_-]/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join(" ");
+}
+function getPortedStatusPresentation(domain, status) {
+  const normalizedDomain = domain.toLowerCase();
+  const normalizedStatus = status.toLowerCase();
+  const alias = STATUS_ALIASES[normalizedDomain]?.[normalizedStatus];
+  const metadata = STATUS_METADATA[normalizedDomain]?.[alias ?? normalizedStatus];
+  if (!metadata) {
+    return {
+      label: statusLabel2(status || "Unknown"),
+      description: "Status not found in registry; falling back to the requested token set.",
+      tone: "neutral"
+    };
+  }
+  return { ...metadata, label: statusLabel2(status) };
+}
+function formatPrice(amountCents, amount, currency) {
+  const normalizedAmount = amount;
+  if (normalizedAmount === void 0 || !Number.isFinite(normalizedAmount)) return void 0;
+  const formatted = Number.isInteger(normalizedAmount) ? String(normalizedAmount) : normalizedAmount.toFixed(2);
+  return currency ? `${currency.toUpperCase()} ${formatted}` : formatted;
+}
+function normalizeTimelineEvents(raw) {
+  if (!Array.isArray(raw)) return [];
+  const events = [];
+  for (const entry of raw) {
+    if (entry === void 0 || entry === null) continue;
+    if (!isRecord2(entry)) {
+      events.push({ label: String(entry) });
+      continue;
+    }
+    const from = firstText2(entry, ["from"]);
+    const to = firstText2(entry, ["to"]);
+    events.push({
+      label: firstText2(entry, ["label", "title"]) ?? (firstText2(entry, ["event", "status", "state"]) ? statusLabel2(firstText2(entry, ["event", "status", "state"])) : void 0) ?? firstText2(entry, ["text", "name"]) ?? (to ? from ? `${statusLabel2(from)} \u2192 ${statusLabel2(to)}` : statusLabel2(to) : void 0) ?? "Event",
+      timestamp: firstText2(entry, ["timestamp", "datetime", "time", "at", "createdAt", "updatedAt"]),
+      detail: firstText2(entry, ["detail", "description", "message"]) ?? (to ? from ? `${statusLabel2(from)} \u2192 ${statusLabel2(to)}` : statusLabel2(to) : void 0),
+      actorId: firstText2(entry, ["actorId", "actor_id", "actor"]),
+      reason: firstText2(entry, ["reason"])
+    });
+  }
+  return events;
+}
+function integerAtLeast(value, minimum, fallback) {
+  return Number.isFinite(value) ? Math.max(minimum, Math.floor(value)) : fallback;
+}
+function buildPaginationItems(options) {
+  const count = integerAtLeast(options.count, 0, 0);
+  const rawPage = integerAtLeast(options.page, 1, 1);
+  const page = count > 0 ? Math.min(rawPage, count) : 1;
+  const items = [{
+    type: "previous",
+    page: page > 1 ? page - 1 : page,
+    selected: false,
+    disabled: count === 0 || page <= 1
+  }];
+  if (count === 0) {
+    items.push({ type: "next", page: 1, selected: false, disabled: true });
+    return { page, count, items };
+  }
+  const siblingCount = integerAtLeast(options.siblingCount ?? 1, 0, 1);
+  const boundaryCount = integerAtLeast(options.boundaryCount ?? 1, 1, 1);
+  const candidates = count <= boundaryCount * 2 + siblingCount * 2 + 3 ? Array.from({ length: count }, (_, index) => index + 1) : [.../* @__PURE__ */ new Set([
+    ...Array.from({ length: boundaryCount }, (_, index) => index + 1),
+    ...Array.from({ length: siblingCount * 2 + 1 }, (_, index) => page - siblingCount + index),
+    ...Array.from({ length: boundaryCount }, (_, index) => count - boundaryCount + index + 1)
+  ])].filter((candidate) => candidate >= 1 && candidate <= count).sort((left, right) => left - right);
+  let priorPage;
+  let ellipsisIndex = 0;
+  for (const pageNumber of candidates) {
+    if (priorPage !== void 0 && pageNumber - priorPage > 1) {
+      items.push({
+        type: "ellipsis",
+        selected: false,
+        disabled: true,
+        index: ellipsisIndex++
+      });
+    }
+    items.push({
+      type: "page",
+      page: pageNumber,
+      selected: pageNumber === page,
+      disabled: false
+    });
+    priorPage = pageNumber;
+  }
+  items.push({
+    type: "next",
+    page: page < count ? page + 1 : page,
+    selected: false,
+    disabled: page >= count
+  });
+  return { page, count, items };
+}
+function relativeTimestampLabel(datetime, now) {
+  if (now === void 0) return datetime;
+  const timestamp = Date.parse(datetime);
+  const reference = now instanceof Date ? now.getTime() : typeof now === "number" ? now : Date.parse(now);
+  if (!Number.isFinite(timestamp) || !Number.isFinite(reference)) return datetime;
+  const seconds = Math.round((timestamp - reference) / 1e3);
+  const absoluteSeconds = Math.abs(seconds);
+  const formatter = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  if (absoluteSeconds < 60) return formatter.format(seconds, "second");
+  const minutes = Math.round(seconds / 60);
+  if (Math.abs(minutes) < 60) return formatter.format(minutes, "minute");
+  const hours = Math.round(minutes / 60);
+  if (Math.abs(hours) < 24) return formatter.format(hours, "hour");
+  return formatter.format(Math.round(hours / 24), "day");
+}
+
+// src/ported.ts
+function stringValue(value) {
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return void 0;
+}
+function firstDefined(...values) {
+  return values.find((value) => value !== void 0);
+}
+function firstArray(...values) {
+  return values.find((value) => Array.isArray(value)) ?? [];
+}
+function mergedClass(componentClass, value) {
+  return value ? [componentClass, value] : [componentClass];
+}
+var StatusBadge = defineComponent({
+  name: "OodsStatusBadge",
+  inheritAttrs: false,
+  props: {
+    content: { type: [String, Number], default: void 0 },
+    status: String,
+    value: String,
+    label: String,
+    domain: { type: String, default: "subscription" },
+    tone: String,
+    emphasis: { type: String, default: "subtle" },
+    showIcon: { type: Boolean, default: true },
+    field: String,
+    statusField: String,
+    domainField: String,
+    readOnly: Boolean,
+    compact: Boolean,
+    variant: String
+  },
+  setup(props, { attrs, slots }) {
+    return () => {
+      const status = props.status ?? props.value ?? "unknown";
+      const presentation = getPortedStatusPresentation(props.domain, status);
+      const tone = props.tone === "lifecycle" ? presentation.tone : props.tone ?? presentation.tone;
+      const ariaLabel = stringValue(attrs["aria-label"]) ?? props.label ?? `Status: ${presentation.label}`;
+      return h(Badge, {
+        ...attrs,
+        class: mergedClass("oods-status-badge", attrs.class),
+        content: slots.default ? void 0 : props.content ?? presentation.label,
+        status,
+        domain: props.domain,
+        tone,
+        emphasis: props.variant === "solid" ? "solid" : props.emphasis,
+        icon: props.showIcon ? presentation.icon : void 0,
+        title: stringValue(attrs.title) ?? presentation.description,
+        "aria-label": ariaLabel,
+        "data-oods-component": "StatusBadge"
+      }, slots);
+    };
+  }
+});
+function currencyLabel(amountCents, amount, currency, minorUnits) {
+  const normalizedAmount = amountCents !== void 0 ? amountCents / currencyMinorUnits(currency, minorUnits) : amount;
+  if (normalizedAmount === void 0 || !Number.isFinite(normalizedAmount)) return void 0;
+  if (!currency) return formatPrice(void 0, normalizedAmount, void 0);
+  try {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: currency.toUpperCase()
+    }).format(normalizedAmount);
+  } catch {
+    return formatPrice(void 0, normalizedAmount, currency);
+  }
+}
+var PriceBadge = defineComponent({
+  name: "OodsPriceBadge",
+  inheritAttrs: false,
+  props: {
+    amountCents: Number,
+    unitAmountCents: Number,
+    minorUnits: Number,
+    amount: Number,
+    unitAmount: Number,
+    currency: String,
+    currencyCode: String,
+    label: String,
+    value: [String, Number],
+    emphasis: { type: String, default: "subtle" },
+    field: String,
+    amountField: String,
+    currencyField: String,
+    intervalField: String,
+    minorUnitsParameter: String
+  },
+  setup(props, { attrs, slots }) {
+    return () => {
+      const currency = props.currency ?? props.currencyCode;
+      const cents = props.amountCents ?? props.unitAmountCents;
+      const amount = props.amount ?? props.unitAmount;
+      const content = props.label ?? props.value ?? currencyLabel(cents, amount, currency, props.minorUnits) ?? "Price";
+      return h(Badge, {
+        ...attrs,
+        class: mergedClass("oods-price-badge", attrs.class),
+        content,
+        emphasis: props.emphasis,
+        title: stringValue(attrs.title) ?? props.label,
+        "data-oods-component": "PriceBadge",
+        "data-price": "true",
+        "data-badge-variant": "price",
+        "data-currency": currency?.toUpperCase()
+      }, slots);
+    };
+  }
+});
+var timelineProps = {
+  title: String,
+  source: Array,
+  events: Array,
+  history: Array,
+  entries: Array,
+  stateHistory: Array,
+  auditLog: Array,
+  status: String,
+  allowedTransitions: Array,
+  showActorId: { type: Boolean, default: true },
+  showReason: { type: Boolean, default: true },
+  maxVisible: Number,
+  field: String,
+  historyField: String,
+  statesParameter: String,
+  auditLogField: String,
+  createdField: String,
+  updatedField: String,
+  eventField: String,
+  eventTimestampField: String,
+  eventOptionsParameter: String,
+  showFromState: Boolean
+};
+function renderTimelineEvent(event, index, showActorId, showReason) {
+  return h("li", { key: `${event.timestamp ?? "event"}-${index}` }, [
+    h("article", { "data-timeline-event": "true" }, [
+      h("p", { "data-timeline-label": "true" }, event.label),
+      event.timestamp ? h("time", { "data-timeline-time": "true", datetime: event.timestamp }, formatDateTime(event.timestamp)) : null,
+      event.detail ? h("p", { "data-timeline-detail": "true" }, event.detail) : null,
+      showActorId && event.actorId ? h("p", { "data-timeline-actor": "true" }, `Actor: ${event.actorId}`) : null,
+      showReason && event.reason ? h("p", { "data-timeline-reason": "true" }, `Reason: ${event.reason}`) : null
+    ])
+  ]);
+}
+function timelineComponent(configuration) {
+  return defineComponent({
+    name: `Oods${configuration.componentId}`,
+    inheritAttrs: false,
+    props: timelineProps,
+    setup(props, { attrs, slots }) {
+      return () => {
+        const rawEvents = configuration.componentId === "StatusTimeline" ? firstArray(props.source, props.events, props.history, props.entries, props.stateHistory) : firstArray(props.source, props.events, props.history, props.entries, props.auditLog);
+        const normalized = normalizeTimelineEvents(rawEvents);
+        const events = props.maxVisible === void 0 ? normalized : normalized.slice(0, Math.max(0, Math.floor(props.maxVisible)));
+        const title = props.title ?? configuration.defaultTitle;
+        const slottedEvents = slots.default?.();
+        return h("div", {
+          ...attrs,
+          class: mergedClass("oods-timeline", attrs.class),
+          role: "log",
+          "aria-label": stringValue(attrs["aria-label"]) ?? title,
+          "data-oods-component": configuration.componentId,
+          "data-timeline-type": configuration.timelineType
+        }, [
+          h("h2", { "data-timeline-title": "true" }, title),
+          props.status ? h("p", { "data-timeline-current": "true" }, `Current status: ${statusLabel2(props.status)}`) : null,
+          props.allowedTransitions?.length ? h("p", { "data-timeline-transitions": "true" }, `Allowed transitions: ${props.allowedTransitions.join(", ")}`) : null,
+          h("ol", { "data-timeline-events": "true" }, slottedEvents?.length ? slottedEvents : events.length ? events.map((event, index) => renderTimelineEvent(
+            event,
+            index,
+            props.showActorId,
+            props.showReason
+          )) : [h("li", { "data-timeline-empty": "true" }, "No events")])
+        ]);
+      };
+    }
+  });
+}
+var StatusTimeline = timelineComponent({
+  componentId: "StatusTimeline",
+  defaultTitle: "Status Timeline",
+  timelineType: "status"
+});
+var AuditTimeline = timelineComponent({
+  componentId: "AuditTimeline",
+  defaultTitle: "Audit Timeline",
+  timelineType: "audit"
+});
+function slotSummaryValue(slots) {
+  const nodes = slots.default?.() ?? [];
+  for (const node of nodes) {
+    if (typeof node.children === "string") {
+      const text = node.children.trim().toLowerCase();
+      if (text === "true") return true;
+      if (text === "false") return false;
+      if (node.children.length > 0) return node.children;
+    }
+  }
+  return void 0;
+}
+function summaryEntry(label, value, key) {
+  return h("div", { key, "data-summary-item": "true" }, [
+    h("dt", label),
+    h("dd", [value])
+  ]);
+}
+var CancellationSummary = defineComponent({
+  name: "OodsCancellationSummary",
+  inheritAttrs: false,
+  props: {
+    title: String,
+    label: String,
+    cancelAtPeriodEnd: { type: Boolean, default: void 0 },
+    requestedAt: String,
+    reason: String,
+    code: String,
+    field: String,
+    cancelAtPeriodEndField: String,
+    requestedAtField: String,
+    reasonField: String,
+    codeField: String
+  },
+  setup(props, { attrs, slots }) {
+    return () => {
+      const slotValue = slotSummaryValue(slots);
+      const cancellationValue = props.cancelAtPeriodEnd ?? slotValue;
+      const rows = [];
+      if (cancellationValue !== void 0) {
+        rows.push(summaryEntry(
+          "Cancel at period end",
+          typeof cancellationValue === "boolean" ? cancellationValue ? "Yes" : "No" : cancellationValue,
+          "cancel-at-period-end"
+        ));
+      }
+      if (props.requestedAt) {
+        rows.push(summaryEntry(
+          "Requested at",
+          h("time", { datetime: props.requestedAt }, formatDateTime(props.requestedAt)),
+          "requested-at"
+        ));
+      }
+      if (props.reason) rows.push(summaryEntry("Reason", props.reason, "reason"));
+      if (props.code) rows.push(summaryEntry("Code", formatReadOnlyValue(props.code, "string", true), "code"));
+      return h("section", {
+        ...attrs,
+        class: mergedClass("oods-cancellation-summary", attrs.class),
+        "data-oods-component": "CancellationSummary",
+        "data-summary-type": "cancellation",
+        "data-cancellation-state": props.cancelAtPeriodEnd === void 0 ? void 0 : String(props.cancelAtPeriodEnd)
+      }, [
+        h("h2", { "data-summary-title": "true" }, props.title ?? props.label ?? "Cancellation Summary"),
+        h("dl", rows)
+      ]);
+    };
+  }
+});
+function inputValue(event) {
+  return event.target.value;
+}
+var SearchInput = defineComponent({
+  name: "OodsSearchInput",
+  inheritAttrs: false,
+  props: {
+    id: String,
+    label: String,
+    modelValue: String,
+    value: String,
+    defaultValue: { type: String, default: "" },
+    placeholder: { type: String, default: "Search\u2026" },
+    clearable: { type: Boolean, default: true },
+    debounceMs: { type: Number, default: 0 },
+    debounce: Number,
+    minQueryLength: { type: Number, default: 0 },
+    disabled: Boolean,
+    field: String,
+    placeholderParameter: String,
+    debounceParameter: String,
+    minQueryLengthParameter: String,
+    clearableParameter: String
+  },
+  emits: {
+    "update:modelValue": (_value) => true,
+    valueChange: (_value) => true,
+    update: (_value) => true,
+    input: (_value) => true,
+    search: (_value) => true,
+    clear: () => true
+  },
+  setup(props, { attrs, emit }) {
+    const generatedId = useId();
+    const internalValue = ref(props.defaultValue);
+    const currentValue = computed(() => props.modelValue ?? props.value ?? internalValue.value);
+    let timer;
+    onBeforeUnmount(() => {
+      if (timer !== void 0) clearTimeout(timer);
+    });
+    const emitSearch = (value) => {
+      if (value.length < Math.max(0, props.minQueryLength) && value.length !== 0) return;
+      emit("valueChange", value);
+      emit("update", value);
+      emit("search", value);
+    };
+    const scheduleSearch = (value) => {
+      if (timer !== void 0) clearTimeout(timer);
+      const debounceMs = Math.max(0, props.debounceMs || props.debounce || 0);
+      if (debounceMs > 0) {
+        timer = setTimeout(() => emitSearch(value), debounceMs);
+      } else {
+        emitSearch(value);
+      }
+    };
+    const updateValue = (value) => {
+      if (props.modelValue === void 0 && props.value === void 0) internalValue.value = value;
+      emit("update:modelValue", value);
+      emit("input", value);
+      scheduleSearch(value);
+    };
+    const clear = () => {
+      if (props.disabled || currentValue.value.length === 0) return;
+      if (timer !== void 0) clearTimeout(timer);
+      updateValue("");
+      emit("clear");
+    };
+    const submit = (event) => {
+      event.preventDefault();
+      if (!props.disabled) {
+        if (timer !== void 0) clearTimeout(timer);
+        emitSearch(currentValue.value);
+      }
+    };
+    return () => {
+      const id = props.id ?? `oods-search-${generatedId.replace(/:/g, "")}`;
+      const ariaLabel = stringValue(attrs["aria-label"]) ?? props.label ?? props.placeholder;
+      return h("form", {
+        ...attrs,
+        class: mergedClass("oods-search-input", attrs.class),
+        role: "search",
+        "aria-label": ariaLabel,
+        "data-oods-component": "SearchInput",
+        "data-behavioral": "search",
+        onSubmit: submit
+      }, [
+        h(Input, {
+          id,
+          label: props.label,
+          type: "search",
+          value: currentValue.value,
+          placeholder: props.placeholder,
+          disabled: props.disabled,
+          "aria-label": props.label ? void 0 : ariaLabel,
+          onInput: (value) => updateValue(value),
+          onKeydown: (event) => {
+            if (event.key === "Escape") clear();
+          }
+        }),
+        props.clearable && currentValue.value ? h("button", {
+          type: "button",
+          "data-search-clear": "true",
+          "aria-label": "Clear search",
+          disabled: props.disabled,
+          onClick: clear
+        }, "\xD7") : null
+      ]);
+    };
+  }
+});
+var PaginationBar = defineComponent({
+  name: "OodsPaginationBar",
+  inheritAttrs: false,
+  props: {
+    page: { type: Number, default: 1 },
+    pageSize: { type: Number, default: 25 },
+    totalItems: { type: Number, default: 0 },
+    totalPages: Number,
+    pageSizeOptions: { type: Array, default: () => [10, 25, 50, 100] },
+    showPageSizeSelector: Boolean,
+    showGotoPage: Boolean,
+    showItemRange: { type: Boolean, default: true },
+    pageField: String,
+    pageSizeField: String,
+    totalItemsField: String,
+    totalPagesField: String,
+    pageSizeOptionsParameter: String,
+    showPageSizeSelectorParameter: String,
+    showGotoPageParameter: String,
+    showItemRangeParameter: String
+  },
+  emits: {
+    "update:page": (_page) => true,
+    pageChange: (_page) => true,
+    change: (_page) => true,
+    update: (_page) => true,
+    pageSizeChange: (_pageSize) => true
+  },
+  setup(props, { attrs, emit }) {
+    const generatedId = useId().replace(/:/g, "");
+    const gotoPage = ref("");
+    const count = computed(() => props.totalPages ?? (props.pageSize > 0 ? Math.ceil(props.totalItems / props.pageSize) : 0));
+    const pagination = computed(() => buildPaginationItems({
+      page: props.page,
+      count: count.value
+    }));
+    const setPage = (page) => {
+      if (pagination.value.count === 0) return;
+      const nextPage = Math.max(1, Math.min(Math.floor(page), pagination.value.count));
+      if (nextPage === pagination.value.page) return;
+      emit("update:page", nextPage);
+      emit("pageChange", nextPage);
+      emit("change", nextPage);
+      emit("update", nextPage);
+    };
+    const submitGoto = (event) => {
+      event.preventDefault();
+      const nextPage = Number(gotoPage.value);
+      if (Number.isFinite(nextPage)) setPage(nextPage);
+    };
+    return () => {
+      const { page, count: totalPages, items } = pagination.value;
+      return h("nav", {
+        ...attrs,
+        class: mergedClass("oods-pagination-bar", attrs.class),
+        "aria-label": stringValue(attrs["aria-label"]) ?? "Pagination",
+        "data-oods-component": "PaginationBar",
+        "data-behavioral": "pagination"
+      }, [
+        props.showItemRange ? h("span", { "data-pagination-count": "true" }, `${props.totalItems} ${props.totalItems === 1 ? "record" : "records"}`) : null,
+        // s211-m02: on one page the range only repeats the count ("15 records Showing 1–15 of 15").
+        props.showItemRange && props.totalItems > 0 && totalPages > 1 ? h("span", { "data-pagination-range": "true" }, `Showing ${(page - 1) * Math.max(1, props.pageSize) + 1}\u2013${Math.min(page * Math.max(1, props.pageSize), props.totalItems)} of ${props.totalItems}`) : null,
+        // s210-m01: one page needs no page controls; the count and range above already say what is shown.
+        totalPages > 1 ? h("ul", { class: "oods-pagination-bar__pages" }, items.map((item, index) => {
+          if (item.type === "ellipsis") {
+            return h("li", { key: `ellipsis-${item.index ?? index}`, "aria-hidden": "true" }, "\u2026");
+          }
+          const label = item.type === "page" ? `Page ${item.page}` : item.type === "previous" ? "Previous page" : "Next page";
+          const content = item.type === "page" ? String(item.page) : item.type === "previous" ? "\u2039" : "\u203A";
+          return h("li", { key: `${item.type}-${item.page}` }, [
+            h("button", {
+              type: "button",
+              "data-pagination-page": item.type === "page" ? item.page : void 0,
+              "data-pagination-prev": item.type === "previous" ? "true" : void 0,
+              "data-pagination-next": item.type === "next" ? "true" : void 0,
+              "aria-label": label,
+              "aria-current": item.selected ? "page" : void 0,
+              disabled: item.disabled,
+              onClick: () => item.page !== void 0 && setPage(item.page)
+            }, content)
+          ]);
+        })) : null,
+        totalPages > 1 ? h("span", { "data-pagination-current": "true" }, `Page ${page} of ${Math.max(1, totalPages)}`) : null,
+        props.showPageSizeSelector ? h("label", { class: "oods-pagination-size" }, [
+          h("span", "Items per page"),
+          h("select", {
+            value: props.pageSize,
+            onChange: (event) => {
+              const nextSize = Number(event.target.value);
+              if (Number.isFinite(nextSize) && nextSize > 0 && nextSize !== props.pageSize) {
+                emit("pageSizeChange", nextSize);
+              }
+            }
+          }, props.pageSizeOptions.map((option) => h("option", { value: option }, String(option))))
+        ]) : null,
+        props.showGotoPage ? h("form", { class: "oods-pagination-goto", onSubmit: submitGoto }, [
+          h("label", { for: `oods-pagination-goto-${generatedId}` }, "Go to page"),
+          h("input", {
+            id: `oods-pagination-goto-${generatedId}`,
+            type: "number",
+            min: 1,
+            max: totalPages,
+            value: gotoPage.value,
+            onInput: (event) => {
+              gotoPage.value = inputValue(event);
+            }
+          }),
+          h("button", { type: "submit" }, "Go")
+        ]) : null
+      ]);
+    };
+  }
+});
+var RelativeTimestamp = defineComponent({
+  name: "OodsRelativeTimestamp",
+  inheritAttrs: false,
+  props: {
+    datetime: String,
+    timestamp: String,
+    value: String,
+    updatedAt: String,
+    createdAt: String,
+    relative: String,
+    label: String,
+    text: String,
+    timezone: String,
+    hideWhenEmpty: Boolean,
+    now: [String, Number, Date],
+    field: String,
+    fallbackField: String,
+    timezoneParameter: String
+  },
+  setup(props, { attrs }) {
+    return () => {
+      const datetime = firstDefined(
+        props.datetime,
+        props.timestamp,
+        props.value,
+        props.updatedAt,
+        props.createdAt
+      ) ?? "";
+      if (props.hideWhenEmpty && (!datetime || Number.isNaN(Date.parse(datetime)))) return null;
+      const content = firstDefined(
+        props.relative,
+        props.label,
+        props.text,
+        props.now === void 0 ? formatDateTime(datetime, { timeZone: props.timezone }) : relativeTimestampLabel(datetime, props.now)
+      ) ?? "";
+      return h("time", {
+        ...attrs,
+        class: mergedClass("oods-relative-timestamp", attrs.class),
+        datetime: datetime || void 0,
+        title: stringValue(attrs.title) ?? formatDateTime(datetime, { timeZone: props.timezone }),
+        "data-oods-component": "RelativeTimestamp"
+      }, content);
+    };
+  }
+});
+var amountProps = { id: String, amount: Number, currency: { type: String, default: "usd" }, minorUnits: { type: Number, default: BILLING_MINOR_UNITS } };
+var BillingSummaryBadge = defineComponent({
+  name: "BillingSummaryBadge",
+  props: { ...amountProps, interval: String, showInterval: { type: Boolean, default: true } },
+  setup: (props) => () => h("span", { id: props.id, class: "oods-billing-summary", "data-oods-component": "BillingSummaryBadge" }, props.showInterval ? billingSummary(props.amount, props.currency, props.minorUnits, props.interval) : formatBillingAmount(props.amount, props.currency, props.minorUnits))
+});
+var BillingAmountInput = defineComponent({
+  name: "BillingAmountInput",
+  props: { ...amountProps, label: { type: String, default: "Billing amount" }, name: String, disabled: Boolean, help: String },
+  emits: { change: (value) => value === void 0 || Number.isSafeInteger(value) },
+  setup(props, { emit }) {
+    const generatedId = useId();
+    const text = ref(billingAmountText(props.amount, props.minorUnits));
+    const error = ref(billingAmountMessage(props.amount, props.minorUnits));
+    watch(() => [props.amount, props.minorUnits], () => {
+      text.value = billingAmountText(props.amount, props.minorUnits);
+      error.value = billingAmountMessage(props.amount, props.minorUnits);
+    });
+    return () => {
+      const id = props.id ?? `billing-amount-${generatedId}`;
+      return h("div", { class: "oods-billing-field", "data-oods-component": "BillingAmountInput", "data-state": error.value ? "invalid" : "editing" }, [
+        h("label", { for: id }, props.label),
+        h("span", { id: `${id}-currency` }, props.currency.toUpperCase()),
+        h("input", {
+          id,
+          name: props.name,
+          type: "text",
+          inputmode: "decimal",
+          value: text.value,
+          disabled: props.disabled,
+          "data-billing-minor-units": props.minorUnits,
+          "aria-invalid": error.value ? true : void 0,
+          "aria-describedby": [`${id}-currency`, error.value && `${id}-error`].filter(Boolean).join(" "),
+          onInput(event) {
+            const target = event.currentTarget;
+            const result = parseBillingAmount(target.value, props.minorUnits);
+            target.setCustomValidity(result.valid ? "" : result.message);
+            text.value = target.value;
+            error.value = result.valid ? void 0 : result.message;
+            if (result.valid) emit("change", result.value);
+          }
+        }),
+        props.help ? h("p", { class: "oods-field-help" }, props.help) : null,
+        error.value ? h("p", { id: `${id}-error`, role: "alert" }, error.value) : null
+      ]);
+    };
+  }
+});
+var BillingIntervalSelector = defineComponent({
+  name: "BillingIntervalSelector",
+  props: { id: String, interval: String, intervals: { type: Array, default: () => [...BILLING_INTERVALS] }, label: { type: String, default: "Billing interval" }, name: String, disabled: Boolean, help: String },
+  emits: { change: (value) => typeof value === "string" },
+  setup(props, { emit }) {
+    const generatedId = useId();
+    const value = ref(props.interval ?? "");
+    watch(() => props.interval, () => {
+      value.value = props.interval ?? "";
+    });
+    return () => {
+      const id = props.id ?? `billing-interval-${generatedId}`;
+      const error = billingIntervalMessage(value.value || void 0, props.intervals);
+      return h("div", { class: "oods-billing-field", "data-oods-component": "BillingIntervalSelector", "data-state": error ? "invalid" : "editing" }, [
+        h("label", { for: id }, props.label),
+        h("select", {
+          id,
+          name: props.name,
+          value: value.value,
+          disabled: props.disabled,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": error ? `${id}-error` : void 0,
+          onChange(event) {
+            const next = event.currentTarget.value;
+            if (props.intervals.includes(next)) {
+              value.value = next;
+              emit("change", next);
+            }
+          }
+        }, [
+          !props.intervals.includes(value.value) ? h("option", { value: value.value, disabled: true, selected: true }, value.value || "Choose interval") : null,
+          ...props.intervals.map((option) => h("option", { value: option, selected: option === value.value }, formatReadOnlyValue(option, "string", true)))
+        ]),
+        props.help ? h("p", { class: "oods-field-help" }, props.help) : null,
+        error ? h("p", { id: `${id}-error`, role: "alert" }, error) : null
+      ]);
+    };
+  }
+});
+var CycleProgressCard = defineComponent({
+  name: "CycleProgressCard",
+  props: { id: String, title: { type: String, default: "Billing cycle" }, progress: Number, periodStart: String, periodEnd: String, interval: String, now: String },
+  setup: (props) => () => {
+    const cycle = billingCycle(props);
+    return h("section", { id: props.id, class: "oods-billing-cycle", "data-oods-component": "CycleProgressCard", "aria-label": props.title }, [
+      h("h2", props.title),
+      h("p", cycle.announcement),
+      cycle.percent !== void 0 ? h("progress", { max: 100, value: cycle.percent, "aria-label": cycle.announcement }) : null,
+      props.interval ? h("p", { class: "oods-billing-muted" }, props.interval) : null
+    ]);
+  }
+});
+var paymentProps = { id: String, title: String, lastPayment: String, nextPayment: String, paymentStatus: String, amount: Number, currency: String, minorUnits: Number };
+function renderBillingTimeline(props, component, includeMethod) {
+  const heading = props.title ?? (includeMethod ? "Payments" : "Payment events");
+  return h("section", { id: props.id, class: "oods-payment-timeline", "data-oods-component": component, role: "log", "aria-label": heading }, [
+    h("h2", heading),
+    h("p", billingPaymentSummary(props)),
+    includeMethod ? h("p", { class: "oods-billing-muted" }, `Payment method: ${props.paymentMethod ?? "Not provided"}`) : null,
+    h("ol", billingPaymentRows(props).map((row) => h("li", { key: row.kind, "data-payment-kind": row.kind }, [h("strong", row.label), row.at ? h("time", { datetime: row.at }, row.text) : h("span", row.text)])))
+  ]);
+}
+var PaymentTimeline = defineComponent({ name: "PaymentTimeline", props: { ...paymentProps, paymentMethod: String }, setup: (props) => () => renderBillingTimeline(props, "PaymentTimeline", true) });
+var PaymentEventTimeline = defineComponent({ name: "PaymentEventTimeline", props: { ...paymentProps, event: Object }, setup: (props) => () => props.event ? h("section", { id: props.id, "data-oods-component": "PaymentEventTimeline", "aria-label": props.event.title ?? "Payment event" }, [h("strong", props.event.title), h("time", { datetime: props.event.at }, formatDateTime(props.event.at)), h("p", props.event.description)]) : renderBillingTimeline(props, "PaymentEventTimeline", false) });
+var BillingCardMeta = defineComponent({
+  name: "BillingCardMeta",
+  props: { id: String, amount: Number, currency: String, minorUnits: Number, interval: String },
+  setup: (props) => () => h("span", { id: props.id, class: "oods-billing-card-meta", "data-oods-component": "BillingCardMeta" }, billingSummary(props.amount, props.currency, props.minorUnits, props.interval))
+});
+var ArchivedRowOverlay = defineComponent({
+  name: "ArchivedRowOverlay",
+  props: { id: String, isArchived: Boolean, showBadge: { type: Boolean, default: true }, separateTab: { type: Boolean, default: true }, tabLabel: { type: String, default: "Archived" }, label: String },
+  setup: (props, { slots }) => () => h("span", {
+    id: props.id,
+    class: "oods-archived-row",
+    "data-oods-component": "ArchivedRowOverlay",
+    "data-archived": props.isArchived ? "true" : void 0,
+    "data-archive-tab": props.separateTab ? props.tabLabel : void 0,
+    role: props.isArchived ? "group" : void 0,
+    "aria-hidden": props.isArchived ? false : void 0,
+    "aria-label": props.isArchived ? `${props.tabLabel}${props.label ? `: ${props.label}` : ""}` : void 0
+  }, [slots.default?.(), props.isArchived && props.showBadge ? h("span", { class: "oods-archive-badge" }, props.tabLabel) : null])
+});
+var AuditSummaryCard = defineComponent({
+  name: "AuditSummaryCard",
+  props: { id: String, title: { type: String, default: "Audit summary" }, auditLog: Array, lastN: { type: Number, default: 5 }, showTransitionCount: { type: Boolean, default: true }, showLastTransitionTime: { type: Boolean, default: true }, showLastActor: { type: Boolean, default: true } },
+  setup: (props) => () => {
+    const summary2 = auditSummary(props);
+    return h("section", { id: props.id, class: "oods-audit-summary", "data-oods-component": "AuditSummaryCard", "aria-label": props.title }, [h("h2", props.title), h("dl", [
+      ...props.showTransitionCount ? [h("dt", "Transitions"), h("dd", summary2.count)] : [],
+      ...props.showLastActor ? [h("dt", "Last actor"), h("dd", summary2.actor)] : [],
+      ...props.showLastTransitionTime ? [h("dt", "Last transition"), h("dd", summary2.at ? h("time", { datetime: summary2.at }, summary2.timestamp) : summary2.timestamp)] : []
+    ]), summary2.recent.length ? h("ol", { "aria-label": "Recent transitions" }, summary2.recent.map((entry, index) => h("li", { key: index }, String(entry.to_state ?? "Transition")))) : null]);
+  }
+});
+var SortIndicator = defineComponent({
+  name: "SortIndicator",
+  inheritAttrs: false,
+  props: { id: String, label: { type: String, default: "Sort" }, sortField: String, sortDirection: String, sortActive: { type: Boolean, default: false }, triStateSort: { type: Boolean, default: true }, sortableFields: Array, defaultSortField: String, defaultSortDirection: String },
+  emits: { change: (_state) => true },
+  setup(props, { emit, attrs }) {
+    const state = ref(initialSort(props));
+    watch(() => [props.sortField, props.sortDirection, props.sortActive, props.defaultSortField, props.defaultSortDirection], () => {
+      state.value = initialSort(props);
+    });
+    return () => h("table", { ...attrs, "data-oods-action": void 0, id: props.id, class: "oods-sort-indicator", "data-oods-component": "SortIndicator", "aria-label": props.label }, [h("thead", [h("tr", [h("th", { scope: "col", "aria-sort": ariaSort(state.value) }, [
+      h("button", { type: "button", "data-oods-action": attrs["data-oods-action"], "aria-label": `${props.label} ${state.value.field}`, onClick: () => {
+        const next = nextSort(state.value, props.triStateSort);
+        state.value = next;
+        emit("change", next);
+      } }, `${state.value.field}: ${ariaSort(state.value)}`)
+    ])])])]);
+  }
+});
+var TimelineEntryLabel = defineComponent({
+  name: "TimelineEntryLabel",
+  props: { label: String, text: String, value: String, maxLength: [Number, String], compact: { type: Boolean, default: true } },
+  setup: (props, { slots }) => () => h(InlineLabel, { label: props.label, text: props.text, value: props.value, maxLength: props.maxLength ?? (props.compact ? 40 : void 0), "data-oods-component": "TimelineEntryLabel", "data-timeline-label": "true", "data-compact": props.compact }, slots)
+});
+var array = Array;
+function eventRecipe(id, kind, title) {
+  return defineComponent({ name: id, props: { id: String, title: { type: String, default: title }, archivedAt: String, restoredAt: String, archivedBy: String, reason: String, timestamp: String, code: String, history: array, status: String, showActor: { type: Boolean, default: true }, showReason: { type: Boolean, default: true } }, setup: (props) => () => {
+    const rows = traitEventRows(kind, props);
+    return h("article", { id: props.id, class: "oods-trait-recipe", "data-oods-component": id, "aria-label": props.title }, [h("h2", props.title), rows.length ? h("ol", rows.map((row, index) => h("li", { key: index }, [h("strong", row.title), h("p", row.at ? h("time", { datetime: row.at }, row.time) : row.time), row.actor && h("p", `Actor: ${row.actor}`), row.reason && h("p", `Reason: ${row.reason}`), row.code && h("p", `Code: ${row.code}`)]))) : h("p", "No events recorded.")]);
+  } });
+}
+var ArchiveEvent = eventRecipe("ArchiveEvent", "archive", "Archive events");
+var CancellationEvent = eventRecipe("CancellationEvent", "cancellation", "Cancellation event");
+var StateTransitionEvent = eventRecipe("StateTransitionEvent", "transition", "State transitions");
+var CommunicationDetailPanel = defineComponent({ name: "CommunicationDetailPanel", props: { id: String, title: { type: String, default: "Communication" }, channels: array, templates: array, policies: array, conversations: array }, setup: (props) => () => h("section", { id: props.id, class: "oods-trait-recipe", "data-oods-component": "CommunicationDetailPanel", "aria-label": props.title }, [h("h2", props.title), h("div", { role: "status", "aria-live": "polite" }, `${props.conversations?.length ?? 0} conversations`), h("dl", [["Channels", props.channels], ["Templates", props.templates], ["Delivery policies", props.policies], ["Conversations", props.conversations]].map(([label, rows]) => h("div", { key: label }, [h("dt", label), h("dd", rows?.length ? h("ul", recipeItemLabels(rows).map((text, index) => h("li", { key: index }, text))) : "None recorded")])))]) });
+var ColorStatePicker = defineComponent({ name: "ColorStatePicker", props: { id: String, title: { type: String, default: "Color state" }, colorStates: { type: Array, default: () => [...DEFAULT_COLOR_STATES] }, value: String, disabled: Boolean }, emits: { change: (value) => typeof value === "string" }, setup(props, { emit }) {
+  const generatedId = useId();
+  const selected = ref(props.value ?? props.colorStates[0] ?? "");
+  watch(() => [props.value, props.colorStates], () => {
+    selected.value = props.value ?? props.colorStates[0] ?? "";
+  });
+  return () => h("fieldset", { id: props.id, class: "oods-trait-recipe", "data-oods-component": "ColorStatePicker" }, [h("legend", props.title), h(Select, { id: `${props.id ?? generatedId}-state`, label: "Color state", name: "color_state", modelValue: selected.value, disabled: props.disabled, options: [...!props.colorStates.includes(selected.value) ? [{ value: selected.value, label: selected.value || "Choose state", disabled: true }] : [], ...props.colorStates.map((value) => ({ value, label: formatReadOnlyValue(value, "string", true) }))], "onUpdate:modelValue": (next) => {
+    selected.value = next;
+    emit("change", next);
+  } })]);
+} });
+var StatusColorLegend = defineComponent({ name: "StatusColorLegend", props: { id: String, title: { type: String, default: "Status colors" }, colorStates: { type: Array, default: () => [...DEFAULT_COLOR_STATES] }, value: String, showTokenReferences: Boolean }, setup: (props) => () => h("section", { id: props.id, class: "oods-trait-recipe", "data-oods-component": "StatusColorLegend", "aria-label": props.title }, [h("h2", props.title), h("dl", props.colorStates.map((state) => h("div", { key: state }, [h("dt", [h(ColorSwatch, { label: state, color: `var(--sys-status-${state}-surface)` }), state === props.value ? " (current)" : ""]), h("dd", props.showTokenReferences ? `--sys-status-${state}-surface` : state)])))]) });
+var GeoFieldMappingForm = defineComponent({ name: "GeoFieldMappingForm", props: { id: String, title: { type: String, default: "Geographic fields" }, embedded: Boolean, disabled: Boolean, latitude: String, longitude: String, identifier: String, autoDetect: { type: Boolean, default: true } }, emits: { change: (_value) => true }, setup(props, { emit }) {
+  const generatedId = useId();
+  const value = ref(geoFieldMapping(props));
+  watch(() => [props.latitude, props.longitude, props.identifier, props.autoDetect], () => {
+    value.value = geoFieldMapping(props);
+  });
+  const update = (patch) => {
+    value.value = { ...value.value, ...patch };
+    emit("change", value.value);
+  };
+  return () => h(props.embedded ? "fieldset" : "form", { id: props.id, class: "oods-trait-recipe", "data-oods-component": "GeoFieldMappingForm", "aria-label": props.title, onSubmit: (event) => event.preventDefault() }, [h(props.embedded ? "legend" : "h2", props.title), ...["latitude", "longitude", "identifier"].map((field) => h(Input, { key: field, id: `${props.id ?? generatedId}-${field}`, name: `geo_${field}_field`, label: `${field[0].toUpperCase()}${field.slice(1)} field`, modelValue: value.value[field], disabled: props.disabled, "onUpdate:modelValue": (next) => update({ [field]: next }) })), h(Checkbox, { id: `${props.id ?? generatedId}-auto`, name: "geo_auto_detect_enabled", label: "Auto detect fields", modelValue: value.value.autoDetect, disabled: props.disabled, "onUpdate:modelValue": (autoDetect) => update({ autoDetect }) })]);
+} });
+var GeoResolutionBadge = defineComponent({ name: "GeoResolutionBadge", props: { id: String, resolution: String }, setup: (props) => () => h("span", { id: props.id, class: "oods-geo-resolution", "data-oods-component": "GeoResolutionBadge" }, `Resolution: ${props.resolution || "Not determined"}`) });
+var GeocodablePreview = defineComponent({ name: "GeocodablePreview", props: { id: String, title: { type: String, default: "Geographic data" }, resolution: String, requiresLookup: { type: Boolean, default: void 0 }, detectedFields: array }, setup: (props) => () => h("section", { id: props.id, class: "oods-trait-recipe", "data-oods-component": "GeocodablePreview", "aria-label": props.title }, [h("h2", props.title), h("dl", [h("dt", "Resolution"), h("dd", props.resolution || "Not determined"), h("dt", "Requires lookup"), h("dd", props.requiresLookup === void 0 ? "Not determined" : props.requiresLookup ? "Yes" : "No"), h("dt", "Detected fields"), h("dd", recipeItemLabels(props.detectedFields).join(", ") || "None detected")])]) });
+function controls(id) {
+  return defineComponent({ name: id, props: { id: String, title: String, value: Object, channel: { type: String, default: "x" }, disabled: Boolean }, emits: { change: (_value) => true }, setup(props, { emit }) {
+    const generatedId = useId();
+    const current = ref(props.value ?? {});
+    const drafts = ref({});
+    const errors = ref({});
+    watch(() => props.value, (value) => {
+      current.value = value ?? {};
+      drafts.value = {};
+      errors.value = {};
+    }, { deep: true });
+    const update = (field, text) => {
+      const result = editVizIntent(current.value, field, text);
+      drafts.value = { ...drafts.value, [field.key]: text };
+      errors.value = { ...errors.value, [field.key]: result.error };
+      if (result.value) {
+        current.value = result.value;
+        emit("change", result.value);
+      }
+    };
+    return () => h("fieldset", { id: props.id, class: "oods-viz-controls oods-trait-recipe", "data-oods-component": id, disabled: props.disabled }, [h("legend", props.title ?? VIZ_CONTROL_TITLES[id]), ...vizControlFields(id, props.channel).map((field) => {
+      const text = drafts.value[field.key] ?? vizFieldValue(current.value, field.key);
+      const common = { key: field.key, id: `${props.id ?? generatedId}-${field.key.replace(".", "-")}`, name: field.key, label: field.label, modelValue: text, validation: errors.value[field.key] ? { state: "error", message: errors.value[field.key] } : void 0, "onUpdate:modelValue": (value) => update(field, value) };
+      return field.type === "select" ? h(Select, { ...common, options: [...!field.options?.includes(text) ? [{ value: text, label: text || "Choose option", disabled: true }] : [], ...field.options.map((value) => ({ value, label: value }))] }) : h(Input, { ...common, type: field.type === "number" ? "number" : "text", min: field.min === void 0 ? void 0 : String(field.min), max: field.max === void 0 ? void 0 : String(field.max), step: field.step === void 0 ? void 0 : String(field.step) });
+    }), ...id === "VizColorControls" || id === "VizColorLegendConfig" ? [h("div", { class: "oods-viz-swatches" }, current.value.encodings?.color?.range?.map((color, index) => h(ColorSwatch, { key: index, color, label: `Category color ${index + 1}: ${color}` })))] : [], ...id === "VizShapeLegend" ? [h(Text, { content: `Shape field: ${current.value.encodings?.shape?.field || "Not bound"}` })] : []]);
+  } });
+}
+function summary(id) {
+  return defineComponent({ name: id, props: { id: String, title: String, value: Object, channel: { type: String, default: "x" } }, setup(props) {
+    return () => {
+      const rows = vizSummaryRows(id, props.value ?? {}, props.channel);
+      if (id === "VizEncodingBadge" || id === "VizRoleBadge") return h("span", { id: props.id, "data-oods-component": id }, [h(Badge, { content: rows.map(([label, text]) => `${label}: ${text}`).join(" \xB7 ") })]);
+      const title = props.title ?? id.replace(/^Viz/, "").replace(/Summary$/, "") + " summary";
+      return h("section", { id: props.id, class: "oods-trait-recipe", "data-oods-component": id, "aria-label": title }, [h("h2", title), h("dl", rows.map(([label, text]) => h("div", { key: label }, [h("dt", label), h("dd", [h(Text, { content: text })])])))]);
+    };
+  } });
+}
+function preview(id, type) {
+  return defineComponent({ name: id, props: { svg: String, title: String, description: String, width: Number, height: Number }, setup(props, { slots }) {
+    return () => h(VizAreaPreview, { ...props, title: props.title ?? `${type[0].toUpperCase()}${type.slice(1)} chart`, "data-oods-component": id, "data-viz-preview-type": type }, { default: slots.default ?? (() => h(Text, { content: "No rendered chart supplied" })) });
+  } });
+}
+var VizAreaControls = controls("VizAreaControls");
+var VizAxisControls = controls("VizAxisControls");
+var VizColorControls = controls("VizColorControls");
+var VizHeatmapControls = controls("VizHeatmapControls");
+var VizLineControls = controls("VizLineControls");
+var VizMarkControls = controls("VizMarkControls");
+var VizOpacityControls = controls("VizOpacityControls");
+var VizPointControls = controls("VizPointControls");
+var VizScaleControls = controls("VizScaleControls");
+var VizScatterControls = controls("VizScatterControls");
+var VizShapeControls = controls("VizShapeControls");
+var VizSizeControls = controls("VizSizeControls");
+var VizColorLegendConfig = controls("VizColorLegendConfig");
+var VizShapeLegend = controls("VizShapeLegend");
+var VizAxisSummary = summary("VizAxisSummary");
+var VizOpacitySummary = summary("VizOpacitySummary");
+var VizScaleSummary = summary("VizScaleSummary");
+var VizSizeSummary = summary("VizSizeSummary");
+var VizEncodingBadge = summary("VizEncodingBadge");
+var VizRoleBadge = summary("VizRoleBadge");
+var VizHeatmapPreview = preview("VizHeatmapPreview", "heatmap");
+var VizGraphPreview = preview("VizGraphPreview", "force_graph");
+var VizLinePreview = preview("VizLinePreview", "line");
+var VizMarkPreview = preview("VizMarkPreview", "bar");
+var VizPointPreview = preview("VizPointPreview", "scatter");
+var VizScatterPreview = preview("VizScatterPreview", "scatter");
+
+export { AddressCollectionPanel, AddressEditor, AddressSummaryBadge, AddressValidationTimeline, ArchiveEvent, ArchivePill, ArchiveSummary, ArchivedRowOverlay, AuditEvent, AuditSummaryCard, AuditTimeline, Badge, Banner, BillingAmountInput, BillingCardMeta, BillingIntervalSelector, BillingSummaryBadge, Button, CancellationBadge, CancellationEvent, CancellationForm, CancellationSummary, Card, CardHeader, Checkbox, ClassificationBadge, ClassificationEditor, ClassificationPanel, ColorStatePicker, ColorSwatch, ColorizedBadge, CommunicationDetailPanel, CycleProgressCard, DatePicker, DetailHeader, FilterPanel, FormLabelGroup, GeoFieldMappingForm, GeoResolutionBadge, GeocodablePreview, Grid, InlineLabel, Input, LabelCell, MembershipAuditTimeline, MembershipPanel, MessageEventTimeline, MessageStatusBadge, OwnerBadge, OwnershipMeta, OwnershipSummary, PaginationBar, PaymentEventTimeline, PaymentTimeline, PreferenceEditor, PreferencePanel, PreferenceSummaryBadge, PreferenceTimeline, PriceBadge, PriceCardMeta, PriceSummary, RelativeTimestamp, RoleAssignmentForm, RoleBadgeList, SearchInput, Select, SortIndicator, Stack, StateTransitionEvent, StatusBadge, StatusColorLegend, StatusSelector, StatusTimeline, Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow, Tabs, TagInput, TagManager, TagPills, TagSummary, TemplatePicker, Text, Textarea, TimelineEntryLabel, VizAreaControls, VizAreaPreview, VizAxisControls, VizAxisSummary, VizColorControls, VizColorLegendConfig, VizEncodingBadge, VizGraphPreview, VizHeatmapControls, VizHeatmapPreview, VizLineControls, VizLinePreview, VizMarkControls, VizMarkPreview, VizOpacityControls, VizOpacitySummary, VizPointControls, VizPointPreview, VizRoleBadge, VizScaleControls, VizScaleSummary, VizScatterControls, VizScatterPreview, VizShapeControls, VizShapeLegend, VizSizeControls, VizSizeSummary };