@cosxai/ui 0.2.6 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/actionbar/ActionBarButton.tsx

@@ -70,7 +70,7 @@ export function ActionBarButton({
         ...style,
       }}
     >
-      {icon}
+      {icon != null && <span className="ck-actionbar-icon">{icon}</span>}
       <span className={responsiveLabel ? "ck-actionbar-label" : undefined}>
         {label}
       </span>

package/src/primitives/Select.tsx

@@ -37,9 +37,10 @@ import { cn } from "../lib/cn";
 // Popover ALWAYS renders via createPortal to document.body so it
 // escapes Card / Drawer / Dialog parents whose overflow:hidden
 // would otherwise clip it. Position is computed against the
-// trigger's bounding rect and recomputed on resize; we
-// intentionally close on scroll to avoid the "popover drifts off
-// the trigger" failure mode (matches Radix / Headless UI default).
+// trigger's bounding rect and re-computed on page scroll + window
+// resize so the popover tracks the trigger. Scrolls INSIDE the
+// popover (the option list / search input) are filtered out — only
+// outer scrolls reposition.
 //
 // Keyboard model (mirrors ARIA 1.2 combobox-as-listbox spec):
 //   trigger CLOSED:
@@ -208,8 +209,19 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
 
   useEffect(() => {
     if (!open) return;
-    const onResize = () => setRect(computeRect());
-    const onScroll = () => setOpen(false);
+    const reposition = () => {
+      const r = computeRect();
+      if (r) setRect(r);
+    };
+    const onResize = reposition;
+    const onScroll = (e: Event) => {
+      // Scrolls INSIDE the popover (the option list / search input)
+      // must not re-trigger positioning — they're not page scrolls.
+      // capture=true catches them before they bubble; we filter here.
+      const target = e.target as Node | null;
+      if (target && popoverRef.current?.contains(target)) return;
+      reposition();
+    };
     window.addEventListener("resize", onResize);
     window.addEventListener("scroll", onScroll, true);
     return () => {

package/src/styles/index.css

@@ -172,6 +172,22 @@ html[data-ck-chrome="seamless"] .ck-card__foot {
   cursor: not-allowed;
 }
 
+/* Icon glyph wrapper — sized larger than the button's 13 px label
+   text so unicode symbols (◐ ☀ ☾ ◇) and small SVGs read clearly.
+   ActionBarButton wraps the icon prop in this span automatically;
+   callers don't need to opt in. The 1 px upward translate
+   compensates for geometric glyphs sitting about 1 px below their
+   em-box centre — flex centring otherwise leaves them looking
+   slightly low next to the heavier label text. */
+.ck-actionbar-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 1;
+  transform: translateY(-1px);
+}
+
 /* Hide labels below 768 px (the standard md breakpoint).
    Icons + tooltips remain — the bar's still informative on phones. */
 @media (max-width: 767px) {