@hideyukimori/nene2-ui 0.18.0 → 0.19.0

package/README.md

@@ -137,12 +137,13 @@ The theme has two layers, and the line between them is the point.
 
 ### ② Slots — 🟢 redefine these
 
-Every design value a component uses comes from a slot, and slots are named per component:
+Every design value a component takes **from the theme** comes from a slot, and slots are named
+per component:
 
 ```css
 /* your product's theme, loaded after the kit's */
 @theme {
-  --spacing-x-slot-card-pad: var(--spacing-x-lg); /* roomier cards, everywhere */
+  --spacing-x-slot-modal-pad: var(--spacing-x-lg); /* roomier modals, everywhere */
   --color-x-slot-field-label: var(--color-text-primary); /* darker field labels */
   --radius-x-slot-control: var(--radius-x-md);
 }
@@ -151,6 +152,18 @@ Every design value a component uses comes from a slot, and slots are named per c
 This is where your product decides how it looks. Change a slot and every instance of that
 component follows.
 
+🔴 **"From the theme" is the limit of that sentence, and the limit is load-bearing.** The
+**layout components take their spacing from props, not from slots** — `Box` and `Card` (`pad`),
+`Stack` (`gap`), `Section` and `Grid` (both). That is deliberate rather than an omission: layout
+spacing is a decision the *caller* makes per instance, so it is chosen at the call site. Those
+props still pick a **step from the scale** (`pad="lg"`), so a product cannot invent a value here
+either — but **no slot exists for them**.
+
+⚠️ **This is the part that bites.** Writing `--spacing-x-slot-card-pad` in your theme does
+nothing at all: **there is no such slot**, and nothing warns you — not an error, not a console
+message, not a failing build. To make every card roomier, pass `pad` where you use `Card`, or
+wrap it once in a component of your own.
+
 ### ① The scale — 🔒 do not redefine
 
 `--spacing-x-3xs` … `--spacing-x-2xl`, `--radius-x-none` … `--radius-x-3xl` plus
@@ -223,9 +236,12 @@ second only under `@media (pointer: coarse)`.
 
 ### Composing a slot
 
-A slot can hold several steps — four-sided padding is just CSS:
+A slot can hold several steps — four-sided padding is just CSS. The slot below belongs to a
+component **of your own**, not to the kit (`login-form` is not a kit component); a product
+names slots for its own parts the same way the kit does:
 
 ```css
+/* in your product, for your own <LoginForm> */
 --spacing-x-slot-login-form-pad: var(--spacing-x-xl) var(--spacing-x-md) var(--spacing-x-lg)
   var(--spacing-x-md);
 ```

package/dist/feedback/Badge.js

@@ -16,6 +16,6 @@ const TONE_CLASS = {
  * find every such lie afterwards except by reading every screen.
  */
 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 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,MAAM,UAAU,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAc;IACzE,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,qKAAqK,EACrK,UAAU,CAAC,IAAI,CAAC,EAChB,SAAS,CACV,YAEA,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/index.js

@@ -39,8 +39,10 @@ export { Pagination } from './data/Pagination.js';
 export { tokens } from './theme/tokens.js';
 // Internal helpers, exported so downstream components can compose consistently.
 export { cx } from './lib/cx.js';
-// Controls the kit does not ship yet (Textarea has 7 independent implementations in the
-// fleet) can at least carry the same focus and disabled behaviour instead of inventing it.
+// A control the kit does not ship — one a product writes for itself, or one still waiting for
+// a slot in the kit — can at least carry the same focus and disabled behaviour instead of
+// inventing it. (Written when `Textarea` was the example, with 7 independent implementations
+// across the fleet; `Textarea` ships now, so the example is gone but the reason is not.)
 export { CLICKABLE_CLASS, CONTROL_CLASS, DISABLED_CLASS, FOCUS_CLASS, HOVER_CLASS, } from './lib/states.js';
 // Lets a consumer's build prove the kit is in its Tailwind `@source` (#316).
 export { SOURCE_PROBE_CLASS } from './lib/source-probe.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,aAAa;AACb,OAAO,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,KAAK,EAAmB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAqB,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,IAAI,EAAkB,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,IAAI,EAAkB,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,KAAK,EAAmB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAElE,SAAS;AACT,OAAO,EAAE,UAAU,EAAwB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAmB,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAiB,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAqB,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AAKxD,QAAQ;AACR,OAAO,EAAE,SAAS,EAAuB,MAAM,sBAAsB,CAAC;AAEtE,sFAAsF;AACtF,sDAAsD;AACtD,OAAO,EAAE,YAAY,EAA0B,MAAM,0BAA0B,CAAC;AAChF,OAAO,EAAE,UAAU,EAAwB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAwB,MAAM,wBAAwB,CAAC;AAE1E,UAAU;AACV,OAAO,EAAE,KAAK,EAAmB,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAA2B,MAAM,4BAA4B,CAAC;AAEpF,WAAW;AACX,OAAO,EAAE,KAAK,EAAmB,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAyB,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,aAAa,EAA2B,MAAM,6BAA6B,CAAC;AACrF,OAAO,EACL,QAAQ,GAIT,MAAM,6BAA6B,CAAC;AAErC,OAAO;AACP,OAAO,EAAE,UAAU,EAAwC,MAAM,sBAAsB,CAAC;AACxF,OAAO,EAAE,SAAS,EAAwC,MAAM,qBAAqB,CAAC;AACtF,OAAO,EAAE,UAAU,EAAwB,MAAM,sBAAsB,CAAC;AAExE,QAAQ;AACR,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,gFAAgF;AAChF,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,wFAAwF;AACxF,2FAA2F;AAC3F,OAAO,EACL,eAAe,EACf,aAAa,EACb,cAAc,EACd,WAAW,EACX,WAAW,GACZ,MAAM,iBAAiB,CAAC;AACzB,6EAA6E;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,aAAa;AACb,OAAO,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,KAAK,EAAmB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAqB,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,IAAI,EAAkB,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,IAAI,EAAkB,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,KAAK,EAAmB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAElE,SAAS;AACT,OAAO,EAAE,UAAU,EAAwB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAmB,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAiB,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAqB,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AAKxD,QAAQ;AACR,OAAO,EAAE,SAAS,EAAuB,MAAM,sBAAsB,CAAC;AAEtE,sFAAsF;AACtF,sDAAsD;AACtD,OAAO,EAAE,YAAY,EAA0B,MAAM,0BAA0B,CAAC;AAChF,OAAO,EAAE,UAAU,EAAwB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAwB,MAAM,wBAAwB,CAAC;AAE1E,UAAU;AACV,OAAO,EAAE,KAAK,EAAmB,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAA2B,MAAM,4BAA4B,CAAC;AAEpF,WAAW;AACX,OAAO,EAAE,KAAK,EAAmB,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAyB,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,aAAa,EAA2B,MAAM,6BAA6B,CAAC;AACrF,OAAO,EACL,QAAQ,GAIT,MAAM,6BAA6B,CAAC;AAErC,OAAO;AACP,OAAO,EAAE,UAAU,EAAwC,MAAM,sBAAsB,CAAC;AACxF,OAAO,EAAE,SAAS,EAAwC,MAAM,qBAAqB,CAAC;AACtF,OAAO,EAAE,UAAU,EAAwB,MAAM,sBAAsB,CAAC;AAExE,QAAQ;AACR,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,gFAAgF;AAChF,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,8FAA8F;AAC9F,0FAA0F;AAC1F,6FAA6F;AAC7F,yFAAyF;AACzF,OAAO,EACL,eAAe,EACf,aAAa,EACb,cAAc,EACd,WAAW,EACX,WAAW,GACZ,MAAM,iBAAiB,CAAC;AACzB,6EAA6E;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hideyukimori/nene2-ui",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "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

@@ -130,10 +130,15 @@
   /* ─────────────────────────────────────────────────────────────────────────
    * ② SLOTS — a product may redefine these.
    *
-   * Every design value a component uses comes from here, and every slot's default points
-   * back at the scale above. That split is the whole idea: a product decides **which step
-   * a part uses**, and cannot invent a step. Change `--spacing-x-slot-card-pad` to
-   * `var(--spacing-x-lg)` and cards get roomier everywhere; you still cannot write `2.25`.
+   * Every design value a component takes **from the theme** comes from here, and every slot's
+   * default points back at the scale above. That split is the whole idea: a product decides
+   * **which step a part uses**, and cannot invent a step. Change `--spacing-x-slot-modal-pad`
+   * to `var(--spacing-x-lg)` and every modal gets roomier; you still cannot write `2.25`.
+   *
+   * 🔴 The layout components (`Box`, `Card`, `Stack`, `Section`, `Grid`) are the exception:
+   * their padding and gap come from **props**, not from slots, because the caller decides
+   * them per instance. There is no `--spacing-x-slot-card-pad` — setting one does nothing,
+   * silently. See README §② (#389).
    *
    * Named per component rather than per role (hide's ruling, 2026-08-23): sharing one slot
    * between `Modal` and `Card` can be arranged later by pointing both at the same value,
@@ -159,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);
@@ -180,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);
@@ -405,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);