@adia-ai/a2ui-corpus 0.0.1 → 0.0.2

package/exemplars/_shell.css

@@ -0,0 +1,88 @@
+/*
+  Standalone-demo shell for AdiaUI corpus exemplars.
+
+  Each exemplar `index.html` loads this stylesheet so it can render
+  correctly when opened directly (out of the docs router shell). It
+  carries:
+
+  - body framing — flex-centered, padded, schemes set up via tokens
+  - section min-width — exemplar pages are intentionally desktop-shaped
+  - decoration classes — for the few pages that need a hero / split-
+    layout gradient that can't be expressed via component primitives
+
+  IMPORTANT — training-corpus contract: the exemplar HTML is harvested
+  for the gen-UI training pipeline. Per AGENTS.md, harvested files MUST
+  contain no `<style>` block and no `style="..."` attributes. Anything
+  in this stylesheet is allowed because it's loaded via `<link>`, not
+  inlined.
+*/
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  box-sizing: border-box;
+}
+body[data-anchor="bottom"] {
+  align-items: flex-end;
+}
+body > section,
+body > footer {
+  min-width: 600px;
+}
+
+/*
+  Footer-pattern link styling. footer-ui's own contract leaves <a>
+  unstyled (it doesn't slot links itself), so the prose/footer demo
+  legitimately needs a few tone + transition rules here. Defining
+  them in _shell.css keeps the harvested HTML from carrying any
+  inline style attributes for these.
+*/
+footer a {
+  color: var(--a-fg-subtle);
+  text-decoration: none;
+  font-size: var(--a-ui-md);
+  transition: color var(--a-duration-fast) var(--a-easing);
+}
+footer a:hover {
+  color: var(--a-fg);
+}
+
+/*
+  Auth-login brand panel — split-screen hero with photographic
+  background + dark scrim. Used on the first card of
+  prose/auth-login. Class hook keeps the harvested HTML clean
+  while preserving the visual that motivates the pattern.
+*/
+.demo-brand-panel {
+  background:
+    linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
+    url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1200&q=80')
+    center/cover no-repeat;
+  min-height: 560px;
+  color: #fff;
+}
+
+/*
+  Accent split-panel — used on the ui/auth-login split-layout card.
+  Lighter than the brand panel; just an accent-tinted surface with a
+  comfortable min-height so the form panel beside it doesn't collapse.
+*/
+.demo-accent-panel {
+  background: var(--a-accent-subtle);
+  min-height: 480px;
+}
+
+/*
+  CTA hero card — photographic background with dark scrim. Used on
+  the centered CTA on prose/cta. Same shape as `.demo-brand-panel`
+  but with a different image; kept distinct so each page can be
+  retuned without leaking into the others.
+*/
+.demo-cta-hero {
+  background:
+    linear-gradient(to bottom right, rgba(0,0,0,0.7), rgba(0,0,0,0.85)),
+    url('https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?w=1200&q=80')
+    center/cover no-repeat;
+}

package/exemplars/prose/auth-login/index.html

@@ -4,9 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auth Login — AdiaUI Pattern</title>
-    <link rel="stylesheet" href="../../../../web-components/styles/tokens.css" />
-    <link rel="stylesheet" href="../../../../web-components/styles/styles.css" />
-    <style>body { margin: 0; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 2rem; box-sizing: border-box; font-family: var(--a-font-family); background: var(--a-bg); color: var(--a-fg); } body > section { min-width: 600px; }</style>
+    <link rel="stylesheet" href="../../../../../web-components/styles/tokens.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/themes.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/resets.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/components.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/prose.css" />
+    <link rel="stylesheet" href="../../_shell.css" />
   </head>
   <body>
     <section prose>
@@ -17,11 +20,11 @@
              Full-width two-panel auth: brand story left, form right.
              Inspired by Linear, Vercel, Stripe auth pages.
              ═══════════════════════════════════════════ -->
-        <card-ui style="overflow: hidden; width: 100%; max-width: 1080px;">
+        <card-ui>
           <section bleed>
             <grid-ui gap="0">
               <!-- Brand panel -->
-              <col-ui data-scheme="dark" prose gap="6" justify="between" style="padding: var(--a-space-10); background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1200&q=80') center/cover no-repeat; min-height: 560px; color: #fff;">
+              <col-ui data-scheme="dark" prose gap="6" justify="between" class="demo-brand-panel">
                 <row-ui gap="1" align="center">
                   <icon-ui name="cube" size="md"></icon-ui>
                   <text-ui nomargin>Acme</text-ui>
@@ -52,7 +55,7 @@
               </col-ui>
 
               <!-- Form panel -->
-              <col-ui justify="center" style="padding: var(--a-space-10);">
+              <col-ui justify="center">
                 <col-ui gap="2" align="center">
                   <h2 variant="title" nomargin>Welcome back</h2>
                   <p variant="body" color="subtle" nomargin>Sign in to your workspace to pick up where you left off.</p>
@@ -70,7 +73,9 @@
                   <input-ui label="Work email" placeholder="you@company.com" type="email"></input-ui>
                   <input-ui label="Password" placeholder="••••••••" type="password" suffix="eye-slash"></input-ui>
                   <row-ui justify="between" align="center" size="sm">
-                    <check-ui label="Remember this device"></check-ui>
+                    <field-ui inline label="Remember this device">
+                      <check-ui name="remember"></check-ui>
+                    </field-ui>
                     <a href="#">Forgot password?</a>
                   </row-ui>
                   <button-ui text="Sign in" variant="primary" stretch></button-ui>
@@ -101,7 +106,7 @@
              Standalone registration with trust signals, feature
              highlights, and embedded testimonial strip.
              ═══════════════════════════════════════════ -->
-        <col-ui gap="8" align="center" style="width: 100%; max-width: 1080px;">
+        <col-ui gap="8" align="center">
 
           <!-- Hero copy -->
           <header align="center" prose>
@@ -117,7 +122,7 @@
           </header>
 
           <!-- Form card -->
-          <card-ui elevation="2" style="width: 100%; max-width: 460px;">
+          <card-ui elevation="2">
             <section>
               <col-ui gap="5">
                 <col-ui gap="2">
@@ -136,7 +141,9 @@
                   <input-ui label="Password" placeholder="Min. 8 characters" type="password"></input-ui>
                 </col-ui>
 
-                <check-ui label="I agree to the Terms of Service and Privacy Policy" size="sm"></check-ui>
+                <field-ui inline label="I agree to the Terms of Service and Privacy Policy">
+                  <check-ui size="sm" name="terms"></check-ui>
+                </field-ui>
 
                 <button-ui text="Create free account" variant="primary" stretch></button-ui>
 
@@ -182,7 +189,7 @@
              When a teammate invites you — branded, contextual,
              with workspace info and inviter details.
              ═══════════════════════════════════════════ -->
-        <col-ui gap="6" align="center" style="width: 100%; max-width: 1080px;">
+        <col-ui gap="6" align="center">
 
           <header align="center" prose>
             <col-ui gap="3">
@@ -194,7 +201,7 @@
             </col-ui>
           </header>
 
-          <card-ui elevation="1" style="width: 100%; max-width: 460px;">
+          <card-ui elevation="1">
             <section>
               <col-ui gap="5">
                 <!-- Invitation context -->
@@ -248,7 +255,7 @@
              Passwordless flow with rich email confirmation state,
              resend controls, and alternative methods.
              ═══════════════════════════════════════════ -->
-        <col-ui gap="8" align="center" style="width: 100%; max-width: 1080px;">
+        <col-ui gap="8" align="center">
 
           <header align="center" prose>
             <col-ui gap="3">
@@ -262,7 +269,7 @@
           </header>
 
           <!-- Step 1: email entry -->
-          <card-ui style="width: 100%; max-width: 420px;">
+          <card-ui>
             <section>
               <col-ui gap="4">
                 <input-ui label="Email address" placeholder="you@company.com" type="email"></input-ui>
@@ -276,7 +283,7 @@
           </card-ui>
 
           <!-- Step 2: check your email confirmation -->
-          <card-ui style="width: 100%; max-width: 420px;">
+          <card-ui>
             <section>
               <col-ui gap="5" align="center">
                 <col-ui gap="1" align="center">
@@ -292,7 +299,7 @@
 
                 <divider-ui></divider-ui>
 
-                <col-ui gap="2" style="width: 100%;">
+                <col-ui gap="2">
                   <button-ui text="Resend link" variant="outline" stretch icon="arrow-clockwise"></button-ui>
                   <button-ui text="Use a different email" variant="ghost" stretch icon="arrow-left"></button-ui>
                 </col-ui>
@@ -307,7 +314,7 @@
              Three-stage flow: request → verify → success.
              Rich feedback, contextual guidance, strength meter.
              ═══════════════════════════════════════════ -->
-        <col-ui gap="8" align="center" style="width: 100%; max-width: 1080px;">
+        <col-ui gap="8" align="center">
 
           <header align="center" prose>
             <col-ui gap="3">
@@ -320,7 +327,7 @@
           </header>
 
           <!-- Stage A: enter email -->
-          <card-ui style="width: 100%; max-width: 420px;">
+          <card-ui>
             <section>
               <col-ui gap="4">
                 <col-ui gap="1">
@@ -335,7 +342,7 @@
           </card-ui>
 
           <!-- Stage B: enter code + new password -->
-          <card-ui style="width: 100%; max-width: 420px;">
+          <card-ui>
             <section>
               <col-ui gap="4">
                 <col-ui gap="1">
@@ -376,7 +383,7 @@
           </card-ui>
 
           <!-- Stage C: success -->
-          <card-ui style="width: 100%; max-width: 420px;">
+          <card-ui>
             <section>
               <col-ui gap="4" align="center">
                 <icon-ui name="check-circle" size="lg" color="success"></icon-ui>
@@ -396,7 +403,7 @@
              Post-auth step: pick which workspace to enter.
              Shows org info, role, last active timestamps.
              ═══════════════════════════════════════════ -->
-        <col-ui gap="6" align="center" style="width: 100%; max-width: 1080px;">
+        <col-ui gap="6" align="center">
 
           <header align="center" prose>
             <col-ui gap="3">
@@ -408,7 +415,7 @@
             </col-ui>
           </header>
 
-          <col-ui gap="3" style="width: 100%; max-width: 460px;">
+          <col-ui gap="3">
             <card-ui variant="outlined" interactive>
               <section>
                 <row-ui gap="3" align="center" justify="between">
@@ -482,7 +489,7 @@
              OTP entry with backup code option,
              trusted device toggle, and session context.
              ═══════════════════════════════════════════ -->
-        <col-ui gap="6" align="center" style="width: 100%; max-width: 1080px;">
+        <col-ui gap="6" align="center">
 
           <header align="center" prose>
             <col-ui gap="3">
@@ -495,7 +502,7 @@
             </col-ui>
           </header>
 
-          <card-ui style="width: 100%; max-width: 420px;">
+          <card-ui>
             <section>
               <col-ui gap="5">
                 <col-ui gap="3" align="center">
@@ -503,7 +510,9 @@
                   <otp-input-ui length="6" sixe="lg"></otp-input-ui>
                 </col-ui>
 
-                <check-ui label="Trust this device for 30 days" size="sm"></check-ui>
+                <field-ui inline label="Trust this device for 30 days">
+                  <check-ui size="sm" name="trust_device"></check-ui>
+                </field-ui>
 
                 <button-ui text="Verify" variant="primary" stretch></button-ui>
 
@@ -533,7 +542,7 @@
     </section>
 
     <script type="module">
-      import "../../../../web-components/components/index.js";
+      import "../../../../../web-components/components/index.js";
     </script>
   </body>
 </html>

package/exemplars/prose/cta/a2ui.json

@@ -99,7 +99,7 @@
     {
       "id": "icon-6",
       "component": "Icon",
-      "name": "acme-logo"
+      "name": "hexagon"
     },
     {
       "id": "text-7",

package/exemplars/prose/cta/chunks/prose-cta-card-1.json

@@ -62,7 +62,7 @@
     {
       "id": "icon-5",
       "component": "Icon",
-      "name": "acme-logo"
+      "name": "hexagon"
     },
     {
       "id": "text-6",

package/exemplars/prose/cta/index.html

@@ -4,49 +4,31 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Acme — CTA Patterns</title>
-    <link rel="stylesheet" href="../../../../web-components/styles/tokens.css" />
-    <link rel="stylesheet" href="../../../../web-components/styles/styles.css" />
-    <style>
-      body {
-        margin: 0;
-        min-height: 100dvh;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 2rem;
-        box-sizing: border-box;
-        font-family: var(--a-font-family);
-        background: var(--a-bg);
-        color: var(--a-fg);
-      }
-     body > section { min-width: 600px; }</style>
+    <link rel="stylesheet" href="../../../../../web-components/styles/tokens.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/themes.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/resets.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/components.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/prose.css" />
+    <link rel="stylesheet" href="../../_shell.css" />
   </head>
   <body>
     <section prose>
       <col-ui gap="16">
         <!-- ━━━ CTA A: Centered CTA Card ━━━ -->
-        <card-ui
-          elevation="2"
-          data-scheme="dark"
-          style="
-            background:
-              linear-gradient(to bottom right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)),
-              url(&quot;https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?w=1200&q=80&quot;) center/cover no-repeat;
-          "
-        >
+        <card-ui elevation="2" data-scheme="dark" class="demo-cta-hero">
           <header>
-            <col-ui align="center" gap="4" style="padding: 3rem 2rem">
-              <icon-ui name="acme-logo"></icon-ui>
+            <col-ui align="center" gap="4">
+              <icon-ui name="hexagon"></icon-ui>
               <text-ui variant="kicker">Ready to start?</text-ui>
               <h2 variant="display" nomargin>Start building for free</h2>
-              <text-ui slot="description" variant="caption" style="padding: 0 0rem; max-width: 56ch; text-align: center;">
+              <text-ui slot="description" variant="caption">
                 Acme gives your team the tools to ship production-ready apps in days, not months. Start with our generous free tier and scale when you're
                 ready.
               </text-ui>
             </col-ui>
           </header>
           <section>
-            <col-ui align="center" gap="4" style="padding: 3rem 2rem">
+            <col-ui align="center" gap="4">
               <row-ui gap="4" justify="center">
                 <button-ui text="Get Started Free" variant="primary" size="lg"></button-ui>
                 <button-ui text="Talk to Sales" variant="outline" size="lg"></button-ui>
@@ -73,7 +55,7 @@
         <!-- ━━━ CTA B: Split CTA with Email Capture ━━━ -->
         <col-ui gap="6">
           <row-ui justify="between" align="center" gap="8" wrap>
-            <col-ui gap="3" grow basis="0" style="min-width: 260px">
+            <col-ui gap="3" grow basis="0">
               <h2 variant="title" nomargin>Stay in the loop</h2>
               <p variant="body" color="subtle" nomargin>Get weekly product updates, tips, and early access to new features.</p>
               <row-ui gap="3">
@@ -106,7 +88,7 @@
               <button-ui text="Start Free Trial" variant="primary" size="lg"></button-ui>
             </col-ui>
           </header>
-          <card-ui variant="outlined" style="max-width: 540px; width: 100%">
+          <card-ui variant="outlined">
             <section>
               <col-ui gap="4">
                 <icon-ui name="quotes" color="accent"></icon-ui>
@@ -130,14 +112,14 @@
             <icon-ui name="star" weight="fill" color="warning"></icon-ui>
             <icon-ui name="star" weight="fill" color="warning"></icon-ui>
             <icon-ui name="star" weight="fill" color="warning"></icon-ui>
-            <span color="muted" style="margin-left: 0.5rem">4.9 average rating</span>
+            <span color="muted">4.9 average rating</span>
           </row-ui>
         </col-ui>
       </col-ui>
     </section>
 
     <script type="module">
-      import "../../../../web-components/components/index.js";
+      import "../../../../../web-components/components/index.js";
     </script>
   </body>
 </html>

package/exemplars/prose/feature-grid/index.html

@@ -4,22 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AdiaUI Block — Feature Grid</title>
-    <link rel="stylesheet" href="../../../../web-components/styles/tokens.css" />
-    <link rel="stylesheet" href="../../../../web-components/styles/styles.css" />
-    <style>
-      body {
-        margin: 0;
-        min-height: 100dvh;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 2rem;
-        box-sizing: border-box;
-        font-family: var(--a-font-family);
-        background: var(--a-bg);
-        color: var(--a-fg);
-      }
-     body > section { min-width: 600px; }</style>
+    <link rel="stylesheet" href="../../../../../web-components/styles/tokens.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/themes.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/resets.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/components.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/prose.css" />
+    <link rel="stylesheet" href="../../_shell.css" />
   </head>
   <body>
     <section prose>
@@ -97,7 +87,7 @@
     </section>
 
     <script type="module">
-      import "../../../../web-components/components/index.js";
+      import "../../../../../web-components/components/index.js";
     </script>
   </body>
 </html>

package/exemplars/prose/footer/index.html

@@ -4,15 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AdiaUI Block — Footer</title>
-    <link rel="stylesheet" href="../../../../web-components/styles/tokens.css" />
-    <link rel="stylesheet" href="../../../../web-components/styles/styles.css" />
-    <style>
-      body { margin: 0; min-height: 100dvh; display: flex; align-items: flex-end; justify-content: center; padding: 2rem; box-sizing: border-box; font-family: var(--a-font-family); background: var(--a-bg); color: var(--a-fg); }
-      footer a { color: var(--a-fg-subtle); text-decoration: none; font-size: var(--a-ui-md); transition: color var(--a-duration-fast) var(--a-easing); }
-      footer a:hover { color: var(--a-fg); }
-     body > section { min-width: 600px; }</style>
+    <link rel="stylesheet" href="../../../../../web-components/styles/tokens.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/themes.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/resets.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/components.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/prose.css" />
+    <link rel="stylesheet" href="../../_shell.css" />
   </head>
-  <body>
+  <body data-anchor="bottom">
     <footer prose>
       <col-ui gap="8">
         <!-- Top Section -->
@@ -104,7 +103,7 @@
     </footer>
 
     <script type="module">
-      import "../../../../web-components/components/index.js";
+      import "../../../../../web-components/components/index.js";
     </script>
   </body>
 </html>

package/exemplars/prose/hero/index.html

@@ -4,22 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Prose — Hero</title>
-    <link rel="stylesheet" href="../../../../web-components/styles/tokens.css" />
-    <link rel="stylesheet" href="../../../../web-components/styles/styles.css" />
-    <style>
-      body {
-        margin: 0;
-        min-height: 100dvh;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 2rem;
-        box-sizing: border-box;
-        font-family: var(--a-font-family);
-        background: var(--a-bg);
-        color: var(--a-fg);
-      }
-     body > section { min-width: 600px; }</style>
+    <link rel="stylesheet" href="../../../../../web-components/styles/tokens.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/themes.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/resets.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/components.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/prose.css" />
+    <link rel="stylesheet" href="../../_shell.css" />
   </head>
   <body>
     <section prose>
@@ -66,7 +56,7 @@
           <!-- Product screenshot placeholder -->
           <card-ui variant="outlined">
             <section>
-              <col-ui align="center" justify="center" gap="2" style="padding: 5rem 0">
+              <col-ui align="center" justify="center" gap="2">
                 <icon-ui name="browser" size="lg" color="muted"></icon-ui>
                 <text-ui>Product screenshot</text-ui>
               </col-ui>
@@ -101,11 +91,11 @@
             <col-ui gap="3">
               <row-ui gap="2" align="center">
                 <row-ui gap="-2" align="center">
-                  <avatar-ui name="Alice Chen" size="sm"></avatar-ui>
-                  <avatar-ui name="Bob Park" size="sm"></avatar-ui>
-                  <avatar-ui name="Carol Diaz" size="sm"></avatar-ui>
-                  <avatar-ui name="Dan Kumar" size="sm"></avatar-ui>
-                  <avatar-ui name="Eva Novak" size="sm"></avatar-ui>
+                  <avatar-ui text="Alice Chen" size="sm"></avatar-ui>
+                  <avatar-ui text="Bob Park" size="sm"></avatar-ui>
+                  <avatar-ui text="Carol Diaz" size="sm"></avatar-ui>
+                  <avatar-ui text="Dan Kumar" size="sm"></avatar-ui>
+                  <avatar-ui text="Eva Novak" size="sm"></avatar-ui>
                 </row-ui>
                 <text-ui>12,000+ teams trust Acme</text-ui>
               </row-ui>
@@ -116,7 +106,7 @@
           <col-ui gap="4">
             <card-ui elevation="2">
               <section>
-                <col-ui align="center" justify="center" gap="2" style="padding: 6rem 2rem">
+                <col-ui align="center" justify="center" gap="2">
                   <icon-ui name="browser" size="lg" color="muted"></icon-ui>
                   <text-ui>Product screenshot</text-ui>
                 </col-ui>
@@ -221,7 +211,7 @@
     </section>
 
     <script type="module">
-      import "../../../../web-components/components/index.js";
+      import "../../../../../web-components/components/index.js";
     </script>
   </body>
 </html>

package/exemplars/prose/pricing/index.html

@@ -4,22 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AdiaUI Block — Pricing</title>
-    <link rel="stylesheet" href="../../../../web-components/styles/tokens.css" />
-    <link rel="stylesheet" href="../../../../web-components/styles/styles.css" />
-    <style>
-      body {
-        margin: 0;
-        min-height: 100dvh;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 2rem;
-        box-sizing: border-box;
-        font-family: var(--a-font-family);
-        background: var(--a-bg);
-        color: var(--a-fg);
-      }
-     body > section { min-width: 600px; }</style>
+    <link rel="stylesheet" href="../../../../../web-components/styles/tokens.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/themes.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/resets.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/components.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/prose.css" />
+    <link rel="stylesheet" href="../../_shell.css" />
   </head>
   <body>
     <section prose>
@@ -302,7 +292,7 @@
     </section>
 
     <script type="module">
-      import "../../../../web-components/components/index.js";
+      import "../../../../../web-components/components/index.js";
     </script>
   </body>
 </html>

package/exemplars/prose/steps/index.html

@@ -4,13 +4,16 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AdiaUI Pattern — Steps</title>
-    <link rel="stylesheet" href="../../../../web-components/styles/tokens.css" />
-    <link rel="stylesheet" href="../../../../web-components/styles/styles.css" />
-    <style>body { margin: 0; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 2rem; box-sizing: border-box; font-family: var(--a-font-family); background: var(--a-bg); color: var(--a-fg); } body > section { min-width: 600px; }</style>
+    <link rel="stylesheet" href="../../../../../web-components/styles/tokens.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/themes.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/resets.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/components.css" />
+    <link rel="stylesheet" href="../../../../../web-components/styles/prose.css" />
+    <link rel="stylesheet" href="../../_shell.css" />
   </head>
   <body>
     <section prose>
-      <col-ui gap="8" style="width: 100%; max-width: 640px;">
+      <col-ui gap="8">
 
         <!-- 1. Horizontal -->
         <col-ui gap="3">
@@ -167,7 +170,7 @@
 
     <script type="module" src="setup.js"></script>
     <script type="module">
-      import "../../../../web-components/components/index.js";
+      import "../../../../../web-components/components/index.js";
     </script>
   </body>
 </html>