@godxjp/ui 18.3.0 → 18.5.0

package/dist/props/registry.js

@@ -187,6 +187,16 @@ const VOCABULARY_REGISTRY = {
     category: "layout",
     description: "CenteredShell column max-width \u2014 sm, md, lg"
   },
+  CenteredShellAlignProp: {
+    file: "vocabulary/layout.prop.ts",
+    category: "layout",
+    description: "CenteredShell column block alignment \u2014 start (flowing page), center (system surface)"
+  },
+  AuthShellPresetProp: {
+    file: "vocabulary/layout.prop.ts",
+    category: "layout",
+    description: "AuthShell named flow measure \u2014 default | device-authorization (380px card, 5px mobile gutter) | context-selection (25rem card, edge-to-edge mobile) | account-recovery (432px SCR-008 recovery/MFA panel, 15px mobile gutter)"
+  },
   GapProp: {
     file: "vocabulary/layout.prop.ts",
     category: "layout",
@@ -216,7 +226,7 @@ const VOCABULARY_REGISTRY = {
   AppSettingPickerAppearanceProp: {
     file: "vocabulary/interaction.prop.ts",
     category: "interaction",
-    description: "AppSettingPicker trigger presentation: labeled (icon + value) | icon (square icon-only topbar trigger)"
+    description: "AppSettingPicker trigger presentation: labeled (icon + value) | icon (square icon-only topbar trigger) | inline (compact text footer trigger)"
   },
   ShapeProp: {
     file: "vocabulary/interaction.prop.ts",
@@ -402,9 +412,19 @@ const COMPONENT_PROP_REGISTRY = {
       "DisabledProp",
       "IdProp",
       "ClassNameProp",
-      "AppSettingPickerAppearanceProp"
+      "AppSettingPickerAppearanceProp",
+      {
+        field: "compact",
+        local: true,
+        reason: "Trigger DENSITY for the picker only (sm control tier + content-hugging width) \u2014 orthogonal to `appearance`, and not the page-level DensityProp scope."
+      }
     ]
   },
+  PageContainerHeaderLayoutProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: []
+  },
   PageContainerProp: {
     group: "layout",
     file: "components/layout.prop.ts",
@@ -415,7 +435,12 @@ const COMPONENT_PROP_REGISTRY = {
       "FooterProp",
       "BreadcrumbProp",
       "DensityProp",
-      "PageContainerVariantProp"
+      "PageContainerVariantProp",
+      {
+        field: "headerLayout",
+        local: true,
+        reason: "Header ARRANGEMENT of the title band vs the extra slot below the 640px step (stack | responsive-inline) \u2014 orthogonal to PageContainerVariantProp, which selects the page shell layout."
+      }
     ]
   },
   FlexDirectionProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
@@ -433,6 +458,70 @@ const COMPONENT_PROP_REGISTRY = {
     ]
   },
   ResponsiveGridColumnsProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
+  MasterDetailRailWidthProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: []
+  },
+  MasterDetailRailProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: []
+  },
+  MasterDetailMasterViewportProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: []
+  },
+  MasterDetailProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "ChildrenProp",
+      "BreakpointProp",
+      "IdProp",
+      {
+        field: "master",
+        local: true,
+        reason: "Semantic selectable-collection slot paired with the detail children slot."
+      },
+      {
+        field: "rail",
+        local: true,
+        reason: "Semantic selector for which region owns the fixed track (master | detail)."
+      },
+      {
+        field: "railWidth",
+        local: true,
+        reason: "Token-owned 300px/320px rail geometry preset."
+      },
+      {
+        field: "masterViewport",
+        local: true,
+        reason: "Token-owned bounded-collection preset (auto | compact | standard) for the master region's scroll viewport \u2014 geometry, not a raw pixel measure."
+      },
+      {
+        field: "collapseBelow",
+        local: true,
+        reason: "Per-instance override of the --master-detail-collapse-below stacking threshold."
+      },
+      {
+        field: "masterLabel",
+        local: true,
+        reason: "Accessible name for the master region landmark."
+      },
+      {
+        field: "detailLabel",
+        local: true,
+        reason: "Accessible name for the detail region landmark."
+      },
+      {
+        field: "detailId",
+        local: true,
+        reason: "Id of the detail region so master controls can wire aria-controls and focus."
+      }
+    ]
+  },
   PageInsetProp: {
     group: "layout",
     file: "components/layout.prop.ts",
@@ -446,12 +535,148 @@ const COMPONENT_PROP_REGISTRY = {
   AuthShellProp: {
     group: "layout",
     file: "components/layout.prop.ts",
-    vocabulary: ["ChildrenProp", "ClassNameProp"]
+    vocabulary: [
+      "ChildrenProp",
+      "ClassNameProp",
+      {
+        field: "variant",
+        local: true,
+        reason: "Auth-shell geometry preset; canonical selects the shared DXS token contract."
+      },
+      {
+        field: "density",
+        local: true,
+        reason: "Auth-specific vertical-density scope for card descendants."
+      },
+      "AuthShellPresetProp"
+    ]
+  },
+  AuthDividerProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: ["LabelProp", "ClassNameProp"]
+  },
+  AuthFooterProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "ClassNameProp",
+      {
+        field: "product",
+        local: true,
+        reason: "Consumer-owned host/product identity slot of the legal line, not a page TitleProp."
+      },
+      {
+        field: "terms",
+        local: true,
+        reason: "Consumer-owned Terms link/text slot \u2014 the library never invents legal navigation."
+      },
+      {
+        field: "privacy",
+        local: true,
+        reason: "Consumer-owned Privacy link/text slot \u2014 the library never invents legal navigation."
+      },
+      {
+        field: "locale",
+        local: true,
+        reason: "Optional consumer-owned locale control slot (an AppSettingPicker), not a locale value."
+      }
+    ]
+  },
+  AuthIdentityProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "TitleProp",
+      "ClassNameProp",
+      {
+        field: "requester",
+        local: true,
+        reason: "Authoritative requesting-client context for a delegated auth flow (device grant / consent)."
+      }
+    ]
   },
   CenteredShellProp: {
     group: "layout",
     file: "components/layout.prop.ts",
-    vocabulary: ["ChildrenProp", "ClassNameProp", "CenteredShellWidthProp"]
+    vocabulary: [
+      "ChildrenProp",
+      "ClassNameProp",
+      "CenteredShellWidthProp",
+      "CenteredShellAlignProp"
+    ]
+  },
+  LegalDocumentSectionProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "IdProp",
+      "TitleProp",
+      {
+        field: "content",
+        local: true,
+        reason: "Consumer-owned legal body for one section \u2014 a content slot, not the ChildrenProp of the shell itself."
+      }
+    ]
+  },
+  LegalDocumentShellProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "TitleProp",
+      "IdProp",
+      "ClassNameProp",
+      {
+        field: "version",
+        local: true,
+        reason: "Document version identifier interpolated into a localized 'Version {version}'."
+      },
+      {
+        field: "effectiveDate",
+        local: true,
+        reason: "ISO 8601 date input formatted via Intl.DateTimeFormat in the active locale."
+      },
+      {
+        field: "summary",
+        local: true,
+        reason: "Plain-language document summary slot, distinct from a page SubtitleProp."
+      },
+      {
+        field: "contentsLabel",
+        local: true,
+        reason: "Accessible name + visible caption of the contents nav landmark (landmark-unique override)."
+      },
+      {
+        field: "sections",
+        local: true,
+        reason: "Ordered LegalDocumentSectionProp[] driving both the contents list and the body."
+      },
+      {
+        field: "activeSection",
+        local: true,
+        reason: "Controlled active-section id \u2014 the X / defaultX / onXChange family (like open/onOpenChange); 'value' would be meaningless on a document shell."
+      },
+      {
+        field: "defaultActiveSection",
+        local: true,
+        reason: "Uncontrolled initial active-section id."
+      },
+      {
+        field: "onActiveSectionChange",
+        local: true,
+        reason: "Active-section change handler (anchor activation \xB7 hash deep link \xB7 scroll spy)."
+      },
+      {
+        field: "documentNavigation",
+        local: true,
+        reason: "Rail slot for a switcher across the legal document set."
+      },
+      {
+        field: "footerAction",
+        local: true,
+        reason: "Document-footer slot for accept / download / print actions."
+      }
+    ]
   },
   SidebarProductProp: {
     group: "layout",
@@ -463,11 +688,47 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/layout.prop.ts",
     vocabulary: ["IdProp", "LabelProp", "DisabledProp", "ChildrenProp"]
   },
+  SidebarRenderItemProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: ["ClassNameProp", "ChildrenProp"]
+  },
+  SidebarLinkProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: ["ClassNameProp", "ChildrenProp", "OnClickProp"]
+  },
+  SidebarLinkComponentProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      {
+        field: "linkComponent",
+        local: true,
+        reason: "Component type alias for a framework router Link driven by SidebarLinkProp (gh#213)."
+      }
+    ]
+  },
   SidebarSectionProp: {
     group: "layout",
     file: "components/layout.prop.ts",
     vocabulary: ["LabelProp"]
   },
+  OrgSwitcherOrganization: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: ["IdProp", "LabelProp", "DisabledProp"]
+  },
+  OrgSwitcherLabels: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: ["LabelProp"]
+  },
+  OrgSwitcherProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: ["ValueProp", "OnValueChangeProp", "DisabledProp", "ClassNameProp"]
+  },
   SidebarProp: {
     group: "layout",
     file: "components/layout.prop.ts",
@@ -795,7 +1056,7 @@ const COMPONENT_PROP_REGISTRY = {
   DataTableProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
-    vocabulary: ["ColumnDefProp", "DensityProp", "SortStateProp", "SelectedIdsProp"]
+    vocabulary: ["ColumnDefProp", "DensityProp", "SortStateProp", "SelectedIdsProp", "HandlerProp"]
   },
   CredentialRevealProp: {
     group: "data-display",
@@ -877,6 +1138,38 @@ const COMPONENT_PROP_REGISTRY = {
       { field: "horizontal", local: true, reason: "Category axis on the left." }
     ]
   },
+  CompactBarTrendProp: {
+    group: "data-display",
+    file: "components/charts.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "DescriptionProp",
+      "SizeProp",
+      "FooterProp",
+      "EmptyMessageProp",
+      "ClassNameProp",
+      "IdProp",
+      { field: "data", local: true, reason: "Chart row data (one bar per row)." },
+      { field: "categoryKey", local: true, reason: "Accessor key for the bar's tick label." },
+      { field: "valueKey", local: true, reason: "Accessor key for the plotted numeric value." },
+      {
+        field: "emphasizedIndex",
+        local: true,
+        reason: "Index of the highlighted 'current' bar (negative counts from the end)."
+      },
+      {
+        field: "showCategoryLabels",
+        local: true,
+        reason: "Chart-specific tick-label toggle."
+      },
+      {
+        field: "numberFormat",
+        local: true,
+        reason: "Intl.NumberFormat options for the text alternative."
+      },
+      { field: "ref", local: true, reason: "Forwarded ref to the <figure> element." }
+    ]
+  },
   AreaChartProp: {
     group: "data-display",
     file: "components/charts.prop.ts",
@@ -1036,6 +1329,7 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/feedback.prop.ts",
     vocabulary: ["ClassNameProp", "ChildrenProp"]
   },
+  SheetResponsiveProp: { group: "feedback", file: "components/feedback.prop.ts", vocabulary: [] },
   SkeletonRowsProp: { group: "feedback", file: "components/feedback.prop.ts", vocabulary: [] },
   ToolbarProp: {
     group: "navigation",
@@ -1048,10 +1342,15 @@ const COMPONENT_PROP_REGISTRY = {
       "ChildrenProp"
     ]
   },
+  FilterBarOverflowProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: []
+  },
   ToolbarGroupProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",
-    vocabulary: ["LabelProp", "ClassNameProp", "ChildrenProp"]
+    vocabulary: ["LabelProp", "IdProp", "ClassNameProp", "ChildrenProp"]
   },
   PaginationProp: {
     group: "navigation",
@@ -1116,6 +1415,21 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/ui/toggle.tsx",
     vocabulary: ["SizeProp", "ClassNameProp"]
   },
+  CommandPaletteProp: {
+    group: "data-entry",
+    file: "components/data-entry/command-palette.tsx",
+    vocabulary: ["OpenProp", "DefaultOpenProp", "OnOpenChangeProp"]
+  },
+  TwoFactorSetupProp: {
+    group: "feedback",
+    file: "components/feedback/two-factor-setup.tsx",
+    vocabulary: ["OpenProp", "OnOpenChangeProp", "PendingProp"]
+  },
+  AuthStackProp: {
+    group: "layout",
+    file: "components/layout/auth-stack.tsx",
+    vocabulary: ["ChildrenProp", "ClassNameProp"]
+  },
   RatingProp: {
     group: "data-entry",
     file: "components/ui/rating.tsx",
@@ -1191,11 +1505,31 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-display/card.tsx",
     vocabulary: ["TitleProp", "ToneProp", "IconProp", "ClassNameProp"]
   },
+  ServiceLauncherCardProp: {
+    group: "data-display",
+    file: "components/data-display/service-launcher-card.tsx",
+    vocabulary: ["TitleProp", "ToneProp", "IconProp", "ClassNameProp", "DisabledProp"]
+  },
+  ServiceCatalogCtaProp: {
+    group: "data-display",
+    file: "components/data-display/service-launcher-card.tsx",
+    vocabulary: ["TitleProp", "IconProp", "ClassNameProp"]
+  },
+  ServiceLauncherCardSkeletonProp: {
+    group: "data-display",
+    file: "components/data-display/service-launcher-card.tsx",
+    vocabulary: ["LabelProp", "ClassNameProp"]
+  },
   ResponsiveGridProp: {
     group: "layout",
     file: "components/layout/responsive-grid.tsx",
     vocabulary: ["GapProp", "ClassNameProp", "ChildrenProp"]
   },
+  MasterDetailProps: {
+    group: "layout",
+    file: "components/layout/master-detail.tsx",
+    vocabulary: ["ChildrenProp"]
+  },
   SplitPaneProp: {
     group: "layout",
     file: "components/layout/split-pane.tsx",

package/dist/props/vocabulary/index.d.ts

@@ -1,7 +1,7 @@
 /** Barrel — all vocabulary prop types. */
 export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, OnOpenChangeProp, HandlerProp, PendingProp, RequiredProp, DisabledProp, LabelProp, HelperProp, ErrorProp, PlaceholderProp, NameProp, ValueProp, DefaultValueProp, OnValueChangeProp, OnChangeProp, OnClickProp, AsChildProp, WidthProp, } from "./shared.prop.js";
 export type { TitleProp, SubtitleProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
-export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
+export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, AuthShellPresetProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
 export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, ShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp } from "./navigation.prop.js";
 export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, } from "./data.prop.js";

package/dist/props/vocabulary/interaction.prop.d.ts

@@ -29,7 +29,7 @@ export type BadgeVariantProp = "default" | "secondary" | "outline" | "dashed";
  *   `aria-label`, focus ring, keyboard behaviour and a `--control-height` tap target (which is
  *   ≥44px on coarse/touch pointers per Rule #24) — so consumers never hide internal nodes via CSS.
  */
-export type AppSettingPickerAppearanceProp = "labeled" | "icon";
+export type AppSettingPickerAppearanceProp = "labeled" | "icon" | "inline";
 /** Button size preset. */
 export type SizeProp = "xs" | "sm" | "md" | "lg";
 /** Button size preset; icon-only sizes are a documented Button subset. */

package/dist/props/vocabulary/layout.prop.d.ts

@@ -10,6 +10,24 @@ export type DensityProp = "compact" | "default" | "comfortable";
 export type PageContainerVariantProp = "default" | "narrow" | "flush" | "ghost";
 /** CenteredShell content-column max-width tier — sm ~32rem, md ~46rem, lg ~64rem. */
 export type CenteredShellWidthProp = "sm" | "md" | "lg";
+/**
+ * CenteredShell content-column BLOCK alignment inside the viewport-height shell.
+ * `"start"` (default) keeps the top-aligned flowing/scrolling page shape; `"center"` centres the
+ * column in the viewport for a SYSTEM-level standalone surface (a 500/503 error page, a
+ * maintenance notice) — the geometry stays package-owned, so no consumer `min-h-dvh` / flex CSS.
+ */
+export type CenteredShellAlignProp = "start" | "center";
+/**
+ * AuthShell named flow preset — the page MEASURE contract for a canonical hosted-identity flow
+ * (card max-width plus the desktop and mobile page gutters), owned by component tokens.
+ * `"default"` keeps the shell's own measure; `"device-authorization"` is the 380px device-grant
+ * measure with a 5px mobile inline gutter; `"context-selection"` is the 25rem organisation/context
+ * picker measure that goes edge-to-edge on mobile; `"account-recovery"` is the 432px SCR-008
+ * measure shared by the password-recovery and sign-in MFA challenge panels (15px mobile inline
+ * gutter). Orthogonal to AuthShell's `variant` (which owns control density and heading size) —
+ * combine them.
+ */
+export type AuthShellPresetProp = "default" | "device-authorization" | "context-selection" | "account-recovery";
 /** Shared gap between layout children; components may document subsets. */
 export type GapProp = "xs" | "sm" | "md" | "lg" | "xl";
 /** DataTable row density subset. */

package/dist/styles/base.css

@@ -14,8 +14,14 @@
  *
  * The layout files declare `@layer components` and use `@apply`, so base.css
  * (which pulls in Tailwind) MUST be imported before them, in the same
- * stylesheet. Bundled fonts are opt-in — add `@godxjp/ui/styles/fonts` if you
- * want them, or skip it and supply your own via the --font-family-* tokens.
+ * stylesheet.
+ *
+ * Bundled fonts are opt-in — add `@godxjp/ui/styles/fonts` if you want them, or
+ * skip it and supply your own via the --font-family-* tokens. When you DO import
+ * it, it MUST come AFTER this file: base.css pulls in tokens/foundation.css,
+ * whose font-agnostic `:root { --font-sans-base: <system stack> }` sits at the
+ * same specificity as the bundle's fill, so the later import wins. Imported
+ * first, the bundle is dead weight (issue #210).
  *
  * Prefer the all-in-one `@godxjp/ui/styles` entry if you'd rather ship every
  * component's CSS + the bundled fonts and not think about it.
@@ -27,7 +33,7 @@
  * base sans. Consumers switch a locale's face by setting its slot, e.g.
  *   :root { --font-sans-ja: "Noto Sans JP", var(--font-sans-base); }
  * without writing any [lang] selectors. The opt-in bundle styles/fonts fills
- * these slots for its Noto Sans JP + Montserrat faces. `--font-sans-base` is a
+ * these slots for its M PLUS 2 + Noto Sans JP fallback. `--font-sans-base` is a
  * separate token (not --font-family-sans) so the fallback can't self-reference. */
 [lang="ja"] {
   --font-family-sans: var(--font-sans-ja, var(--font-sans-base));