@qijenchen/design-system 0.1.0-beta.83 → 0.1.0-beta.85

package/dist/components/DataTable/lib/column-meta.js

@@ -0,0 +1,25 @@
+function getColumnId(col) {
+  if ("id" in col && typeof col.id === "string" && col.id) return col.id;
+  if ("accessorKey" in col && (typeof col.accessorKey === "string" || typeof col.accessorKey === "number")) {
+    return String(col.accessorKey);
+  }
+  return void 0;
+}
+function getColumnHeader(col) {
+  return "header" in col ? col.header : void 0;
+}
+function getColumnMeta(col) {
+  return col.meta;
+}
+function getColumnLabel(col, fallbackId) {
+  const header = getColumnHeader(col);
+  if (typeof header === "string") return header;
+  return fallbackId ?? getColumnId(col) ?? "";
+}
+export {
+  getColumnHeader,
+  getColumnId,
+  getColumnLabel,
+  getColumnMeta
+};
+//# sourceMappingURL=column-meta.js.map

package/dist/components/DataTable/lib/column-meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-meta.js","sources":["../../../../src/components/DataTable/lib/column-meta.ts"],"sourcesContent":["/**\n * column-meta — TanStack ColumnDef typed accessor helpers.\n *\n * **Scope:Internal-only — DataTable 自用,非 public API**(本檔不 re-export 出\n * `data-table-filter-panel.tsx` / `data-table.tsx`,consumer 透過 panel / sort-manager\n * 間接使用)。M21 (a) classification:lib/ folder 慣例 = internal helper。\n *\n * 為什麼存在:`ColumnDef<T, V>` 是 discriminated union(AccessorKey / AccessorFn /\n * Display / Group),每個 variant 有不同欄位,直接 `col.id` 在型別上不安全。\n * 既有 consumer 用 `(col as any).id` cast,3+ 處 hard-code = M17 違反。\n * 抽成 typed helper 統一型別 narrowing,消除 `any` cast。\n *\n * Why not annotate each `as any`:DRY + single SSOT for column field access。\n * 任一 helper 行為變更(e.g. 加 fallback 邏輯)只需改一處。\n *\n * 對齊 mindset #2 「優先消費既有」+ M17「同 hard-code 在 3+ consumer 必抽」。\n */\n\nimport type { ColumnDef, ColumnMeta, RowData } from '@tanstack/react-table'\n\n/**\n * 取 column 的 stable identifier。\n *\n * 解析順序對齊 TanStack 內部行為:\n * 1. `col.id`(顯式設定優先)\n * 2. `col.accessorKey`(string version,fallback for accessor columns)\n *\n * 都無 → return undefined(display column 無 accessorKey 且未設 id)。\n */\nexport function getColumnId<T extends RowData>(\n  col: ColumnDef<T, unknown>,\n): string | undefined {\n  if ('id' in col && typeof col.id === 'string' && col.id) return col.id\n  if (\n    'accessorKey' in col &&\n    (typeof col.accessorKey === 'string' || typeof col.accessorKey === 'number')\n  ) {\n    return String(col.accessorKey)\n  }\n  return undefined\n}\n\n/**\n * 取 column 的 header 定義(可為 string / React node / function — TanStack 規約)。\n *\n * 注意:本 helper 不執行 header function。consumer 若需 rendered string,\n * 自行 narrow + call,或用 TanStack `flexRender` API。\n */\nexport function getColumnHeader<T extends RowData>(\n  col: ColumnDef<T, unknown>,\n): ColumnDef<T, unknown>['header'] {\n  return 'header' in col ? col.header : undefined\n}\n\n/**\n * 取 column 的 meta(本 DS 的 ColumnMeta 已 extend 加上 type / align / wrap 等)。\n */\nexport function getColumnMeta<T extends RowData>(\n  col: ColumnDef<T, unknown>,\n): ColumnMeta<T, unknown> | undefined {\n  return col.meta\n}\n\n/**\n * 從 header 定義抽 plain string label(filter / sort UI 顯示用)。\n *\n * 處理 3 種 header 形式:\n * - string → 直接 return\n * - function → 不執行(避過 React render context),fallback id\n * - undefined / 其他 → fallback id\n */\nexport function getColumnLabel<T extends RowData>(\n  col: ColumnDef<T, unknown>,\n  fallbackId?: string,\n): string {\n  const header = getColumnHeader(col)\n  if (typeof header === 'string') return header\n  return fallbackId ?? getColumnId(col) ?? ''\n}\n"],"names":[],"mappings":"AA6BO,SAAS,YACd,KACoB;AACpB,MAAI,QAAQ,OAAO,OAAO,IAAI,OAAO,YAAY,IAAI,GAAI,QAAO,IAAI;AACpE,MACE,iBAAiB,QAChB,OAAO,IAAI,gBAAgB,YAAY,OAAO,IAAI,gBAAgB,WACnE;AACA,WAAO,OAAO,IAAI,WAAW;AAAA,EAC/B;AACA,SAAO;AACT;AAQO,SAAS,gBACd,KACiC;AACjC,SAAO,YAAY,MAAM,IAAI,SAAS;AACxC;AAKO,SAAS,cACd,KACoC;AACpC,SAAO,IAAI;AACb;AAUO,SAAS,eACd,KACA,YACQ;AACR,QAAM,SAAS,gBAAgB,GAAG;AAClC,MAAI,OAAO,WAAW,SAAU,QAAO;AACvC,SAAO,cAAc,YAAY,GAAG,KAAK;AAC3C;"}

package/dist/components/DateGrid/date-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-grid.d.ts","sourceRoot":"","sources":["../../../src/components/DateGrid/date-grid.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,OAAO,4BAA4B,CAAA;AAKnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AAUlE,QAAA,MAAM,QAAQ,kHAgLZ,CAAA;AAKF,eAAO,MAAM,YAAY;;;;;;;;;;;CAiBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"date-grid.d.ts","sourceRoot":"","sources":["../../../src/components/DateGrid/date-grid.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,OAAO,4BAA4B,CAAA;AAKnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AAUlE,QAAA,MAAM,QAAQ,kHAkLZ,CAAA;AAKF,eAAO,MAAM,YAAY;;;;;;;;;;;CAiBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/DateGrid/date-grid.js

@@ -45,7 +45,9 @@ const DateGrid = React.forwardRef(function DateGrid2({
           // weekday 列標跟 caption「April 2026」同視覺權重(都屬 calendar header 區),
           // 不弱化(撤銷 v3 fg-secondary 的 mistake)。對齊 icon-only Button 預設 neutral-9 一致。
           "text-foreground text-body font-medium",
-          "h-7 align-middle text-center"
+          // h-field-sm(md=28/lg=32 隨 density):對齊 day cell 同 token 同 row cadence
+          // (spec:127 既定 canonical;Ant 36/36、Carbon 40/40 header/day 同節奏;2026-07-14 修 h-7 固定 drift)
+          "h-[var(--field-height-sm)] align-middle text-center"
         ),
         week: "",
         // tr default

package/dist/components/DateGrid/date-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-grid.js","sources":["../../../src/components/DateGrid/date-grid.tsx"],"sourcesContent":["/**\n * @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 DatePicker wrap 消費,end-user app 請用 wrapper 元件。\n */\n// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n// M22 retrofit DONE 2026-05-03 v11(real source URLs added inline at lines 38 + 111)\nimport * as React from 'react'\nimport { DayPicker } from 'react-day-picker'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport 'react-day-picker/style.css'\n\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\n\n/**\n * DateGrid — DayPicker 包裝,用本 DS token 覆寫預設視覺。\n *\n * ── 視覺對照(ref/datepicker.png,2026-04-21 rewrite)──\n *\n * | 區塊 | 規格 |\n * |------|------|\n * | Outer padding | `p-3`(12px 四邊對稱) |\n * | Nav + Month caption row | h-field-xs(24px)單行,chevron(xs)分居左右 / 月份置中垂直對齊 |\n * | Nav → Weekday gap | 12px(month_caption mb-3) |\n * | Weekday | text-body(14px)text-foreground font-medium(neutral-9,同 caption 權重;撤銷 v3 fg-secondary) |\n * | Cell gap(水平 + 垂直)| 4px(table-native border-separate border-spacing-1;非 gap — grid 會 break,見下方 v7 註) |\n * | Day cell size | h-field-sm w-[var(--field-height-sm)](28×28 md / 32×32 lg) |\n * | Day button | rounded-full 填滿 cell |\n *\n * ── 五種 cell state canonical ──\n *\n * | State | 視覺 | Token |\n * |-------|------|-------|\n * | today | 數字下方藍色短桿 | `::after` pseudo bar(bg-primary,w-40% h-1.5px rounded-full,貼近數字底)|\n * | disabled | 灰底圓圈 + disabled 字色(跟 Button disabled 一致) | [&>button]:bg-disabled [&>button]:text-fg-disabled rounded-full |\n * | outside(非本月) | text-fg-muted(neutral-7) | [&>button]:text-fg-muted |\n * | selected / range 端點 | 藍底白字圓 | [&>button]:bg-primary [&>button]:text-on-emphasis rounded-full |\n * | range middle | 灰底矩形 track(bg-neutral-selected = neutral-2),**高度 = cell 高度**(28×28 @ md) | before pseudo: `inset-y-0 -inset-x-[2px]` |\n * | range start/end 半圓 track | 左/右半圓 + selected 圓疊在上,**圓半徑 = button 半徑** | before pseudo: `rounded-l/r-full` + start `left-0 -right-[2px]` / end `-left-[2px] right-0`(向 middle 外擴 2px bridge gap)|\n * | hover(未選中) | 藍圈 outline | hover:ring-[1.5px] hover:ring-primary-hover(2026-07-07 統一:瞬時 hover = hover 階)|\n *\n * ── Range track 高度 canonical(2026-05-03 v6,M8 4 家對照)──\n * Ant Design([picker source](https://github.com/ant-design/ant-design/blob/master/components/date-picker/style/panel.ts))/ Material X DateRangePicker([mui-x source](https://github.com/mui/mui-x/tree/master/packages/x-date-pickers-pro/src/DateRangeCalendar))/ Apple Calendar `@benchmark-unverified`(closed-source)/ Google Calendar `@benchmark-unverified`(closed-source)共識:\n * **range track 為連續 stadium**,跟 selected 圓緊貼成連續 pill。\n * 實作:bg 走 `before:` pseudo 用 `inset-y-0`(滿 cell 高度)+ `-inset-x-[2px]`\n * (左右各外擴 2px bridge 相鄰 cell gap)→ 相鄰 cell 的 pseudo 連續銜接 = 橫向連貫;\n * day cell 本身就是 button 容器(L102-105 day = h-field-sm cell),故滿 cell 高 = 滿 button 高。\n *\n * ── Range track 色用 bg-neutral-selected(= neutral-2)──\n * 對齊 TimePicker 選中項目樣式(semantic `--neutral-selected` = neutral-2,semantic.css L84/L340)。\n * 同 DS 內「持續選中」語意 token,不自開 neutral-3 tier。\n *\n * ── 為什麼 nav 放頂部 + 年月垂直置中(不 separate 兩行)──\n * ref/datepicker.png:chevron prev / 月份 / chevron next 同一行,24px 高(xs field height)。\n * 省垂直空間,使用者視線不需上下跳。世界級(Google Calendar / Apple / iOS 日期輸入)皆此佈局。\n */\n\nexport type DateGridProps = React.ComponentProps<typeof DayPicker>\n\n// ── SR label 中文 formatter(2026-07-05)──\n// 走 Intl.DateTimeFormat(對齊 TimePicker / Calendar 既有 canonical,不引第二套 date lib);\n// module-level 建一次 — label fn 每個 day cell 都會呼叫,避免 per-call new formatter。\nconst ZH_FULL_DATE = new Intl.DateTimeFormat('zh-TW', { dateStyle: 'full' })\nconst ZH_MONTH_YEAR = new Intl.DateTimeFormat('zh-TW', { year: 'numeric', month: 'long' })\nconst ZH_WEEKDAY = new Intl.DateTimeFormat('zh-TW', { weekday: 'long' })\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst DateGrid = React.forwardRef<HTMLDivElement, DateGridProps>(function DateGrid(\n  {\n    className,\n    classNames,\n    labels,\n    showOutsideDays = true,\n    ...props\n  },\n  _ref,\n) {\n  // Note: react-day-picker v9 DayPicker 未對外 forward ref 到單一 DOM 節點(內部有多 div),\n  // 故 ref 簽名保留但不附著(符合 DS 統一 forwardRef 慣例;真要取 DOM 用 wrapper 包)。\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      // navLayout=\"around\" = prev 渲染在首月(displayIndex===0)caption 左、next 渲染在末月(displayIndex===numberOfMonths-1)caption 右;單月時兩鍵同 caption 兩側\n      // 取代先前 absolute 定位覆蓋整個 months 容器導致箭頭垂直置中於中段的 bug\n      navLayout=\"around\"\n      // p-3 = 12px 四邊對稱(canonical 不可動)\n      className={cn('p-3', className)}\n      classNames={{\n        months: 'flex flex-col sm:flex-row gap-4',\n        // Month:relative 讓 prev/next 按鈕 absolute 定位到 month 右上/左上(navLayout=\"around\")\n        month: 'flex flex-col relative',\n        // Month caption:單行置中 h-field-xs,prev/next 按鈕 absolute 從兩側貼齊\n        month_caption: 'flex items-center justify-center h-field-xs mb-3',\n        caption_label: 'text-body font-medium',\n        // ── Prev/Next button(canonical 2026-05-03 v6,user audit fix)──\n        // RDP 把這 className apply 到 <Button> 本身(不是 wrapper),所以用 className 直接套\n        // 定位類(absolute top/left/right-0)。muted 色透過 Button override 內部加,不用 [&>button] 黑魔法。\n        button_previous: 'absolute top-0 left-0 z-[1]',\n        button_next: 'absolute top-0 right-0 z-[1]',\n        // ── Grid layout(canonical 2026-05-03 v7,純 table-native)──\n        // RDP v9 month_grid = <table>。v6 試 grid 在 tr 上但 break border-spacing(grid 蓋掉\n        // table-row layout)。乾淨修:**純 table layout** + `border-spacing-1`(4px H+V,table-native)。\n        // 所有 cells 自動同寬同高(td 的 w/h-field-sm),無 grid hack。\n        month_grid: 'border-separate border-spacing-1',\n        weekdays: '',  // thead default\n        weekday: cn(\n          // text-foreground + font-medium 對齊 DS 一致設計語言(2026-05-03 user audit):\n          // weekday 列標跟 caption「April 2026」同視覺權重(都屬 calendar header 區),\n          // 不弱化(撤銷 v3 fg-secondary 的 mistake)。對齊 icon-only Button 預設 neutral-9 一致。\n          'text-foreground text-body font-medium',\n          'h-7 align-middle text-center',\n        ),\n        week: '',  // tr default\n        // Cell **就是** button 容器(28×28 @ md / 32×32 @ lg),`relative` 讓 before pseudo 定位\n        // ── h-field-sm 對齊 user spec(28×28 @ md)— v3 用 h-field-md (32×32) 是錯的\n        day: cn(\n          'h-field-sm w-[var(--field-height-sm)] p-0 text-center relative',\n        ),\n        day_button: cn(\n          // absolute inset-0 = 完全填滿 cell(naked button,無 inset 4px 空隙)\n          // z-[1] 讓 button 疊在 range track `before:` pseudo 之上\n          'absolute inset-0 z-[1] flex items-center justify-center',\n          'font-normal text-body rounded-full transition-colors',\n          // Hover 藍圈 1.5px(對齊 Apple HIG / Ant `@benchmark-unverified` visual ring measurement)— ring 在 button 之上 + 透明 bg 不擋 range track\n          // 2026-07-07 user 拍板統一:瞬時 hover 進 primary 家族 = hover 階(FileUpload dropzone /\n          // Slider thumb hover 同族;base 專屬持續選中與 focus)——ring-primary → ring-primary-hover\n          'hover:ring-[1.5px] hover:ring-primary-hover hover:bg-transparent',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n        ),\n        // today:藍色 underline bar 貼近數字\n        today: cn(\n          \"[&>button]:after:content-['']\",\n          '[&>button]:after:absolute',\n          '[&>button]:after:bottom-[5px] [&>button]:after:left-1/2 [&>button]:after:-translate-x-1/2',\n          '[&>button]:after:w-[40%] [&>button]:after:h-[1.5px] [&>button]:after:rounded-full',\n          '[&>button]:after:bg-primary',\n          // today + selected:bar 切 on-emphasis(白)— 只為「藍底白字圓」的選中日/端點設計;\n          // range 中段(淺灰底)由 range_middle 的 !bg-primary 覆寫回藍(2026-07-07 user 拍板)。\n          '[&[data-selected=true]>button]:after:bg-on-emphasis',\n        ),\n        outside: '[&>button]:text-fg-muted',\n        // Selected(single 或 range 端點):button 藍底白字圓\n        selected: cn(\n          '[&>button]:bg-primary [&>button]:text-on-emphasis',\n          '[&>button]:hover:bg-primary-hover [&>button]:hover:ring-0',\n        ),\n        disabled: cn(\n          '[&>button]:bg-disabled [&>button]:text-fg-disabled [&>button]:cursor-not-allowed',\n          '[&>button]:hover:ring-0 [&>button]:hover:bg-disabled',\n        ),\n        // ── Range track(canonical 2026-05-03 v6,Ant stadium pattern)──\n        // v5 用 pseudo 矩形蓋全 cell 修「白色破圖」,但新副作用:button 圓比矩形小,4 個\n        // corner triangle 區域 pseudo grey 凸出圓外(user 2026-05-03 抓到「凸出去」)。\n        // 對齊 Ant 實證(`cell-range-start::before { border-radius: 9999px 0 0 9999px }`):\n        // rangeStart pseudo 加 `rounded-l-full` → pseudo 變「左半圓 + 右矩形」stadium\n        // 左半圓 EXACTLY OVERLAY button 圓的左半圓(同 center,同 radius 14)→ 邊界無縫\n        // 右側矩形 bridge 2px to middle → 跟 middle pseudo 連續\n        // Cell 的 top-left + bottom-left corner triangle:pseudo 不蓋 + button 不蓋 →\n        // popover white 顯露(乾淨 breathing,跟 outside-of-range cells 一致視覺)\n        range_start: cn(\n          \"before:content-[''] before:absolute before:inset-y-0\",\n          'before:left-0 before:-right-[2px]',\n          'before:bg-neutral-selected before:pointer-events-none',\n          'before:rounded-l-full',  // ← stadium 左半圓 matches button 圓的左半弧\n        ),\n        range_end: cn(\n          \"before:content-[''] before:absolute before:inset-y-0\",\n          'before:-left-[2px] before:right-0',\n          'before:bg-neutral-selected before:pointer-events-none',\n          'before:rounded-r-full',  // ← 鏡像\n        ),\n        range_middle: cn(\n          \"before:content-[''] before:absolute before:inset-y-0 before:-inset-x-[2px]\",\n          'before:bg-neutral-selected before:pointer-events-none',\n          // 2026-07-07 user 拍板:range 中段的 today bar 維持藍(切白只屬藍底選中日;白條在\n          // neutral-selected 淺灰底上近乎隱形 = today 標記消失)。!important 確定性壓過 today 的\n          // data-selected 切白規則(同權重靠 stylesheet 順序不可靠)。Ant 源碼實錘:cell-today\n          // 指示 = colorPrimary,in-range 只換底色、無規則隱藏/改色 today 指示(panel.ts)。\n          // 非 today 的中段日無 after content,本規則無作用 — 安全。\n          '[&>button]:after:!bg-primary',\n          // button 透明顯露 track。2026-07-05 對齊 RDP v9 真實行為(deep-audit A.1b):\n          // range 中段日同樣掛 selected modifier(useRange rangeIncludesDate 不排除中段)→\n          // 上方 selected 的 `[&>button]:hover:ring-0` 一併壓制 hover ring(與 selected 一致\n          // 的 hover 抑制),非原註解宣稱的「hover ring 仍顯示」;today bar 亦被 data-selected\n          // selector 切 on-emphasis(見 spec「組合狀態」段)。\n          '[&>button]:!bg-transparent [&>button]:!text-foreground',\n        ),\n        hidden: 'invisible',\n        ...classNames,\n      }}\n      // ── SR label 中文 defaults(2026-07-05,RDP labels API 正門)──\n      // 對齊 MUI X localeText「預設可覆寫」idiom + 2026-07-04 全庫 SR label 中文\n      // canonical(commit 241676c6):DS 給中文 default,consumer 傳 labels 逐鍵覆寫(i18n)。\n      // 禁在 components override 內 spread 後 hardcode aria-label — 會蓋死此覆寫通道\n      // (2026-07-05 修正 07-04 的錯誤修法:中文要走 labels 正門,不是蓋 RDP 算好的值)。\n      labels={{\n        labelPrevious: () => '上一個月',\n        labelNext: () => '下一個月',\n        // 鏡射 RDP default 結構(labels/labelDayButton.js:today 前綴 / selected 後綴),文案中文化\n        labelDayButton: (date, modifiers) => {\n          let label = ZH_FULL_DATE.format(date)\n          if (modifiers.today) label = `今天,${label}`\n          if (modifiers.selected) label = `${label},已選取`\n          return label\n        },\n        // 未傳 mode 的非互動 grid(spec「mode 無預設值」段)day cell 走 labelGridcell\n        labelGridcell: (date, modifiers) => {\n          let label = ZH_FULL_DATE.format(date)\n          if (modifiers?.today) label = `今天,${label}`\n          return label\n        },\n        labelGrid: (date) => ZH_MONTH_YEAR.format(date),\n        labelWeekday: (date) => ZH_WEEKDAY.format(date),\n        // 以下非 default 渲染面(captionLayout dropdown / showWeekNumber 由 consumer 經\n        // {...props} 開啟)— 一併補齊,避免開啟後 SR 中英夾雜\n        labelMonthDropdown: () => '選擇月份',\n        labelYearDropdown: () => '選擇年份',\n        labelWeekNumber: (weekNumber) => `第 ${weekNumber} 週`,\n        labelWeekNumberHeader: () => '週數',\n        ...labels,\n      }}\n      components={{\n        // ── Prev/Next nav(canonical 2026-05-03 v9,DS 一致設計語言)──\n        // User 2026-05-03 audit:「icon-only Button icon 都用 neutral-9,只有 dismiss 用 45%」\n        // → chevron 不是 dismiss,**走 Button 預設 text-foreground**(neutral-9 85%),\n        // 不開新 tier 自打嘴(撤銷 v6-v8 用 fg-muted override 的 mistake)。\n        // RDP v9 `PreviousMonthButton / NextMonthButton` override(node_modules/react-day-picker/dist/esm/components/Nav.js)\n        // ⚠️ children: _ 必丟棄(RDP 把 <Chevron> 當 children 傳 → 跟 Button startIcon 重疊變 double chevron)\n        // 2026-07-05 修:此處**不** hardcode aria-label — 中文走上方 labels API 正門,\n        // RDP 算好 labelPrevious()/labelNext() 後經 {...props} 流入 Button;\n        // spread 後 hardcode(07-04 舊修法)= 蓋死 consumer labels 覆寫通道。\n        PreviousMonthButton: ({ className, children: _children, ...props }) => (\n          <Button variant=\"text\" size=\"xs\" iconOnly startIcon={ChevronLeft}\n            className={className} {...props} />\n        ),\n        NextMonthButton: ({ className, children: _children, ...props }) => (\n          <Button variant=\"text\" size=\"xs\" iconOnly startIcon={ChevronRight}\n            className={className} {...props} />\n        ),\n      }}\n      {...props}\n    />\n  )\n})\nDateGrid.displayName = 'DateGrid'\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const dateGridMeta = {\n  component: 'DateGrid',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  // 'selected' = 選中日期 / range 端點持續選中(藍底白字圓 bg-primary + range 帶 bg-neutral-selected);\n  // 'active' 移除 — 全檔無 Tailwind 按壓 utility,無按壓專屬視覺態(2026-07-07 詞彙統一對抗稽核補修)。\n  states: ['default', 'hover', 'selected', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-disabled', 'bg-neutral-selected', 'bg-on-emphasis', 'bg-primary', 'bg-primary-hover', 'bg-transparent'],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-foreground', 'text-on-emphasis'],\n    ring: ['ring-primary', 'ring-ring'],\n  },\n} as const\n\nexport { DateGrid }\n"],"names":["DateGrid","className","props"],"mappings":"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"}
+{"version":3,"file":"date-grid.js","sources":["../../../src/components/DateGrid/date-grid.tsx"],"sourcesContent":["/**\n * @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 DatePicker wrap 消費,end-user app 請用 wrapper 元件。\n */\n// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n// M22 retrofit DONE 2026-05-03 v11(real source URLs added inline at lines 38 + 111)\nimport * as React from 'react'\nimport { DayPicker } from 'react-day-picker'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport 'react-day-picker/style.css'\n\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\n\n/**\n * DateGrid — DayPicker 包裝,用本 DS token 覆寫預設視覺。\n *\n * ── 視覺對照(ref/datepicker.png,2026-04-21 rewrite)──\n *\n * | 區塊 | 規格 |\n * |------|------|\n * | Outer padding | `p-3`(12px 四邊對稱) |\n * | Nav + Month caption row | h-field-xs(24px)單行,chevron(xs)分居左右 / 月份置中垂直對齊 |\n * | Nav → Weekday gap | 12px(month_caption mb-3) |\n * | Weekday | text-body(14px)text-foreground font-medium(neutral-9,同 caption 權重;撤銷 v3 fg-secondary) |\n * | Cell gap(水平 + 垂直)| 4px(table-native border-separate border-spacing-1;非 gap — grid 會 break,見下方 v7 註) |\n * | Day cell size | h-field-sm w-[var(--field-height-sm)](28×28 md / 32×32 lg) |\n * | Day button | rounded-full 填滿 cell |\n *\n * ── 五種 cell state canonical ──\n *\n * | State | 視覺 | Token |\n * |-------|------|-------|\n * | today | 數字下方藍色短桿 | `::after` pseudo bar(bg-primary,w-40% h-1.5px rounded-full,貼近數字底)|\n * | disabled | 灰底圓圈 + disabled 字色(跟 Button disabled 一致) | [&>button]:bg-disabled [&>button]:text-fg-disabled rounded-full |\n * | outside(非本月) | text-fg-muted(neutral-7) | [&>button]:text-fg-muted |\n * | selected / range 端點 | 藍底白字圓 | [&>button]:bg-primary [&>button]:text-on-emphasis rounded-full |\n * | range middle | 灰底矩形 track(bg-neutral-selected = neutral-2),**高度 = cell 高度**(28×28 @ md) | before pseudo: `inset-y-0 -inset-x-[2px]` |\n * | range start/end 半圓 track | 左/右半圓 + selected 圓疊在上,**圓半徑 = button 半徑** | before pseudo: `rounded-l/r-full` + start `left-0 -right-[2px]` / end `-left-[2px] right-0`(向 middle 外擴 2px bridge gap)|\n * | hover(未選中) | 藍圈 outline | hover:ring-[1.5px] hover:ring-primary-hover(2026-07-07 統一:瞬時 hover = hover 階)|\n *\n * ── Range track 高度 canonical(2026-05-03 v6,M8 4 家對照)──\n * Ant Design([picker source](https://github.com/ant-design/ant-design/blob/master/components/date-picker/style/panel.ts))/ Material X DateRangePicker([mui-x source](https://github.com/mui/mui-x/tree/master/packages/x-date-pickers-pro/src/DateRangeCalendar))/ Apple Calendar `@benchmark-unverified`(closed-source)/ Google Calendar `@benchmark-unverified`(closed-source)共識:\n * **range track 為連續 stadium**,跟 selected 圓緊貼成連續 pill。\n * 實作:bg 走 `before:` pseudo 用 `inset-y-0`(滿 cell 高度)+ `-inset-x-[2px]`\n * (左右各外擴 2px bridge 相鄰 cell gap)→ 相鄰 cell 的 pseudo 連續銜接 = 橫向連貫;\n * day cell 本身就是 button 容器(L102-105 day = h-field-sm cell),故滿 cell 高 = 滿 button 高。\n *\n * ── Range track 色用 bg-neutral-selected(= neutral-2)──\n * 對齊 TimePicker 選中項目樣式(semantic `--neutral-selected` = neutral-2,semantic.css L84/L340)。\n * 同 DS 內「持續選中」語意 token,不自開 neutral-3 tier。\n *\n * ── 為什麼 nav 放頂部 + 年月垂直置中(不 separate 兩行)──\n * ref/datepicker.png:chevron prev / 月份 / chevron next 同一行,24px 高(xs field height)。\n * 省垂直空間,使用者視線不需上下跳。世界級(Google Calendar / Apple / iOS 日期輸入)皆此佈局。\n */\n\nexport type DateGridProps = React.ComponentProps<typeof DayPicker>\n\n// ── SR label 中文 formatter(2026-07-05)──\n// 走 Intl.DateTimeFormat(對齊 TimePicker / Calendar 既有 canonical,不引第二套 date lib);\n// module-level 建一次 — label fn 每個 day cell 都會呼叫,避免 per-call new formatter。\nconst ZH_FULL_DATE = new Intl.DateTimeFormat('zh-TW', { dateStyle: 'full' })\nconst ZH_MONTH_YEAR = new Intl.DateTimeFormat('zh-TW', { year: 'numeric', month: 'long' })\nconst ZH_WEEKDAY = new Intl.DateTimeFormat('zh-TW', { weekday: 'long' })\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst DateGrid = React.forwardRef<HTMLDivElement, DateGridProps>(function DateGrid(\n  {\n    className,\n    classNames,\n    labels,\n    showOutsideDays = true,\n    ...props\n  },\n  _ref,\n) {\n  // Note: react-day-picker v9 DayPicker 未對外 forward ref 到單一 DOM 節點(內部有多 div),\n  // 故 ref 簽名保留但不附著(符合 DS 統一 forwardRef 慣例;真要取 DOM 用 wrapper 包)。\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      // navLayout=\"around\" = prev 渲染在首月(displayIndex===0)caption 左、next 渲染在末月(displayIndex===numberOfMonths-1)caption 右;單月時兩鍵同 caption 兩側\n      // 取代先前 absolute 定位覆蓋整個 months 容器導致箭頭垂直置中於中段的 bug\n      navLayout=\"around\"\n      // p-3 = 12px 四邊對稱(canonical 不可動)\n      className={cn('p-3', className)}\n      classNames={{\n        months: 'flex flex-col sm:flex-row gap-4',\n        // Month:relative 讓 prev/next 按鈕 absolute 定位到 month 右上/左上(navLayout=\"around\")\n        month: 'flex flex-col relative',\n        // Month caption:單行置中 h-field-xs,prev/next 按鈕 absolute 從兩側貼齊\n        month_caption: 'flex items-center justify-center h-field-xs mb-3',\n        caption_label: 'text-body font-medium',\n        // ── Prev/Next button(canonical 2026-05-03 v6,user audit fix)──\n        // RDP 把這 className apply 到 <Button> 本身(不是 wrapper),所以用 className 直接套\n        // 定位類(absolute top/left/right-0)。muted 色透過 Button override 內部加,不用 [&>button] 黑魔法。\n        button_previous: 'absolute top-0 left-0 z-[1]',\n        button_next: 'absolute top-0 right-0 z-[1]',\n        // ── Grid layout(canonical 2026-05-03 v7,純 table-native)──\n        // RDP v9 month_grid = <table>。v6 試 grid 在 tr 上但 break border-spacing(grid 蓋掉\n        // table-row layout)。乾淨修:**純 table layout** + `border-spacing-1`(4px H+V,table-native)。\n        // 所有 cells 自動同寬同高(td 的 w/h-field-sm),無 grid hack。\n        month_grid: 'border-separate border-spacing-1',\n        weekdays: '',  // thead default\n        weekday: cn(\n          // text-foreground + font-medium 對齊 DS 一致設計語言(2026-05-03 user audit):\n          // weekday 列標跟 caption「April 2026」同視覺權重(都屬 calendar header 區),\n          // 不弱化(撤銷 v3 fg-secondary 的 mistake)。對齊 icon-only Button 預設 neutral-9 一致。\n          'text-foreground text-body font-medium',\n          // h-field-sm(md=28/lg=32 隨 density):對齊 day cell 同 token 同 row cadence\n          // (spec:127 既定 canonical;Ant 36/36、Carbon 40/40 header/day 同節奏;2026-07-14 修 h-7 固定 drift)\n          'h-[var(--field-height-sm)] align-middle text-center',\n        ),\n        week: '',  // tr default\n        // Cell **就是** button 容器(28×28 @ md / 32×32 @ lg),`relative` 讓 before pseudo 定位\n        // ── h-field-sm 對齊 user spec(28×28 @ md)— v3 用 h-field-md (32×32) 是錯的\n        day: cn(\n          'h-field-sm w-[var(--field-height-sm)] p-0 text-center relative',\n        ),\n        day_button: cn(\n          // absolute inset-0 = 完全填滿 cell(naked button,無 inset 4px 空隙)\n          // z-[1] 讓 button 疊在 range track `before:` pseudo 之上\n          'absolute inset-0 z-[1] flex items-center justify-center',\n          'font-normal text-body rounded-full transition-colors',\n          // Hover 藍圈 1.5px(對齊 Apple HIG / Ant `@benchmark-unverified` visual ring measurement)— ring 在 button 之上 + 透明 bg 不擋 range track\n          // 2026-07-07 user 拍板統一:瞬時 hover 進 primary 家族 = hover 階(FileUpload dropzone /\n          // Slider thumb hover 同族;base 專屬持續選中與 focus)——ring-primary → ring-primary-hover\n          'hover:ring-[1.5px] hover:ring-primary-hover hover:bg-transparent',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n        ),\n        // today:藍色 underline bar 貼近數字\n        today: cn(\n          \"[&>button]:after:content-['']\",\n          '[&>button]:after:absolute',\n          '[&>button]:after:bottom-[5px] [&>button]:after:left-1/2 [&>button]:after:-translate-x-1/2',\n          '[&>button]:after:w-[40%] [&>button]:after:h-[1.5px] [&>button]:after:rounded-full',\n          '[&>button]:after:bg-primary',\n          // today + selected:bar 切 on-emphasis(白)— 只為「藍底白字圓」的選中日/端點設計;\n          // range 中段(淺灰底)由 range_middle 的 !bg-primary 覆寫回藍(2026-07-07 user 拍板)。\n          '[&[data-selected=true]>button]:after:bg-on-emphasis',\n        ),\n        outside: '[&>button]:text-fg-muted',\n        // Selected(single 或 range 端點):button 藍底白字圓\n        selected: cn(\n          '[&>button]:bg-primary [&>button]:text-on-emphasis',\n          '[&>button]:hover:bg-primary-hover [&>button]:hover:ring-0',\n        ),\n        disabled: cn(\n          '[&>button]:bg-disabled [&>button]:text-fg-disabled [&>button]:cursor-not-allowed',\n          '[&>button]:hover:ring-0 [&>button]:hover:bg-disabled',\n        ),\n        // ── Range track(canonical 2026-05-03 v6,Ant stadium pattern)──\n        // v5 用 pseudo 矩形蓋全 cell 修「白色破圖」,但新副作用:button 圓比矩形小,4 個\n        // corner triangle 區域 pseudo grey 凸出圓外(user 2026-05-03 抓到「凸出去」)。\n        // 對齊 Ant 實證(`cell-range-start::before { border-radius: 9999px 0 0 9999px }`):\n        // rangeStart pseudo 加 `rounded-l-full` → pseudo 變「左半圓 + 右矩形」stadium\n        // 左半圓 EXACTLY OVERLAY button 圓的左半圓(同 center,同 radius 14)→ 邊界無縫\n        // 右側矩形 bridge 2px to middle → 跟 middle pseudo 連續\n        // Cell 的 top-left + bottom-left corner triangle:pseudo 不蓋 + button 不蓋 →\n        // popover white 顯露(乾淨 breathing,跟 outside-of-range cells 一致視覺)\n        range_start: cn(\n          \"before:content-[''] before:absolute before:inset-y-0\",\n          'before:left-0 before:-right-[2px]',\n          'before:bg-neutral-selected before:pointer-events-none',\n          'before:rounded-l-full',  // ← stadium 左半圓 matches button 圓的左半弧\n        ),\n        range_end: cn(\n          \"before:content-[''] before:absolute before:inset-y-0\",\n          'before:-left-[2px] before:right-0',\n          'before:bg-neutral-selected before:pointer-events-none',\n          'before:rounded-r-full',  // ← 鏡像\n        ),\n        range_middle: cn(\n          \"before:content-[''] before:absolute before:inset-y-0 before:-inset-x-[2px]\",\n          'before:bg-neutral-selected before:pointer-events-none',\n          // 2026-07-07 user 拍板:range 中段的 today bar 維持藍(切白只屬藍底選中日;白條在\n          // neutral-selected 淺灰底上近乎隱形 = today 標記消失)。!important 確定性壓過 today 的\n          // data-selected 切白規則(同權重靠 stylesheet 順序不可靠)。Ant 源碼實錘:cell-today\n          // 指示 = colorPrimary,in-range 只換底色、無規則隱藏/改色 today 指示(panel.ts)。\n          // 非 today 的中段日無 after content,本規則無作用 — 安全。\n          '[&>button]:after:!bg-primary',\n          // button 透明顯露 track。2026-07-05 對齊 RDP v9 真實行為(deep-audit A.1b):\n          // range 中段日同樣掛 selected modifier(useRange rangeIncludesDate 不排除中段)→\n          // 上方 selected 的 `[&>button]:hover:ring-0` 一併壓制 hover ring(與 selected 一致\n          // 的 hover 抑制),非原註解宣稱的「hover ring 仍顯示」;today bar 亦被 data-selected\n          // selector 切 on-emphasis(見 spec「組合狀態」段)。\n          '[&>button]:!bg-transparent [&>button]:!text-foreground',\n        ),\n        hidden: 'invisible',\n        ...classNames,\n      }}\n      // ── SR label 中文 defaults(2026-07-05,RDP labels API 正門)──\n      // 對齊 MUI X localeText「預設可覆寫」idiom + 2026-07-04 全庫 SR label 中文\n      // canonical(commit 241676c6):DS 給中文 default,consumer 傳 labels 逐鍵覆寫(i18n)。\n      // 禁在 components override 內 spread 後 hardcode aria-label — 會蓋死此覆寫通道\n      // (2026-07-05 修正 07-04 的錯誤修法:中文要走 labels 正門,不是蓋 RDP 算好的值)。\n      labels={{\n        labelPrevious: () => '上一個月',\n        labelNext: () => '下一個月',\n        // 鏡射 RDP default 結構(labels/labelDayButton.js:today 前綴 / selected 後綴),文案中文化\n        labelDayButton: (date, modifiers) => {\n          let label = ZH_FULL_DATE.format(date)\n          if (modifiers.today) label = `今天,${label}`\n          if (modifiers.selected) label = `${label},已選取`\n          return label\n        },\n        // 未傳 mode 的非互動 grid(spec「mode 無預設值」段)day cell 走 labelGridcell\n        labelGridcell: (date, modifiers) => {\n          let label = ZH_FULL_DATE.format(date)\n          if (modifiers?.today) label = `今天,${label}`\n          return label\n        },\n        labelGrid: (date) => ZH_MONTH_YEAR.format(date),\n        labelWeekday: (date) => ZH_WEEKDAY.format(date),\n        // 以下非 default 渲染面(captionLayout dropdown / showWeekNumber 由 consumer 經\n        // {...props} 開啟)— 一併補齊,避免開啟後 SR 中英夾雜\n        labelMonthDropdown: () => '選擇月份',\n        labelYearDropdown: () => '選擇年份',\n        labelWeekNumber: (weekNumber) => `第 ${weekNumber} 週`,\n        labelWeekNumberHeader: () => '週數',\n        ...labels,\n      }}\n      components={{\n        // ── Prev/Next nav(canonical 2026-05-03 v9,DS 一致設計語言)──\n        // User 2026-05-03 audit:「icon-only Button icon 都用 neutral-9,只有 dismiss 用 45%」\n        // → chevron 不是 dismiss,**走 Button 預設 text-foreground**(neutral-9 85%),\n        // 不開新 tier 自打嘴(撤銷 v6-v8 用 fg-muted override 的 mistake)。\n        // RDP v9 `PreviousMonthButton / NextMonthButton` override(node_modules/react-day-picker/dist/esm/components/Nav.js)\n        // ⚠️ children: _ 必丟棄(RDP 把 <Chevron> 當 children 傳 → 跟 Button startIcon 重疊變 double chevron)\n        // 2026-07-05 修:此處**不** hardcode aria-label — 中文走上方 labels API 正門,\n        // RDP 算好 labelPrevious()/labelNext() 後經 {...props} 流入 Button;\n        // spread 後 hardcode(07-04 舊修法)= 蓋死 consumer labels 覆寫通道。\n        PreviousMonthButton: ({ className, children: _children, ...props }) => (\n          <Button variant=\"text\" size=\"xs\" iconOnly startIcon={ChevronLeft}\n            className={className} {...props} />\n        ),\n        NextMonthButton: ({ className, children: _children, ...props }) => (\n          <Button variant=\"text\" size=\"xs\" iconOnly startIcon={ChevronRight}\n            className={className} {...props} />\n        ),\n      }}\n      {...props}\n    />\n  )\n})\nDateGrid.displayName = 'DateGrid'\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const dateGridMeta = {\n  component: 'DateGrid',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  // 'selected' = 選中日期 / range 端點持續選中(藍底白字圓 bg-primary + range 帶 bg-neutral-selected);\n  // 'active' 移除 — 全檔無 Tailwind 按壓 utility,無按壓專屬視覺態(2026-07-07 詞彙統一對抗稽核補修)。\n  states: ['default', 'hover', 'selected', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-disabled', 'bg-neutral-selected', 'bg-on-emphasis', 'bg-primary', 'bg-primary-hover', 'bg-transparent'],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-foreground', 'text-on-emphasis'],\n    ring: ['ring-primary', 'ring-ring'],\n  },\n} as const\n\nexport { DateGrid }\n"],"names":["DateGrid","className","props"],"mappings":"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"}

package/dist/components/DatePicker/date-picker.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FieldMode, FieldVariant } from '../../components/Field/field-types';
+import type { FieldMode, FieldVariant, FieldWidth } from '../../components/Field/field-types';
 import { type TimeStep } from '../../components/TimePicker/time-columns';
 export interface DateFormatOptions {
     /** Intl.DateTimeFormat options（預設 { year: 'numeric', month: '2-digit', day: '2-digit' }） */
@@ -12,6 +12,9 @@ export interface DatePickerProps extends DateFormatOptions, Omit<React.HTMLAttri
     mode?: FieldMode;
     /** Field chrome variant. Default = context.variant ?? 'default'. Per-prop override. */
     variant?: FieldVariant;
+    /** 寬度軸 — `fill` 填滿容器(default)/ `hug` 依內容收縮(value 寬 + slot 寬 + gap + 內 padding);
+     *  chrome 與互動不變。SSOT → field-controls.spec.md「寬度軸(width: fill / hug)」。 */
+    width?: FieldWidth;
     error?: boolean;
     size?: 'sm' | 'md' | 'lg';
     /** ISO date(YYYY-MM-DD)或 ISO datetime(YYYY-MM-DDTHH:MM:SS,當 showTime=true) */
@@ -76,6 +79,9 @@ export interface DatePickerRangeProps extends DateFormatOptions, Omit<React.HTML
     mode?: FieldMode;
     /** Field chrome variant. Default = context.variant ?? 'default'. Per-prop override. */
     variant?: FieldVariant;
+    /** 寬度軸 — `fill` 填滿容器(default)/ `hug` 依內容收縮(value 寬 + slot 寬 + gap + 內 padding);
+     *  chrome 與互動不變。SSOT → field-controls.spec.md「寬度軸(width: fill / hug)」。 */
+    width?: FieldWidth;
     error?: boolean;
     size?: 'sm' | 'md' | 'lg';
     /** 區間值:[start ISO, end ISO]。任一 null 代表尚未選。 */

package/dist/components/DatePicker/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/date-picker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/date-picker.tsx"],"names":[],"mappings":"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"}

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

@@ -2,13 +2,13 @@ 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, nakedCellRowModeAlign, fieldWrapperStyles, bareInputStyles, fieldDisplayTextClass } from "../Field/field-wrapper.js";
+import { nakedCellRowModeAlign, fieldWrapperStyles, bareInputStyles, fieldDisplayTextClass } from "../Field/field-wrapper.js";
 import { ICON_SIZE, ItemSuffix, ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../Popover/popover.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, useResolvedFieldSize, useResolvedFieldInvalid, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant } 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) {
@@ -21,7 +21,7 @@ function getDateTimeFormatter(locale, options) {
   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 getDateTimeFormatter(options.locale ?? "en-US", options.formatOptions ?? { year: "numeric", month: "2-digit", day: "2-digit" }).format(date);
@@ -59,6 +59,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");
@@ -146,6 +147,7 @@ const DatePicker = React.forwardRef(
   ({
     mode,
     variant: variantProp,
+    width,
     error: errorProp = false,
     size: sizeProp,
     value,
@@ -177,6 +179,7 @@ const DatePicker = React.forwardRef(
     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];
@@ -191,7 +194,7 @@ const DatePicker = React.forwardRef(
     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;
@@ -229,16 +232,16 @@ const DatePicker = React.forwardRef(
     }, [onChange, showTime]);
     if (resolvedMode === "display") {
       if (!showDisplayEndIcon) {
-        if (!value) return /* @__PURE__ */ jsx("span", { className: cn(fieldDisplayTextClass(size), "text-fg-muted", className), children: EMPTY_DISPLAY });
+        if (!value) return /* @__PURE__ */ jsx("span", { className: cn(fieldDisplayTextClass(size), fieldEmptyColorClass(resolvedMode), className), children: emptyDisplay });
         return /* @__PURE__ */ jsx("span", { className: cn(fieldDisplayTextClass(size), "truncate", className), children: displayCommitted });
       }
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn(fieldWrapperStyles({ mode: "display", variant, size }), className),
+          className: cn(fieldWrapperStyles({ mode: "display", variant, width, size }), className),
           "data-field-mode": "display",
           children: [
-            /* @__PURE__ */ jsx("span", { className: cn(bareInputStyles, "flex-1 min-w-0 truncate", !value && "text-fg-muted"), children: value ? displayCommitted : EMPTY_DISPLAY }),
+            /* @__PURE__ */ jsx("span", { className: cn(bareInputStyles, "flex-1 min-w-0 truncate", !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 }) })
           ]
         }
@@ -248,12 +251,12 @@ 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 truncate", resolvedMode === "disabled" && "text-fg-disabled"), children: value ? displayCommitted : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY }) }),
+            /* @__PURE__ */ jsx("span", { className: cn("flex-1 min-w-0 truncate", 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 }) })
           ]
         }
@@ -277,18 +280,18 @@ const DatePicker = React.forwardRef(
         "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,
+          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,
           "data-field-mode": "edit",
           "data-error": error ? "" : void 0,
           onKeyDown: typeable ? void 0 : (e) => {
@@ -299,7 +302,7 @@ const DatePicker = React.forwardRef(
             if (e.key === "Escape") setOpen(false);
           },
           className: cn(
-            fieldWrapperStyles({ mode: "edit", variant, size, error }),
+            fieldWrapperStyles({ mode: "edit", variant, width, size, error }),
             "text-left cursor-pointer",
             "focus-visible:outline-none",
             className
@@ -310,10 +313,23 @@ const DatePicker = React.forwardRef(
               // 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-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,
@@ -339,6 +355,10 @@ const DatePicker = React.forwardRef(
                       setInputInvalid(false);
                       e.preventDefault();
                     }
+                    if (e.key === "ArrowDown" && !open) {
+                      e.preventDefault();
+                      setOpen(true);
+                    }
                   },
                   onBlur: () => {
                     if (!composingRef.current) handleInputCommit(inputDraft);
@@ -371,56 +391,64 @@ const DatePicker = React.forwardRef(
           ]
         }
       ) }),
-      /* @__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(
+        PopoverContent,
+        {
+          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("div", { className: "flex-1 min-h-0 overflow-y-auto", 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 || 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: "關閉" })
-        ] })
-      ] }) })
+            ) }),
+            (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: "關閉" })
+            ] })
+          ] })
+        }
+      )
     ] });
   }
 );
@@ -429,6 +457,7 @@ const DatePickerRange = React.forwardRef(
   ({
     mode,
     variant: variantProp,
+    width,
     error: errorProp = false,
     size: sizeProp,
     value,
@@ -454,6 +483,7 @@ const DatePickerRange = React.forwardRef(
     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];
@@ -467,7 +497,7 @@ const DatePickerRange = React.forwardRef(
     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;
@@ -540,7 +570,7 @@ const DatePickerRange = React.forwardRef(
     }, [activeEnd, startDate, endDate]);
     if (resolvedMode === "display") {
       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(ArrowRight, { size: iconSize, className: "shrink-0 text-fg-muted mx-2", "aria-hidden": true }),
@@ -552,7 +582,7 @@ 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,
@@ -579,7 +609,7 @@ const DatePickerRange = React.forwardRef(
           "data-error": error ? "" : void 0,
           "data-state": open ? "open" : "closed",
           className: cn(
-            fieldWrapperStyles({ mode: "edit", size, error }),
+            fieldWrapperStyles({ mode: "edit", width, size, error }),
             "cursor-text",
             className
           ),
@@ -645,6 +675,7 @@ const DatePickerRange = React.forwardRef(
         {
           className: "w-auto p-0",
           align: "start",
+          "aria-label": "日期區間選擇",
           onInteractOutside: () => {
             hasInteractedOutsideRef.current = true;
           },
@@ -656,7 +687,7 @@ const DatePickerRange = React.forwardRef(
             }
             hasInteractedOutsideRef.current = false;
           },
-          children: /* @__PURE__ */ jsxs("div", { role: "dialog", "aria-label": "日期區間選擇", className: "flex flex-col flex-1 min-h-0", children: [
+          children: /* @__PURE__ */ jsxs("div", { 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,
               {