@hideyukimori/nene2-ui 0.15.0 → 0.16.1

package/dist/overlay/Modal.d.ts

@@ -1,24 +1,75 @@
 import { type ReactNode } from 'react';
-export interface ModalProps {
+type ModalSize = 'sm' | 'md' | 'lg';
+interface ModalBase {
     open: boolean;
-    /** Called for every dismissal the browser owns: Esc, the close control, the backdrop. */
+    /** Called for every dismissal routed through the browser's `close` event: Esc, and `close()`. */
     onClose: () => void;
-    /** Localized title. Also names the dialog for assistive tech. */
+    /** Localized title. Names the dialog for assistive tech, and is what the header shows. */
     title: string;
+    /**
+     * Width ceiling. Omitted, the dialog takes the browser's own sizing — which is what every
+     * caller got before this prop existed, so leaving it out changes nothing.
+     */
+    size?: ModalSize;
+    /**
+     * On a narrow viewport, sit against the bottom edge with the top corners rounded.
+     * Off by default: a dialog that changes shape at a breakpoint is a decision, not a default.
+     */
+    sheetOnMobile?: boolean;
+    /**
+     * Scroll the body instead of letting tall content spill out of the dialog. Off by default.
+     *
+     * 🔴 The kit adds no height cap of its own. The UA stylesheet already caps a `showModal()`
+     * dialog to the viewport — inventing a second ceiling here would mean a literal like `80vh`
+     * living in the theme, which the kit forbids (every slot default must be a scale reference,
+     * and the spacing scale is rem-based and cannot express a share of the viewport). What is
+     * actually missing without this prop is the scroll: at the UA cap, tall content is clipped.
+     * ⚠️ The cap itself is the browser's and is not asserted here — jsdom does not implement
+     * `showModal`, so it can only be verified in a real browser (see #392, live lane).
+     */
+    scrollable?: boolean;
     children: ReactNode;
 }
+interface PlainModal extends ModalBase {
+    header?: false;
+    closeLabel?: never;
+}
+interface HeaderModal extends ModalBase {
+    /** Draw a header: the title, and a control that closes the dialog. */
+    header: true;
+    /**
+     * Localized name for the close control.
+     *
+     * 🔴 Required with `header`, not optional-with-a-default. A default would be an English
+     * string shipped into every product's UI — the one thing a fleet kit must not do (I18N-2).
+     * The union makes the compiler ask for it exactly when it is going to be rendered.
+     */
+    closeLabel: string;
+}
+export type ModalProps = PlainModal | HeaderModal;
 /**
  * A modal dialog built on the native `<dialog>` element.
  *
  * 🔴 Why native. Focus trapping, Esc-to-dismiss, the backdrop, and rendering above every
  * stacking context are all things the browser already does correctly. Eight ships wrote
  * their own modal, which means the fleet currently maintains eight focus traps — the single
- * hardest piece of interaction code to get right, reimplemented per product.
+ * hardest piece of interaction code to get right, reimplemented per product. nene-vault is
+ * not one of those eight: it shipped `aria-modal="true"` on a plain element, which announces
+ * "everything outside is inert" while Tab walks straight out of it (measured in production
+ * 2026-08-25, #392). A dialog that lies to assistive tech is worse than one that admits it
+ * is not modal.
  *
  * 🔴 `showModal()` is called imperatively rather than through the `open` attribute, because
  * only `showModal()` puts the dialog in the top layer and traps focus; setting `open`
  * renders it inline and non-modal. jsdom 25.0.1 does not implement `showModal` at all
  * (measured 2026-08-23), and neither do browsers older than the feature, so the fallback
  * sets `open` — degraded but visible, rather than a dialog that never appears.
+ *
+ * 🔴 Every prop added in 0.16.0 (`header`, `size`, `sheetOnMobile`, `scrollable`) defaults to
+ * what the component already rendered, so a caller that passes none of them sees no change.
+ * That is only true while the defaults are a copy of the previous rendering — the lesson
+ * `--text-x-slot-button-sm-size` taught in #380, where "the default is harmless" held right
+ * up until a consumer overrode one side of a pair.
  */
-export declare function Modal({ open, onClose, title, children }: ModalProps): import("react").JSX.Element;
+export declare function Modal(props: ModalProps): import("react").JSX.Element;
+export {};

package/dist/overlay/Modal.js

@@ -1,22 +1,41 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from 'react';
 import { cx } from '../lib/cx.js';
+const SIZE_CLASS = {
+    sm: 'max-w-x-slot-modal-sm',
+    md: 'max-w-x-slot-modal-md',
+    lg: 'max-w-x-slot-modal-lg',
+};
+/** Bottom sheet below `sm`, ordinary dialog above it. */
+const SHEET_CLASS = 'max-sm:mt-auto max-sm:mb-0 max-sm:w-full max-sm:max-w-none max-sm:rounded-b-none';
 /**
  * A modal dialog built on the native `<dialog>` element.
  *
  * 🔴 Why native. Focus trapping, Esc-to-dismiss, the backdrop, and rendering above every
  * stacking context are all things the browser already does correctly. Eight ships wrote
  * their own modal, which means the fleet currently maintains eight focus traps — the single
- * hardest piece of interaction code to get right, reimplemented per product.
+ * hardest piece of interaction code to get right, reimplemented per product. nene-vault is
+ * not one of those eight: it shipped `aria-modal="true"` on a plain element, which announces
+ * "everything outside is inert" while Tab walks straight out of it (measured in production
+ * 2026-08-25, #392). A dialog that lies to assistive tech is worse than one that admits it
+ * is not modal.
  *
  * 🔴 `showModal()` is called imperatively rather than through the `open` attribute, because
  * only `showModal()` puts the dialog in the top layer and traps focus; setting `open`
  * renders it inline and non-modal. jsdom 25.0.1 does not implement `showModal` at all
  * (measured 2026-08-23), and neither do browsers older than the feature, so the fallback
  * sets `open` — degraded but visible, rather than a dialog that never appears.
+ *
+ * 🔴 Every prop added in 0.16.0 (`header`, `size`, `sheetOnMobile`, `scrollable`) defaults to
+ * what the component already rendered, so a caller that passes none of them sees no change.
+ * That is only true while the defaults are a copy of the previous rendering — the lesson
+ * `--text-x-slot-button-sm-size` taught in #380, where "the default is harmless" held right
+ * up until a consumer overrode one side of a pair.
  */
-export function Modal({ open, onClose, title, children }) {
+export function Modal(props) {
+    const { open, onClose, title, size, sheetOnMobile, scrollable, children } = props;
     const ref = useRef(null);
+    const titleId = useId();
     useEffect(() => {
         const el = ref.current;
         if (el === null)
@@ -39,9 +58,20 @@ export function Modal({ open, onClose, title, children }) {
             el.removeAttribute('open');
         }
     }, [open]);
-    return (_jsx("dialog", { ref: ref, "aria-label": title, 
+    // The header names the dialog through the heading it already draws; without one there is
+    // nothing on screen to point at, so the title has to be carried as a label.
+    const naming = props.header ? { 'aria-labelledby': titleId } : { 'aria-label': title };
+    return (_jsxs("dialog", { ref: ref, ...naming, 
         // The browser fires `close` for Esc as well as for close(); routing both through the
         // caller keeps `open` from drifting out of sync with what is on screen.
-        onClose: onClose, onCancel: onClose, className: cx('bg-x-slot-modal-bg text-x-slot-modal-fg border border-x-slot-modal-border rounded-x-slot-modal', 'p-x-slot-modal-pad font-sans backdrop:bg-x-slot-modal-scrim/50'), children: children }));
+        onClose: onClose, onCancel: onClose, className: cx(
+        // 🔴 `m-auto` is what centres a `showModal()` dialog. The UA stylesheet already says
+        // `dialog { margin: auto }`, but Tailwind's preflight (`* { margin: 0 }`, author origin)
+        // erases it, so on every Tailwind ship the dialog sat at (0,0) — measured in nene-vault's
+        // production at 1280px, where the old hand-written modal had been at (380,119) (#417).
+        // The sheet classes below (`max-sm:mt-auto max-sm:mb-0`) always assumed this margin was
+        // there; saying it explicitly is the kit owning an assumption it had been borrowing.
+        // jsdom does not implement `showModal`, so the position itself is a live-lane check.
+        'm-auto bg-x-slot-modal-bg text-x-slot-modal-fg border border-x-slot-modal-border rounded-x-slot-modal', 'p-x-slot-modal-pad font-sans backdrop:bg-x-slot-modal-scrim/50', size !== undefined && SIZE_CLASS[size], sheetOnMobile === true && SHEET_CLASS, scrollable === true && 'flex flex-col'), children: [props.header === true && (_jsxs("header", { className: "mb-x-slot-modal-header-gap flex items-start justify-between gap-x-slot-modal-header-gap", children: [_jsx("h2", { id: titleId, className: "font-x-slot-modal-title text-x-slot-modal-title-size", children: title }), _jsx("button", { type: "button", "aria-label": props.closeLabel, onClick: onClose, className: "rounded-x-slot-control text-x-slot-modal-close-fg leading-none hover:brightness-x-slot-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-x-slot-focus-ring", children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) })] })), scrollable === true ? _jsx("div", { className: "min-h-0 overflow-y-auto", children: children }) : children] }));
 }
 //# sourceMappingURL=Modal.js.map

package/dist/overlay/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/overlay/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAWlC;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAc;IAClE,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,EAAE,KAAK,IAAI;YAAE,OAAO;QAExB,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,OAAO,EAAE,CAAC,SAAS,KAAK,UAAU,EAAE,CAAC;gBACvC,IAAI,CAAC,EAAE,CAAC,IAAI;oBAAE,EAAE,CAAC,SAAS,EAAE,CAAC;YAC/B,CAAC;iBAAM,CAAC;gBACN,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YAC9B,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,OAAO,EAAE,CAAC,KAAK,KAAK,UAAU,EAAE,CAAC;YACnC,IAAI,EAAE,CAAC,IAAI;gBAAE,EAAE,CAAC,KAAK,EAAE,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,gBACI,KAAK;QACjB,qFAAqF;QACrF,wEAAwE;QACxE,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,EAAE,CACX,gGAAgG,EAChG,gEAAgE,CACjE,YAEA,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/overlay/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAuDlC,MAAM,UAAU,GAA8B;IAC5C,EAAE,EAAE,uBAAuB;IAC3B,EAAE,EAAE,uBAAuB;IAC3B,EAAE,EAAE,uBAAuB;CAC5B,CAAC;AAEF,yDAAyD;AACzD,MAAM,WAAW,GACf,kFAAkF,CAAC;AAErF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAClF,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,EAAE,KAAK,IAAI;YAAE,OAAO;QAExB,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,OAAO,EAAE,CAAC,SAAS,KAAK,UAAU,EAAE,CAAC;gBACvC,IAAI,CAAC,EAAE,CAAC,IAAI;oBAAE,EAAE,CAAC,SAAS,EAAE,CAAC;YAC/B,CAAC;iBAAM,CAAC;gBACN,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YAC9B,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,OAAO,EAAE,CAAC,KAAK,KAAK,UAAU,EAAE,CAAC;YACnC,IAAI,EAAE,CAAC,IAAI;gBAAE,EAAE,CAAC,KAAK,EAAE,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,yFAAyF;IACzF,4EAA4E;IAC5E,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;IAEvF,OAAO,CACL,kBACE,GAAG,EAAE,GAAG,KACJ,MAAM;QACV,qFAAqF;QACrF,wEAAwE;QACxE,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,EAAE;QACX,qFAAqF;QACrF,yFAAyF;QACzF,0FAA0F;QAC1F,uFAAuF;QACvF,wFAAwF;QACxF,qFAAqF;QACrF,qFAAqF;QACrF,uGAAuG,EACvG,gEAAgE,EAChE,IAAI,KAAK,SAAS,IAAI,UAAU,CAAC,IAAI,CAAC,EACtC,aAAa,KAAK,IAAI,IAAI,WAAW,EACrC,UAAU,KAAK,IAAI,IAAI,eAAe,CACvC,aAEA,KAAK,CAAC,MAAM,KAAK,IAAI,IAAI,CACxB,kBAAQ,SAAS,EAAC,yFAAyF,aACzG,aAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,sDAAsD,YAC9E,KAAK,GACH,EACL,iBACE,IAAI,EAAC,QAAQ,gBACD,KAAK,CAAC,UAAU,EAC5B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,6LAA6L,YAIvM,8BAAkB,MAAM,uBAAc,GAC/B,IACF,CACV,EACA,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,yBAAyB,YAAE,QAAQ,GAAO,CAAC,CAAC,CAAC,QAAQ,IACpF,CACV,CAAC;AACJ,CAAC"}

package/package.json

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

@@ -389,6 +389,27 @@
   --text-x-slot-button-sm-size: inherit;
   --text-x-slot-choice-size: inherit;
 
+  /* ── Modal slots (0.16.0 / #392) ──────────────────────────────────────────────
+   * 🔴 Every one of these is reached only through a prop that defaults to off, so adding
+   * them changes nothing for a caller that passes none. The dialog itself is unchanged.
+   *
+   * The three widths choose Tailwind's own container steps rather than inventing lengths.
+   * nene-vault measured 432px and 520px in production; the fleet's own dialogs cluster at
+   * 560px (15 uses), 640 (6), 680 (4), 600 (4), 420 (4), 520 (3), 460 (3) — measured across
+   * each ship's `frontend/src` on 2026-08-25. `md`/`lg`/`xl` cover those clusters, and a product
+   * whose value is not on the scale overrides the slot rather than the scale (README §①). */
+  --container-x-slot-modal-sm: var(--container-md);
+  --container-x-slot-modal-md: var(--container-lg);
+  --container-x-slot-modal-lg: var(--container-xl);
+
+  --spacing-x-slot-modal-header-gap: var(--spacing-x-xs);
+  --font-weight-x-slot-modal-title: var(--font-weight-medium);
+  /* `inherit`, so the header title takes the dialog's own size unless a product says
+   * otherwise. There is no previous rendering to copy — the header is new — and picking a
+   * step here would decide type for every product that turns the header on. */
+  --text-x-slot-modal-title-size: inherit;
+  --color-x-slot-modal-close-fg: var(--color-text-muted);
+
   /* ── Shadow slots ─────────────────────────────────────────────────────────────
    * 🔴 Shadow was the one dimension that never got slots (#386). 0.9.0 moved "colour, weight
    * and the type scale" through slots and the enumeration in that sentence decided the