@godxjp/ui 18.4.0 → 18.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -1
- package/dist/app/theme-axes.d.ts +11 -3
- package/dist/app/theme-axes.js +2 -1
- package/dist/components/charts/chart-frame.d.ts +17 -3
- package/dist/components/charts/chart-frame.js +7 -1
- package/dist/components/charts/chart-summary.d.ts +21 -0
- package/dist/components/charts/chart-summary.js +32 -5
- package/dist/components/charts/compact-bar-trend.d.ts +29 -0
- package/dist/components/charts/compact-bar-trend.js +74 -0
- package/dist/components/charts/index.d.ts +3 -0
- package/dist/components/charts/index.js +2 -0
- package/dist/components/data-display/badge.d.ts +8 -0
- package/dist/components/data-display/badge.js +7 -1
- package/dist/components/data-display/data-table.d.ts +16 -1
- package/dist/components/data-display/data-table.js +56 -0
- package/dist/components/data-display/index.d.ts +3 -1
- package/dist/components/data-display/index.js +10 -1
- package/dist/components/data-display/list-row.d.ts +22 -4
- package/dist/components/data-display/list-row.js +21 -3
- package/dist/components/data-display/service-launcher-card.d.ts +40 -0
- package/dist/components/data-display/service-launcher-card.js +97 -0
- package/dist/components/data-entry/command-palette.d.ts +37 -0
- package/dist/components/data-entry/command-palette.js +125 -0
- package/dist/components/data-entry/index.d.ts +2 -0
- package/dist/components/data-entry/index.js +2 -0
- package/dist/components/feedback/dialog.d.ts +2 -0
- package/dist/components/feedback/dialog.js +42 -33
- package/dist/components/feedback/index.d.ts +4 -1
- package/dist/components/feedback/index.js +6 -2
- package/dist/components/feedback/sheet.d.ts +26 -4
- package/dist/components/feedback/sheet.js +54 -7
- package/dist/components/feedback/two-factor-setup.d.ts +31 -0
- package/dist/components/feedback/two-factor-setup.js +97 -0
- package/dist/components/general/index.d.ts +1 -1
- package/dist/components/general/logo.d.ts +42 -8
- package/dist/components/general/logo.js +67 -14
- package/dist/components/layout/app-shell.js +21 -5
- package/dist/components/layout/auth-divider.d.ts +7 -0
- package/dist/components/layout/auth-divider.js +21 -0
- package/dist/components/layout/auth-footer.d.ts +5 -0
- package/dist/components/layout/auth-footer.js +24 -0
- package/dist/components/layout/auth-identity.d.ts +5 -0
- package/dist/components/layout/auth-identity.js +17 -0
- package/dist/components/layout/auth-shell.d.ts +8 -1
- package/dist/components/layout/auth-shell.js +25 -6
- package/dist/components/layout/auth-stack.d.ts +4 -0
- package/dist/components/layout/auth-stack.js +8 -0
- package/dist/components/layout/centered-shell.d.ts +5 -2
- package/dist/components/layout/centered-shell.js +2 -1
- package/dist/components/layout/index.d.ts +18 -3
- package/dist/components/layout/index.js +17 -2
- package/dist/components/layout/legal-document-shell.d.ts +34 -0
- package/dist/components/layout/legal-document-shell.js +186 -0
- package/dist/components/layout/master-detail.d.ts +24 -0
- package/dist/components/layout/master-detail.js +48 -0
- package/dist/components/layout/org-switcher.d.ts +9 -0
- package/dist/components/layout/org-switcher.js +218 -0
- package/dist/components/layout/page-container.d.ts +1 -1
- package/dist/components/layout/page-container.js +3 -2
- package/dist/components/layout/sidebar-link.d.ts +43 -0
- package/dist/components/layout/sidebar-link.js +13 -0
- package/dist/components/layout/sidebar.d.ts +42 -5
- package/dist/components/layout/sidebar.js +170 -85
- package/dist/components/navigation/app-setting-picker.js +17 -6
- package/dist/components/navigation/filter-bar.d.ts +12 -3
- package/dist/components/navigation/filter-bar.js +8 -2
- package/dist/components/navigation/index.d.ts +2 -2
- package/dist/components/navigation/index.js +3 -1
- package/dist/components/navigation/tabs-scroll.d.ts +70 -0
- package/dist/components/navigation/tabs-scroll.js +76 -0
- package/dist/components/navigation/tabs.js +35 -20
- package/dist/email/brand-mark.d.ts +92 -0
- package/dist/email/brand-mark.js +83 -0
- package/dist/email/color.d.ts +52 -0
- package/dist/email/color.js +37 -0
- package/dist/email/geometry.d.ts +112 -0
- package/dist/email/geometry.js +89 -0
- package/dist/email/index.d.ts +78 -0
- package/dist/email/index.js +76 -0
- package/dist/email/inline-style.d.ts +25 -0
- package/dist/email/inline-style.js +21 -0
- package/dist/email/tokens.generated.d.ts +147 -0
- package/dist/email/tokens.generated.js +142 -0
- package/dist/i18n/messages/en.json +21 -2
- package/dist/i18n/messages/ja.json +21 -2
- package/dist/i18n/messages/vi.json +21 -2
- package/dist/inertia/index.d.ts +50 -0
- package/dist/inertia/index.js +5 -0
- package/dist/props/components/app.prop.d.ts +11 -1
- package/dist/props/components/charts.prop.d.ts +40 -1
- package/dist/props/components/data-display.prop.d.ts +13 -1
- package/dist/props/components/feedback.prop.d.ts +10 -0
- package/dist/props/components/index.d.ts +2 -2
- package/dist/props/components/layout.prop.d.ts +373 -10
- package/dist/props/components/layout.prop.js +1 -0
- package/dist/props/components/navigation.prop.d.ts +19 -1
- package/dist/props/registry.d.ts +291 -7
- package/dist/props/registry.js +341 -7
- package/dist/props/vocabulary/index.d.ts +1 -1
- package/dist/props/vocabulary/interaction.prop.d.ts +1 -1
- package/dist/props/vocabulary/layout.prop.d.ts +18 -0
- package/dist/styles/base.css +8 -2
- package/dist/styles/card-layout.css +161 -7
- package/dist/styles/chart-layout.css +97 -0
- package/dist/styles/control.css +48 -2
- package/dist/styles/data-display-layout.css +52 -6
- package/dist/styles/dialog-layout.css +105 -4
- package/dist/styles/fonts.css +15 -4
- package/dist/styles/index.css +11 -3
- package/dist/styles/layout.css +367 -1
- package/dist/styles/logo-layout.css +62 -0
- package/dist/styles/navigation-layout.css +43 -0
- package/dist/styles/shell-layout.css +488 -40
- package/dist/theme/dxs.canonical.css +76 -0
- package/dist/tokens/axes.css +39 -0
- package/dist/tokens/base.css +5 -0
- package/dist/tokens/components/card.css +48 -0
- package/dist/tokens/components/chart.css +47 -0
- package/dist/tokens/components/control.css +16 -0
- package/dist/tokens/components/email.css +66 -0
- package/dist/tokens/components/feedback.css +17 -0
- package/dist/tokens/components/legal-document.css +67 -0
- package/dist/tokens/components/list-row.css +23 -2
- package/dist/tokens/components/logo.css +32 -0
- package/dist/tokens/components/navigation.css +13 -0
- package/dist/tokens/components/sheet.css +19 -0
- package/dist/tokens/components/shell.css +138 -0
- package/dist/tokens/components/sidebar.css +33 -0
- package/dist/tokens/foundation.css +5 -2
- package/dist/tokens/semantic/layout.css +44 -2
- package/package.json +16 -5
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
--sidebar-product-tenant-font-size: var(--font-size-2xs);
|
|
8
8
|
--sidebar-badge-font-size: var(--font-size-2xs);
|
|
9
9
|
--sidebar-user-role-font-size: var(--font-size-2xs);
|
|
10
|
+
--org-switcher-meta-foreground: var(--muted-foreground);
|
|
10
11
|
--sidebar-nav-sub-font-size: var(--font-size-xs);
|
|
11
12
|
--sidebar-flyout-title-font-size: var(--font-size-xs);
|
|
12
13
|
--topbar-chip-icon-font-size: var(--font-size-2xs);
|
|
@@ -23,12 +24,60 @@
|
|
|
23
24
|
/* DXS application-shell geometry. These defaults mirror the checked-in
|
|
24
25
|
* Admin/Console hi-fi source while remaining themeable by consumers. */
|
|
25
26
|
--app-shell-bar-height: 3rem;
|
|
27
|
+
/* Inline inset and slot gap of the AppShell top bar. `-compact` applies below the shell
|
|
28
|
+
* breakpoint (the docked sidebar is gone, so the bar tightens against the viewport edge). */
|
|
29
|
+
--app-shell-bar-inset: var(--space-4);
|
|
30
|
+
--app-shell-bar-inset-compact: var(--space-3);
|
|
31
|
+
--app-shell-bar-gap: var(--space-3);
|
|
32
|
+
/* Docked navigation rail widths — the SINGLE most-retuned shell constant (rule #45). A service
|
|
33
|
+
* that designs on a different grid sets `--app-shell-sidebar-width: 15.9375rem` (255px) once
|
|
34
|
+
* instead of forking `.app-root`. `-rail-` is the icon-only width used at
|
|
35
|
+
* `<AppShell sidebarCollapsed>`. */
|
|
36
|
+
--app-shell-sidebar-width: 16rem;
|
|
37
|
+
--app-shell-rail-width: 4rem;
|
|
26
38
|
--app-shell-page-max-width: 80rem;
|
|
27
39
|
--app-shell-main-background: hsl(var(--muted) / 0.4);
|
|
40
|
+
--app-shell-mobile-nav-width: 22.5rem;
|
|
41
|
+
/* Mobile-drawer scrim — `initial` so the shared --overlay-background default re-resolves at the
|
|
42
|
+
* CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding freezes at :root). Default =
|
|
43
|
+
* var(--app-shell-mobile-nav-alpha) of the global scrim, i.e. rgb(0 0 0 / 0.2) out of the box. */
|
|
44
|
+
--app-shell-mobile-nav-background: initial;
|
|
45
|
+
/* Share of the global --overlay-background this drawer's scrim uses. A slide-in drawer washes the
|
|
46
|
+
* page more lightly than a modal dialog; keeping it a RATIO means a service retints the whole
|
|
47
|
+
* system with one --overlay-background and every overlay keeps its calibrated depth. */
|
|
48
|
+
--app-shell-mobile-nav-alpha: 40%;
|
|
49
|
+
/* Inline inset of the mobile drawer's scrollable nav body. Near-zero by design: the drawer nav
|
|
50
|
+
* (the <Sidebar> node by default) owns its own inset via --sidebar-nav-scroll-padding, so the
|
|
51
|
+
* generic sheet chrome inset must NOT stack on top of it (gh#211). Set it to var(--space-6) for
|
|
52
|
+
* a custom mobileNav node that wants the full sheet chrome inset. */
|
|
53
|
+
--app-shell-mobile-nav-inset: var(--space-1);
|
|
28
54
|
--sidebar-brand-mark-size: 1.375rem;
|
|
29
55
|
--sidebar-nav-item-height: 2rem;
|
|
30
56
|
--sidebar-nav-item-font-size: 0.8125rem;
|
|
57
|
+
--sidebar-nav-icon-size: 1rem;
|
|
58
|
+
--sidebar-nav-item-gap: 0.625rem;
|
|
59
|
+
--sidebar-nav-item-padding-x: 0.625rem;
|
|
60
|
+
--sidebar-nav-gap: 2px;
|
|
61
|
+
--sidebar-nav-scroll-padding: var(--space-3) var(--space-2);
|
|
62
|
+
--sidebar-section-gap: var(--space-4);
|
|
63
|
+
--sidebar-section-label-padding-x: var(--space-2);
|
|
64
|
+
--sidebar-section-label-padding-bottom: var(--space-1);
|
|
31
65
|
--topbar-search-max-width: 26.25rem;
|
|
66
|
+
/* Standalone <Topbar> geometry (rule #45). Topbar is a pure slot bar, so its box is intentionally
|
|
67
|
+
* QUIET by default: `auto` height and no inline inset, i.e. exactly what it did before these knobs
|
|
68
|
+
* existed — inside AppShell the `.app-topbar` grid row still owns the height. A service that
|
|
69
|
+
* places Topbar directly on a page sets `--topbar-height: 3.5rem` / `--topbar-inset: var(--space-4)`
|
|
70
|
+
* once instead of writing an app-local class. `--topbar-gap` is the gap BETWEEN the start/center/end
|
|
71
|
+
* clusters and INSIDE each of them, so one knob re-rhythms the whole bar. */
|
|
72
|
+
--topbar-height: auto;
|
|
73
|
+
--topbar-inset: 0px;
|
|
74
|
+
--topbar-gap: var(--space-2);
|
|
75
|
+
--org-switcher-trigger-height: 2.75rem;
|
|
76
|
+
--org-switcher-trigger-padding-x: var(--space-2);
|
|
77
|
+
--org-switcher-avatar-size: 1.75rem;
|
|
78
|
+
--org-switcher-menu-width: 16rem;
|
|
79
|
+
--org-switcher-sheet-max-height: 75dvh;
|
|
80
|
+
--org-switcher-state-min-height: 8rem;
|
|
32
81
|
|
|
33
82
|
/* Sidebar active-item tint/marker — `initial` so the role defaults re-resolve at the call site
|
|
34
83
|
* under a scoped theme (a :root binding to a role var freezes at :root; a scoped role override
|
|
@@ -53,6 +102,89 @@
|
|
|
53
102
|
--auth-shell-main-padding: var(--space-6);
|
|
54
103
|
--auth-shell-footer-padding: var(--space-3) var(--space-6) var(--space-4);
|
|
55
104
|
|
|
105
|
+
/* Canonical DXS auth preset. These are public theme knobs: consumers select the preset once on
|
|
106
|
+
* AuthShell and may retune the product theme here rather than overriding individual fields. */
|
|
107
|
+
--auth-shell-canonical-control-height: 2.25rem;
|
|
108
|
+
--auth-shell-canonical-card-max-width: 22.5rem;
|
|
109
|
+
--auth-shell-canonical-heading-size: var(--font-size-base);
|
|
110
|
+
--auth-shell-canonical-main-padding: 1rem;
|
|
111
|
+
--auth-shell-canonical-main-padding-mobile: 0.9375rem;
|
|
112
|
+
/* INLINE (start/end) inset of the compact auth card — the column the title, fields and actions
|
|
113
|
+
* align to. Independent of the block axis below (gh#232). */
|
|
114
|
+
--auth-shell-compact-card-inset: var(--space-6);
|
|
115
|
+
/* BLOCK (top/bottom) padding of the compact auth card — the knob that tunes canonical Login card
|
|
116
|
+
* HEIGHT without narrowing the column. Bound to the card's --card-space-shell-y, so it really
|
|
117
|
+
* reaches CardContent's block edges (before gh#232 it was wired only to --card-space-body-y and
|
|
118
|
+
* the rendered body kept the inset on both block edges — the documented token did nothing).
|
|
119
|
+
* Declared `initial` so the default mirrors the LIVE --auth-shell-compact-card-inset resolved at
|
|
120
|
+
* the CALL SITE: the canonical card renders exactly as before (24px block = 24px inline), and a
|
|
121
|
+
* service that re-tunes the inset inside a scoped `[data-tenant]` still drags the block default
|
|
122
|
+
* with it (a :root binding would freeze at the :root inset — docs/TOKENS.md). */
|
|
123
|
+
--auth-shell-card-padding-block-compact: initial; /* default = var(--auth-shell-compact-card-inset) */
|
|
124
|
+
/* Header↔body gap inside the compact auth card (the breathing room under the title before the
|
|
125
|
+
* first field). Its own knob since gh#232 — it used to ride on
|
|
126
|
+
* --auth-shell-card-padding-block-compact, which conflated the section gap with the card's block
|
|
127
|
+
* padding and made the block knob un-tunable. Default is the pre-gh#232 12px rhythm. */
|
|
128
|
+
--auth-shell-card-body-gap-compact: var(--space-3);
|
|
129
|
+
/* IN-SLOT stack gap of the compact auth card (title ↕ description inside the header). */
|
|
130
|
+
--auth-shell-card-gap-compact: var(--space-3);
|
|
131
|
+
|
|
132
|
+
/* Named AUTH FLOW PRESETS (gh#217 / gh#220). A preset owns the whole page measure for one
|
|
133
|
+
* canonical hosted-identity flow — card max-width plus the desktop and mobile page gutters — so a
|
|
134
|
+
* consumer selects `preset` once instead of hand-overriding --auth-shell-card-max-width. Presets
|
|
135
|
+
* are orthogonal to `variant` (which owns control density / heading size) and are applied AFTER
|
|
136
|
+
* it, so `variant="canonical" preset="device-authorization"` keeps the canonical chrome and only
|
|
137
|
+
* re-measures the page. Literal lengths (not --space-*) because the canonical artboards specify
|
|
138
|
+
* exact device pixels that must not drift with --scaling. */
|
|
139
|
+
|
|
140
|
+
/* Main-axis alignment of the auth column. Default `center` = today's vertically-centred card;
|
|
141
|
+
* a flow whose intro + card + footnote stack is tall opts into `start` via this knob. */
|
|
142
|
+
--auth-shell-main-align: center;
|
|
143
|
+
/* Gap between the direct sections of the auth column (intro · card · remember row). Default 0
|
|
144
|
+
* (quiet, rule #44) so an existing single-card consumer is untouched; presets opt in. */
|
|
145
|
+
--auth-shell-card-stack-gap: 0px;
|
|
146
|
+
|
|
147
|
+
/* Device-authorization preset — 380px card measure, 15px block · 5px inline mobile gutter
|
|
148
|
+
* (at a 390px viewport the card is x=5px, width=380px). */
|
|
149
|
+
--auth-shell-device-card-max-width: 23.75rem;
|
|
150
|
+
--auth-shell-device-main-padding: 1rem;
|
|
151
|
+
--auth-shell-device-main-padding-mobile: 0.9375rem 0.3125rem;
|
|
152
|
+
|
|
153
|
+
/* Context-selection preset — 25rem card measure on desktop/tablet, edge-to-edge on mobile
|
|
154
|
+
* (0 inline gutter) with a 16px rhythm between the intro, the card and the remember row. */
|
|
155
|
+
--auth-shell-context-card-max-width: 25rem;
|
|
156
|
+
--auth-shell-context-main-padding: var(--space-6);
|
|
157
|
+
--auth-shell-context-main-padding-mobile: var(--space-6) 0;
|
|
158
|
+
--auth-shell-context-card-stack-gap: 1rem;
|
|
159
|
+
|
|
160
|
+
/* Account-recovery preset (gh#233) — the SCR-008 measure shared by the password-recovery panel
|
|
161
|
+
* (request · sent · new-password · expired) and the sign-in MFA challenge panel (OTP ·
|
|
162
|
+
* recovery-code · passkey-failure). Both canonical desktop panels measure w=432 at 1440, so ONE
|
|
163
|
+
* preset owns them; the 360px canonical Login measure is untouched.
|
|
164
|
+
* The mobile gutter is a DECIDED contract, not a traced artboard: the supplied 390 reference is a
|
|
165
|
+
* desktop 2x2 composite that crops horizontally and cannot be measured. 15px inline at 390 ⇒ the
|
|
166
|
+
* panel is x=15, width=360 — the same page rhythm as the canonical Login flow, so a user moving
|
|
167
|
+
* from Login to Recovery on a phone never sees the surface jump. */
|
|
168
|
+
--auth-shell-recovery-card-max-width: 27rem;
|
|
169
|
+
--auth-shell-recovery-main-padding: 1rem;
|
|
170
|
+
--auth-shell-recovery-main-padding-mobile: 0.9375rem;
|
|
171
|
+
|
|
172
|
+
/* Labelled auth divider geometry. */
|
|
173
|
+
--auth-shell-divider-gap: 0.625rem;
|
|
174
|
+
--auth-shell-divider-label-font-size: 0.6875rem;
|
|
175
|
+
--auth-shell-divider-rule-color: var(--border);
|
|
176
|
+
--auth-shell-divider-label-color: var(--muted-foreground);
|
|
177
|
+
--auth-identity-gap: 0.375rem;
|
|
178
|
+
--auth-requester-gap: 0.375rem;
|
|
179
|
+
--auth-requester-icon-size: 1rem;
|
|
180
|
+
--auth-requester-glyph-size: 0.625rem;
|
|
181
|
+
--auth-footer-content-gap: 0.375rem;
|
|
182
|
+
--auth-footer-text-font-size: 0.6875rem;
|
|
183
|
+
--auth-stack-gap: var(--space-3);
|
|
184
|
+
--auth-shell-field-label-gap: var(--space-1);
|
|
185
|
+
--auth-shell-field-label-font-size: var(--font-size-xs);
|
|
186
|
+
--auth-shell-field-label-line-height: 1.25;
|
|
187
|
+
|
|
56
188
|
/* CenteredShell — authenticated, no-sidebar, centred-column page shell (hosted-ID "My Page",
|
|
57
189
|
* account, standalone settings). The bar mirrors AppShell's `.app-topbar` chrome (fixed height +
|
|
58
190
|
* inline padding); the column max-width has three tiers, all wider than the 24rem auth card. A
|
|
@@ -61,6 +193,12 @@
|
|
|
61
193
|
--centered-shell-bar-padding-x: var(--space-4);
|
|
62
194
|
--centered-shell-main-padding: var(--space-6);
|
|
63
195
|
--centered-shell-footer-padding: var(--space-3) var(--space-6) var(--space-4);
|
|
196
|
+
/* Block offset of the centred column inside the 100dvh shell. `0` (default, the quietest state —
|
|
197
|
+
* rule #44) keeps the top-aligned flowing page; `auto` centres the column in the viewport, which
|
|
198
|
+
* is what CenteredShell `align="center"` sets for a SYSTEM-level standalone surface (500/503
|
|
199
|
+
* error page, maintenance notice). Auto block offsets collapse to 0 when the content is taller
|
|
200
|
+
* than the viewport, so a long localized message scrolls from the top instead of clipping. */
|
|
201
|
+
--centered-shell-column-offset-block: 0;
|
|
64
202
|
--centered-shell-width-sm: 32rem;
|
|
65
203
|
--centered-shell-width-md: 46rem;
|
|
66
204
|
--centered-shell-width-lg: 64rem;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/* Sidebar nav-row COLOUR knobs (gh#228). The row/label and its icon are separately themeable:
|
|
2
|
+
* before this, `.sb-nav-item` painted one `--muted-foreground` that the Lucide SVG inherited, so a
|
|
3
|
+
* service could only darken its 16px nav icons by writing page-local CSS or by re-tinting every
|
|
4
|
+
* muted text globally. Geometry knobs (--sidebar-nav-icon-size, --sidebar-nav-item-height/-gap/
|
|
5
|
+
* -padding-x) live in components/shell.css and are untouched by these.
|
|
6
|
+
*
|
|
7
|
+
* ROLE-MIRROR KNOBS — declared `initial` here with the role default at the CALL SITE
|
|
8
|
+
* (`var(--knob, hsl(var(--role)))`), so a scoped `[data-tenant]` / `.dark` role override
|
|
9
|
+
* re-resolves live instead of freezing at :root (docs/TOKENS.md · "Role-mirror knobs MUST be
|
|
10
|
+
* `initial`"). Every default is byte-identical to the pre-gh#228 rendering.
|
|
11
|
+
*
|
|
12
|
+
* The ACTIVE row's own background/foreground keep their existing knobs
|
|
13
|
+
* (--sidebar-item-active-background / --sidebar-item-active-foreground, components/shell.css);
|
|
14
|
+
* only the active ICON gets a new one. */
|
|
15
|
+
|
|
16
|
+
:root {
|
|
17
|
+
/* Resting nav row + label (also the resting sub-row). Default = hsl(var(--muted-foreground)). */
|
|
18
|
+
--sidebar-nav-item-foreground: initial;
|
|
19
|
+
/* Hovered nav row + label. Default = hsl(var(--foreground)). */
|
|
20
|
+
--sidebar-nav-item-hover-foreground: initial;
|
|
21
|
+
/* `aria-disabled` nav row + label. Default = the resting row colour. */
|
|
22
|
+
--sidebar-nav-item-disabled-foreground: initial;
|
|
23
|
+
|
|
24
|
+
/* Nav ICON (`.sb-icon`, incl. the collapsed rail and group triggers). Default = currentColor,
|
|
25
|
+
* i.e. the row colour — the pre-gh#228 look. Set this alone to get canonical dark icons next to
|
|
26
|
+
* muted labels. */
|
|
27
|
+
--sidebar-nav-icon-foreground: initial;
|
|
28
|
+
/* Icon on a hovered / active / disabled row. Each falls back to --sidebar-nav-icon-foreground,
|
|
29
|
+
* then to currentColor, so setting the base icon knob alone themes every state. */
|
|
30
|
+
--sidebar-nav-icon-hover-foreground: initial;
|
|
31
|
+
--sidebar-nav-icon-active-foreground: initial;
|
|
32
|
+
--sidebar-nav-icon-disabled-foreground: initial;
|
|
33
|
+
}
|
|
@@ -161,8 +161,11 @@
|
|
|
161
161
|
* --font-sans-zh-hans (lang="zh" | "zh-Hans" | "zh-CN")
|
|
162
162
|
* --font-sans-zh-hant (lang="zh-Hant" | "zh-TW")
|
|
163
163
|
* e.g. `--font-sans-ja: "Noto Sans JP", var(--font-sans-base);`
|
|
164
|
-
* The opt-in bundle `@godxjp/ui/styles/fonts`
|
|
165
|
-
*
|
|
164
|
+
* The opt-in bundle `@godxjp/ui/styles/fonts` overwrites `--font-sans-base`
|
|
165
|
+
* (and `--font-sans-vi`) with the DXS bundle — "M PLUS 2" primary, "Noto Sans JP"
|
|
166
|
+
* as the CJK fallback — so the all-in-one entry is zero-config. That fill also
|
|
167
|
+
* lands on `:root` at THIS specificity, so `styles/fonts` MUST be imported AFTER
|
|
168
|
+
* `styles/base`, or the system stack below silently wins (issue #210). */
|
|
166
169
|
--font-sans-base:
|
|
167
170
|
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui,
|
|
168
171
|
sans-serif;
|
|
@@ -18,6 +18,30 @@
|
|
|
18
18
|
--space-inline-md: var(--space-3); /* 12px */
|
|
19
19
|
--space-inline-lg: var(--space-4); /* 16px */
|
|
20
20
|
|
|
21
|
+
/* Master-detail geometry. Consumers choose a semantic rail preset; they never author grid tracks. */
|
|
22
|
+
--master-detail-rail-compact: 18.75rem; /* 300px */
|
|
23
|
+
--master-detail-rail-standard: 20rem; /* 320px */
|
|
24
|
+
--master-detail-gap: var(--space-stack-md);
|
|
25
|
+
/* The collapse threshold: MasterDetail keeps its two-track split while the composition's OWN
|
|
26
|
+
* inline size is at least this wide, and stacks (master then detail) below it. A service theme
|
|
27
|
+
* retunes it once globally; the `collapseBelow` prop overrides it per instance (rule #45).
|
|
28
|
+
* This is a real knob — the layout reads it through the flex-basis threshold, NOT a media
|
|
29
|
+
* query, precisely so a `var()` can drive it (see src/styles/layout.css · .ui-master-detail). */
|
|
30
|
+
--master-detail-collapse-below: 40rem; /* 640px — the `sm` step */
|
|
31
|
+
|
|
32
|
+
/* Bounded master viewport (gh#231). OPT-IN, chosen by the semantic `masterViewport` prop —
|
|
33
|
+
* `auto` (the default) applies NO bound, so every existing composition is unchanged. A real
|
|
34
|
+
* collection can be thousands of pixels tall; when the layout stacks, that pushes the detail
|
|
35
|
+
* far below the fold. The presets cap the collection's BLOCK size and scroll it inside the
|
|
36
|
+
* region instead. Sized as a whole number of nominal collection rows (2.5rem ≈ a compact list
|
|
37
|
+
* row) so a service theme retunes them in the same semantic unit the design grid uses. */
|
|
38
|
+
--master-detail-master-viewport-compact: 20rem; /* 320px — about 8 nominal rows */
|
|
39
|
+
--master-detail-master-viewport-standard: 28rem; /* 448px — about 11 nominal rows */
|
|
40
|
+
/* Focus-ring room INSIDE the bounded region: an overflow container clips both axes, so without
|
|
41
|
+
* an inset the ring of a row at the edge would be cut off (WCAG 2.4.11/2.4.13). Doubles as the
|
|
42
|
+
* scroll-padding so a row scrolled into view never sits flush against the clip edge. */
|
|
43
|
+
--master-detail-master-viewport-inset: var(--space-1); /* 4px */
|
|
44
|
+
|
|
21
45
|
--space-page-active-x: var(--space-page-x);
|
|
22
46
|
--space-page-active-y: var(--space-page-y);
|
|
23
47
|
--space-section-active: var(--space-section);
|
|
@@ -26,8 +50,18 @@
|
|
|
26
50
|
--space-section-compact: var(--space-4);
|
|
27
51
|
|
|
28
52
|
/* Modal scrim — the single backdrop colour shared by EVERY overlay (Dialog, AlertDialog, Sheet,
|
|
29
|
-
* Drawer). Themeable (rule #44) so a service tints the wash to its brand
|
|
30
|
-
* `--overlay-background: rgb(12 26 49 / .55)`, instead of forking each overlay.
|
|
53
|
+
* Drawer, AppShell mobile nav). Themeable (rule #44) so a service tints the wash to its brand
|
|
54
|
+
* once, e.g. a navy `--overlay-background: rgb(12 26 49 / .55)`, instead of forking each overlay.
|
|
55
|
+
*
|
|
56
|
+
* HOW IT REACHES AN OVERLAY (gh#215 — it previously reached NOTHING): each surface declares its
|
|
57
|
+
* own knob `initial` and resolves a SHARE of this colour at the call site,
|
|
58
|
+
* `var(--dialog-overlay-background, color-mix(in srgb, var(--overlay-background)
|
|
59
|
+
* var(--dialog-overlay-alpha), transparent))`. That keeps the calibrated per-surface depth — a
|
|
60
|
+
* slide-in Sheet washes the page more lightly (40%) than a modal Dialog (60%) — while ONE
|
|
61
|
+
* override here retints every backdrop. Per docs/TOKENS.md the knobs must stay `initial`: a
|
|
62
|
+
* `:root` binding would freeze and a scoped `[data-tenant]`/`.dark` override of this token would
|
|
63
|
+
* never reach the overlay. Overlays are portaled, so a tenant scope must also sit on the portal
|
|
64
|
+
* container (see docs/CUSTOMER-THEMING.md). */
|
|
31
65
|
--overlay-background: rgb(0 0 0 / 0.5);
|
|
32
66
|
|
|
33
67
|
/* Full-bleed rule under the PageContainer header. OFF by default — the title/body
|
|
@@ -41,6 +75,14 @@
|
|
|
41
75
|
* old fixed 16px pad that left 24 above vs 32 below. */
|
|
42
76
|
--page-header-pad-bottom: calc(var(--space-page-active-y) - var(--space-section-active));
|
|
43
77
|
|
|
78
|
+
/* Inline measure of the header `extra` region while the page header is in `responsive-inline`
|
|
79
|
+
* arrangement (gh#231). Below the 640px step the default arrangement drops `extra` onto its own
|
|
80
|
+
* full-width line under the subtitle; `headerLayout="responsive-inline"` keeps it beside the
|
|
81
|
+
* title band at this measure instead, so a single compact control (a search field, one primary
|
|
82
|
+
* action) stays on the title row at 390px. Unused by the default arrangement, so no existing
|
|
83
|
+
* page moves. 11rem = 176px, i.e. the control ends flush with the compact page gutter. */
|
|
84
|
+
--page-header-extra-measure: 11rem; /* 176px */
|
|
85
|
+
|
|
44
86
|
/* Responsive page typography is independent from density. Density changes information spacing;
|
|
45
87
|
* these tokens change only page chrome so mobile keeps readable body text and touch targets. */
|
|
46
88
|
--page-title-font-size: var(--heading-h1);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@godxjp/ui",
|
|
3
|
-
"version": "18.
|
|
4
|
-
"godxUiMcp": "18.
|
|
3
|
+
"version": "18.5.0",
|
|
4
|
+
"godxUiMcp": "18.5.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"packageManager": "pnpm@10.29.1",
|
|
7
7
|
"pnpm": {
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"./styles": "./dist/styles/index.css",
|
|
34
34
|
"./styles/*": "./dist/styles/*.css",
|
|
35
|
+
"./theme/*": "./dist/theme/*",
|
|
35
36
|
"./tokens": "./dist/tokens/base.css",
|
|
36
37
|
"./admin": {
|
|
37
38
|
"types": "./dist/components/admin/index.d.ts",
|
|
@@ -109,6 +110,10 @@
|
|
|
109
110
|
"types": "./dist/i18n/index.d.ts",
|
|
110
111
|
"import": "./dist/i18n/index.js"
|
|
111
112
|
},
|
|
113
|
+
"./email": {
|
|
114
|
+
"types": "./dist/email/index.d.ts",
|
|
115
|
+
"import": "./dist/email/index.js"
|
|
116
|
+
},
|
|
112
117
|
"./lib/utils": {
|
|
113
118
|
"types": "./dist/lib/utils.d.ts",
|
|
114
119
|
"import": "./dist/lib/utils.js"
|
|
@@ -290,6 +295,8 @@
|
|
|
290
295
|
"test:coverage": "vitest run --coverage",
|
|
291
296
|
"check:example-imports": "node scripts/check-example-imports.mjs",
|
|
292
297
|
"check:frame-coverage": "node scripts/frame-coverage.mjs",
|
|
298
|
+
"gen:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs",
|
|
299
|
+
"check:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs --check && node scripts/check-frame-coverage-ledger.mjs",
|
|
293
300
|
"check:screen-reader-evidence": "node scripts/check-screen-reader-evidence.mjs",
|
|
294
301
|
"check:voiceover-capture": "node scripts/check-voiceover-capture.mjs",
|
|
295
302
|
"check:data-entry-frame-runtime": "node scripts/check-data-entry-frame-runtime.mjs",
|
|
@@ -301,14 +308,16 @@
|
|
|
301
308
|
"check:display-runtime-evidence": "node scripts/check-display-runtime-evidence.mjs",
|
|
302
309
|
"check:data-table-pagination-wrap": "node scripts/check-data-table-pagination-wrap.mjs",
|
|
303
310
|
"check:button-icon-xs": "node scripts/check-button-icon-xs.mjs",
|
|
304
|
-
"check:frame-contracts": "pnpm check:component-api-manifest && pnpm audit:component-cases && pnpm check:frame-coverage && pnpm check:screen-reader-evidence && pnpm check:data-entry-owner-source && pnpm check:display-runtime-evidence",
|
|
311
|
+
"check:frame-contracts": "pnpm check:component-api-manifest && pnpm audit:component-cases && pnpm check:frame-coverage && pnpm check:frame-coverage-ledger && pnpm check:screen-reader-evidence && pnpm check:data-entry-owner-source && pnpm check:display-runtime-evidence",
|
|
305
312
|
"check:final-touch-rtl": "node scripts/check-final-touch-rtl.mjs",
|
|
306
313
|
"check:frame-runtime": "pnpm check:data-entry-frame-runtime && pnpm check:data-entry-touch-aria && pnpm check:layout-nav-frames && pnpm check:provider-feedback-query-runtime && pnpm check:layout-nav-closure && pnpm check:final-touch-rtl && pnpm check:data-table-pagination-wrap && pnpm check:button-icon-xs",
|
|
307
314
|
"pretest": "pnpm check:frame-coverage",
|
|
308
|
-
"verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
|
|
309
|
-
"verify:static": "pnpm build && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
|
|
315
|
+
"verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
|
|
316
|
+
"verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
|
|
310
317
|
"verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage && pnpm check:frame-axe",
|
|
311
318
|
"check:mcp-lockstep": "node scripts/check-release-lockstep.mjs",
|
|
319
|
+
"check:release-plan": "node scripts/check-release-command-plan.mjs",
|
|
320
|
+
"check:packed-public-contract": "node scripts/check-packed-public-contract.mjs",
|
|
312
321
|
"check:mcp-pattern-imports": "node scripts/check-mcp-pattern-imports.mjs",
|
|
313
322
|
"check:mcp-sync": "node scripts/check-mcp-sync.mjs",
|
|
314
323
|
"check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
|
|
@@ -323,6 +332,8 @@
|
|
|
323
332
|
"check:typography": "node scripts/check-typography.mjs",
|
|
324
333
|
"gen:component-tokens": "node scripts/gen-component-tokens.mjs",
|
|
325
334
|
"check:mcp-token-sync": "node scripts/gen-component-tokens.mjs --check",
|
|
335
|
+
"gen:email-tokens": "node scripts/gen-email-tokens.mjs",
|
|
336
|
+
"check:email-token-sync": "node scripts/gen-email-tokens.mjs --check",
|
|
326
337
|
"check:core-isolation": "node scripts/check-core-isolation.mjs",
|
|
327
338
|
"check:no-consumer-coupling": "node scripts/check-no-consumer-coupling.mjs",
|
|
328
339
|
"release": "node scripts/release.mjs",
|