@godxjp/ui 33.24.0 → 33.25.1

package/dist/components/navigation/dropdown-menu.js

@@ -22,6 +22,7 @@ import {
 import { Check, ChevronRight } from "lucide-react";
 import { ariaKeyShortcuts, parseShortcut, shouldHandleShortcut } from "../../lib/shortcut.js";
 import { cn } from "../../lib/utils.js";
+import { isDevelopment } from "../../lib/dev.js";
 import { Slot } from "../../lib/slot.js";
 const DROPDOWN_MENU_PLACEMENT = {
   top: { side: "top", align: "center" },
@@ -40,7 +41,7 @@ class MenuCollectionBoundary extends React.Component {
   // of gh#637 that cost the reporter a night of instrumenting `Object.prototype`.
   componentDidCatch(error) {
     console.error(
-      "[@godxjp/ui] DropdownMenu: the menu could not be built and was left empty; the rest of the application is unaffected. A menu's children must be collection nodes (DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuSub) or components returning one \u2014 an icon or a text label belongs INSIDE an item, not beside it. Underlying error:",
+      "[@godxjp/ui] DropdownMenu: the menu could not be built and was left empty; the rest of the application is unaffected. A menu's children must be collection nodes (DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuSub) or components returning one \u2014 an icon or a text label belongs INSIDE an item, not beside it. Use Popover + ListRow for arbitrary panel content. Underlying error:",
       error
     );
   }
@@ -51,6 +52,10 @@ class MenuCollectionBoundary extends React.Component {
 function borrowedTag(children, asChild) {
   return asChild ? React.Children.only(children) : null;
 }
+function borrowedHref(tag) {
+  const href = tag?.props?.href;
+  return typeof href === "string" ? href : void 0;
+}
 function renderItemTag(tag, domProps, content) {
   if (!tag) {
     return /* @__PURE__ */ jsx("div", { ...domProps, children: content });
@@ -331,6 +336,16 @@ function DropdownMenuSub({ children }) {
   const parts = React.Children.toArray(children).filter(React.isValidElement);
   return /* @__PURE__ */ jsx(SubmenuTrigger, { children: parts });
 }
+function hasNonMenuChildren(children) {
+  return React.Children.toArray(children).some((child) => {
+    if (!React.isValidElement(child)) return true;
+    if (typeof child.type === "string") return true;
+    if (child.type === React.Fragment || child.type === DropdownMenuGroup || child.type === DropdownMenuRadioGroup) {
+      return hasNonMenuChildren(child.props.children);
+    }
+    return false;
+  });
+}
 function DropdownMenuContent({
   children,
   className,
@@ -348,6 +363,13 @@ function DropdownMenuContent({
   sticky,
   forceMount
 }) {
+  React.useEffect(() => {
+    if (isDevelopment() && hasNonMenuChildren(children)) {
+      console.error(
+        "[@godxjp/ui] DropdownMenuContent accepts menu collection children only. Use DropdownMenuItem for actions; use Popover + ListRow for notifications, headers, lists and links."
+      );
+    }
+  }, [children]);
   void hideWhenDetached;
   void sticky;
   void forceMount;
@@ -417,6 +439,7 @@ function DropdownMenuItem({
   textValue,
   description,
   asChild,
+  href,
   ...forwarded
 }) {
   const tag = borrowedTag(children, asChild);
@@ -426,6 +449,7 @@ function DropdownMenuItem({
     MenuItem,
     {
       isDisabled: disabled,
+      href: href ?? borrowedHref(tag),
       textValue: textValue ?? (typeof label === "string" ? label : void 0),
       onAction: onSelect ? () => onSelect(selectEvent("dropdownmenu.itemSelect")) : void 0,
       className: cn(
@@ -477,11 +501,17 @@ function DropdownMenuLabel({ children, className, inset, asChild }) {
         {
           ...props
         }
-      ) : (props) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          ...props
-        }
+      ) : (props) => (
+        // RAC's `Header` element (it warns in dev when `render` returns another one, gh#1452),
+        // with the landmark dropped: `role="presentation"` is allowed on `header` and keeps
+        // the menu owning no `banner`.
+        /* @__PURE__ */ jsx(
+          "header",
+          {
+            role: "presentation",
+            ...props
+          }
+        )
       ),
       children
     }

package/dist/components/navigation/pagination.d.ts

@@ -22,5 +22,5 @@ declare const PaginationNext: React.ForwardRefExoticComponent<Omit<Omit<React.De
     disabled?: boolean;
     href?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
-export declare function Pagination({ ariaLabel, value, total, pageSize, pageSizeOptions, showSizeChanger, showTotal, hideOnSinglePage, simple, showQuickJumper, size, align, responsive, disabled, className, onValueChange, }: PaginationProp): React.JSX.Element | null;
+export declare function Pagination({ ariaLabel, value, total, pageSize, pageSizeOptions, showSizeChanger, showTotal, hideOnSinglePage, simple, showQuickJumper, size, align, responsive, disabled, className, onValueChange, onPageIntent, }: PaginationProp): React.JSX.Element | null;
 export { PaginationContent, PaginationItem, PaginationLink, PaginationEllipsis, PaginationPrevious, PaginationNext, };

package/dist/components/navigation/pagination.js

@@ -122,7 +122,8 @@ function Pagination({
   responsive = true,
   disabled,
   className,
-  onValueChange
+  onValueChange,
+  onPageIntent
 }) {
   const { t } = useTranslation();
   const jumperId = React.useId();
@@ -138,6 +139,12 @@ function Pagination({
     const nextPage = Math.min(Math.max(1, page), Math.max(1, Math.ceil(total / size2)));
     onValueChange?.(nextPage, size2);
   };
+  const intent = (page) => {
+    const notify = () => {
+      if (!disabled && page >= 1 && page <= totalPages) onPageIntent?.(page);
+    };
+    return { onPointerEnter: notify, onFocus: notify, onTouchStart: notify };
+  };
   const commitJump = () => {
     const parsed = Number.parseInt(jumperDraft, 10);
     setJumperDraft("");
@@ -204,6 +211,7 @@ function Pagination({
               size: "sm",
               disabled: Boolean(disabled) || safeCurrent <= 1,
               "aria-label": t("navigation.pagination.prev"),
+              ...intent(safeCurrent - 1),
               onClick: () => go(safeCurrent - 1),
               children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
             }
@@ -221,6 +229,7 @@ function Pagination({
               size: "sm",
               disabled: Boolean(disabled) || safeCurrent >= totalPages,
               "aria-label": t("navigation.pagination.next"),
+              ...intent(safeCurrent + 1),
               onClick: () => go(safeCurrent + 1),
               children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
             }
@@ -264,6 +273,7 @@ function Pagination({
             PaginationPrevious,
             {
               "aria-label": t("navigation.pagination.prev"),
+              ...intent(safeCurrent - 1),
               onClick: () => go(safeCurrent - 1),
               disabled: Boolean(disabled) || safeCurrent <= 1,
               children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
@@ -274,6 +284,7 @@ function Pagination({
               PaginationLink,
               {
                 isActive: page === safeCurrent,
+                ...intent(page),
                 "aria-label": t("navigation.pagination.page", { page }),
                 onClick: () => {
                   if (!disabled) go(page);
@@ -287,6 +298,7 @@ function Pagination({
             PaginationNext,
             {
               "aria-label": t("navigation.pagination.next"),
+              ...intent(safeCurrent + 1),
               onClick: () => go(safeCurrent + 1),
               disabled: Boolean(disabled) || safeCurrent >= totalPages,
               children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })

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.24.0",
+  "version": "33.25.1",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -811,6 +811,7 @@
     "trendCurrent": "current",
     "heatmapSummary": "Heatmap, {rows} × {columns}",
     "heatmapHighest": "Highest: {value} at {row}, {column}",
+    "noData": "No data",
     "heatmapNoData": "No data",
     "heatmapTop": "Top {rank}",
     "heatmapLegend": "Color scale",

package/dist/i18n/messages/ja.json

@@ -785,6 +785,7 @@
     "trendCurrent": "現在",
     "heatmapSummary": "ヒートマップ（{rows}行×{columns}列）",
     "heatmapHighest": "最大 {value}（{row}・{column}）",
+    "noData": "データなし",
     "heatmapNoData": "データなし",
     "heatmapTop": "上位{rank}位",
     "heatmapLegend": "色の濃さの凡例",

package/dist/i18n/messages/vi.json

@@ -786,6 +786,7 @@
     "trendCurrent": "hiện tại",
     "heatmapSummary": "Bản đồ nhiệt {rows} × {columns}",
     "heatmapHighest": "Cao nhất: {value} tại {row}, {column}",
+    "noData": "Không có dữ liệu",
     "heatmapNoData": "Không có dữ liệu",
     "heatmapTop": "Hạng {rank}",
     "heatmapLegend": "Thang màu",

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

@@ -1352,6 +1352,8 @@ export type ImageProp = Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt" |
     fallback?: string;
     /** Painted over the frame until the picture loads. `true` = the plain muted block. */
     placeholder?: React.ReactNode | boolean;
+    /** Resolved source status, including cached-before-mount images. Error stays final for fallback. */
+    onStatusChange?: (status: "loading" | "loaded" | "error") => void;
     /** `false` = a plain picture, not clickable, not in its group. Default `true`. */
     preview?: boolean | ImagePreviewConfigProp;
     /**

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

@@ -1,5 +1,6 @@
 /** Layout component prop types — @see docs/COMPONENTS.md#layout */
 import type * as React from "react";
+import type { ImageProp } from "./data-display.prop.js";
 import type { ComponentType, ReactNode, SVGProps } from "react";
 import type { BreadcrumbProp, BreadcrumbCurrentItemProp, TitleProp, SubtitleProp, StatusProp, ExtraProp, FooterProp, PageDensityProp, DensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TextAlignProp, TextToneProp, BreakpointProp, GapProp, PadProp, PadRawProp, ClassNameProp, ChildrenProp, IdProp, DisabledProp, DescriptionProp, ActionProp, IconProp, HeadingLevelProp, ToneProp, WidthProp, SizeProp, LabelProp, NameProp, PlaceholderProp } from "../vocabulary/index.js";
 import type { EmptyStateToneProp } from "./data-display.prop.js";
@@ -2639,8 +2640,12 @@ export type EditorialFilterFieldProp = {
 export type CatalogDetailProp = {
     /** `"sealed"` frames a product package instead of a card. */
     variant?: "card" | "sealed";
-    /** The picture — an `<img>` (or a link around one). */
-    media: ReactNode;
+    /** Custom media. Used when `image` is omitted. */
+    media?: ReactNode;
+    /** Kit-owned, source-keyed Image with loading skeleton and error fallback. Takes precedence over media. */
+    image?: Pick<ImageProp, "src" | "alt" | "width" | "height" | "fallback"> & {
+        priority?: boolean;
+    };
     /** The save toggle over the frame's corner (same shape as `CatalogCard`'s). */
     favorite?: CatalogCardProp["favorite"];
     /** A line under the frame (the picture's source, an official link). */

package/dist/props/components/navigation.prop.d.ts

@@ -232,6 +232,9 @@ export type PaginationProp = {
     disabled?: DisabledProp;
     className?: ClassNameProp;
     onValueChange?: (page: number, pageSize: number) => void;
+    /** Pointer enter, focus or touch start on an enabled page/previous/next target. May repeat;
+     * preload/cache the target without changing the controlled value. Also applies in simple mode. */
+    onPageIntent?: (page: number) => void;
 };
 /** @see Pagination — control tier (Ant Design `size`: `small` → `sm`, `middle` → `md`). */
 export type PaginationSizeProp = "sm" | "md";

package/dist/props/registry.d.ts

@@ -1937,7 +1937,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly CatalogDetailProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
-        readonly vocabulary: readonly ["TitleProp", "ClassNameProp", {
+        readonly vocabulary: readonly [{
+            readonly field: "image";
+            readonly local: true;
+            readonly reason: "Kit-owned source-keyed media configuration.";
+        }, "TitleProp", "ClassNameProp", {
             readonly field: "variant";
             readonly local: true;
             readonly reason: "Card or sealed-product frame.";
@@ -4066,7 +4070,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly PaginationProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";
-        readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "DisabledProp", "ClassNameProp", "SizeProp"];
+        readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "DisabledProp", "ClassNameProp", "SizeProp", {
+            readonly field: "onPageIntent";
+            readonly local: true;
+            readonly reason: "A page target intent event for cache/router preloading, separate from the controlled value channel; pointer enter, focus and touch start (gh#1472).";
+        }];
     };
     readonly PaginationSizeProp: {
         readonly group: "navigation";
@@ -5691,7 +5699,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly ImageProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
-        readonly vocabulary: readonly ["ClassNameProp", "PlaceholderProp", {
+        readonly vocabulary: readonly [{
+            readonly field: "onStatusChange";
+            readonly local: true;
+            readonly reason: "Resolved image loading state, including cached images and fallback.";
+        }, "ClassNameProp", "PlaceholderProp", {
             readonly field: "src";
             readonly local: true;
             readonly reason: "The native img src attribute.";

package/dist/props/registry.js

@@ -1892,6 +1892,7 @@ const COMPONENT_PROP_REGISTRY = {
     group: "layout",
     file: "components/layout.prop.ts",
     vocabulary: [
+      { field: "image", local: true, reason: "Kit-owned source-keyed media configuration." },
       "TitleProp",
       "ClassNameProp",
       { field: "variant", local: true, reason: "Card or sealed-product frame." },
@@ -4264,7 +4265,18 @@ const COMPONENT_PROP_REGISTRY = {
   PaginationProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",
-    vocabulary: ["ValueProp", "OnValueChangeProp", "DisabledProp", "ClassNameProp", "SizeProp"]
+    vocabulary: [
+      "ValueProp",
+      "OnValueChangeProp",
+      "DisabledProp",
+      "ClassNameProp",
+      "SizeProp",
+      {
+        field: "onPageIntent",
+        local: true,
+        reason: "A page target intent event for cache/router preloading, separate from the controlled value channel; pointer enter, focus and touch start (gh#1472)."
+      }
+    ]
   },
   PaginationSizeProp: {
     group: "navigation",
@@ -6329,6 +6341,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "data-display",
     file: "components/data-display.prop.ts",
     vocabulary: [
+      {
+        field: "onStatusChange",
+        local: true,
+        reason: "Resolved image loading state, including cached images and fallback."
+      },
       "ClassNameProp",
       "PlaceholderProp",
       { field: "src", local: true, reason: "The native img src attribute." },

package/dist/styles/application.css

@@ -0,0 +1,24 @@
+
+@layer theme, base, vendor, components, utilities;
+@import "./vendor-sonner.css";
+@import "./vendor-day-picker.css";
+@import "./base.css";
+@import "./shell-layout.css";
+@import "./motion.css";
+@import "./layout.css";
+@import "./control.css";
+@import "./toggle.css";
+@import "./logo-layout.css";
+@import "./card-layout.css";
+@import "./text-layout.css";
+@import "./table-layout.css";
+@import "./dialog-layout.css";
+@import "./alert-layout.css";
+@import "./badge-layout.css";
+@import "./data-display-layout.css";
+@import "./data-entry-layout.css";
+@import "./form-layout.css";
+@import "./navigation-layout.css";
+@import "./chart-layout.css";
+@import "./float-button-layout.css";
+@import "./icon-layout.css";

package/dist/styles/base.css

@@ -174,6 +174,17 @@
 }
 
 @layer base {
+  :root {
+    color-scheme: light;
+  }
+
+  @media not print {
+    .dark,
+    :root[data-theme="dark"] {
+      color-scheme: dark;
+    }
+  }
+
   * {
     border-color: hsl(var(--border));
   }

package/dist/styles/control.css

@@ -138,6 +138,12 @@
     flex-shrink: 0;
   }
 
+  .ui-button--xs svg,
+  .ui-button--icon-xs svg {
+    width: var(--button-icon-size, var(--button-xs-icon-size));
+    height: var(--button-icon-size, var(--button-xs-icon-size));
+  }
+
   .ui-button {
     backdrop-filter: blur(var(--button-backdrop-blur-size))
       saturate(var(--surface-backdrop-saturate, 160%));
@@ -1945,9 +1951,13 @@
     max-block-size: var(--radix-popover-content-available-height);
     max-inline-size: min(
       var(--search-select-panel-max-width),
-      calc(100vw - var(--search-select-panel-viewport-inset))
+      calc(var(--popover-viewport-inline-size, 100vw) - var(--search-select-panel-viewport-inset))
+    );
+    min-inline-size: min(
+      var(--radix-popover-trigger-width),
+      var(--search-select-panel-max-width),
+      calc(var(--popover-viewport-inline-size, 100vw) - var(--search-select-panel-viewport-inset))
     );
-    min-inline-size: var(--radix-popover-trigger-width);
   }
 
   .ui-search-select-panel[data-popup-match="content"] {
@@ -1955,8 +1965,16 @@
   }
 
   .ui-search-select-panel[data-popup-match="fixed"] {
-    min-inline-size: var(--search-select-panel-inline-size);
-    inline-size: var(--search-select-panel-inline-size);
+    min-inline-size: min(
+      var(--search-select-panel-inline-size, var(--radix-popover-trigger-width)),
+      var(--search-select-panel-max-width),
+      calc(var(--popover-viewport-inline-size, 100vw) - var(--search-select-panel-viewport-inset))
+    );
+    inline-size: min(
+      var(--search-select-panel-inline-size, var(--radix-popover-trigger-width)),
+      var(--search-select-panel-max-width),
+      calc(var(--popover-viewport-inline-size, 100vw) - var(--search-select-panel-viewport-inset))
+    );
   }
 
   .ui-search-select-selected-icon {
@@ -2243,6 +2261,12 @@
       var(--menu-content-min-width),
       var(--trigger-width, var(--menu-content-min-width))
     );
+
+    inline-size: max-content;
+    max-inline-size: min(
+      var(--select-content-max-width),
+      calc(100vw - var(--select-content-viewport-inset))
+    );
     overflow: hidden;
     border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     border: var(--stroke-hairline) solid hsl(var(--border));
@@ -2262,6 +2286,7 @@
   .ui-select-content[data-popup-match="fixed"] {
     min-width: var(--select-content-inline-size);
     width: var(--select-content-inline-size);
+    max-inline-size: none;
   }
 
   .ui-select-viewport {
@@ -2287,21 +2312,9 @@
       calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
     );
     padding-inline: var(--menu-item-space-inline);
-    height: var(--menu-item-height);
-    display: flex;
-    align-items: center;
-    gap: var(--menu-item-space-gap);
-    font-size: var(--menu-item-font-size);
-  }
-
-  .ui-select-item,
-  .ui-select-label {
-    border-radius: var(
-      --menu-item-radius,
-      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
-    );
-    padding-inline: var(--menu-item-space-inline);
-    height: var(--menu-item-height);
+    height: auto;
+    min-height: var(--menu-item-height);
+    padding-block: max(0px, calc((var(--menu-item-height) - 1lh) / 2));
     display: flex;
     align-items: center;
     gap: var(--menu-item-space-gap);

package/dist/styles/core.css

@@ -8,6 +8,7 @@
 @import "./shell-layout.css";
 @import "./motion.css";
 @import "./layout.css";
+@import "./editorial-layout.css";
 @import "./editorial-account-layout.css";
 @import "./control.css";
 @import "./toggle.css";

package/dist/styles/data-display-layout.css

@@ -3768,6 +3768,13 @@
     color: hsl(var(--muted-foreground));
   }
 
+  .ui-image-placeholder > * {
+    min-block-size: 0;
+    min-inline-size: 0;
+    max-block-size: 100%;
+    max-inline-size: 100%;
+  }
+
   .ui-image-mask {
     position: absolute;
     inset: 0;

package/dist/styles/dialog-layout.css

@@ -341,6 +341,9 @@
   }
 
   .ui-popover-content {
+
+    overflow: auto;
+    scroll-padding: calc(var(--focus-ring-width) + var(--focus-outline-offset));
     z-index: var(--overlay-z-index);
 
     width: var(--popover-surface-inline-size, var(--popover-width));
@@ -484,3 +487,9 @@
     min-block-size: 0;
   }
 }
+
+@layer components {
+  .ui-popover-content[data-flush] :focus-visible {
+    --focus-ring-contained-offset: var(--focus-ring-inset-offset);
+  }
+}