asw-v01: archive deferred content (packs, site, lab, legacy examples)
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
This commit is contained in:
exe.dev user
parent
416fe2f180
commit
e47a9f4401
173 changed files with 11 additions and 5 deletions
69
archive/examples-legacy/components/buttons.html
Normal file
69
archive/examples-legacy/components/buttons.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Buttons — ASW Examples</title>
|
||||
<meta name="description" content="Semantic button variants — type
|
||||
attribute, disabled, loading, link-as-button">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Buttons</h1>
|
||||
<p data-text="lead">Semantic button variants — type attribute,
|
||||
disabled, loading, link-as-button</p>
|
||||
</header>
|
||||
|
||||
<p>Buttons styled through HTML semantics. No class variants —
|
||||
<code>type</code> communicates intent.</p>
|
||||
<h2 id="default-button">Default button</h2>
|
||||
<p>
|
||||
<button>Click me</button>
|
||||
<button type="button">Explicit type</button>
|
||||
</p>
|
||||
|
||||
<h2 id="submit-and-reset">Submit and reset</h2>
|
||||
<form onsubmit="return false">
|
||||
<label>Email
|
||||
<input type="email" name="email" placeholder="you@example.com">
|
||||
</label>
|
||||
<p>
|
||||
<button type="submit">Subscribe</button>
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h2 id="link-styled-as-button">Link styled as button</h2>
|
||||
<p>
|
||||
<a href="#link-button" role="button">Download</a>
|
||||
<a href="#link-button" role="button">View source</a>
|
||||
</p>
|
||||
|
||||
<h2 id="disabled-state">Disabled state</h2>
|
||||
<p>
|
||||
<button>Active</button>
|
||||
<button disabled>Disabled</button>
|
||||
<button type="submit" disabled>Submit (disabled)</button>
|
||||
</p>
|
||||
|
||||
<h2 id="loading-state">Loading state</h2>
|
||||
<p><code>aria-busy="true"</code> shows an inline spinner. No JavaScript
|
||||
needed.</p>
|
||||
<p>
|
||||
<button aria-busy="true">Saving…</button>
|
||||
<button type="submit" aria-busy="true">Processing…</button>
|
||||
</p>
|
||||
|
||||
<h2 id="button-group">Button group</h2>
|
||||
<p>
|
||||
<button type="submit">Save changes</button>
|
||||
<button type="reset">Discard</button>
|
||||
<button type="button" disabled>Delete</button>
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
59
archive/examples-legacy/components/callouts.html
Normal file
59
archive/examples-legacy/components/callouts.html
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Callouts — ASW Examples</title>
|
||||
<meta name="description" content="data-callout — structured
|
||||
annotations rendered from GFM blockquote syntax via pandoc pack">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Callouts</h1>
|
||||
<p data-text="lead">data-callout — structured annotations rendered
|
||||
from GFM blockquote syntax via pandoc pack</p>
|
||||
</header>
|
||||
|
||||
<p>Write GFM callout syntax in markdown. The pandoc pack converts it to
|
||||
<code>data-callout</code> attributes. No manual HTML required.</p>
|
||||
<div data-callout="note">
|
||||
<p data-callout-title>Note</p>
|
||||
<p>This is rendered from <code>> [!NOTE]</code> in the markdown
|
||||
source. The pandoc pack converts it to
|
||||
<code><div data-callout="note"></code> at build time.</p>
|
||||
</div>
|
||||
<div data-callout="tip">
|
||||
<p data-callout-title>Tip</p>
|
||||
<p>Use callouts for information that deserves visual separation — not
|
||||
for every paragraph. Sparing use makes them meaningful.</p>
|
||||
</div>
|
||||
<div data-callout="warning">
|
||||
<p data-callout-title>Warning</p>
|
||||
<p>Provider failover is active. Token budget is below 20%. Autonomous
|
||||
session will terminate early if budget exhausted.</p>
|
||||
</div>
|
||||
<div data-callout="error">
|
||||
<p data-callout-title>Error</p>
|
||||
<p>Build failed: <code>templates/pattern.html</code> not found. Check
|
||||
<code>TEMPLATES_DIR</code> in <code>build.sh</code>.</p>
|
||||
</div>
|
||||
<h2 id="in-agent-output">In agent output</h2>
|
||||
<p>An agent can annotate session reports with callouts naturally:</p>
|
||||
<div data-callout="note">
|
||||
<p data-callout-title>Note</p>
|
||||
<p>Disk at 34% — healthy. No action required.</p>
|
||||
</div>
|
||||
<div data-callout="warning">
|
||||
<p data-callout-title>Warning</p>
|
||||
<p><code>node_modules/</code> is 180MB. Consider <code>.gitignore</code>
|
||||
audit before next push.</p>
|
||||
</div>
|
||||
<p>The source stays readable as markdown. The rendered page gets visual
|
||||
weight. One syntax, two audiences.</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
131
archive/examples-legacy/components/forms.html
Normal file
131
archive/examples-legacy/components/forms.html
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Forms — ASW Examples</title>
|
||||
<meta name="description" content="Text inputs, select, textarea,
|
||||
checkboxes, radios, validation states, and helper text">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Forms</h1>
|
||||
<p data-text="lead">Text inputs, select, textarea, checkboxes,
|
||||
radios, validation states, and helper text</p>
|
||||
</header>
|
||||
|
||||
<p>All form elements styled via element selectors. No wrapper classes.
|
||||
Validation via <code>aria-invalid</code>.</p>
|
||||
<h2 id="text-inputs">Text inputs</h2>
|
||||
<p><label>Email address
|
||||
<input type="email" name="email" placeholder="you@example.com"> </label>
|
||||
<label>Full name
|
||||
<input type="text" name="name" placeholder="Jane Smith"> </label>
|
||||
<label>Password
|
||||
<input type="password" name="password" placeholder="••••••••">
|
||||
</label></p>
|
||||
<h2 id="textarea">Textarea</h2>
|
||||
<p><label>Message</p>
|
||||
<textarea name="message" rows="4" placeholder="Your message…"></textarea>
|
||||
|
||||
</label>
|
||||
|
||||
<h2 id="select">Select</h2>
|
||||
<p><label>Country <select name="country">
|
||||
<option value="">Select…</option> <option value="de">Germany</option>
|
||||
<option value="fr">France</option> <option value="it">Italy</option>
|
||||
</select> </label></p>
|
||||
<p><label>Capabilities (multi-select)
|
||||
<select name="capabilities" multiple size="4"> <option value="read">Read
|
||||
files</option> <option value="write">Write files</option>
|
||||
<option value="exec">Execute commands</option>
|
||||
<option value="net">Network access</option> </select> </label></p>
|
||||
<h2 id="checkboxes">Checkboxes</h2>
|
||||
<label>
|
||||
<input type="checkbox" name="opt1" checked>
|
||||
Email notifications
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="opt2">
|
||||
SMS notifications
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="opt3" disabled>
|
||||
Push notifications (unavailable)
|
||||
</label>
|
||||
|
||||
<h2 id="radios">Radios</h2>
|
||||
<fieldset>
|
||||
<legend>Preferred contact method</legend>
|
||||
<label>
|
||||
<input type="radio" name="contact" value="email" checked>
|
||||
Email
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="contact" value="phone">
|
||||
Phone
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="contact" value="post">
|
||||
Post
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<h2 id="fieldset">Fieldset</h2>
|
||||
<fieldset>
|
||||
<legend>Billing address</legend>
|
||||
<label>Street
|
||||
<input type="text" name="street" placeholder="123 Example Lane">
|
||||
</label>
|
||||
<label>City
|
||||
<input type="text" name="city" placeholder="Berlin">
|
||||
</label>
|
||||
<label>Postcode
|
||||
<input type="text" name="postcode" placeholder="10115">
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<h2 id="helper-text">Helper text</h2>
|
||||
<p><label>Username
|
||||
<input type="text" name="username" placeholder="vigilio"> </label>
|
||||
<small>3–20 characters, letters and numbers only.</small></p>
|
||||
<h2 id="validation-states">Validation states</h2>
|
||||
<p><label>Email
|
||||
<input type="email" aria-invalid="true" value="not-an-email"> </label>
|
||||
<small>Enter a valid email address.</small></p>
|
||||
<p><label>Username
|
||||
<input type="text" aria-invalid="false" value="vigilio"> </label>
|
||||
<small>Username is available.</small></p>
|
||||
<p><label>Message</p>
|
||||
<textarea aria-invalid="true" rows="3">Too short.</textarea>
|
||||
|
||||
</label>
|
||||
<small>Message must be at least 20 characters.</small>
|
||||
|
||||
<h2 id="complete-login-form">Complete login form</h2>
|
||||
<form onsubmit="return false">
|
||||
<fieldset>
|
||||
<legend>Sign in</legend>
|
||||
<label>Email
|
||||
<input type="email" name="email" autocomplete="email" placeholder="you@example.com">
|
||||
</label>
|
||||
<label>Password
|
||||
<input type="password" name="password" autocomplete="current-password" placeholder="••••••••">
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="remember">
|
||||
Remember me
|
||||
</label>
|
||||
</fieldset>
|
||||
<p>
|
||||
<button type="submit">Sign in</button>
|
||||
<a href="#">Forgot password?</a>
|
||||
</p>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
101
archive/examples-legacy/components/nav.html
Normal file
101
archive/examples-legacy/components/nav.html
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Navigation — ASW Examples</title>
|
||||
<meta name="description" content="Four nav patterns — top nav,
|
||||
sub-nav, sidebar nav, TOC nav. No classes. aria-current for active
|
||||
state.">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Navigation</h1>
|
||||
<p data-text="lead">Four nav patterns — top nav, sub-nav, sidebar
|
||||
nav, TOC nav. No classes. aria-current for active state.</p>
|
||||
</header>
|
||||
|
||||
<p>Four patterns. Active state via <code>aria-current="page"</code>. No
|
||||
class names.</p>
|
||||
<h2 id="top-nav">Top nav</h2>
|
||||
<p>The nav bar at the top of this page is a live demo. Two
|
||||
<code><ul></code> lists: brand left, links right. Pipe dividers
|
||||
are CSS — remove a link, the pipe goes with it.</p>
|
||||
<div class="sourceCode" id="cb1"><pre
|
||||
class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">nav</span><span class="dt">></span></span>
|
||||
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/"</span><span class="dt">><</span><span class="kw">strong</span><span class="dt">></span>Brand<span class="dt"></</span><span class="kw">strong</span><span class="dt">></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/docs/"</span><span class="dt">></span>Docs<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/lab/"</span> <span class="er">aria-current</span><span class="ot">=</span><span class="st">"page"</span><span class="dt">></span>Lab<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/source"</span> <span class="er">data-text</span><span class="ot">=</span><span class="st">"dim"</span><span class="dt">></span>Source<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">nav</span><span class="dt">></span></span></code></pre></div>
|
||||
<h3 id="dropdown">Dropdown</h3>
|
||||
<p>A <code><details></code> inside a nav list item becomes a
|
||||
dropdown. No JavaScript.</p>
|
||||
<nav>
|
||||
<ul><li><a href="#"><strong>Brand</strong></a></li></ul>
|
||||
<ul>
|
||||
<li><a href="#top-nav">Docs</a></li>
|
||||
<li>
|
||||
<details>
|
||||
<summary>More</summary>
|
||||
<ul>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<h2 id="sub-navigation">Sub-navigation</h2>
|
||||
<p>A horizontal strip inside <code><main></code>. Monospace,
|
||||
small. Active link full-brightness; others dimmed.</p>
|
||||
<nav data-subnav>
|
||||
<a href="#subnav" aria-current="page">index</a>
|
||||
<a href="#subnav">now</a>
|
||||
<a href="#subnav">projects</a>
|
||||
<a href="#subnav">status</a>
|
||||
</nav>
|
||||
|
||||
<h2 id="sidebar-nav">Sidebar nav</h2>
|
||||
<p><code>data-nav="sidebar"</code> — vertical, labelled sections, sticky
|
||||
in a docs layout. The <code>aria-current="page"</code> link gets accent
|
||||
background.</p>
|
||||
<div class="sourceCode" id="cb2"><pre
|
||||
class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">aside</span><span class="dt">></span></span>
|
||||
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">nav</span> <span class="er">aria-label</span><span class="ot">=</span><span class="st">"Documentation"</span> <span class="er">data-nav</span><span class="ot">=</span><span class="st">"sidebar"</span><span class="dt">></span></span>
|
||||
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">small</span><span class="dt">></span>Documentation<span class="dt"></</span><span class="kw">small</span><span class="dt">></span></span>
|
||||
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"index.html"</span><span class="dt">></span>Introduction<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"getting-started.html"</span><span class="dt">></span>Getting Started<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">small</span><span class="dt">></span>Components<span class="dt"></</span><span class="kw">small</span><span class="dt">></span></span>
|
||||
<span id="cb2-9"><a href="#cb2-9" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb2-10"><a href="#cb2-10" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"components/nav.html"</span> <span class="er">aria-current</span><span class="ot">=</span><span class="st">"page"</span><span class="dt">></span>Navigation<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb2-11"><a href="#cb2-11" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb2-12"><a href="#cb2-12" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">nav</span><span class="dt">></span></span>
|
||||
<span id="cb2-13"><a href="#cb2-13" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">aside</span><span class="dt">></span></span></code></pre></div>
|
||||
<h2 id="toc-nav">TOC nav</h2>
|
||||
<p><code>data-nav="toc"</code> — compact in-page contents for the right
|
||||
column. Pairs with <code>toc-spy.js</code> to track scroll position via
|
||||
<code>aria-current</code>.</p>
|
||||
<div class="sourceCode" id="cb3"><pre
|
||||
class="sourceCode html"><code class="sourceCode html"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">aside</span> <span class="er">data-toc</span><span class="dt">></span></span>
|
||||
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">nav</span> <span class="er">aria-label</span><span class="ot">=</span><span class="st">"On this page"</span> <span class="er">data-nav</span><span class="ot">=</span><span class="st">"toc"</span><span class="dt">></span></span>
|
||||
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">small</span><span class="dt">></span>On this page<span class="dt"></</span><span class="kw">small</span><span class="dt">></span></span>
|
||||
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"#top-nav"</span><span class="dt">></span>Top nav<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"#subnav"</span><span class="dt">></span>Sub-navigation<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"#sidebar-nav"</span> <span class="er">aria-current</span><span class="ot">=</span><span class="st">"true"</span><span class="dt">></span>Sidebar nav<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">nav</span><span class="dt">></span></span>
|
||||
<span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">aside</span><span class="dt">></span></span></code></pre></div>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
54
archive/examples-legacy/components/tooltips.html
Normal file
54
archive/examples-legacy/components/tooltips.html
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Tooltips — ASW Examples</title>
|
||||
<meta name="description" content="data-tooltip — hover and
|
||||
focus-visible labels, CSS only, no JavaScript">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Tooltips</h1>
|
||||
<p data-text="lead">data-tooltip — hover and focus-visible labels,
|
||||
CSS only, no JavaScript</p>
|
||||
</header>
|
||||
|
||||
<p>Add <code>data-tooltip</code> to any element. Appears above on hover
|
||||
or keyboard focus. No JavaScript.</p>
|
||||
<h2 id="basic">Basic</h2>
|
||||
<p>The term
|
||||
<span data-tooltip="A semantic attribute, not a class">data-tooltip</span>
|
||||
renders above by default. Works on
|
||||
<abbr data-tooltip="Hypertext Markup Language">HTML</abbr>,
|
||||
<code data-tooltip="A monospace code sample">code</code>, or plain text
|
||||
spans.</p>
|
||||
<h2 id="bottom-placement">Bottom placement</h2>
|
||||
<p>Use <code>data-tooltip-position="bottom"</code> when the element is
|
||||
near the top of the page.</p>
|
||||
<p>This tooltip appears
|
||||
<span data-tooltip="I'm below the text" data-tooltip-position="bottom">below</span>
|
||||
the element.</p>
|
||||
<h2 id="on-interactive-elements">On interactive elements</h2>
|
||||
<p>Pair <code>data-tooltip</code> with <code>aria-label</code> on
|
||||
buttons so screen readers get the full description.</p>
|
||||
<p>
|
||||
<button data-tooltip="Publish this draft to the live site" aria-label="Publish">Publish →</button>
|
||||
<button data-tooltip="Permanently remove this item" aria-label="Delete" disabled>Delete</button>
|
||||
</p>
|
||||
|
||||
<h2 id="in-prose">In prose</h2>
|
||||
<p><code>data-tooltip</code> annotates terms inline without cluttering
|
||||
the reading flow:</p>
|
||||
<p>The <abbr data-tooltip="Agentic Semantic Web">ASW</abbr> framework
|
||||
uses <span data-tooltip="HTML data-* attributes">data attributes</span>
|
||||
instead of class names. The
|
||||
<span data-tooltip="Pico CSS — a minimal semantic HTML stylesheet">Pico
|
||||
layer</span> handles base styling.</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue