@adia-ai/web-components 0.8.3 → 0.8.5

package/components/calendar-grid/calendar-grid.css

@@ -115,14 +115,23 @@
     color: var(--calendar-grid-title-fg);
   }
 
-  [data-cal-prev],
-  [data-cal-next] {
+  /* Stamped <button-ui variant="ghost" size="xs" icon="caret-…"> (gh issue
+     276 wave 4) — icon-only (no [text], no child text) so button-ui's own
+     [data-icon-only] rule already squares it to --button-height; pointing
+     --button-height at the nav size (not just literal width/height) avoids
+     the min-width/min-height floor trap. Literal background/color below
+     out-specify button.css's own (via the `button-ui` type-selector bump —
+     same technique as swiper's dots), so the button-ui type-selector prefix
+     is load-bearing, not decorative. */
+  button-ui[data-cal-prev],
+  button-ui[data-cal-next] {
+    --button-height: var(--calendar-grid-nav-size);
+    --a-icon-size: var(--calendar-grid-nav-icon-size);
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--calendar-grid-nav-size);
     height: var(--calendar-grid-nav-size);
-    padding: 0;
     border: none;
     border-radius: var(--calendar-grid-nav-radius);
     background: var(--calendar-grid-nav-bg);
@@ -131,10 +140,9 @@
     transition:
       background var(--calendar-grid-duration) var(--calendar-grid-easing),
       color      var(--calendar-grid-duration) var(--calendar-grid-easing);
-    --a-icon-size: var(--calendar-grid-nav-icon-size);
   }
-  [data-cal-prev]:hover,
-  [data-cal-next]:hover {
+  button-ui[data-cal-prev]:hover,
+  button-ui[data-cal-next]:hover {
     background: var(--calendar-grid-nav-bg-hover);
     color: var(--calendar-grid-nav-fg-hover);
   }
@@ -164,7 +172,18 @@
     gap: var(--calendar-grid-day-grid-gap);
   }
 
-  [data-cal-day] {
+  /* Stamped <button-ui variant="ghost" text="…"> (gh issue 276 wave 4).
+     button-ui floors min-width/min-height at --button-height — point it at
+     the day-cell size (not just the literal width/height below) so the
+     floor never clamps a smaller [size] tier. The literal geometry/color
+     declarations below out-specify button-ui's own equivalents via the
+     `button-ui` type-selector bump (same technique as swiper's dots).
+     button-ui renders its label via `::after { content: attr(text) }` — the
+     today-indicator dot below therefore uses `::before` (kept free), not
+     `::after`, to avoid the two fighting over the same pseudo-element. */
+  button-ui[data-cal-day] {
+    --button-height: var(--calendar-grid-day-size);
+
     display: flex;
     align-items: center;
     justify-content: center;
@@ -188,25 +207,25 @@
   }
 
   /* ── State: hover ── */
-  [data-cal-day]:not([disabled]):not([data-outside]):hover {
+  button-ui[data-cal-day]:not([disabled]):not([data-outside]):hover {
     background: var(--calendar-grid-day-bg-hover);
     color: var(--calendar-grid-day-fg-hover);
   }
 
   /* ── State: focus ── */
-  [data-cal-day]:not([disabled]):not([data-outside]):focus-visible,
-  [data-cal-day][data-focused] {
+  button-ui[data-cal-day]:not([disabled]):not([data-outside]):focus-visible,
+  button-ui[data-cal-day][data-focused] {
     outline: none;
     box-shadow: var(--calendar-grid-day-focus-ring);
   }
 
   /* ── State: selected ── */
-  [data-cal-day][data-selected] {
+  button-ui[data-cal-day][data-selected] {
     background: var(--calendar-grid-day-bg-selected);
     color: var(--calendar-grid-day-fg-selected);
     font-weight: var(--calendar-grid-selected-weight);
   }
-  [data-cal-day][data-selected]:not([disabled]):hover {
+  button-ui[data-cal-day][data-selected]:not([disabled]):hover {
     background: var(--calendar-grid-day-bg-selected);
     color: var(--calendar-grid-day-fg-selected);
   }
@@ -217,21 +236,21 @@
      fill); the in-range middle is visually subordinate. `:not([data-selected])`
      guard prevents the muted fill from overriding the endpoint cells in
      consumer code that sets both `value` AND `range-start`/`range-end`. */
-  [data-cal-day][data-in-range]:not([data-selected]) {
+  button-ui[data-cal-day][data-in-range]:not([data-selected]) {
     background: var(--calendar-grid-day-bg-in-range);
     color: var(--calendar-grid-day-fg-in-range);
   }
-  [data-cal-day][data-in-range]:not([data-selected]):not([disabled]):hover {
+  button-ui[data-cal-day][data-in-range]:not([data-selected]):not([disabled]):hover {
     background: var(--calendar-grid-day-bg-in-range);
   }
 
   /* ── State: today (unselected) ── */
-  [data-cal-day][data-today]:not([data-selected]) {
+  button-ui[data-cal-day][data-today]:not([data-selected]) {
     position: relative;
     color: var(--calendar-grid-day-today-color);
     font-weight: var(--calendar-grid-today-weight);
   }
-  [data-cal-day][data-today]:not([data-selected])::after {
+  button-ui[data-cal-day][data-today]:not([data-selected])::before {
     content: "";
     position: absolute;
     left: 50%;
@@ -245,13 +264,16 @@
   }
 
   /* ── State: outside month ── */
-  [data-cal-day][data-outside] {
+  button-ui[data-cal-day][data-outside] {
     color: var(--calendar-grid-day-fg-outside);
     cursor: default;
   }
 
-  /* ── State: disabled (excluding outside) ── */
-  [data-cal-day]:disabled:not([data-outside]) {
+  /* ── State: disabled (excluding outside) ──
+     `[disabled]` — NOT the `:disabled` pseudo-class, which only matches
+     native form controls; button-ui is a custom element, so `:disabled`
+     silently never matches it. */
+  button-ui[data-cal-day][disabled]:not([data-outside]) {
     color: var(--calendar-grid-day-fg-disabled);
     cursor: not-allowed;
   }

package/components/calendar-grid/calendar-grid.yaml

@@ -16,6 +16,11 @@ description: >-
   (two side-by-side grids), and datetime-picker-ui (one grid + time pane).
   For a complete date-picker affordance (trigger + popover + form
   participation), use calendar-picker-ui.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# in their render() do NOT auto-import them. Consumer (or demo shell) must
+# explicitly import each composed primitive.
+composes:
+  - button-ui  # day cells + month nav (gh issue 276 wave 4)
 props:
   value:
     description: Selected date in ISO format (YYYY-MM-DD).

package/components/calendar-picker/calendar-picker.a2ui.json

@@ -94,7 +94,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "input",
-    "composes": [],
+    "composes": [
+      "button-ui"
+    ],
     "events": {
       "change": {
         "description": "Fired when a date is selected"

package/components/calendar-picker/calendar-picker.class.js

@@ -191,10 +191,14 @@ export class UICalendarPicker extends UIFormElement {
     const maxDate = parseISO(this.max);
 
     // Header
+    // <button-ui variant="ghost" icon="…"> (gh issue 276 wave 4) — no
+    // tabindex here, matching the native version: these nav buttons stay in
+    // the default tab order (unlike calendar-grid-ui's, which are pulled out
+    // via tabindex="-1" for its inline roving-tabindex day grid).
     let h = `<div data-cal-header>
-      <button data-cal-prev type="button" aria-label="Previous month"><icon-ui name="caret-left"></icon-ui></button>
+      <button-ui variant="ghost" size="xs" icon="caret-left" data-cal-prev aria-label="Previous month"></button-ui>
       <span data-cal-title>${MONTHS_LONG[month]} ${year}</span>
-      <button data-cal-next type="button" aria-label="Next month"><icon-ui name="caret-right"></icon-ui></button>
+      <button-ui variant="ghost" size="xs" icon="caret-right" data-cal-next aria-label="Next month"></button-ui>
     </div>`;
 
     // Day-of-week header
@@ -210,7 +214,7 @@ export class UICalendarPicker extends UIFormElement {
     // Previous month trailing days
     for (let i = firstDay - 1; i >= 0; i--) {
       const day = daysInPrev - i;
-      h += `<button type="button" data-cal-day data-outside disabled tabindex="-1">${day}</button>`;
+      h += `<button-ui variant="ghost" data-cal-day data-outside disabled tabindex="-1" text="${day}"></button-ui>`;
     }
 
     // Current month days
@@ -223,7 +227,6 @@ export class UICalendarPicker extends UIFormElement {
       const isFocused = this.#focusedDay === d;
 
       const attrs = [
-        'type="button"',
         'data-cal-day',
         `data-date="${iso}"`,
         isToday ? 'data-today' : '',
@@ -233,14 +236,16 @@ export class UICalendarPicker extends UIFormElement {
         `tabindex="${isFocused ? '0' : '-1'}"`,
       ].filter(Boolean).join(' ');
 
-      h += `<button ${attrs}>${d}</button>`;
+      // <button-ui variant="ghost" text="…"> (gh issue 276 wave 4) — the day
+      // number moves from element text content to the `text` attribute.
+      h += `<button-ui variant="ghost" ${attrs} text="${d}"></button-ui>`;
     }
 
     // Next month leading days
     const totalCells = firstDay + daysInMonth;
     const remaining = (7 - (totalCells % 7)) % 7;
     for (let d = 1; d <= remaining; d++) {
-      h += `<button type="button" data-cal-day data-outside disabled tabindex="-1">${d}</button>`;
+      h += `<button-ui variant="ghost" data-cal-day data-outside disabled tabindex="-1" text="${d}"></button-ui>`;
     }
 
     h += '</div>';

package/components/calendar-picker/calendar-picker.css

@@ -156,10 +156,12 @@
   :scope:focus-visible [slot="trigger"] {
     /* Canonical ring via L3 token (see semantics.css FOCUS block). */
     box-shadow: var(--calendar-picker-trigger-focus-ring);
+    border-color: transparent;
   }
   :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
   :scope[error]:focus-visible [slot="trigger"] {
     box-shadow: var(--calendar-picker-trigger-focus-ring-invalid);
+    border-color: transparent;
   }
 
   [slot="display"] {
@@ -230,14 +232,22 @@ calendar-picker-ui [data-cal-title] {
   color: var(--calendar-picker-title-fg);
 }
 
-calendar-picker-ui [data-cal-prev],
-calendar-picker-ui [data-cal-next] {
+/* Stamped <button-ui variant="ghost" size="xs" icon="caret-…"> (gh issue 276
+   wave 4) — icon-only (no [text], no child text) so button-ui's own
+   [data-icon-only] rule already squares it to --button-height; pointing
+   --button-height at the nav size (not just literal height below) avoids
+   the min-width/min-height floor trap. Literal background/color below
+   out-specify button.css's own via the `button-ui` type-selector bump
+   (same technique as swiper's dots). */
+calendar-picker-ui button-ui[data-cal-prev],
+calendar-picker-ui button-ui[data-cal-next] {
+  --button-height: var(--calendar-picker-nav-size);
+  --a-icon-size: var(--calendar-picker-nav-icon-size);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--calendar-picker-nav-size);
   height: var(--calendar-picker-nav-size);
-  padding: 0;
   border: none;
   border-radius: var(--calendar-picker-nav-radius);
   background: var(--calendar-picker-nav-bg);
@@ -246,10 +256,9 @@ calendar-picker-ui [data-cal-next] {
   transition:
     background var(--calendar-picker-duration) var(--calendar-picker-easing),
     color var(--calendar-picker-duration) var(--calendar-picker-easing);
-  --a-icon-size: var(--calendar-picker-nav-icon-size);
 }
-calendar-picker-ui [data-cal-prev]:hover,
-calendar-picker-ui [data-cal-next]:hover {
+calendar-picker-ui button-ui[data-cal-prev]:hover,
+calendar-picker-ui button-ui[data-cal-next]:hover {
   background: var(--calendar-picker-nav-bg-hover);
   color: var(--calendar-picker-nav-fg-hover);
 }
@@ -279,8 +288,18 @@ calendar-picker-ui [data-cal-grid] {
   gap: var(--calendar-picker-day-grid-gap);
 }
 
-/* Day buttons */
-calendar-picker-ui [data-cal-day] {
+/* Day buttons — stamped <button-ui variant="ghost" text="…"> (gh issue 276
+   wave 4). button-ui floors min-width/min-height at --button-height — point
+   it at the day-cell size (not just the literal width/height below) so the
+   floor never clamps a smaller [size] tier. The literal geometry/color
+   declarations below out-specify button-ui's own equivalents via the
+   `button-ui` type-selector bump (same technique as swiper's dots).
+   button-ui renders its label via `::after { content: attr(text) }` — the
+   today-indicator dot below therefore uses `::before` (kept free), not
+   `::after`, to avoid the two fighting over the same pseudo-element. */
+calendar-picker-ui button-ui[data-cal-day] {
+  --button-height: var(--calendar-picker-day-size);
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -302,25 +321,25 @@ calendar-picker-ui [data-cal-day] {
 }
 
 /* ── State: hover ── */
-calendar-picker-ui [data-cal-day]:not([disabled]):not([data-outside]):hover {
+calendar-picker-ui button-ui[data-cal-day]:not([disabled]):not([data-outside]):hover {
   background: var(--calendar-picker-day-bg-hover);
   color: var(--calendar-picker-day-fg-hover);
 }
 
 /* ── State: focus ── */
-calendar-picker-ui [data-cal-day]:not([disabled]):not([data-outside]):focus-visible,
-calendar-picker-ui [data-cal-day][data-focused] {
+calendar-picker-ui button-ui[data-cal-day]:not([disabled]):not([data-outside]):focus-visible,
+calendar-picker-ui button-ui[data-cal-day][data-focused] {
   outline: none;
   box-shadow: var(--calendar-picker-day-focus-ring);
 }
 
 /* ── State: selected ── */
-calendar-picker-ui [data-cal-day][data-selected] {
+calendar-picker-ui button-ui[data-cal-day][data-selected] {
   background: var(--calendar-picker-day-bg-selected);
   color: var(--calendar-picker-day-fg-selected);
   font-weight: var(--calendar-picker-selected-weight);
 }
-calendar-picker-ui [data-cal-day][data-selected]:not([disabled]):hover {
+calendar-picker-ui button-ui[data-cal-day][data-selected]:not([disabled]):hover {
   background: var(--calendar-picker-day-bg-selected-hover);
   color: var(--calendar-picker-day-fg-selected);
 }
@@ -328,12 +347,12 @@ calendar-picker-ui [data-cal-day][data-selected]:not([disabled]):hover {
 /* ── State: today (unselected) ──
    Use a small bottom dot so it does not compete with the rounded
    focus-ring box-shadow (that looked like a double outline). */
-calendar-picker-ui [data-cal-day][data-today]:not([data-selected]) {
+calendar-picker-ui button-ui[data-cal-day][data-today]:not([data-selected]) {
   position: relative;
   color: var(--calendar-picker-day-today-border);
   font-weight: var(--calendar-picker-today-weight);
 }
-calendar-picker-ui [data-cal-day][data-today]:not([data-selected])::after {
+calendar-picker-ui button-ui[data-cal-day][data-today]:not([data-selected])::before {
   content: "";
   position: absolute;
   left: 50%;
@@ -347,13 +366,16 @@ calendar-picker-ui [data-cal-day][data-today]:not([data-selected])::after {
 }
 
 /* ── State: outside month ── */
-calendar-picker-ui [data-cal-day][data-outside] {
+calendar-picker-ui button-ui[data-cal-day][data-outside] {
   color: var(--calendar-picker-day-fg-outside);
   cursor: default;
 }
 
-/* ── State: disabled ── */
-calendar-picker-ui [data-cal-day]:disabled:not([data-outside]) {
+/* ── State: disabled ──
+   `[disabled]` — NOT the `:disabled` pseudo-class, which only matches
+   native form controls; button-ui is a custom element, so `:disabled`
+   silently never matches it. */
+calendar-picker-ui button-ui[data-cal-day][disabled]:not([data-outside]) {
   color: var(--calendar-picker-day-fg-disabled);
   cursor: not-allowed;
 }

package/components/calendar-picker/calendar-picker.yaml

@@ -11,6 +11,11 @@ description: >-
   supports min/max and disabled-date masks. Use for single-date input in
   forms; for date ranges compose two pickers or use a dedicated range
   component.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# in their render() do NOT auto-import them. Consumer (or demo shell) must
+# explicitly import each composed primitive.
+composes:
+  - button-ui  # day cells + month nav (gh issue 276 wave 4)
 props:
   name:
     description: Form field name

package/components/chart/chart.class.js

@@ -341,21 +341,24 @@ export class UIChart extends UIElement {
     this.addEventListener('pointerdown',  this.#onPointerDown);
     this.addEventListener('click',        this.#onClick);
 
-    this.#resizeObs = new ResizeObserver((entries) => {
-      const { inlineSize: w, blockSize: h } = entries[0].contentBoxSize[0];
-      if (!this.#data.length) return;
-      const rw = Math.round(w);
-      const rh = Math.round(h);
-      if (rw === this.#lastW && (!this.hasAttribute('resize') || rh === this.#lastH)) return;
-      this.#lastW = rw;
-      this.#lastH = rh;
-      if (this.#resizeRaf) return;
-      this.#resizeRaf = requestAnimationFrame(() => {
-        this.#resizeRaf = null;
-        this.#renderChart();
+    // gh#285 — SSR DOM shims (linkedom) have no ResizeObserver global.
+    if (typeof ResizeObserver !== 'undefined') {
+      this.#resizeObs = new ResizeObserver((entries) => {
+        const { inlineSize: w, blockSize: h } = entries[0].contentBoxSize[0];
+        if (!this.#data.length) return;
+        const rw = Math.round(w);
+        const rh = Math.round(h);
+        if (rw === this.#lastW && (!this.hasAttribute('resize') || rh === this.#lastH)) return;
+        this.#lastW = rw;
+        this.#lastH = rh;
+        if (this.#resizeRaf) return;
+        this.#resizeRaf = requestAnimationFrame(() => {
+          this.#resizeRaf = null;
+          this.#renderChart();
+        });
       });
-    });
-    this.#resizeObs.observe(this);
+      this.#resizeObs.observe(this);
+    }
   }
 
   render() {

package/components/chat-thread/chat-input.a2ui.json

@@ -59,7 +59,9 @@
       }
     ],
     "category": "agent",
-    "composes": [],
+    "composes": [
+      "button-ui"
+    ],
     "events": {
       "submit": {
         "description": "Fires when the user presses Enter (without Shift) in the textarea OR clicks the built-in send button. Unconditional — there is no [submit-on-enter] opt-in or opt-out attribute; Enter→submit is delegated from the inner <textarea-ui> which always emits a `submit` event on Enter without Shift. The composer suppresses submission while `[loading]` is set.",

package/components/chat-thread/chat-input.css

@@ -122,10 +122,12 @@ chat-input-ui textarea-ui:not([disabled]) [slot="text"]:hover {
      ─────────────────────────────────────────────────────────────── */
   :scope:focus-within {
     box-shadow: var(--chat-input-focus-ring);
+    border-color: transparent;
   }
   :scope[aria-invalid="true"]:focus-within,
   :scope[error]:focus-within {
     box-shadow: var(--chat-input-focus-ring-invalid);
+    border-color: transparent;
   }
 
   /* ── Nested-control color isolation ─────────────────────────────────
@@ -239,23 +241,20 @@ chat-input-ui textarea-ui:not([disabled]) [slot="text"]:hover {
     border: 1px solid var(--chat-input-image-border);
   }
 
+  /* Attachment-remove — a stamped <button-ui variant="ghost" size="xs"
+     icon="x"> (gh issue 276: no native <button> in stamped DOM); the
+     floating filled-circle look rides button token re-points. */
   [slot="preview"] [data-preview-remove] {
     position: absolute;
     top: calc(-1 * var(--chat-input-remove-offset));
     right: calc(-1 * var(--chat-input-remove-offset));
-    width: var(--chat-input-remove-size);
-    height: var(--chat-input-remove-size);
-    border-radius: 50%;
-    border: none;
-    background: var(--chat-input-remove-bg);
-    color: var(--chat-input-remove-fg);
-    font-size: var(--chat-input-remove-font);
-    line-height: 1;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
+    --button-height: var(--chat-input-remove-size);
+    --button-radius: var(--a-radius-full);
+    --button-bg: var(--chat-input-remove-bg);
+    --button-fg: var(--chat-input-remove-fg);
+    --button-bg-ghost-hover: var(--chat-input-remove-bg);
+    --button-fg-ghost-hover: var(--chat-input-remove-fg);
+    --a-icon-size: var(--chat-input-remove-font);
   }
 
   /* Disabled / streaming — host-level chrome. `color` cascades to the

package/components/chat-thread/chat-input.js

@@ -228,8 +228,12 @@ class UIChatInput extends UIElement {
       const img = document.createElement('img');
       img.src = a.dataUrl;
       img.alt = a.name || 'attachment';
-      const btn = document.createElement('button');
-      btn.textContent = '×';
+      // button-ui, not a native <button> (gh issue 276).
+      const btn = document.createElement('button-ui');
+      btn.setAttribute('variant', 'ghost');
+      btn.setAttribute('size', 'xs');
+      btn.setAttribute('icon', 'x');
+      btn.setAttribute('aria-label', `Remove ${a.name || 'attachment'}`);
       btn.setAttribute('data-preview-remove', '');
       btn.addEventListener('click', () => this.#removeAttachment(i));
       wrap.appendChild(img);

package/components/chat-thread/chat-input.yaml

@@ -61,6 +61,9 @@ description: |
   autocomplete, trailing/leading controls), wrap inside
   `<chat-composer>` — see ChatComposer for the module-tier shape.
 
+composes:
+  - button-ui # send button + attachment-remove (gh issue 276 — no native <button> in stamped DOM)
+
 props:
   disabled:
     description: |

package/components/check/check.css

@@ -123,7 +123,7 @@ check-ui[indeterminate] {
   :scope[label]::after { content: attr(label); }
 
   /* Focus */
-  :scope:focus-visible [slot="box"] { box-shadow: var(--check-focus-ring); }
+  :scope:focus-visible [slot="box"] { box-shadow: var(--check-focus-ring); border-color: transparent; }
 
   /* Size handled by universal [size] attribute system. */
 }

package/components/color-input/color-input.class.js

@@ -169,11 +169,14 @@ export class UIColorInput extends UIFormElement {
     // Store the observer in a #field so disconnected() can clean it up
     // — without the explicit reference, the observer survives the host
     // element across mount/unmount cycles (audit-lifecycle-leak).
-    this.#popoverObserver = new MutationObserver(sync);
-    this.#popoverObserver.observe(this.#popover, {
-      attributes: true,
-      attributeFilter: ['open'],
-    });
+    // gh#285 — SSR DOM shims (linkedom) have no MutationObserver global.
+    if (typeof MutationObserver !== 'undefined') {
+      this.#popoverObserver = new MutationObserver(sync);
+      this.#popoverObserver.observe(this.#popover, {
+        attributes: true,
+        attributeFilter: ['open'],
+      });
+    }
   }
 
   #onPickerChange = (e) => {

package/components/color-picker/color-picker.class.js

@@ -362,9 +362,12 @@ export class UIColorPicker extends UIFormElement {
 
     this.#hueTrack.addEventListener('keydown', this.#onHueKeydown);
 
-    // Observe area resize to redraw canvas
-    this.#areaResizeObs = new ResizeObserver(() => this.#drawArea());
-    this.#areaResizeObs.observe(this.#areaEl);
+    // Observe area resize to redraw canvas.
+    // gh#285 — SSR DOM shims (linkedom) have no ResizeObserver global.
+    if (typeof ResizeObserver !== 'undefined') {
+      this.#areaResizeObs = new ResizeObserver(() => this.#drawArea());
+      this.#areaResizeObs.observe(this.#areaEl);
+    }
   }
 
   disconnected() {

package/components/combobox/combobox.a2ui.json

@@ -150,7 +150,9 @@
     ],
     "category": "input",
     "composes": [
-      "icon-ui"
+      "icon-ui",
+      "button-ui",
+      "spinner-ui"
     ],
     "events": {
       "change": {

package/components/combobox/combobox.class.js

@@ -241,9 +241,7 @@ export class UICombobox extends UIFormElement {
               aria-controls="${listboxId}"
               aria-labelledby="${labelId}"
               data-placeholder="${escapeHTML(this.placeholder || '')}"></span>
-        <button type="button" data-clear aria-label="Clear" tabindex="-1" style="display:none">
-          <icon-ui name="x-circle"></icon-ui>
-        </button>
+        <button-ui variant="ghost" size="xs" data-clear aria-label="Clear" tabindex="-1" style="display:none"><icon-ui slot="icon" name="x-circle"></icon-ui></button-ui>
         <span data-suffix>
           <icon-ui name="caret-down"></icon-ui>
         </span>

package/components/combobox/combobox.css

@@ -102,10 +102,12 @@
 
   :scope:focus-within [data-field] {
     box-shadow: var(--combobox-focus-ring);
+    border-color: transparent;
   }
   :scope[aria-invalid="true"]:focus-within [data-field],
   :scope[error]:focus-within [data-field] {
     box-shadow: var(--combobox-focus-ring-invalid);
+    border-color: transparent;
   }
 
   [data-prefix],
@@ -159,20 +161,15 @@
     align-items: center;
   }
 
+  /* Clear x — a stamped <button-ui variant="ghost" size="xs"> kept
+     mouse-only via tabindex="-1" (gh issue 276: no native <button> in
+     stamped DOM); colors/geometry ride button token re-points. */
   [data-clear] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    background: transparent;
-    color: var(--combobox-fg-muted);
-    cursor: pointer;
+    --button-fg: var(--combobox-fg-muted);
+    --button-fg-ghost-hover: var(--combobox-fg);
+    --button-height: calc(var(--combobox-font-size) + var(--a-space-1));
     --a-icon-size: var(--combobox-font-size);
-  }
-  [data-clear]:hover {
-    color: var(--combobox-fg);
+    flex-shrink: 0;
   }
 }
 

package/components/combobox/combobox.yaml

@@ -20,6 +20,8 @@ description: |
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
   - icon-ui  # caret-down / x / magnifying-glass affixes (created in render)
+  - button-ui # clear-x affordance, mouse-only via tabindex=-1 (gh issue 276 — no native <button> in stamped DOM)
+  - spinner-ui # loading row in the stamped listbox
 props:
   name:
     description: Form control name for form data submission

package/components/date-range-picker/date-range-picker.css

@@ -130,6 +130,7 @@
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="trigger"] {
     box-shadow: var(--date-range-picker-trigger-focus-ring);
+    border-color: transparent;
   }
 
   /* States */

package/components/field/field.class.js

@@ -95,13 +95,16 @@ export class UIField extends UIElement {
     this.#bindForToControl();
     this.#bindErrorListener();
     this.#labelEl?.addEventListener('click', this.#onLabelClick);
-    this.#mo = new MutationObserver(() => {
-      this.#bindForToControl();
-      this.#bindErrorListener();
-      this.#wireAriaDescribedBy();
-      this.#syncErrorMessage();
-    });
-    this.#mo.observe(this, { childList: true });
+    // gh#285 — SSR DOM shims (linkedom) have no MutationObserver global.
+    if (typeof MutationObserver !== 'undefined') {
+      this.#mo = new MutationObserver(() => {
+        this.#bindForToControl();
+        this.#bindErrorListener();
+        this.#wireAriaDescribedBy();
+        this.#syncErrorMessage();
+      });
+      this.#mo.observe(this, { childList: true });
+    }
     this.#syncErrorMessage();
   }