@oods/components-vue 0.3.0

package/dist/ported.js

@@ -0,0 +1,1298 @@
+import { dateTimeInputValue, formatDateTime, formatReadOnlyValue, currencyMinorUnits } from '@oods/component-contracts';
+import { defineComponent, h, ref, computed, useId, onBeforeUnmount } from 'vue';
+
+// src/ported.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))
+      ]);
+    };
+  }
+});
+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
+      ]);
+    };
+  }
+});
+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"]);
+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;
+}
+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?.());
+  }
+});
+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"
+]);
+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 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))
+    }));
+  }
+});
+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)]);
+  }
+});
+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))
+    }));
+  }
+});
+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))
+    ]));
+  }
+});
+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
+      ]);
+    };
+  }
+});
+
+// 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 isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function firstText(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 (!isRecord(entry)) {
+      events.push({ label: String(entry) });
+      continue;
+    }
+    const from = firstText(entry, ["from"]);
+    const to = firstText(entry, ["to"]);
+    events.push({
+      label: firstText(entry, ["label", "title"]) ?? (firstText(entry, ["event", "status", "state"]) ? statusLabel2(firstText(entry, ["event", "status", "state"])) : void 0) ?? firstText(entry, ["text", "name"]) ?? (to ? from ? `${statusLabel2(from)} \u2192 ${statusLabel2(to)}` : statusLabel2(to) : void 0) ?? "Event",
+      timestamp: firstText(entry, ["timestamp", "datetime", "time", "at", "createdAt", "updatedAt"]),
+      detail: firstText(entry, ["detail", "description", "message"]) ?? (to ? from ? `${statusLabel2(from)} \u2192 ${statusLabel2(to)}` : statusLabel2(to) : void 0),
+      actorId: firstText(entry, ["actorId", "actor_id", "actor"]),
+      reason: firstText(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);
+    };
+  }
+});
+
+export { AuditTimeline, CancellationSummary, PaginationBar, PriceBadge, RelativeTimestamp, SearchInput, StatusBadge, StatusTimeline };