LILA component baseline

先看元件，再看怎麼組

這裡直接展示 App Shell、股票清單、滑動判讀與 Info 解說，以及它們的主要狀態。完整手機與各 domain preview 可操作；純狀態樣本會清楚標示，不會假裝有尚未決定的控制邏輯。

給實作者：source of truth、載入順序與五層索引

Source of truth 是 tokens.css、utilities.css、各 domain CSS／JS 與 COMPONENTS.md；本頁只從它們 live render，不是第二份真相。

載入順序：tokens → utilities → domain。順序不要換。

給 agent：design.md 是單一約束入口，抓一份就有載入順序、視覺規則、手機外框與組裝接縫。手機外框資產是 device-frame.css，規格頁在裝置外框。

新收割入口：term／judgment Info 變體 · Read × Info fit specimen。Fit 同時涵蓋 term 與 judgment；放大字級可由 panel 內捲動，不支援的短高／landscape 由 consumer 移除 fit 回原生長卡。

總覽 · Compositions metadata

先看完整體驗

不用先讀 class 或契約：先操作完整手機，再從代表樣本辨認 Shell、清單與判讀；Info 變體與跨 domain fit 接縫在各自章節提供 live preview。

顯示比例

50% 65% 80% 100%

完整手機 composition playground

這是 full app composition 的示範，證明四條 root stack、清單與 fill reader 可以接成一條手機操作路徑；它不是 design system，也不構成產品 IA 已採用的證據，domain 組合依 BRIEF 選取。

現行 Shell contract 仍固定四個 root／label：today / watchlist / market / profile（今日／自選／市場／我的）。需要不同 root navigation 時，動工前回報 mismatch；不得直接改名，也不得把這個 playground 當成任意 IA 已受支援的證據。

可操作：切 tab、push／back、上下滑與 progress 跳段

查看這個 composition 的組裝契約

selected

unselected

Shell

固定 App 外框、四格 bottom nav 與每條 root 各自的 stack。

僅狀態展示；完整 preview 可操作

Shell 組裝契約

identityquoteactionreason

清單

用同一個股票列承接今日、自選、市場與編輯／批次狀態。

僅狀態展示：未接 controller

Lists 組裝契約

判讀

把判讀內容放進唯一頁面／翻卡主軸縱向 scroller，讓卡片吸附與 progress 對應；受限 disclosure panel 可為局部 scroller。

僅狀態展示；完整 preview 可上下滑與點 progress

Read 組裝契約

Components · Shell domain

Shell 與導航狀態

先用眼睛比較 selected／unselected，再到 live preview 操作四條獨立 stack。

selected

unselected

Bottom nav：selected／unselected

四格 root 導覽的高頻狀態；個股從 root push 進去，不額外佔一格。

僅狀態展示

查看 Nav 完整契約

Shell live preview

從實際 preview-shell.html 渲染，可切換 root tab、push、back，並觀察 depth 與狀態保留。

可操作

查看 Stack 完整契約

Implementation reference · Shell 25 個元件／元件群

完整 row-level class、用途、狀態／變體、token 依賴與 contract 深連結保留在 DOM；人類預設不必閱讀。

class	用途	狀態／變體	token 依賴	完整契約
`.lila-shell`	固定 App 外框與四列版位	內嵌／全高	`--shell-*`、surface、radius、z	§5
`.shell-statusbar`	status chrome 與 safe top	mark＋系統 icon	`--statusbar-height`、space、text/bg	§5
`.shell-header`	root／push 共用 header	root／depth；文字／骨架 title	header、divider、shadow、z、space	§5
`.shell-header-back`	pop 目前 stack	`.is-root`／active	space、radius、accent、motion	§5
`.shell-header-title`	root 名或次層骨架 title	文字／`.is-placeholder`	type、skeleton、radius	§5
`.shell-depth` / `.shell-depth-dot`	stack 深度指示	current／previous；JS 動態數量	space、border、accent	§5
`.shell-content`	root viewport 與 clipping 邊界	預設	surface、`--z-base`	§5
`.shell-root`	單一 root tab 的獨立 stack	active／hidden；四個固定 root	無額外視覺 token	§5
`.shell-stack`	同 root 的 page 疊層	預設	surface	§5
`.shell-stack-page`	可 push/back 的 page 層	active／under／preparing／exiting；root／骨架 title	motion、surface、z	§5＋fill 追加
`.shell-page-scroll`	預設模式的唯一縱向 scroller	default／fill 時不捲	無額外視覺 token	fill §2
`.shell-slot`	內容 domain 唯一 mount seam	empty／mounted；edge-to-edge	min-size；fill 時確定高度	§6
`.shell-nav`	四格 root nav 與 safe bottom	固定四格	nav size、safe、divider、shadow、z	§3
`.shell-tab`	單一 root tab	selected／unselected／pressed／focus；badge	text、accent、radius、type、motion	§3
`.shell-tab-icon`	tab icon 容器	selected／unselected；SVG	space、radius、accent	§5
`.shell-tab-label`	tab 固定文字	selected／unselected；四個固定 label	type、weight	§3
`.shell-tab-badge`	無數字通知圓點	hidden／visible	space、bg、accent、radius	§3
`.shell-placeholder-page`	preview 骨架頁；runtime 可替換	root／detail	space	§5
`.shell-skeleton-line`	文字資訊骨架	default／short	skeleton、space、radius	§5
`.shell-skeleton-block`	大型資訊區骨架	default	skeleton、space、radius	§5
`.shell-skeleton-card`	卡片／清單資訊骨架	可含 line／icon	skeleton、surface、border、shadow、space	§5
`.shell-skeleton-icon`	圖像資訊骨架	default	skeleton、space、radius	§5
`.shell-skeleton-group`	多個骨架的排列容器	default	space	§5
`.shell-placeholder-action`	preview 的 push 觸發控制	default／pressed／focus；不同深度入口	surface、border、text、space、motion	§5
`.shell-preview-*`	Shell preview 展示外框，非 runtime	demo／state gallery	shell size、surface、border、shadow、space	§5

Components · Lists domain

股票列與清單狀態

資訊位維持骨架；用外部 anatomy 標籤說明 identity／quote／action／reason，不填假價格或假理由。

identityquoteactionreason

selected／批次態

編輯態

Stock row：loading／selected／編輯態

同一列只替換 leading 與 action；清單可以表達狀態，但不在 catalog 補上業務 controller。

僅狀態展示：chip、編輯與批次控制未接 controller

查看 Stock row 完整契約

Lists state gallery

從實際 preview-lists.html 渲染 feed、股票列、自選編輯態、市場分段與個人入口。

僅狀態展示：未接 controller

查看 Lists 完整契約

Implementation reference · Lists 33 個元件

完整 row-level 索引仍在 DOM，預設收合；每列的必要 class、狀態、變體與 token 依賴沒有刪除。

class	用途	狀態／變體	token 依賴	完整契約
`.list-stack`	四條 root 的清單層根容器	default；flush 由 content 控制	bg、text、font	§6
`.list-stack__content`	清單內容 padding 與 section gap	default／`--flush`	space	§6
`.list-section`	通用內容分組	default	space	§6
`.stock-list`	一般股票列集合	default／外層 aria busy	space	§6
`.feed-list`	Feed 分組與卡片集合	default／aria busy	space	§6
`.list-section-header`	分組標題、meta、右側動作	copy／meta／action 可省略	text、space	§6
`.filter-strip`	水平捲動 chip 容器	default	space	§6
`.filter-chip`	Feed 篩選	selected／unselected／disabled	accent、border、radius、type、space、motion	§6
`.segmented-control`	市場分類切換	selected／unselected；三欄	surface、border、radius、space、shadow	§6
`.stock-row`	股票列共同外殼	pressed／selected／disabled／loading；up/down/flat/card/compact/draggable	surface、divider、border、radius、space、motion	§3
`.stock-row__primary`	進入個股的主點擊區	active／focus；button／anchor	text、space、focus、motion	§3
`.stock-row__identity`	股票識別插槽	default／loading	text、mono、space	§3
`.stock-row__quote`	價格／漲跌插槽	up／down／flat／loading	text、mono、up/down/flat、space	§3
`.stock-row__sparkline`	迷你走勢插槽	skeleton	skeleton、radius、space	§3
`.stock-row__leading`	編輯／選取前置控制槽	empty／populated；drag／select	space	§3
`.stock-row__action`	右側動作槽	empty／populated；watch／delete／chevron	space	§3
`.row-action`	加入自選或通用右側動作	pressed／watchlisted／unwatchlisted	accent、text、radius、space	§6
`.drag-handle`	自選排序控制	idle／active	text、radius、space	§6
`.selection-control`	批次選取控制	selected／unselected	accent、inverse、border、radius	§6
`.delete-control`	自選刪除入口	idle／focus	surface、text、radius、space	§6
`.feed-card`	今日重點卡外殼	default	surface、border、radius、shadow	§6
`.reason-slot`	Feed 推薦理由承載位	skeleton／populated；本輪只 skeleton	surface、divider、text、radius、space	§6
`.empty-state`	Feed／自選／市場空狀態	mark／CTA 可省略	surface、border、radius、text、space	§6
`.list-edit-toolbar`	自選正常／編輯模式切換列	normal／editing	surface、border、radius、space	§6
`.batch-bar`	自選批次摘要與動作	none-selected／selected	surface、border、radius、space	§6
`.text-action`	toolbar／empty-state 文字動作	default／focus；filled	accent、inverse、type、radius、space	§6
`.destination-list`	非股票目的地集合	default	surface、border、radius	§6
`.destination-row`	「我的」等入口列	active／focus	text、divider、space	§6
`.profile-shell`	「我的」空殼	default	space	§6
`.profile-shell__placeholder`	未定設定區骨架	skeleton	surface、border、radius、space	§6
`.skeleton-line`	文字／數字骨架	long／medium／short／number	skeleton、radius、space、width tokens	§5
`.skeleton-text-group`	一致的多行骨架排版	two-line／numeric	skeleton、space	§5
`.skeleton-block--sparkline`	迷你走勢骨架	default	skeleton	§5

Components · Read domain

滑動判讀與系統狀態

Ready／Loading／Empty 並排。判讀要教哪一段、K 線位置與判讀層 nav 都還沒定。

progressviewportcontentstate

ready

empty

Reader：ready／loading／empty

把正常閱讀與系統狀態分開呈現；狀態層覆蓋 viewport，但不替未定的資訊內容填答案。

僅狀態展示

查看 Reader 狀態契約

Read live preview

從實際 preview-read.html 渲染；第一卡可操作 term／judgment Info 的單開、多開與 panel 捲動，portrait 會實跑 cold-start false→true，也可切到 consumer 短高退場與未退場反例；其餘卡可上下滑、點 progress，並切換 ready／loading／empty。

可操作

查看 Read 完整契約

Implementation reference · Read 10 個元件／元件群

完整 class、必要 DOM、狀態／變體、token 依賴與契約深連結保留在收合內容。

class	用途	狀態／變體	token 依賴	完整契約
`.read-swipe`	reader 根節點與狀態邊界	ready／loading／empty；first／middle／last；任意卡數	surface、z、space、motion	§6
`.read-swipe__progress`	目前段落與直接跳段	normal／root-state disabled；自動段數	space、color、z-header	§6
`.read-swipe__segment`	單一段落跳轉 hit target	pending／complete／current／focus／active	accent、motion	§6
`.read-swipe__viewport`	唯一頁面／翻卡主軸縱向 scroller；受限 disclosure panel 可為局部 scroller	ready／inert／focus；touch／wheel／keyboard	surface、focus、motion	§5
`.read-card`	一個判讀 lens／步驟	active／inert；預設內容長短可變；consumer Info fit opt-in	space、border、surface	fit 追加
`.read-card__content`	卡內資訊分區容器	靜態；K 線／metrics／block 可組合	space、shell width	§6
`.read-card__*` skeleton primitives	卡內可替換資訊骨架	skeleton；line／metric／block	skeleton、space、radius、border	§6
`.read-kline`	唯一具體圖形：假資料 K 線	up／down／flat candle	up/down/flat、divider、surface、space	§4
`.read-swipe__state[data-read-loading]`	blocking loading layer	visible／hidden；spinner＋骨架	surface、skeleton、motion、z	§6
`.read-swipe__state[data-read-empty]`	blocking empty layer	visible／hidden	surface、skeleton、z	§6

Components · Info domain

Term 與 Judgment 解說

Term 沿用既有 disclosure；judgment 只增加可重複的多行 panel，不發明按鈕視覺差異。文案、行數與段義仍由 BRIEF／COPY-STYLE 決定。

Info live preview

Term／judgment 並排展示 collapsed／expanded；可驗證多按鈕、可重複 line、aria-expanded 與 hidden 同步。

可操作

查看 Judgment 與 fit panel 契約

Implementation reference · Info 5 個元件

Judgment 的 canonical discriminator 只放在 stack；`data-info-part` 是可選 metadata，不是三段完整度 gate。

class	用途	狀態／變體	token 依賴	完整契約
`.info-stack`	trigger 與 panel 容器	term 預設／`data-info-kind="judgment"`	space	§8
`.info-trigger-row`	可換行 trigger 列	單一／多按鈕	space	§5
`.info-button`	切換對應 panel	collapsed／expanded／focus；fit 可選	size、text、surface、focus、motion	§4
`.info-panel`／`--judgment`	解說；fit opt-in 才有受限高度捲動	hidden／visible／fit scrollable focus／unusable signal	space、text、accent、focus	§9
`.info-panel__line`	Judgment 可重複 line	`data-info-part` 可選	`--space-2`	§8.1

Patterns metadata

可重複的組裝方式

Pattern 由多個 component 與狀態／事件接縫組成；先看關係圖，需要實作時才展開最小 HTML。

read card→term／judgment Info

Read × Info fit

固定單卡使用 opt-in fit；測試矩陣逐格宣告 useFit。系統不自動退場；不支援的短高或 landscape 由 consumer 成對移除 card／trigger fit attributes。

查看 Read × Info 接縫契約

查看組裝 HTML

<article class="read-card" data-read-card data-read-info-fit="viewport">
  <div class="read-card__content">
    <div class="info-stack">
      <div class="info-trigger-row">
        <button id="fit-trigger" class="info-button" type="button" data-info="fit" data-info-fit-trigger aria-expanded="false" aria-controls="fit-panel">術語 ℹ</button>
      </div>
      <p id="fit-panel" class="info-panel" data-info-panel="fit" aria-labelledby="fit-trigger" hidden>...</p>
    </div>
    <div data-info-collapse-on-open>...BRIEF 指定的低優先內容...</div>
  </div>
</article>

root page→page scroll

Root stack 必要骨架

把一個 root page 掛進 shell 的 stack host，預設由 shell page scroll 負責垂直捲動。

查看 Root stack 契約

查看組裝 HTML

<section class="shell-stack-root" data-shell-root="today">
  <article class="shell-stack-page is-active" data-shell-page>
    <header class="shell-header" data-shell-header>...</header>
    <div class="shell-page-scroll" data-shell-scroll>
      <main class="shell-slot" data-shell-slot>...</main>
    </div>
  </article>
</section>

預設捲動／fill child 捲動

預設捲動 vs fill

一般頁由 shell 捲；需要內部唯一 scroller 的頁面用 fill，取得確定高度與 min-height: 0。

查看 Fill seam 契約

查看組裝 HTML

<article class="shell-stack-page" data-shell-page data-shell-scroll-mode="fill">
  <header class="shell-header" data-shell-header>...</header>
  <div class="shell-page-scroll" data-shell-scroll>
    <main class="shell-slot" data-shell-slot>
      <section class="read-swipe" data-read-swipe>...</section>
    </main>
  </div>
</article>

stock row→fill reader

股票列 push 到判讀層

股票列只發起導覽；shell push 一個 fill page，reader 自己管理縱向 scroll。

查看跨 domain 組裝契約

查看組裝 HTML

<article class="stock-row">
  <button class="stock-row__primary" type="button" data-phone-push>...</button>
</article>

<template data-reader-page>
  <article class="shell-stack-page" data-shell-page data-shell-scroll-mode="fill">
    <div class="shell-page-scroll" data-shell-scroll>
      <main class="shell-slot" data-shell-slot>
        <section class="read-swipe" data-read-swipe>...</section>
      </main>
    </div>
  </article>
</template>

loading rows→empty state

清單載入／空狀態

Feed 載入用骨架列；沒有內容時用 empty-state，不填選股、推薦或原因。

查看清單狀態契約

查看組裝 HTML

<section class="feed-list" aria-busy="true">
  <article class="stock-row stock-row--loading">...</article>
</section>

<section class="empty-state">
  <span class="empty-state__mark"></span>
  <span class="skeleton-line"></span>
</section>

edit toolbar→batch bar

編輯態與批次態

自選清單在相同股票列上切換拖曳／刪除與選取／批次操作，但業務 controller 仍未定。

查看編輯／批次契約

查看組裝 HTML

<div class="list-edit-toolbar">...</div>
<article class="stock-row stock-row--draggable">
  <span class="stock-row__leading">...</span>
  <span class="stock-row__primary">...</span>
  <span class="stock-row__action">...</span>
</article>
<div class="batch-bar">...</div>

Layer 1

Foundations

樣本直接引用 var(--token)；頁面載入後的文字值由 getComputedStyle 讀取目前 CSS，不在 HTML 複製 token 值。

載入順序契約 tokens.css → utilities.css → domain CSS（shell.css / lists.css / read.css / info.css） 本頁只直接載入 tokens 與 utilities；domain specimen 由既有 preview iframe 載入，避免 catalog 另抄 domain CSS。

色彩

--color-bg[PO]

--color-surface[PO]

--color-surface-raised[H1]

--color-scrim[PO]

--color-border[PO]

--color-border-strong[PO]

--color-divider[PO]

--color-text[PO]

--color-text-secondary[PO]

--color-text-tertiary[PO]

--color-text-inverse[PO]

--color-skeleton[PO]

--color-skeleton-shimmer[PO]

--color-accent[PO]

--color-accent-weak[PO]

--color-focus[PO]

--color-up[H1]

--color-up-weak[PO]

--color-down[H1]

--color-down-weak[PO]

--color-flat[PO]

字體、字級、行高、字重

Aa 籌碼 K 線

--font-sans[PO]

Aa 012345

--font-mono[PO]

Aa 籌碼 K 線

--text-xs[H1]

Aa 籌碼 K 線

--text-sm[H1]

Aa 籌碼 K 線

--text-md[H1]

Aa 籌碼 K 線

--text-lg[H1]

Aa 籌碼 K 線

--text-xl[H1]

Aa 籌碼 K 線

--text-2xl[PO]

緊密行高樣本

--leading-tight[PO]

一般行高樣本

--leading-normal[PO]

Regular

--weight-regular[PO]

Medium

--weight-medium[PO]

Bold

--weight-bold[H1]

間距尺規

--space-0[PO]

--space-1[H1]

--space-2[H1]

--space-3[H1]

--space-4[H1]

--space-5[H1]

--space-6[PO]

--space-8[PO]

--space-10[PO]

--space-12[PO]

圓角與陰影

--radius-sm[PO]

--radius-md[H1]

--radius-lg[H1]

--radius-pill[PO]

--shadow-sm[PO]

--shadow-md[PO]

--shadow-nav[PO]

轉場

將游標移入卡片可看目前 duration／easing；讀值仍直接來自 token。

--duration-fast[PO]

--duration-base[PO]

--duration-slow[PO]

--ease-standard[PO]

--ease-decelerate[PO]

z-index 層級

base

--z-base[PO]

nav

--z-nav[PO]

header

--z-header[PO]

push

--z-push[PO]

sheet

--z-sheet[PO]

Shell 尺寸

--shell-width[PO]

--shell-height[PO]

--statusbar-height[PO]

--header-height[PO]

--navbar-height[PO]

--safe-bottom[PO]

Utilities 與其他契約 token

.visually-hidden

跨 domain 的輔助技術隱藏工具。下一行在視覺上隱藏，但仍留在 accessibility tree。

<span class="visually-hidden">輔助技術文字</span>

--opacity-disabled[PO]

--skeleton-width-long[PO]

--skeleton-width-medium[PO]

--skeleton-width-short[PO]

--skeleton-width-number[PO]

--gesture-swipe-threshold[PO]