@godxjp/ui 33.24.0 → 33.25.0

package/agent/tokens.json

@@ -4469,6 +4469,18 @@
     "tier": "component",
     "value": "24rem"
   },
+  {
+    "description": "The listbox hugs its longest row up to this, then wraps rows; the same cap as the search panel so both Select modes size alike. The inset keeps it off the viewport edges.",
+    "name": "--select-content-max-width",
+    "tier": "component",
+    "value": "32rem"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--select-content-viewport-inset",
+    "tier": "component",
+    "value": "var(--space-6)"
+  },
   {
     "description": "Seat for a NUMERIC `popupMatchSelectWidth` on the plain listbox. `auto` is the inert default.",
     "name": "--select-content-inline-size",
@@ -4722,7 +4734,7 @@
     "value": "var(--font-size-sm, var(--font-size-base))"
   },
   {
-    "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))",
+    "description": "Scoped at the reader: interactive days fall back to --button-radius; read-only cells to calc(var(--radius) / var(--radius-ratio)).",
     "name": "--calendar-day-radius",
     "tier": "component",
     "value": "initial"
@@ -9771,7 +9783,7 @@
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
     "name": "--editorial-search-shadow",
     "tier": "component",
-    "value": "0 4px 16px rgb(var(--shadow-color, 0 0 0) / 0.06)"
+    "value": "initial"
   },
   {
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
@@ -9891,7 +9903,7 @@
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
     "name": "--editorial-search-popup-shadow",
     "tier": "component",
-    "value": "0 12px 32px rgb(var(--shadow-color, 0 0 0) / 0.12)"
+    "value": "initial"
   },
   {
     "description": "Default = hsl(var(--border)).",
@@ -10335,7 +10347,7 @@
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
     "name": "--editorial-showcase-caption-shadow",
     "tier": "component",
-    "value": "0 4px 16px rgb(var(--shadow-color, 0 0 0) / 0.06)"
+    "value": "initial"
   },
   {
     "description": "scale-exempt: measured editorial geometry; retain the existing size between icon steps",
@@ -10563,7 +10575,7 @@
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
     "name": "--editorial-catalog-card-hover-shadow",
     "tier": "component",
-    "value": "0 10px 28px rgb(var(--shadow-color, 0 0 0) / 0.1)"
+    "value": "initial"
   },
   {
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
@@ -10989,7 +11001,7 @@
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
     "name": "--editorial-spotlight-hover-shadow",
     "tier": "component",
-    "value": "0 4px 16px rgb(var(--shadow-color, 0 0 0) / 0.06)"
+    "value": "initial"
   },
   {
     "description": "── EditorialCard variant=\"journal\" ──────────────────────────────────────────────────────",
@@ -11151,7 +11163,7 @@
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
     "name": "--editorial-journal-hover-shadow",
     "tier": "component",
-    "value": "0 12px 28px rgb(var(--shadow-color, 0 0 0) / 0.08)"
+    "value": "initial"
   },
   {
     "description": "── EditorialMasthead ────────────────────────────────────────────────────────────────────",
@@ -11681,6 +11693,24 @@
     "tier": "component",
     "value": "var(--space-10)"
   },
+  {
+    "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
+    "name": "--editorial-catalog-detail-loading-background",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
+    "name": "--editorial-catalog-detail-loading-duration",
+    "tier": "component",
+    "value": "var(--duration-loop)"
+  },
+  {
+    "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
+    "name": "--editorial-catalog-detail-loading-alpha",
+    "tier": "component",
+    "value": "0.5"
+  },
   {
     "description": "Editorial family tokens (gh#1435) — the public, magazine-like pages of a site built on `CenteredShell preset=\"public-landing\" flow=\"sections\"`: full-width sections, a hero with a product showcase, the ruled kicker, a section head, the inset site search, a pill navigation band, catalog / editorial cards and the brand banner. Every geometry value a design states lives here, so a theme retunes it once — including at its OWN breakpoints, by re-declaring the token under a width query in its theme file (the shapes here never hard-code a breakpoint of their own). Colour knobs are role mirrors: `initial`, with the documented default resolved at the call site, so a scoped [data-tenant] / dark override still reaches them.",
     "name": "--editorial-catalog-detail-art-radius",

package/dist/components/charts/chart-cartesian.js

@@ -54,6 +54,7 @@ function CartesianChart({
   assertRechartsPeer();
   const { t, locale } = useTranslation();
   const fmt = useChartNumberFormat(numberFormat);
+  const counts = useChartNumberFormat();
   const list = React.useMemo(() => listFormat(locale, { style: "narrow", type: "unit" }), [locale]);
   const points = series.flatMap(
     (s, seriesIndex) => data.flatMap(
@@ -127,7 +128,10 @@ function CartesianChart({
     categoryKey,
     fmt,
     list,
-    (c) => t("chart.summaryCartesian", { series: fmt.format(c.series), points: fmt.format(c.points) })
+    (c) => t("chart.summaryCartesian", {
+      series: counts.format(c.series),
+      points: counts.format(c.points)
+    })
   );
   const resolvedHeight = chartHeight(size, height);
   const tickFormatter = (value) => fmt.format(value);

package/dist/components/charts/chart-summary.d.ts

@@ -33,7 +33,7 @@ export declare function buildTrendSummary(data: ChartDatum[], categoryKey: strin
  * Negative values plot at the baseline (a compact trend has no negative axis) but
  * still read their true figure in the text alternative.
  */
-export declare function trendRatios(data: ChartDatum[], valueKey: string): number[];
+export declare function trendRatios(data: ChartDatum[], valueKey: string): (number | null)[];
 /**
  * Resolve `emphasizedIndex` against a row count. Negative counts from the end (`-1` = the latest
  * datum).

package/dist/components/charts/chart-summary.js

@@ -1,11 +1,16 @@
+import { translateCurrent as t } from "../../i18n/translate.js";
 function numeric(value) {
-  return typeof value === "number" && Number.isFinite(value) ? value : 0;
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function formatValue(value, fmt) {
+  const number = numeric(value);
+  return number === null ? t("chart.noData") : fmt.format(number);
 }
 function buildCartesianSummary(data, series, categoryKey, fmt, list, summaryLine) {
   const rows = data.map((datum) => {
     const category = String(datum[categoryKey] ?? "");
     const parts = series.map(
-      (s) => `${s.label ?? s.dataKey}: ${fmt.format(numeric(datum[s.dataKey]))}`
+      (s) => `${s.label ?? s.dataKey}: ${formatValue(datum[s.dataKey], fmt)}`
     );
     return `${category} \u2014 ${list.format(parts)}`;
   });
@@ -13,7 +18,7 @@ function buildCartesianSummary(data, series, categoryKey, fmt, list, summaryLine
 }
 function buildSeriesRows(data, categoryKey, valueKey, fmt, annotate) {
   return data.map((datum, index) => {
-    const row = `${String(datum[categoryKey] ?? "")}: ${fmt.format(numeric(datum[valueKey]))}`;
+    const row = `${String(datum[categoryKey] ?? "")}: ${formatValue(datum[valueKey], fmt)}`;
     const note = annotate?.(index);
     return note ? `${row} (${note})` : row;
   });
@@ -31,9 +36,15 @@ function buildTrendSummary(data, categoryKey, valueKey, fmt, summaryLine, annota
   };
 }
 function trendRatios(data, valueKey) {
-  const values = data.map((datum) => Math.max(0, numeric(datum[valueKey])));
-  const max = values.reduce((acc, value) => value > acc ? value : acc, 0);
-  return values.map((value) => max > 0 ? value / max : 0);
+  const values = data.map((datum) => {
+    const value = numeric(datum[valueKey]);
+    return value === null ? null : Math.max(0, value);
+  });
+  const max = values.reduce(
+    (acc, value) => value !== null && value > acc ? value : acc,
+    0
+  );
+  return values.map((value) => value === null ? null : max > 0 ? value / max : 0);
 }
 function resolveEmphasizedIndex(index, length) {
   if (index === void 0 || !Number.isInteger(index) || length === 0) return -1;

package/dist/components/charts/compact-bar-trend.js

@@ -25,6 +25,7 @@ function CompactBarTrend({
 }) {
   const { t } = useTranslation();
   const fmt = useChartNumberFormat(numberFormat);
+  const countsFormat = useChartNumberFormat();
   const hasData = data.length > 0;
   const emphasized = resolveEmphasizedIndex(emphasizedIndex, data.length);
   const ratios = React.useMemo(() => trendRatios(data, valueKey), [data, valueKey]);
@@ -33,7 +34,7 @@ function CompactBarTrend({
     categoryKey,
     valueKey,
     fmt,
-    (counts) => t("chart.summaryTrend", { points: fmt.format(counts.points) }),
+    (counts) => t("chart.summaryTrend", { points: countsFormat.format(counts.points) }),
     (index) => index === emphasized ? t("chart.trendCurrent") : void 0
   );
   return /* @__PURE__ */ jsx(
@@ -51,14 +52,14 @@ function CompactBarTrend({
       className: cn("ui-chart-trend", className),
       id,
       children: hasData ? /* @__PURE__ */ jsxs("div", { className: "ui-chart-trend-body", children: [
-        /* @__PURE__ */ jsx("div", { className: "ui-chart-trend-plot", "aria-hidden": "true", children: data.map((datum, index) => /* @__PURE__ */ jsx("div", { className: "ui-chart-trend-column", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "ui-chart-trend-plot", "aria-hidden": "true", children: data.map((datum, index) => /* @__PURE__ */ jsx("div", { className: "ui-chart-trend-column", children: ratios[index] !== null ? /* @__PURE__ */ jsx(
           "div",
           {
             className: "ui-chart-trend-bar",
             "data-emphasized": index === emphasized ? "true" : void 0,
             style: { "--chart-trend-bar-value": ratios[index] }
           }
-        ) }, `${String(datum[categoryKey])}-${index}`)) }),
+        ) : null }, `${String(datum[categoryKey])}-${index}`)) }),
         showCategoryLabels ? /* @__PURE__ */ jsx("div", { className: "ui-chart-trend-ticks", "aria-hidden": "true", children: data.map((datum, index) => /* @__PURE__ */ jsx(
           "span",
           {

package/dist/components/charts/pie-chart.js

@@ -37,6 +37,7 @@ function PieChart({
   assertRechartsPeer();
   const { t } = useTranslation();
   const fmt = useChartNumberFormat(numberFormat);
+  const counts = useChartNumberFormat();
   const points = data.flatMap(
     (datum, index) => typeof datum[dataKey] === "number" && Number.isFinite(datum[dataKey]) && Number(datum[dataKey]) > 0 ? [{ index, series: 0 }] : []
   );
@@ -71,7 +72,7 @@ function PieChart({
     dataKey,
     nameKey,
     fmt,
-    (c) => t("chart.summaryPie", { slices: fmt.format(c.slices) })
+    (c) => t("chart.summaryPie", { slices: counts.format(c.slices) })
   );
   const resolvedHeight = chartHeight(size, height);
   return /* @__PURE__ */ jsx(

package/dist/components/data-display/image.d.ts

@@ -14,6 +14,7 @@ export declare const Image: React.ForwardRefExoticComponent<Omit<React.ImgHTMLAt
     alt: string;
     fallback?: string;
     placeholder?: React.ReactNode | boolean;
+    onStatusChange?: (status: "loading" | "loaded" | "error") => void;
     preview?: boolean | ImagePreviewConfigProp;
     width?: number | string;
     height?: number | string;

package/dist/components/data-display/image.js

@@ -420,6 +420,7 @@ const ImageRoot = React.forwardRef(function Image({
   alt,
   fallback,
   placeholder,
+  onStatusChange,
   preview = true,
   width,
   height,
@@ -444,6 +445,11 @@ const ImageRoot = React.forwardRef(function Image({
     status: "loading"
   });
   const status = load.src === src ? load.status : "loading";
+  const statusChangeRef = React.useRef(onStatusChange);
+  statusChangeRef.current = onStatusChange;
+  React.useEffect(() => {
+    statusChangeRef.current?.(status);
+  }, [src, status]);
   const setStatus = React.useCallback(
     (next) => setLoad(
       (prev) => prev.src === src && prev.status === "error" ? prev : { src, status: next }
@@ -471,7 +477,9 @@ const ImageRoot = React.forwardRef(function Image({
   }, [inGroup, group, id, previewSrc, alt]);
   const [visible, setVisible] = useMergedState(config.visible, false, config.onVisibleChange);
   const shownSrc = isError && fallback ? fallback : src;
-  const showPlaceholder = placeholder != null && placeholder !== false && status === "loading";
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
+  const showPlaceholder = mounted && placeholder != null && placeholder !== false && status === "loading";
   const intrinsic = fit === "intrinsic";
   const sized = intrinsic || size != null || width != null || height != null;
   const frameFit = fit ?? (size != null || height != null ? "cover" : void 0);

package/dist/components/data-display/popover.js

@@ -243,6 +243,16 @@ function ClickContent({
 }) {
   const root = usePopoverRoot("PopoverContent");
   const contentRef = React.useRef(null);
+  const [viewportInlineSize, setViewportInlineSize] = React.useState();
+  React.useLayoutEffect(() => {
+    if (!root.open) return;
+    const doc = root.triggerRef.current?.ownerDocument ?? document;
+    const update = () => setViewportInlineSize(doc.documentElement.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(doc.documentElement);
+    return () => observer.disconnect();
+  }, [root.open, root.triggerRef]);
   const openAutoFocusRef = React.useRef(onOpenAutoFocus);
   openAutoFocusRef.current = onOpenAutoFocus;
   useOverlayCloseFocus(root.open, onCloseAutoFocus, contentRef);
@@ -350,6 +360,7 @@ function ClickContent({
             style: {
               ...racStyle,
               "--radix-popover-trigger-width": "var(--trigger-width)",
+              ...viewportInlineSize == null ? null : { "--popover-viewport-inline-size": `${viewportInlineSize}px` },
               "--radix-popover-content-transform-origin": "var(--trigger-anchor-point)",
               ...availableHeight == null ? null : {
                 "--radix-popover-content-available-height": typeof availableHeight === "number" ? `${availableHeight}px` : availableHeight

package/dist/components/data-entry/calendar.js

@@ -161,7 +161,7 @@ function Calendar({
         day: cn("ui-calendar-day", classNames?.day),
         day_button: cn(
           buttonVariants({ variant: "ghost" }),
-          "ui-calendar-day-button",
+          "ui-calendar-day-button rounded-[var(--calendar-day-radius,var(--button-radius))]",
           classNames?.day_button
         ),
         range_start: cn("day-range-start", classNames?.range_start),

package/dist/components/data-entry/date-picker.js

@@ -131,7 +131,7 @@ function DatePicker(props) {
     defaultValue
   );
   const value = isControlled ? valueProp : internalValue;
-  const working = hasPending ? pending : value;
+  const working = open && hasPending ? pending : value;
   const rangeValue = range ? working : void 0;
   const selectedDate = range ? rangeValue?.from : Array.isArray(working) ? working[0] : working;
   const emit = (next) => {
@@ -156,6 +156,16 @@ function DatePicker(props) {
       setText(displayAll(committedSingle));
     }
   }, [range, value, committedFrom, committedTo, format, locale, showTime]);
+  React.useEffect(() => {
+    if (!open) {
+      setHasPending(false);
+      setPending(void 0);
+      if (range) {
+        setFromText(display(committedFrom));
+        setToText(display(committedTo));
+      }
+    }
+  }, [open]);
   const valueAnchor = range ? committedRange?.from : Array.isArray(committedSingle) ? committedSingle[0] : committedSingle;
   const [internalView, setInternalView] = React.useState(
     () => defaultPickerValue ?? valueAnchor
@@ -182,7 +192,7 @@ function DatePicker(props) {
   const validRange = (next) => Boolean(
     next && (next.from ? allowed(next.from) : allowEmpty[0]) && (next.to ? allowed(next.to) : allowEmpty[1])
   );
-  const choose = (input) => {
+  const choose = (input, typed = false) => {
     if (range) {
       let next = input;
       if (anyDisabled && next)
@@ -196,7 +206,14 @@ function DatePicker(props) {
       if (needConfirm) {
         setPending(next);
         setHasPending(true);
-      } else emit(next);
+      } else if (open && !typed && next && !(next.from && next.to)) {
+        setPending(next);
+        setHasPending(true);
+      } else {
+        setPending(void 0);
+        setHasPending(false);
+        emit(next);
+      }
       return;
     }
     let date = input;
@@ -253,7 +270,7 @@ function DatePicker(props) {
     if (!trimmed && !allowEmpty[edge === "from" ? 0 : 1]) return;
     const base = working;
     const next = { from: base?.from, to: base?.to, [edge]: parsed && periodDate(parsed) };
-    choose(next.from || next.to ? next : void 0);
+    choose(next.from || next.to ? next : void 0, true);
   };
   const keyHandlers = (onEnter) => ({
     onKeyDown: (event) => {
@@ -458,7 +475,7 @@ function DatePicker(props) {
     {
       mode: "multiple",
       selected: Array.isArray(working) ? working : [],
-      onSelect: choose,
+      onSelect: (days) => choose(days),
       disabled: (day) => !allowed(day),
       ...calendarShared
     }

package/dist/components/general/button.js

@@ -54,11 +54,11 @@ const buttonVariants = cva("ui-button", {
       md: "ui-button--default-size",
       // utilities after components, so only a utility can out-rank a child's own `size-*`.
       // They read the token, so the value is still themeable.
-      xs: "ui-button--xs [&_svg:not([class*='size-'])]:size-[var(--button-xs-icon-size)]",
+      xs: "ui-button--xs [&_svg:not([class*='size-'])]:size-[var(--button-icon-size,var(--button-xs-icon-size))]",
       sm: "ui-button--sm",
       lg: "ui-button--lg",
       icon: "ui-button--icon",
-      "icon-xs": "ui-button--icon-xs [&_svg]:size-[var(--button-xs-icon-size)] [&_svg]:shrink-0",
+      "icon-xs": "ui-button--icon-xs [&_svg]:size-[var(--button-icon-size,var(--button-xs-icon-size))] [&_svg]:shrink-0",
       "icon-sm": "ui-button--icon-sm",
       "icon-lg": "ui-button--icon-lg",
       // The glove step (gh#1304): ≥56×56, `--control-height-touch`.

package/dist/components/layout/affix.js

@@ -106,7 +106,7 @@ const Affix = React.forwardRef(function Affix2({
     };
   }, [measure, targetElement]);
   React.useEffect(() => {
-    if (!affixed || !targetElement || typeof window === "undefined") return void 0;
+    if (!affixed || typeof window === "undefined") return void 0;
     let frame = null;
     const onScroll = () => {
       if (frame !== null) return;

package/dist/components/layout/editorial-catalog.d.ts

@@ -7,7 +7,7 @@ export declare function EditorialFilterPanel({ variant, children, action, classN
 /** One field of an `EditorialFilterPanel`: a visible label over one control. */
 export declare function EditorialFilterField({ label, htmlFor, children, className, }: EditorialFilterFieldProp): React.JSX.Element;
 /** The head of a catalog item's page: framed picture beside kicker, h1, tags, summary, facts. */
-export declare function CatalogDetail({ variant, media, favorite, mediaCaption, overline, title, meta, summary, actions, facts, className, }: CatalogDetailProp): React.JSX.Element;
+export declare function CatalogDetail({ variant, media, image, favorite, mediaCaption, overline, title, meta, summary, actions, facts, className, }: CatalogDetailProp): React.JSX.Element;
 /** One outlined tag in a `CatalogDetail` meta row. */
 export declare function CatalogDetailTag({ children, className }: CatalogDetailTagProp): React.JSX.Element;
 /** One band of an item page under its head: hairline, h2, muted paragraph, then the rest. */

package/dist/components/layout/editorial-catalog.js

@@ -1,5 +1,8 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { Bookmark } from "lucide-react";
+import { Image } from "../data-display/image.js";
 import { cn } from "../../lib/utils.js";
 function EditorialFilterPanel({
   variant = "panel",
@@ -37,6 +40,7 @@ function EditorialFilterField({
 function CatalogDetail({
   variant = "card",
   media,
+  image,
   favorite,
   mediaCaption,
   overline,
@@ -47,6 +51,18 @@ function CatalogDetail({
   facts,
   className
 }) {
+  const [load, setLoad] = React.useState(null);
+  const src = image?.src;
+  const status = image ? load && load.src === src ? load.status : "loading" : void 0;
+  const onStatusChange = React.useCallback(
+    (next) => {
+      if (src !== void 0)
+        setLoad(
+          (previous) => previous?.src === src && previous.status === next ? previous : { src, status: next }
+        );
+    },
+    [src]
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -55,21 +71,43 @@ function CatalogDetail({
       className: cn("ui-catalog-detail", className),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "ui-catalog-detail-visual", children: [
-          /* @__PURE__ */ jsxs("div", { className: "ui-catalog-detail-art", children: [
-            favorite && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-pressed": favorite.pressed,
-                "aria-label": favorite.label,
-                disabled: favorite.disabled,
-                className: "ui-catalog-card-favorite ui-focus-ring",
-                onClick: () => favorite.onPressedChange(!favorite.pressed),
-                children: /* @__PURE__ */ jsx(Bookmark, { "aria-hidden": true, className: "ui-catalog-card-favorite-icon" })
-              }
-            ),
-            media
-          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "ui-catalog-detail-art",
+              "data-status": status,
+              "aria-busy": status === "loading" ? true : void 0,
+              children: [
+                favorite && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": favorite.pressed,
+                    "aria-label": favorite.label,
+                    disabled: favorite.disabled,
+                    className: "ui-catalog-card-favorite ui-focus-ring",
+                    onClick: () => favorite.onPressedChange(!favorite.pressed),
+                    children: /* @__PURE__ */ jsx(Bookmark, { "aria-hidden": true, className: "ui-catalog-card-favorite-icon" })
+                  }
+                ),
+                image ? /* @__PURE__ */ jsx(
+                  Image,
+                  {
+                    src: image.src,
+                    alt: image.alt,
+                    width: image.width,
+                    height: image.height,
+                    fit: "contain",
+                    fallback: image.fallback,
+                    fetchPriority: image.priority ? "high" : void 0,
+                    preview: false,
+                    onStatusChange
+                  },
+                  image.src
+                ) : media
+              ]
+            }
+          ),
           mediaCaption != null && /* @__PURE__ */ jsx("p", { className: "ui-catalog-detail-caption", children: mediaCaption })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "ui-catalog-detail-main", children: [

package/dist/components/navigation/dropdown-menu.d.ts

@@ -169,6 +169,14 @@ interface DropdownMenuItemPropsOwn {
     description?: React.ReactNode;
     /** Mượn thẻ của con thay vì dựng `<div>` riêng — chỗ để nhét một `<Link>` vào một mục menu. */
     asChild?: boolean;
+    /**
+     * The item is a link to this URL. With `asChild` it is read from the borrowed child's own `href`
+     * when there is one; pass it here when the child is a router link that takes something else
+     * (TanStack/React Router `<Link to>`), so react-aria renders its LINK item — an `<a>` — instead of
+     * an action `<div>` (and stops warning "Expected <div>, got <a>"). Without a react-aria
+     * `RouterProvider` the click stays the child's own: navigation is whatever the child does.
+     */
+    href?: string;
     /**
      * `id` và mọi `data-*` ĐI XUỐNG phần tử gốc của item (gh#631).
      *
@@ -183,7 +191,7 @@ interface DropdownMenuItemPropsOwn {
     id?: string;
 }
 type DropdownMenuItemProps = React.PropsWithChildren<DropdownMenuItemPropsOwn> & Record<`data-${string}`, unknown>;
-export declare function DropdownMenuItem({ children, className, inset, variant, disabled, onSelect, textValue, description, asChild, ...forwarded }: DropdownMenuItemProps): React.JSX.Element;
+export declare function DropdownMenuItem({ children, className, inset, variant, disabled, onSelect, textValue, description, asChild, href, ...forwarded }: DropdownMenuItemProps): React.JSX.Element;
 interface DropdownMenuLabelPropsOwn {
     className?: string;
     inset?: boolean;
@@ -197,10 +205,12 @@ type DropdownMenuLabelProps = React.PropsWithChildren<DropdownMenuLabelPropsOwn>
  * `Header` không đi qua `useRenderProps`, nên `props.children` trong `render` CHÍNH là children của
  * consumer — không có `Provider` chen vào như ở `MenuItem`. `Slot` vì thế nhận thẳng gói props.
  *
- * NHƯNG PHẢI RENDER RA `<div>`, KHÔNG PHẢI `<header>`. `<header>` mang vai trò ngầm `banner`, và
+ * `<header>` TRẦN thì không được: nó mang vai trò ngầm `banner`, và
  * `banner` không nằm trong danh sách con hợp lệ của `role="menu"` (axe: aria-required-children,
  * ARIA 1.2 — menu chỉ nhận menuitem / menuitemcheckbox / menuitemradio / group / separator). Radix
- * dựng `<div>`, vai trò `generic`, nên nó không bao giờ vấp lỗi này.
+ * dựng `<div>`, vai trò `generic`, nên nó không bao giờ vấp lỗi này. Còn `<div>` thì RAC cảnh báo
+ * "Expected <header>, got <div>" (gh#1452). Nên: `<header role="presentation">` — đúng thẻ RAC chờ,
+ * không có landmark.
  *
  * `Header` vẫn được dùng chứ không thay bằng `<div>` trần: bộ dựng collection của RAC chỉ nhận các
  * nút nó biết, một phần tử lạ đặt thẳng trong `Menu` sẽ bị nó bỏ. Nên giữ nút, đổi thẻ.