kaleido-ui 0.1.18 → 0.1.20

package/dist/css/kaleido-ui.css

@@ -6,6 +6,19 @@
 /* ── Material Symbols ──────────────────────────────────────────────────── */
 .material-symbols-outlined {
   font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  /*
+   * Glyph spans default to baseline alignment with the parent's line-height,
+   * which makes Material Symbols render a few pixels above text in flex
+   * rows next to <img>-based icons. Force the glyph to render centered
+   * within its own box (line-height 1, vertical-align middle, inline-flex
+   * items-center) so it sits on the same visual axis as adjacent text and
+   * image icons everywhere they're used.
+   */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  vertical-align: middle;
 }
 .material-symbols-outlined.filled {
   font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;

package/dist/web/index.cjs

@@ -3672,7 +3672,7 @@ var import_jsx_runtime39 = require("react/jsx-runtime");
 function getActivityNetworkFilterIcon(filter) {
   switch (filter) {
     case "onchain":
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AppIcon, { name: "onchain", className: "size-icon-sm" });
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AppIcon, { name: "onchain", size: "xs", className: "size-icon-sm" });
     case "lightning":
       return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LightningNetworkIcon, { className: "size-3.5", alt: "" });
     case "spark":
@@ -3680,7 +3680,7 @@ function getActivityNetworkFilterIcon(filter) {
     case "arkade":
       return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ArkadeNetworkIcon, { className: "size-3.5 rounded", alt: "" });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AppIcon, { name: "allNetworks", className: "size-icon-sm" });
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AppIcon, { name: "allNetworks", size: "xs", className: "size-icon-sm" });
   }
 }
 function ActivityNetworkFilters({
@@ -3698,7 +3698,12 @@ function ActivityNetworkFilters({
         type: "button",
         onClick: () => onChange(filter.value),
         className: cn(
-          "inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1.5 text-xxs font-bold uppercase tracking-wider transition-all active:scale-95",
+          // `leading-none` on the button normalizes the line-box for
+          // both the icon span and the label span; without it the
+          // icon (now `leading-none` from Icon primitive) and the text
+          // (default leading) get center-aligned along different
+          // visual axes and the glyph drifts above the text.
+          "inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1.5 text-xxs font-bold uppercase tracking-wider leading-none transition-all active:scale-95",
           isActive ? "bg-primary/15 text-primary shadow-inner hover:bg-primary/20" : "bg-surface-card text-white/45 hover:bg-surface-elevated hover:text-white/80"
         ),
         children: [

package/dist/web/index.js

@@ -3517,7 +3517,7 @@ import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
 function getActivityNetworkFilterIcon(filter) {
   switch (filter) {
     case "onchain":
-      return /* @__PURE__ */ jsx39(AppIcon, { name: "onchain", className: "size-icon-sm" });
+      return /* @__PURE__ */ jsx39(AppIcon, { name: "onchain", size: "xs", className: "size-icon-sm" });
     case "lightning":
       return /* @__PURE__ */ jsx39(LightningNetworkIcon, { className: "size-3.5", alt: "" });
     case "spark":
@@ -3525,7 +3525,7 @@ function getActivityNetworkFilterIcon(filter) {
     case "arkade":
       return /* @__PURE__ */ jsx39(ArkadeNetworkIcon, { className: "size-3.5 rounded", alt: "" });
     default:
-      return /* @__PURE__ */ jsx39(AppIcon, { name: "allNetworks", className: "size-icon-sm" });
+      return /* @__PURE__ */ jsx39(AppIcon, { name: "allNetworks", size: "xs", className: "size-icon-sm" });
   }
 }
 function ActivityNetworkFilters({
@@ -3543,7 +3543,12 @@ function ActivityNetworkFilters({
         type: "button",
         onClick: () => onChange(filter.value),
         className: cn(
-          "inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1.5 text-xxs font-bold uppercase tracking-wider transition-all active:scale-95",
+          // `leading-none` on the button normalizes the line-box for
+          // both the icon span and the label span; without it the
+          // icon (now `leading-none` from Icon primitive) and the text
+          // (default leading) get center-aligned along different
+          // visual axes and the glyph drifts above the text.
+          "inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1.5 text-xxs font-bold uppercase tracking-wider leading-none transition-all active:scale-95",
           isActive ? "bg-primary/15 text-primary shadow-inner hover:bg-primary/20" : "bg-surface-card text-white/45 hover:bg-surface-elevated hover:text-white/80"
         ),
         children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",