From d343ed07a630e8d8a340b59b62d3104ac32ba99a Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Sun, 17 May 2026 16:40:35 +0530
Subject: [PATCH 1/3] chore: add PoC for combobox as form-associated custom
 element

- self-contained FACE combobox demo exercising ElementInternals
  for form value, validation, keyboard, and a11y patterns
- documents aria-activedescendant, aria-controls, and popup
  ownership behavior within shadow DOM boundaries
- includes IDREF matrix (light DOM, slotted, shadow, cross-root)
  with browser pass/fail findings matching the text-field PoC
- adds QA tree inspection results confirming role, name, value,
  and expanded/collapsed states render correctly in the a11y tree

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../SUMMARY.md                                |  493 +++++
 .../index.html                                | 1944 +++++++++++++++++
 .../package.json                              |   12 +
 3 files changed, 2449 insertions(+)
 create mode 100644 research/form-associated-ce-combobox-poc/SUMMARY.md
 create mode 100644 research/form-associated-ce-combobox-poc/index.html
 create mode 100644 research/form-associated-ce-combobox-poc/package.json

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 0000000000..c87ec908f2
--- /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 0000000000..6188156018
--- /dev/null
+++ b/research/form-associated-ce-combobox-poc/index.html
@@ -0,0 +1,1944 @@
+<!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 0000000000..2045c919bc
--- /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"
+  }
+}

From 558acbab15f27c48b01750807ef0f09b5b83c9b8 Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Tue, 19 May 2026 21:52:13 +0530
Subject: [PATCH 2/3] chore: add internals.role = 'combobox' to FACE PoC

Sets this.#internals.role on the host element so reviewers can inspect
how labelling constraints change when the host carries the combobox role
via ElementInternals rather than relying solely on the shadow input's
role attribute.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 research/form-associated-ce-combobox-poc/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/research/form-associated-ce-combobox-poc/index.html b/research/form-associated-ce-combobox-poc/index.html
index 6188156018..bf68eede76 100644
--- a/research/form-associated-ce-combobox-poc/index.html
+++ b/research/form-associated-ce-combobox-poc/index.html
@@ -757,6 +757,7 @@ <h2>7. IDREF matrix results</h2>
         constructor() {
           super();
           this.#internals = this.attachInternals();
+          this.#internals.role = 'combobox';
 
           this.#inputId = `combo-input-${FaceCombobox.#nextId}`;
           this.#listboxId = `combo-listbox-${FaceCombobox.#nextId}`;

From 1bbe6f93817df2fbaa729383cd8abde262e2dd15 Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Wed, 20 May 2026 13:15:01 +0530
Subject: [PATCH 3/3] chore: split PoC into separate files, remove cross-root
 IDREF workarounds

Restructure for StackBlitz forkability:
- face-combobox.js: component (pure ElementInternals, no cross-root hacks)
- demo.js: form handlers, logging, axe-core audit
- styles.css: page-level styles
- index.html: demo scenarios

Removed all JS that bridges cross-root IDREFs:
- No #wireAriaRelationships / ariaLabelledByElements
- No #handleSlotWiring / slotchange listeners
- No #wireImplicitLabel / internals.labels text extraction
- No dual-write to shadow input for labels from light DOM

Added USE_INTERNALS_ROLE toggle (line 17 of face-combobox.js) so
reviewers can compare tree behavior with/without internals.role set.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../form-associated-ce-combobox-poc/demo.js   |  207 ++
 .../face-combobox.js                          |  708 +++++++
 .../index.html                                | 1728 +----------------
 .../styles.css                                |  194 ++
 4 files changed, 1187 insertions(+), 1650 deletions(-)
 create mode 100644 research/form-associated-ce-combobox-poc/demo.js
 create mode 100644 research/form-associated-ce-combobox-poc/face-combobox.js
 create mode 100644 research/form-associated-ce-combobox-poc/styles.css

diff --git a/research/form-associated-ce-combobox-poc/demo.js b/research/form-associated-ce-combobox-poc/demo.js
new file mode 100644
index 0000000000..15acbc676d
--- /dev/null
+++ b/research/form-associated-ce-combobox-poc/demo.js
@@ -0,0 +1,207 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ *
+ * Demo page event handlers for form submission, logging, and axe-core audit.
+ */
+
+// ─── Form 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 + activedescendant logging ──────────────────────────────────────
+
+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');
+});
+
+// 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');
+});
+
+// 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');
+});
+
+// Section 4c validation
+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\n` +
+    `Validation + error message: ${!valid ? 'PASS (correctly rejected)' : 'Check input value'}`;
+});
+
+// ─── axe-core ─────────────────────────────────────────────────────────────────
+
+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>${esc(v.id)}: ${esc(v.help)}</h4>
+          <p><strong>Impact:</strong> ${v.impact} | <strong>Tags:</strong> ${v.tags.join(', ')}</p>
+          <p>${esc(v.description)}</p>
+          <details>
+            <summary>Affected nodes (${v.nodes.length})</summary>
+            <ul>${v.nodes.map((n) => `<li><code>${esc(n.html)}</code><br/>${esc(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>${esc(inc.id)}</strong>: ${esc(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', 'aria-valid-attr', 'aria-roles', 'aria-input-field-name', 'aria-required-attr'].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>${esc(p.id)}</strong>: ${esc(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);
+  });
+}
+
+function esc(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
diff --git a/research/form-associated-ce-combobox-poc/face-combobox.js b/research/form-associated-ce-combobox-poc/face-combobox.js
new file mode 100644
index 0000000000..6fbb50658c
--- /dev/null
+++ b/research/form-associated-ce-combobox-poc/face-combobox.js
@@ -0,0 +1,708 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ *
+ * Minimal form-associated combobox custom element using ElementInternals.
+ *
+ * This file intentionally does NOT include cross-root IDREF workarounds.
+ * It shows what ElementInternals provides out of the box.
+ *
+ * Toggle USE_INTERNALS_ROLE below to compare behavior with and without
+ * setting internals.role on the host element.
+ */
+
+// ─── Configuration ──────────────────────────────────────────────────────────
+// Set to true to assign internals.role = 'combobox' on the host.
+// Set to false to leave the host without a role (shadow input carries role).
+const USE_INTERNALS_ROLE = true;
+// ─────────────────────────────────────────────────────────────────────────────
+
+class FaceCombobox extends HTMLElement {
+  static formAssociated = true;
+
+  static get observedAttributes() {
+    return [
+      'value',
+      'placeholder',
+      'required',
+      'disabled',
+      'options',
+      'internal-label',
+      'internal-help',
+      'aria-label',
+    ];
+  }
+
+  #internals;
+  #input;
+  #listbox;
+  #trigger;
+  #shadowLabel;
+  #shadowHelp;
+  #options = [];
+  #filteredOptions = [];
+  #activeIndex = -1;
+  #isOpen = false;
+  #inputId;
+  #listboxId;
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+
+    if (USE_INTERNALS_ROLE) {
+      this.#internals.role = 'combobox';
+    }
+
+    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;
+        }
+      </style>
+
+      <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>
+
+      <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', () => {
+      requestAnimationFrame(() => {
+        if (!this.shadowRoot.contains(this.shadowRoot.activeElement)) {
+          this.#close();
+        }
+      });
+    });
+  }
+
+  static #nextId = 0;
+
+  connectedCallback() {
+    this.#syncFromAttributes();
+    this.#syncValue();
+    this.#validate();
+  }
+
+  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 'aria-label':
+        if (newVal !== null) {
+          this.#internals.ariaLabel = newVal;
+          this.#input.setAttribute('aria-label', newVal);
+        }
+        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.#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]);
+        }
+        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();
+        }
+        break;
+
+      case 'End':
+        if (this.#isOpen && this.#filteredOptions.length > 0) {
+          e.preventDefault();
+          this.#activeIndex = this.#filteredOptions.length - 1;
+          this.#updateActive();
+        }
+        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.dispatchEvent(
+        new CustomEvent('activedescendant-change', {
+          detail: {
+            id: activeOpt.id,
+            text: activeOpt.textContent,
+            index: this.#activeIndex,
+          },
+          bubbles: true,
+        })
+      );
+    } else {
+      this.#input.removeAttribute('aria-activedescendant');
+    }
+  }
+
+  #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.dispatchEvent(
+      new CustomEvent('combo-expanded', {
+        detail: { expanded: true },
+        bubbles: 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.dispatchEvent(
+      new CustomEvent('combo-expanded', {
+        detail: { expanded: false },
+        bubbles: true,
+      })
+    );
+  }
+
+  #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 hostAriaLabel = this.getAttribute('aria-label');
+    if (hostAriaLabel) {
+      this.#internals.ariaLabel = hostAriaLabel;
+      this.#input.setAttribute('aria-label', 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.#internals.ariaInvalid = 'true';
+    } else {
+      this.#internals.setValidity({});
+      this.#internals.ariaInvalid = 'false';
+    }
+  }
+
+  #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;
+    }
+  }
+
+  #emitLog(msg) {
+    this.dispatchEvent(
+      new CustomEvent('combo-log', {
+        detail: { message: msg },
+        bubbles: true,
+      })
+    );
+  }
+}
+
+customElements.define('face-combobox', FaceCombobox);
diff --git a/research/form-associated-ce-combobox-poc/index.html b/research/form-associated-ce-combobox-poc/index.html
index bf68eede76..8164d33813 100644
--- a/research/form-associated-ce-combobox-poc/index.html
+++ b/research/form-associated-ce-combobox-poc/index.html
@@ -4,254 +4,39 @@
 
   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.
+
+  Files:
+    - face-combobox.js : Component definition (no cross-root IDREF workarounds)
+    - demo.js          : Form handlers, logging, axe-core audit
+    - styles.css       : Page-level styles
+    - index.html       : This file (demo scenarios)
 -->
 <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>
+    <link rel="stylesheet" href="styles.css" />
   </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.
+      combobox-shaped control (text input + listbox). This version has
+      <strong>no cross-root IDREF workarounds</strong> — it shows what
+      <code>ElementInternals</code> does out of the box.
     </p>
 
+    <div class="config-banner">
+      <strong>Configuration:</strong> Open
+      <code>face-combobox.js</code> and toggle
+      <code>USE_INTERNALS_ROLE</code> (line 17) between
+      <code>true</code> / <code>false</code> to compare behavior with and
+      without <code>internals.role = 'combobox'</code> on the host element.
+    </div>
+
     <!-- ================================================================== -->
-    <!-- SECTION 1: form participation (FormData, reset, validation)        -->
+    <!-- SECTION 1: form participation                                      -->
     <!-- ================================================================== -->
 
     <h2>1. Native form participation</h2>
@@ -273,15 +58,11 @@ <h3>1a. FormData and submit</h3>
           <button type="reset">Reset</button>
         </div>
       </form>
-      <div class="output" id="output-1a">
-        Submit or reset the form to see results.
-      </div>
+      <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>
+      <h3>1b. Constraint validation (<code>required</code>)</h3>
       <form id="form-1b" novalidate>
         <div class="field-group">
           <label for="field-1b">Country (required)</label>
@@ -298,15 +79,11 @@ <h3>
           <button type="submit">Submit</button>
         </div>
       </form>
-      <div class="output" id="output-1b">
-        Submit with no selection to see constraint validation.
-      </div>
+      <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>
+      <h3>1c. Disabled state via <code>fieldset</code></h3>
       <form id="form-1c">
         <fieldset disabled>
           <legend>Disabled fieldset</legend>
@@ -324,9 +101,7 @@ <h3>
           <button type="submit">Submit</button>
         </div>
       </form>
-      <div class="output" id="output-1c">
-        Field should be disabled via ancestor fieldset.
-      </div>
+      <div class="output" id="output-1c">Field should be disabled via ancestor fieldset.</div>
     </div>
 
     <div class="scenario">
@@ -341,18 +116,14 @@ <h3>1d. Submit with listbox open vs closed</h3>
             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.
+            Try submitting while the listbox is open vs 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 class="output" id="output-1d">Submit to see which value is captured.</div>
     </div>
 
     <!-- ================================================================== -->
@@ -362,15 +133,9 @@ <h3>1d. Submit with listbox open vs closed</h3>
     <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.
+      Follows the
+      <a href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/" target="_blank">APG combobox pattern</a>.
+      ArrowDown/Up to navigate, Enter to select, Escape to close.
     </div>
 
     <div class="scenario">
@@ -386,81 +151,68 @@ <h3>2a. Keyboard nav and activedescendant</h3>
           ></face-combobox>
         </div>
       </form>
-      <div class="output" id="output-2a">
-        Keyboard events will be logged here.
-      </div>
+      <div class="output" id="output-2a">Keyboard events will be logged here.</div>
     </div>
 
     <!-- ================================================================== -->
-    <!-- SECTION 3: IDREF matrix scenarios                                  -->
+    <!-- SECTION 3: labelling — what works out of the box?                  -->
     <!-- ================================================================== -->
 
-    <h2>3. IDREF matrix: label and description wiring</h2>
+    <h2>3. Labelling scenarios (no cross-root workarounds)</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.
+      These scenarios show what the browser resolves <strong>natively</strong>
+      via <code>ElementInternals</code> — no JS to bridge cross-root IDREFs.
+      Inspect the a11y tree in DevTools to see which names resolve.
     </div>
 
-    <!-- Scenario A: light DOM siblings -->
+    <!-- Scenario A: <label for="host-id"> -->
     <div class="scenario">
-      <h3>Scenario A: light DOM label and help as siblings</h3>
+      <h3>Scenario A: <code>&lt;label for&gt;</code> pointing at host</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.
+        With <code>internals.role</code> set, the host IS the combobox.
+        Does <code>&lt;label for&gt;</code> label it directly?
       </p>
       <form id="form-3a">
         <div class="field-group">
-          <label id="label-3a">Timezone</label>
+          <label for="field-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>
+          <span class="help-text">Select your primary timezone.</span>
         </div>
       </form>
     </div>
 
-    <!-- Scenario B: slotted light DOM children with IDs -->
+    <!-- Scenario B: host aria-label attribute -->
     <div class="scenario">
-      <h3>Scenario B: IDs on slotted light DOM children</h3>
+      <h3>Scenario B: <code>aria-label</code> on host</h3>
       <p>
-        Consumer projects content into the component via slots; IDs live on the
-        slotted elements.
+        Host has <code>aria-label="Department"</code>. Does the tree
+        show "Department" as the combobox name?
       </p>
-      <form id="form-3b-form">
+      <form id="form-3b">
         <div class="field-group">
           <face-combobox
             id="field-3b"
             name="department"
+            aria-label="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>
+          ></face-combobox>
         </div>
       </form>
     </div>
 
-    <!-- Scenario C: shadow DOM internal IDs -->
+    <!-- Scenario C: internal-label (shadow DOM) -->
     <div class="scenario">
-      <h3>Scenario C: IDs inside shadow DOM (internal wiring)</h3>
+      <h3>Scenario C: <code>internal-label</code> (shadow-scoped IDs)</h3>
       <p>
-        Label and help text rendered <em>inside</em> the shadow root. The
-        component uses shadow-scoped IDs on the internal input.
+        Label and help text rendered inside the shadow root. Same-scope
+        <code>aria-labelledby</code> resolves because both elements share the
+        shadow root.
       </p>
       <form id="form-3c">
         <div class="field-group">
@@ -476,52 +228,41 @@ <h3>Scenario C: IDs inside shadow DOM (internal wiring)</h3>
       </form>
     </div>
 
-    <!-- Scenario D: cross-root label-for -->
+    <!-- Scenario D: aria-labelledby pointing at light DOM ID (NO workaround) -->
     <div class="scenario">
-      <h3>Scenario D: cross-root; light DOM label + shadow input</h3>
+      <h3>Scenario D: <code>aria-labelledby</code> on host (light DOM ID, no JS bridge)</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.
+        Host has <code>aria-labelledby="label-3d"</code> pointing at a sibling
+        element. Without cross-root JS, does the host's internals pick it up?
+        <strong>Expected: name resolves on the host node but may not reach the shadow input.</strong>
       </p>
       <form id="form-3d">
         <div class="field-group">
-          <label for="field-3d">Priority level</label>
+          <span id="label-3d" style="font-weight: 600; font-size: 0.875rem">Priority level</span>
           <face-combobox
             id="field-3d"
             name="priority"
+            aria-labelledby="label-3d"
             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                 -->
+    <!-- SECTION 4: combobox-specific patterns                              -->
     <!-- ================================================================== -->
 
     <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.
+      <code>aria-activedescendant</code> and <code>aria-controls</code> resolve
+      within the same shadow root (no cross-root issue for these).
     </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>
+      <h3>4a. <code>aria-activedescendant</code> with shadow-scoped option IDs</h3>
       <form id="form-4a">
         <div class="field-group">
           <label for="field-4a">Font family</label>
@@ -533,20 +274,14 @@ <h3>
           ></face-combobox>
         </div>
       </form>
-      <div class="output" id="output-4a">
-        Use arrow keys to navigate. Active descendant changes appear here.
-      </div>
+      <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>
+      <h3>4b. <code>aria-controls</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.
+        Input and listbox share the same shadow root.
+        <code>aria-controls</code> resolves correctly.
       </p>
       <form id="form-4b">
         <div class="field-group">
@@ -572,23 +307,14 @@ <h3>4c. Validation with error messaging</h3>
             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>
+          <span class="help-text">Required for project tracking.</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 class="output" id="output-4c">Submit empty to test error announcement.</div>
     </div>
 
     <!-- ================================================================== -->
@@ -598,18 +324,9 @@ <h3>4c. Validation with error messaging</h3>
     <h2>5. ElementInternals ARIA property APIs</h2>
 
     <div class="scenario">
-      <h3>
-        5a. <code>internals.ariaLabel</code> vs host
-        <code>aria-label</code>
-      </h3>
+      <h3>5a. <code>internals.ariaLabel</code> vs host <code>aria-label</code></h3>
+      <p>Both set <code>aria-label</code>. Inspect which node exposes the name in the a11y tree.</p>
       <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"
@@ -618,18 +335,11 @@ <h3>
           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>
+      <p>Open and close the listbox. <code>internals.ariaExpanded</code> is set on open/close.</p>
       <form id="form-5b">
         <div class="field-group">
           <label for="field-5b">Test expanded state</label>
@@ -641,9 +351,7 @@ <h3>5b. <code>ariaExpanded</code> on internals vs host attribute</h3>
           ></face-combobox>
         </div>
       </form>
-      <div class="output" id="output-5b">
-        Open/close the listbox. State changes logged here.
-      </div>
+      <div class="output" id="output-5b">Open/close the listbox. State changes logged here.</div>
     </div>
 
     <!-- ================================================================== -->
@@ -652,1294 +360,14 @@ <h3>5b. <code>ariaExpanded</code> on internals vs host attribute</h3>
 
     <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>
+    <div id="axe-results" class="output">Click the button above to run axe-core.</div>
 
     <!-- ================================================================== -->
-    <!-- COMPONENT DEFINITION                                               -->
+    <!-- Scripts (component + demo logic)                                   -->
     <!-- ================================================================== -->
 
-    <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.#internals.role = 'combobox';
-
-          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>
+    <script type="module" src="face-combobox.js"></script>
+    <script type="module" src="demo.js"></script>
   </body>
 </html>
diff --git a/research/form-associated-ce-combobox-poc/styles.css b/research/form-associated-ce-combobox-poc/styles.css
new file mode 100644
index 0000000000..0206a730e0
--- /dev/null
+++ b/research/form-associated-ce-combobox-poc/styles.css
@@ -0,0 +1,194 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * Page-level styles for the FACE combobox PoC demo.
+ */
+
+*,
+*::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;
+  --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;
+}
+
+.note {
+  background: #eff6ff;
+  border-left: 3px solid var(--color-border-focus);
+  padding: 0.75rem 1rem;
+  margin: 1rem 0;
+  font-size: 0.875rem;
+}
+
+.config-banner {
+  background: #fef3c7;
+  border: 1px solid #f59e0b;
+  border-radius: var(--radius);
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  font-size: 0.875rem;
+}
+
+.config-banner code {
+  background: #451a03;
+  color: #fef3c7;
+  padding: 0.125rem 0.5rem;
+  border-radius: 3px;
+}
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  background: #f3f4f6;
+  padding: 0.125rem 0.375rem;
+  border-radius: 3px;
+}
+
+#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;
+}