@adia-ai/web-components 0.7.2 → 0.7.4

package/components/row/row.css

@@ -1,21 +1,23 @@
 @scope (row-ui) {
   :where(:scope) {
-    /* `--a-gap` defaults to `--a-gap-md` at :root in tokens.css; the
-       universal `[gap="N"]` rules override it on the element, so reading
-       `--a-gap` here picks up `<row-ui gap="…">` automatically. */
-    --row-gap-default:     var(--a-gap);
-    --row-justify-default: flex-start;
-    --row-align-default:   center;
-    --row-drag-bg-active-default: var(--a-accent-muted);
+    /* Gap resolves explicit-then-ambient: `[gap="N"]` sets the
+       non-inheriting `--a-gap-self`; `[size]`/`:root` set the inheriting
+       ambient `--a-gap` (base `--a-gap-md`). Reading
+       `var(--a-gap-self, var(--a-gap))` picks up `<row-ui gap="…">` on
+       this element, else falls through to the inherited ambient. */
+    --row-gap:     var(--a-gap-self, var(--a-gap));
+    --row-justify: flex-start;
+    --row-align:   center;
+    --row-drag-bg-active: var(--a-accent-muted);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: row;
-    gap: var(--row-gap, var(--row-gap-default));
-    justify-content: var(--row-justify, var(--row-justify-default));
-    align-items: var(--row-align, var(--row-align-default));
+    gap: var(--row-gap);
+    justify-content: var(--row-justify);
+    align-items: var(--row-align);
     /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
     padding: var(--a-padding, 0);
     margin: var(--a-margin, 0);
@@ -31,23 +33,23 @@
   :scope[draggable]:active,
   :scope[draggable][data-draggable-dragging] {
     cursor: grabbing;
-    background: var(--row-drag-bg-active, var(--row-drag-bg-active-default));
+    background: var(--row-drag-bg-active);
   }
 
   /* Justify */
-  :scope[justify="start"]         { --row-justify-default: flex-start; }
-  :scope[justify="center"]        { --row-justify-default: center; }
-  :scope[justify="end"]           { --row-justify-default: flex-end; }
-  :scope[justify="between"]       { --row-justify-default: space-between; }
-  :scope[justify="space-between"] { --row-justify-default: space-between; }
-  :scope[justify="space-around"]  { --row-justify-default: space-around; }
+  :scope[justify="start"]         { --row-justify: flex-start; }
+  :scope[justify="center"]        { --row-justify: center; }
+  :scope[justify="end"]           { --row-justify: flex-end; }
+  :scope[justify="between"]       { --row-justify: space-between; }
+  :scope[justify="space-between"] { --row-justify: space-between; }
+  :scope[justify="space-around"]  { --row-justify: space-around; }
 
   /* Align */
-  :scope[align="start"]    { --row-align-default: flex-start; }
-  :scope[align="center"]   { --row-align-default: center; }
-  :scope[align="end"]      { --row-align-default: flex-end; }
-  :scope[align="stretch"]  { --row-align-default: stretch; }
-  :scope[align="baseline"] { --row-align-default: baseline; }
+  :scope[align="start"]    { --row-align: flex-start; }
+  :scope[align="center"]   { --row-align: center; }
+  :scope[align="end"]      { --row-align: flex-end; }
+  :scope[align="stretch"]  { --row-align: stretch; }
+  :scope[align="baseline"] { --row-align: baseline; }
 
   /* Wrap */
   :scope[wrap] { flex-wrap: wrap; }

package/components/row/row.d.ts

@@ -24,7 +24,7 @@ export class UIRow extends UIElement {
   align: string;
   /** Enables drag handle + cursor:grab. Wires the draggable trait; dispatches drag-end. */
   draggable: boolean;
-  /** Gap between children. Named scale (xs/sm/md/lg/xl) or numeric spacing rung ("1"…"16"). Accepts `@bp` notation: gap="2 4@md". */
+  /** Gap between children. Two grammars: a NAMED scale (xs/sm/md/lg/xl, parametric via --a-gap-k — 4/8/12/16/20px at k=1) and an integer space-rung ("0"…"10", "12", "16", literal). At k=1 they coincide: xs=1, sm=2, md=3, lg=4, xl=5. Accepts `@bp` notation: gap="2 4@md". */
   gap: string;
   /** Fills remaining space in a flex parent. CSS-only attribute via :scope[grow] in row.css. */
   grow: boolean;

package/components/row/row.yaml

@@ -29,8 +29,10 @@ props:
     reflect: true
   gap:
     description: >-
-      Gap between children. Named scale (xs/sm/md/lg/xl) or numeric spacing
-      rung ("1"…"16"). Accepts `@bp` notation: gap="2 4@md".
+      Gap between children. Two grammars: a NAMED scale (xs/sm/md/lg/xl, parametric
+      via --a-gap-k — 4/8/12/16/20px at k=1) and an integer space-rung ("0"…"10",
+      "12", "16", literal). At k=1 they coincide: xs=1, sm=2, md=3, lg=4, xl=5.
+      Accepts `@bp` notation: gap="2 4@md".
     type: string
     default: md
   grow:

package/components/search/search.css

@@ -1,9 +1,9 @@
 @scope (search-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --search-radius-default:      var(--a-radius);
-    --search-duration-default:    var(--a-duration-fast);
-    --search-easing-default:      var(--a-easing);
+    --search-radius:      var(--a-radius);
+    --search-duration:    var(--a-duration-fast);
+    --search-easing:      var(--a-easing);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -19,11 +19,11 @@
   }
 
   [slot="suffix"] {
-    transition: opacity var(--search-duration, var(--search-duration-default)) var(--search-easing, var(--search-easing-default));
+    transition: opacity var(--search-duration) var(--search-easing);
   }
 
   /* Override input-ui radius to pill for search */
   input-ui {
-    --input-radius: var(--search-radius, var(--search-radius-default));
+    --input-radius: var(--search-radius);
   }
 }

package/components/segment/segment.css

@@ -2,35 +2,36 @@
    (Flavor B — attribute-removal restyle) both fail inside `@scope`.
    Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
 segment-ui:not([disabled]):not([selected]):hover {
-  color: var(--segment-fg-hover, var(--segment-fg-hover-default));
+  color: var(--segment-fg-hover);
 }
 segment-ui[selected] {
-  color: var(--segment-fg-selected, var(--segment-fg-selected-default));
+  color: var(--segment-fg-selected);
 }
 
 @scope (segment-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --segment-px-default:              var(--a-ui-px);
-    --segment-gap-default:             var(--a-space-1);
-    --segment-radius-default:          calc(var(--a-radius) - 2px);
+    --segment-px:              var(--a-ui-px);
+    --segment-gap:             var(--a-space-1);
+    --segment-radius:          calc(var(--a-radius) - 2px);
 
     /* ── Typography ── */
-    --segment-font-size-default:       var(--a-ui-size);
-    --segment-font-weight-default:     var(--a-ui-weight);
+    --segment-font-size:       var(--a-ui-size);
+    --segment-font-weight:     var(--a-ui-weight);
+    --segment-font-family:     var(--a-font-family-ui);
 
     /* ── Colors ── */
-    --segment-fg-default:              var(--a-ui-text-subtle);
-    --segment-fg-hover-default:        var(--a-ui-text-hover);
-    --segment-fg-selected-default:     var(--a-chrome-dark);
-    --segment-fg-disabled-default:     var(--a-ui-text-disabled);
+    --segment-fg:              var(--a-ui-text-subtle);
+    --segment-fg-hover:        var(--a-ui-text-hover);
+    --segment-fg-selected:     var(--a-chrome-dark);
+    --segment-fg-disabled:     var(--a-ui-text-disabled);
 
     /* ── Transition ── */
-    --segment-duration-default:        var(--a-duration-fast);
-    --segment-easing-default:          var(--a-easing);
+    --segment-duration:        var(--a-duration-fast);
+    --segment-easing:          var(--a-easing);
 
     /* ── Focus ── */
-    --segment-focus-ring-default:      var(--a-focus-ring);
+    --segment-focus-ring:      var(--a-focus-ring);
   }
 
   :scope {
@@ -41,15 +42,19 @@ segment-ui[selected] {
     justify-content: center;
     align-self: stretch;
     min-width: 0;
-    gap: var(--segment-gap, var(--segment-gap-default));
+    gap: var(--segment-gap);
 
-    padding-inline: var(--segment-px, var(--segment-px-default));
+    padding-inline: var(--segment-px);
 
     font: inherit;
-    font-size: var(--segment-font-size, var(--segment-font-size-default));
-    font-weight: var(--segment-font-weight, var(--segment-font-weight-default));
+    /* font-family floor — `font: inherit` alone has no default, so a broken
+       inherited font (e.g. serif host doc) leaks straight through. Anchor to
+       the UI font; overridable via --segment-font-family. */
+    font-family: var(--segment-font-family);
+    font-size: var(--segment-font-size);
+    font-weight: var(--segment-font-weight);
     line-height: 1;
-    color: var(--segment-fg, var(--segment-fg-default));
+    color: var(--segment-fg);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -59,12 +64,12 @@ segment-ui[selected] {
     z-index: 1;
     cursor: pointer;
     user-select: none;
-    border-radius: var(--segment-radius, var(--segment-radius-default));
+    border-radius: var(--segment-radius);
     background: transparent;
 
     transition:
-      color var(--segment-duration, var(--segment-duration-default)) var(--segment-easing, var(--segment-easing-default)),
-      background var(--segment-duration, var(--segment-duration-default)) var(--segment-easing, var(--segment-easing-default));
+      color var(--segment-duration) var(--segment-easing),
+      background var(--segment-duration) var(--segment-easing);
   }
 
   /* Text rendered via ::after so consumers can drive label via [text].
@@ -93,11 +98,11 @@ segment-ui[selected] {
 
   :scope:focus-visible {
     outline: none;
-    box-shadow: var(--segment-focus-ring, var(--segment-focus-ring-default));
+    box-shadow: var(--segment-focus-ring);
   }
 
   :scope[disabled] {
-    color: var(--segment-fg-disabled, var(--segment-fg-disabled-default));
+    color: var(--segment-fg-disabled);
     cursor: not-allowed;
     pointer-events: none;
   }

package/components/segmented/segmented.css

@@ -1,26 +1,27 @@
 @scope (segmented-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --segmented-height-default:           var(--a-size);
+    --segmented-height:           var(--a-size);
     /* Component-intrinsic visual constants; no --a-space-* equivalent */
-    --segmented-padding-default:          2px;
-    --segmented-border-width-default:     0px;
-    --segmented-inset-default:            calc(var(--segmented-padding, var(--segmented-padding-default)) + var(--segmented-border-width, var(--segmented-border-width-default)));
-    --segmented-radius-default:           var(--a-radius);
+    --segmented-padding:          2px;
+    --segmented-border-width:     0px;
+    --segmented-inset:            calc(var(--segmented-padding) + var(--segmented-border-width));
+    --segmented-radius:           var(--a-radius);
 
     /* ── Colors ── */
-    --segmented-bg-default:               var(--a-ui-bg);
-    --segmented-border-default:           transparent;
-    --segmented-indicator-bg-default:     var(--a-chrome-light);
-    --segmented-indicator-shadow-default: var(--a-shadow-sm);
-    --segmented-indicator-radius-default: calc(var(--segmented-radius, var(--segmented-radius-default)) - var(--segmented-inset, var(--segmented-inset-default)));
+    --segmented-bg:               var(--a-ui-bg);
+    --segmented-border:           transparent;
+    --segmented-indicator-bg:     var(--a-chrome-light);
+    --segmented-indicator-shadow: var(--a-shadow-sm);
+    --segmented-indicator-radius: calc(var(--segmented-radius) - var(--segmented-inset));
 
     /* ── Typography ── */
-    --segmented-font-size-default:        var(--a-ui-size);
+    --segmented-font-size:        var(--a-ui-size);
+    --segmented-font-family:      var(--a-font-family-ui);
 
     /* ── Transition ── */
-    --segmented-duration-default:         var(--a-duration);
-    --segmented-easing-default:           var(--a-easing-out);
+    --segmented-duration:         var(--a-duration);
+    --segmented-easing:           var(--a-easing-out);
 
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
@@ -46,13 +47,17 @@
     isolation: isolate;
     overflow: hidden;
 
-    min-height: var(--segmented-height, var(--segmented-height-default));
-    padding: var(--segmented-padding, var(--segmented-padding-default));
-    font-size: var(--segmented-font-size, var(--segmented-font-size-default));
+    min-height: var(--segmented-height);
+    padding: var(--segmented-padding);
+    /* font-family floor — anchor to the UI font so the control keeps its
+       AdiaUI identity even if the host page's inherited font is broken/unset
+       (e.g. a serif host document). Overridable via --segmented-font-family. */
+    font-family: var(--segmented-font-family);
+    font-size: var(--segmented-font-size);
 
-    background: var(--segmented-bg, var(--segmented-bg-default));
-    border: var(--segmented-border-width, var(--segmented-border-width-default)) solid var(--segmented-border, var(--segmented-border-default));
-    border-radius: var(--segmented-radius, var(--segmented-radius-default));
+    background: var(--segmented-bg);
+    border: var(--segmented-border-width) solid var(--segmented-border);
+    border-radius: var(--segmented-radius);
   }
 
   /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
@@ -66,16 +71,16 @@
   :scope[data-indicator-ready] > [data-indicator] {
     display: block;
     position: absolute;
-    inset: var(--segmented-inset, var(--segmented-inset-default));
+    inset: var(--segmented-inset);
     right: auto;
-    width: calc((100% - var(--segmented-inset, var(--segmented-inset-default)) * 2) / var(--_segment-count));
+    width: calc((100% - var(--segmented-inset) * 2) / var(--_segment-count));
 
-    background: var(--segmented-indicator-bg, var(--segmented-indicator-bg-default));
-    border-radius: var(--segmented-indicator-radius, var(--segmented-indicator-radius-default));
-    box-shadow: var(--segmented-indicator-shadow, var(--segmented-indicator-shadow-default));
+    background: var(--segmented-indicator-bg);
+    border-radius: var(--segmented-indicator-radius);
+    box-shadow: var(--segmented-indicator-shadow);
     pointer-events: none;
 
-    transition: transform var(--segmented-duration, var(--segmented-duration-default)) var(--segmented-easing, var(--segmented-easing-default));
+    transition: transform var(--segmented-duration) var(--segmented-easing);
   }
 
   /* Size handled by universal [size] attribute system. */