@qijenchen/design-system 0.1.0-beta.80 → 0.1.0-beta.82

package/src/components/SelectMenu/select-menu.tsx

@@ -11,7 +11,7 @@ import { useControllable } from '@/design-system/hooks/use-controllable'
 import type { AvatarData } from '@/design-system/components/Avatar/avatar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/design-system/components/Popover/popover'
 import { Command, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from '@/design-system/components/Command/command'
-import { Command as CommandPrimitive } from 'cmdk'
+import { Command as CommandPrimitive, useCommandState } from 'cmdk'
 import { MenuItem, MenuFooter } from '@/design-system/components/Menu/menu-item'
 import { Empty } from '@/design-system/components/Empty/empty'
 import { CircularProgress } from '@/design-system/components/CircularProgress/circular-progress'
@@ -86,10 +86,13 @@ export interface SelectMenuProps {
   searchPlaceholder?: string
   /** 空選項提示 */
   emptyText?: string
-  /** Loading 狀態(2026-05-15 audit B fix per user verbatim「dropdown 隨時可開,讀取在 panel 中間 CircularProgress」)
-   *  true → render `<Empty icon={<CircularProgress size={48}/>} className="py-6" />` 取代 options(純 spinner,無 description);
-   *  trigger 不變,user 隨時可開 dropdown。對齊 MUI Autocomplete loading dropdown-body + Ant Select
-   *  loading idiom + DS 既有 `empty.spec.md:191` 「全頁 loading = Empty + CircularProgress compose」SSOT。
+  /** 多選 footer 全選列文字(2026-07-05 D4:原「全部」字面 hardcode,無法覆寫也無法 i18n) */
+  selectAllLabel?: string
+  /** Loading 狀態(2026-05-15 audit B fix;2026-07-04 Q3 拍板措辭修訂)
+   *  true → 無可顯示選項時 empty slot(cmdk CommandEmpty)渲 `<Empty icon={<CircularProgress size={48}/>} className="py-6" />`
+   *  (純 spinner,無 description);已有 options 時保留顯示不清空(MUI Autocomplete「only if there are
+   *  no suggestions」共識)。trigger 不變,user 隨時可開 dropdown。DS `empty.spec.md`「loading = Empty +
+   *  CircularProgress compose」SSOT。
    */
   loading?: boolean
 
@@ -124,6 +127,25 @@ export interface SelectMenuProps {
   className?: string
 }
 
+// ── SR live status(2026-07-05 D4:empty / loading 空狀態對 SR 不可感知修)──
+// cmdk CommandEmpty 渲染為 role="presentation" div、cmdk 全鏈無 aria-live,且 DOM focus 停在
+// combobox input(aria-activedescendant 虛擬焦點)→ SR 使用者搜尋到 0 結果或 loading 佔位時
+// 聽不到任何播報(loading spinner 的 CircularProgress 無 label 時更是 aria-hidden)。
+// 補 visually-hidden polite live region,鏡射 CommandEmpty 可見內容(cmdk Empty 只在
+// filtered.count === 0 渲染:loading → 載入文案;否則 → emptyText)。對齊 react-select A11yText /
+// APG combobox no-results 播報 + empty.spec.md「動態 filter no-results 容器需 aria-live="polite"」。
+// SSOT 放 SelectMenu 一處 → Select / Combobox / PeoplePicker 全體受益。
+function SelectMenuLiveStatus({ loading, emptyText }: { loading: boolean; emptyText: string }) {
+  const filteredCount = useCommandState((state) => state.filtered.count)
+  return (
+    <div role="status" aria-live="polite" className="sr-only">
+      {filteredCount === 0
+        ? (loading ? '載入中…' /* i18n-allow: DS default SR-only 播報文案 */ : emptyText)
+        : null}
+    </div>
+  )
+}
+
 // shadcn canonical:forwardRef + displayName 統一。SelectMenu 是 Popover + Command
 // composite,自身無 DOM host(trigger 由 consumer 以 asChild children 提供),ref 簽名
 // 保留但不附著(consumer 想取 trigger DOM 直接在 children 上自己 ref)。className 合併到
@@ -141,6 +163,7 @@ const SelectMenu = React.forwardRef<HTMLElement, SelectMenuProps>(function Selec
   children,
   searchPlaceholder = '搜尋…', // i18n-allow: DS default; consumer override via searchPlaceholder prop
   emptyText = '沒有符合的選項', // i18n-allow: DS default; consumer override via emptyText prop
+  selectAllLabel = '全部', // i18n-allow: DS default; consumer override via selectAllLabel prop
   loading = false,
   size = 'md',
   align = 'start',
@@ -177,6 +200,12 @@ const SelectMenu = React.forwardRef<HTMLElement, SelectMenuProps>(function Selec
     [selectedValues]
   )
 
+  // 2026-07-05 P2:單選已選 option — 供 cmdk defaultValue 定 cursor 起點(見下方 <Command>)
+  const selectedOption = React.useMemo(
+    () => (!multiple ? options.find((o) => o.value === selectedValues[0]) : undefined),
+    [multiple, options, selectedValues]
+  )
+
   const handleSelect = React.useCallback(
     (optionValue: string) => {
       if (multiple) {
@@ -316,7 +345,18 @@ const SelectMenu = React.forwardRef<HTMLElement, SelectMenuProps>(function Selec
           }
         }}
       >
-        <Command shouldFilter={searchable} className="bg-transparent">
+        <Command
+          shouldFilter={searchable}
+          // 2026-07-06 cursor 起點修:單選已有值時 cmdk virtual focus 落在已選項而非第一項。
+          // cmdk 1.1.1 初始 state 取 defaultValue、item mount 的 selectFirstItem 有
+          // `state.value ||` guard 不覆蓋(dist source 驗證);Popover 關閉即 unmount(無
+          // forceMount)→ 每次開啟 remount 重新生效。需搭配下方 CommandItem value={opt.value}。
+          defaultValue={selectedOption?.value}
+          // 2026-07-06 A11y:combobox accessible name — cmdk 永遠渲 sr-only <label htmlFor={inputId}>,
+          // 僅 searchable(真的有 input)時傳,避免 orphan label 指向不存在的 input id。
+          label={searchable ? searchPlaceholder : undefined}
+          className="bg-transparent"
+        >
           {searchable && (
             <div className={cn(
               'flex items-center gap-2 px-3 py-1 border-b border-divider',
@@ -343,7 +383,15 @@ const SelectMenu = React.forwardRef<HTMLElement, SelectMenuProps>(function Selec
               user 過濾出 < minRows 個 match 時 list 底下空一片(eg. 打 'c' 出 2 個 match
               卻撐高到 3 row 容量,1 row 留白)。 Fix:只有 empty state 才需要 minHeight 撐
               起 placeholder 視覺;有 results 時 CommandList 自然 fit content。 */}
-          <CommandList className="relative">
+          {/* aria-busy(2026-07-04):loading 時標注 listbox 忙碌——兌現 select.spec.md「Loading」段
+              「+ aria-busy」承諾(cmdk List 本身即 role="listbox" 容器,wrapper forward props)。 */}
+          <CommandList
+            className="relative"
+            aria-busy={loading || undefined}
+            // 2026-07-06 A11y:cmdk List 的 aria-label 由其 `label` prop 渲染(內部 spread 後 override,
+            // 直接傳 aria-label 會被 cmdk default "Suggestions" 蓋掉 silent 失效)— 必走 label prop。
+            label="選項" // i18n-allow: DS default; listbox accessible name
+          >
             <CommandEmpty
               className="flex items-center justify-center"
               style={{ minHeight: getMenuListMinHeight(size, minRows) }}
@@ -356,18 +404,35 @@ const SelectMenu = React.forwardRef<HTMLElement, SelectMenuProps>(function Selec
             {groupedOptions.map((group, gi) => (
               <React.Fragment key={group.key}>
                 {gi > 0 && <CommandSeparator />}
-                <CommandGroup className="p-0 py-2">
-                  {group.label && (
-                    <MenuItem size={size} header>{group.label}</MenuItem>
-                  )}
+                <CommandGroup
+                  className="p-0 py-2 [&_[cmdk-group-heading]]:p-0"
+                  // 2026-07-06 A11y:群組標題走 cmdk `heading`(自動產 cmdk-group-heading id,選項容器
+                  // role="group" + aria-labelledby 指向之)取代手刻 child row(原本 AT 不可感知;
+                  // aria-label fallback 對 role="presentation" group 無效)。[&_[cmdk-group-heading]]:p-0
+                  // 中和 command.tsx base 的 px-3 py-1.5(tailwind-merge p-0 勝);字級 / 顏色由 MenuItem
+                  // header 自帶(text-body leading-compact + font-medium + text-fg-muted),視覺不變。
+                  heading={group.label ? <MenuItem size={size} header>{group.label}</MenuItem> : undefined}
+                >
                   {group.options.map((opt) => (
                     <CommandItem
                       key={opt.value}
-                      value={opt.label}
-                      keywords={opt.description ? [opt.description] : undefined}
+                      // 2026-07-06 識別值修:cmdk 以 value 當 item identity + selection state。原用
+                      // opt.label → 重複 label 時雙亮 + Enter 選錯;改唯一的 opt.value,label 移入
+                      // keywords 保搜尋照樣命中(cmdk filter 對 value + keywords 計分)。
+                      value={opt.value}
+                      keywords={opt.description ? [opt.label, opt.description] : [opt.label]}
                       disabled={opt.disabled}
                       onSelect={() => handleSelect(opt.value)}
-                      className="p-0 rounded-none data-[selected=true]:bg-transparent"
+                      // 2026-07-05 D4 P0 修:原 data-[selected=true]:bg-transparent 蓋掉 command.tsx base
+                      // 的 data-[selected=true]:bg-neutral-hover = cmdk virtual focus(aria-activedescendant)
+                      // 鍵盤 cursor 唯一視覺通道被抹掉 → 方向鍵移動畫面零變化(影響 Select/Combobox/PeoplePicker
+                      // 全家)。鏡射 DropdownMenu wrapper pattern:互動 bg 單一 owner 在外層 CommandItem
+                      //(base highlight 恢復;persistent selection 上移;selected×cursor 加深一階 —
+                      // 對齊本日 DropdownMenu Q2 決策),內層 MenuItem 全透明。
+                      className={cn(
+                        'p-0 rounded-none',
+                        !multiple && isSelected(opt.value) && 'bg-neutral-selected data-[selected=true]:bg-neutral-selected-active',
+                      )}
                     >
                       <MenuItem
                         size={size}
@@ -378,6 +443,13 @@ const SelectMenu = React.forwardRef<HTMLElement, SelectMenuProps>(function Selec
                         checked={isSelected(opt.value)}
                         selected={!multiple && isSelected(opt.value)}
                         disabled={opt.disabled}
+                        // 2026-07-05 D4:巢狀 role 修 — MenuItem 預設 role="option" + aria-selected(persistent
+                        // selection)巢狀在 cmdk CommandItem(本身 role="option" + aria-selected=cursor)內,
+                        // AT 讀到 option 包 option 且內外 aria-selected 語意相反 → 朗讀錯亂。鏡射 DropdownMenu
+                        // canonical(dropdown-menu.tsx「Pure visual — Radix parent handles role/aria」):
+                        // 內層純視覺 role="presentation",cmdk CommandItem 是唯一 option 節點。
+                        role="presentation"
+                        className="!bg-transparent hover:!bg-transparent"
                       >
                         {renderLabel ? renderLabel(opt) : opt.label}
                       </MenuItem>
@@ -393,14 +465,20 @@ const SelectMenu = React.forwardRef<HTMLElement, SelectMenuProps>(function Selec
                 <CommandSeparator />
                 <CommandGroup className="p-0 py-2">
                   <CommandItem
-                    value={search}
+                    // 2026-07-06:`__create__` 前綴防 identity 撞名 — 選項 row 改用 opt.value 識別後,
+                    // search 恰等於某 option.value 時裸 search 會與該 row 同 value(cmdk 雙亮 + Enter
+                    // 選錯)。value 含 search 子字串,cmdk filter 照樣命中;onSelect closure 讀 search
+                    // 不受影響。
+                    value={`__create__${search}`}
                     onSelect={() => {
                       onCreate?.(search.trim())
                       setSearch('')
                     }}
-                    className="p-0 rounded-none data-[selected=true]:bg-transparent"
+                    className="p-0 rounded-none"
                   >
-                    <MenuItem size={size} startIcon={Plus}>
+                    {/* 2026-07-05 D4:同上方選項 row 的巢狀 role 修 — creatable row 同樣是
+                        MenuItem 巢狀在 cmdk CommandItem(option)內,內層純視覺 role="presentation"。 */}
+                    <MenuItem size={size} startIcon={Plus} role="presentation" className="!bg-transparent hover:!bg-transparent">
                       {createLabel(search.trim())}
                     </MenuItem>
                   </CommandItem>
@@ -409,18 +487,38 @@ const SelectMenu = React.forwardRef<HTMLElement, SelectMenuProps>(function Selec
             )}
           </CommandList>
 
+          {/* SR 播報 empty / loading 空狀態(見 SelectMenuLiveStatus docblock,2026-07-05 D4) */}
+          <SelectMenuLiveStatus loading={loading} emptyText={emptyText} />
+
           {/* Multi-select footer: Select All
               - 沒有選項時不顯示(selectableOptions.length === 0)
               - 搜尋有文字時不顯示(search 非空 = 使用者在找特定項目,「全選」沒意義) */}
           {multiple && selectableOptions.length > 0 && !search && (
             <MenuFooter>
+              {/* 2026-07-05 D4:全選列鍵盤可達修 — 原裸 MenuItem(div 預設 role="option" 無 tabIndex)
+                  位於 CommandList 之外:cmdk 方向鍵只導覽 [cmdk-item]、Tab 也到不了 div → 鍵盤使用者
+                  完全無法操作全選(WCAG 2.1.1),且該 role="option" 無 listbox 祖先(orphan,axe
+                  aria-required-parent)。改真實 focusable checkbox 語意:tabIndex=0 + role="checkbox" +
+                  aria-checked(indeterminate → "mixed")+ Enter / Space 觸發;preventDefault 讓 cmdk root
+                  onKeyDown(源碼檢查 e.defaultPrevented)不會再對 active option 重複觸發 Enter。
+                  aria-selected 顯式蓋回 undefined(MenuItem 內建 aria-selected 對 role="checkbox" 無效)。 */}
               <MenuItem
                 size={size}
                 checkbox
                 checked={allState}
                 onClick={handleSelectAll}
+                role="checkbox"
+                aria-checked={allState === 'indeterminate' ? 'mixed' : allState}
+                aria-selected={undefined}
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    handleSelectAll()
+                  }
+                }}
               >
-                全部
+                {selectAllLabel}
               </MenuItem>
             </MenuFooter>
           )}
@@ -444,12 +542,70 @@ export const selectMenuMeta = {
   sizes: {
 
   },
-  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],
+  // 'selected' = 單選 option 持續選中(bg-neutral-selected);'active' 保留 — cmdk virtual-focus on
+  // selected 走 bg-neutral-selected-active(active 階 token;2026-07-07 詞彙統一補修)。
+  states: ['default', 'hover', 'active', 'selected', 'focus-visible', 'disabled'],
   tokens: {
-    bg: ['bg-surface-raised', 'bg-transparent'],
+    bg: ['bg-neutral-selected', 'bg-neutral-selected-active', 'bg-surface-raised', 'bg-transparent'],
     fg: ['text-fg-muted'],
     ring: [],
   },
 } as const
 
+/**
+ * 2026-07-05 D4 P0 修(searchable 鍵盤死路):trigger 內的裸 <input> 與 portal 內的 cmdk root
+ * 在不同 DOM 子樹 — 鍵盤事件永遠 bubble 不到 cmdk 的 ArrowUp/Down/Enter handler([cmdk-root]
+ * onKeyDown)→ searchable Select / PeoplePicker single / Combobox searchIn='trigger' 開啟後
+ * 只能 Esc。修法 = APG combobox-with-list:trigger input 把三鍵 re-dispatch 給 cmdk root
+ * (native KeyboardEvent bubbles 經 React root delegation 觸發 cmdk synthetic handler)。
+ * Home/End 刻意不轉送(文字輸入的 caret 語意優先,對齊 MUI/Ant Autocomplete)。
+ * aria-activedescendant 綁回 trigger input → 見下方 useActiveDescendant(2026-07-05 D4 補齊)。
+ */
+export function forwardKeyToListbox(contentId: string | undefined, e: React.KeyboardEvent): boolean {
+  if (!contentId) return false
+  if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Enter') return false
+  const root = document.getElementById(contentId)?.querySelector<HTMLElement>('[cmdk-root]')
+  if (!root) return false
+  e.preventDefault()
+  root.dispatchEvent(new KeyboardEvent('keydown', { key: e.key, bubbles: true, cancelable: true }))
+  return true
+}
+
+/**
+ * 2026-07-05 D4 補齊(APG combobox aria-activedescendant):追蹤 cmdk 目前 virtual-focus item
+ * 的 DOM id,供 trigger 端搜尋 input 綁 `aria-activedescendant` —— SR 才會在方向鍵導覽 /
+ * 打字過濾時播報 active option 名。機制:trigger 與 portal 內 cmdk 分屬不同 DOM 子樹,cmdk
+ * 只把 active id 綁在自己的 Command.Input / List(cmdk source:item 自帶 auto-generated id +
+ * `data-selected="true"` 標記 virtual focus)→ trigger 端用 MutationObserver 監聽 popover 容器
+ * (contentId = PopoverContent id)內 `data-selected` 屬性變化 + childList(打字過濾 re-render
+ * 換 item 節點),單一機制涵蓋全部更新路徑:開啟初始 auto-highlight / forwardKeyToListbox
+ * 方向鍵轉送 / 搜尋過濾後 cmdk 自動移 cursor / pointer hover。
+ * 關閉時清 undefined —— ARIA 要求 id 必指向存在於 DOM 的節點,不可留 stale id。
+ */
+export function useActiveDescendant(contentId: string | undefined, open: boolean): string | undefined {
+  const [activeId, setActiveId] = React.useState<string | undefined>(undefined)
+  React.useEffect(() => {
+    if (!open || !contentId) {
+      setActiveId(undefined)
+      return
+    }
+    // PopoverContent 與 trigger 同一個 React commit mount(open state 同批 render)→ effect 跑時已在 DOM
+    const container = document.getElementById(contentId)
+    if (!container) return
+    const read = () => {
+      setActiveId(container.querySelector<HTMLElement>('[cmdk-item][data-selected="true"]')?.id || undefined)
+    }
+    // 初始補讀:MutationObserver 只看「觀察開始後」的變化;cmdk 初始 auto-highlight(layout effect
+    // 排程)可能已 commit → rAF 讀當下狀態兜底,與 observer 互補、誰先到都不漏。
+    const raf = requestAnimationFrame(read)
+    const observer = new MutationObserver(read)
+    observer.observe(container, { subtree: true, childList: true, attributes: true, attributeFilter: ['data-selected'] })
+    return () => {
+      cancelAnimationFrame(raf)
+      observer.disconnect()
+    }
+  }, [open, contentId])
+  return activeId
+}
+
 export { SelectMenu }

package/src/components/SelectionControl/selection-item.anatomy.stories.tsx

@@ -565,7 +565,7 @@ export const Accessibility = {
   render: () => (
     <div className="max-w-3xl text-body text-fg-secondary">
       <h3 className="text-h5 text-foreground mb-2">無障礙設計</h3>
-      <p className="whitespace-pre-line">{"SelectionItem 是純佈局元件,本身不接管鍵盤與焦點——它只渲染外層容器加上指向控件的 label(label 的 htmlFor 連到控件 id,點文字會觸發控件)。\n\n鍵盤操作、焦點環、勾選狀態都由傳入的控件(Checkbox / Radio)負責:\n\n- Tab — 焦點落在控件本身\n- Space — 由控件切換勾選狀態\n- 焦點環(outline 2px,顏色取自 var(--ring))由控件自己畫\n\n搭配建議:\n\n- 控件對齊 [W3C ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/) 對應的 checkbox / radio pattern。\n- 用 label 的 htmlFor 連到控件 id,讓點擊文字也能操作。\n- 驗證:Storybook 無障礙面板應 0 項嚴重違規;不靠滑鼠也能完整操作。文字對比 ≥ 4.5:1,介面元素對比 ≥ 3:1(WCAG AA)。"}</p>
+      <p className="whitespace-pre-line">{"SelectionItem 是純佈局元件,本身不接管鍵盤與焦點——它只渲染外層容器加上指向控件的 label(label 的 htmlFor 連到控件 id,點文字會觸發控件)。\n\n鍵盤操作、焦點環、勾選狀態都由傳入的控件(Checkbox / Radio)負責:\n\n- Tab — 焦點落在控件本身\n- Space — 由控件切換勾選狀態\n- 焦點環(ring 2px box-shadow,顏色取自 var(--ring))由控件自己畫\n\n搭配建議:\n\n- 控件對齊 [W3C ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/) 對應的 checkbox / radio pattern。\n- 用 label 的 htmlFor 連到控件 id,讓點擊文字也能操作。\n- 驗證:Storybook 無障礙面板應 0 項嚴重違規;不靠滑鼠也能完整操作。文字對比 ≥ 4.5:1,介面元素對比 ≥ 3:1(WCAG AA)。"}</p>
     </div>
   ),
 }

package/src/components/SelectionControl/selection-item.principles.stories.tsx

@@ -43,10 +43,10 @@ export const UsageGuidance: Story = {
       <div className="prose prose-sm max-w-prose">
       <p>兩者表達 selectable state,但結構與場景不同:</p>
       <ul>
-        <li><strong>SelectionControl(本元件)</strong>—大塊 row(含 icon / avatar / multi-line description),適合 settings / list-as-page;Notion/Slack idiom</li>
+        <li><strong>SelectionControl rich row(本 primitive,經 Checkbox / RadioGroup 消費)</strong>—大塊 row(含 icon / avatar / multi-line description),適合 settings / list-as-page;Notion/Slack idiom</li>
         <li><strong>Checkbox + Field</strong>—緊湊 form 欄位;適合 form group 多選</li>
       </ul>
-      <p className="text-fg-muted">判斷:row 是 page content(讀取/設定)→ SelectionControl;row 是 form input(submit value)→ Checkbox + Field。</p>
+      <p className="text-fg-muted">判斷:row 是 page content(讀取/設定)→ Checkbox / RadioGroup 的 rich-row 形態(內部消費 SelectionItem,不裸用 &lt;SelectionItem&gt;);row 是 form input(submit value)→ Checkbox + Field。</p>
     </div>
     </div>
   ),

package/src/components/SelectionControl/selection-item.spec.md

@@ -61,6 +61,7 @@ Checkbox 和 Radio 視覺幾乎完全一致（差異只在形狀 `rounded-md` vs
 - `flex items-start gap-2`：控件與 content 對齊第一行
 - 控件包在 `h-[1lh]` 容器中，跟第一行文字垂直置中
 - 多行 label 時，控件保持對齊第一行（不跳到中間）
+- **例外——avatar block 模式**:`avatar` + `description`(block avatar 32/32/40px)時,控件與 avatar 一起切 text-block 垂直置中,不對齊第一行——「selection + identity」是同一視覺單元,不歪斜(SSOT:selection-item.tsx `useBlock` jsDoc;anatomy story「Prefix 對齊規則」)
 
 ### 字體
 
@@ -127,7 +128,7 @@ SelectionItem 是純佈局元件,本身**不接管**鍵盤、焦點與勾選狀
 - Tab — focus 落在 control 本身
 - Space — 由 control 切換勾選狀態
 
-**Focus**:focus-visible ring 對齊 DS canonical(`outline: 2px solid var(--ring)`),由 control 自己畫;SelectionItem 不獨立 own focus management。
+**Focus**:focus-visible ring 由 control 自己畫——Checkbox / Radio 顯式 `focus-visible:outline-none` + `focus-visible:ring-2 focus-visible:ring-ring`(box-shadow ring,2px、`var(--ring)` 色;checkbox.tsx / radio-group.tsx 控件層 canonical,非全域 `outline` 預設);SelectionItem 不獨立 own focus management。
 
 **驗證**:Storybook a11y addon panel 應 0 critical violation;鍵盤完整可操作(無需滑鼠)。WCAG AA contrast ≥ 4.5:1(text)/ 3:1(UI)。
 

package/src/components/SelectionControl/selection-item.stories.tsx

@@ -1,4 +1,4 @@
-// @story-trait-rationale: SelectionControl 是 isInternal primitive,被 Checkbox / RadioGroup 消費;hasSizes 由 anatomy.stories.tsx SizeMatrix auto-compile owns size showcase(2026-05-15 F-migration);Default 由 NotificationPreferences / PlanPicker 等真實 consumer 情境覆蓋。
+// @story-trait-rationale: SelectionControl 是 isInternal primitive,被 Checkbox / RadioGroup 消費;本檔為 primitive 自家 Internal 結構文件,裸用 <SelectionItem control={...}> 為 API 展示豁免(consumer 仍走 wrapper 形態 <Checkbox icon>/<RadioGroupItem avatar>,spec「不准裸用」;2026-07-04 audit 判定);hasSizes 由 anatomy.stories.tsx SizeMatrix auto-compile owns size showcase(2026-05-15 F-migration);Default 由 NotificationPreferences / PlanPicker 等真實 consumer 情境覆蓋。
 import type { Meta, StoryObj } from '@storybook/react'
 import { Mail, Bell, Folder, Shield } from 'lucide-react'
 import { SelectionItem } from './selection-item'

package/src/components/Separator/separator.anatomy.stories.tsx

@@ -30,7 +30,7 @@ export const Overview: Story = {
     <div className="flex flex-col gap-10">
       <div>
         <H3>Anatomy</H3>
-        <Desc>Separator 是語意分隔元件——consumer 手動放置的分隔線。基於 Radix Separator(shadcn passthrough),提供正確的 ARIA 語意:預設 `decorative=true` 時 render `role="none"`(SR 跳過),`decorative={false}` 時 render `role="separator"` + orientation 語意。元件固定結構(header/footer 邊框)和裝飾性邊框**不使用 Separator**。</Desc>
+        <Desc>Separator 是語意分隔元件——consumer 手動放置的分隔線。基於 Radix Separator(shadcn passthrough),提供正確的 ARIA 語意:預設 `decorative=true` 時 render `role="none"`(SR 跳過),`decorative=&#123;false&#125;` 時 render `role="separator"` + orientation 語意。元件固定結構(header/footer 邊框)和裝飾性邊框**不使用 Separator**。</Desc>
         <div className="border border-border rounded-lg p-4 max-w-md">
           <div className="flex flex-col gap-2 py-2">
             <div className="text-body">個人資訊</div>
@@ -100,7 +100,7 @@ export const TokenMatrix: Story = {
           <table className="text-caption border-collapse">
             <thead><tr><Th>決策者</Th><Th>使用</Th><Th>理由</Th></tr></thead>
             <tbody>
-              <tr><Td>Consumer 手動放置</Td><Td mono>&lt;Separator /&gt;</Td><Td>需要語意標記(role="separator")讓輔助技術辨識</Td></tr>
+              <tr><Td>Consumer 手動放置</Td><Td mono>&lt;Separator /&gt;</Td><Td>分隔語意由放置者宣告——預設 decorative(role="none",SR 跳過),真實切分內容區段時 decorative=&#123;false&#125; 才輸出 role="separator"</Td></tr>
               <tr><Td>元件自動分隔相鄰群組</Td><Td mono>CSS [&+&]</Td><Td>MenuGroup / SidebarGroup——無處插入 DOM node</Td></tr>
               <tr><Td>元件固定結構</Td><Td mono>CSS border-t/b</Td><Td>Dialog Header/Footer、Sidebar Header/Footer——結構的一部分</Td></tr>
               <tr><Td>控件外框 / 容器輪廓</Td><Td mono>CSS border</Td><Td>Input 外框、Card 容器——不分隔內容,是元件邊緣</Td></tr>

package/src/components/Separator/separator.tsx

@@ -37,7 +37,7 @@ export const separatorMeta = {
   sizes: {
 
   },
-  states: ['default'], // 純 Radix Separator.Root,非互動,無 hover/active/focus/disabled(對齊 spec L86/L99 + Tag tag.tsx:232 canonical)
+  states: ['default'], // 純 Radix Separator.Root,非互動,無 hover/active/focus/disabled(對齊 spec「無 StateBehavior」bullet + A11y 段;段名指法免行號漂移)
   tokens: {
     bg: [],
     fg: [],

package/src/components/Sheet/sheet.spec.md

@@ -104,7 +104,7 @@ Sheet 為容器,內容由 consumer 決定;focus trap + Escape close + `aria-labe
 ## 邊界案例
 
 - **Disabled**:Sheet 本身無 disabled state(非互動 control,是 surface container);trigger Button 由 consumer 控 disabled。
-- **Loading(panel content loading)**:Sheet 為純容器,不獨立 own loading state。Async body 場景由 consumer 在 body slot 渲 `<Empty icon={<CircularProgress size={48}/>}/>`(對齊 `empty.spec.md:168` loading compose SSOT)或 `<Skeleton>` line-stack 取代 content,不開 / 不關 Sheet 即可。
+- **Loading(panel content loading)**:Sheet 為純容器,不獨立 own loading state。Async body 場景由 consumer 在 body slot 渲 `<Empty icon={<CircularProgress size={48}/>}/>`(對齊 `empty.spec.md:167` loading compose SSOT)或 `<Skeleton>` line-stack 取代 content,不開 / 不關 Sheet 即可。
 - **Empty(no content)**:Sheet 必含 title(`aria-labelledby` 強制要求);body 為空時 consumer 應渲 `<Empty>` placeholder,不渲空白 panel。
 - **Scroll(body 內容超過視口高度)**:`SheetBody` = `<ScrollArea>`(`flex-1 min-h-0`),超高內容在 body 內部捲動,header / footer 固定不動;consumer 不需自寫 `overflow-y-auto`。
 - **誤嵌套降級(nested Sheet)**:禁止事項已禁 nested;若 consumer 不慎嵌套,Radix 的 Esc 與 focus trap 只作用於**最上層** layer(DismissableLayer 只 dismiss highest layer;FocusScope stack 最新 scope active),關閉由上而下逐層。
@@ -143,4 +143,5 @@ Sheet 為容器,內容由 consumer 決定;focus trap + Escape close + `aria-labe
 - `accordion.spec.md`
 - `app-shell.spec.md`
 - `dialog.spec.md`
+- `popover.spec.md`
 - `scroll-area.spec.md`

package/src/components/Sheet/sheet.tsx

@@ -50,8 +50,9 @@ const SheetOverlay = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
+    // motion-reduce:animate-none — prefers-reduced-motion 豁免,對齊 DialogOverlay canonical(dialog.tsx DialogOverlay 同 token,2026-07-05 P2 收乾)
     className={cn(
-      "fixed inset-0 z-50 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -217,7 +218,8 @@ export const sheetMeta = {
   sizes: {
 
   },
-  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],
+  // 2026-07-04 audit 對齊:Sheet 本身無 disabled state(surface container,spec 邊界案例明文;對齊 popover/dialog meta pattern)
+  states: ['default'],
   tokens: {
     bg: ['bg-surface-raised'],
     fg: ['text-fg-secondary', 'text-foreground'],

package/src/components/Sidebar/sidebar.anatomy.stories.tsx

@@ -766,7 +766,7 @@ export const Accessibility = {
   render: () => (
     <div className="max-w-3xl text-body text-fg-secondary">
       <h3 className="text-h5 text-foreground mb-2">無障礙設計</h3>
-      <p className="whitespace-pre-line">{"-   收合切換鍵：Cmd+B(Mac)/ Ctrl+B(Windows)是業界慣例(VS Code / Linear / shadcn 都用),Sidebar 內建並會攔下這組鍵,避免穿透到瀏覽器書籤列。任何焦點位置都能觸發;目前未排除文字輸入框——在 input / textarea 內按下仍會 toggle(無 disableShortcut opt-out)。\n\n-   收合按鈕:SidebarTrigger 內建 aria-label「Toggle Sidebar」,讓螢幕報讀使用者知道按鈕用途;consumer 可傳 aria-label 覆寫(i18n)。SidebarGroupLabel 的收合 chevron 另有 toggleAriaLabel prop(預設「展開或收合」)。\n\n-   當前項目:選中的 menu item 帶 data-active,呈現選取底色(bg-neutral-selected)作為視覺指引;即使收合成 icon-only 模式,選取底色仍然保留,使用者一眼知道現在在哪一頁。\n\n-   手機尺寸:768px 以下自動切換成從旁滑出的抽屜(Sheet),內建焦點鎖定、Esc 關閉、關閉後焦點回到觸發按鈕。"}</p>
+      <p className="whitespace-pre-line">{"-   收合切換鍵：Cmd+B(Mac)/ Ctrl+B(Windows)是業界慣例(VS Code / Linear / shadcn 都用),Sidebar 內建並會攔下這組鍵,避免穿透到瀏覽器書籤列。任何焦點位置都能觸發;目前未排除文字輸入框——在 input / textarea 內按下仍會 toggle(無 disableShortcut opt-out)。\n\n-   收合按鈕:SidebarTrigger 內建 aria-label「切換側邊欄」,讓螢幕報讀使用者知道按鈕用途;consumer 可傳 aria-label 覆寫(i18n)。SidebarGroupLabel 的收合 chevron 另有 toggleAriaLabel prop(預設「展開或收合」)。\n\n-   當前項目:選中的 menu item 帶 data-active,呈現選取底色(bg-neutral-selected)作為視覺指引;即使收合成 icon-only 模式,選取底色仍然保留,使用者一眼知道現在在哪一頁。\n\n-   手機尺寸:768px 以下自動切換成從旁滑出的抽屜(Sheet),內建焦點鎖定、Esc 關閉、關閉後焦點回到觸發按鈕。"}</p>
     </div>
   ),
 }

package/src/components/Sidebar/sidebar.spec.md

@@ -685,7 +685,8 @@ Item-level default / hover / selected / disabled **色彩**完全共用 item-ana
 
 - **Landmark**:`<Sidebar>` 目前渲染 `<div>`(三種 collapsible 分支皆然),**不自帶** `<nav>` 元素或 `role="navigation"`、`aria-label`。consumer 若要 page-level navigation landmark,需自行用 `<nav aria-label="Main">` 包住 `<Sidebar>`(或對導覽區塊 `<SidebarGroup>` 加 `role="navigation"`)。
 - **Active item**:`SidebarMenuButton` 帶 `id` + 命中 `activeId` 時自動加 `data-active="true"`,呈現選取底色（`bg-neutral-selected`)。**目前僅視覺 + `data-active` attribute,不設 `aria-current="page"`**——SR 讀不到「current page」語意。`variant="meta"` 永不參與 selection（`data-active` 永遠 false）。
-- **快捷鍵不衝突**:`Cmd+B` / `Ctrl+B` 是 industry-standard(VS Code / Linear / shadcn),DS 內建在 `SidebarProvider` 的 `window` keydown handler,只判斷 `key==="b" && (metaKey||ctrlKey)` 即 `preventDefault` + toggle，避免穿透到 browser bookmark bar(`Cmd+B` 在 Safari 是 favorites)。**目前無 opt-out prop**(無 `disableShortcut`)、**也未排除文字輸入框內**——在 `<input>` / `<textarea>` 內按 `Cmd/Ctrl+B` 仍會 toggle 並攔掉預設行為。
+- **快捷鍵不衝突**:`Cmd+B` / `Ctrl+B` 是 industry-standard(VS Code / Linear / shadcn),DS 內建在 `SidebarProvider` 的 `window` keydown handler,判斷 `key==="b" && (metaKey||ctrlKey)` 後 `preventDefault` + toggle,避免穿透到 browser bookmark bar(`Cmd+B` 在 Safari 是 favorites)。**三道 guard(2026-07-05 D4 修)**:(1) `defaultPrevented`——app 層 editor 已處理同快捷鍵時不 double-fire;(2) `isComposing`——IME 組字中不攔;(3) 可編輯 target——`<input>` / `<textarea>` / `contentEditable` 內按 `Cmd/Ctrl+B` 不 toggle(bold 等編輯語意優先,對齊 VS Code / Linear 快捷鍵讓位可編輯區慣例)。**目前無 opt-out prop**(無 `disableShortcut`)。
+- **Collapsed accessible name(2026-07-05 D4 修)**:icon 模式 label 以 `sr-only` 視覺隱藏(非 display:none),SidebarMenuButton 對 SR 保留 accessible name(WCAG 4.1.2);Tooltip 僅 hover 提示、不供名;badge / inline actions 仍 display:none(補充資訊,供名責任在 label)。
 - **Mobile sheet focus trap**:`md` breakpoint 以下切 Sheet 模式時,Radix Dialog 自帶 focus trap + Esc dismiss + restore focus to trigger(詳 sheet.spec.md)。
 - **Collapsible group**:`<SidebarGroup collapsible>` 的 label trigger 帶 `aria-expanded` + `aria-controls` 指向 GroupContent id,SR 可朗讀展開狀態。
 - **Sticky header / footer focus order**:Tab 順序按 DOM 順序 — Header → Content → Footer,SidebarTrigger 在 Pattern A/B 都位於 page top-left,Tab 第一站即可達。

package/src/components/Sidebar/sidebar.stories.tsx

@@ -128,13 +128,15 @@ const PageContent = ({ title, description }: { title: string; description: React
           平等 sibling。「當下在哪頁」的訊號由 sidebar active item 負責,不靠 title 字重 */}
       <h1 className="text-body-lg font-medium">{title}</h1>
     </ChromeHeader>
-    <div className="flex-1 overflow-auto p-8">
+    {/* 2026-07-04 dim 90:macro 間距對齊 layout-space token(同 87dbc9cd template DashboardPage
+        已拍板 pattern;本檔是 R8 registry archetype,錯 rhythm 會被 consumer 機械複製)*/}
+    <div className="flex-1 overflow-auto px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]">
       <div className="max-w-2xl">
-        <p className="text-body text-fg-secondary mb-6">{description}</p>
-        <div className="grid grid-cols-2 gap-4">
+        <p className="text-body text-fg-secondary mb-[var(--layout-space-loose)]">{description}</p>
+        <div className="grid grid-cols-2 gap-[var(--layout-space-loose)]">
           {/* 固定值(非 Math.random)— story 是 visual baseline,必確定性,否則每次 build 像素不同 = composition-fidelity / visual regression 無法比對(2026-06-02 fix)*/}
           {([['專案數量', 24], ['團隊成員', 8], ['本週提交', 47], ['待處理', 3]] as const).map(([t, v]) => (
-            <div key={t} className="rounded-lg border border-divider bg-surface p-4">
+            <div key={t} className="rounded-lg border border-divider bg-surface p-[var(--layout-space-loose)]">
               <p className="text-caption text-fg-muted">{t}</p>
               <p className="text-h5 font-semibold mt-1">{v}</p>
             </div>

package/src/components/Sidebar/sidebar.tsx

@@ -194,6 +194,21 @@ const SidebarProvider = React.forwardRef<
           event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
           (event.metaKey || event.ctrlKey)
         ) {
+          // 2026-07-05 D4 修:全域攔截加三道 guard——
+          // (1) defaultPrevented:app 層 editor 已處理同快捷鍵時不 double-fire;
+          // (2) isComposing:IME 組字中不攔(組字期間 key 事件不代表使用者意圖);
+          // (3) 可編輯 target:input / textarea / contentEditable 內 Cmd/Ctrl+B 是
+          //     bold 等編輯語意,快捷鍵讓位(對齊 VS Code / Linear 讓位可編輯區慣例)。
+          if (event.defaultPrevented || event.isComposing) return
+          const target = event.target
+          if (
+            target instanceof HTMLElement &&
+            target.closest(
+              'input, textarea, [contenteditable]:not([contenteditable="false"])'
+            )
+          ) {
+            return
+          }
           event.preventDefault()
           toggleSidebar()
         }
@@ -426,7 +441,7 @@ const SidebarTrigger = React.forwardRef<
       size="sm"
       iconOnly
       startIcon={PanelLeft}
-      aria-label="Toggle Sidebar"
+      aria-label="切換側邊欄" /* i18n-allow: DS default;consumer 經 {...props} override */
       className={className}
       onClick={(event) => {
         onClick?.(event)
@@ -705,7 +720,7 @@ const sidebarGroupLabelVariants = cva(
     "px-[var(--layout-space-loose)]",
     "font-medium text-fg-muted",
     "cursor-default select-none pointer-events-none outline-none",
-    // icon 模式:display:none 硬隱藏(跟 SidebarMenuButton label span 一致的策略)
+    // icon 模式:GroupLabel 純視覺分段 → collapsed 連 SR 一併隱藏是刻意(供名責任在各 menu button 的 sr-only label,2026-07-05 D4 修後與 MenuButton 策略分工)
     "group-data-[collapsible=icon]:hidden",
   ],
   {
@@ -858,7 +873,8 @@ SidebarMenuItem.displayName = "SidebarMenuItem"
  *   - selected:   bg-neutral-selected(data-active=true)
  *
  * Icon 模式:button 保持 w-full 填滿 sidebar icon rail,鎖高為 field-height-{size},
- * content 用 justify-center 居中,label span 以 display:none 硬隱藏。
+ * content 用 justify-center 居中,label span 以 sr-only 視覺隱藏(a11y tree 保留,
+ * 2026-07-05 D4——SR 仍讀得到 accessible name)。
  */
 const sidebarMenuButtonVariants = cva(
   [
@@ -877,8 +893,11 @@ const sidebarMenuButtonVariants = cva(
     //   range 內。Row geometry 永遠 stable(px-loose + items-start + gap-2 + height auto),
     //   無 discrete property switch → 無 fly / 無 flutter / 無 jitter。
     //
-    //   Label/badge/action 自然存在 DOM(a11y screen reader 仍讀到),只是 outer clip 視覺消失。
-    //   Tooltip 仍在 collapsed state 顯示(per L1043-1055 既有 hidden 條件)。
+    //   2026-07-05 D4 更新:v4「outer clip、SR 仍讀到」的宣稱在 v5 label display:none 後
+    //   已失真;現行 = label 走 sr-only(SR 讀到、供 accessible name,見下方 v5/D4 註解),
+    //   badge / action / inline-actions 仍 display:none(視覺 + SR 一併隱藏——collapsed 供名
+    //   責任在 label,badge 計數屬補充資訊)。Tooltip 仍在 collapsed state 顯示
+    //   (per buttonWithTooltip 既有 hidden 條件),僅 hover 提示、不供名。
     //
     //   對齊 MUI MiniDrawer + shadcn canonical(width morph + overflow clip + row geometry 不變)。
     "transition-[background-color,color] duration-200 ease-linear motion-reduce:duration-0",
@@ -891,11 +910,16 @@ const sidebarMenuButtonVariants = cva(
     "aria-disabled:pointer-events-none aria-disabled:text-fg-disabled",
     "data-[active=true]:bg-neutral-selected data-[active=true]:text-foreground",
     "group-has-[[data-sidebar=menu-action]]/menu-item:pr-8",
-    // 2026-05-21 v5 restore label display:none(user 抓「label 沒消失」):
+    // 2026-05-21 v5 restore label 硬隱藏(user 抓「label 沒消失」):
     // C* outer overflow-x:hidden 理論 clip,但 label.x=40 在 sidebar-width-icon=48 內 → 首字
-    // 部分可見。display:none 是 instant 切換非 main animation,跟 C* 「不用 display:none 做主
-    // 動畫」不衝突(label 不參與 width 動畫,純 final state)。對齊 shadcn canonical。
-    "group-data-[collapsible=icon]:[&_[data-sidebar=menu-label]]:hidden",
+    // 部分可見。instant 切換非 main animation,跟 C* 「不用 display:none 做主
+    // 動畫」不衝突(label 不參與 width 動畫,純 final state)。
+    // 2026-07-05 D4 修:v5 的 display:none 讓 accessible-name 計算排除 label
+    // (icon aria-hidden、badge 也 hidden)→ collapsed 時 menu button 對 SR 是無名
+    // button(WCAG 4.1.2)。改 sr-only:position:absolute + 1px + clip 視覺隱藏但保留
+    // a11y tree,button 仍有 accessible name;absolute 移出 flex flow,layout 效果同
+    // display:none(icon 置中公式不變)。
+    "group-data-[collapsible=icon]:[&_[data-sidebar=menu-label]]:sr-only",
     // 2026-05-22 Approach 9 — 收合時所有 prefix center 鎖回 rail center
     // (--sidebar-width-icon/2 = GlobalHeader toggle geometry SSOT)。
     // 公式: pl = (rail - prefix-width) / 2,prefix-width 由 SidebarProvider 注入的
@@ -1030,8 +1054,9 @@ const SidebarMenuButton = React.forwardRef<
     // 所以 asChild 的 consumer 自行放 icon + label(記得 prefix 要包在 h-[1lh] 容器,
     // label span 要有 data-sidebar="menu-label" attribute 才能參與 icon 模式自動隱藏)。
     //
-    // Label span 在 icon 模式下透過 cva base 的 `[&_[data-sidebar=menu-label]]:hidden` display:none,
-    // 這樣 flex 只剩 icon 一個 child,justify-center 可以真正置中。
+    // Label span 在 icon 模式下透過 cva base 的 `[&_[data-sidebar=menu-label]]:sr-only`
+    // 視覺隱藏(2026-07-05 D4:sr-only 非 display:none,SR 保留 accessible name;
+    // absolute 移出 flex flow),這樣 flex 只剩 icon 一個 in-flow child,置中公式不變。
     // Sidebar 寬度 transition 200ms 是唯一持續動畫,使用者視線跟著寬度走,不會察覺 label 的瞬切。
     // 用 `<ItemIcon>` / `<ItemLabel>` helper,**不直接寫 ItemPrefix wrap StartIcon**——
     // ItemIcon 內部會自動加 `data-prefix-type="icon"`,讓 SidebarProvider 的全域
@@ -1259,9 +1284,12 @@ export const sidebarMeta = {
     md: { px: 32, when: '預設 — 應用程式主導覽' },
     lg: { px: 36, when: '重要主導覽 / icon-prominent workspace switcher' },
   },
-  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],
+  // 'selected' = nav 當前項(data-[active=true] → bg-neutral-selected 灰底家族;2026-07-07 meta 詞彙統一補列);
+  // 'active' 移除 — 全檔無 Tailwind 按壓 utility(內嵌 SidebarTrigger 的按壓屬 Button meta,同 Notice/Alert
+  // 排除內嵌 dismiss Button 慣例;2026-07-07 對抗稽核抓 doc-claim ≠ code 補修)。
+  states: ['default', 'hover', 'selected', 'focus-visible', 'disabled'],
   tokens: {
-    bg: ['bg-neutral-hover', 'bg-surface', 'bg-transparent'],
+    bg: ['bg-neutral-hover', 'bg-neutral-selected', 'bg-surface', 'bg-transparent'],
     fg: ['text-fg-muted', 'text-fg-secondary', 'text-foreground'],
     ring: ['ring-ring'],
   },

package/src/components/Skeleton/skeleton.principles.stories.tsx

@@ -32,7 +32,7 @@ const Label = ({ children, warn }: { children: React.ReactNode; warn?: boolean }
 
 const Section = ({ title, children }: { title: string; children: React.ReactNode }) => (
   <section className="mb-12">
-    <h2 className="text-heading-3 font-bold text-foreground mb-4 pb-2 border-b border-border">{title}</h2>
+    <h2 className="text-h3 font-bold text-foreground mb-4 pb-2 border-b border-border">{title}</h2>
     {children}
   </section>
 )

package/src/components/Skeleton/skeleton.spec.md

@@ -3,8 +3,7 @@ component: Skeleton
 family: self-contained
 variants: {}
 sizes: {}
-traits:
-  - isMatrixHeavy
+traits: []  # 2026-07-04 audit:移除幻影 isMatrixHeavy(spec body「為何無 Matrix」明文 rationale + 0 matrix stories,trait 與自家宣告矛盾)
 benchmark:
   - Ant Design Skeleton: github.com/ant-design/ant-design/tree/master/components/skeleton
   - MUI Skeleton: github.com/mui/material-ui/tree/master/packages/mui-material/src/Skeleton