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

package/dist/components/TimePicker/time-picker.d.ts

@@ -17,7 +17,8 @@ import { type TimeParts, type TimeStep } from '../../components/TimePicker/time-
  * Ant DatePicker / Polaris Picker 共識)。
  *
  * ── 實作基礎 ──
- * Trigger:`<button>` + `fieldWrapperStyles`(視覺仍是 Input wrapper,改為可點擊觸發浮層)
+ * Trigger:`<div role="combobox">` + `fieldWrapperStyles`(視覺仍是 Input wrapper,改為可點擊觸發浮層;
+ *   2026-04-25 由 `<button>` 改 div 避 nested-interactive,對齊 Select / Combobox,鍵盤靠顯式 onKeyDown)
  * Popup:`Popover`(消費 overlay-surface pattern)
  * Panel 主體:自建 column picker(三欄 scrollable list),不引入第三方 time library
  *
@@ -35,7 +36,7 @@ export interface DisabledTimeResult {
     disabledMinutes?: number[];
     disabledSeconds?: number[];
 }
-export interface TimePickerProps extends TimeFormatOptions, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {
+export interface TimePickerProps extends TimeFormatOptions, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder' | 'defaultValue'> {
     mode?: FieldMode;
     /** Field chrome variant. Default = context.variant ?? 'default'. Per-prop override. */
     variant?: FieldVariant;
@@ -66,9 +67,9 @@ export interface TimePickerProps extends TimeFormatOptions, Omit<React.HTMLAttri
      */
     endIcon?: LucideIcon | null;
     /**
-     * Display 是否渲 endIcon + Field naked wrapper(D-path opt-in,2026-05-08)
-     * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 span,backward compat)。
-     * 設 true 時 display 也走 fieldWrapperStyles(naked variant)+ ItemSuffix Clock,
+     * View 態是否渲 endIcon + Field naked wrapper(D-path opt-in,2026-05-08)
+     * — DataTable cell view↔edit 像素級對齊用。預設 false(裸 span,backward compat)。
+     * 設 true 時 view 也走 fieldWrapperStyles(naked variant)+ ItemSuffix Clock,
      * 與 edit 同 DOM 結構,消除 Layer-B padding mismatch。
      */
     showDisplayEndIcon?: boolean;
@@ -83,9 +84,9 @@ export declare const timePickerMeta: {
     readonly family: 4;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "selected", "focus-visible", "disabled"];
     readonly tokens: {
-        readonly bg: readonly ["bg-neutral-hover", "bg-primary", "bg-transparent"];
+        readonly bg: readonly ["bg-neutral-hover", "bg-neutral-selected", "bg-transparent"];
         readonly fg: readonly ["text-fg-disabled", "text-fg-muted", "text-foreground"];
         readonly ring: readonly [];
     };

package/dist/components/TimePicker/time-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/time-picker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAW3F,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,QAAQ,EAEd,MAAM,oDAAoD,CAAA;AAG3D;;;;;;;;;;;;;;;;;;;;;GAqBG;AASH,MAAM,WAAW,iBAAiB;IAChC,4FAA4F;IAC5F,aAAa,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAA;IAC1C,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAsBD,MAAM,WAAW,kBAAkB;IACjC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;CAC3B;AAID,MAAM,WAAW,eACf,SAAQ,iBAAiB,EACvB,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,aAAa,CAC3B;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uFAAuF;IACvF,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,kBAAkB,CAAA;IACvD;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IAC3B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mFAAmF;IACnF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAGD,QAAA,MAAM,UAAU,wFAgQf,CAAA;AAKD,eAAO,MAAM,cAAc;;;;;;;;;;;CAejB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/time-picker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAwB,MAAM,8CAA8C,CAAA;AAYjH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,QAAQ,EAEd,MAAM,oDAAoD,CAAA;AAG3D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AASH,MAAM,WAAW,iBAAiB;IAChC,4FAA4F;IAC5F,aAAa,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAA;IAC1C,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAqCD,MAAM,WAAW,kBAAkB;IACjC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;CAC3B;AAID,MAAM,WAAW,eACf,SAAQ,iBAAiB,EACvB,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAIpC,UAAU,GAAG,aAAa,GAAG,cAAc,CAC5C;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uFAAuF;IACvF,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,kBAAkB,CAAA;IACvD;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IAC3B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mFAAmF;IACnF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAGD,QAAA,MAAM,UAAU,wFAoSf,CAAA;AAKD,eAAO,MAAM,cAAc;;;;;;;;;;;CAkBjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/TimePicker/time-picker.js

@@ -2,12 +2,24 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Clock, X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-import { EMPTY_DISPLAY, fieldWrapperStyles, fieldDisplayTextClass, bareInputStyles } from "../Field/field-wrapper.js";
-import { ItemSuffix, ICON_SIZE, ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
+import { fieldDisplayTextClass, bareInputStyles, fieldWrapperStyles } from "../Field/field-wrapper.js";
+import { ICON_SIZE, ItemSuffix, ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
+import { TruncatedText } from "../../patterns/element-anatomy/truncated-text.js";
 import { Popover, PopoverTrigger, PopoverContent } from "../Popover/popover.js";
-import { useFieldContext } from "../Field/field-context.js";
+import { useFieldContext, useResolvedFieldSize, useResolvedFieldInvalid, useResolvedFieldDisabled, useResolvedFieldMode, useFieldEmptyDisplay, useResolvedFieldVariant, fieldEmptyColorClass } from "../Field/field-context.js";
 import { Button } from "../Button/button.js";
+import { SurfaceFooter } from "../../patterns/overlay-surface/overlay-surface.js";
 import { isoToTimeParts, TimeColumns, timePartsToString } from "./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 formatTime(iso, options = {}) {
   const parts = isoToTimeParts(iso);
   if (!parts) return iso;
@@ -17,14 +29,14 @@ function formatTime(iso, options = {}) {
   } = options;
   const d = /* @__PURE__ */ new Date();
   d.setHours(parts.hours, parts.minutes, parts.seconds, 0);
-  return new Intl.DateTimeFormat(locale, formatOptions).format(d);
+  return getDateTimeFormatter(locale, formatOptions).format(d);
 }
 const TimePicker = React.forwardRef(
   ({
-    mode = "edit",
+    mode,
     variant: variantProp,
     error: errorProp = false,
-    size = "md",
+    size: sizeProp,
     value,
     onChange,
     placeholder,
@@ -47,10 +59,12 @@ const TimePicker = 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 EndIconCmp = endIcon === null ? null : endIcon ?? Clock;
@@ -86,28 +100,32 @@ const TimePicker = React.forwardRef(
     };
     const handleNow = () => {
       const now = /* @__PURE__ */ new Date();
-      const m = Math.round(now.getMinutes() / minuteStep) * minuteStep;
-      const s = showSeconds ? Math.round(now.getSeconds() / secondStep) * secondStep : 0;
+      const alignToStep = (raw, step) => {
+        const rounded = Math.round(raw / step) * step;
+        return rounded > 59 ? Math.floor(59 / step) * step : rounded;
+      };
       const next = {
         hours: now.getHours(),
-        minutes: Math.min(m, 59),
-        seconds: Math.min(s, 59)
+        minutes: alignToStep(now.getMinutes(), minuteStep),
+        seconds: showSeconds ? alignToStep(now.getSeconds(), secondStep) : 0
       };
       commitDraft(next);
       setOpen(false);
     };
-    if (resolvedMode === "display") {
+    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: formatTime(value, { formatOptions, locale }) });
+        if (!value) return /* @__PURE__ */ jsx("span", { ...props, ref, className: cn(fieldDisplayTextClass(size), fieldEmptyColorClass(resolvedMode), className), children: emptyDisplay });
+        return /* @__PURE__ */ jsx("span", { ...props, ref, className: cn(fieldDisplayTextClass(size), "truncate", className), children: /* @__PURE__ */ jsx(TruncatedText, { display: "block", children: formatTime(value, { formatOptions, locale }) }) });
       }
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn(fieldWrapperStyles({ mode: "display", variant, size }), className),
-          "data-field-mode": "display",
+          ref,
+          ...props,
+          className: cn(fieldWrapperStyles({ mode: "view", variant, 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 ? formatTime(value, { formatOptions, locale }) : EMPTY_DISPLAY }),
+            /* @__PURE__ */ jsx(TruncatedText, { className: cn(bareInputStyles, "flex-1 min-w-0", !value && fieldEmptyColorClass(resolvedMode)), children: value ? formatTime(value, { formatOptions, locale }) : emptyDisplay }),
             EndIconCmp && /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(EndIconCmp, { size: iconSize, className: "text-fg-muted", "aria-hidden": true }) })
           ]
         }
@@ -117,8 +135,10 @@ const TimePicker = React.forwardRef(
       return /* @__PURE__ */ jsxs(
         "div",
         {
+          ref,
           className: cn(fieldWrapperStyles({ mode: resolvedMode, variant, size }), className),
           "data-field-mode": resolvedMode,
+          "aria-disabled": resolvedMode === "disabled" ? true : void 0,
           ...props,
           children: [
             /* @__PURE__ */ jsx(
@@ -128,10 +148,10 @@ const TimePicker = React.forwardRef(
                   "flex-1 min-w-0",
                   resolvedMode === "disabled" && "text-fg-disabled"
                 ),
-                children: value ? formatTime(value, { formatOptions, locale }) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY })
+                children: value ? formatTime(value, { formatOptions, locale }) : /* @__PURE__ */ jsx("span", { className: fieldEmptyColorClass(resolvedMode), children: emptyDisplay })
               }
             ),
-            EndIconCmp && /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(
+            EndIconCmp && (variant === "naked" ? showDisplayEndIcon : resolvedMode === "disabled") && /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(
               EndIconCmp,
               {
                 size: iconSize,
@@ -160,21 +180,26 @@ const TimePicker = React.forwardRef(
           "aria-errormessage": ariaErrorMessageProp ?? (error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0),
           "aria-haspopup": "dialog",
           "aria-expanded": open,
+          onKeyDown: (e) => {
+            if (disabled) return;
+            if (e.target !== e.currentTarget) return;
+            if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+              e.preventDefault();
+              setOpen(true);
+            }
+            if (e.key === "Escape") setOpen(false);
+          },
           "data-field-mode": "edit",
           "data-error": error ? "" : void 0,
           className: cn(
-            fieldWrapperStyles({ mode: "edit", variant, size }),
+            fieldWrapperStyles({ mode: "edit", variant, size, error }),
             "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: [
-            /* @__PURE__ */ jsx("span", { className: cn(bareInputStyles, "truncate", !value && "text-fg-muted"), children: displayText }),
+            /* @__PURE__ */ jsx(TruncatedText, { className: cn(bareInputStyles, !value && "text-fg-muted"), children: displayText }),
             showClear && /* @__PURE__ */ jsx(
               ItemInlineAction,
               {
@@ -194,7 +219,7 @@ const TimePicker = React.forwardRef(
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-[216px]", children: [
+      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", "aria-label": "選擇時間", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-[216px]", children: [
         /* @__PURE__ */ jsx(
           TimeColumns,
           {
@@ -207,28 +232,18 @@ const TimePicker = React.forwardRef(
             className: "flex-1 min-h-0"
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex items-center justify-between gap-2",
-              "border-t border-divider",
-              "px-[var(--layout-space-tight)] py-[var(--layout-space-tight)]"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", onClick: handleNow, children: "此刻" }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "primary",
-                  size: "sm",
-                  onClick: () => setOpen(false),
-                  children: "確定"
-                }
-              )
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs(SurfaceFooter, { className: "px-[var(--layout-space-tight)]", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", onClick: handleNow, className: "mr-auto", children: "此刻" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              size: "sm",
+              onClick: () => setOpen(false),
+              children: "確定"
+            }
+          )
+        ] })
       ] }) })
     ] });
   }
@@ -239,9 +254,12 @@ const timePickerMeta = {
   family: 4,
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // states 對齊真實視覺態:trigger 與 panel item 皆無 'active'(按下)專屬視覺態(2026-07-04 audit 對齊);
+  // 'selected' = panel item 持續選中(bg-neutral-selected,time-columns.tsx isSelected;2026-07-07 詞彙統一補列)。
+  states: ["default", "hover", "selected", "focus-visible", "disabled"],
   tokens: {
-    bg: ["bg-neutral-hover", "bg-primary", "bg-transparent"],
+    // panel selected 走 bg-neutral-selected(time-columns.tsx isSelected;spec「欄內 item 狀態」),非 bg-primary。
+    bg: ["bg-neutral-hover", "bg-neutral-selected", "bg-transparent"],
     fg: ["text-fg-disabled", "text-fg-muted", "text-foreground"],
     ring: []
   }

package/dist/components/TimePicker/time-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.js","sources":["../../../src/components/TimePicker/time-picker.tsx"],"sourcesContent":["// @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.\nimport * as React from 'react'\nimport { X, Clock } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport {\n  fieldWrapperStyles,\n  bareInputStyles,\n  EMPTY_DISPLAY,\n  fieldDisplayTextClass,\n} from '@/design-system/components/Field/field-wrapper'\nimport { ItemInlineAction, ItemSuffix } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { Popover, PopoverTrigger, PopoverContent } from '@/design-system/components/Popover/popover'\nimport { useFieldContext } from '@/design-system/components/Field/field-context'\nimport { Button } from '@/design-system/components/Button/button'\nimport {\n  TimeColumns,\n  isoToTimeParts,\n  timePartsToString,\n  type TimeParts,\n  type TimeStep,\n  type TimeColumnsDisabled,\n} from '@/design-system/components/TimePicker/time-columns'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\n\n/**\n * TimePicker — 單一時間(時/分/秒)輸入與顯示元件\n *\n * ── 定位(同 DatePicker 家族)──\n * Value 以 ISO time string 儲存(\"HH:mm\" 或 \"HH:mm:ss\"),local-time 語義(不帶時區)。\n * Edit 用本 DS 自建 time column panel + Popover 呈現,視覺與 DatePicker 一致。\n * Display 用 Intl.DateTimeFormat 格式化(跨 locale / 12h-24h 統一經過此 API)。\n *\n * ── Layout Family ──\n * CLAUDE.md 4-Family Model Family 4(Field control layout)消費者。結構繼承\n * `fieldWrapperStyles + [<editable>] [endIcon=Clock]`,視覺對齊 DatePicker(同\n * 「點擊觸發浮層」role:indicator 在 suffix slot,對齊 Material `endAdornment` /\n * Ant DatePicker / Polaris Picker 共識)。\n *\n * ── 實作基礎 ──\n * Trigger:`<button>` + `fieldWrapperStyles`(視覺仍是 Input wrapper,改為可點擊觸發浮層)\n * Popup:`Popover`(消費 overlay-surface pattern)\n * Panel 主體:自建 column picker(三欄 scrollable list),不引入第三方 time library\n *\n * ── 共用規則 ──\n * Mode / size / disabled / error 等詳見 `../Field/field-controls.spec.md`。\n */\n\n// ── Time ISO <-> parts conversion ───────────────────────────────────────────\n// Value 用 ISO time string(HH:mm 或 HH:mm:ss),local-time 語義(不帶時區/日期)。\n// 跟 DatePicker 的 ISO date string 策略一致。\n// `isoToTimeParts` / `timePartsToString` 改 import from time-columns(M17 SSOT)。\n\n// ── Display formatting ──────────────────────────────────────────────────────\n\nexport interface TimeFormatOptions {\n  /** Intl.DateTimeFormat options(預設 { hour: '2-digit', minute: '2-digit', hour12: false }) */\n  formatOptions?: Intl.DateTimeFormatOptions\n  /** locale(預設 'en-US') */\n  locale?: string\n}\n\nfunction formatTime(\n  iso: string,\n  options: TimeFormatOptions = {},\n): string {\n  const parts = isoToTimeParts(iso)\n  if (!parts) return iso\n  const {\n    formatOptions = { hour: '2-digit', minute: '2-digit', hour12: false },\n    locale = 'en-US',\n  } = options\n  // 借用 Date 讓 Intl.DateTimeFormat 處理 locale / 12h-24h\n  const d = new Date()\n  d.setHours(parts.hours, parts.minutes, parts.seconds, 0)\n  return new Intl.DateTimeFormat(locale, formatOptions).format(d)\n}\n\n// ── Disabled time callback ──────────────────────────────────────────────────\n// `Step` / `buildRange` / `TimeColumn`(內部欄位實作)拔掉,改 import `TimeColumns` primitive。\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport interface DisabledTimeResult {\n  disabledHours?: number[]\n  disabledMinutes?: number[]\n  disabledSeconds?: number[]\n}\n\n// ── Component props ─────────────────────────────────────────────────────────\n\nexport interface TimePickerProps\n  extends TimeFormatOptions,\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'onChange' | 'placeholder'\n    > {\n  mode?: FieldMode\n  /** Field chrome variant. Default = context.variant ?? 'default'. Per-prop override. */\n  variant?: FieldVariant\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  /** ISO time string(\"HH:mm\" 或 \"HH:mm:ss\") */\n  value?: string | null\n  onChange?: (value: string) => void\n  placeholder?: string\n  className?: string\n  disabled?: boolean\n  /** 允許清空已選值 */\n  clearable?: boolean\n  /**\n   * 是否顯示秒欄(三欄 picker)。預設 false(兩欄:時/分)。\n   * format 自動對應:false → \"HH:mm\",true → \"HH:mm:ss\"。\n   */\n  showSeconds?: boolean\n  /** 分鐘步進(會議常用 15)。預設 1 */\n  minuteStep?: TimeStep\n  /** 秒步進。預設 1。僅 showSeconds=true 有效 */\n  secondStep?: TimeStep\n  /** 動態 disabled 某些時/分/秒(基於已選其他欄位)。 */\n  disabledTime?: (parts: TimeParts) => DisabledTimeResult\n  /**\n   * Suffix indicator(2026-05-05 v9 canonical fix):「點擊觸發浮層」indicator 一律 suffix\n   * (對齊 DatePicker calendar / Material endAdornment)。預設 Clock,傳 null 可關閉。\n   */\n  endIcon?: LucideIcon | null\n  /**\n   * Display 是否渲 endIcon + Field naked wrapper(D-path opt-in,2026-05-08)\n   * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 span,backward compat)。\n   * 設 true 時 display 也走 fieldWrapperStyles(naked variant)+ ItemSuffix Clock,\n   * 與 edit 同 DOM 結構,消除 Layer-B padding mismatch。\n   */\n  showDisplayEndIcon?: boolean\n  /** Initial open state(uncontrolled)— DataTable cell-as-input 1-step open canonical */\n  defaultOpen?: boolean\n  /** open state 變更 callback。DataTable cell-as-input 用:open=false → cell exit edit */\n  onOpenChange?: (open: boolean) => void\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n  (\n    {\n      mode = 'edit',\n      variant: variantProp,\n      error: errorProp = false,\n      size = 'md',\n      value,\n      onChange,\n      placeholder,\n      className,\n      disabled: disabledProp,\n      clearable = false,\n      showSeconds = false,\n      minuteStep = 1,\n      secondStep = 1,\n      disabledTime,\n      endIcon,\n      showDisplayEndIcon = false,\n      formatOptions,\n      locale,\n      defaultOpen = false,\n      onOpenChange,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-errormessage': ariaErrorMessageProp,\n      ...props\n    },\n    ref,\n  ) => {\n    const fieldCtx = useFieldContext()\n    const error = errorProp || (fieldCtx?.invalid ?? false)\n    const disabled = disabledProp ?? fieldCtx?.disabled\n    const resolvedMode = disabled ? 'disabled' : mode\n    const variant: FieldVariant = variantProp ?? fieldCtx?.variant ?? 'default'\n    const isEditable = resolvedMode === 'edit'\n    // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n  const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']\n    const EndIconCmp: LucideIcon | null =\n      endIcon === null ? null : (endIcon ?? Clock)\n    const defaultPlaceholder = showSeconds ? 'HH:MM:SS' : 'HH:MM'\n    const resolvedPlaceholder = placeholder ?? defaultPlaceholder\n    const showClear = clearable && !!value && isEditable\n    const [open, setOpenState] = React.useState(defaultOpen)\n    const setOpen = React.useCallback((next: boolean) => { setOpenState(next); onOpenChange?.(next) }, [onOpenChange])\n\n    const currentParts = React.useMemo(() => isoToTimeParts(value), [value])\n    // draft 僅在 panel 開啟時用來處理 commit(OK button)的暫存\n    const [draft, setDraft] = React.useState<TimeParts>(\n      () => currentParts ?? { hours: 0, minutes: 0, seconds: 0 },\n    )\n\n    // 每次 popover 開啟時以當前 value 初始化 draft\n    React.useEffect(() => {\n      if (open) {\n        setDraft(currentParts ?? { hours: 0, minutes: 0, seconds: 0 })\n      }\n    }, [open, currentParts])\n\n    const disabledForColumns: TimeColumnsDisabled | undefined = React.useMemo(() => {\n      if (!disabledTime) return undefined\n      const res = disabledTime(draft)\n      return {\n        hours: res.disabledHours,\n        minutes: res.disabledMinutes,\n        seconds: res.disabledSeconds,\n      }\n    }, [disabledTime, draft])\n\n    const commitDraft = (next: TimeParts) => {\n      setDraft(next)\n      onChange?.(timePartsToString(next, showSeconds))\n    }\n\n    const handleNow = () => {\n      const now = new Date()\n      // 按照 minuteStep / secondStep 對齊\n      const m = Math.round(now.getMinutes() / minuteStep) * minuteStep\n      const s = showSeconds\n        ? Math.round(now.getSeconds() / secondStep) * secondStep\n        : 0\n      const next: TimeParts = {\n        hours: now.getHours(),\n        minutes: Math.min(m, 59),\n        seconds: Math.min(s, 59),\n      }\n      commitDraft(next)\n      setOpen(false)\n    }\n\n    // mode='display'(Phase B2 2026-05-05):純內容輸出 — 對齊原 TimePickerDisplay sub-component(retired)。\n    //   Default(showDisplayEndIcon=false):無 Field wrapper / 無 Clock icon — backward compat 裸 span。\n    //   Opt-in(showDisplayEndIcon=true,2026-05-08 D-path):Field naked wrapper + ItemSuffix Clock,\n    //   與 edit 同結構消除 cell display↔edit 像素偏移(Layer-B padding mismatch)。\n    if (resolvedMode === 'display') {\n      if (!showDisplayEndIcon) {\n        // 2026-05-14 I2 fix(spec contract (e) display typography canonical):bare span 套\n        // `fieldDisplayTextClass(size)`(sm/md→text-body,lg→text-body-lg)— 對齊 Field family 統一。\n        if (!value) return <span className={cn(fieldDisplayTextClass(size), 'text-fg-muted', className)}>{EMPTY_DISPLAY}</span>\n        return <span className={cn(fieldDisplayTextClass(size), 'truncate', className)}>{formatTime(value, { formatOptions, locale })}</span>\n      }\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: 'display', variant, size }), className)}\n          data-field-mode=\"display\"\n        >\n          <span className={cn(bareInputStyles, 'flex-1 min-w-0 truncate', !value && 'text-fg-muted')}>\n            {value ? formatTime(value, { formatOptions, locale }) : EMPTY_DISPLAY}\n          </span>\n          {EndIconCmp && (\n            <ItemSuffix className=\"pointer-events-none\">\n              <EndIconCmp size={iconSize} className=\"text-fg-muted\" aria-hidden />\n            </ItemSuffix>\n          )}\n        </div>\n      )\n    }\n\n    // readonly / disabled\n    if (!isEditable) {\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: variant, size }), className)}\n          data-field-mode={resolvedMode}\n          {...(props as React.HTMLAttributes<HTMLDivElement>)}\n        >\n          <span\n            className={cn(\n              'flex-1 min-w-0',\n              resolvedMode === 'disabled' && 'text-fg-disabled',\n            )}\n          >\n            {value\n              ? formatTime(value, { formatOptions, locale })\n              : <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n            }\n          </span>\n          {EndIconCmp && (\n            <ItemSuffix className=\"pointer-events-none\">\n              <EndIconCmp\n                size={iconSize}\n                className={resolvedMode === 'disabled' ? 'text-fg-disabled' : 'text-fg-muted'}\n                aria-hidden\n              />\n            </ItemSuffix>\n          )}\n        </div>\n      )\n    }\n\n    const displayText = value\n      ? formatTime(value, { formatOptions, locale })\n      : <span className=\"text-fg-muted\">{resolvedPlaceholder}</span>\n\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        {/* a11y(2026-04-25 nested-interactive fix):trigger 改 <div role='combobox'>\n            (對齊 Select / Combobox 同 pattern),原 <button> 會與內層 ItemInlineAction\n            清除 button 構成 nested-interactive。Radix Popover 在 trigger asChild 下會\n            自動 inject keyboard handler(Enter / Space 開啟)+ 正確 aria attributes。 */}\n        <PopoverTrigger asChild>\n          <div\n            ref={ref}\n            id={idProp ?? fieldCtx?.id}\n            role=\"combobox\"\n            tabIndex={disabled ? -1 : 0}\n            aria-disabled={disabled || undefined}\n            aria-labelledby={fieldCtx?.labelId}\n            aria-invalid={error || undefined}\n            aria-required={fieldCtx?.required || undefined}\n            aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}\n            aria-errormessage={ariaErrorMessageProp ?? (error ? fieldCtx?.errorId : undefined)}\n            aria-haspopup=\"dialog\"\n            aria-expanded={open}\n            data-field-mode=\"edit\"\n            data-error={error ? '' : undefined}\n            className={cn(\n              fieldWrapperStyles({ mode: 'edit', variant: variant, size }),\n              'text-left cursor-pointer',\n              'focus-visible:outline-none',\n              error && [\n                'border-error hover:border-error-hover',\n                'focus-within:border-error focus-within:hover:border-error',\n              ],\n              className,\n            )}\n            {...props}\n          >\n            <span className={cn(bareInputStyles, 'truncate', !value && 'text-fg-muted')}>\n              {displayText}\n            </span>\n            {showClear && (\n              <ItemInlineAction\n                size={size ?? 'md'}\n                action={{\n                  icon: X,\n                  label: '清除時間', // i18n-allow: DS default inline-action label\n                  onClick: (e) => {\n                    e?.stopPropagation()\n                    onChange?.('')\n                  },\n                }}\n              />\n            )}\n            {EndIconCmp && (\n              <ItemSuffix className=\"pointer-events-none\">\n                <EndIconCmp size={iconSize} className=\"text-fg-muted\" aria-hidden />\n              </ItemSuffix>\n            )}\n          </div>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          {/* Panel 對齊 ref/timepicker.png:2-3 個 SelectMenu 式欄位並排,分隔線分開。\n              Width 依欄數由 TimeColumns 決定:2 欄 w-40 / 3 欄 w-60。\n              Height 由 wrapper 控:216px 預設(~7 items)。\n              TimeColumns 本身 h-full,parent 控 height — 讓 DatePicker showTime / Range 可\n              用 flex-row items-stretch 自動同 calendar 高。 */}\n          <div className=\"flex flex-col h-[216px]\">\n            <TimeColumns\n              value={draft}\n              onChange={commitDraft}\n              showSeconds={showSeconds}\n              minuteStep={minuteStep}\n              secondStep={secondStep}\n              disabled={disabledForColumns}\n              // 2026-05-06 v9.1 M25 chain fix:TimeColumns 自然高 = 24 buttons × ~28.7px = 688px\n              // 會撐破 parent h-[216px]。flex-1 + min-h-0 讓 TimeColumns 取 parent 剩餘空間\n              // (216 - footer 40 = 176px)→ ScrollArea h-full 才能正確收斂 →\n              // listbox scrollIntoView 找對 nearest scrollable ancestor(內部 viewport),\n              // 不會走到 document body 把 popover 內容推出畫面(user 報「hours 欄空白」根因)。\n              className=\"flex-1 min-h-0\"\n            />\n            {/* Footer:Now + OK */}\n            <div\n              className={cn(\n                'flex items-center justify-between gap-2',\n                'border-t border-divider',\n                'px-[var(--layout-space-tight)] py-[var(--layout-space-tight)]',\n              )}\n            >\n              <Button variant=\"text\" size=\"sm\" onClick={handleNow}>\n                此刻\n              </Button>\n              <Button\n                variant=\"primary\"\n                size=\"sm\"\n                onClick={() => setOpen(false)}\n              >\n                確定\n              </Button>\n            </div>\n          </div>\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\nTimePicker.displayName = 'TimePicker'\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 timePickerMeta = {\n  component: 'TimePicker',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-neutral-hover', 'bg-primary', 'bg-transparent'],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { TimePicker }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"time-picker.js","sources":["../../../src/components/TimePicker/time-picker.tsx"],"sourcesContent":["// @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.\nimport * as React from 'react'\nimport { X, Clock } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant, FieldVariantInternal } from '@/design-system/components/Field/field-types'\nimport {\n  fieldWrapperStyles,\n  bareInputStyles,\n  fieldDisplayTextClass,\n} from '@/design-system/components/Field/field-wrapper'\nimport { ItemInlineAction, ItemSuffix } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { TruncatedText } from '@/design-system/patterns/element-anatomy/truncated-text'\nimport { Popover, PopoverTrigger, PopoverContent } from '@/design-system/components/Popover/popover'\nimport { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant, useResolvedFieldInvalid, useFieldEmptyDisplay, fieldEmptyColorClass } from '@/design-system/components/Field/field-context'\nimport { Button } from '@/design-system/components/Button/button'\nimport { SurfaceFooter } from '@/design-system/patterns/overlay-surface/overlay-surface'\nimport {\n  TimeColumns,\n  isoToTimeParts,\n  timePartsToString,\n  type TimeParts,\n  type TimeStep,\n  type TimeColumnsDisabled,\n} from '@/design-system/components/TimePicker/time-columns'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\n\n/**\n * TimePicker — 單一時間(時/分/秒)輸入與顯示元件\n *\n * ── 定位(同 DatePicker 家族)──\n * Value 以 ISO time string 儲存(\"HH:mm\" 或 \"HH:mm:ss\"),local-time 語義(不帶時區)。\n * Edit 用本 DS 自建 time column panel + Popover 呈現,視覺與 DatePicker 一致。\n * Display 用 Intl.DateTimeFormat 格式化(跨 locale / 12h-24h 統一經過此 API)。\n *\n * ── Layout Family ──\n * CLAUDE.md 4-Family Model Family 4(Field control layout)消費者。結構繼承\n * `fieldWrapperStyles + [<editable>] [endIcon=Clock]`,視覺對齊 DatePicker(同\n * 「點擊觸發浮層」role:indicator 在 suffix slot,對齊 Material `endAdornment` /\n * Ant DatePicker / Polaris Picker 共識)。\n *\n * ── 實作基礎 ──\n * Trigger:`<div role=\"combobox\">` + `fieldWrapperStyles`(視覺仍是 Input wrapper,改為可點擊觸發浮層;\n *   2026-04-25 由 `<button>` 改 div 避 nested-interactive,對齊 Select / Combobox,鍵盤靠顯式 onKeyDown)\n * Popup:`Popover`(消費 overlay-surface pattern)\n * Panel 主體:自建 column picker(三欄 scrollable list),不引入第三方 time library\n *\n * ── 共用規則 ──\n * Mode / size / disabled / error 等詳見 `../Field/field-controls.spec.md`。\n */\n\n// ── Time ISO <-> parts conversion ───────────────────────────────────────────\n// Value 用 ISO time string(HH:mm 或 HH:mm:ss),local-time 語義(不帶時區/日期)。\n// 跟 DatePicker 的 ISO date string 策略一致。\n// `isoToTimeParts` / `timePartsToString` 改 import from time-columns(M17 SSOT)。\n\n// ── Display formatting ──────────────────────────────────────────────────────\n\nexport interface TimeFormatOptions {\n  /** Intl.DateTimeFormat options(預設 { hour: '2-digit', minute: '2-digit', hour12: false }) */\n  formatOptions?: Intl.DateTimeFormatOptions\n  /** locale(預設 'en-US') */\n  locale?: string\n}\n\n// 2026-07-06 D3 perf:Intl.DateTimeFormat 是標準庫最貴 constructor 之一(locale data\n// resolution)。formatTime 無 cheap path,view/readonly/edit 每 render 必建;DataTable time 欄\n// 轉發 config 時每 cell × 每次表格 re-render 重建。module-level cache 重用實例(DateTimeFormat\n// 無狀態可安全重用),key = locale|JSON.stringify(options)。行為 Δ=0。\nconst dtfCache = new Map<string, Intl.DateTimeFormat>()\nfunction getDateTimeFormatter(locale: string, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {\n  const key = locale + '|' + JSON.stringify(options)\n  let fmt = dtfCache.get(key)\n  if (!fmt) {\n    fmt = new Intl.DateTimeFormat(locale, options)\n    dtfCache.set(key, fmt)\n  }\n  return fmt\n}\n\nfunction formatTime(\n  iso: string,\n  options: TimeFormatOptions = {},\n): string {\n  const parts = isoToTimeParts(iso)\n  if (!parts) return iso\n  const {\n    formatOptions = { hour: '2-digit', minute: '2-digit', hour12: false },\n    locale = 'en-US',\n  } = options\n  // 借用 Date 讓 Intl.DateTimeFormat 處理 locale / 12h-24h\n  const d = new Date()\n  d.setHours(parts.hours, parts.minutes, parts.seconds, 0)\n  return getDateTimeFormatter(locale, formatOptions).format(d)\n}\n\n// ── Disabled time callback ──────────────────────────────────────────────────\n// `Step` / `buildRange` / `TimeColumn`(內部欄位實作)拔掉,改 import `TimeColumns` primitive。\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport interface DisabledTimeResult {\n  disabledHours?: number[]\n  disabledMinutes?: number[]\n  disabledSeconds?: number[]\n}\n\n// ── Component props ─────────────────────────────────────────────────────────\n\nexport interface TimePickerProps\n  extends TimeFormatOptions,\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      // 'defaultValue' 明確排除:本元件 controlled-only(time-picker.spec.md「Controlled-only\n      // rationale」),不支援 uncontrolled 初始值 — 若不 Omit,HTMLAttributes 會讓 defaultValue\n      // 通過型別卻靜默無效(不初始化 draft),與 spec contract 矛盾。\n      'onChange' | 'placeholder' | 'defaultValue'\n    > {\n  mode?: FieldMode\n  /** Field chrome variant. Default = context.variant ?? 'default'. Per-prop override. */\n  variant?: FieldVariant\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  /** ISO time string(\"HH:mm\" 或 \"HH:mm:ss\") */\n  value?: string | null\n  onChange?: (value: string) => void\n  placeholder?: string\n  className?: string\n  disabled?: boolean\n  /** 允許清空已選值 */\n  clearable?: boolean\n  /**\n   * 是否顯示秒欄(三欄 picker)。預設 false(兩欄:時/分)。\n   * format 自動對應:false → \"HH:mm\",true → \"HH:mm:ss\"。\n   */\n  showSeconds?: boolean\n  /** 分鐘步進(會議常用 15)。預設 1 */\n  minuteStep?: TimeStep\n  /** 秒步進。預設 1。僅 showSeconds=true 有效 */\n  secondStep?: TimeStep\n  /** 動態 disabled 某些時/分/秒(基於已選其他欄位)。 */\n  disabledTime?: (parts: TimeParts) => DisabledTimeResult\n  /**\n   * Suffix indicator(2026-05-05 v9 canonical fix):「點擊觸發浮層」indicator 一律 suffix\n   * (對齊 DatePicker calendar / Material endAdornment)。預設 Clock,傳 null 可關閉。\n   */\n  endIcon?: LucideIcon | null\n  /**\n   * View 態是否渲 endIcon + Field naked wrapper(D-path opt-in,2026-05-08)\n   * — DataTable cell view↔edit 像素級對齊用。預設 false(裸 span,backward compat)。\n   * 設 true 時 view 也走 fieldWrapperStyles(naked variant)+ ItemSuffix Clock,\n   * 與 edit 同 DOM 結構,消除 Layer-B padding mismatch。\n   */\n  showDisplayEndIcon?: boolean\n  /** Initial open state(uncontrolled)— DataTable cell-as-input 1-step open canonical */\n  defaultOpen?: boolean\n  /** open state 變更 callback。DataTable cell-as-input 用:open=false → cell exit edit */\n  onOpenChange?: (open: boolean) => void\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n  (\n    {\n      mode,\n      variant: variantProp,\n      error: errorProp = false,\n      size: sizeProp,\n      value,\n      onChange,\n      placeholder,\n      className,\n      disabled: disabledProp,\n      clearable = false,\n      showSeconds = false,\n      minuteStep = 1,\n      secondStep = 1,\n      disabledTime,\n      endIcon,\n      showDisplayEndIcon = false,\n      formatOptions,\n      locale,\n      defaultOpen = false,\n      onOpenChange,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-errormessage': ariaErrorMessageProp,\n      ...props\n    },\n    ref,\n  ) => {\n    const fieldCtx = useFieldContext()\n    const size = useResolvedFieldSize(sizeProp)  // B 組 cascade fix\n    const error = useResolvedFieldInvalid(errorProp)\n    const disabled = useResolvedFieldDisabled(disabledProp)\n    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode;修 <Field mode=\"view\"> 漏 cascade\n    const resolvedMode = useResolvedFieldMode({ mode, disabled })\n    const emptyDisplay = useFieldEmptyDisplay()\n    const variant: FieldVariantInternal = useResolvedFieldVariant(variantProp)\n    const isEditable = resolvedMode === 'edit'\n    // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n  const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']\n    const EndIconCmp: LucideIcon | null =\n      endIcon === null ? null : (endIcon ?? Clock)\n    const defaultPlaceholder = showSeconds ? 'HH:MM:SS' : 'HH:MM'\n    const resolvedPlaceholder = placeholder ?? defaultPlaceholder\n    const showClear = clearable && !!value && isEditable\n    const [open, setOpenState] = React.useState(defaultOpen)\n    const setOpen = React.useCallback((next: boolean) => { setOpenState(next); onOpenChange?.(next) }, [onOpenChange])\n\n    const currentParts = React.useMemo(() => isoToTimeParts(value), [value])\n    // draft = panel 開啟期間的暫存:供 eager commit(每次欄選 commitDraft 即 commit)+ disabledTime 重算;OK 按鈕只 setOpen(false) 關 Panel,不做 commit\n    const [draft, setDraft] = React.useState<TimeParts>(\n      () => currentParts ?? { hours: 0, minutes: 0, seconds: 0 },\n    )\n\n    // 每次 popover 開啟時以當前 value 初始化 draft\n    React.useEffect(() => {\n      if (open) {\n        setDraft(currentParts ?? { hours: 0, minutes: 0, seconds: 0 })\n      }\n    }, [open, currentParts])\n\n    const disabledForColumns: TimeColumnsDisabled | undefined = React.useMemo(() => {\n      if (!disabledTime) return undefined\n      const res = disabledTime(draft)\n      return {\n        hours: res.disabledHours,\n        minutes: res.disabledMinutes,\n        seconds: res.disabledSeconds,\n      }\n    }, [disabledTime, draft])\n\n    const commitDraft = (next: TimeParts) => {\n      setDraft(next)\n      onChange?.(timePartsToString(next, showSeconds))\n    }\n\n    const handleNow = () => {\n      const now = new Date()\n      // 按照 minuteStep / secondStep 對齊。\n      // 2026-07-05 邊界修正(deep-audit A.1b):Math.round 進位到 60 時,舊 `Math.min(round, 59)`\n      // 會產生 59 這種「不對齊 step、也不在 column values 內」的值(如 53 分 @ step=15 → 59)\n      // → panel 該欄失去 selected 高亮。改 clamp 到 ≤59 的最大 step 對齊值(= buildRange 產出的\n      // 最後一格,如 45),不跨小時進位 — 保持「此刻 = commit 當前時間(step 對齊)」語意\n      // (time-picker.spec.md「每次欄位選取當下即 commit」段)。\n      const alignToStep = (raw: number, step: number) => {\n        const rounded = Math.round(raw / step) * step\n        return rounded > 59 ? Math.floor(59 / step) * step : rounded\n      }\n      const next: TimeParts = {\n        hours: now.getHours(),\n        minutes: alignToStep(now.getMinutes(), minuteStep),\n        seconds: showSeconds ? alignToStep(now.getSeconds(), secondStep) : 0,\n      }\n      commitDraft(next)\n      setOpen(false)\n    }\n\n    // mode='view'(Phase B2 2026-05-05):純內容輸出 — 對齊原 TimePickerDisplay sub-component(retired)。\n    //   Default(showDisplayEndIcon=false):無 Field wrapper / 無 Clock icon — backward compat 裸 span。\n    //   Opt-in(showDisplayEndIcon=true,2026-05-08 D-path):Field naked wrapper + ItemSuffix Clock,\n    //   與 edit 同結構消除 cell view↔edit 像素偏移(Layer-B padding mismatch)。\n    if (resolvedMode === 'view') {\n      // 2026-07-16 DA3 fix:view 分支補 {...props} spread(aria-label 等 DOM attr 原本靜默丟失;\n      // Switch 同型 2026-07-04 已修,本檔漏 — M10 同型)。\n      if (!showDisplayEndIcon) {\n        // 2026-05-14 I2 fix(spec contract (e) view typography canonical):bare span 套\n        // `fieldDisplayTextClass(size)`(sm/md→text-body,lg→text-body-lg)— 對齊 Field family 統一。\n        if (!value) return <span {...props} ref={ref as React.Ref<HTMLSpanElement>} className={cn(fieldDisplayTextClass(size), fieldEmptyColorClass(resolvedMode), className)}>{emptyDisplay}</span>\n        // 截斷必附 tooltip(tooltip.spec.md:32)— 外層 span 保留 ref/props 轉發(2026-07-16 DA3),\n        // 值文字包 TruncatedText(display=\"block\":外層 span 在 flex cell 內是 block container)\n        return <span {...props} ref={ref as React.Ref<HTMLSpanElement>} className={cn(fieldDisplayTextClass(size), 'truncate', className)}><TruncatedText display=\"block\">{formatTime(value, { formatOptions, locale })}</TruncatedText></span>\n      }\n      return (\n        <div\n          ref={ref}\n          {...props}\n          className={cn(fieldWrapperStyles({ mode: 'view', variant, size }), className)}\n          data-field-mode=\"view\"\n        >\n          {/* 截斷必附 tooltip(tooltip.spec.md:32;data-table.spec.md:183 view 態元件自管 truncation) */}\n          <TruncatedText className={cn(bareInputStyles, 'flex-1 min-w-0', !value && fieldEmptyColorClass(resolvedMode))}>\n            {value ? formatTime(value, { formatOptions, locale }) : emptyDisplay}\n          </TruncatedText>\n          {EndIconCmp && (\n            <ItemSuffix className=\"pointer-events-none\">\n              <EndIconCmp size={iconSize} className=\"text-fg-muted\" aria-hidden />\n            </ItemSuffix>\n          )}\n        </div>\n      )\n    }\n\n    // readonly / disabled\n    if (!isEditable) {\n      return (\n        <div\n          // 2026-07-16 DA3 fix:非-edit 分支補 ref 轉發(forwardRef<HTMLDivElement> 原本只有 edit\n          // 與 bare-span view 接 ref,readonly/disabled 及 endIcon-view div 靜默丟失 — 同 view props 漏接)。\n          ref={ref}\n          className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: variant, size }), className)}\n          data-field-mode={resolvedMode}\n          aria-disabled={resolvedMode === 'disabled' ? true : undefined}\n          {...(props as React.HTMLAttributes<HTMLDivElement>)}\n        >\n          <span\n            className={cn(\n              'flex-1 min-w-0',\n              resolvedMode === 'disabled' && 'text-fg-disabled',\n            )}\n          >\n            {value\n              ? formatTime(value, { formatOptions, locale })\n              : <span className={fieldEmptyColorClass(resolvedMode)}>{emptyDisplay}</span>\n            }\n          </span>\n          {/* 2026-06-26 類型身份 indicator:edit 顯示 / readonly 不顯示 / disabled 保留(fg-disabled);naked cell 依 showDisplayEndIcon=isEditable(修 disabled cell 漏顯 bug)*/}\n          {EndIconCmp && (variant === 'naked' ? showDisplayEndIcon : resolvedMode === 'disabled') && (\n            <ItemSuffix className=\"pointer-events-none\">\n              <EndIconCmp\n                size={iconSize}\n                className={resolvedMode === 'disabled' ? 'text-fg-disabled' : 'text-fg-muted'}\n                aria-hidden\n              />\n            </ItemSuffix>\n          )}\n        </div>\n      )\n    }\n\n    const displayText = value\n      ? formatTime(value, { formatOptions, locale })\n      : <span className=\"text-fg-muted\">{resolvedPlaceholder}</span>\n\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        {/* a11y(2026-04-25 nested-interactive fix):trigger 改 <div role='combobox'>\n            (對齊 Select / Combobox 同 pattern),原 <button> 會與內層 ItemInlineAction\n            清除 button 構成 nested-interactive。\n            2026-06-01 鍵盤開啟修正:Radix PopoverTrigger 只 compose onClick\n            (@radix-ui/react-popover index.js:145),不 inject 任何 onKeyDown。原生 <button>\n            靠瀏覽器在 Enter/Space 自動派發 click 才能開;但本 trigger 是 <div role=combobox>,\n            div 不會自動派發 click → 鍵盤使用者打不開 panel。故顯式加 onKeyDown\n            (對齊 select.tsx:609-619 既有 canonical + WAI-ARIA APG combobox required keys)。 */}\n        <PopoverTrigger asChild>\n          <div\n            ref={ref}\n            id={idProp ?? fieldCtx?.id}\n            role=\"combobox\"\n            tabIndex={disabled ? -1 : 0}\n            aria-disabled={disabled || undefined}\n            aria-labelledby={fieldCtx?.labelId}\n            aria-invalid={error || undefined}\n            aria-required={fieldCtx?.required || undefined}\n            aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}\n            aria-errormessage={ariaErrorMessageProp ?? (error ? fieldCtx?.errorId : undefined)}\n            aria-haspopup=\"dialog\"\n            aria-expanded={open}\n            onKeyDown={(e) => {\n              if (disabled) return\n              // 2026-07-14 dim-10 修:內層「清除時間」ItemInlineAction button 的 Enter/Space\n              // 會 bubble 到本 handler 被 preventDefault 吞掉(按鈕 activation 被取消、panel 反而開)。\n              // trigger 鍵盤邏輯只在事件源自 trigger div 本身時執行。\n              if (e.target !== e.currentTarget) return\n              // Enter / Space / ArrowDown / Alt+ArrowDown → 開 panel(APG combobox required + Select canonical)\n              if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n                e.preventDefault()\n                setOpen(true)\n              }\n              // Escape → 關(Radix Content 已自帶,trigger 補位對齊 select.tsx:597)\n              if (e.key === 'Escape') setOpen(false)\n            }}\n            data-field-mode=\"edit\"\n            data-error={error ? '' : undefined}\n            className={cn(\n              fieldWrapperStyles({ mode: 'edit', variant: variant, size, error }),\n              'text-left cursor-pointer',\n              'focus-visible:outline-none',\n              className,\n            )}\n            {...props}\n          >\n            {/* 截斷必附 tooltip(tooltip.spec.md:32)— trigger div 自身是 hover 目標、無疊層,\n                值 span 直接消費 TruncatedText(對照 date-picker Range edit trigger 同型) */}\n            <TruncatedText className={cn(bareInputStyles, !value && 'text-fg-muted')}>\n              {displayText}\n            </TruncatedText>\n            {showClear && (\n              <ItemInlineAction\n                size={size ?? 'md'}\n                action={{\n                  icon: X,\n                  label: '清除時間', // i18n-allow: DS default inline-action label\n                  onClick: (e) => {\n                    e?.stopPropagation()\n                    onChange?.('')\n                  },\n                }}\n              />\n            )}\n            {EndIconCmp && (\n              <ItemSuffix className=\"pointer-events-none\">\n                <EndIconCmp size={iconSize} className=\"text-fg-muted\" aria-hidden />\n              </ItemSuffix>\n            )}\n          </div>\n        </PopoverTrigger>\n        {/* a11y(2026-07-14 dim-10):Radix PopoverContent 輸出 role=\"dialog\",無 title 需\n            accessible name(WAI-ARIA dialog required);對齊 date-picker.tsx:1040「日期區間選擇」同款 DS default。 */}\n        <PopoverContent className=\"w-auto p-0\" align=\"start\" aria-label=\"選擇時間\" /* i18n-allow: DS default dialog label */>\n          {/* Panel 對齊 ref/timepicker.png:2-3 個 SelectMenu 式欄位並排,分隔線分開。\n              Width 依欄數由 TimeColumns 決定:2 欄 w-40 / 3 欄 w-60。\n              Height 由 wrapper 控:216px 預設(扣 footer 後 list 約可見 5-6 items)。\n              TimeColumns 本身 h-full,parent 控 height — 讓 DatePicker showTime / Range 可\n              用 flex-row items-stretch 自動同 calendar 高。 */}\n          <div className=\"flex flex-col h-[216px]\">\n            <TimeColumns\n              value={draft}\n              onChange={commitDraft}\n              showSeconds={showSeconds}\n              minuteStep={minuteStep}\n              secondStep={secondStep}\n              disabled={disabledForColumns}\n              // 2026-05-06 v9.1 M25 chain fix:TimeColumns 自然高 = 24 buttons × ~28.7px = 688px\n              // 會撐破 parent h-[216px]。flex-1 + min-h-0 讓 TimeColumns 取 parent 剩餘空間\n              // (216 − footer ≈53px ≈ 163px)→ ScrollArea h-full 才能正確收斂 →\n              // listbox scrollIntoView 找對 nearest scrollable ancestor(內部 viewport),\n              // 不會走到 document body 把 popover 內容推出畫面(user 報「hours 欄空白」根因)。\n              className=\"flex-1 min-h-0\"\n            />\n            {/* Footer:消費 SurfaceFooter SSOT(border-t + py-tight + gap-2 + shrink-0 + justify-end)。\n                px override 回 layout-space-tight,因 TimePicker 滿欄 column 面板無 chrome-padded body\n                內縮邊可對齊(footer px = body 內縮 原則;column-selector 數字置中、零內距,\n                見 time-picker.spec.md)。此刻 mr-auto 把確定推右,視覺等同原 justify-between\n                —— 純結構消費 overlay-surface canonical(overlay-surface.spec.md:17「不自寫 padding token」),零視覺變化。 */}\n            <SurfaceFooter className=\"px-[var(--layout-space-tight)]\">\n              <Button variant=\"text\" size=\"sm\" onClick={handleNow} className=\"mr-auto\">\n                此刻\n              </Button>\n              <Button\n                variant=\"primary\"\n                size=\"sm\"\n                onClick={() => setOpen(false)}\n              >\n                確定\n              </Button>\n            </SurfaceFooter>\n          </div>\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\nTimePicker.displayName = 'TimePicker'\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 timePickerMeta = {\n  component: 'TimePicker',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  // states 對齊真實視覺態:trigger 與 panel item 皆無 'active'(按下)專屬視覺態(2026-07-04 audit 對齊);\n  // 'selected' = panel item 持續選中(bg-neutral-selected,time-columns.tsx isSelected;2026-07-07 詞彙統一補列)。\n  states: ['default', 'hover', 'selected', 'focus-visible', 'disabled'],\n  tokens: {\n    // panel selected 走 bg-neutral-selected(time-columns.tsx isSelected;spec「欄內 item 狀態」),非 bg-primary。\n    bg: ['bg-neutral-hover', 'bg-neutral-selected', 'bg-transparent'],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { TimePicker }\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export * from './toast';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAA"}

package/dist/components/Toast/index.js

@@ -0,0 +1,7 @@
+import { Toaster, toast, toastMeta } from "./toast.js";
+export {
+  Toaster,
+  toast,
+  toastMeta
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Toast/toast.d.ts

@@ -31,7 +31,7 @@ export interface ToasterProps {
 declare const Toaster: React.ForwardRefExoticComponent<ToasterProps & React.RefAttributes<HTMLDivElement>>;
 export declare const toastMeta: {
     readonly component: "Toast";
-    readonly family: null;
+    readonly family: 2;
     readonly variants: {
         readonly neutral: {
             readonly when: "非狀態通知;一般 announcement / tip";
@@ -50,7 +50,7 @@ export declare const toastMeta: {
         };
     };
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
         readonly bg: readonly ["bg-error", "bg-info", "bg-surface-raised", "bg-warning"];
         readonly fg: readonly ["text-foreground"];

package/dist/components/Toast/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAA2B,KAAK,aAAa,EAAE,MAAM,0CAA0C,CAAA;AAGtG;;;;;;;;;;;;GAYG;AAGH,MAAM,MAAM,YAAY,GAAG,aAAa,CAAA;AAExC,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAA;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAqDD,wBAAgB,KAAK,CAAC,OAAO,EAAE,YAAY,mBAG1C;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,aAAa,GAAG,cAAc,GAAG,eAAe,CAAA;CACtG;AAMD,QAAA,MAAM,OAAO,qFAUZ,CAAA;AAKD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBZ,CAAA;AAEV,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAA2B,KAAK,aAAa,EAAE,MAAM,0CAA0C,CAAA;AAGtG;;;;;;;;;;;;GAYG;AAGH,MAAM,MAAM,YAAY,GAAG,aAAa,CAAA;AAExC,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAA;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AA2HD,wBAAgB,KAAK,CAAC,OAAO,EAAE,YAAY,mBAO1C;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,aAAa,GAAG,cAAc,GAAG,eAAe,CAAA;CACtG;AAMD,QAAA,MAAM,OAAO,qFAaZ,CAAA;AAKD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBZ,CAAA;AAEV,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/Toast/toast.js

@@ -1,8 +1,59 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Toaster as Toaster$1, toast as toast$1 } from "sonner";
 import { useInverseTheme, Notice } from "../Notice/notice.js";
 import { Button } from "../Button/button.js";
+const toastAnnouncementListeners = /* @__PURE__ */ new Set();
+let toastAnnouncementSequence = 0;
+function subscribeToToastAnnouncements(listener) {
+  toastAnnouncementListeners.add(listener);
+  return () => {
+    toastAnnouncementListeners.delete(listener);
+  };
+}
+function publishToastAnnouncement(options) {
+  const isCritical = options.variant === "error" || options.variant === "warning";
+  const announcement = {
+    level: isCritical ? "assertive" : "polite",
+    message: [options.title, options.description].filter(Boolean).join("。"),
+    sequence: ++toastAnnouncementSequence
+  };
+  toastAnnouncementListeners.forEach((listener) => listener(announcement));
+}
+function ToastLiveRegions() {
+  const politeRef = React.useRef(null);
+  const assertiveRef = React.useRef(null);
+  React.useEffect(() => subscribeToToastAnnouncements((announcement) => {
+    const region = announcement.level === "assertive" ? assertiveRef.current : politeRef.current;
+    if (!region) return;
+    region.dataset.announcementSequence = String(announcement.sequence);
+    region.replaceChildren(region.ownerDocument.createTextNode(announcement.message));
+  }), []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: politeRef,
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        "data-toast-live-region": "polite",
+        className: "sr-only"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: assertiveRef,
+        role: "alert",
+        "aria-live": "assertive",
+        "aria-atomic": "true",
+        "data-toast-live-region": "assertive",
+        className: "sr-only"
+      }
+    )
+  ] });
+}
 function ToastInner({
   id,
   variant = "neutral",
@@ -12,12 +63,17 @@ function ToastInner({
   const inverseTheme = useInverseTheme();
   const isInverse = variant === "neutral" || variant === "success";
   const dismiss = () => toast$1.dismiss(id);
-  const actionButton = action ? /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", onClick: action.onClick, children: action.label }) : void 0;
-  const isCritical = variant === "error" || variant === "warning";
-  const liveRole = isCritical ? "alert" : "status";
-  const liveLevel = isCritical ? "assertive" : "polite";
+  const actionButton = action ? /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", onClick: () => {
+    action.onClick();
+    dismiss();
+  }, children: action.label }) : void 0;
+  const visualA11yProps = {
+    role: "group",
+    "aria-live": "off",
+    "data-toast-visual-content": ""
+  };
   if (isInverse) {
-    return /* @__PURE__ */ jsx("div", { role: liveRole, "aria-live": liveLevel, className: "rounded-lg overflow-hidden", style: { boxShadow: "var(--elevation-200)" }, children: /* @__PURE__ */ jsx("div", { "data-theme": inverseTheme, className: "bg-surface-raised text-foreground", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { ...visualA11yProps, className: "rounded-lg overflow-hidden", style: { boxShadow: "var(--elevation-200)" }, children: /* @__PURE__ */ jsx("div", { "data-theme": inverseTheme, className: "bg-surface-raised text-foreground", children: /* @__PURE__ */ jsx(
       Notice,
       {
         variant,
@@ -30,29 +86,34 @@ function ToastInner({
   }
   const bg = variant === "warning" ? "bg-warning" : variant === "error" ? "bg-error" : "bg-info";
   const theme = variant === "warning" ? "light" : "dark";
-  return /* @__PURE__ */ jsx("div", { role: liveRole, "aria-live": liveLevel, className: "rounded-lg overflow-hidden", style: { boxShadow: "var(--elevation-200)" }, children: /* @__PURE__ */ jsx("div", { className: bg, children: /* @__PURE__ */ jsx("div", { "data-theme": theme, className: "text-foreground", children: /* @__PURE__ */ jsx(Notice, { variant, endContent: actionButton, onDismiss: dismiss, ...rest }) }) }) });
+  return /* @__PURE__ */ jsx("div", { ...visualA11yProps, className: "rounded-lg overflow-hidden", style: { boxShadow: "var(--elevation-200)" }, children: /* @__PURE__ */ jsx("div", { className: bg, children: /* @__PURE__ */ jsx("div", { "data-theme": theme, className: "text-foreground", children: /* @__PURE__ */ jsx(Notice, { variant, endContent: actionButton, onDismiss: dismiss, ...rest }) }) }) });
 }
 function toast(options) {
-  const { duration = 4e3, ...rest } = options;
-  return toast$1.custom((id) => /* @__PURE__ */ jsx(ToastInner, { id, ...rest }), { duration });
+  const { duration = options.action ? 1e4 : 4e3, ...rest } = options;
+  const id = toast$1.custom((toastId) => /* @__PURE__ */ jsx(ToastInner, { id: toastId, ...rest }), { duration });
+  publishToastAnnouncement(options);
+  return id;
 }
 const Toaster = React.forwardRef(
   ({ position = "bottom-right", ...props }, _ref) => {
-    return /* @__PURE__ */ jsx(
-      Toaster$1,
-      {
-        position,
-        toastOptions: { unstyled: true, className: "w-[360px]" },
-        ...props
-      }
-    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Toaster$1,
+        {
+          position,
+          toastOptions: { unstyled: true, className: "w-[360px]" },
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(ToastLiveRegions, {})
+    ] });
   }
 );
 Toaster.displayName = "Toaster";
 const toastMeta = {
   component: "Toast",
-  family: null,
-  // non-family composite / overlay / layout
+  family: 2,
+  // Family 2(List item layout)— 透過 Notice 繼承,對齊 toast.spec.md frontmatter L3 + L39
   variants: {
     neutral: { when: "非狀態通知;一般 announcement / tip" },
     info: { when: "資訊性提示(新版本 / 同步完成)" },
@@ -61,7 +122,8 @@ const toastMeta = {
     error: { when: "錯誤(匯入失敗 / 權限不足);action prop 可加重試" }
   },
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 2026-07-04 audit 對齊:Toast 無 disabled state(spec 邊界案例明文;對齊 noticeMeta ['default'] 已修 pattern)
+  states: ["default"],
   tokens: {
     bg: ["bg-error", "bg-info", "bg-surface-raised", "bg-warning"],
     fg: ["text-foreground"],