@oods/components-react 0.3.2 → 0.3.3

package/README.md

@@ -32,4 +32,4 @@ Use matching versions of the OODS packages. These packages are separate from the
 
 ## License
 
-Apache License 2.0. See [LICENSE](https://cdn.jsdelivr.net/npm/@oods/components-react@0.3.2/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/components-react@0.3.2/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

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';

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,6 +1,6 @@
 {
   "name": "@oods/components-react",
-  "version": "0.3.2",
+  "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": {
@@ -64,8 +64,8 @@
   ],
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.2",
-    "@oods/component-contracts": "0.3.2",
-    "@oods/component-styles": "0.3.2"
+    "@oods/component-contracts": "0.3.3",
+    "@oods/component-styles": "0.3.3"
   },
   "peerDependencies": {
     "react": ">=18 <20",