@godxjp/ui 33.24.0 → 33.25.0

package/dist/tokens/components/control.css

@@ -321,6 +321,9 @@
 
   --select-content-max-height: 24rem;
 
+  --select-content-max-width: 32rem;
+  --select-content-viewport-inset: var(--space-6);
+
   --select-content-inline-size: auto;
 
   --select-content-background: initial;

package/dist/tokens/components/editorial.css

@@ -208,7 +208,7 @@
   --editorial-search-border-color: initial;
 
   --editorial-search-background: initial;
-  --editorial-search-shadow: 0 4px 16px rgb(var(--shadow-color, 0 0 0) / 0.06);
+  --editorial-search-shadow: initial;
   --editorial-search-icon-size: var(--icon-size-lg);
 
   --editorial-search-scope-font-weight: inherit;
@@ -232,7 +232,7 @@
   --editorial-search-popup-max-height: min(32rem, 70vh);
   --editorial-search-popup-padding-block: calc(var(--space-1) + 0.125rem);
   --editorial-search-popup-radius: var(--radius);
-  --editorial-search-popup-shadow: 0 12px 32px rgb(var(--shadow-color, 0 0 0) / 0.12);
+  --editorial-search-popup-shadow: initial;
 
   --editorial-search-popup-border-color: initial;
 
@@ -317,7 +317,7 @@
   --editorial-showcase-caption-gap: calc(var(--space-3) + 0.0625rem);
   --editorial-showcase-caption-min-width: 16.25rem;
   --editorial-showcase-caption-radius: var(--radius);
-  --editorial-showcase-caption-shadow: 0 4px 16px rgb(var(--shadow-color, 0 0 0) / 0.06);
+  --editorial-showcase-caption-shadow: initial;
 
   --editorial-showcase-caption-icon-size: calc(var(--icon-size-xl) + 0.25rem);
 
@@ -365,7 +365,7 @@
   --editorial-banner-media-align: start;
 
   --editorial-catalog-card-radius: var(--radius);
-  --editorial-catalog-card-hover-shadow: 0 10px 28px rgb(var(--shadow-color, 0 0 0) / 0.1);
+  --editorial-catalog-card-hover-shadow: initial;
   --editorial-catalog-card-hover-translate: -3px;
   --editorial-catalog-card-media-aspect-size: 1 / 1.05;
   --editorial-catalog-card-media-padding-block-start: var(--space-12);
@@ -450,7 +450,7 @@
   --editorial-spotlight-media-inset-block-start: 2rem;
   --editorial-spotlight-media-offset-angle: 12deg;
   --editorial-spotlight-media-shadow: 0 6px 6px rgb(40 25 20 / 0.12);
-  --editorial-spotlight-hover-shadow: 0 4px 16px rgb(var(--shadow-color, 0 0 0) / 0.06);
+  --editorial-spotlight-hover-shadow: initial;
 
   --editorial-journal-cover-height: 13.25rem;
 
@@ -490,7 +490,7 @@
   --editorial-journal-arrow-size: 2rem;
   --editorial-journal-arrow-icon-size: var(--icon-size-md);
   --editorial-journal-focus-offset: -4px;
-  --editorial-journal-hover-shadow: 0 12px 28px rgb(var(--shadow-color, 0 0 0) / 0.08);
+  --editorial-journal-hover-shadow: initial;
 
   --editorial-masthead-height: 5.5rem;
   --editorial-masthead-gap: var(--space-8);
@@ -603,6 +603,9 @@
   --editorial-catalog-detail-art-height: auto;
   --editorial-catalog-detail-art-max-width: none;
   --editorial-catalog-detail-art-padding: var(--space-10);
+  --editorial-catalog-detail-loading-background: initial;
+  --editorial-catalog-detail-loading-duration: var(--duration-loop);
+  --editorial-catalog-detail-loading-alpha: 0.5;
   --editorial-catalog-detail-art-radius: calc(var(--radius) * 2);
   --editorial-catalog-detail-media-width: 15.625rem;
   --editorial-catalog-detail-media-height: 22.5rem;

package/docs/CONSUMER-RULES.md

@@ -4,6 +4,33 @@ Read this once; the audit enforces it. What the audit cannot see (how a screen i
 should look like) is in the package's `DESIGN.md`. Everything else in `docs/` is for contributors.
 
 1. Load styles with `import "@godxjp/ui/styles.css"` (precompiled, no Tailwind needed) or `@import "@godxjp/ui/styles"` (Tailwind v4). Neither ships font files: fonts are opt-in since v32 (`pnpm add @fontsource/noto-sans-jp @fontsource/m-plus-2`, then `@import "@godxjp/ui/styles/fonts.css"` after the styles import; the GoDX preset does this for you). Never cherry-pick `*-layout.css`.
+
+   **Supported opt-out for Tailwind v4 (#1475):** replace `@import "@godxjp/ui/styles"` with
+   `@import "@godxjp/ui/styles/application"` in apps that render no editorial, catalog or holding
+   components. It retains foundation, shell, controls, tables, forms, navigation, charts and vendor
+   styles. `styles` and `styles/core` retain every family for compatibility. If editorial components
+   are added later, return to `styles`, or import `styles/editorial` after `styles/application`.
+   `styles/editorial` is additive: it requires the application entry. All entries bring no bundled fonts.
+
+   For a smaller, content-aware build, run the package-owned pruner instead of guessing layers:
+
+   ```sh
+   npx @godxjp/ui prune-css "src/**/*.tsx" --exclude-family editorial --out src/godx-ui.css
+   ```
+
+   Import the generated file instead of `@godxjp/ui/styles`; keep your Tailwind `@source` declarations.
+   The optional `--exclude-family editorial` fails if a detected component needs that family. Named
+   imports are required for a useful slice; namespace/dynamic imports conservatively retain all layers.
+   Both the family entries and the pruner use the generated `styles/layers.json` dependency map.
+   Re-run after component imports change and after upgrading the package. Never edit generated imports.
+
+   **Without Tailwind (#1455):** use the same command with `--precompiled`. The generated file
+   resolves package-owned plain CSS slices through public exports; bundle its CSS imports with your
+   existing CSS bundler (Vite, webpack or esbuild). It requires no Tailwind compiler. A browser alone
+   cannot resolve npm package specifiers. Fonts stay opt-in (`--fonts`). The packed-contract gate
+   installs the tarball outside the repository and builds both modes; reproduce its measured byte
+   counts with `pnpm build && node scripts/check-packed-css-pruning.mjs`.
+
 2. **Mount `<AppProvider defaultLocale="…">` once, at the root.** Without it the kit's OWN strings (dialog close/cancel/delete, counters, picker labels) fall to the resting locale (`<html lang>` when it names a registered locale, else `en`) and pickers to UTC (gh#1005). A development build now warns once when a kit component renders outside it; `syncI18nLocale(locale, fallback)` is the escape for an app that truly cannot mount the provider. Every page is `<PageContainer title extra footer>` (a `subtitle` only when it adds a fact the title does not); its sections are spaced by the page. Group items inside a section with `<Flex direction="col" gap>` or `<ResponsiveGrid>`.
 3. No Tailwind layout on your own elements: no `flex`, `grid`, `gap-*`, `p-*`, `m-*`, `space-*`. Rows are `<Flex>` (default row), stacks are `<Flex direction="col">`, grids are `<ResponsiveGrid>`. A list's filters are ONE `<FilterBar>` that wraps at every width — never a sideways-scrolling strip of filters or filter chips; past 2–4 filters the rest go behind one "More filters" `Sheet` (cardinal rule #51, pattern `list-filters`, audit rules `filter-bar-no-overflow`, `filter-strip-no-scroll` and `hand-rolled-filter-bar`). Filters are packed at the start: never a hand-built `<Flex justify="between">` of FormFields above a table. Many conditions or an explicit 検索 button → `SearchForm` (pattern `search-form`); field × operator rows saved as views → pattern `condition-builder`.
 4. No hand-rolled surfaces: no `rounded-* border bg-*` divs. A box is `Card`, a pill is `Badge`, a person is `Avatar`, a row is `ListRow`, a label/value pair is `Descriptions`, an empty area is `EmptyState`, a read-only sample of a colour the USER chose is `Swatch`. A LIST of those rows is `<Flex as="ul" marker="none" direction="col" gap="none">` with `<ListRow as="li">` children — `marker="none"` keeps the `<ul>`, the `<li>` semantics and the gap token while dropping the bullet and the indent. Never a raw `<ul>`/`<ol>` (it carries no gap token), never `<div role="list">` + `<div role="listitem">`, and never a wrapper around each row: the divider is `:not(:last-child)` among siblings, so a row alone in its own wrapper is always the last one and EVERY divider disappears silently. A bulleted prose list is the same `<Flex as="ul">` without `marker`.
@@ -54,3 +81,11 @@ information belongs on the screen:
 If the control is disabled _pending something the user can fix_, prefer leaving it enabled and
 explaining on submit: an inert control with a paragraph beside it is often a validation message
 wearing a disguise.
+
+## Floating content and toast imports
+
+Use `DropdownMenuContent` only for menu collection nodes (`DropdownMenuItem`, checkbox/radio items, groups, labels and separators). Arbitrary notification headers, lists and links use `Popover` + `ListRow`. Development diagnostics and `dropdown-menu-non-menu-children` identify unsupported DOM children. Opaque components returning menu items remain supported.
+
+`PopoverContent` scrolls automatically when the available viewport height caps it; focus rings stay inside the scroll boundary, including `flush` content.
+
+Always use `import { toast } from "@godxjp/ui"` (or `@godxjp/ui/feedback`) with the kit's `Toaster`. Do not import toast directly from `sonner`: an app-installed version can create a separate toast store and calls never reach the kit's Toaster. The `no-direct-sonner-import` audit rule flags runtime imports. Sonner remains a dependency; no peer dependency migration is required.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "33.24.0",
-  "godxUiMcp": "33.24.0",
+  "version": "33.25.0",
+  "godxUiMcp": "33.25.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -81,6 +81,8 @@
       "import": "./dist/lab/index.js"
     },
     "./styles": "./dist/styles/index.css",
+    "./styles/application": "./dist/styles/application.css",
+    "./styles/editorial": "./dist/styles/editorial.css",
     "./styles/core": "./dist/styles/core.css",
     "./styles/core-with-fallbacks": "./dist/styles/core-with-fallbacks.css",
     "./styles/core-with-jis-level1": "./dist/styles/core-with-jis-level1.css",

package/scripts/prune-css.mjs

@@ -40,18 +40,25 @@ const args = process.argv.slice(2);
 if (args.includes("--help") || args.includes("-h") || args.length === 0) {
   console.log(`prune-css — emit a stylesheet with only the @godxjp/ui CSS layers your app uses
 
-usage: node node_modules/@godxjp/ui/scripts/prune-css.mjs <src dir/glob …> [--out <file>] [--fonts]
+usage: node node_modules/@godxjp/ui/scripts/prune-css.mjs <src dir/glob …> [--out <file>] [--fonts] [--precompiled]
 
   <src dir/glob …>  where your app's source lives (directories are walked; globs expand)
   --out <file>      where to write the css (default: godx-ui.css in the current directory)
+  --exclude-family <name>  fail if detected components require the omitted family (e.g. editorial)
   --fonts           include the bundled M PLUS 2 / Noto Sans JP @font-face declarations
                     (default mirrors @godxjp/ui/styles/core: none — bring your own fonts)
+  --precompiled     import the precompiled slices (plain CSS, dist/styles/precompiled/) instead
+                    of the Tailwind sources: for apps that use @godxjp/ui/styles.css and have
+                    no Tailwind compiler (gh#1455)
 
-Then import the emitted file INSTEAD of "@godxjp/ui/styles" and re-run this command whenever
+Then import the emitted file INSTEAD of "@godxjp/ui/styles" (or "@godxjp/ui/styles.css" with
+--precompiled) and re-run this command whenever
 the set of components you use changes, and after every @godxjp/ui upgrade.`);
   process.exit(0);
 }
 
+const excludeFlag = args.indexOf("--exclude-family");
+const excludedFamily = excludeFlag === -1 ? undefined : args[excludeFlag + 1];
 const outFlag = args.indexOf("--out");
 const OUT = outFlag !== -1 ? args[outFlag + 1] : "godx-ui.css";
 if (outFlag !== -1 && (!OUT || OUT.startsWith("--"))) {
@@ -59,8 +66,12 @@ if (outFlag !== -1 && (!OUT || OUT.startsWith("--"))) {
   process.exit(2);
 }
 const FONTS = args.includes("--fonts");
+const PRECOMPILED = args.includes("--precompiled");
 const positionals = args.filter(
-  (a, i) => !a.startsWith("--") && (outFlag === -1 || i !== outFlag + 1),
+  (a, i) =>
+    !a.startsWith("--") &&
+    (outFlag === -1 || i !== outFlag + 1) &&
+    (excludeFlag === -1 || i !== excludeFlag + 1),
 );
 
 // ── the package's own graph, version-locked ──────────────────────────────────
@@ -85,6 +96,13 @@ if (manifest.version !== pkg.version) {
   process.exit(2);
 }
 
+if (excludeFlag !== -1 && !Object.hasOwn(manifest.families ?? {}, excludedFamily ?? "")) {
+  console.error(
+    `prune-css: unknown --exclude-family ${excludedFamily ?? "(missing)"}; choose ${Object.keys(manifest.families ?? {}).join(", ")}`,
+  );
+  process.exit(2);
+}
+
 // ── scan consumer sources ────────────────────────────────────────────────────
 
 const SCANNABLE = /\.(tsx|jsx|ts|mjs|js|cjs|mts)$/;
@@ -184,9 +202,35 @@ for (const name of used) {
   for (const v of entry.vendor ?? []) vendors.add(v);
 }
 
+if (excludedFamily && manifest.families[excludedFamily].some((file) => layers.has(file))) {
+  console.error(
+    `prune-css: cannot exclude ${excludedFamily}: detected components require it. Remove their imports or keep the family.`,
+  );
+  process.exit(2);
+}
+
 const keptLayers = manifest.order.filter((f) => layers.has(f));
 const keptVendors = manifest.vendor.filter((f) => vendors.has(f));
-const asImport = (f) => `@import "@godxjp/ui/styles/${f.replace(/\.css$/, "")}";`;
+// --precompiled (gh#1455): the same slice, from the plain-CSS cut of styles.css that
+// build-precompiled-css.mjs writes per manifest file. The fonts sheet has no Tailwind in it, so it
+// is imported from its usual place either way.
+const asImport = (f) =>
+  PRECOMPILED && f !== manifest.fonts
+    ? `@import "@godxjp/ui/styles/precompiled/${f.replace(/\.css$/, "")}";`
+    : `@import "@godxjp/ui/styles/${f.replace(/\.css$/, "")}";`;
+if (PRECOMPILED) {
+  const missing = [...keptVendors, manifest.base, ...keptLayers].filter(
+    (f) => !existsSync(join(PKG_ROOT, "dist/styles/precompiled", f)),
+  );
+  if (missing.length) {
+    console.error(
+      `prune-css: --precompiled, but the installed @godxjp/ui ships no precompiled slice for ` +
+        `${missing.join(", ")} (dist/styles/precompiled/). Upgrade the package; inside the repo ` +
+        "itself, run `pnpm build` first.",
+    );
+    process.exit(2);
+  }
+}
 
 const lines = [
   "/*",
@@ -194,17 +238,21 @@ const lines = [
   ` *`,
   ` * @godxjp/ui version: ${pkg.version}`,
   ` * components detected: ${[...used].sort().join(", ")}`,
-  ` * layers: ${keptLayers.length} of ${manifest.order.length} (+base${FONTS ? "+fonts" : ", no bundled fonts — like styles/core"})`,
+  ` * layers: ${keptLayers.length} of ${manifest.order.length} (+base${FONTS ? "+fonts" : ", no bundled fonts — like styles/core"})${PRECOMPILED ? ", precompiled (no Tailwind needed)" : ""}`,
   ` *`,
   ` * Re-run when the components your app uses change, and after every @godxjp/ui upgrade:`,
-  ` *   node node_modules/@godxjp/ui/scripts/prune-css.mjs <src …> --out <this file>${FONTS ? " --fonts" : ""}`,
+  ` *   node node_modules/@godxjp/ui/scripts/prune-css.mjs <src …> --out <this file>${FONTS ? " --fonts" : ""}${PRECOMPILED ? " --precompiled" : ""}`,
   ` *`,
   ` * Hand-editing this file is the cherry-picking the README forbids: layers share rules and`,
   ` * a missing one fails silently. Change your imports, then re-run the tool.`,
   " */",
   // Layer order must be declared before the first @import — same statement, same reasoning,
-  // as styles/index.css (vendor between base and components; see the comment there).
-  "@layer theme, base, vendor, components, utilities;",
+  // as styles/index.css (vendor between base and components; see the comment there). Precompiled
+  // CSS also carries Tailwind's `properties` layer (the @property fallbacks), which the compiler
+  // puts FIRST in styles.css; named here, it keeps that place instead of landing after utilities.
+  PRECOMPILED
+    ? "@layer properties, theme, base, vendor, components, utilities;"
+    : "@layer theme, base, vendor, components, utilities;",
   ...keptVendors.map(asImport),
   asImport(manifest.base),
   ...(FONTS ? [asImport(manifest.fonts)] : []),

package/scripts/ui-audit.mjs

@@ -366,6 +366,27 @@ const LIST_TAGS = new Set(["DataTable", "Table", "List", "ListRow"]);
  *   CSS Logical Properties L1 (W3C) · HTML Living Standard (WHATWG).
  */
 const RULES = [
+  {
+    id: "no-direct-sonner-import",
+    replacement: "import { toast } from '@godxjp/ui'",
+    scope: "consumer",
+    severity: "error",
+    spansElement: true,
+    test: /\bimport\s+(?!type\b)(?:[^;"']*?\s+from\s*)?["']sonner["']/g,
+    message:
+      "import toast from @godxjp/ui — use `import { toast } from \"@godxjp/ui\"`; a consumer's sonner may own a different toast store from the kit's Toaster.",
+  },
+  {
+    id: "dropdown-menu-non-menu-children",
+    replacement: "Popover + ListRow",
+    scope: "consumer",
+    severity: "error",
+    spansElement: true,
+    matches: dropdownNonMenuMatches,
+    message:
+      "DropdownMenuContent accepts menu collection children only. Use DropdownMenuItem for actions; use Popover + ListRow for arbitrary headers, lists and links.",
+  },
+
   {
     id: "no-utility-spacing",
     replacement: "Flex gap / ResponsiveGrid / PageContainer",
@@ -2936,3 +2957,18 @@ if (filesScanned === 0 && !changedNoFiles) {
 
 // See the note above --rules: exitCode, so a large JSON report drains fully.
 if (filesScanned > 0 || changedNoFiles) process.exitCode = errors.length > 0 ? 1 : 0;
+
+/** Known DOM children are invalid collection nodes; opaque wrappers are deliberately allowed. */
+function* dropdownNonMenuMatches(source) {
+  const containers = new Set([
+    "DropdownMenuContent",
+    "DropdownMenuSubContent",
+    "DropdownMenuGroup",
+    "DropdownMenuRadioGroup",
+  ]);
+  for (const { tag, index, openTag, stack } of jsxElements(source)) {
+    if (!/^[a-z]/.test(tag)) continue;
+    const parent = [...stack].reverse().find((frame) => !frame.attr && frame.tag !== "");
+    if (parent && containers.has(parent.tag)) yield { 0: openTag, index };
+  }
+}