@oods/components-vue 0.3.1 → 0.3.3

package/README.md

@@ -8,7 +8,7 @@ Vue components used by screens generated with OODS Foundry. The package exports
 npm install @oods/components-vue @oods/component-styles @oods/tokens @oods/component-contracts vue
 ```
 
-Use Vue 3. Bring your existing Vue app or use Forge's `code_generate` with `options.output: "application"` for an app entry and Vite configuration.
+Use Vue 3. Bring your existing Vue app or use OODS Foundry's `code_generate` with `options.output: "application"` for an app entry and Vite configuration.
 
 ## First result
 
@@ -26,7 +26,7 @@ const review = () => window.alert('Connect this action to your application.');
 
 Set `data-brand="A"` and `data-theme="light"` on the root HTML element. The result is a button labelled “Review stock” that invokes the supplied handler. Set the theme to `dark` or `hc` for those scopes.
 
-Generated sample screens identify their sample data. A workflow's local store is not a production database; supply your data, navigation and persistence handlers. Retained component evidence covers named scenarios and themes, not every application you build. For your own implementation of a shipped component, use Forge's substitution mapping and inspect its advisory contract report.
+Generated sample screens identify their sample data. A workflow's local store is not a production database; supply your data, navigation and persistence handlers. Retained component evidence covers named scenarios and themes, not every application you build. For your own implementation of a shipped component, use OODS Foundry's substitution mapping and inspect its advisory contract report.
 
 ## Limits
 
@@ -34,4 +34,4 @@ Use matching versions of the OODS packages. These packages are separate from the
 
 ## License
 
-Apache License 2.0. See [LICENSE](LICENSE) and [NOTICE](NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.
+Apache License 2.0. See [LICENSE](https://cdn.jsdelivr.net/npm/@oods/components-vue@0.3.3/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/components-vue@0.3.3/NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.

package/dist/index.cjs

@@ -91,8 +91,8 @@ var Badge = vue.defineComponent({
           "--cmp-badge-text": `var(--sys-status-${palette}-text)`
         }
       }, [
-        props.icon || slots.icon ? vue.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 ? vue.h("span", { class: "oods-badge__icon", "aria-hidden": "true" }, [slotOrValue(slots.icon, props.icon)]) : null,
+        vue.h("span", { class: "oods-badge__label" }, [slotOrValue(slots.default, props.content ?? statusLabel(props.status))])
       ]);
     };
   }
@@ -116,7 +116,7 @@ var Banner = vue.defineComponent({
     return () => {
       const tone = resolveTone(props.tone, props.status, props.domain);
       const palette = tokenTone(tone);
-      return vue.h("section", {
+      return vue.h("div", {
         class: "oods-banner",
         "data-oods-component": "Banner",
         "data-status": props.status,
@@ -131,17 +131,17 @@ var Banner = vue.defineComponent({
           "--cmp-banner-text": `var(--sys-status-${palette}-text)`
         }
       }, [
-        vue.h("div", { class: "oods-banner-content" }, [
-          props.title || props.status || slots.title ? vue.h("strong", { class: "oods-banner-title" }, [
+        vue.h("div", { class: "oods-banner__content" }, [
+          props.title || props.status || slots.title ? vue.h("strong", { class: "oods-banner__title" }, [
             slotOrValue(slots.title, props.title || statusLabel(props.status))
           ]) : null,
-          props.detail ? vue.h("p", { class: "oods-banner-detail" }, props.detail) : null,
-          slots.default || props.content ? vue.h(slots.default ? "div" : "p", { class: "oods-banner-body" }, [slotOrValue(slots.default, props.content)]) : null,
-          slots.actions ? vue.h("div", { class: "oods-banner-actions" }, slots.actions()) : null
+          props.detail ? vue.h("p", { class: "oods-banner__detail" }, props.detail) : null,
+          slots.default || props.content ? vue.h(slots.default ? "div" : "p", { class: "oods-banner__body" }, [slotOrValue(slots.default, props.content)]) : null,
+          slots.actions ? vue.h("div", { class: "oods-banner__actions" }, slots.actions()) : null
         ]),
         props.dismissLabel ? vue.h("button", {
           type: "button",
-          class: "oods-banner-dismiss",
+          class: "oods-banner-dismiss oods-banner__dismiss",
           "aria-label": props.dismissLabel,
           onClick: () => emit("dismiss")
         }, [vue.h("span", { "aria-hidden": "true" }, "\xD7")]) : null
@@ -433,6 +433,7 @@ var ColorizedBadge = vue.defineComponent({
       const color = firstText(props.color, props.hue, props.swatch, props.state);
       const variant = firstText(props.variant) ?? "colorized";
       return vue.h(Badge, {
+        class: "oods-colorized-badge",
         status,
         tone: props.tone,
         emphasis: props.emphasis,
@@ -721,7 +722,7 @@ function createBadgeFamily(options) {
         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 label = scalar ?? firstText(...options.labelKeys.map((key) => options.booleanLabels && typeof record[key] === "boolean" && options.booleanProps?.includes(key) ? options.booleanLabels[record[key] ? 0 : 1] : read(key))) ?? options.defaultLabel;
         const status = firstText(...options.statusKeys.map(read));
         const variant = firstText(record.variant) ?? options.defaultVariant;
         return vue.h(Badge, {
@@ -1364,7 +1365,8 @@ var ArchivePill = createBadgeFamily({
   labelKeys: ["label", "text", "status", "state", "isArchived", "value"],
   statusKeys: ["status", "state", "isArchived", "value"],
   extraProps: ["isArchived"],
-  booleanProps: ["isArchived", "value"]
+  booleanProps: ["isArchived", "value"],
+  booleanLabels: ["Archived", "Not archived"]
 });
 var CancellationBadge = createBadgeFamily({
   component: "CancellationBadge",
@@ -1374,7 +1376,8 @@ var CancellationBadge = createBadgeFamily({
   labelKeys: ["label", "text", "status", "state", "cancelAtPeriodEnd", "value"],
   statusKeys: ["status", "state", "cancelAtPeriodEnd", "isCancelled", "value"],
   extraProps: ["cancelAtPeriodEnd", "isCancelled"],
-  booleanProps: ["cancelAtPeriodEnd", "isCancelled", "value"]
+  booleanProps: ["cancelAtPeriodEnd", "isCancelled", "value"],
+  booleanLabels: ["Cancellation scheduled", "No cancellation scheduled"]
 });
 var ArchiveSummary = vue.defineComponent({
   name: "OodsArchiveSummary",
@@ -1397,7 +1400,7 @@ var PriceCardMeta = vue.defineComponent({
   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);
+      const terms = [["Model", componentContracts.formatPriceCode(firstText(props.model, props.pricingModel))], ["Interval", componentContracts.formatPriceCode(firstText(props.interval, props.billingInterval))]].filter((entry) => entry[1] !== void 0);
       return vue.h("div", { class: "oods-price-card-meta", "data-oods-component": "PriceCardMeta", "data-meta-type": "price" }, content.length ? content : [
         vue.h("span", { "data-meta-title": "true" }, firstText(props.title, props.label, props.heading, props.name) ?? "Price"),
         ...terms.map(([term, value]) => vue.h("span", { key: term, "data-meta-item": "true" }, [vue.h("strong", `${term}:`), ` ${value}`]))
@@ -1504,7 +1507,9 @@ var Input = vue.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 +1527,7 @@ var Input = vue.defineComponent({
     };
     return () => renderField("Input", props, slots, metadata, vue.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" ? componentContracts.dateTimeInputValue(currentValue.value) : currentValue.value,
@@ -1725,25 +1730,25 @@ var Checkbox = vue.defineComponent({
 var TableCaption = vue.defineComponent({
   name: "OodsTableCaption",
   setup(_props, { slots }) {
-    return () => vue.h("caption", {}, slots.default?.());
+    return () => vue.h("caption", { class: "oods-table__caption" }, slots.default?.());
   }
 });
 var TableHead = vue.defineComponent({
   name: "OodsTableHead",
   setup(_props, { slots }) {
-    return () => vue.h("thead", {}, slots.default?.());
+    return () => vue.h("thead", { class: "oods-table__header" }, slots.default?.());
   }
 });
 var TableBody = vue.defineComponent({
   name: "OodsTableBody",
   setup(_props, { slots }) {
-    return () => vue.h("tbody", {}, slots.default?.());
+    return () => vue.h("tbody", { class: "oods-table__body" }, slots.default?.());
   }
 });
 var TableRow = vue.defineComponent({
   name: "OodsTableRow",
   setup(_props, { slots }) {
-    return () => vue.h("tr", {}, slots.default?.());
+    return () => vue.h("tr", { class: "oods-table__row" }, slots.default?.());
   }
 });
 var TableHeaderCell = vue.defineComponent({
@@ -1752,17 +1757,18 @@ var TableHeaderCell = vue.defineComponent({
     scope: { type: String, default: "col" }
   },
   setup(props, { slots }) {
-    return () => vue.h("th", { scope: props.scope }, slots.default?.());
+    return () => vue.h("th", { class: "oods-table__header-cell", scope: props.scope }, slots.default?.());
   }
 });
 var TableCell = vue.defineComponent({
   name: "OodsTableCell",
   setup(_props, { slots }) {
-    return () => vue.h("td", {}, slots.default?.());
+    return () => vue.h("td", { class: "oods-table__cell" }, slots.default?.());
   }
 });
 var Table = vue.defineComponent({
   name: "OodsTable",
+  inheritAttrs: false,
   props: {
     caption: { type: String, default: "" },
     columns: { type: Array, default: () => [] },
@@ -1773,16 +1779,17 @@ var Table = vue.defineComponent({
   emits: {
     rowActivate: (_rowId) => true
   },
-  setup(props, { emit, slots }) {
+  setup(props, { attrs, emit, slots }) {
     const activate = (row) => emit("rowActivate", row.id);
-    return () => vue.h("table", {
-      class: "oods-table",
+    return () => vue.h("div", { class: "oods-table__container", "data-density": props.density }, [vue.h("table", {
+      ...attrs,
+      class: ["oods-table", attrs.class],
       "data-oods-component": "Table",
       "data-density": props.density
     }, [
-      vue.h(TableCaption, {}, {
+      slots.caption || props.caption ? vue.h(TableCaption, {}, {
         default: () => slots.caption?.() ?? props.caption
-      }),
+      }) : null,
       vue.h(TableHead, {}, {
         default: () => slots.head?.() ?? vue.h(TableRow, {}, {
           default: () => props.columns.map((column) => vue.h(TableHeaderCell, { key: column.key }, {
@@ -1797,7 +1804,7 @@ var Table = vue.defineComponent({
           }, {
             default: () => "No rows available."
           })
-        }) : props.rows.map((row, rowIndex) => slots.row?.({ row, rowIndex, activate: () => activate(row) }) ?? vue.h(TableRow, { key: row.id }, {
+        }) : props.rows.map((row, rowIndex) => slots.row?.({ row, rowIndex, activate: () => activate(row) }) ?? vue.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 vue.h(TableCell, { key: column.key }, {
@@ -1810,7 +1817,7 @@ var Table = vue.defineComponent({
           })
         })))
       })
-    ]);
+    ])]);
   }
 });
 function itemDisabled(item) {
@@ -2332,12 +2339,12 @@ var timelineProps = {
 };
 function renderTimelineEvent(event, index, showActorId, showReason) {
   return vue.h("li", { key: `${event.timestamp ?? "event"}-${index}` }, [
-    vue.h("article", { "data-timeline-event": "true" }, [
-      vue.h("p", { "data-timeline-label": "true" }, event.label),
+    vue.h("article", { class: "oods-timeline__event", "data-timeline-event": "true" }, [
+      vue.h("p", { class: "oods-timeline__label", "data-timeline-label": "true" }, event.label),
       event.timestamp ? vue.h("time", { "data-timeline-time": "true", datetime: event.timestamp }, componentContracts.formatDateTime(event.timestamp)) : null,
-      event.detail ? vue.h("p", { "data-timeline-detail": "true" }, event.detail) : null,
-      showActorId && event.actorId ? vue.h("p", { "data-timeline-actor": "true" }, `Actor: ${event.actorId}`) : null,
-      showReason && event.reason ? vue.h("p", { "data-timeline-reason": "true" }, `Reason: ${event.reason}`) : null
+      event.detail ? vue.h("p", { class: "oods-timeline__detail", "data-timeline-detail": "true" }, event.detail) : null,
+      showActorId && event.actorId ? vue.h("p", { class: "oods-timeline__actor", "data-timeline-actor": "true" }, `Actor: ${event.actorId}`) : null,
+      showReason && event.reason ? vue.h("p", { class: "oods-timeline__reason", "data-timeline-reason": "true" }, `Reason: ${event.reason}`) : null
     ])
   ]);
 }
@@ -2355,16 +2362,16 @@ function timelineComponent(configuration) {
         const slottedEvents = slots.default?.();
         return vue.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
         }, [
-          vue.h("h2", { "data-timeline-title": "true" }, title),
-          props.status ? vue.h("p", { "data-timeline-current": "true" }, `Current status: ${statusLabel2(props.status)}`) : null,
+          vue.h("h2", { class: "oods-timeline__title", "data-timeline-title": "true" }, title),
+          props.status ? vue.h("p", { class: "oods-timeline__current", "data-timeline-current": "true" }, `Current status: ${statusLabel2(props.status)}`) : null,
           props.allowedTransitions?.length ? vue.h("p", { "data-timeline-transitions": "true" }, `Allowed transitions: ${props.allowedTransitions.join(", ")}`) : null,
-          vue.h("ol", { "data-timeline-events": "true" }, slottedEvents?.length ? slottedEvents : events.length ? events.map((event, index) => renderTimelineEvent(
+          vue.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 +2527,7 @@ var SearchInput = vue.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 +2536,13 @@ var SearchInput = vue.defineComponent({
     return () => {
       const id = props.id ?? `oods-search-${generatedId.replace(/:/g, "")}`;
       const ariaLabel = stringValue(attrs["aria-label"]) ?? props.label ?? props.placeholder;
-      return vue.h("form", {
+      return vue.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"
       }, [
         vue.h(Input, {
           id,
@@ -2546,14 +2551,20 @@ var SearchInput = vue.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 ? vue.h("button", {
           type: "button",
+          class: "oods-search-input__clear",
           "data-search-clear": "true",
           "aria-label": "Clear search",
           disabled: props.disabled,
@@ -2963,7 +2974,7 @@ function summary(id) {
   } });
 }
 function preview(id, type) {
-  return vue.defineComponent({ name: id, props: { svg: String, title: String, description: String, width: Number, height: Number }, setup(props, { slots }) {
+  return vue.defineComponent({ name: id, props: { svg: String, svgNarrow: String, svgWide: String, title: String, description: String, width: Number, height: Number }, setup(props, { slots }) {
     return () => vue.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 ?? (() => vue.h(Text, { content: "No rendered chart supplied" })) });
   } });
 }

package/dist/index.d.cts

@@ -1705,6 +1705,8 @@ declare const Input: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: string;
     };
+    /** A class for the input element itself, as React's inputClassName; the field's own class stays on its frame. */
+    inputClass: StringConstructor;
     id: StringConstructor;
     label: StringConstructor;
     modelValue: StringConstructor;
@@ -1734,6 +1736,8 @@ declare const Input: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: string;
     };
+    /** A class for the input element itself, as React's inputClassName; the field's own class stays on its frame. */
+    inputClass: StringConstructor;
     id: StringConstructor;
     label: StringConstructor;
     modelValue: StringConstructor;
@@ -3972,6 +3976,8 @@ declare const VizRoleBadge: vue.DefineComponent<vue.ExtractPropTypes<{
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const VizHeatmapPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -3980,6 +3986,8 @@ declare const VizHeatmapPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -3987,6 +3995,8 @@ declare const VizHeatmapPreview: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const VizGraphPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -3995,6 +4005,8 @@ declare const VizGraphPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4002,6 +4014,8 @@ declare const VizGraphPreview: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const VizLinePreview: vue.DefineComponent<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4010,6 +4024,8 @@ declare const VizLinePreview: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4017,6 +4033,8 @@ declare const VizLinePreview: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const VizMarkPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4025,6 +4043,8 @@ declare const VizMarkPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4032,6 +4052,8 @@ declare const VizMarkPreview: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const VizPointPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4040,6 +4062,8 @@ declare const VizPointPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4047,6 +4071,8 @@ declare const VizPointPreview: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const VizScatterPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4055,6 +4081,8 @@ declare const VizScatterPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;

package/dist/index.d.ts

@@ -1705,6 +1705,8 @@ declare const Input: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: string;
     };
+    /** A class for the input element itself, as React's inputClassName; the field's own class stays on its frame. */
+    inputClass: StringConstructor;
     id: StringConstructor;
     label: StringConstructor;
     modelValue: StringConstructor;
@@ -1734,6 +1736,8 @@ declare const Input: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: string;
     };
+    /** A class for the input element itself, as React's inputClassName; the field's own class stays on its frame. */
+    inputClass: StringConstructor;
     id: StringConstructor;
     label: StringConstructor;
     modelValue: StringConstructor;
@@ -3972,6 +3976,8 @@ declare const VizRoleBadge: vue.DefineComponent<vue.ExtractPropTypes<{
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const VizHeatmapPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -3980,6 +3986,8 @@ declare const VizHeatmapPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -3987,6 +3995,8 @@ declare const VizHeatmapPreview: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const VizGraphPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -3995,6 +4005,8 @@ declare const VizGraphPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4002,6 +4014,8 @@ declare const VizGraphPreview: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const VizLinePreview: vue.DefineComponent<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4010,6 +4024,8 @@ declare const VizLinePreview: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4017,6 +4033,8 @@ declare const VizLinePreview: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const VizMarkPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4025,6 +4043,8 @@ declare const VizMarkPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4032,6 +4052,8 @@ declare const VizMarkPreview: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const VizPointPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4040,6 +4062,8 @@ declare const VizPointPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4047,6 +4071,8 @@ declare const VizPointPreview: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const VizScatterPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;
@@ -4055,6 +4081,8 @@ declare const VizScatterPreview: vue.DefineComponent<vue.ExtractPropTypes<{
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     svg: StringConstructor;
+    svgNarrow: StringConstructor;
+    svgWide: StringConstructor;
     title: StringConstructor;
     description: StringConstructor;
     width: NumberConstructor;

package/dist/index.js

@@ -89,8 +89,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 +114,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,17 +129,17 @@ 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
@@ -431,6 +431,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,
@@ -719,7 +720,7 @@ function createBadgeFamily(options) {
         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 label = scalar ?? firstText(...options.labelKeys.map((key) => options.booleanLabels && typeof record[key] === "boolean" && options.booleanProps?.includes(key) ? options.booleanLabels[record[key] ? 0 : 1] : read(key))) ?? options.defaultLabel;
         const status = firstText(...options.statusKeys.map(read));
         const variant = firstText(record.variant) ?? options.defaultVariant;
         return h(Badge, {
@@ -1362,7 +1363,8 @@ var ArchivePill = createBadgeFamily({
   labelKeys: ["label", "text", "status", "state", "isArchived", "value"],
   statusKeys: ["status", "state", "isArchived", "value"],
   extraProps: ["isArchived"],
-  booleanProps: ["isArchived", "value"]
+  booleanProps: ["isArchived", "value"],
+  booleanLabels: ["Archived", "Not archived"]
 });
 var CancellationBadge = createBadgeFamily({
   component: "CancellationBadge",
@@ -1372,7 +1374,8 @@ var CancellationBadge = createBadgeFamily({
   labelKeys: ["label", "text", "status", "state", "cancelAtPeriodEnd", "value"],
   statusKeys: ["status", "state", "cancelAtPeriodEnd", "isCancelled", "value"],
   extraProps: ["cancelAtPeriodEnd", "isCancelled"],
-  booleanProps: ["cancelAtPeriodEnd", "isCancelled", "value"]
+  booleanProps: ["cancelAtPeriodEnd", "isCancelled", "value"],
+  booleanLabels: ["Cancellation scheduled", "No cancellation scheduled"]
 });
 var ArchiveSummary = defineComponent({
   name: "OodsArchiveSummary",
@@ -1395,7 +1398,7 @@ var PriceCardMeta = defineComponent({
   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);
+      const terms = [["Model", formatPriceCode(firstText(props.model, props.pricingModel))], ["Interval", formatPriceCode(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}`]))
@@ -1502,7 +1505,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,
@@ -1520,7 +1525,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,
@@ -1723,25 +1728,25 @@ var Checkbox = defineComponent({
 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({
@@ -1750,17 +1755,18 @@ 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: "" },
     columns: { type: Array, default: () => [] },
@@ -1771,16 +1777,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, {}, {
         default: () => slots.caption?.() ?? props.caption
-      }),
+      }) : null,
       h(TableHead, {}, {
         default: () => slots.head?.() ?? h(TableRow, {}, {
           default: () => props.columns.map((column) => h(TableHeaderCell, { key: column.key }, {
@@ -1795,7 +1802,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 }, {
@@ -1808,7 +1815,7 @@ var Table = defineComponent({
           })
         })))
       })
-    ]);
+    ])]);
   }
 });
 function itemDisabled(item) {
@@ -2330,12 +2337,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
     ])
   ]);
 }
@@ -2353,16 +2360,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,
@@ -2518,8 +2525,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);
@@ -2528,14 +2534,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,
@@ -2544,14 +2549,20 @@ 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,
@@ -2961,7 +2972,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, 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" })) });
   } });
 }

package/dist/ported.cjs

@@ -91,8 +91,8 @@ var Badge = vue.defineComponent({
           "--cmp-badge-text": `var(--sys-status-${palette}-text)`
         }
       }, [
-        props.icon || slots.icon ? vue.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 ? vue.h("span", { class: "oods-badge__icon", "aria-hidden": "true" }, [slotOrValue(slots.icon, props.icon)]) : null,
+        vue.h("span", { class: "oods-badge__label" }, [slotOrValue(slots.default, props.content ?? statusLabel(props.status))])
       ]);
     };
   }
@@ -116,7 +116,7 @@ vue.defineComponent({
     return () => {
       const tone = resolveTone(props.tone, props.status, props.domain);
       const palette = tokenTone(tone);
-      return vue.h("section", {
+      return vue.h("div", {
         class: "oods-banner",
         "data-oods-component": "Banner",
         "data-status": props.status,
@@ -131,17 +131,17 @@ vue.defineComponent({
           "--cmp-banner-text": `var(--sys-status-${palette}-text)`
         }
       }, [
-        vue.h("div", { class: "oods-banner-content" }, [
-          props.title || props.status || slots.title ? vue.h("strong", { class: "oods-banner-title" }, [
+        vue.h("div", { class: "oods-banner__content" }, [
+          props.title || props.status || slots.title ? vue.h("strong", { class: "oods-banner__title" }, [
             slotOrValue(slots.title, props.title || statusLabel(props.status))
           ]) : null,
-          props.detail ? vue.h("p", { class: "oods-banner-detail" }, props.detail) : null,
-          slots.default || props.content ? vue.h(slots.default ? "div" : "p", { class: "oods-banner-body" }, [slotOrValue(slots.default, props.content)]) : null,
-          slots.actions ? vue.h("div", { class: "oods-banner-actions" }, slots.actions()) : null
+          props.detail ? vue.h("p", { class: "oods-banner__detail" }, props.detail) : null,
+          slots.default || props.content ? vue.h(slots.default ? "div" : "p", { class: "oods-banner__body" }, [slotOrValue(slots.default, props.content)]) : null,
+          slots.actions ? vue.h("div", { class: "oods-banner__actions" }, slots.actions()) : null
         ]),
         props.dismissLabel ? vue.h("button", {
           type: "button",
-          class: "oods-banner-dismiss",
+          class: "oods-banner-dismiss oods-banner__dismiss",
           "aria-label": props.dismissLabel,
           onClick: () => emit("dismiss")
         }, [vue.h("span", { "aria-hidden": "true" }, "\xD7")]) : null
@@ -355,7 +355,9 @@ var Input = vue.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,
@@ -373,7 +375,7 @@ var Input = vue.defineComponent({
     };
     return () => renderField("Input", props, slots, metadata, vue.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" ? componentContracts.dateTimeInputValue(currentValue.value) : currentValue.value,
@@ -907,12 +909,12 @@ var timelineProps = {
 };
 function renderTimelineEvent(event, index, showActorId, showReason) {
   return vue.h("li", { key: `${event.timestamp ?? "event"}-${index}` }, [
-    vue.h("article", { "data-timeline-event": "true" }, [
-      vue.h("p", { "data-timeline-label": "true" }, event.label),
+    vue.h("article", { class: "oods-timeline__event", "data-timeline-event": "true" }, [
+      vue.h("p", { class: "oods-timeline__label", "data-timeline-label": "true" }, event.label),
       event.timestamp ? vue.h("time", { "data-timeline-time": "true", datetime: event.timestamp }, componentContracts.formatDateTime(event.timestamp)) : null,
-      event.detail ? vue.h("p", { "data-timeline-detail": "true" }, event.detail) : null,
-      showActorId && event.actorId ? vue.h("p", { "data-timeline-actor": "true" }, `Actor: ${event.actorId}`) : null,
-      showReason && event.reason ? vue.h("p", { "data-timeline-reason": "true" }, `Reason: ${event.reason}`) : null
+      event.detail ? vue.h("p", { class: "oods-timeline__detail", "data-timeline-detail": "true" }, event.detail) : null,
+      showActorId && event.actorId ? vue.h("p", { class: "oods-timeline__actor", "data-timeline-actor": "true" }, `Actor: ${event.actorId}`) : null,
+      showReason && event.reason ? vue.h("p", { class: "oods-timeline__reason", "data-timeline-reason": "true" }, `Reason: ${event.reason}`) : null
     ])
   ]);
 }
@@ -930,16 +932,16 @@ function timelineComponent(configuration) {
         const slottedEvents = slots.default?.();
         return vue.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
         }, [
-          vue.h("h2", { "data-timeline-title": "true" }, title),
-          props.status ? vue.h("p", { "data-timeline-current": "true" }, `Current status: ${statusLabel2(props.status)}`) : null,
+          vue.h("h2", { class: "oods-timeline__title", "data-timeline-title": "true" }, title),
+          props.status ? vue.h("p", { class: "oods-timeline__current", "data-timeline-current": "true" }, `Current status: ${statusLabel2(props.status)}`) : null,
           props.allowedTransitions?.length ? vue.h("p", { "data-timeline-transitions": "true" }, `Allowed transitions: ${props.allowedTransitions.join(", ")}`) : null,
-          vue.h("ol", { "data-timeline-events": "true" }, slottedEvents?.length ? slottedEvents : events.length ? events.map((event, index) => renderTimelineEvent(
+          vue.h("ol", { class: "oods-timeline__events", "data-timeline-events": "true" }, slottedEvents?.length ? slottedEvents : events.length ? events.map((event, index) => renderTimelineEvent(
             event,
             index,
             props.showActorId,
@@ -1095,8 +1097,7 @@ var SearchInput = vue.defineComponent({
       updateValue("");
       emit("clear");
     };
-    const submit = (event) => {
-      event.preventDefault();
+    const searchNow = () => {
       if (!props.disabled) {
         if (timer !== void 0) clearTimeout(timer);
         emitSearch(currentValue.value);
@@ -1105,14 +1106,13 @@ var SearchInput = vue.defineComponent({
     return () => {
       const id = props.id ?? `oods-search-${generatedId.replace(/:/g, "")}`;
       const ariaLabel = stringValue(attrs["aria-label"]) ?? props.label ?? props.placeholder;
-      return vue.h("form", {
+      return vue.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"
       }, [
         vue.h(Input, {
           id,
@@ -1121,14 +1121,20 @@ var SearchInput = vue.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 ? vue.h("button", {
           type: "button",
+          class: "oods-search-input__clear",
           "data-search-clear": "true",
           "aria-label": "Clear search",
           disabled: props.disabled,

package/dist/ported.js

@@ -89,8 +89,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 +114,7 @@ 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,17 +129,17 @@ 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
@@ -353,7 +353,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,
@@ -371,7 +373,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,
@@ -905,12 +907,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
     ])
   ]);
 }
@@ -928,16 +930,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,
@@ -1093,8 +1095,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);
@@ -1103,14 +1104,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,
@@ -1119,14 +1119,20 @@ 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,

package/package.json

@@ -1,11 +1,23 @@
 {
   "name": "@oods/components-vue",
-  "version": "0.3.1",
-  "description": "OODS Vue 3 component package.",
+  "version": "0.3.3",
+  "description": "Vue 3 components for OODS Foundry: the controls, layouts and domain views its generated screens use.",
+  "homepage": "https://oods-foundry.com/",
+  "bugs": {
+    "email": "derek@derekn.com"
+  },
+  "keywords": [
+    "oods",
+    "oods-foundry",
+    "vue",
+    "components",
+    "design-system",
+    "accessibility"
+  ],
   "type": "module",
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=20.11.1"
+    "node": ">=22.0.0"
   },
   "files": [
     "dist",
@@ -41,8 +53,8 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@oods/component-contracts": "0.3.1",
-    "@oods/component-styles": "0.3.1"
+    "@oods/component-contracts": "0.3.3",
+    "@oods/component-styles": "0.3.3"
   },
   "peerDependencies": {
     "vue": "^3.5.0"