Browser support · Docs

Policy

A native primitive uses a platform feature directly, so the browser target is the feature's support, not a version list chosen by the package. Each contract records the features it relies on and their Baseline status; the compatibility document turns that into one table and, from release stage 4 on, into a versioned promise. Until then the statements on this page describe what is tested, not what is guaranteed.

Native paths depend on Baseline features and stay native; no fallback logic is mixed in.
Compatibility code is opt-in or target-selected and never silently bundled into a native path (shipping invariant E of ADR 0005). No compatibility module exists today.
Feature detection comes before user-agent detection. The packages contain no browser-name branching and, today, no feature detection either: the native paths use the feature and the stylesheet relies on CSS fallback behavior.
No target option exists in the Vite plugin; the blueprint names one as a future direction, and it is not built.

Feature table

One row per capability: the native path, the compatibility path and the fallback. The Baseline column repeats what each contract documents as of 2026-09-27; the sections further down quote the contracts themselves.

Feature (native path)	Used by	Baseline status, documented in the contract as of 2026-09-27	Compatibility path	Without support
`<dialog>, showModal(), the top layer, ::backdrop, page inertness`	Dialog	Widely available (newly available in 2022)	none exists; the package does not polyfill	No fallback is documented; the element is the base of the primitive
`Invoker commands (command, commandfor)`	Dialog and Popover invokers, Button	Newly available, not yet widely: Chrome 135, Safari 26, Firefox 144, shipped during 2025	None exists; an opt-in module is named as an option in ADR 0005	Two calls in application code (showModal(), close()); without them the dialog stays closed
`Popover API (popover, popovertarget, popovertargetaction, :popover-open, ToggleEvent)`	Popover, Menu, Menubar, Combobox, Tooltip, Hover card, Toast, Context menu, Date picker, the mobile navigation of this site	Newly available since April 2024: Chrome 114, Safari 17, Firefox 125	none exists; the package does not polyfill	The attribute is ignored and the content renders inline; a menu loses its top layer and light dismiss; a combobox uses a hidden-toggled popup instead
`showPopover({ source })`	Combobox popup (the input as the implicit anchor and invoker), Tooltip	Not Baseline: Chrome 133, Safari 26	none exists; the package does not polyfill	Passed as an option that browsers without it ignore; popover="manual" needs no invoker relationship
`CSS anchor positioning (position-area, position-try-fallbacks)`	Popover, Menu and Tooltip placement in the stylesheet	Not Baseline: Chrome 125, Safari 26	None exists; an optional positioning module is a named possibility, not a plan	The platform default placement: centered in the top layer
`CSS anchor positioning (anchor-name, anchor-scope, position-anchor, position-area, anchor-size())`	Combobox popup placement in the stylesheet	Not Baseline: Chrome 125 (anchor-scope 131), Safari 26	none exists; the package does not polyfill	A hidden-toggled popup is positioned under the root with absolute positioning; a popover popup is centered in the top layer
`KeyboardEvent.isComposing`	Combobox (keys during an IME composition are ignored)	Widely available; keyCode 229 covers browsers that report the state late	none exists; the package does not polyfill	No fallback is documented
`AbortSignal on addEventListener, Element.isConnected`	Combobox session listener (Tier 2 scoped controller)	Widely available	none exists; the package does not polyfill	No fallback is documented
`<details>, <summary>, the toggle event`	Disclosure	Widely available	none exists; the package does not polyfill	No fallback is documented; the element is the base of the primitive
`name on <details> for exclusive groups`	Disclosure accordions	Newly available since September 2024: Chrome 120, Safari 17.2, Firefox 130	none exists; the package does not polyfill	Siblings stay open independently
`::details-content, interpolate-size`	Disclosure open transition in the stylesheet	Used only where supported; nothing depends on them	none exists; the package does not polyfill	No transition
`appearance: none on checkboxes, :checked, :indeterminate`	Checkbox, Switch	Widely available	none exists; the package does not polyfill	No fallback is documented
`:user-invalid`	Validation styles of Checkbox, Input, Date field, One-time code and File field	Baseline 2023	none exists; the package does not polyfill	Native validation still works; the invalid styling does not apply
`role="switch" on a checkbox (ARIA 1.2)`	Switch	Mapped by current screen readers	none exists; the package does not polyfill	Announced as a checkbox where the role is not mapped
`<button>, :focus-visible`	Button	Widely available	none exists; the package does not polyfill	No fallback is documented
`<fieldset>, <legend>, <input type="radio">`	Radio group	Widely available	none exists; the package does not polyfill	No fallback is documented
`:dir(rtl), read only to resolve dir="auto"`	Tabs, Listbox, Tree, Toggle group, Toolbar, Calendar, Splitter and every behavior with horizontal arrow keys	Guarded in packages/primitives/src/internal/direction.ts	none exists; the package does not polyfill	dir="auto" resolves to left-to-right; an explicit dir attribute always works
`ES2022 JavaScript, composedPath()`	Every Tier 1 and Tier 2 behavior (the shared router)	The output target of every package; no transpilation to an older target	Run the packages through your own bundler for an older target	Without the runtime every primitive keeps its server-rendered state and native parts: tabs cannot switch, a menu opens as a plain popover, a combobox is a plain text field; each contract states its own case
`popover="hint"`	Tooltip, Hover card	Not Baseline: Chrome 133	none exists; the package does not polyfill	The value falls back to a manual popover, which the behavior hides itself
`Customizable select (appearance: base-select, ::picker(select), ::checkmark, <selectedcontent>)`	Select	Not Baseline: Chrome 135, Safari 27; not in Firefox	none exists; the package does not polyfill	The styled closed box with the platform picker
`closedby on <dialog>`	Alert dialog, Drawer	Not Baseline: Chrome 134, Firefox 141; not in Safari 27	none exists; the package does not polyfill	Escape still cancels an alert dialog; a click on the backdrop does not close a drawer
`transition of overlay (with transition-behavior: allow-discrete)`	Exit transitions of Alert dialog and Drawer	Not Baseline: Chrome 117; not in Safari 27	none exists; the package does not polyfill	The exit transition runs after the dialog has left the top layer
`field-sizing: content`	Input (textarea)	Newly available since June 2026: Chrome 123, Safari 26.2, Firefox 152	none exists; the package does not polyfill	The textarea keeps the height of its rows and scrolls
`:has()`	Segmented control, Rating, Steps, Field, Number field, Range slider, Context menu styles	Baseline 2023	none exists; the package does not polyfill	The state drawn from a descendant is not drawn (the checked segment, the filled stars, a complete step); the native controls keep working
`Vertical form controls (writing-mode on <input type="range">)`	Slider, vertical	Baseline 2024: Chrome 124, Firefox 120, Safari 17.4	none exists; the package does not polyfill	The slider is drawn horizontally
`Form control pseudo-elements (range thumb and track, progress value, meter regions)`	Slider, Range slider, Progress, Meter	Not standardized: -webkit- and -moz- pseudo-elements	none exists; the package does not polyfill	The platform draws the control
`<datalist> suggestions`	Autocomplete	Not Baseline as a feature; the list attribute is widely available	The Combobox primitive renders and styles its own options	A plain text field; the typed value is still submitted
`The contextmenu event`	Context menu	Widely available; Safari on iOS does not dispatch it for a long press	none exists; the package does not polyfill	Touch-only iPhone and iPad users cannot open the menu; offer the actions elsewhere
`Dropping files on <input type="file">; dragenter, dragleave, drop`	File drop	Widely available; accept does not filter dropped files	none exists; the package does not polyfill	Without JavaScript the input is shown as it is and still accepts a drop
`Pointer events, pointer capture, touch-action`	Splitter	Widely available	none exists; the package does not polyfill	No fallback is documented
`@media (scripting)`	Date picker, Number field	Baseline 2023	none exists; the package does not polyfill	The trigger and step buttons stay visible without JavaScript and do nothing
`round()`	Range slider (which thumb is on top where both meet)	Baseline 2024	none exists; the package does not polyfill	The end thumb stays on top
`color-mix()`	Alert, Spinner, Pagination	Baseline 2023	none exists; the package does not polyfill	The tinted border or track takes a neutral token
`Alternative text in content (content: counter() / "")`	Steps	Baseline 2024	none exists; the package does not polyfill	A screen reader may read the step number with the step
`accent-color`	Slider with data-variant="native"	Not Baseline: Chrome 93, Firefox 92, Safari 26.2	none exists; the package does not polyfill	The platform slider in its default color
`position: sticky`	Table sticky header	Widely available	none exists; the package does not polyfill	A normal header

This browser

Feature detection in the browser you are using, for the features the native paths depend on. The detection runs after the page loads and requires JavaScript; the proof page shows the same table next to the runtime it reads.

Feature	Used by	This browser
Detection runs in the browser after load.

Outside the target

A missing feature degrades the way the contract describes, never into a JavaScript replacement pulled in without being asked. The one case that matters most today is invoker commands, which are newer than the other features: where command and commandfor are missing, a dialog needs two calls in application code, and nothing from the package.

settings.svelte

<script lang="ts">
	// Where invoker commands are missing: two calls in application code, no package involved.
	let dialog: HTMLDialogElement;
</script>

<button type="button" onclick={() => dialog.showModal()}>Settings</button>

<dialog bind:this={dialog} id="settings" data-slean="dialog" aria-labelledby="settings-title">
	<h2 id="settings-title" data-slean-part="title">Settings</h2>
	<button type="button" onclick={() => dialog.close()}>Close</button>
</dialog>

Application code that must branch on support should test the feature, not the browser name.

TypeScript

// Feature detection before user-agent detection: what application code may branch on.
const commands = 'commandForElement' in HTMLButtonElement.prototype;
const popover = 'popover' in HTMLElement.prototype;
const anchors = CSS.supports('position-area: bottom');

Tier 1 behaviors need the runtime: without JavaScript, tabs keep the state the server rendered (the selected panel visible, the others hidden) and cannot switch; pages that must work without script can render every panel without hidden and accept a stacked layout. A menu opens and closes as a plain popover, link items work, and movement inside is Tab-based. A listbox keeps its authored selection and cannot change it. The combobox, Tier 2, is a plain text field whose popup never opens; a form still submits what was typed, and a <datalist> is the native alternative for suggestions without script.

Compatibility modules

None exists. ADR 0005 names an opt-in module for invoker commands and the blueprint names an optional positioning module; both are possibilities, not plans. When one is built it will be a separate entry point selected by the application or by a build target, and a consumer fixture will assert that the native path does not include it (shipping invariant E). Until then the fallbacks in the table are the whole story.

Testing

Browser tests run in Chromium only: the locally installed Google Chrome, whose version is recorded in the audit and the benchmark file, and Playwright's Chromium in CI. The native contracts are exercised with page JavaScript disabled in native.spec.ts. Firefox and WebKit projects are declared in the playground's Playwright configuration; pull-request CI installs Chromium only and skips them, the nightly workflow runs both and fails when a project is skipped, and no run is recorded in this repository yet. A recorded run is a stage 2 requirement in docs/release.md; when it exists it will assert the documented fallback, not the native path, in a browser that lacks a feature. No cross-browser claim is made until then.

Contract excerpts

The "Platform features and Baseline" section of every contract, read from the contract file when this site is built. The contracts are the source; this page cannot drift from them.

accordion

<details>, <summary> and the toggle event: Baseline widely available.
name for exclusive groups: Baseline newly available since September 2024 (Chrome 120, Safari 17.2, Firefox 130). Elsewhere every item opens on its own.
Find-in-page opens a closed item that contains the match: Chrome 97, Firefox 139, Safari 26.2. In an exclusive group this closes the item that was open.
::details-content: Baseline newly available since September 2025 (Chrome 131, Safari 18.4, Firefox 143). interpolate-size: allow-keywords, which lets the styles animate the height to auto, is in Chrome 129 and not in Firefox or Safari; there the content appears without a transition.

Policy

Feature table

This browser

Outside the target

Compatibility modules

Testing

Contract excerpts

accordion

alert

alert-dialog

autocomplete

avatar

badge

breadcrumb

button

button-group

calendar

card

carousel

checkbox

color-field

combobox

context-menu

date-field

date-picker

descriptions

dialog

disclosure

drawer

empty

field

file-drop

file-field

hover-card

input

kbd

listbox

menu

menubar

meter

number-field

otp-field

pagination

popover

progress

radio-group

range-slider

rating

scroll-area

segmented

select

separator

skeleton

slider

spinner

splitter

steps

switch

tabs

tag

timeline

toast

toggle

toggle-group

toolbar

tooltip

tree