@qijenchen/design-system 0.1.0-beta.8 → 0.1.0-beta.81

package/dist/components/SelectMenu/select-menu.js

@@ -2,9 +2,10 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { Search, Plus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
+import { useControllable } from "../../hooks/use-controllable.js";
 import { Popover, PopoverTrigger, PopoverContent } from "../Popover/popover.js";
 import { Command, CommandList, CommandEmpty, CommandSeparator, CommandGroup, CommandItem } from "../Command/command.js";
-import { Command as Command$1 } from "cmdk";
+import { Command as Command$1, useCommandState } from "cmdk";
 import { MenuItem, MenuFooter } from "../Menu/menu-item.js";
 import { Empty } from "../Empty/empty.js";
 import { CircularProgress } from "../CircularProgress/circular-progress.js";
@@ -12,6 +13,10 @@ import { OVERLAY_SIDE_OFFSET } from "../../tokens/elevation/overlay-geometry.js"
 import { getMenuListMinHeight } from "../Field/field-types.js";
 import { RowSizeProvider, ICON_SIZE } from "../../patterns/element-anatomy/item-anatomy.js";
 import { clearSelection, applySelectAll } from "../../lib/multi-select-ordering.js";
+function SelectMenuLiveStatus({ loading, emptyText }) {
+  const filteredCount = useCommandState((state) => state.filtered.count);
+  return /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: filteredCount === 0 ? loading ? "載入中…" : emptyText : null });
+}
 const SelectMenu = React.forwardRef(function SelectMenu2({
   options,
   groups,
@@ -27,6 +32,8 @@ const SelectMenu = React.forwardRef(function SelectMenu2({
   // i18n-allow: DS default; consumer override via searchPlaceholder prop
   emptyText = "沒有符合的選項",
   // i18n-allow: DS default; consumer override via emptyText prop
+  selectAllLabel = "全部",
+  // i18n-allow: DS default; consumer override via selectAllLabel prop
   loading = false,
   size = "md",
   align = "start",
@@ -40,9 +47,11 @@ const SelectMenu = React.forwardRef(function SelectMenu2({
   contentId,
   className
 }, _ref) {
-  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
-  const open = controlledOpen ?? internalOpen;
-  const setOpen = controlledOnOpenChange ?? setInternalOpen;
+  const [open, setOpen] = useControllable({
+    value: controlledOpen,
+    defaultValue: defaultOpen ?? false,
+    onChange: controlledOnOpenChange
+  });
   const [search, setSearch] = React.useState("");
   const selectedValues = React.useMemo(() => {
     if (value == null) return [];
@@ -104,6 +113,11 @@ const SelectMenu = React.forwardRef(function SelectMenu2({
   React.useEffect(() => {
     if (!open) setSearch("");
   }, [open]);
+  const handleNonSearchableAutoFocus = React.useCallback((e) => {
+    e.preventDefault();
+    const root = e.currentTarget.querySelector("[cmdk-root]");
+    root == null ? void 0 : root.focus({ preventScroll: true });
+  }, []);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children }),
     /* @__PURE__ */ jsx(RowSizeProvider, { value: size, children: /* @__PURE__ */ jsx(
@@ -120,7 +134,7 @@ const SelectMenu = React.forwardRef(function SelectMenu2({
         },
         align,
         sideOffset: OVERLAY_SIDE_OFFSET,
-        onOpenAutoFocus,
+        onOpenAutoFocus: onOpenAutoFocus ?? (!searchable ? handleNonSearchableAutoFocus : void 0),
         onInteractOutside: (e) => {
           const target = e.detail.originalEvent.target;
           if (target == null ? void 0 : target.closest("[data-radix-popper-content-wrapper]")) {
@@ -148,7 +162,7 @@ const SelectMenu = React.forwardRef(function SelectMenu2({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs(CommandList, { className: "relative", children: [
+          /* @__PURE__ */ jsxs(CommandList, { className: "relative", "aria-busy": loading || void 0, children: [
             /* @__PURE__ */ jsx(
               CommandEmpty,
               {
@@ -168,7 +182,10 @@ const SelectMenu = React.forwardRef(function SelectMenu2({
                     keywords: opt.description ? [opt.description] : void 0,
                     disabled: opt.disabled,
                     onSelect: () => handleSelect(opt.value),
-                    className: "p-0 rounded-none data-[selected=true]:bg-transparent",
+                    className: cn(
+                      "p-0 rounded-none",
+                      !multiple && isSelected(opt.value) && "bg-neutral-selected data-[selected=true]:bg-neutral-selected-active"
+                    ),
                     children: /* @__PURE__ */ jsx(
                       MenuItem,
                       {
@@ -180,6 +197,8 @@ const SelectMenu = React.forwardRef(function SelectMenu2({
                         checked: isSelected(opt.value),
                         selected: !multiple && isSelected(opt.value),
                         disabled: opt.disabled,
+                        role: "presentation",
+                        className: "!bg-transparent hover:!bg-transparent",
                         children: renderLabel ? renderLabel(opt) : opt.label
                       }
                     )
@@ -198,12 +217,13 @@ const SelectMenu = React.forwardRef(function SelectMenu2({
                     onCreate == null ? void 0 : onCreate(search.trim());
                     setSearch("");
                   },
-                  className: "p-0 rounded-none data-[selected=true]:bg-transparent",
-                  children: /* @__PURE__ */ jsx(MenuItem, { size, startIcon: Plus, children: createLabel(search.trim()) })
+                  className: "p-0 rounded-none",
+                  children: /* @__PURE__ */ jsx(MenuItem, { size, startIcon: Plus, role: "presentation", className: "!bg-transparent hover:!bg-transparent", children: createLabel(search.trim()) })
                 }
               ) })
             ] })
           ] }),
+          /* @__PURE__ */ jsx(SelectMenuLiveStatus, { loading, emptyText }),
           multiple && selectableOptions.length > 0 && !search && /* @__PURE__ */ jsx(MenuFooter, { children: /* @__PURE__ */ jsx(
             MenuItem,
             {
@@ -211,7 +231,17 @@ const SelectMenu = React.forwardRef(function SelectMenu2({
               checkbox: true,
               checked: allState,
               onClick: handleSelectAll,
-              children: "全部"
+              role: "checkbox",
+              "aria-checked": allState === "indeterminate" ? "mixed" : allState,
+              "aria-selected": void 0,
+              tabIndex: 0,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleSelectAll();
+                }
+              },
+              children: selectAllLabel
             }
           ) })
         ] })
@@ -232,8 +262,19 @@ const selectMenuMeta = {
     ring: []
   }
 };
+function forwardKeyToListbox(contentId, e) {
+  var _a;
+  if (!contentId) return false;
+  if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Enter") return false;
+  const root = (_a = document.getElementById(contentId)) == null ? void 0 : _a.querySelector("[cmdk-root]");
+  if (!root) return false;
+  e.preventDefault();
+  root.dispatchEvent(new KeyboardEvent("keydown", { key: e.key, bubbles: true, cancelable: true }));
+  return true;
+}
 export {
   SelectMenu,
+  forwardKeyToListbox,
   selectMenuMeta
 };
 //# sourceMappingURL=select-menu.js.map

package/dist/components/SelectMenu/select-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-menu.js","sources":["../../../src/components/SelectMenu/select-menu.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 { Plus, Search } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport type { AvatarData } from '@/design-system/components/Avatar/avatar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/design-system/components/Popover/popover'\nimport { Command, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from '@/design-system/components/Command/command'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { MenuItem, MenuFooter } from '@/design-system/components/Menu/menu-item'\nimport { Empty } from '@/design-system/components/Empty/empty'\nimport { CircularProgress } from '@/design-system/components/CircularProgress/circular-progress'\nimport { OVERLAY_SIDE_OFFSET } from '@/design-system/tokens/elevation/overlay-geometry'\nimport { getMenuListMinHeight } from '@/design-system/components/Field/field-types'\nimport { RowSizeProvider } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { applySelectAll, clearSelection } from '@/design-system/lib/multi-select-ordering'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\n\n/**\n * SelectMenu — Popover + Command 組成的完整下拉選單\n *\n * ── 功能 ──\n *   單選 / 多選、搜尋過濾、分組、可建立新選項（creatable）\n *   多選有 footer「全部」checkbox\n *\n * ── 架構 ──\n *   Popover（浮動容器）\n *     └── Command（cmdk，搜尋 + 鍵盤導覽）\n *           ├── CommandInput（搜尋框）\n *           ├── CommandList（選項列表）\n *           │     └── CommandGroup → MenuItem\n *           └── Footer（多選全選）\n */\n\n// ── Types ──\n\nexport interface SelectMenuOption {\n  value: string\n  label: string\n  description?: string\n  icon?: LucideIcon\n  avatar?: AvatarData\n  disabled?: boolean\n  group?: string\n}\n\nexport interface SelectMenuGroupConfig {\n  key: string\n  label: string\n}\n\ntype SizeKey = 'sm' | 'md' | 'lg'\n\n// ── Component ──\n\nexport interface SelectMenuProps {\n  /** 選項列表 */\n  options: SelectMenuOption[]\n  /** 群組定義（key 對應 option.group） */\n  groups?: SelectMenuGroupConfig[]\n\n  /** 當前值（單選 string，多選 string[]） */\n  value?: string | string[] | null\n  /** 值變更 callback */\n  onValueChange?: (value: string | string[]) => void\n\n  /** 多選模式 */\n  multiple?: boolean\n  /** 顯示搜尋框 */\n  searchable?: boolean\n  /** 可建立新選項 */\n  creatable?: boolean\n  /** 建立新選項 callback */\n  onCreate?: (value: string) => void\n  /** creatable 的 label 格式，預設 '直接使用「{query}」' */\n  createLabel?: (query: string) => string\n\n  /** 觸發元件（asChild） */\n  children: React.ReactNode\n  /** 搜尋框 placeholder */\n  searchPlaceholder?: string\n  /** 空選項提示 */\n  emptyText?: string\n  /** Loading 狀態(2026-05-15 audit B fix per user verbatim「dropdown 隨時可開,讀取在 panel 中間 CircularProgress」)\n   *  true → render `<Empty icon={<CircularProgress size={48}/>} description={loadingText} />` 取代 options;\n   *  trigger 不變,user 隨時可開 dropdown。對齊 MUI Autocomplete `loadingText` dropdown-body + Ant Select\n   *  loading idiom + DS 既有 `empty.spec.md:182` 「全頁 loading = Empty + CircularProgress compose」SSOT。\n   */\n  loading?: boolean\n\n  /** 尺寸 */\n  size?: SizeKey\n  /** 對齊方式 */\n  align?: 'start' | 'end'\n  /** 列表最少顯示幾行選項高度（預設 3），影響空狀態最小高度 */\n  minRows?: number\n  /** 最小寬度（px），預設跟隨觸發元件 */\n  minWidth?: number\n\n  /** 受控 open 狀態 */\n  open?: boolean\n  /** 預設打開(uncontrolled initial state)— 2026-05-15 audit Dim 26 V1 fix per user verbatim「A:1」approval */\n  defaultOpen?: boolean\n  /** open 狀態變更 callback */\n  onOpenChange?: (open: boolean) => void\n\n  /** 自訂選項 label 渲染（預設渲染 option.label 純文字） */\n  renderLabel?: (option: SelectMenuOption) => React.ReactNode\n  /** 攔截 PopoverContent 的 onOpenAutoFocus（如 Select searchable 需阻止 focus 搶走） */\n  onOpenAutoFocus?: (e: Event) => void\n\n  /**\n   * Popover 內容容器的 DOM id。Combobox / 自定 trigger 用 `aria-controls` 指向此 id 時,\n   * 需傳入相同 id 讓 AT 能找到對應的 listbox。\n   */\n  contentId?: string\n\n  className?: string\n}\n\n// shadcn canonical:forwardRef + displayName 統一。SelectMenu 是 Popover + Command\n// composite,自身無 DOM host(trigger 由 consumer 以 asChild children 提供),ref 簽名\n// 保留但不附著(consumer 想取 trigger DOM 直接在 children 上自己 ref)。className 合併到\n// PopoverContent(contextually 最接近 user-facing surface)。\nconst SelectMenu = React.forwardRef<HTMLElement, SelectMenuProps>(function SelectMenu({\n  options,\n  groups,\n  value,\n  onValueChange,\n  multiple = false,\n  searchable = false,\n  creatable = false,\n  onCreate,\n  createLabel = (q) => `直接使用「${q}」`,\n  children,\n  searchPlaceholder = '搜尋…', // i18n-allow: DS default; consumer override via searchPlaceholder prop\n  emptyText = '沒有符合的選項', // i18n-allow: DS default; consumer override via emptyText prop\n  loading = false,\n  size = 'md',\n  align = 'start',\n  minRows = 3,\n  minWidth,\n  open: controlledOpen,\n  defaultOpen,\n  onOpenChange: controlledOnOpenChange,\n  renderLabel,\n  onOpenAutoFocus,\n  contentId,\n  className,\n}, _ref) {\n  // ── State ──\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n  const open = controlledOpen ?? internalOpen\n  const setOpen = controlledOnOpenChange ?? setInternalOpen\n  const [search, setSearch] = React.useState('')\n\n  // ── Value helpers ──\n  const selectedValues = React.useMemo<string[]>(() => {\n    if (value == null) return []\n    return Array.isArray(value) ? value : [value]\n  }, [value])\n\n  const isSelected = React.useCallback(\n    (v: string) => selectedValues.includes(v),\n    [selectedValues]\n  )\n\n  const handleSelect = React.useCallback(\n    (optionValue: string) => {\n      if (multiple) {\n        const next = isSelected(optionValue)\n          ? selectedValues.filter((v) => v !== optionValue)\n          : [...selectedValues, optionValue]\n        onValueChange?.(next)\n      } else {\n        onValueChange?.(optionValue)\n        setOpen(false)\n      }\n    },\n    [multiple, selectedValues, isSelected, onValueChange, setOpen]\n  )\n\n  // ── Multi-select: select all ──\n  const selectableOptions = React.useMemo(\n    () => options.filter((o) => !o.disabled),\n    [options]\n  )\n\n  const allState: boolean | 'indeterminate' = React.useMemo(() => {\n    if (!multiple) return false\n    const count = selectableOptions.filter((o) => isSelected(o.value)).length\n    if (count === 0) return false\n    if (count === selectableOptions.length) return true\n    return 'indeterminate'\n  }, [multiple, selectableOptions, isSelected])\n\n  // 2026-05-16 SSOT canonical fix(Claude+Codex M31 Round 4 共識 + user verbatim「就照你們\n  // 的共識做到完美確保有 SSOT」):\n  //\n  // 原 fully-replace `selectableOptions.map(v)` = source order reset,但**Ant Design 跨元件 grep\n  // 證據顯示 source-reset 沒 Ant precedent**(Transfer + Table rowSelection 都是 preserve+append)。\n  // 改 `applySelectAll(selectedValues, all)` SSOT primitive 對齊 Ant Transfer canonical:\n  //   `Array.from(new Set([...prevKeys, ...keys]))` — preserve existing + append unselected。\n  //\n  // SSOT in `@/design-system/lib/multi-select-ordering` — 未來新 multi-select with Select All\n  // footer 必 consume 此 primitive(hook `check_select_all_canonical.sh` 機械強制),\n  // 不再各自 reimplement → 防 ordering policy drift。\n  const handleSelectAll = React.useCallback(() => {\n    if (!multiple) return\n    if (allState === true) {\n      onValueChange?.(clearSelection())\n    } else {\n      onValueChange?.(applySelectAll(selectedValues, selectableOptions.map((o) => o.value)))\n    }\n  }, [multiple, allState, selectableOptions, selectedValues, onValueChange])\n\n  // ── Creatable ──\n  const showCreate = React.useMemo(() => {\n    if (!creatable || !search.trim()) return false\n    return !options.some(\n      (o) => o.label.toLowerCase() === search.trim().toLowerCase()\n    )\n  }, [creatable, search, options])\n\n  // ── Grouping ──\n  const groupedOptions = React.useMemo(() => {\n    if (!groups?.length) return [{ key: '__default', label: '', options }]\n    const grouped = groups.map((g) => ({\n      ...g,\n      options: options.filter((o) => o.group === g.key),\n    }))\n    const ungrouped = options.filter((o) => !o.group)\n    if (ungrouped.length) {\n      grouped.unshift({ key: '__default', label: '', options: ungrouped })\n    }\n    return grouped\n  }, [groups, options])\n\n  // ── Reset search on close ──\n  React.useEffect(() => {\n    if (!open) setSearch('')\n  }, [open])\n\n  // RowSizeProvider 讓 PopoverContent 子樹內任何 <ItemIcon> / <ItemAvatar> /\n  // <ItemInlineAction> 都自動讀到對的 size,跟 SidebarProvider / TreeView 同一條規則。\n  // (注:Popover 透過 Portal 渲染,context 仍然會跨 portal 傳遞——React context 是 tree-based\n  // 不是 DOM-based,Portal 不影響 context propagation)\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>{children}</PopoverTrigger>\n      <RowSizeProvider value={size}>\n      <PopoverContent\n        id={contentId}\n        // w-auto override PopoverContent default w-72(rich-popover canonical)— SelectMenu 走「跟 trigger 同寬」\n        // canonical(spec L72)。minWidth = max(trigger-width, 240px sensible-min)— 對齊 shadcn / Material / Ant\n        // select dropdown 共識(2026-05-04 D1 verify SelectMenu spec implementation)。\n        className={cn(\n          'p-0 w-auto rounded-lg border border-border bg-surface-raised overflow-hidden',\n          className\n        )}\n        style={{\n          boxShadow: 'var(--elevation-200)',\n          minWidth: minWidth ?? 'max(var(--radix-popover-trigger-width), 15rem)',\n        }}\n        align={align}\n        sideOffset={OVERLAY_SIDE_OFFSET}\n        onOpenAutoFocus={onOpenAutoFocus}\n        // **2026-05-07 v15.16 nested portal fix**:Tag dismiss inside trigger\n        // 區的 OverflowIndicator HoverCard popup(獨立 Radix portal,DOM 不在\n        // PopoverContent 內)— Radix DismissableLayer document-level outside\n        // detection 跨 portal 視為「outside」→ SelectMenu 被誤關閉。\n        // 攔 `onPointerDownOutside`,檢查 click target 是否在另一個 Radix portal\n        // 內,是 → preventDefault 取消 close。對齊 Ant Design Select multiSelect\n        // tagRender 行為(連續移除不關 dropdown)。\n        // SSOT propagation:fix 在 SelectMenu level → Combobox / 其他 SelectMenu\n        // consumer 自動受益。\n        // **2026-05-07 v15.16 nested portal fix**:Tag dismiss inside trigger 區的\n        // OverflowIndicator HoverCard popup(獨立 Radix portal,DOM 不在 SelectMenu\n        // PopoverContent 內)— Radix DismissableLayer document-level pointerdown +\n        // focusin 偵測「outside」→ SelectMenu 被誤關閉。\n        // 攔 `onInteractOutside`(統一 pointerdown + focusin),檢查 click target 是否\n        // 在另一個 Radix portal wrapper(`[data-radix-popper-content-wrapper]`),\n        // 是 → preventDefault 取消 close。對齊 Ant Design Select multiSelect tagRender\n        // 行為(連續移除不關 dropdown)。\n        // SSOT propagation:fix 在 SelectMenu level → Combobox / 所有 SelectMenu\n        // consumer 自動受益。\n        onInteractOutside={(e) => {\n          const target = e.detail.originalEvent.target as HTMLElement | null\n          if (target?.closest('[data-radix-popper-content-wrapper]')) {\n            e.preventDefault()\n          }\n        }}\n      >\n        <Command shouldFilter={searchable} className=\"bg-transparent\">\n          {searchable && (\n            <div className={cn(\n              'flex items-center gap-2 px-3 py-1 border-b border-divider',\n              size === 'lg' ? 'min-h-[calc(var(--field-height-lg)+8px)]'\n                : size === 'sm' ? 'min-h-[calc(var(--field-height-sm)+8px)]'\n                : 'min-h-[calc(var(--field-height-md)+8px)]',\n            )}>\n              <Search size={ICON_SIZE[size as 'sm' | 'md' | 'lg']} className=\"shrink-0 text-fg-muted\" aria-hidden />\n              <CommandPrimitive.Input\n                placeholder={searchPlaceholder}\n                value={search}\n                onValueChange={setSearch}\n                className={cn(\n                  'flex w-full bg-transparent outline-none placeholder:text-fg-muted',\n                  // M24 disabled state precedence:disabled 時 placeholder 切 fg-disabled(audit dim 34)\n                  'disabled:placeholder:text-fg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed',\n                  size === 'lg' ? 'text-body-lg leading-compact' : 'text-body leading-compact',\n                )}\n              />\n            </div>\n          )}\n          {/* **2026-05-07 v15.13 R2 fix**:minHeight 從 CommandList 搬到 CommandEmpty。\n              原本 CommandList 永遠套 `minHeight = field-height × minRows + 16px`,結果\n              user 過濾出 < minRows 個 match 時 list 底下空一片(eg. 打 'c' 出 2 個 match\n              卻撐高到 3 row 容量,1 row 留白)。 Fix:只有 empty state 才需要 minHeight 撐\n              起 placeholder 視覺;有 results 時 CommandList 自然 fit content。 */}\n          <CommandList className=\"relative\">\n            <CommandEmpty\n              className=\"flex items-center justify-center\"\n              style={{ minHeight: getMenuListMinHeight(size, minRows) }}\n            >\n              {loading\n                ? <Empty icon={<CircularProgress size={48}/>} className=\"py-6\" />\n                : <Empty description={emptyText} className=\"py-6\" />}\n            </CommandEmpty>\n\n            {groupedOptions.map((group, gi) => (\n              <React.Fragment key={group.key}>\n                {gi > 0 && <CommandSeparator />}\n                <CommandGroup className=\"p-0 py-2\">\n                  {group.label && (\n                    <MenuItem size={size} header>{group.label}</MenuItem>\n                  )}\n                  {group.options.map((opt) => (\n                    <CommandItem\n                      key={opt.value}\n                      value={opt.label}\n                      keywords={opt.description ? [opt.description] : undefined}\n                      disabled={opt.disabled}\n                      onSelect={() => handleSelect(opt.value)}\n                      className=\"p-0 rounded-none data-[selected=true]:bg-transparent\"\n                    >\n                      <MenuItem\n                        size={size}\n                        startIcon={opt.icon}\n                        avatar={opt.avatar}\n                        description={opt.description}\n                        checkbox={multiple}\n                        checked={isSelected(opt.value)}\n                        selected={!multiple && isSelected(opt.value)}\n                        disabled={opt.disabled}\n                      >\n                        {renderLabel ? renderLabel(opt) : opt.label}\n                      </MenuItem>\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              </React.Fragment>\n            ))}\n\n            {/* Creatable item */}\n            {showCreate && (\n              <>\n                <CommandSeparator />\n                <CommandGroup className=\"p-0 py-2\">\n                  <CommandItem\n                    value={search}\n                    onSelect={() => {\n                      onCreate?.(search.trim())\n                      setSearch('')\n                    }}\n                    className=\"p-0 rounded-none data-[selected=true]:bg-transparent\"\n                  >\n                    <MenuItem size={size} startIcon={Plus}>\n                      {createLabel(search.trim())}\n                    </MenuItem>\n                  </CommandItem>\n                </CommandGroup>\n              </>\n            )}\n          </CommandList>\n\n          {/* Multi-select footer: Select All\n              - 沒有選項時不顯示(selectableOptions.length === 0)\n              - 搜尋有文字時不顯示(search 非空 = 使用者在找特定項目,「全選」沒意義) */}\n          {multiple && selectableOptions.length > 0 && !search && (\n            <MenuFooter>\n              <MenuItem\n                size={size}\n                checkbox\n                checked={allState}\n                onClick={handleSelectAll}\n              >\n                全部\n              </MenuItem>\n            </MenuFooter>\n          )}\n        </Command>\n      </PopoverContent>\n      </RowSizeProvider>\n    </Popover>\n  )\n})\n\nSelectMenu.displayName = 'SelectMenu'\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 selectMenuMeta = {\n  component: 'SelectMenu',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface-raised', 'bg-transparent'],\n    fg: ['text-fg-muted'],\n    ring: [],\n  },\n} as const\n\nexport { SelectMenu }\n"],"names":["SelectMenu","CommandPrimitive"],"mappings":"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"}
+{"version":3,"file":"select-menu.js","sources":["../../../src/components/SelectMenu/select-menu.tsx"],"sourcesContent":["/**\n * @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 Select / Combobox 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.\nimport * as React from 'react'\nimport { Plus, Search } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useControllable } from '@/design-system/hooks/use-controllable'\nimport type { AvatarData } from '@/design-system/components/Avatar/avatar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/design-system/components/Popover/popover'\nimport { Command, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from '@/design-system/components/Command/command'\nimport { Command as CommandPrimitive, useCommandState } from 'cmdk'\nimport { MenuItem, MenuFooter } from '@/design-system/components/Menu/menu-item'\nimport { Empty } from '@/design-system/components/Empty/empty'\nimport { CircularProgress } from '@/design-system/components/CircularProgress/circular-progress'\nimport { OVERLAY_SIDE_OFFSET } from '@/design-system/tokens/elevation/overlay-geometry'\nimport { getMenuListMinHeight } from '@/design-system/components/Field/field-types'\nimport { RowSizeProvider } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { applySelectAll, clearSelection } from '@/design-system/lib/multi-select-ordering'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\n\n/**\n * SelectMenu — Popover + Command 組成的完整下拉選單\n *\n * ── 功能 ──\n *   單選 / 多選、搜尋過濾、分組、可建立新選項（creatable）\n *   多選有 footer「全部」checkbox\n *\n * ── 架構 ──\n *   Popover（浮動容器）\n *     └── Command（cmdk，搜尋 + 鍵盤導覽）\n *           ├── CommandInput（搜尋框）\n *           ├── CommandList（選項列表）\n *           │     └── CommandGroup → MenuItem\n *           └── Footer（多選全選）\n */\n\n// ── Types ──\n\nexport interface SelectMenuOption {\n  value: string\n  label: string\n  description?: string\n  icon?: LucideIcon\n  avatar?: AvatarData\n  disabled?: boolean\n  group?: string\n}\n\nexport interface SelectMenuGroupConfig {\n  key: string\n  label: string\n}\n\ntype SizeKey = 'sm' | 'md' | 'lg'\n\n// ── Component ──\n\nexport interface SelectMenuProps {\n  /** 選項列表 */\n  options: SelectMenuOption[]\n  /** 群組定義（key 對應 option.group） */\n  groups?: SelectMenuGroupConfig[]\n\n  /** 當前值（單選 string，多選 string[]） */\n  value?: string | string[] | null\n  /** 值變更 callback */\n  onValueChange?: (value: string | string[]) => void\n\n  /** 多選模式 */\n  multiple?: boolean\n  /** 顯示搜尋框 */\n  searchable?: boolean\n  /** 可建立新選項 */\n  creatable?: boolean\n  /** 建立新選項 callback */\n  onCreate?: (value: string) => void\n  /** creatable 的 label 格式，預設 '直接使用「{query}」' */\n  createLabel?: (query: string) => string\n\n  /** 觸發元件（asChild） */\n  children: React.ReactNode\n  /** 搜尋框 placeholder */\n  searchPlaceholder?: string\n  /** 空選項提示 */\n  emptyText?: string\n  /** 多選 footer 全選列文字(2026-07-05 D4:原「全部」字面 hardcode,無法覆寫也無法 i18n) */\n  selectAllLabel?: string\n  /** Loading 狀態(2026-05-15 audit B fix;2026-07-04 Q3 拍板措辭修訂)\n   *  true → 無可顯示選項時 empty slot(cmdk CommandEmpty)渲 `<Empty icon={<CircularProgress size={48}/>} className=\"py-6\" />`\n   *  (純 spinner,無 description);已有 options 時保留顯示不清空(MUI Autocomplete「only if there are\n   *  no suggestions」共識)。trigger 不變,user 隨時可開 dropdown。DS `empty.spec.md`「loading = Empty +\n   *  CircularProgress compose」SSOT。\n   */\n  loading?: boolean\n\n  /** 尺寸 */\n  size?: SizeKey\n  /** 對齊方式 */\n  align?: 'start' | 'end'\n  /** 列表最少顯示幾行選項高度（預設 3），影響空狀態最小高度 */\n  minRows?: number\n  /** 最小寬度（px），預設跟隨觸發元件 */\n  minWidth?: number\n\n  /** 受控 open 狀態 */\n  open?: boolean\n  /** 預設打開(uncontrolled initial state)— 2026-05-15 audit Dim 26 V1 fix per user verbatim「A:1」approval */\n  defaultOpen?: boolean\n  /** open 狀態變更 callback */\n  onOpenChange?: (open: boolean) => void\n\n  /** 自訂選項 label 渲染（預設渲染 option.label 純文字） */\n  renderLabel?: (option: SelectMenuOption) => React.ReactNode\n  /** 攔截 PopoverContent 的 onOpenAutoFocus（如 Select searchable 需阻止 focus 搶走） */\n  onOpenAutoFocus?: (e: Event) => void\n\n  /**\n   * Popover 內容容器的 DOM id(set 在 PopoverContent 外層 div,**非** cmdk 內層 `role=\"listbox\"` 本身)。\n   * Combobox / 自定 trigger 用 `aria-controls` 指向此 id 時,指向的是 **popover 容器(listbox 的 ancestor)**——\n   * AT 經此容器可定位到內部 cmdk listbox(cmdk List 自帶 auto-generated `role=\"listbox\"` id)。\n   */\n  contentId?: string\n\n  className?: string\n}\n\n// ── SR live status(2026-07-05 D4:empty / loading 空狀態對 SR 不可感知修)──\n// cmdk CommandEmpty 渲染為 role=\"presentation\" div、cmdk 全鏈無 aria-live,且 DOM focus 停在\n// combobox input(aria-activedescendant 虛擬焦點)→ SR 使用者搜尋到 0 結果或 loading 佔位時\n// 聽不到任何播報(loading spinner 的 CircularProgress 無 label 時更是 aria-hidden)。\n// 補 visually-hidden polite live region,鏡射 CommandEmpty 可見內容(cmdk Empty 只在\n// filtered.count === 0 渲染:loading → 載入文案;否則 → emptyText)。對齊 react-select A11yText /\n// APG combobox no-results 播報 + empty.spec.md「動態 filter no-results 容器需 aria-live=\"polite\"」。\n// SSOT 放 SelectMenu 一處 → Select / Combobox / PeoplePicker 全體受益。\nfunction SelectMenuLiveStatus({ loading, emptyText }: { loading: boolean; emptyText: string }) {\n  const filteredCount = useCommandState((state) => state.filtered.count)\n  return (\n    <div role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n      {filteredCount === 0\n        ? (loading ? '載入中…' /* i18n-allow: DS default SR-only 播報文案 */ : emptyText)\n        : null}\n    </div>\n  )\n}\n\n// shadcn canonical:forwardRef + displayName 統一。SelectMenu 是 Popover + Command\n// composite,自身無 DOM host(trigger 由 consumer 以 asChild children 提供),ref 簽名\n// 保留但不附著(consumer 想取 trigger DOM 直接在 children 上自己 ref)。className 合併到\n// PopoverContent(contextually 最接近 user-facing surface)。\nconst SelectMenu = React.forwardRef<HTMLElement, SelectMenuProps>(function SelectMenu({\n  options,\n  groups,\n  value,\n  onValueChange,\n  multiple = false,\n  searchable = false,\n  creatable = false,\n  onCreate,\n  createLabel = (q) => `直接使用「${q}」`,\n  children,\n  searchPlaceholder = '搜尋…', // i18n-allow: DS default; consumer override via searchPlaceholder prop\n  emptyText = '沒有符合的選項', // i18n-allow: DS default; consumer override via emptyText prop\n  selectAllLabel = '全部', // i18n-allow: DS default; consumer override via selectAllLabel prop\n  loading = false,\n  size = 'md',\n  align = 'start',\n  minRows = 3,\n  minWidth,\n  open: controlledOpen,\n  defaultOpen,\n  onOpenChange: controlledOnOpenChange,\n  renderLabel,\n  onOpenAutoFocus,\n  contentId,\n  className,\n}, _ref) {\n  // ── State ──\n  // 2026-06-11 R2 bug fix:原手寫 `setOpen = controlledOnOpenChange ?? setInternalOpen` 在\n  // uncontrolled + onOpenChange listener 場景(傳 onOpenChange 不傳 open)會讓 listener 蓋掉\n  // internal setter → menu 開不了。改消費 DS 既有 useControllable(select.tsx 同 canonical):\n  // uncontrolled 時 internal state 為準、onOpenChange 僅通知。\n  const [open, setOpen] = useControllable<boolean>({\n    value: controlledOpen,\n    defaultValue: defaultOpen ?? false,\n    onChange: controlledOnOpenChange,\n  })\n  const [search, setSearch] = React.useState('')\n\n  // ── Value helpers ──\n  const selectedValues = React.useMemo<string[]>(() => {\n    if (value == null) return []\n    return Array.isArray(value) ? value : [value]\n  }, [value])\n\n  const isSelected = React.useCallback(\n    (v: string) => selectedValues.includes(v),\n    [selectedValues]\n  )\n\n  const handleSelect = React.useCallback(\n    (optionValue: string) => {\n      if (multiple) {\n        const next = isSelected(optionValue)\n          ? selectedValues.filter((v) => v !== optionValue)\n          : [...selectedValues, optionValue]\n        onValueChange?.(next)\n      } else {\n        onValueChange?.(optionValue)\n        setOpen(false)\n      }\n    },\n    [multiple, selectedValues, isSelected, onValueChange, setOpen]\n  )\n\n  // ── Multi-select: select all ──\n  const selectableOptions = React.useMemo(\n    () => options.filter((o) => !o.disabled),\n    [options]\n  )\n\n  const allState: boolean | 'indeterminate' = React.useMemo(() => {\n    if (!multiple) return false\n    const count = selectableOptions.filter((o) => isSelected(o.value)).length\n    if (count === 0) return false\n    if (count === selectableOptions.length) return true\n    return 'indeterminate'\n  }, [multiple, selectableOptions, isSelected])\n\n  // 2026-05-16 SSOT canonical fix(Claude+Codex M31 Round 4 共識 + user verbatim「就照你們\n  // 的共識做到完美確保有 SSOT」):\n  //\n  // 原 fully-replace `selectableOptions.map(v)` = source order reset,但**Ant Design 跨元件 grep\n  // 證據顯示 source-reset 沒 Ant precedent**(Transfer + Table rowSelection 都是 preserve+append)。\n  // 改 `applySelectAll(selectedValues, all)` SSOT primitive 對齊 Ant Transfer canonical:\n  //   `Array.from(new Set([...prevKeys, ...keys]))` — preserve existing + append unselected。\n  //\n  // SSOT in `@/design-system/lib/multi-select-ordering` — 未來新 multi-select with Select All\n  // footer 必 consume 此 primitive(hook `check_select_all_canonical.sh` 機械強制),\n  // 不再各自 reimplement → 防 ordering policy drift。\n  const handleSelectAll = React.useCallback(() => {\n    if (!multiple) return\n    if (allState === true) {\n      onValueChange?.(clearSelection())\n    } else {\n      onValueChange?.(applySelectAll(selectedValues, selectableOptions.map((o) => o.value)))\n    }\n  }, [multiple, allState, selectableOptions, selectedValues, onValueChange])\n\n  // ── Creatable ──\n  const showCreate = React.useMemo(() => {\n    if (!creatable || !search.trim()) return false\n    return !options.some(\n      (o) => o.label.toLowerCase() === search.trim().toLowerCase()\n    )\n  }, [creatable, search, options])\n\n  // ── Grouping ──\n  const groupedOptions = React.useMemo(() => {\n    if (!groups?.length) return [{ key: '__default', label: '', options }]\n    const grouped = groups.map((g) => ({\n      ...g,\n      options: options.filter((o) => o.group === g.key),\n    }))\n    const ungrouped = options.filter((o) => !o.group)\n    if (ungrouped.length) {\n      grouped.unshift({ key: '__default', label: '', options: ungrouped })\n    }\n    return grouped\n  }, [groups, options])\n\n  // ── Reset search on close ──\n  React.useEffect(() => {\n    if (!open) setSearch('')\n  }, [open])\n\n  // 2026-06-01 Select/Combobox #15(user 拍板 A):非搜尋時開選單把 focus 移到 cmdk-root,\n  // 讓 cmdk 內建方向鍵 / Enter / Home / End 導覽生效。原 PopoverContent default autofocus 找 body\n  // input/button,非搜尋無 input + 選項是 role=option div → focus 落在 content wrapper,cmdk 的 keydown\n  // handler 綁在 cmdk-root 收不到事件 → 桌機鍵盤導覽不可達(WAI-ARIA combobox 違反)。\n  // **純鍵盤路由**:滑鼠點擊路徑完全不碰;cmdk active-option highlight 是 cmdk 內部 state(非 DOM focus\n  // 驅動)故視覺不變。selector miss 時 root=null → no-op fallback(無回歸)。\n  // SSOT 在 SelectMenu → Select / Combobox / 所有 non-searchable SelectMenu consumer 自動受益。\n  const handleNonSearchableAutoFocus = React.useCallback((e: Event) => {\n    e.preventDefault()\n    const root = (e.currentTarget as HTMLElement).querySelector<HTMLElement>('[cmdk-root]')\n    root?.focus({ preventScroll: true })\n  }, [])\n\n  // RowSizeProvider 讓 PopoverContent 子樹內任何 <ItemIcon> / <ItemAvatar> /\n  // <ItemInlineAction> 都自動讀到對的 size,跟 SidebarProvider / TreeView 同一條規則。\n  // (注:Popover 透過 Portal 渲染,context 仍然會跨 portal 傳遞——React context 是 tree-based\n  // 不是 DOM-based,Portal 不影響 context propagation)\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>{children}</PopoverTrigger>\n      <RowSizeProvider value={size}>\n      <PopoverContent\n        id={contentId}\n        // w-auto override PopoverContent default w-72(rich-popover canonical)— SelectMenu 走「跟 trigger 同寬」\n        // canonical(spec L72)。minWidth = max(trigger-width, 240px sensible-min)— 對齊 shadcn / Material / Ant\n        // select dropdown 共識(2026-05-04 D1 verify SelectMenu spec implementation)。\n        className={cn(\n          'p-0 w-auto rounded-lg border border-border bg-surface-raised overflow-hidden',\n          className\n        )}\n        style={{\n          boxShadow: 'var(--elevation-200)',\n          minWidth: minWidth ?? 'max(var(--radix-popover-trigger-width), 15rem)',\n        }}\n        align={align}\n        sideOffset={OVERLAY_SIDE_OFFSET}\n        onOpenAutoFocus={onOpenAutoFocus ?? (!searchable ? handleNonSearchableAutoFocus : undefined)}\n        // **2026-05-07 v15.16 nested portal fix**:Tag dismiss inside trigger\n        // 區的 OverflowIndicator HoverCard popup(獨立 Radix portal,DOM 不在\n        // PopoverContent 內)— Radix DismissableLayer document-level outside\n        // detection 跨 portal 視為「outside」→ SelectMenu 被誤關閉。\n        // 攔 `onPointerDownOutside`,檢查 click target 是否在另一個 Radix portal\n        // 內,是 → preventDefault 取消 close。對齊 Ant Design Select multiSelect\n        // tagRender 行為(連續移除不關 dropdown)。\n        // SSOT propagation:fix 在 SelectMenu level → Combobox / 其他 SelectMenu\n        // consumer 自動受益。\n        // **2026-05-07 v15.16 nested portal fix**:Tag dismiss inside trigger 區的\n        // OverflowIndicator HoverCard popup(獨立 Radix portal,DOM 不在 SelectMenu\n        // PopoverContent 內)— Radix DismissableLayer document-level pointerdown +\n        // focusin 偵測「outside」→ SelectMenu 被誤關閉。\n        // 攔 `onInteractOutside`(統一 pointerdown + focusin),檢查 click target 是否\n        // 在另一個 Radix portal wrapper(`[data-radix-popper-content-wrapper]`),\n        // 是 → preventDefault 取消 close。對齊 Ant Design Select multiSelect tagRender\n        // 行為(連續移除不關 dropdown)。\n        // SSOT propagation:fix 在 SelectMenu level → Combobox / 所有 SelectMenu\n        // consumer 自動受益。\n        onInteractOutside={(e) => {\n          const target = e.detail.originalEvent.target as HTMLElement | null\n          if (target?.closest('[data-radix-popper-content-wrapper]')) {\n            e.preventDefault()\n          }\n        }}\n      >\n        <Command shouldFilter={searchable} className=\"bg-transparent\">\n          {searchable && (\n            <div className={cn(\n              'flex items-center gap-2 px-3 py-1 border-b border-divider',\n              size === 'lg' ? 'min-h-[calc(var(--field-height-lg)+8px)]'\n                : size === 'sm' ? 'min-h-[calc(var(--field-height-sm)+8px)]'\n                : 'min-h-[calc(var(--field-height-md)+8px)]',\n            )}>\n              <Search size={ICON_SIZE[size as 'sm' | 'md' | 'lg']} className=\"shrink-0 text-fg-muted\" aria-hidden />\n              <CommandPrimitive.Input\n                placeholder={searchPlaceholder}\n                value={search}\n                onValueChange={setSearch}\n                className={cn(\n                  'flex w-full bg-transparent outline-none placeholder:text-fg-muted',\n                  // M24 disabled state precedence:disabled 時 placeholder 切 fg-disabled(audit dim 34)\n                  'disabled:placeholder:text-fg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed',\n                  size === 'lg' ? 'text-body-lg leading-compact' : 'text-body leading-compact',\n                )}\n              />\n            </div>\n          )}\n          {/* **2026-05-07 v15.13 R2 fix**:minHeight 從 CommandList 搬到 CommandEmpty。\n              原本 CommandList 永遠套 `minHeight = field-height × minRows + 16px`,結果\n              user 過濾出 < minRows 個 match 時 list 底下空一片(eg. 打 'c' 出 2 個 match\n              卻撐高到 3 row 容量,1 row 留白)。 Fix:只有 empty state 才需要 minHeight 撐\n              起 placeholder 視覺;有 results 時 CommandList 自然 fit content。 */}\n          {/* aria-busy(2026-07-04):loading 時標注 listbox 忙碌——兌現 select.spec.md「Loading」段\n              「+ aria-busy」承諾(cmdk List 本身即 role=\"listbox\" 容器,wrapper forward props)。 */}\n          <CommandList className=\"relative\" aria-busy={loading || undefined}>\n            <CommandEmpty\n              className=\"flex items-center justify-center\"\n              style={{ minHeight: getMenuListMinHeight(size, minRows) }}\n            >\n              {loading\n                ? <Empty icon={<CircularProgress size={48}/>} className=\"py-6\" />\n                : <Empty description={emptyText} className=\"py-6\" />}\n            </CommandEmpty>\n\n            {groupedOptions.map((group, gi) => (\n              <React.Fragment key={group.key}>\n                {gi > 0 && <CommandSeparator />}\n                <CommandGroup className=\"p-0 py-2\">\n                  {group.label && (\n                    <MenuItem size={size} header>{group.label}</MenuItem>\n                  )}\n                  {group.options.map((opt) => (\n                    <CommandItem\n                      key={opt.value}\n                      value={opt.label}\n                      keywords={opt.description ? [opt.description] : undefined}\n                      disabled={opt.disabled}\n                      onSelect={() => handleSelect(opt.value)}\n                      // 2026-07-05 D4 P0 修:原 data-[selected=true]:bg-transparent 蓋掉 command.tsx base\n                      // 的 data-[selected=true]:bg-neutral-hover = cmdk virtual focus(aria-activedescendant)\n                      // 鍵盤 cursor 唯一視覺通道被抹掉 → 方向鍵移動畫面零變化(影響 Select/Combobox/PeoplePicker\n                      // 全家)。鏡射 DropdownMenu wrapper pattern:互動 bg 單一 owner 在外層 CommandItem\n                      //(base highlight 恢復;persistent selection 上移;selected×cursor 加深一階 —\n                      // 對齊本日 DropdownMenu Q2 決策),內層 MenuItem 全透明。\n                      className={cn(\n                        'p-0 rounded-none',\n                        !multiple && isSelected(opt.value) && 'bg-neutral-selected data-[selected=true]:bg-neutral-selected-active',\n                      )}\n                    >\n                      <MenuItem\n                        size={size}\n                        startIcon={opt.icon}\n                        avatar={opt.avatar}\n                        description={opt.description}\n                        checkbox={multiple}\n                        checked={isSelected(opt.value)}\n                        selected={!multiple && isSelected(opt.value)}\n                        disabled={opt.disabled}\n                        // 2026-07-05 D4:巢狀 role 修 — MenuItem 預設 role=\"option\" + aria-selected(persistent\n                        // selection)巢狀在 cmdk CommandItem(本身 role=\"option\" + aria-selected=cursor)內,\n                        // AT 讀到 option 包 option 且內外 aria-selected 語意相反 → 朗讀錯亂。鏡射 DropdownMenu\n                        // canonical(dropdown-menu.tsx「Pure visual — Radix parent handles role/aria」):\n                        // 內層純視覺 role=\"presentation\",cmdk CommandItem 是唯一 option 節點。\n                        role=\"presentation\"\n                        className=\"!bg-transparent hover:!bg-transparent\"\n                      >\n                        {renderLabel ? renderLabel(opt) : opt.label}\n                      </MenuItem>\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              </React.Fragment>\n            ))}\n\n            {/* Creatable item */}\n            {showCreate && (\n              <>\n                <CommandSeparator />\n                <CommandGroup className=\"p-0 py-2\">\n                  <CommandItem\n                    value={search}\n                    onSelect={() => {\n                      onCreate?.(search.trim())\n                      setSearch('')\n                    }}\n                    className=\"p-0 rounded-none\"\n                  >\n                    {/* 2026-07-05 D4:同上方選項 row 的巢狀 role 修 — creatable row 同樣是\n                        MenuItem 巢狀在 cmdk CommandItem(option)內,內層純視覺 role=\"presentation\"。 */}\n                    <MenuItem size={size} startIcon={Plus} role=\"presentation\" className=\"!bg-transparent hover:!bg-transparent\">\n                      {createLabel(search.trim())}\n                    </MenuItem>\n                  </CommandItem>\n                </CommandGroup>\n              </>\n            )}\n          </CommandList>\n\n          {/* SR 播報 empty / loading 空狀態(見 SelectMenuLiveStatus docblock,2026-07-05 D4) */}\n          <SelectMenuLiveStatus loading={loading} emptyText={emptyText} />\n\n          {/* Multi-select footer: Select All\n              - 沒有選項時不顯示(selectableOptions.length === 0)\n              - 搜尋有文字時不顯示(search 非空 = 使用者在找特定項目,「全選」沒意義) */}\n          {multiple && selectableOptions.length > 0 && !search && (\n            <MenuFooter>\n              {/* 2026-07-05 D4:全選列鍵盤可達修 — 原裸 MenuItem(div 預設 role=\"option\" 無 tabIndex)\n                  位於 CommandList 之外:cmdk 方向鍵只導覽 [cmdk-item]、Tab 也到不了 div → 鍵盤使用者\n                  完全無法操作全選(WCAG 2.1.1),且該 role=\"option\" 無 listbox 祖先(orphan,axe\n                  aria-required-parent)。改真實 focusable checkbox 語意:tabIndex=0 + role=\"checkbox\" +\n                  aria-checked(indeterminate → \"mixed\")+ Enter / Space 觸發;preventDefault 讓 cmdk root\n                  onKeyDown(源碼檢查 e.defaultPrevented)不會再對 active option 重複觸發 Enter。\n                  aria-selected 顯式蓋回 undefined(MenuItem 內建 aria-selected 對 role=\"checkbox\" 無效)。 */}\n              <MenuItem\n                size={size}\n                checkbox\n                checked={allState}\n                onClick={handleSelectAll}\n                role=\"checkbox\"\n                aria-checked={allState === 'indeterminate' ? 'mixed' : allState}\n                aria-selected={undefined}\n                tabIndex={0}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault()\n                    handleSelectAll()\n                  }\n                }}\n              >\n                {selectAllLabel}\n              </MenuItem>\n            </MenuFooter>\n          )}\n        </Command>\n      </PopoverContent>\n      </RowSizeProvider>\n    </Popover>\n  )\n})\n\nSelectMenu.displayName = 'SelectMenu'\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 selectMenuMeta = {\n  component: 'SelectMenu',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface-raised', 'bg-transparent'],\n    fg: ['text-fg-muted'],\n    ring: [],\n  },\n} as const\n\n/**\n * 2026-07-05 D4 P0 修(searchable 鍵盤死路):trigger 內的裸 <input> 與 portal 內的 cmdk root\n * 在不同 DOM 子樹 — 鍵盤事件永遠 bubble 不到 cmdk 的 ArrowUp/Down/Enter handler([cmdk-root]\n * onKeyDown)→ searchable Select / PeoplePicker single / Combobox searchIn='trigger' 開啟後\n * 只能 Esc。修法 = APG combobox-with-list:trigger input 把三鍵 re-dispatch 給 cmdk root\n * (native KeyboardEvent bubbles 經 React root delegation 觸發 cmdk synthetic handler)。\n * Home/End 刻意不轉送(文字輸入的 caret 語意優先,對齊 MUI/Ant Autocomplete)。\n * 已知殘項:aria-activedescendant 尚未綁回 trigger input(SR 播報 active option 名),列 D4 P1 backlog。\n */\nexport function forwardKeyToListbox(contentId: string | undefined, e: React.KeyboardEvent): boolean {\n  if (!contentId) return false\n  if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Enter') return false\n  const root = document.getElementById(contentId)?.querySelector<HTMLElement>('[cmdk-root]')\n  if (!root) return false\n  e.preventDefault()\n  root.dispatchEvent(new KeyboardEvent('keydown', { key: e.key, bubbles: true, cancelable: true }))\n  return true\n}\n\nexport { SelectMenu }\n"],"names":["SelectMenu","CommandPrimitive"],"mappings":"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"}

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

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

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

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

package/dist/components/SelectionControl/index.js

@@ -0,0 +1,7 @@
+import { SelectionItem, selectionItemMeta, selectionItemStyles } from "./selection-item.js";
+export {
+  SelectionItem,
+  selectionItemMeta,
+  selectionItemStyles
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/SelectionControl/selection-item.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。
+ * 不進 root barrel front-door;由 Checkbox / RadioGroup wrap 消費,end-user app 請用 wrapper 元件。
+ */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import type { LucideIcon } from 'lucide-react';
@@ -60,7 +64,7 @@ export declare const selectionItemMeta: {
         readonly lg: {};
     };
     readonly defaultSize: "md";
-    readonly states: readonly ["default", "hover", "selected", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "disabled"];
     readonly tokens: {
         readonly fg: readonly ["text-foreground", "text-fg-secondary", "text-fg-disabled"];
     };

package/dist/components/SelectionControl/selection-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection-item.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionControl/selection-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAyBlF,eAAO,MAAM,mBAAmB;;8EAc/B,CAAA;AA2BD,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,mBAAmB,CAAC;IACxH,sDAAsD;IACtD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe;IACf,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;OASG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmFD,QAAA,MAAM,aAAa,2FA4ClB,CAAA;AAID,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAcpB,CAAA;AAEV,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"selection-item.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionControl/selection-item.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAyBlF,eAAO,MAAM,mBAAmB;;8EAc/B,CAAA;AA2BD,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,mBAAmB,CAAC;IACxH,sDAAsD;IACtD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe;IACf,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;OASG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAqFD,QAAA,MAAM,aAAa,2FA4ClB,CAAA;AAID,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAcpB,CAAA;AAEV,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/SelectionControl/selection-item.js

@@ -55,6 +55,7 @@ function ContentSlot({ htmlFor, disabled, label, description, sizeKey, labelClam
       "label",
       {
         htmlFor,
+        "aria-disabled": disabled || void 0,
         className: cn(
           "cursor-pointer block break-words",
           labelClampClass,
@@ -129,7 +130,8 @@ const selectionItemMeta = {
     lg: {}
   },
   defaultSize: "md",
-  states: ["default", "hover", "selected", "focus-visible", "disabled"],
+  states: ["default", "disabled"],
+  // disabled 是唯一視覺狀態;selected / hover 屬傳入的 control(spec「為何無 ColorMatrix / StateBehavior」)
   tokens: {
     fg: ["text-foreground", "text-fg-secondary", "text-fg-disabled"]
   }

package/dist/components/SelectionControl/selection-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection-item.js","sources":["../../../src/components/SelectionControl/selection-item.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, type AvatarData } from '@/design-system/components/Avatar/avatar'\nimport { ICON_SIZE, AVATAR_SIZE } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── Selection Item Styles ───────────────────────────────────────────────────\n// Checkbox 和 RadioGroup 共用的 item 佈局。\n//\n// 結構(item-anatomy.spec.md 4-slot 模型):\n//   [control] [optional prefix(icon|avatar)] [content(label/desc)] [optional suffix]\n//\n// padding 公式：py = (field-height - 1lh) / 2\n//   - 單行時 item 高度 = field-height（對齊同 size 的 Input）\n//   - 多行時 padding 不變（文字間距一致）\n//   - density 切換時 field-height 自動調整，padding 跟著算\n//\n// 容器設 text-body / text-body-lg 建立 1lh context（div 上正常繼承）。\n//\n// ── 為什麼 NOT 消費 ROW_PADDING_BY_SIZE(item-anatomy.tsx SSOT,2026-04-24 consolidation)──\n// menu / sidebar / tree 3 cva 統一消費 ROW_PADDING_BY_SIZE;SelectionItem 刻意不消費,\n// 因 typography 不同(mode 差異,非 drift):\n//   - ROW_PADDING_BY_SIZE:`text-body leading-compact`(scanning mode,緊湊)\n//   - SelectionItem:`text-body`(**無 leading-compact** — reading mode,Checkbox/Radio 搭配\n//     較長 label + description,需預設 1.5 leading 而非 1.3 compact)\n// py 公式本身相同 — 若 field-height token 變動,本檔需手動同步(contained,由本註解 anchor 追)。\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport const selectionItemStyles = cva(\n  'flex items-start gap-2',\n  {\n    variants: {\n      size: {\n        sm: 'text-body py-[calc((var(--field-height-sm)_-_1lh)_/_2)]',\n        md: 'text-body py-[calc((var(--field-height-md)_-_1lh)_/_2)]',\n        lg: 'text-body-lg py-[calc((var(--field-height-lg)_-_1lh)_/_2)]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\ntype SizeKey = 'sm' | 'md' | 'lg'\n\n// Avatar 尺寸 + Icon 尺寸從 item-layout module 共用,不在此 re-declare(避免漂移)\n// AVATAR_SIZE / ICON_SIZE 都是 item-layout 的 canonical 常數。\n//\n// SelectionItem 跟 MenuItem 的差異:SelectionItem 有 control(checkbox/radio)。\n// block 模式時 **control 跟 prefix 一起走 block 高度**——兩者都在 text block center,\n// 維持「selection + identity」是一組的視覺語意,不會歪斜。\nconst AVATAR_PX = AVATAR_SIZE\n\n// ── Block 對齊容器 ──\n// sm/md: reading mode (body 14/1.5 + body 14/1.5) — gap token `reading`\n// lg:    reading-lg mode (body-lg 16/1.5 + body 14/1.5) — gap token `reading-lg`\n// desc 永遠 body(14) line-height;`1lh` 會 resolve 到 label 的 line-height(sm/md=21, lg=24)\nconst blockAlignClass: Record<SizeKey, string> = {\n  sm: 'h-[calc(1lh+var(--item-gap-label-desc-reading)+var(--font-body-size)*1.5)]',\n  md: 'h-[calc(1lh+var(--item-gap-label-desc-reading)+var(--font-body-size)*1.5)]',\n  lg: 'h-[calc(1lh+var(--item-gap-label-desc-reading-lg)+var(--font-body-size)*1.5)]',\n}\n\n// ── Selection Item ──────────────────────────────────────────────────────────\n// 通用 item 行：control + 可選 prefix(icon/avatar) + label + description。\n// control 永遠包在 h-[1lh] 容器內,對齊第一行 label。\n// prefix 走 24px 閾值規則,各自獨立對齊。\n\nexport interface SelectionItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof selectionItemStyles> {\n  /** Checkbox 或 RadioGroupItem 元素(永遠存在,永遠 inline 對齊) */\n  control: React.ReactNode\n  /** Label 文字 */\n  label: React.ReactNode\n  /** 描述文字(fg-secondary;reading mode 永遠 14px) */\n  description?: React.ReactNode\n  /**\n   * 可選的左側 icon(在 control 之後、label 之前)。LucideIcon 型別,元件內部控制尺寸\n   * (16/16/20px @ sm/md/lg)。**永遠 inline 對齊第一行 label**(icon ≤24px)。\n   * 與 `avatar` 互斥。\n   */\n  icon?: LucideIcon\n  /**\n   * 可選的左側 avatar(在 control 之後、label 之前)。`AvatarData` 資料型別,元件內部渲染 Avatar。\n   * 尺寸由 `description` 自動決定(跟 MenuItem 同 convention):\n   * - 無 desc → inline(20/24/24px),跟 control 同步在 label 第一行\n   * - 有 desc → block(32/32/40px),跟 control 同步在 text block center\n   *\n   * Block 模式時 **control(checkbox/radio)也一起走 block 高度**——兩者都在\n   * text block center,不會歪斜。與 `icon` 互斥。\n   */\n  avatar?: AvatarData\n  /** htmlFor（label 指向 control 的 id） */\n  htmlFor?: string\n  /** disabled 狀態影響 label 顏色 */\n  disabled?: boolean\n  /**\n   * Label 最大行數(line-clamp 截斷)。\n   *\n   * - `undefined`(預設 prop 值未傳)→ 套用元件預設 `'none'`(form 欄位允許任意長度)\n   * - 數字 → 截斷到該行數\n   * - `'none'` → 明確不截斷(語意等同預設)\n   *\n   * 為什麼用 `'none'` 而不是 `undefined`?React props 的 destructure default 在\n   * `undefined` 時會接管,要明確覆寫必須用非 undefined 的 sentinel。\n   */\n  labelMaxLines?: number | 'none'\n  /**\n   * Description 最大行數。預設 `'none'`(不截)。\n   */\n  descMaxLines?: number | 'none'\n  className?: string\n}\n\n/** 把 maxLines 轉成 line-clamp class;'none' / 0 → 空字串 */\nfunction lineClampClass(maxLines: number | 'none'): string {\n  if (maxLines === 'none' || !maxLines) return ''\n  if (maxLines === 1) return 'line-clamp-1'\n  if (maxLines === 2) return 'line-clamp-2'\n  if (maxLines === 3) return 'line-clamp-3'\n  if (maxLines === 4) return 'line-clamp-4'\n  if (maxLines === 5) return 'line-clamp-5'\n  if (maxLines === 6) return 'line-clamp-6'\n  return ''\n}\n\n// ── PrefixSlot — 24px 閾值規則 ──\n// icon(永遠 ≤24px)→ inline;avatar + 無 desc → inline;avatar + 有 desc → block(centered on text block)\ntype PrefixSlotProps = {\n  icon: LucideIcon | undefined\n  avatar: AvatarData | undefined\n  sizeKey: SizeKey\n  alignClass: string\n  avatarPx: number\n  disabled: boolean | undefined\n}\nfunction PrefixSlot({ icon: Icon, avatar, sizeKey, alignClass, avatarPx, disabled }: PrefixSlotProps) {\n  if (!Icon && !avatar) return null\n  return (\n    <div className={cn(alignClass, 'flex items-center shrink-0')}>\n      {Icon && (\n        <Icon\n          size={ICON_SIZE[sizeKey]}\n          className={cn('shrink-0', disabled && 'text-fg-disabled')}\n          aria-hidden\n        />\n      )}\n      {!Icon && avatar && (\n        <Avatar src={avatar.src} alt={avatar.alt} color={avatar.color} hoverCard={avatar.hoverCard} size={avatarPx} />\n      )}\n    </div>\n  )\n}\n\n// ── ContentSlot — label + optional description ──\n// inline-style fontSize 繞 tailwind-merge 把 text-body / text-fg-secondary 誤判同組衝突的 bug\ntype ContentSlotProps = {\n  htmlFor: string | undefined\n  disabled: boolean | undefined\n  label: React.ReactNode\n  description: React.ReactNode | undefined\n  sizeKey: SizeKey\n  labelClampClass: string\n  descClampClass: string\n}\nfunction ContentSlot({ htmlFor, disabled, label, description, sizeKey, labelClampClass, descClampClass }: ContentSlotProps) {\n  return (\n    <div className=\"min-w-0 flex-1\">\n      <label\n        htmlFor={htmlFor}\n        className={cn(\n          'cursor-pointer block break-words',\n          labelClampClass,\n          disabled ? 'text-fg-disabled cursor-not-allowed' : 'text-foreground',\n        )}\n      >\n        {label}\n      </label>\n      {description && (\n        <p\n          className={cn(\n            sizeKey === 'lg' ? 'mt-[var(--item-gap-label-desc-reading-lg)]' : 'mt-[var(--item-gap-label-desc-reading)]',\n            'break-words',\n            descClampClass,\n            disabled ? 'text-fg-disabled' : 'text-fg-secondary',\n          )}\n          style={{ fontSize: 'var(--font-body-size)' }}\n        >\n          {description}\n        </p>\n      )}\n    </div>\n  )\n}\n\nconst SelectionItem = React.forwardRef<HTMLDivElement, SelectionItemProps>(\n  (\n    {\n      control,\n      label,\n      description,\n      icon: Icon,\n      avatar,\n      htmlFor,\n      disabled,\n      size,\n      labelMaxLines = 'none',\n      descMaxLines = 'none',\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeKey: SizeKey = size ?? 'md'\n    if (process.env.NODE_ENV !== 'production' && Icon && avatar) {\n      // eslint-disable-next-line no-console\n      console.warn('[SelectionItem] `icon` 和 `avatar` 互斥,只會渲染 icon。')\n    }\n    // Block 對齊:control 跟 prefix(avatar)一起走 block 高度,「selection + identity」視覺單元不歪斜\n    const useBlock = !!avatar && !Icon && !!description && AVATAR_PX.block[sizeKey] > 24\n    const avatarPx = useBlock ? AVATAR_PX.block[sizeKey] : AVATAR_PX.inline[sizeKey]\n    const alignClass = useBlock ? blockAlignClass[sizeKey] : 'h-[1lh]'\n\n    return (\n      <div ref={ref} className={cn(selectionItemStyles({ size }), className)} {...props}>\n        <div className={cn(alignClass, 'flex items-center shrink-0')}>{control}</div>\n        <PrefixSlot icon={Icon} avatar={avatar} sizeKey={sizeKey} alignClass={alignClass} avatarPx={avatarPx} disabled={disabled} />\n        <ContentSlot\n          htmlFor={htmlFor}\n          disabled={disabled}\n          label={label}\n          description={description}\n          sizeKey={sizeKey}\n          labelClampClass={lineClampClass(labelMaxLines)}\n          descClampClass={lineClampClass(descMaxLines)}\n        />\n      </div>\n    )\n  }\n)\nSelectionItem.displayName = 'SelectionItem'\n\n// Story auto-compile metadata — Phase 1+2 migration\nexport const selectionItemMeta = {\n  component: 'SelectionItem',\n  family: 2,\n  variants: {},\n  sizes: {\n    sm: {},\n    md: {},\n    lg: {},\n  },\n  defaultSize: 'md',\n  states: ['default', 'hover', 'selected', 'focus-visible', 'disabled'],\n  tokens: {\n    fg: ['text-foreground', 'text-fg-secondary', 'text-fg-disabled'],\n  },\n} as const\n\nexport { SelectionItem }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"selection-item.js","sources":["../../../src/components/SelectionControl/selection-item.tsx"],"sourcesContent":["/**\n * @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 Checkbox / RadioGroup wrap 消費,end-user app 請用 wrapper 元件。\n */\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, type AvatarData } from '@/design-system/components/Avatar/avatar'\nimport { ICON_SIZE, AVATAR_SIZE } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── Selection Item Styles ───────────────────────────────────────────────────\n// Checkbox 和 RadioGroup 共用的 item 佈局。\n//\n// 結構(item-anatomy.spec.md 4-slot 模型):\n//   [control] [optional prefix(icon|avatar)] [content(label/desc)](3-slot,見 spec「定位」)\n//\n// padding 公式：py = (field-height - 1lh) / 2\n//   - 單行時 item 高度 = field-height（對齊同 size 的 Input）\n//   - 多行時 padding 不變（文字間距一致）\n//   - density 切換時 field-height 自動調整，padding 跟著算\n//\n// 容器設 text-body / text-body-lg 建立 1lh context（div 上正常繼承）。\n//\n// ── 為什麼 NOT 消費 ROW_PADDING_BY_SIZE(item-anatomy.tsx SSOT,2026-04-24 consolidation)──\n// menu / sidebar / tree 3 cva 統一消費 ROW_PADDING_BY_SIZE;SelectionItem 刻意不消費,\n// 因 typography 不同(mode 差異,非 drift):\n//   - ROW_PADDING_BY_SIZE:`text-body leading-compact`(scanning mode,緊湊)\n//   - SelectionItem:`text-body`(**無 leading-compact** — reading mode,Checkbox/Radio 搭配\n//     較長 label + description,需預設 1.5 leading 而非 1.3 compact)\n// py 公式本身相同 — 若 field-height token 變動,本檔需手動同步(contained,由本註解 anchor 追)。\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport const selectionItemStyles = cva(\n  'flex items-start gap-2',\n  {\n    variants: {\n      size: {\n        sm: 'text-body py-[calc((var(--field-height-sm)_-_1lh)_/_2)]',\n        md: 'text-body py-[calc((var(--field-height-md)_-_1lh)_/_2)]',\n        lg: 'text-body-lg py-[calc((var(--field-height-lg)_-_1lh)_/_2)]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\ntype SizeKey = 'sm' | 'md' | 'lg'\n\n// Avatar 尺寸 + Icon 尺寸從 item-layout module 共用,不在此 re-declare(避免漂移)\n// AVATAR_SIZE / ICON_SIZE 都是 item-layout 的 canonical 常數。\n//\n// SelectionItem 跟 MenuItem 的差異:SelectionItem 有 control(checkbox/radio)。\n// block 模式時 **control 跟 prefix 一起走 block 高度**——兩者都在 text block center,\n// 維持「selection + identity」是一組的視覺語意,不會歪斜。\nconst AVATAR_PX = AVATAR_SIZE\n\n// ── Block 對齊容器 ──\n// sm/md: reading mode (body 14/1.5 + body 14/1.5) — gap token `reading`\n// lg:    reading-lg mode (body-lg 16/1.5 + body 14/1.5) — gap token `reading-lg`\n// desc 永遠 body(14) line-height;`1lh` 會 resolve 到 label 的 line-height(sm/md=21, lg=24)\nconst blockAlignClass: Record<SizeKey, string> = {\n  sm: 'h-[calc(1lh+var(--item-gap-label-desc-reading)+var(--font-body-size)*1.5)]',\n  md: 'h-[calc(1lh+var(--item-gap-label-desc-reading)+var(--font-body-size)*1.5)]',\n  lg: 'h-[calc(1lh+var(--item-gap-label-desc-reading-lg)+var(--font-body-size)*1.5)]',\n}\n\n// ── Selection Item ──────────────────────────────────────────────────────────\n// 通用 item 行：control + 可選 prefix(icon/avatar) + label + description。\n// control 永遠包在 h-[1lh] 容器內,對齊第一行 label。\n// prefix 走 24px 閾值規則,各自獨立對齊。\n\nexport interface SelectionItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof selectionItemStyles> {\n  /** Checkbox 或 RadioGroupItem 元素(永遠存在,永遠 inline 對齊) */\n  control: React.ReactNode\n  /** Label 文字 */\n  label: React.ReactNode\n  /** 描述文字(fg-secondary;reading mode 永遠 14px) */\n  description?: React.ReactNode\n  /**\n   * 可選的左側 icon(在 control 之後、label 之前)。LucideIcon 型別,元件內部控制尺寸\n   * (16/16/20px @ sm/md/lg)。**永遠 inline 對齊第一行 label**(icon ≤24px)。\n   * 與 `avatar` 互斥。\n   */\n  icon?: LucideIcon\n  /**\n   * 可選的左側 avatar(在 control 之後、label 之前)。`AvatarData` 資料型別,元件內部渲染 Avatar。\n   * 尺寸由 `description` 自動決定(跟 MenuItem 同 convention):\n   * - 無 desc → inline(20/24/24px),跟 control 同步在 label 第一行\n   * - 有 desc → block(32/32/40px),跟 control 同步在 text block center\n   *\n   * Block 模式時 **control(checkbox/radio)也一起走 block 高度**——兩者都在\n   * text block center,不會歪斜。與 `icon` 互斥。\n   */\n  avatar?: AvatarData\n  /** htmlFor（label 指向 control 的 id） */\n  htmlFor?: string\n  /** disabled 狀態影響 label 顏色 */\n  disabled?: boolean\n  /**\n   * Label 最大行數(line-clamp 截斷)。\n   *\n   * - `undefined`(預設 prop 值未傳)→ 套用元件預設 `'none'`(form 欄位允許任意長度)\n   * - 數字 → 截斷到該行數\n   * - `'none'` → 明確不截斷(語意等同預設)\n   *\n   * 為什麼用 `'none'` 而不是 `undefined`?React props 的 destructure default 在\n   * `undefined` 時會接管,要明確覆寫必須用非 undefined 的 sentinel。\n   */\n  labelMaxLines?: number | 'none'\n  /**\n   * Description 最大行數。預設 `'none'`(不截)。\n   */\n  descMaxLines?: number | 'none'\n  className?: string\n}\n\n/** 把 maxLines 轉成 line-clamp class;'none' / 0 → 空字串 */\nfunction lineClampClass(maxLines: number | 'none'): string {\n  if (maxLines === 'none' || !maxLines) return ''\n  if (maxLines === 1) return 'line-clamp-1'\n  if (maxLines === 2) return 'line-clamp-2'\n  if (maxLines === 3) return 'line-clamp-3'\n  if (maxLines === 4) return 'line-clamp-4'\n  if (maxLines === 5) return 'line-clamp-5'\n  if (maxLines === 6) return 'line-clamp-6'\n  return ''\n}\n\n// ── PrefixSlot — 24px 閾值規則 ──\n// icon(永遠 ≤24px)→ inline;avatar + 無 desc → inline;avatar + 有 desc → block(centered on text block)\ntype PrefixSlotProps = {\n  icon: LucideIcon | undefined\n  avatar: AvatarData | undefined\n  sizeKey: SizeKey\n  alignClass: string\n  avatarPx: number\n  disabled: boolean | undefined\n}\nfunction PrefixSlot({ icon: Icon, avatar, sizeKey, alignClass, avatarPx, disabled }: PrefixSlotProps) {\n  if (!Icon && !avatar) return null\n  return (\n    <div className={cn(alignClass, 'flex items-center shrink-0')}>\n      {Icon && (\n        <Icon\n          size={ICON_SIZE[sizeKey]}\n          className={cn('shrink-0', disabled && 'text-fg-disabled')}\n          aria-hidden\n        />\n      )}\n      {!Icon && avatar && (\n        <Avatar src={avatar.src} alt={avatar.alt} color={avatar.color} hoverCard={avatar.hoverCard} size={avatarPx} />\n      )}\n    </div>\n  )\n}\n\n// ── ContentSlot — label + optional description ──\n// inline-style fontSize 繞 tailwind-merge 把 text-body / text-fg-secondary 誤判同組衝突的 bug\ntype ContentSlotProps = {\n  htmlFor: string | undefined\n  disabled: boolean | undefined\n  label: React.ReactNode\n  description: React.ReactNode | undefined\n  sizeKey: SizeKey\n  labelClampClass: string\n  descClampClass: string\n}\nfunction ContentSlot({ htmlFor, disabled, label, description, sizeKey, labelClampClass, descClampClass }: ContentSlotProps) {\n  return (\n    <div className=\"min-w-0 flex-1\">\n      <label\n        htmlFor={htmlFor}\n        // 2026-06-10 a11y:styled-disabled label 明告 inactive(WCAG 1.4.3 豁免可機判;對齊 FieldLabel 同修;a11y 補強不動 SSOT = AUTO 分權,user verbatim「確保所有的任務你都有做到完美做到完整」)\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'cursor-pointer block break-words',\n          labelClampClass,\n          disabled ? 'text-fg-disabled cursor-not-allowed' : 'text-foreground',\n        )}\n      >\n        {label}\n      </label>\n      {description && (\n        <p\n          className={cn(\n            sizeKey === 'lg' ? 'mt-[var(--item-gap-label-desc-reading-lg)]' : 'mt-[var(--item-gap-label-desc-reading)]',\n            'break-words',\n            descClampClass,\n            disabled ? 'text-fg-disabled' : 'text-fg-secondary',\n          )}\n          style={{ fontSize: 'var(--font-body-size)' }}\n        >\n          {description}\n        </p>\n      )}\n    </div>\n  )\n}\n\nconst SelectionItem = React.forwardRef<HTMLDivElement, SelectionItemProps>(\n  (\n    {\n      control,\n      label,\n      description,\n      icon: Icon,\n      avatar,\n      htmlFor,\n      disabled,\n      size,\n      labelMaxLines = 'none',\n      descMaxLines = 'none',\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeKey: SizeKey = size ?? 'md'\n    if (process.env.NODE_ENV !== 'production' && Icon && avatar) {\n      // eslint-disable-next-line no-console\n      console.warn('[SelectionItem] `icon` 和 `avatar` 互斥,只會渲染 icon。')\n    }\n    // Block 對齊:control 跟 prefix(avatar)一起走 block 高度,「selection + identity」視覺單元不歪斜\n    const useBlock = !!avatar && !Icon && !!description && AVATAR_PX.block[sizeKey] > 24\n    const avatarPx = useBlock ? AVATAR_PX.block[sizeKey] : AVATAR_PX.inline[sizeKey]\n    const alignClass = useBlock ? blockAlignClass[sizeKey] : 'h-[1lh]'\n\n    return (\n      <div ref={ref} className={cn(selectionItemStyles({ size }), className)} {...props}>\n        <div className={cn(alignClass, 'flex items-center shrink-0')}>{control}</div>\n        <PrefixSlot icon={Icon} avatar={avatar} sizeKey={sizeKey} alignClass={alignClass} avatarPx={avatarPx} disabled={disabled} />\n        <ContentSlot\n          htmlFor={htmlFor}\n          disabled={disabled}\n          label={label}\n          description={description}\n          sizeKey={sizeKey}\n          labelClampClass={lineClampClass(labelMaxLines)}\n          descClampClass={lineClampClass(descMaxLines)}\n        />\n      </div>\n    )\n  }\n)\nSelectionItem.displayName = 'SelectionItem'\n\n// Story auto-compile metadata — Phase 1+2 migration\nexport const selectionItemMeta = {\n  component: 'SelectionItem',\n  family: 2,\n  variants: {},\n  sizes: {\n    sm: {},\n    md: {},\n    lg: {},\n  },\n  defaultSize: 'md',\n  states: ['default', 'disabled'], // disabled 是唯一視覺狀態;selected / hover 屬傳入的 control(spec「為何無 ColorMatrix / StateBehavior」)\n  tokens: {\n    fg: ['text-foreground', 'text-fg-secondary', 'text-fg-disabled'],\n  },\n} as const\n\nexport { SelectionItem }\n"],"names":[],"mappings":"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"}

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

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

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

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

package/dist/components/Separator/index.js

@@ -0,0 +1,6 @@
+import { Separator, separatorMeta } from "./separator.js";
+export {
+  Separator,
+  separatorMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Separator/separator.d.ts

@@ -3,10 +3,10 @@ import * as SeparatorPrimitive from "@radix-ui/react-separator";
 declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const separatorMeta: {
     readonly component: "Separator";
-    readonly family: null;
+    readonly family: "self-contained";
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
         readonly bg: readonly [];
         readonly fg: readonly [];

package/dist/components/Separator/separator.js

@@ -21,11 +21,12 @@ const Separator = React.forwardRef(
 Separator.displayName = "Separator";
 const separatorMeta = {
   component: "Separator",
-  family: null,
-  // non-family composite / overlay / layout
+  family: "self-contained",
+  // 純視覺 divider,獨立視覺無 slot 結構(對齊 spec frontmatter L3 family: self-contained)
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: ["default"],
+  // 純 Radix Separator.Root,非互動,無 hover/active/focus/disabled(對齊 spec「無 StateBehavior」bullet + A11y 段;段名指法免行號漂移)
   tokens: {
     bg: [],
     fg: [],

package/dist/components/Separator/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","sources":["../../../src/components/Separator/separator.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-divider\",\n        orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nSeparator.displayName = \"Separator\"\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 separatorMeta = {\n  component: 'Separator',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: [],\n    ring: [],\n  },\n} as const\n\nexport { Separator }\n"],"names":[],"mappings":";;;;AAKA,MAAM,YAAY,MAAM;AAAA,EAItB,CACE,EAAE,WAAW,cAAc,cAAc,aAAa,MAAM,GAAG,SAC/D,QAEA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,eAAe,gBAAgB;AAAA,QAC/C;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AACA,UAAU,cAAc;AAIjB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}
+{"version":3,"file":"separator.js","sources":["../../../src/components/Separator/separator.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-divider\",\n        orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nSeparator.displayName = \"Separator\"\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 separatorMeta = {\n  component: 'Separator',\n  family: 'self-contained', // 純視覺 divider,獨立視覺無 slot 結構(對齊 spec frontmatter L3 family: self-contained)\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default'], // 純 Radix Separator.Root,非互動,無 hover/active/focus/disabled(對齊 spec「無 StateBehavior」bullet + A11y 段;段名指法免行號漂移)\n  tokens: {\n    bg: [],\n    fg: [],\n    ring: [],\n  },\n} as const\n\nexport { Separator }\n"],"names":[],"mappings":";;;;AAKA,MAAM,YAAY,MAAM;AAAA,EAItB,CACE,EAAE,WAAW,cAAc,cAAc,aAAa,MAAM,GAAG,SAC/D,QAEA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,eAAe,gBAAgB;AAAA,QAC/C;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AACA,UAAU,cAAc;AAIjB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

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

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

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

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

package/dist/components/Sheet/index.js

@@ -0,0 +1,17 @@
+import { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetMeta, sheetVariants } from "./sheet.js";
+export {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  sheetMeta,
+  sheetVariants
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Sheet/sheet.d.ts

@@ -7,9 +7,9 @@ import { type SurfaceHeaderProps } from "../../patterns/overlay-surface/overlay-
  *
  * ── 定位(2026-04-21 canonical)──
  * Sheet 給**消費者**用的唯一合法形式 = **右側開啟的 modal**(side="right"),
- * 內部結構跟 `Dialog` 一致:`SheetHeader` / `SheetBody` / `SheetFooter`(各自消費
- * `SurfaceHeader` / `SurfaceBody` / `SurfaceFooter` primitive,padding token SSOT
- * 在 `patterns/overlay-surface/`)。side="right" 是 defaultVariants,消費者不傳 side。
+ * 內部結構跟 `Dialog` 一致:`SheetHeader` / `SheetBody` / `SheetFooter`(Header / Footer 消費
+ * `SurfaceHeader` / `SurfaceFooter` primitive;Body = `ScrollArea` + 內層 padding div,
+ * padding token SSOT 在 `patterns/overlay-surface/`)。side="right" 是 defaultVariants,消費者不傳 side。
  *
  * ── 其他 side(top / bottom / left)——**非消費者 API**,內部基建用 ──
  * top / bottom / left 變體保留給 DS 內部基建(例:Sidebar 在小尺寸視口時從 left 滑入)。
@@ -20,9 +20,10 @@ import { type SurfaceHeaderProps } from "../../patterns/overlay-surface/overlay-
  * - Sheet(side="right")= 側滑 modal,用於「補充資訊 / 多欄位表單 / 編輯 flow」
  * - 兩者 API 結構 1:1 對應,差異只在 side / 動畫 / 初始寬度
  *
- * ── Header / Body / Footer 消費 SurfaceXxx SSOT ──
+ * ── Header / Footer 消費 SurfaceXxx SSOT;Body 走 ScrollArea canonical ──
  * 避免 padding 漂移 — Dialog / Popover / Sheet / Coachmark 共用同一套 overlay-surface
- * padding token(px-loose / py-tight),改 overlay-surface.tsx 四者自動跟進。
+ * padding token(px-loose / py-tight),改 overlay-surface.tsx 四者自動跟進;
+ * SheetBody 同 DialogBody:ScrollArea + 內層 px-loose / pt-tight / pb-bottom(詳 SheetBody comment)。
  */
 declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
 declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -45,7 +46,7 @@ export declare const sheetMeta: {
     readonly family: null;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
         readonly bg: readonly ["bg-surface-raised"];
         readonly fg: readonly ["text-fg-secondary", "text-foreground"];

package/dist/components/Sheet/sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/sheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,0DAA0D,CAAA;AAIjE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,QAAA,MAAM,KAAK,sCAAsB,CAAA;AAEjC,QAAA,MAAM,YAAY,6GAAyB,CAAA;AAE3C,QAAA,MAAM,UAAU,2GAAuB,CAAA;AAEvC,QAAA,MAAM,WAAW,4CAAwB,CAAA;AAEzC,QAAA,MAAM,YAAY,6JAYhB,CAAA;AAMF,QAAA,MAAM,aAAa;;8EAoBlB,CAAA;AAED,UAAU,iBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,EACnE,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAezC,QAAA,MAAM,YAAY,0FAgBhB,CAAA;AAOF,QAAA,MAAM,WAAW,2FAgBf,CAAA;AAeF,QAAA,MAAM,SAAS,oOAcb,CAAA;AAIF,QAAA,MAAM,WAAW,6GAGiE,CAAA;AAGlF,QAAA,MAAM,UAAU,mKASd,CAAA;AAGF,QAAA,MAAM,gBAAgB,6KAWpB,CAAA;AAKF,eAAO,MAAM,SAAS;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,aAAa,GACd,CAAA"}
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/sheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,0DAA0D,CAAA;AAIjE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,QAAA,MAAM,KAAK,sCAAsB,CAAA;AAEjC,QAAA,MAAM,YAAY,6GAAyB,CAAA;AAE3C,QAAA,MAAM,UAAU,2GAAuB,CAAA;AAEvC,QAAA,MAAM,WAAW,4CAAwB,CAAA;AAEzC,QAAA,MAAM,YAAY,6JAYhB,CAAA;AAMF,QAAA,MAAM,aAAa;;8EAoBlB,CAAA;AAED,UAAU,iBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,EACnE,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAezC,QAAA,MAAM,YAAY,0FAgBhB,CAAA;AAOF,QAAA,MAAM,WAAW,2FAgBf,CAAA;AAeF,QAAA,MAAM,SAAS,oOAcb,CAAA;AAIF,QAAA,MAAM,WAAW,6GAGiE,CAAA;AAGlF,QAAA,MAAM,UAAU,mKASd,CAAA;AAGF,QAAA,MAAM,gBAAgB,6KAWpB,CAAA;AAKF,eAAO,MAAM,SAAS;;;;;;;;;;;CAgBZ,CAAA;AAEV,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,aAAa,GACd,CAAA"}

package/dist/components/Sheet/sheet.js

@@ -100,7 +100,7 @@ const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   DialogPrimitive.Title,
   {
     ref,
-    className: cn("text-body-lg font-medium truncate text-foreground", className),
+    className: cn("text-body-lg font-medium truncate", className),
     ...props
   }
 ));
@@ -120,7 +120,8 @@ const sheetMeta = {
   // non-family composite / overlay / layout
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 2026-07-04 audit 對齊:Sheet 本身無 disabled state(surface container,spec 邊界案例明文;對齊 popover/dialog meta pattern)
+  states: ["default"],
   tokens: {
     bg: ["bg-surface-raised"],
     fg: ["text-fg-secondary", "text-foreground"],