@adia-ai/web-components 0.8.13 → 0.8.15

package/components/tags-input/tags-input.examples.md

@@ -8,85 +8,18 @@
 </field-ui>
 ```
 
-Type a value + press Enter (or comma) to commit a chip. Backspace from the
-empty inline input removes the last chip.
-
-## pre-populated
-
-```html
-<tags-input-ui name="tags" value='["bug","high-priority","needs-triage"]'></tags-input-ui>
-```
-
-The `value` attribute accepts JSON — `["a","b","c"]`. The form value
-under `name` serializes back to the same JSON string.
-
 ## transform="lowercase"
 
 ```html
-<tags-input-ui transform="lowercase"></tags-input-ui>
+<field-ui label="Labels">
+  <tags-input-ui name="labels" transform="lowercase" placeholder="Type FOO, see foo"></tags-input-ui>
+</field-ui>
 ```
 
-Tokens are lowercased on commit. Available values:
-`""` (preserve), `"lowercase"`, `"trim"`, `"strip-spaces"`.
-
 ## max — count cap
 
 ```html
-<tags-input-ui name="tags" max="3"></tags-input-ui>
-```
-
-Once 3 tokens have been added, further commits fire
-`invalid` with `detail.reason === "max"`.
-
-## delimiter="enter"
-
-```html
-<tags-input-ui delimiter="enter"></tags-input-ui>
-```
-
-Disables in-line character commits when the token grammar legitimately
-contains the default `,` (e.g. display names like "Doe, Jane"). Only
-Enter (or programmatic `addToken`) commits.
-
-## validateFn — email-format gate
-
-```html
-<tags-input-ui id="to" name="to" placeholder="Email…"></tags-input-ui>
-<script>
-  const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  document.getElementById('to').validateFn = (value) => EMAIL_RE.test(value);
-</script>
-```
-
-`validateFn` may return a `Promise<boolean>` — the host flips into
-`[validating]` until the promise settles.
-
-## paste-split — bulk entry
-
-```html
-<tags-input-ui name="domains" paste-split=",\n"></tags-input-ui>
-```
-
-Pasting `"example.com, foo.com\nbar.com"` commits three chips.
-
-## suggestions — autocomplete hints
-
-```html
-<tags-input-ui id="tags" name="tags"></tags-input-ui>
-<script>
-  document.getElementById('tags').suggestions = ['bug', 'feature', 'chore'];
-</script>
-```
-
-Suggestions are hints, not gates — the typed value still wins. When
-non-empty, the host announces as `role="combobox"` with the popover
-listed below the field.
-
-## readonly chip display
-
-```html
-<tags-input-ui readonly value='["bug","urgent"]'></tags-input-ui>
+<field-ui label="Up to 3 tags">
+  <tags-input-ui name="tags" max="3" placeholder="Try adding a 4th tag" value='["one","two"]'></tags-input-ui>
+</field-ui>
 ```
-
-Readonly hides the remove affordance on each chip + blocks the inline
-input.

package/components/text/text.examples.md

@@ -1,19 +1,50 @@
 # text — Examples
 
-## Type Scale
+## variant
 
 ```html
-<text-ui variant="kicker">Kicker — Eyebrow / Overline</text-ui>
+<text-ui variant="display">Display</text-ui>
 ```
 
-## Supplementary Type Scale
+## Typography registers
 
 ```html
-<text-ui variant="subsection">Subsection — a sub-grouping inside a heading section</text-ui>
+<row-ui gap="6" align="start" wrap>
+  <col-ui gap="2">
+    <text-ui variant="caption" color="muted">verse</text-ui>
+    <div verse style="max-width:240px">
+      <col-ui gap="2">
+        <text-ui variant="heading">Heading</text-ui>
+        <text-ui variant="body">Body copy showing how this register sizes running text and the leading between lines.</text-ui>
+        <text-ui variant="caption" color="muted">Caption · metadata</text-ui>
+      </col-ui>
+    </div>
+  </col-ui>
+  <col-ui gap="2">
+    <text-ui variant="caption" color="muted">regular</text-ui>
+    <div style="max-width:240px">
+      <col-ui gap="2">
+        <text-ui variant="heading">Heading</text-ui>
+        <text-ui variant="body">Body copy showing how this register sizes running text and the leading between lines.</text-ui>
+        <text-ui variant="caption" color="muted">Caption · metadata</text-ui>
+      </col-ui>
+    </div>
+  </col-ui>
+  <col-ui gap="2">
+    <text-ui variant="caption" color="muted">prose</text-ui>
+    <div prose style="max-width:240px">
+      <col-ui gap="2">
+        <text-ui variant="heading">Heading</text-ui>
+        <text-ui variant="body">Body copy showing how this register sizes running text and the leading between lines.</text-ui>
+        <text-ui variant="caption" color="muted">Caption · metadata</text-ui>
+      </col-ui>
+    </div>
+  </col-ui>
+</row-ui>
 ```
 
-## Page Context
+## color
 
 ```html
-<text-ui variant="kicker">Getting Started</text-ui>
+<text-ui color="subtle">Subtle</text-ui>
 ```

package/components/time-picker/time-picker.examples.md

@@ -14,22 +14,10 @@
 </field-ui>
 ```
 
-## 15-minute step
+## step
 
 ```html
-<field-ui label="Meeting">
-  <time-picker-ui value="09:30" step="900"></time-picker-ui>
+<field-ui label="Default">
+  <time-picker-ui value="09:30"></time-picker-ui>
 </field-ui>
 ```
-
-## Second precision
-
-```html
-<time-picker-ui precision="second" step="1" value="14:30:45"></time-picker-ui>
-```
-
-## 12-hour cycle
-
-```html
-<time-picker-ui hour-cycle="h12" value="07:00"></time-picker-ui>
-```

package/components/toc/toc.examples.md

@@ -0,0 +1,69 @@
+# toc — Examples
+
+## default (scans parent)
+
+```html
+<row-ui gap="6" align="start">
+  <div style="position: sticky; top: var(--a-space-4); min-width: 200px;">
+    <toc-ui target="#example-article-1"></toc-ui>
+  </div>
+  <article id="example-article-1" style="max-width: 56ch;">
+    <h2 id="intro">Introduction</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    <h3>Why this matters</h3>
+    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+    <h3>What's included</h3>
+    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.</p>
+    <h2 id="setup">Setup</h2>
+    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.</p>
+    <h3>Installation</h3>
+    <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
+    <h3>Configuration</h3>
+    <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
+    <h2 id="api">API reference</h2>
+    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+    <h3>Methods</h3>
+    <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt.</p>
+    <h3>Events</h3>
+    <p>Ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
+    <h2 id="conclude">Conclusion</h2>
+    <p>Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
+  </article>
+</row-ui>
+```
+
+## [headings] — custom depth coverage
+
+```html
+<row-ui gap="6" align="start">
+  <div style="min-width: 200px;">
+    <toc-ui target="#example-article-flat" headings="h2"></toc-ui>
+  </div>
+  <article id="example-article-flat" style="max-width: 40ch;">
+    <h2>Overview</h2>
+    <p>Body.</p>
+    <h3>Sub-section (ignored)</h3>
+    <p>Body.</p>
+    <h2>Usage</h2>
+    <p>Body.</p>
+    <h2>API</h2>
+    <p>Body.</p>
+  </article>
+</row-ui>
+```
+
+## [offset] — adjust for sticky topbars
+
+```html
+<row-ui gap="6" align="start">
+  <div style="min-width: 200px;">
+    <toc-ui target="#example-article-offset" offset="120"></toc-ui>
+  </div>
+  <article id="example-article-offset" style="max-width: 40ch;">
+    <h2 id="ofs-a">Section A</h2>
+    <p>Lorem.</p>
+    <h2 id="ofs-b">Section B</h2>
+    <p>Ipsum.</p>
+  </article>
+</row-ui>
+```

package/components/tour/tour.examples.md

@@ -0,0 +1,119 @@
+# tour — Examples
+
+## Basic tour
+
+```html
+<!-- Mini "dashboard" — three labelled cards that the tour highlights. -->
+<col-ui gap="3">
+  <button-ui id="tour-basic-start" text="Take the tour" variant="primary"></button-ui>
+  <grid-ui columns="3" gap="3">
+    <card-ui id="demo-tour-target-stats" data-tour-anchor>
+      <header>
+        <span slot="heading">
+          <text-ui strong>Active users</text-ui>
+        </span>
+      </header>
+      <section>
+        <stat-ui label="This week" value="1,243" change="+12%" trend="up"></stat-ui>
+      </section>
+    </card-ui>
+    <card-ui id="demo-tour-target-filters" data-tour-anchor>
+      <header>
+        <span slot="heading">
+          <text-ui strong>Filters</text-ui>
+        </span>
+      </header>
+      <section>
+        <col-ui gap="2">
+          <select-ui value="all">
+            <option value="all">All teams</option>
+            <option value="core">Core</option>
+          </select-ui>
+          <select-ui value="week">
+            <option value="week">This week</option>
+            <option value="month">This month</option>
+          </select-ui>
+        </col-ui>
+      </section>
+    </card-ui>
+    <card-ui id="demo-tour-target-export" data-tour-anchor>
+      <header>
+        <span slot="heading">
+          <text-ui strong>Export</text-ui>
+        </span>
+      </header>
+      <section>
+        <button-ui text="Download CSV" variant="outline" icon-leading="download"></button-ui>
+      </section>
+    </card-ui>
+  </grid-ui>
+  <tour-ui id="tour-basic">
+    <tour-step-ui target="#demo-tour-target-stats" title="Your activity" placement="bottom">See your latest activity metrics here — visit count, signups, and week-over-week trend.</tour-step-ui>
+    <tour-step-ui target="#demo-tour-target-filters" title="Narrow it down" placement="bottom">Filter by team or time range to focus on what matters. Changes apply immediately.</tour-step-ui>
+    <tour-step-ui target="#demo-tour-target-export" title="Export anytime" placement="bottom">Download a CSV of the current view — filters are preserved in the export.</tour-step-ui>
+  </tour-ui>
+</col-ui>
+```
+
+## Popover placement
+
+```html
+<col-ui gap="3">
+  <button-ui id="tour-place-start" text="Tour the corners" variant="outline"></button-ui>
+  <grid-ui columns="2" gap="3">
+    <card-ui id="demo-tour-tl">
+      <section>
+        <text-ui strong>Top-left card</text-ui>
+      </section>
+    </card-ui>
+    <card-ui id="demo-tour-tr">
+      <section>
+        <text-ui strong>Top-right card</text-ui>
+      </section>
+    </card-ui>
+    <card-ui id="demo-tour-bl">
+      <section>
+        <text-ui strong>Bottom-left card</text-ui>
+      </section>
+    </card-ui>
+    <card-ui id="demo-tour-br">
+      <section>
+        <text-ui strong>Bottom-right card</text-ui>
+      </section>
+    </card-ui>
+  </grid-ui>
+  <tour-ui id="tour-place">
+    <tour-step-ui target="#demo-tour-tl" title="Top-left" placement="right">Popover anchors to the right side.</tour-step-ui>
+    <tour-step-ui target="#demo-tour-tr" title="Top-right" placement="left">Popover anchors to the left side.</tour-step-ui>
+    <tour-step-ui target="#demo-tour-bl" title="Bottom-left" placement="top">Popover anchors above the target.</tour-step-ui>
+    <tour-step-ui target="#demo-tour-br" title="Bottom-right" placement="top">Popover anchors above the target.</tour-step-ui>
+  </tour-ui>
+</col-ui>
+```
+
+## Show once per user — [storage-key]
+
+```html
+<col-ui gap="3">
+  <row-ui gap="2">
+    <button-ui id="tour-storage-start" text="Start tour" variant="primary"></button-ui>
+    <button-ui id="tour-storage-reset" text="Reset storage" variant="ghost"></button-ui>
+  </row-ui>
+  <card-ui id="demo-tour-storage-card">
+    <section>
+      <text-ui>
+        This card is the target. Each visit, the tour fires once per user — completion is recorded under
+        <code>demo:tour:v1</code>
+        .
+      </text-ui>
+    </section>
+  </card-ui>
+  <tour-ui id="tour-storage" storage-key="demo:tour:v1">
+    <tour-step-ui target="#demo-tour-storage-card" title="Once per user" placement="top">
+      This tour records completion to localStorage under
+      <code>demo:tour:v1</code>
+      and won't auto-start again. Reset storage above to test.
+    </tour-step-ui>
+  </tour-ui>
+</col-ui>
+```

package/components/visually-hidden/visually-hidden.examples.md

@@ -0,0 +1,26 @@
+# visually-hidden — Examples
+
+## Icon-button label
+
+```html
+<row-ui gap="2">
+  <button-ui icon="pencil-simple" variant="ghost">
+    <visually-hidden-ui>Edit profile</visually-hidden-ui>
+  </button-ui>
+  <button-ui icon="trash" variant="ghost" color="danger">
+    <visually-hidden-ui>Delete profile</visually-hidden-ui>
+  </button-ui>
+  <button-ui icon="share" variant="ghost">
+    <visually-hidden-ui>Share profile</visually-hidden-ui>
+  </button-ui>
+</row-ui>
+```
+
+## Live-region status announcement
+
+```html
+<div role="status" aria-live="polite">
+  <visually-hidden-ui>Document saved 2 minutes ago.</visually-hidden-ui>
+</div>
+<text-ui color="subtle" size="sm">(Inspect element — the announcement is in the DOM but invisible.)</text-ui>
+```