@adia-ai/web-components 0.6.35 → 0.6.37

package/components/context-menu/context-menu.d.ts

@@ -0,0 +1,70 @@
+/**
+ * `<context-menu-ui>` — Right-click activated menu — the OS-native context-menu pattern as a
+web component. Distinct from `menu-ui` (which is button-triggered):
+same item shape (`menu-item-ui` children), different trigger surface
+(`contextmenu` event), and pointer-anchored positioning instead of
+element-anchored. Pattern: WAI-APG Menu.
+
+Two binding modes:
+ **A. Wrap.** Default-slot child becomes the target:
+ `<context-menu-ui><my-table>...</my-table>...items</context-menu-ui>`.
+ **B. Selector.** Point at one or more existing elements via [for]:
+ `<context-menu-ui for="#my-table">...items</context-menu-ui>`.
+
+On `contextmenu` event on a target: `preventDefault()`, position the
+menu at the pointer coords, show via Popover API. Touch long-press
+(configurable via [long-press-ms]) does the same. Shift+F10 / Menu
+key opens at the focused target's center for keyboard users.
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/context-menu
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export interface ContextMenuCloseEventDetail {
+  /** "select" | "outside" | "escape" */
+  reason: string;
+}
+
+export type ContextMenuCloseEvent = CustomEvent<ContextMenuCloseEventDetail>;
+export interface ContextMenuOpenEventDetail {
+  /** The target element the menu was opened on. */
+  target: string;
+  /** Pointer x coord (viewport-relative); null for keyboard activation. */
+  x: number;
+  /** Pointer y coord; null for keyboard activation. */
+  y: number;
+}
+
+export type ContextMenuOpenEvent = CustomEvent<ContextMenuOpenEventDetail>;
+export interface ContextMenuSelectEventDetail {
+  /** Selected item's text. */
+  text: string;
+  /** Selected item's value. */
+  value: string;
+}
+
+export type ContextMenuSelectEvent = CustomEvent<ContextMenuSelectEventDetail>;
+
+export class UIContextMenu extends UIElement {
+  /** CSS selector(s) for target element(s). Empty = use default-slot child. */
+  for: string;
+  /** Programmatic open state. Set true to open at target center. */
+  open: boolean;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIContextMenu, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'context-menu-close', listener: (ev: ContextMenuCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'context-menu-open', listener: (ev: ContextMenuOpenEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'context-menu-select', listener: (ev: ContextMenuSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/context-menu/context-menu.js

@@ -0,0 +1,17 @@
+/**
+ * `<context-menu-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIContextMenu } from '@adia-ai/web-components/components/context-menu/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UIContextMenu } from './context-menu.class.js';
+
+defineIfFree('context-menu-ui', UIContextMenu);
+
+export { UIContextMenu };

package/components/context-menu/context-menu.yaml

@@ -0,0 +1,136 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIContextMenu
+tag: context-menu-ui
+status: stable
+component: ContextMenu
+category: container
+version: 1
+description: |
+  Right-click activated menu — the OS-native context-menu pattern as a
+  web component. Distinct from `menu-ui` (which is button-triggered):
+  same item shape (`menu-item-ui` children), different trigger surface
+  (`contextmenu` event), and pointer-anchored positioning instead of
+  element-anchored. Pattern: WAI-APG Menu.
+
+  Two binding modes:
+   **A. Wrap.** Default-slot child becomes the target:
+   `<context-menu-ui><my-table>...</my-table>...items</context-menu-ui>`.
+   **B. Selector.** Point at one or more existing elements via [for]:
+   `<context-menu-ui for="#my-table">...items</context-menu-ui>`.
+
+  On `contextmenu` event on a target: `preventDefault()`, position the
+  menu at the pointer coords, show via Popover API. Touch long-press
+  (configurable via [long-press-ms]) does the same. Shift+F10 / Menu
+  key opens at the focused target's center for keyboard users.
+composes:
+  - menu-item-ui
+props:
+  for:
+    description: CSS selector(s) for target element(s). Empty = use default-slot child.
+    type: string
+    default: ""
+    reflect: true
+  open:
+    description: Programmatic open state. Set true to open at target center.
+    type: boolean
+    default: false
+    reflect: true
+  long-press-ms:
+    description: Long-press duration (ms) on touch devices to open the menu.
+    type: number
+    default: 500
+    reflect: false
+    attribute: long-press-ms
+events:
+  context-menu-open:
+    description: Fired when the menu opens (right-click / long-press / keyboard).
+    detail:
+      target:
+        type: Element
+        description: The target element the menu was opened on.
+      x:
+        type: number
+        description: Pointer x coord (viewport-relative); null for keyboard activation.
+      y:
+        type: number
+        description: Pointer y coord; null for keyboard activation.
+  context-menu-close:
+    description: Fired when the menu closes (item-select / outside-click / Escape).
+    detail:
+      reason:
+        type: string
+        description: '"select" | "outside" | "escape"'
+  context-menu-select:
+    description: Fired when an item is activated. Same shape as menu-ui's `action` event.
+    detail:
+      value:
+        type: string
+        description: Selected item's value.
+      text:
+        type: string
+        description: Selected item's text.
+slots:
+  default:
+    description: |
+      Two-purpose slot: the wrapped target element (mode A — first
+      non-menu-item-ui child) AND the menu-item-ui items. Items are
+      promoted to the popover surface on open.
+states:
+  - name: idle
+    description: Default. Menu closed; trigger listeners attached.
+  - name: open
+    description: Menu visible at pointer position; focus inside.
+    attribute: open
+traits: []
+tokens:
+  --context-menu-bg:
+    description: Menu surface background color.
+    default: var(--a-bg-subtle)
+  --context-menu-border:
+    description: Menu surface border color.
+    default: var(--a-border-subtle)
+  --context-menu-radius:
+    description: Menu surface border radius.
+    default: var(--a-radius-md)
+  --context-menu-shadow:
+    description: Menu surface shadow.
+    default: var(--a-shadow-lg)
+a2ui:
+  rules:
+    - rule: 'Use <context-menu-ui> for right-click menus on a target (table row, file item, canvas object). For button-triggered menus use <menu-ui>; for popover content that is not a menu use <popover-ui> directly.'
+      reason: 'Trigger surface boundary.'
+    - rule: 'Items are <menu-item-ui> children inside the default slot — same shape as <menu-ui> items.'
+      reason: 'Single menu vocabulary.'
+    - rule: 'Bind target via wrap (default-slot first non-menu-item-ui child) OR [for] selector. The selector form is useful for whole-table or whole-canvas menus where wrapping isn''t practical.'
+      reason: 'Two binding shapes.'
+anti_patterns:
+  - wrong: '<context-menu-ui>...just items...</context-menu-ui>'
+    why: 'No target binding — the menu never opens.'
+    fix: 'Wrap a target: `<context-menu-ui><my-target></my-target>...items</context-menu-ui>` OR point at one: `<context-menu-ui for="#my-target">...items</context-menu-ui>`.'
+examples:
+  - name: file-actions
+    description: Right-click a file row for Open / Rename / Delete.
+    a2ui: |
+      [
+        { "id": "root", "component": "ContextMenu", "children": ["target", "item-open", "item-rename", "div", "item-delete"] },
+        { "id": "target", "component": "Text", "textContent": "Right-click me" },
+        { "id": "item-open",   "component": "MenuItem", "value": "open",   "text": "Open" },
+        { "id": "item-rename", "component": "MenuItem", "value": "rename", "text": "Rename" },
+        { "id": "div",         "component": "MenuDivider" },
+        { "id": "item-delete", "component": "MenuItem", "value": "delete", "text": "Delete", "variant": "danger" }
+      ]
+keywords:
+  - context-menu
+  - right-click
+  - menu
+  - popup-menu
+synonyms:
+  right-click:
+    - context-menu
+  popup-menu:
+    - menu
+    - context-menu
+related:
+  - menu
+  - menu-item
+  - popover

package/components/date-range-picker/date-range-picker.a2ui.json

@@ -75,6 +75,21 @@
       "type": "string",
       "default": "Select range"
     },
+    "placement": {
+      "description": "Popover placement relative to the trigger. Default `bottom` centers the two-calendar panel under the trigger (ADR-0034 Rule 2 — ~800px panel >> trigger).",
+      "type": "string",
+      "enum": [
+        "top",
+        "bottom",
+        "left",
+        "right",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end"
+      ],
+      "default": "bottom"
+    },
     "readonly": {
       "description": "Block edits; allow keyboard navigation for screen-reader inspection.",
       "type": "boolean",

package/components/date-range-picker/date-range-picker.class.js

@@ -144,6 +144,8 @@ export class UIDateRangePicker extends UIFormElement {
       placeholder:  { type: String,  default: 'Select range', reflect: true },
       format:       { type: String,  default: 'short', reflect: true },
       noPresets:    { type: Boolean, default: false, attribute: 'no-presets', reflect: true },
+      // Popover placement — yaml documented reflect:true since v1.
+      placement:    { type: String,  default: 'bottom', reflect: true },
     };
   }
 
@@ -485,7 +487,7 @@ export class UIDateRangePicker extends UIFormElement {
           // Matches select-ui + calendar-picker-ui's anchorPopover pattern.
           this.#anchorCleanup?.();
           this.#anchorCleanup = anchorPopover(this.#triggerRef, this.#popoverRef, {
-            placement: this.getAttribute('placement') || 'bottom-start',
+            placement: this.getAttribute('placement') || 'bottom',
             gap: 4,
           });
           document.addEventListener('pointerdown', this.#onOutside);

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

@@ -62,11 +62,14 @@
   }
 
   /* ── Block 2 — BASE ── */
+  /* Host is a transparent inline wrapper — trigger button-ui paints its
+     own surface. Mirrors the datetime-picker decision (2026-05-24): a host
+     background paint creates an off-axis rectangle inside field-ui because
+     the field-ui's value-cell expands beyond the inline-block host. */
   :scope {
     box-sizing: border-box;
     position: relative;
     display: inline-block;
-    background: var(--date-range-picker-bg, var(--date-range-picker-bg-default));
     color: var(--date-range-picker-fg, var(--date-range-picker-fg-default));
     font-size: var(--a-ui-size);
   }

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

@@ -91,6 +91,20 @@ props:
     default: false
     attribute: no-presets
     reflect: true
+  placement:
+    description: Popover placement relative to the trigger. Default `bottom` centers the two-calendar panel under the trigger (ADR-0034 Rule 2 — ~800px panel >> trigger).
+    type: string
+    default: bottom
+    reflect: true
+    enum:
+      - top
+      - bottom
+      - left
+      - right
+      - top-start
+      - top-end
+      - bottom-start
+      - bottom-end
 events:
   change:
     description: Fired when the range commits (both `from` AND `to` selected, OR a preset clicked).

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

@@ -76,6 +76,21 @@
       "type": "string",
       "default": "Select date and time"
     },
+    "placement": {
+      "description": "Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger).",
+      "type": "string",
+      "enum": [
+        "top",
+        "bottom",
+        "left",
+        "right",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end"
+      ],
+      "default": "bottom"
+    },
     "precision": {
       "description": "Time-pane precision. `minute` (default) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`.",
       "type": "string",

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

@@ -136,6 +136,8 @@ export class UIDatetimePicker extends UIFormElement {
       placeholder: { type: String,  default: 'Select date and time', reflect: false },
       format:      { type: String,  default: 'short',  reflect: true },
       locale:      { type: String,  default: '',       reflect: false },
+      // Popover placement — yaml documented reflect:true since v1.
+      placement:   { type: String,  default: 'bottom', reflect: true },
     };
   }
 
@@ -439,7 +441,7 @@ export class UIDatetimePicker extends UIFormElement {
           // helper. Without this, the popover renders at viewport (0,0).
           this.#anchorCleanup?.();
           this.#anchorCleanup = anchorPopover(this.#triggerRef, this.#popoverRef, {
-            placement: this.getAttribute('placement') || 'bottom-start',
+            placement: this.getAttribute('placement') || 'bottom', // ADR-0034 Rule 2: panel >> trigger
             gap: 4,
           });
           document.addEventListener('pointerdown', this.#onOutside);

package/components/datetime-picker/datetime-picker.css

@@ -38,11 +38,17 @@
   }
 
   /* ── Block 2 — BASE ── */
+  /* Host is a transparent inline wrapper. Painting `background` on the host
+     used to create an off-axis rectangle behind the trigger when the host
+     sat inside a field-ui (the field-ui's value-cell expanded but the
+     inline-block host only sized to its child). Trigger button-ui paints
+     its own surface — host stays transparent.
+     2026-05-24 QA: "odd background colors and block element container for
+     inline trigger" — consumer report on /site/components/datetime-picker. */
   :scope {
     box-sizing: border-box;
     position: relative;
     display: inline-block;
-    background: var(--datetime-picker-bg, var(--datetime-picker-bg-default));
     color: var(--datetime-picker-fg, var(--datetime-picker-fg-default));
     font-size: var(--a-ui-size);
   }

package/components/datetime-picker/datetime-picker.d.ts

@@ -64,6 +64,8 @@ document locale. `h12` forces a 12-hour cycle with an AM/PM
   open: boolean;
   /** Text shown in the trigger when the value is empty. */
   placeholder: string;
+  /** Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger). */
+  placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
   /** Time-pane precision. `minute` (default) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`. */
   precision: 'minute' | 'second';
   /** Block edits; allow keyboard navigation for screen-reader inspection. */

package/components/datetime-picker/datetime-picker.yaml

@@ -104,6 +104,20 @@ props:
     description: BCP-47 locale tag used to derive hour-cycle when `hour-cycle` is empty. Falls back to `<html lang>` then to browser default.
     type: string
     default: ''
+  placement:
+    description: Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger).
+    type: string
+    default: bottom
+    reflect: true
+    enum:
+      - top
+      - bottom
+      - left
+      - right
+      - top-start
+      - top-end
+      - bottom-start
+      - bottom-end
 events:
   change:
     description: Fired when the value commits (date picked + time edited, OR Apply clicked in explicit-commit mode).

package/components/empty-state/empty-state.class.js

@@ -29,6 +29,8 @@ export class UIEmptyState extends UIElement {
     icon:        { type: String,  default: '',    reflect: true },
     heading:     { type: String,  default: '',    reflect: true },
     description: { type: String,  default: '',    reflect: true },
+    // Semantic variant — yaml documented reflect:true since v1.
+    variant:     { type: String,  default: '',    reflect: true },
     // §223 (v0.5.9): minimal layout — single-line muted (no centered column,
     // no padding bump, no icon-size lg). Use for inline empty-table-row /
     // inline placeholder cells where the canvas placeholder is too loud.

package/components/feed/feed.class.js

@@ -296,9 +296,14 @@ export class UIFeed {
    * @param {string} [opts.position='bottom-right']
    * @param {boolean} [opts.dismissible]  override default (true for sticky, false for auto)
    * @param {string} [opts.id]
-   * @param {string} [opts.action]  Phase 2 — action button label. When set,
-   *                                duration is forced to null (sticky); the
-   *                                item gets role=alertdialog + focus trap.
+   * @param {string} [opts.action]  Phase 2 — action button label. When set
+   *                                without an explicit duration, the item is
+   *                                sticky (role=alertdialog + focus trap).
+   *                                Pass an explicit numeric `duration` to
+   *                                build the "undo" pattern: the action
+   *                                button shows, but the item auto-dismisses
+   *                                after the timeout. Negative-action UX
+   *                                (delete/archive) typically uses 6000-8000.
    * @param {function} [opts.onAction]  Phase 2 — callback invoked when the
    *                                action button is pressed. Item dismisses
    *                                after the callback returns.
@@ -330,8 +335,11 @@ export class UIFeed {
     item.heading = heading;
     item.icon = icon;
     item.variant = v;
-    // Action-required forces sticky.
-    item.duration = action ? 0 : duration;
+    // Action-required default is sticky; explicit duration honored so callers
+    // can build the "undo" pattern (action + timed auto-dismiss). Default
+    // (duration unspecified) preserves the original alertdialog sticky behavior.
+    const explicitDuration = 'duration' in opts;
+    item.duration = action && !explicitDuration ? 0 : duration;
     if (dismissible != null) item.dismissible = !!dismissible;
     if (action) item.action = action;
     if (visibleCount >= max) item.setAttribute('data-queued', '');

package/components/feed/feed.css

@@ -40,6 +40,10 @@ feed-item-ui[data-closing] {
     pointer-events: none; /* Items re-enable pointer-events. */
     width: max-content;
     max-width: var(--feed-max-width, var(--feed-max-width-default));
+    /* Items size to their own content (see feed-item-ui width: max-content);
+       align them to the lane's anchored edge so short items hug the side
+       rather than left-aligning inside a wider container. */
+    align-items: flex-end;
   }
   /* Reset native popover defaults. UA stylesheet sets `margin: auto;
      inset: 0; border: solid; padding: 0.25em` which would center the
@@ -61,11 +65,13 @@ feed-item-ui[data-closing] {
   }
   :scope[position="bottom-left"] {
     bottom: var(--feed-offset, var(--feed-offset-default)); left: var(--feed-offset, var(--feed-offset-default)); right: auto;
+    align-items: flex-start;
   }
   :scope[position="bottom-center"] {
     bottom: var(--feed-offset, var(--feed-offset-default));
     left: 50%; right: auto;
     transform: translateX(-50%);
+    align-items: center;
   }
   :scope[position="top-right"] {
     top: var(--feed-offset, var(--feed-offset-default)); right: var(--feed-offset, var(--feed-offset-default)); bottom: auto;
@@ -74,12 +80,14 @@ feed-item-ui[data-closing] {
   :scope[position="top-left"] {
     top: var(--feed-offset, var(--feed-offset-default)); left: var(--feed-offset, var(--feed-offset-default)); right: auto; bottom: auto;
     flex-direction: column-reverse;
+    align-items: flex-start;
   }
   :scope[position="top-center"] {
     top: var(--feed-offset, var(--feed-offset-default)); bottom: auto;
     left: 50%; right: auto;
     transform: translateX(-50%);
     flex-direction: column-reverse;
+    align-items: center;
   }
   :scope[position="inline"] {
     position: relative;
@@ -119,6 +127,12 @@ feed-item-ui[data-closing] {
     display: flex;
     align-items: center;
     gap: var(--feed-item-gap);
+    /* Size to own content (a one-line "OK" stays narrow), capped at
+       max-width (long messages wrap at the bound). The lane container's
+       align-items (per [position]) re-aligns short items to the anchored
+       edge so they hug the corner instead of left-aligning under a
+       wider sibling. */
+    width: max-content;
     max-width: var(--feed-item-max-width);
     padding: var(--feed-item-py) var(--feed-item-px);
     background: var(--feed-item-bg);

package/components/index.js

@@ -79,11 +79,20 @@ export { UIChartLegend } from './chart-legend/chart-legend.js';
 export { UIPopover } from './popover/popover.js';
 export { UIAccordion, UIAccordionItem } from './accordion/accordion.js';
 export { UIDivider } from './divider/divider.js';
+export { UIBlockquote } from './blockquote/blockquote.js';
+export { UIRelativeTime } from './relative-time/relative-time.js';
+export { UINumberFormat } from './number-format/number-format.js';
+export { UIPasswordStrength } from './password-strength/password-strength.js';
+export { UITableOfContents } from './toc/toc.js';
+export { UIQRCode } from './qr-code/qr-code.js';
 export { UIPagination } from './pagination/pagination.js';
 export { UICode } from './code/code.js';
 export { UIList, UIListItem } from './list/list.js';
 export { UIListWindow } from './list-window/list-window.js';
 export { UIMenu, UIMenuItem, UIMenuDivider } from './menu/menu.js';
+export { UIContextMenu } from './context-menu/context-menu.js';
+export { UIVisuallyHidden } from './visually-hidden/visually-hidden.js';
+export { UISkipNav } from './skip-nav/skip-nav.js';
 export { UIToolbar, UIToolbarGroup } from './toolbar/toolbar.js';
 export { UINav } from './nav/nav.js';
 export { UINavGroup } from './nav-group/nav-group.js';

package/components/input/input.css

@@ -121,6 +121,10 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     outline: none;
     white-space: nowrap;
     overflow: hidden;
+    /* Positioning context for the [data-empty]::before placeholder
+       pseudo, which is taken out of inline flow so the caret renders
+       at the actual content-start (not after the pseudo box). */
+    position: relative;
   }
 
   /* Text (native input — password only) */
@@ -138,11 +142,21 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     color: var(--input-placeholder-fg, var(--input-placeholder-fg-default));
   }
 
-  /* Placeholder (contenteditable only) */
+  /* Placeholder (contenteditable only).
+     Out-of-flow positioning is load-bearing — an in-flow ::before with
+     `content: attr(...)` puts the pseudo box INLINE before the empty
+     text node, which means the caret-at-position-0 visually renders to
+     the RIGHT of the placeholder text (after the user types and deletes).
+     `position: absolute; inset: 0; padding: inherit` makes the pseudo
+     fill the host's content-box without occupying any inline-flow space,
+     so the caret renders at the actual content-start where it belongs. */
   span[slot="text"][data-empty]::before {
     content: attr(data-placeholder);
     color: var(--input-placeholder-fg, var(--input-placeholder-fg-default));
     pointer-events: none;
+    position: absolute;
+    inset: 0;
+    padding: inherit;
   }
 
   /* ── Number mode (type="number") ──

package/components/input/input.test.js

@@ -10,9 +10,15 @@
  */
 
 import { describe, it, expect, beforeEach } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
 import '../../core/element.js';
 import './input.js';
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const INPUT_CSS = readFileSync(resolve(__dirname, 'input.css'), 'utf8');
+
 const tick = () => new Promise((r) => queueMicrotask(r));
 
 function mount(html) {
@@ -220,3 +226,37 @@ describe('input-ui — §220 (v0.5.9) throttle parity', () => {
     expect(events).toEqual([]);
   });
 });
+
+// ── Placeholder caret-position regression guard ─────────────────────
+//
+// Per the v0.6.35 bug report: with the `::before { content: attr(data-placeholder) }`
+// pseudo rendered in inline flow, typing-then-deleting left the caret
+// visually at the END of the placeholder text (not at position 0) because
+// the in-flow pseudo box pushed the caret rendering position to its right.
+// Fix: pseudo is `position: absolute` so it doesn't occupy inline-flow
+// space; the host carries `position: relative` as its anchor.
+// These tests assert the CSS-source contract that prevents accidental
+// revert to the in-flow pseudo shape.
+
+describe('input-ui — CSS source contract: placeholder pseudo is out of flow', () => {
+  it('host [slot="text"] declares position: relative (pseudo anchor)', () => {
+    expect(INPUT_CSS).toMatch(
+      /\[slot="text"\]\s*\{[^}]*position:\s*relative/s
+    );
+  });
+
+  it('[data-empty]::before is position: absolute (not inline-flow)', () => {
+    expect(INPUT_CSS).toMatch(
+      /span\[slot="text"\]\[data-empty\]::before\s*\{[^}]*position:\s*absolute/s
+    );
+  });
+
+  it('[data-empty]::before fills the host content-box (inset: 0 + padding: inherit)', () => {
+    expect(INPUT_CSS).toMatch(
+      /span\[slot="text"\]\[data-empty\]::before\s*\{[^}]*inset:\s*0/s
+    );
+    expect(INPUT_CSS).toMatch(
+      /span\[slot="text"\]\[data-empty\]::before\s*\{[^}]*padding:\s*inherit/s
+    );
+  });
+});

package/components/integration-card/integration-card.class.js

@@ -229,6 +229,15 @@ export class UIIntegrationCard extends UIElement {
     if (!this.#logoEl) return;
     const logo = (this.logo || '').trim();
 
+    // Guard against unresolved AdiaUI template binding descriptors
+    // ({{p:N}} placeholders). The integration-card's connected() + render()
+    // fires synchronously when the parent template stamps the element, BEFORE
+    // the parent's reconciliation pass replaces {{p:N}} with the real value.
+    // Skipping here lets the second render (triggered by the reconciliation's
+    // property set) render the real logo. Without this guard, icon-ui fires
+    // a "not found" warn for every {{p:4}} it receives on first connect.
+    if (logo.startsWith('{{p:')) return;
+
     // No logo → strip any prior content and hide.
     if (!logo) {
       this.#logoEl.replaceChildren();

package/components/integration-card/integration-card.test.js

@@ -275,9 +275,10 @@ describe('integration-card-ui — CSS contract (source-grep)', () => {
 
     expect(CSS).toMatch(/@scope\s*\(\s*integration-card-ui\s*\)/);
     expect(CSS).toMatch(/:where\(:scope\)\s*\{/);
-    expect(CSS).toMatch(/--integration-card-bg:/);
-    expect(CSS).toMatch(/--integration-card-border:/);
-    expect(CSS).toMatch(/--integration-card-radius:/);
+    // OD-5 sweep: token declarations use -default suffix per component-token-contract.md
+    expect(CSS).toMatch(/--integration-card-bg-default:/);
+    expect(CSS).toMatch(/--integration-card-border-default:/);
+    expect(CSS).toMatch(/--integration-card-radius-default:/);
   });
 
   it('keeps status-driven border tint (status="connected") inside @scope', async () => {

package/components/nav-group/nav-group.css

@@ -26,7 +26,13 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--nav-gap);
+    /* Fallback to --nav-gap-default (cascaded from the ancestor nav-ui
+       where it's defined) so child nav-items get the spec spacing even
+       when the override token --nav-gap isn't explicitly set. Without
+       the fallback `var(--nav-gap)` resolved to empty → invalid gap →
+       items packed at 0 px stride. Reported 2026-05-25; latent since
+       Apr-20 snapshot. */
+    gap: var(--nav-gap, var(--nav-gap-default, var(--a-space-1)));
     position: relative;
     font-weight: var(--nav-group-text-weight);
   }