@godxjp/ui 28.7.0 → 28.9.0

package/dist/tokens/components/shell.css

@@ -2,9 +2,18 @@
 
 :root {
   --responsive-grid-column-width: 20rem;
-  --sidebar-section-label-font-size: var(--font-size-2xs);
-  --sidebar-product-tenant-font-size: var(--font-size-2xs);
-  --sidebar-badge-font-size: var(--font-size-2xs);
+  --sidebar-section-label-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --sidebar-product-tenant-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --sidebar-badge-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
 
   --sidebar-badge-background: initial;
   --sidebar-badge-foreground: initial;
@@ -23,15 +32,39 @@
 
   --topbar-icon-focus-ring-alpha: 1;
 
-  --sidebar-user-role-font-size: var(--font-size-2xs);
+  --sidebar-user-role-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --org-switcher-meta-foreground: var(--muted-foreground);
-  --sidebar-nav-sub-font-size: var(--font-size-xs);
-  --sidebar-flyout-title-font-size: var(--font-size-xs);
-  --topbar-chip-icon-font-size: var(--font-size-2xs);
-  --kbd-font-size: var(--font-size-2xs);
-  --sidebar-logo-mark-font-size: var(--font-size-xs);
-  --sidebar-avatar-font-size: var(--font-size-2xs);
-  --sidebar-user-name-font-size: var(--font-size-xs);
+  --sidebar-nav-sub-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --sidebar-flyout-title-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --topbar-chip-icon-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --kbd-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --sidebar-logo-mark-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --sidebar-avatar-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --sidebar-user-name-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --sidebar-gradient: none;
   --topbar-gradient: none;
@@ -78,7 +111,10 @@
   --sidebar-brand-mark-size: 1.375rem;
   --sidebar-nav-item-height: var(--band-height-md);
 
-  --sidebar-nav-item-font-size: var(--font-size-xs);
+  --sidebar-nav-item-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --sidebar-nav-item-line-height: 1.5;
 
@@ -102,6 +138,9 @@
   --topbar-inset: 0px;
   --topbar-gap: var(--space-2);
 
+  --topbar-background-alpha: initial;
+  --topbar-backdrop-blur-size: initial;
+
   --topbar-center-compact-display: none;
 
   --topbar-item-padding-inline: var(--space-3);
@@ -121,7 +160,10 @@
   --topbar-item-badge-offset-inline: var(--space-1);
   --topbar-item-badge-size: 1rem;
   --topbar-item-badge-padding-inline: var(--space-1);
-  --topbar-item-badge-font-size: var(--font-size-2xs);
+  --topbar-item-badge-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --topbar-item-badge-background: initial;
   --topbar-item-badge-foreground: initial;
   --topbar-item-badge-destructive-background: initial;
@@ -140,7 +182,10 @@
   --org-switcher-list-offset: 0px;
 
   --org-switcher-legend-space-gap: var(--space-4);
-  --org-switcher-legend-font-size: var(--font-size-2xs);
+  --org-switcher-legend-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --org-switcher-hint-space-gap: var(--space-1);
 
   --org-switcher-dialog-width: 26rem;
@@ -169,14 +214,20 @@
   --app-launcher-mark-radius: var(--radius);
   --app-launcher-mark-background: var(--secondary);
   --app-launcher-mark-foreground: var(--secondary-foreground);
-  --app-launcher-mark-font-size: var(--font-size-sm);
-  --app-launcher-name-font-size: var(--font-size-2xs);
-  --app-launcher-group-label-font-size: var(--font-size-2xs);
+  --app-launcher-mark-font-size: var(--font-size-sm, var(--font-size-base));
+  --app-launcher-name-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --app-launcher-group-label-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --app-launcher-group-label-color: var(--muted-foreground);
   --app-launcher-state-min-height: 8rem;
 
   --app-launcher-launchpad-backdrop-background: initial;
-  --app-launcher-launchpad-backdrop-blur-size: 16px;
+  --app-launcher-launchpad-backdrop-blur-size: var(--blur-lg);
   --app-launcher-launchpad-backdrop-alpha: 55%;
 
   --app-launcher-launchpad-backdrop-color-saturate: 180%;
@@ -198,20 +249,22 @@
   --app-launcher-launchpad-mark-size: 4rem;
   --app-launcher-launchpad-mark-radius: var(--radius-lg);
 
-  --app-launcher-launchpad-mark-background: color-mix(
-    in srgb,
-    hsl(var(--card)) 78%,
-    transparent
-  );
+  --app-launcher-launchpad-mark-background: color-mix(in srgb, hsl(var(--card)) 78%, transparent);
   --app-launcher-launchpad-mark-border-color: color-mix(
     in srgb,
     hsl(var(--foreground)) 14%,
     transparent
   );
-  --app-launcher-launchpad-mark-font-size: var(--font-size-lg);
+  --app-launcher-launchpad-mark-font-size: var(
+    --font-size-lg,
+    calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+  );
   --app-launcher-launchpad-mark-shadow: var(--shadow-lg);
-  --app-launcher-launchpad-name-font-size: var(--font-size-sm);
-  --app-launcher-launchpad-title-font-size: var(--font-size-2xs);
+  --app-launcher-launchpad-name-font-size: var(--font-size-sm, var(--font-size-base));
+  --app-launcher-launchpad-title-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --app-launcher-launchpad-title-letter-spacing: 0.08em;
   --app-launcher-launchpad-close-space-padding: var(--space-2);
 
@@ -224,7 +277,13 @@
   --sidebar-item-active-background-alpha: 12%;
 
   --auth-shell-control-height: var(--control-height-comfortable);
-  --auth-shell-heading-size: var(--font-size-2xl);
+  --auth-shell-heading-size: var(
+    --font-size-2xl,
+    calc(
+      var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+        var(--font-size-ratio) * var(--font-size-ratio)
+    )
+  );
   --auth-shell-card-max-width: 24rem;
   --auth-shell-bar-padding: var(--space-5) var(--space-6);
   --auth-shell-main-padding: var(--space-6);
@@ -293,7 +352,10 @@
   --auth-shell-registration-identity-slot-block-size: 7rem;
 
   --auth-shell-divider-gap: 0.625rem;
-  --auth-shell-divider-label-font-size: var(--font-size-2xs);
+  --auth-shell-divider-label-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --auth-shell-divider-label-line-height: calc(19 / 11);
   --auth-shell-divider-rule-color: var(--border);
   --auth-shell-divider-label-color: var(--muted-foreground);
@@ -307,10 +369,13 @@
   --auth-account-summary-identity-min-width: 12rem;
   --auth-account-summary-avatar-size: var(--control-height-sm);
   --auth-account-summary-avatar-glyph-size: var(--control-icon-size-sm);
-  --auth-account-summary-email-font-size: var(--font-size-sm);
+  --auth-account-summary-email-font-size: var(--font-size-sm, var(--font-size-base));
   --auth-footer-content-gap: 0.375rem;
 
-  --auth-footer-text-font-size: var(--font-size-2xs);
+  --auth-footer-text-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
 
   --auth-footer-target-min-size: var(--touch-target-min);
   --auth-stack-gap: var(--space-3);
@@ -347,7 +412,10 @@
   --centered-shell-landing-card-shadow: none;
 
   --centered-shell-landing-heading-size: var(--font-size-display);
-  --centered-shell-landing-heading-size-compact: var(--font-size-3xl);
+  --centered-shell-landing-heading-size-compact: var(
+    --font-size-3xl,
+    calc(var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio))
+  );
 
   --centered-shell-landing-background: initial;
 }

package/dist/tokens/components/table.css

@@ -15,7 +15,7 @@
   --table-pagination-padding-x: initial;
 
   --table-surface-min-inline-size: 640px;
-  --table-head-font-size: var(--font-size-xs);
+  --table-head-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
 
   --table-head-font-weight: var(--font-weight-medium);
 
@@ -59,7 +59,10 @@
   --table-action-collection-meta-width-floor: 5rem;
 
   --table-action-collection-flex-width-floor: 5rem;
-  --table-action-collection-font-size-compact: var(--font-size-xs);
+  --table-action-collection-font-size-compact: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --table-action-collection-cell-space-x-compact: var(--space-2);
   --table-action-collection-cell-padding-y-compact: var(--space-2);
   --table-action-collection-row-height-compact: var(--table-row-height-compact);
@@ -72,13 +75,16 @@
   --table-stacked-collection-card-padding-x: var(--space-inline-md);
   --table-stacked-collection-card-gap: var(--space-stack-sm);
   --table-stacked-collection-cell-padding-y: var(--space-stack-xs);
-  --table-stacked-collection-label-font-size: var(--font-size-xs);
+  --table-stacked-collection-label-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --table-select-column-width: 2.5rem;
   --table-sort-icon-size: var(--icon-size-xs);
   --table-toolbar-icon-size: var(--icon-size-md);
   --table-pagination-icon-size: var(--icon-size-md);
-  --table-pagination-font-size: var(--font-size-sm);
+  --table-pagination-font-size: var(--font-size-sm, var(--font-size-base));
 
   --table-skeleton-check-size: 1rem;
 
@@ -86,7 +92,7 @@
   --table-skeleton-line-height: var(--table-skeleton-line-block-size);
   --table-skeleton-radius: var(--radius-sm);
 
-  --table-font-size: var(--font-size-sm);
+  --table-font-size: var(--font-size-sm, var(--font-size-base));
 
   --table-line-height: calc(1.25 / 0.875);
 

package/dist/tokens/components/thought-chain.css

@@ -7,7 +7,10 @@
   --thought-chain-body-gap: var(--space-1);
 
   --thought-chain-icon-size: var(--band-height-sm);
-  --thought-chain-icon-font-size: var(--font-size-xs);
+  --thought-chain-icon-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --thought-chain-icon-radius: var(--radius-pill);
 
   --thought-chain-icon-background: initial;

package/dist/tokens/components/toggle.css

@@ -3,7 +3,10 @@
 
   --toggle-count-min-width: var(--space-4);
   --toggle-count-space-inline: var(--space-1);
-  --toggle-count-font-size: var(--font-size-xs);
+  --toggle-count-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --toggle-count-radius: var(--radius-pill);
 
   --toggle-count-gap: 0;

package/dist/tokens/components/tree.css

@@ -9,7 +9,7 @@
   --tree-node-padding-inline: var(--space-2);
   --tree-node-gap: var(--space-2);
   --tree-node-radius: var(--radius-sm);
-  --tree-node-font-size: var(--font-size-sm);
+  --tree-node-font-size: var(--font-size-sm, var(--font-size-base));
 
   --tree-switcher-size: 1.25rem;
 

package/dist/tokens/components/upload.css

@@ -7,17 +7,26 @@
   --upload-dropzone-border-width: var(--stroke-md);
   --upload-dropzone-icon-size: var(--icon-size-3xl);
   --upload-dropzone-hint-space-block-start: var(--space-3);
-  --upload-dropzone-hint-font-size: var(--font-size-sm);
+  --upload-dropzone-hint-font-size: var(--font-size-sm, var(--font-size-base));
   --upload-dropzone-meta-space-block-start: var(--space-1);
-  --upload-dropzone-meta-font-size: var(--font-size-xs);
+  --upload-dropzone-meta-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --upload-tile-size: 6rem;
   --upload-tile-radius: var(--radius-md);
   --upload-tile-space-gap: var(--space-3);
   --upload-tile-icon-size: var(--icon-size-xl);
   --upload-tile-label-space-block-start: var(--space-1);
-  --upload-tile-label-font-size: var(--font-size-xs);
-  --upload-tile-overlay-font-size: var(--font-size-xs);
+  --upload-tile-label-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --upload-tile-overlay-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --upload-overlay-background: initial;
   --upload-overlay-alpha: 70%;
@@ -33,14 +42,17 @@
 
   --upload-picture-icon-size: var(--icon-size-2xl);
   --upload-picture-empty-label-space-block-start: var(--space-2);
-  --upload-picture-empty-label-font-size: var(--font-size-sm);
-  --upload-picture-overlay-font-size: var(--font-size-sm);
+  --upload-picture-empty-label-font-size: var(--font-size-sm, var(--font-size-base));
+  --upload-picture-overlay-font-size: var(--font-size-sm, var(--font-size-base));
 
   --upload-picture-badge-radius: var(--radius-md);
   --upload-picture-badge-offset: var(--space-2);
   --upload-picture-badge-space-inline: var(--space-2);
   --upload-picture-badge-space-block: 0.125rem;
-  --upload-picture-badge-font-size: var(--font-size-xs);
+  --upload-picture-badge-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --upload-avatar-size: 6rem;
 
@@ -57,14 +69,14 @@
   --upload-draft-space-block: var(--space-2);
   --upload-draft-space-gap: var(--space-2);
   --upload-draft-radius: var(--radius-md);
-  --upload-draft-font-size: var(--font-size-sm);
+  --upload-draft-font-size: var(--font-size-sm, var(--font-size-base));
   --upload-draft-icon-size: var(--icon-size-sm);
 
   --upload-row-space-inline: var(--space-3);
   --upload-row-space-block: var(--space-2);
   --upload-row-space-gap: var(--space-3);
   --upload-row-radius: var(--radius-md);
-  --upload-row-font-size: var(--font-size-sm);
+  --upload-row-font-size: var(--font-size-sm, var(--font-size-base));
   --upload-row-icon-size: var(--icon-size-md);
 
   --upload-crop-dialog-max-width: 24rem;

package/dist/tokens/foundation.css

@@ -146,37 +146,27 @@
 
   --font-size-base: 0.875rem;
   --font-size-ratio: 1.1227;
-  --font-size-2xs: calc(
-    var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)
-  );
-  --font-size-xs: calc(var(--font-size-base) / var(--font-size-ratio));
-  --font-size-sm: var(--font-size-base);
-  --font-size-lg: calc(
-    var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)
-  );
-  --font-size-xl: calc(var(--font-size-lg) * var(--font-size-ratio));
-  --font-size-2xl: calc(var(--font-size-xl) * var(--font-size-ratio));
-
-  --font-size-display: 3.375rem;
+
+  --font-size-2xs: initial;
+  --font-size-xs: initial;
+  --font-size-sm: initial;
+  --font-size-lg: initial;
+  --font-size-xl: initial;
+  --font-size-2xl: initial;
+
+  --font-size-display: clamp(2rem, 1.5rem + 2.5vw, 3.375rem);
   --font-size-display-ratio: 1.28;
-  --font-size-3xl: calc(
-    var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio)
-  );
-  --font-size-4xl: calc(
-    var(--font-size-display) / var(--font-size-display-ratio)
-  );
-  --font-size-5xl: var(--font-size-display);
-
-  --heading-h1: calc(
-    var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio)
-  );
-  --heading-h2: calc(
-    var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)
-  );
-  --heading-h3: var(--font-size-base);
-  --heading-h4: var(--font-size-xs);
-
-  --heading-h5: var(--font-size-2xs);
+
+  --font-size-3xl: initial;
+  --font-size-4xl: initial;
+  --font-size-5xl: initial;
+
+  --heading-h1: initial;
+  --heading-h2: initial;
+  --heading-h3: initial;
+  --heading-h4: initial;
+
+  --heading-h5: initial;
 
   --font-weight-normal: 400;
   --font-weight-medium: 500;
@@ -205,6 +195,9 @@
   --space-10: calc(2.5rem * var(--scaling));
   --space-12: calc(3rem * var(--scaling));
 
+  --space-20: calc(5rem * var(--scaling));
+  --space-24: calc(6rem * var(--scaling));
+
   --icon-size-2xs: 0.625rem;
   --icon-size-xs: 0.75rem;
   --icon-size-sm: 0.875rem;
@@ -222,6 +215,10 @@
   --stroke-xl: 4px;
   --stroke-2xl: 6px;
 
+  --blur-sm: 4px;
+  --blur-md: 8px;
+  --blur-lg: 16px;
+
   --band-height-xs: 1.5rem;
   --band-height-sm: 1.75rem;
   --band-height-md: 2rem;
@@ -254,6 +251,10 @@
   --activity-interval: var(--duration-loop);
 
   --activity-stagger-step: 160ms;
+
+  --marquee-interval: 20s;
+  --marquee-interval-slow: calc(var(--marquee-interval) * 2);
+  --marquee-interval-fast: calc(var(--marquee-interval) / 2);
 }
 
 .ui-scale-fixed {
@@ -267,6 +268,8 @@
   --space-8: 2rem;
   --space-10: 2.5rem;
   --space-12: 3rem;
+  --space-20: 5rem;
+  --space-24: 6rem;
   --radius: 0.375rem;
   --control-height: var(--control-height-default);
 
@@ -289,6 +292,8 @@
   --space-page-x: var(--space-6);
   --space-page-y: var(--space-6);
   --space-section: var(--space-4);
+  --space-section-band: var(--space-20);
+  --space-section-hero: var(--space-24);
   --space-stack-xs: var(--space-1);
   --space-stack-sm: var(--space-2);
   --space-stack-md: var(--space-4);

package/dist/tokens/semantic/layout.css

@@ -5,6 +5,9 @@
   --space-page-x: var(--space-6);
   --space-page-y: var(--space-6);
   --space-section: var(--space-4);
+
+  --space-section-band: var(--space-20);
+  --space-section-hero: var(--space-24);
   --space-stack-xs: var(--space-1);
   --space-stack-sm: var(--space-2);
   --space-stack-md: var(--space-4);
@@ -15,8 +18,12 @@
   --space-inline-md: var(--space-3);
   --space-inline-lg: var(--space-4);
 
+  --space-inline-xl: var(--space-6);
+
   --overlay-z-index: 50;
 
+  --sticky-z-index: 20;
+
   --master-detail-rail-compact: 18.75rem;
   --master-detail-rail-narrow: 12rem;
   --master-detail-rail-wide: 24rem;
@@ -64,14 +71,28 @@
   --page-measure-narrow: 42rem;
   --page-measure-medium: 48rem;
 
-  --page-title-font-size: var(--heading-h1);
-  --page-title-font-size-compact: var(--heading-h2);
+  --page-measure-wide: 72rem;
+
+  --page-title-font-size: var(
+    --heading-h1,
+    calc(
+      var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+        var(--font-size-ratio)
+    )
+  );
+  --page-title-font-size-compact: var(
+    --heading-h2,
+    calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+  );
   --page-subtitle-font-size: var(--font-size-base);
-  --page-subtitle-font-size-compact: var(--font-size-sm);
+  --page-subtitle-font-size-compact: var(--font-size-sm, var(--font-size-base));
 
-  --page-title-font-size-chrome: var(--heading-h3);
+  --page-title-font-size-chrome: var(--heading-h3, var(--font-size-base));
 
-  --page-subtitle-font-size-chrome: var(--font-size-2xs);
+  --page-subtitle-font-size-chrome: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
 
   --page-pad-block-start-chrome: 0px;
 

package/docs/COMPOSITION-VS-COMPONENT.md

@@ -77,7 +77,8 @@ new UI need
 | `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) |
+| `ServiceLauncherCard`                                   | ➖  | ❌  | ❌  | ✅  | ✅  | ➖  | ➖  | **Composition by the test — RETAINED as a recorded exception** (gh#814)  |
+| `MegaMenu`                                              | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ➖  | **Framework component** — 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`                              |
@@ -86,6 +87,23 @@ new UI need
 
 `✅ 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.
 
+**MegaMenu is the instructive PASS, and it is in this table because it sits next to Navbar.** A
+Navbar fails every criterion; a megamenu is the same bar with behaviour bolted through it, and that
+one difference flips the verdict. **C2** is the whole case: a roving tabindex across the top-level
+items, `aria-expanded`/`aria-controls` per trigger, hover intent (a diagonal pointer path toward the
+panel must not close it), `Escape` closing and returning focus to its trigger, Tab-out and
+outside-click closing, and close-on-route-change. None of that is layout. **C3** is the one people
+get wrong: `DropdownMenu` looks like the answer and is the WRONG primitive, not an awkward one — it
+is react-aria-components `Menu`, i.e. `role="menu"` / `role="menuitem"`, which announces a set of
+site links as a desktop application menu and takes Tab out of the widget. The APG says so itself in
+its Disclosure Navigation example. A recipe over `DropdownMenu` would therefore ship the classic
+megamenu accessibility defect, which is exactly the case C3 is asking about. **C7 is the weak
+one** — marked ➖ deliberately: this is a JP business-software library, and a marketing megamenu is
+not in every consumer's build. It is kept because the same disclosure bar is what an admin console
+with several product areas needs, and because the cost is one file with no new dependency (no
+`@radix-ui/react-navigation-menu`, no animation runtime). Compare `StatCard`, whose borderline is
+C2 rather than C7.
+
 **ServiceLauncherCard is the ONE recorded exception, and it is recorded so that it stays one.** It shipped before the test was run against it, and when the test was run it came back with two hard FAILs: **C2** — no state, no keyboard handling, no focus management, its only ARIA three static attributes — and **C3** — its own imports are `Card` + `CardContent` + `Badge` + a Lucide glyph, so "could I build this right now from primitives?" is yes. By §2 that makes it a composition pattern. It is kept anyway because `src/components/layout/app-launcher.tsx` consumes it: it is an internal building block of a component that **does** pass, so the question was never "should it exist" but "should it be PUBLIC", and removing a public export is breaking. Keeping it public was the cheaper call and the ledger lives on gh#814 and at the top of `src/components/data-display/service-launcher-card.tsx`. **Consumers should compose `Card` + `Badge` for a service tile** — reach for `ServiceLauncherCard` only to match `AppLauncher`'s own tiles — and this row is not precedent for adding another static tile to `src/components/`.
 
 ---