@qijenchen/design-system 0.1.0-beta.13 → 0.1.0-beta.131

package/dist/components/DatePicker/date-picker.js

@@ -2,19 +2,33 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { ArrowRight, Calendar, X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-import { EMPTY_DISPLAY, fieldWrapperStyles, fieldDisplayTextClass, bareInputStyles, nakedCellRowModeAlign } from "../Field/field-wrapper.js";
+import { nakedCellRowModeAlign, fieldWrapperStyles, bareInputStyles, fieldDisplayTextClass } from "../Field/field-wrapper.js";
+import { ScrollArea } from "../ScrollArea/scroll-area.js";
 import { ICON_SIZE, ItemSuffix, ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../Popover/popover.js";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/tooltip.js";
+import { useTruncated } from "../../hooks/use-truncated.js";
+import { TruncatedText } from "../../patterns/element-anatomy/truncated-text.js";
 import { DateGrid } from "../DateGrid/date-grid.js";
 import { Button } from "../Button/button.js";
 import { SurfaceFooter } from "../../patterns/overlay-surface/overlay-surface.js";
-import { useFieldContext } from "../Field/field-context.js";
+import { useFieldContext, useResolvedFieldSize, useResolvedFieldInvalid, useResolvedFieldDisabled, useResolvedFieldMode, useFieldEmptyDisplay, useResolvedFieldVariant, fieldEmptyColorClass } from "../Field/field-context.js";
 import { isoToTimeParts, timePartsToString, TimeColumns } from "../TimePicker/time-columns.js";
+const dtfCache = /* @__PURE__ */ new Map();
+function getDateTimeFormatter(locale, options) {
+  const key = locale + "|" + JSON.stringify(options);
+  let fmt = dtfCache.get(key);
+  if (!fmt) {
+    fmt = new Intl.DateTimeFormat(locale, options);
+    dtfCache.set(key, fmt);
+  }
+  return fmt;
+}
 function formatDate(value, options = {}) {
-  const date = value instanceof Date ? value : new Date(value);
+  const date = value instanceof Date ? value : typeof value === "string" ? isoToDate(value) ?? new Date(value) : new Date(value);
   if (Number.isNaN(date.getTime())) return String(value);
   if (options.formatOptions || options.locale) {
-    return new Intl.DateTimeFormat(options.locale ?? "en-US", options.formatOptions ?? { year: "numeric", month: "2-digit", day: "2-digit" }).format(date);
+    return getDateTimeFormatter(options.locale ?? "en-US", options.formatOptions ?? { year: "numeric", month: "2-digit", day: "2-digit" }).format(date);
   }
   const y = date.getFullYear();
   const m = String(date.getMonth() + 1).padStart(2, "0");
@@ -49,6 +63,7 @@ function parseDateInput(input, opts) {
     const [, y, m, d, hh, mm, ss] = isoDateMatch;
     const date = new Date(Number(y), Number(m) - 1, Number(d), Number(hh ?? 0), Number(mm ?? 0), Number(ss ?? 0));
     if (isNaN(date.getTime()) || date.getMonth() !== Number(m) - 1) return { iso: null, valid: false };
+    if (hh != null && (Number(hh) > 23 || Number(mm) > 59 || Number(ss ?? 0) > 59)) return { iso: null, valid: false };
     const datePart = dateToIso(date);
     if (hh != null && opts.allowTime) {
       const h2 = String(Number(hh)).padStart(2, "0");
@@ -134,10 +149,11 @@ function CalendarTimeContainer({ showTime, showSeconds, calendar, timePanel }) {
 }
 const DatePicker = React.forwardRef(
   ({
-    mode = "edit",
+    mode,
     variant: variantProp,
+    width,
     error: errorProp = false,
-    size = "md",
+    size: sizeProp,
     value,
     onChange,
     placeholder,
@@ -163,10 +179,12 @@ const DatePicker = React.forwardRef(
     ...props
   }, ref) => {
     const fieldCtx = useFieldContext();
-    const error = errorProp || ((fieldCtx == null ? void 0 : fieldCtx.invalid) ?? false);
-    const disabled = disabledProp ?? (fieldCtx == null ? void 0 : fieldCtx.disabled);
-    const resolvedMode = disabled ? "disabled" : mode;
-    const variant = variantProp ?? (fieldCtx == null ? void 0 : fieldCtx.variant) ?? "default";
+    const size = useResolvedFieldSize(sizeProp);
+    const error = useResolvedFieldInvalid(errorProp);
+    const disabled = useResolvedFieldDisabled(disabledProp);
+    const resolvedMode = useResolvedFieldMode({ mode, disabled });
+    const emptyDisplay = useFieldEmptyDisplay();
+    const variant = useResolvedFieldVariant(variantProp);
     const isEditable = resolvedMode === "edit";
     const iconSize = ICON_SIZE[size];
     const needConfirm = needConfirmProp ?? showTime;
@@ -175,12 +193,13 @@ const DatePicker = React.forwardRef(
       setOpenState(next);
       onOpenChange == null ? void 0 : onOpenChange(next);
     }, [onOpenChange]);
+    const popupId = React.useId();
     const [draft, setDraft] = React.useState(value ?? null);
     const resolvedPlaceholder = placeholder ?? (showTime ? "YYYY/MM/DD HH:MM" : "YYYY/MM/DD");
     const accessibleName = ariaLabelProp ?? (ariaLabelledByProp ? void 0 : (fieldCtx == null ? void 0 : fieldCtx.id) ? void 0 : resolvedPlaceholder);
     const lastOpenRef = React.useRef(open);
     React.useEffect(() => {
-      if (!lastOpenRef.current && open) setDraft(value ?? null);
+      if (!open || !lastOpenRef.current) setDraft(value ?? null);
       lastOpenRef.current = open;
     }, [open, value]);
     const displayValue = needConfirm ? draft : value ?? null;
@@ -216,18 +235,22 @@ const DatePicker = React.forwardRef(
         setDraft(iso);
       }
     }, [onChange, showTime]);
-    if (resolvedMode === "display") {
+    const { ref: triggerTruncationRef, isTruncated: triggerTruncated } = useTruncated({
+      deps: [!typeable && displayValue ? displayLive : ""]
+    });
+    const triggerTooltipActive = !typeable && !!displayValue && triggerTruncated && !open;
+    if (resolvedMode === "view") {
       if (!showDisplayEndIcon) {
-        if (!value) return /* @__PURE__ */ jsx("span", { className: cn(fieldDisplayTextClass(size), "text-fg-muted", className), children: EMPTY_DISPLAY });
-        return /* @__PURE__ */ jsx("span", { className: cn(fieldDisplayTextClass(size), "truncate", className), children: displayCommitted });
+        if (!value) return /* @__PURE__ */ jsx("span", { className: cn(fieldDisplayTextClass(size), fieldEmptyColorClass(resolvedMode), className), children: emptyDisplay });
+        return /* @__PURE__ */ jsx(TruncatedText, { className: cn(fieldDisplayTextClass(size), className), children: displayCommitted });
       }
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn(fieldWrapperStyles({ mode: "display", variant, size }), className),
-          "data-field-mode": "display",
+          className: cn(fieldWrapperStyles({ mode: "view", variant, width, size }), className),
+          "data-field-mode": "view",
           children: [
-            /* @__PURE__ */ jsx("span", { className: cn(bareInputStyles, "flex-1 min-w-0 truncate", !value && "text-fg-muted"), children: value ? displayCommitted : EMPTY_DISPLAY }),
+            /* @__PURE__ */ jsx(TruncatedText, { className: cn(bareInputStyles, "flex-1 min-w-0", !value && fieldEmptyColorClass(resolvedMode)), children: value ? displayCommitted : emptyDisplay }),
             /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(Calendar, { size: iconSize, className: "text-fg-muted", "aria-hidden": true }) })
           ]
         }
@@ -237,12 +260,13 @@ const DatePicker = React.forwardRef(
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn(fieldWrapperStyles({ mode: resolvedMode, variant, size }), className),
+          className: cn(fieldWrapperStyles({ mode: resolvedMode, variant, width, size }), className),
           "data-field-mode": resolvedMode,
+          "aria-disabled": resolvedMode === "disabled" ? true : void 0,
           ...props,
           children: [
-            /* @__PURE__ */ jsx("span", { className: cn("flex-1 min-w-0", resolvedMode === "disabled" && "text-fg-disabled"), children: value ? displayCommitted : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY }) }),
-            /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(Calendar, { size: iconSize, className: "text-fg-muted", "aria-hidden": true }) })
+            /* @__PURE__ */ jsx(TruncatedText, { className: cn("flex-1", resolvedMode === "disabled" && "text-fg-disabled"), children: value ? displayCommitted : /* @__PURE__ */ jsx("span", { className: fieldEmptyColorClass(resolvedMode), children: emptyDisplay }) }),
+            (variant === "naked" ? showDisplayEndIcon : resolvedMode === "disabled") && /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(Calendar, { size: iconSize, className: resolvedMode === "disabled" ? "text-fg-disabled" : "text-fg-muted", "aria-hidden": true }) })
           ]
         }
       );
@@ -261,158 +285,199 @@ const DatePicker = React.forwardRef(
       commitDraft(now);
     };
     return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref,
-          id: idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id),
-          role: "combobox",
-          tabIndex: disabled ? -1 : 0,
-          "aria-disabled": disabled || void 0,
-          "aria-label": accessibleName,
-          "aria-labelledby": ariaLabelledByProp ?? (fieldCtx == null ? void 0 : fieldCtx.labelId),
-          "aria-invalid": error || void 0,
-          "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
-          "aria-describedby": ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId),
-          "aria-errormessage": ariaErrorMessageProp ?? (error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0),
-          "aria-haspopup": "dialog",
-          "aria-expanded": open,
-          "data-field-mode": "edit",
-          "data-error": error ? "" : void 0,
-          className: cn(
-            fieldWrapperStyles({ mode: "edit", variant, size }),
-            "text-left cursor-pointer",
-            "focus-visible:outline-none",
-            error && [
-              "border-error hover:border-error-hover",
-              "focus-within:border-error focus-within:hover:border-error"
-            ],
-            className
-          ),
-          ...props,
-          children: [
-            typeable ? (
-              // Issue 10 typed input(2026-05-10):real `<input>` 接 user 鍵盤打字。
-              // Click 在 input 上不 propagate 給外層 popover trigger(避免每次打字都開 popover)。
-              // Calendar icon `<ItemSuffix>` 點才開 popover(Material/Ant typed-date idiom)。
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "text",
-                  className: cn(bareInputStyles, "truncate", !inputDraft && "placeholder:text-fg-muted"),
-                  value: inputDraft,
-                  placeholder: resolvedPlaceholder,
-                  "aria-invalid": inputInvalid || error || void 0,
-                  onChange: (e) => {
-                    setInputDraft(e.target.value);
-                    setInputInvalid(false);
-                  },
-                  onCompositionStart: () => {
-                    composingRef.current = true;
-                  },
-                  onCompositionEnd: () => {
-                    composingRef.current = false;
-                  },
-                  onKeyDown: (e) => {
-                    if (composingRef.current) return;
-                    if (e.key === "Enter") {
-                      e.preventDefault();
-                      handleInputCommit(inputDraft);
-                    }
-                    if (e.key === "Escape") {
-                      setInputDraft(displayLive);
+      /* @__PURE__ */ jsxs(Tooltip, { open: triggerTooltipActive ? void 0 : false, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, type: void 0, children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref,
+            id: typeable ? void 0 : idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id),
+            role: typeable ? void 0 : "combobox",
+            tabIndex: typeable ? void 0 : disabled ? -1 : 0,
+            "aria-disabled": typeable ? void 0 : disabled || void 0,
+            "aria-label": typeable ? void 0 : accessibleName,
+            "aria-labelledby": typeable ? void 0 : ariaLabelledByProp ?? (fieldCtx == null ? void 0 : fieldCtx.labelId),
+            "aria-invalid": typeable ? void 0 : error || void 0,
+            "aria-required": typeable ? void 0 : (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
+            "aria-describedby": typeable ? void 0 : ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId),
+            "aria-errormessage": typeable ? void 0 : ariaErrorMessageProp ?? (error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0),
+            "aria-haspopup": typeable ? void 0 : "dialog",
+            "aria-expanded": typeable ? void 0 : open,
+            "aria-controls": typeable || !open ? void 0 : popupId,
+            "data-field-mode": "edit",
+            "data-error": error ? "" : void 0,
+            onKeyDown: typeable ? void 0 : (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setOpen(true);
+              }
+              if (e.key === "Escape") setOpen(false);
+            },
+            className: cn(
+              fieldWrapperStyles({ mode: "edit", variant, width, size, error }),
+              "text-left cursor-pointer",
+              "focus-visible:outline-none",
+              className
+            ),
+            ...props,
+            children: [
+              typeable ? (
+                // Issue 10 typed input(2026-05-10):real `<input>` 接 user 鍵盤打字。
+                // Click 在 input 上不 propagate 給外層 popover trigger(避免每次打字都開 popover)。
+                // Calendar icon `<ItemSuffix>` 點才開 popover(Material/Ant typed-date idiom)。
+                // a11y(2026-07-14 dim-10 修):input 持完整 combobox 語意(id/name/state,APG
+                // editable-combobox)— 外層 div 已讓位(見上方 role/tabIndex 註解);ArrowDown
+                // 開 popover 補鍵盤開啟路徑(原僅 icon click 可開,鍵盤 user 無入口)。
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    id: idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id),
+                    role: "combobox",
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": open,
+                    "aria-controls": open ? popupId : void 0,
+                    "aria-label": accessibleName,
+                    "aria-labelledby": ariaLabelledByProp ?? (fieldCtx == null ? void 0 : fieldCtx.labelId),
+                    "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
+                    "aria-describedby": ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId),
+                    "aria-errormessage": ariaErrorMessageProp ?? (inputInvalid || error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0),
+                    disabled,
+                    className: cn(bareInputStyles, "truncate", !inputDraft && "placeholder:text-fg-muted"),
+                    value: inputDraft,
+                    placeholder: resolvedPlaceholder,
+                    "aria-invalid": inputInvalid || error || void 0,
+                    onChange: (e) => {
+                      setInputDraft(e.target.value);
                       setInputInvalid(false);
-                      e.preventDefault();
+                    },
+                    onCompositionStart: () => {
+                      composingRef.current = true;
+                    },
+                    onCompositionEnd: () => {
+                      composingRef.current = false;
+                    },
+                    onKeyDown: (e) => {
+                      if (composingRef.current) return;
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        handleInputCommit(inputDraft);
+                      }
+                      if (e.key === "Escape") {
+                        setInputDraft(displayLive);
+                        setInputInvalid(false);
+                        e.preventDefault();
+                      }
+                      if (e.key === "ArrowDown" && !open) {
+                        e.preventDefault();
+                        setOpen(true);
+                      }
+                    },
+                    onBlur: () => {
+                      if (!composingRef.current) handleInputCommit(inputDraft);
+                    },
+                    onClick: (e) => e.stopPropagation()
+                  }
+                )
+              ) : (
+                // ref = 截斷量測點(值 span 是截斷元素;tooltip trigger 在外層 host div,見 triggerTruncationRef 註解)
+                /* @__PURE__ */ jsx("span", { ref: triggerTruncationRef, className: cn(bareInputStyles, "truncate", !displayValue && "text-fg-muted"), children: triggerText })
+              ),
+              showClear && /* @__PURE__ */ jsx(
+                ItemInlineAction,
+                {
+                  size: size ?? "md",
+                  action: {
+                    icon: X,
+                    label: "清除日期",
+                    // i18n-allow: DS default inline-action label
+                    // Clear = 立刻 commit + 同步 draft(對齊 user 體感 / Ant trigger X 慣例)
+                    // 不走 needConfirm「等確定」語義 — X 在 trigger 上是 standard clear affordance,
+                    // 應立刻清空。dual-state 必同步:value('') + draft(null),否則 popover 開
+                    // 著時 displayValue=draft 仍顯示舊值(see line 318: displayValue = needConfirm ? draft : value)。
+                    onClick: (e) => {
+                      e == null ? void 0 : e.stopPropagation();
+                      onChange == null ? void 0 : onChange("");
+                      setDraft(null);
                     }
-                  },
-                  onBlur: () => {
-                    if (!composingRef.current) handleInputCommit(inputDraft);
-                  },
-                  onClick: (e) => e.stopPropagation()
-                }
-              )
-            ) : /* @__PURE__ */ jsx("span", { className: cn(bareInputStyles, "truncate", !displayValue && "text-fg-muted"), children: triggerText }),
-            showClear && /* @__PURE__ */ jsx(
-              ItemInlineAction,
-              {
-                size: size ?? "md",
-                action: {
-                  icon: X,
-                  label: "清除日期",
-                  // i18n-allow: DS default inline-action label
-                  // Clear = 立刻 commit + 同步 draft(對齊 user 體感 / Ant trigger X 慣例)
-                  // 不走 needConfirm「等確定」語義 — X 在 trigger 上是 standard clear affordance,
-                  // 應立刻清空。dual-state 必同步:value('') + draft(null),否則 popover 開
-                  // 著時 displayValue=draft 仍顯示舊值(see line 318: displayValue = needConfirm ? draft : value)。
-                  onClick: (e) => {
-                    e == null ? void 0 : e.stopPropagation();
-                    onChange == null ? void 0 : onChange("");
-                    setDraft(null);
                   }
                 }
-              }
-            ),
-            /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(Calendar, { size: iconSize, className: "text-fg-muted", "aria-hidden": true }) })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxs("div", { role: "dialog", className: "flex flex-col flex-1 min-h-0", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx(
-          CalendarTimeContainer,
-          {
-            showTime,
-            showSeconds,
-            calendar: /* @__PURE__ */ jsx(
-              DateGrid,
-              {
-                mode: "single",
-                selected: displayDate,
-                onSelect: (date) => {
-                  if (!date) return;
-                  if (showTime) {
-                    commitDraft(combineDateAndTime(date, draftTime));
-                  } else {
-                    commitDraft(dateToIso(date));
-                    if (!needConfirm) setOpen(false);
-                  }
-                },
-                defaultMonth: displayDate ?? void 0,
-                autoFocus: true
-              }
-            ),
-            timePanel: /* @__PURE__ */ jsx(
-              TimePickerSidePanel,
+              ),
+              /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(Calendar, { size: iconSize, className: "text-fg-muted", "aria-hidden": true }) })
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: triggerTooltipActive ? displayLive : null })
+      ] }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          id: popupId,
+          className: "w-auto p-0",
+          align: "start",
+          "aria-label": "日期選擇",
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [
+            /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(
+              CalendarTimeContainer,
               {
-                value: draftTime,
-                onChange: (time) => {
-                  const target = draftDate ?? /* @__PURE__ */ new Date();
-                  commitDraft(combineDateAndTime(target, time));
-                },
+                showTime,
                 showSeconds,
-                minuteStep,
-                secondStep
+                calendar: /* @__PURE__ */ jsx(
+                  DateGrid,
+                  {
+                    mode: "single",
+                    selected: displayDate,
+                    onSelect: (date) => {
+                      if (!date) return;
+                      if (showTime) {
+                        commitDraft(combineDateAndTime(date, draftTime));
+                      } else {
+                        commitDraft(dateToIso(date));
+                        if (!needConfirm) setOpen(false);
+                      }
+                    },
+                    defaultMonth: displayDate ?? void 0,
+                    autoFocus: true
+                  }
+                ),
+                timePanel: /* @__PURE__ */ jsx(
+                  TimePickerSidePanel,
+                  {
+                    value: draftTime,
+                    onChange: (time) => {
+                      const target = draftDate ?? /* @__PURE__ */ new Date();
+                      commitDraft(combineDateAndTime(target, time));
+                    },
+                    showSeconds,
+                    minuteStep,
+                    secondStep
+                  }
+                )
               }
-            )
-          }
-        ) }),
-        showTime && // Footer:消費 SurfaceFooter SSOT(border-t + canonical px-loose py-tight padding,
-        // 不再 hand-coded p-2 / Separator / ml-auto wrapper 三層垃圾)。
-        // 「此刻」加 mr-auto 把後面 button 推右(對齊 Ant `marginInlineStart: auto` on OK)。
-        /* @__PURE__ */ jsxs(SurfaceFooter, { children: [
-          /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: handleNow, className: "mr-auto", children: "此刻" }),
-          needConfirm ? /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: handleConfirm, disabled: !draft, children: "確定" }) : /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: () => setOpen(false), children: "關閉" })
-        ] })
-      ] }) })
+            ) }),
+            (showTime || needConfirm) && // Footer:消費 SurfaceFooter SSOT(border-t + canonical px-loose py-tight padding,
+            // 不再 hand-coded p-2 / Separator / ml-auto wrapper 三層垃圾)。
+            // 「此刻」加 mr-auto 把後面 button 推右(對齊 Ant `marginInlineStart: auto` on OK)。
+            // 2026-07-05 D4:gate 由 `showTime` 改 `(showTime || needConfirm)` 對齊 Range(:1068)—
+            // date-only `needConfirm` 時 onSelect 只寫 draft 且不關 popover,footer「確定」是唯一
+            // commit 路徑,原 gate 漏渲 footer = draft 永遠無法 commit 的死路。
+            /* @__PURE__ */ jsxs(SurfaceFooter, { children: [
+              /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: handleNow, className: "mr-auto", children: "此刻" }),
+              needConfirm ? /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: handleConfirm, disabled: !draft, children: "確定" }) : /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: () => setOpen(false), children: "關閉" })
+            ] })
+          ] })
+        }
+      )
     ] });
   }
 );
 DatePicker.displayName = "DatePicker";
 const DatePickerRange = React.forwardRef(
   ({
-    mode = "edit",
+    mode,
     variant: variantProp,
+    width,
     error: errorProp = false,
-    size = "md",
+    size: sizeProp,
     value,
     onChange,
     placeholder,
@@ -432,10 +497,12 @@ const DatePickerRange = React.forwardRef(
     ...props
   }, ref) => {
     const fieldCtx = useFieldContext();
-    const error = errorProp || ((fieldCtx == null ? void 0 : fieldCtx.invalid) ?? false);
-    const disabled = disabledProp ?? (fieldCtx == null ? void 0 : fieldCtx.disabled);
-    const resolvedMode = disabled ? "disabled" : mode;
-    const variant = variantProp ?? (fieldCtx == null ? void 0 : fieldCtx.variant) ?? "default";
+    const size = useResolvedFieldSize(sizeProp);
+    const error = useResolvedFieldInvalid(errorProp);
+    const disabled = useResolvedFieldDisabled(disabledProp);
+    const resolvedMode = useResolvedFieldMode({ mode, disabled });
+    const emptyDisplay = useFieldEmptyDisplay();
+    const variant = useResolvedFieldVariant(variantProp);
     const isEditable = resolvedMode === "edit";
     const iconSize = ICON_SIZE[size];
     const needConfirm = needConfirmProp ?? showTime;
@@ -443,9 +510,12 @@ const DatePickerRange = React.forwardRef(
     const [open, setOpen] = React.useState(false);
     const [draft, setDraft] = React.useState(value ?? [null, null]);
     const [activeEnd, setActiveEnd] = React.useState("start");
+    const startBtnRef = React.useRef(null);
+    const endBtnRef = React.useRef(null);
+    const hasInteractedOutsideRef = React.useRef(false);
     const lastOpenRef = React.useRef(open);
     React.useEffect(() => {
-      if (!lastOpenRef.current && open) setDraft(value ?? [null, null]);
+      if (!open || !lastOpenRef.current) setDraft(value ?? [null, null]);
       lastOpenRef.current = open;
     }, [open, value]);
     const startIso = (needConfirm ? draft[0] : value == null ? void 0 : value[0]) ?? null;
@@ -456,6 +526,14 @@ const DatePickerRange = React.forwardRef(
     const showClear = clearable && hasValue && isEditable;
     const startText = startIso ? formatDateOrDateTime(startIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[0];
     const endText = endIso ? formatDateOrDateTime(endIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[1];
+    const { ref: startTruncationRef, isTruncated: startTruncated } = useTruncated({
+      deps: [startIso ? startText : ""]
+    });
+    const { ref: endTruncationRef, isTruncated: endTruncated } = useTruncated({
+      deps: [endIso ? endText : ""]
+    });
+    const startTooltipActive = !!startIso && startTruncated && !open;
+    const endTooltipActive = !!endIso && endTruncated && !open;
     const activeIso = activeEnd === "start" ? startIso : endIso;
     const activeDate = activeEnd === "start" ? startDate : endDate;
     const activeTime = isoToTimeParts(activeIso) ?? { hours: 0, minutes: 0, seconds: 0 };
@@ -516,13 +594,13 @@ const DatePickerRange = React.forwardRef(
       }
       return false;
     }, [activeEnd, startDate, endDate]);
-    if (resolvedMode === "display") {
+    if (resolvedMode === "view") {
       const hasAny = !!(startIso || endIso);
-      if (!hasAny) return /* @__PURE__ */ jsx("span", { className: cn("text-fg-muted", className), children: EMPTY_DISPLAY });
+      if (!hasAny) return /* @__PURE__ */ jsx("span", { className: cn(fieldEmptyColorClass(resolvedMode), className), children: emptyDisplay });
       return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center min-w-0", nakedCellRowModeAlign, className), children: [
-        /* @__PURE__ */ jsx("span", { className: cn("truncate", !startIso && "text-fg-muted"), children: startIso ? formatDateOrDateTime(startIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[0] }),
+        /* @__PURE__ */ jsx(TruncatedText, { className: cn(!startIso && "text-fg-muted"), children: startIso ? formatDateOrDateTime(startIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[0] }),
         /* @__PURE__ */ jsx(ArrowRight, { size: iconSize, className: "shrink-0 text-fg-muted mx-2", "aria-hidden": true }),
-        /* @__PURE__ */ jsx("span", { className: cn("truncate", !endIso && "text-fg-muted"), children: endIso ? formatDateOrDateTime(endIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[1] })
+        /* @__PURE__ */ jsx(TruncatedText, { className: cn(!endIso && "text-fg-muted"), children: endIso ? formatDateOrDateTime(endIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[1] })
       ] });
     }
     if (!isEditable) {
@@ -530,14 +608,15 @@ const DatePickerRange = React.forwardRef(
         "div",
         {
           ref,
-          className: cn(fieldWrapperStyles({ mode: resolvedMode, variant, size }), className),
+          className: cn(fieldWrapperStyles({ mode: resolvedMode, variant, width, size }), className),
           "data-field-mode": resolvedMode,
+          "aria-disabled": resolvedMode === "disabled" ? true : void 0,
           ...props,
           children: [
-            /* @__PURE__ */ jsx("span", { className: cn("flex-1 min-w-0 truncate", !startIso && "text-fg-muted", resolvedMode === "disabled" && "text-fg-disabled"), children: startIso ? formatDateOrDateTime(startIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[0] }),
-            /* @__PURE__ */ jsx(ArrowRight, { size: iconSize, className: "shrink-0 text-fg-muted mx-2", "aria-hidden": true }),
-            /* @__PURE__ */ jsx("span", { className: cn("flex-1 min-w-0 truncate", !endIso && "text-fg-muted", resolvedMode === "disabled" && "text-fg-disabled"), children: endIso ? formatDateOrDateTime(endIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[1] }),
-            /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(Calendar, { size: iconSize, className: "text-fg-muted", "aria-hidden": true }) })
+            /* @__PURE__ */ jsx(TruncatedText, { className: cn("flex-1", !startIso && "text-fg-muted", resolvedMode === "disabled" && "text-fg-disabled"), children: startIso ? formatDateOrDateTime(startIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[0] }),
+            /* @__PURE__ */ jsx(ArrowRight, { size: iconSize, className: cn("shrink-0 mx-2", resolvedMode === "disabled" ? "text-fg-disabled" : "text-fg-muted"), "aria-hidden": true }),
+            /* @__PURE__ */ jsx(TruncatedText, { className: cn("flex-1", !endIso && "text-fg-muted", resolvedMode === "disabled" && "text-fg-disabled"), children: endIso ? formatDateOrDateTime(endIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[1] }),
+            resolvedMode === "disabled" && /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(Calendar, { size: iconSize, className: "text-fg-disabled", "aria-hidden": true }) })
           ]
         }
       );
@@ -556,53 +635,57 @@ const DatePickerRange = React.forwardRef(
           "data-error": error ? "" : void 0,
           "data-state": open ? "open" : "closed",
           className: cn(
-            fieldWrapperStyles({ mode: "edit", size }),
+            fieldWrapperStyles({ mode: "edit", width, size, error }),
             "cursor-text",
-            error && [
-              "border-error hover:border-error-hover",
-              "focus-within:border-error focus-within:hover:border-error"
-            ],
             className
           ),
           ...props,
           children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => openWithActive("start"),
-                "data-active-end": open && activeEnd === "start" ? "true" : void 0,
-                "aria-label": resolvedPlaceholder[0],
-                "aria-haspopup": "dialog",
-                "aria-expanded": open && activeEnd === "start",
-                className: cn(
-                  bareInputStyles,
-                  "truncate text-left cursor-pointer focus-visible:outline-none",
-                  "data-[active-end=true]:underline decoration-primary underline-offset-4 decoration-2",
-                  !startIso && "text-fg-muted"
-                ),
-                children: startText
-              }
-            ),
+            /* @__PURE__ */ jsxs(Tooltip, { open: startTooltipActive ? void 0 : false, children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  ref: startBtnRef,
+                  onClick: () => openWithActive("start"),
+                  "data-active-end": open && activeEnd === "start" ? "true" : void 0,
+                  "aria-label": resolvedPlaceholder[0],
+                  "aria-haspopup": "dialog",
+                  "aria-expanded": open && activeEnd === "start",
+                  className: cn(
+                    bareInputStyles,
+                    "truncate text-left cursor-pointer focus-visible:outline-none",
+                    "data-[active-end=true]:underline decoration-primary underline-offset-4 decoration-2",
+                    !startIso && "text-fg-muted"
+                  ),
+                  children: /* @__PURE__ */ jsx("span", { ref: startTruncationRef, className: "block truncate", children: startText })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: startTooltipActive ? startText : null })
+            ] }),
             /* @__PURE__ */ jsx(ArrowRight, { size: iconSize, className: "shrink-0 text-fg-muted mx-2", "aria-hidden": true }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => openWithActive("end"),
-                "data-active-end": open && activeEnd === "end" ? "true" : void 0,
-                "aria-label": resolvedPlaceholder[1],
-                "aria-haspopup": "dialog",
-                "aria-expanded": open && activeEnd === "end",
-                className: cn(
-                  bareInputStyles,
-                  "truncate text-left cursor-pointer focus-visible:outline-none",
-                  "data-[active-end=true]:underline decoration-primary underline-offset-4 decoration-2",
-                  !endIso && "text-fg-muted"
-                ),
-                children: endText
-              }
-            ),
+            /* @__PURE__ */ jsxs(Tooltip, { open: endTooltipActive ? void 0 : false, children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  ref: endBtnRef,
+                  onClick: () => openWithActive("end"),
+                  "data-active-end": open && activeEnd === "end" ? "true" : void 0,
+                  "aria-label": resolvedPlaceholder[1],
+                  "aria-haspopup": "dialog",
+                  "aria-expanded": open && activeEnd === "end",
+                  className: cn(
+                    bareInputStyles,
+                    "truncate text-left cursor-pointer focus-visible:outline-none",
+                    "data-[active-end=true]:underline decoration-primary underline-offset-4 decoration-2",
+                    !endIso && "text-fg-muted"
+                  ),
+                  children: /* @__PURE__ */ jsx("span", { ref: endTruncationRef, className: "block truncate", children: endText })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: endTooltipActive ? endText : null })
+            ] }),
             showClear && /* @__PURE__ */ jsx(
               ItemInlineAction,
               {
@@ -619,104 +702,128 @@ const DatePickerRange = React.forwardRef(
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxs("div", { role: "dialog", "aria-label": "日期區間選擇", className: "flex flex-col flex-1 min-h-0", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx(
-          CalendarTimeContainer,
-          {
-            showTime,
-            showSeconds,
-            calendar: /* @__PURE__ */ jsx(
-              DateGrid,
-              {
-                mode: "single",
-                selected: activeDate,
-                onSelect: (date) => {
-                  if (!date) return;
-                  if (isOutOfRangeOrder(date)) return;
-                  const preservedTime = isoToTimeParts(activeEnd === "start" ? draft[0] : draft[1]) ?? activeTime;
-                  const nextIso = showTime ? combineDateAndTime(date, preservedTime) : dateToIso(date);
-                  const nextDraft = activeEnd === "start" ? [nextIso, draft[1]] : [draft[0], nextIso];
-                  commitRange(nextDraft);
-                  if (!showTime) {
-                    if (activeEnd === "start") {
-                      setActiveEnd("end");
-                      if (!needConfirm && nextDraft[0] && nextDraft[1]) setOpen(false);
-                    } else if (!needConfirm && nextDraft[0] && nextDraft[1]) {
-                      setOpen(false);
-                    }
-                  }
-                },
-                modifiers: showTime ? {} : rangeModifiers,
-                modifiersClassNames: {
-                  // ── Range visual canonical(2026-05-03 v8 stadium pattern)──
-                  // v5 修「白色破圖」用 pseudo 蓋全 cell 矩形,但新副作用:button 圓比矩形小,
-                  // 4 corner triangle 區域 grey 凸出圓外(user 2026-05-03 抓到「凸出去」)。
-                  // v8 對齊 Ant `cell-range-start::before { border-radius: 9999px 0 0 9999px }`:
-                  // rangeStart pseudo 加 `rounded-l-full` → pseudo 變「左半圓 + 右矩形」stadium
-                  // 左半圓 EXACTLY OVERLAY button 圓的左半弧(同 center 同 radius 14)→ 無縫
-                  // 右側矩形 bridge 2px to middle → 跟 middle pseudo 連續
-                  // Cell 的 top-left + bottom-left corner triangle:pseudo 不蓋 + button 不蓋 →
-                  // popover white 顯露(乾淨 breathing)
-                  rangeStart: cn(
-                    "[&>button]:!bg-primary [&>button]:!text-on-emphasis [&>button]:hover:!ring-0",
-                    "before:content-[''] before:absolute before:inset-y-0",
-                    "before:left-0 before:-right-[2px]",
-                    "before:bg-neutral-selected before:pointer-events-none",
-                    "before:rounded-l-full"
-                    // ← stadium 左半圓 matches button 圓的左半弧
-                  ),
-                  rangeEnd: cn(
-                    "[&>button]:!bg-primary [&>button]:!text-on-emphasis [&>button]:hover:!ring-0",
-                    "before:content-[''] before:absolute before:inset-y-0",
-                    "before:-left-[2px] before:right-0",
-                    "before:bg-neutral-selected before:pointer-events-none",
-                    "before:rounded-r-full"
-                    // ← 鏡像
-                  ),
-                  rangeMiddle: cn(
-                    "before:content-[''] before:absolute before:inset-y-0 before:-inset-x-[2px]",
-                    "before:bg-neutral-selected before:pointer-events-none",
-                    "[&>button]:!bg-transparent [&>button]:!text-foreground"
-                  )
-                },
-                disabled: isOutOfRangeOrder,
-                numberOfMonths: showTime ? 1 : 2,
-                defaultMonth: activeDate ?? startDate ?? endDate ?? void 0,
-                autoFocus: true
-              }
-            ),
-            timePanel: /* @__PURE__ */ jsx(
-              TimePickerSidePanel,
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          className: "w-auto p-0",
+          align: "start",
+          "aria-label": "日期區間選擇",
+          onInteractOutside: () => {
+            hasInteractedOutsideRef.current = true;
+          },
+          onCloseAutoFocus: (e) => {
+            var _a;
+            e.preventDefault();
+            if (!hasInteractedOutsideRef.current) {
+              (_a = (activeEnd === "start" ? startBtnRef : endBtnRef).current) == null ? void 0 : _a.focus();
+            }
+            hasInteractedOutsideRef.current = false;
+          },
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [
+            /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(
+              CalendarTimeContainer,
               {
-                value: activeTime,
-                onChange: (time) => {
-                  const target = activeDate ?? /* @__PURE__ */ new Date();
-                  setActive(combineDateAndTime(target, time));
-                },
+                showTime,
                 showSeconds,
-                minuteStep,
-                secondStep
+                calendar: /* @__PURE__ */ jsx(
+                  DateGrid,
+                  {
+                    mode: "single",
+                    selected: activeDate,
+                    onSelect: (date) => {
+                      if (!date) return;
+                      if (isOutOfRangeOrder(date)) return;
+                      const preservedTime = isoToTimeParts(activeEnd === "start" ? draft[0] : draft[1]) ?? activeTime;
+                      const nextIso = showTime ? combineDateAndTime(date, preservedTime) : dateToIso(date);
+                      const nextDraft = activeEnd === "start" ? [nextIso, draft[1]] : [draft[0], nextIso];
+                      commitRange(nextDraft);
+                      if (!showTime) {
+                        if (activeEnd === "start") {
+                          setActiveEnd("end");
+                          if (!needConfirm && nextDraft[0] && nextDraft[1]) setOpen(false);
+                        } else if (!needConfirm && nextDraft[0] && nextDraft[1]) {
+                          setOpen(false);
+                        }
+                      }
+                    },
+                    modifiers: showTime ? {} : rangeModifiers,
+                    modifiersClassNames: {
+                      // ── Range visual canonical(2026-05-03 v8 stadium pattern)──
+                      // v5 修「白色破圖」用 pseudo 蓋全 cell 矩形,但新副作用:button 圓比矩形小,
+                      // 4 corner triangle 區域 grey 凸出圓外(user 2026-05-03 抓到「凸出去」)。
+                      // v8 對齊 Ant `cell-range-start::before { border-radius: 9999px 0 0 9999px }`:
+                      // rangeStart pseudo 加 `rounded-l-full` → pseudo 變「左半圓 + 右矩形」stadium
+                      // 左半圓 EXACTLY OVERLAY button 圓的左半弧(同 center 同 radius 14)→ 無縫
+                      // 右側矩形 bridge 2px to middle → 跟 middle pseudo 連續
+                      // Cell 的 top-left + bottom-left corner triangle:pseudo 不蓋 + button 不蓋 →
+                      // popover white 顯露(乾淨 breathing)
+                      rangeStart: cn(
+                        // 2026-08-11 修偏移:!bg-primary 連 hover 也壓死 → 端點 hover 零回饋,違反
+                        // date-grid.spec.md:119「選中日 hover 升階 primary→primary-hover」(端點可再點
+                        // 重選範圍 = 可取消家族,依 user 原則該有回饋)。補顯式 hover 升階(同 !important,
+                        // hover 變體更特定故 hover 時勝出;ring-0 壓制照舊,spec:118)。
+                        "[&>button]:!bg-primary [&>button]:hover:!bg-primary-hover [&>button]:!text-on-emphasis [&>button]:hover:!ring-0",
+                        "before:content-[''] before:absolute before:inset-y-0",
+                        "before:left-0 before:-right-[2px]",
+                        "before:bg-neutral-selected before:pointer-events-none",
+                        "before:rounded-l-full"
+                        // ← stadium 左半圓 matches button 圓的左半弧
+                      ),
+                      rangeEnd: cn(
+                        // 2026-08-11:同 rangeStart — 補 hover 升階(spec:119),鏡像。
+                        "[&>button]:!bg-primary [&>button]:hover:!bg-primary-hover [&>button]:!text-on-emphasis [&>button]:hover:!ring-0",
+                        "before:content-[''] before:absolute before:inset-y-0",
+                        "before:-left-[2px] before:right-0",
+                        "before:bg-neutral-selected before:pointer-events-none",
+                        "before:rounded-r-full"
+                        // ← 鏡像
+                      ),
+                      rangeMiddle: cn(
+                        "before:content-[''] before:absolute before:inset-y-0 before:-inset-x-[2px]",
+                        "before:bg-neutral-selected before:pointer-events-none",
+                        "[&>button]:!bg-transparent [&>button]:!text-foreground"
+                      )
+                    },
+                    disabled: isOutOfRangeOrder,
+                    numberOfMonths: showTime ? 1 : 2,
+                    defaultMonth: activeDate ?? startDate ?? endDate ?? void 0,
+                    autoFocus: true
+                  }
+                ),
+                timePanel: /* @__PURE__ */ jsx(
+                  TimePickerSidePanel,
+                  {
+                    value: activeTime,
+                    onChange: (time) => {
+                      const target = activeDate ?? /* @__PURE__ */ new Date();
+                      setActive(combineDateAndTime(target, time));
+                    },
+                    showSeconds,
+                    minuteStep,
+                    secondStep
+                  }
+                )
               }
-            )
-          }
-        ) }),
-        (showTime || needConfirm) && // Footer 消費 SurfaceFooter SSOT(border-t + canonical px-loose py-tight)。
-        // showTime Range 無「此刻」(對齊 Ant `showNow={multiple ? false : showNow}`)→ 只有 確定 走 justify-end。
-        // date-only Range needConfirm:左 此刻(mr-auto)+ 右 確定。
-        /* @__PURE__ */ jsxs(SurfaceFooter, { children: [
-          !showTime && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: handleNow, className: "mr-auto", children: "此刻" }),
-          needConfirm ? /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "primary",
-              size: "sm",
-              onClick: handleConfirm,
-              disabled: showTime ? activeEnd === "start" ? !draft[0] : !draft[0] || !draft[1] : !draft[0] || !draft[1],
-              children: "確定"
-            }
-          ) : /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: () => setOpen(false), children: "關閉" })
-        ] })
-      ] }) })
+            ) }),
+            (showTime || needConfirm) && // Footer 消費 SurfaceFooter SSOT(border-t + canonical px-loose py-tight)。
+            // showTime Range 無「此刻」(對齊 Ant `showNow={multiple ? false : showNow}`)→ 只有 確定 走 justify-end。
+            // date-only Range needConfirm:左 此刻(mr-auto)+ 右 確定。
+            /* @__PURE__ */ jsxs(SurfaceFooter, { children: [
+              !showTime && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: handleNow, className: "mr-auto", children: "此刻" }),
+              needConfirm ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "primary",
+                  size: "sm",
+                  onClick: handleConfirm,
+                  disabled: showTime ? activeEnd === "start" ? !draft[0] : !draft[0] || !draft[1] : !draft[0] || !draft[1],
+                  children: "確定"
+                }
+              ) : /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: () => setOpen(false), children: "關閉" })
+            ] })
+          ] })
+        }
+      )
     ] });
   }
 );
@@ -727,9 +834,11 @@ const datePickerMeta = {
   family: 4,
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 'selected' = range 帶持續選中(before:bg-neutral-selected,本檔自有);'active' 移除 — 全檔無按壓
+  // 視覺(data-active-end 是定位 attr 非按壓 token;2026-07-07 詞彙統一 DS-wide 交叉掃補修)。
+  states: ["default", "hover", "selected", "focus-visible", "disabled"],
   tokens: {
-    bg: [],
+    bg: ["bg-neutral-selected"],
     fg: ["text-fg-disabled", "text-fg-muted"],
     ring: []
   }