@godxjp/ui 32.2.2 → 32.3.1

package/dist/components/data-entry/toggle-group.js

@@ -137,7 +137,8 @@ const ToggleGroupItem = React.forwardRef(
     const { pill, resolvedAriaLabel } = useCounterPill({
       count,
       overflowCount,
-      showZero,
+      // gh#1275 — a quiet toggle hides a zero count unless asked (see ToggleProp.showZero).
+      showZero: showZero ?? resolvedVariant !== "quiet",
       countLabel,
       ariaLabel
     });

package/dist/components/data-entry/toggle.d.ts

@@ -19,7 +19,11 @@ type ToggleCountFields = {
     count?: number;
     /** Cap for `count` — beyond it the pill shows `{overflowCount}+` (e.g. `99+`). */
     overflowCount?: number;
-    /** Render the pill when `count` is 0. Default `true`, matching Button. */
+    /**
+     * Render the pill when `count` is 0. Default `true`, matching Button — a filter chip saying
+     * "Open 0" is information. `variant="quiet"` defaults to `false` (gh#1275): a quiet toggle is a
+     * mark beside content (a star, a reaction), where a "0" beside an unstarred star is noise.
+     */
     showZero?: boolean;
     /**
      * Localized description of what the count MEANS, folded into the accessible name so the control

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

@@ -121,7 +121,7 @@ const Toggle = React.forwardRef(
     const { pill, resolvedAriaLabel } = useCounterPill({
       count,
       overflowCount,
-      showZero,
+      showZero: showZero ?? variant !== "quiet",
       countLabel,
       ariaLabel
     });

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.2",
+  "version": "32.3.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

@@ -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.2",
+  "version": "32.3.1",
   "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

@@ -155,6 +155,35 @@
     padding-inline-end: 0;
   }
 
+  [data-slot="table-cell"]
+    > :is(
+      [data-slot="button"],
+      [data-slot="avatar"],
+      [data-slot="toggle"],
+      [data-slot="switch"],
+      label[data-slot="checkbox"],
+      [data-slot="badge"],
+      [data-slot="swatch"]
+    ),
+  [data-slot="table-cell"]
+    > :not([data-wrap], .ui-table-actions-content)
+    > :is(
+      [data-slot="button"],
+      [data-slot="avatar"],
+      [data-slot="toggle"],
+      [data-slot="switch"],
+      label[data-slot="checkbox"],
+      [data-slot="badge"],
+      [data-slot="swatch"]
+    ) {
+    vertical-align: middle;
+    margin-block: calc(var(--table-cell-padding-y) * -1);
+  }
+
+  [data-slot="table-head"] label[data-slot="checkbox"] {
+    vertical-align: middle;
+  }
+
   :is([data-slot="table-head"], [data-slot="table-cell"])[data-numeric] {
     font-variant-numeric: tabular-nums;
     text-align: end;
@@ -360,6 +389,35 @@
     flex-shrink: 0;
   }
 
+  [data-slot="table-head"][data-wrap]:not(.text-center):has(> .ui-data-table-sort-button) {
+    padding-inline-end: max(
+      var(--table-cell-space-x, var(--space-section-active)),
+      calc(var(--table-sort-icon-size) + var(--space-inline-xs))
+    );
+  }
+
+  [data-slot="table-head"][data-wrap]:not(.text-center) > .ui-data-table-sort-button {
+    padding-inline-end: calc(var(--table-sort-icon-size) + var(--space-inline-xs));
+    margin-inline-end: calc(-1 * (var(--table-sort-icon-size) + var(--space-inline-xs)));
+    max-inline-size: calc(100% + var(--table-sort-icon-size) + var(--space-inline-xs));
+  }
+
+  [data-slot="table-head"][data-wrap]:not(.text-center)
+    > .ui-data-table-sort-button
+    > .ui-data-table-sort-label {
+    overflow-wrap: anywhere;
+  }
+
+  [data-slot="table-head"][data-wrap]:not(.text-center)
+    > .ui-data-table-sort-button
+    > .ui-data-table-sort-label
+    > .ui-data-table-sort-icon {
+    position: absolute;
+    inset-inline-end: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
   :is(th, td).text-center > .ui-data-table-sort-button > .ui-data-table-sort-label {
     position: relative;