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

package/dist/components/Menu/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sources":["../../../src/components/Menu/menu-item.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 { cva, type VariantProps } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Checkbox } from '@/design-system/components/Checkbox/checkbox'\nimport { Avatar, type AvatarData } from '@/design-system/components/Avatar/avatar'\n// Row primitive 共用常數——統一從 item-layout pattern module 引入\nimport { ICON_SIZE, AVATAR_SIZE, ItemContent, itemPrefixAlignVariants, ROW_PADDING_BY_SIZE } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * MenuItem — 所有 menu 類元件的共用視覺佈局層\n *\n * SelectMenu、DropdownMenu、未來的 ContextMenu 等都消費這個元件。\n * 它只負責 layout（padding、gap、prefix alignment、typography），\n * 互動行為由各 menu 的 Radix primitive 外層控制。\n *\n * ── 結構 ──\n *   [checkbox?]  [startIcon? | avatar?]  [label + description?]\n *\n * ── Prefix 對齊規則（24px 閾值）──\n *   prefix ≤ 24px  → h-[1lh]，對齊第一行 label\n *   prefix > 24px  → h-[calc(1lh+var(--item-gap-label-desc)+desc_1lh)]，對齊文字區塊\n *   無 description → prefix 上限 24px\n *\n * ── Size ──\n *   sm / md / lg — 單行高度對齊 field-height token\n */\n\nconst CHECKBOX_SIZE: Record<string, 'sm' | 'md' | 'lg'> = { sm: 'sm', md: 'md', lg: 'lg' }\n\n// ── Item variants ──\nconst menuItemVariants = cva(\n  [\n    'flex items-start gap-2 px-3 w-full',\n    'cursor-pointer select-none',\n    'transition-colors duration-150',\n    'outline-none',\n    'focus-visible:bg-neutral-hover',\n  ],\n  {\n    variants: {\n      // 消費 ROW_PADDING_BY_SIZE SSOT(item-anatomy.tsx 導出)\n      // 改一處 → 全 row primitive 自動同步(消除前 SidebarMenuButton 獨立實作 risk)\n      size: ROW_PADDING_BY_SIZE,\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\n// ── Prefix alignment container ──\n// 消費 `itemPrefixAlignVariants`(SSOT from patterns/element-anatomy/item-anatomy.tsx)\n// 原本 MenuItem 自管 cva 造成 drift 風險(block formula 改動需同步);改為共用 SSOT\n// 讓公式只有一份,改 item-anatomy 一處 → MenuItem 自動同步。\n\n// ── Component ──\n\nexport interface MenuItemProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,\n    VariantProps<typeof menuItemVariants> {\n  /** Label 文字 */\n  children: React.ReactNode\n  /** 次要說明文字，顯示在 label 下方 */\n  description?: React.ReactNode\n  /** 左側 icon（LucideIcon），與 avatar 互斥 */\n  startIcon?: LucideIcon\n  /** 左側頭像資料（AvatarData），元件內部渲染 Avatar。與 startIcon 互斥 */\n  avatar?: AvatarData\n  /** 顯示 checkbox（多選模式由父層控制） */\n  checkbox?: boolean\n  /** Checkbox 選中狀態 */\n  checked?: boolean | 'indeterminate'\n  /** 單選選中（bg-neutral-selected 背景高亮，持續選中狀態） */\n  selected?: boolean\n  /** 後綴 Tag（ReactNode），靠右對齊 */\n  tag?: React.ReactNode\n  /** 後綴自訂內容（ReactNode），用於 DropdownMenu 的 badge/endIcon/shortcut 等 */\n  endContent?: React.ReactNode\n  /** 停用 */\n  disabled?: boolean\n  /** 作為群組標題（不可選，font-medium，fg-muted） */\n  header?: boolean\n  /**\n   * Label 最大行數(line-clamp 截斷,超過顯示 ellipsis)。\n   *\n   * - `undefined`(預設 prop 值未傳)→ 套用元件預設 `1`(單行截斷,符合選單快速掃視需求)\n   * - 數字 → 截斷到該行數\n   * - `'none'` → **明確**不截斷,自然 wrap 任意行數\n   *\n   * 為什麼用 `'none'` 而不是 `undefined` 表達不截斷?React props 的 destructure default\n   * 在 `undefined` 時會接管,所以 `<MenuItem labelMaxLines={undefined}>` 等同沒傳,\n   * 會 fallback 到預設 `1`。要明確覆寫成「不截斷」,必須用一個非 undefined 的 sentinel。\n   */\n  labelMaxLines?: number | 'none'\n  /**\n   * Description 最大行數。\n   *\n   * - `undefined`(預設 prop 值未傳)→ 套用元件預設 `1`(跟 label 對稱,維持掃視節奏)\n   * - 數字 → 截斷到該行數\n   * - `'none'` → 明確不截斷\n   *\n   * 為什麼預設 1?Menu 的設計目的是「快速掃視多個選項挑一個」,垂直空間是\n   * 寶貴的——一個過高的 item 會破壞 row rhythm,讓使用者眼睛重新校準。description\n   * 跟 label 對稱地截到 1 行,確保所有 item 高度一致(無 desc / 有 desc 兩種高度)。\n   * Consumer 若有合理理由要 2 行 description,可顯式 override。\n   */\n  descMaxLines?: number | 'none'\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// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(\n  (\n    {\n      children,\n      description,\n      startIcon: StartIcon,\n      avatar,\n      checkbox,\n      checked,\n      selected,\n      tag,\n      endContent,\n      disabled,\n      header,\n      size,\n      labelMaxLines = 1,\n      descMaxLines = 1,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeKey = size ?? 'md'\n    const labelClampClass = lineClampClass(labelMaxLines)\n    const descClampClass = lineClampClass(descMaxLines)\n    const iconPx = ICON_SIZE[sizeKey]\n\n    // ── 決定 avatar 容器尺寸 + 對齊模式 ──\n    // 有 description → 使用 block 尺寸（32/40px），block 對齊\n    // 無 description → 使用 inline 尺寸（20/24px），inline 對齊\n    const avatarPx = avatar\n      ? (description ? AVATAR_SIZE.block[sizeKey] : AVATAR_SIZE.inline[sizeKey])\n      : 0\n    const isBlockAlign = avatarPx > 24 && !!description\n\n    const prefixAlign = isBlockAlign\n      ? (`block-${sizeKey}` as const)\n      : 'inline'\n\n    const hasPrefix = !!StartIcon || !!avatar || checkbox\n\n    // ── Header variant ──\n    if (header) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            menuItemVariants({ size }),\n            'font-medium text-fg-muted cursor-default pointer-events-none',\n            className,\n          )}\n          role=\"presentation\"\n          {...props}\n        >\n          {children}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"option\"\n        aria-selected={selected || (checked === true) || undefined}\n        aria-disabled={disabled || undefined}\n        data-selected={selected ? '' : undefined}\n        data-disabled={disabled ? '' : undefined}\n        className={cn(\n          menuItemVariants({ size }),\n          !disabled && !selected && 'hover:bg-neutral-hover',\n          !disabled && selected && 'bg-neutral-selected',\n          // disabled 用 cursor-not-allowed(對齊 Button + Material/Polaris/Atlassian);\n          // pointer-events-none 會讓 cursor 失效,改用 aria-disabled + onClick guard\n          disabled && 'text-fg-disabled cursor-not-allowed',\n          className,\n        )}\n        onClick={disabled ? undefined : props.onClick}\n        onKeyDown={disabled ? undefined : props.onKeyDown}\n        {...Object.fromEntries(Object.entries(props).filter(([k]) => k !== 'onClick' && k !== 'onKeyDown'))}\n      >\n        {/* Prefix 對齊容器 */}\n        {hasPrefix && (\n          <div className={cn(itemPrefixAlignVariants({ align: prefixAlign }))}>\n            {checkbox && (\n              <Checkbox\n                size={CHECKBOX_SIZE[sizeKey]}\n                checked={checked === true ? true : checked === 'indeterminate' ? 'indeterminate' : false}\n                disabled={disabled}\n                tabIndex={-1}\n                className=\"pointer-events-none\"\n              />\n            )}\n            {StartIcon && (\n              <StartIcon\n                data-prefix-type=\"icon\"\n                size={iconPx}\n                className={cn('shrink-0', disabled && 'text-fg-disabled')}\n                aria-hidden\n              />\n            )}\n            {avatar && (\n              <Avatar\n                data-prefix-type=\"avatar\"\n                src={avatar.src}\n                alt={avatar.alt}\n                color={avatar.color}\n                hoverCard={avatar.hoverCard}\n                size={avatarPx}\n              />\n            )}\n          </div>\n        )}\n\n        {/* Content — 消費 ItemContent primitive(SSOT)。\n            scanning mode 跟隨 size:sm/md = caption,lg = body(desc 比 label lg 16 小 1 tier)。\n            labelClampClass / descClampClass 透過 className escape hatch 傳入(MenuItem 特化 labelMaxLines / descMaxLines 語意)。 */}\n        <ItemContent\n          label={children}\n          description={description}\n          mode=\"scanning\"\n          size={sizeKey === 'lg' ? 'lg' : 'md'}\n          descriptionTone={disabled ? 'disabled' : 'secondary'}\n          labelTruncate={false}\n          labelClassName={cn(labelClampClass || 'break-words', disabled && 'text-fg-disabled')}\n          descriptionClassName={cn(descClampClass || 'break-words')}\n        />\n\n        {(tag || endContent) && (\n          <div className={cn(\n            'flex items-center gap-2 shrink-0 h-[1lh] ml-auto',\n            disabled && 'opacity-disabled',\n          )}>\n            {tag}\n            {endContent}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\nMenuItem.displayName = 'MenuItem'\n\n// ── Group ──\n// MenuGroup — Menu-like group primitive(跨元件設計語言統一,SSOT 見\n// `patterns/element-anatomy/item-anatomy.spec.md`「Group auto-separation」)\n//\n// 設計語言:每個 group 上下 8px + 相鄰 group 間 border-divider + 視覺 gap 16px\n//\n// 本元件用 Pattern A:`py-2 [&+&]:border-t [&+&]:border-divider`\n// (適用外層容器無 py-2 的情境,例 Command.List——Group 自帶邊界 padding)\n//\n// **視覺必須跟 DropdownMenuGroup 等價**(見 dropdown-menu.tsx Pattern B 對照)。\n// 改動前先讀 item-anatomy.spec.md「Group auto-separation」確認視覺不漂移。\n\nexport interface MenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst MenuGroup = React.forwardRef<HTMLDivElement, MenuGroupProps>(\n  ({ children, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"group\"\n      className={cn('py-2 [&+&]:border-t [&+&]:border-divider', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n)\nMenuGroup.displayName = 'MenuGroup'\n\n// ── Footer ──\n\nexport interface MenuFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst MenuFooter = React.forwardRef<HTMLDivElement, MenuFooterProps>(\n  ({ children, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('py-2 border-t border-divider', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n)\nMenuFooter.displayName = 'MenuFooter'\n\n// Story auto-compile metadata — Phase 1+2 migration\nexport const menuItemMeta = {\n  component: 'MenuItem',\n  family: 1,\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    bg: ['bg-neutral-hover', 'bg-neutral-selected'],\n    fg: ['text-fg-muted', 'text-fg-disabled'],\n  },\n} as const\n\nexport { MenuItem, MenuGroup, MenuFooter, menuItemVariants }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"menu-item.js","sources":["../../../src/components/Menu/menu-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;由 DropdownMenu / SelectMenu 等 menu 類 DS 元件 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 { cva, type VariantProps } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Checkbox } from '@/design-system/components/Checkbox/checkbox'\nimport { Avatar, type AvatarData } from '@/design-system/components/Avatar/avatar'\n// Row primitive 共用常數——統一從 item-layout pattern module 引入\nimport { ICON_SIZE, AVATAR_SIZE, ItemContent, itemPrefixAlignVariants, ROW_PADDING_BY_SIZE } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * MenuItem — 所有 menu 類元件的共用視覺佈局層\n *\n * SelectMenu、DropdownMenu、未來的 ContextMenu 等都消費這個元件。\n * 它只負責 layout（padding、gap、prefix alignment、typography），\n * 互動行為由各 menu 的 Radix primitive 外層控制。\n *\n * ── 結構 ──\n *   [checkbox?]  [startIcon? | avatar?]  [label + description?]\n *\n * ── Prefix 對齊規則（24px 閾值）──\n *   prefix ≤ 24px  → h-[1lh]，對齊第一行 label\n *   prefix > 24px  → h-[calc(1lh+var(--item-gap-label-desc-scanning)+desc_1lh)](size-aware -scanning[-lg] 變體)，對齊文字區塊\n *   無 description → prefix 上限 24px\n *\n * ── Size ──\n *   sm / md / lg — 單行高度對齊 field-height token\n */\n\nconst CHECKBOX_SIZE: Record<string, 'sm' | 'md' | 'lg'> = { sm: 'sm', md: 'md', lg: 'lg' }\n\n// ── Item variants ──\nconst menuItemVariants = cva(\n  [\n    'flex items-start gap-2 px-3 w-full',\n    'cursor-pointer select-none',\n    'transition-colors duration-150',\n    'outline-none',\n    'focus-visible:bg-neutral-hover',\n  ],\n  {\n    variants: {\n      // 消費 ROW_PADDING_BY_SIZE SSOT(item-anatomy.tsx 導出)\n      // 改一處 → 全 row primitive 自動同步(消除前 SidebarMenuButton 獨立實作 risk)\n      size: ROW_PADDING_BY_SIZE,\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\n// ── Prefix alignment container ──\n// 消費 `itemPrefixAlignVariants`(SSOT from patterns/element-anatomy/item-anatomy.tsx)\n// 原本 MenuItem 自管 cva 造成 drift 風險(block formula 改動需同步);改為共用 SSOT\n// 讓公式只有一份,改 item-anatomy 一處 → MenuItem 自動同步。\n\n// ── Component ──\n\nexport interface MenuItemProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,\n    VariantProps<typeof menuItemVariants> {\n  /** Label 文字 */\n  children: React.ReactNode\n  /** 次要說明文字，顯示在 label 下方 */\n  description?: React.ReactNode\n  /** 左側 icon（LucideIcon），與 avatar 互斥 */\n  startIcon?: LucideIcon\n  /** 左側頭像資料（AvatarData），元件內部渲染 Avatar。與 startIcon 互斥 */\n  avatar?: AvatarData\n  /** 顯示 checkbox（多選模式由父層控制） */\n  checkbox?: boolean\n  /** Checkbox 選中狀態 */\n  checked?: boolean | 'indeterminate'\n  /** 單選選中（bg-neutral-selected 背景高亮，持續選中狀態） */\n  selected?: boolean\n  /** 後綴 Tag（ReactNode），靠右對齊 */\n  tag?: React.ReactNode\n  /** 後綴自訂內容（ReactNode），用於 DropdownMenu 的 badge/endIcon/shortcut 等 */\n  endContent?: React.ReactNode\n  /** 停用 */\n  disabled?: boolean\n  /** 作為群組標題（不可選，font-medium，fg-muted） */\n  header?: boolean\n  /**\n   * Label 最大行數(line-clamp 截斷,超過顯示 ellipsis)。\n   *\n   * - `undefined`(預設 prop 值未傳)→ 套用元件預設 `1`(單行截斷,符合選單快速掃視需求)\n   * - 數字(1-6)→ 截斷到該行數;>6 超出 line-clamp utility 支援範圍 → 不截斷(同 'none',見 lineClampClass)\n   * - `'none'` → **明確**不截斷,自然 wrap 任意行數\n   *\n   * 為什麼用 `'none'` 而不是 `undefined` 表達不截斷?React props 的 destructure default\n   * 在 `undefined` 時會接管,所以 `<MenuItem labelMaxLines={undefined}>` 等同沒傳,\n   * 會 fallback 到預設 `1`。要明確覆寫成「不截斷」,必須用一個非 undefined 的 sentinel。\n   */\n  labelMaxLines?: number | 'none'\n  /**\n   * Description 最大行數。\n   *\n   * - `undefined`(預設 prop 值未傳)→ 套用元件預設 `1`(跟 label 對稱,維持掃視節奏)\n   * - 數字(1-6)→ 截斷到該行數;>6 超出 line-clamp utility 支援範圍 → 不截斷(同 'none',見 lineClampClass)\n   * - `'none'` → 明確不截斷\n   *\n   * 為什麼預設 1?Menu 的設計目的是「快速掃視多個選項挑一個」,垂直空間是\n   * 寶貴的——一個過高的 item 會破壞 row rhythm,讓使用者眼睛重新校準。description\n   * 跟 label 對稱地截到 1 行,確保所有 item 高度一致(無 desc / 有 desc 兩種高度)。\n   * Consumer 若有合理理由要 2 行 description,可顯式 override。\n   */\n  descMaxLines?: number | 'none'\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// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(\n  (\n    {\n      children,\n      description,\n      startIcon: StartIcon,\n      avatar,\n      checkbox,\n      checked,\n      selected,\n      tag,\n      endContent,\n      disabled,\n      header,\n      size,\n      labelMaxLines = 1,\n      descMaxLines = 1,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeKey = size ?? 'md'\n    const labelClampClass = lineClampClass(labelMaxLines)\n    const descClampClass = lineClampClass(descMaxLines)\n    const iconPx = ICON_SIZE[sizeKey]\n\n    // ── 決定 avatar 容器尺寸 + 對齊模式 ──\n    // 有 description → 使用 block 尺寸（32/40px），block 對齊\n    // 無 description → 使用 inline 尺寸（20/24px），inline 對齊\n    const avatarPx = avatar\n      ? (description ? AVATAR_SIZE.block[sizeKey] : AVATAR_SIZE.inline[sizeKey])\n      : 0\n    const isBlockAlign = avatarPx > 24 && !!description\n\n    const prefixAlign = isBlockAlign\n      ? (`block-${sizeKey}` as const)\n      : 'inline'\n\n    const hasPrefix = !!StartIcon || !!avatar || checkbox\n\n    // ── Header variant ──\n    if (header) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            menuItemVariants({ size }),\n            'font-medium text-fg-muted cursor-default pointer-events-none',\n            className,\n          )}\n          role=\"presentation\"\n          {...props}\n        >\n          {children}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"option\"\n        aria-selected={selected || (checked === true) || undefined}\n        aria-disabled={disabled || undefined}\n        data-selected={selected ? '' : undefined}\n        data-disabled={disabled ? '' : undefined}\n        className={cn(\n          menuItemVariants({ size }),\n          !disabled && !selected && 'hover:bg-neutral-hover',\n          !disabled && selected && 'bg-neutral-selected',\n          // disabled 用 cursor-not-allowed(對齊 Button + Material/Polaris/Atlassian);\n          // pointer-events-none 會讓 cursor 失效,改用 aria-disabled + onClick guard\n          disabled && 'text-fg-disabled cursor-not-allowed',\n          className,\n        )}\n        // 2026-07-04 robustness:先 spread 其餘 props、後放 guarded handlers — 消除\n        // 「handler 置前 + 後方 runtime filter 同名 key」對屬性順序的隱性依賴,行為不變\n        {...Object.fromEntries(Object.entries(props).filter(([k]) => k !== 'onClick' && k !== 'onKeyDown'))}\n        onClick={disabled ? undefined : props.onClick}\n        onKeyDown={disabled ? undefined : props.onKeyDown}\n      >\n        {/* Prefix 對齊容器 */}\n        {hasPrefix && (\n          <div className={cn(itemPrefixAlignVariants({ align: prefixAlign }))}>\n            {checkbox && (\n              <Checkbox\n                size={CHECKBOX_SIZE[sizeKey]}\n                checked={checked === true ? true : checked === 'indeterminate' ? 'indeterminate' : false}\n                disabled={disabled}\n                tabIndex={-1}\n                className=\"pointer-events-none\"\n              />\n            )}\n            {StartIcon && (\n              <StartIcon\n                data-prefix-type=\"icon\"\n                size={iconPx}\n                className={cn('shrink-0', disabled && 'text-fg-disabled')}\n                aria-hidden\n              />\n            )}\n            {avatar && (\n              <Avatar\n                data-prefix-type=\"avatar\"\n                src={avatar.src}\n                alt={avatar.alt}\n                color={avatar.color}\n                hoverCard={avatar.hoverCard}\n                size={avatarPx}\n              />\n            )}\n          </div>\n        )}\n\n        {/* Content — 消費 ItemContent primitive(SSOT)。\n            scanning mode 跟隨 size:sm/md = caption,lg = body(desc 比 label lg 16 小 1 tier)。\n            labelClampClass / descClampClass 透過 className escape hatch 傳入(MenuItem 特化 labelMaxLines / descMaxLines 語意)。 */}\n        <ItemContent\n          label={children}\n          description={description}\n          mode=\"scanning\"\n          size={sizeKey === 'lg' ? 'lg' : 'md'}\n          descriptionTone={disabled ? 'disabled' : 'secondary'}\n          labelTruncate={false}\n          labelClassName={cn(labelClampClass || 'break-words', disabled && 'text-fg-disabled')}\n          descriptionClassName={cn(descClampClass || 'break-words')}\n        />\n\n        {(tag || endContent) && (\n          // @row-slot-handcraft-allow: MenuItem 自身即 row primitive（item-anatomy Family 1 owner），此 tag/endContent 容器是 MenuItem 自有 suffix slot 實作，非外部 consumer hand-craft → 不再 wrap ItemSuffix\n          <div className={cn(\n            'flex items-center gap-2 shrink-0 h-[1lh] ml-auto',\n            disabled && 'opacity-disabled',\n          )}>\n            {tag}\n            {endContent}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\nMenuItem.displayName = 'MenuItem'\n\n// ── Group ──\n// MenuGroup — Menu-like group primitive(跨元件設計語言統一,SSOT 見\n// `patterns/element-anatomy/item-anatomy.spec.md`「Group auto-separation」)\n//\n// 設計語言:每個 group 上下 8px + 相鄰 group 間 border-divider + 視覺 gap 16px\n//\n// 本元件用 Pattern A:`py-2 [&+&]:border-t [&+&]:border-divider`\n// (適用外層容器無 py-2 的情境,例 Command.List——Group 自帶邊界 padding)\n//\n// **視覺必須跟 DropdownMenuGroup 等價**(見 dropdown-menu.tsx Pattern B 對照)。\n// 改動前先讀 item-anatomy.spec.md「Group auto-separation」確認視覺不漂移。\n\nexport interface MenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst MenuGroup = React.forwardRef<HTMLDivElement, MenuGroupProps>(\n  ({ children, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"group\"\n      className={cn('py-2 [&+&]:border-t [&+&]:border-divider', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n)\nMenuGroup.displayName = 'MenuGroup'\n\n// ── Footer ──\n\nexport interface MenuFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst MenuFooter = React.forwardRef<HTMLDivElement, MenuFooterProps>(\n  ({ children, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('py-2 border-t border-divider', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n)\nMenuFooter.displayName = 'MenuFooter'\n\n// Story auto-compile metadata — Phase 1+2 migration\nexport const menuItemMeta = {\n  component: 'MenuItem',\n  family: 1,\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    bg: ['bg-neutral-hover', 'bg-neutral-selected'],\n    fg: ['text-fg-muted', 'text-fg-disabled'],\n  },\n} as const\n\nexport { MenuItem, MenuGroup, MenuFooter, menuItemVariants }\n"],"names":[],"mappings":"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"}

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

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

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

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

package/dist/components/Notice/index.js

@@ -0,0 +1,8 @@
+import { Notice, SUBTLE_ICON_COLOR, noticeMeta, useInverseTheme } from "./notice.js";
+export {
+  Notice,
+  SUBTLE_ICON_COLOR,
+  noticeMeta,
+  useInverseTheme
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Notice/notice.d.ts

@@ -1,11 +1,18 @@
+/**
+ * @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。
+ * 不進 root barrel front-door;由 Alert / Toast wrap 消費,end-user app 請用 wrapper 元件。
+ */
 import * as React from 'react';
 /**
  * Notice — Toast / Alert 共用的視覺佈局層
  *
- * ── Typography: md tier ──
- * title: text-body (14px) leading-compact — 有 description 時加 font-medium
- * description: text-body (14px) leading-compact + text-fg-secondary (neutral-8)
+ * ── Typography: Family 2 reading-md(2026-06-15 user 拍板,off-grid 偏移收斂)──
+ * title: text-body (14px) default leading 1.5 — 有 description 時加 font-medium
+ * description: text-body (14px) default leading 1.5 + text-fg-secondary (neutral-8)
  * 14px 配 14px — 視覺層級靠 font-weight + color 區分,不靠 font-size。
+ * **行高 = reading 預設 1.5**(非 compact):Notice 是 Family 2 reading consumer,
+ * ItemContent 預設 mode='reading' + gap token `--item-gap-label-desc-reading` 名實相符。
+ * 原 `leading-compact`(1.3)= reading-gap + scanning-行高 混搭的 off-grid 偏移,已移除。
  *
  * ── Padding（固定,不隨 density 變） ──
  * px = px-4（16px）
@@ -22,7 +29,7 @@ import * as React from 'react';
  * Rationale(Notification banner family canonical):
  * - Notice / Alert / Toast 屬 **notification banner family**(ephemeral、px-4 py-3 固定不隨 density),
  *   dismiss 是邊角小 affordance,xs 視覺不搶眼不跟 content 競爭。見 `overlay-surface.spec.md`
- *   「Chrome dismiss size canonical」三家族分類(Modal sm / Non-modal xs / Notification xs)
+ *   「Chrome dismiss size canonical」(overlay header 走 sm native + 負 margin trick;xs 只用於 notification banner family)
  * - Close 左側可加 refresh / share(action group region),皆統一 xs
  * - `dismiss` prop 自動套 variant="text" + fg-muted override
  * SSOT:patterns/element-anatomy/inline-action.spec.md「Dismiss canonical — X close only」
@@ -35,6 +42,11 @@ export interface NoticeProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     title: React.ReactNode;
     description?: React.ReactNode;
     endContent?: React.ReactNode;
+    /**
+     * 顯示關閉鈕(預設 true)。**需同時傳 `onDismiss` 才會渲染 X** — Notice 是 controlled-only
+     * (不自我移除),無 handler 的 X 是可 focus、SR 播報「關閉通知」但按下零反應的死按鈕
+     * (2026-07-05 D4;對齊 Polaris Banner `onDismiss` 存在才顯示 X / Ant Alert `closable` 預設 false)。
+     */
     dismissible?: boolean;
     onDismiss?: () => void;
     /** ARIA label for the dismiss button. Override for i18n. Default: "關閉通知" */
@@ -55,10 +67,10 @@ declare const Notice: React.ForwardRefExoticComponent<NoticeProps & React.RefAtt
 export declare function useInverseTheme(): 'dark' | 'light';
 export declare const noticeMeta: {
     readonly component: "Notice";
-    readonly family: null;
+    readonly family: 2;
     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 ["text-error-text", "text-fg-muted", "text-fg-secondary", "text-info-text", "text-success-text", "text-warning-text"];

package/dist/components/Notice/notice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notice.d.ts","sourceRoot":"","sources":["../../../src/components/Notice/notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAUhF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAM3D,CAAA;AAQD,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3D,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAA;CAC7C;AAED,QAAA,MAAM,MAAM,oFAyDX,CAAA;AA+BD,wBAAgB,eAAe,IAAI,MAAM,GAAG,OAAO,CAGlD;AAID,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"notice.d.ts","sourceRoot":"","sources":["../../../src/components/Notice/notice.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAUhF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAM3D,CAAA;AAYD,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3D,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAA;CAC7C;AAED,QAAA,MAAM,MAAM,oFA0EX,CAAA;AA+BD,wBAAgB,eAAe,IAAI,MAAM,GAAG,OAAO,CAGlD;AAID,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/Notice/notice.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { XCircle, TriangleAlert, CircleCheck, Info, X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { Button } from "../Button/button.js";
-import { ItemPrefix, ItemContent } from "../../patterns/element-anatomy/item-anatomy.js";
+import { ItemPrefix, ICON_SIZE, ItemContent, ItemSuffix } from "../../patterns/element-anatomy/item-anatomy.js";
 const VARIANT_ICON = {
   neutral: null,
   info: Info,
@@ -20,7 +20,11 @@ const SUBTLE_ICON_COLOR = {
 };
 const NOTICE_LAYOUT = [
   "flex items-start gap-2 w-full",
-  "text-body leading-compact",
+  // 2026-06-15 user 拍板:Notice = 乾淨 Family 2 reading-md consumer。
+  // 原 `leading-compact`(1.3)是 off-grid 偏移(reading gap token + scanning 行高混搭、未文件化),
+  // 已移除 → label/desc 走 text-body reading 預設 1.5,與 ItemContent 預設 mode='reading' + gap
+  // token `--item-gap-label-desc-reading` 名實相符。詳 notice.spec.md「Typography」段。
+  "text-body",
   "px-4 py-3"
 ].join(" ");
 const Notice = React.forwardRef(
@@ -29,7 +33,9 @@ const Notice = React.forwardRef(
     title,
     description,
     endContent,
-    dismissible = true,
+    // 不 destructure-default(保留「顯式傳 true」的可辨識性給下方 dev-warn);等效預設 true 由
+    // showDismiss 的 `!== false` 承擔。
+    dismissible,
     onDismiss,
     dismissAriaLabel = "關閉通知",
     // i18n-allow: DS default; consumer override via dismissAriaLabel prop
@@ -38,6 +44,10 @@ const Notice = React.forwardRef(
     ...props
   }, ref) => {
     const StatusIcon = VARIANT_ICON[variant];
+    const showDismiss = dismissible !== false && onDismiss != null;
+    if (process.env.NODE_ENV !== "production" && dismissible === true && onDismiss == null) {
+      console.warn("[Notice] dismissible=true 但未傳 onDismiss,關閉鈕不會渲染(需同時提供 onDismiss)。");
+    }
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -45,7 +55,7 @@ const Notice = React.forwardRef(
         className: cn(NOTICE_LAYOUT, className),
         ...props,
         children: [
-          StatusIcon && /* @__PURE__ */ jsx(ItemPrefix, { children: /* @__PURE__ */ jsx(StatusIcon, { size: 16, className: cn("shrink-0", iconClassName), "aria-hidden": true }) }),
+          StatusIcon && /* @__PURE__ */ jsx(ItemPrefix, { children: /* @__PURE__ */ jsx(StatusIcon, { size: ICON_SIZE.md, className: cn("shrink-0", iconClassName), "aria-hidden": true }) }),
           /* @__PURE__ */ jsx(
             ItemContent,
             {
@@ -54,9 +64,14 @@ const Notice = React.forwardRef(
               labelClassName: description ? "font-medium" : void 0
             }
           ),
-          (endContent || dismissible) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0 h-[1lh]", children: [
+          (endContent || showDismiss) && // 2026-06-15 user 拍板:消費 ItemSuffix primitive(原手刻 div + @row-slot-handcraft-allow
+          // 已移除)。item-anatomy.spec.md 把 Notice 的 action/dismiss 對應到 suffix slot;ItemSuffix
+          // base geometry(h-[1lh] shrink-0 ml-auto flex items-center gap-2)正是此處所需,hoverReveal
+          // 預設 false 故無 row inline-action 機制干擾。內裝 dismiss = Button iconOnly dismiss xs(banner
+          // family canonical,overlay-surface.spec.md「Chrome dismiss size canonical」)。
+          /* @__PURE__ */ jsxs(ItemSuffix, { children: [
             endContent,
-            dismissible && /* @__PURE__ */ jsx(
+            showDismiss && /* @__PURE__ */ jsx(
               Button,
               {
                 "data-dismiss": true,
@@ -101,11 +116,12 @@ function useInverseTheme() {
 }
 const noticeMeta = {
   component: "Notice",
-  family: null,
-  // non-family composite / overlay / layout
+  family: 2,
+  // Family 2（List item layout）消費者 — 對齊 notice.spec.md frontmatter family: 2 + body「Layout Family」段
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: ["default"],
+  // 無互動 layout primitive(spec「邊界案例」:不擁有 disabled;hover / focus 屬內嵌 dismiss Button)
   tokens: {
     bg: [],
     fg: ["text-error-text", "text-fg-muted", "text-fg-secondary", "text-info-text", "text-success-text", "text-warning-text"],

package/dist/components/Notice/notice.js.map

@@ -1 +1 @@
-{"version":3,"file":"notice.js","sources":["../../../src/components/Notice/notice.tsx"],"sourcesContent":["import * as React from 'react'\nimport { X as XIcon, Info, CircleCheck, TriangleAlert, XCircle, type LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ItemContent, ItemPrefix } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * Notice — Toast / Alert 共用的視覺佈局層\n *\n * ── Typography: md tier ──\n * title: text-body (14px) leading-compact — 有 description 時加 font-medium\n * description: text-body (14px) leading-compact + text-fg-secondary (neutral-8)\n * 14px 配 14px — 視覺層級靠 font-weight + color 區分,不靠 font-size。\n *\n * ── Padding（固定,不隨 density 變） ──\n * px = px-4（16px）\n * py = py-3（12px）\n * gap = gap-2（8px）\n * Toast/Alert 是浮動通知,不是工作區域元件——density 控制表單/選單的緊湊度,\n * 通知的尺寸應該固定,不隨 density 縮放。\n *\n * ── Icon: md tier ──\n * icon size: 16px（ICON_SIZE.md）\n *\n * ── Dismiss X(chrome corner close,Cat 3 Action group region)──\n * 用 Button iconOnly dismiss **size=\"xs\"** — 非 Inline Action、非自刻 button。\n * Rationale(Notification banner family canonical):\n * - Notice / Alert / Toast 屬 **notification banner family**(ephemeral、px-4 py-3 固定不隨 density),\n *   dismiss 是邊角小 affordance,xs 視覺不搶眼不跟 content 競爭。見 `overlay-surface.spec.md`\n *   「Chrome dismiss size canonical」三家族分類(Modal sm / Non-modal xs / Notification xs)\n * - Close 左側可加 refresh / share(action group region),皆統一 xs\n * - `dismiss` prop 自動套 variant=\"text\" + fg-muted override\n * SSOT:patterns/element-anatomy/inline-action.spec.md「Dismiss canonical — X close only」\n *      + components/Alert/alert.spec.md「Chrome corner close X canonical」。\n */\n\nexport type NoticeVariant = 'neutral' | 'info' | 'success' | 'warning' | 'error'\n\nconst VARIANT_ICON: Record<NoticeVariant, LucideIcon | null> = {\n  neutral: null,\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: XCircle,\n}\n\nexport const SUBTLE_ICON_COLOR: Record<NoticeVariant, string> = {\n  neutral: 'text-fg-muted',\n  info: 'text-info-text',\n  success: 'text-success-text',\n  warning: 'text-warning-text',\n  error: 'text-error-text',\n}\n\nconst NOTICE_LAYOUT = [\n  'flex items-start gap-2 w-full',\n  'text-body leading-compact',\n  'px-4 py-3',\n].join(' ')\n\nexport interface NoticeProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  variant?: NoticeVariant\n  title: React.ReactNode\n  description?: React.ReactNode\n  endContent?: React.ReactNode\n  dismissible?: boolean\n  onDismiss?: () => void\n  /** ARIA label for the dismiss button. Override for i18n. Default: \"關閉通知\" */\n  dismissAriaLabel?: string\n  iconClassName?: string\n  /**\n   * ARIA role 由 wrapping consumer 決定(Alert / Toast / 自管 host),Notice 預設不帶 role。\n   * Notice 是 layout primitive,Alert / Toast 是 live region 擁有者——避免 nested live region\n   * 造成 screen reader 重複朗讀。明文傳遞才覆寫。\n   */\n  role?: 'status' | 'alert'\n  /**\n   * 對應 role 的 aria-live 策略,wrapping consumer 決定;Notice 預設 undefined 不帶 live region。\n   */\n  'aria-live'?: 'polite' | 'assertive' | 'off'\n}\n\nconst Notice = React.forwardRef<HTMLDivElement, NoticeProps>(\n  (\n    {\n      variant = 'neutral',\n      title,\n      description,\n      endContent,\n      dismissible = true,\n      onDismiss,\n      dismissAriaLabel = '關閉通知', // i18n-allow: DS default; consumer override via dismissAriaLabel prop\n      iconClassName,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const StatusIcon = VARIANT_ICON[variant]\n\n    return (\n      <div\n        ref={ref}\n        className={cn(NOTICE_LAYOUT, className)}\n        {...props}\n      >\n        {StatusIcon && (\n          <ItemPrefix>\n            <StatusIcon size={16} className={cn('shrink-0', iconClassName)} aria-hidden />\n          </ItemPrefix>\n        )}\n\n        {/* Title + description 消費 ItemContent primitive(SSOT)。\n            Label 有 desc 時 font-medium(Notice idiom:title 跟 desc 對照時 title 要更重)。 */}\n        <ItemContent\n          label={title}\n          description={description}\n          labelClassName={description ? 'font-medium' : undefined}\n        />\n\n        {(endContent || dismissible) && (\n          <div className=\"flex items-center gap-2 shrink-0 h-[1lh]\">\n            {endContent}\n            {dismissible && (\n              <Button\n                data-dismiss\n                iconOnly\n                dismiss\n                size=\"xs\"\n                startIcon={XIcon}\n                aria-label={dismissAriaLabel}\n                onClick={onDismiss}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nNotice.displayName = 'Notice'\n\n// Singleton MutationObserver + subscription fan-out(2026-04-22 D3 perf audit):\n// 先前每個 useInverseTheme consumer(Alert / Toast / Notice instance 等)各建一個 MO,\n// N 個 Notice = N 個 observers。singleton 共用一個 MO + pub/sub 讓 theme swap 只做一次 DOM read。\nlet themeObserverStarted = false\nconst themeSubscribers = new Set<() => void>()\n\nfunction getInverseTheme(): 'dark' | 'light' {\n  if (typeof document === 'undefined') return 'dark'\n  const current = document.documentElement.getAttribute('data-theme') ?? 'light'\n  return current === 'dark' ? 'light' : 'dark'\n}\n\nfunction startThemeObserver() {\n  if (themeObserverStarted || typeof document === 'undefined') return\n  themeObserverStarted = true\n  const root = document.documentElement\n  const observer = new MutationObserver(() => {\n    themeSubscribers.forEach((cb) => cb())\n  })\n  observer.observe(root, { attributes: true, attributeFilter: ['data-theme'] })\n}\n\nfunction subscribe(cb: () => void): () => void {\n  startThemeObserver()\n  themeSubscribers.add(cb)\n  return () => themeSubscribers.delete(cb)\n}\n\nexport function useInverseTheme(): 'dark' | 'light' {\n  // useSyncExternalStore canonical (React 18+):單一 external source 被 N consumers 訂閱\n  return React.useSyncExternalStore(subscribe, getInverseTheme, getInverseTheme)\n}\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 noticeMeta = {\n  component: 'Notice',\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: ['text-error-text', 'text-fg-muted', 'text-fg-secondary', 'text-info-text', 'text-success-text', 'text-warning-text'],\n    ring: [],\n  },\n} as const\n\nexport { Notice }\n"],"names":["XIcon"],"mappings":";;;;;;AAsCA,MAAM,eAAyD;AAAA,EAC7D,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,oBAAmD;AAAA,EAC9D,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAyBV,MAAM,SAAS,MAAM;AAAA,EACnB,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,mBAAmB;AAAA;AAAA,IACnB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,aAAa,aAAa,OAAO;AAEvC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,SAAS;AAAA,QACrC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,cACC,oBAAC,YAAA,EACC,UAAA,oBAAC,YAAA,EAAW,MAAM,IAAI,WAAW,GAAG,YAAY,aAAa,GAAG,eAAW,MAAC,GAC9E;AAAA,UAKF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP;AAAA,cACA,gBAAgB,cAAc,gBAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,WAG9C,cAAc,gBACd,qBAAC,OAAA,EAAI,WAAU,4CACZ,UAAA;AAAA,YAAA;AAAA,YACA,eACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,gBAAY;AAAA,gBACZ,UAAQ;AAAA,gBACR,SAAO;AAAA,gBACP,MAAK;AAAA,gBACL,WAAWA;AAAAA,gBACX,cAAY;AAAA,gBACZ,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,EAAA,CAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACA,OAAO,cAAc;AAKrB,IAAI,uBAAuB;AAC3B,MAAM,uCAAuB,IAAA;AAE7B,SAAS,kBAAoC;AAC3C,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAM,UAAU,SAAS,gBAAgB,aAAa,YAAY,KAAK;AACvE,SAAO,YAAY,SAAS,UAAU;AACxC;AAEA,SAAS,qBAAqB;AAC5B,MAAI,wBAAwB,OAAO,aAAa,YAAa;AAC7D,yBAAuB;AACvB,QAAM,OAAO,SAAS;AACtB,QAAM,WAAW,IAAI,iBAAiB,MAAM;AAC1C,qBAAiB,QAAQ,CAAC,OAAO,GAAA,CAAI;AAAA,EACvC,CAAC;AACD,WAAS,QAAQ,MAAM,EAAE,YAAY,MAAM,iBAAiB,CAAC,YAAY,GAAG;AAC9E;AAEA,SAAS,UAAU,IAA4B;AAC7C,qBAAA;AACA,mBAAiB,IAAI,EAAE;AACvB,SAAO,MAAM,iBAAiB,OAAO,EAAE;AACzC;AAEO,SAAS,kBAAoC;AAElD,SAAO,MAAM,qBAAqB,WAAW,iBAAiB,eAAe;AAC/E;AAIO,MAAM,aAAa;AAAA,EACxB,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,CAAC,mBAAmB,iBAAiB,qBAAqB,kBAAkB,qBAAqB,mBAAmB;AAAA,IACxH,MAAM,CAAA;AAAA,EAAC;AAEX;"}
+{"version":3,"file":"notice.js","sources":["../../../src/components/Notice/notice.tsx"],"sourcesContent":["/**\n * @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 Alert / Toast wrap 消費,end-user app 請用 wrapper 元件。\n */\nimport * as React from 'react'\nimport { X as XIcon, Info, CircleCheck, TriangleAlert, XCircle, type LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ICON_SIZE, ItemContent, ItemPrefix, ItemSuffix } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * Notice — Toast / Alert 共用的視覺佈局層\n *\n * ── Typography: Family 2 reading-md(2026-06-15 user 拍板,off-grid 偏移收斂)──\n * title: text-body (14px) default leading 1.5 — 有 description 時加 font-medium\n * description: text-body (14px) default leading 1.5 + text-fg-secondary (neutral-8)\n * 14px 配 14px — 視覺層級靠 font-weight + color 區分,不靠 font-size。\n * **行高 = reading 預設 1.5**(非 compact):Notice 是 Family 2 reading consumer,\n * ItemContent 預設 mode='reading' + gap token `--item-gap-label-desc-reading` 名實相符。\n * 原 `leading-compact`(1.3)= reading-gap + scanning-行高 混搭的 off-grid 偏移,已移除。\n *\n * ── Padding（固定,不隨 density 變） ──\n * px = px-4（16px）\n * py = py-3（12px）\n * gap = gap-2（8px）\n * Toast/Alert 是浮動通知,不是工作區域元件——density 控制表單/選單的緊湊度,\n * 通知的尺寸應該固定,不隨 density 縮放。\n *\n * ── Icon: md tier ──\n * icon size: 16px（ICON_SIZE.md）\n *\n * ── Dismiss X(chrome corner close,Cat 3 Action group region)──\n * 用 Button iconOnly dismiss **size=\"xs\"** — 非 Inline Action、非自刻 button。\n * Rationale(Notification banner family canonical):\n * - Notice / Alert / Toast 屬 **notification banner family**(ephemeral、px-4 py-3 固定不隨 density),\n *   dismiss 是邊角小 affordance,xs 視覺不搶眼不跟 content 競爭。見 `overlay-surface.spec.md`\n *   「Chrome dismiss size canonical」(overlay header 走 sm native + 負 margin trick;xs 只用於 notification banner family)\n * - Close 左側可加 refresh / share(action group region),皆統一 xs\n * - `dismiss` prop 自動套 variant=\"text\" + fg-muted override\n * SSOT:patterns/element-anatomy/inline-action.spec.md「Dismiss canonical — X close only」\n *      + components/Alert/alert.spec.md「Chrome corner close X canonical」。\n */\n\nexport type NoticeVariant = 'neutral' | 'info' | 'success' | 'warning' | 'error'\n\nconst VARIANT_ICON: Record<NoticeVariant, LucideIcon | null> = {\n  neutral: null,\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: XCircle,\n}\n\nexport const SUBTLE_ICON_COLOR: Record<NoticeVariant, string> = {\n  neutral: 'text-fg-muted',\n  info: 'text-info-text',\n  success: 'text-success-text',\n  warning: 'text-warning-text',\n  error: 'text-error-text',\n}\n\nconst NOTICE_LAYOUT = [\n  'flex items-start gap-2 w-full',\n  // 2026-06-15 user 拍板:Notice = 乾淨 Family 2 reading-md consumer。\n  // 原 `leading-compact`(1.3)是 off-grid 偏移(reading gap token + scanning 行高混搭、未文件化),\n  // 已移除 → label/desc 走 text-body reading 預設 1.5,與 ItemContent 預設 mode='reading' + gap\n  // token `--item-gap-label-desc-reading` 名實相符。詳 notice.spec.md「Typography」段。\n  'text-body',\n  'px-4 py-3',\n].join(' ')\n\nexport interface NoticeProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  variant?: NoticeVariant\n  title: React.ReactNode\n  description?: React.ReactNode\n  endContent?: React.ReactNode\n  /**\n   * 顯示關閉鈕(預設 true)。**需同時傳 `onDismiss` 才會渲染 X** — Notice 是 controlled-only\n   * (不自我移除),無 handler 的 X 是可 focus、SR 播報「關閉通知」但按下零反應的死按鈕\n   * (2026-07-05 D4;對齊 Polaris Banner `onDismiss` 存在才顯示 X / Ant Alert `closable` 預設 false)。\n   */\n  dismissible?: boolean\n  onDismiss?: () => void\n  /** ARIA label for the dismiss button. Override for i18n. Default: \"關閉通知\" */\n  dismissAriaLabel?: string\n  iconClassName?: string\n  /**\n   * ARIA role 由 wrapping consumer 決定(Alert / Toast / 自管 host),Notice 預設不帶 role。\n   * Notice 是 layout primitive,Alert / Toast 是 live region 擁有者——避免 nested live region\n   * 造成 screen reader 重複朗讀。明文傳遞才覆寫。\n   */\n  role?: 'status' | 'alert'\n  /**\n   * 對應 role 的 aria-live 策略,wrapping consumer 決定;Notice 預設 undefined 不帶 live region。\n   */\n  'aria-live'?: 'polite' | 'assertive' | 'off'\n}\n\nconst Notice = React.forwardRef<HTMLDivElement, NoticeProps>(\n  (\n    {\n      variant = 'neutral',\n      title,\n      description,\n      endContent,\n      // 不 destructure-default(保留「顯式傳 true」的可辨識性給下方 dev-warn);等效預設 true 由\n      // showDismiss 的 `!== false` 承擔。\n      dismissible,\n      onDismiss,\n      dismissAriaLabel = '關閉通知', // i18n-allow: DS default; consumer override via dismissAriaLabel prop\n      iconClassName,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const StatusIcon = VARIANT_ICON[variant]\n\n    // 2026-07-05 D4:X 渲染條件 = dismissible(預設 true)**且**有傳 onDismiss — 原 `dismissible &&`\n    // 單獨判斷讓預設用法 <Alert title=\"…\"/> 渲染一顆死 X(controlled-only 不自我移除,onClick=undefined\n    // 零反應;keyboard / SR 使用者按 Enter 零回饋 = 假 affordance)。對齊 Polaris Banner(onDismiss\n    // 存在才顯示 X)/ Ant Alert(closable 預設 false)。\n    const showDismiss = dismissible !== false && onDismiss != null\n    if (process.env.NODE_ENV !== 'production' && dismissible === true && onDismiss == null) {\n      // 只在「顯式傳 dismissible={true} 卻沒接 onDismiss」的消費端矛盾時提示(預設 undefined 不吵)\n      console.warn('[Notice] dismissible=true 但未傳 onDismiss,關閉鈕不會渲染(需同時提供 onDismiss)。')\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(NOTICE_LAYOUT, className)}\n        {...props}\n      >\n        {StatusIcon && (\n          <ItemPrefix>\n            <StatusIcon size={ICON_SIZE.md} className={cn('shrink-0', iconClassName)} aria-hidden />\n          </ItemPrefix>\n        )}\n\n        {/* Title + description 消費 ItemContent primitive(SSOT)。\n            Label 有 desc 時 font-medium(Notice idiom:title 跟 desc 對照時 title 要更重)。 */}\n        <ItemContent\n          label={title}\n          description={description}\n          labelClassName={description ? 'font-medium' : undefined}\n        />\n\n        {(endContent || showDismiss) && (\n          // 2026-06-15 user 拍板:消費 ItemSuffix primitive(原手刻 div + @row-slot-handcraft-allow\n          // 已移除)。item-anatomy.spec.md 把 Notice 的 action/dismiss 對應到 suffix slot;ItemSuffix\n          // base geometry(h-[1lh] shrink-0 ml-auto flex items-center gap-2)正是此處所需,hoverReveal\n          // 預設 false 故無 row inline-action 機制干擾。內裝 dismiss = Button iconOnly dismiss xs(banner\n          // family canonical,overlay-surface.spec.md「Chrome dismiss size canonical」)。\n          <ItemSuffix>\n            {endContent}\n            {showDismiss && (\n              <Button\n                data-dismiss\n                iconOnly\n                dismiss\n                size=\"xs\"\n                startIcon={XIcon}\n                aria-label={dismissAriaLabel}\n                onClick={onDismiss}\n              />\n            )}\n          </ItemSuffix>\n        )}\n      </div>\n    )\n  },\n)\nNotice.displayName = 'Notice'\n\n// Singleton MutationObserver + subscription fan-out(2026-04-22 D3 perf audit):\n// 先前每個 useInverseTheme consumer(Alert / Toast / Notice instance 等)各建一個 MO,\n// N 個 Notice = N 個 observers。singleton 共用一個 MO + pub/sub 讓 theme swap 只做一次 DOM read。\nlet themeObserverStarted = false\nconst themeSubscribers = new Set<() => void>()\n\nfunction getInverseTheme(): 'dark' | 'light' {\n  if (typeof document === 'undefined') return 'dark'\n  const current = document.documentElement.getAttribute('data-theme') ?? 'light'\n  return current === 'dark' ? 'light' : 'dark'\n}\n\nfunction startThemeObserver() {\n  if (themeObserverStarted || typeof document === 'undefined') return\n  themeObserverStarted = true\n  const root = document.documentElement\n  const observer = new MutationObserver(() => {\n    themeSubscribers.forEach((cb) => cb())\n  })\n  observer.observe(root, { attributes: true, attributeFilter: ['data-theme'] })\n}\n\nfunction subscribe(cb: () => void): () => void {\n  startThemeObserver()\n  themeSubscribers.add(cb)\n  return () => themeSubscribers.delete(cb)\n}\n\nexport function useInverseTheme(): 'dark' | 'light' {\n  // useSyncExternalStore canonical (React 18+):單一 external source 被 N consumers 訂閱\n  return React.useSyncExternalStore(subscribe, getInverseTheme, getInverseTheme)\n}\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 noticeMeta = {\n  component: 'Notice',\n  family: 2, // Family 2（List item layout）消費者 — 對齊 notice.spec.md frontmatter family: 2 + body「Layout Family」段\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default'], // 無互動 layout primitive(spec「邊界案例」:不擁有 disabled;hover / focus 屬內嵌 dismiss Button)\n  tokens: {\n    bg: [],\n    fg: ['text-error-text', 'text-fg-muted', 'text-fg-secondary', 'text-info-text', 'text-success-text', 'text-warning-text'],\n    ring: [],\n  },\n} as const\n\nexport { Notice }\n"],"names":["XIcon"],"mappings":"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"}

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

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

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

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

package/dist/components/NumberInput/index.js

@@ -0,0 +1,7 @@
+import { NumberInput, formatNumber, numberInputMeta } from "./number-input.js";
+export {
+  NumberInput,
+  formatNumber,
+  numberInputMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/NumberInput/number-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/number-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uDAAuD,CAAA;AAC/F,OAAO,EAAE,kBAAkB,EAAkC,MAAM,gDAAgD,CAAA;AAMnH,MAAM,WAAW,mBAAmB;IAClC,WAAW;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,iBAAS,YAAY,CACnB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,OAAO,GAAE,mBAAwB,GAChC,MAAM,CAOR;AAOD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC,EAC/F,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,EACjE,mBAAmB;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS;IACT,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,WAAW;IACX,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACzC,qDAAqD;IACrD,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAKD,QAAA,MAAM,WAAW,2FA0GhB,CAAA;AAMD,eAAO,MAAM,eAAe;;;;;;;;;;;CAelB,CAAA;AAGV,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/number-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uDAAuD,CAAA;AAC/F,OAAO,EAAE,kBAAkB,EAAkC,MAAM,gDAAgD,CAAA;AAMnH,MAAM,WAAW,mBAAmB;IAClC,WAAW;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,iBAAS,YAAY,CACnB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,OAAO,GAAE,mBAAwB,GAChC,MAAM,CAOR;AAOD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC,EAC/F,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,EACjE,mBAAmB;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS;IACT,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,WAAW;IACX,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACzC,qDAAqD;IACrD,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAKD,QAAA,MAAM,WAAW,2FAwHhB,CAAA;AAMD,eAAO,MAAM,eAAe;;;;;;;;;;;CAelB,CAAA;AAGV,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/NumberInput/number-input.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
 import { EMPTY_DISPLAY, fieldWrapperStyles, bareInputStyles } from "../Field/field-wrapper.js";
-import { useFieldContext } from "../Field/field-context.js";
+import { useFieldContext, useResolvedFieldInvalid, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldVariant, useResolvedFieldMode } from "../Field/field-context.js";
 import { ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
 function formatNumber(value, options = {}) {
   if (value == null) return "";
@@ -28,16 +28,19 @@ const NumberInput = React.forwardRef(
     disabled: disabledProp,
     readOnly,
     id: idProp,
+    onBlur: onBlurProp,
+    onKeyDown: onKeyDownProp,
     "aria-describedby": ariaDescribedByProp,
     "aria-errormessage": ariaErrorMessageProp,
     ...props
   }, ref) => {
     const fieldCtx = useFieldContext();
-    const error = errorProp || ((fieldCtx == null ? void 0 : fieldCtx.invalid) ?? false);
-    const size = sizeProp ?? (fieldCtx == null ? void 0 : fieldCtx.size) ?? "md";
-    const disabled = disabledProp ?? (fieldCtx == null ? void 0 : fieldCtx.disabled);
-    const variant = variantProp ?? (fieldCtx == null ? void 0 : fieldCtx.variant) ?? "default";
-    const resolvedMode = modeProp ?? (fieldCtx == null ? void 0 : fieldCtx.mode) ?? (readOnly ? "readonly" : disabled ? "disabled" : "edit");
+    const error = useResolvedFieldInvalid(errorProp);
+    const size = useResolvedFieldSize(sizeProp);
+    const disabled = useResolvedFieldDisabled(disabledProp);
+    const variant = useResolvedFieldVariant(variantProp);
+    const resolvedMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly });
+    const [draft, setDraft] = React.useState(null);
     if (resolvedMode !== "edit") {
       return /* @__PURE__ */ jsx(
         "div",
@@ -50,7 +53,8 @@ const NumberInput = React.forwardRef(
               className: cn(
                 "flex-1 min-w-0",
                 resolvedMode === "disabled" && "text-fg-disabled cursor-not-allowed",
-                value == null && "text-fg-muted"
+                // 2026-05-31 M24:disabled > muted。disabled 時不可再套 muted(否則 neutral-7 蓋過 disabled neutral-6)
+                value == null && resolvedMode !== "disabled" && "text-fg-muted"
               ),
               children: value == null ? EMPTY_DISPLAY : formatNumber(value, { precision, prefix, suffix, locale })
             }
@@ -59,8 +63,9 @@ const NumberInput = React.forwardRef(
       );
     }
     const handleChange = (e) => {
-      if (!onChange) return;
       const raw = e.target.value;
+      setDraft(raw);
+      if (!onChange) return;
       if (raw === "" || raw === "-") {
         onChange(null);
         return;
@@ -74,11 +79,7 @@ const NumberInput = React.forwardRef(
       "div",
       {
         className: cn(
-          fieldWrapperStyles({ mode: "edit", variant, size }),
-          error && [
-            "border-error hover:border-error-hover",
-            "focus-within:border-error focus-within:hover:border-error"
-          ],
+          fieldWrapperStyles({ mode: "edit", variant, size, error }),
           className
         ),
         "data-field-mode": "edit",
@@ -91,8 +92,16 @@ const NumberInput = React.forwardRef(
               type: "text",
               inputMode: "decimal",
               id: idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id),
-              value: value ?? "",
+              value: draft ?? (value != null ? String(value) : ""),
               onChange: handleChange,
+              onBlur: (e) => {
+                setDraft(null);
+                onBlurProp == null ? void 0 : onBlurProp(e);
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === "Escape") setDraft(null);
+                onKeyDownProp == null ? void 0 : onKeyDownProp(e);
+              },
               "aria-invalid": error || void 0,
               "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
               "aria-describedby": ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId),

package/dist/components/NumberInput/number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.js","sources":["../../../src/components/NumberInput/number-input.tsx"],"sourcesContent":["import * as React from 'react'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport type { InlineActionConfig } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { fieldWrapperStyles, bareInputStyles, EMPTY_DISPLAY } from '@/design-system/components/Field/field-wrapper'\nimport { useFieldContext } from '@/design-system/components/Field/field-context'\nimport { ItemInlineAction } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── Format ──────────────────────────────────────────────────────────────────\n\nexport interface NumberFormatOptions {\n  /** 小數位數 */\n  precision?: number\n  /** 前綴（如 '$'、'NT$'） */\n  prefix?: string\n  /** 後綴（如 '%'、'元'） */\n  suffix?: string\n  /** locale（預設 'en-US'） */\n  locale?: string\n}\n\nfunction formatNumber(\n  value: number | null | undefined,\n  options: NumberFormatOptions = {},\n): string {\n  if (value == null) return ''\n  const { precision, prefix = '', suffix = '', locale = 'en-US' } = options\n  const formatted = precision != null\n    ? value.toLocaleString(locale, { minimumFractionDigits: precision, maximumFractionDigits: precision })\n    : value.toLocaleString(locale)\n  return `${prefix}${formatted}${suffix}`\n}\n\n// Phase B1(2026-05-05):NumberInputDisplay 退場。\n// 改用 `<NumberInput mode=\"display\" value={...} prefix={...} ... />`,format 邏輯在 mode='display' 分支重用。\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface NumberInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange' | 'type'>,\n    Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant'>,\n    NumberFormatOptions {\n  /** Field display mode */\n  mode?: FieldMode\n  /**\n   * Visual chrome(正交於 mode);Phase B1(2026-05-05)新增。\n   * - `'default'`(預設)— 完整 Field wrapper chrome。\n   * - `'bare'` — 透明 variant,hover/focus 才 reveal(Toolbar inline / DataTable cell)。\n   *\n   * 透傳:在 `<Field variant=\"bare\">` 內自動繼承 context.variant;per-prop override context。\n   */\n  variant?: FieldVariant\n  /** Error 狀態（正交於 mode）。 */\n  error?: boolean\n  /** 數值 */\n  value?: number | null\n  /** 數值變更 */\n  onChange?: (value: number | null) => void\n  /** 右側 inline action — 宣告式 API，Field 根據 size 自動渲染。 */\n  endAction?: InlineActionConfig\n  /**\n   * 右側 slot(ReactNode)— escape hatch 供 consumer 放自訂元素(如 stepper button group / 自訂 popover trigger)。\n   * 跟 `endAction` 互斥(同時傳 endSlot 會優先,endAction 被忽略)。\n   * 規則對齊 Input.endSlot:90% case 用 endAction 宣告式 API,10% config 表達不出時走 endSlot。\n   */\n  endSlot?: React.ReactNode\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      mode: modeProp,\n      variant: variantProp,\n      error: errorProp = false,\n      size: sizeProp,\n      value,\n      onChange,\n      precision,\n      prefix,\n      suffix,\n      locale,\n      endAction,\n      endSlot,\n      className,\n      disabled: disabledProp,\n      readOnly,\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 size = sizeProp ?? fieldCtx?.size ?? 'md'\n    const disabled = disabledProp ?? fieldCtx?.disabled\n    // chrome 透傳:per-prop override context;context 沒值則 'default'\n    const variant: FieldVariant = variantProp ?? fieldCtx?.variant ?? 'default'\n    // mode resolve order(Phase B1 2026-05-05):prop > fieldCtx > readOnly/disabled fallback\n    const resolvedMode: FieldMode = modeProp\n      ?? fieldCtx?.mode\n      ?? (readOnly ? 'readonly' : disabled ? 'disabled' : 'edit')\n\n    // display / readonly / disabled 都顯示格式化值(span 取代 input)\n    if (resolvedMode !== 'edit') {\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: variant, size }), className)}\n          data-field-mode={resolvedMode}\n        >\n          <span\n            className={cn(\n              'flex-1 min-w-0',\n              resolvedMode === 'disabled' && 'text-fg-disabled cursor-not-allowed',\n              value == null && 'text-fg-muted',\n            )}\n          >\n            {value == null ? EMPTY_DISPLAY : formatNumber(value, { precision, prefix, suffix, locale })}\n          </span>\n        </div>\n      )\n    }\n\n    // edit 模式：raw 數值輸入\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (!onChange) return\n      const raw = e.target.value\n      if (raw === '' || raw === '-') {\n        onChange(null)\n        return\n      }\n      const parsed = Number(raw)\n      if (!Number.isNaN(parsed)) {\n        onChange(parsed)\n      }\n    }\n\n    return (\n      <div\n        className={cn(\n          fieldWrapperStyles({ mode: 'edit', variant: variant, size }),\n          error && [\n            'border-error hover:border-error-hover',\n            'focus-within:border-error focus-within:hover:border-error',\n          ],\n          className,\n        )}\n        data-field-mode=\"edit\"\n        data-error={error ? '' : undefined}\n      >\n        <input\n          ref={ref}\n          type=\"text\"\n          inputMode=\"decimal\"\n          id={idProp ?? fieldCtx?.id}\n          value={value ?? ''}\n          onChange={handleChange}\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          className={bareInputStyles}\n          {...props}\n        />\n        {endSlot ? (\n          // endSlot escape hatch:consumer 自控右側 slot(對齊 Input.endSlot canonical)\n          endSlot\n        ) : endAction ? (\n          <ItemInlineAction action={endAction} size={size ?? 'md'} />\n        ) : null}\n      </div>\n    )\n  }\n)\nNumberInput.displayName = 'NumberInput'\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\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 numberInputMeta = {\n  component: 'NumberInput',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-disabled', 'text-fg-muted'],\n    ring: [],\n  },\n} as const\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport { NumberInput, formatNumber }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"number-input.js","sources":["../../../src/components/NumberInput/number-input.tsx"],"sourcesContent":["import * as React from 'react'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport type { InlineActionConfig } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { fieldWrapperStyles, bareInputStyles, EMPTY_DISPLAY } from '@/design-system/components/Field/field-wrapper'\nimport { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant, useResolvedFieldInvalid } from '@/design-system/components/Field/field-context'\nimport { ItemInlineAction } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── Format ──────────────────────────────────────────────────────────────────\n\nexport interface NumberFormatOptions {\n  /** 小數位數 */\n  precision?: number\n  /** 前綴（如 '$'、'NT$'） */\n  prefix?: string\n  /** 後綴（如 '%'、'元'） */\n  suffix?: string\n  /** locale（預設 'en-US'） */\n  locale?: string\n}\n\nfunction formatNumber(\n  value: number | null | undefined,\n  options: NumberFormatOptions = {},\n): string {\n  if (value == null) return ''\n  const { precision, prefix = '', suffix = '', locale = 'en-US' } = options\n  const formatted = precision != null\n    ? value.toLocaleString(locale, { minimumFractionDigits: precision, maximumFractionDigits: precision })\n    : value.toLocaleString(locale)\n  return `${prefix}${formatted}${suffix}`\n}\n\n// Phase B1(2026-05-05):NumberInputDisplay 退場。\n// 改用 `<NumberInput mode=\"display\" value={...} prefix={...} ... />`,format 邏輯在 mode='display' 分支重用。\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface NumberInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange' | 'type'>,\n    Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant'>,\n    NumberFormatOptions {\n  /** Field display mode */\n  mode?: FieldMode\n  /**\n   * Visual chrome(正交於 mode);Phase B1(2026-05-05)新增。\n   * - `'default'`(預設)— 完整 Field wrapper chrome。\n   * - `'bare'` — 透明 variant,hover/focus 才 reveal(Toolbar inline / DataTable cell)。\n   *\n   * 透傳:在 `<Field variant=\"bare\">` 內自動繼承 context.variant;per-prop override context。\n   */\n  variant?: FieldVariant\n  /** Error 狀態（正交於 mode）。 */\n  error?: boolean\n  /** 數值 */\n  value?: number | null\n  /** 數值變更 */\n  onChange?: (value: number | null) => void\n  /** 右側 inline action — 宣告式 API，Field 根據 size 自動渲染。 */\n  endAction?: InlineActionConfig\n  /**\n   * 右側 slot(ReactNode)— escape hatch 供 consumer 放自訂元素(如 stepper button group / 自訂 popover trigger)。\n   * 跟 `endAction` 互斥(同時傳 endSlot 會優先,endAction 被忽略)。\n   * 規則對齊 Input.endSlot:90% case 用 endAction 宣告式 API,10% config 表達不出時走 endSlot。\n   */\n  endSlot?: React.ReactNode\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      mode: modeProp,\n      variant: variantProp,\n      error: errorProp = false,\n      size: sizeProp,\n      value,\n      onChange,\n      precision,\n      prefix,\n      suffix,\n      locale,\n      endAction,\n      endSlot,\n      className,\n      disabled: disabledProp,\n      readOnly,\n      id: idProp,\n      onBlur: onBlurProp,\n      onKeyDown: onKeyDownProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-errormessage': ariaErrorMessageProp,\n      ...props\n    },\n    ref\n  ) => {\n    const fieldCtx = useFieldContext()\n    const error = useResolvedFieldInvalid(errorProp)\n    const size = useResolvedFieldSize(sizeProp)\n    const disabled = useResolvedFieldDisabled(disabledProp)\n    // chrome 透傳:per-prop override context;context 沒值則 'default'\n    const variant: FieldVariant = useResolvedFieldVariant(variantProp)\n    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode 統一解析(prop > 有效 disabled > fieldCtx.mode > readOnly > 'edit')\n    const resolvedMode: FieldMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly })\n\n    // 2026-07-05 D4 draft state:controlled value 回寫會吃掉輸入中間態('-'、'1.'、'0.0' 等\n    // parse 後 lossy 的 raw 字串)— 例:已有值 5 全選打「-」→ onChange(null) 回寫把 DOM 重設\n    // 為空,負號被吃、無法打出 -5。修法對齊 Ant InputNumber / Adobe Spectrum NumberField 的\n    // internal draft string canonical:輸入期間 DOM 顯示以 local draft 優先,parse 成功即時同步\n    // onChange(parsed);blur / Enter commit 清 draft 回 value 顯示;Escape 一併棄 draft(對齊\n    // form-validation 規則 4 回復原值)。宣告於 non-edit early return 之前(Rules-of-Hooks,\n    // 同 LinkInput 2026-07-04 修法)。\n    const [draft, setDraft] = React.useState<string | null>(null)\n\n    // display / readonly / disabled 都顯示格式化值(span 取代 input)\n    if (resolvedMode !== 'edit') {\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: variant, size }), className)}\n          data-field-mode={resolvedMode}\n        >\n          <span\n            className={cn(\n              'flex-1 min-w-0',\n              resolvedMode === 'disabled' && 'text-fg-disabled cursor-not-allowed',\n              // 2026-05-31 M24:disabled > muted。disabled 時不可再套 muted(否則 neutral-7 蓋過 disabled neutral-6)\n              value == null && resolvedMode !== 'disabled' && 'text-fg-muted',\n            )}\n          >\n            {value == null ? EMPTY_DISPLAY : formatNumber(value, { precision, prefix, suffix, locale })}\n          </span>\n        </div>\n      )\n    }\n\n    // edit 模式:raw 數值輸入(draft 承載中間態;value 面語意不變 — ''/'-' 視為空、NaN 忽略)\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const raw = e.target.value\n      setDraft(raw)\n      if (!onChange) return\n      if (raw === '' || raw === '-') {\n        onChange(null)\n        return\n      }\n      const parsed = Number(raw)\n      if (!Number.isNaN(parsed)) {\n        onChange(parsed)\n      }\n    }\n\n    return (\n      <div\n        className={cn(\n          fieldWrapperStyles({ mode: 'edit', variant: variant, size, error }),\n          className,\n        )}\n        data-field-mode=\"edit\"\n        data-error={error ? '' : undefined}\n      >\n        <input\n          ref={ref}\n          type=\"text\"\n          inputMode=\"decimal\"\n          id={idProp ?? fieldCtx?.id}\n          // 輸入期間 draft(raw 字串)優先;非輸入期間才從 value prop 同步顯示(2026-07-05 D4)\n          value={draft ?? (value != null ? String(value) : '')}\n          onChange={handleChange}\n          // blur / Enter = commit(清 draft,顯示回 committed value);Escape 棄 draft\n          onBlur={(e) => { setDraft(null); onBlurProp?.(e) }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === 'Escape') setDraft(null)\n            onKeyDownProp?.(e)\n          }}\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          className={bareInputStyles}\n          {...props}\n        />\n        {endSlot ? (\n          // endSlot escape hatch:consumer 自控右側 slot(對齊 Input.endSlot canonical)\n          endSlot\n        ) : endAction ? (\n          <ItemInlineAction action={endAction} size={size ?? 'md'} />\n        ) : null}\n      </div>\n    )\n  }\n)\nNumberInput.displayName = 'NumberInput'\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\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 numberInputMeta = {\n  component: 'NumberInput',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-disabled', 'text-fg-muted'],\n    ring: [],\n  },\n} as const\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport { NumberInput, formatNumber }\n"],"names":[],"mappings":"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"}

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

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

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

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

package/dist/components/OverflowIndicator/index.js

@@ -0,0 +1,6 @@
+import { OverflowIndicator, overflowIndicatorMeta } from "./overflow-indicator.js";
+export {
+  OverflowIndicator,
+  overflowIndicatorMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/OverflowIndicator/overflow-indicator.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;由 Combobox / PeoplePicker 等 DS 元件 wrap 消費,end-user app 請用 wrapper 元件。
+ */
 import * as React from 'react';
 export interface OverflowIndicatorProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
     count: number;
@@ -9,10 +13,10 @@ export interface OverflowIndicatorProps extends Omit<React.HTMLAttributes<HTMLSp
 declare const OverflowIndicator: React.ForwardRefExoticComponent<OverflowIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
 export declare const overflowIndicatorMeta: {
     readonly component: "OverflowIndicator";
-    readonly family: null;
+    readonly family: "self-contained";
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "focus-visible"];
     readonly tokens: {
         readonly bg: readonly ["bg-muted"];
         readonly fg: readonly ["text-foreground"];

package/dist/components/OverflowIndicator/overflow-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/OverflowIndicator/overflow-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA6B9B,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmDD,QAAA,MAAM,iBAAiB,gGA8CtB,CAAA;AAKD,eAAO,MAAM,qBAAqB;;;;;;;;;;;CAexB,CAAA;AAEV,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"overflow-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/OverflowIndicator/overflow-indicator.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA6B9B,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmDD,QAAA,MAAM,iBAAiB,gGAuDtB,CAAA;AAKD,eAAO,MAAM,qBAAqB;;;;;;;;;;;CAgBxB,CAAA;AAEV,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/OverflowIndicator/overflow-indicator.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cn } from "../../lib/utils.js";
 import { HoverCard, HoverCardTrigger, HoverCardContent } from "../HoverCard/hover-card.js";
 import { tagVariants } from "../Tag/tag.js";
-import { HOVER_DELAY_CLOSE_MS, HOVER_DELAY_RICH_MS } from "../../tokens/motion/motion.js";
+import { HOVER_DELAY_CLOSE_MS, HOVER_DELAY_PLAIN_MS } from "../../tokens/motion/motion.js";
 const triggerSize = {
   sm: "h-5 min-w-5",
   md: "h-6 min-w-6",
@@ -58,7 +58,10 @@ const OverflowIndicator = React.forwardRef(
       {
         ref,
         "data-overflow-indicator": "",
-        className: cn(tagVariants({ color: "neutral", size }), "cursor-default", className),
+        tabIndex: 0,
+        role: "button",
+        "aria-haspopup": "dialog",
+        className: cn(tagVariants({ color: "neutral", size }), "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", className),
         ...props,
         children: /* @__PURE__ */ jsxs("span", { className: "px-1", children: [
           "+",
@@ -70,9 +73,13 @@ const OverflowIndicator = React.forwardRef(
       {
         ref,
         "data-overflow-indicator": "",
+        tabIndex: 0,
+        role: "button",
+        "aria-haspopup": "dialog",
         className: cn(
           "shrink-0 rounded-full inline-grid place-content-center",
-          "bg-muted text-foreground font-medium leading-none cursor-default",
+          "bg-muted text-foreground font-medium leading-none cursor-pointer",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
           triggerSize[size],
           triggerText[size],
           className
@@ -84,7 +91,7 @@ const OverflowIndicator = React.forwardRef(
         ]
       }
     );
-    return /* @__PURE__ */ jsxs(HoverCard, { openDelay: HOVER_DELAY_RICH_MS, closeDelay: HOVER_DELAY_CLOSE_MS, children: [
+    return /* @__PURE__ */ jsxs(HoverCard, { openDelay: HOVER_DELAY_PLAIN_MS, closeDelay: HOVER_DELAY_CLOSE_MS, children: [
       /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: trigger }),
       /* @__PURE__ */ jsx(HoverCardContent, { className: "bg-tooltip rounded-lg", "data-theme": "dark", children: /* @__PURE__ */ jsx(ShrinkWrapList, { children }) })
     ] });
@@ -93,11 +100,12 @@ const OverflowIndicator = React.forwardRef(
 OverflowIndicator.displayName = "OverflowIndicator";
 const overflowIndicatorMeta = {
   component: "OverflowIndicator",
-  family: null,
-  // non-family composite / overlay / layout
+  family: "self-contained",
+  // 對齊 overflow-indicator.spec.md frontmatter family: self-contained(SSOT)
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 2026-07-04 audit 對齊(spec:95「本身無 hover / active / disabled / selected 變化」;code 有 focus-visible ring tsx:106/121)
+  states: ["default", "focus-visible"],
   tokens: {
     bg: ["bg-muted"],
     fg: ["text-foreground"],