@hideyukimori/nene2-ui 0.18.0 → 0.18.1

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/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.18.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

@@ -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,