@adia-ai/web-components 0.8.4 → 0.8.6

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

@@ -232,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);
@@ -248,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);
 }
@@ -281,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;
@@ -304,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);
 }
@@ -330,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%;
@@ -349,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/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/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();
   }
 

package/components/field/field.css

@@ -43,6 +43,27 @@
     width: 100%;
   }
 
+  /* Exception: when a row-ui sibling is marked [grow], width:100% on the
+     OTHER fields becomes each one's flex main-size (the row's full width).
+     Two or more of those overflow the row, and under the negative-free-
+     space shrink algorithm the [grow] sibling's flex-basis:0% share gets
+     zeroed out entirely instead of receiving the leftover space (issue
+     305). Scoped to :has(> field-ui[grow]) so rows with NO grow winner —
+     where every field intentionally shares the row evenly via this same
+     width:100% overflow-shrink split (e.g. a 2-up expiry/CVC pair) — keep
+     that existing, relied-upon behavior.
+
+     min-width is also needed here, not just width:auto: an empty control's
+     own content-based min size is ~0 (input-ui's [slot="text"] is a bare
+     contenteditable span — the placeholder renders via an out-of-flow
+     `::before`, contributing no intrinsic width), so without a floor this
+     field can still collapse past legibility once the [grow] sibling
+     starts claiming space. */
+  :where(row-ui):has(> field-ui[grow]) > :scope:not([inline]):not([grow]) {
+    width: auto;
+    min-width: 4.5rem;
+  }
+
   /* Gate `row-gap` on actual message presence — otherwise the grid
      reserves --field-gap (~8px) between the control row and a
      zero-content message row, making field-ui[inline] visibly taller

package/components/fields/fields.class.js

@@ -51,19 +51,22 @@ export class UIFields extends UIElement {
 
   connected() {
     this.#syncInline();
-    this.#mo = new MutationObserver((records) => {
-      // Only re-sync on childList changes that involve direct <field-ui>
-      // children — attribute mutations on grandchildren aren't ours to
-      // care about.
-      for (const r of records) {
-        if (r.type !== 'childList') continue;
-        if (this.#hasFieldChild(r.addedNodes) || this.#hasFieldChild(r.removedNodes)) {
-          this.#syncInline();
-          return;
+    // gh#285 — SSR DOM shims (linkedom) have no MutationObserver global.
+    if (typeof MutationObserver !== 'undefined') {
+      this.#mo = new MutationObserver((records) => {
+        // Only re-sync on childList changes that involve direct <field-ui>
+        // children — attribute mutations on grandchildren aren't ours to
+        // care about.
+        for (const r of records) {
+          if (r.type !== 'childList') continue;
+          if (this.#hasFieldChild(r.addedNodes) || this.#hasFieldChild(r.removedNodes)) {
+            this.#syncInline();
+            return;
+          }
         }
-      }
-    });
-    this.#mo.observe(this, { childList: true });
+      });
+      this.#mo.observe(this, { childList: true });
+    }
   }
 
   disconnected() {

package/components/icon/icon.class.js

@@ -30,13 +30,17 @@ function warnIfIconRegistryUnwired() {
     // eslint-disable-next-line no-console
     console.error(
       `[icon-ui] No icons are registered and no icon loaders were installed — every <icon-ui> renders blank.\n` +
-      `  The zero-config import.meta.glob path does not work from inside a published dependency under Vite 8 / rolldown.\n` +
-      `  Fix — from your APP entry (where import.meta.glob is transformed):\n` +
+      `  Two known causes (gh#287): (1) Vite's dev-server optimizeDeps pre-bundled this package, which empties\n` +
+      `  the auto-discovery glob — add to your Vite config:\n` +
+      `    optimizeDeps: { exclude: ['@adia-ai/web-components', '@adia-ai/web-modules'] }\n` +
+      `  (2) @phosphor-icons/core is missing or this file was re-nested by a packaging step (Yarn PnP, a custom\n` +
+      `  bundler). If neither applies, install loaders manually with plain imports from your APP entry:\n` +
       `    npm i @phosphor-icons/core\n` +
       `    import { installIconLoaders } from '@adia-ai/web-components/core/icons';\n` +
-      `    installIconLoaders({ regular: import.meta.glob(\n` +
-      `      '/node_modules/@phosphor-icons/core/assets/regular/*.svg',\n` +
-      `      { query: '?raw', import: 'default', eager: true }) });\n` +
+      `    import caretRight from '@phosphor-icons/core/assets/regular/caret-right.svg?raw';\n` +
+      `    installIconLoaders({ regular: {\n` +
+      `      '/node_modules/@phosphor-icons/core/assets/regular/caret-right.svg': caretRight,\n` +
+      `    } });\n` +
       `  See USAGE.md § Icons.`,
     );
   }, 0);

package/components/index.js

@@ -58,6 +58,7 @@ export { UISwiper } from './swiper/swiper.js';
 export { UIUpload } from './upload/upload.js';
 export { UICard } from './card/card.js';
 export { UIAvatar, UIAvatarGroup } from './avatar/avatar.js';
+export { UIAdiaMark } from './adia-mark/adia-mark.js';
 export { UIProgress } from './progress/progress.js';
 export { UIStepProgress } from './step-progress/step-progress.js';
 export { UISkeleton } from './skeleton/skeleton.js';

package/components/nav/nav.class.js

@@ -61,7 +61,8 @@ export class UINav extends UIElement {
     this.addEventListener('click', this.#onClick);
 
     // ResizeObserver only meaningful for primary variant — section is static.
-    if (this.variant !== 'section') {
+    // gh#285 — SSR DOM shims (linkedom) have no ResizeObserver global.
+    if (this.variant !== 'section' && typeof ResizeObserver !== 'undefined') {
       this.#ro = new ResizeObserver(() => this.#updateTooltips());
       this.#ro.observe(this);
     }

package/components/noodles/noodles.class.js

@@ -108,19 +108,23 @@ export class UINoodles extends UIElement {
     this.#svg.setAttribute('data-noodle-svg', '');
     this.prepend(this.#svg);
 
-    // Observers for child layout changes
-    this.#resizeObs = new ResizeObserver(() => this.#scheduleUpdate());
-    this.#mutationObs = new MutationObserver(() => {
-      this.#rebuildPortIndicators();
-      this.#scheduleUpdate();
-    });
-
-    this.#resizeObs.observe(this);
+    // Observers for child layout changes.
+    // gh#285 — SSR DOM shims (linkedom) have neither observer global.
+    if (typeof ResizeObserver !== 'undefined') {
+      this.#resizeObs = new ResizeObserver(() => this.#scheduleUpdate());
+      this.#resizeObs.observe(this);
+    }
+    if (typeof MutationObserver !== 'undefined') {
+      this.#mutationObs = new MutationObserver(() => {
+        this.#rebuildPortIndicators();
+        this.#scheduleUpdate();
+      });
+    }
     this.#observeMutations();
 
     // Observe each port-bearing child
     for (const child of this.#getPortChildren()) {
-      this.#resizeObs.observe(child);
+      this.#resizeObs?.observe(child);
     }
 
     this.#rebuildPortIndicators();
@@ -181,7 +185,7 @@ export class UINoodles extends UIElement {
     // Sync resize observer with current port children
     const portChildren = this.#getPortChildren();
     for (const child of portChildren) {
-      this.#resizeObs.observe(child);
+      this.#resizeObs?.observe(child);
     }
 
     // Update port indicator positions

package/components/page/page.class.js

@@ -78,13 +78,14 @@ export class UIPage extends UIElement {
       header.insertAdjacentElement('beforebegin', this.#sentinel);
     }
 
-    if (!this.#observer) {
+    // gh#285 — SSR DOM shims (linkedom) have no IntersectionObserver global.
+    if (!this.#observer && typeof IntersectionObserver !== 'undefined') {
       this.#observer = new IntersectionObserver((entries) => {
         this.toggleAttribute('data-header-stuck', !entries[0].isIntersecting);
       }, { threshold: 0 });
     }
 
-    this.#observer.observe(this.#sentinel);
+    this.#observer?.observe(this.#sentinel);
   }
 
   #teardownSticky() {

package/components/select/select.class.js

@@ -381,7 +381,8 @@ export class UISelect extends UIFormElement {
     // options are already parsed/set, and skip unless there's a real
     // <option>/<optgroup> to parse — so the component's own listbox/empty-state
     // renders (and #parseOptions's own option removals) don't re-enter or loop.
-    if (!this.#optionObserver) {
+    // gh#285 — SSR DOM shims (linkedom) have no MutationObserver global.
+    if (!this.#optionObserver && typeof MutationObserver !== 'undefined') {
       this.#optionObserver = new MutationObserver(() => {
         if (this.#options.length) return;
         const kids = this.#logicalOptionChildren();
@@ -394,7 +395,7 @@ export class UISelect extends UIFormElement {
         }
       });
     }
-    this.#optionObserver.observe(this, { childList: true, subtree: true });
+    this.#optionObserver?.observe(this, { childList: true, subtree: true });
   }
 
   render() {