@godxjp/ui 32.2.1 → 32.3.0

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

@@ -77,6 +77,7 @@ function DatePicker(props) {
     placement = "bottom-start",
     renderExtraFooter,
     showSummary = true,
+    captionLayout = "label",
     size,
     status,
     variant,
@@ -114,7 +115,7 @@ function DatePicker(props) {
   const allowed = (date) => pickerDateAllowed(date, minimum, maximum, disabledDate);
   const display = (date) => format || showTime ? formatPickerDate(date, format, locale, Boolean(showTime)) : toIsoPeriod(date, picker);
   const displayAll = (date) => Array.isArray(date) ? date.map((day) => display(day)).join(", ") : display(date);
-  const parse = (text2) => parsePickerDate(text2, format, parseFormat, Boolean(showTime)) ?? parseIsoPeriod(text2, picker);
+  const parse = (text2, strict = false) => parsePickerDate(text2, format, parseFormat, Boolean(showTime), strict) ?? parseIsoPeriod(text2, picker);
   const periodDate = (date) => pickerPeriodStart(date, picker, dayPickerLocale);
   const fieldA11y = range ? pickGroupFieldA11y(ariaProps) : pickFieldA11y(ariaProps);
   const identity = useFieldIdentity({ id, name, "data-field": fieldA11y["data-field"] });
@@ -241,13 +242,13 @@ function DatePicker(props) {
       choose(void 0);
       return;
     }
-    const parsed = parse(raw);
+    const parsed = parse(raw, true);
     if (parsed && allowed(parsed)) choose(parsed);
   };
-  const commitEdge = (edge, raw) => {
+  const commitEdge = (edge, raw, strict = false) => {
     if (edgeDisabled(edge)) return;
     const trimmed = raw.trim();
-    const parsed = parse(trimmed);
+    const parsed = parse(trimmed, strict);
     if (trimmed && (!parsed || !allowed(parsed))) return;
     if (!trimmed && !allowEmpty[edge === "from" ? 0 : 1]) return;
     const base = working;
@@ -274,11 +275,20 @@ function DatePicker(props) {
       const next = periodDate(parsed);
       emit(next);
       setText(display(parsed));
+    } else if (!preserveInvalidOnBlur) {
+      setText(displayAll(committedSingle));
     }
     setOpen(false);
   };
   const enterEdge = (edge) => () => {
-    commitEdge(edge, edge === "from" ? fromText : toText);
+    const raw = edge === "from" ? fromText : toText;
+    const parsed = parse(raw);
+    commitEdge(edge, raw);
+    if (raw.trim() && (!parsed || !allowed(parsed)) && !preserveInvalidOnBlur) {
+      const fallback = display(edge === "from" ? committedRange?.from : committedRange?.to);
+      if (edge === "from") setFromText(fallback);
+      else setToText(fallback);
+    }
     setOpen(false);
   };
   const displayIsCanonical = !format && !showTime && !multiple && !needConfirm && !preserveInvalidOnBlur && picker === "date";
@@ -426,6 +436,7 @@ function DatePicker(props) {
     endMonth: maximum,
     showToday,
     showClose,
+    captionLayout,
     onClose: () => setOpen(false)
   };
   const renderDayPanel = () => range ? /* @__PURE__ */ jsx(
@@ -608,13 +619,15 @@ function DatePicker(props) {
         onChange: (event) => {
           if (edge === "from") setFromText(event.target.value);
           else setToText(event.target.value);
-          commitEdge(edge, event.target.value);
+          commitEdge(edge, event.target.value, true);
         },
         onBlur: (event) => {
-          if (preserveInvalidOnBlur) return;
           const parsed = parse(event.target.value);
           const accepted = parsed && allowed(parsed) ? parsed : void 0;
           const fallback = edge === "from" ? committedRange?.from : committedRange?.to;
+          if (accepted && +periodDate(accepted) !== +(fallback ?? NaN))
+            commitEdge(edge, event.target.value);
+          if (preserveInvalidOnBlur) return;
           const next = accepted ? display(accepted) : display(fallback);
           if (edge === "from") setFromText(next);
           else setToText(next);
@@ -704,6 +717,8 @@ function DatePicker(props) {
           onBlur: (event) => {
             const parsed = parse(event.target.value);
             const accepted = parsed && allowed(parsed) && timeAllowed(parsed) ? parsed : void 0;
+            if (accepted && !multiple && !needConfirm && +periodDate(accepted) !== +(committedSingle ?? NaN))
+              emit(periodDate(accepted));
             if (!preserveInvalidOnBlur)
               setText(accepted ? display(accepted) : displayAll(committedSingle));
           }

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

@@ -486,25 +486,31 @@ const DialogPicker = React.forwardRef(function DialogPicker2({
                 ))
               }
             ) : null,
-            /* @__PURE__ */ jsx(Command, { shouldFilter: false, split: isMultiple, className: "ui-record-picker-list", children: status === "error" ? /* @__PURE__ */ jsx(
-              EmptyState,
-              {
-                variant: "compact",
-                tone: "destructive",
-                title: t("dataEntry.recordPicker.error"),
-                action: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "outline",
-                    size: "sm",
-                    onClick: () => void load(query, filterValues),
-                    children: t("common.retry")
-                  }
-                )
-              }
+            /* @__PURE__ */ jsx(Command, { shouldFilter: false, split: isMultiple, className: "ui-record-picker-list", children: status === "error" ? (
+              // `live` on both outcomes below: each answers the user's own query (gh#1271 —
+              // EmptyState is no longer a live region by default).
+              /* @__PURE__ */ jsx(
+                EmptyState,
+                {
+                  live: true,
+                  variant: "compact",
+                  tone: "destructive",
+                  title: t("dataEntry.recordPicker.error"),
+                  action: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: () => void load(query, filterValues),
+                      children: t("common.retry")
+                    }
+                  )
+                }
+              )
             ) : status === "loading" ? /* @__PURE__ */ jsx("div", { role: "status", className: "ui-record-picker-status", children: t("dataEntry.recordPicker.loading") }) : visible.length === 0 ? /* @__PURE__ */ jsx(
               EmptyState,
               {
+                live: true,
                 variant: "compact",
                 title: notFoundContent ?? t("dataEntry.recordPicker.empty")
               }

package/dist/components/feedback/sonner.js

@@ -99,8 +99,11 @@ function Toaster({ style, richColors = true, toastOptions, ...props }) {
         ...style
       },
       position: "bottom-right",
+      offset: {
+        bottom: "calc(24px + var(--toast-offset-bottom) + var(--toast-sticky-bar-height))"
+      },
       mobileOffset: {
-        bottom: "var(--toast-mobile-offset)",
+        bottom: "calc(var(--toast-mobile-offset) + var(--toast-offset-bottom) + var(--toast-sticky-bar-height))",
         right: "var(--toast-mobile-offset)"
       },
       duration: tokenDuration,

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

@@ -1,6 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { useToastStickyBarClearance } from "../../lib/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 function MobileShell({
   statusBar,
@@ -13,6 +15,13 @@ function MobileShell({
   className
 }) {
   const { t } = useTranslation();
+  const actionsRef = useRef(null);
+  const tabBarRef = useRef(null);
+  const bottomBands = [
+    ...actions !== void 0 ? [actionsRef] : [],
+    ...tabBar !== void 0 ? [tabBarRef] : []
+  ];
+  useToastStickyBarClearance(bottomBands, height === "viewport");
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -34,8 +43,16 @@ function MobileShell({
             children
           }
         ),
-        actions !== void 0 && /* @__PURE__ */ jsx("footer", { className: "ui-mobile-shell-actions", children: actions }),
-        tabBar !== void 0 && /* @__PURE__ */ jsx("nav", { className: "ui-mobile-shell-tabbar", "aria-label": t("layout.sidebar.ariaLabel"), children: tabBar })
+        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
+          }
+        )
       ]
     }
   );

package/dist/components/layout/page-container.js

@@ -4,6 +4,7 @@ import { isValidElement, useEffect, useRef, useState } from "react";
 import { ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { scrollParent, useInView } from "../../lib/hooks.js";
+import { useToastStickyBarClearance } from "../../lib/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 import { BreadcrumbCrumbText, trailEllipsis } from "./breadcrumb-ellipsis.js";
 import { densityClass, pageContainerVariantClass, padStyle } from "../../lib/variants.js";
@@ -62,6 +63,8 @@ function PageContainerRoot({
 }) {
   const reveal = stickyFooter && footer != null && footerReveal === "onScroll";
   const { headerRef, revealed } = useFooterReveal(reveal);
+  const footerRef = useRef(null);
+  useToastStickyBarClearance([footerRef], stickyFooter && !!footer && (!reveal || revealed));
   const { t } = useTranslation();
   const { start: extraStart, end: extraEnd } = resolvePageExtra(extra);
   const titleFocus = titleRef === void 0 ? void 0 : { ref: titleRef, tabIndex: -1 };
@@ -176,7 +179,7 @@ function PageContainerRoot({
         ),
         toolbar != null && /* @__PURE__ */ jsx("div", { className: "ui-page-toolbar", style: padStyle(toolbarPad, void 0), children: toolbar }),
         children != null && /* @__PURE__ */ jsx("div", { className: "ui-page-body", children }),
-        footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", style: footerPadStyle(footerPad), children: footer })
+        footer && /* @__PURE__ */ jsx("footer", { ref: footerRef, className: "ui-page-footer", style: footerPadStyle(footerPad), children: footer })
       ]
     }
   );

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": "32.2.1",
+  "version": "32.3.0",
   "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

@@ -22,7 +22,9 @@
       "today": "Today",
       "close": "Close",
       "nav": "{label} navigation",
-      "name": "Calendar"
+      "name": "Calendar",
+      "monthDropdown": "Month",
+      "yearDropdown": "Year"
     },
     "datePicker": {
       "placeholder": "Select date",

package/dist/i18n/messages/ja.json

@@ -22,7 +22,9 @@
       "today": "今日",
       "close": "閉じる",
       "nav": "{label}のナビゲーション",
-      "name": "カレンダー"
+      "name": "カレンダー",
+      "monthDropdown": "月",
+      "yearDropdown": "年"
     },
     "datePicker": {
       "placeholder": "日付を選択",

package/dist/i18n/messages/vi.json

@@ -22,7 +22,9 @@
       "today": "Hôm nay",
       "close": "Đóng",
       "nav": "Điều hướng {label}",
-      "name": "Lịch"
+      "name": "Lịch",
+      "monthDropdown": "Tháng",
+      "yearDropdown": "Năm"
     },
     "datePicker": {
       "placeholder": "Chọn ngày",

package/dist/lib/datetime/picker-format.d.ts

@@ -4,7 +4,14 @@ import type { DatePickerBaseProp, PickerDateFormatProp } from "../../props/compo
 export type DatePickerPicker = NonNullable<DatePickerBaseProp["picker"]>;
 /** Display is independent from the canonical value submitted by the field. */
 export declare function formatPickerDate(date: Date | undefined, format: PickerDateFormatProp | undefined, locale: string, withTime?: boolean): string;
-export declare function parsePickerDate(text: string, format: PickerDateFormatProp | undefined, parser?: (text: string) => Date | undefined, withTime?: boolean): Date | undefined;
+/**
+ * Read typed text back into a date. Tries, in order: the caller's `parser`, the explicit `format`
+ * pattern, then canonical ISO `yyyy-MM-dd` — and, unless `strict`, any unambiguous year-first
+ * spelling (see `YEAR_FIRST`). `strict` exists for the KEYSTROKE path: `2026/10/1` is a complete
+ * year-first date on its way to `2026/10/15`, so committing it mid-typing would rewrite the text
+ * under the user's cursor. The field commits loose spellings on Enter and blur instead.
+ */
+export declare function parsePickerDate(text: string, format: PickerDateFormatProp | undefined, parser?: (text: string) => Date | undefined, withTime?: boolean, strict?: boolean): Date | undefined;
 export declare function pickerDateAllowed(date: Date, min: Date | undefined, max: Date | undefined, disabled?: (date: Date) => boolean): boolean;
 /** Normalize a reporting period with the active calendar's week convention. */
 export declare function pickerPeriodStart(date: Date, picker: DatePickerBaseProp["picker"], locale: Pick<Locale, "options">): Date;

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

@@ -8,7 +8,7 @@ import {
   startOfQuarter,
   startOfYear
 } from "date-fns";
-import { parseDateInput, toIsoDate } from "./parse.js";
+import { toIsoDate } from "./parse.js";
 import { dateTimeFormat } from "../intl-cache.js";
 function formatPickerDate(date, format, locale, withTime = false) {
   if (!date || !isValid(date)) return "";
@@ -17,7 +17,18 @@ function formatPickerDate(date, format, locale, withTime = false) {
   if (typeof format === "string") return formatDate(date, format);
   return withTime ? formatDate(date, "yyyy-MM-dd HH:mm") : toIsoDate(date);
 }
-function parsePickerDate(text, format, parser, withTime = false) {
+const YEAR_FIRST = /^(\d{4})([-/.])(\d{1,2})\2(\d{1,2})$/;
+const YEAR_FIRST_COMPACT = /^(\d{4})(\d{2})(\d{2})$/;
+function parseYearFirst(raw) {
+  const m = YEAR_FIRST.exec(raw);
+  const parts = m ? [m[1], m[3], m[4]] : YEAR_FIRST_COMPACT.exec(raw)?.slice(1, 4);
+  if (!parts) return void 0;
+  const [year, month, day] = parts.map(Number);
+  const date = new Date(year, month - 1, day);
+  date.setFullYear(year, month - 1, day);
+  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day ? date : void 0;
+}
+function parsePickerDate(text, format, parser, withTime = false, strict = false) {
   const raw = text.trim();
   if (!raw) return void 0;
   const custom = parser?.(raw);
@@ -27,8 +38,9 @@ function parsePickerDate(text, format, parser, withTime = false) {
     const parsed = parse(raw, pattern, new Date(2e3, 0, 1));
     if (isValid(parsed) && formatDate(parsed, pattern) === raw) return parsed;
   }
-  if (withTime || !/^\d{4}-\d{2}-\d{2}$/.test(raw)) return void 0;
-  return parseDateInput(raw) ?? void 0;
+  if (withTime) return void 0;
+  if (strict && !/^\d{4}-\d{2}-\d{2}$/.test(raw)) return void 0;
+  return parseYearFirst(raw);
 }
 function pickerDateAllowed(date, min, max, disabled) {
   return isValid(date) && (!min || startOfDay(date) >= startOfDay(min)) && (!max || startOfDay(date) <= startOfDay(max)) && !disabled?.(date);

package/dist/lib/toast-clearance.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Toast clearance for sticky action bars (gh#1271).
+ *
+ * The Toaster stacks bottom-right, and a page's sticky action bar (`PageContainer stickyFooter`,
+ * `MobileShell actions` + `tabBar`) is pinned to the same edge — so without this a stack of three
+ * success toasts sits on top of the submit button that raised them. The bar publishes its own
+ * block size on `<html>` as `--toast-sticky-bar-height`; the Toaster adds that length to its bottom
+ * offset (`sonner.tsx`). The tier file declares the property `0px`, so with no bar mounted — or
+ * the bar hidden — the toaster's offset is exactly what it was before.
+ *
+ * Internal: reachable from no published subpath.
+ */
+import { type RefObject } from "react";
+/** The custom property the Toaster reads. Declared `0px` in `src/tokens/components/feedback.css`. */
+export declare const TOAST_STICKY_BAR_PROPERTY = "--toast-sticky-bar-height";
+/**
+ * While `enabled`, publish the summed border-box block size of `refs` on `<html>` and keep it
+ * current with a `ResizeObserver`; remove it when disabled or unmounted.
+ *
+ * `offsetHeight`, not `getBoundingClientRect()`: the reveal footer slides in with a `transform`,
+ * and a transform must not leak into the clearance mid-transition. Everything runs in an effect,
+ * so SSR never touches `document`. One page-level bar at a time is the assumed shape: a second
+ * mounted bar overwrites the first's value, and either unmount clears it.
+ */
+export declare function useToastStickyBarClearance(refs: ReadonlyArray<RefObject<HTMLElement | null>>, enabled: boolean): void;

package/dist/lib/toast-clearance.js

@@ -0,0 +1,27 @@
+"use client";
+import { useEffect } from "react";
+const TOAST_STICKY_BAR_PROPERTY = "--toast-sticky-bar-height";
+function useToastStickyBarClearance(refs, enabled) {
+  useEffect(() => {
+    const elements = refs.map((ref) => ref.current).filter((el) => el != null);
+    if (!enabled || elements.length === 0 || typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
+    const html = document.documentElement;
+    const publish = () => {
+      const height = elements.reduce((sum, el) => sum + el.offsetHeight, 0);
+      html.style.setProperty(TOAST_STICKY_BAR_PROPERTY, `${height}px`);
+    };
+    publish();
+    const observer = new ResizeObserver(publish);
+    for (const el of elements) observer.observe(el);
+    return () => {
+      observer.disconnect();
+      html.style.removeProperty(TOAST_STICKY_BAR_PROPERTY);
+    };
+  }, [enabled, refs.length]);
+}
+export {
+  TOAST_STICKY_BAR_PROPERTY,
+  useToastStickyBarClearance
+};

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

@@ -180,6 +180,13 @@ export type EmptyStateProp = {
      * zero-state message is not announced as a heading and cannot skip an outline level.
      */
     titleAs?: "h1" | "h2" | "h3" | "h4" | "p" | "div";
+    /**
+     * Announce the empty state as a status message (`role="status"`). Default `false`: a static
+     * empty state ("no records yet") is content, not an update, and is not a live region. Set it
+     * when the empty state APPEARS as the result of a user action — a search or filter that matched
+     * nothing — so a screen-reader user hears the outcome (WCAG 4.1.3).
+     */
+    live?: boolean;
     className?: ClassNameProp;
 };
 /**

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

@@ -917,6 +917,18 @@ export type DatePickerBaseProp = FieldA11yProps & PickerChromeProp & {
     minDate?: Date;
     maxDate?: Date;
     showWeek?: boolean;
+    /**
+     * How the day panel's month caption is drawn — forwarded to `Calendar`'s react-day-picker
+     * `captionLayout`. `"label"` (default) is the plain month name between the ‹ › arrows;
+     * `"dropdown"` turns the month and the year into selects, `"dropdown-months"` /
+     * `"dropdown-years"` only one of them.
+     *
+     * Use `"dropdown"` for a BIRTH DATE or any date far from today (gh#1271): with the arrows alone
+     * reaching 1999 is ~320 clicks, with the year select it is one. Without `minDate`/`maxDate` the
+     * year list spans 100 years back to the current year — set `maxDate` for a date that can lie in
+     * the future (an expiry).
+     */
+    captionLayout?: DayPickerProps["captionLayout"];
     needConfirm?: boolean;
     /**
      * Which period the PANEL opens on, independently of the value (antd `defaultPickerValue`, and

package/dist/styles/control.css

@@ -2790,6 +2790,60 @@
     font-weight: var(--font-weight-medium);
   }
 
+  .ui-calendar-dropdowns {
+    display: inline-flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: var(--space-1);
+  }
+
+  .ui-calendar-dropdown-root {
+    position: relative;
+    display: inline-flex;
+    min-inline-size: 0;
+    align-items: center;
+    block-size: var(--control-height-sm);
+    padding-inline: var(--space-2) var(--space-1);
+    border: var(--stroke-hairline) solid hsl(var(--border));
+    border-radius: var(--control-radius);
+    background-color: hsl(var(--background));
+  }
+
+  .ui-calendar-dropdown-root:hover {
+    background-color: hsl(var(--accent));
+  }
+
+  .ui-calendar-dropdown-root[data-disabled="true"] {
+    opacity: var(--calendar-nav-rest-alpha);
+  }
+
+  .ui-calendar-dropdown {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    inline-size: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    appearance: none;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .ui-calendar-dropdown-root > .ui-calendar-caption-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    white-space: nowrap;
+  }
+
+  .ui-calendar-dropdown-root .ui-calendar-chevron {
+    inline-size: var(--icon-size-sm);
+    block-size: var(--icon-size-sm);
+    opacity: var(--calendar-nav-rest-alpha);
+  }
+
   .ui-calendar-nav {
     position: absolute;
     inset-inline: 0;
@@ -2800,9 +2854,12 @@
     align-items: center;
     justify-content: space-between;
     padding-inline: var(--calendar-nav-space-inline);
+
+    pointer-events: none;
   }
 
   .ui-calendar-nav-button {
+    pointer-events: auto;
     background: transparent;
     padding: 0;
     opacity: var(--calendar-nav-rest-alpha);

package/dist/styles/focus-ring.css

@@ -50,6 +50,7 @@
     .tb-icon-btn
   ):focus-visible,
 
+  .ui-calendar-dropdown-root:has(.ui-calendar-dropdown:focus-visible),
   .ui-checkbox[data-focus-visible],
   .ui-radio[data-focus-visible],
   .ui-switch[data-focus-visible],

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "32.2.1",
+  "version": "32.3.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/styles/table-layout.css

@@ -541,6 +541,13 @@
     overflow-wrap: anywhere;
   }
 
+  .ui-data-table-ellipsis[data-truncated]:focus-visible [data-truncate],
+  .ui-data-table-ellipsis[data-truncated]:has(:focus-visible) [data-truncate] {
+    overflow: visible;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
   .ui-data-table-surface[data-table-layout="fixed"] [data-slot="table"] {
     table-layout: fixed;
   }