@qijenchen/design-system 0.1.0-beta.64 → 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/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);