@oods/components-react 0.4.0 → 0.4.1

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React8 = require('react');
+var React9 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var componentContracts = require('@oods/component-contracts');
 var jsxRuntime = require('react/jsx-runtime');
@@ -23,7 +23,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React8__namespace = /*#__PURE__*/_interopNamespace(React8);
+var React9__namespace = /*#__PURE__*/_interopNamespace(React9);
 
 // src/presentational.tsx
 var REACT_NAMES = {
@@ -38,10 +38,10 @@ var REACT_NAMES = {
 };
 var svgProps = Object.fromEntries(Object.entries(componentContracts.STATUS_ICON_SVG_ATTRS).map(([name, value]) => [REACT_NAMES[name] ?? name, value]));
 function StatusIcon({ name }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...svgProps, children: componentContracts.STATUS_ICON_SHAPES[name].map((shape, index) => React8__namespace.createElement(shape.tag, { key: index, ...shape.attrs })) });
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...svgProps, children: componentContracts.STATUS_ICON_SHAPES[name].map((shape, index) => React9__namespace.createElement(shape.tag, { key: index, ...shape.attrs })) });
 }
 var classes = (...values) => values.filter(Boolean).join(" ");
-var Badge = React8__namespace.forwardRef(
+var Badge = React9__namespace.forwardRef(
   ({
     content,
     status,
@@ -95,7 +95,7 @@ var Badge = React8__namespace.forwardRef(
   }
 );
 Badge.displayName = "OODS.Badge";
-var Banner = React8__namespace.forwardRef(
+var Banner = React9__namespace.forwardRef(
   ({
     title,
     detail,
@@ -166,7 +166,7 @@ var Banner = React8__namespace.forwardRef(
   }
 );
 Banner.displayName = "OODS.Banner";
-var Button = React8__namespace.forwardRef(
+var Button = React9__namespace.forwardRef(
   ({
     asChild = false,
     content,
@@ -213,10 +213,35 @@ var Button = React8__namespace.forwardRef(
 );
 Button.displayName = "OODS.Button";
 var noSubscription = () => () => void 0;
-var useIsomorphicLayoutEffect = typeof window === "undefined" ? React8__namespace.useEffect : React8__namespace.useLayoutEffect;
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React9__namespace.useEffect : React9__namespace.useLayoutEffect;
 var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
 var hasContent = (node) => node !== void 0 && node !== null && node !== false && node !== "";
-var Dialog = React8__namespace.forwardRef(
+var pageLocks = 0;
+var pageStyle;
+function lockPageScroll() {
+  const page = document.documentElement;
+  if (pageLocks++ === 0) {
+    const scrollbar = window.innerWidth - page.clientWidth;
+    pageStyle = { overflow: page.style.overflow, paddingRight: page.style.paddingRight };
+    if (scrollbar > 0) page.style.paddingRight = `${parseFloat(getComputedStyle(page).paddingRight) + scrollbar}px`;
+    page.style.overflow = "hidden";
+  }
+  let held = true;
+  return () => {
+    if (!held) return;
+    held = false;
+    if (--pageLocks === 0 && pageStyle) {
+      page.style.overflow = pageStyle.overflow;
+      page.style.paddingRight = pageStyle.paddingRight;
+      pageStyle = void 0;
+    }
+  };
+}
+var outsideBox = (event, dialog) => {
+  const box = dialog.getBoundingClientRect();
+  return event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom;
+};
+var Dialog = React9__namespace.forwardRef(
   ({
     id,
     open = false,
@@ -230,26 +255,36 @@ var Dialog = React8__namespace.forwardRef(
     className,
     onClose,
     onKeyDown,
+    onMouseDown,
+    onClick,
     ...rest
   }, ref) => {
-    const generatedId = React8__namespace.useId().replace(/[^\w-]/g, "");
+    const generatedId = React9__namespace.useId().replace(/[^\w-]/g, "");
     const dialogId = id ?? `oods-dialog-${generatedId}`;
-    const element = React8__namespace.useRef(null);
-    const openRef = React8__namespace.useRef(open);
-    const serverMarkup = React8__namespace.useSyncExternalStore(noSubscription, () => false, () => true);
+    const element = React9__namespace.useRef(null);
+    const openRef = React9__namespace.useRef(open);
+    const scrollLock = React9__namespace.useRef(null);
+    const pressedBackdrop = React9__namespace.useRef(false);
+    const serverMarkup = React9__namespace.useSyncExternalStore(noSubscription, () => false, () => true);
     const managed = modal && !serverMarkup && canShowModal();
-    const setRef = React8__namespace.useCallback((node) => {
+    const setRef = React9__namespace.useCallback((node) => {
       element.current = node;
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
     }, [ref]);
+    const releaseScroll = React9__namespace.useCallback(() => {
+      scrollLock.current?.();
+      scrollLock.current = null;
+    }, []);
     useIsomorphicLayoutEffect(() => {
       openRef.current = open;
       const dialog = element.current;
       if (!dialog || !managed) return;
       if (open && !dialog.open) dialog.showModal();
       else if (!open && dialog.open) dialog.close();
+      if (open && dialog.open) scrollLock.current ??= lockPageScroll();
     }, [open, managed]);
+    React9__namespace.useEffect(() => releaseScroll, [releaseScroll]);
     const requestClose = (event) => {
       event.preventDefault();
       onClose?.();
@@ -271,7 +306,19 @@ var Dialog = React8__namespace.forwardRef(
         },
         onCancel: requestClose,
         onClose: () => {
-          if (openRef.current && !element.current?.open) onClose?.();
+          if (element.current?.open) return;
+          releaseScroll();
+          if (openRef.current) onClose?.();
+        },
+        onMouseDown: (event) => {
+          onMouseDown?.(event);
+          pressedBackdrop.current = managed && event.target === event.currentTarget && outsideBox(event, event.currentTarget);
+        },
+        onClick: (event) => {
+          onClick?.(event);
+          const backdrop = pressedBackdrop.current && event.target === event.currentTarget && outsideBox(event, event.currentTarget);
+          pressedBackdrop.current = false;
+          if (backdrop && !event.defaultPrevented) onClose?.();
         },
         ...rest,
         children: [
@@ -290,7 +337,7 @@ var Dialog = React8__namespace.forwardRef(
   }
 );
 Dialog.displayName = "OODS.Dialog";
-var Card = React8__namespace.forwardRef(
+var Card = React9__namespace.forwardRef(
   ({ as = "div", elevated = false, className, ...rest }, ref) => {
     const Element = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -306,7 +353,7 @@ var Card = React8__namespace.forwardRef(
   }
 );
 Card.displayName = "OODS.Card";
-var Text = React8__namespace.forwardRef(
+var Text = React9__namespace.forwardRef(
   ({
     as = "span",
     content,
@@ -415,7 +462,7 @@ var FieldFrame = ({
     }
   );
 };
-var InputPrimitive = React8__namespace.forwardRef(
+var InputPrimitive = React9__namespace.forwardRef(
   ({
     id,
     label,
@@ -485,7 +532,7 @@ var InputPrimitive = React8__namespace.forwardRef(
 );
 InputPrimitive.displayName = "OODS.Input";
 var Input = InputPrimitive;
-var DatePicker = React8__namespace.forwardRef(
+var DatePicker = React9__namespace.forwardRef(
   ({ 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,
     {
@@ -498,7 +545,7 @@ var DatePicker = React8__namespace.forwardRef(
   ) })
 );
 DatePicker.displayName = "OODS.DatePicker";
-var Checkbox = React8__namespace.forwardRef(
+var Checkbox = React9__namespace.forwardRef(
   ({
     id,
     label,
@@ -561,7 +608,7 @@ var Checkbox = React8__namespace.forwardRef(
   }
 );
 Checkbox.displayName = "OODS.Checkbox";
-var Switch = React8__namespace.forwardRef(
+var Switch = React9__namespace.forwardRef(
   ({
     id,
     label,
@@ -579,7 +626,7 @@ var Switch = React8__namespace.forwardRef(
     "aria-describedby": nativeDescription,
     ...rest
   }, ref) => {
-    const [internalChecked, setInternalChecked] = React8__namespace.useState(defaultChecked);
+    const [internalChecked, setInternalChecked] = React9__namespace.useState(defaultChecked);
     const on = checked ?? internalChecked;
     const validationId = validation?.id ?? `${id}-validation`;
     const describedBy = [nativeDescription, help ? `${id}-help` : void 0, validation?.message ? validationId : void 0].filter(Boolean).join(" ") || void 0;
@@ -639,7 +686,7 @@ var Switch = React8__namespace.forwardRef(
   }
 );
 Switch.displayName = "OODS.Switch";
-var Select = React8__namespace.forwardRef(
+var Select = React9__namespace.forwardRef(
   ({
     id,
     label,
@@ -707,7 +754,7 @@ var Select = React8__namespace.forwardRef(
   }
 );
 Select.displayName = "OODS.Select";
-var Textarea = React8__namespace.forwardRef(
+var Textarea = React9__namespace.forwardRef(
   ({
     id,
     label,
@@ -790,7 +837,7 @@ var maxColumns = (columns) => {
   const count = Number(columns);
   return Number.isFinite(count) && count > 0 ? count : void 0;
 };
-var Grid = React8__namespace.forwardRef(
+var Grid = React9__namespace.forwardRef(
   ({
     columns = "auto-fit",
     minColumnWidth = "16rem",
@@ -820,7 +867,7 @@ var Grid = React8__namespace.forwardRef(
   )
 );
 Grid.displayName = "OODS.Grid";
-var Stack = React8__namespace.forwardRef(
+var Stack = React9__namespace.forwardRef(
   ({
     direction = "column",
     gap = "md",
@@ -852,19 +899,19 @@ var Stack = React8__namespace.forwardRef(
 );
 Stack.displayName = "OODS.Stack";
 var classes4 = (...values) => values.filter(Boolean).join(" ");
-var TableHead = React8__namespace.forwardRef(
+var TableHead = React9__namespace.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: classes4("oods-table__header", className), ...rest })
 );
 TableHead.displayName = "OODS.Table.Head";
-var TableBody = React8__namespace.forwardRef(
+var TableBody = React9__namespace.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: classes4("oods-table__body", className), ...rest })
 );
 TableBody.displayName = "OODS.Table.Body";
-var TableCaption = React8__namespace.forwardRef(
+var TableCaption = React9__namespace.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("caption", { ref, className: classes4("oods-table__caption", className), ...rest })
 );
 TableCaption.displayName = "OODS.Table.Caption";
-var TableRow = React8__namespace.forwardRef(
+var TableRow = React9__namespace.forwardRef(
   ({
     selectable = false,
     selected = false,
@@ -903,7 +950,7 @@ var TableRow = React8__namespace.forwardRef(
   }
 );
 TableRow.displayName = "OODS.Table.Row";
-var TableHeaderCell = React8__namespace.forwardRef(
+var TableHeaderCell = React9__namespace.forwardRef(
   ({ numeric = false, className, scope = "col", ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "th",
     {
@@ -920,7 +967,7 @@ var TableHeaderCell = React8__namespace.forwardRef(
   )
 );
 TableHeaderCell.displayName = "OODS.Table.HeaderCell";
-var TableCell = React8__namespace.forwardRef(
+var TableCell = React9__namespace.forwardRef(
   ({
     numeric = false,
     status,
@@ -966,7 +1013,7 @@ var TableCell = React8__namespace.forwardRef(
   }
 );
 TableCell.displayName = "OODS.Table.Cell";
-var TableRoot = React8__namespace.forwardRef(
+var TableRoot = React9__namespace.forwardRef(
   ({
     caption,
     showCaption = true,
@@ -1048,7 +1095,7 @@ var partitionForOverflow = (items, visibleCount, selectedId) => {
     overflowItems: items.filter((item) => !visibleIds.has(item.id))
   };
 };
-var Tabs = React8__namespace.forwardRef(
+var Tabs = React9__namespace.forwardRef(
   ({
     items,
     selectedId,
@@ -1062,22 +1109,22 @@ var Tabs = React8__namespace.forwardRef(
     "aria-label": ariaLabelAttribute,
     ...rest
   }, ref) => {
-    const instanceId = React8__namespace.useId().replaceAll(":", "");
+    const instanceId = React9__namespace.useId().replaceAll(":", "");
     const controlled = selectedId !== void 0;
     const firstEnabled = items.find((item) => !item.disabled && !item.isDisabled)?.id ?? "";
-    const [internalSelectedId, setInternalSelectedId] = React8__namespace.useState(
+    const [internalSelectedId, setInternalSelectedId] = React9__namespace.useState(
       defaultSelectedId ?? firstEnabled
     );
     const activeId = controlled ? selectedId : internalSelectedId;
-    const [focusedId, setFocusedId] = React8__namespace.useState(activeId);
-    const [visibleCount, setVisibleCount] = React8__namespace.useState(items.length);
-    const [menuOpen, setMenuOpen] = React8__namespace.useState(false);
-    const listRef = React8__namespace.useRef(null);
-    const tabRefs = React8__namespace.useRef(/* @__PURE__ */ new Map());
-    const itemWidths = React8__namespace.useRef(/* @__PURE__ */ new Map());
-    const focusRequestedByUser = React8__namespace.useRef(false);
-    React8__namespace.useEffect(() => setFocusedId(activeId), [activeId]);
-    const select = React8__namespace.useCallback(
+    const [focusedId, setFocusedId] = React9__namespace.useState(activeId);
+    const [visibleCount, setVisibleCount] = React9__namespace.useState(items.length);
+    const [menuOpen, setMenuOpen] = React9__namespace.useState(false);
+    const listRef = React9__namespace.useRef(null);
+    const tabRefs = React9__namespace.useRef(/* @__PURE__ */ new Map());
+    const itemWidths = React9__namespace.useRef(/* @__PURE__ */ new Map());
+    const focusRequestedByUser = React9__namespace.useRef(false);
+    React9__namespace.useEffect(() => setFocusedId(activeId), [activeId]);
+    const select = React9__namespace.useCallback(
       (id) => {
         const item = items.find((candidate) => candidate.id === id);
         if (!item || item.disabled || item.isDisabled) return;
@@ -1089,7 +1136,7 @@ var Tabs = React8__namespace.forwardRef(
       },
       [controlled, items, onChange, onUpdate]
     );
-    const measure = React8__namespace.useCallback(() => {
+    const measure = React9__namespace.useCallback(() => {
       const list = listRef.current;
       if (!list || items.length < 2) return;
       const available = list.offsetWidth;
@@ -1113,7 +1160,7 @@ var Tabs = React8__namespace.forwardRef(
       }
       setVisibleCount(Math.max(1, count));
     }, [items.length]);
-    React8__namespace.useLayoutEffect(() => {
+    React9__namespace.useLayoutEffect(() => {
       measure();
       const list = listRef.current;
       if (!list || typeof ResizeObserver === "undefined") return void 0;
@@ -1141,7 +1188,7 @@ var Tabs = React8__namespace.forwardRef(
       if (!nextId) return;
       select(nextId);
     };
-    React8__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       if (focusRequestedByUser.current && visibleItems.some((item) => item.id === focusedId)) {
         focusRequestedByUser.current = false;
         tabRefs.current.get(focusedId)?.focus();
@@ -1263,9 +1310,73 @@ var Tabs = React8__namespace.forwardRef(
   }
 );
 Tabs.displayName = "OODS.Tabs";
+var SegmentedControl = React9__namespace.forwardRef(
+  ({
+    id,
+    label,
+    options,
+    value,
+    defaultValue,
+    name,
+    size = "md",
+    disabled,
+    className,
+    style,
+    onChange,
+    onValueChange,
+    onUpdate,
+    ...rest
+  }, ref) => {
+    const handleChange = (event) => {
+      onChange?.(event);
+      if (event.defaultPrevented) return;
+      onValueChange?.(event.currentTarget.value);
+      onUpdate?.(event.currentTarget.value);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: className ? `oods-field oods-segmented-control ${className}` : "oods-field oods-segmented-control",
+        style,
+        "data-oods-component": "SegmentedControl",
+        "data-size": size,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { id: `${id}-label`, className: "oods-field-label", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref,
+              id,
+              role: "radiogroup",
+              "aria-labelledby": `${id}-label`,
+              className: "oods-segmented-control__track",
+              ...rest,
+              children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "oods-segmented-control__option", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    className: "oods-segmented-control__input",
+                    name: name || id,
+                    value: option.value,
+                    ...value === void 0 ? { defaultChecked: option.value === defaultValue } : { checked: option.value === value },
+                    disabled: disabled || option.disabled,
+                    onChange: handleChange
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-segmented-control__label", children: option.label })
+              ] }, option.value))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SegmentedControl.displayName = "OODS.SegmentedControl";
 var classes6 = (...values) => values.filter(Boolean).join(" ");
 var humanize = (value) => value.split(/[_-]/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join(" ");
-var StatusBadge = React8__namespace.forwardRef(
+var StatusBadge = React9__namespace.forwardRef(
   ({
     status,
     value,
@@ -1321,7 +1432,7 @@ function formatPrice(amount, currency, fallback) {
     return `${currency.toUpperCase()} ${amount.toFixed(2)}`;
   }
 }
-var PriceBadge = React8__namespace.forwardRef(
+var PriceBadge = React9__namespace.forwardRef(
   ({
     amountCents,
     unitAmountCents,
@@ -1396,7 +1507,7 @@ function normalizeTimelineEvents(values) {
     }];
   });
 }
-var TimelinePrimitive = React8__namespace.forwardRef(
+var TimelinePrimitive = React9__namespace.forwardRef(
   ({
     componentId,
     defaultTitle,
@@ -1474,7 +1585,7 @@ var TimelinePrimitive = React8__namespace.forwardRef(
   }
 );
 TimelinePrimitive.displayName = "OODS.TimelinePrimitive";
-var StatusTimeline = React8__namespace.forwardRef(
+var StatusTimeline = React9__namespace.forwardRef(
   (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     TimelinePrimitive,
     {
@@ -1487,7 +1598,7 @@ var StatusTimeline = React8__namespace.forwardRef(
   )
 );
 StatusTimeline.displayName = "OODS.StatusTimeline";
-var AuditTimeline = React8__namespace.forwardRef(
+var AuditTimeline = React9__namespace.forwardRef(
   ({ auditLog, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     TimelinePrimitive,
     {
@@ -1501,7 +1612,7 @@ var AuditTimeline = React8__namespace.forwardRef(
   )
 );
 AuditTimeline.displayName = "OODS.AuditTimeline";
-var CancellationSummary = React8__namespace.forwardRef(
+var CancellationSummary = React9__namespace.forwardRef(
   ({
     label,
     title = label ?? "Cancellation Summary",
@@ -1558,7 +1669,7 @@ var CancellationSummary = React8__namespace.forwardRef(
   }
 );
 CancellationSummary.displayName = "OODS.CancellationSummary";
-var SearchInput = React8__namespace.forwardRef(
+var SearchInput = React9__namespace.forwardRef(
   ({
     id,
     label = "Search",
@@ -1584,13 +1695,13 @@ var SearchInput = React8__namespace.forwardRef(
     onKeyDown,
     ...rest
   }, ref) => {
-    const generatedId = React8__namespace.useId();
+    const generatedId = React9__namespace.useId();
     const resolvedId = id ?? `oods-search-${generatedId.replace(/:/g, "")}`;
-    const [uncontrolledValue, setUncontrolledValue] = React8__namespace.useState(defaultValue);
+    const [uncontrolledValue, setUncontrolledValue] = React9__namespace.useState(defaultValue);
     const currentValue = value ?? uncontrolledValue;
-    const timerRef = React8__namespace.useRef(void 0);
+    const timerRef = React9__namespace.useRef(void 0);
     const delay = Math.max(0, debounceMs ?? debounce ?? 0);
-    React8__namespace.useEffect(() => () => {
+    React9__namespace.useEffect(() => () => {
       if (timerRef.current !== void 0) clearTimeout(timerRef.current);
     }, []);
     const publish = (nextValue) => {
@@ -1674,7 +1785,7 @@ function visiblePages(page, totalPages) {
   }
   return result;
 }
-var PaginationBar = React8__namespace.forwardRef(
+var PaginationBar = React9__namespace.forwardRef(
   ({
     page = 1,
     pageSize = 25,
@@ -1815,7 +1926,7 @@ function relativeLabel(date, now) {
     unit
   );
 }
-var RelativeTimestamp = React8__namespace.forwardRef(
+var RelativeTimestamp = React9__namespace.forwardRef(
   ({
     datetime,
     timestamp,
@@ -1863,8 +1974,8 @@ RelativeTimestamp.displayName = "OODS.RelativeTimestamp";
 var classes7 = (...values) => values.filter(Boolean).join(" ");
 var firstText = (...values) => values.find((value) => typeof value === "string" && value.trim().length > 0);
 function childContent(children) {
-  const flatten = (value) => React8__namespace.Children.toArray(value).flatMap((node) => {
-    if (React8__namespace.isValidElement(node) && node.type === React8__namespace.Fragment) {
+  const flatten = (value) => React9__namespace.Children.toArray(value).flatMap((node) => {
+    if (React9__namespace.isValidElement(node) && node.type === React9__namespace.Fragment) {
       return flatten(node.props.children);
     }
     return [node];
@@ -1885,7 +1996,7 @@ function notEcho(supporting, heading) {
   if (!supporting || !heading) return supporting;
   return supporting.trim() === heading.trim() ? void 0 : supporting;
 }
-var DetailHeader = React8__namespace.forwardRef(
+var DetailHeader = React9__namespace.forwardRef(
   ({ title, label, text, subtitle, sublabel, description, metadata, meta, level, as, children, className, ...rest }, ref) => {
     const Heading = headingElement(as, level, 2);
     const content = childContent(children);
@@ -1900,7 +2011,7 @@ var DetailHeader = React8__namespace.forwardRef(
   }
 );
 DetailHeader.displayName = "OODS.DetailHeader";
-var CardHeader = React8__namespace.forwardRef(
+var CardHeader = React9__namespace.forwardRef(
   ({ title, label, text, supporting, supportingText, subtitle, description, level, as, children, className, ...rest }, ref) => {
     const Heading = headingElement(as, level, 2);
     const content = childContent(children);
@@ -1913,7 +2024,7 @@ var CardHeader = React8__namespace.forwardRef(
   }
 );
 CardHeader.displayName = "OODS.CardHeader";
-var ColorSwatch = React8__namespace.forwardRef(
+var ColorSwatch = React9__namespace.forwardRef(
   ({ color, value, state, label, children, className, style, ...rest }, ref) => {
     const resolvedColor = firstText(color, value, state);
     const content = childContent(children);
@@ -1938,7 +2049,7 @@ var ColorSwatch = React8__namespace.forwardRef(
   }
 );
 ColorSwatch.displayName = "OODS.ColorSwatch";
-var ColorizedBadge = React8__namespace.forwardRef(
+var ColorizedBadge = React9__namespace.forwardRef(
   ({ label, text, state, value, status, color, hue, swatch, variant, tone, emphasis, children, className, style, ...rest }, ref) => {
     const content = childContent(children);
     const resolvedLabel = content.scalar ?? firstText(label, text, state, value) ?? "Color";
@@ -1968,7 +2079,7 @@ var ColorizedBadge = React8__namespace.forwardRef(
   }
 );
 ColorizedBadge.displayName = "OODS.ColorizedBadge";
-var VizAreaPreview = React8__namespace.forwardRef(
+var VizAreaPreview = React9__namespace.forwardRef(
   ({ width = 640, height = 360, svg, svgNarrow, svgWide, svgDark, svgDarkNarrow, svgDarkWide, svgHc, svgHcNarrow, svgHcWide, title, description, children, className, style, ...rest }, ref) => {
     const content = childContent(children);
     if (svg !== void 0) {
@@ -2037,7 +2148,7 @@ var descriptorLabel = (descriptor) => firstText(
   typeof descriptor.field === "string" ? descriptor.field : void 0
 ) ?? "Filter";
 function createPanelSection(component, className, panelType, defaultTitle) {
-  const Panel = React8__namespace.forwardRef(
+  const Panel = React9__namespace.forwardRef(
     ({ title, label, heading, name, subtitle, description, metadata, summary: summary2, text, body, emptyMessage, children, className: consumerClassName, ...rest }, ref) => {
       const content = childContent(children);
       const authored = content.authored || content.scalar !== void 0;
@@ -2070,7 +2181,7 @@ var ClassificationPanel = createPanelSection("ClassificationPanel", "oods-classi
 var AddressCollectionPanel = createPanelSection("AddressCollectionPanel", "oods-address-collection-panel", "address", "Addresses");
 var MembershipPanel = createPanelSection("MembershipPanel", "oods-membership-panel", "membership", "Membership");
 var PreferencePanel = createPanelSection("PreferencePanel", "oods-preference-panel", "preference", "Preferences");
-var FilterPanel = React8__namespace.forwardRef(
+var FilterPanel = React9__namespace.forwardRef(
   ({ filters, activeFilters, mode, collapsible = true, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2104,7 +2215,7 @@ var FilterPanel = React8__namespace.forwardRef(
   }
 );
 FilterPanel.displayName = "OODS.FilterPanel";
-var PriceSummary = React8__namespace.forwardRef(
+var PriceSummary = React9__namespace.forwardRef(
   ({
     title,
     label,
@@ -2177,7 +2288,7 @@ var normalizeTagItems = (value) => {
   }
   return items.filter((item) => item.length > 0);
 };
-var TagManager = React8__namespace.forwardRef(
+var TagManager = React9__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, tags, value, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2223,10 +2334,12 @@ var asCount = (value) => {
   return void 0;
 };
 function createBadgeFamily(options) {
-  const consumed = /* @__PURE__ */ new Set([...options.labelKeys, ...options.statusKeys, "variant", "tone", "emphasis"]);
-  const Family = React8__namespace.forwardRef((allProps, ref) => {
+  const consumed = /* @__PURE__ */ new Set([...options.labelKeys, ...options.statusKeys, "variant", "tone", "emphasis", ...options.booleanProps ? ["hideWhenFalse"] : []]);
+  const Family = React9__namespace.forwardRef((allProps, ref) => {
     const { children, className, ...rest } = allProps;
     const record = rest;
+    const flag = options.booleanProps?.map((key) => record[key]).find((value) => typeof value === "boolean");
+    if (record.hideWhenFalse === true && flag === false) return null;
     const scalar = (key) => {
       const value = record[key];
       if (typeof value === "boolean" && options.booleanProps?.includes(key)) return String(value);
@@ -2284,7 +2397,7 @@ var PreferenceSummaryBadge = createBadgeFamily({
   labelKeys: ["label", "text", "namespace", "value"],
   statusKeys: ["status", "state", "version"]
 });
-var RoleBadgeList = React8__namespace.forwardRef(
+var RoleBadgeList = React9__namespace.forwardRef(
   ({ roles, badges, roleLabels, value, variant, tone, label, text, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2304,7 +2417,7 @@ var RoleBadgeList = React8__namespace.forwardRef(
   }
 );
 RoleBadgeList.displayName = "OODS.RoleBadgeList";
-var TagPills = React8__namespace.forwardRef(
+var TagPills = React9__namespace.forwardRef(
   ({ tags, value, maxVisible, overflowLabel, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2356,7 +2469,7 @@ var normalizeTimelineItems = (raw) => {
 };
 function createTimelineFamily(options) {
   const consumed = /* @__PURE__ */ new Set(["title", "label", "heading", "name", ...options.eventKeys]);
-  const Family = React8__namespace.forwardRef((allProps, ref) => {
+  const Family = React9__namespace.forwardRef((allProps, ref) => {
     const { children, className, ...rest } = allProps;
     const record = rest;
     const text = (key) => {
@@ -2421,7 +2534,7 @@ var PreferenceTimeline = createTimelineFamily({
   timelineType: "preference",
   eventKeys: ["events", "changes", "history"]
 });
-var AuditEvent = React8__namespace.forwardRef(
+var AuditEvent = React9__namespace.forwardRef(
   ({
     label,
     title,
@@ -2507,7 +2620,7 @@ var addressRecord = (form) => {
   };
   return { street: read("street"), city: read("city"), region: read("region"), postalCode: read("postalCode") };
 };
-var AddressEditor = React8__namespace.forwardRef(
+var AddressEditor = React9__namespace.forwardRef(
   ({
     title,
     label,
@@ -2565,8 +2678,8 @@ var AddressEditor = React8__namespace.forwardRef(
   }
 );
 AddressEditor.displayName = "OODS.AddressEditor";
-var PreferenceEditor = React8__namespace.forwardRef(
-  ({ title, label, heading, name, description, subtitle, hint, namespaces, namespace, document, json, value, children, className, onSubmit, ...rest }, ref) => {
+var PreferenceEditor = React9__namespace.forwardRef(
+  ({ title, label, heading, name, description, subtitle, hint, namespaces, namespace, document: document2, json, value, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
     const resolvedTitle = firstText(title, label, heading, name) ?? "Preference Editor";
@@ -2593,7 +2706,7 @@ var PreferenceEditor = React8__namespace.forwardRef(
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-form-control": "textarea", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Preference Document" }),
-              /* @__PURE__ */ jsxRuntime.jsx("textarea", { name: "preferenceDocument", defaultValue: firstScalar(document, json, value) ?? "" })
+              /* @__PURE__ */ jsxRuntime.jsx("textarea", { name: "preferenceDocument", defaultValue: firstScalar(document2, json, value) ?? "" })
             ] })
           ] }) })
         ]
@@ -2602,7 +2715,7 @@ var PreferenceEditor = React8__namespace.forwardRef(
   }
 );
 PreferenceEditor.displayName = "OODS.PreferenceEditor";
-var RoleAssignmentForm = React8__namespace.forwardRef(
+var RoleAssignmentForm = React9__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, roles, availableRoles, role, defaultRoleId, assignee, member, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2639,7 +2752,7 @@ var RoleAssignmentForm = React8__namespace.forwardRef(
   }
 );
 RoleAssignmentForm.displayName = "OODS.RoleAssignmentForm";
-var StatusSelector = React8__namespace.forwardRef(
+var StatusSelector = React9__namespace.forwardRef(
   ({ label, title, help, options, states, value, status, children, className, onChange, onValueChange, onUpdate, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2681,7 +2794,7 @@ var StatusSelector = React8__namespace.forwardRef(
   }
 );
 StatusSelector.displayName = "OODS.StatusSelector";
-var TagInput = React8__namespace.forwardRef(
+var TagInput = React9__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, tags, value, placeholder, children, className, onChange, onValueChange, onUpdate, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2728,7 +2841,7 @@ var TagInput = React8__namespace.forwardRef(
   }
 );
 TagInput.displayName = "OODS.TagInput";
-var TemplatePicker = React8__namespace.forwardRef(
+var TemplatePicker = React9__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, templates, options, templateId, value, channels, channel, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2766,14 +2879,14 @@ var truncateLabel = (value, maxLength) => {
   const limit = typeof maxLength === "number" ? maxLength : Number(maxLength);
   return !Number.isFinite(limit) || limit <= 0 || value.length <= limit ? value : `${value.slice(0, Math.max(0, limit - 1)).trimEnd()}...`;
 };
-var InlineLabel = React8__namespace.forwardRef(
+var InlineLabel = React9__namespace.forwardRef(
   ({ label, text, value, maxLength, children, className, ...rest }, ref) => {
     const content = childContent(children);
     return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: classes7("oods-inline-label", className), "data-oods-component": "InlineLabel", ...rest, children: content.authored || content.scalar !== void 0 ? children : truncateLabel(firstText(label, text, value) ?? "", maxLength) });
   }
 );
 InlineLabel.displayName = "OODS.InlineLabel";
-var LabelCell = React8__namespace.forwardRef(
+var LabelCell = React9__namespace.forwardRef(
   ({ label, text, value, description, subtitle, sublabel, supporting, truncate, maxLength, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const limit = truncate ? maxLength ?? 40 : maxLength;
@@ -2786,7 +2899,7 @@ var LabelCell = React8__namespace.forwardRef(
   }
 );
 LabelCell.displayName = "OODS.LabelCell";
-var FormLabelGroup = React8__namespace.forwardRef(
+var FormLabelGroup = React9__namespace.forwardRef(
   ({ label, text, title, placeholder, hint, description, htmlFor, for: forId, inputId, children, className, ...rest }, ref) => {
     const detail = firstText(placeholder, hint, description);
     return /* @__PURE__ */ jsxRuntime.jsxs("label", { ref, className: classes7("oods-form-label-group", className), "data-oods-component": "FormLabelGroup", htmlFor: htmlFor ?? forId ?? inputId, ...rest, children: [
@@ -2805,7 +2918,7 @@ var ClassificationBadge = createBadgeFamily({
   labelKeys: ["label", "text", "category", "value"],
   statusKeys: ["status", "state", "mode"]
 });
-var ClassificationEditor = React8__namespace.forwardRef(
+var ClassificationEditor = React9__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, category, primaryCategory, tags, modes, mode, classificationMode, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const tagText = typeof tags === "string" ? tags : tags === void 0 ? "" : JSON.stringify(tags);
@@ -2851,7 +2964,7 @@ var OwnerBadge = createBadgeFamily({
   labelKeys: ["label", "text", "owner", "ownerType", "value"],
   statusKeys: ["status", "state"]
 });
-var OwnershipSummary = React8__namespace.forwardRef(
+var OwnershipSummary = React9__namespace.forwardRef(
   ({ title, label, heading, name, ownerLabel, ownerId, owner_id, ownerType, owner_type, role, ownershipRole, summary: summary2, text, description, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const terms = [["Owner", ownerId === void 0 && owner_id === void 0 && ownerLabel === void 0 ? void 0 : componentContracts.formatReferenceLabel(ownerId ?? owner_id, ownerLabel, "Owner")], ["Owner Type", firstScalar(ownerType, owner_type)], ["Role", firstScalar(role, ownershipRole)]].filter((entry) => entry[1] !== void 0);
@@ -2866,7 +2979,7 @@ var OwnershipSummary = React8__namespace.forwardRef(
   }
 );
 OwnershipSummary.displayName = "OODS.OwnershipSummary";
-var TagSummary = React8__namespace.forwardRef(
+var TagSummary = React9__namespace.forwardRef(
   ({ title, label, heading, name, tagCount, count, tags, summary: summary2, text, description, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const tagText = Array.isArray(tags) ? normalizeTagItems(tags).join(", ") || void 0 : firstText(tags);
@@ -2882,11 +2995,12 @@ var TagSummary = React8__namespace.forwardRef(
   }
 );
 TagSummary.displayName = "OODS.TagSummary";
-var OwnershipMeta = React8__namespace.forwardRef(
-  ({ title, label, heading, name, ownerType, owner_type, role, ownershipRole, children, className, ...rest }, ref) => {
+var OwnershipMeta = React9__namespace.forwardRef(
+  ({ title, label, heading, name, ownerType, owner_type, role, ownershipRole, ownerLabel, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const terms = [["Owner Type", firstScalar(ownerType, owner_type)], ["Role", firstScalar(role, ownershipRole)]].filter((entry) => entry[1] !== void 0);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes7("oods-ownership-meta", className), "data-oods-component": "OwnershipMeta", "data-meta-type": "ownership", ...rest, children: content.authored || content.scalar !== void 0 ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    const phrase = ownerLabel !== void 0 ? componentContracts.ownershipPhrase(ownerLabel, firstScalar(ownerType, owner_type), firstScalar(role, ownershipRole)) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes7("oods-ownership-meta", className), "data-oods-component": "OwnershipMeta", "data-meta-type": "ownership", ...rest, children: content.authored || content.scalar !== void 0 ? children : phrase ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-meta-item": "true", children: phrase }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { "data-meta-title": "true", children: firstText(title, label, heading, name) ?? "Ownership" }),
       terms.map(([term, value]) => /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-meta-item": "true", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
@@ -2920,7 +3034,7 @@ var CancellationBadge = createBadgeFamily({
   booleanProps: ["cancelAtPeriodEnd", "isCancelled", "value"],
   booleanLabels: ["Cancellation scheduled", "No cancellation scheduled"]
 });
-var ArchiveSummary = React8__namespace.forwardRef(
+var ArchiveSummary = React9__namespace.forwardRef(
   ({ title, label, heading, name, isArchived, archived, status, archivedAt, reason, archiveReason, summary: summary2, text, description, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const terms = [["Archived", componentContracts.summaryValue(isArchived ?? archived ?? status)], ["Archived At", archivedAt ? componentContracts.formatDateTime(archivedAt) : void 0], ["Reason", firstText(reason, archiveReason)]].filter((entry) => entry[1] !== void 0);
@@ -2935,7 +3049,7 @@ var ArchiveSummary = React8__namespace.forwardRef(
   }
 );
 ArchiveSummary.displayName = "OODS.ArchiveSummary";
-var PriceCardMeta = React8__namespace.forwardRef(
+var PriceCardMeta = React9__namespace.forwardRef(
   ({ title, label, heading, name, model, pricingModel, interval, billingInterval, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const terms = [["Model", componentContracts.formatPriceCode(firstText(model, pricingModel))], ["Interval", componentContracts.formatPriceCode(firstText(interval, billingInterval))]].filter((entry) => entry[1] !== void 0);
@@ -2953,12 +3067,12 @@ var PriceCardMeta = React8__namespace.forwardRef(
   }
 );
 PriceCardMeta.displayName = "OODS.PriceCardMeta";
-var CancellationForm = React8__namespace.forwardRef(
+var CancellationForm = React9__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, allowedReasons, reasonCode, reason, cancellationReason, embedded, reasonHelp, codeHelp, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const choices = normalizeSelectOptions(allowedReasons ?? ["no_longer_needed", "budget", "duplicate"]);
     if (reasonCode && !choices.some((choice) => choice.value === reasonCode)) choices.unshift({ value: reasonCode, label: reasonCode });
-    return React8__namespace.createElement(embedded ? "fieldset" : "form", {
+    return React9__namespace.createElement(embedded ? "fieldset" : "form", {
       ...rest,
       ref,
       className: classes7("oods-cancellation-form", className),
@@ -2990,11 +3104,11 @@ function BillingSummaryBadge({ id, amount, currency, minorUnits, interval, showI
   return /* @__PURE__ */ jsxRuntime.jsx("span", { id, className: `oods-billing-summary ${className ?? ""}`.trim(), "data-oods-component": "BillingSummaryBadge", children: showInterval ? componentContracts.billingSummary(amount, currency, minorUnits, interval) : componentContracts.formatBillingAmount(amount, currency, minorUnits) });
 }
 function BillingAmountInput({ id, amount, currency = "usd", minorUnits = componentContracts.BILLING_MINOR_UNITS, label = "Billing amount", name, disabled, className, help, onChange }) {
-  const generatedId = React8__namespace.useId();
+  const generatedId = React9__namespace.useId();
   const controlId = id ?? `billing-amount-${generatedId}`;
-  const [text, setText] = React8__namespace.useState(() => componentContracts.billingAmountText(amount, minorUnits));
-  const [error, setError] = React8__namespace.useState(() => componentContracts.billingAmountMessage(amount, minorUnits));
-  React8__namespace.useEffect(() => {
+  const [text, setText] = React9__namespace.useState(() => componentContracts.billingAmountText(amount, minorUnits));
+  const [error, setError] = React9__namespace.useState(() => componentContracts.billingAmountMessage(amount, minorUnits));
+  React9__namespace.useEffect(() => {
     setText(componentContracts.billingAmountText(amount, minorUnits));
     setError(componentContracts.billingAmountMessage(amount, minorUnits));
   }, [amount, minorUnits]);
@@ -3028,10 +3142,10 @@ function BillingAmountInput({ id, amount, currency = "usd", minorUnits = compone
   ] });
 }
 function BillingIntervalSelector({ id, interval, intervals = componentContracts.BILLING_INTERVALS, label = "Billing interval", name, disabled, className, help, onChange }) {
-  const generatedId = React8__namespace.useId();
+  const generatedId = React9__namespace.useId();
   const controlId = id ?? `billing-interval-${generatedId}`;
-  const [value, setValue] = React8__namespace.useState(interval ?? "");
-  React8__namespace.useEffect(() => {
+  const [value, setValue] = React9__namespace.useState(interval ?? "");
+  React9__namespace.useEffect(() => {
     setValue(interval ?? "");
   }, [interval]);
   const error = componentContracts.billingIntervalMessage(value || void 0, intervals);
@@ -3139,8 +3253,8 @@ function AuditSummaryCard({ id, title = "Audit summary", showTransitionCount = t
   ] });
 }
 function SortIndicator({ id, label = "Sort", onChange, "data-oods-action": action, ...values }) {
-  const [state, setState] = React8__namespace.useState(() => componentContracts.initialSort(values));
-  React8__namespace.useEffect(() => setState(componentContracts.initialSort(values)), [values.sortField, values.sortDirection, values.sortActive, values.defaultSortField, values.defaultSortDirection]);
+  const [state, setState] = React9__namespace.useState(() => componentContracts.initialSort(values));
+  React9__namespace.useEffect(() => setState(componentContracts.initialSort(values)), [values.sortField, values.sortDirection, values.sortActive, values.defaultSortField, values.defaultSortDirection]);
   const sort = componentContracts.ariaSort(state);
   return /* @__PURE__ */ jsxRuntime.jsx("table", { id, className: "oods-sort-indicator", "data-oods-component": "SortIndicator", "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", "aria-sort": sort, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "data-oods-action": action, "aria-label": `${label} ${state.field}`, onClick: () => {
     const next = componentContracts.nextSort(state, values.triStateSort);
@@ -3148,14 +3262,15 @@ function SortIndicator({ id, label = "Sort", onChange, "data-oods-action": actio
     onChange?.(next);
   }, children: `${state.field}: ${sort}` }) }) }) }) });
 }
-var TimelineEntryLabel = React8__namespace.forwardRef(({ compact = true, maxLength, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(InlineLabel, { ...props, ref, maxLength: maxLength ?? (compact ? 40 : void 0), "data-oods-component": "TimelineEntryLabel", "data-timeline-label": "true", "data-compact": compact }));
+var TimelineEntryLabel = React9__namespace.forwardRef(({ compact = true, maxLength, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(InlineLabel, { ...props, ref, maxLength: maxLength ?? (compact ? 40 : void 0), "data-oods-component": "TimelineEntryLabel", "data-timeline-label": "true", "data-compact": compact }));
 TimelineEntryLabel.displayName = "OODS.TimelineEntryLabel";
 function eventRecipe(id, kind, title) {
   return function TraitEvent({ id: elementId, title: heading = title, ...values }) {
     const rows = componentContracts.traitEventRows(kind, values);
+    if (!rows.length) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("article", { id: elementId, className: "oods-trait-recipe", "data-oods-component": id, "aria-label": heading, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { children: heading }),
-      rows.length ? /* @__PURE__ */ jsxRuntime.jsx("ol", { children: rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("ol", { children: rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("strong", { children: row.title }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { children: row.at ? /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: row.at, children: row.time }) : row.time }),
         row.actor && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
@@ -3170,7 +3285,7 @@ function eventRecipe(id, kind, title) {
           "Code: ",
           row.code
         ] })
-      ] }, index)) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No events recorded." })
+      ] }, index)) })
     ] });
   };
 }
@@ -3191,9 +3306,9 @@ function CommunicationDetailPanel({ id, title = "Communication", channels = [],
   ] });
 }
 function ColorStatePicker({ id, title = "Color state", colorStates = componentContracts.DEFAULT_COLOR_STATES, value, disabled, onChange }) {
-  const generatedId = React8__namespace.useId();
-  const [selected, setSelected] = React8__namespace.useState(value ?? colorStates[0] ?? "");
-  React8__namespace.useEffect(() => setSelected(value ?? colorStates[0] ?? ""), [value, colorStates]);
+  const generatedId = React9__namespace.useId();
+  const [selected, setSelected] = React9__namespace.useState(value ?? colorStates[0] ?? "");
+  React9__namespace.useEffect(() => setSelected(value ?? colorStates[0] ?? ""), [value, colorStates]);
   return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { id, className: "oods-trait-recipe", "data-oods-component": "ColorStatePicker", children: [
     /* @__PURE__ */ jsxRuntime.jsx("legend", { children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(Select, { id: `${id ?? generatedId}-state`, label: "Color state", name: "color_state", value: selected, disabled, options: [...!colorStates.includes(selected) ? [{ value: selected, label: selected || "Choose state", disabled: true }] : [], ...colorStates.map((value2) => ({ value: value2, label: componentContracts.formatReadOnlyValue(value2, "string", true) }))], onValueChange: (next) => {
@@ -3215,9 +3330,9 @@ function StatusColorLegend({ id, title = "Status colors", colorStates = componen
   ] });
 }
 function GeoFieldMappingForm({ id, title = "Geographic fields", embedded = false, disabled, onChange, ...values }) {
-  const generatedId = React8__namespace.useId();
-  const [value, setValue] = React8__namespace.useState(() => componentContracts.geoFieldMapping(values));
-  React8__namespace.useEffect(() => setValue(componentContracts.geoFieldMapping(values)), [values.latitude, values.longitude, values.identifier, values.autoDetect]);
+  const generatedId = React9__namespace.useId();
+  const [value, setValue] = React9__namespace.useState(() => componentContracts.geoFieldMapping(values));
+  React9__namespace.useEffect(() => setValue(componentContracts.geoFieldMapping(values)), [values.latitude, values.longitude, values.identifier, values.autoDetect]);
   const update = (patch) => {
     const next = { ...value, ...patch };
     setValue(next);
@@ -3251,11 +3366,11 @@ function GeocodablePreview({ id, title = "Geographic data", resolution, requires
 }
 function controls(id) {
   const Component = ({ id: htmlId, title = componentContracts.VIZ_CONTROL_TITLES[id], value, channel = "x", disabled, onChange }) => {
-    const generatedId = React8__namespace.useId();
-    const [current, setCurrent] = React8__namespace.useState(value ?? {});
-    const [drafts, setDrafts] = React8__namespace.useState({});
-    const [errors, setErrors] = React8__namespace.useState({});
-    React8__namespace.useEffect(() => {
+    const generatedId = React9__namespace.useId();
+    const [current, setCurrent] = React9__namespace.useState(value ?? {});
+    const [drafts, setDrafts] = React9__namespace.useState({});
+    const [errors, setErrors] = React9__namespace.useState({});
+    React9__namespace.useEffect(() => {
       setCurrent(value ?? {});
       setDrafts({});
       setErrors({});
@@ -3329,6 +3444,215 @@ var VizLinePreview = preview("VizLinePreview", "line");
 var VizMarkPreview = preview("VizMarkPreview", "bar");
 var VizPointPreview = preview("VizPointPreview", "scatter");
 var VizScatterPreview = preview("VizScatterPreview", "scatter");
+var classes8 = (...values) => values.filter(Boolean).join(" ");
+var Combobox = React9__namespace.forwardRef(
+  ({
+    id,
+    label,
+    options = [],
+    value,
+    defaultValue = "",
+    placeholder,
+    name,
+    required,
+    disabled,
+    help,
+    validation,
+    size = "md",
+    className,
+    style,
+    onValueChange,
+    onUpdate,
+    onKeyDown,
+    onBlur,
+    onClick,
+    "aria-describedby": nativeDescription,
+    ...rest
+  }, ref) => {
+    const [internalValue, setInternalValue] = React9__namespace.useState(defaultValue);
+    const [query, setQuery] = React9__namespace.useState(null);
+    const [open, setOpen] = React9__namespace.useState(false);
+    const [active, setActive] = React9__namespace.useState(-1);
+    const rootRef = React9__namespace.useRef(null);
+    const listboxRef = React9__namespace.useRef(null);
+    const chosenValue = value ?? internalValue;
+    const chosen = options.find((option) => option.value === chosenValue);
+    const text = query ?? chosen?.label ?? "";
+    const needle = (query ?? "").trim().toLowerCase();
+    const matches = options.map((option) => needle === "" || option.label.toLowerCase().includes(needle));
+    const matchCount = matches.filter(Boolean).length;
+    const reachable = options.flatMap((option, index) => matches[index] && !option.disabled ? [index] : []);
+    const optionId = (index) => `${id}-option-${index}`;
+    const validationId = validation?.id ?? `${id}-validation`;
+    const describedBy = [nativeDescription, help ? `${id}-help` : void 0, validation?.message ? validationId : void 0].filter(Boolean).join(" ") || void 0;
+    const tone = validation ? validation.state === "error" ? "critical" : validation.state : void 0;
+    const close = () => {
+      setOpen(false);
+      setActive(-1);
+    };
+    const emit = (next) => {
+      if (value === void 0) setInternalValue(next);
+      onValueChange?.(next);
+      onUpdate?.(next);
+    };
+    const pick = (index) => {
+      const option = options[index];
+      if (!option || option.disabled) return;
+      setQuery(null);
+      close();
+      if (option.value !== chosenValue) emit(option.value);
+    };
+    React9__namespace.useEffect(() => {
+      if (!open) return void 0;
+      const outside = (event) => {
+        if (!rootRef.current?.contains(event.target)) close();
+      };
+      document.addEventListener("pointerdown", outside);
+      return () => document.removeEventListener("pointerdown", outside);
+    }, [open]);
+    React9__namespace.useEffect(() => {
+      if (!open || active < 0) return;
+      const element = listboxRef.current?.children[active];
+      element?.scrollIntoView?.({ block: "nearest" });
+    }, [open, active]);
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || disabled || event.nativeEvent.isComposing) return;
+      const first = reachable[0] ?? -1;
+      const last = reachable[reachable.length - 1] ?? -1;
+      const at = reachable.indexOf(active);
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          setOpen(true);
+          setActive(!open || at === -1 ? first : reachable[(at + 1) % reachable.length]);
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          setOpen(true);
+          setActive(!open || at <= 0 ? last : reachable[at - 1]);
+          return;
+        case "Home":
+        case "End":
+          if (!open) return;
+          event.preventDefault();
+          setActive(event.key === "Home" ? first : last);
+          return;
+        case "Enter":
+          if (!open) return;
+          event.preventDefault();
+          if (active >= 0) pick(active);
+          return;
+        case "Escape":
+          if (open) {
+            event.preventDefault();
+            close();
+            return;
+          }
+          if (text === "" && chosenValue === "") return;
+          event.preventDefault();
+          setQuery(null);
+          if (chosenValue !== "") emit("");
+          return;
+        case "Tab":
+          if (open) close();
+          return;
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: classes8("oods-field", "oods-combobox", className),
+        style: {
+          ...tone ? {
+            "--cmp-input-message-border": `var(--sys-status-${tone}-border)`,
+            "--cmp-input-message-text": `var(--sys-status-${tone}-text)`
+          } : {},
+          ...style
+        },
+        "data-oods-component": "Combobox",
+        "data-size": size,
+        "data-validation-state": validation?.state,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { id: `${id}-label`, className: "oods-field-label", htmlFor: id, children: [
+            label,
+            required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-field-required", "aria-hidden": "true", children: "*" }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-combobox__control", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ...rest,
+                ref,
+                id,
+                type: "text",
+                role: "combobox",
+                className: "oods-field-control oods-combobox__input",
+                value: text,
+                placeholder,
+                autoComplete: "off",
+                "aria-autocomplete": "list",
+                "aria-expanded": open,
+                "aria-controls": `${id}-listbox`,
+                "aria-activedescendant": open && active >= 0 ? optionId(active) : void 0,
+                "aria-describedby": describedBy,
+                "aria-invalid": validation?.state === "error" || void 0,
+                required,
+                disabled,
+                onChange: (event) => {
+                  setQuery(event.currentTarget.value);
+                  setOpen(true);
+                  setActive(-1);
+                },
+                onKeyDown: handleKeyDown,
+                onClick: (event) => {
+                  onClick?.(event);
+                  if (!event.defaultPrevented && !disabled) setOpen(true);
+                },
+                onBlur: (event) => {
+                  onBlur?.(event);
+                  setQuery(null);
+                  close();
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-combobox__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: "chevron-down" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-combobox__popup", hidden: !open, onMouseDown: (event) => event.preventDefault(), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { ref: listboxRef, id: `${id}-listbox`, className: "oods-combobox__listbox", role: "listbox", "aria-labelledby": `${id}-label`, children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "li",
+                {
+                  id: optionId(index),
+                  className: "oods-combobox__option",
+                  role: "option",
+                  "aria-selected": option.value === chosenValue,
+                  "aria-disabled": option.disabled || void 0,
+                  "data-value": option.value,
+                  "data-active": index === active ? "true" : void 0,
+                  hidden: !matches[index],
+                  onClick: () => pick(index),
+                  onPointerMove: () => {
+                    if (!option.disabled && index !== active) setActive(index);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-combobox__option-label", children: option.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-combobox__check", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: "check" }) })
+                  ]
+                },
+                option.value
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-combobox__empty", role: "status", children: open && matchCount === 0 ? "No matches" : "" })
+            ] })
+          ] }),
+          name ? /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: chosenValue }) : null,
+          help ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${id}-help`, className: "oods-field-help", children: help }) : null,
+          validation?.message ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: validationId, className: "oods-field-error", role: validation.state === "error" ? "alert" : void 0, children: validation.message }) : null
+        ]
+      }
+    );
+  }
+);
+Combobox.displayName = "OODS.Combobox";
 
 exports.AddressCollectionPanel = AddressCollectionPanel;
 exports.AddressEditor = AddressEditor;
@@ -3361,6 +3685,7 @@ exports.ClassificationPanel = ClassificationPanel;
 exports.ColorStatePicker = ColorStatePicker;
 exports.ColorSwatch = ColorSwatch;
 exports.ColorizedBadge = ColorizedBadge;
+exports.Combobox = Combobox;
 exports.CommunicationDetailPanel = CommunicationDetailPanel;
 exports.CycleProgressCard = CycleProgressCard;
 exports.DatePicker = DatePicker;
@@ -3396,6 +3721,7 @@ exports.RelativeTimestamp = RelativeTimestamp;
 exports.RoleAssignmentForm = RoleAssignmentForm;
 exports.RoleBadgeList = RoleBadgeList;
 exports.SearchInput = SearchInput;
+exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.SortIndicator = SortIndicator;
 exports.Stack = Stack;