@qijenchen/design-system 0.1.0-beta.63 → 0.1.0-beta.65

package/src/components/Tabs/tabs.tsx

@@ -157,7 +157,7 @@ const TabsList = React.forwardRef<
     <TabsContext.Provider value={tabsSizeContext}>
       <TabsPrimitive.List
         ref={ref}
-        className={cn(TABS_LIST_BASE, 'w-fit', className)}
+        className={cn(TABS_LIST_BASE, 'w-full', className)}
         {...props}
       >
         {children}
@@ -213,7 +213,7 @@ const ScrollTabsList = React.forwardRef<
       >
         <TabsPrimitive.List
           ref={ref}
-          className={cn(TABS_LIST_BASE, 'w-fit', className)}
+          className={cn(TABS_LIST_BASE, 'min-w-full', className)}
           {...props}
         >
           {children}
@@ -309,7 +309,7 @@ const MenuTabsList = React.forwardRef<
       >
         <TabsPrimitive.List
           ref={ref}
-          className={cn(TABS_LIST_BASE, 'w-fit', className)}
+          className={cn(TABS_LIST_BASE, 'min-w-full', className)}
           {...props}
         >
           {enhancedChildren}
@@ -481,6 +481,12 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
+      // 與 TabsList 的間距 canonical(2026-06-12 user 拍板):--layout-space-tight(md 12px,
+      // density 連動)。依 layoutSpace.spec「親疏 3 級」:Tabs↔Content 同 bundle(第一級,
+      // 元件 spec own),值取規則 3「直接功能依賴 = tight」精神(heading → labeled content 同類)。
+      // 收斂原 DS-wide 四種土法(無間距 / mt-4 / p-4 / pt-4 — M17 假 SSOT)。
+      // full-height 佈局(AppShell pane)用 className="mt-0" 覆寫(tailwind-merge)。
+      'mt-[var(--layout-space-tight)]',
       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
       className
     )}

package/src/patterns/header-canonical/header-canonical.spec.md

@@ -69,7 +69,7 @@ benchmark:
 ### 4. Dismiss icon button(close X)
 
 - **Token**:`<Button iconOnly size="sm" dismiss />`(28px @ md / 32px @ lg)
-- **永遠 size="sm"**(不論家族 / density):chrome / overlay header 內 button 一律 sm
+- **永遠 size="sm"**(不論家族 / density):chrome / overlay header 內 button 一律 sm。**廣化(2026-06-12 user 拍板)**:header 內**所有 field-height 控件**(Button / Input / Select / SegmentedControl / Combobox 等)一律 `sm`,禁混雜不同 field height(Tabs 跟齊 chrome 高度,唯一例外 = 「Tabs 取代整個 header」的 standalone `size="lg"`,見上方表)
 - 對齊 既有 `dialog.tsx:132-153` + `sheet.tsx:122-139` + `popover.tsx:87-110`(Dialog/Sheet/Popover 已內建 close X)
 
 ### 4.5 Chrome header avatar SSOT(2026-05-21 codify per user directive)

package/src/styles/base.css

@@ -13,8 +13,15 @@
  *   @import '@qijenchen/design-system/styles/base';
  */
 
-/* lucide 全域 stroke width */
-.lucide {
+/* lucide 全域 stroke width — DS-wide icon 預設 1.75(比 lucide 原廠 2 輕一階的整體風格)。
+   ⚠️ 必須限定 [stroke-width="2"](= 沒被 component 顯式覆寫的 icon):
+   2026-06-12 修 — 原寫法 `.lucide { ... }` 無條件蓋掉所有 explicit strokeWidth prop
+   (CSS class > SVG presentation attribute),導致 Checkbox/Switch/Steps/PeoplePicker
+   的小尺寸 stroke 補償(strokeWidth 3 / 2.5)自 2026-04-08 起從未真正渲染
+   (rendered DOM 驗證:attr=3 但 computed=1.75px,實畫 0.80px vs 設計 1.50px)。
+   限定後:lucide 預設(attr=2)→ 1.75;顯式 prop(3 / 2.5 / 1.75)→ attribute 直接生效。
+   補償值 SSOT → .claude/references/ui-dev-rules.md「小尺寸 icon stroke 補償」 */
+.lucide[stroke-width='2'] {
   stroke-width: 1.75;
 }
 

package/src/tokens/color/color.spec.md

@@ -117,7 +117,7 @@ disabled 元件內的所有子元素必須呈現 disabled 狀態:
 
 | 策略 | 何時用 | 消費者 | 做法 |
 |---|---|---|---|
-| **灰階 token swap** | State 由形狀 / 位置 / icon / 文字 等**非顏色載體**承載,顏色只是美學 | Button、Checkbox、Input、Slider、Tag | 每個元素換到 disabled 對應的灰階 token(`bg-disabled` / `text-fg-disabled` / `border-fg-disabled` 等) |
+| **灰階 token swap** | State 由形狀 / 位置 / icon / 文字 等**非顏色載體**承載,顏色只是美學 | Button、Checkbox、Input、Slider、Tag | 每個元素換到 disabled 對應的灰階 token(`bg-disabled` / `text-fg-disabled` / `bg-border` 等) |
 | **`opacity-disabled`** | State **完全只靠顏色區分**(形狀在 on/off 之間沒有差異),灰階化會丟失 state 辨識 | **Switch** | Root 層套 `opacity-disabled`,保留原有顏色身分,透過透明度均勻降級 |
 
 **具體判準(寫新元件時問自己)**:
@@ -133,14 +133,16 @@ disabled 元件內的所有子元素必須呈現 disabled 狀態:
 
 ### Disabled 視覺階層公式(多元素元件參考)
 
-多元素互動元件(Slider、Progress、複合 Input 等)在 disabled 狀態常需要 3–4 階灰階深度來分層:
+多元素互動元件(Slider、Progress、複合 Input 等)在 disabled 狀態常需要 2–3 階灰階深度來分層:
 
 ```
-底層背景 (n-2)  <  中層填充 (n-5)  <  輪廓邊框 (n-6)  <  文字 (n-7+)
-bg-muted          bg-border         border-fg-disabled     text-fg-disabled
+底層背景 (n-2)  <  中層填充 / 輪廓 (n-5)        <  文字 (n-6)
+bg-muted          bg-border / border-border       text-fg-disabled
 ```
 
-每階至少差 1 個 primitive step,使用者掃視時才能分清四個層。Slider 的 disabled 就是這個公式:track(底)< range(填充)< thumb border(輪廓)< label(文字)。
+每階至少差 1 個 primitive step,使用者掃視時才能分清層次。Slider 的 disabled 就是這個公式:track(底,n-2)< range 填充 = thumb 邊框(n-5,**同色**——「Range 色 = Thumb border 色」invariant,thumb 邊框是 range 的視覺延續,不論 state 永遠同色,詳 slider.tsx 註解)< label 文字(n-6)。
+
+> 2026-06-12 修:本段原寫 4 階公式、輪廓層用 `border-fg-disabled`(n-6)、文字層標 n-7+——三者皆與 code 不符(`border-fg-disabled` 全 code 零使用且違反下方規則 3「border-* 一律從 border family 選」;`--fg-disabled` 實為 n-6;slider.tsx 的 range/thumb 邊框同色是刻意設計,曾踩 thumb 融入 track 的同色融色 bug)。對齊 code 真實。
 
 ### ⚠️ fg token 不可當 bg 用(跨 family 借用是 smell)
 

package/src/tokens/color/semantic.css

@@ -206,7 +206,11 @@
 
   /* Status: Info — 資訊狀態色
      目前指向 blue（與 primary 同源），但語義獨立——如未來 brand 改色，
-     primary 跟著改，info 仍維持「資訊=藍」的通用慣例 */
+     primary 跟著改，info 仍維持「資訊=藍」的通用慣例。
+     ⚠️ 選取控件(Checkbox/Switch/Radio/Calendar selected)的 checked 藍 = --primary 非 --info:
+     選取是「互動操作的 selected state」隨 brand 走(Material 3 CheckboxTokens
+     SelectedContainerColor=Primary / shadcn bg-primary / Ant colorPrimary 同款);
+     --info 只給資訊呈報(Alert/Badge/Toast info)。2026-06-12 codify per user 提問 */
   --info:                 var(--color-blue-6);
   --info-hover:           var(--color-blue-5);
   --info-active:          var(--color-blue-7);