@adia-ai/web-components 0.6.37 → 0.6.38

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.38] — 2026-05-26
+
+### Added — Wave 5e cohort: 3 new primitives + slot-vocab-vs-css backlog closed
+
+- **`<mark-ui>`** — inline highlighted text primitive (#357)
+- **`<inline-edit-ui>`** — click-to-edit text in place (#212)
+- **Notification deep-link demo + Mark All Read verify** for `<feed-ui>` (#344/#343)
+
+### Fixed — substrate polish across the v0.6.38 window
+
+- **`<list-item-ui>`**: slot selectors changed from direct-child to descendant — description row now lands on row 2 as intended
+- **`<segmented-ui>`**: stale indicator stripping — duplicate pills on re-render eliminated
+- **`<stat-ui>`**: chart slot bottom-aligns to value baseline; aspect 4:3
+- **`<toolbar-ui>`** mixed-controls demo: `<segment-ui>` (not `<button-ui>`) inside `<segmented-ui>`
+
+### Maintenance — slot-vocab-vs-css audit reached 0 critical findings
+
+- `audit-slot-vocab-vs-css` substrate backlog closed → gate now enforced. Multi-yaml + @scope-aware pairing landed in the audit script.
+- 5 Wave 5a/b/c/d gap-analysis flips landed (substrate-verified as covered; no new code).
+
 ## [0.6.37] — 2026-05-25
 
 ### Changed — `--a-warning-bg` redirected from `-strong` to `-20-tint` (bright caution-tape amber, scheme-independent)

package/components/accordion/accordion-item.a2ui.json

@@ -63,6 +63,9 @@
       "action": {
         "description": "§206 (v0.5.7): action buttons inside a custom header (e.g. Copy /\nDownload / settings). Children placed at `[slot=\"action\"]` (or\n`[slot=\"actions\"]`, or marked `[data-no-toggle]`) are excluded from\nthe toggle-on-click cascade — clicking them fires their own handler\nwithout also toggling the section."
       },
+      "body": {
+        "description": "The section's collapsible content. Renders below the header; hidden when `[open]` is unset. Author-fills with prose, lists, embedded forms, or any rich markup the panel needs."
+      },
       "header": {
         "description": "Custom header content. By default `[text]` renders as a plain header\nlabel, but a `[slot=\"header\"]` override lets consumers author rich\nheaders (icon + title + action buttons + caret)."
       }

package/components/accordion/accordion-item.yaml

@@ -39,6 +39,11 @@ slots:
       `[slot="actions"]`, or marked `[data-no-toggle]`) are excluded from
       the toggle-on-click cascade — clicking them fires their own handler
       without also toggling the section.
+  body:
+    description: >-
+      The section's collapsible content. Renders below the header; hidden
+      when `[open]` is unset. Author-fills with prose, lists, embedded
+      forms, or any rich markup the panel needs.
 events:
   toggle:
     description: Fired when the section opens or closes.

package/components/action-list/action-item.a2ui.json

@@ -62,7 +62,11 @@
       "MenuItem",
       "Button"
     ],
-    "slots": {},
+    "slots": {
+      "icon": {
+        "description": "Override the [icon] glyph with a custom slotted element (custom icon-ui, image, avatar). Mutually exclusive with the [icon] attribute — slot child wins."
+      }
+    },
     "states": [],
     "status": "stable",
     "synonyms": {

package/components/action-list/action-item.yaml

@@ -37,6 +37,13 @@ props:
     type: boolean
     default: false
 
+slots:
+  icon:
+    description: >-
+      Override the [icon] glyph with a custom slotted element (custom
+      icon-ui, image, avatar). Mutually exclusive with the [icon]
+      attribute — slot child wins.
+
 keywords:
   - action-item
   - command-row

package/components/card/card.a2ui.json

@@ -113,7 +113,23 @@
       "alert",
       "skeleton"
     ],
-    "slots": {},
+    "slots": {
+      "description": {
+        "description": "Optional descriptive text beneath the heading. Renders in the header slot at body-subtle typography. Use for short metadata lines (timestamp, author, status sentence)."
+      },
+      "action": {
+        "description": "Trailing action cluster in the header (e.g. icon-buttons, menu trigger, more-options). Aligns to the header's flex-end edge."
+      },
+      "action-leading": {
+        "description": "Leading action cluster in the header (e.g. back button, switcher, breadcrumb-context). Aligns to the header's flex-start edge, before the icon/heading column."
+      },
+      "heading": {
+        "description": "Card title. Renders in the header slot with title typography. Typically a short noun phrase or document/object name."
+      },
+      "icon": {
+        "description": "Optional leading icon for the card header (status / brand / type marker). Renders next to the heading. Use `<icon-ui name=\"…\">` or any inline icon element."
+      }
+    },
     "states": [
       {
         "description": "Default, ready for interaction.",

package/components/card/card.yaml

@@ -58,7 +58,30 @@ props:
     - soft
     - primary
 events: {}
-slots: {}
+slots:
+  icon:
+    description: >-
+      Optional leading icon for the card header (status / brand / type
+      marker). Renders next to the heading. Use `<icon-ui name="…">` or
+      any inline icon element.
+  heading:
+    description: >-
+      Card title. Renders in the header slot with title typography.
+      Typically a short noun phrase or document/object name.
+  description:
+    description: >-
+      Optional descriptive text beneath the heading. Renders in the
+      header slot at body-subtle typography. Use for short metadata
+      lines (timestamp, author, status sentence).
+  action:
+    description: >-
+      Trailing action cluster in the header (e.g. icon-buttons, menu
+      trigger, more-options). Aligns to the header's flex-end edge.
+  action-leading:
+    description: >-
+      Leading action cluster in the header (e.g. back button, switcher,
+      breadcrumb-context). Aligns to the header's flex-start edge,
+      before the icon/heading column.
 states:
 - name: idle
   description: Default, ready for interaction.

package/components/empty-state/empty-state.a2ui.json

@@ -85,8 +85,17 @@
       "select"
     ],
     "slots": {
+      "description": {
+        "description": "Override slot for the description text. Use for multi-paragraph or richly-marked-up explanatory copy."
+      },
       "action": {
         "description": "User-provided action element (e.g. button) displayed below the description"
+      },
+      "heading": {
+        "description": "Override slot for the heading text. Use when richer markup than the plain [heading] attribute is needed (line breaks, inline links, bold emphasis)."
+      },
+      "icon": {
+        "description": "Override slot for the [icon] glyph. Use when the attribute-driven Phosphor icon isn't enough (e.g., custom SVG, illustration, or a styled icon-ui with non-default weight). Mutually exclusive with [icon]."
       }
     },
     "states": [

package/components/empty-state/empty-state.yaml

@@ -53,6 +53,21 @@ props:
     reflect: true
 events: {}
 slots:
+  icon:
+    description: >-
+      Override slot for the [icon] glyph. Use when the attribute-driven
+      Phosphor icon isn't enough (e.g., custom SVG, illustration, or
+      a styled icon-ui with non-default weight). Mutually exclusive
+      with [icon].
+  heading:
+    description: >-
+      Override slot for the heading text. Use when richer markup than
+      the plain [heading] attribute is needed (line breaks, inline
+      links, bold emphasis).
+  description:
+    description: >-
+      Override slot for the description text. Use for multi-paragraph
+      or richly-marked-up explanatory copy.
   action:
     description: User-provided action element (e.g. button) displayed below the description
 states:

package/components/feed/feed-item.a2ui.json

@@ -13,6 +13,11 @@
     }
   ],
   "properties": {
+    "action": {
+      "description": "Label of an inline action button (the \"deep-link\" / \"undo\" pattern).\nPair with `onAction` callback in `UIFeed.post()` — click invokes the\ncallback then auto-dismisses. Empty string renders no action button.\n",
+      "type": "string",
+      "default": ""
+    },
     "component": {
       "const": "FeedItem"
     },

package/components/feed/feed-item.yaml

@@ -42,6 +42,14 @@ props:
     description: Render an x close button (default true for sticky, false for auto-fade)
     type: boolean
     default: false
+  action:
+    description: |
+      Label of an inline action button (the "deep-link" / "undo" pattern).
+      Pair with `onAction` callback in `UIFeed.post()` — click invokes the
+      callback then auto-dismisses. Empty string renders no action button.
+    type: string
+    default: ""
+    reflect: true
 events:
   close:
     description: Fired after the item finishes its exit animation
@@ -74,3 +82,5 @@ a2ui:
       reason: 'Imperative ownership.'
     - rule: 'Different from <alert-ui> (inline persistent) and <toast-ui> (standalone ephemeral); feed-item is feed-scoped.'
       reason: 'Surface boundary.'
+    - rule: 'For "notification deep-link" pattern: post with action + onAction. Click navigates and auto-dismisses (router.push() / location.href / api.markRead()).'
+      reason: 'Deep-link pattern lives in the onAction callback, not in markup.'

package/components/field/field.a2ui.json

@@ -103,6 +103,12 @@
       "action": {
         "description": "Button adjacent to the control for inline actions (clear, reset, help popover)."
       },
+      "error": {
+        "description": "Override slot for error markup richer than the plain [error] attribute string. Rendered below the control with danger-text styling. Mutually exclusive with [error]."
+      },
+      "hint": {
+        "description": "Override slot for hint markup richer than the plain [hint] attribute string (inline links, code spans, abbreviations). Rendered below the control at body-subtle typography. Mutually exclusive with [hint]."
+      },
       "trailing": {
         "description": "Secondary text or badge aligned with the label in the stacked layout (right-aligned) or between label and control in the inline layout."
       }

package/components/field/field.yaml

@@ -89,6 +89,16 @@ slots:
     description: >-
       Button adjacent to the control for inline actions (clear,
       reset, help popover).
+  hint:
+    description: >-
+      Override slot for hint markup richer than the plain [hint] attribute
+      string (inline links, code spans, abbreviations). Rendered below
+      the control at body-subtle typography. Mutually exclusive with [hint].
+  error:
+    description: >-
+      Override slot for error markup richer than the plain [error] attribute
+      string. Rendered below the control with danger-text styling. Mutually
+      exclusive with [error].
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/index.js

@@ -93,6 +93,8 @@ 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 { UIMark } from './mark/mark.js';
+export { UIInlineEdit } from './inline-edit/inline-edit.js';
 export { UIToolbar, UIToolbarGroup } from './toolbar/toolbar.js';
 export { UINav } from './nav/nav.js';
 export { UINavGroup } from './nav-group/nav-group.js';

package/components/inline-edit/inline-edit.a2ui.json

@@ -0,0 +1,159 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/InlineEdit.json",
+  "title": "InlineEdit",
+  "description": "Click-to-edit text in place. Renders as static text until clicked /\nfocused + Enter, then becomes editable. Enter or blur commits; Escape\ncancels and restores the original value. Form-participating.\n\nUse for editable titles, breadcrumb labels, table-cell text fields,\ndraft document names — any case where a user expects to edit text\nwithout opening a separate dialog or input. Distinct from `<input-ui>`\n(always-editable chrome) and from `<field-ui>` (stacked label + input\ncomposition). inline-edit reads as text in static state.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "commit": {
+      "description": "When to commit pending edits. `blur` (default) — saves on focusout\nor Enter. `enter` — Enter saves, blur cancels (returns to original).\n`manual` — only programmatic `commitEdit()` saves.\n",
+      "type": "string",
+      "enum": [
+        "blur",
+        "enter",
+        "manual"
+      ],
+      "default": "blur"
+    },
+    "component": {
+      "const": "InlineEdit"
+    },
+    "editing": {
+      "description": "Reflected state — `true` when the element is actively being edited.\nToggles automatically on click / Enter / blur / Escape; rarely set\nby consumers. Listen to `edit-start` / `edit-end` events instead.\n",
+      "type": "boolean",
+      "default": false
+    },
+    "placeholder": {
+      "description": "Hint text shown when the value is empty (inline-edit reads this in the static state).",
+      "type": "string",
+      "default": "Click to edit"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "<inline-edit-ui value=\"Title\" name=\"title\"> — reads as text in static state; chrome only appears while editing.",
+        "why": "Ghost variant still renders input chrome (border on focus). Looks like a control, not text.",
+        "wrong": "<input-ui value=\"Title\" name=\"title\" variant=\"ghost\">"
+      },
+      {
+        "fix": "<inline-edit-ui value=\"Title\">",
+        "why": "No state machine — no commit/cancel semantics, no form participation, no a11y wiring.",
+        "wrong": "<text-ui contenteditable>Title</text-ui>"
+      }
+    ],
+    "category": "form",
+    "composes": [],
+    "events": {
+      "cancel": {
+        "description": "Fired when Escape (or blur with commit=enter) restores the original. Bubbles."
+      },
+      "change": {
+        "description": "Fired after a successful commit. detail = { value, oldValue }. Bubbles."
+      },
+      "edit-end": {
+        "description": "Fired when leaving edit mode. detail = { committed: boolean }. Bubbles."
+      },
+      "edit-start": {
+        "description": "Fired when entering edit mode. Bubbles."
+      }
+    },
+    "examples": [
+      {
+        "description": "A draft document title that becomes editable on click.",
+        "a2ui": "[{ \"id\": \"title\", \"component\": \"InlineEdit\", \"value\": \"Untitled draft\" }]\n",
+        "name": "editable-title"
+      }
+    ],
+    "keywords": [
+      "inline-edit",
+      "editable",
+      "click-to-edit",
+      "rename",
+      "edit-in-place"
+    ],
+    "name": "UIInlineEdit",
+    "related": [
+      "input",
+      "field",
+      "text"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Static — text reads as plain text with a hover hint.",
+        "name": "idle"
+      },
+      {
+        "description": "Hover affordance — subtle background tint signals editability.",
+        "name": "hover"
+      },
+      {
+        "description": "contenteditable — host is the input surface; outline + caret.",
+        "name": "editing"
+      },
+      {
+        "description": "Value is empty and not editing — placeholder text renders.",
+        "name": "empty"
+      },
+      {
+        "description": "Locked; click + keyboard activation are no-ops.",
+        "name": "disabled"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "inline-edit": [
+        "editable",
+        "click-to-edit",
+        "edit-in-place",
+        "rename-in-place"
+      ]
+    },
+    "tag": "inline-edit-ui",
+    "tokens": {
+      "--inline-edit-bg-edit": {
+        "description": "Background while editing.",
+        "default": "var(--a-bg)"
+      },
+      "--inline-edit-bg-hover": {
+        "description": "Background tint on hover (idle state).",
+        "default": "var(--a-bg-muted)"
+      },
+      "--inline-edit-outline": {
+        "description": "Outline color in the editing state.",
+        "default": "var(--a-accent-strong)"
+      },
+      "--inline-edit-placeholder": {
+        "description": "Placeholder text color in empty-static state.",
+        "default": "var(--a-fg-subtle)"
+      },
+      "--inline-edit-px": {
+        "description": "Horizontal padding (inner gutter so hover tint reads as a pill, not a flush block).",
+        "default": "var(--a-space-1)"
+      },
+      "--inline-edit-py": {
+        "description": "Vertical padding.",
+        "default": "var(--a-space-0-5)"
+      },
+      "--inline-edit-radius": {
+        "description": "Border-radius for the hover / editing chrome.",
+        "default": "var(--a-radius-sm)"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/inline-edit/inline-edit.class.js

@@ -0,0 +1,184 @@
+/**
+ * `<inline-edit-ui>` — click-to-edit text in place.
+ *
+ * Static state: textContent reads as plain text with a hover affordance.
+ * Editing state: host becomes `contenteditable=plaintext-only`. Enter or
+ * blur commits (configurable via `commit`); Escape always cancels.
+ *
+ * Form-participating via UIFormElement (name/value/required/disabled/
+ * readonly inherited). Pair with a `<form>` + `name=` to submit edits
+ * as a field.
+ *
+ * Architecture: no template (stamp-nothing). The element manages its
+ * own DOM imperatively — textContent IS the value, contenteditable
+ * attribute IS the editing state. This keeps the element trivial and
+ * lets the inherited UIFormElement value sync stay authoritative.
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export class UIInlineEdit extends UIFormElement {
+  static properties = {
+    ...UIFormElement.properties,
+    placeholder: { type: String,  default: 'Click to edit', reflect: true },
+    editing:     { type: Boolean, default: false,           reflect: true },
+    commit:      { type: String,  default: 'blur',          reflect: true }, // blur | enter | manual
+  };
+
+  static template = () => null;
+
+  #originalValue = '';
+  #bound = false;
+  #suppressBlur = false;
+
+  connected() {
+    super.connected();
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'textbox');
+    if (!this.hasAttribute('tabindex') && !this.disabled) {
+      this.setAttribute('tabindex', '0');
+    }
+    // Reflect the initial value to textContent (the source of truth for
+    // display while not editing). Setting via property triggers the
+    // reflection but not the textContent sync — do it explicitly.
+    if (this.value && this.textContent.trim() === '') {
+      this.textContent = this.value;
+    } else if (!this.value && this.textContent.trim()) {
+      // Author supplied text in the slot — treat it as the initial value.
+      this.value = this.textContent.trim();
+      this.syncValue();
+    }
+
+    if (!this.#bound) {
+      this.#bound = true;
+      this.addEventListener('click',    this.#onClick);
+      this.addEventListener('keydown',  this.#onKeydown);
+      this.addEventListener('focus',    this.#onFocus);
+      this.addEventListener('blur',     this.#onBlur);
+    }
+  }
+
+  disconnected() {
+    super.disconnected();
+    this.removeEventListener('click',    this.#onClick);
+    this.removeEventListener('keydown',  this.#onKeydown);
+    this.removeEventListener('focus',    this.#onFocus);
+    this.removeEventListener('blur',     this.#onBlur);
+    this.#bound = false;
+  }
+
+  /* ── Public API ──────────────────────────────────────────────────── */
+
+  startEdit() {
+    if (this.editing || this.disabled || this.readonly) return;
+    this.#originalValue = this.value || '';
+    this.editing = true;
+    this.setAttribute('contenteditable', 'plaintext-only');
+    this.dispatchEvent(new CustomEvent('edit-start', { bubbles: true }));
+    // Defer focus/selection — setting contenteditable in the same tick
+    // as a click can race with the browser's own caret placement.
+    queueMicrotask(() => {
+      this.focus();
+      this.#selectAll();
+    });
+  }
+
+  commitEdit() {
+    if (!this.editing) return;
+    const newValue = (this.textContent || '').trim();
+    const oldValue = this.#originalValue;
+    this.editing = false;
+    this.removeAttribute('contenteditable');
+    // Keep the visible text in sync with the canonical value (normalizes
+    // trailing whitespace + restores the source-of-truth string).
+    if (this.textContent !== newValue) this.textContent = newValue;
+    if (newValue !== oldValue) {
+      this.value = newValue;
+      this.syncValue(newValue);
+      this.dispatchEvent(new CustomEvent('change', {
+        bubbles: true,
+        detail: { value: newValue, oldValue },
+      }));
+    }
+    this.dispatchEvent(new CustomEvent('edit-end', {
+      bubbles: true,
+      detail: { committed: true },
+    }));
+  }
+
+  cancelEdit() {
+    if (!this.editing) return;
+    this.editing = false;
+    this.removeAttribute('contenteditable');
+    this.textContent = this.#originalValue;
+    this.dispatchEvent(new CustomEvent('cancel', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('edit-end', {
+      bubbles: true,
+      detail: { committed: false },
+    }));
+  }
+
+  /* ── Event handlers ──────────────────────────────────────────────── */
+
+  #onClick = (e) => {
+    if (this.disabled || this.readonly) return;
+    if (this.editing) return; // already editing, let caret behavior pass through
+    e.preventDefault();
+    this.startEdit();
+  };
+
+  #onKeydown = (e) => {
+    if (this.editing) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        this.#suppressBlur = true; // commitEdit blurs us; don't recurse
+        this.commitEdit();
+        this.blur();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        this.#suppressBlur = true;
+        this.cancelEdit();
+        this.blur();
+      }
+    } else {
+      // Activate edit from keyboard (Enter or Space)
+      if (e.key === 'Enter' || e.key === ' ') {
+        if (this.disabled || this.readonly) return;
+        e.preventDefault();
+        this.startEdit();
+      }
+    }
+  };
+
+  #onFocus = () => {
+    // No-op — keyboard activation handled in #onKeydown to distinguish
+    // focus-via-Tab (don't edit) from focus-via-click (also don't edit
+    // here; the click handler does that). Focus alone never starts an
+    // edit — that would surprise tab-traversers.
+  };
+
+  #onBlur = () => {
+    if (!this.editing) return;
+    if (this.#suppressBlur) {
+      this.#suppressBlur = false;
+      return;
+    }
+    if (this.commit === 'blur') {
+      this.commitEdit();
+    } else if (this.commit === 'enter') {
+      // blur cancels under `commit=enter` semantics
+      this.cancelEdit();
+    }
+    // commit=manual: do nothing on blur; consumer must call commitEdit()
+  };
+
+  /* ── Helpers ─────────────────────────────────────────────────────── */
+
+  #selectAll() {
+    const range = document.createRange();
+    range.selectNodeContents(this);
+    const sel = window.getSelection();
+    if (!sel) return;
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+}

package/components/inline-edit/inline-edit.css

@@ -0,0 +1,62 @@
+@scope (inline-edit-ui) {
+  :where(:scope) {
+    --inline-edit-bg-hover-default:    var(--a-bg-muted);
+    --inline-edit-bg-edit-default:     var(--a-bg);
+    --inline-edit-outline-default:     var(--a-accent-strong);
+    --inline-edit-placeholder-default: var(--a-fg-subtle);
+    --inline-edit-px-default:          var(--a-space-1);
+    --inline-edit-py-default:          var(--a-space-0-5);
+    --inline-edit-radius-default:      var(--a-radius-sm);
+  }
+
+  :scope {
+    /* Inline-block so padding works without breaking text flow when
+       embedded inside a paragraph or heading. Falls back to inline for
+       table cells (where the cell already contains the box). */
+    display: inline-block;
+    box-sizing: border-box;
+    padding-inline: var(--inline-edit-px, var(--inline-edit-px-default));
+    padding-block: var(--inline-edit-py, var(--inline-edit-py-default));
+    margin-inline: calc(-1 * var(--inline-edit-px, var(--inline-edit-px-default)));
+    margin-block: calc(-1 * var(--inline-edit-py, var(--inline-edit-py-default)));
+    border-radius: var(--inline-edit-radius, var(--inline-edit-radius-default));
+    cursor: text;
+    color: inherit;
+    font: inherit;
+    transition: background-color var(--a-duration-fast) var(--a-easing-out);
+    /* Make sure focus-visible outline can land on us (we set tabindex=0) */
+    outline-offset: 2px;
+  }
+
+  /* Hover affordance — subtle bg tint so the user sees this IS editable.
+     Suppressed when disabled / readonly / already editing. */
+  :scope:not([editing]):not([disabled]):not([readonly]):hover {
+    background: var(--inline-edit-bg-hover, var(--inline-edit-bg-hover-default));
+  }
+
+  /* Editing state — flat background + accent outline for focus clarity */
+  :scope[editing] {
+    background: var(--inline-edit-bg-edit, var(--inline-edit-bg-edit-default));
+    outline: 2px solid var(--inline-edit-outline, var(--inline-edit-outline-default));
+    outline-offset: 0;
+    cursor: text;
+  }
+
+  /* Empty-value placeholder — show the [placeholder] attr as faint text
+     when the host has no text content + isn't being edited. */
+  :scope:empty:not([editing])::before {
+    content: attr(placeholder);
+    color: var(--inline-edit-placeholder, var(--inline-edit-placeholder-default));
+    font-style: italic;
+  }
+
+  :scope[disabled],
+  :scope[readonly] {
+    cursor: default;
+    opacity: 0.6;
+  }
+
+  :scope[disabled] {
+    pointer-events: none;
+  }
+}