@godxjp/ui 33.20.0 → 33.22.1

package/dist/components/layout/index.d.ts

@@ -55,5 +55,11 @@ export { AspectRatio } from "./aspect-ratio.js";
 export { ServiceRolePanel } from "./service-role-panel.js";
 export type { ServiceRoleItemProp, ServiceRolePanelProp, ServiceRolePanelProps, } from "./service-role-panel.js";
 export { useAppShellNavigationMode } from "./app-shell.js";
+export { EditorialAuth, EditorialAuthCard, EditorialEmptyPanel, EditorialFootnote, EditorialMetaBar, EditorialStats, EditorialTextButton, EditorialToggleGroup, EditorialToolbar, HoldingCard, HoldingCardAction, HoldingGrid, SettingsLayout, SettingsPanel, ThemePicker, } from "./editorial-account.js";
+export type { EditorialAuthCardProp, EditorialAuthCardProps, EditorialAuthProp, EditorialAuthProps, EditorialEmptyPanelProp, EditorialEmptyPanelProps, EditorialFootnoteProp, EditorialFootnoteProps, EditorialMetaBarProp, EditorialMetaBarProps, EditorialStatsItemProp, EditorialStatsProp, EditorialStatsProps, EditorialTextButtonProp, EditorialTextButtonProps, EditorialToggleGroupItemProp, EditorialToggleGroupProp, EditorialToggleGroupProps, EditorialToolbarProp, EditorialToolbarProps, HoldingCardActionProp, HoldingCardProp, HoldingCardProps, HoldingGridProp, HoldingGridProps, HoldingViewProp, SettingsLayoutProp, SettingsLayoutProps, SettingsPanelProp, SettingsPanelProps, ThemePickerOptionProp, ThemePickerPreviewProp, ThemePickerProp, ThemePickerProps, } from "./editorial-account.js";
 export { Affix } from "./affix.js";
 export type { AffixProp, AffixProps, AffixTargetProp } from "./affix.js";
+export { CatalogDetail, CatalogDetailSection, CatalogDetailTag, EditorialFilterField, EditorialFilterPanel, EditorialPrompt, PriceSummary, } from "./editorial-catalog.js";
+export type { CatalogDetailProp, CatalogDetailProps, CatalogDetailSectionProp, CatalogDetailSectionProps, CatalogDetailTagProp, EditorialPromptProp, EditorialPromptProps, PriceSummaryProp, PriceSummaryProps, EditorialFilterFieldProp, EditorialFilterFieldProps, EditorialFilterPanelProp, EditorialFilterPanelProps, } from "./editorial-catalog.js";
+export { CardShowcase, CatalogCard, CatalogCardTag, EditorialArticle, EditorialArticleSection, EditorialBanner, EditorialBreadcrumb, EditorialCard, EditorialFilterBar, EditorialFooter, EditorialHero, EditorialMasthead, EditorialMastheadAction, EditorialMastheadLink, EditorialNote, EditorialPageHeader, EditorialPanel, EditorialPillNav, EditorialPillNavItem, EditorialSearch, EditorialSection, EditorialSectionHead, EditorialTextLink, Eyebrow, } from "./editorial.js";
+export type { CardShowcaseProp, CardShowcaseProps, CatalogCardProp, CatalogCardProps, CatalogCardTagProp, EditorialBannerProp, EditorialBannerProps, EditorialArticleProp, EditorialArticleProps, EditorialArticleSectionProp, EditorialNoteProp, EditorialPanelProp, EditorialPanelProps, EditorialBreadcrumbProp, EditorialBreadcrumbProps, EditorialCardProp, EditorialCardProps, EditorialHeroProp, EditorialHeroProps, EditorialPageHeaderProp, EditorialPageHeaderProps, EditorialPillNavItemProp, EditorialPillNavProp, EditorialPillNavProps, EditorialSearchProp, EditorialSearchProps, EditorialSearchSuggestionFooterProp, EditorialSearchSuggestionGroupProp, EditorialSearchSuggestionProp, EditorialSectionHeadProp, EditorialSectionHeadProps, EditorialSectionProp, EditorialSectionProps, EditorialTextLinkProp, EyebrowProp, EyebrowProps, EditorialFilterBarProp, EditorialFooterProp, EditorialMastheadActionProp, EditorialMastheadLinkProp, EditorialMastheadProp, } from "./editorial.js";

package/dist/components/layout/index.js

@@ -26,7 +26,59 @@ import { Separator } from "./separator.js";
 import { AspectRatio } from "./aspect-ratio.js";
 import { ServiceRolePanel } from "./service-role-panel.js";
 import { useAppShellNavigationMode } from "./app-shell.js";
+import {
+  EditorialAuth,
+  EditorialAuthCard,
+  EditorialEmptyPanel,
+  EditorialFootnote,
+  EditorialMetaBar,
+  EditorialStats,
+  EditorialTextButton,
+  EditorialToggleGroup,
+  EditorialToolbar,
+  HoldingCard,
+  HoldingCardAction,
+  HoldingGrid,
+  SettingsLayout,
+  SettingsPanel,
+  ThemePicker
+} from "./editorial-account.js";
 import { Affix } from "./affix.js";
+import {
+  CatalogDetail,
+  CatalogDetailSection,
+  CatalogDetailTag,
+  EditorialFilterField,
+  EditorialFilterPanel,
+  EditorialPrompt,
+  PriceSummary
+} from "./editorial-catalog.js";
+import {
+  CardShowcase,
+  CatalogCard,
+  CatalogCardTag,
+  EditorialArticle,
+  EditorialArticleSection,
+  EditorialBanner,
+  EditorialBreadcrumb,
+  EditorialCard,
+  EditorialFilterBar,
+  EditorialFooter,
+  EditorialHero,
+  EditorialMasthead,
+  EditorialMastheadAction,
+  EditorialMastheadLink,
+  EditorialNote,
+  EditorialPageHeader,
+  EditorialPanel,
+  EditorialPillNav,
+  EditorialPillNavItem,
+  EditorialSearch,
+  EditorialSection,
+  EditorialSectionHead,
+  EditorialTextLink,
+  Eyebrow
+} from "./editorial.js";
 export {
   AccountChip,
   Affix,
@@ -39,25 +91,71 @@ export {
   AuthIdentity,
   AuthStack,
   Breadcrumb,
+  CardShowcase,
+  CatalogCard,
+  CatalogCardTag,
+  CatalogDetail,
+  CatalogDetailSection,
+  CatalogDetailTag,
   CenteredShell,
+  EditorialArticle,
+  EditorialArticleSection,
+  EditorialAuth,
+  EditorialAuthCard,
+  EditorialBanner,
+  EditorialBreadcrumb,
+  EditorialCard,
+  EditorialEmptyPanel,
+  EditorialFilterBar,
+  EditorialFilterField,
+  EditorialFilterPanel,
+  EditorialFooter,
+  EditorialFootnote,
+  EditorialHero,
+  EditorialMasthead,
+  EditorialMastheadAction,
+  EditorialMastheadLink,
+  EditorialMetaBar,
+  EditorialNote,
+  EditorialPageHeader,
+  EditorialPanel,
+  EditorialPillNav,
+  EditorialPillNavItem,
+  EditorialPrompt,
+  EditorialSearch,
+  EditorialSection,
+  EditorialSectionHead,
+  EditorialStats,
+  EditorialTextButton,
+  EditorialTextLink,
+  EditorialToggleGroup,
+  EditorialToolbar,
   ErrorSurface,
+  Eyebrow,
   Flex,
+  HoldingCard,
+  HoldingCardAction,
+  HoldingGrid,
   MasterDetail,
   MobileShell,
   NavList,
   OrgSwitcher,
   PageContainer,
+  PriceSummary,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
   ResponsiveGrid,
   Separator,
   ServiceRolePanel,
+  SettingsLayout,
+  SettingsPanel,
   Sidebar,
   SidebarHeader,
   SidebarItem,
   SidebarSection,
   SplitPane,
+  ThemePicker,
   Topbar,
   TopbarItem,
   TopbarSearch,

package/dist/components/layout/mobile-shell.d.ts

@@ -1,5 +1,7 @@
 import type { MobileShellProp } from "../../props/components/layout.prop.js";
 export type { MobileShellProp, MobileShellProp as MobileShellProps, } from "../../props/components/layout.prop.js";
+/** Shared internal navigation surface; both shells use the same tiling and current-page styles. */
+export declare const ShellTabBar: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
 /**
  * MobileShell — the HANDHELD app shell: a status band, an app bar, ONE scroll region,
  * a sticky action bar and a bottom tab bar, in that fixed order.

package/dist/components/layout/mobile-shell.js

@@ -1,9 +1,23 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
+import { forwardRef, useRef } from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { useToastStickyBarClearance } from "../../lib/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
+const ShellTabBar = forwardRef(
+  function ShellTabBar2({ className, "aria-label": label, ...props }, ref) {
+    const { t } = useTranslation();
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ...props,
+        ref,
+        className: cn("ui-mobile-shell-tabbar", className),
+        "aria-label": label ?? t("layout.sidebar.ariaLabel")
+      }
+    );
+  }
+);
 function MobileShell({
   statusBar,
   header,
@@ -44,19 +58,12 @@ function MobileShell({
           }
         ),
         actions !== void 0 && /* @__PURE__ */ jsx("footer", { ref: actionsRef, className: "ui-mobile-shell-actions", children: actions }),
-        tabBar !== void 0 && /* @__PURE__ */ jsx(
-          "nav",
-          {
-            ref: tabBarRef,
-            className: "ui-mobile-shell-tabbar",
-            "aria-label": t("layout.sidebar.ariaLabel"),
-            children: tabBar
-          }
-        )
+        tabBar !== void 0 && /* @__PURE__ */ jsx(ShellTabBar, { ref: tabBarRef, children: tabBar })
       ]
     }
   );
 }
 export {
-  MobileShell
+  MobileShell,
+  ShellTabBar
 };

package/dist/components/layout/responsive-grid.js

@@ -4,6 +4,12 @@ import { cn } from "../../lib/utils.js";
 const RESPONSIVE_GRID_PRESET_COLUMNS = {
   "pricing-plans": { base: 1, sm: 3, md: 3, lg: 3 }
 };
+const TOKEN_PRESETS = /* @__PURE__ */ new Set([
+  "catalog",
+  "trio",
+  "lead",
+  "panels"
+]);
 function resolveColumns(columns) {
   if (typeof columns === "number") {
     return {
@@ -40,12 +46,14 @@ function ResponsiveGrid({
   className,
   children
 }) {
-  const resolved = preset ? RESPONSIVE_GRID_PRESET_COLUMNS[preset] : resolveColumns(columns);
+  const tokenPreset = preset !== void 0 && TOKEN_PRESETS.has(preset) ? preset : void 0;
+  const resolved = (preset && RESPONSIVE_GRID_PRESET_COLUMNS[preset]) ?? resolveColumns(columns);
   return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx(
     "div",
     {
       className: cn("ui-responsive-grid", className),
       "data-gap": gap,
+      "data-preset": tokenPreset,
       "data-flow": flow === "columns" ? "columns" : void 0,
       "data-align": align,
       "data-dense": dense && flow !== "columns" ? "" : void 0,

package/dist/components/layout/topbar-item.d.ts

@@ -12,6 +12,7 @@ export type { TopbarItemProp, TopbarItemProp as TopbarItemProps, } from "../../p
  */
 export declare const TopbarItem: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
     hideBelow?: import("../../props/index.js").BreakpointProp;
+    hideFrom?: import("../../props/index.js").BreakpointProp;
     icon?: React.ReactNode;
     iconHideFrom?: import("../../props/index.js").BreakpointProp;
     labelHideBelow?: import("../../props/index.js").BreakpointProp;

package/dist/components/layout/topbar-item.js

@@ -7,6 +7,7 @@ const TopbarItem = React.forwardRef(function TopbarItem2({
   className,
   type,
   hideBelow,
+  hideFrom,
   icon,
   iconHideFrom,
   labelHideBelow,
@@ -62,6 +63,7 @@ const TopbarItem = React.forwardRef(function TopbarItem2({
       "data-truncate": truncate ? "true" : void 0,
       title: truncate && typeof label === "string" ? label : void 0,
       "data-hide-below": hideBelow,
+      "data-hide-from": hideFrom,
       className: cn("ui-topbar-item ui-focus-ring", className),
       type: asChild ? void 0 : type ?? "button",
       ...props,

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "33.20.0",
+  "version": "33.22.1",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/lab/legal-document-shell.js

@@ -122,6 +122,8 @@ const LegalDocumentShell = React.forwardRef(
       target.focus({ preventScroll: true });
     };
     const contentsName = contentsLabel ?? t("layout.legalDocumentShell.contents");
+    const hasContents = sections.length > 0;
+    const hasRail = hasContents || documentNavigation !== void 0;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -129,58 +131,66 @@ const LegalDocumentShell = React.forwardRef(
         id,
         "data-slot": "legal-document-shell",
         className: cn("ui-legal-document-scope", className),
-        children: /* @__PURE__ */ jsxs("article", { className: "ui-legal-document", "aria-labelledby": titleId, children: [
-          /* @__PURE__ */ jsxs("header", { className: "ui-legal-document-header", children: [
-            /* @__PURE__ */ jsx(Heading, { level: 1, id: titleId, children: title }),
-            (version !== void 0 || effectiveDate !== void 0) && /* @__PURE__ */ jsxs("div", { className: "ui-legal-document-meta", children: [
-              version !== void 0 && /* @__PURE__ */ jsx("span", { children: t("layout.legalDocumentShell.version", { version }) }),
-              effectiveDate !== void 0 && // <time dateTime> keeps the MACHINE-readable value as the ISO 8601 input while
-              // the visible text is the Intl-formatted, locale-correct rendering.
-              /* @__PURE__ */ jsx("time", { dateTime: effectiveDate, children: t(
-                dateKind === "updated" ? "layout.legalDocumentShell.updatedDate" : "layout.legalDocumentShell.effectiveDate",
+        children: /* @__PURE__ */ jsxs(
+          "article",
+          {
+            className: "ui-legal-document",
+            "aria-labelledby": titleId,
+            "data-rail": hasRail ? void 0 : "none",
+            children: [
+              /* @__PURE__ */ jsxs("header", { className: "ui-legal-document-header", children: [
+                /* @__PURE__ */ jsx(Heading, { level: 1, id: titleId, children: title }),
+                (version !== void 0 || effectiveDate !== void 0) && /* @__PURE__ */ jsxs("div", { className: "ui-legal-document-meta", children: [
+                  version !== void 0 && /* @__PURE__ */ jsx("span", { children: t("layout.legalDocumentShell.version", { version }) }),
+                  effectiveDate !== void 0 && // <time dateTime> keeps the MACHINE-readable value as the ISO 8601 input while
+                  // the visible text is the Intl-formatted, locale-correct rendering.
+                  /* @__PURE__ */ jsx("time", { dateTime: effectiveDate, children: t(
+                    dateKind === "updated" ? "layout.legalDocumentShell.updatedDate" : "layout.legalDocumentShell.effectiveDate",
+                    {
+                      date: formatEffectiveDate(effectiveDate, locale)
+                    }
+                  ) })
+                ] }),
+                summary !== void 0 && // A <div> (not <p>): the summary slot may carry block content, and a <p> inside a <p>
+                // is invalid HTML the browser silently un-nests.
+                /* @__PURE__ */ jsx("div", { className: "ui-legal-document-summary", children: summary })
+              ] }),
+              hasRail && /* @__PURE__ */ jsxs("div", { className: "ui-legal-document-rail", children: [
+                documentNavigation !== void 0 && /* @__PURE__ */ jsx("div", { "data-slot": "legal-document-navigation", children: documentNavigation }),
+                hasContents && /* @__PURE__ */ jsxs("nav", { className: "ui-legal-document-toc", "aria-labelledby": contentsId, children: [
+                  /* @__PURE__ */ jsx("p", { id: contentsId, className: "ui-legal-document-toc-title", children: contentsName }),
+                  /* @__PURE__ */ jsx("ol", { className: "ui-legal-document-toc-list", children: sections.map((section) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: `#${section.id}`,
+                      className: "ui-legal-document-toc-link",
+                      "data-active": section.id === active ? "" : void 0,
+                      "aria-current": section.id === active ? "location" : void 0,
+                      onClick: (event) => handleContentsClick(event, section.id),
+                      children: section.title
+                    }
+                  ) }, section.id)) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "ui-legal-document-content", children: sections.map((section) => /* @__PURE__ */ jsxs(
+                "section",
                 {
-                  date: formatEffectiveDate(effectiveDate, locale)
-                }
-              ) })
-            ] }),
-            summary !== void 0 && // A <div> (not <p>): the summary slot may carry block content, and a <p> inside a <p>
-            // is invalid HTML the browser silently un-nests.
-            /* @__PURE__ */ jsx("div", { className: "ui-legal-document-summary", children: summary })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ui-legal-document-rail", children: [
-            documentNavigation !== void 0 && /* @__PURE__ */ jsx("div", { "data-slot": "legal-document-navigation", children: documentNavigation }),
-            /* @__PURE__ */ jsxs("nav", { className: "ui-legal-document-toc", "aria-labelledby": contentsId, children: [
-              /* @__PURE__ */ jsx("p", { id: contentsId, className: "ui-legal-document-toc-title", children: contentsName }),
-              /* @__PURE__ */ jsx("ol", { className: "ui-legal-document-toc-list", children: sections.map((section) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-                "a",
-                {
-                  href: `#${section.id}`,
-                  className: "ui-legal-document-toc-link",
-                  "data-active": section.id === active ? "" : void 0,
-                  "aria-current": section.id === active ? "location" : void 0,
-                  onClick: (event) => handleContentsClick(event, section.id),
-                  children: section.title
-                }
-              ) }, section.id)) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "ui-legal-document-content", children: sections.map((section) => /* @__PURE__ */ jsxs(
-            "section",
-            {
-              id: section.id,
-              tabIndex: -1,
-              "data-legal-section": section.id,
-              "aria-labelledby": `${section.id}-heading`,
-              className: "ui-legal-document-section",
-              children: [
-                /* @__PURE__ */ jsx(Heading, { level: 2, id: `${section.id}-heading`, children: section.title }),
-                /* @__PURE__ */ jsx("div", { className: "ui-legal-document-section-body", children: section.content })
-              ]
-            },
-            section.id
-          )) }),
-          footerAction !== void 0 && /* @__PURE__ */ jsx("footer", { className: "ui-legal-document-footer", children: footerAction })
-        ] })
+                  id: section.id,
+                  tabIndex: -1,
+                  "data-legal-section": section.id,
+                  "aria-labelledby": `${section.id}-heading`,
+                  className: "ui-legal-document-section",
+                  children: [
+                    /* @__PURE__ */ jsx(Heading, { level: 2, id: `${section.id}-heading`, children: section.title }),
+                    /* @__PURE__ */ jsx("div", { className: "ui-legal-document-section-body", children: section.content })
+                  ]
+                },
+                section.id
+              )) }),
+              footerAction !== void 0 && /* @__PURE__ */ jsx("footer", { className: "ui-legal-document-footer", children: footerAction })
+            ]
+          }
+        )
       }
     );
   }

package/dist/lib/toast-clearance.js

@@ -14,7 +14,7 @@ function useToastStickyBarClearance(refs, enabled) {
     };
     publish();
     const observer = new ResizeObserver(publish);
-    for (const el of elements) observer.observe(el);
+    for (const el of elements) observer.observe(el, { box: "border-box" });
     return () => {
       observer.disconnect();
       html.style.removeProperty(TOAST_STICKY_BAR_PROPERTY);

package/dist/props/components/data-display.prop.d.ts

@@ -1310,6 +1310,8 @@ export type ImagePreviewGroupConfigProp = Omit<ImagePreviewConfigProp, "src" | "
 /**
  * @see Image — a picture that opens large in a full-viewport preview (antd `Image`): zoom, rotate,
  * flip, and — inside an `ImagePreviewGroup` — prev/next across every picture of the group.
+ * Lazy by default (gh#1454): `loading` defaults to `"lazy"` (`"eager"` with `fetchPriority="high"`,
+ * the page's LCP picture) and `decoding` to `"async"`; explicit values win.
  */
 export type ImageProp = Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt" | "placeholder"> & {
     /** Image URL. */

package/dist/props/components/data-entry.prop.d.ts

@@ -360,6 +360,15 @@ export type NumberInputProp = FieldA11yProps & {
     prefix?: React.ReactNode;
     /** Trailing affix inside the field (e.g. `%`). */
     suffix?: React.ReactNode;
+    /**
+     * How the field takes its inline space, as `Select` and the pickers mean it (gh#1448).
+     * `full` (default) fills the line; `auto` is sized to the widest value the bounds allow (the
+     * formatted `min` / `max`, 6 characters when unbounded) plus the steppers — a quantity stepper in
+     * a `ListRow` trailing slot, outside any `FormField` `controlWidth`; `bounded` holds
+     * `--control-bounded-width`. Measured in a consumer deck builder: a 0–99 stepper took 215px at
+     * 1440px and, at 390px, pushed every row's trailing cluster onto its own line.
+     */
+    width?: ControlWidthProp;
     /** Form field name — the visible input submits its value natively. */
     name?: NameProp;
     id?: IdProp;