ionbase-ui 0.6.0 → 0.6.1

package/dist/styles/icon.css

@@ -0,0 +1,49 @@
+/*
+ * Icon
+ *
+ * `Icon.tsx` has always emitted an `.ion-icon` class and nothing ever styled it.
+ * That was not benign. An `<svg>` is an inline-level replaced element, so when
+ * it shares a line box with anything else it sits on the *text baseline* and the
+ * font's descender space opens up underneath it — the icon then reads a couple
+ * of pixels high, and the box around it grows taller than the icon.
+ *
+ * Every slot in this system happens to hide that today: `.ion-button__icon-start`,
+ * `.ion-menu__icon`, `.ion-input__icon-start` and friends are all flex or grid
+ * containers, and a flex/grid item is blockified — `display: inline` becomes
+ * `block` — which removes the baseline from the picture entirely. Measured: a
+ * direct icon, an icon inside an `inline-grid` swap wrapper, and an icon inside
+ * a plain `display: block` wrapper all centre to within 0.00px of the label.
+ *
+ * The alignment was therefore correct by side effect of the container, not
+ * because the icon defended itself. It failed the moment the icon stopped being
+ * the only thing on its line: with one text node beside it inside a wrapper, the
+ * icon measured 3px above the label's centre and the button grew from 40px to
+ * 46px. Consumers nest icons inside their own wrappers all the time — swap and
+ * crossfade animations do it by construction — so "the parent will always be a
+ * flex container" is not an invariant this package can rely on.
+ *
+ * WHY inline-block AND NOT block
+ *
+ * `display: block` also kills the baseline, and it is what several resets reach
+ * for, but it is wrong here: it forces an icon used mid-sentence onto its own
+ * line. Measured on a 600px paragraph with one inline icon — 2 lines became 3.
+ * `inline-block` keeps the icon in the text flow, and `vertical-align: middle`
+ * centres it on the x-height axis, which is where an inline icon should sit.
+ *
+ * Both declarations are inert wherever it already worked: a flex or grid item is
+ * blockified regardless of the `display` it was given, and `vertical-align` does
+ * not apply to one. So this changes nothing in Button, Menu, Input, Tabs or
+ * anywhere else the icon is already a direct flex child — it only supplies the
+ * floor that was missing underneath them.
+ *
+ * NOT DONE HERE: an optical nudge. Icons centre on the line box while text is
+ * read on its cap-height band, so the two centres are not identical. Measured
+ * from rendered pixels on a descender-free label at Medium, the gap is 0.31px —
+ * below a device pixel at 1x, and smaller than the variation between individual
+ * Lucide glyphs. A `translateY` correction here would be a magic number papering
+ * over less than it introduces.
+ */
+.ion-icon {
+  display: inline-block;
+  vertical-align: middle;
+}

package/dist/styles/index.css

@@ -20,6 +20,13 @@
  * it bypasses next/font and friends, and it hands visitor IPs to Google.
  */
 @import url('./tokens/index.css');
+
+/*
+ * Before the components, deliberately. `.ion-icon` is a primitive that every
+ * slot below sizes with its own `... svg` rule, and those rules have to be free
+ * to win on ordering as well as specificity.
+ */
+@import url('./icon.css');
 @import url('./button.css');
 @import url('./tabs.css');
 @import url('./badge.css');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",