@qijenchen/design-system 0.1.0-beta.53 → 0.1.0-beta.55

package/dist/components/Calendar/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","sources":["../../../src/components/Calendar/calendar.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 { ChevronLeft, ChevronRight, Plus } from 'lucide-react'\nimport {\n  startOfMonth,\n  endOfMonth,\n  startOfWeek,\n  endOfWeek,\n  eachDayOfInterval,\n  format,\n  isSameMonth,\n  isSameDay,\n  addMonths,\n  subMonths,\n} from 'date-fns'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport { SegmentedControl, SegmentedControlItem } from '@/design-system/components/SegmentedControl/segmented-control'\n\n/**\n * Calendar — 事件檢視 canvas(月 view MVP)\n *\n * 定位:看事件的 page-level canvas,對齊 Notion Calendar / Google Calendar。\n * 完整 spec 見 `event-calendar.spec.md`。\n *\n * ── Layout Family ──\n * 非 4-Family,屬 page-composite(多區塊 Toolbar + Grid + EventTile)。\n *\n * ── MVP scope(本次 session)──\n * - 月 view 完整(toolbar / grid / event tile / today highlight / outside days)\n * - 週 / 日 view 是 tech debt\n * - 拖拉增刪 event 是 tech debt\n *\n * ── 與 DatePicker 的區分 ──\n * DatePicker 是「選日期」form control;Calendar 是「看事件」page canvas。\n * 名字相近但職責完全不同,spec 頂段明示分界。\n */\n\n// ── Types ──────────────────────────────────────────────────────────────────\n\nexport interface CalendarEvent {\n  id: string\n  title: string\n  /** ISO 字串 \"YYYY-MM-DD\"(all-day)或 \"YYYY-MM-DDTHH:mm\"(timed) */\n  start: string | Date\n  end: string | Date\n  allDay?: boolean\n  /**\n   * 事件類別色。值為 DS primitive 色名(blue / green / orange / purple / red / yellow)。\n   * 對照 Badge / Tag 的 primitive color variants。\n   */\n  color?: 'blue' | 'green' | 'orange' | 'purple' | 'red' | 'yellow'\n  metadata?: Record<string, unknown>\n}\n\nexport type CalendarView = 'month' | 'week' | 'day'\n\nexport interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  /** 當前 view(MVP 只 'month',其餘 view tech debt) */\n  view?: CalendarView\n  defaultView?: CalendarView\n  onViewChange?: (view: CalendarView) => void\n\n  /** 聚焦日期(月 view 的那個月) */\n  referenceDate?: Date\n  defaultReferenceDate?: Date\n  onReferenceDateChange?: (date: Date) => void\n\n  /** 事件資料 */\n  events?: CalendarEvent[]\n\n  /** 點 event tile 回調 */\n  onEventClick?: (event: CalendarEvent) => void\n  /** 點月 cell 回調(用於新增) */\n  onDateClick?: (date: Date) => void\n  /** 點新事件 CTA 回調 */\n  onCreateEvent?: () => void\n\n  /** 0 = Sunday, 1 = Monday。預設 0(對齊 Google Calendar 美系預設) */\n  weekStartsOn?: 0 | 1\n\n  /** 自訂 event tile 渲染 */\n  renderEventTile?: (event: CalendarEvent) => React.ReactNode\n\n  /** size(MVP 只 md;lg 為 tech debt) */\n  size?: 'md' | 'lg'\n  className?: string\n\n  /** locale(預設 'en-US') */\n  locale?: string\n\n  /** ARIA labels for chrome controls. Override for i18n. */\n  prevAriaLabel?: string\n  nextAriaLabel?: string\n  viewToggleAriaLabel?: string\n  todayLabel?: string\n}\n\n// ── Event tile color tokens ─────────────────────────────────────────────────\n// 對齊 Tag / Badge 的 primitive color system(見 `color.spec.md`)\n\nconst EVENT_COLOR_CLASSES: Record<NonNullable<CalendarEvent['color']>, string> = {\n  blue: 'bg-[var(--color-blue-1)] text-[var(--color-blue-7)] hover:bg-[var(--color-blue-2)]',\n  green: 'bg-[var(--color-green-1)] text-[var(--color-green-7)] hover:bg-[var(--color-green-2)]',\n  orange: 'bg-[var(--color-deep-orange-1)] text-[var(--color-deep-orange-7)] hover:bg-[var(--color-deep-orange-2)]',\n  purple: 'bg-[var(--color-purple-1)] text-[var(--color-purple-7)] hover:bg-[var(--color-purple-2)]',\n  red: 'bg-[var(--color-deep-orange-1)] text-[var(--color-deep-orange-7)] hover:bg-[var(--color-deep-orange-2)]',\n  yellow: 'bg-[var(--color-yellow-1)] text-[var(--color-yellow-7)] hover:bg-[var(--color-yellow-2)]',\n}\n\n// 2026-06-01 allDay 補實作(user 拍板 A):全天事件 = 淡底 tile + 左側實心 accent 條(color-6)+ medium,\n// 視覺上明確區分「全天長條」vs 有時間事件。用 accent border 而非 solid fill 以保文字對比安全(yellow 等淺色不致白字失對比)。\n// 對齊 Google Calendar / Outlook「全天事件以強調條呈現於頂端」慣例。\nconst EVENT_ALLDAY_ACCENT: Record<NonNullable<CalendarEvent['color']>, string> = {\n  blue: 'border-l-[3px] border-[var(--color-blue-6)]',\n  green: 'border-l-[3px] border-[var(--color-green-6)]',\n  orange: 'border-l-[3px] border-[var(--color-deep-orange-6)]',\n  purple: 'border-l-[3px] border-[var(--color-purple-6)]',\n  red: 'border-l-[3px] border-[var(--color-deep-orange-6)]',\n  yellow: 'border-l-[3px] border-[var(--color-yellow-6)]',\n}\n\n// ── Helpers ────────────────────────────────────────────────────────────────\n\nfunction coerceDate(value: string | Date): Date {\n  return value instanceof Date ? value : new Date(value)\n}\n\nfunction eventsOnDate(events: CalendarEvent[], date: Date): CalendarEvent[] {\n  return events.filter((e) => {\n    const start = coerceDate(e.start)\n    const end = coerceDate(e.end)\n    // 日期落在 [start, end] 範圍內(日精度)\n    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()\n    const s = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime()\n    const eEnd = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime()\n    return d >= s && d <= eEnd\n  })\n}\n\n// ── Component ──────────────────────────────────────────────────────────────\n\nconst MAX_TILES_PER_CELL = 3\n\nconst Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calendar({\n  view: viewProp,\n  defaultView = 'month',\n  onViewChange,\n  referenceDate: referenceDateProp,\n  defaultReferenceDate,\n  onReferenceDateChange,\n  events = [],\n  onEventClick,\n  onDateClick,\n  onCreateEvent,\n  weekStartsOn = 0,\n  renderEventTile,\n  size = 'md',\n  className,\n  locale = 'en-US',\n  prevAriaLabel = '上個月', // i18n-allow: DS default; consumer override via prevAriaLabel prop\n  nextAriaLabel = '下個月', // i18n-allow: DS default; consumer override via nextAriaLabel prop\n  viewToggleAriaLabel = '檢視切換', // i18n-allow: DS default; consumer override via viewToggleAriaLabel prop\n  todayLabel = '今天', // i18n-allow: DS default; consumer override via todayLabel prop\n  ...props\n}, ref) {\n  // Controlled / uncontrolled refDate\n  const [internalRef, setInternalRef] = React.useState<Date>(\n    defaultReferenceDate ?? new Date(),\n  )\n  const refDate = referenceDateProp ?? internalRef\n  const setRefDate = React.useCallback(\n    (next: Date) => {\n      if (referenceDateProp === undefined) setInternalRef(next)\n      onReferenceDateChange?.(next)\n    },\n    [referenceDateProp, onReferenceDateChange],\n  )\n\n  // View state(MVP 只用 month,其他 tech debt)\n  const [internalView, setInternalView] = React.useState<CalendarView>(defaultView)\n  const currentView = viewProp ?? internalView\n  const setView = React.useCallback(\n    (next: CalendarView) => {\n      if (viewProp === undefined) setInternalView(next)\n      onViewChange?.(next)\n    },\n    [viewProp, onViewChange],\n  )\n\n  // Build month grid\n  const days = React.useMemo(() => {\n    const monthStart = startOfMonth(refDate)\n    const monthEnd = endOfMonth(refDate)\n    const gridStart = startOfWeek(monthStart, { weekStartsOn })\n    const gridEnd = endOfWeek(monthEnd, { weekStartsOn })\n    return eachDayOfInterval({ start: gridStart, end: gridEnd })\n  }, [refDate, weekStartsOn])\n\n  const monthTitle = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  }).format(refDate)\n\n  const today = new Date()\n\n  const weekdayNames = React.useMemo(() => {\n    // 取 `days[0..6]` 的名字(gridStart 開始 7 天,正好一週)\n    return days.slice(0, 7).map((d) =>\n      new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(d),\n    )\n  }, [days, locale])\n\n  const handleToday = () => setRefDate(new Date())\n  const handlePrev = () => setRefDate(subMonths(refDate, 1))\n  const handleNext = () => setRefDate(addMonths(refDate, 1))\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col w-full h-full bg-surface rounded-md border border-divider overflow-hidden',\n        className,\n      )}\n      data-view={currentView}\n      data-size={size}\n      {...props}\n    >\n      {/* Toolbar:[◀] [今天] [▶]  title  [view tabs]  [+ new] */}\n      <div\n        className={cn(\n          'flex items-center gap-2 shrink-0 border-b border-divider',\n          'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n        )}\n      >\n        <div className=\"flex items-center gap-2\">\n          <Button\n            variant=\"text\"\n            size=\"sm\"\n            iconOnly\n            startIcon={ChevronLeft}\n            aria-label={prevAriaLabel}\n            onClick={handlePrev}\n          />\n          <Button variant=\"tertiary\" size=\"sm\" onClick={handleToday}>\n            {todayLabel}\n          </Button>\n          <Button\n            variant=\"text\"\n            size=\"sm\"\n            iconOnly\n            startIcon={ChevronRight}\n            aria-label={nextAriaLabel}\n            onClick={handleNext}\n          />\n        </div>\n\n        <h2 className=\"text-body-lg font-medium text-foreground flex-1 min-w-0 truncate ml-2\">\n          {monthTitle}\n        </h2>\n\n        {/* View switcher:用 SegmentedControl(互斥多選一 canonical)——\n            對齊 CLAUDE.md「互斥分類選擇走 SegmentedControl,非 checked Button group」原則。\n            Button 的 pressed 是「toggle 持續狀態」語意,不適合「單選 view 切換」 */}\n        <SegmentedControl\n          size=\"sm\"\n          value={currentView}\n          onValueChange={(v) => setView(v as CalendarView)}\n          aria-label={viewToggleAriaLabel}\n        >\n          <SegmentedControlItem value=\"day\" disabled>日</SegmentedControlItem>\n          <SegmentedControlItem value=\"week\" disabled>週</SegmentedControlItem>\n          <SegmentedControlItem value=\"month\">月</SegmentedControlItem>\n        </SegmentedControl>\n\n        {onCreateEvent && (\n          <Button variant=\"primary\" size=\"sm\" startIcon={Plus} onClick={onCreateEvent}>\n            新事件\n          </Button>\n        )}\n      </div>\n\n      {/* Weekday header */}\n      <div className=\"grid grid-cols-7 border-b border-divider bg-muted\">\n        {weekdayNames.map((name, i) => (\n          <div\n            key={i}\n            className=\"px-2 py-1.5 text-caption text-fg-muted font-normal text-center\"\n          >\n            {name}\n          </div>\n        ))}\n      </div>\n\n      {/* Month grid:7 cols, ~5-6 rows。a11y(2026-04-25):WAI-ARIA grid 要求 row > gridcell\n          階層,chunk days 7 一組,wrap 成 role='row'(display:contents 保 CSS grid 佈局)。 */}\n      <div\n        className=\"grid grid-cols-7 flex-1 min-h-0\"\n        role=\"grid\"\n        aria-label={`月行事曆,${monthTitle}`}\n      >\n        {Array.from({ length: Math.ceil(days.length / 7) }, (_, rowIdx) => (\n          <div key={rowIdx} role=\"row\" style={{ display: 'contents' }}>\n            {days.slice(rowIdx * 7, rowIdx * 7 + 7).map((date) => {\n              const inMonth = isSameMonth(date, refDate)\n              const isToday = isSameDay(date, today)\n              // 2026-06-01 allDay:全天事件排 cell 頂端(對齊 Google Calendar 全天列在上)\n              const dayEvents = eventsOnDate(events, date).slice().sort((a, b) => Number(b.allDay ?? false) - Number(a.allDay ?? false))\n              const visibleEvents = dayEvents.slice(0, MAX_TILES_PER_CELL)\n              const overflowCount = dayEvents.length - visibleEvents.length\n\n              return (\n                <button\n                  key={date.toISOString()}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  aria-label={`${format(date, 'yyyy-MM-dd')},${dayEvents.length} 個事件`}\n              onClick={() => onDateClick?.(date)}\n              className={cn(\n                'flex flex-col gap-1 min-h-28 p-1.5 text-left',\n                'border-r border-b border-divider last:border-r-0',\n                '[&:nth-child(7n)]:border-r-0',\n                'hover:bg-neutral-hover transition-colors',\n                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n                !inMonth && 'bg-muted',\n              )}\n            >\n              {/* Date number header */}\n              <div className=\"flex items-start justify-end\">\n                {isToday ? (\n                  <span className=\"inline-flex items-center justify-center min-w-6 h-6 px-2 rounded-full bg-primary text-on-emphasis text-body font-medium\">\n                    {format(date, 'd')}\n                  </span>\n                ) : (\n                  <span\n                    className={cn(\n                      'text-body font-medium',\n                      !inMonth && 'text-fg-disabled',\n                    )}\n                  >\n                    {format(date, 'd')}\n                  </span>\n                )}\n              </div>\n\n              {/* Event tiles */}\n              <div className=\"flex flex-col gap-0.5 min-h-0\">\n                {visibleEvents.map((event) => {\n                  const ec = event.color ?? 'blue'\n                  // 2026-06-01 allDay:淡底 + 左 accent 條 + medium = 「全天長條」視覺(區分有時間事件)\n                  const colorClass = event.allDay\n                    ? cn(EVENT_COLOR_CLASSES[ec], EVENT_ALLDAY_ACCENT[ec], 'font-medium')\n                    : EVENT_COLOR_CLASSES[ec]\n                  if (renderEventTile) {\n                    return (\n                      <div\n                        key={event.id}\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onEventClick?.(event)\n                        }}\n                      >\n                        {renderEventTile(event)}\n                      </div>\n                    )\n                  }\n                  return (\n                    <div\n                      key={event.id}\n                      role=\"button\"\n                      tabIndex={0}\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        onEventClick?.(event)\n                      }}\n                      onKeyDown={(e) => {\n                        if (e.key === 'Enter' || e.key === ' ') {\n                          e.preventDefault()\n                          onEventClick?.(event)\n                        }\n                      }}\n                      aria-label={`事件:${event.title}`}\n                      className={cn(\n                        'rounded-md px-1.5 py-0.5 text-caption truncate cursor-pointer transition-colors',\n                        // 2026-05-31 #22:事件 tile 是 focusable(tabIndex=0 role=button)但原無 focus ring\n                        // → WCAG 2.4.7 不合規。補 focus-visible ring 對齊日期格按鈕。\n                        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n                        colorClass,\n                      )}\n                    >\n                      {event.title}\n                    </div>\n                  )\n                })}\n                {overflowCount > 0 && (\n                  <div className=\"text-caption text-fg-muted px-1.5\">\n                    +{overflowCount} more\n                  </div>\n                )}\n              </div>\n            </button>\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n})\nCalendar.displayName = \"Calendar\"\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 calendarMeta = {\n  component: 'Calendar',\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: ['bg-muted', 'bg-neutral-hover', 'bg-primary', 'bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport { Calendar }\n"],"names":["Calendar"],"mappings":"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"}
+{"version":3,"file":"calendar.js","sources":["../../../src/components/Calendar/calendar.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 { ChevronLeft, ChevronRight, Plus } from 'lucide-react'\nimport {\n  startOfMonth,\n  endOfMonth,\n  startOfWeek,\n  endOfWeek,\n  eachDayOfInterval,\n  format,\n  isSameMonth,\n  isSameDay,\n  addMonths,\n  subMonths,\n} from 'date-fns'\nimport { cn } from '@/lib/utils'\nimport { CAT_EVENT, CAT_ACCENT, type CategoricalHue } from '@/design-system/tokens/categorical-color'\nimport { Button } from '@/design-system/components/Button/button'\nimport { SegmentedControl, SegmentedControlItem } from '@/design-system/components/SegmentedControl/segmented-control'\n\n/**\n * Calendar — 事件檢視 canvas(月 view MVP)\n *\n * 定位:看事件的 page-level canvas,對齊 Notion Calendar / Google Calendar。\n * 完整 spec 見 `event-calendar.spec.md`。\n *\n * ── Layout Family ──\n * 非 4-Family,屬 page-composite(多區塊 Toolbar + Grid + EventTile)。\n *\n * ── MVP scope(本次 session)──\n * - 月 view 完整(toolbar / grid / event tile / today highlight / outside days)\n * - 週 / 日 view 是 tech debt\n * - 拖拉增刪 event 是 tech debt\n *\n * ── 與 DatePicker 的區分 ──\n * DatePicker 是「選日期」form control;Calendar 是「看事件」page canvas。\n * 名字相近但職責完全不同,spec 頂段明示分界。\n */\n\n// ── Types ──────────────────────────────────────────────────────────────────\n\nexport interface CalendarEvent {\n  id: string\n  title: string\n  /** ISO 字串 \"YYYY-MM-DD\"(all-day)或 \"YYYY-MM-DDTHH:mm\"(timed) */\n  start: string | Date\n  end: string | Date\n  allDay?: boolean\n  /**\n   * 事件類別色(categorical 色相,1:1 對 `--color-{hue}-*`)。**消費 categorical-color SSOT**,\n   * 與 Tag / Avatar 共用同一組 12 色相。2026-06-04 修:原 `orange` 與 `red` 都誤接 deep-orange;\n   * 改消費 SSOT 後 orange→`--color-orange-*`、red→`--color-red-*`(品牌紅 hue 25),各自獨立。\n   */\n  color?: CategoricalHue\n  metadata?: Record<string, unknown>\n}\n\nexport type CalendarView = 'month' | 'week' | 'day'\n\nexport interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  /** 當前 view(MVP 只 'month',其餘 view tech debt) */\n  view?: CalendarView\n  defaultView?: CalendarView\n  onViewChange?: (view: CalendarView) => void\n\n  /** 聚焦日期(月 view 的那個月) */\n  referenceDate?: Date\n  defaultReferenceDate?: Date\n  onReferenceDateChange?: (date: Date) => void\n\n  /** 事件資料 */\n  events?: CalendarEvent[]\n\n  /** 點 event tile 回調 */\n  onEventClick?: (event: CalendarEvent) => void\n  /** 點月 cell 回調(用於新增) */\n  onDateClick?: (date: Date) => void\n  /** 點新事件 CTA 回調 */\n  onCreateEvent?: () => void\n\n  /** 0 = Sunday, 1 = Monday。預設 0(對齊 Google Calendar 美系預設) */\n  weekStartsOn?: 0 | 1\n\n  /** 自訂 event tile 渲染 */\n  renderEventTile?: (event: CalendarEvent) => React.ReactNode\n\n  /** size(MVP 只 md;lg 為 tech debt) */\n  size?: 'md' | 'lg'\n  className?: string\n\n  /** locale(預設 'en-US') */\n  locale?: string\n\n  /** ARIA labels for chrome controls. Override for i18n. */\n  prevAriaLabel?: string\n  nextAriaLabel?: string\n  viewToggleAriaLabel?: string\n  todayLabel?: string\n}\n\n// ── Event tile color tokens ─────────────────────────────────────────────────\n// **消費 categorical-color SSOT**(CAT_EVENT = subtle 底 + hover step-2;CAT_ACCENT = 左側 step-6\n// 實心條),與 Tag / Avatar 共用 12 色相,key X 一律對 `--color-X-*`(1:1)。\n// 2026-06-01 allDay:全天事件 = 淡底 tile + 左側實心 accent 條 + medium,視覺區分「全天長條」vs\n// 有時間事件;用 accent border 而非 solid fill 保文字對比安全。對齊 Google Calendar / Outlook 慣例。\nconst EVENT_COLOR_CLASSES = CAT_EVENT\nconst EVENT_ALLDAY_ACCENT = CAT_ACCENT\n\n// ── Helpers ────────────────────────────────────────────────────────────────\n\nfunction coerceDate(value: string | Date): Date {\n  return value instanceof Date ? value : new Date(value)\n}\n\nfunction eventsOnDate(events: CalendarEvent[], date: Date): CalendarEvent[] {\n  return events.filter((e) => {\n    const start = coerceDate(e.start)\n    const end = coerceDate(e.end)\n    // 日期落在 [start, end] 範圍內(日精度)\n    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()\n    const s = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime()\n    const eEnd = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime()\n    return d >= s && d <= eEnd\n  })\n}\n\n// ── Component ──────────────────────────────────────────────────────────────\n\nconst MAX_TILES_PER_CELL = 3\n\nconst Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calendar({\n  view: viewProp,\n  defaultView = 'month',\n  onViewChange,\n  referenceDate: referenceDateProp,\n  defaultReferenceDate,\n  onReferenceDateChange,\n  events = [],\n  onEventClick,\n  onDateClick,\n  onCreateEvent,\n  weekStartsOn = 0,\n  renderEventTile,\n  size = 'md',\n  className,\n  locale = 'en-US',\n  prevAriaLabel = '上個月', // i18n-allow: DS default; consumer override via prevAriaLabel prop\n  nextAriaLabel = '下個月', // i18n-allow: DS default; consumer override via nextAriaLabel prop\n  viewToggleAriaLabel = '檢視切換', // i18n-allow: DS default; consumer override via viewToggleAriaLabel prop\n  todayLabel = '今天', // i18n-allow: DS default; consumer override via todayLabel prop\n  ...props\n}, ref) {\n  // Controlled / uncontrolled refDate\n  const [internalRef, setInternalRef] = React.useState<Date>(\n    defaultReferenceDate ?? new Date(),\n  )\n  const refDate = referenceDateProp ?? internalRef\n  const setRefDate = React.useCallback(\n    (next: Date) => {\n      if (referenceDateProp === undefined) setInternalRef(next)\n      onReferenceDateChange?.(next)\n    },\n    [referenceDateProp, onReferenceDateChange],\n  )\n\n  // View state(MVP 只用 month,其他 tech debt)\n  const [internalView, setInternalView] = React.useState<CalendarView>(defaultView)\n  const currentView = viewProp ?? internalView\n  const setView = React.useCallback(\n    (next: CalendarView) => {\n      if (viewProp === undefined) setInternalView(next)\n      onViewChange?.(next)\n    },\n    [viewProp, onViewChange],\n  )\n\n  // Build month grid\n  const days = React.useMemo(() => {\n    const monthStart = startOfMonth(refDate)\n    const monthEnd = endOfMonth(refDate)\n    const gridStart = startOfWeek(monthStart, { weekStartsOn })\n    const gridEnd = endOfWeek(monthEnd, { weekStartsOn })\n    return eachDayOfInterval({ start: gridStart, end: gridEnd })\n  }, [refDate, weekStartsOn])\n\n  const monthTitle = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  }).format(refDate)\n\n  const today = new Date()\n\n  const weekdayNames = React.useMemo(() => {\n    // 取 `days[0..6]` 的名字(gridStart 開始 7 天,正好一週)\n    return days.slice(0, 7).map((d) =>\n      new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(d),\n    )\n  }, [days, locale])\n\n  const handleToday = () => setRefDate(new Date())\n  const handlePrev = () => setRefDate(subMonths(refDate, 1))\n  const handleNext = () => setRefDate(addMonths(refDate, 1))\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col w-full h-full bg-surface rounded-md border border-divider overflow-hidden',\n        className,\n      )}\n      data-view={currentView}\n      data-size={size}\n      {...props}\n    >\n      {/* Toolbar:[◀] [今天] [▶]  title  [view tabs]  [+ new] */}\n      <div\n        className={cn(\n          'flex items-center gap-2 shrink-0 border-b border-divider',\n          'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n        )}\n      >\n        <div className=\"flex items-center gap-2\">\n          <Button\n            variant=\"text\"\n            size=\"sm\"\n            iconOnly\n            startIcon={ChevronLeft}\n            aria-label={prevAriaLabel}\n            onClick={handlePrev}\n          />\n          <Button variant=\"tertiary\" size=\"sm\" onClick={handleToday}>\n            {todayLabel}\n          </Button>\n          <Button\n            variant=\"text\"\n            size=\"sm\"\n            iconOnly\n            startIcon={ChevronRight}\n            aria-label={nextAriaLabel}\n            onClick={handleNext}\n          />\n        </div>\n\n        <h2 className=\"text-body-lg font-medium text-foreground flex-1 min-w-0 truncate ml-2\">\n          {monthTitle}\n        </h2>\n\n        {/* View switcher:用 SegmentedControl(互斥多選一 canonical)——\n            對齊 CLAUDE.md「互斥分類選擇走 SegmentedControl,非 checked Button group」原則。\n            Button 的 pressed 是「toggle 持續狀態」語意,不適合「單選 view 切換」 */}\n        <SegmentedControl\n          size=\"sm\"\n          value={currentView}\n          onValueChange={(v) => setView(v as CalendarView)}\n          aria-label={viewToggleAriaLabel}\n        >\n          <SegmentedControlItem value=\"day\" disabled>日</SegmentedControlItem>\n          <SegmentedControlItem value=\"week\" disabled>週</SegmentedControlItem>\n          <SegmentedControlItem value=\"month\">月</SegmentedControlItem>\n        </SegmentedControl>\n\n        {onCreateEvent && (\n          <Button variant=\"primary\" size=\"sm\" startIcon={Plus} onClick={onCreateEvent}>\n            新事件\n          </Button>\n        )}\n      </div>\n\n      {/* Weekday header */}\n      <div className=\"grid grid-cols-7 border-b border-divider bg-muted\">\n        {weekdayNames.map((name, i) => (\n          <div\n            key={i}\n            className=\"px-2 py-1.5 text-caption text-fg-muted font-normal text-center\"\n          >\n            {name}\n          </div>\n        ))}\n      </div>\n\n      {/* Month grid:7 cols, ~5-6 rows。a11y(2026-04-25):WAI-ARIA grid 要求 row > gridcell\n          階層,chunk days 7 一組,wrap 成 role='row'(display:contents 保 CSS grid 佈局)。 */}\n      <div\n        className=\"grid grid-cols-7 flex-1 min-h-0\"\n        role=\"grid\"\n        aria-label={`月行事曆,${monthTitle}`}\n      >\n        {Array.from({ length: Math.ceil(days.length / 7) }, (_, rowIdx) => (\n          <div key={rowIdx} role=\"row\" style={{ display: 'contents' }}>\n            {days.slice(rowIdx * 7, rowIdx * 7 + 7).map((date) => {\n              const inMonth = isSameMonth(date, refDate)\n              const isToday = isSameDay(date, today)\n              // 2026-06-01 allDay:全天事件排 cell 頂端(對齊 Google Calendar 全天列在上)\n              const dayEvents = eventsOnDate(events, date).slice().sort((a, b) => Number(b.allDay ?? false) - Number(a.allDay ?? false))\n              const visibleEvents = dayEvents.slice(0, MAX_TILES_PER_CELL)\n              const overflowCount = dayEvents.length - visibleEvents.length\n\n              return (\n                <button\n                  key={date.toISOString()}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  aria-label={`${format(date, 'yyyy-MM-dd')},${dayEvents.length} 個事件`}\n              onClick={() => onDateClick?.(date)}\n              className={cn(\n                'flex flex-col gap-1 min-h-28 p-1.5 text-left',\n                'border-r border-b border-divider last:border-r-0',\n                '[&:nth-child(7n)]:border-r-0',\n                'hover:bg-neutral-hover transition-colors',\n                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n                !inMonth && 'bg-muted',\n              )}\n            >\n              {/* Date number header */}\n              <div className=\"flex items-start justify-end\">\n                {isToday ? (\n                  <span className=\"inline-flex items-center justify-center min-w-6 h-6 px-2 rounded-full bg-primary text-on-emphasis text-body font-medium\">\n                    {format(date, 'd')}\n                  </span>\n                ) : (\n                  <span\n                    className={cn(\n                      'text-body font-medium',\n                      !inMonth && 'text-fg-disabled',\n                    )}\n                  >\n                    {format(date, 'd')}\n                  </span>\n                )}\n              </div>\n\n              {/* Event tiles */}\n              <div className=\"flex flex-col gap-0.5 min-h-0\">\n                {visibleEvents.map((event) => {\n                  const ec = event.color ?? 'blue'\n                  // 2026-06-01 allDay:淡底 + 左 accent 條 + medium = 「全天長條」視覺(區分有時間事件)\n                  const colorClass = event.allDay\n                    ? cn(EVENT_COLOR_CLASSES[ec], EVENT_ALLDAY_ACCENT[ec], 'font-medium')\n                    : EVENT_COLOR_CLASSES[ec]\n                  if (renderEventTile) {\n                    return (\n                      <div\n                        key={event.id}\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onEventClick?.(event)\n                        }}\n                      >\n                        {renderEventTile(event)}\n                      </div>\n                    )\n                  }\n                  return (\n                    <div\n                      key={event.id}\n                      role=\"button\"\n                      tabIndex={0}\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        onEventClick?.(event)\n                      }}\n                      onKeyDown={(e) => {\n                        if (e.key === 'Enter' || e.key === ' ') {\n                          e.preventDefault()\n                          onEventClick?.(event)\n                        }\n                      }}\n                      aria-label={`事件:${event.title}`}\n                      className={cn(\n                        'rounded-md px-1.5 py-0.5 text-caption truncate cursor-pointer transition-colors',\n                        // 2026-05-31 #22:事件 tile 是 focusable(tabIndex=0 role=button)但原無 focus ring\n                        // → WCAG 2.4.7 不合規。補 focus-visible ring 對齊日期格按鈕。\n                        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n                        colorClass,\n                      )}\n                    >\n                      {event.title}\n                    </div>\n                  )\n                })}\n                {overflowCount > 0 && (\n                  <div className=\"text-caption text-fg-muted px-1.5\">\n                    +{overflowCount} more\n                  </div>\n                )}\n              </div>\n            </button>\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n})\nCalendar.displayName = \"Calendar\"\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 calendarMeta = {\n  component: 'Calendar',\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: ['bg-muted', 'bg-neutral-hover', 'bg-primary', 'bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport { Calendar }\n"],"names":["Calendar"],"mappings":"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"}

package/dist/components/ProgressBar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sources":["../../../src/components/ProgressBar/progress-bar.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 * as ProgressPrimitive from '@radix-ui/react-progress'\nimport { CircleCheck, XCircle } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\n/**\n * ProgressBar — 水平進度條(determinate)\n *\n * 世界級對照:Material `LinearProgress` / Ant `Progress` / Polaris `ProgressBar` /\n * shadcn `Progress`(皆為 Radix Progress primitive 的包裝)。本 DS 命名為\n * `ProgressBar`(linear)以和 `CircularProgress`(circular)做清楚區分。\n *\n * ── 與 CircularProgress 的分界 ──\n * CircularProgress = circular 兩態(indeterminate 旋轉 / determinate arc),inline 小空間\n * ProgressBar      = linear determinate(0-100% 已知量化),頁面級大區塊 / 表單 wizard / quota\n * 兩者視覺與語意都不同,consumer 依「形狀(linear / circular)+ 是否量化」擇一。\n *\n * ── 與 FileItem 的分界(2026-04-20 user 決策) ──\n * **檔案上傳 UI 走 `FileItem`,不直接消費 ProgressBar**。FileItem 是檔案上傳情境的\n * canonical consumer-facing primitive(檔名 / icon / 進度 / status / actions 一條龍);\n * FileItem 內部可能消費 ProgressBar(engineering 實作細節),consumer 不用也不該自己\n * 組合 raw ProgressBar + 檔名 + action 來做上傳列表。世界級對照:Ant Design 的 `Upload`\n * vs `Progress`(Upload.List 內部用 Progress,consumer 不直接用 Progress 做上傳 UI)。\n *\n * ── 3 狀態,單一 size ──\n * status: inProgress(進行中藍) / success(完成綠) / error(失敗紅)\n *   ^ 命名理由:`status` 是 lifecycle(在途 / 終態),不是視覺 emphasis 階。前身\n *   `primary` 會撞 Button `variant=\"primary\"`(emphasis 最高階),改用世界級\n *   lifecycle 慣例(Polaris `inProgress` / Ant Progress `active`)。\n *\n * **單一高度 4px**(2026-04-20 user 決策):對齊 Material 3 / Carbon / Ant 慣例\n * (固定 4dp/px 不給 size 選項)。4px 是 linear progress 的業界 canonical;若需\n * 視覺強調改用 CircularProgress + label 或改做 full-width hero 版型,不靠 size\n * 階梯撐。移除前的 sm(2)/ md(4)/ lg(6)刻度差太小,無實質視覺區分。\n *\n * ── affix(右側附加) ──\n * `affix=\"value\"` → 顯示 `{value}%` 文字\n * `affix=\"status-icon\"` → 顯示狀態 icon(success ✓ / error ✗;inProgress 時無 icon)\n * `affix={<custom />}` → consumer 客製\n * 不傳 → 純 bar\n */\n\nconst DEFAULT_TRACK_H = 4 // 預設 4px(見 docblock「單一高度」)\nconst STATUS_FILL = {\n  inProgress: 'bg-primary',\n  success: 'bg-success',\n  error: 'bg-error',\n} as const\nconst STATUS_ICON = {\n  success: { Icon: CircleCheck, className: 'text-success' },\n  error:   { Icon: XCircle,     className: 'text-error' },\n} as const\n\nexport interface ProgressBarProps extends Omit<React.ComponentProps<typeof ProgressPrimitive.Root>, 'value'> {\n  /** 當前進度 0-100 */\n  value: number\n  /** 狀態色(lifecycle,非 emphasis 階) */\n  status?: 'inProgress' | 'success' | 'error'\n  /** 右側附加 */\n  affix?: 'value' | 'status-icon' | React.ReactNode\n  /**\n   * Track 高度(px)override。**預設 4**(對齊 Material / Carbon / Ant canonical)。\n   *\n   * **非公開 size 階**——這不是給 consumer 自由選擇粗細的 API,而是給**內部另一個\n   * DS 元件(FileItem)在極密集 row layout 下壓低到 2px** 的逃生艙。Consumer 端\n   * 一律走預設 4px。未來若新 primitive(例如 health-bar 型 hero progress)需要\n   * 較高的 track,再評估是否擴公開 API。\n   *\n   * 世界級對照:Ant `<Progress>` 有 `strokeWidth` 原生 prop;本 DS 只暴露給內部\n   * 元件使用,不在 public API 宣傳,避免 consumer 重新陷入「選哪個 size」的判斷負擔。\n   */\n  height?: number\n}\n\nconst ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value,\n      status = 'inProgress',\n      affix,\n      height,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const clampedValue = Math.max(0, Math.min(100, value))\n    const fillColor = STATUS_FILL[status]\n    const trackH = height ?? DEFAULT_TRACK_H\n\n    // Affix 渲染\n    let affixNode: React.ReactNode = null\n    if (affix === 'value') {\n      affixNode = (\n        <span className=\"text-caption text-foreground tabular-nums shrink-0\">\n          {Math.round(clampedValue)}%\n        </span>\n      )\n    } else if (affix === 'status-icon') {\n      const s = status !== 'inProgress' ? STATUS_ICON[status] : null\n      if (s) affixNode = <s.Icon size={16} className={cn('shrink-0', s.className)} aria-hidden />\n    } else if (React.isValidElement(affix) || typeof affix === 'string' || typeof affix === 'number') {\n      affixNode = affix\n    }\n\n    const bar = (\n      <ProgressPrimitive.Root\n        ref={ref}\n        value={clampedValue}\n        max={100}\n        className={cn(\n          'relative overflow-hidden rounded-full bg-secondary w-full',\n          className,\n        )}\n        style={{ height: trackH }}\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          className={cn('h-full rounded-full transition-all duration-300', fillColor)}\n          style={{ width: `${clampedValue}%` }}\n        />\n      </ProgressPrimitive.Root>\n    )\n\n    if (!affixNode) return bar\n\n    return (\n      <div className=\"flex items-center gap-2 w-full\">\n        <div className=\"flex-1 min-w-0\">{bar}</div>\n        {affixNode}\n      </div>\n    )\n  },\n)\nProgressBar.displayName = 'ProgressBar'\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 progressBarMeta = {\n  component: 'ProgressBar',\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: ['bg-error', 'bg-primary', 'bg-secondary', 'bg-success'],\n    fg: ['text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { ProgressBar }\n"],"names":[],"mappings":";;;;;AA2CA,MAAM,kBAAkB;AACxB,MAAM,cAAc;AAAA,EAClB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,OAAO;AACT;AACA,MAAM,cAAc;AAAA,EAClB,SAAS,EAAE,MAAM,aAAa,WAAW,eAAA;AAAA,EACzC,OAAS,EAAE,MAAM,SAAa,WAAW,aAAA;AAC3C;AAuBA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC;AACrD,UAAM,YAAY,YAAY,MAAM;AACpC,UAAM,SAAS,UAAU;AAGzB,QAAI,YAA6B;AACjC,QAAI,UAAU,SAAS;AACrB,kBACE,qBAAC,QAAA,EAAK,WAAU,sDACb,UAAA;AAAA,QAAA,KAAK,MAAM,YAAY;AAAA,QAAE;AAAA,MAAA,GAC5B;AAAA,IAEJ,WAAW,UAAU,eAAe;AAClC,YAAM,IAAI,WAAW,eAAe,YAAY,MAAM,IAAI;AAC1D,UAAI,EAAG,aAAY,oBAAC,EAAE,MAAF,EAAO,MAAM,IAAI,WAAW,GAAG,YAAY,EAAE,SAAS,GAAG,eAAW,MAAC;AAAA,IAC3F,WAAW,MAAM,eAAe,KAAK,KAAK,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;AAChG,kBAAY;AAAA,IACd;AAEA,UAAM,MACJ;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,QAAQ,OAAA;AAAA,QAChB,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC,kBAAkB;AAAA,UAAlB;AAAA,YACC,WAAW,GAAG,mDAAmD,SAAS;AAAA,YAC1E,OAAO,EAAE,OAAO,GAAG,YAAY,IAAA;AAAA,UAAI;AAAA,QAAA;AAAA,MACrC;AAAA,IAAA;AAIJ,QAAI,CAAC,UAAW,QAAO;AAEvB,WACE,qBAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,kBAAkB,UAAA,KAAI;AAAA,MACpC;AAAA,IAAA,GACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAInB,MAAM,kBAAkB;AAAA,EAC7B,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,CAAC,YAAY,cAAc,gBAAgB,YAAY;AAAA,IAC3D,IAAI,CAAC,iBAAiB;AAAA,IACtB,MAAM,CAAA;AAAA,EAAC;AAEX;"}
+{"version":3,"file":"progress-bar.js","sources":["../../../src/components/ProgressBar/progress-bar.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 * as ProgressPrimitive from '@radix-ui/react-progress'\nimport { CircleCheck, XCircle } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\n/**\n * ProgressBar — 水平進度條(determinate)\n *\n * 世界級對照:Material `LinearProgress` / Ant `Progress` / Polaris `ProgressBar` /\n * shadcn `Progress`(皆為 Radix Progress primitive 的包裝)。本 DS 命名為\n * `ProgressBar`(linear)以和 `CircularProgress`(circular)做清楚區分。\n *\n * ── 與 CircularProgress 的分界 ──\n * CircularProgress = circular 兩態(indeterminate 旋轉 / determinate arc),inline 小空間\n * ProgressBar      = linear determinate(0-100% 已知量化),頁面級大區塊 / 表單 wizard / quota\n * 兩者視覺與語意都不同,consumer 依「形狀(linear / circular)+ 是否量化」擇一。\n *\n * ── 與 FileItem 的分界(2026-04-20 user 決策) ──\n * **檔案上傳 UI 走 `FileItem`,不直接消費 ProgressBar**。FileItem 是檔案上傳情境的\n * canonical consumer-facing primitive(檔名 / icon / 進度 / status / actions 一條龍);\n * FileItem 內部可能消費 ProgressBar(engineering 實作細節),consumer 不用也不該自己\n * 組合 raw ProgressBar + 檔名 + action 來做上傳列表。世界級對照:Ant Design 的 `Upload`\n * vs `Progress`(Upload.List 內部用 Progress,consumer 不直接用 Progress 做上傳 UI)。\n *\n * ── 3 狀態,單一 size ──\n * status: inProgress(進行中藍) / success(完成綠) / error(失敗 deep-orange,bg-error=--color-deep-orange-6)\n *   ^ 命名理由:`status` 是 lifecycle(在途 / 終態),不是視覺 emphasis 階。前身\n *   `primary` 會撞 Button `variant=\"primary\"`(emphasis 最高階),改用世界級\n *   lifecycle 慣例(Polaris `inProgress` / Ant Progress `active`)。\n *\n * **單一高度 4px**(2026-04-20 user 決策):對齊 Material 3 / Carbon / Ant 慣例\n * (固定 4dp/px 不給 size 選項)。4px 是 linear progress 的業界 canonical;若需\n * 視覺強調改用 CircularProgress + label 或改做 full-width hero 版型,不靠 size\n * 階梯撐。移除前的 sm(2)/ md(4)/ lg(6)刻度差太小,無實質視覺區分。\n *\n * ── affix(右側附加) ──\n * `affix=\"value\"` → 顯示 `{value}%` 文字\n * `affix=\"status-icon\"` → 顯示狀態 icon(success ✓ / error ✗;inProgress 時無 icon)\n * `affix={<custom />}` → consumer 客製\n * 不傳 → 純 bar\n */\n\nconst DEFAULT_TRACK_H = 4 // 預設 4px(見 docblock「單一高度」)\nconst STATUS_FILL = {\n  inProgress: 'bg-primary',\n  success: 'bg-success',\n  error: 'bg-error',\n} as const\nconst STATUS_ICON = {\n  success: { Icon: CircleCheck, className: 'text-success' },\n  error:   { Icon: XCircle,     className: 'text-error' },\n} as const\n\nexport interface ProgressBarProps extends Omit<React.ComponentProps<typeof ProgressPrimitive.Root>, 'value'> {\n  /** 當前進度 0-100 */\n  value: number\n  /** 狀態色(lifecycle,非 emphasis 階) */\n  status?: 'inProgress' | 'success' | 'error'\n  /** 右側附加 */\n  affix?: 'value' | 'status-icon' | React.ReactNode\n  /**\n   * Track 高度(px)override。**預設 4**(對齊 Material / Carbon / Ant canonical)。\n   *\n   * **非公開 size 階**——這不是給 consumer 自由選擇粗細的 API,而是給**內部另一個\n   * DS 元件(FileItem)在極密集 row layout 下壓低到 2px** 的逃生艙。Consumer 端\n   * 一律走預設 4px。未來若新 primitive(例如 health-bar 型 hero progress)需要\n   * 較高的 track,再評估是否擴公開 API。\n   *\n   * 世界級對照:Ant `<Progress>` 有 `strokeWidth` 原生 prop;本 DS 只暴露給內部\n   * 元件使用,不在 public API 宣傳,避免 consumer 重新陷入「選哪個 size」的判斷負擔。\n   */\n  height?: number\n}\n\nconst ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value,\n      status = 'inProgress',\n      affix,\n      height,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const clampedValue = Math.max(0, Math.min(100, value))\n    const fillColor = STATUS_FILL[status]\n    const trackH = height ?? DEFAULT_TRACK_H\n\n    // Affix 渲染\n    let affixNode: React.ReactNode = null\n    if (affix === 'value') {\n      affixNode = (\n        <span className=\"text-caption text-foreground tabular-nums shrink-0\">\n          {Math.round(clampedValue)}%\n        </span>\n      )\n    } else if (affix === 'status-icon') {\n      const s = status !== 'inProgress' ? STATUS_ICON[status] : null\n      if (s) affixNode = <s.Icon size={16} className={cn('shrink-0', s.className)} aria-hidden />\n    } else if (React.isValidElement(affix) || typeof affix === 'string' || typeof affix === 'number') {\n      affixNode = affix\n    }\n\n    const bar = (\n      <ProgressPrimitive.Root\n        ref={ref}\n        value={clampedValue}\n        max={100}\n        className={cn(\n          'relative overflow-hidden rounded-full bg-secondary w-full',\n          className,\n        )}\n        style={{ height: trackH }}\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          className={cn('h-full rounded-full transition-all duration-300', fillColor)}\n          style={{ width: `${clampedValue}%` }}\n        />\n      </ProgressPrimitive.Root>\n    )\n\n    if (!affixNode) return bar\n\n    return (\n      <div className=\"flex items-center gap-2 w-full\">\n        <div className=\"flex-1 min-w-0\">{bar}</div>\n        {affixNode}\n      </div>\n    )\n  },\n)\nProgressBar.displayName = 'ProgressBar'\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 progressBarMeta = {\n  component: 'ProgressBar',\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: ['bg-error', 'bg-primary', 'bg-secondary', 'bg-success'],\n    fg: ['text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { ProgressBar }\n"],"names":[],"mappings":";;;;;AA2CA,MAAM,kBAAkB;AACxB,MAAM,cAAc;AAAA,EAClB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,OAAO;AACT;AACA,MAAM,cAAc;AAAA,EAClB,SAAS,EAAE,MAAM,aAAa,WAAW,eAAA;AAAA,EACzC,OAAS,EAAE,MAAM,SAAa,WAAW,aAAA;AAC3C;AAuBA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC;AACrD,UAAM,YAAY,YAAY,MAAM;AACpC,UAAM,SAAS,UAAU;AAGzB,QAAI,YAA6B;AACjC,QAAI,UAAU,SAAS;AACrB,kBACE,qBAAC,QAAA,EAAK,WAAU,sDACb,UAAA;AAAA,QAAA,KAAK,MAAM,YAAY;AAAA,QAAE;AAAA,MAAA,GAC5B;AAAA,IAEJ,WAAW,UAAU,eAAe;AAClC,YAAM,IAAI,WAAW,eAAe,YAAY,MAAM,IAAI;AAC1D,UAAI,EAAG,aAAY,oBAAC,EAAE,MAAF,EAAO,MAAM,IAAI,WAAW,GAAG,YAAY,EAAE,SAAS,GAAG,eAAW,MAAC;AAAA,IAC3F,WAAW,MAAM,eAAe,KAAK,KAAK,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;AAChG,kBAAY;AAAA,IACd;AAEA,UAAM,MACJ;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,QAAQ,OAAA;AAAA,QAChB,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC,kBAAkB;AAAA,UAAlB;AAAA,YACC,WAAW,GAAG,mDAAmD,SAAS;AAAA,YAC1E,OAAO,EAAE,OAAO,GAAG,YAAY,IAAA;AAAA,UAAI;AAAA,QAAA;AAAA,MACrC;AAAA,IAAA;AAIJ,QAAI,CAAC,UAAW,QAAO;AAEvB,WACE,qBAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,kBAAkB,UAAA,KAAI;AAAA,MACpC;AAAA,IAAA,GACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAInB,MAAM,kBAAkB;AAAA,EAC7B,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,CAAC,YAAY,cAAc,gBAAgB,YAAY;AAAA,IAC3D,IAAI,CAAC,iBAAiB;AAAA,IACtB,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/Tag/tag.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import type { LucideIcon } from "lucide-react";
 declare const tagVariants: (props?: ({
-    color?: "blue" | "green" | "indigo" | "magenta" | "purple" | "red" | "turquoise" | "yellow" | "neutral" | null | undefined;
+    color?: "blue" | "green" | "indigo" | "lime" | "magenta" | "orange" | "purple" | "red" | "turquoise" | "yellow" | "neutral" | "deep-orange" | "amber" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TagProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'prefix' | 'color'>, VariantProps<typeof tagVariants> {
@@ -12,7 +12,7 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'pr
     avatar?: React.ReactNode;
     /** 可移除——Tag 自動渲染 dismiss 按鈕並控制尺寸與互動樣式 */
     onDismiss?: () => void;
-    /** 深底白字模式（step-6 背景 + 白色前景，warning 例外） */
+    /** 深底模式（step-6 背景 + on-emphasis 配對前景;亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark,green 白字例外） */
     solid?: boolean;
     /**
      * 2026-05-15 Q3 真 SSOT fix(per user verbatim「同空間兩判斷點」+「不要冰山一角」):
@@ -29,31 +29,43 @@ export declare const tagMeta: {
     readonly family: 3;
     readonly variants: {
         readonly neutral: {
-            readonly purpose: "通用分類、草稿、無特定語義";
+            readonly purpose: "通用分類、草稿、無特定語義(secondary 底)";
         };
         readonly blue: {
-            readonly purpose: "進行中、資訊提示、active 狀態（對應 --info）";
-        };
-        readonly red: {
-            readonly purpose: "錯誤、已封鎖、危險（對應 --error）";
+            readonly purpose: "categorical 色相(--color-blue-*)";
         };
         readonly green: {
-            readonly purpose: "成功、已完成、已核准（對應 --success）";
+            readonly purpose: "categorical 色相(--color-green-*)";
+        };
+        readonly 'deep-orange': {
+            readonly purpose: "categorical 色相(--color-deep-orange-*,hue 38)";
         };
         readonly yellow: {
-            readonly purpose: "警告、待審核、注意（對應 --warning）";
+            readonly purpose: "categorical 色相(--color-yellow-*,淺底深字)";
+        };
+        readonly red: {
+            readonly purpose: "categorical 色相(--color-red-*,品牌紅家族 hue 25;≠ 語意 --error)";
+        };
+        readonly orange: {
+            readonly purpose: "categorical 色相(--color-orange-*)";
+        };
+        readonly amber: {
+            readonly purpose: "categorical 色相(--color-amber-*,淺底深字)";
+        };
+        readonly lime: {
+            readonly purpose: "categorical 色相(--color-lime-*)";
         };
         readonly turquoise: {
-            readonly purpose: "分類色（無固定語義）";
+            readonly purpose: "categorical 色相(--color-turquoise-*)";
+        };
+        readonly indigo: {
+            readonly purpose: "categorical 色相(--color-indigo-*)";
         };
         readonly purple: {
-            readonly purpose: "分類色（無固定語義）";
+            readonly purpose: "categorical 色相(--color-purple-*)";
         };
         readonly magenta: {
-            readonly purpose: "分類色（無固定語義）";
-        };
-        readonly indigo: {
-            readonly purpose: "分類色（無固定語義）";
+            readonly purpose: "categorical 色相(--color-magenta-*)";
         };
     };
     readonly sizes: {

package/dist/components/Tag/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAuB9C,QAAA,MAAM,WAAW;;;8EA4BhB,CAAA;AAiBD,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,EACpE,YAAY,CAAC,OAAO,WAAW,CAAC;IAClC,qDAAqD;IACrD,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAyHD,QAAA,MAAM,GAAG,iFAAuD,CAAA;AAKhE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCV,CAAA;AAEV,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAwB9C,QAAA,MAAM,WAAW;;;8EAuBhB,CAAA;AAWD,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,EACpE,YAAY,CAAC,OAAO,WAAW,CAAC;IAClC,qDAAqD;IACrD,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,2GAA2G;IAC3G,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAkHD,QAAA,MAAM,GAAG,iFAAuD,CAAA;AAKhE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCV,CAAA;AAEV,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/Tag/tag.js

@@ -5,6 +5,7 @@ import { X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/tooltip.js";
 import { ItemInlineActionButton } from "../../patterns/element-anatomy/item-anatomy.js";
+import { CAT_SUBTLE, CAT_SOLID, CAT_INTERACT } from "../../tokens/categorical-color.js";
 let _measureCtx = null;
 function getMeasureCtx() {
   if (!_measureCtx) _measureCtx = document.createElement("canvas").getContext("2d");
@@ -14,18 +15,13 @@ const tagVariants = cva(
   "inline-flex items-center rounded-md border border-transparent transition-colors cursor-text",
   {
     variants: {
+      // color：categorical 色相(裝飾性分類,非語意狀態)。**消費 categorical-color SSOT**——
+      // key X 一律對 `--color-X-*`(1:1,零 offset)。neutral 非色相(無 hue),用 secondary 底自處理。
+      // 2026-06-04 修:原 `red` 誤接 `--color-deep-orange-*`(red=品牌紅 hue-25 ≠ deep-orange hue-38
+      // ≠ 語意 --error〔= deep-orange〕);改消費 SSOT 後 red→`--color-red-*`,並補齊全 12 色相。
       color: {
-        // 直接引用 primitive（bg=step-1, text=step-7），不經過語義層
-        // step-1 在 dark mode 用 alpha 公式，step-7 用 lighter 公式——兩個 mode 都正確
         neutral: "bg-secondary text-foreground",
-        blue: "bg-[var(--color-blue-1)] text-[var(--color-blue-7)]",
-        red: "bg-[var(--color-deep-orange-1)] text-[var(--color-deep-orange-7)]",
-        green: "bg-[var(--color-green-1)] text-[var(--color-green-7)]",
-        yellow: "bg-[var(--color-yellow-1)] text-[var(--color-yellow-7)]",
-        turquoise: "bg-[var(--color-turquoise-1)] text-[var(--color-turquoise-7)]",
-        purple: "bg-[var(--color-purple-1)] text-[var(--color-purple-7)]",
-        magenta: "bg-[var(--color-magenta-1)] text-[var(--color-magenta-7)]",
-        indigo: "bg-[var(--color-indigo-1)] text-[var(--color-indigo-7)]"
+        ...CAT_SUBTLE
       },
       size: {
         sm: "h-5 px-1 text-caption font-medium",
@@ -41,25 +37,11 @@ const tagVariants = cva(
 );
 const SOLID_CLASSES = {
   neutral: "bg-[var(--color-neutral-9)] text-inverse-fg",
-  blue: "bg-[var(--color-blue-6)] text-on-emphasis",
-  red: "bg-[var(--color-deep-orange-6)] text-on-emphasis",
-  green: "bg-[var(--color-green-6)] text-on-emphasis",
-  yellow: "bg-[var(--color-yellow-6)] text-[var(--warning-foreground)]",
-  turquoise: "bg-[var(--color-turquoise-6)] text-on-emphasis",
-  purple: "bg-[var(--color-purple-6)] text-on-emphasis",
-  magenta: "bg-[var(--color-magenta-6)] text-on-emphasis",
-  indigo: "bg-[var(--color-indigo-6)] text-on-emphasis"
+  ...CAT_SOLID
 };
 const SOLID_DISMISS_HOVER = {
   neutral: { hover: "var(--inverse-neutral-hover)", active: "var(--inverse-neutral-active)" },
-  blue: { hover: "var(--blue-hover)", active: "var(--blue-active)" },
-  red: { hover: "var(--red-hover)", active: "var(--red-active)" },
-  green: { hover: "var(--green-hover)", active: "var(--green-active)" },
-  yellow: { hover: "var(--yellow-hover)", active: "var(--yellow-active)" },
-  turquoise: { hover: "var(--turquoise-hover)", active: "var(--turquoise-active)" },
-  purple: { hover: "var(--purple-hover)", active: "var(--purple-active)" },
-  magenta: { hover: "var(--magenta-hover)", active: "var(--magenta-active)" },
-  indigo: { hover: "var(--indigo-hover)", active: "var(--indigo-active)" }
+  ...CAT_INTERACT
 };
 function TagDismiss({ onDismiss, label, solid, color }) {
   const solidColors = solid && color ? SOLID_DISMISS_HOVER[color] : void 0;
@@ -139,16 +121,24 @@ Tag.displayName = "Tag";
 const tagMeta = {
   component: "Tag",
   family: 3,
+  // categorical 色相(裝飾性分類,非語意狀態)。**1:1 對 `--color-{hue}-*` primitive,零 offset**。
+  // 不對應語意 token——語意狀態(error/info/success/warning)走 Notice / Alert 等狀態元件,
+  // 不是 Tag 色相。2026-06-04 修:移除原「red 對應 --error / blue 對應 --info ...」誤導框架
+  // (red = 品牌紅 hue-25,跟語意 --error〔= deep-orange〕無關)。
   variants: {
-    neutral: { purpose: "通用分類、草稿、無特定語義" },
-    blue: { purpose: "進行中、資訊提示、active 狀態（對應 --info）" },
-    red: { purpose: "錯誤、已封鎖、危險（對應 --error）" },
-    green: { purpose: "成功、已完成、已核准（對應 --success）" },
-    yellow: { purpose: "警告、待審核、注意（對應 --warning）" },
-    turquoise: { purpose: "分類色（無固定語義）" },
-    purple: { purpose: "分類色（無固定語義）" },
-    magenta: { purpose: "分類色（無固定語義）" },
-    indigo: { purpose: "分類色（無固定語義）" }
+    neutral: { purpose: "通用分類、草稿、無特定語義(secondary 底)" },
+    blue: { purpose: "categorical 色相(--color-blue-*)" },
+    green: { purpose: "categorical 色相(--color-green-*)" },
+    "deep-orange": { purpose: "categorical 色相(--color-deep-orange-*,hue 38)" },
+    yellow: { purpose: "categorical 色相(--color-yellow-*,淺底深字)" },
+    red: { purpose: "categorical 色相(--color-red-*,品牌紅家族 hue 25;≠ 語意 --error)" },
+    orange: { purpose: "categorical 色相(--color-orange-*)" },
+    amber: { purpose: "categorical 色相(--color-amber-*,淺底深字)" },
+    lime: { purpose: "categorical 色相(--color-lime-*)" },
+    turquoise: { purpose: "categorical 色相(--color-turquoise-*)" },
+    indigo: { purpose: "categorical 色相(--color-indigo-*)" },
+    purple: { purpose: "categorical 色相(--color-purple-*)" },
+    magenta: { purpose: "categorical 色相(--color-magenta-*)" }
   },
   sizes: {
     // Tag 尺寸不引用 field-height token（spec.md:180/241——Tag 與 Field 尺寸獨立）。

package/dist/components/Tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sources":["../../../src/components/Tag/tag.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\nimport type { LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Tooltip, TooltipTrigger, TooltipContent } from \"@/design-system/components/Tooltip/tooltip\"\nimport { ItemInlineActionButton } from \"@/design-system/patterns/element-anatomy/item-anatomy\"\n\n// ── Tag（inline label）─────────────────────────────────────────────────────\n// 用於分類標籤、狀態標記、多選已選值。\n//\n// 三種尺寸（子元件補齊原則——消費端直接透傳 size，不做 mapping）：\n//   sm — 20px 高, 12px 字, 4px tag-px, font-medium（配 field sm）\n//   md — 24px 高, 14px 字, 4px tag-px, font-normal（配 field md）— 預設\n//   lg — 24px = md alias（配 field lg，子元件補齊原則）\n//\n// 截斷：max-w-40（160px），超出時文字 truncate + 自動 tooltip。\n// 用 Canvas measureText 偵測截斷（scrollWidth 在 flex 內不可靠）。\n\nlet _measureCtx: CanvasRenderingContext2D | null = null\nfunction getMeasureCtx() {\n  if (!_measureCtx) _measureCtx = document.createElement('canvas').getContext('2d')\n  return _measureCtx\n}\n\nconst tagVariants = cva(\n  \"inline-flex items-center rounded-md border border-transparent transition-colors cursor-text\",\n  {\n    variants: {\n      color: {\n        // 直接引用 primitive（bg=step-1, text=step-7），不經過語義層\n        // step-1 在 dark mode 用 alpha 公式，step-7 用 lighter 公式——兩個 mode 都正確\n        neutral:   \"bg-secondary text-foreground\",\n        blue:      \"bg-[var(--color-blue-1)] text-[var(--color-blue-7)]\",\n        red:       \"bg-[var(--color-deep-orange-1)] text-[var(--color-deep-orange-7)]\",\n        green:     \"bg-[var(--color-green-1)] text-[var(--color-green-7)]\",\n        yellow:    \"bg-[var(--color-yellow-1)] text-[var(--color-yellow-7)]\",\n        turquoise: \"bg-[var(--color-turquoise-1)] text-[var(--color-turquoise-7)]\",\n        purple:    \"bg-[var(--color-purple-1)] text-[var(--color-purple-7)]\",\n        magenta:   \"bg-[var(--color-magenta-1)] text-[var(--color-magenta-7)]\",\n        indigo:    \"bg-[var(--color-indigo-1)] text-[var(--color-indigo-7)]\",\n      },\n      size: {\n        sm: \"h-5 px-1 text-caption font-medium\",\n        md: \"h-6 px-1 text-body font-normal\",\n        lg: \"h-6 px-1 text-body font-normal\",\n      },\n    },\n    defaultVariants: {\n      color: \"neutral\",\n      size: \"md\",\n    },\n  }\n)\n\n// ── Solid variant 色彩（step-6 底 + 白字，warning 用 --warning-foreground）──\n// 直接引用 primitive step-6，不經過語義層\n// neutral 用 neutral-9 + --inverse-fg（light=白字, dark=深字，自動反轉）\nconst SOLID_CLASSES: Record<string, string> = {\n  neutral:   'bg-[var(--color-neutral-9)] text-inverse-fg',\n  blue:      'bg-[var(--color-blue-6)] text-on-emphasis',\n  red:       'bg-[var(--color-deep-orange-6)] text-on-emphasis',\n  green:     'bg-[var(--color-green-6)] text-on-emphasis',\n  yellow:    'bg-[var(--color-yellow-6)] text-[var(--warning-foreground)]',\n  turquoise: 'bg-[var(--color-turquoise-6)] text-on-emphasis',\n  purple:    'bg-[var(--color-purple-6)] text-on-emphasis',\n  magenta:   'bg-[var(--color-magenta-6)] text-on-emphasis',\n  indigo:    'bg-[var(--color-indigo-6)] text-on-emphasis',\n}\n\nexport interface TagProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'prefix' | 'color'>,\n    VariantProps<typeof tagVariants> {\n  /** 左側 icon（LucideIcon），由 Tag 統一 16px。與 avatar 互斥。 */\n  icon?: LucideIcon\n  /** 左側 avatar（ReactNode），與 icon 互斥。 */\n  avatar?: React.ReactNode\n  /** 可移除——Tag 自動渲染 dismiss 按鈕並控制尺寸與互動樣式 */\n  onDismiss?: () => void\n  /** 深底白字模式（step-6 背景 + 白色前景，warning 例外） */\n  solid?: boolean\n  /**\n   * 2026-05-15 Q3 真 SSOT fix(per user verbatim「同空間兩判斷點」+「不要冰山一角」):\n   * Tag 寬度由 parent constrain,不套預設 max-w-40(160px)。用於 cell-as-input narrow cell\n   * (< 160px)時 Tag fit cell 寬度 + truncate ellipsis,而非 160px 後被 cell `overflow-hidden`\n   * 硬切。對齊「同 cell width → 同 overflow 判斷」SSOT。Default false 保 backward compat\n   * (wrap layout / pill rail 等仍受 160px 保護)。\n   */\n  unbounded?: boolean\n}\n\n// ── Solid dismiss hover/active bg ──\n// 用 semantic --{hue}-hover/active token，跟 --primary-hover/active 同模式：\n// solid 色彩 shade change（hover 較亮 step、active 較暗 step），跟 Button 等\n// 互動元件視覺一致。在 semantic 層做 dark mode swap 確保方向跨 mode 一致。\n// neutral 特例：bg 是 neutral-9 隨 mode 反轉，用 --inverse-neutral-* 鏡射\nconst SOLID_DISMISS_HOVER: Record<string, { hover: string; active: string }> = {\n  neutral:   { hover: 'var(--inverse-neutral-hover)', active: 'var(--inverse-neutral-active)' },\n  blue:      { hover: 'var(--blue-hover)',            active: 'var(--blue-active)' },\n  red:       { hover: 'var(--red-hover)',             active: 'var(--red-active)' },\n  green:     { hover: 'var(--green-hover)',           active: 'var(--green-active)' },\n  yellow:    { hover: 'var(--yellow-hover)',          active: 'var(--yellow-active)' },\n  turquoise: { hover: 'var(--turquoise-hover)',       active: 'var(--turquoise-active)' },\n  purple:    { hover: 'var(--purple-hover)',          active: 'var(--purple-active)' },\n  magenta:   { hover: 'var(--magenta-hover)',         active: 'var(--magenta-active)' },\n  indigo:    { hover: 'var(--indigo-hover)',          active: 'var(--indigo-active)' },\n}\n\n// ── Dismiss（internal）────────────────────────────────────────────────────\n// 走 `ItemInlineActionButton`(item-anatomy SSOT)+ `hoverBgClassName` override prop\n// (2026-05-01 整合,消除原 Tag 自刻 `<button>` 繞 DS infra 的 tech debt)。\n//\n// 視覺對齊:`size=\"md\"` → icon 16 / hover-bg 18,跟 Tag 既有手刻幾何完全相等。\n// Solid variant(blue/green/red 等)透過 `hoverBgClassName` 套色相 override token;\n// Subtle variant 落用 ItemInlineActionButton 預設 neutral-hover。\n// 圖標色繼承 Tag 文字色 → `text-current` 三態覆寫。\n\nfunction TagDismiss({ onDismiss, label, solid, color }: { onDismiss: () => void; label: string; solid?: boolean; color?: string }) {\n  const solidColors = solid && color ? SOLID_DISMISS_HOVER[color] : undefined\n\n  return (\n    <ItemInlineActionButton\n      icon={X}\n      size=\"md\"\n      onClick={(e) => { e.stopPropagation(); onDismiss() }}\n      aria-label={`移除 ${label}`}\n      style={solidColors ? ({ '--dismiss-hover': solidColors.hover, '--dismiss-active': solidColors.active } as React.CSSProperties) : undefined}\n      hoverBgClassName={\n        solidColors\n          ? 'group-hover/action:bg-[var(--dismiss-hover)] group-active/action:bg-[var(--dismiss-active)]'\n          : undefined\n      }\n      // Override default fg-muted → 繼承 Tag 文字色(label 同色)\n      className=\"text-current hover:text-current active:text-current\"\n    />\n  )\n}\n\nfunction TagInner(\n  { className, color, size, icon: Icon, avatar, onDismiss, solid, unbounded = false, children, style, ...props }: TagProps,\n  forwardedRef: React.ForwardedRef<HTMLDivElement>,\n) {\n  const solidClass = solid ? SOLID_CLASSES[color ?? 'neutral'] : undefined\n  const ownRef = React.useRef<HTMLDivElement | null>(null)\n  const [isTruncated, setIsTruncated] = React.useState(false)\n\n  React.useLayoutEffect(() => {\n    const el = ownRef.current\n    if (!el) return\n    const ctx = getMeasureCtx()\n    const check = () => {\n      const textSpan = el.querySelector('[data-tag-text]')\n      if (!textSpan || !ctx) return\n      const text = textSpan.textContent || ''\n      const cs = getComputedStyle(textSpan)\n      ctx.font = `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`\n      const textWidth = ctx.measureText(text).width\n      const padL = parseFloat(cs.paddingLeft) || 0\n      const padR = parseFloat(cs.paddingRight) || 0\n      const needed = textWidth + padL + padR\n      setIsTruncated(needed > (textSpan as HTMLElement).clientWidth + 1)\n    }\n    check()\n    const obs = new ResizeObserver(check)\n    obs.observe(el)\n    return () => obs.disconnect()\n  }, [children])\n\n  const label = typeof children === 'string' ? children : ''\n\n  const tag = (\n    <div\n      ref={(el) => {\n        ownRef.current = el\n        if (typeof forwardedRef === 'function') forwardedRef(el)\n        else if (forwardedRef) (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = el\n      }}\n      data-tag-root=\"\"\n      className={cn(tagVariants({ color, size }), solidClass, 'w-fit min-w-0 overflow-hidden', className)}\n      // 2026-05-18 Round 5 fix(per Codex M31 Round 5 verdict + user 拍板「那就開始做」):\n      // 用 CSS var `--combobox-tag-area-inline-size`(由 Combobox useOverflowCount JS-injected)取代\n      // `min(100%, 10rem)` cyclic percentage。CSS Sizing 3 §5.2.1:percentage 在 indefinite containing\n      // block 退化為 initial value → Round 4 的 100% 沒 enforce。改 explicit px 值(JS measured)避此 trap。\n      // unbounded=true:cap = inject 寬(回 cell-as-input narrow cell 原 behavior)\n      // default:cap = min(inject 寬, 160px)— 兩 cap 取小。fallback(無 var,Form context 等)= 100% / 10rem。\n      style={{\n        maxWidth: unbounded\n          ? 'var(--combobox-tag-area-inline-size, 100%)'\n          : 'min(var(--combobox-tag-area-inline-size, 10rem), 10rem)',\n        ...style,\n      }}\n      {...props}\n    >\n      {Icon && <Icon size={16} aria-hidden />}\n      {avatar && <span className=\"shrink-0 w-4 h-4 rounded-full overflow-hidden inline-grid place-content-center [&>*]:w-full [&>*]:h-full\">{avatar}</span>}\n      <span data-tag-text=\"\" className=\"px-1 truncate min-w-0\">{children}</span>\n      {onDismiss && <TagDismiss onDismiss={onDismiss} label={label} solid={solid} color={color ?? 'neutral'} />}\n    </div>\n  )\n\n  if (!isTruncated) return tag\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{tag}</TooltipTrigger>\n      <TooltipContent>{children}</TooltipContent>\n    </Tooltip>\n  )\n}\n\nconst Tag = React.forwardRef<HTMLDivElement, TagProps>(TagInner)\nTag.displayName = 'Tag'\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 tagMeta = {\n  component: 'Tag',\n  family: 3,\n  variants: {\n    neutral: { purpose: '通用分類、草稿、無特定語義' },\n    blue: { purpose: '進行中、資訊提示、active 狀態（對應 --info）' },\n    red: { purpose: '錯誤、已封鎖、危險（對應 --error）' },\n    green: { purpose: '成功、已完成、已核准（對應 --success）' },\n    yellow: { purpose: '警告、待審核、注意（對應 --warning）' },\n    turquoise: { purpose: '分類色（無固定語義）' },\n    purple: { purpose: '分類色（無固定語義）' },\n    magenta: { purpose: '分類色（無固定語義）' },\n    indigo: { purpose: '分類色（無固定語義）' },\n  },\n  sizes: {\n    // Tag 尺寸不引用 field-height token（spec.md:180/241——Tag 與 Field 尺寸獨立）。\n    // height = Tag 自身高度（cva h-5/h-6/h-6 = 20/24/24，lg = md alias）。\n    // iconSize 全尺寸統一 16（tag.tsx:195 硬寫 size={16}）。\n    sm: { height: 20, iconSize: 16, typography: 'caption' },\n    md: { height: 24, iconSize: 16, typography: 'body' },\n    lg: { height: 24, iconSize: 16, typography: 'body' },\n  },\n  // Tag 為純展示 indicator，無互動 state（spec.md:249-256「為何無 StateBehavior」）。\n  // 唯一行為 dismiss 屬 Inline Action pattern，非 Tag 自有 state。\n  states: ['default'],\n  tokens: {\n    bg: ['bg-neutral-active', 'bg-neutral-hover', 'bg-secondary', 'bg-transparent'],\n    fg: ['text-foreground', 'text-inverse-fg'],\n    ring: [],\n  },\n  defaultVariant: 'neutral',\n  defaultSize: 'md',\n} as const\n\nexport { Tag, tagVariants }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tag.js","sources":["../../../src/components/Tag/tag.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\nimport type { LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Tooltip, TooltipTrigger, TooltipContent } from \"@/design-system/components/Tooltip/tooltip\"\nimport { ItemInlineActionButton } from \"@/design-system/patterns/element-anatomy/item-anatomy\"\nimport { CAT_SUBTLE, CAT_SOLID, CAT_INTERACT } from \"@/design-system/tokens/categorical-color\"\n\n// ── Tag（inline label）─────────────────────────────────────────────────────\n// 用於分類標籤、狀態標記、多選已選值。\n//\n// 三種尺寸（子元件補齊原則——消費端直接透傳 size，不做 mapping）：\n//   sm — 20px 高, 12px 字, 4px tag-px, font-medium（配 field sm）\n//   md — 24px 高, 14px 字, 4px tag-px, font-normal（配 field md）— 預設\n//   lg — 24px = md alias（配 field lg，子元件補齊原則）\n//\n// 截斷：max-w-40（160px），超出時文字 truncate + 自動 tooltip。\n// 用 Canvas measureText 偵測截斷（scrollWidth 在 flex 內不可靠）。\n\nlet _measureCtx: CanvasRenderingContext2D | null = null\nfunction getMeasureCtx() {\n  if (!_measureCtx) _measureCtx = document.createElement('canvas').getContext('2d')\n  return _measureCtx\n}\n\nconst tagVariants = cva(\n  \"inline-flex items-center rounded-md border border-transparent transition-colors cursor-text\",\n  {\n    variants: {\n      // color：categorical 色相(裝飾性分類,非語意狀態)。**消費 categorical-color SSOT**——\n      // key X 一律對 `--color-X-*`(1:1,零 offset)。neutral 非色相(無 hue),用 secondary 底自處理。\n      // 2026-06-04 修:原 `red` 誤接 `--color-deep-orange-*`(red=品牌紅 hue-25 ≠ deep-orange hue-38\n      // ≠ 語意 --error〔= deep-orange〕);改消費 SSOT 後 red→`--color-red-*`,並補齊全 12 色相。\n      color: {\n        neutral: \"bg-secondary text-foreground\",\n        ...CAT_SUBTLE,\n      },\n      size: {\n        sm: \"h-5 px-1 text-caption font-medium\",\n        md: \"h-6 px-1 text-body font-normal\",\n        lg: \"h-6 px-1 text-body font-normal\",\n      },\n    },\n    defaultVariants: {\n      color: \"neutral\",\n      size: \"md\",\n    },\n  }\n)\n\n// ── Solid variant 色彩（step-6 底 + on-emphasis 配對文字,消費 categorical-color SSOT）──\n// 白字 --on-emphasis(夠深的 hue)/ 深字 --on-emphasis-dark(亮 hue:yellow/amber/orange/lime);green 白字例外。\n// **消費 categorical-color SSOT**(CAT_SOLID,1:1 色相)。neutral 非色相,用 neutral-9\n// + --inverse-fg（light=白字, dark=深字，自動反轉）自處理。\nconst SOLID_CLASSES: Record<string, string> = {\n  neutral: 'bg-[var(--color-neutral-9)] text-inverse-fg',\n  ...CAT_SOLID,\n}\n\nexport interface TagProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'prefix' | 'color'>,\n    VariantProps<typeof tagVariants> {\n  /** 左側 icon（LucideIcon），由 Tag 統一 16px。與 avatar 互斥。 */\n  icon?: LucideIcon\n  /** 左側 avatar（ReactNode），與 icon 互斥。 */\n  avatar?: React.ReactNode\n  /** 可移除——Tag 自動渲染 dismiss 按鈕並控制尺寸與互動樣式 */\n  onDismiss?: () => void\n  /** 深底模式（step-6 背景 + on-emphasis 配對前景;亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark,green 白字例外） */\n  solid?: boolean\n  /**\n   * 2026-05-15 Q3 真 SSOT fix(per user verbatim「同空間兩判斷點」+「不要冰山一角」):\n   * Tag 寬度由 parent constrain,不套預設 max-w-40(160px)。用於 cell-as-input narrow cell\n   * (< 160px)時 Tag fit cell 寬度 + truncate ellipsis,而非 160px 後被 cell `overflow-hidden`\n   * 硬切。對齊「同 cell width → 同 overflow 判斷」SSOT。Default false 保 backward compat\n   * (wrap layout / pill rail 等仍受 160px 保護)。\n   */\n  unbounded?: boolean\n}\n\n// ── Solid dismiss hover/active bg ──\n// **消費 categorical-color SSOT**(CAT_INTERACT,semantic --{hue}-hover/active token),\n// 跟 --primary-hover/active 同模式:solid 色彩 shade change(hover 較亮 step、active 較暗 step),\n// 在 semantic 層做 dark mode swap 確保方向跨 mode 一致。\n// neutral 特例:bg 是 neutral-9 隨 mode 反轉,用 --inverse-neutral-* 鏡射,自處理。\nconst SOLID_DISMISS_HOVER: Record<string, { hover: string; active: string }> = {\n  neutral: { hover: 'var(--inverse-neutral-hover)', active: 'var(--inverse-neutral-active)' },\n  ...CAT_INTERACT,\n}\n\n// ── Dismiss（internal）────────────────────────────────────────────────────\n// 走 `ItemInlineActionButton`(item-anatomy SSOT)+ `hoverBgClassName` override prop\n// (2026-05-01 整合,消除原 Tag 自刻 `<button>` 繞 DS infra 的 tech debt)。\n//\n// 視覺對齊:`size=\"md\"` → icon 16 / hover-bg 18,跟 Tag 既有手刻幾何完全相等。\n// Solid variant(blue/green/red 等)透過 `hoverBgClassName` 套色相 override token;\n// Subtle variant 落用 ItemInlineActionButton 預設 neutral-hover。\n// 圖標色繼承 Tag 文字色 → `text-current` 三態覆寫。\n\nfunction TagDismiss({ onDismiss, label, solid, color }: { onDismiss: () => void; label: string; solid?: boolean; color?: string }) {\n  const solidColors = solid && color ? SOLID_DISMISS_HOVER[color] : undefined\n\n  return (\n    <ItemInlineActionButton\n      icon={X}\n      size=\"md\"\n      onClick={(e) => { e.stopPropagation(); onDismiss() }}\n      aria-label={`移除 ${label}`}\n      style={solidColors ? ({ '--dismiss-hover': solidColors.hover, '--dismiss-active': solidColors.active } as React.CSSProperties) : undefined}\n      hoverBgClassName={\n        solidColors\n          ? 'group-hover/action:bg-[var(--dismiss-hover)] group-active/action:bg-[var(--dismiss-active)]'\n          : undefined\n      }\n      // Override default fg-muted → 繼承 Tag 文字色(label 同色)\n      className=\"text-current hover:text-current active:text-current\"\n    />\n  )\n}\n\nfunction TagInner(\n  { className, color, size, icon: Icon, avatar, onDismiss, solid, unbounded = false, children, style, ...props }: TagProps,\n  forwardedRef: React.ForwardedRef<HTMLDivElement>,\n) {\n  const solidClass = solid ? SOLID_CLASSES[color ?? 'neutral'] : undefined\n  const ownRef = React.useRef<HTMLDivElement | null>(null)\n  const [isTruncated, setIsTruncated] = React.useState(false)\n\n  React.useLayoutEffect(() => {\n    const el = ownRef.current\n    if (!el) return\n    const ctx = getMeasureCtx()\n    const check = () => {\n      const textSpan = el.querySelector('[data-tag-text]')\n      if (!textSpan || !ctx) return\n      const text = textSpan.textContent || ''\n      const cs = getComputedStyle(textSpan)\n      ctx.font = `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`\n      const textWidth = ctx.measureText(text).width\n      const padL = parseFloat(cs.paddingLeft) || 0\n      const padR = parseFloat(cs.paddingRight) || 0\n      const needed = textWidth + padL + padR\n      setIsTruncated(needed > (textSpan as HTMLElement).clientWidth + 1)\n    }\n    check()\n    const obs = new ResizeObserver(check)\n    obs.observe(el)\n    return () => obs.disconnect()\n  }, [children])\n\n  const label = typeof children === 'string' ? children : ''\n\n  const tag = (\n    <div\n      ref={(el) => {\n        ownRef.current = el\n        if (typeof forwardedRef === 'function') forwardedRef(el)\n        else if (forwardedRef) (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = el\n      }}\n      data-tag-root=\"\"\n      className={cn(tagVariants({ color, size }), solidClass, 'w-fit min-w-0 overflow-hidden', className)}\n      // 2026-05-18 Round 5 fix(per Codex M31 Round 5 verdict + user 拍板「那就開始做」):\n      // 用 CSS var `--combobox-tag-area-inline-size`(由 Combobox useOverflowCount JS-injected)取代\n      // `min(100%, 10rem)` cyclic percentage。CSS Sizing 3 §5.2.1:percentage 在 indefinite containing\n      // block 退化為 initial value → Round 4 的 100% 沒 enforce。改 explicit px 值(JS measured)避此 trap。\n      // unbounded=true:cap = inject 寬(回 cell-as-input narrow cell 原 behavior)\n      // default:cap = min(inject 寬, 160px)— 兩 cap 取小。fallback(無 var,Form context 等)= 100% / 10rem。\n      style={{\n        maxWidth: unbounded\n          ? 'var(--combobox-tag-area-inline-size, 100%)'\n          : 'min(var(--combobox-tag-area-inline-size, 10rem), 10rem)',\n        ...style,\n      }}\n      {...props}\n    >\n      {Icon && <Icon size={16} aria-hidden />}\n      {avatar && <span className=\"shrink-0 w-4 h-4 rounded-full overflow-hidden inline-grid place-content-center [&>*]:w-full [&>*]:h-full\">{avatar}</span>}\n      <span data-tag-text=\"\" className=\"px-1 truncate min-w-0\">{children}</span>\n      {onDismiss && <TagDismiss onDismiss={onDismiss} label={label} solid={solid} color={color ?? 'neutral'} />}\n    </div>\n  )\n\n  if (!isTruncated) return tag\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{tag}</TooltipTrigger>\n      <TooltipContent>{children}</TooltipContent>\n    </Tooltip>\n  )\n}\n\nconst Tag = React.forwardRef<HTMLDivElement, TagProps>(TagInner)\nTag.displayName = 'Tag'\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 tagMeta = {\n  component: 'Tag',\n  family: 3,\n  // categorical 色相(裝飾性分類,非語意狀態)。**1:1 對 `--color-{hue}-*` primitive,零 offset**。\n  // 不對應語意 token——語意狀態(error/info/success/warning)走 Notice / Alert 等狀態元件,\n  // 不是 Tag 色相。2026-06-04 修:移除原「red 對應 --error / blue 對應 --info ...」誤導框架\n  // (red = 品牌紅 hue-25,跟語意 --error〔= deep-orange〕無關)。\n  variants: {\n    neutral: { purpose: '通用分類、草稿、無特定語義(secondary 底)' },\n    blue: { purpose: 'categorical 色相(--color-blue-*)' },\n    green: { purpose: 'categorical 色相(--color-green-*)' },\n    'deep-orange': { purpose: 'categorical 色相(--color-deep-orange-*,hue 38)' },\n    yellow: { purpose: 'categorical 色相(--color-yellow-*,淺底深字)' },\n    red: { purpose: 'categorical 色相(--color-red-*,品牌紅家族 hue 25;≠ 語意 --error)' },\n    orange: { purpose: 'categorical 色相(--color-orange-*)' },\n    amber: { purpose: 'categorical 色相(--color-amber-*,淺底深字)' },\n    lime: { purpose: 'categorical 色相(--color-lime-*)' },\n    turquoise: { purpose: 'categorical 色相(--color-turquoise-*)' },\n    indigo: { purpose: 'categorical 色相(--color-indigo-*)' },\n    purple: { purpose: 'categorical 色相(--color-purple-*)' },\n    magenta: { purpose: 'categorical 色相(--color-magenta-*)' },\n  },\n  sizes: {\n    // Tag 尺寸不引用 field-height token（spec.md:180/241——Tag 與 Field 尺寸獨立）。\n    // height = Tag 自身高度（cva h-5/h-6/h-6 = 20/24/24，lg = md alias）。\n    // iconSize 全尺寸統一 16（tag.tsx:195 硬寫 size={16}）。\n    sm: { height: 20, iconSize: 16, typography: 'caption' },\n    md: { height: 24, iconSize: 16, typography: 'body' },\n    lg: { height: 24, iconSize: 16, typography: 'body' },\n  },\n  // Tag 為純展示 indicator，無互動 state（spec.md:249-256「為何無 StateBehavior」）。\n  // 唯一行為 dismiss 屬 Inline Action pattern，非 Tag 自有 state。\n  states: ['default'],\n  tokens: {\n    bg: ['bg-neutral-active', 'bg-neutral-hover', 'bg-secondary', 'bg-transparent'],\n    fg: ['text-foreground', 'text-inverse-fg'],\n    ring: [],\n  },\n  defaultVariant: 'neutral',\n  defaultSize: 'md',\n} as const\n\nexport { Tag, tagVariants }\n"],"names":[],"mappings":"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"}

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAiF5C;;;;;;;;GAQG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAkF5C;;;;;;;;GAQG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/utils.js

@@ -32,7 +32,9 @@ const twMerge = extendTailwindMerge({
         "text-fg-disabled",
         "text-inverse-fg",
         "text-on-emphasis",
-        // 白字於飽和色底(Avatar color variants / Steps filled indicator)
+        // 白字於夠深的飽和色底(Avatar / Tag solid / Steps filled indicator)
+        "text-on-emphasis-dark",
+        // 深字於太亮的飽和色底(yellow/amber/orange/lime solid;原 warning-foreground)
         // Status 基色(base)
         "text-primary",
         "text-error",

package/dist/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\n/**\n * 擴充 tailwind-merge,讓它認識設計系統的自訂 typography 與 text-color utilities。\n *\n * 預設 tailwind-merge 看到 `text-{xxx}` 自訂 class 會用 heuristic 猜它是 font-size\n * 還是 color——猜錯就會把不該放在同一組的 class 誤判為衝突,然後 strip 掉其中一個。\n *\n * 實際發生過的 bug:`text-body`(font-size 14px)和 `text-fg-secondary`(color)\n * 被同時放進 font-size group,tailwind-merge 把 `text-body` 吃掉,導致元件\n * inherit 父層 16px,description 永遠跟 label 同字級。\n *\n * 修法:**font-size group 和 text-color group 都明確列舉**,不留猜測空間。\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [\n        'text-h1', 'text-h2', 'text-h3', 'text-h4', 'text-h5', 'text-h6',\n        'text-body-lg', 'text-body', 'text-caption', 'text-footnote',\n      ],\n      // 自訂 text-color utilities(對應 semantic.css 的 `@theme inline --color-*` bridge)。\n      //\n      // 任何新增的 text-{semantic-name} color utility 都必須在這裡登記,否則\n      // tailwind-merge 會誤判成 font-size 與 typography 衝突(歷史 bug:\n      // text-body + text-fg-secondary 被 strip)。\n      //\n      // 完整家族對齊 semantic.css: 5 狀態色(primary/error/success/warning/info)\n      // × 3 互動階(base/hover/active)+ text(on-subtle-bg)+ subtle(含 primary)\n      // + notification(紅 badge)+ neutral foreground 四階。\n      'text-color': [\n        // Neutral foreground 家族\n        'text-foreground',\n        'text-fg-secondary',\n        'text-fg-muted',\n        'text-fg-disabled',\n        'text-inverse-fg',\n        'text-on-emphasis',  // 白字於飽和色底(Avatar color variants / Steps filled indicator)\n\n        // Status 基色(base)\n        'text-primary',\n        'text-error',\n        'text-success',\n        'text-warning',\n        'text-info',\n        'text-notification',\n\n        // Status 互動階(hover / active)\n        'text-primary-hover',\n        'text-primary-active',\n        'text-error-hover',\n        'text-error-active',\n        'text-success-hover',\n        'text-success-active',\n        'text-warning-hover',\n        'text-warning-active',\n        'text-info-hover',\n        'text-info-active',\n\n        // on-subtle-bg 版本(深色文字配淺色底)\n        'text-primary-text',\n        'text-error-text',\n        'text-success-text',\n        'text-warning-text',\n        'text-info-text',\n\n        // Subtle 文字(少用,保持完整家族一致)\n        'text-primary-subtle',\n        'text-error-subtle',\n        'text-success-subtle',\n        'text-warning-subtle',\n        'text-info-subtle',\n      ],\n      // Custom opacity utility(對應 tokens/opacity/opacity.css `@utility opacity-disabled`)。\n      // 不註冊 group → tailwind-merge 用 default opacity-N heuristic,可能誤判 class 衝突。\n      'opacity': ['opacity-disabled'],\n    },\n  },\n})\n\n/**\n * cn() — Tailwind class 合併工具\n *\n * 用法：\n *   cn(\"px-4 py-2\", isActive && \"bg-primary\", className)\n *\n * 原理：clsx 處理條件式 class，twMerge 解決 Tailwind class 衝突\n * 例如 cn(\"px-4\", \"px-2\") → \"px-2\"（後者優先）\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"names":[],"mappings":";;AAeA,MAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa;AAAA,QACX;AAAA,QAAW;AAAA,QAAW;AAAA,QAAW;AAAA,QAAW;AAAA,QAAW;AAAA,QACvD;AAAA,QAAgB;AAAA,QAAa;AAAA,QAAgB;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAW/C,cAAc;AAAA;AAAA,QAEZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA;AAAA;AAAA,MAIF,WAAW,CAAC,kBAAkB;AAAA,IAAA;AAAA,EAChC;AAEJ,CAAC;AAWM,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;"}
+{"version":3,"file":"utils.js","sources":["../../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\n/**\n * 擴充 tailwind-merge,讓它認識設計系統的自訂 typography 與 text-color utilities。\n *\n * 預設 tailwind-merge 看到 `text-{xxx}` 自訂 class 會用 heuristic 猜它是 font-size\n * 還是 color——猜錯就會把不該放在同一組的 class 誤判為衝突,然後 strip 掉其中一個。\n *\n * 實際發生過的 bug:`text-body`(font-size 14px)和 `text-fg-secondary`(color)\n * 被同時放進 font-size group,tailwind-merge 把 `text-body` 吃掉,導致元件\n * inherit 父層 16px,description 永遠跟 label 同字級。\n *\n * 修法:**font-size group 和 text-color group 都明確列舉**,不留猜測空間。\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [\n        'text-h1', 'text-h2', 'text-h3', 'text-h4', 'text-h5', 'text-h6',\n        'text-body-lg', 'text-body', 'text-caption', 'text-footnote',\n      ],\n      // 自訂 text-color utilities(對應 semantic.css 的 `@theme inline --color-*` bridge)。\n      //\n      // 任何新增的 text-{semantic-name} color utility 都必須在這裡登記,否則\n      // tailwind-merge 會誤判成 font-size 與 typography 衝突(歷史 bug:\n      // text-body + text-fg-secondary 被 strip)。\n      //\n      // 完整家族對齊 semantic.css: 5 狀態色(primary/error/success/warning/info)\n      // × 3 互動階(base/hover/active)+ text(on-subtle-bg)+ subtle(含 primary)\n      // + notification(紅 badge)+ neutral foreground 四階。\n      'text-color': [\n        // Neutral foreground 家族\n        'text-foreground',\n        'text-fg-secondary',\n        'text-fg-muted',\n        'text-fg-disabled',\n        'text-inverse-fg',\n        'text-on-emphasis',       // 白字於夠深的飽和色底(Avatar / Tag solid / Steps filled indicator)\n        'text-on-emphasis-dark',  // 深字於太亮的飽和色底(yellow/amber/orange/lime solid;原 warning-foreground)\n\n        // Status 基色(base)\n        'text-primary',\n        'text-error',\n        'text-success',\n        'text-warning',\n        'text-info',\n        'text-notification',\n\n        // Status 互動階(hover / active)\n        'text-primary-hover',\n        'text-primary-active',\n        'text-error-hover',\n        'text-error-active',\n        'text-success-hover',\n        'text-success-active',\n        'text-warning-hover',\n        'text-warning-active',\n        'text-info-hover',\n        'text-info-active',\n\n        // on-subtle-bg 版本(深色文字配淺色底)\n        'text-primary-text',\n        'text-error-text',\n        'text-success-text',\n        'text-warning-text',\n        'text-info-text',\n\n        // Subtle 文字(少用,保持完整家族一致)\n        'text-primary-subtle',\n        'text-error-subtle',\n        'text-success-subtle',\n        'text-warning-subtle',\n        'text-info-subtle',\n      ],\n      // Custom opacity utility(對應 tokens/opacity/opacity.css `@utility opacity-disabled`)。\n      // 不註冊 group → tailwind-merge 用 default opacity-N heuristic,可能誤判 class 衝突。\n      'opacity': ['opacity-disabled'],\n    },\n  },\n})\n\n/**\n * cn() — Tailwind class 合併工具\n *\n * 用法：\n *   cn(\"px-4 py-2\", isActive && \"bg-primary\", className)\n *\n * 原理：clsx 處理條件式 class，twMerge 解決 Tailwind class 衝突\n * 例如 cn(\"px-4\", \"px-2\") → \"px-2\"（後者優先）\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"names":[],"mappings":";;AAeA,MAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa;AAAA,QACX;AAAA,QAAW;AAAA,QAAW;AAAA,QAAW;AAAA,QAAW;AAAA,QAAW;AAAA,QACvD;AAAA,QAAgB;AAAA,QAAa;AAAA,QAAgB;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAW/C,cAAc;AAAA;AAAA,QAEZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QACA;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA;AAAA;AAAA,MAIF,WAAW,CAAC,kBAAkB;AAAA,IAAA;AAAA,EAChC;AAEJ,CAAC;AAWM,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;"}

package/dist/tokens/categorical-color.d.ts

@@ -0,0 +1,60 @@
+/**
+ * categorical-color.ts — Categorical 色相 SSOT(2026-06-04 codify)
+ *
+ * Tag / Avatar / Calendar 等「以色相做分類標籤」的元件,色彩 variant **一律消費此 SSOT**。
+ * 目的:**variant 名 == primitive 色相名,1:1,零 offset** —— 根治「red variant 接到 deep-orange」
+ * 這類 categorical-vs-semantic 混淆(2026-06-04 user 抓:red = 品牌紅 hue-25〔--brand #DF3232 同族〕
+ * ≠ deep-orange hue-38 ≠ semantic --error〔= deep-orange〕。三者完全無關)。
+ *
+ * 世界級對照:
+ * - Ant Design Tag preset colors —— 用原始色相名(red/orange/green/blue…)做 categorical labeling
+ *   (https://ant.design/components/tag/)。本 DS Tag/Avatar 採此模型。
+ * - Atlassian Color 原則 —— **categorical(裝飾)色 vs semantic(狀態)色必須分離**
+ *   (https://atlassian.design/foundations/color):categorical `red` 用 `--color-red-*`,跟 semantic
+ *   `--error`(= deep-orange)無關;把 error 色拿來當 categorical 標籤 = 反 pattern。
+ *
+ * ⚠️ Tailwind v4 掃描限制:class 字串**必須以字面形式出現在被掃描的 source**(本檔在 src/,會被掃),
+ * 不可用 runtime function 拼字串(否則 `bg-[var(--color-orange-1)]` 不被生成 → silent 失效)。
+ * 故本 SSOT 以**字面 const map** 提供;consumer `import` 後索引(cva 列 key 取值,保 VariantProps 型別)。
+ *
+ * 互動 state(solid dismiss hover/active)用 semantic `--{hue}-hover` / `--{hue}-active`
+ * (dark-mode 方向 pre-computed,**不可**用 primitive step-5,否則 dark mode 反向)。12 色相皆已定義。
+ *
+ * **加色相**:加進 `CATEGORICAL_HUES` + 下列 5 個 map 各補一行字面值(key X 用 `--color-X-*`,1:1)。
+ * **機械防線**:`check_categorical_color_1to1.sh` 強制 map 的 key X 的值含 `--color-X-`(名實一致,禁 offset)。
+ */
+/** 12 個 categorical 色相(順序對齊 primitives.css / Storybook color token 列)。 */
+export declare const CATEGORICAL_HUES: readonly ["blue", "green", "deep-orange", "yellow", "red", "orange", "amber", "lime", "turquoise", "indigo", "purple", "magenta"];
+export type CategoricalHue = (typeof CATEGORICAL_HUES)[number];
+/** neutral 不是色相(無 hue),用 secondary/foreground + neutral-9 solid,各 consumer 自處理(不在下列 map)。 */
+export type CategoricalColor = CategoricalHue | 'neutral';
+/** subtle 模式 class:step-1 底 + step-7 字。key X 一律對 `--color-X-*`(1:1)。 */
+export declare const CAT_SUBTLE: Record<CategoricalHue, string>;
+/**
+ * solid 模式 class:step-6 底 + on-emphasis 配對文字。
+ * 文字色依「step-6 底亮度」分桶(WCAG ≥3:1 大粗字門檻,2026-06-04 user「以最低為原則」):
+ *   - 夠深的色底 → `text-on-emphasis`(白):blue / deep-orange / red / turquoise / indigo / purple / magenta
+ *   - 太亮的色底 → `text-on-emphasis-dark`(深):yellow / amber / orange / lime(白字連 3:1 都不過)
+ *   - ★ green 例外:白字 2.47 連 3:1 都不過,但 user 拍板維持白字(綠底白字慣見觀感)= documented exception。
+ * 對比為 oklch→相對亮度實測(scripts/categorical-color-invariants.mjs 機械驗,green 列 exempt)。
+ */
+export declare const CAT_SOLID: Record<CategoricalHue, string>;
+/** solid 互動(dismiss hover/active)— semantic dark-mode-aware token。 */
+export declare const CAT_INTERACT: Record<CategoricalHue, {
+    hover: string;
+    active: string;
+}>;
+/** Avatar style 物件用:subtle / solid 的 raw token { bg, text }(非 class)。 */
+export declare const CAT_SUBTLE_TOKENS: Record<CategoricalHue, {
+    bg: string;
+    text: string;
+}>;
+export declare const CAT_SOLID_TOKENS: Record<CategoricalHue, {
+    bg: string;
+    text: string;
+}>;
+/** Calendar event tile:subtle 底 + hover step-2(1:1)。 */
+export declare const CAT_EVENT: Record<CategoricalHue, string>;
+/** Calendar all-day accent:左側 step-6 實心條。 */
+export declare const CAT_ACCENT: Record<CategoricalHue, string>;
+//# sourceMappingURL=categorical-color.d.ts.map

package/dist/tokens/categorical-color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"categorical-color.d.ts","sourceRoot":"","sources":["../../src/tokens/categorical-color.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,mIAanB,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D,6FAA6F;AAC7F,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,SAAS,CAAA;AAEzD,wEAAwE;AACxE,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAarD,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAapD,CAAA;AAED,sEAAsE;AACtE,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,cAAc,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAalF,CAAA;AAED,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,cAAc,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAalF,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,cAAc,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAajF,CAAA;AAED,wDAAwD;AACxD,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAapD,CAAA;AAED,6CAA6C;AAC7C,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAarD,CAAA"}