inclusive-elements 0.6.1 → 0.7.0-beta.1

package/package.json

@@ -1,17 +1,7 @@
 {
     "name": "inclusive-elements",
-    "version": "0.6.1",
+    "version": "0.7.0-beta.1",
     "description": "Accessible, lightweight, unstyled implementations of UI patterns that still need runtime help.",
-    "type": "module",
-    "module": "dist/index.js",
-    "types": "dist/types/index.d.ts",
-    "exports": {
-        ".": {
-            "types": "./dist/types/index.d.ts",
-            "import": "./dist/index.js"
-        },
-        "./package.json": "./package.json"
-    },
     "license": "MIT",
     "repository": "tobyzerner/inclusive-elements",
     "files": [
@@ -19,13 +9,24 @@
         "CHANGELOG.md",
         "src/*/README.md"
     ],
+    "type": "module",
     "sideEffects": false,
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./package.json": "./package.json"
+    },
     "scripts": {
-        "dev": "vite",
-        "build": "tsc --noEmit && vite build && tsc --emitDeclarationOnly",
+        "dev": "vp dev",
+        "build": "vp pack",
+        "check": "vp check",
+        "format": "vp fmt",
         "prepare": "pnpm build",
-        "test": "vitest run",
-        "preview": "vite preview",
+        "test": "vp test run",
         "release": "release-it"
     },
     "dependencies": {
@@ -35,12 +36,12 @@
     "devDependencies": {
         "@release-it/conventional-changelog": "^5.1.1",
         "jsdom": "^29.0.1",
-        "prettier": "^2.8.8",
         "release-it": "^15.11.0",
         "typescript": "^5.9.3",
-        "vite": "^8.0.1",
-        "vitest": "^4.1.0"
+        "vite": "catalog:",
+        "vite-plus": "catalog:"
     },
+    "packageManager": "pnpm@10.17.1+sha512.17c560fca4867ae9473a3899ad84a88334914f379be46d455cbf92e5cf4b39d34985d452d2583baf19967fa76cb5c17bc9e245529d0b98745721aa7200ecaf7a",
     "release-it": {
         "git": {
             "commitMessage": "release: v${version}",
@@ -57,9 +58,5 @@
                 "header": "# Changelog"
             }
         }
-    },
-    "prettier": {
-        "singleQuote": true
-    },
-    "packageManager": "pnpm@10.17.1+sha512.17c560fca4867ae9473a3899ad84a88334914f379be46d455cbf92e5cf4b39d34985d452d2583baf19967fa76cb5c17bc9e245529d0b98745721aa7200ecaf7a"
+    }
 }

package/src/accordion/README.md

@@ -22,15 +22,15 @@
 
 ## Platform Requirements
 
--   Requires modern browser support for grouped `<details name>` behavior.
+- Requires modern browser support for grouped `<details name>` behavior.
 
 ## Behavior
 
--   Giving related `<details>` elements the same `name` makes them behave like an accordion, where opening one closes the others.
--   The browser provides the disclosure semantics and keyboard interaction.
--   This keeps the pattern lightweight and easy to style, without a custom wrapper element.
+- Giving related `<details>` elements the same `name` makes them behave like an accordion, where opening one closes the others.
+- The browser provides the disclosure semantics and keyboard interaction.
+- This keeps the pattern lightweight and easy to style, without a custom wrapper element.
 
 ## Further Reading
 
--   [MDN: `<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details)
--   [ARIA Authoring Practices Guide: Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)
+- [MDN: `<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details)
+- [ARIA Authoring Practices Guide: Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)

package/src/alerts/README.md

@@ -29,21 +29,21 @@ alerts.speak('Hello stranger!');
 
 ### Container
 
--   `<ui-alerts>` is the container and timing manager for a stack of alert elements.
--   Any alerts already present as children when the element connects are reprocessed in place so they are announced and animated.
+- `<ui-alerts>` is the container and timing manager for a stack of alert elements.
+- Any alerts already present as children when the element connects are reprocessed in place so they are announced and animated.
 
 ### Announcement Semantics
 
--   Each alert can be announced politely or assertively.
--   `show(..., { politeness })` takes precedence. Otherwise, existing authored live-region semantics on the alert are preserved before falling back to the element default.
--   Polite alerts use `role="status"` and `aria-live="polite"`.
--   Assertive alerts use `role="alert"` and `aria-live="assertive"`.
+- Each alert can be announced politely or assertively.
+- `show(..., { politeness })` takes precedence. Otherwise, existing authored live-region semantics on the alert are preserved before falling back to the element default.
+- Polite alerts use `role="status"` and `aria-live="polite"`.
+- Assertive alerts use `role="alert"` and `aria-live="assertive"`.
 
 ### Timing And Replacement
 
--   Alerts auto-dismiss after their configured duration.
--   Hovering or focusing an alert clears its dismissal timer, and the full duration starts again when pointer or focus leaves the alert.
--   Showing a new alert with an existing `key` dismisses the previous alert with that key before the new one is announced.
+- Alerts auto-dismiss after their configured duration.
+- Hovering or focusing an alert clears its dismissal timer, and the full duration starts again when pointer or focus leaves the alert.
+- Showing a new alert with an existing `key` dismisses the previous alert with that key before the new one is announced.
 
 ## API
 
@@ -90,9 +90,9 @@ alerts.speak(message, { politeness: 'polite' });
 
 `ui-alerts` is unstyled. The supported animation hooks are:
 
--   New alerts receive `enter-*` classes so CSS can animate them in.
--   Dismissed alerts animate out using `leave-*` classes and are then removed.
--   Existing alerts animate into their new positions using the `move` class.
+- New alerts receive `enter-*` classes so CSS can animate them in.
+- Dismissed alerts animate out using `leave-*` classes and are then removed.
+- Existing alerts animate into their new positions using the `move` class.
 
 ```css
 ui-alerts {
@@ -113,7 +113,9 @@ ui-alerts > * {
     ui-alerts > .enter-active,
     ui-alerts > .leave-active,
     ui-alerts > .move {
-        transition: opacity 0.2s ease, transform 0.2s ease;
+        transition:
+            opacity 0.2s ease,
+            transform 0.2s ease;
     }
 
     ui-alerts > .move {
@@ -130,4 +132,4 @@ ui-alerts > * {
 
 ## Further Reading
 
--   [ARIA Authoring Practices Guide: Alert Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/)
+- [ARIA Authoring Practices Guide: Alert Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/)

package/src/combobox/README.md

@@ -0,0 +1,133 @@
+# Combobox
+
+**An accessible, filterable combobox built on native form controls.**
+
+`ui-combobox` upgrades native `<select>` and `<input list>` controls into
+user-friendly, accessible comboboxes.
+
+## Example
+
+```js
+import { ComboboxElement } from 'inclusive-elements';
+
+window.customElements.define('ui-combobox', ComboboxElement);
+```
+
+Use a `<select>` when values must come from its options:
+
+```html
+<label for="country">Country</label>
+<ui-combobox>
+    <select id="country" name="country">
+        <option value="">Choose a country</option>
+        <option value="au">Australia</option>
+        <option value="nz">New Zealand</option>
+    </select>
+</ui-combobox>
+```
+
+Add `multiple` for a token-based multi-select:
+
+```html
+<label for="specialties">Specialties</label>
+<ui-combobox>
+    <select id="specialties" name="specialties[]" multiple>
+        <option value="cardiology">Cardiology</option>
+        <option value="emergency">Emergency medicine</option>
+        <option value="paediatrics">Paediatrics</option>
+    </select>
+</ui-combobox>
+```
+
+Use `<input list>` when arbitrary text is also valid:
+
+```html
+<label for="city">City</label>
+<ui-combobox>
+    <input id="city" name="city" type="text" list="cities" />
+    <datalist id="cities">
+        <option value="Adelaide"></option>
+        <option value="Melbourne"></option>
+        <option value="Sydney"></option>
+    </datalist>
+</ui-combobox>
+```
+
+## Requirements
+
+- The browser must support the Popover API. Unsupported browsers keep the
+  native control unchanged.
+- Keep the label outside `ui-combobox` and associate it with the native control.
+- `<input list>` supports the `text`, `search`, `email`, `url`, and `tel` input
+  types, except for multi-address `<input type="email" multiple>` controls,
+  which remain native.
+
+## Behavior
+
+For a select, the element inserts a filter input and listbox alongside the native
+control, then hides the select. For an `<input list>`, it reuses the native input
+and replaces its suggestions with a filterable listbox. `multiple` selects show
+selected options as removable tokens.
+
+The native control remains in the DOM and is kept in sync, so it continues to
+work as expected for form submission, validation, reset, events, focus, and
+disabled states.
+
+- Focus or click opens the suggestions. A select's filter input is cleared
+  so all options are visible; a datalist input keeps its submitted text.
+- Typing filters options by label or value.
+- Arrow Up and Arrow Down move through enabled options. Enter chooses one and
+  Escape closes the suggestions.
+- Choosing a single-select option closes the popup. Choosing a multi-select option
+  adds a token and leaves the popup open.
+- Left and Right move between multi-select tokens. Backspace or Delete removes a
+  focused token.
+- Tab leaves the combobox without changing its value. With the popup closed,
+  Enter retains the input's native behavior, including form submission.
+
+## API
+
+Call `refresh()` after changing the source control or its related label, form,
+or datalist in a way that does not emit an event or update observed markup.
+
+```js
+const combobox = document.querySelector('ui-combobox');
+
+input.setAttribute('list', 'regional-cities');
+combobox.refresh();
+```
+
+## Styling
+
+Use the ARIA roles to style the combobox, listbox, and options. The generated
+light DOM exposes these stable styling hooks where no semantic equivalent
+exists:
+
+- `[data-combobox-control]`
+- `[data-combobox-tokens]`, `[data-combobox-token]`, and
+  `[data-combobox-token-remove]`
+- `[role="option"][data-placeholder]` for a single select's empty option
+- `[role="option"][data-active]` for the active option
+
+```css
+ui-combobox [role='listbox'] {
+    position: fixed;
+    position-anchor: auto;
+    max-height: 16rem;
+    overflow: auto;
+}
+
+ui-combobox [role='option'][data-active] {
+    outline: 2px solid currentColor;
+}
+
+ui-combobox [role='option'][data-placeholder] {
+    color: GrayText;
+}
+```
+
+## Further Reading
+
+- [ARIA Authoring Practices Guide: Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)
+- [MDN: ARIA combobox role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/combobox_role)
+- [MDN: `<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist)

package/src/dialog/README.md

@@ -12,11 +12,9 @@
 <button type="button" id="delete-trigger">Delete</button>
 
 <script type="module">
-    document
-        .getElementById('delete-trigger')
-        ?.addEventListener('click', () => {
-            document.getElementById('delete-dialog')?.showModal();
-        });
+    document.getElementById('delete-trigger')?.addEventListener('click', () => {
+        document.getElementById('delete-dialog')?.showModal();
+    });
 </script>
 ```
 
@@ -34,24 +32,24 @@
 
 ## Platform Requirements
 
--   Requires modern browser support for `<dialog>`.
--   Declarative `command="show-modal"` and `commandfor` buttons are newer platform features. Use `showModal()` when you need the imperative fallback.
+- Requires modern browser support for `<dialog>`.
+- Declarative `command="show-modal"` and `commandfor` buttons are newer platform features. Use `showModal()` when you need the imperative fallback.
 
 ## Behavior
 
--   `<dialog>` provides the modal container and top-layer behavior.
--   Declarative `command="show-modal"` / `commandfor` buttons and imperative `showModal()` calls are both valid ways to open the dialog.
--   The browser manages focus movement, Escape handling, and inert background behavior.
+- `<dialog>` provides the modal container and top-layer behavior.
+- Declarative `command="show-modal"` / `commandfor` buttons and imperative `showModal()` calls are both valid ways to open the dialog.
+- The browser manages focus movement, Escape handling, and inert background behavior.
 
 ## Accessibility Notes
 
--   Give the dialog an accessible name with visible text and `aria-labelledby`, or with `aria-label` when no visible title fits.
--   Provide an obvious dismiss action inside the dialog, not just Escape or backdrop dismissal.
--   Use `<form method="dialog">` or `close()` intentionally so the close behavior is explicit in your markup and scripts.
--   Native modal dialogs usually restore focus appropriately when they close. Only manage focus yourself when the opener is gone or your workflow needs a different destination.
--   This pattern is for modal tasks that need blocking attention. For non-modal surfaces, use a popover or another native pattern instead.
+- Give the dialog an accessible name with visible text and `aria-labelledby`, or with `aria-label` when no visible title fits.
+- Provide an obvious dismiss action inside the dialog, not just Escape or backdrop dismissal.
+- Use `<form method="dialog">` or `close()` intentionally so the close behavior is explicit in your markup and scripts.
+- Native modal dialogs usually restore focus appropriately when they close. Only manage focus yourself when the opener is gone or your workflow needs a different destination.
+- This pattern is for modal tasks that need blocking attention. For non-modal surfaces, use a popover or another native pattern instead.
 
 ## Further Reading
 
--   [MDN: `<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog)
--   [ARIA Authoring Practices Guide: Dialog (Modal) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
+- [MDN: `<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog)
+- [ARIA Authoring Practices Guide: Dialog (Modal) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)

package/src/disclosure/README.md

@@ -15,14 +15,14 @@
 
 ## Behavior
 
--   `<summary>` acts as the built-in control for toggling the disclosure.
--   The browser manages the open state and accessibility semantics.
+- `<summary>` acts as the built-in control for toggling the disclosure.
+- The browser manages the open state and accessibility semantics.
 
 ## Accessibility Notes
 
--   Write summary text that clearly describes the hidden content, not generic labels such as "More" without context.
+- Write summary text that clearly describes the hidden content, not generic labels such as "More" without context.
 
 ## Further Reading
 
--   [MDN: `<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details)
--   [ARIA Authoring Practices Guide: Disclosure Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)
+- [MDN: `<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details)
+- [ARIA Authoring Practices Guide: Disclosure Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)

package/src/menu/README.md

@@ -13,19 +13,12 @@ window.customElements.define('ui-menu', MenuElement);
 ```
 
 ```html
-<button type="button" popovertarget="actions-menu" aria-haspopup="menu">
-    Actions
-</button>
+<button type="button" popovertarget="actions-menu" aria-haspopup="menu">Actions</button>
 
 <ui-menu id="actions-menu" popover data-placement="bottom-start">
     <button type="button" role="menuitem">Edit</button>
     <button type="button" role="menuitem">Archive</button>
-    <button
-        type="button"
-        role="menuitem"
-        popovertarget="more-menu"
-        aria-haspopup="menu"
-    >
+    <button type="button" role="menuitem" popovertarget="more-menu" aria-haspopup="menu">
         More
     </button>
 </ui-menu>
@@ -38,38 +31,38 @@ window.customElements.define('ui-menu', MenuElement);
 
 ## Platform Requirements
 
--   Requires modern browser support for the Popover API.
--   The styling examples use CSS anchor positioning.
+- Requires modern browser support for the Popover API.
+- The styling examples use CSS anchor positioning.
 
 ## Behavior
 
 ### Structure
 
--   Add `popover` to the root `<ui-menu>` and point a button at it with `popovertarget` and `aria-haspopup="menu"`.
--   Give direct children a menu item role such as `role="menuitem"`. `ui-menu` adds `role="menu"` and `tabindex="-1"` to the menu itself and manages direct menuitem children with `tabindex="-1"` as well.
+- Add `popover` to the root `<ui-menu>` and point a button at it with `popovertarget` and `aria-haspopup="menu"`.
+- Give direct children a menu item role such as `role="menuitem"`. `ui-menu` adds `role="menu"` and `tabindex="-1"` to the menu itself and manages direct menuitem children with `tabindex="-1"` as well.
 
 ### Navigation
 
--   By default, menus are vertical. Arrow Down and Arrow Up move through the enabled items and wrap at the ends.
--   Pressing Arrow Down or Arrow Up on the root trigger opens the menu and focuses the first or last enabled item.
--   Typeahead matches and moves focus to enabled items by their `aria-label` when present, otherwise by their text content.
+- By default, menus are vertical. Arrow Down and Arrow Up move through the enabled items and wrap at the ends.
+- Pressing Arrow Down or Arrow Up on the root trigger opens the menu and focuses the first or last enabled item.
+- Typeahead matches and moves focus to enabled items by their `aria-label` when present, otherwise by their text content.
 
 ### Horizontal Menus
 
--   To make a horizontal popup menu, set `aria-orientation="horizontal"` on `<ui-menu>`. This keeps the element a `menu`, not a `menubar`, and works well for patterns such as reaction pickers.
--   In a horizontal popup menu, Left and Right move through the enabled items and wrap at the ends.
+- To make a horizontal popup menu, set `aria-orientation="horizontal"` on `<ui-menu>`. This keeps the element a `menu`, not a `menubar`, and works well for patterns such as reaction pickers.
+- In a horizontal popup menu, Left and Right move through the enabled items and wrap at the ends.
 
 ### Submenus
 
--   To create a submenu, make a menu item that points at another `<ui-menu>` with `popovertarget` and `aria-haspopup="menu"`.
--   Submenus open on click, hover, Enter, or Space, Right Arrow in vertical menus, and Down Arrow in horizontal menus.
--   Submenus close with Left Arrow in vertical menus and Up Arrow in horizontal menus.
+- To create a submenu, make a menu item that points at another `<ui-menu>` with `popovertarget` and `aria-haspopup="menu"`.
+- Submenus open on click, hover, Enter, or Space, Right Arrow in vertical menus, and Down Arrow in horizontal menus.
+- Submenus close with Left Arrow in vertical menus and Up Arrow in horizontal menus.
 
 ### Closing
 
--   Clicking a regular menu item closes the open menu tree.
--   Escape also closes the open menu tree.
--   Tab closes the open menu tree before normal tab order continues.
+- Clicking a regular menu item closes the open menu tree.
+- Escape also closes the open menu tree.
+- Tab closes the open menu tree before normal tab order continues.
 
 ## API
 
@@ -99,5 +92,5 @@ MenuElement.searchDelay = 800;
 
 ## Further Reading
 
--   [ARIA Authoring Practices Guide: Menu and Menubar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)
--   [MDN: Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using)
+- [ARIA Authoring Practices Guide: Menu and Menubar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)
+- [MDN: Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using)

package/src/popover/README.md

@@ -14,20 +14,20 @@
 
 ## Platform Requirements
 
--   Requires modern browser support for the Popover API.
--   The styling examples use CSS anchor positioning.
+- Requires modern browser support for the Popover API.
+- The styling examples use CSS anchor positioning.
 
 ## Behavior
 
--   The button uses `popovertarget` to control the popover surface.
--   The browser manages opening, closing, and light dismiss behavior for the popover.
--   CSS anchor positioning can be used to place the popover relative to its trigger.
+- The button uses `popovertarget` to control the popover surface.
+- The browser manages opening, closing, and light dismiss behavior for the popover.
+- CSS anchor positioning can be used to place the popover relative to its trigger.
 
 ## Accessibility Notes
 
--   `popover` gives you a surface and lifecycle, not a semantic role. Choose markup and ARIA that match the actual pattern, such as menu, tooltip, or generic descriptive content.
--   Make sure the trigger has an accessible name and clearly communicates what will open.
--   Keep the content structure appropriate to the job. A simple help popover can stay plain, while interactive or decision-heavy content may be better served by a dialog.
+- `popover` gives you a surface and lifecycle, not a semantic role. Choose markup and ARIA that match the actual pattern, such as menu, tooltip, or generic descriptive content.
+- Make sure the trigger has an accessible name and clearly communicates what will open.
+- Keep the content structure appropriate to the job. A simple help popover can stay plain, while interactive or decision-heavy content may be better served by a dialog.
 
 ## Styling
 
@@ -90,5 +90,5 @@ As a simple recommendation, you can style all popover surfaces with the `popover
 
 ## Further Reading
 
--   [MDN: Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using)
--   [MDN: CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)
+- [MDN: Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using)
+- [MDN: CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)

package/src/tabs/README.md

@@ -41,26 +41,26 @@ window.customElements.define('ui-tabs', TabsElement);
 
 ### Structure
 
--   Add one descendant with `role="tablist"`. Use `button` elements with `role="tab"` inside it. Panels are read from owned descendants with `role="tabpanel"`, and `ui-tabs` pairs them strictly by document order.
--   For initialized pairs, `ui-tabs` preserves existing `id` values where present, fills in missing `id` values, and normalizes `aria-controls` and `aria-labelledby` so each ordered pair stays wired together.
+- Add one descendant with `role="tablist"`. Use `button` elements with `role="tab"` inside it. Panels are read from owned descendants with `role="tabpanel"`, and `ui-tabs` pairs them strictly by document order.
+- For initialized pairs, `ui-tabs` preserves existing `id` values where present, fills in missing `id` values, and normalizes `aria-controls` and `aria-labelledby` so each ordered pair stays wired together.
 
 ### Selection And Panels
 
--   Set `aria-selected="true"` on the tab that should be active by default. If none is marked selected, the first tab is selected automatically when the element connects.
--   The active tab gets `aria-selected="true"` and stays in the normal tab order. Inactive tabs get `aria-selected="false"` and `tabindex="-1"`.
--   Only the active panel remains visible. Other panels get `hidden = true`.
--   If the active panel has no tabbable content and no author-provided `tabindex`, `ui-tabs` gives the panel `tabindex="0"` so keyboard users can still reach it.
--   The element dispatches a `change` event on the `<ui-tabs>` element when user interaction or `selectTab()` changes the active tab.
+- Set `aria-selected="true"` on the tab that should be active by default. If none is marked selected, the first tab is selected automatically when the element connects.
+- The active tab gets `aria-selected="true"` and stays in the normal tab order. Inactive tabs get `aria-selected="false"` and `tabindex="-1"`.
+- Only the active panel remains visible. Other panels get `hidden = true`.
+- If the active panel has no tabbable content and no author-provided `tabindex`, `ui-tabs` gives the panel `tabindex="0"` so keyboard users can still reach it.
+- The element dispatches a `change` event on the `<ui-tabs>` element when user interaction or `selectTab()` changes the active tab.
 
 ### Keyboard Navigation
 
--   In a horizontal tablist, Left and Right move between tabs and wrap at the ends. Home and End jump to the first or last tab.
--   In a vertical tablist, set `aria-orientation="vertical"` on the tablist. Then Up and Down move between tabs instead of Left and Right.
--   Moving focus with the keyboard automatically activates the newly focused tab.
+- In a horizontal tablist, Left and Right move between tabs and wrap at the ends. Home and End jump to the first or last tab.
+- In a vertical tablist, set `aria-orientation="vertical"` on the tablist. Then Up and Down move between tabs instead of Left and Right.
+- Moving focus with the keyboard automatically activates the newly focused tab.
 
 ### Dynamic Changes
 
--   Adding, removing, or re-roleing tabs and panels after connection automatically re-syncs the ordered pairs. The current selected tab is preserved when its ordered slot still has a matching panel.
+- Adding, removing, or re-roleing tabs and panels after connection automatically re-syncs the ordered pairs. The current selected tab is preserved when its ordered slot still has a matching panel.
 
 ## API
 
@@ -87,4 +87,4 @@ tabs.selectTab(index, {
 
 ## Further Reading
 
--   [ARIA Authoring Practices Guide: Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
+- [ARIA Authoring Practices Guide: Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)

package/src/toolbar/README.md

@@ -30,22 +30,22 @@ window.customElements.define('ui-toolbar', ToolbarElement);
 
 ### Structure
 
--   `ui-toolbar` adds `role="toolbar"` if it is not already present.
+- `ui-toolbar` adds `role="toolbar"` if it is not already present.
 
 ### Focus Management
 
--   The toolbar itself starts as the entry point into the widget. When it receives focus, focus moves to the current managed control inside it.
--   The active control gets `tabindex="0"`. Other controls get `tabindex="-1"` so Tab leaves the toolbar instead of stepping through every control.
+- The toolbar itself starts as the entry point into the widget. When it receives focus, focus moves to the current managed control inside it.
+- The active control gets `tabindex="0"`. Other controls get `tabindex="-1"` so Tab leaves the toolbar instead of stepping through every control.
 
 ### Keyboard Navigation
 
--   By default, toolbars are horizontal. Left and Right move focus between controls and wrap at the ends.
--   Set `aria-orientation="vertical"` when the toolbar is arranged vertically. Then Up and Down move focus between controls instead.
--   Home and End move focus to the first or last control.
+- By default, toolbars are horizontal. Left and Right move focus between controls and wrap at the ends.
+- Set `aria-orientation="vertical"` when the toolbar is arranged vertically. Then Up and Down move focus between controls instead.
+- Home and End move focus to the first or last control.
 
 ### Dynamic Changes
 
--   Adding or removing controls after connection keeps the roving tabindex state in sync so the toolbar remains a single managed widget in the tab order.
+- Adding or removing controls after connection keeps the roving tabindex state in sync so the toolbar remains a single managed widget in the tab order.
 
 ## Styling
 
@@ -65,4 +65,4 @@ ui-toolbar[aria-orientation='vertical'] {
 
 ## Further Reading
 
--   [ARIA Authoring Practices Guide: Toolbar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)
+- [ARIA Authoring Practices Guide: Toolbar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)

package/src/tooltip/README.md

@@ -26,32 +26,32 @@ window.customElements.define('ui-tooltip', TooltipElement);
 
 ## Platform Requirements
 
--   Requires modern browser support for the Popover API and hint popovers with `popover="hint"`.
--   The styling examples use CSS anchor positioning.
+- Requires modern browser support for the Popover API and hint popovers with `popover="hint"`.
+- The styling examples use CSS anchor positioning.
 
 ## Behavior
 
 ### Structure
 
--   `ui-tooltip` adds `popover="hint"` and `role="tooltip"` if they are not already present.
--   The tooltip ensures it has an `id` and adds that value to the owner's `aria-describedby`.
+- `ui-tooltip` adds `popover="hint"` and `role="tooltip"` if they are not already present.
+- The tooltip ensures it has an `id` and adds that value to the owner's `aria-describedby`.
 
 ### Ownership
 
--   Use whichever ownership style fits the markup best: if the tooltip has a `for` attribute, it targets the element with that `id`; otherwise, it targets its immediately preceding element sibling.
--   Changing `for`, `id`, or `disabled` re-syncs the owner relationship automatically.
+- Use whichever ownership style fits the markup best: if the tooltip has a `for` attribute, it targets the element with that `id`; otherwise, it targets its immediately preceding element sibling.
+- Changing `for`, `id`, or `disabled` re-syncs the owner relationship automatically.
 
 ### Visibility And Interaction
 
--   The `disabled` attribute, or the reflected `tooltip.disabled` property, prevents the tooltip from showing and clears any current owner relationship.
--   Tooltips do not show while the tooltip itself is `disabled`, or when the resolved owner is `disabled` or `aria-disabled="true"`.
--   The tooltip shows on keyboard focus and pointer hover, hides on blur, pointer exit, click, and Escape, and stays open while the pointer moves between the owner and the tooltip.
+- The `disabled` attribute, or the reflected `tooltip.disabled` property, prevents the tooltip from showing and clears any current owner relationship.
+- Tooltips do not show while the tooltip itself is `disabled`, or when the resolved owner is `disabled` or `aria-disabled="true"`.
+- The tooltip shows on keyboard focus and pointer hover, hides on blur, pointer exit, click, and Escape, and stays open while the pointer moves between the owner and the tooltip.
 
 ### Content Guidance
 
--   Tooltip content should stay descriptive, supplemental, and non-interactive.
--   Do not put required instructions or critical information in a tooltip, because hover is not reliably available on touch and other coarse-pointer devices.
--   If you need buttons, links, form controls, or information the user must be able to discover, use a popover or dialog pattern instead.
+- Tooltip content should stay descriptive, supplemental, and non-interactive.
+- Do not put required instructions or critical information in a tooltip, because hover is not reliably available on touch and other coarse-pointer devices.
+- If you need buttons, links, form controls, or information the user must be able to discover, use a popover or dialog pattern instead.
 
 ## API
 
@@ -93,5 +93,5 @@ ui-tooltip[popover][data-placement='bottom'] {
 
 ## Further Reading
 
--   [ARIA Authoring Practices Guide: Tooltip Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)
--   [MDN: Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using)
+- [ARIA Authoring Practices Guide: Tooltip Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)
+- [MDN: Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using)