@godxjp/ui 23.2.0 → 23.3.0

package/dist/app/timezones.js

@@ -1,4 +1,5 @@
 import { translate } from "../i18n/translate.js";
+import { dateTimeFormat } from "../lib/intl-cache.js";
 const APP_TIMEZONE_PRESET = [
   "UTC",
   "Asia/Ho_Chi_Minh",
@@ -113,7 +114,7 @@ function getTimezoneCityName(timezone) {
 function getTimezoneOffsetLabel(timezone, locale = "en") {
   if (timezone === "UTC") return "UTC";
   try {
-    const parts = new Intl.DateTimeFormat(locale, {
+    const parts = dateTimeFormat(locale, {
       timeZone: resolveTimezoneForIntl(timezone),
       timeZoneName: "shortOffset"
     }).formatToParts(/* @__PURE__ */ new Date());

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

@@ -22,6 +22,7 @@ import { useTranslation } from "../../i18n/use-translation.js";
 import { ChartFrame, chartColor, chartHeight, useChartNumberFormat } from "./chart-frame.js";
 import { buildCartesianSummary } from "./chart-summary.js";
 import { useCategoryAxisMetrics } from "./chart-category-axis.js";
+import { listFormat } from "../../lib/intl-cache.js";
 function CartesianChart({
   kind,
   data,
@@ -45,10 +46,7 @@ function CartesianChart({
   assertRechartsPeer();
   const { t, locale } = useTranslation();
   const fmt = useChartNumberFormat(numberFormat);
-  const list = React.useMemo(
-    () => new Intl.ListFormat(locale, { style: "narrow", type: "unit" }),
-    [locale]
-  );
+  const list = React.useMemo(() => listFormat(locale, { style: "narrow", type: "unit" }), [locale]);
   const hasData = data.length > 0 && series.length > 0;
   const summary = buildCartesianSummary(
     data,

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

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { numberFormat } from "../../lib/intl-cache.js";
 const CHART_COLORS = [
   "var(--chart-1)",
   "var(--chart-2)",
@@ -25,7 +26,7 @@ function chartHeight(size = "md", height) {
 }
 function useChartNumberFormat(options) {
   const { locale } = useTranslation();
-  return React.useMemo(() => new Intl.NumberFormat(locale, options), [locale, options]);
+  return React.useMemo(() => numberFormat(locale, options), [locale, options]);
 }
 function ChartFrame({
   label,

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

@@ -22,6 +22,7 @@ import { CONTROL_STATUS_CHROME_CLASS, CONTROL_VARIANT_CHROME_CLASS } from "./con
 import { Input } from "./input.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Calendar } from "./calendar.js";
+import { dateTimeFormat, numberFormat } from "../../lib/intl-cache.js";
 const ISO_HINT = "yyyy-mm-dd";
 const PERIOD_PICKERS = /* @__PURE__ */ new Set(["month", "quarter", "year"]);
 const PERIOD_COLUMNS = 3;
@@ -49,6 +50,7 @@ function DatePicker(props) {
     disabledDate,
     cellRender,
     allowClear,
+    triggerLabel,
     format: formatProp,
     parseFormat,
     minDate,
@@ -296,13 +298,9 @@ function DatePicker(props) {
     (index) => index < periodCells
   );
   const pageStep = picker === "year" ? periodCells : 1;
-  const prevDisabled = !pickerDateAllowed(
-    periodPage(viewYear - pageStep)[periodCells - 1],
-    minimum,
-    void 0
-  );
-  const nextDisabled = !pickerDateAllowed(periodPage(viewYear + pageStep)[0], void 0, maximum);
-  const periodLabel = (date, index) => picker === "year" ? new Intl.DateTimeFormat(locale, { year: "numeric" }).format(date) : picker === "quarter" ? t("dataEntry.datePicker.quarter", { quarter: index + 1 }) ?? `Q${index + 1}` : new Intl.DateTimeFormat(locale, { month: "short" }).format(date);
+  const prevDisabled = () => !pickerDateAllowed(periodPage(viewYear - pageStep)[periodCells - 1], minimum, void 0);
+  const nextDisabled = () => !pickerDateAllowed(periodPage(viewYear + pageStep)[0], void 0, maximum);
+  const periodLabel = (date, index) => picker === "year" ? dateTimeFormat(locale, { year: "numeric" }).format(date) : picker === "quarter" ? t("dataEntry.datePicker.quarter", { quarter: index + 1 }) ?? `Q${index + 1}` : dateTimeFormat(locale, { month: "short" }).format(date);
   const periodPick = (date) => {
     if (!range) {
       choose(date);
@@ -318,7 +316,7 @@ function DatePicker(props) {
     choose({ from: pendingFrom, to: date });
     if (!needConfirm) setOpen(false);
   };
-  const periodPanel = /* @__PURE__ */ jsxs("div", { className: "ui-month-picker-panel", children: [
+  const renderPeriodPanel = () => /* @__PURE__ */ jsxs("div", { className: "ui-month-picker-panel", children: [
     /* @__PURE__ */ jsxs("div", { className: "ui-month-picker-nav", children: [
       /* @__PURE__ */ jsx(
         Button,
@@ -326,21 +324,21 @@ function DatePicker(props) {
           type: "button",
           variant: "outline",
           size: "icon-sm",
-          disabled: prevDisabled,
+          disabled: prevDisabled(),
           "aria-label": t("dataEntry.monthPicker.previousYear") ?? "Previous year",
           className: "ui-month-picker-nav-button",
           onClick: () => setViewYear(viewYear - pageStep),
           children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ui-month-picker-icon", "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: "ui-month-picker-nav-label", "aria-live": "polite", children: new Intl.NumberFormat(locale, { useGrouping: false }).format(viewYear) }),
+      /* @__PURE__ */ jsx("span", { className: "ui-month-picker-nav-label", "aria-live": "polite", children: numberFormat(locale, { useGrouping: false }).format(viewYear) }),
       /* @__PURE__ */ jsx(
         Button,
         {
           type: "button",
           variant: "outline",
           size: "icon-sm",
-          disabled: nextDisabled,
+          disabled: nextDisabled(),
           "aria-label": t("dataEntry.monthPicker.nextYear") ?? "Next year",
           className: "ui-month-picker-nav-button",
           onClick: () => setViewYear(viewYear + pageStep),
@@ -390,7 +388,7 @@ function DatePicker(props) {
     showClose,
     onClose: () => setOpen(false)
   };
-  const dayPanel = range ? /* @__PURE__ */ jsx(
+  const renderDayPanel = () => range ? /* @__PURE__ */ jsx(
     Calendar,
     {
       mode: "range",
@@ -458,7 +456,7 @@ function DatePicker(props) {
       type: "button",
       disabled: allDisabled,
       tabIndex: -1,
-      "aria-label": (isPeriod ? t("dataEntry.monthPicker.openGrid") : range ? t("dataEntry.dateRangePicker.openCalendar") : t("dataEntry.datePicker.openCalendar")) ?? "Open calendar",
+      "aria-label": triggerLabel ?? (isPeriod ? t("dataEntry.monthPicker.openGrid") : range ? t("dataEntry.dateRangePicker.openCalendar") : t("dataEntry.datePicker.openCalendar")) ?? "Open calendar",
       className: range ? "text-muted-foreground hover:text-foreground shrink-0" : "ui-control-inline-affix-action",
       children: /* @__PURE__ */ jsx(
         CalendarIcon,
@@ -502,7 +500,7 @@ function DatePicker(props) {
           },
           index
         )) }) : null,
-        isPeriod ? periodPanel : dayPanel,
+        isPeriod ? renderPeriodPanel() : renderDayPanel(),
         showTime ? /* @__PURE__ */ jsx(Flex, { pad: "sm", children: /* @__PURE__ */ jsx(
           TimePicker,
           {

package/dist/components/data-entry/number-input.js

@@ -7,6 +7,7 @@ import { cn } from "../../lib/utils.js";
 import { pickFieldA11y } from "../../lib/field-a11y.js";
 import { Button } from "../general/button.js";
 import { Input } from "./input.js";
+import { numberFormat } from "../../lib/intl-cache.js";
 function decimalsOf(n) {
   if (!Number.isFinite(n)) return 0;
   const s = String(n);
@@ -77,7 +78,7 @@ const NumberInput = React.forwardRef(
     const numericValue = isControlled ? controlledValue ?? null : internal;
     const effectivePrecision = precision ?? decimalsOf(step);
     const intlFormatter = React.useMemo(
-      () => new Intl.NumberFormat(locale, {
+      () => numberFormat(locale, {
         minimumFractionDigits: 0,
         maximumFractionDigits: Math.max(effectivePrecision, 0),
         useGrouping: false

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

@@ -6,8 +6,8 @@ export { TwoFactorSetup } from "./two-factor-setup.js";
 export type { TwoFactorSetupLabels, TwoFactorSetupProps } from "./two-factor-setup.js";
 export { Toaster } from "./sonner.js";
 export { toast } from "./use-toast.js";
-export { Skeleton, SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonStat, SkeletonArticle, SkeletonAvatar, SkeletonButton, SkeletonInput, SkeletonNode, SkeletonImage, } from "./skeleton.js";
-export type { SkeletonProp, SkeletonProps, SkeletonWidth, SkeletonArticleProp, SkeletonArticleProps, SkeletonAvatarProp, SkeletonAvatarProps, SkeletonButtonProp, SkeletonButtonProps, SkeletonInputProp, SkeletonInputProps, SkeletonNodeProp, SkeletonNodeProps, SkeletonImageProp, SkeletonImageProps, } from "./skeleton.js";
+export { Skeleton, SkeletonForm, SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonStat, SkeletonArticle, SkeletonAvatar, SkeletonButton, SkeletonInput, SkeletonNode, SkeletonImage, } from "./skeleton.js";
+export type { SkeletonProp, SkeletonProps, SkeletonWidth, SkeletonArticleProp, SkeletonArticleProps, SkeletonAvatarProp, SkeletonAvatarProps, SkeletonButtonProp, SkeletonButtonProps, SkeletonFormProp, SkeletonFormProps, SkeletonInputProp, SkeletonInputProps, SkeletonNodeProp, SkeletonNodeProps, SkeletonImageProp, SkeletonImageProps, } from "./skeleton.js";
 export { Banner } from "./banner.js";
 export type { BannerProp, BannerProps } from "./banner.js";
 export { Alert, AlertTitle, AlertContent, AlertDescription, AlertActions, AlertQueryError, } from "./alert.js";

package/dist/components/feedback/index.js

@@ -44,6 +44,7 @@ import { Toaster } from "./sonner.js";
 import { toast } from "./use-toast.js";
 import {
   Skeleton,
+  SkeletonForm,
   SkeletonRows,
   SkeletonTable,
   SkeletonDetail,
@@ -114,6 +115,7 @@ export {
   SkeletonAvatar,
   SkeletonButton,
   SkeletonDetail,
+  SkeletonForm,
   SkeletonImage,
   SkeletonInput,
   SkeletonNode,

package/dist/components/feedback/skeleton.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { SkeletonArticleProp, SkeletonAvatarProp, SkeletonButtonProp, SkeletonImageProp, SkeletonInputProp, SkeletonNodeProp, SkeletonProp } from "../../props/components/feedback.prop.js";
-export type { SkeletonProp, SkeletonProp as SkeletonProps, SkeletonWidth, SkeletonArticleProp, SkeletonArticleProp as SkeletonArticleProps, SkeletonAvatarProp, SkeletonAvatarProp as SkeletonAvatarProps, SkeletonButtonProp, SkeletonButtonProp as SkeletonButtonProps, SkeletonInputProp, SkeletonInputProp as SkeletonInputProps, SkeletonNodeProp, SkeletonNodeProp as SkeletonNodeProps, SkeletonImageProp, SkeletonImageProp as SkeletonImageProps, } from "../../props/components/feedback.prop.js";
+import type { SkeletonArticleProp, SkeletonAvatarProp, SkeletonButtonProp, SkeletonFormProp, SkeletonImageProp, SkeletonInputProp, SkeletonNodeProp, SkeletonProp } from "../../props/components/feedback.prop.js";
+export type { SkeletonProp, SkeletonProp as SkeletonProps, SkeletonFormProp, SkeletonFormProp as SkeletonFormProps, SkeletonWidth, SkeletonArticleProp, SkeletonArticleProp as SkeletonArticleProps, SkeletonAvatarProp, SkeletonAvatarProp as SkeletonAvatarProps, SkeletonButtonProp, SkeletonButtonProp as SkeletonButtonProps, SkeletonInputProp, SkeletonInputProp as SkeletonInputProps, SkeletonNodeProp, SkeletonNodeProp as SkeletonNodeProps, SkeletonImageProp, SkeletonImageProp as SkeletonImageProps, } from "../../props/components/feedback.prop.js";
 declare function SkeletonBlock({ active, loading, className, children, ...props }: SkeletonProp): React.JSX.Element;
 /** Stands in for an `Avatar` — circle for a person, square for an entity mark. */
 export declare function SkeletonAvatar({ size, shape, active, className }: SkeletonAvatarProp): React.JSX.Element;
@@ -39,6 +39,15 @@ interface SkeletonRowsProps {
 }
 /** Skeleton for a flat list of rows (use inside a Card or section). */
 export declare function SkeletonRows({ rows, columns, className }: SkeletonRowsProps): React.JSX.Element;
+/**
+ * Skeleton of a `Form columns={N}` — label + control PAIRS on the form's own grid (gh#552).
+ *
+ * It renders through `ResponsiveGrid` with the SAME `columns` value the form takes, so the two
+ * share one breakpoint ladder rather than two that agree today. `SkeletonRows` could get the column
+ * count right and never the inside of a cell: a form field is a short label stacked on a full-width
+ * control, and a flat line list is neither.
+ */
+export declare function SkeletonForm({ columns, fields, active, className }: SkeletonFormProp): React.JSX.Element;
 /** Skeleton matching the DataTable layout — header row + N body rows. */
 export declare function SkeletonTable({ rows, columns }: SkeletonRowsProps): React.JSX.Element;
 /** Skeleton matching a Card detail layout — title + 6 metadata rows. */

package/dist/components/feedback/skeleton.js

@@ -1,5 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ImageIcon } from "lucide-react";
+import { ResponsiveGrid } from "../layout/responsive-grid.js";
 import { cn } from "../../lib/utils.js";
 import { tableCellPaddingClass, tableRowHeightClass } from "../../lib/control-styles.js";
 function measureStyle(width) {
@@ -169,6 +170,12 @@ function SkeletonRows({ rows = 6, columns = 4, className }) {
     j
   )) }, i)) });
 }
+function SkeletonForm({ columns = 1, fields = 6, active, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("ui-skeleton-form", className), "aria-busy": "true", children: /* @__PURE__ */ jsx(ResponsiveGrid, { columns, children: Array.from({ length: fields }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-form-field", children: [
+    /* @__PURE__ */ jsx(Skeleton, { active, className: "ui-skeleton-form-label" }),
+    /* @__PURE__ */ jsx(Skeleton, { active, className: "ui-skeleton-form-control" })
+  ] }, i)) }) });
+}
 function SkeletonTable({ rows = 8, columns = 5 }) {
   return /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-table", "aria-busy": "true", children: [
     /* @__PURE__ */ jsx("div", { className: cn("ui-skeleton-table-head", tableCellPaddingClass, tableRowHeightClass), children: Array.from({ length: columns }).map((_, j) => /* @__PURE__ */ jsx(Skeleton, { className: cn("ui-skeleton-caption", j === 0 ? "w-1/5" : "flex-1") }, j)) }),
@@ -205,6 +212,7 @@ export {
   SkeletonAvatar,
   SkeletonButton,
   SkeletonDetail,
+  SkeletonForm,
   SkeletonImage,
   SkeletonInput,
   SkeletonNode,

package/dist/components/general/button.js

@@ -6,6 +6,7 @@ import { cva } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { numberFormat } from "../../lib/intl-cache.js";
 const buttonVariants = cva("ui-button", {
   variants: {
     variant: {
@@ -78,7 +79,7 @@ const Button = React.forwardRef(
       loadingText ?? children
     ] }) : children;
     const showCount = !asChild && count != null && (count !== 0 || showZero);
-    const countLabel = showCount && count != null && count > overflowCount ? `${new Intl.NumberFormat(locale).format(overflowCount)}+` : count != null ? new Intl.NumberFormat(locale).format(count) : "";
+    const countLabel = showCount && count != null && count > overflowCount ? `${numberFormat(locale).format(overflowCount)}+` : count != null ? numberFormat(locale).format(count) : "";
     const countNode = showCount ? /* @__PURE__ */ jsx("span", { "data-slot": "button-count", className: "ui-button-count", children: countLabel }) : null;
     return /* @__PURE__ */ jsx(
       Comp,

package/dist/components/layout/error-surface.js

@@ -8,6 +8,7 @@ import { EmptyState } from "../data-display/empty-state.js";
 import { Progress } from "../data-display/progress.js";
 import { Text } from "../general/typography.js";
 import { CenteredShell } from "./centered-shell.js";
+import { dateTimeFormat, numberFormat } from "../../lib/intl-cache.js";
 const STATUS_META = {
   400: { icon: TriangleAlert, tone: "warning" },
   403: { icon: ShieldAlert, tone: "warning" },
@@ -37,7 +38,7 @@ function formatMaintenanceWindow(maintenance, locale) {
   };
   const start = new Date(maintenance.start);
   if (Number.isNaN(start.getTime())) return maintenance.start;
-  const formatter = new Intl.DateTimeFormat(locale, options);
+  const formatter = dateTimeFormat(locale, options);
   if (maintenance.end === void 0) return formatter.format(start);
   const end = new Date(maintenance.end);
   if (Number.isNaN(end.getTime())) return formatter.format(start);
@@ -72,7 +73,7 @@ const ErrorSurface = React.forwardRef(
     const maintenanceProgress = maintenance?.progress;
     const hasProgress = typeof maintenanceProgress === "number" && Number.isFinite(maintenanceProgress);
     const progressLabel = hasProgress ? t("layout.errorSurface.maintenanceProgress", {
-      percent: new Intl.NumberFormat(locale, {
+      percent: numberFormat(locale, {
         style: "percent",
         maximumFractionDigits: 0
       }).format(Math.max(0, Math.min(100, maintenanceProgress)) / 100)

package/dist/components/ui/toggle.js

@@ -5,6 +5,7 @@ import { ToggleButton } from "react-aria-components";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { numberFormat } from "../../lib/intl-cache.js";
 const toggleVariants = cva("ui-toggle", {
   variants: {
     variant: {
@@ -33,7 +34,7 @@ function useCounterPill({
   const visible = count != null && (count !== 0 || showZero);
   const formatted = React.useMemo(() => {
     if (count == null) return "";
-    const format = new Intl.NumberFormat(locale);
+    const format = numberFormat(locale);
     return count > overflowCount ? `${format.format(overflowCount)}+` : format.format(count);
   }, [count, locale, overflowCount]);
   if (!visible) {

package/dist/i18n/translate.js

@@ -1,6 +1,7 @@
 import en from "./messages/en.json" with { type: "json" };
 import ja from "./messages/ja.json" with { type: "json" };
 import vi from "./messages/vi.json" with { type: "json" };
+import { numberFormat, pluralRules } from "../lib/intl-cache.js";
 const MESSAGE_CATALOG = {
   vi,
   en,
@@ -56,7 +57,7 @@ function selectPlural(value, locale, params) {
   if (count === void 0) {
     return value.other ?? Object.values(value)[0] ?? "";
   }
-  const category = new Intl.PluralRules(locale).select(count);
+  const category = pluralRules(locale).select(count);
   return value[category] ?? value.other ?? Object.values(value)[0] ?? "";
 }
 function interpolate(template, locale, params) {
@@ -64,7 +65,7 @@ function interpolate(template, locale, params) {
   return Object.entries(params).reduce(
     (text, [key, value]) => text.replaceAll(
       `{${key}}`,
-      typeof value === "number" ? new Intl.NumberFormat(locale).format(value) : String(value)
+      typeof value === "number" ? numberFormat(locale).format(value) : String(value)
     ),
     template
   );

package/dist/lib/datetime/picker-format.js

@@ -9,10 +9,11 @@ import {
   startOfYear
 } from "date-fns";
 import { parseDateInput, toIsoDate } from "./parse.js";
+import { dateTimeFormat } from "../intl-cache.js";
 function formatPickerDate(date, format, locale, withTime = false) {
   if (!date || !isValid(date)) return "";
   if (typeof format === "function") return format(date);
-  if (typeof format === "object") return new Intl.DateTimeFormat(locale, format).format(date);
+  if (typeof format === "object") return dateTimeFormat(locale, format).format(date);
   if (typeof format === "string") return formatDate(date, format);
   return withTime ? formatDate(date, "yyyy-MM-dd HH:mm") : toIsoDate(date);
 }

package/dist/lib/format.js

@@ -1,7 +1,8 @@
 import { getSyncedLocale, translateCurrent } from "../i18n/translate.js";
+import { numberFormat } from "./intl-cache.js";
 function formatBytes(n, locale = getSyncedLocale()) {
   if (n == null) return "\u2014";
-  const num = (digits, scaled) => new Intl.NumberFormat(locale, {
+  const num = (digits, scaled) => numberFormat(locale, {
     minimumFractionDigits: digits,
     maximumFractionDigits: digits
   }).format(scaled);
@@ -12,7 +13,7 @@ function formatBytes(n, locale = getSyncedLocale()) {
 }
 function formatCurrency(amountMinor, currency, locale = getSyncedLocale()) {
   if (amountMinor == null || !currency) return "\u2014";
-  const formatter = new Intl.NumberFormat(locale, { style: "currency", currency });
+  const formatter = numberFormat(locale, { style: "currency", currency });
   const minorUnitDigits = formatter.resolvedOptions().maximumFractionDigits ?? 2;
   const major = amountMinor / Math.pow(10, minorUnitDigits);
   return formatter.format(major);

package/dist/lib/intl-cache.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Memoised `Intl` formatters, keyed by locale + options.
+ *
+ * WHY THIS EXISTS, AS A MEASUREMENT (gh#557). A consumer ported a legacy CakePHP grid that keeps
+ * every row in the DOM — 8,262 rows, no virtualisation available — and measured 27-30s against
+ * 2.3s for the same markup built from native `<input>` / `<select>`. They had already ruled out
+ * the obvious suspect: deleting `Popover` / `PopoverContent` from `DatePicker` entirely changed
+ * nothing.
+ *
+ * Rendered here through `react-dom/server`, 2,000 rows at a time, one CLOSED `DatePicker` costs
+ * **412.6us** against **4.2us** for `<input type="date">` — 98x. Counting constructor calls during
+ * that render, each closed instance built:
+ *
+ *     12 x new Intl.DateTimeFormat
+ *      1 x new Intl.NumberFormat
+ *
+ * Constructing an `Intl` formatter is one of the most expensive things a JS engine does: it
+ * resolves locale data and compiles a pattern. Routing those same constructions through this
+ * cache, changing nothing else, took the instance from **412.6us to 178us — a 57% cut**. For the
+ * reporter's grid that is roughly 99,000 formatter constructions that no longer happen.
+ *
+ * WHY A SHARED MODULE AND NOT A `useMemo` AT EACH CALL SITE. `useMemo` memoises per INSTANCE, and
+ * the instance is exactly what there are 8,262 of. Two rows formatting dates in the same locale
+ * want the same formatter object, and nothing below module scope can give them one.
+ *
+ * SAFETY. `Intl` formatters are immutable and stateless — `format()` mutates nothing — so a single
+ * instance is safely shared across every caller and every React tree, concurrent SSR included.
+ */
+export declare function dateTimeFormat(locale: string, options?: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
+export declare function numberFormat(locale: string, options?: Intl.NumberFormatOptions): Intl.NumberFormat;
+export declare function pluralRules(locale: string, options?: Intl.PluralRulesOptions): Intl.PluralRules;
+export declare function listFormat(locale: string, options?: Intl.ListFormatOptions): Intl.ListFormat;

package/dist/lib/intl-cache.js

@@ -0,0 +1,29 @@
+const MAX_ENTRIES = 256;
+const cache = /* @__PURE__ */ new Map();
+function memoise(kind, locale, options, make) {
+  const key = `${kind} ${locale} ${options === void 0 ? "" : JSON.stringify(options)}`;
+  const hit = cache.get(key);
+  if (hit !== void 0) return hit;
+  const made = make();
+  if (cache.size >= MAX_ENTRIES) cache.delete(cache.keys().next().value);
+  cache.set(key, made);
+  return made;
+}
+function dateTimeFormat(locale, options) {
+  return memoise("dtf", locale, options, () => new Intl.DateTimeFormat(locale, options));
+}
+function numberFormat(locale, options) {
+  return memoise("nf", locale, options, () => new Intl.NumberFormat(locale, options));
+}
+function pluralRules(locale, options) {
+  return memoise("pr", locale, options, () => new Intl.PluralRules(locale, options));
+}
+function listFormat(locale, options) {
+  return memoise("lf", locale, options, () => new Intl.ListFormat(locale, options));
+}
+export {
+  dateTimeFormat,
+  listFormat,
+  numberFormat,
+  pluralRules
+};

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

@@ -778,6 +778,17 @@ export type PickerDateFormatProp = string | Intl.DateTimeFormatOptions | ((date:
  * `value`/`defaultValue`/`onValueChange` rather than antd's `onChange`.
  */
 export type DatePickerBaseProp = FieldA11yProps & PickerChromeProp & {
+    /**
+     * The accessible NAME of the button that opens the calendar, for a screen where more than one
+     * date field exists. Default 「カレンダーを開く」 / "Open calendar" — correct for one picker on a
+     * page, and useless for three: a reader hears the same sentence three times with nothing to
+     * say which field each button belongs to (WCAG 2.2 SC 2.4.6, gh#551).
+     *
+     * Same axis, same shape, same reason as Select's `clearLabel`: name the control after the
+     * FIELD it serves — `開始日のカレンダーを開く`. The default is unchanged, so nothing moves until
+     * a caller says something.
+     */
+    triggerLabel?: string;
     /** Display format; native submission remains ISO. */
     format?: PickerDateFormatProp;
     /** Parser for a custom display function or Intl era display; ISO always remains accepted. */

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

@@ -83,6 +83,25 @@ export type SkeletonRowsProp = {
     rows?: number;
     columns?: number;
 };
+/**
+ * The skeleton of a `Form columns={N}` — label + control PAIRS on the same grid the form uses,
+ * not the flat line list `SkeletonRows` draws (gh#552).
+ *
+ * Why it is its own component rather than `SkeletonRows` with better defaults: `SkeletonRows` has
+ * no idea a form field is two stacked things, so a consumer approximating one got the column count
+ * right and the inside of every cell wrong. Worse, "close enough" is a thing that DRIFTS — change
+ * the form's `columns` and forget the skeleton and the layout jumps again on load, with nothing
+ * red to say so. Sharing `ResponsiveGrid` is what stops that: one `columns` value, one ladder.
+ */
+export type SkeletonFormProp = {
+    /** Columns of the form this stands in for — passed straight to `ResponsiveGrid`. */
+    columns?: number;
+    /** How many label+control pairs to draw. */
+    fields?: number;
+    /** Shimmer, matching the rest of the family. */
+    active?: boolean;
+    className?: string;
+};
 /**
  * A skeleton line's MEASURE. `number` is read as pixels, matching antd's
  * `SkeletonParagraphProps["width"]` (components/skeleton/Paragraph.tsx); a string is any CSS length

package/dist/props/registry.d.ts

@@ -1955,6 +1955,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/feedback.prop.ts";
         readonly vocabulary: readonly ["SizeProp", "ShapeProp", "ClassNameProp"];
     };
+    readonly SkeletonFormProp: {
+        readonly group: "feedback";
+        readonly file: "components/feedback.prop.ts";
+        readonly vocabulary: readonly ["ClassNameProp"];
+    };
     readonly SkeletonInputProp: {
         readonly group: "feedback";
         readonly file: "components/feedback.prop.ts";

package/dist/props/registry.js

@@ -2254,6 +2254,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/feedback.prop.ts",
     vocabulary: ["SizeProp", "ShapeProp", "ClassNameProp"]
   },
+  SkeletonFormProp: {
+    group: "feedback",
+    file: "components/feedback.prop.ts",
+    vocabulary: ["ClassNameProp"]
+  },
   SkeletonInputProp: {
     group: "feedback",
     file: "components/feedback.prop.ts",

package/dist/styles/alert-layout.css

@@ -216,6 +216,28 @@
     gap: var(--skeleton-cell-gap);
   }
 
+  .ui-skeleton-form-field {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-stack-xs);
+    min-inline-size: 0;
+  }
+
+  .ui-skeleton-form-label {
+    block-size: var(--skeleton-caption-height);
+    inline-size: var(--skeleton-label-width);
+    max-inline-size: 100%;
+    border-radius: var(--skeleton-radius);
+    background: var(--skeleton-background, hsl(var(--muted)));
+  }
+
+  .ui-skeleton-form-control {
+    block-size: var(--control-height);
+    inline-size: 100%;
+    border-radius: var(--skeleton-element-radius);
+    background: var(--skeleton-background, hsl(var(--muted)));
+  }
+
   .ui-skeleton-table {
     overflow: hidden;
     border: 1px solid hsl(var(--border));

package/dist/styles/card-layout.css

@@ -329,6 +329,10 @@
     padding: var(--card-space-body-y) var(--card-space-inset);
   }
 
+  [data-slot="card-content"][data-flush] [data-slot="tabs-panel"] {
+    padding-inline: 0;
+  }
+
   [data-slot="card-footer"] {
     display: flex;
     flex-wrap: wrap;

package/dist/styles/form-layout.css

@@ -39,7 +39,17 @@
 
   @container responsive-grid (min-width: 40rem) {
     .ui-responsive-grid > .ui-form-field {
-      grid-column: span var(--form-field-col-span, 1);
+      grid-column: span min(var(--responsive-grid-sm, 1), var(--form-field-col-span, 1));
+    }
+  }
+  @container responsive-grid (min-width: 48rem) {
+    .ui-responsive-grid > .ui-form-field {
+      grid-column: span min(var(--responsive-grid-md, 1), var(--form-field-col-span, 1));
+    }
+  }
+  @container responsive-grid (min-width: 64rem) {
+    .ui-responsive-grid > .ui-form-field {
+      grid-column: span min(var(--responsive-grid-lg, 1), var(--form-field-col-span, 1));
     }
   }
 

package/dist/tokens/axes.css

@@ -66,3 +66,8 @@
   --focus-field-shadow: 0 0 0 var(--focus-ring-glow-width)
     hsl(var(--focus-ring-glow-color) / var(--focus-ring-glow-alpha));
 }
+
+:root[data-focus-outline="off"] {
+  --focus-outline: 0;
+  --focus-field-shadow: none;
+}

package/dist/tokens/foundation.css

@@ -108,9 +108,10 @@
     transparent 70%
   );
 
-  --focus-outline: 0;
+  --focus-outline: 1;
   --focus-outline-weight: var(--stroke-hairline);
   --focus-outline-color: var(--focus-ring-color, var(--ring));
+
   --control-outline-width: calc(var(--stroke-md) * var(--focus-outline));
   --focus-outline-offset: 0px;
 
@@ -125,7 +126,8 @@
   --focus-ring-glow-color: var(--control-outline);
   --focus-ring-glow-alpha: var(--control-outline-alpha);
 
-  --focus-field-shadow: none;
+  --focus-field-shadow: 0 0 0 var(--focus-ring-glow-width)
+    hsl(var(--focus-ring-glow-color) / var(--focus-ring-glow-alpha));
 
   --focus-ring-offset: var(--focus-outline-offset);
 
@@ -255,7 +257,6 @@
   --activity-interval: var(--duration-loop);
 
   --activity-stagger-step: 160ms;
-
 }
 
 .ui-scale-fixed {
@@ -306,7 +307,6 @@
   --space-chrome-y: var(--space-4);
   --space-chrome-gap: var(--space-2);
   --field-label-gap: var(--space-2);
-
 }
 
 .dark,