@cosxai/ui 0.2.7 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "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/styles/base.css

@@ -4,6 +4,19 @@
    this file being loaded, but consumers should import it to get
    the cross-fade theme transitions and reduced-motion handling. */
 
+/* Inheritance-friendly box-sizing — modern reset best practice.
+   Without it, `min-height: 100vh` + padding silently extends the
+   element BEYOND the viewport (default `content-box` makes padding
+   stack ON TOP of the declared min-height), introducing a sneaky
+   scroll on any consumer page that combines those two properties.
+   Every modern reset (Eric Meyer 2014, Tailwind preflight,
+   Bootstrap, modern-normalize) ships this — @cosxai/ui matches. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 html,
 body {
   background: var(--ck-bg-canvas);

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) {