@oods/components-react 0.3.3 → 0.4.1

package/dist/index.js

@@ -1,10 +1,10 @@
-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 { Badge, StatusIcon, Select, Input, Checkbox, Text } from './chunk-NLWXBLPA.js';
+export { AuditTimeline, Badge, Banner, Button, CancellationSummary, Card, Checkbox, DatePicker, Dialog, Input, PaginationBar, PriceBadge, RelativeTimestamp, SearchInput, Select, StatusBadge, StatusTimeline, Switch, Text, Textarea } from './chunk-NLWXBLPA.js';
+export { Table } from './chunk-XEX22E24.js';
+import './chunk-2VEQWKGK.js';
+import * as React4 from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { svgCarriesTitle, assertStaticSvg, formatPriceAmount, formatPriceCode, formatReferenceLabel, summaryValue, formatDateTime, formatReadOnlyValue, billingSummary, formatBillingAmount, billingAmountText, BILLING_MINOR_UNITS, billingAmountMessage, parseBillingAmount, billingIntervalMessage, BILLING_INTERVALS, billingCycle, auditSummary, initialSort, ariaSort, nextSort, traitEventRows, recipeItemLabels, DEFAULT_COLOR_STATES, geoFieldMapping, vizSummaryRows, vizControlFields, VIZ_CONTROL_TITLES, vizFieldValue, billingPaymentSummary, billingPaymentRows, editVizIntent } from '@oods/component-contracts';
+import { vizPreviewLayers, svgCarriesTitle, formatPriceAmount, formatPriceCode, formatReferenceLabel, ownershipPhrase, summaryValue, formatDateTime, formatReadOnlyValue, billingSummary, formatBillingAmount, billingAmountText, BILLING_MINOR_UNITS, billingAmountMessage, parseBillingAmount, billingIntervalMessage, BILLING_INTERVALS, billingCycle, auditSummary, initialSort, ariaSort, nextSort, traitEventRows, recipeItemLabels, DEFAULT_COLOR_STATES, geoFieldMapping, vizSummaryRows, vizControlFields, VIZ_CONTROL_TITLES, vizFieldValue, billingPaymentSummary, billingPaymentRows, editVizIntent } from '@oods/component-contracts';
 
 var classes = (...values) => values.filter(Boolean).join(" ");
 var GAP_VALUES = {
@@ -19,7 +19,7 @@ var maxColumns = (columns) => {
   const count = Number(columns);
   return Number.isFinite(count) && count > 0 ? count : void 0;
 };
-var Grid = React3.forwardRef(
+var Grid = React4.forwardRef(
   ({
     columns = "auto-fit",
     minColumnWidth = "16rem",
@@ -49,7 +49,7 @@ var Grid = React3.forwardRef(
   )
 );
 Grid.displayName = "OODS.Grid";
-var Stack = React3.forwardRef(
+var Stack = React4.forwardRef(
   ({
     direction = "column",
     gap = "md",
@@ -95,7 +95,7 @@ var partitionForOverflow = (items, visibleCount, selectedId) => {
     overflowItems: items.filter((item) => !visibleIds.has(item.id))
   };
 };
-var Tabs = React3.forwardRef(
+var Tabs = React4.forwardRef(
   ({
     items,
     selectedId,
@@ -109,22 +109,22 @@ var Tabs = React3.forwardRef(
     "aria-label": ariaLabelAttribute,
     ...rest
   }, ref) => {
-    const instanceId = React3.useId().replaceAll(":", "");
+    const instanceId = React4.useId().replaceAll(":", "");
     const controlled = selectedId !== void 0;
     const firstEnabled = items.find((item) => !item.disabled && !item.isDisabled)?.id ?? "";
-    const [internalSelectedId, setInternalSelectedId] = React3.useState(
+    const [internalSelectedId, setInternalSelectedId] = React4.useState(
       defaultSelectedId ?? firstEnabled
     );
     const activeId = controlled ? selectedId : internalSelectedId;
-    const [focusedId, setFocusedId] = React3.useState(activeId);
-    const [visibleCount, setVisibleCount] = React3.useState(items.length);
-    const [menuOpen, setMenuOpen] = React3.useState(false);
-    const listRef = React3.useRef(null);
-    const tabRefs = React3.useRef(/* @__PURE__ */ new Map());
-    const itemWidths = React3.useRef(/* @__PURE__ */ new Map());
-    const focusRequestedByUser = React3.useRef(false);
-    React3.useEffect(() => setFocusedId(activeId), [activeId]);
-    const select = React3.useCallback(
+    const [focusedId, setFocusedId] = React4.useState(activeId);
+    const [visibleCount, setVisibleCount] = React4.useState(items.length);
+    const [menuOpen, setMenuOpen] = React4.useState(false);
+    const listRef = React4.useRef(null);
+    const tabRefs = React4.useRef(/* @__PURE__ */ new Map());
+    const itemWidths = React4.useRef(/* @__PURE__ */ new Map());
+    const focusRequestedByUser = React4.useRef(false);
+    React4.useEffect(() => setFocusedId(activeId), [activeId]);
+    const select = React4.useCallback(
       (id) => {
         const item = items.find((candidate) => candidate.id === id);
         if (!item || item.disabled || item.isDisabled) return;
@@ -136,7 +136,7 @@ var Tabs = React3.forwardRef(
       },
       [controlled, items, onChange, onUpdate]
     );
-    const measure = React3.useCallback(() => {
+    const measure = React4.useCallback(() => {
       const list = listRef.current;
       if (!list || items.length < 2) return;
       const available = list.offsetWidth;
@@ -160,7 +160,7 @@ var Tabs = React3.forwardRef(
       }
       setVisibleCount(Math.max(1, count));
     }, [items.length]);
-    React3.useLayoutEffect(() => {
+    React4.useLayoutEffect(() => {
       measure();
       const list = listRef.current;
       if (!list || typeof ResizeObserver === "undefined") return void 0;
@@ -188,7 +188,7 @@ var Tabs = React3.forwardRef(
       if (!nextId) return;
       select(nextId);
     };
-    React3.useEffect(() => {
+    React4.useEffect(() => {
       if (focusRequestedByUser.current && visibleItems.some((item) => item.id === focusedId)) {
         focusRequestedByUser.current = false;
         tabRefs.current.get(focusedId)?.focus();
@@ -310,11 +310,75 @@ var Tabs = React3.forwardRef(
   }
 );
 Tabs.displayName = "OODS.Tabs";
+var SegmentedControl = React4.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__ */ 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__ */ jsx("span", { id: `${id}-label`, className: "oods-field-label", children: label }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref,
+              id,
+              role: "radiogroup",
+              "aria-labelledby": `${id}-label`,
+              className: "oods-segmented-control__track",
+              ...rest,
+              children: options.map((option) => /* @__PURE__ */ jsxs("label", { className: "oods-segmented-control__option", children: [
+                /* @__PURE__ */ 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__ */ jsx("span", { className: "oods-segmented-control__label", children: option.label })
+              ] }, option.value))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SegmentedControl.displayName = "OODS.SegmentedControl";
 var classes3 = (...values) => values.filter(Boolean).join(" ");
 var firstText = (...values) => values.find((value) => typeof value === "string" && value.trim().length > 0);
 function childContent(children) {
-  const flatten = (value) => React3.Children.toArray(value).flatMap((node) => {
-    if (React3.isValidElement(node) && node.type === React3.Fragment) {
+  const flatten = (value) => React4.Children.toArray(value).flatMap((node) => {
+    if (React4.isValidElement(node) && node.type === React4.Fragment) {
       return flatten(node.props.children);
     }
     return [node];
@@ -335,7 +399,7 @@ function notEcho(supporting, heading) {
   if (!supporting || !heading) return supporting;
   return supporting.trim() === heading.trim() ? void 0 : supporting;
 }
-var DetailHeader = React3.forwardRef(
+var DetailHeader = React4.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);
@@ -350,7 +414,7 @@ var DetailHeader = React3.forwardRef(
   }
 );
 DetailHeader.displayName = "OODS.DetailHeader";
-var CardHeader = React3.forwardRef(
+var CardHeader = React4.forwardRef(
   ({ title, label, text, supporting, supportingText, subtitle, description, level, as, children, className, ...rest }, ref) => {
     const Heading = headingElement(as, level, 2);
     const content = childContent(children);
@@ -363,7 +427,7 @@ var CardHeader = React3.forwardRef(
   }
 );
 CardHeader.displayName = "OODS.CardHeader";
-var ColorSwatch = React3.forwardRef(
+var ColorSwatch = React4.forwardRef(
   ({ color, value, state, label, children, className, style, ...rest }, ref) => {
     const resolvedColor = firstText(color, value, state);
     const content = childContent(children);
@@ -388,7 +452,7 @@ var ColorSwatch = React3.forwardRef(
   }
 );
 ColorSwatch.displayName = "OODS.ColorSwatch";
-var ColorizedBadge = React3.forwardRef(
+var ColorizedBadge = React4.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";
@@ -418,10 +482,12 @@ var ColorizedBadge = React3.forwardRef(
   }
 );
 ColorizedBadge.displayName = "OODS.ColorizedBadge";
-var VizAreaPreview = React3.forwardRef(
-  ({ width = 640, height = 360, svg, svgNarrow, svgWide, title, description, children, className, style, ...rest }, ref) => {
+var VizAreaPreview = React4.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) {
+      const layers = vizPreviewLayers({ svg, svgNarrow, svgWide, svgDark, svgDarkNarrow, svgDarkWide, svgHc, svgHcNarrow, svgHcWide });
+      const renders = (layer) => layer.renders.map(([attribute, markup]) => /* @__PURE__ */ jsx("div", { ...{ [attribute]: "true" }, dangerouslySetInnerHTML: { __html: markup } }, attribute));
       return /* @__PURE__ */ jsxs(
         "figure",
         {
@@ -440,9 +506,7 @@ var VizAreaPreview = React3.forwardRef(
           ...rest,
           children: [
             title && !svgCarriesTitle(svg, title) ? /* @__PURE__ */ jsx("figcaption", { children: title }) : null,
-            /* @__PURE__ */ jsx("div", { "data-viz-svg": "true", dangerouslySetInnerHTML: { __html: assertStaticSvg(svg) } }),
-            svgNarrow !== void 0 ? /* @__PURE__ */ jsx("div", { "data-viz-svg-narrow": "true", dangerouslySetInnerHTML: { __html: assertStaticSvg(svgNarrow) } }) : null,
-            svgWide !== void 0 ? /* @__PURE__ */ jsx("div", { "data-viz-svg-wide": "true", dangerouslySetInnerHTML: { __html: assertStaticSvg(svgWide) } }) : null,
+            layers.map((layer) => layer.theme === void 0 ? renders(layer) : /* @__PURE__ */ jsx("div", { "data-viz-theme": layer.theme, "data-viz-narrow": layer.narrow ? "true" : void 0, "data-viz-wide": layer.wide ? "true" : void 0, children: renders(layer) }, layer.theme)),
             description ? /* @__PURE__ */ jsx("p", { "data-viz-description": "true", children: description }) : null
           ]
         }
@@ -487,7 +551,7 @@ var descriptorLabel = (descriptor) => firstText(
   typeof descriptor.field === "string" ? descriptor.field : void 0
 ) ?? "Filter";
 function createPanelSection(component, className, panelType, defaultTitle) {
-  const Panel = React3.forwardRef(
+  const Panel = React4.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;
@@ -520,7 +584,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 = React3.forwardRef(
+var FilterPanel = React4.forwardRef(
   ({ filters, activeFilters, mode, collapsible = true, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -554,7 +618,7 @@ var FilterPanel = React3.forwardRef(
   }
 );
 FilterPanel.displayName = "OODS.FilterPanel";
-var PriceSummary = React3.forwardRef(
+var PriceSummary = React4.forwardRef(
   ({
     title,
     label,
@@ -627,7 +691,7 @@ var normalizeTagItems = (value) => {
   }
   return items.filter((item) => item.length > 0);
 };
-var TagManager = React3.forwardRef(
+var TagManager = React4.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;
@@ -673,10 +737,12 @@ var asCount = (value) => {
   return void 0;
 };
 function createBadgeFamily(options) {
-  const consumed = /* @__PURE__ */ new Set([...options.labelKeys, ...options.statusKeys, "variant", "tone", "emphasis"]);
-  const Family = React3.forwardRef((allProps, ref) => {
+  const consumed = /* @__PURE__ */ new Set([...options.labelKeys, ...options.statusKeys, "variant", "tone", "emphasis", ...options.booleanProps ? ["hideWhenFalse"] : []]);
+  const Family = React4.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);
@@ -734,7 +800,7 @@ var PreferenceSummaryBadge = createBadgeFamily({
   labelKeys: ["label", "text", "namespace", "value"],
   statusKeys: ["status", "state", "version"]
 });
-var RoleBadgeList = React3.forwardRef(
+var RoleBadgeList = React4.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;
@@ -754,7 +820,7 @@ var RoleBadgeList = React3.forwardRef(
   }
 );
 RoleBadgeList.displayName = "OODS.RoleBadgeList";
-var TagPills = React3.forwardRef(
+var TagPills = React4.forwardRef(
   ({ tags, value, maxVisible, overflowLabel, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -806,7 +872,7 @@ var normalizeTimelineItems = (raw) => {
 };
 function createTimelineFamily(options) {
   const consumed = /* @__PURE__ */ new Set(["title", "label", "heading", "name", ...options.eventKeys]);
-  const Family = React3.forwardRef((allProps, ref) => {
+  const Family = React4.forwardRef((allProps, ref) => {
     const { children, className, ...rest } = allProps;
     const record = rest;
     const text = (key) => {
@@ -871,7 +937,7 @@ var PreferenceTimeline = createTimelineFamily({
   timelineType: "preference",
   eventKeys: ["events", "changes", "history"]
 });
-var AuditEvent = React3.forwardRef(
+var AuditEvent = React4.forwardRef(
   ({
     label,
     title,
@@ -957,7 +1023,7 @@ var addressRecord = (form) => {
   };
   return { street: read("street"), city: read("city"), region: read("region"), postalCode: read("postalCode") };
 };
-var AddressEditor = React3.forwardRef(
+var AddressEditor = React4.forwardRef(
   ({
     title,
     label,
@@ -1015,8 +1081,8 @@ var AddressEditor = React3.forwardRef(
   }
 );
 AddressEditor.displayName = "OODS.AddressEditor";
-var PreferenceEditor = React3.forwardRef(
-  ({ title, label, heading, name, description, subtitle, hint, namespaces, namespace, document, json, value, children, className, onSubmit, ...rest }, ref) => {
+var PreferenceEditor = React4.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";
@@ -1043,7 +1109,7 @@ var PreferenceEditor = React3.forwardRef(
             ] }),
             /* @__PURE__ */ jsxs("label", { "data-form-control": "textarea", children: [
               /* @__PURE__ */ jsx("span", { children: "Preference Document" }),
-              /* @__PURE__ */ jsx("textarea", { name: "preferenceDocument", defaultValue: firstScalar(document, json, value) ?? "" })
+              /* @__PURE__ */ jsx("textarea", { name: "preferenceDocument", defaultValue: firstScalar(document2, json, value) ?? "" })
             ] })
           ] }) })
         ]
@@ -1052,7 +1118,7 @@ var PreferenceEditor = React3.forwardRef(
   }
 );
 PreferenceEditor.displayName = "OODS.PreferenceEditor";
-var RoleAssignmentForm = React3.forwardRef(
+var RoleAssignmentForm = React4.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;
@@ -1089,7 +1155,7 @@ var RoleAssignmentForm = React3.forwardRef(
   }
 );
 RoleAssignmentForm.displayName = "OODS.RoleAssignmentForm";
-var StatusSelector = React3.forwardRef(
+var StatusSelector = React4.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;
@@ -1131,7 +1197,7 @@ var StatusSelector = React3.forwardRef(
   }
 );
 StatusSelector.displayName = "OODS.StatusSelector";
-var TagInput = React3.forwardRef(
+var TagInput = React4.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;
@@ -1178,7 +1244,7 @@ var TagInput = React3.forwardRef(
   }
 );
 TagInput.displayName = "OODS.TagInput";
-var TemplatePicker = React3.forwardRef(
+var TemplatePicker = React4.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;
@@ -1216,14 +1282,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 = React3.forwardRef(
+var InlineLabel = React4.forwardRef(
   ({ label, text, value, maxLength, children, className, ...rest }, ref) => {
     const content = childContent(children);
     return /* @__PURE__ */ jsx("span", { ref, className: classes3("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 = React3.forwardRef(
+var LabelCell = React4.forwardRef(
   ({ label, text, value, description, subtitle, sublabel, supporting, truncate, maxLength, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const limit = truncate ? maxLength ?? 40 : maxLength;
@@ -1236,7 +1302,7 @@ var LabelCell = React3.forwardRef(
   }
 );
 LabelCell.displayName = "OODS.LabelCell";
-var FormLabelGroup = React3.forwardRef(
+var FormLabelGroup = React4.forwardRef(
   ({ label, text, title, placeholder, hint, description, htmlFor, for: forId, inputId, children, className, ...rest }, ref) => {
     const detail = firstText(placeholder, hint, description);
     return /* @__PURE__ */ jsxs("label", { ref, className: classes3("oods-form-label-group", className), "data-oods-component": "FormLabelGroup", htmlFor: htmlFor ?? forId ?? inputId, ...rest, children: [
@@ -1255,7 +1321,7 @@ var ClassificationBadge = createBadgeFamily({
   labelKeys: ["label", "text", "category", "value"],
   statusKeys: ["status", "state", "mode"]
 });
-var ClassificationEditor = React3.forwardRef(
+var ClassificationEditor = React4.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);
@@ -1301,7 +1367,7 @@ var OwnerBadge = createBadgeFamily({
   labelKeys: ["label", "text", "owner", "ownerType", "value"],
   statusKeys: ["status", "state"]
 });
-var OwnershipSummary = React3.forwardRef(
+var OwnershipSummary = React4.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 : formatReferenceLabel(ownerId ?? owner_id, ownerLabel, "Owner")], ["Owner Type", firstScalar(ownerType, owner_type)], ["Role", firstScalar(role, ownershipRole)]].filter((entry) => entry[1] !== void 0);
@@ -1316,7 +1382,7 @@ var OwnershipSummary = React3.forwardRef(
   }
 );
 OwnershipSummary.displayName = "OODS.OwnershipSummary";
-var TagSummary = React3.forwardRef(
+var TagSummary = React4.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);
@@ -1332,11 +1398,12 @@ var TagSummary = React3.forwardRef(
   }
 );
 TagSummary.displayName = "OODS.TagSummary";
-var OwnershipMeta = React3.forwardRef(
-  ({ title, label, heading, name, ownerType, owner_type, role, ownershipRole, children, className, ...rest }, ref) => {
+var OwnershipMeta = React4.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__ */ jsx("div", { ref, className: classes3("oods-ownership-meta", className), "data-oods-component": "OwnershipMeta", "data-meta-type": "ownership", ...rest, children: content.authored || content.scalar !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+    const phrase = ownerLabel !== void 0 ? ownershipPhrase(ownerLabel, firstScalar(ownerType, owner_type), firstScalar(role, ownershipRole)) : void 0;
+    return /* @__PURE__ */ jsx("div", { ref, className: classes3("oods-ownership-meta", className), "data-oods-component": "OwnershipMeta", "data-meta-type": "ownership", ...rest, children: content.authored || content.scalar !== void 0 ? children : phrase ? /* @__PURE__ */ jsx("span", { "data-meta-item": "true", children: phrase }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { "data-meta-title": "true", children: firstText(title, label, heading, name) ?? "Ownership" }),
       terms.map(([term, value]) => /* @__PURE__ */ jsxs("span", { "data-meta-item": "true", children: [
         /* @__PURE__ */ jsxs("strong", { children: [
@@ -1370,7 +1437,7 @@ var CancellationBadge = createBadgeFamily({
   booleanProps: ["cancelAtPeriodEnd", "isCancelled", "value"],
   booleanLabels: ["Cancellation scheduled", "No cancellation scheduled"]
 });
-var ArchiveSummary = React3.forwardRef(
+var ArchiveSummary = React4.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", summaryValue(isArchived ?? archived ?? status)], ["Archived At", archivedAt ? formatDateTime(archivedAt) : void 0], ["Reason", firstText(reason, archiveReason)]].filter((entry) => entry[1] !== void 0);
@@ -1385,7 +1452,7 @@ var ArchiveSummary = React3.forwardRef(
   }
 );
 ArchiveSummary.displayName = "OODS.ArchiveSummary";
-var PriceCardMeta = React3.forwardRef(
+var PriceCardMeta = React4.forwardRef(
   ({ title, label, heading, name, model, pricingModel, interval, billingInterval, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const terms = [["Model", formatPriceCode(firstText(model, pricingModel))], ["Interval", formatPriceCode(firstText(interval, billingInterval))]].filter((entry) => entry[1] !== void 0);
@@ -1403,12 +1470,12 @@ var PriceCardMeta = React3.forwardRef(
   }
 );
 PriceCardMeta.displayName = "OODS.PriceCardMeta";
-var CancellationForm = React3.forwardRef(
+var CancellationForm = React4.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 React3.createElement(embedded ? "fieldset" : "form", {
+    return React4.createElement(embedded ? "fieldset" : "form", {
       ...rest,
       ref,
       className: classes3("oods-cancellation-form", className),
@@ -1440,11 +1507,11 @@ function BillingSummaryBadge({ id, amount, currency, minorUnits, interval, showI
   return /* @__PURE__ */ jsx("span", { id, className: `oods-billing-summary ${className ?? ""}`.trim(), "data-oods-component": "BillingSummaryBadge", children: showInterval ? billingSummary(amount, currency, minorUnits, interval) : formatBillingAmount(amount, currency, minorUnits) });
 }
 function BillingAmountInput({ id, amount, currency = "usd", minorUnits = BILLING_MINOR_UNITS, label = "Billing amount", name, disabled, className, help, onChange }) {
-  const generatedId = React3.useId();
+  const generatedId = React4.useId();
   const controlId = id ?? `billing-amount-${generatedId}`;
-  const [text, setText] = React3.useState(() => billingAmountText(amount, minorUnits));
-  const [error, setError] = React3.useState(() => billingAmountMessage(amount, minorUnits));
-  React3.useEffect(() => {
+  const [text, setText] = React4.useState(() => billingAmountText(amount, minorUnits));
+  const [error, setError] = React4.useState(() => billingAmountMessage(amount, minorUnits));
+  React4.useEffect(() => {
     setText(billingAmountText(amount, minorUnits));
     setError(billingAmountMessage(amount, minorUnits));
   }, [amount, minorUnits]);
@@ -1478,10 +1545,10 @@ function BillingAmountInput({ id, amount, currency = "usd", minorUnits = BILLING
   ] });
 }
 function BillingIntervalSelector({ id, interval, intervals = BILLING_INTERVALS, label = "Billing interval", name, disabled, className, help, onChange }) {
-  const generatedId = React3.useId();
+  const generatedId = React4.useId();
   const controlId = id ?? `billing-interval-${generatedId}`;
-  const [value, setValue] = React3.useState(interval ?? "");
-  React3.useEffect(() => {
+  const [value, setValue] = React4.useState(interval ?? "");
+  React4.useEffect(() => {
     setValue(interval ?? "");
   }, [interval]);
   const error = billingIntervalMessage(value || void 0, intervals);
@@ -1589,8 +1656,8 @@ function AuditSummaryCard({ id, title = "Audit summary", showTransitionCount = t
   ] });
 }
 function SortIndicator({ id, label = "Sort", onChange, "data-oods-action": action, ...values }) {
-  const [state, setState] = React3.useState(() => initialSort(values));
-  React3.useEffect(() => setState(initialSort(values)), [values.sortField, values.sortDirection, values.sortActive, values.defaultSortField, values.defaultSortDirection]);
+  const [state, setState] = React4.useState(() => initialSort(values));
+  React4.useEffect(() => setState(initialSort(values)), [values.sortField, values.sortDirection, values.sortActive, values.defaultSortField, values.defaultSortDirection]);
   const sort = ariaSort(state);
   return /* @__PURE__ */ jsx("table", { id, className: "oods-sort-indicator", "data-oods-component": "SortIndicator", "aria-label": label, children: /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", { scope: "col", "aria-sort": sort, children: /* @__PURE__ */ jsx("button", { type: "button", "data-oods-action": action, "aria-label": `${label} ${state.field}`, onClick: () => {
     const next = nextSort(state, values.triStateSort);
@@ -1598,14 +1665,15 @@ function SortIndicator({ id, label = "Sort", onChange, "data-oods-action": actio
     onChange?.(next);
   }, children: `${state.field}: ${sort}` }) }) }) }) });
 }
-var TimelineEntryLabel = React3.forwardRef(({ compact = true, maxLength, ...props }, ref) => /* @__PURE__ */ jsx(InlineLabel, { ...props, ref, maxLength: maxLength ?? (compact ? 40 : void 0), "data-oods-component": "TimelineEntryLabel", "data-timeline-label": "true", "data-compact": compact }));
+var TimelineEntryLabel = React4.forwardRef(({ compact = true, maxLength, ...props }, ref) => /* @__PURE__ */ 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 = traitEventRows(kind, values);
+    if (!rows.length) return null;
     return /* @__PURE__ */ jsxs("article", { id: elementId, className: "oods-trait-recipe", "data-oods-component": id, "aria-label": heading, children: [
       /* @__PURE__ */ jsx("h2", { children: heading }),
-      rows.length ? /* @__PURE__ */ jsx("ol", { children: rows.map((row, index) => /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx("ol", { children: rows.map((row, index) => /* @__PURE__ */ jsxs("li", { children: [
         /* @__PURE__ */ jsx("strong", { children: row.title }),
         /* @__PURE__ */ jsx("p", { children: row.at ? /* @__PURE__ */ jsx("time", { dateTime: row.at, children: row.time }) : row.time }),
         row.actor && /* @__PURE__ */ jsxs("p", { children: [
@@ -1620,7 +1688,7 @@ function eventRecipe(id, kind, title) {
           "Code: ",
           row.code
         ] })
-      ] }, index)) }) : /* @__PURE__ */ jsx("p", { children: "No events recorded." })
+      ] }, index)) })
     ] });
   };
 }
@@ -1641,9 +1709,9 @@ function CommunicationDetailPanel({ id, title = "Communication", channels = [],
   ] });
 }
 function ColorStatePicker({ id, title = "Color state", colorStates = DEFAULT_COLOR_STATES, value, disabled, onChange }) {
-  const generatedId = React3.useId();
-  const [selected, setSelected] = React3.useState(value ?? colorStates[0] ?? "");
-  React3.useEffect(() => setSelected(value ?? colorStates[0] ?? ""), [value, colorStates]);
+  const generatedId = React4.useId();
+  const [selected, setSelected] = React4.useState(value ?? colorStates[0] ?? "");
+  React4.useEffect(() => setSelected(value ?? colorStates[0] ?? ""), [value, colorStates]);
   return /* @__PURE__ */ jsxs("fieldset", { id, className: "oods-trait-recipe", "data-oods-component": "ColorStatePicker", children: [
     /* @__PURE__ */ jsx("legend", { children: title }),
     /* @__PURE__ */ 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: formatReadOnlyValue(value2, "string", true) }))], onValueChange: (next) => {
@@ -1665,9 +1733,9 @@ function StatusColorLegend({ id, title = "Status colors", colorStates = DEFAULT_
   ] });
 }
 function GeoFieldMappingForm({ id, title = "Geographic fields", embedded = false, disabled, onChange, ...values }) {
-  const generatedId = React3.useId();
-  const [value, setValue] = React3.useState(() => geoFieldMapping(values));
-  React3.useEffect(() => setValue(geoFieldMapping(values)), [values.latitude, values.longitude, values.identifier, values.autoDetect]);
+  const generatedId = React4.useId();
+  const [value, setValue] = React4.useState(() => geoFieldMapping(values));
+  React4.useEffect(() => setValue(geoFieldMapping(values)), [values.latitude, values.longitude, values.identifier, values.autoDetect]);
   const update = (patch) => {
     const next = { ...value, ...patch };
     setValue(next);
@@ -1701,11 +1769,11 @@ function GeocodablePreview({ id, title = "Geographic data", resolution, requires
 }
 function controls(id) {
   const Component = ({ id: htmlId, title = VIZ_CONTROL_TITLES[id], value, channel = "x", disabled, onChange }) => {
-    const generatedId = React3.useId();
-    const [current, setCurrent] = React3.useState(value ?? {});
-    const [drafts, setDrafts] = React3.useState({});
-    const [errors, setErrors] = React3.useState({});
-    React3.useEffect(() => {
+    const generatedId = React4.useId();
+    const [current, setCurrent] = React4.useState(value ?? {});
+    const [drafts, setDrafts] = React4.useState({});
+    const [errors, setErrors] = React4.useState({});
+    React4.useEffect(() => {
       setCurrent(value ?? {});
       setDrafts({});
       setErrors({});
@@ -1779,5 +1847,214 @@ var VizLinePreview = preview("VizLinePreview", "line");
 var VizMarkPreview = preview("VizMarkPreview", "bar");
 var VizPointPreview = preview("VizPointPreview", "scatter");
 var VizScatterPreview = preview("VizScatterPreview", "scatter");
+var classes4 = (...values) => values.filter(Boolean).join(" ");
+var Combobox = React4.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] = React4.useState(defaultValue);
+    const [query, setQuery] = React4.useState(null);
+    const [open, setOpen] = React4.useState(false);
+    const [active, setActive] = React4.useState(-1);
+    const rootRef = React4.useRef(null);
+    const listboxRef = React4.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);
+    };
+    React4.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]);
+    React4.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__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: classes4("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__ */ jsxs("label", { id: `${id}-label`, className: "oods-field-label", htmlFor: id, children: [
+            label,
+            required ? /* @__PURE__ */ jsx("span", { className: "oods-field-required", "aria-hidden": "true", children: "*" }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "oods-combobox__control", children: [
+            /* @__PURE__ */ 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__ */ jsx("span", { className: "oods-combobox__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(StatusIcon, { name: "chevron-down" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "oods-combobox__popup", hidden: !open, onMouseDown: (event) => event.preventDefault(), children: [
+              /* @__PURE__ */ jsx("ul", { ref: listboxRef, id: `${id}-listbox`, className: "oods-combobox__listbox", role: "listbox", "aria-labelledby": `${id}-label`, children: options.map((option, index) => /* @__PURE__ */ 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__ */ jsx("span", { className: "oods-combobox__option-label", children: option.label }),
+                    /* @__PURE__ */ jsx("span", { className: "oods-combobox__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx(StatusIcon, { name: "check" }) })
+                  ]
+                },
+                option.value
+              )) }),
+              /* @__PURE__ */ jsx("p", { className: "oods-combobox__empty", role: "status", children: open && matchCount === 0 ? "No matches" : "" })
+            ] })
+          ] }),
+          name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: chosenValue }) : null,
+          help ? /* @__PURE__ */ jsx("p", { id: `${id}-help`, className: "oods-field-help", children: help }) : null,
+          validation?.message ? /* @__PURE__ */ jsx("p", { id: validationId, className: "oods-field-error", role: validation.state === "error" ? "alert" : void 0, children: validation.message }) : null
+        ]
+      }
+    );
+  }
+);
+Combobox.displayName = "OODS.Combobox";
 
-export { AddressCollectionPanel, AddressEditor, AddressSummaryBadge, AddressValidationTimeline, ArchiveEvent, ArchivePill, ArchiveSummary, ArchivedRowOverlay, AuditEvent, AuditSummaryCard, BillingAmountInput, BillingCardMeta, BillingIntervalSelector, BillingSummaryBadge, CancellationBadge, CancellationEvent, CancellationForm, CardHeader, ClassificationBadge, ClassificationEditor, ClassificationPanel, ColorStatePicker, ColorSwatch, ColorizedBadge, CommunicationDetailPanel, CycleProgressCard, DetailHeader, FilterPanel, FormLabelGroup, GeoFieldMappingForm, GeoResolutionBadge, GeocodablePreview, Grid, InlineLabel, LabelCell, MembershipAuditTimeline, MembershipPanel, MessageEventTimeline, MessageStatusBadge, OwnerBadge, OwnershipMeta, OwnershipSummary, PaymentEventTimeline, PaymentTimeline, PreferenceEditor, PreferencePanel, PreferenceSummaryBadge, PreferenceTimeline, PriceCardMeta, PriceSummary, RoleAssignmentForm, RoleBadgeList, SortIndicator, Stack, StateTransitionEvent, StatusColorLegend, StatusSelector, Tabs, TagInput, TagManager, TagPills, TagSummary, TemplatePicker, TimelineEntryLabel, VizAreaControls, VizAreaPreview, VizAxisControls, VizAxisSummary, VizColorControls, VizColorLegendConfig, VizEncodingBadge, VizGraphPreview, VizHeatmapControls, VizHeatmapPreview, VizLineControls, VizLinePreview, VizMarkControls, VizMarkPreview, VizOpacityControls, VizOpacitySummary, VizPointControls, VizPointPreview, VizRoleBadge, VizScaleControls, VizScaleSummary, VizScatterControls, VizScatterPreview, VizShapeControls, VizShapeLegend, VizSizeControls, VizSizeSummary };
+export { AddressCollectionPanel, AddressEditor, AddressSummaryBadge, AddressValidationTimeline, ArchiveEvent, ArchivePill, ArchiveSummary, ArchivedRowOverlay, AuditEvent, AuditSummaryCard, BillingAmountInput, BillingCardMeta, BillingIntervalSelector, BillingSummaryBadge, CancellationBadge, CancellationEvent, CancellationForm, CardHeader, ClassificationBadge, ClassificationEditor, ClassificationPanel, ColorStatePicker, ColorSwatch, ColorizedBadge, Combobox, CommunicationDetailPanel, CycleProgressCard, DetailHeader, FilterPanel, FormLabelGroup, GeoFieldMappingForm, GeoResolutionBadge, GeocodablePreview, Grid, InlineLabel, LabelCell, MembershipAuditTimeline, MembershipPanel, MessageEventTimeline, MessageStatusBadge, OwnerBadge, OwnershipMeta, OwnershipSummary, PaymentEventTimeline, PaymentTimeline, PreferenceEditor, PreferencePanel, PreferenceSummaryBadge, PreferenceTimeline, PriceCardMeta, PriceSummary, RoleAssignmentForm, RoleBadgeList, SegmentedControl, SortIndicator, Stack, StateTransitionEvent, StatusColorLegend, StatusSelector, Tabs, TagInput, TagManager, TagPills, TagSummary, TemplatePicker, TimelineEntryLabel, VizAreaControls, VizAreaPreview, VizAxisControls, VizAxisSummary, VizColorControls, VizColorLegendConfig, VizEncodingBadge, VizGraphPreview, VizHeatmapControls, VizHeatmapPreview, VizLineControls, VizLinePreview, VizMarkControls, VizMarkPreview, VizOpacityControls, VizOpacitySummary, VizPointControls, VizPointPreview, VizRoleBadge, VizScaleControls, VizScaleSummary, VizScatterControls, VizScatterPreview, VizShapeControls, VizShapeLegend, VizSizeControls, VizSizeSummary };