-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdemo.html
More file actions
111 lines (105 loc) · 7.66 KB
/
Copy pathdemo.html
File metadata and controls
111 lines (105 loc) · 7.66 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Tags — Component workbench</title>
<link rel="stylesheet" href="../index.css">
</head>
<body>
<a class="skip-link" href="#main-content">Skip to component workbench</a>
<main id="main-content" tabindex="-1">
<container>
<layout-stack gap="var(--space-3xl)">
<header data-prose>
<eyebrow>Component workbench</eyebrow>
<h1>Practical interface patterns, composed</h1>
<p class="lead">This is a focused integration test for forms, feedback, disclosure, data display, carousels, and native interaction states.</p>
<layout-cluster gap="var(--space-sm)">
<badge status="success">Semantic HTML</badge>
<badge variant="subtle">Progressive enhancement</badge>
<badge variant="subtle">Token driven</badge>
</layout-cluster>
</header>
<section aria-labelledby="support-title">
<layout-switcher threshold="42rem" gap="var(--space-xl)">
<card>
<card-body>
<form>
<layout-stack gap="var(--space-lg)">
<div><p class="eyebrow">Support request</p><h2 id="support-title">Tell us what happened</h2><p class="text-subtle">Native labels and validation remain the accessibility contract.</p></div>
<label>Work email<input class="form-input" type="email" placeholder="you@company.com" required></label>
<label>Area<select class="form-select"><option>Billing</option><option>Account access</option><option>Bug report</option></select></label>
<label>Summary<textarea class="form-textarea" placeholder="Include what you expected and what happened."></textarea><small>Do not include passwords or API keys.</small></label>
<file-dropzone>
<strong>Drop screenshots here or choose files</strong>
<small>PNG, JPG, or WebP up to 10 MB</small>
<input type="file" multiple accept="image/png,image/jpeg,image/webp" aria-label="Attach screenshots">
</file-dropzone>
<layout-cluster justify="flex-end"><button class="button-ghost" type="reset">Clear</button><button class="form-button" type="submit">Send request</button></layout-cluster>
</layout-stack>
</form>
</card-body>
</card>
<layout-stack gap="var(--space-md)">
<div class="alert" status="success" role="status"><span class="alert__icon" aria-hidden="true">✓</span><div><strong class="alert__title">Workspace connected</strong><p class="alert__body">Diagnostics can include the current release automatically.</p></div></div>
<div class="alert" status="warning" role="note"><span class="alert__icon" aria-hidden="true">!</span><div><strong class="alert__title">Response times</strong><p class="alert__body">Priority requests currently take about two hours.</p></div></div>
<card>
<card-body>
<layout-stack gap="var(--space-md)">
<div><p class="eyebrow">Current environment</p><h2>Production</h2></div>
<dl>
<div><dt>Release</dt><dd><code>2026.07.22</code></dd></div>
<div><dt>Region</dt><dd>US East</dd></div>
<div><dt>Status</dt><dd><badge status="success">Healthy</badge></dd></div>
</dl>
</layout-stack>
</card-body>
</card>
</layout-stack>
</layout-switcher>
</section>
<section aria-labelledby="workflow-title">
<layout-stack gap="var(--space-lg)">
<header data-prose><h2 id="workflow-title">A no-JavaScript workflow explainer</h2><p>These tab-like panels are native disclosures. They remain operable if enhancement scripts never load.</p></header>
<div data-tabs-details style="--tab-count: 3">
<details name="support-workflow" open style="--n: 1"><summary>Report</summary><div class="p-lg"><h3>Start with context</h3><p>Describe the affected task and include a minimal reproduction when possible.</p></div></details>
<details name="support-workflow" style="--n: 2"><summary>Triage</summary><div class="p-lg"><h3>We reproduce the issue</h3><p>Semantic state and release metadata help route the request quickly.</p></div></details>
<details name="support-workflow" style="--n: 3"><summary>Resolve</summary><div class="p-lg"><h3>Track the outcome</h3><p>The resolution includes impact, workarounds, and the release containing the fix.</p></div></details>
</div>
</layout-stack>
</section>
<section aria-labelledby="requests-title">
<layout-stack gap="var(--space-lg)">
<layout-cluster justify="space-between"><div><p class="eyebrow">Queue</p><h2 id="requests-title">Recent requests</h2></div><button type="button" class="button-outline">Export CSV</button></layout-cluster>
<div data-table-scroll tabindex="0" aria-label="Recent support requests">
<table>
<thead><tr><th scope="col">Request</th><th scope="col">Owner</th><th scope="col">Priority</th><th scope="col">Status</th><th scope="col">Updated</th></tr></thead>
<tbody>
<tr><th scope="row">Invoice address</th><td>Mina</td><td>Normal</td><td><badge status="success">Resolved</badge></td><td>8 min ago</td></tr>
<tr><th scope="row">Cannot invite member</th><td>Chris</td><td>High</td><td><badge status="warning">Investigating</badge></td><td>24 min ago</td></tr>
<tr><th scope="row">Webhook retries</th><td>Jo</td><td>Normal</td><td><badge status="info">Waiting</badge></td><td>1 hr ago</td></tr>
</tbody>
</table>
</div>
</layout-stack>
</section>
<section aria-labelledby="stories-title">
<layout-stack gap="var(--space-lg)">
<header data-prose><h2 id="stories-title">Customer stories</h2><p>The carousel works as a touch-friendly scroll-snap reel before JavaScript adds its buttons.</p></header>
<section data-carousel radius="var(--radius-xl)" aria-label="Customer stories">
<div data-carousel-slides>
<article data-carousel-item><div class="bg-surface-subtle p-xl"><blockquote>“The semantic defaults gave our team a common language without hiding the platform.”</blockquote><p><strong>Priya Shah</strong><br><span class="text-subtle">Design systems lead, Arc</span></p></div></article>
<article data-carousel-item><div class="bg-accent p-xl"><blockquote>“We replaced a pile of wrappers with native elements and a handful of tokens.”</blockquote><p><strong>Mateo Ruiz</strong><br><span class="text-subtle">Frontend engineer, Relay</span></p></div></article>
<article data-carousel-item><div class="bg-surface-overt p-xl"><blockquote>“Layouts now respond to their container, so the same module works everywhere.”</blockquote><p><strong>Alex Kim</strong><br><span class="text-subtle">Product engineer, Fieldwork</span></p></div></article>
</div>
<button type="button" data-carousel-trigger direction="prev" aria-label="Previous story">‹</button>
<button type="button" data-carousel-trigger direction="next" aria-label="Next story">›</button>
</section>
</layout-stack>
</section>
</layout-stack>
</container>
</main>
</body>
</html>