@oods/components-react 0.3.1 → 0.3.3

package/README.md

@@ -8,7 +8,7 @@ React components used by screens generated with OODS Foundry. The package export
 npm install @oods/components-react @oods/component-styles @oods/tokens @oods/component-contracts react react-dom
 ```
 
-Use React and React DOM 18 or 19. Bring your existing React app or use Forge's `code_generate` with `options.output: "application"` for an app entry and Vite configuration.
+Use React and React DOM 18 or 19. Bring your existing React app or use OODS Foundry's `code_generate` with `options.output: "application"` for an app entry and Vite configuration.
 
 ## First result
 
@@ -24,7 +24,7 @@ export function App() {
 
 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
 
@@ -32,4 +32,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-react@0.3.3/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/components-react@0.3.3/NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.

package/dist/{chunk-A4T7OOIY.js → chunk-BPEHI36W.js}

@@ -155,17 +155,16 @@ var InputPrimitive = React3.forwardRef(
 InputPrimitive.displayName = "OODS.Input";
 var Input = InputPrimitive;
 var DatePicker = React3.forwardRef(
-  ({ pickerClassName, pickerStyle, inputClassName, inputStyle, ...rest }, ref) => /* @__PURE__ */ jsx(
+  ({ pickerClassName, pickerStyle, inputClassName, inputStyle, className, style, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: classes("oods-date-picker", className), style, "data-oods-component": "DatePicker", children: /* @__PURE__ */ jsx(
     Input,
     {
       ref,
       type: "date",
-      "data-oods-component": "DatePicker",
       inputClassName: classes("form-field__date-picker", inputClassName, pickerClassName),
       inputStyle: { ...inputStyle, ...pickerStyle },
       ...rest
     }
-  )
+  ) })
 );
 DatePicker.displayName = "OODS.DatePicker";
 var Checkbox = React3.forwardRef(
@@ -393,12 +392,12 @@ var Badge = React3.forwardRef(
     const resolvedContent = children ?? content ?? presentation?.label ?? status;
     const resolvedIcon = icon ?? resolveStatusGlyph(presentation?.iconName);
     const resolvedShowIcon = showIcon ?? resolvedIcon !== void 0;
-    const iconNode = resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsx("span", { className: "oods-badge__icon statusable-badge__icon", "aria-hidden": "true", children: resolvedIcon }) : null;
+    const iconNode = resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsx("span", { className: "oods-badge__icon", "aria-hidden": "true", children: resolvedIcon }) : null;
     return /* @__PURE__ */ jsxs(
       "span",
       {
         ref,
-        className: classes2("oods-badge", "statusable-badge", className),
+        className: classes2("oods-badge", className),
         "data-oods-component": "Badge",
         "data-status": status,
         "data-domain": domain,
@@ -410,16 +409,12 @@ var Badge = React3.forwardRef(
           "--cmp-badge-background": tokenSet.background,
           "--cmp-badge-border": tokenSet.border,
           "--cmp-badge-text": tokenSet.foreground,
-          "--statusable-badge-background": tokenSet.background,
-          "--statusable-badge-border": tokenSet.border,
-          "--statusable-badge-foreground": tokenSet.foreground,
-          "--statusable-badge-icon-color": tokenSet.foreground,
           ...style
         },
         ...rest,
         children: [
           iconPosition === "start" ? iconNode : null,
-          /* @__PURE__ */ jsx("span", { className: "oods-badge__label statusable-badge__label", children: resolvedContent }),
+          /* @__PURE__ */ jsx("span", { className: "oods-badge__label", children: resolvedContent }),
           iconPosition === "end" ? iconNode : null
         ]
       }
@@ -461,7 +456,7 @@ var Banner = React3.forwardRef(
         ref,
         role,
         "aria-live": role === "alert" ? "assertive" : "polite",
-        className: classes2("oods-banner", "statusable-banner", className),
+        className: classes2("oods-banner", className),
         "data-oods-component": "Banner",
         "data-status": status,
         "data-domain": domain,
@@ -471,25 +466,21 @@ var Banner = React3.forwardRef(
           "--cmp-banner-background": tokenSet.background,
           "--cmp-banner-border": tokenSet.border,
           "--cmp-banner-text": tokenSet.foreground,
-          "--statusable-banner-background": tokenSet.background,
-          "--statusable-banner-border": tokenSet.border,
-          "--statusable-banner-foreground": tokenSet.foreground,
-          "--statusable-banner-icon-color": tokenSet.foreground,
           ...style
         },
         ...rest,
         children: [
-          resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsx("span", { className: "oods-banner__icon statusable-banner__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
-          /* @__PURE__ */ jsxs("div", { className: "oods-banner__content statusable-banner__content", children: [
-            heading ? /* @__PURE__ */ jsx("strong", { className: "oods-banner__title statusable-banner__title", children: heading }) : null,
-            body ? /* @__PURE__ */ jsx("p", { className: "oods-banner__detail statusable-banner__description", children: body }) : null,
-            actions ? /* @__PURE__ */ jsx("div", { className: "oods-banner__actions statusable-banner__actions", children: actions }) : null
+          resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsx("span", { className: "oods-banner__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "oods-banner__content", children: [
+            heading ? /* @__PURE__ */ jsx("strong", { className: "oods-banner__title", children: heading }) : null,
+            body ? /* @__PURE__ */ jsx("p", { className: "oods-banner__detail", children: body }) : null,
+            actions ? /* @__PURE__ */ jsx("div", { className: "oods-banner__actions", children: actions }) : null
           ] }),
           onDismiss ? /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: "oods-banner-dismiss oods-banner__dismiss statusable-banner__dismiss",
+              className: "oods-banner-dismiss oods-banner__dismiss",
               "aria-label": dismissLabel,
               onClick: () => onDismiss(),
               children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
@@ -612,6 +603,7 @@ var StatusBadge = React3.forwardRef(
     compact,
     variant,
     title,
+    className,
     "aria-label": ariaLabel,
     ...rest
   }, ref) => {
@@ -629,6 +621,7 @@ var StatusBadge = React3.forwardRef(
         content: children ?? content,
         title: title ?? presentation.description,
         "aria-label": ariaLabel ?? label ?? `Status: ${presentation.label}`,
+        className: classes3("oods-status-badge", className),
         "data-oods-component": "StatusBadge",
         ...rest
       }
@@ -767,29 +760,29 @@ var TimelinePrimitive = React3.forwardRef(
         "data-timeline-type": kind,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx("h2", { className: "oods-timeline__title", children: title }),
+          /* @__PURE__ */ jsx("h2", { className: "oods-timeline__title", "data-timeline-title": "true", children: title }),
           kind === "status" && status ? /* @__PURE__ */ jsxs("p", { className: "oods-timeline__current", "data-timeline-current": "true", children: [
             "Current status: ",
             humanize(status)
           ] }) : null,
-          transitionCount > 0 ? /* @__PURE__ */ jsxs("p", { children: [
+          transitionCount > 0 ? /* @__PURE__ */ jsxs("p", { "data-timeline-transitions": "true", children: [
             "Allowed transitions: ",
             allowedTransitions?.join(", ")
           ] }) : null,
-          children ?? /* @__PURE__ */ jsx("ol", { className: "oods-timeline__events", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsx("li", { "data-timeline-empty": "true", children: "No events" }) : visibleEvents.map((event, index) => {
+          children ?? /* @__PURE__ */ jsx("ol", { className: "oods-timeline__events", "data-timeline-events": "true", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsx("li", { "data-timeline-empty": "true", children: "No events" }) : visibleEvents.map((event, index) => {
             const timestamp = event.timestamp ?? event.datetime;
             const actor = event.actor ?? event.actorId ?? event.actor_id;
             const eventLabel = event.label ?? event.title ?? (event.from && event.to ? `${humanize(event.from)} \u2192 ${humanize(event.to)}` : void 0) ?? (event.status ? humanize(event.status) : void 0) ?? (event.state ? humanize(event.state) : void 0) ?? "Event";
             const detail = event.detail ?? event.description;
             return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("article", { className: "oods-timeline__event", "data-timeline-event": "true", children: [
-              /* @__PURE__ */ jsx("p", { className: "oods-timeline__label", children: eventLabel }),
-              timestamp ? /* @__PURE__ */ jsx("time", { dateTime: timestamp, children: formatDateTime(timestamp) }) : null,
-              detail ? /* @__PURE__ */ jsx("p", { className: "oods-timeline__detail", children: detail }) : null,
-              showActorId && actor ? /* @__PURE__ */ jsxs("p", { className: "oods-timeline__actor", children: [
+              /* @__PURE__ */ jsx("p", { className: "oods-timeline__label", "data-timeline-label": "true", children: eventLabel }),
+              timestamp ? /* @__PURE__ */ jsx("time", { "data-timeline-time": "true", dateTime: timestamp, children: formatDateTime(timestamp) }) : null,
+              detail ? /* @__PURE__ */ jsx("p", { className: "oods-timeline__detail", "data-timeline-detail": "true", children: detail }) : null,
+              showActorId && actor ? /* @__PURE__ */ jsxs("p", { className: "oods-timeline__actor", "data-timeline-actor": "true", children: [
                 "Actor: ",
                 actor
               ] }) : null,
-              showReason && event.reason ? /* @__PURE__ */ jsxs("p", { className: "oods-timeline__reason", children: [
+              showReason && event.reason ? /* @__PURE__ */ jsxs("p", { className: "oods-timeline__reason", "data-timeline-reason": "true", children: [
                 "Reason: ",
                 event.reason
               ] }) : null

package/dist/{chunk-YCI5AEWL.js → chunk-XAWAMZUQ.js}

@@ -146,7 +146,7 @@ var TableRoot = React.forwardRef(
           ...rest,
           children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
             caption ? /* @__PURE__ */ jsx(TableCaption, { children: caption }) : null,
-            /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx("tr", { children: columns?.map((column) => /* @__PURE__ */ jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
+            /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx("tr", { className: "oods-table__row", children: columns?.map((column) => /* @__PURE__ */ jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
             /* @__PURE__ */ jsx(TableBody, { children: (rows?.length ?? 0) === 0 ? /* @__PURE__ */ jsx("tr", { className: "oods-table__row", children: /* @__PURE__ */ jsx(TableCell, { colSpan: Math.max(columns?.length ?? 0, 1), children: "No rows available." }) }) : rows?.map((row) => /* @__PURE__ */ jsx(
               "tr",
               {

package/dist/index.cjs

@@ -381,12 +381,12 @@ var Badge = React7__namespace.forwardRef(
     const resolvedContent = children ?? content ?? presentation?.label ?? status;
     const resolvedIcon = icon ?? resolveStatusGlyph(presentation?.iconName);
     const resolvedShowIcon = showIcon ?? resolvedIcon !== void 0;
-    const iconNode = resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__icon statusable-badge__icon", "aria-hidden": "true", children: resolvedIcon }) : null;
+    const iconNode = resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__icon", "aria-hidden": "true", children: resolvedIcon }) : null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
         ref,
-        className: classes("oods-badge", "statusable-badge", className),
+        className: classes("oods-badge", className),
         "data-oods-component": "Badge",
         "data-status": status,
         "data-domain": domain,
@@ -398,16 +398,12 @@ var Badge = React7__namespace.forwardRef(
           "--cmp-badge-background": tokenSet.background,
           "--cmp-badge-border": tokenSet.border,
           "--cmp-badge-text": tokenSet.foreground,
-          "--statusable-badge-background": tokenSet.background,
-          "--statusable-badge-border": tokenSet.border,
-          "--statusable-badge-foreground": tokenSet.foreground,
-          "--statusable-badge-icon-color": tokenSet.foreground,
           ...style
         },
         ...rest,
         children: [
           iconPosition === "start" ? iconNode : null,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__label statusable-badge__label", children: resolvedContent }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__label", children: resolvedContent }),
           iconPosition === "end" ? iconNode : null
         ]
       }
@@ -449,7 +445,7 @@ var Banner = React7__namespace.forwardRef(
         ref,
         role,
         "aria-live": role === "alert" ? "assertive" : "polite",
-        className: classes("oods-banner", "statusable-banner", className),
+        className: classes("oods-banner", className),
         "data-oods-component": "Banner",
         "data-status": status,
         "data-domain": domain,
@@ -459,25 +455,21 @@ var Banner = React7__namespace.forwardRef(
           "--cmp-banner-background": tokenSet.background,
           "--cmp-banner-border": tokenSet.border,
           "--cmp-banner-text": tokenSet.foreground,
-          "--statusable-banner-background": tokenSet.background,
-          "--statusable-banner-border": tokenSet.border,
-          "--statusable-banner-foreground": tokenSet.foreground,
-          "--statusable-banner-icon-color": tokenSet.foreground,
           ...style
         },
         ...rest,
         children: [
-          resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-banner__icon statusable-banner__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-banner__content statusable-banner__content", children: [
-            heading ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "oods-banner__title statusable-banner__title", children: heading }) : null,
-            body ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-banner__detail statusable-banner__description", children: body }) : null,
-            actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oods-banner__actions statusable-banner__actions", children: actions }) : null
+          resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-banner__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-banner__content", children: [
+            heading ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "oods-banner__title", children: heading }) : null,
+            body ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-banner__detail", children: body }) : null,
+            actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oods-banner__actions", children: actions }) : null
           ] }),
           onDismiss ? /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
-              className: "oods-banner-dismiss oods-banner__dismiss statusable-banner__dismiss",
+              className: "oods-banner-dismiss oods-banner__dismiss",
               "aria-label": dismissLabel,
               onClick: () => onDismiss(),
               children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xD7" })
@@ -731,17 +723,16 @@ var InputPrimitive = React7__namespace.forwardRef(
 InputPrimitive.displayName = "OODS.Input";
 var Input = InputPrimitive;
 var DatePicker = React7__namespace.forwardRef(
-  ({ pickerClassName, pickerStyle, inputClassName, inputStyle, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ({ pickerClassName, pickerStyle, inputClassName, inputStyle, className, style, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes2("oods-date-picker", className), style, "data-oods-component": "DatePicker", children: /* @__PURE__ */ jsxRuntime.jsx(
     Input,
     {
       ref,
       type: "date",
-      "data-oods-component": "DatePicker",
       inputClassName: classes2("form-field__date-picker", inputClassName, pickerClassName),
       inputStyle: { ...inputStyle, ...pickerStyle },
       ...rest
     }
-  )
+  ) })
 );
 DatePicker.displayName = "OODS.DatePicker";
 var Checkbox = React7__namespace.forwardRef(
@@ -1163,7 +1154,7 @@ var TableRoot = React7__namespace.forwardRef(
           ...rest,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             caption ? /* @__PURE__ */ jsxRuntime.jsx(TableCaption, { children: caption }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns?.map((column) => /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oods-table__row", children: columns?.map((column) => /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: (rows?.length ?? 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oods-table__row", children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: Math.max(columns?.length ?? 0, 1), children: "No rows available." }) }) : rows?.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
               "tr",
               {
@@ -1450,6 +1441,7 @@ var StatusBadge = React7__namespace.forwardRef(
     compact,
     variant,
     title,
+    className,
     "aria-label": ariaLabel,
     ...rest
   }, ref) => {
@@ -1467,6 +1459,7 @@ var StatusBadge = React7__namespace.forwardRef(
         content: children ?? content,
         title: title ?? presentation.description,
         "aria-label": ariaLabel ?? label ?? `Status: ${presentation.label}`,
+        className: classes6("oods-status-badge", className),
         "data-oods-component": "StatusBadge",
         ...rest
       }
@@ -1605,29 +1598,29 @@ var TimelinePrimitive = React7__namespace.forwardRef(
         "data-timeline-type": kind,
         ...rest,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "oods-timeline__title", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "oods-timeline__title", "data-timeline-title": "true", children: title }),
           kind === "status" && status ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__current", "data-timeline-current": "true", children: [
             "Current status: ",
             humanize(status)
           ] }) : null,
-          transitionCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          transitionCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { "data-timeline-transitions": "true", children: [
             "Allowed transitions: ",
             allowedTransitions?.join(", ")
           ] }) : null,
-          children ?? /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "oods-timeline__events", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { "data-timeline-empty": "true", children: "No events" }) : visibleEvents.map((event, index) => {
+          children ?? /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "oods-timeline__events", "data-timeline-events": "true", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { "data-timeline-empty": "true", children: "No events" }) : visibleEvents.map((event, index) => {
             const timestamp = event.timestamp ?? event.datetime;
             const actor = event.actor ?? event.actorId ?? event.actor_id;
             const eventLabel = event.label ?? event.title ?? (event.from && event.to ? `${humanize(event.from)} \u2192 ${humanize(event.to)}` : void 0) ?? (event.status ? humanize(event.status) : void 0) ?? (event.state ? humanize(event.state) : void 0) ?? "Event";
             const detail = event.detail ?? event.description;
             return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "oods-timeline__event", "data-timeline-event": "true", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__label", children: eventLabel }),
-              timestamp ? /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: timestamp, children: componentContracts.formatDateTime(timestamp) }) : null,
-              detail ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__detail", children: detail }) : null,
-              showActorId && actor ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__actor", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__label", "data-timeline-label": "true", children: eventLabel }),
+              timestamp ? /* @__PURE__ */ jsxRuntime.jsx("time", { "data-timeline-time": "true", dateTime: timestamp, children: componentContracts.formatDateTime(timestamp) }) : null,
+              detail ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__detail", "data-timeline-detail": "true", children: detail }) : null,
+              showActorId && actor ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__actor", "data-timeline-actor": "true", children: [
                 "Actor: ",
                 actor
               ] }) : null,
-              showReason && event.reason ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__reason", children: [
+              showReason && event.reason ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__reason", "data-timeline-reason": "true", children: [
                 "Reason: ",
                 event.reason
               ] }) : null
@@ -2398,7 +2391,7 @@ function createBadgeFamily(options) {
       return typeof value === "string" && value.trim().length > 0 ? value : void 0;
     };
     const content = childContent(children);
-    const label = content.scalar ?? firstText(...options.labelKeys.map((key) => options.component === "CancellationBadge" && typeof record[key] === "boolean" && options.booleanProps?.includes(key) ? record[key] ? "Cancellation scheduled" : "No cancellation scheduled" : scalar(key))) ?? options.defaultLabel;
+    const label = content.scalar ?? firstText(...options.labelKeys.map((key) => options.booleanLabels && typeof record[key] === "boolean" && options.booleanProps?.includes(key) ? options.booleanLabels[record[key] ? 0 : 1] : scalar(key))) ?? options.defaultLabel;
     const status = firstText(...options.statusKeys.map(scalar));
     const variant = scalar("variant") ?? options.defaultVariant;
     const tone = record.tone;
@@ -3072,7 +3065,8 @@ var ArchivePill = createBadgeFamily({
   defaultVariant: "archive",
   labelKeys: ["label", "text", "status", "state", "isArchived", "value"],
   statusKeys: ["status", "state", "isArchived", "value"],
-  booleanProps: ["isArchived", "value"]
+  booleanProps: ["isArchived", "value"],
+  booleanLabels: ["Archived", "Not archived"]
 });
 var CancellationBadge = createBadgeFamily({
   component: "CancellationBadge",
@@ -3081,7 +3075,8 @@ var CancellationBadge = createBadgeFamily({
   defaultVariant: "cancellation",
   labelKeys: ["label", "text", "status", "state", "cancelAtPeriodEnd", "value"],
   statusKeys: ["status", "state", "cancelAtPeriodEnd", "isCancelled", "value"],
-  booleanProps: ["cancelAtPeriodEnd", "isCancelled", "value"]
+  booleanProps: ["cancelAtPeriodEnd", "isCancelled", "value"],
+  booleanLabels: ["Cancellation scheduled", "No cancellation scheduled"]
 });
 var ArchiveSummary = React7__namespace.forwardRef(
   ({ title, label, heading, name, isArchived, archived, status, archivedAt, reason, archiveReason, summary: summary2, text, description, children, className, ...rest }, ref) => {
@@ -3101,7 +3096,7 @@ ArchiveSummary.displayName = "OODS.ArchiveSummary";
 var PriceCardMeta = React7__namespace.forwardRef(
   ({ title, label, heading, name, model, pricingModel, interval, billingInterval, children, className, ...rest }, ref) => {
     const content = childContent(children);
-    const terms = [["Model", firstText(model, pricingModel)], ["Interval", firstText(interval, billingInterval)]].filter((entry) => entry[1] !== void 0);
+    const terms = [["Model", componentContracts.formatPriceCode(firstText(model, pricingModel))], ["Interval", componentContracts.formatPriceCode(firstText(interval, billingInterval))]].filter((entry) => entry[1] !== void 0);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes7("oods-price-card-meta", className), "data-oods-component": "PriceCardMeta", "data-meta-type": "price", ...rest, children: content.authored || content.scalar !== void 0 ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { "data-meta-title": "true", children: firstText(title, label, heading, name) ?? "Price" }),
       terms.map(([term, value]) => /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-meta-item": "true", children: [

package/dist/index.js

@@ -1,6 +1,6 @@
-import { Badge, Select, Input, Checkbox, Text } from './chunk-A4T7OOIY.js';
-export { AuditTimeline, Badge, Banner, Button, CancellationSummary, Card, Checkbox, DatePicker, Input, PaginationBar, PriceBadge, RelativeTimestamp, SearchInput, Select, StatusBadge, StatusTimeline, Text, Textarea } from './chunk-A4T7OOIY.js';
-export { Table } from './chunk-YCI5AEWL.js';
+import { Badge, Select, Input, Checkbox, Text } from './chunk-BPEHI36W.js';
+export { AuditTimeline, Badge, Banner, Button, CancellationSummary, Card, Checkbox, DatePicker, Input, PaginationBar, PriceBadge, RelativeTimestamp, SearchInput, Select, StatusBadge, StatusTimeline, Text, Textarea } from './chunk-BPEHI36W.js';
+export { Table } from './chunk-XAWAMZUQ.js';
 import './chunk-G74PKSW3.js';
 import * as React3 from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -683,7 +683,7 @@ function createBadgeFamily(options) {
       return typeof value === "string" && value.trim().length > 0 ? value : void 0;
     };
     const content = childContent(children);
-    const label = content.scalar ?? firstText(...options.labelKeys.map((key) => options.component === "CancellationBadge" && typeof record[key] === "boolean" && options.booleanProps?.includes(key) ? record[key] ? "Cancellation scheduled" : "No cancellation scheduled" : scalar(key))) ?? options.defaultLabel;
+    const label = content.scalar ?? firstText(...options.labelKeys.map((key) => options.booleanLabels && typeof record[key] === "boolean" && options.booleanProps?.includes(key) ? options.booleanLabels[record[key] ? 0 : 1] : scalar(key))) ?? options.defaultLabel;
     const status = firstText(...options.statusKeys.map(scalar));
     const variant = scalar("variant") ?? options.defaultVariant;
     const tone = record.tone;
@@ -1357,7 +1357,8 @@ var ArchivePill = createBadgeFamily({
   defaultVariant: "archive",
   labelKeys: ["label", "text", "status", "state", "isArchived", "value"],
   statusKeys: ["status", "state", "isArchived", "value"],
-  booleanProps: ["isArchived", "value"]
+  booleanProps: ["isArchived", "value"],
+  booleanLabels: ["Archived", "Not archived"]
 });
 var CancellationBadge = createBadgeFamily({
   component: "CancellationBadge",
@@ -1366,7 +1367,8 @@ var CancellationBadge = createBadgeFamily({
   defaultVariant: "cancellation",
   labelKeys: ["label", "text", "status", "state", "cancelAtPeriodEnd", "value"],
   statusKeys: ["status", "state", "cancelAtPeriodEnd", "isCancelled", "value"],
-  booleanProps: ["cancelAtPeriodEnd", "isCancelled", "value"]
+  booleanProps: ["cancelAtPeriodEnd", "isCancelled", "value"],
+  booleanLabels: ["Cancellation scheduled", "No cancellation scheduled"]
 });
 var ArchiveSummary = React3.forwardRef(
   ({ title, label, heading, name, isArchived, archived, status, archivedAt, reason, archiveReason, summary: summary2, text, description, children, className, ...rest }, ref) => {
@@ -1386,7 +1388,7 @@ ArchiveSummary.displayName = "OODS.ArchiveSummary";
 var PriceCardMeta = React3.forwardRef(
   ({ title, label, heading, name, model, pricingModel, interval, billingInterval, children, className, ...rest }, ref) => {
     const content = childContent(children);
-    const terms = [["Model", firstText(model, pricingModel)], ["Interval", firstText(interval, billingInterval)]].filter((entry) => entry[1] !== void 0);
+    const terms = [["Model", formatPriceCode(firstText(model, pricingModel))], ["Interval", formatPriceCode(firstText(interval, billingInterval))]].filter((entry) => entry[1] !== void 0);
     return /* @__PURE__ */ jsx("div", { ref, className: classes3("oods-price-card-meta", className), "data-oods-component": "PriceCardMeta", "data-meta-type": "price", ...rest, children: content.authored || content.scalar !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { "data-meta-title": "true", children: firstText(title, label, heading, name) ?? "Price" }),
       terms.map(([term, value]) => /* @__PURE__ */ jsxs("span", { "data-meta-item": "true", children: [

package/dist/ported.cjs

@@ -508,17 +508,16 @@ var InputPrimitive = React3__namespace.forwardRef(
 InputPrimitive.displayName = "OODS.Input";
 var Input = InputPrimitive;
 var DatePicker = React3__namespace.forwardRef(
-  ({ pickerClassName, pickerStyle, inputClassName, inputStyle, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ({ pickerClassName, pickerStyle, inputClassName, inputStyle, className, style, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes("oods-date-picker", className), style, "data-oods-component": "DatePicker", children: /* @__PURE__ */ jsxRuntime.jsx(
     Input,
     {
       ref,
       type: "date",
-      "data-oods-component": "DatePicker",
       inputClassName: classes("form-field__date-picker", inputClassName, pickerClassName),
       inputStyle: { ...inputStyle, ...pickerStyle },
       ...rest
     }
-  )
+  ) })
 );
 DatePicker.displayName = "OODS.DatePicker";
 var Checkbox = React3__namespace.forwardRef(
@@ -746,12 +745,12 @@ var Badge = React3__namespace.forwardRef(
     const resolvedContent = children ?? content ?? presentation?.label ?? status;
     const resolvedIcon = icon ?? resolveStatusGlyph(presentation?.iconName);
     const resolvedShowIcon = showIcon ?? resolvedIcon !== void 0;
-    const iconNode = resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__icon statusable-badge__icon", "aria-hidden": "true", children: resolvedIcon }) : null;
+    const iconNode = resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__icon", "aria-hidden": "true", children: resolvedIcon }) : null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
         ref,
-        className: classes2("oods-badge", "statusable-badge", className),
+        className: classes2("oods-badge", className),
         "data-oods-component": "Badge",
         "data-status": status,
         "data-domain": domain,
@@ -763,16 +762,12 @@ var Badge = React3__namespace.forwardRef(
           "--cmp-badge-background": tokenSet.background,
           "--cmp-badge-border": tokenSet.border,
           "--cmp-badge-text": tokenSet.foreground,
-          "--statusable-badge-background": tokenSet.background,
-          "--statusable-badge-border": tokenSet.border,
-          "--statusable-badge-foreground": tokenSet.foreground,
-          "--statusable-badge-icon-color": tokenSet.foreground,
           ...style
         },
         ...rest,
         children: [
           iconPosition === "start" ? iconNode : null,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__label statusable-badge__label", children: resolvedContent }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__label", children: resolvedContent }),
           iconPosition === "end" ? iconNode : null
         ]
       }
@@ -814,7 +809,7 @@ var Banner = React3__namespace.forwardRef(
         ref,
         role,
         "aria-live": role === "alert" ? "assertive" : "polite",
-        className: classes2("oods-banner", "statusable-banner", className),
+        className: classes2("oods-banner", className),
         "data-oods-component": "Banner",
         "data-status": status,
         "data-domain": domain,
@@ -824,25 +819,21 @@ var Banner = React3__namespace.forwardRef(
           "--cmp-banner-background": tokenSet.background,
           "--cmp-banner-border": tokenSet.border,
           "--cmp-banner-text": tokenSet.foreground,
-          "--statusable-banner-background": tokenSet.background,
-          "--statusable-banner-border": tokenSet.border,
-          "--statusable-banner-foreground": tokenSet.foreground,
-          "--statusable-banner-icon-color": tokenSet.foreground,
           ...style
         },
         ...rest,
         children: [
-          resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-banner__icon statusable-banner__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-banner__content statusable-banner__content", children: [
-            heading ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "oods-banner__title statusable-banner__title", children: heading }) : null,
-            body ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-banner__detail statusable-banner__description", children: body }) : null,
-            actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oods-banner__actions statusable-banner__actions", children: actions }) : null
+          resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-banner__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-banner__content", children: [
+            heading ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "oods-banner__title", children: heading }) : null,
+            body ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-banner__detail", children: body }) : null,
+            actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oods-banner__actions", children: actions }) : null
           ] }),
           onDismiss ? /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
-              className: "oods-banner-dismiss oods-banner__dismiss statusable-banner__dismiss",
+              className: "oods-banner-dismiss oods-banner__dismiss",
               "aria-label": dismissLabel,
               onClick: () => onDismiss(),
               children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xD7" })
@@ -965,6 +956,7 @@ var StatusBadge = React3__namespace.forwardRef(
     compact,
     variant,
     title,
+    className,
     "aria-label": ariaLabel,
     ...rest
   }, ref) => {
@@ -982,6 +974,7 @@ var StatusBadge = React3__namespace.forwardRef(
         content: children ?? content,
         title: title ?? presentation.description,
         "aria-label": ariaLabel ?? label ?? `Status: ${presentation.label}`,
+        className: classes3("oods-status-badge", className),
         "data-oods-component": "StatusBadge",
         ...rest
       }
@@ -1120,29 +1113,29 @@ var TimelinePrimitive = React3__namespace.forwardRef(
         "data-timeline-type": kind,
         ...rest,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "oods-timeline__title", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "oods-timeline__title", "data-timeline-title": "true", children: title }),
           kind === "status" && status ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__current", "data-timeline-current": "true", children: [
             "Current status: ",
             humanize(status)
           ] }) : null,
-          transitionCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          transitionCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { "data-timeline-transitions": "true", children: [
             "Allowed transitions: ",
             allowedTransitions?.join(", ")
           ] }) : null,
-          children ?? /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "oods-timeline__events", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { "data-timeline-empty": "true", children: "No events" }) : visibleEvents.map((event, index) => {
+          children ?? /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "oods-timeline__events", "data-timeline-events": "true", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { "data-timeline-empty": "true", children: "No events" }) : visibleEvents.map((event, index) => {
             const timestamp = event.timestamp ?? event.datetime;
             const actor = event.actor ?? event.actorId ?? event.actor_id;
             const eventLabel = event.label ?? event.title ?? (event.from && event.to ? `${humanize(event.from)} \u2192 ${humanize(event.to)}` : void 0) ?? (event.status ? humanize(event.status) : void 0) ?? (event.state ? humanize(event.state) : void 0) ?? "Event";
             const detail = event.detail ?? event.description;
             return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "oods-timeline__event", "data-timeline-event": "true", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__label", children: eventLabel }),
-              timestamp ? /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: timestamp, children: componentContracts.formatDateTime(timestamp) }) : null,
-              detail ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__detail", children: detail }) : null,
-              showActorId && actor ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__actor", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__label", "data-timeline-label": "true", children: eventLabel }),
+              timestamp ? /* @__PURE__ */ jsxRuntime.jsx("time", { "data-timeline-time": "true", dateTime: timestamp, children: componentContracts.formatDateTime(timestamp) }) : null,
+              detail ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__detail", "data-timeline-detail": "true", children: detail }) : null,
+              showActorId && actor ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__actor", "data-timeline-actor": "true", children: [
                 "Actor: ",
                 actor
               ] }) : null,
-              showReason && event.reason ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__reason", children: [
+              showReason && event.reason ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__reason", "data-timeline-reason": "true", children: [
                 "Reason: ",
                 event.reason
               ] }) : null

package/dist/ported.js

@@ -1,2 +1,2 @@
-export { AuditTimeline, CancellationSummary, PaginationBar, PriceBadge, RelativeTimestamp, SearchInput, StatusBadge, StatusTimeline } from './chunk-A4T7OOIY.js';
+export { AuditTimeline, CancellationSummary, PaginationBar, PriceBadge, RelativeTimestamp, SearchInput, StatusBadge, StatusTimeline } from './chunk-BPEHI36W.js';
 import './chunk-G74PKSW3.js';

package/dist/table.cjs

@@ -468,7 +468,7 @@ var TableRoot = React__namespace.forwardRef(
           ...rest,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             caption ? /* @__PURE__ */ jsxRuntime.jsx(TableCaption, { children: caption }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns?.map((column) => /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oods-table__row", children: columns?.map((column) => /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: (rows?.length ?? 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oods-table__row", children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: Math.max(columns?.length ?? 0, 1), children: "No rows available." }) }) : rows?.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
               "tr",
               {

package/dist/table.js

@@ -1,2 +1,2 @@
-export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow } from './chunk-YCI5AEWL.js';
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow } from './chunk-XAWAMZUQ.js';
 import './chunk-G74PKSW3.js';

package/package.json

@@ -1,11 +1,23 @@
 {
   "name": "@oods/components-react",
-  "version": "0.3.1",
-  "description": "OODS React component package.",
+  "version": "0.3.3",
+  "description": "React 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",
+    "react",
+    "components",
+    "design-system",
+    "accessibility"
+  ],
   "type": "module",
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=20.11.1"
+    "node": ">=22.0.0"
   },
   "files": [
     "dist",
@@ -52,8 +64,8 @@
   ],
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.2",
-    "@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": {
     "react": ">=18 <20",