@os-legal/ui 0.1.13 → 0.1.15

package/dist/index.js

@@ -123,7 +123,7 @@ __export(index_exports, {
   ModalHeader: () => ModalHeader,
   NavBar: () => NavBar,
   NewDiscussionButton: () => NewDiscussionButton,
-  Node: () => Node,
+  Node: () => Node2,
   PageHeader: () => PageHeader,
   Pane: () => Pane,
   PanelAction: () => PanelAction,
@@ -6237,6 +6237,7 @@ function countMenuItems(children) {
 }
 function DropdownInner({
   mode,
+  size = "md",
   options = [],
   value,
   defaultValue,
@@ -6248,6 +6249,7 @@ function DropdownInner({
   searchable = false,
   onSearchChange,
   searchDebounceMs = 300,
+  iconSize,
   fluid = false,
   upward = false,
   align = "left",
@@ -6255,6 +6257,8 @@ function DropdownInner({
   renderOption,
   renderTag,
   renderEmpty,
+  wrapDescriptions = false,
+  showDescriptionInTrigger = false,
   maxMenuHeight = 300,
   className = "",
   style,
@@ -6262,6 +6266,7 @@ function DropdownInner({
   "aria-labelledby": ariaLabelledBy,
   onOpen,
   onClose,
+  onBlur,
   children
 }, ref) {
   const generatedId = (0, import_react20.useId)();
@@ -6573,9 +6578,13 @@ function DropdownInner({
   };
   const selectedOpt = getSelectedOption();
   const hasValue = mode === "multiselect" ? (currentValue || []).length > 0 : currentValue != null;
-  const renderIcon = (icon) => {
+  const renderIcon = (icon, size2) => {
+    const sizeStyle = size2 ? { "--oc-dropdown-icon-size": `${size2}px` } : void 0;
     if (typeof icon === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: icon, alt: "", className: "oc-dropdown__option-icon-img" });
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: icon, alt: "", className: "oc-dropdown__option-icon-img", style: sizeStyle });
+    }
+    if (size2) {
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: sizeStyle, children: icon });
     }
     return icon;
   };
@@ -6606,8 +6615,11 @@ function DropdownInner({
     }
     if (mode === "select" && selectedOpt && !Array.isArray(selectedOpt)) {
       return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "oc-dropdown__trigger-content", children: [
-        selectedOpt.icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "oc-dropdown__trigger-icon", children: renderIcon(selectedOpt.icon) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "oc-dropdown__value", children: selectedOpt.label })
+        selectedOpt.icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "oc-dropdown__trigger-icon", children: renderIcon(selectedOpt.icon, selectedOpt.iconSize ?? iconSize) }),
+        showDescriptionInTrigger && selectedOpt.description ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "oc-dropdown__trigger-value-group", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "oc-dropdown__value", children: selectedOpt.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "oc-dropdown__trigger-description", children: selectedOpt.description })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "oc-dropdown__value", children: selectedOpt.label })
       ] });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "oc-dropdown__trigger-content", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "oc-dropdown__placeholder", children: placeholder }) });
@@ -6743,7 +6755,7 @@ function DropdownInner({
           onMouseEnter: () => !opt.disabled && setFocusedIndex(index),
           "data-oc-dropdown-index": index,
           children: [
-            opt.icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "oc-dropdown__option-icon", children: renderIcon(opt.icon) }),
+            opt.icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "oc-dropdown__option-icon", children: renderIcon(opt.icon, opt.iconSize ?? iconSize) }),
             /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "oc-dropdown__option-content", children: [
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "oc-dropdown__option-label", children: opt.label }),
               opt.description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "oc-dropdown__option-description", children: opt.description })
@@ -6829,12 +6841,24 @@ function DropdownInner({
       itemCounterRef.current = 0;
     }
   }, [isOpen, mode]);
+  const handleFocusOut = (0, import_react20.useCallback)(
+    (e) => {
+      if (!onBlur) return;
+      if (containerRef.current && e.relatedTarget instanceof Node && containerRef.current.contains(e.relatedTarget)) {
+        return;
+      }
+      onBlur(e);
+    },
+    [onBlur]
+  );
   const rootClasses = [
     "oc-dropdown",
     `oc-dropdown--${mode}`,
+    size !== "md" && `oc-dropdown--${size}`,
     fluid && "oc-dropdown--fluid",
     isOpen && "oc-dropdown--open",
     disabled && "oc-dropdown--disabled",
+    wrapDescriptions && "oc-dropdown--wrap-descriptions",
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
@@ -6851,6 +6875,7 @@ function DropdownInner({
       className: rootClasses,
       style,
       onKeyDown: mode === "menu" ? handleMenuKeyDown : handleKeyDown,
+      onBlur: handleFocusOut,
       children: [
         renderTriggerElement(),
         renderMenu()
@@ -6879,6 +6904,34 @@ var dropdownStyles = `
   width: 100%;
 }
 
+/* \u2500\u2500\u2500 Size variants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.oc-dropdown--sm .oc-dropdown__trigger {
+  min-height: 30px;
+  padding: 4px 8px;
+  font-size: var(--oc-font-size-xs);
+}
+
+.oc-dropdown--lg .oc-dropdown__trigger {
+  min-height: 44px;
+  padding: 8px 16px;
+  font-size: var(--oc-font-size-md);
+}
+
+.oc-dropdown--sm .oc-dropdown__option,
+.oc-dropdown--sm .oc-dropdown__item {
+  min-height: 30px;
+  padding: 4px 8px;
+  font-size: var(--oc-font-size-xs);
+}
+
+.oc-dropdown--lg .oc-dropdown__option,
+.oc-dropdown--lg .oc-dropdown__item {
+  min-height: 44px;
+  padding: 10px 16px;
+  font-size: var(--oc-font-size-md);
+}
+
 /* \u2500\u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .oc-dropdown__trigger {
@@ -6886,7 +6939,7 @@ var dropdownStyles = `
   align-items: center;
   justify-content: space-between;
   gap: var(--oc-spacing-sm);
-  min-height: 38px;
+  min-height: 44px;
   padding: 6px 12px;
   background: var(--oc-bg-surface);
   border: 1px solid var(--oc-border-default);
@@ -6962,8 +7015,15 @@ var dropdownStyles = `
 }
 
 .oc-dropdown__trigger-icon svg {
-  width: 16px;
-  height: 16px;
+  width: var(--oc-dropdown-icon-size, 16px);
+  height: var(--oc-dropdown-icon-size, 16px);
+}
+
+.oc-dropdown__trigger-icon .oc-dropdown__option-icon-img {
+  width: var(--oc-dropdown-icon-size, 16px);
+  height: var(--oc-dropdown-icon-size, 16px);
+  object-fit: contain;
+  border-radius: 2px;
 }
 
 .oc-dropdown__value {
@@ -6974,6 +7034,22 @@ var dropdownStyles = `
   color: var(--oc-fg-primary);
 }
 
+.oc-dropdown__trigger-value-group {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.oc-dropdown__trigger-description {
+  font-size: var(--oc-font-size-xs);
+  color: var(--oc-fg-secondary);
+  line-height: var(--oc-line-height-normal);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .oc-dropdown__placeholder {
   flex: 1;
   white-space: nowrap;
@@ -7140,6 +7216,7 @@ var dropdownStyles = `
   display: flex;
   align-items: center;
   gap: var(--oc-spacing-sm);
+  min-height: 44px;
   padding: 10px 14px;
   border-bottom: 1px solid var(--oc-border-default);
 }
@@ -7218,6 +7295,7 @@ var dropdownStyles = `
   display: flex;
   align-items: center;
   gap: var(--oc-spacing-sm);
+  min-height: 44px;
   padding: 10px 14px;
   font-size: var(--oc-font-size-sm);
   color: var(--oc-fg-primary);
@@ -7261,13 +7339,13 @@ var dropdownStyles = `
 }
 
 .oc-dropdown__option-icon svg {
-  width: 16px;
-  height: 16px;
+  width: var(--oc-dropdown-icon-size, 16px);
+  height: var(--oc-dropdown-icon-size, 16px);
 }
 
 .oc-dropdown__option-icon-img {
-  width: 16px;
-  height: 16px;
+  width: var(--oc-dropdown-icon-size, 16px);
+  height: var(--oc-dropdown-icon-size, 16px);
   object-fit: contain;
   border-radius: 2px;
 }
@@ -7295,6 +7373,12 @@ var dropdownStyles = `
   text-overflow: ellipsis;
 }
 
+.oc-dropdown--wrap-descriptions .oc-dropdown__option-description {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+
 .oc-dropdown__option--selected .oc-dropdown__option-description {
   color: var(--oc-accent);
   opacity: 0.7;
@@ -7314,6 +7398,7 @@ var dropdownStyles = `
   display: flex;
   align-items: center;
   gap: var(--oc-spacing-sm);
+  min-height: 44px;
   padding: 10px 14px;
   font-size: var(--oc-font-size-sm);
   color: var(--oc-fg-primary);
@@ -7348,8 +7433,8 @@ var dropdownStyles = `
 }
 
 .oc-dropdown__item-icon svg {
-  width: 16px;
-  height: 16px;
+  width: var(--oc-dropdown-icon-size, 16px);
+  height: var(--oc-dropdown-icon-size, 16px);
 }
 
 .oc-dropdown__item-label {
@@ -7407,8 +7492,13 @@ var dropdownStyles = `
 /* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 @media (max-width: 600px) {
+  /* 16px minimum prevents iOS Safari auto-zoom on focus */
   .oc-dropdown__trigger {
-    min-height: 44px;
+    font-size: 16px;
+  }
+
+  .oc-dropdown__search-input {
+    font-size: 16px;
   }
 
   .oc-dropdown--fluid .oc-dropdown__menu {
@@ -7416,6 +7506,18 @@ var dropdownStyles = `
     right: 0;
   }
 }
+
+/* \u2500\u2500\u2500 Coarse pointer (touch) feedback \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+@media (pointer: coarse) {
+  .oc-dropdown__option:active:not(.oc-dropdown__option--disabled) {
+    background: rgba(15, 118, 110, 0.12);
+  }
+
+  .oc-dropdown__item:active:not(.oc-dropdown__item--disabled) {
+    background: rgba(15, 118, 110, 0.12);
+  }
+}
 `;
 
 // src/Checkbox/Checkbox.tsx
@@ -18654,7 +18756,7 @@ var dataGridStyles = `
 // src/Node/Node.tsx
 var import_react52 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
-var Node = (0, import_react52.forwardRef)(
+var Node2 = (0, import_react52.forwardRef)(
   ({
     size = "sm",
     variant = "default",
@@ -18679,7 +18781,7 @@ var Node = (0, import_react52.forwardRef)(
     ] });
   }
 );
-Node.displayName = "Node";
+Node2.displayName = "Node";
 
 // src/Node/Node.styles.ts
 var nodeStyles = `
@@ -19041,7 +19143,7 @@ var RelationshipBadge = (0, import_react54.forwardRef)(
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            Node,
+            Node2,
             {
               size: size === "sm" ? "xs" : "sm",
               variant: active ? "active" : "muted",
@@ -19182,7 +19284,7 @@ var RelationshipPill = (0, import_react55.forwardRef)(
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-            Node,
+            Node2,
             {
               size: "xs",
               variant: active ? "active" : "default"

package/dist/index.mjs

@@ -5976,6 +5976,7 @@ function countMenuItems(children) {
 }
 function DropdownInner({
   mode,
+  size = "md",
   options = [],
   value,
   defaultValue,
@@ -5987,6 +5988,7 @@ function DropdownInner({
   searchable = false,
   onSearchChange,
   searchDebounceMs = 300,
+  iconSize,
   fluid = false,
   upward = false,
   align = "left",
@@ -5994,6 +5996,8 @@ function DropdownInner({
   renderOption,
   renderTag,
   renderEmpty,
+  wrapDescriptions = false,
+  showDescriptionInTrigger = false,
   maxMenuHeight = 300,
   className = "",
   style,
@@ -6001,6 +6005,7 @@ function DropdownInner({
   "aria-labelledby": ariaLabelledBy,
   onOpen,
   onClose,
+  onBlur,
   children
 }, ref) {
   const generatedId = useId4();
@@ -6312,9 +6317,13 @@ function DropdownInner({
   };
   const selectedOpt = getSelectedOption();
   const hasValue = mode === "multiselect" ? (currentValue || []).length > 0 : currentValue != null;
-  const renderIcon = (icon) => {
+  const renderIcon = (icon, size2) => {
+    const sizeStyle = size2 ? { "--oc-dropdown-icon-size": `${size2}px` } : void 0;
     if (typeof icon === "string") {
-      return /* @__PURE__ */ jsx20("img", { src: icon, alt: "", className: "oc-dropdown__option-icon-img" });
+      return /* @__PURE__ */ jsx20("img", { src: icon, alt: "", className: "oc-dropdown__option-icon-img", style: sizeStyle });
+    }
+    if (size2) {
+      return /* @__PURE__ */ jsx20("span", { style: sizeStyle, children: icon });
     }
     return icon;
   };
@@ -6345,8 +6354,11 @@ function DropdownInner({
     }
     if (mode === "select" && selectedOpt && !Array.isArray(selectedOpt)) {
       return /* @__PURE__ */ jsxs17("div", { className: "oc-dropdown__trigger-content", children: [
-        selectedOpt.icon && /* @__PURE__ */ jsx20("span", { className: "oc-dropdown__trigger-icon", children: renderIcon(selectedOpt.icon) }),
-        /* @__PURE__ */ jsx20("span", { className: "oc-dropdown__value", children: selectedOpt.label })
+        selectedOpt.icon && /* @__PURE__ */ jsx20("span", { className: "oc-dropdown__trigger-icon", children: renderIcon(selectedOpt.icon, selectedOpt.iconSize ?? iconSize) }),
+        showDescriptionInTrigger && selectedOpt.description ? /* @__PURE__ */ jsxs17("div", { className: "oc-dropdown__trigger-value-group", children: [
+          /* @__PURE__ */ jsx20("span", { className: "oc-dropdown__value", children: selectedOpt.label }),
+          /* @__PURE__ */ jsx20("span", { className: "oc-dropdown__trigger-description", children: selectedOpt.description })
+        ] }) : /* @__PURE__ */ jsx20("span", { className: "oc-dropdown__value", children: selectedOpt.label })
       ] });
     }
     return /* @__PURE__ */ jsx20("div", { className: "oc-dropdown__trigger-content", children: /* @__PURE__ */ jsx20("span", { className: "oc-dropdown__placeholder", children: placeholder }) });
@@ -6482,7 +6494,7 @@ function DropdownInner({
           onMouseEnter: () => !opt.disabled && setFocusedIndex(index),
           "data-oc-dropdown-index": index,
           children: [
-            opt.icon && /* @__PURE__ */ jsx20("span", { className: "oc-dropdown__option-icon", children: renderIcon(opt.icon) }),
+            opt.icon && /* @__PURE__ */ jsx20("span", { className: "oc-dropdown__option-icon", children: renderIcon(opt.icon, opt.iconSize ?? iconSize) }),
             /* @__PURE__ */ jsxs17("div", { className: "oc-dropdown__option-content", children: [
               /* @__PURE__ */ jsx20("span", { className: "oc-dropdown__option-label", children: opt.label }),
               opt.description && /* @__PURE__ */ jsx20("span", { className: "oc-dropdown__option-description", children: opt.description })
@@ -6568,12 +6580,24 @@ function DropdownInner({
       itemCounterRef.current = 0;
     }
   }, [isOpen, mode]);
+  const handleFocusOut = useCallback7(
+    (e) => {
+      if (!onBlur) return;
+      if (containerRef.current && e.relatedTarget instanceof Node && containerRef.current.contains(e.relatedTarget)) {
+        return;
+      }
+      onBlur(e);
+    },
+    [onBlur]
+  );
   const rootClasses = [
     "oc-dropdown",
     `oc-dropdown--${mode}`,
+    size !== "md" && `oc-dropdown--${size}`,
     fluid && "oc-dropdown--fluid",
     isOpen && "oc-dropdown--open",
     disabled && "oc-dropdown--disabled",
+    wrapDescriptions && "oc-dropdown--wrap-descriptions",
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs17(
@@ -6590,6 +6614,7 @@ function DropdownInner({
       className: rootClasses,
       style,
       onKeyDown: mode === "menu" ? handleMenuKeyDown : handleKeyDown,
+      onBlur: handleFocusOut,
       children: [
         renderTriggerElement(),
         renderMenu()
@@ -6618,6 +6643,34 @@ var dropdownStyles = `
   width: 100%;
 }
 
+/* \u2500\u2500\u2500 Size variants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.oc-dropdown--sm .oc-dropdown__trigger {
+  min-height: 30px;
+  padding: 4px 8px;
+  font-size: var(--oc-font-size-xs);
+}
+
+.oc-dropdown--lg .oc-dropdown__trigger {
+  min-height: 44px;
+  padding: 8px 16px;
+  font-size: var(--oc-font-size-md);
+}
+
+.oc-dropdown--sm .oc-dropdown__option,
+.oc-dropdown--sm .oc-dropdown__item {
+  min-height: 30px;
+  padding: 4px 8px;
+  font-size: var(--oc-font-size-xs);
+}
+
+.oc-dropdown--lg .oc-dropdown__option,
+.oc-dropdown--lg .oc-dropdown__item {
+  min-height: 44px;
+  padding: 10px 16px;
+  font-size: var(--oc-font-size-md);
+}
+
 /* \u2500\u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .oc-dropdown__trigger {
@@ -6625,7 +6678,7 @@ var dropdownStyles = `
   align-items: center;
   justify-content: space-between;
   gap: var(--oc-spacing-sm);
-  min-height: 38px;
+  min-height: 44px;
   padding: 6px 12px;
   background: var(--oc-bg-surface);
   border: 1px solid var(--oc-border-default);
@@ -6701,8 +6754,15 @@ var dropdownStyles = `
 }
 
 .oc-dropdown__trigger-icon svg {
-  width: 16px;
-  height: 16px;
+  width: var(--oc-dropdown-icon-size, 16px);
+  height: var(--oc-dropdown-icon-size, 16px);
+}
+
+.oc-dropdown__trigger-icon .oc-dropdown__option-icon-img {
+  width: var(--oc-dropdown-icon-size, 16px);
+  height: var(--oc-dropdown-icon-size, 16px);
+  object-fit: contain;
+  border-radius: 2px;
 }
 
 .oc-dropdown__value {
@@ -6713,6 +6773,22 @@ var dropdownStyles = `
   color: var(--oc-fg-primary);
 }
 
+.oc-dropdown__trigger-value-group {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.oc-dropdown__trigger-description {
+  font-size: var(--oc-font-size-xs);
+  color: var(--oc-fg-secondary);
+  line-height: var(--oc-line-height-normal);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .oc-dropdown__placeholder {
   flex: 1;
   white-space: nowrap;
@@ -6879,6 +6955,7 @@ var dropdownStyles = `
   display: flex;
   align-items: center;
   gap: var(--oc-spacing-sm);
+  min-height: 44px;
   padding: 10px 14px;
   border-bottom: 1px solid var(--oc-border-default);
 }
@@ -6957,6 +7034,7 @@ var dropdownStyles = `
   display: flex;
   align-items: center;
   gap: var(--oc-spacing-sm);
+  min-height: 44px;
   padding: 10px 14px;
   font-size: var(--oc-font-size-sm);
   color: var(--oc-fg-primary);
@@ -7000,13 +7078,13 @@ var dropdownStyles = `
 }
 
 .oc-dropdown__option-icon svg {
-  width: 16px;
-  height: 16px;
+  width: var(--oc-dropdown-icon-size, 16px);
+  height: var(--oc-dropdown-icon-size, 16px);
 }
 
 .oc-dropdown__option-icon-img {
-  width: 16px;
-  height: 16px;
+  width: var(--oc-dropdown-icon-size, 16px);
+  height: var(--oc-dropdown-icon-size, 16px);
   object-fit: contain;
   border-radius: 2px;
 }
@@ -7034,6 +7112,12 @@ var dropdownStyles = `
   text-overflow: ellipsis;
 }
 
+.oc-dropdown--wrap-descriptions .oc-dropdown__option-description {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+
 .oc-dropdown__option--selected .oc-dropdown__option-description {
   color: var(--oc-accent);
   opacity: 0.7;
@@ -7053,6 +7137,7 @@ var dropdownStyles = `
   display: flex;
   align-items: center;
   gap: var(--oc-spacing-sm);
+  min-height: 44px;
   padding: 10px 14px;
   font-size: var(--oc-font-size-sm);
   color: var(--oc-fg-primary);
@@ -7087,8 +7172,8 @@ var dropdownStyles = `
 }
 
 .oc-dropdown__item-icon svg {
-  width: 16px;
-  height: 16px;
+  width: var(--oc-dropdown-icon-size, 16px);
+  height: var(--oc-dropdown-icon-size, 16px);
 }
 
 .oc-dropdown__item-label {
@@ -7146,8 +7231,13 @@ var dropdownStyles = `
 /* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 @media (max-width: 600px) {
+  /* 16px minimum prevents iOS Safari auto-zoom on focus */
   .oc-dropdown__trigger {
-    min-height: 44px;
+    font-size: 16px;
+  }
+
+  .oc-dropdown__search-input {
+    font-size: 16px;
   }
 
   .oc-dropdown--fluid .oc-dropdown__menu {
@@ -7155,6 +7245,18 @@ var dropdownStyles = `
     right: 0;
   }
 }
+
+/* \u2500\u2500\u2500 Coarse pointer (touch) feedback \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+@media (pointer: coarse) {
+  .oc-dropdown__option:active:not(.oc-dropdown__option--disabled) {
+    background: rgba(15, 118, 110, 0.12);
+  }
+
+  .oc-dropdown__item:active:not(.oc-dropdown__item--disabled) {
+    background: rgba(15, 118, 110, 0.12);
+  }
+}
 `;
 
 // src/Checkbox/Checkbox.tsx
@@ -18399,7 +18501,7 @@ var dataGridStyles = `
 // src/Node/Node.tsx
 import { forwardRef as forwardRef52 } from "react";
 import { jsx as jsx52, jsxs as jsxs48 } from "react/jsx-runtime";
-var Node = forwardRef52(
+var Node2 = forwardRef52(
   ({
     size = "sm",
     variant = "default",
@@ -18424,7 +18526,7 @@ var Node = forwardRef52(
     ] });
   }
 );
-Node.displayName = "Node";
+Node2.displayName = "Node";
 
 // src/Node/Node.styles.ts
 var nodeStyles = `
@@ -18786,7 +18888,7 @@ var RelationshipBadge = forwardRef54(
         ...props,
         children: [
           /* @__PURE__ */ jsx54(
-            Node,
+            Node2,
             {
               size: size === "sm" ? "xs" : "sm",
               variant: active ? "active" : "muted",
@@ -18927,7 +19029,7 @@ var RelationshipPill = forwardRef55(
         ...props,
         children: [
           /* @__PURE__ */ jsx55(
-            Node,
+            Node2,
             {
               size: "xs",
               variant: active ? "active" : "default"
@@ -20630,7 +20732,7 @@ export {
   ModalHeader,
   NavBar,
   NewDiscussionButton,
-  Node,
+  Node2 as Node,
   PageHeader,
   Pane,
   PanelAction,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-legal/ui",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "React component library for OpenContracts design system",
   "main": "dist/index.js",
   "module": "dist/index.mjs",