Mercurial

comparison design_system/src/index.html @ 252:7a7581f040e8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add scoped notification component Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 11:57:16 -0700
parents 117c4d53c9a4
children 2b6e732087ff
comparison
equal deleted inserted replaced
251:117c4d53c9a4 252:7a7581f040e8
28 <nav class="catalog-nav" aria-label="Components"> 28 <nav class="catalog-nav" aria-label="Components">
29 <a href="/components/button" data-catalog-link>Button</a> 29 <a href="/components/button" data-catalog-link>Button</a>
30 <a href="/components/card" data-catalog-link>Card</a> 30 <a href="/components/card" data-catalog-link>Card</a>
31 <a href="/components/alert" data-catalog-link>Alert</a> 31 <a href="/components/alert" data-catalog-link>Alert</a>
32 <a href="/components/field" data-catalog-link>Field</a> 32 <a href="/components/field" data-catalog-link>Field</a>
33 <a href="/components/notifications" data-catalog-link>Notifications</a>
33 <a href="/components/stack" data-catalog-link>Stack</a> 34 <a href="/components/stack" data-catalog-link>Stack</a>
34 </nav> 35 </nav>
35 36
36 <button id="themeToggle" class="theme-toggle" type="button"> 37 <button id="themeToggle" class="theme-toggle" type="button">
37 Toggle theme 38 Toggle theme
79 <a href="/components/field" data-catalog-link> 80 <a href="/components/field" data-catalog-link>
80 <zen-card interactive><article><h3>Field</h3><p>Labels, controls, help text, and validity wiring.</p></article></zen-card> 81 <zen-card interactive><article><h3>Field</h3><p>Labels, controls, help text, and validity wiring.</p></article></zen-card>
81 </a> 82 </a>
82 <a href="/components/stack" data-catalog-link> 83 <a href="/components/stack" data-catalog-link>
83 <zen-card interactive><article><h3>Stack</h3><p>A tiny layout primitive driven by HTML attributes.</p></article></zen-card> 84 <zen-card interactive><article><h3>Stack</h3><p>A tiny layout primitive driven by HTML attributes.</p></article></zen-card>
85 </a>
86 <a href="/components/notifications" data-catalog-link>
87 <zen-card interactive><article><h3>Notifications</h3><p>A bounded, scoped, bottom-right notification stack.</p></article></zen-card>
84 </a> 88 </a>
85 </div> 89 </div>
86 </section> 90 </section>
87 91
88 <section class="catalog-page" data-catalog-page="tokens" hidden> 92 <section class="catalog-page" data-catalog-page="tokens" hidden>
215 </zen-stack> 219 </zen-stack>
216 </template> 220 </template>
217 </zen-story> 221 </zen-story>
218 </section> 222 </section>
219 223
224 <section class="catalog-page" data-catalog-page="notifications" hidden>
225 <header class="page-heading">
226 <p class="eyebrow">Component</p>
227 <h1>Notifications</h1>
228 <p>A scoped bottom-right stack with bounded records, deduplication, announcements, actions, and paused finite timers.</p>
229 </header>
230 <zen-story name="Notification stack">
231 <template>
232 <zen-notifications aria-label="Catalog notifications">
233 <zen-stack direction="row">
234 <zen-button variant="quiet">
235 <button
236 type="button"
237 data-notification-demo
238 data-notification-id="catalog-info"
239 data-tone="info"
240 data-message="Build started"
241 data-description="The worker accepted your request."
242 >Info</button>
243 </zen-button>
244 <zen-button>
245 <button
246 type="button"
247 data-notification-demo
248 data-notification-id="catalog-success"
249 data-tone="success"
250 data-message="Deployment complete"
251 >Success</button>
252 </zen-button>
253 <zen-button variant="danger">
254 <button
255 type="button"
256 data-notification-demo
257 data-notification-id="catalog-error"
258 data-tone="error"
259 data-message="Deployment failed"
260 data-description="The previous release is still active."
261 data-action="true"
262 >Error with action</button>
263 </zen-button>
264 <zen-button variant="quiet">
265 <button
266 type="button"
267 data-notification-demo
268 data-notification-id="catalog-persistent"
269 data-tone="warning"
270 data-message="Manual action required"
271 data-persistent="true"
272 >Persistent</button>
273 </zen-button>
274 <zen-button variant="quiet">
275 <button
276 type="button"
277 data-notification-demo
278 data-notification-id="catalog-burst"
279 data-tone="info"
280 data-message="Queued notification"
281 data-burst="true"
282 >Add five</button>
283 </zen-button>
284 <zen-button variant="quiet">
285 <button
286 type="button"
287 data-notification-dismiss-demo="catalog-persistent"
288 >Dismiss persistent</button>
289 </zen-button>
290 </zen-stack>
291 </zen-notifications>
292 </template>
293 </zen-story>
294 </section>
295
220 <section class="catalog-page" data-catalog-page="stack" hidden> 296 <section class="catalog-page" data-catalog-page="stack" hidden>
221 <header class="page-heading"> 297 <header class="page-heading">
222 <p class="eyebrow">Component</p> 298 <p class="eyebrow">Component</p>
223 <h1>Stack</h1> 299 <h1>Stack</h1>
224 <p>A flex layout primitive with readable direction and gap attributes.</p> 300 <p>A flex layout primitive with readable direction and gap attributes.</p>