@adia-ai/web-components 0.8.6 → 0.8.8

package/patterns/permissions-sharing/permissions-sharing.examples.html

@@ -0,0 +1,175 @@
+<header>
+  <div>
+    <h1>Permissions Sharing</h1>
+    <div data-actions>
+      <tag-ui size="sm">option-card-ui</tag-ui> <tag-ui size="sm">search-ui</tag-ui> <tag-ui size="sm">select-ui</tag-ui> <tag-ui size="sm">description-list-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui>
+    </div>
+  </div>
+  <p>Surfaces for sharing a resource (doc, dashboard, project) with people outside its default audience. Three shapes — visibility scope picker (private / link / org / public), generated share link with expiry, and add-people autocomplete with per-person role.</p>
+</header>
+
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>
+    Whenever a user wants to extend a resource's audience past its
+    default (workspace-only). The three surfaces compose into one
+    "Share" dialog: scope picker as the headline decision; link or
+    people surfaces depending on which scope the user chose. Don't
+    show all three at once — that asks the user to pick a primitive
+    instead of an outcome.
+  </p>
+</section>
+
+<section data-section data-property="scopes">
+  <h2 variant="section">Visibility scope picker</h2>
+  <p data-note>Four scopes as <code>option-card-ui</code> in a stacked radio group: Private, Link, Organization, Public. Each shows the audience and the action the user takes after picking.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="visibility scope picker">
+      <field-ui data-chunk="permissions-sharing-scopes" label="Who can access this dashboard?">
+        <col-ui gap="2">
+          <option-card-ui name="scope" value="private" heading="Private" description="Only people you've added explicitly." icon="lock" checked></option-card-ui>
+          <option-card-ui name="scope" value="link" heading="Anyone with the link" description="No sign-in required. Link can be revoked anytime." icon="link"></option-card-ui>
+          <option-card-ui name="scope" value="org" heading="Anyone in your workspace" description="Members of acme.com can find and open it." icon="users"></option-card-ui>
+          <option-card-ui name="scope" value="public" description="Discoverable via search. Use with care." icon="globe">
+            <span slot="heading">Public on the web <tag-ui variant="warning" size="sm">Indexable</tag-ui></span>
+          </option-card-ui>
+        </col-ui>
+      </field-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="share-link">
+  <h2 variant="section">Share link with expiry</h2>
+  <p data-note>Surfaces when the user picks Link or Public scope. Generated URL with copy button; <code>select-ui</code> for expiry; revoke button as a danger-tone secondary action.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="share link with expiry">
+      <card-ui data-chunk="permissions-share-link" style="max-width: 560px;">
+        <header>
+          <span slot="heading" variant="section">Share link</span>
+          <tag-ui slot="action" variant="accent" size="sm">Anyone with the link</tag-ui>
+        </header>
+        <section>
+          <col-ui gap="3">
+            <row-ui gap="2" align="center">
+              <input-ui readonly value="https://acme.app/d/8421-revenue-q2" style="flex: 1;"></input-ui>
+              <button-ui text="Copy" variant="primary" icon-leading="copy"></button-ui>
+            </row-ui>
+            <row-ui gap="3" align="center">
+              <field-ui label="Expires" inline>
+                <select-ui value="7d" size="sm" style="min-width: 140px;">
+                  <option value="never">Never</option>
+                  <option value="24h">24 hours</option>
+                  <option value="7d" selected>7 days</option>
+                  <option value="30d">30 days</option>
+                  <option value="custom">Custom date…</option>
+                </select-ui>
+              </field-ui>
+              <field-ui label="Permission" inline>
+                <select-ui value="view" size="sm" style="min-width: 140px;">
+                  <option value="view" selected>Can view</option>
+                  <option value="comment">Can comment</option>
+                  <option value="edit">Can edit</option>
+                </select-ui>
+              </field-ui>
+            </row-ui>
+            <description-list-ui>
+              <dt>Created</dt>
+              <dd>Apr 22 · by Kim Granlund</dd>
+              <dt>Used</dt>
+              <dd>14 opens · last 2 hours ago</dd>
+            </description-list-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Revoke link" variant="ghost" color="danger" size="sm" icon-leading="x"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="people">
+  <h2 variant="section">Add people with role</h2>
+  <p data-note>Surfaces in the Private and Org scopes. Autocomplete <code>search-ui</code> for people; per-row <code>select-ui</code> for the access role; existing-shares list below the input.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="add people share">
+      <card-ui data-chunk="permissions-share-people" style="max-width: 560px;">
+        <header>
+          <span slot="heading" variant="section">Share with people</span>
+        </header>
+        <section>
+          <col-ui gap="3">
+            <row-ui gap="2" align="center">
+              <search-ui size="sm" placeholder="Add by name or email" style="flex: 1;"></search-ui>
+              <select-ui value="view" size="sm" style="min-width: 130px;">
+                <option value="view" selected>Can view</option>
+                <option value="comment">Can comment</option>
+                <option value="edit">Can edit</option>
+              </select-ui>
+              <button-ui text="Invite" variant="primary" size="sm"></button-ui>
+            </row-ui>
+            <col-ui gap="2">
+              <row-ui gap="3" align="center">
+                <avatar-ui size="sm" text="Kim Granlund"></avatar-ui>
+                <col-ui gap="0" grow>
+                  <text-ui strong>Kim Granlund</text-ui>
+                  <text-ui color="subtle" size="sm">kim@example.com</text-ui>
+                </col-ui>
+                <tag-ui size="sm">Owner</tag-ui>
+              </row-ui>
+              <row-ui gap="3" align="center">
+                <avatar-ui size="sm" text="Avery Chen"></avatar-ui>
+                <col-ui gap="0" grow>
+                  <text-ui strong>Avery Chen</text-ui>
+                  <text-ui color="subtle" size="sm">avery@example.com</text-ui>
+                </col-ui>
+                <select-ui value="edit" size="sm" style="min-width: 130px;">
+                  <option value="view">Can view</option>
+                  <option value="comment">Can comment</option>
+                  <option value="edit" selected>Can edit</option>
+                  <option value="remove">Remove access</option>
+                </select-ui>
+              </row-ui>
+              <row-ui gap="3" align="center">
+                <avatar-ui size="sm" text="Jordan Park"></avatar-ui>
+                <col-ui gap="0" grow>
+                  <text-ui strong>Jordan Park</text-ui>
+                  <text-ui color="subtle" size="sm">jordan@example.com</text-ui>
+                </col-ui>
+                <select-ui value="comment" size="sm" style="min-width: 130px;">
+                  <option value="view">Can view</option>
+                  <option value="comment" selected>Can comment</option>
+                  <option value="edit">Can edit</option>
+                  <option value="remove">Remove access</option>
+                </select-ui>
+              </row-ui>
+            </col-ui>
+          </col-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="composition">
+  <h2 variant="section">Composition rules</h2>
+  <ul>
+    <li><strong>Scope picker drives the surface</strong> — pick scope, then surface the matching control (link UI for Link/Public, people UI for Private/Org). Don't show all three at once.</li>
+    <li><strong>Default to Private</strong> — every share dialog starts at the most restrictive scope. Public is a deliberate decision, never an accident.</li>
+    <li><strong>Public scope carries an "Indexable" warning tag</strong> — search engines can find it. Make this visible at the picker, not buried in a tooltip.</li>
+    <li><strong>Link shares show the open count</strong> — telling users "14 opens · 2 hours ago" prompts them to revoke when activity surprises them.</li>
+    <li><strong>Existing shares list always sorts owner first</strong> — the rest in invite-time order. Don't sort by role; users can't predict where their own row will be.</li>
+    <li><strong>Remove is a select option, not a separate button</strong> — keeps the row tidy and uses the same control surface for change-role and remove.</li>
+  </ul>
+</section>
+
+<section data-section data-property="cross-references">
+  <h2 variant="section">See also</h2>
+  <ul>
+    <li><a href="/site/components/option-card">option-card-ui</a> — scope picker primitive.</li>
+    <li><a href="/site/components/search">search-ui</a> — people autocomplete.</li>
+    <li><a href="/site/patterns/permissions-role-picker">permissions-role-picker</a> — sibling for role assignment.</li>
+    <li><a href="/site/patterns/permissions-matrix">permissions-matrix</a> — sibling for full RBAC grid.</li>
+  </ul>
+</section>

package/patterns/permissions-sharing/permissions-sharing.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Permissions Sharing (pattern) — AdiaUI</title>
+
+  <!-- Token base -->
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+
+  <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/avatar/avatar.css">
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/description-list/description-list.css">
+  <link rel="stylesheet" href="../../components/field/field.css">
+  <link rel="stylesheet" href="../../components/input/input.css">
+  <link rel="stylesheet" href="../../components/option-card/option-card.css">
+  <link rel="stylesheet" href="../../components/row/row.css">
+  <link rel="stylesheet" href="../../components/search/search.css">
+  <link rel="stylesheet" href="../../components/select/select.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+
+  <!-- Component JS -->
+  <script type="module" src="../../components/avatar/avatar.js"></script>
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/col/col.js"></script>
+  <script type="module" src="../../components/description-list/description-list.js"></script>
+  <script type="module" src="../../components/field/field.js"></script>
+  <script type="module" src="../../components/input/input.js"></script>
+  <script type="module" src="../../components/option-card/option-card.js"></script>
+  <script type="module" src="../../components/row/row.js"></script>
+  <script type="module" src="../../components/search/search.js"></script>
+  <script type="module" src="../../components/select/select.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./permissions-sharing.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load permissions-sharing.examples.html — ${err.message}</p>`;
+      console.error('[permissions-sharing.html]', err);
+    }
+  </script>
+
+</body>
+</html>

package/patterns/profile-public-and-verification/profile-public-and-verification.examples.html

@@ -0,0 +1,227 @@
+<header>
+  <div>
+    <h1>Public profile &amp; identity verification</h1>
+    <div data-actions>
+      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">avatar-ui</tag-ui> <tag-ui size="sm">stat-ui</tag-ui> <tag-ui size="sm">upload-ui</tag-ui> <tag-ui size="sm">stepper-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui>
+    </div>
+  </div>
+  <p>Two adjacent profile surfaces: the externally-shareable public page (16d) and the KYC/identity-verification flow (16e). Both compose card-ui shells around primitives — no new components needed.</p>
+</header>
+
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>
+    Public profile: any place outside the workspace can link to a
+    user — author bylines on shared docs, reviewer attribution,
+    public team pages, contributor lists. Distinct from 16a
+    (workspace-internal profile card) and 16b (member detail in
+    settings).
+    Identity verification: regulated flows where the system needs
+    legal-name + government ID — payouts, paid plans in some
+    jurisdictions, agent-driven actions over a financial threshold.
+  </p>
+</section>
+
+<section data-section data-property="public-profile">
+  <h2 variant="section">Public profile</h2>
+  <p data-note>Shareable user/team page. Header: large avatar, display name, optional verified badge, role/title, location, joined date. Body: bio, social links, stats grid (`stat-ui` × N), recent public work. The verified badge means identity-verified (16e), not "important user".</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="public profile">
+      <card-ui data-chunk="profile-public" style="max-width: 720px;">
+        <section>
+          <col-ui gap="4">
+            <row-ui gap="4" align="start">
+              <avatar-ui size="xl" text="Kim Granlund"></avatar-ui>
+              <col-ui gap="1" grow>
+                <row-ui gap="2" align="center">
+                  <text-ui strong size="lg">Kim Granlund</text-ui>
+                  <tag-ui size="sm" variant="primary" icon-leading="seal-check">Verified</tag-ui>
+                </row-ui>
+                <text-ui color="subtle">Founder · AdiaUI · Reykjavík, IS</text-ui>
+                <text-ui>Building the AdiaUI web-components library and the A2UI generative-UI runtime. Previously at Construct, before that at Modular.</text-ui>
+                <row-ui gap="2" style="margin-top: 0.5rem;">
+                  <button-ui text="Follow" variant="primary" size="sm"></button-ui>
+                  <button-ui text="Message" variant="ghost" size="sm" icon-leading="chat-circle"></button-ui>
+                  <button-ui icon="dots-three" variant="ghost" size="sm" aria-label="More"></button-ui>
+                </row-ui>
+              </col-ui>
+            </row-ui>
+            <grid-ui columns="3" gap="3">
+              <stat-ui label="Followers" value="1,284"></stat-ui>
+              <stat-ui label="Following" value="312"></stat-ui>
+              <stat-ui label="Joined" value="Apr 2024"></stat-ui>
+            </grid-ui>
+            <col-ui gap="2">
+              <text-ui strong size="sm" color="subtle">Recent public work</text-ui>
+              <list-ui divider contained>
+                <list-item-ui>
+                  <col-ui gap="0">
+                    <text-ui strong>AdiaUI v0.0.26 — Safari @scope sweep</text-ui>
+                    <text-ui color="subtle" size="sm">Released 2 days ago · 47 components updated</text-ui>
+                  </col-ui>
+                </list-item-ui>
+                <list-item-ui>
+                  <col-ui gap="0">
+                    <text-ui strong>A2UI generator — chunk corpus expansion</text-ui>
+                    <text-ui color="subtle" size="sm">748 chunks across 36 domains · open-source</text-ui>
+                  </col-ui>
+                </list-item-ui>
+                <list-item-ui>
+                  <col-ui gap="0">
+                    <text-ui strong>OKLCH ramps for design systems</text-ui>
+                    <text-ui color="subtle" size="sm">Talk · 2026-03 · 18 min</text-ui>
+                  </col-ui>
+                </list-item-ui>
+              </list-ui>
+            </col-ui>
+          </col-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="verification-stepper">
+  <h2 variant="section">Identity verification — flow stepper</h2>
+  <p data-note>The progress indicator across the verification flow. Steps: Personal info → Document upload → Selfie → Review. Uses <code>stepper-ui</code> with completed states. Each step is a separate page (or drawer step), not a single long form.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="verification stepper">
+      <card-ui data-chunk="verification-stepper" style="max-width: 720px;">
+        <header>
+          <span slot="heading" variant="section">Verify your identity</span>
+          <text-ui slot="description" color="subtle">Required for payouts and agent-driven transactions over $1,000</text-ui>
+        </header>
+        <section>
+          <stepper-ui orientation="horizontal" step="2">
+            <stepper-item-ui text="Personal info" description="Legal name, date of birth"></stepper-item-ui>
+            <stepper-item-ui text="Document" description="Government-issued ID"></stepper-item-ui>
+            <stepper-item-ui text="Selfie" description="Match the photo on your ID"></stepper-item-ui>
+            <stepper-item-ui text="Review" description="Usually within 1 business day"></stepper-item-ui>
+          </stepper-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="document-upload">
+  <h2 variant="section">Document upload step</h2>
+  <p data-note>The document-capture step. <code>upload-ui</code> with `accept="image/*,.pdf"`, hint about supported formats, and security copy explaining what happens to the file. Front + back uploads for ID cards.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="document upload">
+      <card-ui data-chunk="verification-document-upload" style="max-width: 640px;">
+        <header>
+          <span slot="heading" variant="section">Upload your government-issued ID</span>
+          <text-ui slot="description" color="subtle">Passport, driver's license, or national ID card</text-ui>
+        </header>
+        <section>
+          <col-ui gap="3">
+            <field-ui label="Document type" required>
+              <select-ui name="doc_type">
+                <option value="passport">Passport</option>
+                <option value="license" selected>Driver's license</option>
+                <option value="national_id">National ID card</option>
+              </select-ui>
+            </field-ui>
+            <upload-ui label="Front of license" accept="image/*,.pdf" hint="JPEG, PNG, or PDF · max 10MB" required></upload-ui>
+            <upload-ui label="Back of license" accept="image/*,.pdf" hint="JPEG, PNG, or PDF · max 10MB" required></upload-ui>
+            <alert-ui variant="info" icon="lock">
+              <col-ui slot="content" gap="0-5">
+                <text-ui strong>Your ID is encrypted in transit and at rest.</text-ui>
+                <text-ui>We use it once to verify your identity, then hold it for 30 days for compliance before deletion.</text-ui>
+              </col-ui>
+            </alert-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Back" variant="ghost"></button-ui>
+          <button-ui slot="action" text="Continue" variant="primary"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="verification-status">
+  <h2 variant="section">Verification status states</h2>
+  <p data-note>The post-submission states the user sees while the system reviews. Three flavors: pending review (clock), verified (seal-check primary), rejected (warning). Each is a card-ui with status alert + next-action.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="verification pending">
+      <card-ui data-chunk="verification-status" style="max-width: 480px;">
+        <header>
+          <span slot="heading" variant="section">Verification submitted</span>
+        </header>
+        <section>
+          <alert-ui variant="info" icon="clock-counter-clockwise">
+            <col-ui slot="content" gap="0-5">
+              <text-ui strong>Under review — usually within 1 business day.</text-ui>
+              <text-ui>We'll email you when your identity is verified or if we need more info.</text-ui>
+            </col-ui>
+          </alert-ui>
+        </section>
+      </card-ui>
+    </div>
+    <div data-artifact-item data-artifact-label="verification verified">
+      <card-ui style="max-width: 480px;">
+        <header>
+          <span slot="heading" variant="section">
+            You're verified
+            <tag-ui size="sm" variant="primary" icon-leading="seal-check">Verified</tag-ui>
+          </span>
+        </header>
+        <section>
+          <alert-ui variant="success" icon="check-circle">
+            <col-ui slot="content" gap="0-5">
+              <text-ui strong>Identity confirmed.</text-ui>
+              <text-ui>Payouts and high-value actions are now unlocked.</text-ui>
+            </col-ui>
+          </alert-ui>
+        </section>
+      </card-ui>
+    </div>
+    <div data-artifact-item data-artifact-label="verification rejected">
+      <card-ui style="max-width: 480px;">
+        <header>
+          <span slot="heading" variant="section">We couldn't verify your ID</span>
+        </header>
+        <section>
+          <alert-ui variant="warning" icon="warning">
+            <col-ui slot="content" gap="0-5">
+              <text-ui strong>The document image was unreadable.</text-ui>
+              <text-ui>Try again with a clearer photo — make sure all corners are visible and there's no glare.</text-ui>
+            </col-ui>
+          </alert-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Try again" variant="primary" icon-leading="arrow-counter-clockwise"></button-ui>
+          <button-ui slot="action" text="Contact support" variant="ghost"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="composition">
+  <h2 variant="section">Composition rules</h2>
+  <ul>
+    <li><strong>Verified badge means identity-verified, not "important user"</strong> — twitter-style "blue check" semantic creep is a smell. Reserve <code>seal-check</code> + primary tag for the KYC outcome of 16e; use other tags for role / staff / pro / etc.</li>
+    <li><strong>Public profile shows public work only</strong> — drafts, internal docs, private repos must not surface even if the viewer happens to have access. The page is the user's public face; access-aware filtering happens upstream.</li>
+    <li><strong>Verification is multi-step, not multi-section</strong> — one page per step. A long single form bounces users on validation; per-step pages let you reset focus and progress.</li>
+    <li><strong>Document upload front + back</strong> — ID cards have two sides; passports have one. Make this an explicit pair (or single) field, not a "Add another file" affordance.</li>
+    <li><strong>Encryption + retention copy is mandatory</strong> — users handing over a passport need to read what happens to it. The compliance rationale ("30 days for audit, then deleted") makes the system look serious, not threatening.</li>
+    <li><strong>Status pages are mandatory after submission</strong> — verification can take hours or days. The user must see "we got it, we're processing" or they'll re-submit. Pending → verified | rejected is a 3-state machine; cover all three.</li>
+    <li><strong>Rejection copy must be actionable</strong> — "We couldn't verify your ID" is half-useful; "the document image was unreadable, try again with a clearer photo" tells the user what to do.</li>
+  </ul>
+</section>
+
+<section data-section data-property="cross-references">
+  <h2 variant="section">See also</h2>
+  <ul>
+    <li><a href="/site/components/avatar">avatar-ui</a> · <a href="/site/components/stat">stat-ui</a> — public profile primitives.</li>
+    <li><a href="/site/components/upload">upload-ui</a> — document capture.</li>
+    <li><a href="/site/components/stepper">stepper-ui</a> — verification flow indicator.</li>
+    <li><a href="/site/components/tag">tag-ui</a> — verified badge.</li>
+    <li><a href="/site/patterns/permissions-sharing">permissions-sharing</a> — adjacent (the "share publicly" surface).</li>
+    <li><a href="/site/patterns/wizard-drawer">wizard-drawer</a> — alternative host for the verification flow.</li>
+  </ul>
+</section>

package/patterns/profile-public-and-verification/profile-public-and-verification.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Public profile &amp; identity verification (pattern) — AdiaUI</title>
+
+  <!-- Token base -->
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+
+  <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/alert/alert.css">
+  <link rel="stylesheet" href="../../components/avatar/avatar.css">
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/field/field.css">
+  <link rel="stylesheet" href="../../components/grid/grid.css">
+  <link rel="stylesheet" href="../../components/list/list.css">
+  <link rel="stylesheet" href="../../components/row/row.css">
+  <link rel="stylesheet" href="../../components/select/select.css">
+  <link rel="stylesheet" href="../../components/stat/stat.css">
+  <link rel="stylesheet" href="../../components/stepper/stepper.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+  <link rel="stylesheet" href="../../components/upload/upload.css">
+
+  <!-- Component JS -->
+  <script type="module" src="../../components/alert/alert.js"></script>
+  <script type="module" src="../../components/avatar/avatar.js"></script>
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/col/col.js"></script>
+  <script type="module" src="../../components/field/field.js"></script>
+  <script type="module" src="../../components/grid/grid.js"></script>
+  <script type="module" src="../../components/list/list.js"></script>
+  <script type="module" src="../../components/row/row.js"></script>
+  <script type="module" src="../../components/select/select.js"></script>
+  <script type="module" src="../../components/stat/stat.js"></script>
+  <script type="module" src="../../components/stepper/stepper.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+  <script type="module" src="../../components/upload/upload.js"></script>
+
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./profile-public-and-verification.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load profile-public-and-verification.examples.html — ${err.message}</p>`;
+      console.error('[profile-public-and-verification.html]', err);
+    }
+  </script>
+
+</body>
+</html>