実装済み部品と、SaaS を組むうえで検討候補になる未実装パーツの棚卸し。
「層の指針」は公理6（ガラス=操作系）に基づく実装時の推奨。
不足に気づいたらここに行を足してから作る（契約 → 実装の順）。
| 部品 | 分類 | 層の指針 | 状態 |
|---|
| Button（4 variants）/ Card / Field | core | ガラス | 実装済み |
| Nav（横/縦）/ Segmented / Chip | navigation | ガラス+塗り | 実装済み |
| Shell / Sidebar / Topbar（thin/thick 相） | app chrome | ガラス（合計1枚） | 実装済み |
| Modal / Menu / Select / Command / Toast / Tooltip | overlay | ガラス（一時面） | 実装済み |
| Switch / Checkbox / Radio / Slider | controls | 塗り→操作中ガラス | 実装済み |
| Panel / Table / Stat / Form row | content | 不透明 | 実装済み |
| Theme overlay（studio-dark） | system | — | 実装済み |
| Drawer / Sheet（サイドパネル） | overlay | ガラス（一時面） | 実装済み（.lg-drawer） |
| Popover（フォーム内容つき） | overlay | ガラス（一時面） | 実装済み（.lg-menu--popover） |
| Date picker / Combobox | inputs | ガラス（menu 拡張） | 実装済み |
| Textarea（autosize）/ Affix / Fill 相 | inputs | ガラス（transient） | 実装済み |
| Progress / Spinner / Skeleton | feedback | 不透明（読む要素） | 実装済み |
| Inline banner / Alert | feedback | 不透明 | 実装済み |
| Badge / Status dot | content | 不透明 | 実装済み |
| Avatar / Avatar group | content | 不透明 | 実装済み |
| Breadcrumbs / Pagination | navigation | 塗り | 実装済み |
| Accordion / Disclosure | content | 不透明 | 実装済み（details ベース） |
| Stepper（ウィザード） | navigation | 塗り | 実装済み |
| Empty state | content | 不透明 | 実装済み |
| File upload / Dropzone | inputs | 不透明＋drop 中ガラス | 実装済み（drop 中ガラス化） |
| Search input / Input group（prefix・suffix） | inputs | ガラス上は塗り | 実装済み（.lg-field-affix / --fill） |
| Number input | inputs | ガラス（transient） | 実装済み（.lg-field--number） |
| Button 状態（disabled / loading） | feedback | ガラス | 実装済み |
| Tabs（コンテンツパネル結合 aria-controls） | navigation | — | 実装済み（自動結合） |
| Context menu（右クリック結合） | overlay | ガラス（一時面） | 実装済み（data-lg-context） |
| List / Description list（key-value） | content | 不透明 | 実装済み（.lg-kv dl/dt/dd） |
| Typography scale（.lg-type-* 6段） | foundation | — | 実装済み |
| Spacing scale（--lg-ref-space-* 8段） | foundation | — | 実装済み |
| z-index scale（--lg-ref-z-* 4段） | foundation | — | 実装済み（CSS 直値を一掃） |
| Breakpoints / モバイル shell（サイドバー折りたたみ） | foundation | — | 実装済み（md 900 でオフキャンバス） |
| Icon システム（Lucide sprite・21種・data-lg-icon） | foundation | — | 実装済み（ISC・assets/icons + lg-icons.js） |
| Chart / dataviz カラートークン | foundation | 不透明推奨 | 実装済み（chart-1〜6） |
| Icon button / Prose（ショーケース ad hoc からの昇格） | core | 塗り/不透明 | 実装済み（.lg-icon-button / .lg-prose） |
| コンセプト帯 + ペルソナドック（LP 内蔵・触って学ぶ導線） | system | — | 実装済み（showcase/index.html） |
| 独自素材 Prism（分散の署名・スペクトラムリム・spec-tag） | material | — | 実装済み（v2 R11。互換: theme apple-quiet） |
| ページ合成（@include 参照ツリー + {{param}}。部品修正が全ページへ伝播） | system | — | 実装済み（tools/build-pages.mjs / src/pages/） |
| SPA ランタイム対応（LiquidGlass.mount / unmount） | system | — | 未実装（React/Vue 等で動的マウントする案件が来たら着手） |
| 利用ルール + lint（トークン参照方向・直値禁止の機械検査） | system | — | 実装済み（docs/08 + tools/lint-usage.mjs） |
| 画面レイアウト型（基本/一覧/閲覧/編集/新規/設定/認証 + SP 対応） | layout | — | 実装済み（.lg-layout-* / screens.html） |
基盤スケール。タイポは .lg-type-* ユーティリティ（6段）、余白は
--lg-ref-space-*（8段）、重なりは --lg-ref-z-*（4段）。
部品ローカルの直値はこの段階に揃える。中間値を発明しない。
Type scale
Display 24 — Revenue overview
Title 19 — Section heading
Heading 15 — Panel heading
Body 13.5 — 本文の基準。テーブル・メニュー・説明文はこのサイズに揃える。行送りは 1.7。
Caption 11.5 — 補足・ヘルプ・差分表示
Label 10 — technical uppercase
Space scale（xs 4 / sm 8 / md 12 / lg 16 / xl 20 / 2xl 24 / 3xl 32 / 4xl 48）
Z scale: menu 80 → backdrop 100 → toast 140 → tooltip 160
Chart palette（カテゴリカル6。チャートはコンテンツ層に描く）
Breakpoints: sm 640 / md 900（shell 折りたたみ）/ lg 1200 — CSS の @media は同値リテラル（tokens が正）
Icons: Lucide（ISC）・標準 15px / 大 18px・currentColor・線幅 1.5px 統一。<i data-lg-icon="name"> で使用
Web サービスの画面類型を .lg-page + .lg-layout-* で組む。
全型 SP 対応（md 900 でサイドバーがオフキャンバス化、sm 640 でテーブルがカード化・
アクションバーが全幅化）。実際に動く実証は
screens.html（サイドバーで7画面切替）。
| 画面型 | 骨格 | SP での崩れ方 |
|---|
| 基本（Dashboard） | .lg-page + .lg-page-header + .lg-grid-stats + .lg-split | 統計2列化・split 1カラム化 |
| 一覧（List） | .lg-toolbar + .lg-table--responsive + .lg-pagination | テーブル行がカード化（data-th ラベル） |
| 閲覧（Detail） | .lg-page-header + .lg-split--aside-first | メタが本文より先頭に（Total 等の第一情報） |
| 編集（Edit） | .lg-layout-form + .lg-actionbar（sticky ガラス） | アクションバーが全幅・ボタン均等 |
| 新規（Create） | .lg-layout-focus + .lg-stepper（シェルなし集中型） | 1カラムのまま縮む |
| 設定（Settings） | .lg-layout-settings + .lg-subnav | サブナビが横スクロールタブ化 |
| 認証（Auth） | .lg-layout-auth + .lg-auth-card | カードが全幅化 |
素材の2相。data-lg-variant="clear" は明 surface（light/text）で
35% dim が自動で敷かれる。stage を切り替えて adaptive（ink 反転・輝度補償・dim）を確認する。
Regular / adaptive
エッジのみ屈折・分光。ラベルは surface に応じてモノクローム反転する。
prism · ca 6px
Clear / non-adaptive + auto dim
高透過。リッチなメディア背景の上限定。明 surface では 35% dim が入る。
公式仕様「大きい要素ほど厚いガラス」の実装。data-lg-phase="thin|thick"
で blur と face が段階変化する（サイドバー=thick、ツールバー=thin）。
2軸で整理: 様式（tinted 既定 / --solid / --outline /
--quiet）× 意味色（neutral / --accent=--primary /
--danger / --warning / --success）。
primary は1画面1箇所。状態色は点灯時に単色収差としても現れる（状態の光学）。
variant matrix — 様式（縦）× 意味色（横）
| tinted（既定・ガラス） |
|
|
|
|
|
| solid（不透明） |
|
|
|
|
|
| outline（線） |
|
|
|
|
|
| quiet（最弱） |
|
|
|
|
|
states（全様式共通）
.lg-chip[aria-pressed]。塗り部品。選択で ink 反転。
.lg-segmented。lg-nav の小型版。容器は塗り、ピルは gel バネ。
.lg-nav（ガラス）。ピルは塗り（glass on glass 禁止の実装例）で
gel バネ滑走。縦型は --vertical（Shell ストーリー参照）。
tabs + panel 結合（aria-controls）
Summary パネル。タブの aria-controls が自動で hidden を切り替える。
Details パネル。role=tabpanel も自動付与。
.lg-shell: サイドバー(thick) + トップバー(thin) = 恒常クローム合計1枚。
ガラス上の入力は塗りで作る。実戦例は app.html。
どちらも塗り部品。.lg-breadcrumbs（現在地は aria-current="page"）と
.lg-pagination（現在ページは ink 反転ピル）。
.lg-stepper（ol/li）。.is-done / .is-current の3状態。塗り部品。
.lg-backdrop + .lg-modal。開閉は gel バネ + scrim。Esc / 外側クリックで閉じる。
.lg-backdrop--drawer + .lg-drawer。右から translateX バネで入場する一時面
（設定・詳細編集用）。Esc / scrim クリックで閉じる。予算外。
.lg-menu--popover はフォーム内容を持つ一時面（選択で閉じない・role=dialog）。
Context menu は data-lg-context="#menu-id" で右クリックに結合し、
カーソル位置に開く。
input[data-lg-datepicker] でカレンダー popover が自動配線（値は YYYY-MM-DD、
lg-change 発火）。Combobox は .lg-select.lg-combobox —
入力でフィルタし Enter で先頭を確定。
.lg-backdrop--command + .lg-command。⌘K / Ctrl+K、入力フィルタ、矢印 + Enter。一時面なので予算外。
LiquidGlass.toast(msg, { action, positive, sticky })。右下スタック（上限4）、入場バネ・退場フェード・hover 滞留。
data-lg-tooltip="…" を付けるだけ。450ms 遅延・位置固定（ポインタ非追従 = 公理5）。
いずれもコンテンツ層（読む要素はガラスにしない）。.lg-progress は
data-lg-value か LiquidGlass.progress(el, v)、不定は
.is-indeterminate。skeleton の shimmer は reduced-motion で静止。
determinate 65%
indeterminate
skeleton
.lg-badge（+ .is-positive/.is-danger、.lg-dot）と
.lg-avatar（--sm/--lg、.lg-avatar-group）。どちらも塗り/不透明。
色は状態通知のみに使う（公理2）。
.lg-banner（+ .is-positive/.is-danger）。toast との違いは
「ページに留まる」こと。.lg-banner-close で退場（フェード）。コンテンツ層。
メンテナンス予定
9/12 02:00–04:00 JST の間、書き出しが利用できません。
同期エラー
会計サービスへの接続が 3 回失敗しています。認証情報を確認してください。
.lg-field: transient ガラス（rest 85% → focus 100%）。error / disabled 状態つき。
field の拡張3種: .lg-field--multi + data-lg-autosize（入力で伸びる）、
.lg-field-affix（prefix/suffix アイコン）、.lg-field--fill
（ガラス上に置く塗り相 — glass on glass 回避。.lg-glass を併用しない）。
公理6の例外実装群: rest は塗り、操作中だけノブがガラス化して光る。Switch のノブは gel バネで滑走。
input[type=range].lg-slider。値は 1:1（追従遅延なし）。ドラッグ中のみノブがガラス化（公式明文の transient 例）。
.lg-form-row: ラベル + 入力 + ヘルプ。.is-error でエラー表示。
.lg-field--number（`.lg-step` でステップ、min/max/step 尊重）。
.lg-dropzone は drag over の間だけガラス化する transient の応用。
ファイルは lg-files イベントで受け取る。
.lg-card は「押せるカード」限定のガラス（gel 0.985）。読むだけのカードは .lg-panel（不透明）で作る。
Refraction Study 04
押せるカード。内側 radius は concentric 連鎖。
読むだけのカード
操作できないものはガラスにしない（公理6）。こちらが正。
.lg-panel（不透明・surface 連動の面色）と .lg-stat（KPI タイル）。
.lg-table（+ --compact）。読む要素なので不透明。ガラス化したくなったら公理6違反のサイン。
| Invoice | Customer | Amount |
|---|
| INV-2094 | Northwind K.K. | ¥420,000 |
| INV-2093 | Aperture Design | ¥168,500 |
| INV-2092 | Hoshino Lab | ¥96,000 |
details.lg-accordion（native details/summary）と .lg-empty。
どちらもコンテンツ層（不透明）。
請求書の締め日はいつですか？
毎月末日に締め、翌月第1営業日に発行されます。締め日はワークスペース設定から変更できます。
支払い方法を変更できますか？
はい。Settings → Billing からいつでも変更できます。
データのエクスポート形式は？
CSV と JSON に対応しています。
まだ請求書がありません
最初の請求書を作成すると、ここに一覧が表示されます。テンプレートから始めることもできます。