@fusion.dev/helix-docs 0.104.1 → 0.106.0

package/content/motion.mdx

@@ -1,12 +1,12 @@
 ---
-description: Four durations, five curves, and the rule every animating component has to answer.
+description: The duration and easing tokens, and how components handle reduced motion.
 section: Foundations
 title: Motion
 ---
 
 # Motion
 
-## The tokens
+## Duration and easing tokens
 
 [//]: # (tokens:duration)
 
@@ -31,33 +31,40 @@ title: Motion
 
 [//]: # (/tokens)
 
-Four durations and five curves. `standard` for most things, `decelerate` for
-something arriving, `accelerate` for something leaving, `emphasized` for a
-movement the reader is meant to follow, and `spring` for the few places
-overshoot reads as responsive rather than as a bug.
+Helix has four durations and five curves. Use each curve for one kind of
+movement:
 
-The theme engine takes a `motion` intent input, so a product can be uniformly
-quicker or slower without every component being retuned.
+- `standard` for most movement
+- `decelerate` for something arriving
+- `accelerate` for something leaving
+- `emphasized` for a movement you want the user to follow
+- `spring` for the few places where overshoot looks responsive and does not
+  look like a bug
 
-## Reduced motion is per component
+The theme engine takes a `motion` intent input. Use it to make every component
+faster or slower at once.
 
-The base layer has a global rule capping animation and transition duration for a
-reader who asked not to be moved. **It does not reach a single component.**
+## Each component handles reduced motion
+
+The base layer has a global rule that caps animation and transition durations
+when a user has asked for reduced motion. **The global rule does not apply
+inside any component.**
 
 ```css
 *, *::before, *::after { … }
 ```
 
-`*` does not cross a shadow boundary. So that rule reaches your prose, your
-layout and the base layer's own recipes, and none of the ninety-odd components
-that draw inside a shadow root. Each one answers `prefers-reduced-motion` in its
-own stylesheet, fifty-nine of them do because fifty-nine of them animate, and a
-component that animates without one fails the build.
+The `*` selector does not cross a shadow boundary. The rule applies to your
+prose, your layout, and the base layer's own recipes. It does not apply to the
+ninety-odd components that draw inside a shadow root. Each component that
+animates handles `prefers-reduced-motion` in its own stylesheet. Fifty-nine
+components animate, and all fifty-nine have this rule. A component that
+animates without one fails the build.
 
-**The same is true of yours.** If you write a component with a shadow root, the
-global rule will not cover it either. That is not a Helix behavior, it is how
-`*` works, and it is the single easiest accessibility regression to ship without
-noticing.
+The same applies to your own components. If you write a component with a shadow
+root, the global rule does not cover it. This comes from how `*` works in CSS,
+so it applies outside Helix too. It is the easiest accessibility regression to
+ship without noticing.
 
 ```css
 @media (prefers-reduced-motion: reduce) {
@@ -68,24 +75,25 @@ noticing.
 }
 ```
 
-## What reduced motion means here
+## What reduced motion changes
+
+Some transitions show a relationship, such as a panel that slides out of the
+control that opened it. Others are decorative, such as a floating effect. With
+reduced motion, Helix removes decorative movement. It shortens transitions that
+show a relationship until they are close to instant, without an abrupt jump.
 
-Not "no movement". A transition that communicates a relationship, like a panel
-sliding out of the control that opened it, is doing work; a decorative float is
-not. The library's own policy is to remove the second and shorten the first to
-the point where it is instant but not jarring.
+Anything that moves continuously without input stops completely:
 
-The one place this is absolute is anything that moves continuously without
-input: the aura shader, marquees, and looping loaders all stop rather than speed
-up.
+- The aura shader
+- Marquees
+- Looping loaders
 
-## Two things that are not motion tokens
+## Starting styles and view transitions
 
-**`@starting-style`** is how overlays animate in, and it needs no duration token
-of its own: it is a starting value, and the transition that runs from it uses
-the tokens above.
+Overlays use `@starting-style` to animate in. It sets a starting value and needs
+no duration token of its own. The transition that runs from it uses the tokens
+above.
 
-**View transitions** are not used anywhere in the library. A component cannot
-own a view transition, because the transition is between two states of the
-document rather than of the component, so if you want them that is yours to
-drive.
+The library does not use view transitions. A view transition runs between two
+states of the document, so a component cannot own one. If you want view
+transitions, start them from your own code.

package/content/other-frameworks.mdx

@@ -1,5 +1,5 @@
 ---
-description: The three rules every framework reduces to, and what they look like in each.
+description: The three rules for using Helix in any framework, and how each framework applies them.
 parent: installation
 section: Getting started
 title: Other frameworks
@@ -8,64 +8,66 @@ trailing: true
 
 # Other frameworks
 
-Solid, Qwik, Lit, Ember, Alpine, htmx, and anything else that puts elements in a
-document. All of them need the same three rules, and nothing beyond them.
+This page covers Solid, Qwik, Lit, Ember, Alpine, htmx, and any other framework
+that puts elements in a document. They all follow the same three rules and need
+nothing else.
 
 ## The three rules
 
 **Strings go through attributes. Everything else goes through properties.** An
-attribute is a string, so an array, an object or a function has to be assigned
-to the element rather than written in the markup. Most frameworks do this for
-you when the element has a matching property.
+attribute is a string, so assign an array, an object, or a function to the
+element as a property. Most frameworks do this for you when the element has a
+matching property.
 
 ```js
 element.items = tabs
 ```
 
-**Events bind with `addEventListener`, and the name is the event's own.** Helix
-events are `helix-before-open`, `helix-before-change`, `helix-select` and so on:
-lowercase,
-hyphenated, no camel-case variant. Whatever your framework's `on*` syntax is, it
-should end up passing that string through.
+**Bind events with `addEventListener`, using the event's own name.** Helix event
+names, such as `helix-before-open`, `helix-before-change`, and `helix-select`,
+are lowercase and hyphenated. They have no camel-case variant. Your framework's
+`on*` syntax needs to pass that exact name through.
 
 ```js
 element.addEventListener('helix-before-change', (event) => console.log(event.detail))
 ```
 
-**A declared `value`, `open`, `checked` or `active` is a seed.** The element
-starts there and goes on managing itself, exactly as `<input value="Ada">` does.
-To take one decision, listen for the matching `helix-before-*` event and call
-`preventDefault()`; to own the state outright, refuse and assign your own.
-`default-value`, `default-open` and their siblings are what a reset returns to.
-[State and control](./state-and-control) is the page about it.
+**A declared `value`, `open`, `checked`, or `active` is a seed.** The element
+starts with that value and then manages its own state, as `<input value="Ada">`
+does. To refuse one change, listen for the matching `helix-before-*` event and
+call `preventDefault()`. To own the state fully, refuse every change and assign
+your own value. A reset returns to `default-value`, `default-open`, and the
+similar attributes. [State and control](./state-and-control) explains the model
+in full.
 
-## What each one needs
+## Notes for each framework
 
 | Framework | Notes |
 |---|---|
 | Solid | Sets properties on custom elements by default. Use `prop:` to force one and `attr:` to force the other. `on:helix-before-change` binds the literal name |
 | Qwik | Works as JSX. Bind with `document:on…` or a ref, since a plain `on*` prop is normalized |
-| Lit | `.prop=`, `?bool=` and `@helix-before-change=` are already the right three channels |
+| Lit | `.prop=`, `?bool=`, and `@helix-before-change=` work with no setup |
 | Ember | Angle-bracket invocation passes attributes only, so set properties from a modifier |
-| Alpine, htmx | Markup and attributes only, which reaches every component. Refusing a change needs script |
+| Alpine, htmx | Markup and attributes only, which work with every component. Refusing a change needs script |
 
-Nothing here is tested by us, which is the honest reason it is one page. If your
-framework needs something the three rules above do not cover, that is worth
-telling us: it is either a gap in this page or a gap in the library.
+We do not test these frameworks, so they share one page. If your framework needs
+something the three rules do not cover, tell us. It is a gap in this page or in
+the library.
 
 ## Typings
 
-`@fusion.dev/helix/jsx` is the base for anything JSX-shaped, and Svelte's own
-typings are built from it. If your framework needs a different shape, the
-manifest ships as `@fusion.dev/helix/custom-elements.json` and describes every tag,
-prop, event and part, which is what all of ours are generated from.
+`@fusion.dev/helix/jsx` is the base for typing any framework that uses JSX, and
+the Svelte typings are built from it. If your framework needs a different
+format, use the manifest at `@fusion.dev/helix/custom-elements.json`. It
+describes every tag, prop, event, and part, and we generate all our typings from
+it.
 
-## Registration
+## Register the elements
 
 ```ts
 import '@fusion.dev/helix'
 ```
 
-Once, anywhere that runs in the browser. See [Installation](./installation) for
-the stylesheets, which are the same in every framework and are the thing most
-often left out.
+Import it once, anywhere that runs in the browser. The stylesheets are the same
+in every framework, and they are the part most often left out. See
+[Installation](./installation) for the stylesheets.

package/content/overlays.mdx

@@ -1,71 +1,90 @@
 ---
-description: The top layer, what dismisses what, and where focus goes.
+description: How overlays use the top layer, how they close, and where focus goes.
 section: Essentials
 title: Overlays and layering
 ---
 
 # Overlays and layering
 
-`Dialog`, `Drawer`, `Popover`, `Menu`, `Select`, `Combobox`, `Tooltip`,
-`Megamenu`, `Speed Dial`, `Command` and `Tour` are all overlays, and they all
-work the same way underneath. Knowing that way saves you from most of the
-problems overlays cause.
+These components are overlays, and they all work the same way:
 
-## They render in the top layer
+- `Dialog`
+- `Drawer`
+- `Popover`
+- `Menu`
+- `Select`
+- `Combobox`
+- `Tooltip`
+- `Megamenu`
+- `Speed Dial`
+- `Command`
+- `Tour`
 
-Every one uses the popover API, so the browser draws it in the top layer: above
-everything, regardless of `z-index`, `overflow: hidden`, `transform` or a
-stacking context somewhere up the tree.
+Knowing how they work helps you avoid most overlay problems.
 
-**This is the fix for the oldest bug in the category.** A menu inside a
-scrolling panel does not get clipped. A tooltip inside a `transform`ed card does
-not get trapped in its stacking context. There is no portal to configure and no
-`appendTo` to pass, because the platform is doing it.
+## Overlays render in the top layer
 
-The consequence for your CSS: **do not try to raise an overlay with `z-index`.**
-It has no effect on a top-layer element, and reaching for it means something
-else is wrong.
+Every overlay uses the popover API, so the browser draws it in the top layer.
+The top layer is above everything on the page, and these do not affect it:
 
-## Positioning is JavaScript
+- `z-index`
+- `overflow: hidden`
+- `transform`
+- a stacking context in an ancestor
 
-Placement uses `@floating-ui/dom` rather than CSS anchor positioning: flip when
-there is no room below, move below or above when a panel placed beside its
-anchor has room on neither side, shift to stay on screen, size to the available
-space. Anchor positioning would be the platform answer and is not yet available
-everywhere the rest of the library's requirements are. See [Browser
-support](./browser-support).
+As a result, a menu inside a scrolling panel is not clipped, and a tooltip
+inside a `transform`ed card is not trapped in its stacking context. You do not
+configure a portal or pass `appendTo`, because the browser handles the layering.
 
-That means an overlay's position is recomputed while it is open, on scroll and
-resize, and stops when it closes.
+**Do not raise an overlay with `z-index`.** It has no effect on a top-layer
+element. If you want to use it, something else is wrong.
 
-## Dismissal
+## How overlays are positioned
 
-Light dismiss is the platform's: click outside, or press `Escape`. What Helix
-adds is making that correct across shadow boundaries.
+Overlays are placed with `@floating-ui/dom`, which does the following:
 
-**`document.activeElement` stops at the outermost host.** Focus inside a shadow
-tree is reported as the element containing that tree, so a naive "is focus still
-inside me" check never matches and closes the overlay the moment anything inside
-it is focused. Every dismissal path here walks through the roots instead.
+- It flips a panel to the other side of its anchor when there is no room below.
+- It moves a panel placed beside its anchor below or above when there is no room
+  on either side.
+- It shifts a panel to stay on screen.
+- It sizes a panel to the available space.
 
-**Nesting works because lifecycle events do not bubble.** `helix-before-open` and
-`helix-before-close` are neither bubbling nor composed, so a menu closing inside a
-dialog is not the dialog closing. `Escape` closes the innermost overlay and
-leaves the rest.
+CSS anchor positioning is the platform's own way to do this. We do not use it
+yet, because it is not available in every browser the rest of Helix supports.
+See [Browser support](./browser-support).
 
-## Focus
+While an overlay is open, its position is recomputed on scroll and resize. The
+recomputing stops when the overlay closes.
 
-A modal overlay traps `Tab` inside itself while open and returns focus to
-whatever opened it. `Dialog` and `Drawer` do this; `Popover` does it in its
-modal mode and not otherwise.
+## How overlays close
 
-**A tooltip never takes focus**, which is the one to remember: it is
-described-by rather than interactive, so it cannot contain a button. If you want
-something with a button in it, that is a `Popover`.
+Light dismiss comes from the platform: click outside the overlay, or press
+`Escape`. Helix makes light dismiss work correctly across shadow boundaries.
 
-## Refusing to close
+`document.activeElement` stops at the outermost host. Focus inside a shadow tree
+is reported as the element that contains the tree. A simple check for whether
+focus is still inside the overlay never matches, so the overlay would close as
+soon as anything inside it is focused. Every way of closing an overlay in Helix
+checks focus by walking through the shadow roots.
 
-The close is announced before it happens:
+Nested overlays work because lifecycle events do not bubble.
+`helix-before-open` and `helix-before-close` do not bubble and are not composed,
+so a menu that closes inside a dialog does not close the dialog. `Escape` closes
+the innermost overlay and leaves the others open.
+
+## Where focus goes
+
+A modal overlay keeps `Tab` inside itself while it is open, and it returns focus
+to the element that opened it. `Dialog` and `Drawer` always do this. `Popover`
+does it only in its modal mode.
+
+**A tooltip never takes focus.** A tooltip only describes a control, so it
+cannot contain a button. For something with a button in it, use a `Popover`.
+
+## Keep an overlay open
+
+An overlay sends `helix-before-close` before it closes. Cancel the event to keep
+the overlay open:
 
 ```ts
 dialog.addEventListener('helix-before-close', (event) => {
@@ -75,20 +94,19 @@ dialog.addEventListener('helix-before-close', (event) => {
 })
 ```
 
-That covers `Escape`, the backdrop click and the close button together, because
-all three go through the same request. See [State and
-control](./state-and-control).
+Canceling covers `Escape`, a backdrop click, and the close button, because all
+three send the same request. See [State and control](./state-and-control).
 
 ## Entry and exit animation
 
-Overlays animate in with `@starting-style` and out with a transition on the
-`overlay` and `display` properties, which is what allows an exit animation on an
-element the browser is about to remove from the top layer. Every one answers
-`prefers-reduced-motion`.
+Overlays animate in with `@starting-style`. They animate out with a transition
+on the `overlay` and `display` properties, which allows an exit animation on an
+element the browser is about to remove from the top layer. Every overlay
+responds to `prefers-reduced-motion`.
 
-## Which one to reach for
+## Choose an overlay
 
-| | |
+| Component | Use it for |
 |---|---|
 | `Dialog` | A task that blocks the page |
 | `Drawer` | The same, from an edge, usually larger |

package/content/overriding-a-component.mdx

@@ -1,5 +1,5 @@
 ---
-description: The three ways in past a shadow root, and which one to reach for.
+description: Change a component's styles with tokens, per-component hooks, or parts, and choose which one to use.
 section: Theming
 title: Overriding a component
 ---
@@ -7,11 +7,10 @@ title: Overriding a component
 # Overriding a component
 
 Every Helix component draws inside a shadow root, so your stylesheet cannot
-reach in. That is the point: a rule you write can never accidentally break a
-component's internals, and a component can be rewritten without breaking your
-page.
+reach the elements inside it. Your rules cannot break a component's internals
+by accident, and we can rewrite a component without breaking your page.
 
-Three doors are open, and they are in the order you should try them.
+You can change a component's styles in three ways. Try them in the order below.
 
 ## 1. Tokens
 
@@ -21,15 +20,17 @@ Three doors are open, and they are in the order you should try them.
 }
 ```
 
-If every card, dialog and button should be squarer, that is a token change and
-you are done. The seed rather than `--helix-radii-md`, because the four rungs
-are derived from it: `md` on its own is one step of four, and the buttons and
-dialogs are on a different one. See [Shape and borders](./shape-and-borders). Tokens cross shadow boundaries on their own, because custom
-properties inherit, so one declaration reaches every component at once.
+To make every card, dialog, and button squarer, change a token. Set the seed.
+The four radius steps, such as `--helix-radii-md`, are derived from it. `md` is
+one step of the four, and buttons and dialogs use a different step. See
+[Shape and borders](./shape-and-borders).
 
-Reach for this first. Most requests that arrive as "can I restyle the button"
-are really "our brand has less rounding than yours", and the token is both the
-smaller change and the one that stays consistent.
+Custom properties inherit, so tokens cross shadow boundaries. One declaration
+reaches every component at once.
+
+Try tokens first. A request to restyle the button is often a brand difference,
+such as less rounding. A token is the smaller change, and it keeps every
+component consistent.
 
 See [Tokens](./tokens) and [Deriving a theme](./theming).
 
@@ -45,15 +46,19 @@ helix-accordion {
 }
 ```
 
-A hook is a custom property a component publishes and reads. It defaults to a
-semantic token, so leaving it alone gets you the themed value, and setting it
-changes that component and nothing else.
+A hook is a custom property that a component publishes and reads. It defaults
+to a semantic token, so a hook you leave unset uses the themed value. Setting a
+hook changes that one component.
+
+**Hooks are component API.** We check that they stay separate from tokens. A
+hook is named after its component, such as `--card-padding` or
+`--drawer-radius`. A token is named `--helix-*`. We also check each hook in both
+directions:
 
-**They are API, not tokens**, and the distinction is enforced. A hook is named
-after the component (`--card-padding`, `--drawer-radius`) and a token is named
-`--helix-*`. Every documented hook is held to a rule that actually reads it, in
-both directions: declared and never read is a promise with nothing behind it,
-and read and never declared is a working feature nobody is told about.
+- A rule in the component reads every documented hook. A hook that is declared
+  and never read would do nothing.
+- Every hook that a rule reads is documented. Otherwise you would not know the
+  hook exists.
 
 Each component's page lists its hooks under Custom properties.
 
@@ -69,23 +74,23 @@ helix-dialog::part(dialog) {
 }
 ```
 
-`::part()` reaches a named element inside the shadow root and lets you write any
-declaration you like on it. It is the most powerful door and the one to try
-last, because it is the one that couples your stylesheet to a component's
-internal structure.
+`::part()` selects a named element inside the shadow root, and you can write any
+declaration on it. Parts give you the most control. Try them last, because they
+tie your stylesheet to a component's internal structure.
 
-**A published part is a promise**, held both ways:
-a documented part that nothing renders, and a rendered part nobody was told
-about. The first is the worse of the two for you, because a `::part()` that
-resolves to nothing is valid CSS that matches nothing and reports nothing.
+**Every documented part is rendered.** We check parts in both directions. A
+documented part must be rendered, and a rendered part must be documented. A
+documented part that nothing renders would be the worse failure for you. A
+`::part()` that matches nothing is still valid CSS, so you get no error.
 
 Each component's page lists its parts.
 
-### A composed component forwards what it renders
+### Parts of a component inside another component
 
-`::part()` reaches one shadow boundary and stops, so a component that renders
-another would hide that child's whole part surface. Every one of them forwards
-it instead, and the forwarded name is prefixed with the role the child plays:
+`::part()` crosses only one shadow boundary. When a component renders another
+component, the child's parts would be out of reach. Every such component
+forwards its child's parts, and each forwarded name starts with the role the
+child plays:
 
 ```css
 helix-date-input::part(picker-cell) { … }
@@ -93,34 +98,39 @@ helix-select::part(listbox-items) { … }
 helix-video::part(overflow-header) { … }
 ```
 
-`<helix-date-input>` renders a date picker as its `picker`, so the picker's
-`cell` is `picker-cell` here. Where the child's part is already the role, the
-role stands alone: the tooltip inside `<helix-copy-button>` is `tooltip`, and
-its arrow is `tooltip-arrow`.
-
-A part that changes with a state takes a second name while the state holds, and
-that name is forwarded too. A tooltip that landed below its button is also
-`tooltip-bottom`, and its arrow `tooltip-arrow-bottom`, which is how a sheet out
-here draws by a side it cannot otherwise see. The arrow already faces the button
-whichever side that is; the name is for what you draw on top.
-
-**The prefix is not decoration.** Two levels can agree on a word, and did:
-`Command` forwarded the listbox's `search-field` under a name it also rendered
-itself, so `::part(search-field)` matched two elements at once.
-
-This is checked in both directions. `helix component`'s `parts` holds a published part and a
-rendered one to each other, and `helix component`'s `exportparts` holds a composition to
-forwarding everything its child publishes, under one prefix, colliding with
-nothing. So every part the color picker publishes is reachable from inside a
+`<helix-date-input>` renders a date picker in the `picker` role, so the picker's
+`cell` part is `picker-cell`. When the child's part is the role itself, the
+forwarded name is the role alone. The tooltip inside `<helix-copy-button>` is
+`tooltip`, and its arrow is `tooltip-arrow`.
+
+A part that changes with a state has a second name while the state is active,
+and that name is forwarded too. A tooltip placed below its button is also
+`tooltip-bottom`, and its arrow is also `tooltip-arrow-bottom`. Your stylesheet
+can use these names to style each side, which it cannot detect any other way.
+The arrow already faces the button on every side. Use the names for styles you
+add on top.
+
+**The prefix keeps part names unique.** A component and its child can use the
+same word. This happened once: `Command` forwarded the listbox's `search-field`
+under a name it also rendered itself, so `::part(search-field)` matched two
+elements at once.
+
+We check forwarding in two ways:
+
+- `helix component`'s `parts` matches every published part with a rendered one,
+  and every rendered part with a published one.
+- `helix component`'s `exportparts` requires a composed component to forward
+  every part its child publishes, under one prefix, with no collisions.
+
+As a result, you can reach every part the color picker publishes from inside a
 color input, and every part the date picker publishes from inside a date input.
 
-If you still find a part you cannot reach, that is worth reporting rather than
-working around: the missing part is the bug.
+If you find a part you cannot reach, report it to us. The missing part is a bug.
 
-### Words that name a position mean one thing
+### Part names shared by every component
 
-A part that names a *role* rather than a thing draws from a fixed vocabulary, so
-you learn it once instead of per component:
+Some parts name a role. Every component uses the same fixed set of role names,
+so you learn each name once:
 
 | Part | What it is |
 |---|---|
@@ -131,32 +141,33 @@ you learn it once instead of per component:
 | `surface` | A floating panel drawn over the page. |
 | `viewport` | A scrollport the component reads the position of. |
 
-Anything naming a thing the component actually has, a `thumb`, a `swatch`, a
-`weekday`, is that component's own word and is on its page.
+A part that names something specific to one component, such as `thumb`,
+`swatch`, or `weekday`, is listed on that component's page.
 
 ## What not to do
 
-**Do not raise specificity to fight a component.** `helix-button.thing.thing` is
-still outside the shadow root, so it wins nothing it was not already winning.
-Selector weight is not what is stopping you.
+**Do not raise specificity to override a component.** `helix-button.thing.thing`
+is still outside the shadow root, so it reaches nothing that `helix-button` did
+not already reach. The shadow boundary blocks your rule, and selector weight
+cannot change that.
 
 **Do not restyle through `!important` on the host.** Some properties inherit
-into a shadow root and most do not, so this works for `color` and `font-family`
-and fails silently for everything else, which is a worse outcome than failing
-loudly.
+into a shadow root and most do not. `!important` on the host works for `color`
+and `font-family` and fails with no error for everything else. A silent failure
+is harder to find than an error.
 
-**Do not fork the component to change a color.** The headless tier exists for
-the case where you want none of our styling, and it is a different decision from
-overriding one value. See [Tiers](./tiers).
+**Do not fork the component to change a color.** The headless tier is for when
+you want none of our styling. Changing one value does not need it. See
+[Tiers](./tiers).
 
-## When you want all of it
+## Replace all of the styling
 
 ```ts
 import '@fusion.dev/helix-headless'
 ```
 
-The headless tier is structure, accessibility, state and form participation with
-no CSS at all. You write the entire appearance. That is the honest answer when
-the design is genuinely not ours, and it is a supported tier rather than an
-escape hatch: `helix-headless-select` is a registered element, not an abstract
-class.
+The headless tier provides structure, accessibility, state, and form
+participation, with no CSS. You write the entire appearance. Use it when your
+design is entirely different from ours. The headless tier is fully supported.
+For example, `helix-headless-select` is a registered element that you can use
+directly.