@adia-ai/web-components 0.8.3 → 0.8.5

package/components/swiper/swiper.css

@@ -191,7 +191,16 @@
      `--swiper-dot-size` for idle dots and `--swiper-dot-size-active`
      for the active one (one space token larger). Padding is computed
      from the size so the dot stays centered in the hitbox. */
-  :scope [data-swiper-dots] > button {
+  :scope [data-swiper-dots] > button-ui {
+    /* Stamped <button-ui variant="ghost" role="tab"> (gh issue 276 wave 4).
+       The dot look is bespoke (content-box clip keeps a 1rem hitbox around
+       a --swiper-dot-size circle) — these host declarations out-specify
+       button-ui's token-driven chrome; the ghost variant keeps its own
+       hover fill out of the way. */
+    /* button-ui floors min-width/height at --button-height — point it at
+       the VISIBLE circle so the padding (not the min-floor) builds the
+       1rem hitbox, exactly like the native dot did. */
+    --button-height: var(--swiper-dot-size);
     width: var(--swiper-dot-size);
     height: var(--swiper-dot-size);
     border-radius: var(--swiper-dot-radius);
@@ -208,18 +217,18 @@
      `background-clip: content-box` from the base rule isn't reset to
      its initial `border-box` value — the colored area would otherwise
      fill the full 1rem hitbox and turn into a huge circle. */
-  :scope [data-swiper-dots] > button:hover {
+  :scope [data-swiper-dots] > button-ui:hover {
     background-color: var(--swiper-dot-bg-active);
   }
 
   /* Focus ring is rendered INSIDE the padding area (inset shadow), so
      the dot's visual footprint stays the size of every other dot. */
-  :scope [data-swiper-dots] > button:focus-visible {
+  :scope [data-swiper-dots] > button-ui:focus-visible {
     outline: none;
     box-shadow: inset 0 0 0 var(--a-focus-width) var(--a-focus-color);
   }
 
-  :scope [data-swiper-dots] > button[aria-current="true"] {
+  :scope [data-swiper-dots] > button-ui[aria-current="true"] {
     background-color: var(--swiper-dot-bg-active);
     width: var(--swiper-dot-size-active);
     height: var(--swiper-dot-size-active);

package/components/switch/switch.css

@@ -130,7 +130,7 @@ switch-ui[checked] [slot="thumb"] {
   }
 
   :scope:focus-visible { outline: none; }
-  :scope:focus-visible [slot="track"] { box-shadow: var(--switch-focus-ring); }
+  :scope:focus-visible [slot="track"] { box-shadow: var(--switch-focus-ring); border-color: transparent; }
 
   /* Size handled by universal [size] attribute system. */
 }

package/components/tag/tag.a2ui.json

@@ -74,7 +74,10 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "display",
-    "composes": [],
+    "composes": [
+      "button-ui",
+      "icon-ui"
+    ],
     "events": {
       "remove": {
         "description": "Fired when the dismiss button is activated.",

package/components/tag/tag.class.js

@@ -55,7 +55,9 @@ export class UITag extends UIElement {
   };
 
   static parts = {
-    dismiss: '<button slot="dismiss" type="button" aria-label="Remove"><icon-ui name="x" weight="bold"></icon-ui></button>',
+    // button-ui, not a native <button> (gh issue 276) — the icon slots in
+    // explicitly to keep its bold weight (the icon= prop stamps regular).
+    dismiss: '<button-ui slot="dismiss" variant="ghost" size="xs" aria-label="Remove"><icon-ui slot="icon" name="x" weight="bold"></icon-ui></button-ui>',
   };
 
   static template = () => null;

package/components/tag/tag.css

@@ -196,6 +196,7 @@ tag-ui[removable]:not([disabled]):hover {
   :scope:focus-visible {
     outline: none;
     box-shadow: var(--tag-focus-ring);
+    border-color: transparent;
   }
 
   /* ── Slotted icons (leading) ──
@@ -222,28 +223,25 @@ tag-ui[removable]:not([disabled]):hover {
     gap: var(--tag-gap-icon, 0.2em);
   }
 
-  /* ── Dismiss button ── */
+  /* ── Dismiss button — a stamped <button-ui variant="ghost" size="xs">
+     (gh issue 276: no native <button> in stamped DOM); geometry + hover
+     ride button token re-points, chrome is button-ui's own. */
   [slot="dismiss"] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--tag-dismiss-size);
-    height: var(--tag-dismiss-size);
-    padding: 0;
-    border: none;
-    background: none;
-    cursor: pointer;
-    border-radius: var(--tag-dismiss-radius);
-    color: var(--tag-dismiss-fg);
-    opacity: var(--tag-dismiss-opacity);
+    --button-height: var(--tag-dismiss-size);
+    --button-radius: var(--tag-dismiss-radius);
+    --button-fg: var(--tag-dismiss-fg);
+    --button-bg-ghost-hover: var(--tag-dismiss-bg-hover);
+    --button-fg-ghost-hover: var(--tag-dismiss-fg);
     --a-icon-size: 0.875rem;
+
+    opacity: var(--tag-dismiss-opacity);
     order: 1; /* push dismiss to end so layout reads [text] [×] */
-    transition: opacity var(--tag-duration) var(--tag-easing), background var(--tag-duration) var(--tag-easing);
+    flex-shrink: 0;
+    transition: opacity var(--tag-duration) var(--tag-easing);
   }
 
   [slot="dismiss"]:hover {
     opacity: var(--tag-dismiss-opacity-hover);
-    background: var(--tag-dismiss-bg-hover);
   }
 
   /* ── Disabled ── */

package/components/tag/tag.yaml

@@ -16,6 +16,9 @@ description: |
   markers — badge-ui has no remove event. For navigation grouping
   use <nav-group-ui>; for inline command actions use
   <action-list-ui>.
+composes:
+  - button-ui # dismiss affordance (gh issue 276 — no native <button> in stamped DOM)
+  - icon-ui   # the dismiss x glyph, slotted into the button-ui
 props:
   disabled:
     description: Disables interaction and dims the tag.

package/components/tags-input/tags-input.css

@@ -75,6 +75,7 @@
   :scope[aria-invalid="true"]:focus-within,
   :scope[error]:focus-within {
     box-shadow: var(--tags-input-focus-ring-invalid);
+    border-color: transparent;
   }
 
   :scope[disabled] {

package/components/textarea/textarea.css

@@ -96,10 +96,12 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
     outline: none;
     box-shadow: var(--textarea-focus-ring);
     color: var(--textarea-fg-hover);
+    border-color: transparent;
   }
   :scope[aria-invalid="true"]:not([disabled]) [slot="text"]:focus,
   :scope[error]:not([disabled]) [slot="text"]:focus {
     box-shadow: var(--textarea-focus-ring-invalid);
+    border-color: transparent;
   }
   :scope:not([disabled]) [slot="text"]:focus + [slot="label"],
   :scope:not([disabled]):focus-within [slot="label"] {

package/components/time-picker/time-picker.css

@@ -107,11 +107,13 @@ time-picker-ui:not([disabled]):hover {
    Canonical L3 ring; consumed via --time-picker-focus-ring (aliases --a-focus-ring). */
 time-picker-ui:not([disabled]):focus-within {
   box-shadow: var(--time-picker-focus-ring);
+  border-color: transparent;
 }
 
 time-picker-ui[aria-invalid="true"]:not([disabled]):focus-within,
 time-picker-ui[error]:not([disabled]):focus-within {
   box-shadow: var(--time-picker-focus-ring-invalid);
+  border-color: transparent;
 }
 
 /* Disabled / readonly affordance */

package/components/timeline/timeline.a2ui.json

@@ -43,7 +43,8 @@
     "anti_patterns": [],
     "category": "display",
     "composes": [
-      "icon-ui"
+      "icon-ui",
+      "button-ui"
     ],
     "events": {
       "timeline-toggle": {

package/components/timeline/timeline.class.js

@@ -154,8 +154,10 @@ export class UITimelineItem extends UIElement {
       // Toggle caret lives on the row — we stamp a button once
       let toggle = this.querySelector(':scope > [data-timeline-toggle]');
       if (!toggle) {
-        toggle = document.createElement('button');
-        toggle.type = 'button';
+        // button-ui, not a native <button> (gh issue 276).
+        toggle = document.createElement('button-ui');
+        toggle.setAttribute('variant', 'ghost');
+        toggle.setAttribute('size', 'xs');
         toggle.setAttribute('data-timeline-toggle', '');
         toggle.setAttribute('aria-label', 'Toggle details');
         toggle.addEventListener('click', (e) => {
@@ -168,12 +170,9 @@ export class UITimelineItem extends UIElement {
         });
         this.appendChild(toggle);
       }
-      toggle.innerHTML = '';
-      const caret = document.createElement('icon-ui');
-      caret.setAttribute('name', this.#expanded ? 'caret-down' : 'caret-right');
-      caret.setAttribute('color', 'muted');
-      caret.setAttribute('size', 'sm');
-      toggle.appendChild(caret);
+      // The caret rides button-ui's icon prop — flipping the attribute
+      // re-stamps the glyph; color/size are CSS token re-points.
+      toggle.setAttribute('icon', this.#expanded ? 'caret-down' : 'caret-right');
     } else {
       this.querySelector(':scope > [data-timeline-toggle]')?.remove();
       body?.remove();

package/components/timeline/timeline.css

@@ -362,32 +362,22 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
 
   /* ═══════ Toggle caret (outcomes) ═══════ */
 
+  /* A stamped <button-ui variant="ghost" size="xs" icon="caret-*">
+     (gh issue 276: no native <button> in stamped DOM). Geometry/colors
+     ride button token re-points; focus ring + hover are button-ui's own. */
   :scope > [data-timeline-toggle] {
     position: absolute;
     inset-inline-end: 0;
-    /* Place the caret's icon-center on row 1's optical center.
-       The button has --a-space-0-5 vertical padding, so the icon
-       sits that much lower inside the box; we subtract that so the
-       icon (not the box) lines up with the time-slot text center. */
+    /* Place the caret's icon-center on row 1's optical center (the box
+       is --button-height tall around a 1em-line icon). */
     top: calc((1.4em - 1em) / 2 - var(--a-space-0-5));
-    background: none;
-    border: none;
-    padding: var(--a-space-0-5) var(--timeline-item-toggle-px);
-    margin: 0;
-    cursor: pointer;
-    color: var(--timeline-item-label-fg-muted, var(--a-fg-muted));
-    border-radius: var(--a-radius-sm);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 0;
-    transition: background var(--timeline-item-duration) var(--timeline-item-easing),
-                color      var(--timeline-item-duration) var(--timeline-item-easing);
-  }
-
-  :scope > [data-timeline-toggle]:hover {
-    background: var(--a-bg-subtle);
-    color: var(--timeline-item-label-fg, var(--md-sys-color-neutral-on-surface));
+    --button-height: calc(1em + var(--a-space-1));
+    --button-radius: var(--a-radius-sm);
+    --button-fg: var(--timeline-item-label-fg-muted, var(--a-fg-muted));
+    --button-fg-ghost-hover: var(--timeline-item-label-fg, var(--md-sys-color-neutral-on-surface));
+    --button-bg-ghost-hover: var(--a-bg-subtle);
+    /* It IS a caret — universal caret size (ruling 2026-07-16). */
+    --a-icon-size: var(--a-caret-size);
   }
 
   /* Reserve room so the time isn't overlapped by the caret */
@@ -395,10 +385,8 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     margin-inline-end: var(--timeline-item-toggle-time-margin);
   }
 
-  :scope > [data-timeline-toggle]:focus-visible {
-    outline: none;
-    box-shadow: var(--a-focus-ring);
-  }
+  /* (Focus ring is button-ui's own — the custom :focus-visible rule the
+     native button needed is gone with it, gh issue 276.) */
 }
 
 /* When size=sm on the parent, ring is 1.5px so the small dot still looks crisp.

package/components/timeline/timeline.yaml

@@ -12,6 +12,7 @@ description: "Timeline and step wizard. Two modes: timeline (per-item state) and
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
   - icon-ui
+  - button-ui # outcomes toggle (gh issue 276 — no native <button> in stamped DOM)
 props:
   orientation:
     description: Layout direction

package/components/toggle-group/toggle-group.css

@@ -90,6 +90,7 @@ toggle-option-ui:not([disabled]):hover {
   :scope:focus-visible {
     outline: none;
     box-shadow: var(--toggle-option-focus-ring);
+    border-color: transparent;
     z-index: 1;
   }
 

package/components/toolbar/toolbar.class.js

@@ -114,12 +114,17 @@ export class UIToolbar extends UIElement {
   connected() {
     this.setAttribute('role', 'toolbar');
     this.#ensureSpillover();
-    this.#ro = new ResizeObserver(() => this.#queueReflow());
-    this.#ro.observe(this);
-    this.#mo = new MutationObserver(() => {
-      if (this.#measuring) return;
-      this.#queueReflow();
-    });
+    // gh#285 — SSR DOM shims (linkedom) have neither observer global.
+    if (typeof ResizeObserver !== 'undefined') {
+      this.#ro = new ResizeObserver(() => this.#queueReflow());
+      this.#ro.observe(this);
+    }
+    if (typeof MutationObserver !== 'undefined') {
+      this.#mo = new MutationObserver(() => {
+        if (this.#measuring) return;
+        this.#queueReflow();
+      });
+    }
     this.#moObserve();
     this.#queueReflow();
   }

package/components/tree/tree.class.js

@@ -324,8 +324,11 @@ export class UITreeItem extends UIElement {
     // role=button child of the group/tree (axe `aria-required-children`). Adopt
     // what's present now, then observe for the late arrivals.
     this.#adoptSlotted();
-    this.#slotObserver = new MutationObserver(() => this.#adoptSlotted());
-    this.#slotObserver.observe(this, { childList: true, subtree: true });
+    // gh#285 — SSR DOM shims (linkedom) have no MutationObserver global.
+    if (typeof MutationObserver !== 'undefined') {
+      this.#slotObserver = new MutationObserver(() => this.#adoptSlotted());
+      this.#slotObserver.observe(this, { childList: true, subtree: true });
+    }
   }
 
   #stamp() {

package/components/tree/tree.css

@@ -7,7 +7,10 @@
     --tree-row-gap:         var(--a-space-1);
     --tree-actions-gap:     var(--a-space-0-5);
     --tree-indent:          var(--a-space-4);
-    --tree-caret-size:      var(--a-space-2);
+    /* The universal caret token (14px default) — sidebar carets read one
+       size across nav-group / tree / accordion (ruling 2026-07-16); the
+       old --a-space-2 read made tree carets an 8px outlier. */
+    --tree-caret-size:      var(--a-caret-size);
     --tree-icon-size:       var(--a-space-3);
 
     /* ── Typography ── */
@@ -47,7 +50,7 @@
     --tree-item-row-gap:       var(--tree-row-gap, var(--a-space-1));
     --tree-item-actions-gap:   var(--tree-actions-gap, var(--a-space-0-5));
     --tree-item-indent:        var(--tree-indent, var(--a-space-4));
-    --tree-item-caret-size:    var(--tree-caret-size, var(--a-space-2));
+    --tree-item-caret-size:    var(--tree-caret-size, var(--a-caret-size));
     --tree-item-icon-size:     var(--tree-icon-size, var(--a-space-3));
 
     --tree-item-fg:            var(--tree-fg, var(--md-sys-color-neutral-on-surface));

package/components/upload/upload.css

@@ -75,6 +75,7 @@
     /* Canonical ring via L3 token (see semantics.css FOCUS block). */
     outline: none;
     box-shadow: var(--upload-focus-ring);
+    border-color: transparent;
   }
   [data-dropzone][data-dragover] {
     border-color: var(--upload-border-dragover);

package/core/data-stream.js

@@ -453,24 +453,30 @@ function visitSubtree(root, fn) {
   }
 }
 
-const observer = new MutationObserver((mutations) => {
-  for (const m of mutations) {
-    if (m.type === 'attributes' && ATTR_FILTER.includes(m.attributeName)) {
-      const el = m.target;
-      if (isStreamingEl(el)) start(el);
-      else stop(el);
-      continue;
-    }
-    if (m.type === 'childList') {
-      m.addedNodes.forEach(n => visitSubtree(n, start));
-      m.removedNodes.forEach(n => visitSubtree(n, stop));
-    }
-  }
-});
+// gh#285 — SSR DOM shims (linkedom) have no MutationObserver global.
+// Constructed lazily so import-time evaluation never throws; bootstrap()
+// no-ops the document-level watch when the global is missing (existing
+// stream elements found via querySelectorAll still get started once).
+const observer = typeof MutationObserver !== 'undefined'
+  ? new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.type === 'attributes' && ATTR_FILTER.includes(m.attributeName)) {
+          const el = m.target;
+          if (isStreamingEl(el)) start(el);
+          else stop(el);
+          continue;
+        }
+        if (m.type === 'childList') {
+          m.addedNodes.forEach(n => visitSubtree(n, start));
+          m.removedNodes.forEach(n => visitSubtree(n, stop));
+        }
+      }
+    })
+  : null;
 
 function bootstrap() {
   if (typeof document === 'undefined') return;
-  observer.observe(document.documentElement, {
+  observer?.observe(document.documentElement, {
     childList: true, subtree: true,
     attributes: true, attributeFilter: ATTR_FILTER,
   });

package/core/element.js

@@ -64,6 +64,26 @@ function installProps(el, props) {
   }
 }
 
+// A minimal no-op ElementInternals shim for environments with no real
+// implementation (linkedom and other DOM-shim SSR passes — gh#285). Real
+// form-participation/validation behavior is meaningless server-side (no
+// live user interaction to validate); the shim exists so the ~12
+// call sites across the framework that read `this.internals.setValidity(…)`
+// / `.setFormValue(…)` / `.validity` etc. keep working as inert no-ops
+// instead of throwing on a missing method. Surface matches exactly what
+// the framework's own consumers call (grepped, not guessed).
+const NOOP_INTERNALS = Object.freeze({
+  setFormValue() {},
+  setValidity() {},
+  checkValidity() { return true; },
+  reportValidity() { return true; },
+  get form() { return null; },
+  get labels() { return []; },
+  get validity() { return {}; },
+  get validationMessage() { return ''; },
+  get willValidate() { return false; },
+});
+
 function reflect(el, a, v, t) {
   t === Boolean
     ? v ? el.setAttribute(a, '') : el.removeAttribute(a)
@@ -78,6 +98,11 @@ function adoptStyles(ctor) {
   ctor._sa = true;
   const sheets = ctor.styles;
   if (!sheets) return;
+  // gh#285 — linkedom's document has no adoptedStyleSheets at all; SSR
+  // has no rendered stylesheet to adopt into anyway (styles matter for
+  // paint, which doesn't happen server-side), so skipping is a correct
+  // no-op, not a degraded feature.
+  if (!('adoptedStyleSheets' in document)) return;
   const list = Array.isArray(sheets) ? sheets : [sheets];
   document.adoptedStyleSheets = [...document.adoptedStyleSheets, ...list.filter(s => !document.adoptedStyleSheets.includes(s))];
 }
@@ -114,7 +139,17 @@ export class UIElement extends HTMLElement {
 
   constructor() {
     super();
-    this.internals = this.attachInternals();
+    // gh#285 — linkedom (and other DOM-shim SSR passes) implement no
+    // ElementInternals; an unconditional attachInternals() call threw
+    // HERE, before ANY subclass code ran — the single highest-leverage
+    // crash site in the whole framework under SSR. Feature-detect and
+    // fall back to a no-op shim (form participation is meaningless
+    // server-side) rather than leaving `this.internals` undefined,
+    // which would just move the crash to every consumer's first
+    // `.setValidity(…)` call instead of fixing it.
+    this.internals = typeof this.attachInternals === 'function'
+      ? this.attachInternals()
+      : NOOP_INTERNALS;
     installProps(this, this.constructor.properties);
   }
 

package/core/element.test.js

@@ -249,3 +249,70 @@ describe('UIElement — addTrait', () => {
     expect(disconnects).toBe(1);
   });
 });
+
+// gh#285 — SSR DOM shims (linkedom et al.) implement no ElementInternals
+// and no document.adoptedStyleSheets. These tests simulate that absence
+// directly (deleting the real APIs) rather than trusting a mock — the
+// bug was an unconditional call crashing the CONSTRUCTOR, before any
+// subclass code ran, so the only real proof is exercising construction
+// with the API genuinely gone.
+describe('UIElement — SSR browser-API absence (gh#285)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('constructs without throwing when attachInternals does not exist', () => {
+    const original = HTMLElement.prototype.attachInternals;
+    delete HTMLElement.prototype.attachInternals;
+    try {
+      class El extends UIElement {}
+      const tag = registerTestElement(El);
+      expect(() => mount(tag)).not.toThrow();
+    } finally {
+      HTMLElement.prototype.attachInternals = original;
+    }
+  });
+
+  it('the no-op internals shim answers every call site the framework actually makes', () => {
+    const original = HTMLElement.prototype.attachInternals;
+    delete HTMLElement.prototype.attachInternals;
+    let el;
+    try {
+      class El extends UIElement {}
+      const tag = registerTestElement(El);
+      el = mount(tag);
+    } finally {
+      HTMLElement.prototype.attachInternals = original;
+    }
+    expect(() => el.internals.setFormValue('x')).not.toThrow();
+    expect(() => el.internals.setValidity({})).not.toThrow();
+    expect(el.internals.checkValidity()).toBe(true);
+    expect(el.internals.reportValidity()).toBe(true);
+    expect(el.internals.form).toBeNull();
+    expect(el.internals.labels).toEqual([]);
+    expect(el.internals.validity).toEqual({});
+    expect(el.internals.validationMessage).toBe('');
+    expect(el.internals.willValidate).toBe(false);
+  });
+
+  it('a real attachInternals is still used when the browser provides one (no regression)', () => {
+    class El extends UIElement {}
+    const tag = registerTestElement(El);
+    const el = mount(tag);
+    // happy-dom's real attachInternals — not the shim.
+    expect(el.internals).not.toBe(null);
+    expect(typeof el.internals.setFormValue).toBe('function');
+  });
+
+  it('adoptStyles no-ops instead of throwing when adoptedStyleSheets does not exist', () => {
+    const desc = Object.getOwnPropertyDescriptor(Document.prototype, 'adoptedStyleSheets');
+    delete Document.prototype.adoptedStyleSheets;
+    try {
+      class El extends UIElement {
+        static styles = ['/* fake sheet */'];
+      }
+      const tag = registerTestElement(El);
+      expect(() => mount(tag)).not.toThrow();
+    } finally {
+      if (desc) Object.defineProperty(Document.prototype, 'adoptedStyleSheets', desc);
+    }
+  });
+});