@stealthscale/component-a11y 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Stealth Scale B.V.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# @stealthscale/component-a11y
+
+Draws what a keyboard and a screen reader need: words read out and drawn nowhere, a way past the
+navigation, and one tab stop over a set of controls. Every component binds a recipe and draws
+nothing of its own, so a theme restyles all of them by extending the recipe. The preset under
+`./theme` registers the recipes with an application's compiler.
+
+## Install
+
+```bash
+pnpm add @stealthscale/component-a11y
+```
+
+The package peers on `react`, `@stealthscale/hooks` and `@stealthscale/theme`. An application lists
+the preset under `./theme` among the presets its compiler installs.
+
+## VisuallyHidden
+
+Exposes its words to a screen reader and draws them nowhere. The words stay in the accessibility
+tree, which `display: none` and `visibility: hidden` both take them out of. A control a keyboard can
+reach is `focusable`, so it comes into view while focus is on it and a sighted reader tabbing
+through the page keeps their place.
+
+```tsx
+import { VisuallyHidden } from "@stealthscale/component-a11y";
+
+<button type="button">
+  <Icon viewBox="0 0 24 24">…</Icon>
+  <VisuallyHidden>Close</VisuallyHidden>
+</button>;
+<VisuallyHidden as="h2">Sections</VisuallyHidden>;
+```
+
+| Axis        | Values | Default |
+| ----------- | ------ | ------- |
+| `focusable` | `true` | off     |
+
+## SkipNav
+
+Carries a keyboard past the navigation, composed as `SkipNav.Link` at the top of the document and
+`SkipNav.Target` where the content starts. The link is hidden until focus reaches it, so a reader
+who tabs meets it first and a reader who never tabs never sees it. The target takes a tab index of
+minus one, because a browser moves focus to a fragment only where the target can hold focus.
+
+```tsx
+import { SkipNav } from "@stealthscale/component-a11y";
+
+<SkipNav.Link>Skip to content</SkipNav.Link>;
+<SkipNav.Target as="main">…</SkipNav.Target>;
+```
+
+The link points at `#content` and the target carries that id, so neither states the other. A page
+with more than one landing place names its own: `<SkipNav.Link href="#search">` beside
+`<SkipNav.Target id="search">`.
+
+## RovingFocus
+
+Holds one tab stop for a set of controls, composed as `RovingFocus.Root` holding `RovingFocus.Item`.
+A reader reaches the set with Tab and moves inside it with the arrows, which is what the toolbar,
+tablist and menubar patterns ask for. Home and End go to the ends, a disabled item is passed over,
+and the arrows run the other way where the line runs right to left.
+
+```tsx
+import { RovingFocus } from "@stealthscale/component-a11y";
+import { Button } from "@stealthscale/component-actions";
+
+<RovingFocus.Root role="toolbar">
+  <RovingFocus.Item as={Button} variant="ghost">
+    Cut
+  </RovingFocus.Item>
+  <RovingFocus.Item as={Button} variant="ghost">
+    Copy
+  </RovingFocus.Item>
+</RovingFocus.Root>;
+```
+
+The root carries no role of its own, because naming a set of controls is the caller's decision. It
+reports the orientation to a screen reader only where the caller gave it a role, since
+`aria-orientation` means nothing on a plain element.
+
+| Axis          | Values                           | Default      |
+| ------------- | -------------------------------- | ------------ |
+| `orientation` | `horizontal`, `vertical`, `both` | `horizontal` |
+
+`wrap` joins the ends together. `activeId` sets which item holds the stop from outside, and
+`onActiveIdChange` reports the stop moving.
+
+## Licence
+
+MIT. See [LICENSE](LICENSE).

package/dist/cyclonedx/bom.json

@@ -0,0 +1 @@
+{"$schema":"http://cyclonedx.org/schema/bom-1.7.schema.json","bomFormat":"CycloneDX","specVersion":"1.7","version":1,"metadata":{"lifecycles":[{"phase":"build"}],"tools":{"components":[{"type":"application","name":"rolldown","version":"1.2.7"},{"type":"application","name":"vite","version":"8.2.2"},{"type":"library","name":"core","group":"@arethetypeswrong","version":"0.18.5","bom-ref":"pkg:npm/%40arethetypeswrong/core@0.18.5","author":"Andrew Branch","description":"The API behind arethetypeswrong.github.io","hashes":[{"alg":"SHA-512","content":"f72b63cc6c318e6f54cfb23d6af7dbb79be542deae93db914444b3263aabce797a58abc8e9dc184e8faf277534d96aeafe64778aa97f3f386f1e129d2480230d"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40arethetypeswrong/core@0.18.5","externalReferences":[{"url":"https://github.com/arethetypeswrong/arethetypeswrong.github.io.git#packages/core","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=20"}]},{"type":"library","name":"hooks","group":"@stealthscale","version":"0.1.0","bom-ref":"pkg:npm/%40stealthscale/hooks@0.1.0","description":"The React hooks a component uses to read the page it draws into: how the page is read, what it measures, and what a value was on the previous render.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/hooks@0.1.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#foundations/hooks","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/foundations/hooks#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"theme","group":"@stealthscale","version":"0.3.0","bom-ref":"pkg:npm/%40stealthscale/theme@0.3.0","description":"Publishes the foundation every recipe is written against, the runtime every component binds its recipe with, and the vocabulary a theme is written in.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/theme@0.3.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#foundations/theme","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/foundations/theme#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"vite-config-react","group":"@stealthscale","version":"0.8.0","bom-ref":"pkg:npm/%40stealthscale/vite-config-react@0.8.0","description":"Adds the JSX transform, the React lint rules, a test document and an MDX compiler to a package that renders.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/vite-config-react@0.8.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#packages/vite-config-react","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/packages/vite-config-react#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"vite-config-theme","group":"@stealthscale","version":"0.1.0","bom-ref":"pkg:npm/%40stealthscale/vite-config-theme@0.1.0","description":"Adds the runtime generator to a design-system package and the stylesheet compiler to an application.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/vite-config-theme@0.1.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#packages/vite-config-theme","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/packages/vite-config-theme#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"vite-config-typescript","group":"@stealthscale","version":"0.3.0","bom-ref":"pkg:npm/%40stealthscale/vite-config-typescript@0.3.0","description":"Sets the TypeScript options every stealthscale package compiles with.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/vite-config-typescript@0.3.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#packages/vite-config-typescript","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/packages/vite-config-typescript#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"vite-config","group":"@stealthscale","version":"0.6.0","bom-ref":"pkg:npm/%40stealthscale/vite-config@0.6.0","description":"Configures a package from five Vite+ tiers and a named layer for every block.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/vite-config@0.6.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#packages/vite-config","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/packages/vite-config#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"react","group":"@testing-library","version":"16.3.3","bom-ref":"pkg:npm/%40testing-library/react@16.3.3","author":"Kent C. Dodds <me@kentcdodds.com> (https://kentcdodds.com)","description":"Simple and complete React DOM testing utilities that encourage good testing practices.","hashes":[{"alg":"SHA-512","content":"528d7ddcd8106cf333ea5aeb86d45040570c0ba45efc42cb15b6ee54bdf4583959c65a597fdfe53074c05713d12f0d6ad62bbd389991d5cd812e210d46cb5d06"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40testing-library/react@16.3.3","externalReferences":[{"url":"https://github.com/testing-library/react-testing-library/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs.url\""},{"url":"https://github.com/testing-library/react-testing-library","type":"vcs","comment":"as detected from PackageJson property \"repository.url\""},{"url":"https://github.com/testing-library/react-testing-library#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=18"}]},{"type":"library","name":"react-dom","group":"@types","version":"19.3.0","bom-ref":"pkg:npm/%40types/react-dom@19.3.0","description":"TypeScript definitions for react-dom","hashes":[{"alg":"SHA-512","content":"648edb538da66575ca1e7fea34b130d88adb888354ed7e7ebdf81d8b10479023696165e32a07d0fcffaec866f90a338b07d51c9d37a0debca542d5768729b8e1"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40types/react-dom@19.3.0","externalReferences":[{"url":"https://github.com/DefinitelyTyped/DefinitelyTyped.git#types/react-dom","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom","type":"website","comment":"as detected from PackageJson property \"homepage\""}]},{"type":"library","name":"react","group":"@types","version":"19.3.0","bom-ref":"pkg:npm/%40types/react@19.3.0","description":"TypeScript definitions for react","hashes":[{"alg":"SHA-512","content":"374ac50ae1fd628c46f7f9bad65f4c7e924a7e62ce554d1e9bb8a9233e9346049292f45e2c1f6f2fce4607ecabf01b3995eaa9be0f7a252c05e194b5b38be242"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40types/react@19.3.0","externalReferences":[{"url":"https://github.com/DefinitelyTyped/DefinitelyTyped.git#types/react","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react","type":"website","comment":"as detected from PackageJson property \"homepage\""}]},{"type":"library","name":"babel-plugin-react-compiler","version":"1.0.0","bom-ref":"pkg:npm/babel-plugin-react-compiler@1.0.0","description":"Babel plugin for React Compiler.","hashes":[{"alg":"SHA-512","content":"2319bcb457e828a20f61d0822984ecaaff85778209d0342a3321229a8fa9c5438c511f5c54f9704eb16df40beefb771be99a77980ce5fadd4cac6d9fc712acc7"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/babel-plugin-react-compiler@1.0.0","externalReferences":[{"url":"git+https://github.com/facebook/react.git#compiler/packages/babel-plugin-react-compiler","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""}]},{"type":"library","name":"happy-dom","version":"20.14.5","bom-ref":"pkg:npm/happy-dom@20.14.5","author":"David Ortner","description":"Happy DOM is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG DOM and HTML.","hashes":[{"alg":"SHA-512","content":"c7f47392958ee346d38c8a13df4890b6deb814b2e61ff89171408dd97fff6cbc7b1f789f91d7cf5f2aacae8fce62dab32008622cc300ee69a2391f42dcd38a8d"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/happy-dom@20.14.5","externalReferences":[{"url":"https://github.com/capricorn86/happy-dom","type":"vcs","comment":"as detected from PackageJson property \"repository\""},{"url":"https://github.com/capricorn86/happy-dom","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=20.0.0"}]},{"type":"library","name":"oxc-transform-react","version":"0.149.0","bom-ref":"pkg:npm/oxc-transform-react@0.149.0","author":"Boshen and oxc contributors","description":"Oxc React Compiler Node API","hashes":[{"alg":"SHA-512","content":"69bdddc5c3ed90349f211f6d35dc4752d9a974bd258479ddb010fd214014e41c6d26dc061bff39367473b367f62b0a2e3641e5edc692b3030b41e52fc3714447"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/oxc-transform-react@0.149.0","externalReferences":[{"url":"https://github.com/oxc-project/oxc/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/oxc-project/oxc.git#napi/transform-react","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://oxc.rs","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":"^20.19.0 || >=22.12.0"}]},{"type":"library","name":"react-dom","version":"19.3.0","bom-ref":"pkg:npm/react-dom@19.3.0","description":"React package for working with the DOM.","hashes":[{"alg":"SHA-512","content":"24393c76089fe753a31680c4ef4f8e4fd202c98afeebd1e59a284dc29d7e36c7db9dadede6c22209af59264b43990e3fd5bfeb9f6ea1200476b985c332be6bd1"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/react-dom@19.3.0","externalReferences":[{"url":"https://github.com/react/react/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs.url\""},{"url":"https://github.com/react/react.git#packages/react-dom","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://react.dev/","type":"website","comment":"as detected from PackageJson property \"homepage\""}]},{"type":"library","name":"react","version":"19.3.0","bom-ref":"pkg:npm/react@19.3.0","description":"React is a JavaScript library for building user interfaces.","hashes":[{"alg":"SHA-512","content":"13c2d471bb415addb46db9766281dfc7864305dc554df38ab42667f5c0d227897afe7ba8029729201723e3bb76c19a155fc836647b8c1db892860091d53e52a2"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/react@19.3.0","externalReferences":[{"url":"https://github.com/react/react/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"https://github.com/react/react.git#packages/react","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://react.dev/","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=0.10.0"}]},{"type":"library","name":"typescript","version":"7.0.2","bom-ref":"pkg:npm/typescript@7.0.2","author":"Microsoft Corp.","description":"TypeScript is a language for application scale JavaScript development","hashes":[{"alg":"SHA-512","content":"f0561abbdea8dcd28e85b8ca8bfa8dbc6fd6e63873c646dd9b9b23f406d9ff94f9b16aa7de12602df1b1dbbb11299593bf2cc23fc74b4414dfe6d05349155434"}],"licenses":[{"license":{"id":"Apache-2.0"}}],"purl":"pkg:npm/typescript@7.0.2","externalReferences":[{"url":"https://github.com/microsoft/TypeScript/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs.url\""},{"url":"https://github.com/microsoft/TypeScript.git","type":"vcs","comment":"as detected from PackageJson property \"repository.url\""},{"url":"https://www.typescriptlang.org/","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=16.20.0"}]},{"type":"library","name":"vitest","version":"4.1.11","bom-ref":"pkg:npm/vitest@4.1.11","author":"Anthony Fu <anthonyfu117@hotmail.com>","description":"Next generation testing framework powered by Vite","hashes":[{"alg":"SHA-512","content":"7e1002acd5d489d21b19206be4595bb8190eed5582d59c8b9740cee025360eb42800fc57f3862cc6cf877864298a2e656565754388016534eee3d985f80e8477"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/vitest@4.1.11","externalReferences":[{"url":"https://github.com/vitest-dev/vitest/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs.url\""},{"url":"git+https://github.com/vitest-dev/vitest.git#packages/vitest","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://vitest.dev","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":"^20.0.0 || ^22.0.0 || >=24.0.0"}]}]},"component":{"type":"library","name":"component-a11y","group":"@stealthscale","version":"0.1.0","bom-ref":"pkg:npm/%40stealthscale/component-a11y@0.1.0","description":"Draws what a keyboard and a screen reader need, and an eye does not.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/component-a11y@0.1.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#components/a11y","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/components/a11y#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}],"evidence":{"licenses":[{"license":{"name":"file: LICENSE","text":{"content":"TUlUIExpY2Vuc2UKCkNvcHlyaWdodCAoYykgMjAyNiBTdGVhbHRoIFNjYWxlIEIuVi4KClBlcm1pc3Npb24gaXMgaGVyZWJ5IGdyYW50ZWQsIGZyZWUgb2YgY2hhcmdlLCB0byBhbnkgcGVyc29uIG9idGFpbmluZyBhIGNvcHkKb2YgdGhpcyBzb2Z0d2FyZSBhbmQgYXNzb2NpYXRlZCBkb2N1bWVudGF0aW9uIGZpbGVzICh0aGUgIlNvZnR3YXJlIiksIHRvIGRlYWwKaW4gdGhlIFNvZnR3YXJlIHdpdGhvdXQgcmVzdHJpY3Rpb24sIGluY2x1ZGluZyB3aXRob3V0IGxpbWl0YXRpb24gdGhlIHJpZ2h0cwp0byB1c2UsIGNvcHksIG1vZGlmeSwgbWVyZ2UsIHB1Ymxpc2gsIGRpc3RyaWJ1dGUsIHN1YmxpY2Vuc2UsIGFuZC9vciBzZWxsCmNvcGllcyBvZiB0aGUgU29mdHdhcmUsIGFuZCB0byBwZXJtaXQgcGVyc29ucyB0byB3aG9tIHRoZSBTb2Z0d2FyZSBpcwpmdXJuaXNoZWQgdG8gZG8gc28sIHN1YmplY3QgdG8gdGhlIGZvbGxvd2luZyBjb25kaXRpb25zOgoKVGhlIGFib3ZlIGNvcHlyaWdodCBub3RpY2UgYW5kIHRoaXMgcGVybWlzc2lvbiBub3RpY2Ugc2hhbGwgYmUgaW5jbHVkZWQgaW4gYWxsCmNvcGllcyBvciBzdWJzdGFudGlhbCBwb3J0aW9ucyBvZiB0aGUgU29mdHdhcmUuCgpUSEUgU09GVFdBUkUgSVMgUFJPVklERUQgIkFTIElTIiwgV0lUSE9VVCBXQVJSQU5UWSBPRiBBTlkgS0lORCwgRVhQUkVTUyBPUgpJTVBMSUVELCBJTkNMVURJTkcgQlVUIE5PVCBMSU1JVEVEIFRPIFRIRSBXQVJSQU5USUVTIE9GIE1FUkNIQU5UQUJJTElUWSwKRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UgQU5EIE5PTklORlJJTkdFTUVOVC4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFCkFVVEhPUlMgT1IgQ09QWVJJR0hUIEhPTERFUlMgQkUgTElBQkxFIEZPUiBBTlkgQ0xBSU0sIERBTUFHRVMgT1IgT1RIRVIKTElBQklMSVRZLCBXSEVUSEVSIElOIEFOIEFDVElPTiBPRiBDT05UUkFDVCwgVE9SVCBPUiBPVEhFUldJU0UsIEFSSVNJTkcgRlJPTSwKT1VUIE9GIE9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgU09GVFdBUkUgT1IgVEhFIFVTRSBPUiBPVEhFUiBERUFMSU5HUyBJTiBUSEUKU09GVFdBUkUuCg==","contentType":"text/plain","encoding":"base64"}}}]}},"supplier":{"name":"Stealth Scale B.V.","url":["https://stealthscale.io"]}},"components":[],"dependencies":[{"ref":"pkg:npm/%40stealthscale/component-a11y@0.1.0"}]}

package/dist/index.d.ts

@@ -0,0 +1,141 @@
+import { ComponentProps, ReactElement, ReactNode, Ref } from "react";
+//#region src/roving-focus/item.d.ts
+/**
+ * Draws the element an item is laid out on.
+ */
+declare const Shell$1: import("@stealthscale/theme").StyledComponent<"div", {}>;
+/**
+ * Describes what an item takes beside everything a styled element takes.
+ */
+interface ItemProps extends ComponentProps<typeof Shell$1> {
+  /**
+   * Whether the arrows pass over the item.
+   */
+  disabled?: boolean | undefined;
+  /**
+   * The id the item answers to, which the group generates where a caller states none.
+   */
+  id?: string | undefined;
+  /**
+   * Where a caller wants the element.
+   */
+  ref?: Ref<HTMLDivElement> | undefined;
+}
+/**
+ * Takes the tab stop when the arrows reach it, and leaves the tab order otherwise.
+ *
+ * @throws {@link Error} When it is drawn outside a group.
+ */
+declare function Item(props: ItemProps): ReactElement;
+//#endregion
+//#region src/roving-focus/use-roving-focus.d.ts
+/**
+ * Selects which arrows move focus through the group.
+ */
+type Orientation = "both" | "horizontal" | "vertical";
+//#endregion
+//#region src/roving-focus/root.d.ts
+/**
+ * Draws the element the group is laid out on.
+ */
+declare const Shell: import("@stealthscale/theme").StyledComponent<"div", {
+  readonly orientation?: "both" | "horizontal" | "vertical";
+}>;
+/**
+ * Describes what a group takes beside the variants its recipe offers.
+ */
+interface RootProps extends Omit<ComponentProps<typeof Shell>, "orientation"> {
+  /**
+   * Which item holds the tab stop, where something above decides it.
+   */
+  activeId?: string | undefined;
+  /**
+   * The items the group lays out.
+   */
+  children?: ReactNode | undefined;
+  /**
+   * Which item Tab first enters, where the group decides for itself.
+   */
+  defaultActiveId?: string | undefined;
+  /**
+   * Hears that the tab stop moved.
+   */
+  onActiveIdChange?: ((activeId: string | undefined) => void) | undefined;
+  /**
+   * Which arrows move focus, which is along the line unless a caller says otherwise.
+   */
+  orientation?: Orientation | undefined;
+  /**
+   * Whether the ends join up.
+   */
+  wrap?: boolean | undefined;
+}
+/**
+ * Keeps one tab stop for the items inside it, and moves it under the arrow keys.
+ */
+declare function Root(props: RootProps): ReactElement;
+declare namespace index_d_exports {
+  export { Item, ItemProps, Orientation, Root, RootProps };
+}
+//#endregion
+//#region src/skip-nav/link.d.ts
+/**
+ * The fragment the link points at and the target answers to, where neither states one.
+ */
+declare const SKIP_NAV_TARGET = "content";
+/**
+ * Jumps a keyboard past the navigation to the page's content.
+ */
+declare const Link: import("@stealthscale/theme").StyledComponent<"a", {}>;
+/**
+ * Describes what the link takes: everything a styled anchor element takes.
+ */
+type LinkProps = ComponentProps<typeof Link>;
+//#endregion
+//#region src/skip-nav/target.d.ts
+/**
+ * Takes the focus the skip link sends, and draws nothing.
+ */
+declare const Target: import("@stealthscale/theme").StyledComponent<"div", {}>;
+/**
+ * Describes what the target takes: everything a styled div element takes.
+ */
+type TargetProps = ComponentProps<typeof Target>;
+declare namespace index_d_exports$1 {
+  export { Link, LinkProps, SKIP_NAV_TARGET, Target, TargetProps };
+}
+//#endregion
+//#region src/visually-hidden/context.d.ts
+/**
+ * Binds the hidden text's recipe to the element that draws it.
+ *
+ * @remarks
+ *   Apart from the recipe, because an application's compiler reads the recipe at build time and
+ *   the binding needs the runtime. A recipe file that also bound one would put the runtime behind
+ *   every compiler configuration that reads it.
+ */
+/**
+ * Binds the recipe once, for the hidden text and for whatever sets its variants from above.
+ */
+declare const PropsProvider: import("react").Provider<import("@stealthscale/theme").DataAttrs & Partial<{
+  readonly focusable?: boolean;
+}>>, withContext: <Tag extends import("react").ElementType>(Component: Tag, options?: import("@stealthscale/theme").JsxFactoryOptions<import("@stealthscale/theme").ComponentProps<Tag> & Partial<{
+  readonly focusable?: boolean;
+}>> | undefined) => import("@stealthscale/theme").StyledComponent<Tag, {
+  readonly focusable?: boolean;
+}>;
+//#endregion
+//#region src/visually-hidden/visually-hidden.d.ts
+/**
+ * Reads its words to a screen reader and draws them nowhere.
+ */
+export declare const VisuallyHidden: import("@stealthscale/theme").StyledComponent<"span", {
+  readonly focusable?: boolean;
+}>;
+/**
+ * Describes what hidden text takes: the variants its recipe offers, and everything a styled span
+ * element takes.
+ */
+type VisuallyHiddenProps = ComponentProps<typeof VisuallyHidden>;
+//#endregion
+export { index_d_exports as RovingFocus, index_d_exports$1 as SkipNav, type VisuallyHiddenProps, PropsProvider as VisuallyHiddenPropsProvider };

package/dist/index.js

@@ -0,0 +1,598 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { n as recipe$1, r as recipe, t as recipe$2 } from "./recipe-BKojQp6r.js";
+import { c } from "react/compiler-runtime";
+import { createContext, use, useEffect, useId, useRef, useState } from "react";
+import { useCallbackRef, useControllableState } from "@stealthscale/hooks";
+import { createRecipeContext, createSlotRecipeContext } from "@stealthscale/theme";
+import { jsx } from "react/jsx-runtime";
+//#region src/roving-focus/context.ts
+/**
+* Binds the group's recipe to the parts that draw it.
+*
+* @remarks
+*   Apart from the recipe, because an application's compiler reads the recipe at build time and
+*   the binding needs the runtime. The root carries the orientation, and every item below it reads
+*   its classes from the root through a context.
+*/
+/**
+* Binds the recipe once: the root takes the orientation, and each item draws its slot in it.
+*/
+const { withContext: withContext$1, withProvider: withProvider$1 } = createSlotRecipeContext(recipe);
+//#endregion
+//#region src/roving-focus/use-roving-focus.ts
+/**
+* Moves one tab stop through a set of controls, so a reader reaches the set with Tab and moves
+* inside it with the arrows.
+*
+* @remarks
+*   A toolbar, a row of tabs and a menu bar are all one stop in the tab order, and the arrows move
+*   which control that stop is on. The items register themselves rather than being counted by the
+*   root, because a root cannot see through whatever composes its children. Registration order is
+*   the order the effects ran, which is source order until something is conditional, so the list
+*   is sorted by where the items sit in the document: what the arrows follow is what the reader
+*   sees.
+*/
+/**
+* Maps the arrows that run down the page to the step each takes.
+*/
+const DOWN_THE_PAGE = {
+	ArrowDown: 1,
+	ArrowUp: -1
+};
+/**
+* Maps the arrows that run along a line to the step each takes.
+*/
+const ALONG_THE_LINE = {
+	ArrowLeft: -1,
+	ArrowRight: 1
+};
+/**
+* Carries the group down to its items.
+*/
+const RovingFocusContext = createContext(void 0);
+/**
+* Orders two items by where they sit in the document.
+*/
+function byDocumentPosition(first, second) {
+	return (first.element.compareDocumentPosition(second.element) & Node.DOCUMENT_POSITION_FOLLOWING) === 0 ? 1 : -1;
+}
+/**
+* Reads what a key asks for, given the arrows the group binds and which way the line runs.
+*
+* @param key - The key pressed.
+* @param orientation - Which arrows the group moves on.
+* @param forward - One where the line runs left to right, minus one where it runs the other way.
+* @returns The step or the edge to move to, or nothing where the group does not claim the key.
+*/
+function intentOf(key, orientation, forward) {
+	if (key === "Home") return "start";
+	if (key === "End") return "end";
+	const block = DOWN_THE_PAGE[key];
+	if (block !== void 0) return orientation === "horizontal" ? void 0 : block;
+	const inline = ALONG_THE_LINE[key];
+	if (inline !== void 0) return orientation === "vertical" ? void 0 : inline * forward;
+}
+/**
+* Marks out the one item the group moves to, as a slice of the list it is in.
+*
+* @remarks
+*   A slice rather than an index, because the list is read at an index that is always inside it
+*   and a lookup would still be typed as possibly absent. A slice of one is the item, and a slice
+*   of an empty list is empty, so the caller writes no test for a case that cannot arise.
+* @param list - The items, in the order the reader sees them.
+* @param intent - The edge or the step the key asked for.
+* @param from - The item that holds the tab stop.
+* @param wrap - Whether the ends join up.
+* @returns The first and last index of the slice holding the item to move to.
+*/
+function spanOf(list, intent, from, wrap) {
+	const last = list.length - 1;
+	const at = list.findIndex((item) => item.id === from);
+	const here = at === -1 ? 0 : at;
+	const to = intent === "start" ? 0 : intent === "end" ? last : wrap ? (here + intent + list.length) % list.length : Math.min(last, Math.max(0, here + intent));
+	return [to, to + 1];
+}
+/**
+* Keeps the items in a ref rather than in state.
+*
+* @remarks
+*   Nothing drawn depends on the list, only on which item holds the stop, so putting it in state
+*   would draw the whole group again every time one item mounted, for a change nobody could see.
+*/
+function useRegistry() {
+	const $ = c(6);
+	if ($[0] !== "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d") {
+		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d";
+	}
+	let t0;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[1] = t0;
+	} else t0 = $[1];
+	const items = useRef(t0);
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (registration) => {
+			items.current = [...items.current, registration];
+		};
+		$[2] = t1;
+	} else t1 = $[2];
+	const add = t1;
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (node) => items.current.some((item) => item.element.contains(node));
+		$[3] = t2;
+	} else t2 = $[3];
+	const holds = t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => items.current.toSorted(byDocumentPosition);
+		$[4] = t3;
+	} else t3 = $[4];
+	const ordered = t3;
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		const remove = (id) => {
+			items.current = items.current.filter((item_0) => item_0.id !== id);
+		};
+		t4 = {
+			add,
+			holds,
+			ordered,
+			remove
+		};
+		$[5] = t4;
+	} else t4 = $[5];
+	return t4;
+}
+/**
+* Keeps which item holds the tab stop, driven from above where a caller drives it.
+*/
+function useTabStop(props) {
+	const $ = c(13);
+	if ($[0] !== "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d") {
+		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d";
+	}
+	const { activeId: driven, defaultActiveId, onActiveIdChange } = props;
+	let t0;
+	if ($[1] !== defaultActiveId || $[2] !== driven || $[3] !== onActiveIdChange) {
+		t0 = {
+			defaultValue: defaultActiveId,
+			onChange: onActiveIdChange,
+			value: driven
+		};
+		$[1] = defaultActiveId;
+		$[2] = driven;
+		$[3] = onActiveIdChange;
+		$[4] = t0;
+	} else t0 = $[4];
+	const [activeId, setActiveId] = useControllableState(t0);
+	const stop = useRef(activeId);
+	let t1;
+	let t2;
+	if ($[5] !== activeId) {
+		t1 = () => {
+			stop.current = activeId;
+		};
+		t2 = [activeId];
+		$[5] = activeId;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t1 = $[6];
+		t2 = $[7];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[8] !== setActiveId) {
+		t3 = (next) => {
+			stop.current = next;
+			setActiveId(next);
+		};
+		$[8] = setActiveId;
+		$[9] = t3;
+	} else t3 = $[9];
+	const claim = useCallbackRef(t3);
+	let t4;
+	if ($[10] !== activeId || $[11] !== claim) {
+		t4 = {
+			activeId,
+			claim,
+			stop
+		};
+		$[10] = activeId;
+		$[11] = claim;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+}
+/**
+* Moves one tab stop through the items that register with it.
+*
+* @remarks
+*   The first item to register takes the stop, so a group is reachable by Tab from its first
+*   render. An item that leaves while it holds the stop hands it to whatever is first, so the
+*   group never drops out of the tab order.
+* @returns The group the items read, and the handler the root binds.
+*/
+function useRovingFocus(props) {
+	const $ = c(23);
+	if ($[0] !== "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d") {
+		for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d";
+	}
+	const { orientation, wrap } = props;
+	const { add, holds, ordered, remove } = useRegistry();
+	const { activeId, claim, stop } = useTabStop(props);
+	let t0;
+	if ($[1] !== add || $[2] !== claim || $[3] !== ordered || $[4] !== remove || $[5] !== stop.current) {
+		t0 = (registration) => {
+			add(registration);
+			if (stop.current === void 0) claim(registration.id);
+			return () => {
+				remove(registration.id);
+				if (stop.current === registration.id) claim(ordered()[0]?.id);
+			};
+		};
+		$[1] = add;
+		$[2] = claim;
+		$[3] = ordered;
+		$[4] = remove;
+		$[5] = stop.current;
+		$[6] = t0;
+	} else t0 = $[6];
+	const register = useCallbackRef(t0);
+	let t1;
+	if ($[7] !== claim || $[8] !== holds || $[9] !== ordered || $[10] !== orientation || $[11] !== stop.current || $[12] !== wrap) {
+		t1 = (event) => {
+			if (event.ctrlKey || event.metaKey || event.altKey) return;
+			const { target } = event;
+			if (!(target instanceof Node) || !holds(target)) return;
+			const rightToLeft = globalThis.getComputedStyle(event.currentTarget).direction === "rtl";
+			const intent = intentOf(event.key, orientation, rightToLeft ? -1 : 1);
+			if (intent === void 0) return;
+			for (const moving of ordered().slice(...spanOf(ordered(), intent, stop.current, wrap))) {
+				claim(moving.id);
+				moving.element.focus();
+			}
+			event.preventDefault();
+		};
+		$[7] = claim;
+		$[8] = holds;
+		$[9] = ordered;
+		$[10] = orientation;
+		$[11] = stop.current;
+		$[12] = wrap;
+		$[13] = t1;
+	} else t1 = $[13];
+	const onKeyDown = useCallbackRef(t1);
+	let t2;
+	if ($[14] !== claim) {
+		t2 = (id) => {
+			claim(id);
+		};
+		$[14] = claim;
+		$[15] = t2;
+	} else t2 = $[15];
+	const onFocus = useCallbackRef(t2);
+	let t3;
+	if ($[16] !== activeId || $[17] !== onFocus || $[18] !== register) {
+		t3 = {
+			activeId,
+			onFocus,
+			register
+		};
+		$[16] = activeId;
+		$[17] = onFocus;
+		$[18] = register;
+		$[19] = t3;
+	} else t3 = $[19];
+	const t4 = t3;
+	let t5;
+	if ($[20] !== onKeyDown || $[21] !== t4) {
+		t5 = {
+			group: t4,
+			onKeyDown
+		};
+		$[20] = onKeyDown;
+		$[21] = t4;
+		$[22] = t5;
+	} else t5 = $[22];
+	return t5;
+}
+//#endregion
+//#region src/roving-focus/item.tsx
+/**
+* Draws one item of the group, which holds the tab stop when the arrows reach it.
+*
+* @remarks
+*   Exactly one item is reachable by Tab and every other is at minus one, which is what makes the
+*   whole group one stop in the tab order. A disabled item registers with nothing, so the arrows
+*   pass over it, and it does not claim the stop when a pointer focuses it: an item that claimed
+*   the stop without registering would leave the stop pointing at nothing and take the group out
+*   of the tab order. The element is kept in state rather than in a ref, because the effect that
+*   registers it has to run again once the element is there, and a ref changing starts no effect.
+*/
+/**
+* Draws the element an item is laid out on.
+*/
+const Shell$1 = withContext$1("div", "item");
+/**
+* Takes the tab stop when the arrows reach it, and leaves the tab order otherwise.
+*
+* @throws {@link Error} When it is drawn outside a group.
+*/
+function Item(props) {
+	const $ = c(27);
+	if ($[0] !== "906ba9f383c3499089f80a6d094880677f9a2e49a204ba65b1f93dfa19d6065b") {
+		for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "906ba9f383c3499089f80a6d094880677f9a2e49a204ba65b1f93dfa19d6065b";
+	}
+	let handed;
+	let named;
+	let rest;
+	let t0;
+	if ($[1] !== props) {
+		({disabled: t0, id: named, ref: handed, ...rest} = props);
+		$[1] = props;
+		$[2] = handed;
+		$[3] = named;
+		$[4] = rest;
+		$[5] = t0;
+	} else {
+		handed = $[2];
+		named = $[3];
+		rest = $[4];
+		t0 = $[5];
+	}
+	const disabled = t0 === void 0 ? false : t0;
+	const group = use(RovingFocusContext);
+	if (group === void 0) throw new Error("RovingFocus.Item is drawn inside RovingFocus.Root and nowhere else.");
+	const generated = useId();
+	const id = named ?? generated;
+	const { activeId, onFocus, register } = group;
+	const [element, setElement] = useState(null);
+	let t1;
+	if ($[6] !== handed) {
+		t1 = (node) => {
+			setElement(node);
+			if (typeof handed === "function") handed(node);
+			else if (handed !== null && handed !== void 0) handed.current = node;
+		};
+		$[6] = handed;
+		$[7] = t1;
+	} else t1 = $[7];
+	const attach = useCallbackRef(t1);
+	let t2;
+	if ($[8] !== disabled || $[9] !== id || $[10] !== onFocus) {
+		t2 = () => {
+			if (!disabled) onFocus(id);
+		};
+		$[8] = disabled;
+		$[9] = id;
+		$[10] = onFocus;
+		$[11] = t2;
+	} else t2 = $[11];
+	const claim = useCallbackRef(t2);
+	let t3;
+	let t4;
+	if ($[12] !== disabled || $[13] !== element || $[14] !== id || $[15] !== register) {
+		t3 = () => {
+			if (element === null || disabled) return;
+			return register({
+				element,
+				id
+			});
+		};
+		t4 = [
+			disabled,
+			element,
+			id,
+			register
+		];
+		$[12] = disabled;
+		$[13] = element;
+		$[14] = id;
+		$[15] = register;
+		$[16] = t3;
+		$[17] = t4;
+	} else {
+		t3 = $[16];
+		t4 = $[17];
+	}
+	useEffect(t3, t4);
+	const t5 = disabled || void 0;
+	const t6 = activeId === id ? "" : void 0;
+	const t7 = disabled ? "" : void 0;
+	const t8 = !disabled && activeId === id ? 0 : -1;
+	let t9;
+	if ($[18] !== attach || $[19] !== claim || $[20] !== id || $[21] !== rest || $[22] !== t5 || $[23] !== t6 || $[24] !== t7 || $[25] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Shell$1, {
+			"aria-disabled": t5,
+			"data-active": t6,
+			"data-disabled": t7,
+			id,
+			onFocus: claim,
+			ref: attach,
+			tabIndex: t8,
+			...rest
+		});
+		$[18] = attach;
+		$[19] = claim;
+		$[20] = id;
+		$[21] = rest;
+		$[22] = t5;
+		$[23] = t6;
+		$[24] = t7;
+		$[25] = t8;
+		$[26] = t9;
+	} else t9 = $[26];
+	return t9;
+}
+//#endregion
+//#region src/roving-focus/root.tsx
+/**
+* Draws the element the group is laid out on.
+*/
+const Shell = withProvider$1("div", "root");
+/**
+* Keeps one tab stop for the items inside it, and moves it under the arrow keys.
+*/
+function Root(props) {
+	const $ = c(27);
+	if ($[0] !== "16a674b835753bf9fd806b5c17b8426cf42995a3c3e2732778987a1e4a0700e7") {
+		for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "16a674b835753bf9fd806b5c17b8426cf42995a3c3e2732778987a1e4a0700e7";
+	}
+	let activeId;
+	let children;
+	let defaultActiveId;
+	let onActiveIdChange;
+	let rest;
+	let t0;
+	let t1;
+	if ($[1] !== props) {
+		({activeId, children, defaultActiveId, onActiveIdChange, orientation: t0, wrap: t1, ...rest} = props);
+		$[1] = props;
+		$[2] = activeId;
+		$[3] = children;
+		$[4] = defaultActiveId;
+		$[5] = onActiveIdChange;
+		$[6] = rest;
+		$[7] = t0;
+		$[8] = t1;
+	} else {
+		activeId = $[2];
+		children = $[3];
+		defaultActiveId = $[4];
+		onActiveIdChange = $[5];
+		rest = $[6];
+		t0 = $[7];
+		t1 = $[8];
+	}
+	const orientation = t0 === void 0 ? "horizontal" : t0;
+	const wrap = t1 === void 0 ? false : t1;
+	let t2;
+	if ($[9] !== activeId || $[10] !== defaultActiveId || $[11] !== onActiveIdChange || $[12] !== orientation || $[13] !== wrap) {
+		t2 = {
+			activeId,
+			defaultActiveId,
+			onActiveIdChange,
+			orientation,
+			wrap
+		};
+		$[9] = activeId;
+		$[10] = defaultActiveId;
+		$[11] = onActiveIdChange;
+		$[12] = orientation;
+		$[13] = wrap;
+		$[14] = t2;
+	} else t2 = $[14];
+	const { group, onKeyDown } = useRovingFocus(t2);
+	let t3;
+	if ($[15] !== orientation || $[16] !== rest.role) {
+		t3 = rest.role !== void 0 && orientation !== "both" ? { "aria-orientation": orientation } : void 0;
+		$[15] = orientation;
+		$[16] = rest.role;
+		$[17] = t3;
+	} else t3 = $[17];
+	const told = t3;
+	let t4;
+	if ($[18] !== children || $[19] !== onKeyDown || $[20] !== orientation || $[21] !== rest || $[22] !== told) {
+		t4 = /* @__PURE__ */ jsx(Shell, {
+			onKeyDown,
+			orientation,
+			...told,
+			...rest,
+			children
+		});
+		$[18] = children;
+		$[19] = onKeyDown;
+		$[20] = orientation;
+		$[21] = rest;
+		$[22] = told;
+		$[23] = t4;
+	} else t4 = $[23];
+	let t5;
+	if ($[24] !== group || $[25] !== t4) {
+		t5 = /* @__PURE__ */ jsx(RovingFocusContext, {
+			value: group,
+			children: t4
+		});
+		$[24] = group;
+		$[25] = t4;
+		$[26] = t5;
+	} else t5 = $[26];
+	return t5;
+}
+//#endregion
+//#region src/roving-focus/index.ts
+var roving_focus_exports = /* @__PURE__ */ __exportAll({
+	Item: () => Item,
+	Root: () => Root
+});
+//#endregion
+//#region src/skip-nav/context.ts
+/**
+* Binds the skip link's recipe to the parts that draw it.
+*
+* @remarks
+*   Apart from the recipe, because an application's compiler reads the recipe at build time and
+*   the binding needs the runtime. Neither part takes a variant, so each is bound on its own
+*   rather than one providing for the other: a page puts the link at the top and the target
+*   further down, and the two are never nested.
+*/
+/**
+* Binds the recipe once, for the link and for the target it jumps to.
+*/
+const { withProvider } = createSlotRecipeContext(recipe$1);
+//#endregion
+//#region src/skip-nav/link.ts
+/**
+* The fragment the link points at and the target answers to, where neither states one.
+*/
+const SKIP_NAV_TARGET = "content";
+/**
+* Jumps a keyboard past the navigation to the page's content.
+*/
+const Link = withProvider("a", "link", { defaultProps: { href: `#${SKIP_NAV_TARGET}` } });
+//#endregion
+//#region src/skip-nav/target.ts
+/**
+* Takes the focus the skip link sends, and draws nothing.
+*/
+const Target = withProvider("div", "target", { defaultProps: {
+	id: SKIP_NAV_TARGET,
+	tabIndex: -1
+} });
+//#endregion
+//#region src/skip-nav/index.ts
+var skip_nav_exports = /* @__PURE__ */ __exportAll({
+	Link: () => Link,
+	SKIP_NAV_TARGET: () => SKIP_NAV_TARGET,
+	Target: () => Target
+});
+//#endregion
+//#region src/visually-hidden/context.ts
+/**
+* Binds the hidden text's recipe to the element that draws it.
+*
+* @remarks
+*   Apart from the recipe, because an application's compiler reads the recipe at build time and
+*   the binding needs the runtime. A recipe file that also bound one would put the runtime behind
+*   every compiler configuration that reads it.
+*/
+/**
+* Binds the recipe once, for the hidden text and for whatever sets its variants from above.
+*/
+const { PropsProvider, withContext } = createRecipeContext(recipe$2);
+//#endregion
+//#region src/visually-hidden/visually-hidden.ts
+/**
+* Reads its words to a screen reader and draws them nowhere.
+*/
+const VisuallyHidden = withContext("span");
+//#endregion
+export { roving_focus_exports as RovingFocus, skip_nav_exports as SkipNav, VisuallyHidden, PropsProvider as VisuallyHiddenPropsProvider };

package/dist/recipe-BKojQp6r.js

@@ -0,0 +1,106 @@
+import { defineRecipe, defineSlotRecipe } from "@stealthscale/theme/authoring";
+//#region src/roving-focus/recipe.ts
+/**
+* States what a set of controls under one tab stop is: a row or a column of items, laid out the
+* way the arrows move through them.
+*
+* @remarks
+*   The orientation is one axis because it decides two things that have to agree: which arrows
+*   move focus, which the root reads, and which way the items run, which the recipe draws. A group
+*   the arrows move through in both directions wraps, because a set a reader moves through on two
+*   axes is a set that runs onto a second line.
+*/
+/**
+* Lays the items out in a row the arrows run along until a caller says otherwise.
+*/
+const recipe$2 = defineSlotRecipe({
+	base: {
+		item: { minInlineSize: "0" },
+		root: { display: "flex" }
+	},
+	className: "roving-focus",
+	defaultVariants: { orientation: "horizontal" },
+	jsx: [/^RovingFocus(\.\w+)?$/u],
+	slots: ["root", "item"],
+	variants: { orientation: {
+		both: { root: {
+			flexDirection: "row",
+			flexWrap: "wrap"
+		} },
+		horizontal: { root: { flexDirection: "row" } },
+		vertical: { root: { flexDirection: "column" } }
+	} }
+});
+//#endregion
+//#region src/skip-nav/recipe.ts
+/**
+* States what a way past the navigation is: a link a keyboard reaches first and an eye sees only
+* while focus is on it, and the place on the page it jumps to.
+*
+* @remarks
+*   The link is hidden the way the hidden text is hidden, and comes into view under focus, so a
+*   reader tabbing into the page meets it and a reader who never tabs never sees it. The target
+*   states nothing but its own class, because a page decides what it looks like and the target's
+*   whole job is to be somewhere focus can land.
+*/
+/**
+* Draws the link over the top of the page while focus is on it, and leaves the target alone.
+*/
+const recipe$1 = defineSlotRecipe({
+	base: {
+		link: {
+			_focusVisible: {
+				borderRadius: "l2",
+				insetBlockStart: "inset.md",
+				insetInlineStart: "inset.md",
+				layerStyle: "fill.surface",
+				paddingBlock: "inset.sm",
+				paddingInline: "inset.md",
+				position: "fixed",
+				srOnly: false,
+				textStyle: "label.md",
+				zIndex: "skipNav"
+			},
+			srOnly: true
+		},
+		target: { scrollMarginBlockStart: "inset.lg" }
+	},
+	className: "skip-nav",
+	jsx: [/^SkipNav(\.\w+)?$/u],
+	slots: ["link", "target"]
+});
+//#endregion
+//#region src/visually-hidden/recipe.ts
+/**
+* States what visually hidden text is: words a screen reader reads and an eye never sees, and
+* which come into view where a keyboard reaches them.
+*
+* @remarks
+*   The compiler's `srOnly` utility writes the hiding, which takes the words out of sight without
+*   taking them out of the accessibility tree the way `display: none` and `visibility: hidden`
+*   both do. A control a reader can reach by keyboard has to be visible once focus is on it, or a
+*   sighted reader tabbing through the page loses their place, so the focusable value undoes the
+*   hiding for as long as focus is there.
+*/
+/**
+* Hides what it holds from sight and leaves it to a screen reader.
+*/
+const recipe = defineRecipe({
+	base: { srOnly: true },
+	className: "visually-hidden",
+	jsx: [/^VisuallyHidden$/u],
+	variants: { focusable: { true: { _focusVisible: {
+		borderRadius: "l1",
+		insetBlockStart: "inset.md",
+		insetInlineStart: "inset.md",
+		layerStyle: "fill.surface",
+		paddingBlock: "inset.sm",
+		paddingInline: "inset.md",
+		position: "fixed",
+		srOnly: false,
+		textStyle: "label.md",
+		zIndex: "skipNav"
+	} } } }
+});
+//#endregion
+export { recipe$1 as n, recipe$2 as r, recipe as t };

package/dist/rolldown-runtime-D7D4PA-g.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };

package/dist/theme.d.ts

@@ -0,0 +1,12 @@
+//#region src/theme.d.ts
+/**
+ * Publishes the preset that registers every recipe in this package, for an application's compiler
+ * to install.
+ *
+ * @remarks
+ *   The list is written by hand. The package's own specification reports a recipe file the list
+ *   leaves out, so no generator runs here.
+ */
+declare const _default: import("@stealthscale/theme/authoring").Preset;
+//#endregion
+export { _default as default };

package/dist/theme.js

@@ -0,0 +1,23 @@
+import { n as recipe$2, r as recipe$1, t as recipe } from "./recipe-BKojQp6r.js";
+import { definePreset } from "@stealthscale/theme/authoring";
+//#region src/theme.ts
+/**
+* Publishes the preset that registers every recipe in this package, for an application's compiler
+* to install.
+*
+* @remarks
+*   The list is written by hand. The package's own specification reports a recipe file the list
+*   leaves out, so no generator runs here.
+*/
+var theme_default = definePreset({
+	name: "@stealthscale/component-a11y",
+	theme: { extend: {
+		recipes: { visuallyHidden: recipe },
+		slotRecipes: {
+			rovingFocus: recipe$1,
+			skipNav: recipe$2
+		}
+	} }
+});
+//#endregion
+export { theme_default as default };

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@stealthscale/component-a11y",
+  "version": "0.1.0",
+  "description": "Draws what a keyboard and a screen reader need, and an eye does not.",
+  "keywords": [
+    "a11y",
+    "accessibility",
+    "components",
+    "react"
+  ],
+  "homepage": "https://github.com/stealth-scale/config/tree/main/components/a11y#readme",
+  "bugs": "https://github.com/stealth-scale/config/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stealth-scale/config.git",
+    "directory": "components/a11y"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "imports": {
+    "#*": "./src/*"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./theme": "./dist/theme.js",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/core": "^0.18.5",
+    "@rolldown/plugin-babel": "^0.2.4",
+    "@stealthscale/hooks": "^0.1.0",
+    "@stealthscale/theme": "^0.3.0",
+    "@stealthscale/vite-config": "^0.6.0",
+    "@stealthscale/vite-config-react": "^0.8.0",
+    "@stealthscale/vite-config-theme": "^0.1.0",
+    "@stealthscale/vite-config-typescript": "^0.3.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "happy-dom": "^20.14.3",
+    "oxc-transform-react": "^0.149.0",
+    "publint": "^0.3.24",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "typescript": "^7.0.2",
+    "vitest": "4.1.11"
+  },
+  "peerDependencies": {
+    "@stealthscale/hooks": "^0.1.0",
+    "@stealthscale/theme": "^0.3.0",
+    "react": "^19.3.0"
+  },
+  "engines": {
+    "node": ">=26.0.0"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "check": "vp check",
+    "test": "vp test"
+  }
+}