Prior art: patterns and behaviour¶
This page covers behaviour specs, accessibility contracts, component interop across frameworks, and how host platforms keep third-party UI consistent. For each item it gives what the work is and what the module takes from it. Pattern specs and the two consumption tiers are planned, not built yet; see the concept. For how this fits the wider prior art, see the overview.
Checked against sources on 2026-10-04. Refresh versions and browser support before quoting.
How to read the verdicts: adopt means use it as it is; adapt means take the idea and change its shape; learn means study it without depending on it; avoid means a known pitfall.
Behaviour and accessibility specs¶
WAI-ARIA Authoring Practices (APG) · adopt¶
For each pattern, a keyboard interaction table plus the required roles, states and properties. In effect a behaviour contract, written as prose.
For the module: each pattern spec's accessibility contract references an APG pattern and adds a testable keyboard table in YAML.
ARIA-AT and AT Driver · adapt¶
Screen-reader test plans whose assertions are graded MUST, SHOULD or MAY and stored as structured data. AT Driver is an Editor's Draft protocol for automating screen readers.
For the module: its grading matches the module's must/should/may rules. Reuse it for high-risk patterns.
ARIA-AT · Repository · AT support tables · AT Driver
Zag.js · adopt¶
Framework-agnostic UI state machines that encode APG keyboard and focus behaviour, with adapters for React, Preact, Vue, Solid, Svelte and vanilla JS (Angular and Marko adapters are community-maintained).
For the module: its statechart shape for the behaviour section of a pattern spec. The vanilla adapter could back Drupal behaviors for Twig-rendered markup.
React Aria · learn¶
One of the most thorough behaviour references available: more than 50 components, covering internationalization and adaptive interactions. React only.
For the module: a quality benchmark for what a pattern spec should cover.
EightShapes component specs · learn¶
Conventions for anatomy, properties and layout specs, with a Figma plugin (EightShapes Specs, by Nathan Curtis) that generates them. We found no standard schema for abstract component specs.
For the module: the module defines its own pattern spec schema.
Native HTML and components¶
Open UI and the HTML it shipped · adopt¶
A W3C Community Group that researches common component anatomy across design systems
and turns it into HTML. Graduated proposals include popover, invoker commands
(commandfor, Baseline since 2025-12-12) and customizable select (Chrome 135 and
Safari 27; Firefox only behind a flag). Dialog light-dismiss (closedby, discussed in
Open UI and specified in HTML) is in Chrome 134 and Firefox 141, not Safari.
For the module: Open UI's anatomy names for pattern parts. Specs prefer native features as the realization, since they behave the same in every framework.
Open UI · invoker-commands · dialog-closedby · customizable-select
Lit, Stencil, Web Awesome · adopt¶
Plain custom elements that Twig, Svelte, React and vanilla JS can all render. Web Awesome (formerly Shoelace) themes its components through CSS custom properties.
For the module: custom elements as the interop layer for islands. Learn from Web Awesome's theming API.
Custom Elements Manifest · adapt¶
custom-elements.json (v2.1) describes a web component's attributes, properties,
events, slots, CSS parts and CSS custom properties. Storybook, IDE autocomplete and
wrapper generators use it.
For the module: a way to describe a realization's API for JS islands. It describes an implementation, not a contract, so the abstract pattern spec stays separate. SDC could map to it.
Radix, Base UI, Ark UI, Melt UI · learn¶
Headless component libraries, each targeting one framework or a fixed set (Radix and Base UI: React; Ark UI: React, Solid, Svelte and Vue; Melt UI: Svelte). None target plain HTML or Twig. Radix went ten months without a release (August 2025 to June 2026) before a burst of releases; Base UI reached 1.0 in December 2025.
For the module: learn from them, but don't make the contract depend on any of them.
Base UI · Ark UI · Radix Primitives
Mitosis · avoid¶
Compiles one component source to React, Vue, Svelte, Angular, Solid, Qwik and more. In our assessment, output quality varies by target.
For the module: it would add a build step to every contrib module, and Twig isn't a target.
VS Code Webview UI Toolkit (archived) · avoid¶
Framework-agnostic web components with automatic editor theming. Archived on 2025-01-06, after FAST Foundation, the FAST package it was built on, was deprecated and nobody was funded to rewrite it on FAST Element.
For the module: don't tie the contract to one component library. VS Code's token
layer, the --vscode-* variables, outlived the components.
Host platforms¶
Shopify Polaris web components and remote rendering · learn¶
One host-owned s-* component set across Admin, Checkout, Customer Accounts and POS,
stable since version 2025-10. UI extensions run in a Web Worker sandbox, describe
their UI, and the host renders it with its own components.
For the module: the strongest consistency guarantee we found. A candidate for an optional strict tier.
Stable announcement · Remote rendering
Atlassian Forge: UI Kit and Custom UI · adapt¶
UI Kit is rendered by the host and themed automatically. Custom UI is an iframe, in
any framework, that opts in to host tokens with view.theme.enable().
For the module: the model for two tiers in Drupal. Modules that use theme-provided realizations get consistency automatically; modules in any framework get contract tokens, plus conformance tests and a linter (the module's addition).
Astro islands · learn¶
Islands hydrate independently. Shared styling comes from global stylesheets, utility CSS such as Tailwind, and CSS custom properties; Astro defines no design contract across islands.
For the module: Drupal already works as an islands host, so consistency has to come from variables, cascade layers and native features.