@hideyukimori/nene2-ui 0.18.1 → 0.19.1

package/dist/feedback/Badge.d.ts

@@ -21,4 +21,19 @@ export interface BadgeProps {
  * `<Badge color="red">` becomes a lie the moment the theme changes, and there is no way to
  * find every such lie afterwards except by reading every screen.
  */
+/**
+ * 🔴 `whitespace-nowrap` is load-bearing (#477). A badge is a label, not body copy — but the
+ * kit had no opinion on wrapping, so in a narrow flex row the label wrapped. In CJK that is
+ * not a word-boundary break: 「あなた」 came apart into three stacked characters and the badge
+ * grew from 26.5px tall to 43px (measured, nene-deal /users at 375px).
+ *
+ * Two holes were open at once — the label could *wrap* (`white-space: normal`) and the badge
+ * could *shrink* (`flex-shrink: 1`) — and either one alone produces the failure. `shrink-0`
+ * would close it too, but only while the badge is a flex item: measured in a 50px block
+ * container, `shrink-0` still wrapped (50 × 43) while `nowrap` did not (51 × 26.5). `nowrap`
+ * also stops the shrink, because a flex item's automatic minimum size is its min-content
+ * width and nowrap makes that the whole label. One class, both holes, any context.
+ *
+ * A badge that already fits is unchanged (35.88 × 26.5 before and after, measured).
+ */
 export declare function Badge({ tone, className, children }: BadgeProps): import("react").JSX.Element;

package/dist/feedback/Badge.js

@@ -15,7 +15,22 @@ const TONE_CLASS = {
  * `<Badge color="red">` becomes a lie the moment the theme changes, and there is no way to
  * find every such lie afterwards except by reading every screen.
  */
+/**
+ * 🔴 `whitespace-nowrap` is load-bearing (#477). A badge is a label, not body copy — but the
+ * kit had no opinion on wrapping, so in a narrow flex row the label wrapped. In CJK that is
+ * not a word-boundary break: 「あなた」 came apart into three stacked characters and the badge
+ * grew from 26.5px tall to 43px (measured, nene-deal /users at 375px).
+ *
+ * Two holes were open at once — the label could *wrap* (`white-space: normal`) and the badge
+ * could *shrink* (`flex-shrink: 1`) — and either one alone produces the failure. `shrink-0`
+ * would close it too, but only while the badge is a flex item: measured in a 50px block
+ * container, `shrink-0` still wrapped (50 × 43) while `nowrap` did not (51 × 26.5). `nowrap`
+ * also stops the shrink, because a flex item's automatic minimum size is its min-content
+ * width and nowrap makes that the whole label. One class, both holes, any context.
+ *
+ * A badge that already fits is unchanged (35.88 × 26.5 before and after, measured).
+ */
 export function Badge({ tone = 'neutral', className, children }) {
-    return (_jsx("span", { className: cx('inline-flex items-center rounded-x-slot-badge border px-x-slot-badge-pad-x py-x-slot-badge-pad-y font-sans', TONE_CLASS[tone], className), children: children }));
+    return (_jsx("span", { className: cx('inline-flex items-center whitespace-nowrap gap-x-slot-badge-gap rounded-x-slot-badge border px-x-slot-badge-pad-x py-x-slot-badge-pad-y font-sans text-x-slot-badge font-x-slot-badge', TONE_CLASS[tone], className), children: children }));
 }
 //# sourceMappingURL=Badge.js.map

package/dist/feedback/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/feedback/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAkBlC,MAAM,UAAU,GAAoD;IAClE,OAAO,EACL,4FAA4F;IAC9F,MAAM,EAAE,yFAAyF;IACjG,MAAM,EAAE,yFAAyF;IACjG,OAAO,EACL,4FAA4F;IAC9F,IAAI,EAAE,mFAAmF;IACzF,IAAI,EAAE,mFAAmF;CAC1F,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAc;IACzE,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,4GAA4G,EAC5G,UAAU,CAAC,IAAI,CAAC,EAChB,SAAS,CACV,YAEA,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/feedback/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAkBlC,MAAM,UAAU,GAAoD;IAClE,OAAO,EACL,4FAA4F;IAC9F,MAAM,EAAE,yFAAyF;IACjG,MAAM,EAAE,yFAAyF;IACjG,OAAO,EACL,4FAA4F;IAC9F,IAAI,EAAE,mFAAmF;IACzF,IAAI,EAAE,mFAAmF;CAC1F,CAAC;AAEF;;;;;;GAMG;AACH;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAc;IACzE,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,uLAAuL,EACvL,UAAU,CAAC,IAAI,CAAC,EAChB,SAAS,CACV,YAEA,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hideyukimori/nene2-ui",
-  "version": "0.18.1",
+  "version": "0.19.1",
   "description": "NeNe fleet shared React UI kit — token-driven primitives on Tailwind v4 @theme. Components carry no design of their own; themes do.",
   "type": "module",
   "license": "MIT",

package/themes/default.css

@@ -164,6 +164,12 @@
   --spacing-x-slot-choice-box: var(--spacing-x-sm);
   --spacing-x-slot-badge-pad-x: var(--spacing-x-2xs);
   --spacing-x-slot-badge-pad-y: var(--spacing-x-3xs);
+  /* 🔴 Between a badge's icon and its label (#463). Unlike every other slot added so far,
+   * this one **changes what a Badge already renders**: the current default is *nothing
+   * specified*, so an icon sits flush against its text. Both consumers — nene-vault and
+   * nene-deal — were already correcting that independently, so the painting this replaces
+   * is one no consumer used. */
+  --spacing-x-slot-badge-gap: var(--spacing-x-3xs);
   --spacing-x-slot-switch-pad-x: var(--spacing-x-2xs);
   --spacing-x-slot-switch-pad-y: var(--spacing-x-3xs);
   --spacing-x-slot-alert-pad: var(--spacing-x-2xs);
@@ -185,6 +191,10 @@
   --radius-x-slot-button: var(--radius-x-md);
   --radius-x-slot-control: var(--radius-x-md);
   --radius-x-slot-badge: var(--radius-x-md);
+  /* A badge is a label, not body copy (#463). Inherited type made it the size and weight of
+   * whatever it sat in; both consumers overrode both. Same caveat as the gap above: this
+   * changes the current render. */
+  --text-x-slot-badge: var(--text-x-2xs);
   --radius-x-slot-switch: var(--radius-x-md);
   --radius-x-slot-alert: var(--radius-x-md);
   --radius-x-slot-toast: var(--radius-x-md);
@@ -410,7 +420,15 @@
   --spacing-x-slot-button-icon: var(--spacing-x-lg);
 
   /* ── Weight slots ─────────────────────────────────────────────────────────────
-   * `font-medium` appeared inline in four components. Same rule, same reason as colour. */
+   * `font-medium` appeared inline in four components. Same rule, same reason as colour.
+   *
+   * 🔴 The badge is `semibold`, and it is the one slot here that is not preserving an
+   * existing inline weight — it had none, which is why #463 exists. So the reason the other
+   * six are `medium` (that is what they already rendered) does not reach it, and the only
+   * evidence left is the consumers: nene-vault ships `font-semibold` and nene-deal measures
+   * 600 in production. **Nothing ships 500.** A badge also carries its weight at 11px, where
+   * the others sit at body size — the weight is doing work the size cannot. */
+  --font-weight-x-slot-badge: var(--font-weight-semibold);
   --font-weight-x-slot-button: var(--font-weight-medium);
   --font-weight-x-slot-table-header: var(--font-weight-medium);
   --font-weight-x-slot-detail-term: var(--font-weight-medium);