設計系統提供嘅嘢嘅概覽。主題：day。語言：廣東話。
組件做唔到嘅形狀，因為佢哋包住嘅主體淨係叫嗰邊先知：區塊卡、資料格網、展開選單，同埋外殼自己嘅框架。tokens.css 提供類別，應用程式自己寫標記。下面全部就係 ui.Styleguide 回傳嘅嗰份範例，亦係 ui 嘅測試攞嚟同 tokens.css 對照嗰份。
連結唔會有反應，範例原始碼另外提供。
有內距嘅分節卡片，同坐喺佢外面嗰個標題。
rst-list 同 rst-card 特登冇內距：佢哋裝嘅係一串行，每行自己有內距。將表單、段落、一排連結或者任何唔係行嘅嘢直接擺入去，就會貼實個邊框畫出嚟——文字掂到邊就係嗰個訊號。畀任意內容用嘅有內距卡片係 rst-box，佢個標題係擺喺前面嘅兄弟節點 rst-box-head。
<div rst-box-head><h2>Payout</h2><a rst-btn href="/payout/edit">Edit</a></div>
<section rst-box><p>Everything on a screen sits inside boxes.</p><div rst-box-foot>Last updated 2 hours ago</div></section>匿喺頁首溢出選單同清單列篩選背後嘅 details/summary 選單，加埋一個可以摘走嘅已套用篩選標籤。
<details rst-dropdown name="rst-menus">
<summary>Filter<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span><span class="rst-sr-only">Filter orders: Paid</span></summary>
<div rst-dropdown-menu>
<a aria-current="true" href="/orders?status=paid">Paid</a>
<details rst-menu-group name="rst-menus-price" open><summary>Price</summary><div><a href="/orders?price=free">Free</a></div></details>
</div>
</details>
<span rst-ftok><span rst-ftok-k>Paid</span><a href="/orders" aria-label="Remove filter Paid">✕</a></span>畀表單節奏同儲存列嘅嗰啲屬性。冇任何片段會出佢哋——佢哋係包住呼叫方自己砌出嚟嘅一串欄位。
<form rst-form-flow method="post" action="/settings">
<div rst-field>
<label rst-field-label for="name">Name</label>
<input rst-input type="text" id="name" name="name">
</div>
<div rst-field>
<label rst-field-label for="email">Email</label>
<input rst-input type="email" id="email" name="email">
</div>
<div rst-field-row>
<div class="rst-grow" rst-field>
<label rst-field-label for="city">City</label>
<input rst-input type="text" id="city" name="city">
</div>
<div rst-field>
<label rst-field-label for="zip">ZIP</label>
<input rst-input="short" type="text" id="zip" name="zip">
</div>
</div>
<div rst-form-bar>
<span rst-form-bar-note>Changes save immediately.</span>
<div rst-form-actions>
<a rst-btn href="/settings">Cancel</a>
<button rst-btn="primary" type="submit">Save</button>
</div>
</div>
</form>一個有邊框嘅問號，連去說明文章。佢個 CSS 提示只係裝飾；個連結自己有完整句子嘅標籤。
<a rst-help rst-tip href="/help/orders" target="_blank" rel="noopener" aria-label="Help: orders" data-tip="About orders"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg></a>真正嘅資料表格講法：卡片一次過定好啲欄，行淨係揀格。
一個畫面就係一欄：page-header，跟住 section-header 加卡，再跟住下一個 section-header 加卡，按閱讀次序排。橫向排列淨係留返俾自己帶埋嘅寫法：rst-box-head、rst-field-row、rst-lbar、rst-lrow 格、rst-seg-tabs。
<div rst-card style="--rst-cols: 2fr 110px 32px">
<div rst-lrow="head"><span>Order</span><span class="rst-m-hide">Status</span><span></span></div>
<div rst-lrow>
<a class="rst-nm" href="/orders/AB3PX"><bdi>Grace Hopper</bdi><small>AB3PX · <bdi>grace@example.com</bdi></small></a>
<span class="rst-m-hide rst-cell-mut">Paid</span>
<details rst-row-menu name="rst-menus"><summary aria-label="Actions for order AB3PX"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></summary>
<div rst-row-menu-panel><a href="/orders/AB3PX">View</a><hr><button type="submit" class="rst-danger">Refund order…</button></div>
</details>
</div>
<p rst-no-match>No orders match. <a href="/orders">Clear filters</a></p>
</div>
<p rst-count-line>Displaying <strong>1–20</strong> of <strong>412</strong></p>模態框有佢自己嘅網址，唔係客戶端狀態：下面嗰版標成 inert，面板喺上面，關閉係一個普通連結。
<div rst-backdrop inert>
<div rst-page><h1>Settings</h1></div>
</div>
<div rst-modal-overlay>
<dialog rst-modal-panel open aria-labelledby="modal-title">
<nav>
<a href="/settings/profile" aria-current="page">Profile</a>
<a href="/settings/billing">Billing</a>
<a href="/settings/notifications">Notifications</a>
</nav>
<section>
<a rst-modal-close href="/settings" aria-label="Close settings">✕</a>
<h2 id="modal-title">Profile</h2>
<p>Update the name and photo shown across the account.</p>
</section>
</dialog>
</div>去佢真正屬於嗰個網址度睇佢行 (喺新分頁度打開).
喺揀選模式下，清單一行戴住嘅勾選框。佢個標籤會將呢行嘅身分再講多次。
<label rst-selbox><input type="checkbox" aria-label="Select order AB3PX"></label>sidebar 外殼自己嘅框架，細過 800px 就摺埋做一個 details 展開塊。
<div rst-shell-sidebar>
<a rst-skip href="#main">Skip to content</a>
<details rst-shell-chrome><summary><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg>Menu</summary></details>
<aside rst-shell-rail><a rst-shell-brand href="/">Notes</a>
<nav rst-shell-nav><span rst-shell-group>Work</span><a href="/" aria-current="page">Dashboard</a><a href="/reports">Reports</a></nav>
</aside>
<main rst-shell-main id="main"><div rst-page>Content.</div></main>
</div>打開側欄外殼嘅示範，一個獨立預覽。 (喺新分頁度打開).
頂欄外殼自己嘅框架，用標記寫出嚟。Layout 會將佢當成一整份範本提供。
<div rst-shell-topbar>
<a rst-skip href="#main">Skip to content</a>
<header rst-shell-bar><a rst-shell-brand href="/">Notes</a>
<details rst-shell-menu name="rst-shell-menu"><summary><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg>Menu</summary></details>
<div rst-shell-tail>
<nav rst-shell-nav><a href="/" aria-current="page">Home</a><a href="/archive">Archive</a></nav>
<details rst-dropdown rst-shell-account name="rst-menus"><summary>Account<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></summary>
<div rst-dropdown-menu><a href="/settings">Settings</a></div></details>
</div>
</header>
<main rst-page id="main">Content.</main>
<footer rst-shell-foot>Made with rastrillo</footer>
</div>打開頂欄外殼嘅示範，一個專用預覽。 (喺新分頁度打開).
儀表板頂部一行數字。
<div rst-stats>
<div rst-stat="lead"><span rst-stat-label>Revenue this month</span><span rst-stat-num>€48,210</span><span rst-stat-delta rst-tone="positive">+12%</span><span rst-stat-note>vs. last month</span></div>
<div rst-stat><span rst-stat-label>Orders today</span><span rst-stat-num>318</span></div>
<div rst-stat><span rst-stat-label>Average basket</span><span rst-stat-num>€41.20</span><span rst-stat-delta rst-tone="negative">−3%</span></div>
<div rst-stat><span rst-stat-label>Refunds</span><span rst-stat-num>7</span></div>
</div>一張有邊框嘅卡片，個內容淨係喺開關開咗嗰陣先用 :has() 顯示。開關先係真正嘅狀態；顯示只係方便。
<div rst-tblock>
<label rst-tblock-head><input type="checkbox" name="notify" checked>
<span rst-switch-track aria-hidden="true"></span>
<span><span rst-tblock-title>Email notifications</span><span rst-tblock-desc>Sent for every reply to a thread you're in.</span></span>
</label>
<div rst-tblock-body>
<div rst-field>
<label rst-field-label for="notify-freq">Frequency</label>
<input rst-input type="text" id="notify-freq" name="notify_freq" value="Daily digest">
</div>
</div>
</div>