元件

HHG Select（@hhg/ds-select）：HHG Design System 的 Select（trigger + 白底 menu）。形態乙：React + Tailwind v4 utility，從 components.css 的 .ds-select 族與 components.js 的 DS.initSelect 遷移，逐屬性等值驗收通過。v1.18.0 新增選單向上展開（自動翻轉 + forceDirection 覆寫，行為契約 SEL-O8–O13）與 groupLabel prop。⚠️ 本檔同時是 ds-combobox 的樣式與 hook 來源（cx／ROOT／TRIGGER／OPTION／useFlipDirection／useDismiss 皆由它匯出）。

HHG Button（@hhg/ds-button）：HHG Design System 的按鈕族（Button／IconButton／DashedButton）。形態乙：React + Tailwind v4 utility，從 components.css 的 .ds-btn 系＋.ds-btn-icon＋.ds-btn-sm＋.ds-dashed-btn 遷移，281,792 次 computed 屬性逐一比對、白名單外零差異。按鈕族無行為層（components.js 沒有對應的 init）。⚠️ 填色三變體（primary／danger／cta）的 hover/active 在 React 版統一成一條 OKLCH 明度式，與 vanilla 刻意不同。

import Button, { IconButton, DashedButton } from '@/components/hhg/button';

<Button variant="primary">主要動作</Button>
<Button variant="secondary" size="sm">退回</Button>   {/* dense 階，與 .ds-input-sm 同列 */}
<Button variant="danger" loading={sending}>刪除</Button>
<IconButton tone="on-dark" aria-label="編輯">✎</IconButton>  {/* 深色外框下 */}
<DashedButton>＋ 新增一列</DashedButton>
<Button as="a" variant="secondary" external href="…" target="_blank" rel="noopener noreferrer">
  開啟外部系統
</Button>

HHG Input（@hhg/ds-input）：HHG Design System 的 input 族（Input／Textarea／Field／FieldInline／RangeSep／Search）。涵蓋 components.css 的 input 族 26 條規則，365,568 次 computed 屬性比對、白名單 3 筆全部 platform。input 族無行為層。⚠️ 照搬 .ds-input:focus{outline:none}＝本族沒有可見的焦點環（庫層待拍板項，不在元件層修）。

HHG Badge（@hhg/ds-badge）：HHG Design System 的狀態標籤族（Badge／StatChip）。涵蓋 7 條規則，68,544 次 computed 屬性比對、白名單 1 筆。本族無行為層。⚠️ 五個 tone 的靜止態文字對比只有 slate 達 WCAG 4.5:1（庫層待拍板項，照搬不修）。

HHG Tabs（@hhg/ds-tabs）：HHG Design System 的頁籤族（Tabs／Tab）。涵蓋 6 條規則，159,936 次 computed 屬性比對、白名單 3 筆（含恆等式 --h-tab + 2×--ds-tabs-pad = --h-btn 的兩個 viewport 實測）。⚠️ value／defaultValue／onChange 是 React 版新增的便利層，不是遷移過來的行為（vanilla 的頁籤切換一直由採用端自己做）。

HHG Segmented（@hhg/ds-segmented）：HHG Design System 的分段控制族（Segmented／Seg／Pills／Pill）。涵蓋 14 條規則，144,704 次 computed 屬性比對、白名單 3 筆，另有 docs/behavior/segmented-pills.md 的 26 步行為契約逐步等值（52/52 通過）。⚠️ 守門（onGuardRequest）預設吃 globalThis.DS.guard；要用守門又沒載 components.js 的專案必須自己傳 onGuardRequest。

HHG Combobox（@hhg/ds-combobox）：HHG Design System 的 combobox 族（Combobox／Multicombo）。涵蓋 combobox 區 21 條 ＋ select 族沿用 23 條，1,148,112 次 computed 屬性比對、白名單 2 筆，另有 docs/behavior/combobox.md 的 82 條行為契約逐步核對（81/83 列通過）。⚠️ 樣式與 dismiss／翻轉 hook 共用 ds-select，不複製一份 —— 兩族在舊世界共用同一組 document listener。

HHG Table（@hhg/ds-table）：HHG Design System 的表格族（Table／TableCard／ScrollX／Thead／Tbody／Tr／Th／Td／CheckCell／Pagination／PageBtn／useStickyColShadow）。涵蓋 components.css 表格族 35 條規則（前綴計數的 19 條低估 84%），另有 docs/behavior/sticky-col.md 的 14 步行為契約逐步等值（14/14 兩側量測值逐字相同）。⚠️ 後代規則一律寫成掛在 <table> 根節點的 arbitrary variant，而 arbitrary variant 不吃 @media (hover: hover) ⇒ 列的 hover 已用 [@media(hover:hover)]: 補那層 media，不要改成內建 hover: 去組（specificity 會翻掉勾選列的階梯）。

HHG Dialog（@hhg/ds-dialog）：HHG Design System 的對話框族（Overlay／ConfirmDialog／TaskDialog／ViewDialog／DialogProvider／useDialogs／dialogs 模組層橋接／Drawer 六件套）。913,920 次 computed 屬性比對、白名單 8 筆全部 platform，另有 docs/behavior/dialog.md 的 46 步行為契約逐步等值（通過 45／不適用 1／未通過 0）＋邊界情境 6 條全過。⚠️ 照搬 vanilla 的立場：沒有 focus trap、沒有 scroll lock、沒有背景 inert。要升級無障礙性請另開拍板，不要換成 Radix Dialog。

HHG App Shell（@hhg/ds-appshell）：HHG Design System 的整頁框架族（AppShell／Side／Main／SideBrand／SideNav／NavItem／Acct／SideOverlay／SideToggle／useSideDrawer 等 23 個匯出）。涵蓋 components.css appshell 家族 61 條規則，另有 docs/behavior/appshell.md 的 26 步抽屜契約逐步等值（52/52 通過）。✅ v1.18.0 修掉 components.css 兩個 specificity bug：data-shell="plain" 的抽屜原本打不開、prefers-reduced-motion 對 plain 原本失效 —— 兩層已同步修好。⚠️ 刻意不渲染 .ds-side class，讓 React 抽屜與 components.js 的 DS.sideOpen 可以並存不互踩。

// components.json
{
  "registries": {
    "@hhg": {
      "url": "https://raw.githubusercontent.com/MIXXINtw/hhg-design-system/main/r/{name}.json",
      "headers": { "Authorization": "Bearer ${HHG_REGISTRY_TOKEN}" }
    }
  }
}

# token 放 .env.local（跟 Yu Anting 拿）
npx shadcn add @hhg/ds-select        # 安裝
npx shadcn add @hhg/ds-button        # 按鈕族
npx shadcn add @hhg/ds-select --diff # 看庫改了什麼（本地客製會被標出）
npx shadcn add @hhg/ds-select --overwrite   # 套用（--yes 不問）

import Select from '@/components/hhg/select';

<Select
  options={[{ value: 'shopee', label: '蝦皮', badge: '3' }]}
  value={value}
  onChange={e => setValue(e.value)}
  placeholder="請選擇來源通道"
  inField      // 欄位情境：吃 --h-input / --r-input 幾何
  invalid      // 錯誤態：邊框換 --red
/>

• 🔴 版本標記寫成程式碼（export const DS_VERSION），不寫檔頭註解——shadcn add 會刪掉第一個註解區塊。
• ⚠️ 不要用 git tag 抓 registry；消費方式是 npx shadcn add 讀 main 的 raw URL。
• ⚠️ 採用 Tailwind 前先稽核全域 CSS reset：一條 unlayered 的 * {margin:0;padding:0} 會吃掉全部 Tailwind 間距 utility， 且 build 零錯誤。

版面較寬的章節請用「新分頁開啟」。