@godxjp/ui 33.15.0 → 33.17.0

package/dist/theme/famgia.service.css

@@ -21,12 +21,14 @@
     "Helvetica Neue", Arial, sans-serif;
 }
 
-.dark {
-  --primary: 221 90% 66%;
-  --primary-foreground: 222 47% 11%;
-
-  --ring: 221 90% 66%;
-  --text-link: 221 90% 72%;
-  --text-brand: 221 90% 70%;
-  --text-primary: 221 90% 68%;
+@media not print {
+  .dark {
+    --primary: 221 90% 66%;
+    --primary-foreground: 222 47% 11%;
+
+    --ring: 221 90% 66%;
+    --text-link: 221 90% 72%;
+    --text-brand: 221 90% 70%;
+    --text-primary: 221 90% 68%;
+  }
 }

package/dist/themes/godx-tokens.css

@@ -10,15 +10,17 @@
   --shadow-color: 18 43 38;
 }
 
-.dark,
-:root[data-theme="dark"] {
+@media not print {
+  .dark,
+  :root[data-theme="dark"] {
 
-  --primary: 168 60% 60%;
-  --primary-foreground: 48 9% 9%;
-  --brand: 168 60% 60%;
-  --brand-foreground: 48 9% 9%;
+    --primary: 168 60% 60%;
+    --primary-foreground: 48 9% 9%;
+    --brand: 168 60% 60%;
+    --brand-foreground: 48 9% 9%;
 
-  --shadow-color: 6 14 13;
+    --shadow-color: 6 14 13;
+  }
 }
 
 @supports not (color: hsl(from red h s l)) {
@@ -32,14 +34,16 @@
     --text-primary: 168 100% 9.5%;
   }
 
-  .dark,
-  :root[data-theme="dark"] {
-    --primary-hover: 168 60% 65.8%;
-    --primary-active: 168 60% 71.6%;
-    --primary-border: 168 28% 16.2%;
-    --control-outline: 168 59.4% 34.9%;
-    --text-link: 168 60% 60%;
-    --text-brand: 168 60% 60%;
-    --text-primary: 168 60% 65.8%;
+  @media not print {
+    .dark,
+    :root[data-theme="dark"] {
+      --primary-hover: 168 60% 65.8%;
+      --primary-active: 168 60% 71.6%;
+      --primary-border: 168 28% 16.2%;
+      --control-outline: 168 59.4% 34.9%;
+      --text-link: 168 60% 60%;
+      --text-brand: 168 60% 60%;
+      --text-primary: 168 60% 65.8%;
+    }
   }
 }

package/dist/tokens/base.css

@@ -55,3 +55,5 @@
 @import "./components/resizable.css";
 
 @import "./components/persona.css";
+
+@import "./components/dashboard-grid.css";

package/dist/tokens/components/dashboard-grid.css

@@ -0,0 +1,14 @@
+:root {
+
+  --dashboard-grid-gap: var(--space-4);
+
+  --dashboard-grid-row-height: var(--space-20);
+
+  --dashboard-grid-handle-size: var(--control-height);
+
+  --dashboard-grid-handle-inset: var(--space-1);
+
+  --dashboard-grid-item-radius: var(--card-radius);
+
+  --dashboard-grid-preview-ring-color: initial;
+}

package/dist/tokens/components/feedback.css

@@ -30,6 +30,8 @@
   --sheet-header-close-space-inline-end: var(--space-8);
   --dialog-width-default: 32rem;
 
+  --dialog-radius: initial;
+
   --dialog-width: initial;
 
   --dialog-motion-duration: initial;

package/dist/tokens/components/logo.css

@@ -65,9 +65,11 @@
   --logo-product-suffix-color: initial;
 }
 
-.dark,
-:root[data-theme="dark"] {
-  --logo-identity-foreground: 48 9% 9%;
+@media not print {
+  .dark,
+  :root[data-theme="dark"] {
+    --logo-identity-foreground: 48 9% 9%;
 
-  --logo-godx-ink-color: 140 23.1% 97.5%;
+    --logo-godx-ink-color: 140 23.1% 97.5%;
+  }
 }

package/dist/tokens/components/table.css

@@ -85,7 +85,7 @@
 :root {
   --table-stacked-collection-card-padding-y: var(--space-stack-sm);
   --table-stacked-collection-card-padding-x: initial;
-  --table-stacked-collection-card-gap: var(--space-stack-sm);
+  --table-stacked-collection-card-gap: 0;
   --table-stacked-collection-cell-padding-y: var(--space-stack-xs);
 
   --table-stacked-collection-cell-padding-x: 0;
@@ -116,4 +116,8 @@
 
   --table-row-tone-rail-width: initial;
   --table-row-tone-wash-alpha: 0.06;
+
+  --table-caption-color: initial;
+  --table-caption-font-size: initial;
+  --table-caption-space-y: initial;
 }

package/dist/tokens/derived.css

@@ -39,28 +39,30 @@
   --ring: var(--primary);
 }
 
-.dark,
-:root[data-theme="dark"] {
-  --primary-hover-channels: var(--primary-hover-lighten-channels);
-  --primary-active-channels: var(--primary-active-lighten-channels);
+@media not print {
+  .dark,
+  :root[data-theme="dark"] {
+    --primary-hover-channels: var(--primary-hover-lighten-channels);
+    --primary-active-channels: var(--primary-active-lighten-channels);
 
-  --primary-border-channels: h calc(s * 0.467) calc(l * 0.27043);
+    --primary-border-channels: h calc(s * 0.467) calc(l * 0.27043);
 
-  --control-outline-channels: h calc(s * 0.99) calc(l - 25.1);
-  --control-outline-alpha: 0.29;
+    --control-outline-channels: h calc(s * 0.99) calc(l - 25.1);
+    --control-outline-alpha: 0.29;
 
-  --text-link-channels: h s l;
-  --text-brand-channels: h s l;
+    --text-link-channels: h s l;
+    --text-brand-channels: h s l;
 
-  --text-primary-channels: h s calc(l + 5.8);
+    --text-primary-channels: h s calc(l + 5.8);
 
-  --destructive-hover: 358.8 42.3% 53.1%;
-  --destructive-active: 357.3 50.6% 34.1%;
+    --destructive-hover: 358.8 42.3% 53.1%;
+    --destructive-active: 357.3 50.6% 34.1%;
 
-  --control-outline-error: 351.5 98.3% 53.5%;
-  --control-outline-error-alpha: 0.06;
+    --control-outline-error: 351.5 98.3% 53.5%;
+    --control-outline-error-alpha: 0.06;
 
-  --ring: var(--primary);
+    --ring: var(--primary);
+  }
 }
 
 @supports not (color: hsl(from red h s l)) {
@@ -74,14 +76,16 @@
     --text-primary: 240 6% 0%;
   }
 
-  .dark,
-  :root[data-theme="dark"] {
-    --primary-hover: 0 0% 92.2%;
-    --primary-active: 0 0% 86.4%;
-    --primary-border: 0 0% 26.5%;
-    --control-outline: 0 0% 72.9%;
-    --text-link: 0 0% 98%;
-    --text-brand: 0 0% 98%;
-    --text-primary: 0 0% 100%;
+  @media not print {
+    .dark,
+    :root[data-theme="dark"] {
+      --primary-hover: 0 0% 92.2%;
+      --primary-active: 0 0% 86.4%;
+      --primary-border: 0 0% 26.5%;
+      --control-outline: 0 0% 72.9%;
+      --text-link: 0 0% 98%;
+      --text-brand: 0 0% 98%;
+      --text-primary: 0 0% 100%;
+    }
   }
 }

package/dist/tokens/foundation.css

@@ -175,6 +175,10 @@
   --font-family-display: var(--font-family-sans);
   --font-family-body: var(--font-family-sans);
 
+  --font-family-editorial: initial;
+
+  --font-family-tabular: initial;
+
   --font-size-base: 0.875rem;
   --font-size-ratio: 1.1227;
 
@@ -344,60 +348,62 @@
   --field-label-gap: var(--space-2);
 }
 
-.dark,
-:root[data-theme="dark"] {
-
-  --background: 48 9% 9%;
-  --foreground: 60 20% 96%;
-  --card: 48 8% 12%;
-  --card-foreground: 60 20% 96%;
-  --popover: 48 8% 12%;
-  --popover-foreground: 60 20% 96%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 48 9% 9%;
-  --secondary: 45 6% 18%;
-  --secondary-foreground: 60 20% 96%;
-  --muted: 45 6% 18%;
-  --muted-foreground: 44 6% 64%;
-  --accent: 45 7% 22%;
-  --accent-foreground: 60 20% 96%;
-
-  --destructive: 357 55% 48%;
-  --destructive-foreground: 0 0% 100%;
-
-  --border: 45 6% 19%;
-
-  --input: 45 6% 51%;
-
-  --success: 146 45% 55%;
-  --success-foreground: 48 9% 9%;
-  --warning: 44 95% 55%;
-  --warning-foreground: 48 9% 9%;
-  --info: 221 55% 62%;
-  --info-foreground: 48 9% 9%;
-  --attention: 25 95% 56%;
-  --attention-foreground: 48 9% 9%;
-
-  --brand: 0 0% 98%;
-  --brand-foreground: 48 9% 9%;
-
-  --text-tertiary: 44 6% 56%;
-  --text-disabled: 45 6% 40%;
-
-  --text-success: 146 55% 64%;
-  --text-warning: 44 95% 62%;
-  --text-info: 221 70% 72%;
-  --text-error: 357 75% 68%;
-
-  --secondary-hover: 45 6% 22%;
-  --secondary-active: 45 6% 26%;
-
-  --chart-2: #008465;
-  --chart-4: #d43b42;
-
-  --chart-heat-1: #173a52;
-  --chart-heat-2: #145f92;
-  --chart-heat-3: #2a88c9;
-  --chart-heat-4: #6db5e6;
-  --chart-heat-5: #bfe1f7;
+@media not print {
+  .dark,
+  :root[data-theme="dark"] {
+
+    --background: 48 9% 9%;
+    --foreground: 60 20% 96%;
+    --card: 48 8% 12%;
+    --card-foreground: 60 20% 96%;
+    --popover: 48 8% 12%;
+    --popover-foreground: 60 20% 96%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 48 9% 9%;
+    --secondary: 45 6% 18%;
+    --secondary-foreground: 60 20% 96%;
+    --muted: 45 6% 18%;
+    --muted-foreground: 44 6% 64%;
+    --accent: 45 7% 22%;
+    --accent-foreground: 60 20% 96%;
+
+    --destructive: 357 55% 48%;
+    --destructive-foreground: 0 0% 100%;
+
+    --border: 45 6% 19%;
+
+    --input: 45 6% 51%;
+
+    --success: 146 45% 55%;
+    --success-foreground: 48 9% 9%;
+    --warning: 44 95% 55%;
+    --warning-foreground: 48 9% 9%;
+    --info: 221 55% 62%;
+    --info-foreground: 48 9% 9%;
+    --attention: 25 95% 56%;
+    --attention-foreground: 48 9% 9%;
+
+    --brand: 0 0% 98%;
+    --brand-foreground: 48 9% 9%;
+
+    --text-tertiary: 44 6% 56%;
+    --text-disabled: 45 6% 40%;
+
+    --text-success: 146 55% 64%;
+    --text-warning: 44 95% 62%;
+    --text-info: 221 70% 72%;
+    --text-error: 357 75% 68%;
+
+    --secondary-hover: 45 6% 22%;
+    --secondary-active: 45 6% 26%;
+
+    --chart-2: #008465;
+    --chart-4: #d43b42;
+
+    --chart-heat-1: #173a52;
+    --chart-heat-2: #145f92;
+    --chart-heat-3: #2a88c9;
+    --chart-heat-4: #6db5e6;
+    --chart-heat-5: #bfe1f7;
+  }
 }

package/dist/tokens/semantic/layout.css

@@ -120,9 +120,11 @@
   --field-label-gap: var(--space-2);
 }
 
-.dark,
-:root[data-theme="dark"] {
-  --surface-recessed: hsl(var(--background));
+@media not print {
+  .dark,
+  :root[data-theme="dark"] {
+    --surface-recessed: hsl(var(--background));
+  }
 }
 
 :root {

package/docs/COMPOSITION-VS-COMPONENT.md

@@ -99,20 +99,21 @@ new UI need
 
 ## 3. Worked examples
 
-| Thing                                                   | C1  | C2  | C3  | C4  | C5  | C6  | C7  | Verdict                                                                                                            |
-| ------------------------------------------------------- | --- | --- | --- | --- | --- | --- | --- | ------------------------------------------------------------------------------------------------------------------ |
-| `Select` (incl. search/async)                           | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | **Framework component**                                                                                            |
-| `DataTable`, `Dialog`, `Calendar`, `Switch`, `Combobox` | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | **Framework component**                                                                                            |
-| `StatCard` (+ `icon`)                                   | ✅  | ➖  | ✅  | ✅  | ✅  | ✅  | ✅  | **Framework component** (a reusable KPI tile with a stable API + tokens)                                           |
-| `ServiceLauncherCard`                                   | ➖  | ❌  | ❌  | ✅  | ✅  | ➖  | ➖  | **Composition by the test — RETAINED as a recorded exception** (gh#814)                                            |
-| `MegaMenu`                                              | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | **Framework component, `@godxjp/ui/lab` tier** (no consumer yet, §2.1) — the instructive contrast with Hero, below |
-| Marketing **Hero**                                      | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | **Composition** — section, static, composable, brand-specific                                                      |
-| **Navbar** / **Footer**                                 | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | **Composition** — layout of `Text`/`Button`/`Flex`                                                                 |
-| **PricingTable** / feature grid                         | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | **Composition** — `ResponsiveGrid` + `Card`                                                                        |
-| Dashboard **page layout**                               | ❌  | ❌  | ❌  | ❌  | ➖  | ❌  | ❌  | **Composition** — `AppShell` + `PageContainer` + `ResponsiveGrid`                                                  |
-| "Icon medallion"                                        | ❌  | ❌  | ❌  | ❌  | ✅  | ❌  | ❌  | **Composition** — `Avatar` (square) + a Lucide glyph                                                               |
-| **Section** / **Band** (full-bleed + measured column)   | ❌  | ❌  | ❌  | ❌  | ✅  | ❌  | ❌  | **Composition** — `<section>` + `Flex measure` + `pad`; see §3.1                                                   |
-| `TenantTheme` (customer hex at runtime)                 | ✅  | ➖  | ❌  | ❌  | ✅  | ❌  | ➖  | **Composition + a published FUNCTION** — `tenantTheme()`; see §3.2                                                 |
+| Thing                                                   | C1  | C2  | C3  | C4  | C5  | C6  | C7        | Verdict                                                                                                                                                                                          |
+| ------------------------------------------------------- | --- | --- | --- | --- | --- | --- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `Select` (incl. search/async)                           | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅        | **Framework component**                                                                                                                                                                          |
+| `DataTable`, `Dialog`, `Calendar`, `Switch`, `Combobox` | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅        | **Framework component**                                                                                                                                                                          |
+| `StatCard` (+ `icon`)                                   | ✅  | ➖  | ✅  | ✅  | ✅  | ✅  | ✅        | **Framework component** (a reusable KPI tile with a stable API + tokens)                                                                                                                         |
+| `ServiceLauncherCard`                                   | ➖  | ❌  | ❌  | ✅  | ✅  | ➖  | ➖        | **Composition by the test — RETAINED as a recorded exception** (gh#814)                                                                                                                          |
+| `MegaMenu`                                              | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅        | **Framework component, `@godxjp/ui/lab` tier** (no consumer yet, §2.1) — the instructive contrast with Hero, below                                                                               |
+| `DashboardGrid`                                         | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | exception | **Lab (§2.1)** — C7 exception approved by the owner, BI precedents (Tableau/Power BI/Grafana/react-grid-layout). Approved 2026-10-23; same gates as core, promoted only once ≥2 repos import it. |
+| Marketing **Hero**                                      | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌        | **Composition** — section, static, composable, brand-specific                                                                                                                                    |
+| **Navbar** / **Footer**                                 | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌        | **Composition** — layout of `Text`/`Button`/`Flex`                                                                                                                                               |
+| **PricingTable** / feature grid                         | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌        | **Composition** — `ResponsiveGrid` + `Card`                                                                                                                                                      |
+| Dashboard **page layout**                               | ❌  | ❌  | ❌  | ❌  | ➖  | ❌  | ❌        | **Composition** — `AppShell` + `PageContainer` + `ResponsiveGrid`                                                                                                                                |
+| "Icon medallion"                                        | ❌  | ❌  | ❌  | ❌  | ✅  | ❌  | ❌        | **Composition** — `Avatar` (square) + a Lucide glyph                                                                                                                                             |
+| **Section** / **Band** (full-bleed + measured column)   | ❌  | ❌  | ❌  | ❌  | ✅  | ❌  | ❌        | **Composition** — `<section>` + `Flex measure` + `pad`; see §3.1                                                                                                                                 |
+| `TenantTheme` (customer hex at runtime)                 | ✅  | ➖  | ❌  | ❌  | ✅  | ❌  | ➖        | **Composition + a published FUNCTION** — `tenantTheme()`; see §3.2                                                                                                                               |
 
 `✅ pass · ❌ fail · ➖ borderline`. **StatCard** is the instructive borderline: C2 is weak (it owns little behavior), but it is a universal KPI tile with a controlled API, fully tokenized, broadly reused — so it earns its place. A **Hero** fails six of seven; it is unambiguously a composition.
 

package/docs/TOKENS.md

@@ -583,3 +583,36 @@ service override. `allowClear` still replaces the suffix; DatePicker and TimePic
 clear and open actions. NumberInput lays out its two steppers horizontally on coarse pointers.
 SearchInput retains its glyph centre while sharing this target token. Fine-pointer geometry is
 unchanged. Override the token on the field or in the service theme; no new prop is required.
+
+## Editorial, figures, captions and dialog corners
+
+`--font-family-editorial` and `--font-family-tabular` are `initial` knobs: unset,
+`Heading family="editorial"` and a display-scale PageContainer title use the display face,
+while `Text tabular`, `Badge tabular` and numeric table cells inherit their surrounding face.
+`Text mono` still takes priority over the figures face. UI headings stay unchanged.
+
+`TableCaption` is the first child of `Table` and supplies its accessible name. Its
+`--table-caption-color`, `--table-caption-font-size` and `--table-caption-space-y` knobs
+are `initial`, falling back to muted ink, the small type step and `--space-2`.
+The inline inset follows the cells on desktop and
+`--table-stacked-collection-card-padding-x` (fallback `--card-space-inset`) when stacked;
+logical padding and start alignment follow RTL.
+
+`--dialog-radius` is `initial`; from 640px the panel falls back to
+`--radius-lg`, then `--radius`. Below 640px it falls back to the existing square panel;
+an explicit override applies at every width. Dialog uses symmetric logical insets to stay
+centred in both LTR and RTL.
+Set the knob on the theme scope containing the Dialog portal (normally `:root`).
+
+## Printing
+
+Paper uses the existing light token declarations: every shipped dark override (including
+brand themes and component tokens) is enclosed in `@media not print`.
+Consumer-authored themes must likewise put all dark overrides inside `@media not print`,
+leaving their light declarations outside it so paper always uses the light palette.
+
+In print, AppShell hides sidebar, topbar, navigation rail, breadcrumb and footer.
+Its main area uses the full paper width with natural height, visible overflow and no
+paint containment, so content beyond the screen viewport can print. Card requests
+`break-inside: avoid`; a card taller than a sheet can still fragment. Applications may
+adjust this in their own print stylesheet through the public `data-slot="card"` hook.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "33.15.0",
-  "godxUiMcp": "33.15.0",
+  "version": "33.17.0",
+  "godxUiMcp": "33.17.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",