@adia-ai/web-components 0.8.9 → 0.8.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",

package/patterns/comments-and-collaboration/comments-and-collaboration.examples.html

@@ -43,7 +43,7 @@
                 <row-ui gap="1">
                   <tag-ui size="sm" icon-leading="thumbs-up">2</tag-ui>
                   <tag-ui size="sm" icon-leading="eyes">1</tag-ui>
-                  <button-ui text="Reply" variant="ghost" size="xs"></button-ui>
+                  <button-ui text="Reply" variant="ghost" size="sm"></button-ui>
                 </row-ui>
               </col-ui>
             </row-ui>
@@ -57,7 +57,7 @@
                 <text-ui>Chrome — the data scale is reserved for visualization series. Spec at <text-ui color="primary">.claude/docs/specs/component-token-contract.md</text-ui>.</text-ui>
                 <row-ui gap="1">
                   <tag-ui size="sm" icon-leading="thumbs-up">3</tag-ui>
-                  <button-ui text="Reply" variant="ghost" size="xs"></button-ui>
+                  <button-ui text="Reply" variant="ghost" size="sm"></button-ui>
                 </row-ui>
               </col-ui>
             </row-ui>
@@ -70,7 +70,7 @@
                 </row-ui>
                 <text-ui>Filed a follow-up — adding a lint rule so this doesn't happen again. <text-ui color="primary">#linter</text-ui></text-ui>
                 <row-ui gap="1">
-                  <button-ui text="Reply" variant="ghost" size="xs"></button-ui>
+                  <button-ui text="Reply" variant="ghost" size="sm"></button-ui>
                 </row-ui>
               </col-ui>
             </row-ui>
@@ -166,7 +166,7 @@
         <tag-ui size="sm" variant="primary">🎉 2</tag-ui>
         <tag-ui size="sm">👀 1</tag-ui>
         <tag-ui size="sm">🚀 1</tag-ui>
-        <button-ui icon="plus" variant="ghost" size="xs" aria-label="Add reaction"></button-ui>
+        <button-ui icon="plus" variant="ghost" size="sm" aria-label="Add reaction"></button-ui>
       </row-ui>
     </div>
   </div>

package/patterns/kanban-board/kanban-board.examples.html

@@ -95,7 +95,7 @@
                 <section>
                   <text-ui strong>Audit kanban accessibility</text-ui>
                   <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
-                    <avatar-ui size="xs" text="Sam Park"></avatar-ui>
+                    <avatar-ui size="sm" text="Sam Park"></avatar-ui>
                     <tag-ui size="sm">P1</tag-ui>
                   </row-ui>
                 </section>
@@ -104,7 +104,7 @@
                 <section>
                   <text-ui strong>Drag handle hit-target</text-ui>
                   <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
-                    <avatar-ui size="xs" text="Avery Chen"></avatar-ui>
+                    <avatar-ui size="sm" text="Avery Chen"></avatar-ui>
                     <tag-ui size="sm">P2</tag-ui>
                   </row-ui>
                 </section>
@@ -113,7 +113,7 @@
                 <section>
                   <text-ui strong>Empty-column copy</text-ui>
                   <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
-                    <avatar-ui size="xs" text="Jordan Lee"></avatar-ui>
+                    <avatar-ui size="sm" text="Jordan Lee"></avatar-ui>
                     <tag-ui size="sm">P2</tag-ui>
                   </row-ui>
                 </section>
@@ -132,7 +132,7 @@
                 <section>
                   <text-ui strong>Auth flow rebuild</text-ui>
                   <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
-                    <avatar-ui size="xs" text="Jordan Lee"></avatar-ui>
+                    <avatar-ui size="sm" text="Jordan Lee"></avatar-ui>
                     <tag-ui size="sm" variant="warning">P0</tag-ui>
                   </row-ui>
                 </section>
@@ -141,7 +141,7 @@
                 <section>
                   <text-ui strong>OKLCH ramp lint rule</text-ui>
                   <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
-                    <avatar-ui size="xs" text="Kim Granlund"></avatar-ui>
+                    <avatar-ui size="sm" text="Kim Granlund"></avatar-ui>
                     <tag-ui size="sm">P1</tag-ui>
                   </row-ui>
                 </section>
@@ -160,7 +160,7 @@
                 <section>
                   <text-ui strong>v0.0.27 release notes</text-ui>
                   <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
-                    <avatar-ui size="xs" text="Riley Tan"></avatar-ui>
+                    <avatar-ui size="sm" text="Riley Tan"></avatar-ui>
                     <tag-ui size="sm">P1</tag-ui>
                   </row-ui>
                 </section>
@@ -179,7 +179,7 @@
                 <section>
                   <text-ui strong color="subtle"><s>Safari @scope sweep</s></text-ui>
                   <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
-                    <avatar-ui size="xs" text="Kim Granlund"></avatar-ui>
+                    <avatar-ui size="sm" text="Kim Granlund"></avatar-ui>
                     <tag-ui size="sm" variant="success">Done</tag-ui>
                   </row-ui>
                 </section>
@@ -188,7 +188,7 @@
                 <section>
                   <text-ui strong color="subtle"><s>Toast top-layer channel</s></text-ui>
                   <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
-                    <avatar-ui size="xs" text="Sam Park"></avatar-ui>
+                    <avatar-ui size="sm" text="Sam Park"></avatar-ui>
                     <tag-ui size="sm" variant="success">Done</tag-ui>
                   </row-ui>
                 </section>

package/patterns/notifications-bell-and-digest/notifications-bell-and-digest.examples.html

@@ -141,14 +141,14 @@
               <text-ui strong size="sm" color="subtle">Mentions · 4</text-ui>
               <col-ui gap="2">
                 <row-ui gap="2" align="start">
-                  <avatar-ui size="xs" text="Avery Chen"></avatar-ui>
+                  <avatar-ui size="sm" text="Avery Chen"></avatar-ui>
                   <col-ui gap="0" style="flex: 1;">
                     <text-ui>Avery on "OKLCH ramp comment"</text-ui>
                     <text-ui color="subtle" size="sm">"Should we use chrome or data scale here?" · Tuesday</text-ui>
                   </col-ui>
                 </row-ui>
                 <row-ui gap="2" align="start">
-                  <avatar-ui size="xs" text="Jordan Lee"></avatar-ui>
+                  <avatar-ui size="sm" text="Jordan Lee"></avatar-ui>
                   <col-ui gap="0" style="flex: 1;">
                     <text-ui>Jordan on "Auth flow rebuild"</text-ui>
                     <text-ui color="subtle" size="sm">"Nominating for review" · Wednesday</text-ui>

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

@@ -31,7 +31,7 @@
         <section>
           <col-ui gap="4">
             <row-ui gap="4" align="start">
-              <avatar-ui size="xl" text="Kim Granlund"></avatar-ui>
+              <avatar-ui size="lg" 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>

package/patterns/search-discovery/search-discovery.examples.html

@@ -143,19 +143,19 @@
           <list-ui divider contained>
             <list-item-ui text="OKLCH tokens">
               <icon-ui slot="icon" name="clock-counter-clockwise" size="sm"></icon-ui>
-              <button-ui slot="action" icon="x" variant="ghost" size="xs" aria-label="Dismiss"></button-ui>
+              <button-ui slot="action" icon="x" variant="ghost" size="sm" aria-label="Dismiss"></button-ui>
             </list-item-ui>
             <list-item-ui text="primitive audit">
               <icon-ui slot="icon" name="clock-counter-clockwise" size="sm"></icon-ui>
-              <button-ui slot="action" icon="x" variant="ghost" size="xs" aria-label="Dismiss"></button-ui>
+              <button-ui slot="action" icon="x" variant="ghost" size="sm" aria-label="Dismiss"></button-ui>
             </list-item-ui>
             <list-item-ui text="drawer-ui safari fix">
               <icon-ui slot="icon" name="clock-counter-clockwise" size="sm"></icon-ui>
-              <button-ui slot="action" icon="x" variant="ghost" size="xs" aria-label="Dismiss"></button-ui>
+              <button-ui slot="action" icon="x" variant="ghost" size="sm" aria-label="Dismiss"></button-ui>
             </list-item-ui>
             <list-item-ui text="@scope hover bug">
               <icon-ui slot="icon" name="clock-counter-clockwise" size="sm"></icon-ui>
-              <button-ui slot="action" icon="x" variant="ghost" size="xs" aria-label="Dismiss"></button-ui>
+              <button-ui slot="action" icon="x" variant="ghost" size="sm" aria-label="Dismiss"></button-ui>
             </list-item-ui>
           </list-ui>
         </section>

package/styles/colors/semantics/aliases.css

@@ -18,11 +18,24 @@
    mid-tone overlay (`light-dark(X, X)`, same both schemes) rather than
    the old near-black shade-primitive overlay — both are non-adaptive
    "always this color" scrims, but the static one reads lighter/greyer
-   than the old near-black veil. */
+   than the old near-black veil.
+
+   gh#373 (2026-07-20): --a-scrim-dialog was the worst-hit case of that
+   "lighter/greyer" regression — the neutral-500-tinted 50% mid-gray read
+   nowhere near the black ~80% veil modal/drawer/tour/sheet backdrops are
+   meant to be, and the static ladder's darkest tier (strongest, 60%) still
+   isn't black. The static ladder can't grow a black-based tier without
+   retinting itself for --a-scrim-weak/-toast/-default/-strong too (all
+   four stay mapped below, unaffected) — so --a-scrim-dialog alone was
+   re-pointed off the ladder to a purpose-built black token,
+   `--a-chrome-scrim-dialog` (features.css CHROME block, non-adaptive by
+   the same "always this color" contract the whole ladder already claims). */
 
 :root, theme-ui, [theme], theme-provider {
   /* ══════════════════════════════════════════════════════════════
-     SCRIMS — Role aliases onto the static 7-step scrim ladder.
+     SCRIMS — Role aliases. Four of five ride the static 7-step scrim
+     ladder; --a-scrim-dialog is the gh#373 exception (see header
+     comment) and reads a purpose-built black chrome token instead.
      Per-family semantic tiers (weak / default / strong / peak) live
      in surfaces.css.
      ══════════════════════════════════════════════════════════════ */
@@ -30,6 +43,6 @@
   --a-scrim-weak:    var(--md-sys-color-neutral-scrim-weak);      /* 20% — hover wash */
   --a-scrim-toast:   var(--md-sys-color-neutral-scrim);           /* 30% — toast veil */
   --a-scrim-default: var(--md-sys-color-neutral-scrim-strong);    /* 40% — generic overlay */
-  --a-scrim-dialog:  var(--md-sys-color-neutral-scrim-stronger);  /* 50% — modal backdrop */
+  --a-scrim-dialog:  var(--a-chrome-scrim-dialog);                /* 80% black — modal/drawer/tour/sheet backdrop (gh#373) */
   --a-scrim-strong:  var(--md-sys-color-neutral-scrim-strongest); /* 60% (was 70%) — heaviest veil */
 }

package/styles/colors/semantics/features.css

@@ -133,5 +133,15 @@
      readouts). Must read against red / blue / dark / light underlays. */
   --a-chrome-fg:         var(--a-chrome-light);
   --a-chrome-bg:         oklch(0 0 0 / 0.4);
+  /* gh#373: dialog-class scrim (modal/drawer/tour/sheet backdrops) —
+     purpose-built black-based chrome, deliberately NOT routed through
+     the static --md-sys-color-neutral-scrim-* ladder (material-static.css)
+     — that ladder is a fixed neutral-500 mid-tone tint, never black, so
+     it cannot express an 80%-black veil without perturbing its other
+     five roles (weak/toast/default/strong all stay on the ladder; see
+     semantics/aliases.css). Kept independent from --a-chrome-backdrop
+     (50%, its own token) rather than reused, so this fix's blast radius
+     stays scoped to the dialog role alone. */
+  --a-chrome-scrim-dialog: oklch(0 0 0 / 0.8);
 
 }

package/styles/components.css

@@ -50,6 +50,7 @@
 @import "../components/frame/frame.css";
 @import "../components/avatar/avatar.css";
 @import "../components/adia-mark/adia-mark.css";
+@import "../components/adia-wordmark/adia-wordmark.css";
 @import "../components/progress/progress.css";
 @import "../components/skeleton/skeleton.css";
 @import "../components/alert/alert.css";

package/styles/prose.css

@@ -1,6 +1,10 @@
 /* ═══════════════════════════════════════════════════════════════
    PROSE — content context via [prose] attribute.
 
+   ⚠ DEPRECATED (v0.8.11) — superseded by [scale="content-md"]
+   (styles/scale.css, byte-identical values). Removed at v1.0.
+   Do not combine [prose] with [scale] on one element.
+
    Shifts the entire spatial + typographic context to
    content-optimized values. Overrides the sm/md/lg tier tokens
    so the standard [size] selector in tokens.css still works.