diff --git a/2nd-gen/packages/core/controllers/index.ts b/2nd-gen/packages/core/controllers/index.ts
index 71efb81b073..fd9b34e7ee0 100644
--- a/2nd-gen/packages/core/controllers/index.ts
+++ b/2nd-gen/packages/core/controllers/index.ts
@@ -25,3 +25,10 @@ export {
   LanguageResolutionController,
   languageResolverUpdatedSymbol,
 } from './language-resolution.js';
+export {
+  hasNativeReferenceTarget,
+  ReferenceTargetController,
+  referenceTargetUpdatedSymbol,
+  type ForwardableAttribute,
+  type ReferenceTargetOptions,
+} from './reference-target-controller/index.js';
diff --git a/2nd-gen/packages/core/controllers/reference-target-controller/index.ts b/2nd-gen/packages/core/controllers/reference-target-controller/index.ts
new file mode 100644
index 00000000000..2ce64d762cf
--- /dev/null
+++ b/2nd-gen/packages/core/controllers/reference-target-controller/index.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export {
+  hasNativeReferenceTarget,
+  ReferenceTargetController,
+  referenceTargetUpdatedSymbol,
+  type ForwardableAttribute,
+  type ReferenceTargetOptions,
+} from './src/reference-target-controller.js';
diff --git a/2nd-gen/packages/core/controllers/reference-target-controller/src/reference-target-controller.ts b/2nd-gen/packages/core/controllers/reference-target-controller/src/reference-target-controller.ts
new file mode 100644
index 00000000000..efda7dbfeec
--- /dev/null
+++ b/2nd-gen/packages/core/controllers/reference-target-controller/src/reference-target-controller.ts
@@ -0,0 +1,433 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import type { ReactiveController, ReactiveElement } from 'lit';
+
+/**
+ * Symbol used as the `requestUpdate` change key when the controller
+ * syncs a new relationship onto the shadow target. Host elements can
+ * react to this in `willUpdate` or `updated`.
+ */
+export const referenceTargetUpdatedSymbol = Symbol('reference target updated');
+
+/**
+ * ARIA relationship attributes that the shim can forward. Phase 1 of the
+ * native `referenceTarget` proposal covers all IDREF attributes; this POC
+ * focuses on the labelling and description subset that SWC components need.
+ */
+export type ForwardableAttribute =
+  | 'aria-labelledby'
+  | 'aria-describedby'
+  | 'aria-errormessage'
+  | 'aria-details';
+
+/**
+ * Mapping from a forwarded attribute name to the materialized
+ * string-value attribute set on the shadow target when true cross-root
+ * IDREF resolution is impossible.
+ */
+const MATERIALIZED_ATTR: Record<ForwardableAttribute, string> = {
+  'aria-labelledby': 'aria-label',
+  'aria-describedby': 'aria-description',
+  'aria-errormessage': 'aria-description',
+  'aria-details': 'aria-details',
+};
+
+export interface ReferenceTargetOptions {
+  /**
+   * The shadow-internal element that should act as the reference target.
+   * Accepts a CSS selector resolved against the host's shadow root, or
+   * a callback that returns the element directly.
+   */
+  target: string | (() => HTMLElement | null);
+
+  /**
+   * Attributes to forward from light-DOM referrers to the shadow target.
+   * Defaults to `['aria-labelledby', 'aria-describedby']`.
+   */
+  forwardedAttributes?: ForwardableAttribute[];
+}
+
+/**
+ * Checks whether the browser natively supports `ShadowRoot.referenceTarget`.
+ */
+export function hasNativeReferenceTarget(): boolean {
+  return 'referenceTarget' in ShadowRoot.prototype;
+}
+
+/**
+ * Reactive controller that approximates the behavior of the
+ * [Reference Target for Cross-Root ARIA](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md)
+ * proposal.
+ *
+ * When native `referenceTarget` is unavailable, the controller observes
+ * light-DOM elements whose IDREF attributes point at the host and
+ * materializes equivalent accessible text or relationships on the
+ * shadow-internal target element.
+ *
+ * Lifecycle handled: connect, disconnect, host `id` changes, referrer
+ * attribute mutations, and referrer addition/removal from the DOM.
+ */
+export class ReferenceTargetController implements ReactiveController {
+  private host: ReactiveElement;
+  private options: Required<ReferenceTargetOptions>;
+
+  private lightDomObserver: MutationObserver | null = null;
+  private hostIdObserver: MutationObserver | null = null;
+  private connected = false;
+
+  /**
+   * Tracks the last value written for each materialized attribute so
+   * the controller can detect true changes and avoid redundant DOM writes.
+   */
+  private lastSynced = new Map<string, string>();
+
+  constructor(host: ReactiveElement, options: ReferenceTargetOptions) {
+    this.host = host;
+    this.options = {
+      target: options.target,
+      forwardedAttributes: options.forwardedAttributes ?? [
+        'aria-labelledby',
+        'aria-describedby',
+      ],
+    };
+    this.host.addController(this);
+  }
+
+  // ──────────────────────────────────────────────────
+  //  Lifecycle
+  // ──────────────────────────────────────────────────
+
+  hostConnected(): void {
+    this.connected = true;
+
+    if (hasNativeReferenceTarget()) {
+      this.applyNative();
+      return;
+    }
+
+    this.observeHostId();
+    this.observeLightDom();
+    this.sync();
+  }
+
+  hostDisconnected(): void {
+    this.connected = false;
+    this.lightDomObserver?.disconnect();
+    this.lightDomObserver = null;
+    this.hostIdObserver?.disconnect();
+    this.hostIdObserver = null;
+    this.clearMaterialized();
+  }
+
+  hostUpdated(): void {
+    if (!this.connected) {
+      return;
+    }
+
+    if (hasNativeReferenceTarget()) {
+      this.applyNative();
+      return;
+    }
+
+    this.sync();
+  }
+
+  // ──────────────────────────────────────────────────
+  //  Native path
+  // ──────────────────────────────────────────────────
+
+  private applyNative(): void {
+    const target = this.resolveTarget();
+    if (!target) {
+      return;
+    }
+
+    const shadowRoot = this.host.shadowRoot;
+    if (!shadowRoot) {
+      return;
+    }
+
+    (shadowRoot as ShadowRoot & { referenceTarget: string }).referenceTarget =
+      target.id || '';
+  }
+
+  // ──────────────────────────────────────────────────
+  //  Shim path
+  // ──────────────────────────────────────────────────
+
+  /**
+   * The main synchronization routine. For each forwarded attribute,
+   * finds light-DOM elements referencing the host by ID, reads their
+   * text content, and materializes it on the shadow target.
+   */
+  sync(): void {
+    const target = this.resolveTarget();
+    if (!target) {
+      return;
+    }
+
+    const hostId = this.host.id;
+    if (!hostId) {
+      return;
+    }
+
+    const root = this.host.getRootNode() as Document | ShadowRoot;
+
+    for (const attr of this.options.forwardedAttributes) {
+      const referrers = this.findReferrers(root, hostId, attr);
+      const text = this.collectText(referrers, attr);
+      const materializedAttr = MATERIALIZED_ATTR[attr];
+
+      const previous = this.lastSynced.get(attr);
+      if (text === previous) {
+        continue;
+      }
+
+      if (text) {
+        target.setAttribute(materializedAttr, text);
+      } else {
+        target.removeAttribute(materializedAttr);
+      }
+      this.lastSynced.set(attr, text);
+    }
+
+    this.host.requestUpdate(referenceTargetUpdatedSymbol, undefined);
+  }
+
+  /**
+   * Finds all elements in the given root whose `attr` value includes
+   * `hostId` as one of the space-separated IDREF tokens.
+   */
+  private findReferrers(
+    root: Document | ShadowRoot,
+    hostId: string,
+    attr: ForwardableAttribute
+  ): HTMLElement[] {
+    const candidates = root.querySelectorAll<HTMLElement>(`[${attr}]`);
+    const referrers: HTMLElement[] = [];
+    for (const el of candidates) {
+      const ids = el.getAttribute(attr)?.split(/\s+/) ?? [];
+      if (ids.includes(hostId)) {
+        referrers.push(el);
+      }
+    }
+    return referrers;
+  }
+
+  /**
+   * For `aria-labelledby` and `aria-describedby`, collects text content
+   * from the full IDREF list on each referrer (not just the host token).
+   * This matches the spec behavior where `aria-labelledby="id1 id2"`
+   * concatenates the text of both referenced elements.
+   *
+   * For other attributes, collects only the text of the referrer itself.
+   */
+  private collectText(
+    referrers: HTMLElement[],
+    attr: ForwardableAttribute
+  ): string {
+    if (referrers.length === 0) {
+      return '';
+    }
+
+    if (attr === 'aria-labelledby' || attr === 'aria-describedby') {
+      const texts: string[] = [];
+      for (const referrer of referrers) {
+        const text = this.resolveIdrefText(referrer, attr);
+        if (text) {
+          texts.push(text);
+        }
+      }
+      return texts.join(' ');
+    }
+
+    return referrers
+      .map((el) => el.textContent?.trim() ?? '')
+      .filter(Boolean)
+      .join(' ');
+  }
+
+  /**
+   * Given an element with an IDREF-list attribute (e.g. `aria-labelledby`),
+   * resolves the text content of each referenced ID element except the host
+   * itself (since the host's text is what we're computing *for*).
+   */
+  private resolveIdrefText(
+    referrer: HTMLElement,
+    attr: ForwardableAttribute
+  ): string {
+    const root = referrer.getRootNode() as Document | ShadowRoot;
+    const ids = referrer.getAttribute(attr)?.split(/\s+/) ?? [];
+    const hostId = this.host.id;
+    const parts: string[] = [];
+
+    for (const id of ids) {
+      if (id === hostId) {
+        continue;
+      }
+      const el = root.getElementById
+        ? root.getElementById(id)
+        : root.querySelector(`#${CSS.escape(id)}`);
+      if (el) {
+        const text = el.textContent?.trim();
+        if (text) {
+          parts.push(text);
+        }
+      }
+    }
+
+    if (parts.length === 0) {
+      const directText = referrer.textContent?.trim();
+      if (directText) {
+        return directText;
+      }
+    }
+
+    return parts.join(' ');
+  }
+
+  /**
+   * For `<label for="host-id">` associations, finds the label element
+   * and applies its text as `aria-label` on the shadow target, plus
+   * wires up click-to-focus.
+   */
+  syncLabelFor(): void {
+    const target = this.resolveTarget();
+    if (!target) {
+      return;
+    }
+
+    const hostId = this.host.id;
+    if (!hostId) {
+      return;
+    }
+
+    const root = this.host.getRootNode() as Document | ShadowRoot;
+    const label = root.querySelector<HTMLLabelElement>(
+      `label[for="${CSS.escape(hostId)}"]`
+    );
+
+    if (label) {
+      const text = label.textContent?.trim() ?? '';
+      if (text) {
+        target.setAttribute('aria-label', text);
+      }
+      label.addEventListener('click', this.handleLabelClick);
+    }
+  }
+
+  private handleLabelClick = (): void => {
+    const target = this.resolveTarget();
+    if (target && 'focus' in target) {
+      (target as HTMLElement).focus();
+    }
+  };
+
+  // ──────────────────────────────────────────────────
+  //  Target resolution
+  // ──────────────────────────────────────────────────
+
+  resolveTarget(): HTMLElement | null {
+    const { target } = this.options;
+    if (typeof target === 'function') {
+      return target();
+    }
+
+    const shadowRoot = this.host.shadowRoot;
+    if (!shadowRoot) {
+      return null;
+    }
+    return shadowRoot.querySelector<HTMLElement>(target);
+  }
+
+  // ──────────────────────────────────────────────────
+  //  Observers
+  // ──────────────────────────────────────────────────
+
+  private observeHostId(): void {
+    this.hostIdObserver?.disconnect();
+    this.hostIdObserver = new MutationObserver(() => {
+      this.sync();
+      this.syncLabelFor();
+    });
+    this.hostIdObserver.observe(this.host, {
+      attributes: true,
+      attributeFilter: ['id'],
+    });
+  }
+
+  /**
+   * Observes the light DOM root for attribute mutations on elements
+   * that reference the host, and for child additions/removals that
+   * could add or remove referrers.
+   */
+  private observeLightDom(): void {
+    this.lightDomObserver?.disconnect();
+    const root = this.host.getRootNode() as Document | ShadowRoot;
+    const observeTarget =
+      root instanceof ShadowRoot
+        ? root
+        : root instanceof Document
+          ? root.body
+          : root;
+
+    this.lightDomObserver = new MutationObserver((mutations) => {
+      let needsSync = false;
+      for (const m of mutations) {
+        if (m.type === 'attributes') {
+          const attrName = m.attributeName ?? '';
+          if (
+            this.options.forwardedAttributes.includes(
+              attrName as ForwardableAttribute
+            ) ||
+            attrName === 'for'
+          ) {
+            needsSync = true;
+            break;
+          }
+        }
+        if (m.type === 'childList') {
+          needsSync = true;
+          break;
+        }
+      }
+      if (needsSync) {
+        this.sync();
+        this.syncLabelFor();
+      }
+    });
+
+    this.lightDomObserver.observe(observeTarget, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: [...this.options.forwardedAttributes, 'for', 'id'],
+    });
+  }
+
+  // ──────────────────────────────────────────────────
+  //  Cleanup
+  // ──────────────────────────────────────────────────
+
+  private clearMaterialized(): void {
+    const target = this.resolveTarget();
+    if (!target) {
+      return;
+    }
+
+    for (const attr of this.options.forwardedAttributes) {
+      target.removeAttribute(MATERIALIZED_ATTR[attr]);
+    }
+    this.lastSynced.clear();
+  }
+}
diff --git a/2nd-gen/packages/core/controllers/reference-target-controller/stories/demo-hosts.ts b/2nd-gen/packages/core/controllers/reference-target-controller/stories/demo-hosts.ts
new file mode 100644
index 00000000000..001cf057959
--- /dev/null
+++ b/2nd-gen/packages/core/controllers/reference-target-controller/stories/demo-hosts.ts
@@ -0,0 +1,135 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { css, html, LitElement, type TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import {
+  type ForwardableAttribute,
+  ReferenceTargetController,
+} from '../index.js';
+
+/**
+ * A demo custom element wrapping a text input inside shadow DOM.
+ * The `ReferenceTargetController` forwards labelling relationships
+ * from light DOM to the shadow-internal `<input>`.
+ *
+ * Usage:
+ * ```html
+ * <label for="my-input">Name</label>
+ * <demo-labeled-input id="my-input"></demo-labeled-input>
+ * ```
+ */
+export class DemoLabeledInput extends LitElement {
+  static override styles = css`
+    :host {
+      display: inline-block;
+    }
+    input {
+      font: inherit;
+      padding: 4px 8px;
+      border: 1px solid #767676;
+      border-radius: 4px;
+    }
+    input:focus {
+      outline: 2px solid #0265dc;
+      outline-offset: 1px;
+    }
+  `;
+
+  @property({ type: String }) value = '';
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  private refTarget = new ReferenceTargetController(this, {
+    target: '#internal-input',
+    forwardedAttributes: [
+      'aria-labelledby',
+      'aria-describedby',
+      'aria-errormessage',
+    ] as ForwardableAttribute[],
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.refTarget.syncLabelFor();
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <input
+        id="internal-input"
+        type="text"
+        .value=${this.value}
+        ?disabled=${this.disabled}
+        @input=${this.handleInput}
+      />
+    `;
+  }
+
+  private handleInput(event: Event): void {
+    this.value = (event.target as HTMLInputElement).value;
+    this.dispatchEvent(
+      new CustomEvent('change', { detail: this.value, bubbles: true })
+    );
+  }
+}
+
+/**
+ * A demo element that uses `aria-describedby` forwarding.
+ * The description element is in light DOM; the target input is in shadow DOM.
+ */
+export class DemoDescribedInput extends LitElement {
+  static override styles = css`
+    :host {
+      display: inline-block;
+    }
+    input {
+      font: inherit;
+      padding: 4px 8px;
+      border: 1px solid #767676;
+      border-radius: 4px;
+    }
+  `;
+
+  @property({ type: String }) value = '';
+
+  private refTarget = new ReferenceTargetController(this, {
+    target: '#described-input',
+    forwardedAttributes: [
+      'aria-labelledby',
+      'aria-describedby',
+    ] as ForwardableAttribute[],
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.refTarget.syncLabelFor();
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <input
+        id="described-input"
+        type="text"
+        .value=${this.value}
+        @input=${this.handleInput}
+      />
+    `;
+  }
+
+  private handleInput(event: Event): void {
+    this.value = (event.target as HTMLInputElement).value;
+  }
+}
+
+customElements.define('demo-labeled-input', DemoLabeledInput);
+customElements.define('demo-described-input', DemoDescribedInput);
diff --git a/2nd-gen/packages/core/controllers/reference-target-controller/stories/reference-target-controller.stories.ts b/2nd-gen/packages/core/controllers/reference-target-controller/stories/reference-target-controller.stories.ts
new file mode 100644
index 00000000000..a8bcda3d8c1
--- /dev/null
+++ b/2nd-gen/packages/core/controllers/reference-target-controller/stories/reference-target-controller.stories.ts
@@ -0,0 +1,170 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { html } from 'lit';
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import './demo-hosts.js';
+
+const meta: Meta = {
+  title: 'Controllers/Reference target (POC)',
+  tags: ['dev'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Proof-of-concept for a controller-based shim that approximates the
+[Reference Target for Cross-Root ARIA](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md)
+proposal. See the design note in \`research/reference-target-poc/DESIGN-NOTE.md\`.
+                `,
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj;
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Scenario A: <label for> forwarded to shadow-internal input
+// ──────────────────────────────────────────────────────────────────────────────
+
+export const LabelForForwarding: Story = {
+  name: 'Label for forwarding',
+  render: () => html`
+    <div
+      style="display: flex; flex-direction: column; gap: 8px; max-width: 300px;"
+    >
+      <p style="margin: 0; font-size: 14px; color: #555;">
+        The &lt;label for&gt; element in light DOM forwards its text as
+        <code>aria-label</code>
+        on the shadow-internal input.
+      </p>
+      <label for="labeled-input" style="font-weight: 600;">Full name</label>
+      <demo-labeled-input id="labeled-input"></demo-labeled-input>
+    </div>
+  `,
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Scenario B: aria-labelledby referencing the host
+// ──────────────────────────────────────────────────────────────────────────────
+
+export const AriaLabelledbyForwarding: Story = {
+  name: 'aria-labelledby forwarding',
+  render: () => html`
+    <div
+      style="display: flex; flex-direction: column; gap: 8px; max-width: 300px;"
+    >
+      <p style="margin: 0; font-size: 14px; color: #555;">
+        An external element uses
+        <code>aria-labelledby</code>
+        pointing at the host's ID. The controller materializes the label text on
+        the shadow-internal input as
+        <code>aria-label</code>
+        .
+      </p>
+      <span id="external-label" style="font-weight: 600;">Email address</span>
+      <demo-labeled-input
+        id="email-input"
+        aria-labelledby="external-label"
+      ></demo-labeled-input>
+    </div>
+  `,
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Scenario C: aria-describedby referencing the host
+// ──────────────────────────────────────────────────────────────────────────────
+
+export const AriaDescribedbyForwarding: Story = {
+  name: 'aria-describedby forwarding',
+  render: () => html`
+    <div
+      style="display: flex; flex-direction: column; gap: 8px; max-width: 300px;"
+    >
+      <p style="margin: 0; font-size: 14px; color: #555;">
+        A help-text element uses
+        <code>aria-describedby</code>
+        pointing at the host. The controller materializes the description on the
+        shadow-internal input.
+      </p>
+      <label for="password-input" style="font-weight: 600;">Password</label>
+      <demo-described-input id="password-input"></demo-described-input>
+      <span
+        id="password-help"
+        aria-describedby="password-input"
+        style="font-size: 12px; color: #666;"
+      >
+        Must be at least 8 characters
+      </span>
+    </div>
+  `,
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Scenario D: label click focuses the shadow-internal input
+// ──────────────────────────────────────────────────────────────────────────────
+
+export const LabelClickFocus: Story = {
+  name: 'Label click focuses input',
+  render: () => html`
+    <div
+      style="display: flex; flex-direction: column; gap: 8px; max-width: 300px;"
+    >
+      <p style="margin: 0; font-size: 14px; color: #555;">
+        Clicking the label focuses the shadow-internal input, mimicking native
+        <code>&lt;label for&gt;</code>
+        behavior across the shadow boundary.
+      </p>
+      <label for="focus-input" style="font-weight: 600; cursor: pointer;">
+        Click me to focus the input
+      </label>
+      <demo-labeled-input id="focus-input"></demo-labeled-input>
+    </div>
+  `,
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Scenario E: dynamic label update
+// ──────────────────────────────────────────────────────────────────────────────
+
+export const DynamicLabelUpdate: Story = {
+  name: 'Dynamic label update',
+  render: () => html`
+    <div
+      style="display: flex; flex-direction: column; gap: 8px; max-width: 400px;"
+    >
+      <p style="margin: 0; font-size: 14px; color: #555;">
+        Changing the label text re-syncs the accessible name on the
+        shadow-internal input. Click the button to toggle the label.
+      </p>
+      <label for="dynamic-input" id="dynamic-label" style="font-weight: 600;">
+        Original label
+      </label>
+      <demo-labeled-input id="dynamic-input"></demo-labeled-input>
+      <button
+        id="toggle-label-btn"
+        onclick="
+                    var label = this.closest('div').querySelector('#dynamic-label');
+                    if (label) {
+                        label.textContent = label.textContent === 'Original label'
+                            ? 'Updated label'
+                            : 'Original label';
+                    }
+                "
+      >
+        Toggle label text
+      </button>
+    </div>
+  `,
+};
diff --git a/2nd-gen/packages/core/controllers/reference-target-controller/test/reference-target-controller.test.ts b/2nd-gen/packages/core/controllers/reference-target-controller/test/reference-target-controller.test.ts
new file mode 100644
index 00000000000..781be77b093
--- /dev/null
+++ b/2nd-gen/packages/core/controllers/reference-target-controller/test/reference-target-controller.test.ts
@@ -0,0 +1,241 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { html } from 'lit';
+import { expect } from '@storybook/test';
+import type { Meta, StoryObj as Story } from '@storybook/web-components';
+
+import '../stories/demo-hosts.js';
+
+import { getComponent } from '../../../../swc/utils/test-utils.js';
+import type { DemoLabeledInput } from '../stories/demo-hosts.js';
+import storiesMeta, {
+  AriaDescribedbyForwarding,
+  AriaLabelledbyForwarding,
+  DynamicLabelUpdate,
+  LabelClickFocus,
+  LabelForForwarding,
+} from '../stories/reference-target-controller.stories.js';
+
+export default {
+  ...storiesMeta,
+  title: 'Controllers/Reference target (POC)/Tests',
+  parameters: {
+    ...storiesMeta.parameters,
+    docs: { disable: true, page: null },
+  },
+  tags: ['!autodocs', 'dev'],
+} as Meta;
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Test: <label for> materializes aria-label on shadow input
+// ──────────────────────────────────────────────────────────────────────────────
+
+export const LabelForMaterializesAriaLabel: Story = {
+  ...LabelForForwarding,
+  play: async ({ canvasElement, step }) => {
+    const host = await getComponent<DemoLabeledInput>(
+      canvasElement,
+      'demo-labeled-input'
+    );
+    const shadowInput = host.shadowRoot!.querySelector(
+      '#internal-input'
+    ) as HTMLInputElement;
+
+    await step(
+      'Shadow input has aria-label matching the label text',
+      async () => {
+        expect(shadowInput).toBeTruthy();
+        const ariaLabel = shadowInput.getAttribute('aria-label');
+        expect(ariaLabel).toBe('Full name');
+      }
+    );
+  },
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Test: aria-labelledby referencing host materializes on shadow input
+// ──────────────────────────────────────────────────────────────────────────────
+
+export const AriaLabelledbyMaterializes: Story = {
+  ...AriaLabelledbyForwarding,
+  play: async ({ canvasElement, step }) => {
+    const host = await getComponent<DemoLabeledInput>(
+      canvasElement,
+      'demo-labeled-input'
+    );
+    const shadowInput = host.shadowRoot!.querySelector(
+      '#internal-input'
+    ) as HTMLInputElement;
+
+    await step(
+      'Shadow input has aria-label from labelledby reference',
+      async () => {
+        expect(shadowInput).toBeTruthy();
+        const ariaLabel = shadowInput.getAttribute('aria-label');
+        expect(ariaLabel).toBe('Email address');
+      }
+    );
+  },
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Test: aria-describedby referencing host materializes on shadow input
+// ──────────────────────────────────────────────────────────────────────────────
+
+export const AriaDescribedbyMaterializes: Story = {
+  ...AriaDescribedbyForwarding,
+  play: async ({ canvasElement, step }) => {
+    const host = canvasElement.querySelector(
+      'demo-described-input'
+    ) as HTMLElement;
+    if ('updateComplete' in host) {
+      await (host as { updateComplete: Promise<boolean> }).updateComplete;
+    }
+    const shadowInput = host.shadowRoot!.querySelector(
+      '#described-input'
+    ) as HTMLInputElement;
+
+    await step(
+      'Shadow input has aria-description from describedby reference',
+      async () => {
+        expect(shadowInput).toBeTruthy();
+        const ariaDesc = shadowInput.getAttribute('aria-description');
+        expect(ariaDesc).toBe('Must be at least 8 characters');
+      }
+    );
+  },
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Test: clicking label focuses shadow-internal input
+// ──────────────────────────────────────────────────────────────────────────────
+
+export const LabelClickFocusesShadowInput: Story = {
+  ...LabelClickFocus,
+  play: async ({ canvasElement, step }) => {
+    const host = await getComponent<DemoLabeledInput>(
+      canvasElement,
+      'demo-labeled-input'
+    );
+    const shadowInput = host.shadowRoot!.querySelector(
+      '#internal-input'
+    ) as HTMLInputElement;
+    const label = canvasElement.querySelector(
+      'label[for="focus-input"]'
+    ) as HTMLLabelElement;
+
+    await step(
+      'Clicking the label focuses the shadow-internal input',
+      async () => {
+        expect(label).toBeTruthy();
+        expect(shadowInput).toBeTruthy();
+
+        label.click();
+
+        await new Promise((r) => requestAnimationFrame(r));
+
+        const activeEl = host.shadowRoot!.activeElement;
+        expect(activeEl).toBe(shadowInput);
+      }
+    );
+  },
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Test: disconnect clears materialized attributes
+// ──────────────────────────────────────────────────────────────────────────────
+
+export const DisconnectClearsMaterialized: Story = {
+  ...LabelForForwarding,
+  play: async ({ canvasElement, step }) => {
+    const host = await getComponent<DemoLabeledInput>(
+      canvasElement,
+      'demo-labeled-input'
+    );
+    const shadowInput = host.shadowRoot!.querySelector(
+      '#internal-input'
+    ) as HTMLInputElement;
+
+    await step(
+      'After disconnect, materialized aria-label is removed',
+      async () => {
+        expect(shadowInput.getAttribute('aria-label')).toBe('Full name');
+
+        host.remove();
+        await new Promise((r) => requestAnimationFrame(r));
+
+        expect(shadowInput.getAttribute('aria-label')).toBeNull();
+      }
+    );
+  },
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Test: dynamic label text re-syncs
+// ──────────────────────────────────────────────────────────────────────────────
+
+export const DynamicLabelResyncs: Story = {
+  ...DynamicLabelUpdate,
+  play: async ({ canvasElement, step }) => {
+    const host = await getComponent<DemoLabeledInput>(
+      canvasElement,
+      'demo-labeled-input'
+    );
+    const shadowInput = host.shadowRoot!.querySelector(
+      '#internal-input'
+    ) as HTMLInputElement;
+    const toggleButton = canvasElement.querySelector(
+      'button'
+    ) as HTMLButtonElement;
+
+    await step(
+      'Label text change is reflected on the shadow input',
+      async () => {
+        expect(shadowInput.getAttribute('aria-label')).toBe('Original label');
+
+        toggleButton.click();
+        await new Promise((r) => setTimeout(r, 100));
+
+        expect(shadowInput.getAttribute('aria-label')).toBe('Updated label');
+      }
+    );
+  },
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Test: host without id does not crash
+// ──────────────────────────────────────────────────────────────────────────────
+
+export const HostWithoutId: Story = {
+  render: () => html`
+    <div>
+      <label>No-id host</label>
+      <demo-labeled-input></demo-labeled-input>
+    </div>
+  `,
+  play: async ({ canvasElement, step }) => {
+    const host = canvasElement.querySelector(
+      'demo-labeled-input'
+    ) as DemoLabeledInput;
+    if ('updateComplete' in host) {
+      await (host as { updateComplete: Promise<boolean> }).updateComplete;
+    }
+    const shadowInput = host.shadowRoot!.querySelector(
+      '#internal-input'
+    ) as HTMLInputElement;
+
+    await step('Host without id does not set spurious attributes', async () => {
+      expect(shadowInput).toBeTruthy();
+      expect(shadowInput.getAttribute('aria-label')).toBeNull();
+    });
+  },
+};
diff --git a/2nd-gen/packages/core/package.json b/2nd-gen/packages/core/package.json
index 86b4009e996..4f8e5dc2f25 100644
--- a/2nd-gen/packages/core/package.json
+++ b/2nd-gen/packages/core/package.json
@@ -75,6 +75,10 @@
       "types": "./dist/controllers/language-resolution.d.ts",
       "import": "./dist/controllers/language-resolution.js"
     },
+    "./controllers/reference-target-controller": {
+      "types": "./dist/controllers/reference-target-controller/index.d.ts",
+      "import": "./dist/controllers/reference-target-controller/index.js"
+    },
     "./element": {
       "types": "./dist/element/index.d.ts",
       "import": "./dist/element/index.js"
@@ -190,6 +194,9 @@
       "controllers/language-resolution.js": [
         "dist/controllers/language-resolution.d.ts"
       ],
+      "controllers/reference-target-controller": [
+        "dist/controllers/reference-target-controller/index.d.ts"
+      ],
       "element": [
         "dist/element/index.d.ts"
       ],
diff --git a/research/form-associated-ce-combobox-poc/SUMMARY.md b/research/form-associated-ce-combobox-poc/SUMMARY.md
new file mode 100644
index 00000000000..f05a2a436aa
--- /dev/null
+++ b/research/form-associated-ce-combobox-poc/SUMMARY.md
@@ -0,0 +1,493 @@
+# Form-associated custom element PoC: combobox with ElementInternals
+
+> Research artifact for the 2nd-gen forms strategy.
+> Blocks: direction PR | Parallel with: text-field ElementInternals PoC
+
+## Demo
+
+**StackBlitz:** [Open live demo](https://stackblitz.com/github/adobe/spectrum-web-components/tree/rajdeepchandra/chore-face-combobox-poc/research/form-associated-ce-combobox-poc?file=index.html)
+
+Or open `index.html` locally in any browser (no build step required).
+axe-core loads from CDN on demand when you click the audit button.
+
+---
+
+## Automated test results (Chrome headless)
+
+| Test                          | Expected                         | Actual                                      | Status |
+| ----------------------------- | -------------------------------- | ------------------------------------------- | ------ |
+| 1a Submit                     | FormData includes fruit          | fruit: "Apple"                              | Pass   |
+| 1a Reset                      | Restores to Apple                | formResetCallback: PASS                     | Pass   |
+| 1b Empty required             | valueMissing: true               | Correctly rejected                          | Pass   |
+| 1b Valid selection            | validity.valid: true             | Accepted                                    | Pass   |
+| 1c Disabled fieldset          | Field excluded from FormData     | FormData: NO (correct)                      | Pass   |
+| 1d Submit with open listbox   | Captures current input value     | Value matches regardless of open state      | Pass   |
+| 2a ArrowDown/Up navigation    | activeIndex updates              | activedescendant cycles through options     | Pass   |
+| 2a Enter selects              | Selected value in input          | Input populated, listbox closed             | Pass   |
+| 2a Escape closes              | Listbox closes                   | aria-expanded false, activedescendant reset | Pass   |
+| 2a Home/End                   | Jump to first/last               | Active index moves to boundary              | Pass   |
+| 3A Light DOM siblings         | Name = "Timezone"                | `aria-label` on shadow input                | Pass   |
+| 3B Slotted children           | Name = "Department"              | `aria-label` on shadow input via slotchange | Pass   |
+| 3C Shadow internal            | Name = "Search category"         | Shadow-scoped `aria-labelledby` on input    | Pass   |
+| 3D Cross-root label-for       | Click label focuses field + name | Focus: pass; name via implicit label        | Pass   |
+| 4a activedescendant in shadow | Points at shadow-scoped option   | Resolves within shadow root                 | Pass   |
+| 4b aria-controls relationship | Input controls listbox           | Both in same shadow root; resolves          | Pass   |
+| 4c Validation + errormessage  | Required rejection + error shown | setValidity + aria-errormessage exposed     | Pass   |
+| 5a internals.ariaLabel        | Exposes name in a11y tree        | "Search via internals" on shadow input      | Pass   |
+| 5a host aria-label            | Exposes name in a11y tree        | "Search via host attribute" on shadow input | Pass   |
+| 5b ariaExpanded on internals  | Expanded state announced         | Host attribute + internals both set         | Pass   |
+| 6 axe-core                    | Audit runs, results shown        | See axe findings section                    | Pass   |
+
+---
+
+## Critical research findings
+
+### 1. `aria-activedescendant` works within shadow root boundaries
+
+Unlike cross-root IDREF scenarios, `aria-activedescendant` on a shadow input pointing at option elements within the same shadow root resolves correctly across all tested browsers. This is because both the combobox input and the listbox options share the same tree scope. **This is the recommended pattern**: keep the input and listbox co-located in the same shadow root.
+
+### 2. `aria-controls` resolves within shadow scope
+
+The input's `aria-controls` attribute pointing at a shadow-scoped listbox ID works correctly. The a11y tree shows the ownership relationship. This matches the text-field PoC finding that same-scope IDREFs are reliable.
+
+### 3. `internals.ariaExpanded` supplements but does not replace host attributes
+
+Setting `internals.ariaExpanded` updates the host's a11y node, but screen readers that focus the shadow input need `aria-expanded` on the input itself. The PoC uses a dual-write strategy: both `internals.ariaExpanded` and the shadow input's `aria-expanded` are kept in sync. This parallels the text-field finding about `internals.ariaLabel`.
+
+### 4. Popup dismissal during form submit
+
+When the listbox is open and the user presses Enter on an active option, the combobox correctly captures the selection and closes the popup before form submission occurs. The form always sees the current input value via `setFormValue()`, regardless of popup state.
+
+### 5. `delegatesFocus` and popup interaction
+
+`delegatesFocus: true` correctly routes focus to the shadow input when the host is focused (including via `<label for>`). However, clicking the trigger button (which is also in the shadow root) does not cause the host to lose focus, because `delegatesFocus` keeps the shadow root's focused element. This is correct behavior for a combobox.
+
+---
+
+## 1. Does native form submission and reset see the control's value?
+
+### FormData
+
+| Behavior                                           | Result                         | Notes                                                                     |
+| -------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------- |
+| `FormData` includes field name and value on submit | Pass (Chrome, Firefox, Safari) | `setFormValue()` called on every input change and option selection        |
+| Multiple FACE comboboxes in one form               | Pass                           | Each name appears as a separate entry                                     |
+| Disabled FACE comboboxes excluded from FormData    | Pass                           | `formDisabledCallback` fires; matches native `<select disabled>` behavior |
+| Submit with open vs closed listbox                 | Pass                           | `FormData` always reflects the current input value                        |
+
+### Reset
+
+| Behavior                                      | Result | Notes                                                        |
+| --------------------------------------------- | ------ | ------------------------------------------------------------ |
+| `formResetCallback()` fires on `<form>` reset | Pass   | Restores to the `value` attribute (initial value), not empty |
+| Internal input reflects reset value           | Pass   | Also closes the listbox and clears active descendant         |
+
+### Constraint validation
+
+| Behavior                                                         | Result                 | Notes                                                      |
+| ---------------------------------------------------------------- | ---------------------- | ---------------------------------------------------------- |
+| `required` prevents empty submit (`valueMissing`)                | Pass                   | `setValidity()` checks trimmed input value                 |
+| Custom validity via `setValidity({ valueMissing }, msg, anchor)` | Pass                   | Anchor positions the browser tooltip near the shadow input |
+| `reportValidity()` shows browser tooltip                         | Pass (Chrome, Firefox) | Safari shows tooltip inconsistently for custom elements    |
+| `checkValidity()` returns boolean without UI                     | Pass                   | Matches native API                                         |
+
+### State restoration
+
+| Behavior                                           | Result        | Notes                                              |
+| -------------------------------------------------- | ------------- | -------------------------------------------------- |
+| `formStateRestoreCallback()` fires on back/forward | Pass (Chrome) | Firefox behavior may vary; Safari support is newer |
+
+### Comparison with a plain `<select>`
+
+| Behavior                    | `<select>` | FACE combobox | Notes                                                    |
+| --------------------------- | ---------- | ------------- | -------------------------------------------------------- |
+| FormData participation      | Native     | Pass          | Equivalent via `setFormValue()`                          |
+| Reset                       | Native     | Pass          | `formResetCallback` restores initial value               |
+| Disabled via `<fieldset>`   | Native     | Pass          | `formDisabledCallback` fires automatically               |
+| Free-text entry             | No         | Yes           | Combobox allows typing values not in the list            |
+| Constraint validation UI    | Native     | Pass          | `reportValidity()` shows tooltip; Safari less consistent |
+| State restoration (bfcache) | Native     | Pass (Chrome) | Browser support varies for custom element state restore  |
+
+### Summary
+
+**Form participation works well.** The combobox behaves equivalently to the text-field PoC: `setFormValue()` + `setValidity()` give native-equivalent form behavior. The combobox adds one nuance: the listbox must close on reset, and submit should capture the current value regardless of popup state. Both work correctly.
+
+---
+
+## 2. Keyboard interaction expectations
+
+### APG combobox pattern compliance
+
+| Key       | Expected behavior                                 | Result | Notes                                                        |
+| --------- | ------------------------------------------------- | ------ | ------------------------------------------------------------ |
+| ArrowDown | Open listbox (if closed); move active to next     | Pass   | Wraps from last to first                                     |
+| ArrowUp   | Open listbox (if closed); move active to previous | Pass   | Wraps from first to last                                     |
+| Enter     | Select active option and close listbox            | Pass   | Does not submit form when listbox is open with active option |
+| Escape    | Close listbox without selecting                   | Pass   | Clears `aria-activedescendant`                               |
+| Home      | Move active to first option                       | Pass   | Only when listbox is open                                    |
+| End       | Move active to last option                        | Pass   | Only when listbox is open                                    |
+| Tab       | Close listbox and move focus to next element      | Pass   | Standard focus management                                    |
+| Typing    | Filter options; open listbox                      | Pass   | Case-insensitive substring match                             |
+
+### `aria-activedescendant` behavior
+
+| Aspect                                    | Result | Notes                                                              |
+| ----------------------------------------- | ------ | ------------------------------------------------------------------ |
+| Set on shadow input, points to shadow opt | Pass   | Same-scope IDREF; resolves in all browsers                         |
+| Removed when listbox closes               | Pass   | Prevents stale references in the a11y tree                         |
+| Updates on every arrow key press          | Pass   | Screen readers should announce the new active option               |
+| Scroll into view for off-screen options   | Pass   | `scrollIntoView({ block: 'nearest' })` keeps active option visible |
+
+### Gaps vs native `<select>` keyboard behavior
+
+| Behavior                  | Native `<select>` | FACE combobox   | Notes                                                      |
+| ------------------------- | ----------------- | --------------- | ---------------------------------------------------------- |
+| Type-ahead (first-letter) | Yes               | Via filtering   | Combobox filters instead of jumping; acceptable difference |
+| Alt+ArrowDown opens       | Some browsers     | Not implemented | Could be added; not required by APG                        |
+| Multiple selection        | With `multiple`   | Not in scope    | Single-select combobox pattern only                        |
+
+---
+
+## 3. IDREF matrix: does the accessibility tree resolve relationships?
+
+### Scenario A: light DOM label and help as siblings
+
+IDs on elements _outside_ the component, referenced via `aria-labelledby` / `aria-describedby` on the host.
+
+| Aspect                                           | Chrome    | Firefox       | Safari    | Notes                                                                                  |
+| ------------------------------------------------ | --------- | ------------- | --------- | -------------------------------------------------------------------------------------- |
+| `aria-labelledby` resolves to light DOM sibling  | Pass      | Pass          | Pass      | Host attributes referencing light DOM IDs work because both are in the same tree scope |
+| `aria-describedby` resolves to light DOM sibling | Pass      | Pass          | Pass      | Same tree scope; no cross-root issue                                                   |
+| Screen reader announces label                    | Pass (VO) | Verify (NVDA) | Pass (VO) | VoiceOver reads "Timezone, combo box"                                                  |
+| Screen reader announces description              | Pass (VO) | Verify (NVDA) | Pass (VO) | VoiceOver reads help text after a pause                                                |
+
+**Conclusion:** Same as text-field PoC. **Recommended primary pattern.**
+
+### Scenario B: IDs on slotted light DOM children
+
+Consumer projects content into the component via `<slot>`. IDs live on the slotted elements.
+
+| Aspect                                      | Chrome             | Firefox | Safari  | Notes                                        |
+| ------------------------------------------- | ------------------ | ------- | ------- | -------------------------------------------- |
+| Slotted label ID resolvable from light DOM  | Pass               | Pass    | Pass    | Slotted elements stay in the light DOM tree  |
+| `ariaLabelledByElements` (element ref API)  | Pass (Chrome 130+) | Partial | Not yet | Chrome-only element reference API            |
+| Shadow input `aria-labelledby` → slotted ID | Fail               | Fail    | Fail    | Shadow input cannot reference a light DOM ID |
+| Workaround: `aria-label` on shadow input    | Pass               | Pass    | Pass    | String fallback from slotted label text      |
+
+**Conclusion:** Same as text-field PoC. Use host-level ARIA or string fallback on the shadow input.
+
+### Scenario C: IDs inside shadow DOM (internal wiring)
+
+Label and help text rendered _inside_ the shadow root.
+
+| Aspect                                            | Chrome | Firefox | Safari | Notes                                                 |
+| ------------------------------------------------- | ------ | ------- | ------ | ----------------------------------------------------- |
+| Shadow input `aria-labelledby` → shadow-scoped ID | Pass   | Pass    | Pass   | Both elements share the same shadow root scope        |
+| Shadow input `aria-controls` → shadow listbox ID  | Pass   | Pass    | Pass   | **Combobox-specific:** controls relationship resolves |
+| `aria-activedescendant` → shadow option ID        | Pass   | Pass    | Pass   | **Combobox-specific:** active option announced        |
+| Light DOM element referencing shadow ID           | Fail   | Fail    | Fail   | Expected: shadow IDs are encapsulated                 |
+
+**Conclusion:** Shadow-internal wiring works for all combobox-specific relationships. `aria-controls`, `aria-activedescendant`, and `aria-labelledby` all resolve within the same shadow scope. **This is the key win for combobox patterns**: keeping the input and listbox in the same shadow root avoids the hardest cross-root problems.
+
+### Scenario D: cross-root; light DOM `<label for>` targeting the host
+
+| Aspect                                          | Chrome       | Firefox       | Safari       | Notes                                                    |
+| ----------------------------------------------- | ------------ | ------------- | ------------ | -------------------------------------------------------- |
+| Clicking the label focuses the shadow input     | Pass         | Pass          | Pass         | `delegatesFocus` forwards focus                          |
+| Label's `for` creates implicit accessible name  | Partial      | Partial       | Partial      | Same inconsistency as text-field PoC                     |
+| Screen reader announces the label when focusing | Partial (VO) | Verify (NVDA) | Partial (VO) | VoiceOver may or may not announce, depending on fallback |
+
+**Conclusion:** Same as text-field PoC. Always pair with `ariaLabel` fallback.
+
+### IDREF matrix summary table
+
+| Scenario                | Label resolves    | Description resolves | activedescendant | controls/owns | Cross-browser | Recommended               |
+| ----------------------- | ----------------- | -------------------- | ---------------- | ------------- | ------------- | ------------------------- |
+| A: Light DOM siblings   | Pass              | Pass                 | N/A (use input)  | N/A           | Yes           | Yes (primary pattern)     |
+| B: Slotted children     | Pass (host-level) | Pass (host-level)    | N/A (use input)  | N/A           | Partial       | Yes, with string fallback |
+| C: Shadow internal      | Pass              | Pass                 | Pass             | Pass          | Yes           | Yes, for co-located DOM   |
+| D: Cross-root label-for | Partial           | N/A                  | N/A              | N/A           | No            | Pair with ARIA fallback   |
+
+---
+
+## 4. Combobox-specific shadow DOM findings
+
+### `aria-activedescendant` with shadow encapsulation
+
+This was the primary concern for the combobox PoC, because `aria-activedescendant` is an IDREF that must point at an element the input "owns."
+
+**Finding:** When the input and listbox options share the same shadow root, `aria-activedescendant` works identically to how it works in light DOM. The shadow boundary is not a problem because both elements are in the same tree scope.
+
+**Would fail if:** The listbox were rendered in a _different_ shadow root or in light DOM while the input stayed in the component's shadow root. This scenario is not recommended for SWC.
+
+### `aria-controls` / `aria-owns`
+
+| Attribute       | Same shadow root | Cross-root | Notes                                                            |
+| --------------- | ---------------- | ---------- | ---------------------------------------------------------------- |
+| `aria-controls` | Pass             | Fail       | Shadow input can reference shadow listbox ID, not a light DOM ID |
+| `aria-owns`     | Pass             | Fail       | Same behavior; both are IDREF attributes subject to tree scoping |
+
+**Recommendation:** Keep the input and listbox in the same shadow root. If a future design requires the popup to be in a different DOM scope (e.g., for z-index stacking in a portal pattern), `aria-owns` will not resolve cross-root and will need an element-reference workaround.
+
+### Popup visibility and `aria-expanded`
+
+| Aspect                             | Result | Notes                                                                  |
+| ---------------------------------- | ------ | ---------------------------------------------------------------------- |
+| `aria-expanded` on shadow input    | Pass   | Screen readers announce "collapsed" / "expanded" on the combobox input |
+| `internals.ariaExpanded` on host   | Pass   | Updates the host a11y node, but screen readers focus the shadow input  |
+| Both set simultaneously            | Pass   | Dual-write keeps both layers in sync                                   |
+| `open` attribute on host (for CSS) | Pass   | Used for styling; not read by screen readers                           |
+
+### Role structure
+
+| Element            | Role       | Location    | Notes                                             |
+| ------------------ | ---------- | ----------- | ------------------------------------------------- |
+| Host               | `group`    | Light DOM   | Groups the label, input, and listbox semantically |
+| Shadow input       | `combobox` | Shadow root | Primary interactive control                       |
+| Shadow listbox div | `listbox`  | Shadow root | Contains option elements                          |
+| Shadow option divs | `option`   | Shadow root | Individual selectable items                       |
+| Trigger button     | (implicit) | Shadow root | `tabindex="-1"`; not reachable via Tab            |
+
+---
+
+## 5. How should we use ARIA labelling and relationship APIs?
+
+### Same findings as text-field PoC (apply to combobox too)
+
+- **Host-level `aria-labelledby`/`aria-describedby`**: Work for light DOM IDREFs (scenarios A, B).
+- **Shadow-scoped `aria-labelledby`**: Works for within-shadow wiring (scenario C).
+- **`internals.ariaLabel`**: String fallback; works cross-browser.
+- **`ariaLabelledByElements`**: Chrome-only progressive enhancement.
+
+### Combobox-specific additions
+
+| API                        | Combobox usage                             | Scope requirement      | Notes                                                      |
+| -------------------------- | ------------------------------------------ | ---------------------- | ---------------------------------------------------------- |
+| `aria-activedescendant`    | Points at the currently highlighted option | Same shadow root       | Must be on the `combobox` role element (the input)         |
+| `aria-controls`            | Input declares ownership of the listbox    | Same shadow root       | Required by APG combobox pattern                           |
+| `aria-haspopup="listbox"`  | Indicates the input has a popup            | On the input itself    | Static attribute; set in template                          |
+| `aria-autocomplete="list"` | Indicates filtering behavior               | On the input itself    | Tells AT that the listbox filters as the user types        |
+| `aria-expanded`            | Open/close state of the popup              | On the input + trigger | Dual-write to input attribute and `internals.ariaExpanded` |
+
+### `aria-errormessage` for combobox
+
+Same as text-field PoC: works on the host referencing a light DOM error element. Pair with `internals.ariaInvalid` to toggle the invalid state. The error element should use `role="alert"` for screen reader announcement.
+
+---
+
+## 6. axe-core findings
+
+### Expected violations and behavior
+
+| axe rule                | Behavior                                           | Classification | Notes                                                                   |
+| ----------------------- | -------------------------------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `color-contrast`        | May flag help text / placeholder contrast          | True violation | Not FACE-specific; fix with darker text colors                          |
+| `label`                 | Should not flag if `ariaLabel` fallback is set     | Expected pass  | axe reads host attributes; `ariaLabel` via internals may not be visible |
+| `aria-input-field-name` | May flag shadow combobox input                     | Possible FP    | axe may not traverse shadow DOM for combobox name resolution            |
+| `aria-valid-attr-value` | Should pass when IDREFs resolve in same scope      | Expected pass  | `aria-controls` and `aria-activedescendant` point at same-scope IDs     |
+| `aria-required-attr`    | Should pass; combobox has required `aria-expanded` | Expected pass  | The input always has `aria-expanded` set                                |
+
+### axe-core and combobox-in-shadow compatibility
+
+Same limitations as the text-field PoC apply:
+
+- axe **can** traverse open shadow DOM.
+- axe **cannot** reliably read `ElementInternals` ARIA properties.
+- Combobox-specific: axe should be able to verify `aria-controls` → listbox ID resolution within the shadow root, since it traverses shadow DOM. The `aria-activedescendant` → option ID resolution should also work.
+- **New concern for combobox:** axe runs at a single point in time. If the listbox is closed when axe runs, `aria-activedescendant` will not be set (it is removed on close). axe should not flag this as a missing attribute; it is only set when the listbox is open and an option is active.
+
+---
+
+## 7. QA results: tree inspection, form submit, screen reader notes
+
+### Tree inspection (Chrome, Chromium-based browser automation)
+
+Verified via the accessibility tree snapshot of the live demo:
+
+| Element / field         | Role     | Accessible name           | Value (if set) | States                        | Status |
+| ----------------------- | -------- | ------------------------- | -------------- | ----------------------------- | ------ |
+| Favorite fruit          | combobox | Favorite fruit            | Apple          | collapsed                     | Pass   |
+| Country (required)      | combobox | Country (required)        |                | required, collapsed           | Pass   |
+| Disabled combobox       | combobox | Disabled combobox         | Cannot change  | disabled, readonly, collapsed | Pass   |
+| Color (after selecting) | combobox | Color                     | Blue           | collapsed                     | Pass   |
+| Timezone (scenario A)   | combobox | Timezone                  |                | collapsed                     | Pass   |
+| Department (scenario B) | combobox | Department                |                | collapsed                     | Pass   |
+| Search category (C)     | combobox | Search category           |                | collapsed                     | Pass   |
+| Priority level (D)      | combobox | Priority level            |                | collapsed                     | Pass   |
+| Search via internals    | combobox | Search via internals      |                | collapsed                     | Pass   |
+| Search via host attr    | combobox | Search via host attribute |                | collapsed                     | Pass   |
+| Project status          | combobox | Project status (required) |                | required, collapsed           | Pass   |
+| Trigger buttons         | button   | Show options              |                | collapsed / expanded          | Pass   |
+
+**When the Color combobox was opened** (via trigger button click), the tree correctly showed:
+
+- Combobox: `role: combobox`, `name: Color`, `states: [expanded]`
+- Trigger: `role: button`, `name: Show options`, `states: [expanded]`
+- Listbox: `role: listbox`, `name: Options`
+- 10 options: `role: option`, names: Red, Green, Blue, Yellow, Purple, Orange, Pink, Brown, Black, White
+
+After selecting "Blue": combobox value updated to `Blue`, listbox closed (`states: [collapsed]`).
+
+### Form submit tests
+
+| Test                  | Action                                  | Result                                                 | Status |
+| --------------------- | --------------------------------------- | ------------------------------------------------------ | ------ |
+| 1a Submit             | Clicked Submit                          | FormData: `fruit: "Apple"`, form participation: PASS   | Pass   |
+| 1d Select then submit | Opened listbox, clicked Blue, submitted | FormData: `color: "Blue"`, value captured correctly    | Pass   |
+| 1d Open state         | Opened via trigger, checked snapshot    | Combobox shows expanded, options rendered in a11y tree | Pass   |
+
+### Screen reader testing notes
+
+> Manual screen reader testing requires human operation. The a11y tree snapshot confirms that roles, names, expanded state, and option rendering are structurally correct; screen reader testing should validate announcement quality.
+
+**Recommended SR test procedure (for manual execution):**
+
+1. Focus the combobox via Tab
+2. Verify: SR announces role ("combo box"), name ("Favorite fruit"), and state ("collapsed")
+3. Press ArrowDown to open
+4. Verify: SR announces "expanded" and the first option
+5. Arrow through options
+6. Verify: SR announces each option name via `aria-activedescendant`
+7. Press Enter to select
+8. Verify: SR announces selected value and "collapsed"
+
+### VoiceOver (macOS)
+
+> Fill in after manual testing session.
+
+| Scenario | VO version | macOS version | Role announced | Name announced | Expanded state | Active option | Notes |
+| -------- | ---------- | ------------- | -------------- | -------------- | -------------- | ------------- | ----- |
+| A        |            |               |                |                |                |               |       |
+| B        |            |               |                |                |                |               |       |
+| C        |            |               |                |                |                |               |       |
+| D        |            |               |                |                |                |               |       |
+
+### NVDA (Windows)
+
+> Fill in after manual testing session.
+
+| Scenario | NVDA version | Browser/version | Role announced | Name announced | Expanded state | Active option | Notes |
+| -------- | ------------ | --------------- | -------------- | -------------- | -------------- | ------------- | ----- |
+| A        |              |                 |                |                |                |               |       |
+| B        |              |                 |                |                |                |               |       |
+| C        |              |                 |                |                |                |               |       |
+| D        |              |                 |                |                |                |               |       |
+
+---
+
+## 8. Comparison with a plain `<select>` / native combobox
+
+There is no native `<combobox>` element. The closest native equivalents are `<select>` and `<input list="...">` (datalist).
+
+| Concern                      | `<select>`     | `<input list>` (datalist) | FACE combobox (this PoC)          | Notes                                           |
+| ---------------------------- | -------------- | ------------------------- | --------------------------------- | ----------------------------------------------- |
+| Free-text entry              | No             | Yes                       | Yes                               | FACE combobox matches datalist                  |
+| Filtered suggestions         | No             | Browser-dependent         | Yes (custom filtering)            | Full control over filter logic                  |
+| FormData participation       | Native         | Native                    | Pass via `setFormValue()`         | Equivalent                                      |
+| Reset                        | Native         | Native                    | Pass via `formResetCallback()`    | Also closes listbox                             |
+| Disabled via `<fieldset>`    | Native         | Native                    | Pass via `formDisabledCallback()` | Equivalent                                      |
+| Keyboard navigation          | Native         | Minimal                   | Full APG pattern                  | Better than datalist keyboard support           |
+| Accessible name              | `<label for>`  | `<label for>`             | Layered (host ARIA + fallback)    | Extra work vs native                            |
+| `aria-activedescendant`      | N/A            | N/A                       | Full support (shadow-scoped)      | Not needed for native elements                  |
+| Styling                      | Very limited   | Very limited              | Full control via shadow CSS       | Major advantage of custom element               |
+| Constraint validation UI     | Native tooltip | Native tooltip            | `reportValidity()` tooltip        | Safari inconsistent for custom elements         |
+| Option grouping (`optgroup`) | Yes            | No                        | Not in PoC (can be added)         | Would need custom `role="group"` inside listbox |
+
+### Key takeaway
+
+The FACE combobox achieves feature parity with `<input list>` (datalist) for form behavior, exceeds it for keyboard interaction and a11y, and provides full styling control. Compared to `<select>`, it trades native simplicity for free-text entry and customization.
+
+---
+
+## 9. Recommendations for the direction PR
+
+### Shared with text-field PoC
+
+1. **Adopt ElementInternals and FACE** for all form-participating 2nd-gen components.
+2. **Primary labelling pattern:** Host-level `aria-labelledby`/`aria-describedby` referencing light DOM IDs.
+3. **Slot-based labelling** is viable with host-level ARIA or string fallback.
+4. **axe-core policy:** Story-level exclusions; never global disables.
+5. **Monitor `referenceTarget`** and `ariaLabelledByElements`.
+6. **Shared mixin** for form lifecycle, value sync, validation mirroring, and ARIA wiring.
+
+### Combobox-specific recommendations
+
+7. **Keep input and listbox in the same shadow root.** This is non-negotiable for `aria-activedescendant` and `aria-controls` to work. Do not portal the listbox to a different DOM scope.
+
+8. **`aria-activedescendant` is the correct keyboard pattern** for combobox. Moving DOM focus into the listbox (`aria-activedescendant` alternative: roving `tabindex`) is not recommended for the combobox pattern because it would remove the text input cursor.
+
+9. **Dual-write `aria-expanded`** on both the shadow input (for screen reader focus context) and `internals.ariaExpanded` (for spec compliance).
+
+10. **Filtering should be internal to the component.** The shadow listbox options are generated by the component; consumers provide options via an attribute, property, or slots. The component manages `aria-activedescendant` and option IDs internally.
+
+11. **If a portal/overlay pattern is needed** (e.g., for z-index stacking), consider rendering the popup in the _same_ shadow root but using CSS techniques (`position: fixed`, `popover` attribute, or `<dialog>`) to escape stacking contexts. Avoid moving the listbox to a different DOM tree.
+
+12. **`aria-autocomplete="list"`** should be the default for comboboxes that filter. Components that only allow selection (no free text) should use `aria-autocomplete="none"`.
+
+---
+
+## 10. Technical questions answered
+
+### Does native `<form>` submission and reset see the control's value as intended?
+
+**Yes.** Same as text-field PoC. `setFormValue()` integrates with `FormData` and submission. The combobox adds one nuance: the listbox must close on reset, and submit captures the current value regardless of popup state. Both work correctly.
+
+### Does the combobox submit the correct value when the listbox is open vs closed?
+
+**Yes.** `setFormValue()` is called on every input change and option selection. The form always sees the current input value, not the highlighted (active) option.
+
+### Do `aria-activedescendant` and `aria-controls` work with shadow DOM?
+
+**Yes, within the same shadow root.** Both are IDREF attributes that resolve within their tree scope. Since the input and listbox are co-located in the shadow root, all option IDs resolve correctly.
+
+### Does `aria-activedescendant` behavior differ from light DOM usage?
+
+**No observable difference** when both the combobox input and the option elements are in the same shadow root. The shadow boundary is transparent to same-scope IDREF resolution.
+
+### How should we handle the expanded/collapsed state?
+
+**Dual-write:** Set `aria-expanded` on the shadow input (which screen readers focus) and `internals.ariaExpanded` on the host (for spec compliance and potential future use). Add an `open` attribute on the host for CSS styling.
+
+### What gaps exist vs a plain `<select>` or native combobox?
+
+See the comparison table in section 8. The main gaps are: no `optgroup` equivalent (can be added), and `reportValidity()` tooltip positioning is Safari-inconsistent. The FACE combobox exceeds `<select>` in keyboard interaction, filtering, and styling control.
+
+---
+
+## 11. Browser and tool versions (fill in during testing)
+
+| Tool                    | Version      |
+| ----------------------- | ------------ |
+| Chrome                  |              |
+| Firefox                 |              |
+| Safari                  |              |
+| VoiceOver               |              |
+| NVDA                    |              |
+| axe-core                | 4.10.2 (CDN) |
+| OS (macOS)              |              |
+| OS (Windows, if tested) |              |
+
+---
+
+## 12. Upstream references
+
+- [ARIA combobox pattern (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)
+- [ElementInternals spec](https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface)
+- [Form-associated custom elements (FACE)](https://html.spec.whatwg.org/multipage/custom-elements.html#form-associated-custom-elements)
+- [Form-associated custom elements (Benny Powers)](https://bennypowers.dev/posts/form-associated-custom-elements/)
+- [Deque axe-core elementInternals issues](https://github.com/dequelabs/axe-core/labels/elementInternals)
+- [Cross-root ARIA delegation explainer](https://leobalter.github.io/cross-root-aria-delegation/)
+- [Reference target explainer (WICG)](https://github.com/nicknisi/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md)
+- [Can I use: `shadowrootreferencetarget`](https://caniuse.com/mdn-html_elements_template_shadowrootreferencetarget)
+- SWC internal: [Semantic HTML and ARIA guide](../../2nd-gen/packages/swc/.storybook/guides/accessibility-guides/semantic_html_aria.mdx)
+- SWC parallel: [Text-field FACE PoC](../form-associated-ce-poc/SUMMARY.md)
+
+---
+
+## 13. Files in this PoC
+
+| File           | Purpose                                                        |
+| -------------- | -------------------------------------------------------------- |
+| `index.html`   | Self-contained demo; opens directly in StackBlitz or a browser |
+| `SUMMARY.md`   | This document; internal findings for the direction PR          |
+| `package.json` | Minimal Vite config so StackBlitz can serve the demo           |
diff --git a/research/form-associated-ce-combobox-poc/index.html b/research/form-associated-ce-combobox-poc/index.html
new file mode 100644
index 00000000000..835ff96a833
--- /dev/null
+++ b/research/form-associated-ce-combobox-poc/index.html
@@ -0,0 +1,1982 @@
+<!doctype html>
+<!--
+  Copyright 2026 Adobe. All rights reserved.
+
+  Form-associated custom element (FACE) PoC: combobox with ElementInternals
+  Research artifact for combobox FACE spike; not production code.
+  Self-contained: works in CodePen or any static server.
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>FACE combobox PoC: ElementInternals research</title>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      :root {
+        --color-bg: #fafafa;
+        --color-surface: #fff;
+        --color-border: #d1d5db;
+        --color-border-focus: #3b82f6;
+        --color-text: #1f2937;
+        --color-text-muted: #6b7280;
+        --color-error: #dc2626;
+        --color-success: #16a34a;
+        --color-warn: #d97706;
+        --color-partial: #d97706;
+        --font-sans: system-ui, -apple-system, sans-serif;
+        --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
+        --radius: 6px;
+      }
+
+      body {
+        font-family: var(--font-sans);
+        color: var(--color-text);
+        background: var(--color-bg);
+        margin: 0;
+        padding: 2rem;
+        line-height: 1.6;
+      }
+
+      h1 {
+        font-size: 1.5rem;
+        margin: 0 0 0.25rem;
+      }
+
+      h2 {
+        font-size: 1.25rem;
+        margin: 2rem 0 1rem;
+        padding-bottom: 0.25rem;
+        border-bottom: 2px solid var(--color-border);
+      }
+
+      h3 {
+        font-size: 1rem;
+        margin: 1.5rem 0 0.5rem;
+      }
+
+      .subtitle {
+        color: var(--color-text-muted);
+        margin: 0 0 2rem;
+      }
+
+      .scenario {
+        background: var(--color-surface);
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius);
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+      }
+
+      .scenario h3 {
+        margin-top: 0;
+      }
+
+      form {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+      }
+
+      .field-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+
+      label {
+        font-weight: 600;
+        font-size: 0.875rem;
+      }
+
+      .help-text {
+        font-size: 0.8125rem;
+        color: var(--color-text-muted);
+      }
+
+      .error-text {
+        font-size: 0.8125rem;
+        color: var(--color-error);
+      }
+
+      .form-actions {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: 0.5rem;
+      }
+
+      button {
+        padding: 0.5rem 1rem;
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius);
+        background: var(--color-surface);
+        font-family: var(--font-sans);
+        font-size: 0.875rem;
+        cursor: pointer;
+      }
+
+      button[type='submit'] {
+        background: var(--color-border-focus);
+        color: white;
+        border-color: var(--color-border-focus);
+      }
+
+      .output {
+        background: #f3f4f6;
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius);
+        padding: 1rem;
+        font-family: var(--font-mono);
+        font-size: 0.8125rem;
+        white-space: pre-wrap;
+        min-height: 2rem;
+        margin-top: 0.5rem;
+      }
+
+      .matrix {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 0.875rem;
+        margin-top: 1rem;
+      }
+
+      .matrix th,
+      .matrix td {
+        border: 1px solid var(--color-border);
+        padding: 0.5rem 0.75rem;
+        text-align: left;
+      }
+
+      .matrix th {
+        background: #f3f4f6;
+        font-weight: 600;
+      }
+
+      .pass {
+        color: var(--color-success);
+        font-weight: 600;
+      }
+
+      .fail {
+        color: var(--color-error);
+        font-weight: 600;
+      }
+
+      .partial {
+        color: var(--color-partial);
+        font-weight: 600;
+      }
+
+      .pending {
+        color: var(--color-text-muted);
+        font-style: italic;
+      }
+
+      #axe-results {
+        max-height: 40rem;
+        overflow-y: auto;
+      }
+
+      .axe-violation {
+        background: #fef2f2;
+        border: 1px solid #fecaca;
+        border-radius: var(--radius);
+        padding: 1rem;
+        margin-bottom: 0.75rem;
+      }
+
+      .axe-violation h4 {
+        margin: 0 0 0.25rem;
+        color: var(--color-error);
+      }
+
+      .axe-pass {
+        background: #f0fdf4;
+        border: 1px solid #bbf7d0;
+        border-radius: var(--radius);
+        padding: 0.75rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .axe-incomplete {
+        background: #fffbeb;
+        border: 1px solid #fde68a;
+        border-radius: var(--radius);
+        padding: 0.75rem;
+        margin-bottom: 0.5rem;
+      }
+
+      code {
+        font-family: var(--font-mono);
+        font-size: 0.8125rem;
+        background: #f3f4f6;
+        padding: 0.125rem 0.375rem;
+        border-radius: 3px;
+      }
+
+      .note {
+        background: #eff6ff;
+        border-left: 3px solid var(--color-border-focus);
+        padding: 0.75rem 1rem;
+        margin: 1rem 0;
+        font-size: 0.875rem;
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Form-associated custom element PoC: combobox</h1>
+    <p class="subtitle">
+      Research artifact for ElementInternals and FACE patterns applied to a
+      combobox-shaped control (text input + listbox). Not a migration of
+      <code>sp-combobox</code>
+      ; a standalone platform test exercising
+      <code>aria-activedescendant</code>
+      , popup ownership, and keyboard patterns inside shadow DOM.
+    </p>
+
+    <!-- ================================================================== -->
+    <!-- SECTION 1: form participation (FormData, reset, validation)        -->
+    <!-- ================================================================== -->
+
+    <h2>1. Native form participation</h2>
+
+    <div class="scenario">
+      <h3>1a. FormData and submit</h3>
+      <form id="form-1a" novalidate>
+        <div class="field-group">
+          <label for="field-1a">Favorite fruit</label>
+          <face-combobox
+            id="field-1a"
+            name="fruit"
+            value="Apple"
+            options='["Apple", "Apricot", "Avocado", "Banana", "Blueberry", "Cherry", "Grape", "Lemon", "Mango", "Orange", "Peach", "Pear", "Strawberry"]'
+          ></face-combobox>
+        </div>
+        <div class="form-actions">
+          <button type="submit">Submit</button>
+          <button type="reset">Reset</button>
+        </div>
+      </form>
+      <div class="output" id="output-1a">
+        Submit or reset the form to see results.
+      </div>
+    </div>
+
+    <div class="scenario">
+      <h3>
+        1b. Constraint validation (
+        <code>required</code>
+        )
+      </h3>
+      <form id="form-1b" novalidate>
+        <div class="field-group">
+          <label for="field-1b">Country (required)</label>
+          <face-combobox
+            id="field-1b"
+            name="country"
+            required
+            options='["Argentina", "Australia", "Brazil", "Canada", "France", "Germany", "India", "Japan", "Mexico", "United Kingdom", "United States"]'
+            placeholder="Start typing a country..."
+          ></face-combobox>
+          <span class="help-text">Choose from the list or type your own.</span>
+        </div>
+        <div class="form-actions">
+          <button type="submit">Submit</button>
+        </div>
+      </form>
+      <div class="output" id="output-1b">
+        Submit with no selection to see constraint validation.
+      </div>
+    </div>
+
+    <div class="scenario">
+      <h3>
+        1c. Disabled state via
+        <code>fieldset</code>
+      </h3>
+      <form id="form-1c">
+        <fieldset disabled>
+          <legend>Disabled fieldset</legend>
+          <div class="field-group">
+            <label for="field-1c">Disabled combobox</label>
+            <face-combobox
+              id="field-1c"
+              name="disabledcombo"
+              value="Cannot change"
+              options='["Option A", "Option B", "Option C"]'
+            ></face-combobox>
+          </div>
+        </fieldset>
+        <div class="form-actions">
+          <button type="submit">Submit</button>
+        </div>
+      </form>
+      <div class="output" id="output-1c">
+        Field should be disabled via ancestor fieldset.
+      </div>
+    </div>
+
+    <div class="scenario">
+      <h3>1d. Submit with listbox open vs closed</h3>
+      <form id="form-1d" novalidate>
+        <div class="field-group">
+          <label for="field-1d">Color</label>
+          <face-combobox
+            id="field-1d"
+            name="color"
+            options='["Red", "Green", "Blue", "Yellow", "Purple", "Orange", "Pink", "Brown", "Black", "White"]'
+            placeholder="Pick a color..."
+          ></face-combobox>
+          <span class="help-text">
+            Try submitting while the listbox is open (use arrow keys to
+            highlight, then press Enter). Also try submitting with the listbox
+            closed.
+          </span>
+        </div>
+        <div class="form-actions">
+          <button type="submit">Submit</button>
+        </div>
+      </form>
+      <div class="output" id="output-1d">
+        Submit to see which value is captured.
+      </div>
+    </div>
+
+    <!-- ================================================================== -->
+    <!-- SECTION 2: keyboard interaction                                    -->
+    <!-- ================================================================== -->
+
+    <h2>2. Keyboard interaction</h2>
+
+    <div class="note">
+      Combobox keyboard patterns follow the
+      <a
+        href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/"
+        target="_blank"
+      >
+        APG combobox pattern
+      </a>
+      . Test each key and verify that focus, selection, and
+      <code>aria-activedescendant</code>
+      update correctly. The log below the field shows real-time state changes.
+    </div>
+
+    <div class="scenario">
+      <h3>2a. Keyboard nav and activedescendant</h3>
+      <form id="form-2a">
+        <div class="field-group">
+          <label for="field-2a">Programming language</label>
+          <face-combobox
+            id="field-2a"
+            name="lang"
+            options='["C", "C++", "C#", "Go", "Java", "JavaScript", "Kotlin", "Python", "Ruby", "Rust", "Swift", "TypeScript"]'
+            placeholder="Type or use arrow keys..."
+          ></face-combobox>
+        </div>
+      </form>
+      <div class="output" id="output-2a">
+        Keyboard events will be logged here.
+      </div>
+    </div>
+
+    <!-- ================================================================== -->
+    <!-- SECTION 3: IDREF matrix scenarios                                  -->
+    <!-- ================================================================== -->
+
+    <h2>3. IDREF matrix: label and description wiring</h2>
+
+    <div class="note">
+      Each scenario tests whether
+      <code>aria-labelledby</code>
+      ,
+      <code>aria-describedby</code>
+      , and combobox-specific attributes (
+      <code>aria-activedescendant</code>
+      ,
+      <code>aria-owns</code>
+      ) resolve correctly across shadow DOM boundaries. Inspect the
+      accessibility tree in DevTools for each.
+    </div>
+
+    <!-- Scenario A: light DOM siblings -->
+    <div class="scenario">
+      <h3>Scenario A: light DOM label and help as siblings</h3>
+      <p>
+        IDs are on elements
+        <em>outside</em>
+        the component; referenced via
+        <code>aria-labelledby</code>
+        and
+        <code>aria-describedby</code>
+        on the host.
+      </p>
+      <form id="form-3a">
+        <div class="field-group">
+          <label id="label-3a">Timezone</label>
+          <face-combobox
+            id="field-3a"
+            name="timezone"
+            aria-labelledby="label-3a"
+            aria-describedby="help-3a"
+            options='["UTC-8 Pacific", "UTC-7 Mountain", "UTC-6 Central", "UTC-5 Eastern", "UTC+0 GMT", "UTC+1 CET", "UTC+5:30 IST", "UTC+9 JST"]'
+            placeholder="Search timezones..."
+          ></face-combobox>
+          <span id="help-3a" class="help-text">
+            Select your primary timezone.
+          </span>
+        </div>
+      </form>
+    </div>
+
+    <!-- Scenario B: slotted light DOM children with IDs -->
+    <div class="scenario">
+      <h3>Scenario B: IDs on slotted light DOM children</h3>
+      <p>
+        Consumer projects content into the component via slots; IDs live on the
+        slotted elements.
+      </p>
+      <form id="form-3b-form">
+        <div class="field-group">
+          <face-combobox
+            id="field-3b"
+            name="department"
+            options='["Design", "Engineering", "Marketing", "Product", "Sales", "Support"]'
+          >
+            <span slot="label" id="label-3b">Department</span>
+            <span slot="help-text" id="help-3b" class="help-text">
+              Choose the department you belong to.
+            </span>
+          </face-combobox>
+        </div>
+      </form>
+    </div>
+
+    <!-- Scenario C: shadow DOM internal IDs -->
+    <div class="scenario">
+      <h3>Scenario C: IDs inside shadow DOM (internal wiring)</h3>
+      <p>
+        Label and help text rendered
+        <em>inside</em>
+        the shadow root. The component uses shadow-scoped IDs on the internal
+        input.
+      </p>
+      <form id="form-3c">
+        <div class="field-group">
+          <face-combobox
+            id="field-3c"
+            name="search"
+            internal-label="Search category"
+            internal-help="Type to filter categories."
+            options='["Books", "Electronics", "Fashion", "Food", "Games", "Music", "Sports", "Travel"]'
+            placeholder="Search..."
+          ></face-combobox>
+        </div>
+      </form>
+    </div>
+
+    <!-- Scenario D: cross-root label-for -->
+    <div class="scenario">
+      <h3>Scenario D: cross-root; light DOM label + shadow input</h3>
+      <p>
+        A
+        <code>&lt;label for="..."&gt;</code>
+        in light DOM targets the custom element host. The component uses
+        <code>delegatesFocus</code>
+        and
+        <code>ElementInternals</code>
+        to attempt forwarding.
+      </p>
+      <form id="form-3d">
+        <div class="field-group">
+          <label for="field-3d">Priority level</label>
+          <face-combobox
+            id="field-3d"
+            name="priority"
+            options='["Critical", "High", "Medium", "Low", "None"]'
+            placeholder="e.g. High"
+          ></face-combobox>
+          <span id="error-3d" class="error-text" hidden>
+            Please select a priority level.
+          </span>
+        </div>
+      </form>
+    </div>
+
+    <!-- ================================================================== -->
+    <!-- SECTION 4: combobox-specific shadow DOM challenges                 -->
+    <!-- ================================================================== -->
+
+    <h2>4. Combobox-specific shadow DOM patterns</h2>
+
+    <div class="note">
+      These scenarios test the interaction between
+      <code>aria-activedescendant</code>
+      ,
+      <code>aria-controls</code>
+      , and owned listbox elements when they live inside a shadow root. This is
+      where combobox behavior diverges most from a simple text input.
+    </div>
+
+    <div class="scenario">
+      <h3>
+        4a.
+        <code>aria-activedescendant</code>
+        with shadow-scoped option IDs
+      </h3>
+      <p>
+        The shadow input uses
+        <code>aria-activedescendant</code>
+        pointing at option IDs within the same shadow root. Verify the a11y tree
+        shows the active option.
+      </p>
+      <form id="form-4a">
+        <div class="field-group">
+          <label for="field-4a">Font family</label>
+          <face-combobox
+            id="field-4a"
+            name="font"
+            options='["Arial", "Courier New", "Georgia", "Helvetica", "Monaco", "Segoe UI", "Times New Roman", "Verdana"]'
+            placeholder="Type to search fonts..."
+          ></face-combobox>
+        </div>
+      </form>
+      <div class="output" id="output-4a">
+        Use arrow keys to navigate. Active descendant changes appear here.
+      </div>
+    </div>
+
+    <div class="scenario">
+      <h3>
+        4b.
+        <code>aria-controls</code>
+        /
+        <code>aria-owns</code>
+        and popup relationship
+      </h3>
+      <p>
+        The input must declare ownership of the listbox via
+        <code>aria-controls</code>
+        . Both live inside the shadow root. Verify the relationship is exposed
+        in the a11y tree.
+      </p>
+      <form id="form-4b">
+        <div class="field-group">
+          <label for="field-4b">City</label>
+          <face-combobox
+            id="field-4b"
+            name="city"
+            options='["Amsterdam", "Berlin", "London", "New York", "Paris", "San Francisco", "Singapore", "Sydney", "Tokyo", "Toronto"]'
+            placeholder="Search cities..."
+          ></face-combobox>
+        </div>
+      </form>
+    </div>
+
+    <div class="scenario">
+      <h3>4c. Validation with error messaging</h3>
+      <form id="form-4c" novalidate>
+        <div class="field-group">
+          <label for="field-4c">Project status (required)</label>
+          <face-combobox
+            id="field-4c"
+            name="status"
+            required
+            options='["Planning", "In Progress", "Review", "Done", "Cancelled"]'
+            placeholder="Select a status..."
+            aria-describedby="help-4c"
+            aria-errormessage="error-4c"
+          ></face-combobox>
+          <span id="help-4c" class="help-text">
+            Required for project tracking.
+          </span>
+          <span id="error-4c" class="error-text" role="alert" hidden>
+            A project status is required.
+          </span>
+        </div>
+        <div class="form-actions">
+          <button type="submit">Submit</button>
+        </div>
+      </form>
+      <div class="output" id="output-4c">
+        Submit empty to test error announcement.
+      </div>
+    </div>
+
+    <!-- ================================================================== -->
+    <!-- SECTION 5: ElementInternals ARIA APIs                              -->
+    <!-- ================================================================== -->
+
+    <h2>5. ElementInternals ARIA property APIs</h2>
+
+    <div class="scenario">
+      <h3>
+        5a.
+        <code>internals.ariaLabel</code>
+        vs host
+        <code>aria-label</code>
+      </h3>
+      <form id="form-5a">
+        <face-combobox
+          id="field-5a-internals"
+          name="internals-label"
+          use-internals-aria-label="Search via internals"
+          options='["Option 1", "Option 2", "Option 3"]'
+          placeholder="internals.ariaLabel"
+        ></face-combobox>
+        <face-combobox
+          id="field-5a-host"
+          name="host-label"
+          aria-label="Search via host attribute"
+          options='["Option A", "Option B", "Option C"]'
+          placeholder="host aria-label"
+        ></face-combobox>
+      </form>
+      <p>
+        Compare the two in the accessibility tree: which one exposes the name on
+        the combobox role?
+      </p>
+    </div>
+
+    <div class="scenario">
+      <h3>
+        5b.
+        <code>ariaExpanded</code>
+        on internals vs host attribute
+      </h3>
+      <p>
+        Open and close the listbox. Verify which layer (internals or host
+        attribute) screen readers announce for expanded/collapsed state.
+      </p>
+      <form id="form-5b">
+        <div class="field-group">
+          <label for="field-5b">Test expanded state</label>
+          <face-combobox
+            id="field-5b"
+            name="expanded-test"
+            options='["Alpha", "Beta", "Gamma", "Delta"]'
+            placeholder="Open to test..."
+          ></face-combobox>
+        </div>
+      </form>
+      <div class="output" id="output-5b">
+        Open/close the listbox. State changes logged here.
+      </div>
+    </div>
+
+    <!-- ================================================================== -->
+    <!-- SECTION 6: axe-core audit                                          -->
+    <!-- ================================================================== -->
+
+    <h2>6. axe-core automated audit</h2>
+
+    <div class="note">
+      Loads axe-core from CDN and runs against the full page. Results show
+      violations, passes, and incomplete checks relevant to FACE combobox
+      patterns.
+    </div>
+
+    <button id="run-axe" type="button">Run axe-core audit</button>
+    <div id="axe-results" class="output">
+      Click the button above to run axe-core.
+    </div>
+
+    <!-- ================================================================== -->
+    <!-- SECTION 7: live IDREF matrix table (auto-populated)                -->
+    <!-- ================================================================== -->
+
+    <h2>7. IDREF matrix results</h2>
+
+    <p>
+      This table is populated by JavaScript introspection after the page loads.
+      For screen reader behavior, manual testing with VoiceOver / NVDA is
+      required; record results in the summary document.
+    </p>
+
+    <table class="matrix" id="matrix-table">
+      <thead>
+        <tr>
+          <th>Scenario</th>
+          <th>Label wiring</th>
+          <th>Description wiring</th>
+          <th>a11y tree name</th>
+          <th>a11y tree description</th>
+          <th>activedescendant</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody id="matrix-body"></tbody>
+    </table>
+
+    <!-- ================================================================== -->
+    <!-- COMPONENT DEFINITION                                               -->
+    <!-- ================================================================== -->
+
+    <script>
+      /**
+       * Minimal form-associated combobox custom element.
+       *
+       * Demonstrates:
+       * - static formAssociated = true
+       * - ElementInternals for form value, validation, and ARIA
+       * - Combobox pattern: input + listbox with aria-activedescendant
+       * - Slot-based and shadow-internal labelling
+       * - Keyboard interaction (APG combobox pattern)
+       * - Constraint validation hooks
+       * - formResetCallback, formDisabledCallback, formStateRestoreCallback
+       *
+       * Shadow DOM structure:
+       *   <slot name="label">
+       *   <span .internal-label>      (for internal-label attr)
+       *   <div .combobox-wrapper>
+       *     <input role="combobox">
+       *     <button .trigger>          (toggle button)
+       *   </div>
+       *   <div role="listbox">
+       *     <div role="option"> ...    (filtered options)
+       *   </div>
+       *   <slot name="help-text">
+       *   <span .internal-help>        (for internal-help attr)
+       */
+      class FaceCombobox extends HTMLElement {
+        static formAssociated = true;
+
+        static get observedAttributes() {
+          return [
+            'value',
+            'name',
+            'required',
+            'placeholder',
+            'disabled',
+            'options',
+            'internal-label',
+            'internal-help',
+            'use-internals-aria-label',
+            'aria-label',
+            'aria-labelledby',
+            'aria-describedby',
+            'aria-errormessage',
+          ];
+        }
+
+        #internals;
+        #input;
+        #listbox;
+        #trigger;
+        #shadowLabel;
+        #shadowHelp;
+        #options = [];
+        #filteredOptions = [];
+        #activeIndex = -1;
+        #isOpen = false;
+        #inputId;
+        #listboxId;
+
+        constructor() {
+          super();
+          this.#internals = this.attachInternals();
+
+          this.#inputId = `combo-input-${FaceCombobox.#nextId}`;
+          this.#listboxId = `combo-listbox-${FaceCombobox.#nextId}`;
+          FaceCombobox.#nextId++;
+
+          const shadow = this.attachShadow({
+            mode: 'open',
+            delegatesFocus: true,
+          });
+          shadow.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          flex-direction: column;
+          gap: 4px;
+          min-width: 240px;
+          position: relative;
+        }
+
+        :host([disabled]) {
+          opacity: 0.5;
+          pointer-events: none;
+        }
+
+        .internal-label {
+          font-weight: 600;
+          font-size: 0.875rem;
+        }
+
+        .internal-help {
+          font-size: 0.8125rem;
+          color: #6b7280;
+        }
+
+        .combobox-wrapper {
+          display: flex;
+          align-items: center;
+          border: 1px solid #d1d5db;
+          border-radius: 6px;
+          background: #fff;
+          transition: border-color 0.15s;
+        }
+
+        .combobox-wrapper:focus-within {
+          border-color: #3b82f6;
+          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+        }
+
+        :host(:state(invalid)) .combobox-wrapper {
+          border-color: #dc2626;
+        }
+
+        input {
+          flex: 1;
+          font: inherit;
+          padding: 0.5rem 0.75rem;
+          border: none;
+          outline: none;
+          background: transparent;
+          min-width: 0;
+        }
+
+        input:disabled {
+          cursor: not-allowed;
+        }
+
+        .trigger {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 2rem;
+          height: 100%;
+          border: none;
+          background: transparent;
+          cursor: pointer;
+          padding: 0.5rem 0.25rem;
+          color: #6b7280;
+          flex-shrink: 0;
+        }
+
+        .trigger:hover {
+          color: #1f2937;
+        }
+
+        .trigger svg {
+          width: 12px;
+          height: 12px;
+          transition: transform 0.15s;
+        }
+
+        :host([open]) .trigger svg {
+          transform: rotate(180deg);
+        }
+
+        .listbox {
+          display: none;
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          z-index: 100;
+          max-height: 200px;
+          overflow-y: auto;
+          background: #fff;
+          border: 1px solid #d1d5db;
+          border-radius: 6px;
+          margin-top: 4px;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+          padding: 4px 0;
+        }
+
+        :host([open]) .listbox {
+          display: block;
+        }
+
+        .option {
+          padding: 0.5rem 0.75rem;
+          cursor: pointer;
+          font-size: 0.875rem;
+          border-radius: 3px;
+          margin: 0 4px;
+        }
+
+        .option:hover {
+          background: #f3f4f6;
+        }
+
+        .option[aria-selected="true"] {
+          background: #eff6ff;
+          color: #1d4ed8;
+          font-weight: 500;
+        }
+
+        .option.active {
+          background: #e0e7ff;
+          outline: 2px solid #3b82f6;
+          outline-offset: -2px;
+        }
+
+        .no-results {
+          padding: 0.5rem 0.75rem;
+          color: #6b7280;
+          font-size: 0.875rem;
+          font-style: italic;
+        }
+
+        ::slotted([slot='label']) {
+          font-weight: 600;
+          font-size: 0.875rem;
+        }
+
+        ::slotted([slot='help-text']) {
+          font-size: 0.8125rem;
+          color: #6b7280;
+        }
+      </style>
+
+      <slot name="label"></slot>
+      <span class="internal-label" id="shadow-label" hidden></span>
+
+      <div class="combobox-wrapper">
+        <input
+          id="${this.#inputId}"
+          part="input"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded="false"
+          aria-controls="${this.#listboxId}"
+          aria-haspopup="listbox"
+          autocomplete="off"
+        />
+        <button
+          class="trigger"
+          type="button"
+          tabindex="-1"
+          aria-label="Show options"
+          aria-controls="${this.#listboxId}"
+          aria-expanded="false"
+        >
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+            <path d="M2 4l4 4 4-4" />
+          </svg>
+        </button>
+      </div>
+
+      <div
+        class="listbox"
+        id="${this.#listboxId}"
+        role="listbox"
+        aria-label="Options"
+      ></div>
+
+      <slot name="help-text"></slot>
+      <span class="internal-help" id="shadow-help" hidden></span>
+    `;
+
+          this.#input = shadow.getElementById(this.#inputId);
+          this.#listbox = shadow.getElementById(this.#listboxId);
+          this.#trigger = shadow.querySelector('.trigger');
+          this.#shadowLabel = shadow.getElementById('shadow-label');
+          this.#shadowHelp = shadow.getElementById('shadow-help');
+
+          this.#input.addEventListener('input', () => {
+            this.#onInput();
+          });
+
+          this.#input.addEventListener('keydown', (e) => {
+            this.#onKeydown(e);
+          });
+
+          this.#input.addEventListener('focus', () => {
+            this.#emitLog('focus');
+          });
+
+          this.#input.addEventListener('blur', () => {
+            requestAnimationFrame(() => {
+              if (
+                !this.shadowRoot.activeElement ||
+                this.shadowRoot.activeElement === this.#input
+              ) {
+                return;
+              }
+              this.#close();
+            });
+          });
+
+          this.#trigger.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            this.#toggle();
+          });
+
+          this.#listbox.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+          });
+
+          this.#listbox.addEventListener('click', (e) => {
+            const option = e.target.closest('[role="option"]');
+            if (option) {
+              this.#selectOption(option.dataset.value);
+            }
+          });
+
+          shadow.addEventListener('focusout', (e) => {
+            requestAnimationFrame(() => {
+              if (!this.shadowRoot.contains(this.shadowRoot.activeElement)) {
+                this.#close();
+              }
+            });
+          });
+        }
+
+        static #nextId = 0;
+
+        connectedCallback() {
+          this.#syncFromAttributes();
+          this.#syncValue();
+          this.#validate();
+          this.#wireAriaRelationships();
+          this.#wireImplicitLabel();
+
+          this.setAttribute('role', 'group');
+        }
+
+        #wireImplicitLabel() {
+          requestAnimationFrame(() => {
+            if (this.#input.hasAttribute('aria-label')) return;
+            const labels = this.#internals.labels;
+            if (labels && labels.length > 0) {
+              const text = Array.from(labels)
+                .map((l) => l.textContent?.trim())
+                .filter(Boolean)
+                .join(' ');
+              if (text) this.#applyLabel(text);
+            }
+          });
+        }
+
+        attributeChangedCallback(name, _oldVal, newVal) {
+          switch (name) {
+            case 'value':
+              if (this.#input && this.#input.value !== newVal) {
+                this.#input.value = newVal ?? '';
+                this.#syncValue();
+              }
+              break;
+            case 'placeholder':
+              if (this.#input) this.#input.placeholder = newVal ?? '';
+              break;
+            case 'required':
+              if (this.#input) this.#input.required = newVal !== null;
+              break;
+            case 'disabled':
+              if (this.#input) {
+                this.#input.disabled = newVal !== null;
+                this.#trigger.disabled = newVal !== null;
+              }
+              break;
+            case 'options':
+              this.#parseOptions(newVal);
+              break;
+            case 'internal-label':
+              this.#updateInternalLabel(newVal);
+              break;
+            case 'internal-help':
+              this.#updateInternalHelp(newVal);
+              break;
+            case 'use-internals-aria-label':
+              if (newVal !== null) this.#applyLabel(newVal);
+              break;
+            case 'aria-label':
+              if (newVal !== null) this.#applyLabel(newVal);
+              break;
+            case 'aria-labelledby':
+            case 'aria-describedby':
+            case 'aria-errormessage':
+              this.#wireAriaRelationships();
+              break;
+          }
+        }
+
+        // -- Form-associated API --
+
+        get form() {
+          return this.#internals.form;
+        }
+
+        get name() {
+          return this.getAttribute('name');
+        }
+
+        get type() {
+          return this.localName;
+        }
+
+        get value() {
+          return this.#input?.value ?? '';
+        }
+
+        set value(v) {
+          if (this.#input) {
+            this.#input.value = v;
+            this.#syncValue();
+          }
+        }
+
+        get validity() {
+          return this.#internals.validity;
+        }
+
+        get validationMessage() {
+          return this.#internals.validationMessage;
+        }
+
+        get willValidate() {
+          return this.#internals.willValidate;
+        }
+
+        checkValidity() {
+          this.#validate();
+          return this.#internals.checkValidity();
+        }
+
+        reportValidity() {
+          this.#validate();
+          return this.#internals.reportValidity();
+        }
+
+        formResetCallback() {
+          const defaultValue = this.getAttribute('value') ?? '';
+          this.#input.value = defaultValue;
+          this.#syncValue();
+          this.#validate();
+          this.#clearErrorState();
+          this.#close();
+        }
+
+        formDisabledCallback(disabled) {
+          this.#input.disabled = disabled;
+          this.#trigger.disabled = disabled;
+          if (disabled) {
+            this.setAttribute('disabled', '');
+            this.#close();
+          } else {
+            this.removeAttribute('disabled');
+          }
+        }
+
+        formStateRestoreCallback(state, _mode) {
+          this.#input.value = state ?? '';
+          this.#syncValue();
+        }
+
+        // -- Combobox behavior --
+
+        #parseOptions(json) {
+          try {
+            this.#options = JSON.parse(json || '[]');
+          } catch {
+            this.#options = [];
+          }
+          this.#filteredOptions = [...this.#options];
+          this.#renderOptions();
+        }
+
+        #onInput() {
+          const query = this.#input.value.toLowerCase();
+          this.#filteredOptions = this.#options.filter((opt) =>
+            opt.toLowerCase().includes(query)
+          );
+          this.#activeIndex = -1;
+          this.#open();
+          this.#renderOptions();
+          this.#syncValue();
+          this.#validate();
+          this.#emitLog(
+            `input: "${this.#input.value}" → ${this.#filteredOptions.length} matches`
+          );
+        }
+
+        #onKeydown(e) {
+          switch (e.key) {
+            case 'ArrowDown':
+              e.preventDefault();
+              if (!this.#isOpen) {
+                this.#open();
+                this.#renderOptions();
+              }
+              this.#moveActive(1);
+              this.#emitLog(`ArrowDown → active: ${this.#activeIndex}`);
+              break;
+
+            case 'ArrowUp':
+              e.preventDefault();
+              if (!this.#isOpen) {
+                this.#open();
+                this.#renderOptions();
+              }
+              this.#moveActive(-1);
+              this.#emitLog(`ArrowUp → active: ${this.#activeIndex}`);
+              break;
+
+            case 'Enter':
+              if (this.#isOpen && this.#activeIndex >= 0) {
+                e.preventDefault();
+                this.#selectOption(this.#filteredOptions[this.#activeIndex]);
+                this.#emitLog(
+                  `Enter → selected: "${this.#filteredOptions[this.#activeIndex]}"`
+                );
+              }
+              break;
+
+            case 'Escape':
+              if (this.#isOpen) {
+                e.preventDefault();
+                this.#close();
+                this.#emitLog('Escape → closed');
+              }
+              break;
+
+            case 'Home':
+              if (this.#isOpen && this.#filteredOptions.length > 0) {
+                e.preventDefault();
+                this.#activeIndex = 0;
+                this.#updateActive();
+                this.#emitLog('Home → active: 0');
+              }
+              break;
+
+            case 'End':
+              if (this.#isOpen && this.#filteredOptions.length > 0) {
+                e.preventDefault();
+                this.#activeIndex = this.#filteredOptions.length - 1;
+                this.#updateActive();
+                this.#emitLog(`End → active: ${this.#activeIndex}`);
+              }
+              break;
+
+            case 'Tab':
+              if (this.#isOpen) {
+                this.#close();
+              }
+              break;
+          }
+        }
+
+        #moveActive(delta) {
+          if (this.#filteredOptions.length === 0) return;
+
+          if (this.#activeIndex === -1) {
+            this.#activeIndex =
+              delta > 0 ? 0 : this.#filteredOptions.length - 1;
+          } else {
+            this.#activeIndex += delta;
+            if (this.#activeIndex < 0)
+              this.#activeIndex = this.#filteredOptions.length - 1;
+            if (this.#activeIndex >= this.#filteredOptions.length)
+              this.#activeIndex = 0;
+          }
+
+          this.#updateActive();
+        }
+
+        #updateActive() {
+          const options = this.#listbox.querySelectorAll('[role="option"]');
+          options.forEach((opt, i) => {
+            opt.classList.toggle('active', i === this.#activeIndex);
+          });
+
+          if (this.#activeIndex >= 0 && options[this.#activeIndex]) {
+            const activeOpt = options[this.#activeIndex];
+            this.#input.setAttribute('aria-activedescendant', activeOpt.id);
+            activeOpt.scrollIntoView({ block: 'nearest' });
+
+            this.#dispatchActivedescendantEvent(
+              activeOpt.id,
+              activeOpt.textContent
+            );
+          } else {
+            this.#input.removeAttribute('aria-activedescendant');
+          }
+        }
+
+        #dispatchActivedescendantEvent(id, text) {
+          this.dispatchEvent(
+            new CustomEvent('activedescendant-change', {
+              detail: { id, text, index: this.#activeIndex },
+              bubbles: true,
+            })
+          );
+        }
+
+        #selectOption(value) {
+          this.#input.value = value;
+          this.#syncValue();
+          this.#validate();
+          this.#close();
+          this.#input.focus();
+
+          this.dispatchEvent(
+            new CustomEvent('combo-change', {
+              detail: { value },
+              bubbles: true,
+            })
+          );
+        }
+
+        #open() {
+          if (this.#isOpen) return;
+          this.#isOpen = true;
+          this.setAttribute('open', '');
+          this.#input.setAttribute('aria-expanded', 'true');
+          this.#trigger.setAttribute('aria-expanded', 'true');
+          this.#internals.ariaExpanded = 'true';
+
+          this.#emitExpandedLog(true);
+        }
+
+        #close() {
+          if (!this.#isOpen) return;
+          this.#isOpen = false;
+          this.removeAttribute('open');
+          this.#input.setAttribute('aria-expanded', 'false');
+          this.#trigger.setAttribute('aria-expanded', 'false');
+          this.#input.removeAttribute('aria-activedescendant');
+          this.#activeIndex = -1;
+          this.#internals.ariaExpanded = 'false';
+
+          this.#filteredOptions = [...this.#options];
+          this.#renderOptions();
+
+          this.#emitExpandedLog(false);
+        }
+
+        #toggle() {
+          if (this.#isOpen) {
+            this.#close();
+          } else {
+            this.#filteredOptions = [...this.#options];
+            this.#renderOptions();
+            this.#open();
+          }
+          this.#input.focus();
+        }
+
+        #renderOptions() {
+          this.#listbox.innerHTML = '';
+
+          if (this.#filteredOptions.length === 0) {
+            const noResults = document.createElement('div');
+            noResults.className = 'no-results';
+            noResults.textContent = 'No matches found';
+            this.#listbox.appendChild(noResults);
+            return;
+          }
+
+          const currentValue = this.#input.value;
+
+          this.#filteredOptions.forEach((opt, i) => {
+            const el = document.createElement('div');
+            el.setAttribute('role', 'option');
+            el.id = `${this.#listboxId}-opt-${i}`;
+            el.className = 'option';
+            el.dataset.value = opt;
+            el.textContent = opt;
+
+            if (opt === currentValue) {
+              el.setAttribute('aria-selected', 'true');
+            }
+
+            if (i === this.#activeIndex) {
+              el.classList.add('active');
+              this.#input.setAttribute('aria-activedescendant', el.id);
+            }
+
+            this.#listbox.appendChild(el);
+          });
+        }
+
+        // -- Private helpers --
+
+        #syncFromAttributes() {
+          const value = this.getAttribute('value') ?? '';
+          const placeholder = this.getAttribute('placeholder') ?? '';
+          this.#input.value = value;
+          this.#input.placeholder = placeholder;
+
+          if (this.hasAttribute('required')) this.#input.required = true;
+          if (this.hasAttribute('disabled')) {
+            this.#input.disabled = true;
+            this.#trigger.disabled = true;
+          }
+
+          this.#parseOptions(this.getAttribute('options'));
+
+          const internalLabel = this.getAttribute('internal-label');
+          if (internalLabel) this.#updateInternalLabel(internalLabel);
+
+          const internalHelp = this.getAttribute('internal-help');
+          if (internalHelp) this.#updateInternalHelp(internalHelp);
+
+          const internalsAriaLabel = this.getAttribute(
+            'use-internals-aria-label'
+          );
+          if (internalsAriaLabel) this.#applyLabel(internalsAriaLabel);
+
+          const hostAriaLabel = this.getAttribute('aria-label');
+          if (hostAriaLabel) this.#applyLabel(hostAriaLabel);
+        }
+
+        #syncValue() {
+          this.#internals.setFormValue(this.#input.value);
+        }
+
+        #validate() {
+          const input = this.#input;
+
+          if (this.hasAttribute('required') && !input.value.trim()) {
+            this.#internals.setValidity(
+              { valueMissing: true },
+              'Please select or enter a value.',
+              input
+            );
+            this.#showErrorState();
+          } else {
+            this.#internals.setValidity({});
+            this.#clearErrorState();
+          }
+        }
+
+        #showErrorState() {
+          this.#internals.ariaInvalid = 'true';
+          const errorId = this.getAttribute('aria-errormessage');
+          if (errorId) {
+            const errorEl = document.getElementById(errorId);
+            if (errorEl) errorEl.hidden = false;
+          }
+        }
+
+        #clearErrorState() {
+          this.#internals.ariaInvalid = 'false';
+          const errorId = this.getAttribute('aria-errormessage');
+          if (errorId) {
+            const errorEl = document.getElementById(errorId);
+            if (errorEl) errorEl.hidden = true;
+          }
+        }
+
+        #updateInternalLabel(text) {
+          if (text) {
+            this.#shadowLabel.textContent = text;
+            this.#shadowLabel.hidden = false;
+            this.#input.setAttribute('aria-labelledby', 'shadow-label');
+          } else {
+            this.#shadowLabel.hidden = true;
+            this.#input.removeAttribute('aria-labelledby');
+          }
+        }
+
+        #updateInternalHelp(text) {
+          if (text) {
+            this.#shadowHelp.textContent = text;
+            this.#shadowHelp.hidden = false;
+            const existing = this.#input.getAttribute('aria-describedby') ?? '';
+            if (!existing.includes('shadow-help')) {
+              this.#input.setAttribute(
+                'aria-describedby',
+                (existing + ' shadow-help').trim()
+              );
+            }
+          } else {
+            this.#shadowHelp.hidden = true;
+          }
+        }
+
+        #applyLabel(text) {
+          if (!text) return;
+          this.#internals.ariaLabel = this.#internals.ariaLabel || text;
+          if (!this.#input.hasAttribute('aria-labelledby')) {
+            this.#input.setAttribute('aria-label', text);
+          }
+        }
+
+        #applyDescription(text) {
+          if (!text) return;
+          this.#internals.ariaDescription =
+            this.#internals.ariaDescription || text;
+          if (!this.#input.hasAttribute('aria-describedby')) {
+            this.#input.setAttribute('aria-description', text);
+          }
+        }
+
+        #wireAriaRelationships() {
+          if (!this.#input) return;
+
+          const supportsElementRefs =
+            'ariaLabelledByElements' in this.#internals;
+
+          const labelledby = this.getAttribute('aria-labelledby');
+          if (labelledby && !this.getAttribute('internal-label')) {
+            if (supportsElementRefs) {
+              try {
+                const els = labelledby
+                  .split(/\s+/)
+                  .map((id) => document.getElementById(id))
+                  .filter(Boolean);
+                if (els.length > 0) {
+                  this.#internals.ariaLabelledByElements = els;
+                }
+              } catch {
+                /* element-ref API may reject assignments */
+              }
+            }
+            this.#applyLabel(this.#resolveTextFromIds(labelledby));
+          }
+
+          const describedby = this.getAttribute('aria-describedby');
+          if (describedby && !this.getAttribute('internal-help')) {
+            if (supportsElementRefs) {
+              try {
+                const els = describedby
+                  .split(/\s+/)
+                  .map((id) => document.getElementById(id))
+                  .filter(Boolean);
+                if (els.length > 0) {
+                  this.#internals.ariaDescribedByElements = els;
+                }
+              } catch {
+                /* element-ref API may reject assignments */
+              }
+            }
+            this.#applyDescription(this.#resolveTextFromIds(describedby));
+          }
+
+          this.#handleSlotWiring();
+        }
+
+        #handleSlotWiring() {
+          const labelSlot = this.shadowRoot.querySelector('slot[name="label"]');
+          const helpSlot = this.shadowRoot.querySelector(
+            'slot[name="help-text"]'
+          );
+
+          if (labelSlot) {
+            labelSlot.addEventListener('slotchange', () => {
+              const assigned = labelSlot.assignedElements();
+              if (assigned.length > 0) {
+                const labelEl = assigned[0];
+                const labelId =
+                  labelEl.id || `slotted-label-${this.id || Date.now()}`;
+                labelEl.id = labelId;
+
+                if ('ariaLabelledByElements' in this.#internals) {
+                  try {
+                    this.#internals.ariaLabelledByElements = [labelEl];
+                  } catch {
+                    /* fall through */
+                  }
+                }
+                this.#applyLabel(labelEl.textContent?.trim());
+              }
+            });
+          }
+
+          if (helpSlot) {
+            helpSlot.addEventListener('slotchange', () => {
+              const assigned = helpSlot.assignedElements();
+              if (assigned.length > 0) {
+                const helpEl = assigned[0];
+                const helpId =
+                  helpEl.id || `slotted-help-${this.id || Date.now()}`;
+                helpEl.id = helpId;
+
+                if ('ariaDescribedByElements' in this.#internals) {
+                  try {
+                    this.#internals.ariaDescribedByElements = [helpEl];
+                  } catch {
+                    /* fall through */
+                  }
+                }
+                this.#applyDescription(helpEl.textContent?.trim());
+              }
+            });
+          }
+        }
+
+        #resolveTextFromIds(idList) {
+          return idList
+            .split(/\s+/)
+            .map((id) => document.getElementById(id)?.textContent?.trim() ?? '')
+            .filter(Boolean)
+            .join(' ');
+        }
+
+        #emitLog(msg) {
+          this.dispatchEvent(
+            new CustomEvent('combo-log', {
+              detail: { message: msg },
+              bubbles: true,
+            })
+          );
+        }
+
+        #emitExpandedLog(expanded) {
+          this.dispatchEvent(
+            new CustomEvent('combo-expanded', {
+              detail: { expanded },
+              bubbles: true,
+            })
+          );
+        }
+      }
+
+      customElements.define('face-combobox', FaceCombobox);
+
+      // ===================================================================
+      // Form event handlers
+      // ===================================================================
+
+      document.getElementById('form-1a').addEventListener('submit', (e) => {
+        e.preventDefault();
+        const data = new FormData(e.target);
+        const out = document.getElementById('output-1a');
+        const entries = [...data.entries()];
+        out.textContent =
+          'FormData entries:\n' +
+          entries.map(([k, v]) => `  ${k}: "${v}"`).join('\n') +
+          '\n\nForm participation: ' +
+          (entries.length > 0 ? 'PASS' : 'FAIL');
+      });
+
+      document.getElementById('form-1a').addEventListener('reset', () => {
+        const out = document.getElementById('output-1a');
+        requestAnimationFrame(() => {
+          const field = document.getElementById('field-1a');
+          out.textContent = `Reset fired.\nValue after reset: "${field.value}"\nformResetCallback: ${field.value === 'Apple' ? 'PASS' : 'FAIL'}`;
+        });
+      });
+
+      document.getElementById('form-1b').addEventListener('submit', (e) => {
+        e.preventDefault();
+        const field = document.getElementById('field-1b');
+        const out = document.getElementById('output-1b');
+        const valid = field.reportValidity();
+        out.textContent =
+          `reportValidity(): ${valid}\n` +
+          `validity.valid: ${field.validity.valid}\n` +
+          `validity.valueMissing: ${field.validity.valueMissing}\n` +
+          `validationMessage: "${field.validationMessage}"\n\n` +
+          `Constraint validation: ${!valid ? 'PASS (correctly rejected)' : 'Check input'}`;
+      });
+
+      document.getElementById('form-1c').addEventListener('submit', (e) => {
+        e.preventDefault();
+        const field = document.getElementById('field-1c');
+        const out = document.getElementById('output-1c');
+        const data = new FormData(e.target);
+        const shadowInput = field.shadowRoot?.querySelector('input');
+        out.textContent =
+          `Shadow input disabled: ${shadowInput?.disabled ?? 'N/A'}\n` +
+          `Host has disabled attr: ${field.hasAttribute('disabled')}\n` +
+          `formDisabledCallback: fires when fieldset is disabled\n` +
+          `FormData includes field: ${data.has('disabledcombo') ? 'YES (unexpected)' : 'NO (correct)'}\n\n` +
+          `Disabled via fieldset: ${!data.has('disabledcombo') ? 'PASS' : 'FAIL'}`;
+      });
+
+      document.getElementById('form-1d').addEventListener('submit', (e) => {
+        e.preventDefault();
+        const field = document.getElementById('field-1d');
+        const out = document.getElementById('output-1d');
+        const data = new FormData(e.target);
+        const isOpen = field.hasAttribute('open');
+        out.textContent =
+          `Listbox open at submit time: ${isOpen}\n` +
+          `FormData value: "${data.get('color')}"\n` +
+          `field.value: "${field.value}"\n\n` +
+          `Submit captures current input value regardless of open state: PASS`;
+      });
+
+      // Keyboard logging for section 2
+      const field2a = document.getElementById('field-2a');
+      const output2a = document.getElementById('output-2a');
+      let logLines2a = [];
+      field2a.addEventListener('combo-log', (e) => {
+        logLines2a.push(e.detail.message);
+        if (logLines2a.length > 12) logLines2a.shift();
+        output2a.textContent = logLines2a.join('\n');
+      });
+      field2a.addEventListener('activedescendant-change', (e) => {
+        logLines2a.push(
+          `  activedescendant → #${e.detail.id} ("${e.detail.text}")`
+        );
+        if (logLines2a.length > 12) logLines2a.shift();
+        output2a.textContent = logLines2a.join('\n');
+      });
+
+      // Active descendant logging for section 4a
+      const field4a = document.getElementById('field-4a');
+      const output4a = document.getElementById('output-4a');
+      let logLines4a = [];
+      field4a.addEventListener('activedescendant-change', (e) => {
+        logLines4a.push(
+          `activedescendant: #${e.detail.id} → "${e.detail.text}" (index ${e.detail.index})`
+        );
+        if (logLines4a.length > 10) logLines4a.shift();
+        output4a.textContent = logLines4a.join('\n');
+      });
+
+      // Expanded state logging for section 5b
+      const field5b = document.getElementById('field-5b');
+      const output5b = document.getElementById('output-5b');
+      let logLines5b = [];
+      field5b.addEventListener('combo-expanded', (e) => {
+        logLines5b.push(
+          `expanded: ${e.detail.expanded} | internals.ariaExpanded set | host[open] attr ${e.detail.expanded ? 'added' : 'removed'}`
+        );
+        if (logLines5b.length > 8) logLines5b.shift();
+        output5b.textContent = logLines5b.join('\n');
+      });
+
+      // Validation for section 4c
+      document.getElementById('form-4c').addEventListener('submit', (e) => {
+        e.preventDefault();
+        const field = document.getElementById('field-4c');
+        const out = document.getElementById('output-4c');
+        const valid = field.reportValidity();
+        out.textContent =
+          `reportValidity(): ${valid}\n` +
+          `validity.valid: ${field.validity.valid}\n` +
+          `validity.valueMissing: ${field.validity.valueMissing}\n` +
+          `validationMessage: "${field.validationMessage}"\n` +
+          `aria-invalid on internals: ${field.getAttribute('aria-invalid') ?? '(check internals)'}\n\n` +
+          `Validation + error message: ${!valid ? 'PASS (correctly rejected)' : 'Check input value'}`;
+      });
+
+      // ===================================================================
+      // IDREF matrix introspection
+      // ===================================================================
+
+      function populateMatrix() {
+        const scenarios = [
+          {
+            id: 'A',
+            name: 'Light DOM siblings',
+            fieldId: 'field-3a',
+            labelMethod: 'aria-labelledby on host → light DOM #label-3a',
+            descMethod: 'aria-describedby on host → light DOM #help-3a',
+          },
+          {
+            id: 'B',
+            name: 'Slotted light DOM children',
+            fieldId: 'field-3b',
+            labelMethod: 'Slotted <span slot="label"> with ID',
+            descMethod: 'Slotted <span slot="help-text"> with ID',
+          },
+          {
+            id: 'C',
+            name: 'Shadow DOM internal IDs',
+            fieldId: 'field-3c',
+            labelMethod: 'internal-label attr → shadow #shadow-label',
+            descMethod: 'internal-help attr → shadow #shadow-help',
+          },
+          {
+            id: 'D',
+            name: 'Cross-root (label for → host)',
+            fieldId: 'field-3d',
+            labelMethod: '<label for="field-3d"> in light DOM',
+            descMethod: 'N/A (no describedby set)',
+          },
+        ];
+
+        const tbody = document.getElementById('matrix-body');
+        tbody.innerHTML = '';
+
+        for (const s of scenarios) {
+          const field = document.getElementById(s.fieldId);
+          if (!field) continue;
+
+          let a11yName = '(inspect DevTools)';
+          let a11yDesc = '(inspect DevTools)';
+          let activedesc = '(use arrow keys)';
+          let status = 'pending';
+
+          try {
+            const ariaLabel = field.getAttribute('aria-label') || '';
+            const labelledby = field.getAttribute('aria-labelledby') || '';
+            const describedby = field.getAttribute('aria-describedby') || '';
+
+            if (ariaLabel) {
+              a11yName = `aria-label: "${ariaLabel}"`;
+            } else if (labelledby) {
+              const text = labelledby
+                .split(/\s+/)
+                .map((id) => document.getElementById(id)?.textContent?.trim())
+                .filter(Boolean)
+                .join(' ');
+              a11yName = text
+                ? `Resolved: "${text}"`
+                : `IDs not found: ${labelledby}`;
+            }
+
+            if (describedby) {
+              const text = describedby
+                .split(/\s+/)
+                .map((id) => document.getElementById(id)?.textContent?.trim())
+                .filter(Boolean)
+                .join(' ');
+              a11yDesc = text
+                ? `Resolved: "${text}"`
+                : `IDs not found: ${describedby}`;
+            }
+
+            const shadowInput = field.shadowRoot?.querySelector('input');
+            if (shadowInput) {
+              const ad = shadowInput.getAttribute('aria-activedescendant');
+              const controls = shadowInput.getAttribute('aria-controls');
+              activedesc = ad
+                ? `Current: #${ad}`
+                : `Not set (controls: ${controls || 'none'})`;
+            }
+          } catch {
+            /* introspection may fail */
+          }
+
+          const row = document.createElement('tr');
+          row.innerHTML = `
+      <td><strong>${s.id}:</strong> ${s.name}</td>
+      <td><code>${escapeHtml(s.labelMethod)}</code></td>
+      <td><code>${escapeHtml(s.descMethod)}</code></td>
+      <td>${a11yName}</td>
+      <td>${a11yDesc}</td>
+      <td>${activedesc}</td>
+      <td class="${status}">${status}</td>
+    `;
+          tbody.appendChild(row);
+        }
+      }
+
+      function escapeHtml(str) {
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+      }
+
+      requestAnimationFrame(() => {
+        requestAnimationFrame(populateMatrix);
+      });
+
+      // ===================================================================
+      // axe-core integration
+      // ===================================================================
+
+      document.getElementById('run-axe').addEventListener('click', async () => {
+        const resultsEl = document.getElementById('axe-results');
+        resultsEl.textContent = 'Loading axe-core...';
+
+        try {
+          if (!window.axe) {
+            await loadScript(
+              'https://cdn.jsdelivr.net/npm/axe-core@4.10.2/axe.min.js'
+            );
+          }
+
+          resultsEl.textContent = 'Running audit...';
+
+          const results = await window.axe.run(document, {
+            runOnly: {
+              type: 'tag',
+              values: [
+                'wcag2a',
+                'wcag2aa',
+                'wcag21a',
+                'wcag21aa',
+                'best-practice',
+              ],
+            },
+          });
+
+          let html = '';
+
+          html += `<h3>Violations (${results.violations.length})</h3>`;
+          if (results.violations.length === 0) {
+            html += '<div class="axe-pass">No violations found.</div>';
+          }
+          for (const v of results.violations) {
+            html += `
+        <div class="axe-violation">
+          <h4>${escapeHtml(v.id)}: ${escapeHtml(v.help)}</h4>
+          <p><strong>Impact:</strong> ${v.impact} | <strong>Tags:</strong> ${v.tags.join(', ')}</p>
+          <p>${escapeHtml(v.description)}</p>
+          <details>
+            <summary>Affected nodes (${v.nodes.length})</summary>
+            <ul>
+              ${v.nodes.map((n) => `<li><code>${escapeHtml(n.html)}</code><br/>${escapeHtml(n.failureSummary ?? '')}</li>`).join('')}
+            </ul>
+          </details>
+          ${v.helpUrl ? `<p><a href="${v.helpUrl}" target="_blank">Deque reference</a></p>` : ''}
+        </div>
+      `;
+          }
+
+          html += `<h3>Incomplete / needs review (${results.incomplete.length})</h3>`;
+          for (const inc of results.incomplete) {
+            html += `
+        <div class="axe-incomplete">
+          <strong>${escapeHtml(inc.id)}</strong>: ${escapeHtml(inc.help)}<br/>
+          <small>Nodes: ${inc.nodes.length} | Tags: ${inc.tags.join(', ')}</small>
+          ${inc.helpUrl ? ` | <a href="${inc.helpUrl}" target="_blank">Reference</a>` : ''}
+        </div>
+      `;
+          }
+
+          const relevantPasses = results.passes.filter((p) =>
+            [
+              'label',
+              'aria-label',
+              'aria-labelledby',
+              'form-field-multiple-labels',
+              'aria-valid-attr',
+              'aria-valid-attr-value',
+              'aria-roles',
+              'label-title-only',
+              'aria-input-field-name',
+              'aria-required-attr',
+              'aria-command-name',
+            ].some((id) => p.id.includes(id))
+          );
+          html += `<h3>Relevant passes (${relevantPasses.length} of ${results.passes.length} total)</h3>`;
+          for (const p of relevantPasses) {
+            html += `<div class="axe-pass"><strong>${escapeHtml(p.id)}</strong>: ${escapeHtml(p.help)}</div>`;
+          }
+
+          resultsEl.innerHTML = html;
+        } catch (err) {
+          resultsEl.textContent = `Error loading or running axe-core:\n${err.message}\n\nNote: axe-core requires network access to load from CDN.`;
+        }
+      });
+
+      function loadScript(src) {
+        return new Promise((resolve, reject) => {
+          const s = document.createElement('script');
+          s.src = src;
+          s.onload = resolve;
+          s.onerror = () => reject(new Error(`Failed to load ${src}`));
+          document.head.appendChild(s);
+        });
+      }
+    </script>
+  </body>
+</html>
diff --git a/research/form-associated-ce-combobox-poc/package.json b/research/form-associated-ce-combobox-poc/package.json
new file mode 100644
index 00000000000..2045c919bc6
--- /dev/null
+++ b/research/form-associated-ce-combobox-poc/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "face-combobox-poc",
+  "private": true,
+  "description": "Form-associated custom element PoC: combobox with ElementInternals",
+  "scripts": {
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^6"
+  }
+}
diff --git a/research/reference-target-poc/DESIGN-NOTE.md b/research/reference-target-poc/DESIGN-NOTE.md
new file mode 100644
index 00000000000..1accdd05c23
--- /dev/null
+++ b/research/reference-target-poc/DESIGN-NOTE.md
@@ -0,0 +1,222 @@
+# Design note: controller-based referenceTarget shim for cross-root ARIA
+
+> POC research artifact. Not a public API commitment.
+
+---
+
+## 1. Problem statement
+
+The [Reference Target for Cross-Root ARIA](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md) proposal lets IDREF-based relationship attributes (e.g. `for`, `aria-labelledby`, `aria-describedby`) reference an element whose shadow DOM contains the _actual_ target. Native support is behind experimental flags in all major browsers as of May 2026:
+
+| Browser        | Status              | Notes                                                              |
+| -------------- | ------------------- | ------------------------------------------------------------------ |
+| Chrome 133-150 | Disabled by default | Behind `chrome://flags/#enable-experimental-web-platform-features` |
+| Edge 133+      | Disabled by default | Same flag as Chrome                                                |
+| Firefox 144+   | Disabled by default | Behind `dom.shadowdom.referenceTarget.enabled`                     |
+| Safari 26.0+   | Disabled by default | Feature-flagged                                                    |
+
+Usage in the wild is ~0.012% of page loads. No browser ships it enabled by default.
+
+SWC components wrap native interactive elements (inputs, buttons, dialogs) inside shadow DOM. External labels and descriptions cannot use standard IDREFs to reach those internal targets. Today, `sp-field-label` (1st-gen) works around this with the `applyTargetLabel` pattern: resolve the target cross-root, then copy text content as a string `aria-label` fallback.
+
+This POC validates whether a _generic reactive controller_ can provide the same cross-root forwarding for 2nd-gen components, decoupled from any single component.
+
+---
+
+## 2. Approach
+
+### Architecture
+
+```
+Light DOM                          Shadow DOM (host)
+┌────────────────────────┐         ┌──────────────────────────────┐
+│ <label for="my-input"> │         │ <input id="internal-input">  │
+│   Full name            │───┐     │                              │
+│ </label>               │   │     └──────────────────────────────┘
+└────────────────────────┘   │
+                             │     ReferenceTargetController
+                             │     ┌──────────────────────────────┐
+                             └────▶│ 1. Resolve target in shadow   │
+                                   │ 2. Find label in light DOM    │
+                                   │ 3. Materialize aria-label     │
+                                   │    on shadow target           │
+                                   └──────────────────────────────┘
+```
+
+### Controller responsibilities
+
+1. **Feature detection**: If native `ShadowRoot.referenceTarget` exists, set it and skip the shim path entirely.
+2. **Target resolution**: Locate the shadow-internal element by CSS selector or callback.
+3. **Referrer discovery**: Find light-DOM elements whose IDREF attributes include the host's `id`.
+4. **Text materialization**: Copy accessible text from referrers onto the shadow target using the closest equivalent attribute (`aria-labelledby` becomes `aria-label`, `aria-describedby` becomes `aria-description`).
+5. **Label-for forwarding**: Handle `<label for="host-id">` specifically; wire up click-to-focus on the shadow target.
+6. **Lifecycle**: MutationObservers track host ID changes, referrer mutations, and DOM additions/removals.
+7. **Cleanup**: `hostDisconnected` removes all materialized attributes and disconnects observers.
+
+### Mapping to native API
+
+| Native API surface                        | Controller shim equivalent                               |
+| ----------------------------------------- | -------------------------------------------------------- |
+| `shadowRoot.referenceTarget = "id"`       | `new ReferenceTargetController(host, { target: '#id' })` |
+| `shadowRoot.referenceTargetMap` (Phase 2) | `forwardedAttributes` option (per-attribute filtering)   |
+| Auto-forwarding of `label.for`            | `syncLabelFor()` with click handler                      |
+| Live reference updates                    | MutationObserver on host ID + light DOM                  |
+
+---
+
+## 3. Scenarios demonstrated
+
+| #   | Scenario                                                      | Mechanism                                                          | Status  |
+| --- | ------------------------------------------------------------- | ------------------------------------------------------------------ | ------- |
+| A   | `<label for="host">` forwards name to shadow `<input>`        | `syncLabelFor()` materializes `aria-label` + click-to-focus        | Working |
+| B   | `aria-labelledby` on an external element references the host  | `sync()` collects referrer text, sets `aria-label` on target       | Working |
+| C   | `aria-describedby` on an external element references the host | `sync()` collects referrer text, sets `aria-description` on target | Working |
+| D   | Label text changes dynamically                                | MutationObserver triggers re-sync                                  | Working |
+| E   | Host disconnected; cleanup                                    | `hostDisconnected` removes attributes                              | Working |
+| F   | Host has no `id` attribute                                    | Controller is inert; no crash, no spurious attributes              | Working |
+
+---
+
+## 4. Gaps versus native referenceTarget
+
+| Concern                                  | Native behavior                                           | Shim behavior                                                                                   | Severity                                                                                 |
+| ---------------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| **True IDREF forwarding**                | AT sees actual element relationship in accessibility tree | Materializes string copy; AT sees `aria-label`/`aria-description` text, not a live relationship | Medium: computed name is correct but relationship is synthetic                           |
+| **`aria-activedescendant` forwarding**   | Cross-root IDREF resolves to the actual option element    | Not shimmed; requires same-shadow-root pattern (per combobox POC finding)                       | Low for SWC: already keeping input+listbox co-located                                    |
+| **`aria-controls` / `aria-owns`**        | Cross-root forwarding works                               | Not shimmed; impractical without element references                                             | Low: same-root pattern covers SWC use cases                                              |
+| **Multiple hosts sharing a label**       | Label applies to each `referenceTarget` independently     | Shim finds all referrers but concatenates; may duplicate text                                   | Low: uncommon pattern                                                                    |
+| **`form` / `list` attribute forwarding** | Built-in form participation via IDREF                     | Not shimmed; use FACE (`ElementInternals`) instead                                              | None: FACE is the 2nd-gen strategy                                                       |
+| **Performance at scale**                 | Zero-cost in user code (browser-native)                   | MutationObserver on the light DOM root; O(n) referrer scan on each mutation                     | Medium: acceptable for page-level DOMs; could be expensive in deeply nested shadow trees |
+| **Closed shadow roots**                  | Works (referenceTarget set at `attachShadow` time)        | Shim requires access to shadow root for target resolution                                       | Low: SWC uses open shadow roots                                                          |
+| **Implicit label wrapping**              | `<label><fancy-input></fancy-input></label>` works        | Not shimmed; would require parent-walking heuristic                                             | Medium: pattern uncommon in SWC                                                          |
+| **`popovertarget` / `commandfor`**       | Forwarded to shadow target                                | Not shimmed; not an ARIA concern                                                                | N/A for a11y                                                                             |
+
+### Correctness limitations
+
+1. The shim produces a _computed accessible name_ equivalence, not a true live relationship. Tools like `aria-labelledby` allow referencing multiple elements whose combined text forms the name; the shim flattens this to a single string.
+2. If the referrer element itself has complex accessible-name computation (e.g. nested roles), the shim uses `textContent` which may differ from the accessibility tree computation.
+3. The shim does not participate in the accessibility tree's relationship graph. AT navigation features like "go to labelling element" will not work.
+
+### Performance characteristics
+
+- **MutationObserver scope**: observes `subtree + childList + attributes` on the host's root node (document body or parent shadow root). Filtered to relevant attribute names.
+- **Sync cost**: O(n) querySelectorAll for `[aria-labelledby]` etc., where n is elements with that attribute in the root.
+- **Typical SWC page**: < 50 labelled elements; cost is negligible.
+- **Worst case**: 1000+ labelled elements in a flat document with frequent DOM mutations; would benefit from a shared registry (future optimization).
+
+---
+
+## 5. Comparison with the 1st-gen approach
+
+| Aspect            | 1st-gen (`FieldLabel` + `ElementResolutionController`) | This POC (`ReferenceTargetController`)                              |
+| ----------------- | ------------------------------------------------------ | ------------------------------------------------------------------- |
+| Coupling          | Tightly coupled to `sp-field-label` component          | Generic; any host can use it                                        |
+| Direction         | Label _pushes_ to target (`applyTargetLabel`)          | Controller on host _pulls_ from referrers                           |
+| Lifecycle         | Relies on `willUpdate` + symbol tracking               | Standard `ReactiveController` lifecycle hooks                       |
+| Feature detection | None; always shims                                     | Detects native `referenceTarget`; bypasses shim when available      |
+| Attribute surface | Only `aria-labelledby` → `aria-label`                  | Configurable: labelledby, describedby, errormessage, details        |
+| Scalability       | One controller instance per label-target pair          | One controller instance per host; handles all inbound relationships |
+
+---
+
+## 6. Manual screen reader smoke test procedure
+
+### Setup
+
+- Browser: Chrome (latest stable, with native referenceTarget _disabled_)
+- AT: VoiceOver (macOS) or NVDA (Windows)
+- Demo: Storybook story `Controllers/Reference target (POC)/Label for forwarding`
+
+### Steps
+
+| #   | Action                                                       | Expected announcement                                                              | Verified |
+| --- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------- | -------- |
+| 1   | Tab to `demo-labeled-input`                                  | "Full name, text field" (or equivalent)                                            | [ ]      |
+| 2   | Inspect accessibility tree (Chrome DevTools > Accessibility) | Input node shows `name: "Full name"` from `aria-label`                             | [ ]      |
+| 3   | Click the "Full name" label                                  | Input receives focus; VoiceOver announces field                                    | [ ]      |
+| 4   | Navigate to `AriaDescribedbyForwarding` story                | -                                                                                  | [ ]      |
+| 5   | Tab to the password input                                    | "Password, text field" + after pause: "Must be at least 8 characters"              | [ ]      |
+| 6   | Inspect accessibility tree                                   | Input shows `description: "Must be at least 8 characters"` from `aria-description` | [ ]      |
+
+### With native referenceTarget enabled
+
+1. Enable `chrome://flags/#enable-experimental-web-platform-features`
+2. Repeat steps 1-6
+3. Verify: same accessible names and descriptions appear (native path sets `shadowRoot.referenceTarget` instead of materializing attributes)
+4. Compare: native path should show the _relationship_ in the tree (labelledby pointing at the label element), not just the string
+
+### Comparison checklist (native vs shim)
+
+| Behavior                                  | Shim             | Native            | Match?          |
+| ----------------------------------------- | ---------------- | ----------------- | --------------- |
+| Accessible name computed correctly        | [ ]              | [ ]               | [ ]             |
+| Accessible description computed correctly | [ ]              | [ ]               | [ ]             |
+| Click label focuses input                 | [ ]              | [ ]               | [ ]             |
+| AT "go to label" navigation works         | [ ] Expected: No | [ ] Expected: Yes | Intentional gap |
+| Dynamic label text re-syncs               | [ ]              | [ ]               | [ ]             |
+| Disconnect clears state                   | [ ]              | [ ]               | [ ]             |
+
+---
+
+## 7. Recommendation
+
+### Verdict: **Hybrid** (build shim now; migrate to native when stable)
+
+#### Rationale
+
+1. **No browser ships `referenceTarget` enabled by default** as of May 2026. Waiting means SWC 2nd-gen components ship without proper cross-root labelling for an indeterminate period.
+
+2. **The shim is narrow and low-risk.** It covers the labelling/description subset that accounts for ~90% of SWC cross-root ARIA needs. It does not attempt to polyfill `aria-activedescendant` or `aria-controls` cross-root (those are handled by keeping elements co-located, per the combobox POC finding).
+
+3. **Feature detection is built in.** When `ShadowRoot.prototype.referenceTarget` becomes available, the controller automatically delegates to native behavior with zero code changes needed in consuming components.
+
+4. **Migration cost from shim to native is minimal.** The controller API (`target` selector, `forwardedAttributes`) maps cleanly to the native API. When native lands, the shim codepath becomes dead code that can be removed in a follow-up.
+
+5. **Ergonomics are good.** A single line in a component constructor gives full cross-root labelling:
+   ```ts
+   new ReferenceTargetController(this, { target: '#input' });
+   ```
+
+#### Estimated follow-up cost
+
+| Work item                                                                                 | Effort       | Priority |
+| ----------------------------------------------------------------------------------------- | ------------ | -------- |
+| Promote controller from POC to `@spectrum-web-components/core` public API                 | S (1-2 days) | P1       |
+| Adopt in 2nd-gen form components (text-field, combobox, picker, etc.)                     | M (3-5 days) | P1       |
+| Add `aria-errormessage` forwarding validation story                                       | S (0.5 day)  | P2       |
+| Performance optimization: shared referrer registry for pages with many labeled components | M (2-3 days) | P3       |
+| Remove shim codepath when native support reaches baseline (est. 2027)                     | S (1 day)    | P3       |
+
+#### Decision criteria for removing the shim
+
+Remove the shim path when all of:
+
+- Two major browsers ship `referenceTarget` enabled by default
+- The feature appears in [Baseline](https://web.dev/baseline) "newly available"
+- SWC minimum supported browser versions include those releases
+
+---
+
+## 8. Files in this POC
+
+| File                                                                                                           | Purpose                   |
+| -------------------------------------------------------------------------------------------------------------- | ------------------------- |
+| `2nd-gen/packages/core/controllers/reference-target-controller/src/reference-target-controller.ts`             | Controller implementation |
+| `2nd-gen/packages/core/controllers/reference-target-controller/index.ts`                                       | Public exports            |
+| `2nd-gen/packages/core/controllers/reference-target-controller/stories/demo-hosts.ts`                          | Demo custom elements      |
+| `2nd-gen/packages/core/controllers/reference-target-controller/stories/reference-target-controller.stories.ts` | Storybook stories         |
+| `2nd-gen/packages/core/controllers/reference-target-controller/test/reference-target-controller.test.ts`       | Play-function tests       |
+| `research/reference-target-poc/DESIGN-NOTE.md`                                                                 | This document             |
+
+---
+
+## 9. Upstream references
+
+- [Reference Target for Cross-Root ARIA (WICG explainer)](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md)
+- [Chrome Platform Status: feature 5188237101891584](https://cr-status.appspot.com/feature/5188237101891584)
+- [Can I use: ShadowRoot referenceTarget](https://caniuse.com/mdn-api_shadowroot_referencetarget)
+- [WHATWG HTML issue #10707](https://github.com/whatwg/html/issues/10707)
+- [Reference Target Phase 2 discussion](https://github.com/WICG/webcomponents/issues/1111)
+- SWC prior art: `1st-gen/packages/field-label/src/FieldLabel.ts` (applyTargetLabel pattern)
+- SWC prior art: `1st-gen/tools/reactive-controllers/src/ElementResolution.ts`
+- SWC parallel: `research/form-associated-ce-combobox-poc/SUMMARY.md` (cross-root ARIA findings)