@adia-ai/web-components 0.8.22 → 0.8.24

package/patterns/system-banners/system-banners.examples.html

@@ -5,7 +5,7 @@
       <tag-ui size="sm">alert-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui> <tag-ui size="sm">text-ui</tag-ui>
     </div>
   </div>
-  <p>Persistent strip-shaped surfaces above the app shell. System banners (offline, maintenance, update available), live-update banners ("new since you opened this"), and announcement banners (beta callouts, promos). All three are <code>alert-ui</code> compositions; the variant + dismiss + CTA pattern is what differs.</p>
+  <p>Persistent strip-shaped surfaces above the app shell. System banners (offline, maintenance, update available), live-update banners ("new since you opened this"), and announcement banners (beta callouts, promos). All three are <code>alert-ui</code> compositions; the variant + dismiss + CTA pattern is what differs. Content uses alert-ui's sectioned anatomy (gh#507) — semantic <code>header</code> / <code>section</code> / <code>footer</code> children inside <code>slot="content"</code>; the component owns the gaps, so banner spacing balances without per-banner layout improvisation.</p>
 </header>
 
 <section data-section data-property="when-to-use">
@@ -25,11 +25,14 @@
   <p data-note><code>variant="warning"</code> with a network-slash icon. Non-dismissible while the connection is down. The banner disappears on its own when the network returns; users don't dismiss it manually.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="offline banner">
-      <alert-ui data-chunk="banner-system-offline" variant="warning" icon="wifi-slash">
-        <col-ui slot="content" gap="1">
-          <text-ui strong>You're offline.</text-ui>
-          <text-ui>Changes will sync when the connection returns. Some features are unavailable.</text-ui>
-        </col-ui>
+      <alert-ui data-chunk="banner-system-offline" data-chunk-kind="block"
+        data-chunk-domain="error"
+        data-chunk-description="Offline banner — warning alert with wifi-slash icon: 'You're offline', changes sync when the connection returns, some features unavailable."
+        data-chunk-keywords="offline banner connection lost sync warning network unavailable degraded system status" variant="warning" icon="wifi-slash">
+        <div slot="content">
+          <header>You're offline.</header>
+          <section>Changes will sync when the connection returns. Some features are unavailable.</section>
+        </div>
       </alert-ui>
     </div>
   </div>
@@ -40,14 +43,15 @@
   <p data-note><code>variant="info"</code> with a wrench icon. Posted ahead of a planned outage. Carries the start time and an optional "Learn more" link to a status page. Not dismissible — users need to know.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="maintenance banner">
-      <alert-ui data-chunk="banner-system-maintenance" variant="info" icon="wrench">
-        <col-ui slot="content" gap="1">
-          <text-ui strong>Scheduled maintenance — Sunday, 2:00–4:00 AM UTC.</text-ui>
-          <text-ui>The service will be read-only during this window.</text-ui>
-          <row-ui gap="2" justify="end">
-            <button-ui text="Status page" variant="ghost" size="sm" icon-trailing="arrow-up-right"></button-ui>
-          </row-ui>
-        </col-ui>
+      <alert-ui data-chunk="banner-system-maintenance" data-chunk-kind="block"
+        data-chunk-domain="error"
+        data-chunk-description="Scheduled-maintenance banner — info alert announcing the maintenance window (read-only during it) with a Status-page link action."
+        data-chunk-keywords="maintenance banner scheduled window read-only status page downtime info system announce" variant="info" icon="wrench">
+        <div slot="content">
+          <header>Scheduled maintenance — Sunday, 2:00–4:00 AM UTC.</header>
+          <section>The service will be read-only during this window.</section>
+          <footer><button-ui text="Status page" variant="ghost" size="sm" icon-trailing="arrow-up-right"></button-ui></footer>
+        </div>
       </alert-ui>
     </div>
   </div>
@@ -58,14 +62,15 @@
   <p data-note><code>variant="info"</code> with an arrow-clockwise icon and a primary "Refresh" CTA. Appears when the client detects a newer build. Dismissible (user is in the middle of something) but reappears on next session start.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="update available banner">
-      <alert-ui data-chunk="banner-system-update" variant="info" icon="arrow-clockwise" closable>
-        <col-ui slot="content" gap="1">
-          <text-ui strong>A new version is available.</text-ui>
-          <text-ui>Refresh to get the latest features and fixes.</text-ui>
-          <row-ui gap="2" justify="end">
-            <button-ui text="Refresh" variant="primary" size="sm"></button-ui>
-          </row-ui>
-        </col-ui>
+      <alert-ui data-chunk="banner-system-update" data-chunk-kind="block"
+        data-chunk-domain="error"
+        data-chunk-description="New-version banner — closable info alert saying a new version is available with a primary Refresh action to load it."
+        data-chunk-keywords="update banner new version refresh available closable deploy reload system notice" variant="info" icon="arrow-clockwise" closable>
+        <div slot="content">
+          <header>A new version is available.</header>
+          <section>Refresh to get the latest features and fixes.</section>
+          <footer><button-ui text="Refresh" variant="primary" size="sm"></button-ui></footer>
+        </div>
       </alert-ui>
     </div>
   </div>
@@ -76,16 +81,15 @@
   <p data-note><code>variant="info"</code> with a count + a "Show new" CTA. Sits above a list / feed / table to signal that the underlying data has new rows the user hasn't seen yet. Clicking the CTA scrolls the new items in and dismisses the banner. Companion to the <code>data-stream</code> trait.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="live update banner">
-      <alert-ui data-chunk="banner-live-update" variant="info" icon="arrow-up">
-        <col-ui slot="content" gap="1">
-          <row-ui gap="2" align="baseline" wrap>
-            <text-ui strong>12 new items</text-ui>
-            <text-ui color="subtle">since you opened this view 4 minutes ago.</text-ui>
-          </row-ui>
-          <row-ui gap="2" justify="end">
-            <button-ui text="Show new" variant="primary" size="sm" icon-trailing="arrow-up"></button-ui>
-          </row-ui>
-        </col-ui>
+      <alert-ui data-chunk="banner-live-update" data-chunk-kind="block"
+        data-chunk-domain="display"
+        data-chunk-description="Live-update banner — '12 new items since you opened this view' info alert with a Show-new action that jumps to the fresh content."
+        data-chunk-keywords="live update banner new items feed refresh show-new realtime stale view arrived" variant="info" icon="arrow-up">
+        <div slot="content">
+          <header>12 new items</header>
+          <section><text-ui color="subtle">since you opened this view 4 minutes ago.</text-ui></section>
+          <footer><button-ui text="Show new" variant="primary" size="sm" icon-trailing="arrow-up"></button-ui></footer>
+        </div>
       </alert-ui>
     </div>
   </div>
@@ -96,14 +100,15 @@
   <p data-note><code>variant="info"</code> or <code>variant="muted"</code> with a sparkle / flask icon. Promotes a new feature to opted-in users; carries a "Try it" CTA + dismiss. Once dismissed, persists per-user — don't show twice.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="beta announcement banner">
-      <alert-ui data-chunk="banner-announcement-beta" variant="muted" icon="sparkle" closable>
-        <col-ui slot="content" gap="1">
-          <text-ui strong>New: Saved views.</text-ui>
-          <text-ui>Curate filter sets and reuse them across the workspace. Now in beta.</text-ui>
-          <row-ui gap="2" justify="end">
-            <button-ui text="Try it" variant="primary" size="sm"></button-ui>
-          </row-ui>
-        </col-ui>
+      <alert-ui data-chunk="banner-announcement-beta" data-chunk-kind="block"
+        data-chunk-domain="marketing"
+        data-chunk-description="Feature-announcement banner — closable muted alert introducing a beta feature ('New: Saved views') with a Try-it action."
+        data-chunk-keywords="announcement banner feature beta new try-it closable launch in-app promote" variant="muted" icon="sparkle" closable>
+        <div slot="content">
+          <header>New: Saved views.</header>
+          <section>Curate filter sets and reuse them across the workspace. Now in beta.</section>
+          <footer><button-ui text="Try it" variant="primary" size="sm"></button-ui></footer>
+        </div>
       </alert-ui>
     </div>
   </div>
@@ -114,14 +119,15 @@
   <p data-note><code>variant="info"</code> with a megaphone or calendar icon. Time-boxed (event date, promo end). Dismiss persists for the campaign window. CTA goes to the landing page or signup flow.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="promo announcement banner">
-      <alert-ui data-chunk="banner-announcement-promo" variant="info" icon="megaphone-simple" closable>
-        <col-ui slot="content" gap="1">
-          <text-ui strong>UIConf 2026 — May 22, virtual.</text-ui>
-          <text-ui>Two days of sessions on generative UI, A2UI internals, and the road ahead.</text-ui>
-          <row-ui gap="2" justify="end">
-            <button-ui text="Save your seat" variant="primary" size="sm" icon-trailing="arrow-up-right"></button-ui>
-          </row-ui>
-        </col-ui>
+      <alert-ui data-chunk="banner-announcement-promo" data-chunk-kind="block"
+        data-chunk-domain="marketing"
+        data-chunk-description="Event-promo banner — closable info alert with megaphone icon promoting an event (date, one-line pitch) and a Save-your-seat CTA."
+        data-chunk-keywords="promo banner event conference announcement cta save-seat megaphone marketing closable" variant="info" icon="megaphone-simple" closable>
+        <div slot="content">
+          <header>UIConf 2026 — May 22, virtual.</header>
+          <section>Two days of sessions on generative UI, A2UI internals, and the road ahead.</section>
+          <footer><button-ui text="Save your seat" variant="primary" size="sm" icon-trailing="arrow-up-right"></button-ui></footer>
+        </div>
       </alert-ui>
     </div>
   </div>

package/patterns/timezone-selector/timezone-selector.examples.html

@@ -18,7 +18,10 @@
   <p data-note>Type to filter by city, region, or offset. Default value resolved from the browser's locale; the current-tz hint sits under the input. Composes select-ui[searchable] with no new primitive.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="timezone picker">
-      <card-ui data-chunk="timezone-selector-basic" style="max-width: 480px;">
+      <card-ui data-chunk="timezone-selector-basic" data-chunk-kind="block"
+        data-chunk-domain="settings"
+        data-chunk-description="Time-zone selector card — searchable select of time zones (search by city or region) used for log timestamps, reports and meeting times."
+        data-chunk-keywords="timezone selector searchable select city region utc offset settings locale timestamps display" style="max-width: 480px;">
         <header>
           <span slot="heading" variant="section">Display time zone</span>
           <text-ui slot="description" color="subtle">Used for log timestamps, scheduled reports, and meeting times</text-ui>
@@ -41,7 +44,10 @@
   <p data-note>The chosen zone's current local time updates in the description as the user changes the picker. Useful for "Send at" / "Schedule report" forms where the time-in-target matters more than the offset.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="timezone picker with preview">
-      <card-ui data-chunk="timezone-selector-preview" style="max-width: 480px;">
+      <card-ui data-chunk="timezone-selector-preview" data-chunk-kind="block"
+        data-chunk-domain="settings"
+        data-chunk-description="Schedule with time-zone preview — searchable time-zone select plus a time field, and a live preview line showing the equivalent local times for recipients."
+        data-chunk-keywords="timezone selector schedule report preview local time equivalent recipients searchable convert" style="max-width: 480px;">
         <header>
           <span slot="heading" variant="section">Schedule report</span>
         </header>

package/patterns/timezone-selector/timezone-selector.examples.js

@@ -36,7 +36,9 @@ function timezoneOptions() {
   }
   return zones.map(tz => ({
     value: tz,
-    label: `${tz} · ${offsetLabel(tz)}`,
+    // Display drops the IANA underscores (gh#538) — "America/Los Angeles"
+    // reads human and matches a spaced query; value keeps the exact id.
+    label: `${tz.replace(/_/g, ' ')} · ${offsetLabel(tz)}`,
   }));
 }
 

package/patterns/wizard-drawer/wizard-drawer.examples.html

@@ -22,19 +22,23 @@
   <p data-note>Stepper header, step body, Back/Next footer. The interactive buttons below advance the stepper and switch the body panel.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="wizard">
-      <button-ui data-chunk="wizard-drawer-three-step-wizard" text="Create workspace" icon="plus" variant="primary" onclick="this.nextElementSibling.open=true"></button-ui>
-      <drawer-ui id="pat-wizard" side="right" size="lg">
+      <button-ui id="pat-wizard-open" text="Create workspace" icon="plus" variant="primary"></button-ui>
+      <drawer-ui data-chunk="wizard-drawer-three-step-wizard" data-chunk-kind="block"
+        data-chunk-domain="onboarding"
+        data-chunk-description="Three-step wizard drawer — 'Create workspace' with a stepper (Details / Members / Review) in the header, per-step form bodies, and Back / Next footer navigation."
+        data-chunk-keywords="wizard drawer steps stepper create workspace details members review multi-step back next flow setup" id="pat-wizard" side="right" size="lg">
         <header slot="header">
-          <col-ui gap="2" grow>
-            <text-ui strong>Create workspace</text-ui>
-            <stepper-ui id="pat-wizard-stepper" step="0">
-              <stepper-item-ui text="Details"></stepper-item-ui>
-              <stepper-item-ui text="Members"></stepper-item-ui>
-              <stepper-item-ui text="Review"></stepper-item-ui>
-            </stepper-ui>
-          </col-ui>
+          <text-ui strong>Create workspace</text-ui>
         </header>
         <section slot="body">
+          <!-- Stepper is a CONTENT block above the step panels, not header
+               chrome (operator ruling 2026-07-30): header / content(stepper)
+               / content / footer. -->
+          <stepper-ui id="pat-wizard-stepper" step="0">
+            <stepper-item-ui text="Details"></stepper-item-ui>
+            <stepper-item-ui text="Members"></stepper-item-ui>
+            <stepper-item-ui text="Review"></stepper-item-ui>
+          </stepper-ui>
           <div data-wizard-step="0">
             <col-ui gap="3">
               <h4>Workspace details</h4>
@@ -71,7 +75,7 @@
             <col-ui gap="3">
               <h4>Review and create</h4>
               <alert-ui text="Your workspace will be created and team members will be invited by email." variant="info" icon="info"></alert-ui>
-              <description-list-ui>
+              <description-list-ui layout="inline">
                 <dt>Name</dt><dd>Acme Team</dd>
                 <dt>Slug</dt><dd>/acme-team</dd>
                 <dt>Members</dt><dd>2 invited</dd>
@@ -85,7 +89,7 @@
             <button-ui id="pat-wizard-back" text="Back" variant="ghost" disabled></button-ui>
           </span>
           <span slot="action">
-            <button-ui text="Cancel" variant="ghost" onclick="this.closest('drawer-ui').open=false"></button-ui>
+            <button-ui id="pat-wizard-cancel" text="Cancel" variant="ghost"></button-ui>
             <button-ui id="pat-wizard-next" text="Next" variant="primary"></button-ui>
           </span>
         </footer>
@@ -98,20 +102,18 @@
   <h2 variant="section">Anatomy</h2>
   <code-ui language="html">&lt;drawer-ui side="right" size="lg"&gt;
 
-  &lt;!-- stepper in header tracks progress --&gt;
+  &lt;!-- header carries the title only --&gt;
   &lt;header slot="header"&gt;
-    &lt;col-ui gap="2" grow&gt;
-      &lt;text-ui weight="semibold"&gt;Create workspace&lt;/text-ui&gt;
-      &lt;stepper-ui step="0"&gt;
-        &lt;stepper-item-ui text="Details"&gt;&lt;/stepper-item-ui&gt;
-        &lt;stepper-item-ui text="Members"&gt;&lt;/stepper-item-ui&gt;
-        &lt;stepper-item-ui text="Review"&gt;&lt;/stepper-item-ui&gt;
-      &lt;/stepper-ui&gt;
-    &lt;/col-ui&gt;
+    &lt;text-ui weight="semibold"&gt;Create workspace&lt;/text-ui&gt;
   &lt;/header&gt;
 
-  &lt;!-- one panel per step, toggled via hidden attr --&gt;
+  &lt;!-- stepper is the FIRST content block, then one panel per step --&gt;
   &lt;section slot="body"&gt;
+    &lt;stepper-ui step="0"&gt;
+      &lt;stepper-item-ui text="Details"&gt;&lt;/stepper-item-ui&gt;
+      &lt;stepper-item-ui text="Members"&gt;&lt;/stepper-item-ui&gt;
+      &lt;stepper-item-ui text="Review"&gt;&lt;/stepper-item-ui&gt;
+    &lt;/stepper-ui&gt;
     &lt;div data-wizard-step="0"&gt; ...details... &lt;/div&gt;
     &lt;div data-wizard-step="1" hidden&gt; ...members... &lt;/div&gt;
     &lt;div data-wizard-step="2" hidden&gt; ...review... &lt;/div&gt;
@@ -134,7 +136,7 @@
 <section data-section data-property="rules">
   <h2 variant="section">Rules</h2>
   <ul>
-    <li>Stepper is in the <strong>header</strong>, not the body. The user always sees progress even when the body scrolls.</li>
+    <li>Stepper is the <strong>first content block</strong> of the body — <code>header / content (stepper) / content / footer</code> (operator ruling 2026-07-30); the header carries the title only. Review steps use <code>description-list-ui layout="inline"</code>, the responsive two-column property|value settings layout.</li>
     <li>Use <code>stepper-ui.step</code> (numeric) as the source of truth. Toggle <code>hidden</code> on <code>[data-wizard-step="N"]</code> to swap panels.</li>
     <li>The primary action label changes on the last step: "Next" → "Create" / "Finish". Back button is disabled on step 0.</li>
     <li>Every step validates independently before advancing. Advance triggers <code>.next()</code> on the stepper AND unhides the next panel.</li>

package/patterns/wizard-drawer/wizard-drawer.examples.js

@@ -1,12 +1,23 @@
-/** Wizard drawer pattern — wire stepper to step-panel swap */
+/** Wizard drawer pattern — wire stepper to step-panel swap.
+ *
+ * ALL interactivity lives here, none inline (gh#506): the site route
+ * renders the markup through the A2UI pipeline, which does not execute
+ * inline onclick handlers — an onclick-opened drawer demo is dead on
+ * /site/patterns/wizard-drawer. The route's `setup` module (this file)
+ * DOES run there, so the open/cancel triggers wire here like Back/Next. */
 
 export default function setup(router) {
   const stepper = router.querySelector('#pat-wizard-stepper');
   const backBtn = router.querySelector('#pat-wizard-back');
   const nextBtn = router.querySelector('#pat-wizard-next');
   const drawer  = router.querySelector('#pat-wizard');
+  const openBtn   = router.querySelector('#pat-wizard-open');
+  const cancelBtn = router.querySelector('#pat-wizard-cancel');
   if (!stepper || !backBtn || !nextBtn || !drawer) return;
 
+  openBtn?.addEventListener('press', () => { drawer.open = true; });
+  cancelBtn?.addEventListener('press', () => { drawer.open = false; });
+
   const total = 3;
   let step = 0;
 

package/styles/foundation/radius.css

@@ -11,8 +11,8 @@
 }
 
 :root {
-  --a-radius-min: 0.25rem;
-  --a-radius-max: 1.25rem;
+  --a-radius-min: 0.375rem; /* 6px — operator ruling 2026-07-30 */
+  --a-radius-max: 0.875rem; /* 14px */
   /* §230-bundle (v0.5.9): xs scale notch added for badge / sub-tile / inline-pill use cases needing smaller radius than `sm`. */
   --a-radius-xs-k: 0.166;
   --a-radius-sm-k: 0.333;

package/styles/scale.css

@@ -115,8 +115,8 @@
     --a-gap-xl: calc(var(--a-space-4)   * var(--a-gap-k)); /* 16px @k=1 */
     --a-gap: var(--a-gap-md);
 
-    --a-radius-min: 0.25rem;
-    --a-radius-max: 1.25rem;
+    --a-radius-min: 0.375rem; /* 6px — operator ruling 2026-07-30; byte-copy of foundation/radius.css */
+    --a-radius-max: 0.875rem; /* 14px */
     --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
     --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
     --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));

package/styles/type/scale.css

@@ -19,12 +19,12 @@
   --a-font-family-code: var(--a-font-family-mono);
   --a-font-family-control: var(--a-font-family-mono);
   --a-font-family: var(--a-font-family-sans);
-  /* Back-compat alias for the pre-ADR-0035 token name. DEPRECATED — prefer
-     --a-font-family. Kept so legacy `font-family: var(--a-font)` references
-     (demo scaffolds, external consumers, embedded apps) resolve to the sans
-     stack instead of going invalid-at-computed-value-time → inherit → UA
-     serif. Retire once the host.css migration removes the boilerplate. */
-  --a-font: var(--a-font-family);
+  /* `--a-font` (the pre-ADR-0035 back-compat alias) was REMOVED in 0.8.23
+     (gh ruling 2026-07-30; prerequisite in-repo sweep 2026-07-29). A
+     surviving `var(--a-font)` reference goes invalid-at-computed-value-time
+     → inherit → UA serif — see MIGRATION GUIDE §0.9.0; the
+     audit-font-family-floor gate and forge/factory lint rules flag any
+     usage. */
 
   /* ── Type scale ──
       Ratio: ~1.25 (major third) with dramatic hero jump.