@oods/components-vue 0.3.2 → 0.4.0

package/dist/index.js

@@ -1,5 +1,10 @@
-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';
+import { defineComponent, h, useId, computed, ref, onMounted, watch, nextTick, onBeforeUnmount, isVNode, Text as Text$1, Comment, Fragment } from 'vue';
+import { vizPreviewLayers, svgCarriesTitle, 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, STATUS_ICON_SVG_ATTRS, STATUS_ICON_SHAPES, getStatusPresentation, resolveStatusIcon, currencyMinorUnits, billingPaymentSummary, billingPaymentRows, traitEventRows, vizControlFields, VIZ_CONTROL_TITLES, vizFieldValue, vizSummaryRows, editVizIntent } from '@oods/component-contracts';
+
+// src/primitives.ts
+function statusIcon(name) {
+  return h("svg", { ...STATUS_ICON_SVG_ATTRS }, STATUS_ICON_SHAPES[name].map((shape) => h(shape.tag, { ...shape.attrs })));
+}
 
 // src/primitives.ts
 var toneProp = String;
@@ -89,8 +94,8 @@ var Badge = defineComponent({
           "--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))
+        props.icon || slots.icon ? h("span", { class: "oods-badge__icon", "aria-hidden": "true" }, [slotOrValue(slots.icon, props.icon)]) : null,
+        h("span", { class: "oods-badge__label" }, [slotOrValue(slots.default, props.content ?? statusLabel(props.status))])
       ]);
     };
   }
@@ -114,7 +119,7 @@ var Banner = defineComponent({
     return () => {
       const tone = resolveTone(props.tone, props.status, props.domain);
       const palette = tokenTone(tone);
-      return h("section", {
+      return h("div", {
         class: "oods-banner",
         "data-oods-component": "Banner",
         "data-status": props.status,
@@ -129,20 +134,20 @@ var Banner = defineComponent({
           "--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" }, [
+        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.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",
+          class: "oods-banner-dismiss oods-banner__dismiss",
           "aria-label": props.dismissLabel,
           onClick: () => emit("dismiss")
-        }, [h("span", { "aria-hidden": "true" }, "\xD7")]) : null
+        }, [statusIcon("x")]) : null
       ]);
     };
   }
@@ -152,7 +157,7 @@ var Button = defineComponent({
   props: {
     content: { type: [String, Number], default: "" },
     intent: { type: String, default: "neutral" },
-    size: { type: sizeProp, default: "md" },
+    size: { type: String, default: "md" },
     disabled: Boolean,
     type: { type: String, default: "button" }
   },
@@ -179,6 +184,83 @@ var Button = defineComponent({
     }, [slotOrValue(slots.default, props.content)]);
   }
 });
+var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
+var Dialog = defineComponent({
+  name: "OodsDialog",
+  props: {
+    id: String,
+    open: Boolean,
+    modal: { type: Boolean, default: true },
+    title: { type: String, default: "" },
+    description: String,
+    dismissLabel: { type: String, default: "Close" },
+    size: { type: String, default: "md" },
+    actions: { type: [String, Number, Object, Array], default: void 0 }
+  },
+  emits: {
+    close: () => true
+  },
+  setup(props, { emit, slots }) {
+    const generatedId = useId().replace(/[^\w-]/g, "");
+    const dialogId = computed(() => props.id || `oods-dialog-${generatedId}`);
+    const element = ref(null);
+    const mounted = ref(false);
+    const managed = computed(() => props.modal && mounted.value && canShowModal());
+    const sync = () => {
+      const dialog = element.value;
+      if (!dialog || !managed.value) return;
+      if (props.open && !dialog.open) dialog.showModal();
+      else if (!props.open && dialog.open) dialog.close();
+    };
+    onMounted(() => {
+      mounted.value = true;
+    });
+    watch([() => props.open, managed], sync, { flush: "post" });
+    const requestClose = (event) => {
+      event.preventDefault();
+      emit("close");
+    };
+    return () => {
+      const titleId = `${dialogId.value}-title`;
+      const descriptionId = `${dialogId.value}-description`;
+      const actions = slotOrValue(slots.actions, props.actions);
+      return h("dialog", {
+        ref: element,
+        id: dialogId.value,
+        class: "oods-dialog",
+        "data-oods-component": "Dialog",
+        "data-size": props.size,
+        "aria-labelledby": titleId,
+        "aria-describedby": props.description ? descriptionId : void 0,
+        open: managed.value ? void 0 : props.open,
+        onKeydown: (event) => {
+          if (event.key === "Escape" && !event.defaultPrevented) requestClose(event);
+        },
+        onCancel: requestClose,
+        // The browser closed it (a close request it would not let be cancelled) while open is still true. A close event
+        // from moving a mounted dialog into the top layer finds it open again, and is not reported.
+        onClose: () => {
+          if (props.open && !element.value?.open) emit("close");
+        }
+      }, [
+        h("div", { class: "oods-dialog__header" }, [
+          h("div", { class: "oods-dialog__heading" }, [
+            h("h2", { id: titleId, class: "oods-dialog__title" }, props.title),
+            props.description ? h("p", { id: descriptionId, class: "oods-dialog__description" }, props.description) : null
+          ]),
+          h("button", {
+            type: "button",
+            class: "oods-dialog__close",
+            "aria-label": props.dismissLabel,
+            onClick: () => emit("close")
+          }, [statusIcon("x")])
+        ]),
+        slots.default ? h("div", { class: "oods-dialog__body" }, slots.default()) : null,
+        actions !== void 0 && actions !== null && actions !== "" ? h("div", { class: "oods-dialog__footer" }, [actions]) : null
+      ]);
+    };
+  }
+});
 var SAFE_CARD_ELEMENTS = /* @__PURE__ */ new Set(["div", "article", "section", "aside"]);
 var Card = defineComponent({
   name: "OodsCard",
@@ -431,6 +513,7 @@ var ColorizedBadge = defineComponent({
       const color = firstText(props.color, props.hue, props.swatch, props.state);
       const variant = firstText(props.variant) ?? "colorized";
       return h(Badge, {
+        class: "oods-colorized-badge",
         status,
         tone: props.tone,
         emphasis: props.emphasis,
@@ -457,6 +540,13 @@ var VizAreaPreview = defineComponent({
     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,
+    /** s222-m02 (F7): the dark and high-contrast renders; with any of them, svg* are the light ones (see React's types). */
+    svgDark: String,
+    svgDarkNarrow: String,
+    svgDarkWide: String,
+    svgHc: String,
+    svgHcNarrow: String,
+    svgHcWide: String,
     title: String,
     description: String,
     width: { type: Number, default: 640 },
@@ -465,6 +555,7 @@ var VizAreaPreview = defineComponent({
   setup(props, { slots }) {
     return () => {
       const content = authoredContent(slots.default?.());
+      const renders = (layer) => layer.renders.map(([attribute, markup]) => h("div", { [attribute]: "true", innerHTML: markup }));
       if (props.svg !== void 0) return h("figure", {
         class: "oods-viz-area-preview",
         "data-oods-component": "VizAreaPreview",
@@ -479,9 +570,11 @@ var VizAreaPreview = defineComponent({
         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) })] : [],
+        ...vizPreviewLayers(props).flatMap((layer) => layer.theme === void 0 ? renders(layer) : [h("div", {
+          "data-viz-theme": layer.theme,
+          ...layer.narrow ? { "data-viz-narrow": "true" } : {},
+          ...layer.wide ? { "data-viz-wide": "true" } : {}
+        }, renders(layer))]),
         ...props.description ? [h("p", { "data-viz-description": "true" }, props.description)] : []
       ]);
       return h("div", {
@@ -1504,7 +1597,9 @@ var Input = defineComponent({
   name: "OodsInput",
   props: {
     ...textFieldProps,
-    type: { type: String, default: "text" }
+    type: { type: String, default: "text" },
+    /** A class for the input element itself, as React's inputClassName; the field's own class stays on its frame. */
+    inputClass: String
   },
   emits: {
     "update:modelValue": (_value) => true,
@@ -1522,7 +1617,7 @@ var Input = defineComponent({
     };
     return () => renderField("Input", props, slots, metadata, h("input", {
       id: metadata.controlId.value,
-      class: "oods-field-control",
+      class: props.inputClass ? ["oods-field-control", props.inputClass] : "oods-field-control",
       type: props.type,
       name: props.name,
       value: props.type === "datetime-local" ? dateTimeInputValue(currentValue.value) : currentValue.value,
@@ -1722,28 +1817,97 @@ var Checkbox = defineComponent({
     };
   }
 });
+var Switch = defineComponent({
+  name: "OodsSwitch",
+  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,
+    size: { type: String, default: "md" }
+  },
+  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("Switch", props, slots);
+    const toggle = () => {
+      const next = !currentChecked.value;
+      if (props.modelValue === void 0 && props.checked === void 0) internalChecked.value = next;
+      emit("update:modelValue", next);
+      emit("change", next);
+    };
+    return () => {
+      const label = slots.label?.() ?? props.label;
+      const help = slots.help?.() ?? props.help;
+      const validation = slots.validation?.() ?? props.validation?.message;
+      const controlId = metadata.controlId.value;
+      return h("div", {
+        class: "oods-field oods-switch",
+        style: validationStyle(props.validation),
+        "data-oods-component": "Switch",
+        "data-size": props.size,
+        "data-validation-state": props.validation?.state
+      }, [
+        h("div", { class: "oods-switch__row" }, [
+          h("button", {
+            id: controlId,
+            type: "button",
+            role: "switch",
+            class: "oods-switch__control",
+            "aria-checked": currentChecked.value ? "true" : "false",
+            "aria-labelledby": `${controlId}-label`,
+            "aria-describedby": metadata.describedBy.value,
+            "aria-required": props.required ? "true" : void 0,
+            "aria-invalid": props.validation?.state === "error" ? "true" : void 0,
+            disabled: props.disabled,
+            onClick: toggle
+          }, [h("span", { class: "oods-switch__thumb", "aria-hidden": "true" })]),
+          h("label", { id: `${controlId}-label`, class: "oods-field-label oods-switch__label", for: controlId }, [
+            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?.());
+    return () => h("caption", { class: "oods-table__caption" }, slots.default?.());
   }
 });
 var TableHead = defineComponent({
   name: "OodsTableHead",
   setup(_props, { slots }) {
-    return () => h("thead", {}, slots.default?.());
+    return () => h("thead", { class: "oods-table__header" }, slots.default?.());
   }
 });
 var TableBody = defineComponent({
   name: "OodsTableBody",
   setup(_props, { slots }) {
-    return () => h("tbody", {}, slots.default?.());
+    return () => h("tbody", { class: "oods-table__body" }, slots.default?.());
   }
 });
 var TableRow = defineComponent({
   name: "OodsTableRow",
   setup(_props, { slots }) {
-    return () => h("tr", {}, slots.default?.());
+    return () => h("tr", { class: "oods-table__row" }, slots.default?.());
   }
 });
 var TableHeaderCell = defineComponent({
@@ -1752,19 +1916,22 @@ var TableHeaderCell = defineComponent({
     scope: { type: String, default: "col" }
   },
   setup(props, { slots }) {
-    return () => h("th", { scope: props.scope }, slots.default?.());
+    return () => h("th", { class: "oods-table__header-cell", scope: props.scope }, slots.default?.());
   }
 });
 var TableCell = defineComponent({
   name: "OodsTableCell",
   setup(_props, { slots }) {
-    return () => h("td", {}, slots.default?.());
+    return () => h("td", { class: "oods-table__cell" }, slots.default?.());
   }
 });
 var Table = defineComponent({
   name: "OodsTable",
+  inheritAttrs: false,
   props: {
     caption: { type: String, default: "" },
+    // s222-m02 (#2502 ruling 11): false keeps the caption as the table's accessible name but hides it visually.
+    showCaption: { type: Boolean, default: true },
     columns: { type: Array, default: () => [] },
     rows: { type: Array, default: () => [] },
     density: { type: String, default: "default" },
@@ -1773,16 +1940,17 @@ var Table = defineComponent({
   emits: {
     rowActivate: (_rowId) => true
   },
-  setup(props, { emit, slots }) {
+  setup(props, { attrs, emit, slots }) {
     const activate = (row) => emit("rowActivate", row.id);
-    return () => h("table", {
-      class: "oods-table",
+    return () => h("div", { class: "oods-table__container", "data-density": props.density }, [h("table", {
+      ...attrs,
+      class: ["oods-table", attrs.class],
       "data-oods-component": "Table",
       "data-density": props.density
     }, [
-      h(TableCaption, {}, {
+      slots.caption || props.caption ? h(TableCaption, { "data-visually-hidden": props.showCaption ? void 0 : "true" }, {
         default: () => slots.caption?.() ?? props.caption
-      }),
+      }) : null,
       h(TableHead, {}, {
         default: () => slots.head?.() ?? h(TableRow, {}, {
           default: () => props.columns.map((column) => h(TableHeaderCell, { key: column.key }, {
@@ -1797,7 +1965,7 @@ var Table = defineComponent({
           }, {
             default: () => "No rows available."
           })
-        }) : props.rows.map((row, rowIndex) => slots.row?.({ row, rowIndex, activate: () => activate(row) }) ?? h(TableRow, { key: row.id }, {
+        }) : props.rows.map((row, rowIndex) => slots.row?.({ row, rowIndex, activate: () => activate(row) }) ?? h(TableRow, { key: row.id, "data-selectable": props.selectable ? "true" : void 0 }, {
           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 }, {
@@ -1810,7 +1978,7 @@ var Table = defineComponent({
           })
         })))
       })
-    ]);
+    ])]);
   }
 });
 function itemDisabled(item) {
@@ -1998,82 +2166,6 @@ var Tabs = defineComponent({
     ]);
   }
 });
-
-// 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);
 }
@@ -2090,18 +2182,13 @@ 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) };
+  const presentation = getStatusPresentation(domain.toLowerCase(), status);
+  return {
+    label: statusLabel2(status || "Unknown"),
+    description: presentation.description,
+    tone: presentation.tone,
+    icon: resolveStatusIcon(presentation.iconName)
+  };
 }
 function formatPrice(amountCents, amount, currency) {
   const normalizedAmount = amount;
@@ -2245,11 +2332,10 @@ var StatusBadge = defineComponent({
         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);
+      }, props.showIcon && presentation.icon && !slots.icon ? { ...slots, icon: () => statusIcon(presentation.icon) } : slots);
     };
   }
 });
@@ -2332,12 +2418,12 @@ var timelineProps = {
 };
 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),
+    h("article", { class: "oods-timeline__event", "data-timeline-event": "true" }, [
+      h("p", { class: "oods-timeline__label", "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
+      event.detail ? h("p", { class: "oods-timeline__detail", "data-timeline-detail": "true" }, event.detail) : null,
+      showActorId && event.actorId ? h("p", { class: "oods-timeline__actor", "data-timeline-actor": "true" }, `Actor: ${event.actorId}`) : null,
+      showReason && event.reason ? h("p", { class: "oods-timeline__reason", "data-timeline-reason": "true" }, `Reason: ${event.reason}`) : null
     ])
   ]);
 }
@@ -2355,16 +2441,16 @@ function timelineComponent(configuration) {
         const slottedEvents = slots.default?.();
         return h("div", {
           ...attrs,
-          class: mergedClass("oods-timeline", attrs.class),
+          class: mergedClass(`oods-timeline oods-${configuration.timelineType}-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,
+          h("h2", { class: "oods-timeline__title", "data-timeline-title": "true" }, title),
+          props.status ? h("p", { class: "oods-timeline__current", "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(
+          h("ol", { class: "oods-timeline__events", "data-timeline-events": "true" }, slottedEvents?.length ? slottedEvents : events.length ? events.map((event, index) => renderTimelineEvent(
             event,
             index,
             props.showActorId,
@@ -2520,8 +2606,7 @@ var SearchInput = defineComponent({
       updateValue("");
       emit("clear");
     };
-    const submit = (event) => {
-      event.preventDefault();
+    const searchNow = () => {
       if (!props.disabled) {
         if (timer !== void 0) clearTimeout(timer);
         emitSearch(currentValue.value);
@@ -2530,14 +2615,13 @@ var SearchInput = defineComponent({
     return () => {
       const id = props.id ?? `oods-search-${generatedId.replace(/:/g, "")}`;
       const ariaLabel = stringValue(attrs["aria-label"]) ?? props.label ?? props.placeholder;
-      return h("form", {
+      return h("div", {
         ...attrs,
         class: mergedClass("oods-search-input", attrs.class),
         role: "search",
         "aria-label": ariaLabel,
         "data-oods-component": "SearchInput",
-        "data-behavioral": "search",
-        onSubmit: submit
+        "data-behavioral": "search"
       }, [
         h(Input, {
           id,
@@ -2546,19 +2630,25 @@ var SearchInput = defineComponent({
           value: currentValue.value,
           placeholder: props.placeholder,
           disabled: props.disabled,
+          inputClass: "oods-search-input__control",
           "aria-label": props.label ? void 0 : ariaLabel,
           onInput: (value) => updateValue(value),
           onKeydown: (event) => {
             if (event.key === "Escape") clear();
+            if (event.key === "Enter") {
+              event.preventDefault();
+              searchNow();
+            }
           }
         }),
         props.clearable && currentValue.value ? h("button", {
           type: "button",
+          class: "oods-search-input__clear",
           "data-search-clear": "true",
           "aria-label": "Clear search",
           disabled: props.disabled,
           onClick: clear
-        }, "\xD7") : null
+        }, [statusIcon("x")]) : null
       ]);
     };
   }
@@ -2705,17 +2795,18 @@ var RelativeTimestamp = defineComponent({
         props.createdAt
       ) ?? "";
       if (props.hideWhenEmpty && (!datetime || Number.isNaN(Date.parse(datetime)))) return null;
+      const absolute = formatDateTime(datetime, { timeZone: props.timezone });
       const content = firstDefined(
         props.relative,
         props.label,
         props.text,
-        props.now === void 0 ? formatDateTime(datetime, { timeZone: props.timezone }) : relativeTimestampLabel(datetime, props.now)
+        !absolute ? "Unknown time" : props.now === void 0 ? absolute : 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 }),
+        title: stringValue(attrs.title) ?? absolute,
         "data-oods-component": "RelativeTimestamp"
       }, content);
     };
@@ -2963,7 +3054,7 @@ function summary(id) {
   } });
 }
 function preview(id, type) {
-  return defineComponent({ name: id, props: { svg: String, title: String, description: String, width: Number, height: Number }, setup(props, { slots }) {
+  return defineComponent({ name: id, props: { svg: String, svgNarrow: String, svgWide: String, svgDark: String, svgDarkNarrow: String, svgDarkWide: String, svgHc: String, svgHcNarrow: String, svgHcWide: 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" })) });
   } });
 }
@@ -2994,4 +3085,4 @@ 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 };
+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, Dialog, 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, Switch, 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 };