@godxjp/ui 33.20.0 → 33.22.1

package/dist/tokens/components/form.css

@@ -8,6 +8,10 @@
 
   --form-label-font-size: var(--control-label-font-size, var(--text-sm));
 
+  --form-field-note-font-size: initial;
+  --form-field-note-line-height: initial;
+  --form-field-control-gap: initial;
+
   --form-block-gap: var(--space-6);
 
   --form-feedback-icon-size: var(--icon-size-sm);

package/dist/tokens/components/logo.css

@@ -26,6 +26,8 @@
   --logo-glyph-x-baseline-optical-offset: -0.11em;
   --logo-glyph-x-descender-optical-offset: -0.21em;
 
+  --logo-glyph-descender-trimmed-optical-offset: -0.1em;
+
   --logo-glyph-optical-offset: initial;
 
   --logo-glyph-fullwidth-width: 1;

package/dist/tokens/components/shell.css

@@ -2,6 +2,15 @@
 
 :root {
   --responsive-grid-column-width: 20rem;
+
+  --responsive-grid-catalog-track-size: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
+  --responsive-grid-catalog-gap: var(--space-6);
+  --responsive-grid-trio-track-size: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+  --responsive-grid-trio-gap: var(--space-6);
+  --responsive-grid-lead-track-size: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+  --responsive-grid-lead-gap: var(--space-10);
+  --responsive-grid-panels-track-size: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+  --responsive-grid-panels-gap: var(--space-6);
   --sidebar-section-label-font-size: var(
     --font-size-2xs,
     calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
@@ -181,6 +190,10 @@
   --topbar-item-hover-color: initial;
   --topbar-item-active-background: var(--secondary);
 
+  --topbar-item-current-color: initial;
+  --topbar-item-current-indicator-color: initial;
+  --topbar-item-current-indicator-size: var(--stroke-md);
+
   --topbar-item-badge-offset-block: initial;
   --topbar-item-badge-offset-inline: initial;
   --topbar-item-badge-size: 1rem;
@@ -451,6 +464,12 @@
   );
 
   --centered-shell-landing-background: initial;
+
+  --centered-shell-footer-inverse-background: initial;
+  --centered-shell-footer-inverse-foreground: initial;
+  --centered-shell-footer-inverse-muted-foreground: initial;
+  --centered-shell-footer-inverse-border: initial;
+  --centered-shell-footer-inverse-link-color: initial;
 }
 
 @media (pointer: coarse) {
@@ -479,6 +498,10 @@
   --mobile-shell-status-bar-height: var(--band-height-lg);
   --mobile-shell-header-bar-height: var(--band-height-3xl);
 
+  --mobile-shell-tab-bar-active-color: initial;
+  --mobile-shell-tab-bar-active-background: initial;
+  --mobile-shell-tab-bar-background: initial;
+  --mobile-shell-tab-bar-border: none;
   --mobile-shell-tab-bar-height: calc(var(--band-height-3xl) + var(--space-2));
   --mobile-shell-main-padding-block: var(--space-4);
   --mobile-shell-actions-padding-block: var(--space-3);

package/dist/tokens/components/table.css

@@ -106,7 +106,7 @@
   --table-skeleton-line-height: var(--table-skeleton-line-block-size);
   --table-skeleton-radius: initial;
 
-  --table-font-size: var(--font-size-sm, var(--font-size-base));
+  --table-font-size: initial;
 
   --table-line-height: calc(1.25 / 0.875);
 

package/docs/TOKENS.md

@@ -616,3 +616,29 @@ Its main area uses the full paper width with natural height, visible overflow an
 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.
+
+### Shared phone destination bar
+
+`AppShell mobileTabBar` accepts the same children as `MobileShell tabBar`: three to five
+`Button asChild` links (or action Buttons), with `aria-current="page"` on the current destination.
+Use native Tab/Shift+Tab and Enter navigation; this is a navigation landmark, not an ARIA tablist.
+`mobileTabBarLabel` overrides its localized landmark name. Keep longer navigation in the drawer.
+AppShell renders the band only with `responsiveNavigation="drawer"` at or below 900px; it is
+absent above that boundary and hidden in print.
+
+Both shells share `--mobile-shell-tab-bar-height` (minimum content band height),
+`--mobile-shell-tab-bar-background` (local card role), and `--mobile-shell-tab-bar-border`
+(default `none`, a complete block-start border when opted in). Current-page ink and fill use
+`--mobile-shell-tab-bar-active-color` and `--mobile-shell-tab-bar-active-background`, defaulting
+to the local brand ink and accent roles. Color knobs are `initial` and resolve at the reader.
+The existing `--mobile-shell-safe-inset-block-end` and `--mobile-shell-safe-inset-inline` keep
+children clear of device edges; the bar background covers the home-indicator inset.
+
+AppShell reserves the measured border-box band outside its main scroll region and footer;
+longer labels and changed safe insets therefore cannot cover the final record. The read-only
+`--app-shell-mobile-tab-bar-block-size` is published on that shell, including safe insets and
+borders. Read it with `var(--app-shell-mobile-tab-bar-block-size, 0px)` when composing clearance.
+The shared toast mechanism publishes the measured height as `--toast-sticky-bar-height` on html,
+and clears it when the bar unmounts or the viewport becomes desktop. To keep an external bottom
+dock below the shell, set the existing `--app-shell-viewport-inset` to the dock's reserved size;
+the destination band stays inside the remaining viewport. No fixed overlay is added over main.

package/package.json

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

package/scripts/ui-audit.mjs

@@ -1454,9 +1454,10 @@ function iconSizingRanges(source) {
   const ranges = [];
   // Each of these sizes a glyph it holds directly: Button through its svg utility ladder, the menu
   // items and TopbarItem through their own rules, Toggle/ToggleGroupItem through `.ui-toggle > svg`
-  // in control.css (a bare star inside a Toggle was a false positive, gh#1257).
+  // in control.css (a bare star inside a Toggle was a false positive, gh#1257), and the editorial
+  // masthead's 44px action through `.ui-editorial-masthead-action svg` (gh#1435).
   for (const m of source.matchAll(
-    /<(Button|DropdownMenuItem|DropdownMenuCheckboxItem|DropdownMenuRadioItem|TopbarItem|Toggle|ToggleGroupItem)\b[\s\S]*?<\/\1>/g,
+    /<(Button|DropdownMenuItem|DropdownMenuCheckboxItem|DropdownMenuRadioItem|TopbarItem|Toggle|ToggleGroupItem|EditorialMastheadAction)\b[\s\S]*?<\/\1>/g,
   )) {
     ranges.push([m.index, m.index + m[0].length]);
   }