@adia-ai/web-components 0.0.16 → 0.0.17

package/components/drawer/drawer.css

@@ -296,14 +296,13 @@
   [slot="panel"] > [slot="body"][padding] { background: var(--a-canvas-0-scrim); }
 
   /* ═══════ Footer ═══════
-     Flex row for actions. [slot="description"] + [slot="action"] = space-between.
-     Mirrors card-ui footer semantics. */
+     Block default — single non-slotted child (e.g. <grid-ui>, <col-ui>, raw
+     paragraph) stretches full-width naturally. Activate flex-row only when a
+     direct slotted child is present, or there are 2+ children — that's the
+     action-row case. Mirrors card-ui footer semantics. */
 
   [slot="panel"] > [slot="footer"] {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--drawer-footer-gap);
+    display: block;
     padding: var(--drawer-footer-pad);
     border-top: 1px solid var(--drawer-divider);
     flex-shrink: 0;
@@ -314,6 +313,14 @@
     z-index: 1;
   }
 
+  [slot="panel"] > [slot="footer"]:has(> [slot]),
+  [slot="panel"] > [slot="footer"]:has(> :nth-child(2)) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--drawer-footer-gap);
+  }
+
   [slot="panel"] > [slot="footer"][justify="end"] {
     justify-content: flex-end;
   }

package/components/input/input.css

@@ -123,12 +123,21 @@
     pointer-events: none;
   }
 
-  /* Prefix + Suffix */
+  /* Prefix + Suffix — inline-flex so icon-ui (or any non-text affix
+     content) centers vertically within the slot wrapper. Without
+     this, an icon inside a default <span slot="prefix"> sits at the
+     baseline of the field's 1.4 line-box and renders visually below
+     the field's center. With inline-flex + align-items: center the
+     icon centers in the slot box, which is itself centered in the
+     field via the field's align-items: center. */
   [slot="prefix"],
   [slot="suffix"] {
+    display: inline-flex;
+    align-items: center;
     flex-shrink: 0;
     color: var(--input-affix-fg);
     font-size: var(--input-font-size);
+    line-height: 1;
     user-select: none;
     pointer-events: none;
   }

package/components/option-card/option-card.css

@@ -22,7 +22,11 @@
     --option-card-radio-bg:         var(--a-bg);
     --option-card-radio-border:     var(--a-border);
     --option-card-radio-fill:       var(--a-accent);
-    --option-card-radio-dot:        var(--a-accent-fg);
+    /* Mirror radio.css's --radio-fg-checked recipe: an always-light
+       token rather than --a-accent-fg, which can flip dark depending
+       on theme/scheme combos and produce a near-black inner dot
+       against the accent disc. */
+    --option-card-radio-dot:        var(--a-chrome-light);
 
     /* ── Typography ── */
     --option-card-heading-color:          var(--a-fg);

package/components/segment/segment.css

@@ -57,8 +57,20 @@
       background var(--segment-duration) var(--segment-easing);
   }
 
+  /* Text rendered via ::after so consumers can drive label via [text].
+     Under the parent's `display: flex`, ::after becomes a flex item with
+     `min-width: auto` (= min-content), which would force the segment to
+     overflow when the label is wider than the available track. Setting
+     `min-width: 0` re-enables shrinking, and `text-overflow: ellipsis`
+     has to live here (not on :scope) because text-overflow does not
+     inherit and only applies to the box that owns the inline text. */
   :scope::after {
     content: attr(text);
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   /* States */

package/components/select/select.css

@@ -110,9 +110,13 @@
     color: var(--select-fg-subtle);
   }
 
-  /* Leading icon / avatar */
+  /* Leading icon / avatar — inline-flex centers icon content vertically
+     within the slot box (same recipe as input-ui's prefix/suffix). */
   [slot="leading"] {
+    display: inline-flex;
+    align-items: center;
     flex-shrink: 0;
+    line-height: 1;
     --a-icon-size: var(--select-font-size);
     color: var(--select-fg-muted);
   }
@@ -204,7 +208,7 @@ select-ui [role="option"] {
 select-ui [role="option"]:hover,
 select-ui [role="option"][data-focused] {
   background: var(--a-bg-hover);
-  color: var(--a-fg);
+  color: var(--a-fg-hover);
 }
 select-ui [role="option"][aria-selected="true"] {
   color: var(--select-fg-selected);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {

package/patterns/app-nav-group/app-nav-group.css

@@ -208,7 +208,7 @@ app-nav-group-ui [slot="popover"] {
   margin: 0;
   padding: var(--a-space-1);
   border: 1px solid var(--a-border-subtle);
-  border-radius: var(--a-radius-lg);
+  border-radius: var(--a-radius);
   background: var(--a-bg-subtle);
   box-shadow: var(--a-shadow-lg);
   min-width: 160px;
@@ -228,7 +228,7 @@ app-nav-group-ui [slot="popover-label"] {
 
 app-nav-group-ui [slot="popover"] [role="option"] {
   padding: var(--a-space-1) var(--a-space-2);
-  border-radius: var(--a-radius-sm);
+  border-radius: var(--a-radius);
   color: var(--a-fg-subtle);
   cursor: pointer;
   white-space: nowrap;

package/patterns/app-shell/css/app-shell.tokens.css

@@ -45,6 +45,10 @@
 
   /* Section labels (e.g. "WORKSPACE") — maps to "kicker" typography role */
   --page-section-gap:             var(--a-space-6);
+  /* Within-section block rhythm (h2 / [data-note] / code-ui / artifact stack). */
+  --page-block-gap:               var(--a-space-4);
+  /* h2 → immediately-following deck/subtitle pair (auto-stamped <header>). */
+  --page-deck-gap:                var(--a-space-1);
   --page-section-size:            var(--a-kicker-size);
   --page-section-weight:          var(--a-kicker-weight);
   --page-section-leading:         var(--a-kicker-leading);
@@ -82,7 +86,7 @@
   --nav-easing:               var(--a-easing);
   --nav-label-px:             var(--a-space-2);
   --nav-label-py:             var(--a-space-1);
-  --nav-label-font-size:      var(--a-ui-tiny);
+  --nav-label-font-size:      var(--a-kicker-sm);
   --nav-label-weight:         var(--a-weight-medium);
   --nav-label-fg:             var(--a-fg-muted);
   --nav-divider-bg:           var(--a-border-subtle);

package/patterns/section-nav/section-nav.css

@@ -12,10 +12,10 @@
     --section-nav-font-size: var(--a-ui-size);
 
     --section-nav-heading-fg:     var(--a-fg-muted);
-    --section-nav-heading-size:   var(--a-ui-tiny);
+    --section-nav-heading-size:   var(--a-kicker-sm);
     --section-nav-heading-weight: var(--a-weight-medium);
     --section-nav-heading-pad-x:  var(--a-space-2);
-    --section-nav-heading-pad-y:  0;
+    --section-nav-heading-pad-y:  var(--a-space-3) var(--a-space-1);
   }
 
   :scope {
@@ -47,7 +47,8 @@
   :scope[heading]:not([heading=""])::before {
     content: attr(heading);
     display: block;
-    padding: var(--section-nav-heading-pad-y) var(--section-nav-heading-pad-x);
+    padding-inline: var(--section-nav-heading-pad-x);
+    padding-block: var(--section-nav-heading-pad-y);
     font-size: var(--section-nav-heading-size);
     font-weight: var(--section-nav-heading-weight);
     color: var(--section-nav-heading-fg);

package/styles/colors/semantics.css

@@ -105,7 +105,7 @@
   --a-bg-subtle:       var(--a-canvas-1);
   --a-bg-muted:        var(--a-canvas-2);
   --a-bg-strong:       var(--a-canvas-4);
-  --a-bg-hover:        var(--a-canvas-3);
+  --a-bg-hover:        var(--a-canvas-2);
   --a-bg-active:       var(--a-canvas-pressed);
   --a-bg-selected:     var(--a-canvas-0-scrim);
   --a-bg-disabled:     var(--a-canvas-muted);
@@ -486,7 +486,7 @@
   --a-ui-bg:               var(--a-canvas-0-scrim);
   --a-ui-bg-hover:         var(--a-canvas-2-scrim);
   --a-ui-bg-active:        var(--a-canvas-0);
-  --a-ui-bg-selected:      var(--a-canvas-bright);
+  --a-ui-bg-selected:      var(--a-canvas-0-scrim);
   --a-ui-bg-disabled:      var(--a-canvas-1);
   --a-ui-bg-invalid:       var(--a-danger-muted);
 
@@ -494,7 +494,7 @@
   --a-ui-text-hover:       var(--a-fg-strong);
   --a-ui-text-active:      var(--a-fg-strong);
   --a-ui-text-selected:    var(--a-fg-strong);
-  --a-ui-text-placeholder: var(--a-fg-subtle);
+  --a-ui-text-placeholder: var(--a-fg-muted);
   --a-ui-text-subtle:      var(--a-fg-subtle);
   --a-ui-text-muted:       var(--a-fg-muted);
   --a-ui-text-disabled:    var(--a-fg-disabled);

package/styles/typography.css

@@ -193,9 +193,9 @@
   /* kicker — short label above a title (eyebrow/overline) */
   --a-kicker-family: var(--a-font-family-ui);
   --a-kicker-weight: var(--a-weight-semibold);
-  --a-kicker-sm: 13px;
-  --a-kicker-md: 14px;
-  --a-kicker-lg: 15px;
+  --a-kicker-sm: 11px;
+  --a-kicker-md: 12px;
+  --a-kicker-lg: 13px;
   --a-kicker-size: var(--a-kicker-md);
   --a-kicker-leading: var(--a-font-leading-normal);
   --a-kicker-tracking: var(--a-font-tracking-wider);