@adia-ai/web-components 0.8.39 → 0.8.41

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.8.39",
+  "version": "0.8.41",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui.",
   "type": "module",
   "types": "./index.d.ts",
   "bin": {
-    "adia-ui-doc": "./bin/doc.mjs"
+    "adia-ui-doc": "./bin/doc.mjs",
+    "adia-ui-audit-template-children": "./bin/audit-template-children.mjs"
   },
   "exports": {
     ".": {
@@ -106,6 +107,7 @@
     "css-module.d.ts",
     "web-components.sheet.d.ts",
     "bin/",
+    "!bin/*.test.js",
     "custom-elements.json",
     "USAGE.md",
     "README.md",

package/patterns/conversion-funnel/conversion-funnel.examples.html

@@ -3,9 +3,9 @@
     <h1>Conversion Funnel</h1>
   </div>
   <div data-tags>
-    <code>card-ui</code> <code>progress-row-ui</code> <code>row-ui</code> <code>col-ui</code>
+    <code>card-ui</code> <code>progress-ui</code> <code>row-ui</code> <code>col-ui</code>
   </div>
-  <p>Composition pattern: render a multi-step drop-off funnel without a dedicated funnel component. Uses <code>progress-row-ui</code> for each step so the bar, label, and meta text stay aligned to the card-ui content rhythm.</p>
+  <p>Composition pattern: render a multi-step drop-off funnel without a dedicated funnel component. Uses <code>progress-ui</code>[label] for each step so the bar, label, and meta text stay aligned to the card-ui content rhythm.</p>
 </header>
 
 <section data-section data-property="when-to-use">
@@ -21,7 +21,7 @@
 
 <section data-section data-property="4-step-funnel">
   <h2 variant="section">Four-step funnel</h2>
-  <p data-note>Top step is an explicit 100% baseline (no progress bar — it's the anchor). Subsequent steps use <code>progress-row-ui</code> with the count + percentage in the meta slot.</p>
+  <p data-note>Top step is an explicit 100% baseline (no progress bar — it's the anchor). Subsequent steps use <code>progress-ui</code>[label] with the count + percentage in the meta slot.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="conversion funnel">
       <card-ui data-chunk="conversion-funnel-4-step-funnel" data-chunk-kind="block"
@@ -41,9 +41,9 @@
               </col-ui>
               <text-ui strong>100%</text-ui>
             </row-ui>
-            <progress-row-ui label="Signed up" value="42" meta="11,942 · 42%"></progress-row-ui>
-            <progress-row-ui label="Activated" value="28" meta="7,961 · 28%"></progress-row-ui>
-            <progress-row-ui label="Converted to paid" value="8" meta="2,274 · 8.0%"></progress-row-ui>
+            <progress-ui label="Signed up" value="42" meta="11,942 · 42%"></progress-ui>
+            <progress-ui label="Activated" value="28" meta="7,961 · 28%"></progress-ui>
+            <progress-ui label="Converted to paid" value="8" meta="2,274 · 8.0%"></progress-ui>
           </col-ui>
         </section>
       </card-ui>
@@ -79,9 +79,9 @@
               </col-ui>
               <text-ui strong>100%</text-ui>
             </row-ui>
-            <progress-row-ui label="Added to cart" value="58" meta="24,464 · 58%"></progress-row-ui>
-            <progress-row-ui label="Reached payment" value="34" meta="14,341 · 34%"></progress-row-ui>
-            <progress-row-ui label="Completed purchase" value="19" meta="8,014 · 19%"></progress-row-ui>
+            <progress-ui label="Added to cart" value="58" meta="24,464 · 58%"></progress-ui>
+            <progress-ui label="Reached payment" value="34" meta="14,341 · 34%"></progress-ui>
+            <progress-ui label="Completed purchase" value="19" meta="8,014 · 19%"></progress-ui>
           </col-ui>
         </section>
         <footer divider>
@@ -120,15 +120,15 @@
             <!-- Delta badge rides INSIDE the meta slot (gh#502): authored
                  [slot="meta"] keeps text + badge on the meta text line,
                  instead of a sibling column centered against the whole row. -->
-            <progress-row-ui label="Email verified" value="68">
+            <progress-ui label="Email verified" value="68">
               <span slot="meta">5,726 · 68% <badge-ui text="−32%" variant="warning"></badge-ui></span>
-            </progress-row-ui>
-            <progress-row-ui label="Workspace created" value="54">
+            </progress-ui>
+            <progress-ui label="Workspace created" value="54">
               <span slot="meta">4,547 · 54% <badge-ui text="−21%" tone="muted"></badge-ui></span>
-            </progress-row-ui>
-            <progress-row-ui label="Invited a teammate" value="22">
+            </progress-ui>
+            <progress-ui label="Invited a teammate" value="22">
               <span slot="meta">1,852 · 22% <badge-ui text="−59%" variant="danger"></badge-ui></span>
-            </progress-row-ui>
+            </progress-ui>
           </col-ui>
         </section>
       </card-ui>

package/patterns/inline-dialog/inline-dialog.examples.html

@@ -111,10 +111,10 @@
             <section>
               <col-ui gap="3">
                 <field-ui label="Date">
-                  <input-ui type="date" name="date" value="2026-03-15"></input-ui>
+                  <calendar-picker-ui name="date" value="2026-03-15"></calendar-picker-ui>
                 </field-ui>
                 <field-ui label="Time">
-                  <input-ui type="time" name="time" value="09:00"></input-ui>
+                  <time-picker-ui name="time" value="09:00"></time-picker-ui>
                 </field-ui>
               </col-ui>
             </section>

package/patterns/inline-dialog/inline-dialog.html

@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="../../styles/tokens.css">
 
   <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/calendar-picker/calendar-picker.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">
@@ -19,8 +20,10 @@
   <link rel="stylesheet" href="../../components/select/select.css">
   <link rel="stylesheet" href="../../components/tag/tag.css">
   <link rel="stylesheet" href="../../components/text/text.css">
+  <link rel="stylesheet" href="../../components/time-picker/time-picker.css">
 
   <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/calendar-picker/calendar-picker.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>
@@ -31,6 +34,7 @@
   <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>
+  <script type="module" src="../../components/time-picker/time-picker.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); }

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

@@ -57,7 +57,7 @@
               <select-ui id="tz-select-preview" searchable></select-ui>
             </field-ui>
             <field-ui label="Send at">
-              <input-ui type="time" name="send-at" value="09:00"></input-ui>
+              <time-picker-ui name="send-at" value="09:00"></time-picker-ui>
             </field-ui>
             <text-ui id="tz-preview" color="subtle" size="sm"></text-ui>
           </col-ui>

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

@@ -13,22 +13,22 @@
   <link rel="stylesheet" href="../../components/col/col.css">
   <link rel="stylesheet" href="../../components/field/field.css">
   <link rel="stylesheet" href="../../components/icon/icon.css">
-  <link rel="stylesheet" href="../../components/input/input.css">
   <link rel="stylesheet" href="../../components/row/row.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">
+  <link rel="stylesheet" href="../../components/time-picker/time-picker.css">
 
   <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/icon/icon.js"></script>
-  <script type="module" src="../../components/input/input.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/tag/tag.js"></script>
   <script type="module" src="../../components/text/text.js"></script>
+  <script type="module" src="../../components/time-picker/time-picker.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); }

package/styles/api/text.css

@@ -28,6 +28,13 @@
 [text-align="right"] {
   text-align: right;
 }
+/* gh#1335 — added so text-ui[text-align="justify"] converges onto this
+   global attribute instead of shadowing it with a component-local logical
+   vocabulary (start/end/justify). A genuine physical (non-directional)
+   alignment value, not a gap in the physical-only grammar. */
+[text-align="justify"] {
+  text-align: justify;
+}
 
 /* Font weight — six steps matching --a-weight-* tokens */
 [weight="thin"] {

package/styles/type/scale.css

@@ -52,12 +52,6 @@
   --a-weight-bold: 700;
   --a-weight: var(--a-weight-normal);
 
-  /* ── Line height ── */
-  --a-leading-none: 1; /* hero numbers — no extra space at display scale */
-  --a-leading-tight: 1.2; /* headings, large text */
-  --a-leading-snug: 1.3; /* labels, compact UI text */
-  --a-leading-normal: 1.5; /* body text, readable paragraphs */
-
   /* ── Letter spacing ── */
   --a-tracking-tighter: -0.02em; /* hero/display numbers */
   --a-tracking-tight: -0.01em; /* stat values, large text */
@@ -65,7 +59,12 @@
   --a-tracking-wide: 0.04em; /* stat units, small uppercase */
   --a-tracking-wider: 0.06em; /* section labels, overlines */
 
-  /* ── Leading curve (tightens as size grows) ── */
+  /* ── Leading curve (tightens as size grows) ──
+     Single canonical leading scale (ADR-0052) — the legacy flat
+     `--a-leading-*` family (removed here) coexisted with this curve under
+     shared step names that resolved to different values; that dual scale,
+     not a missing value, was why components reached for literals. */
+  --a-font-leading-none: 1; /* hero numbers, single-line UI chrome */
   --a-font-leading-tight: 1.05;
   --a-font-leading-snug: 1.2;
   --a-font-leading-normal: 1.35;