@stealthscale/component-navigation 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,108 @@
+# @stealthscale/component-navigation
+
+Draws the ways a person moves between places: the link, and the trail of crumbs from the front of a
+site. 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.
+
+Every value a theme can change on a component is an axis of its recipe, so a caller sets it as a
+prop and writes no style. A caller changes the element a component draws with `as`.
+
+## Install
+
+```bash
+pnpm add @stealthscale/component-navigation
+```
+
+The package peers on `react` and `@stealthscale/theme`. An application lists the preset under
+`./theme` among the presets its compiler installs.
+
+## Link
+
+Draws words a person follows to somewhere else. The ink, the visited ink, the cursor and the focus
+ring come from the theme, so a theme decides what a link looks like once for every link.
+
+```tsx
+import { Link } from "@stealthscale/component-navigation";
+
+<Link href="/invoices">Invoices</Link>;
+<Link href="/terms" variant="underline">
+  Terms
+</Link>;
+<Link as={RouterLink} to="/invoices">
+  Invoices
+</Link>;
+```
+
+| Axis      | Values               | Default |
+| --------- | -------------------- | ------- |
+| `variant` | `plain`, `underline` | `plain` |
+
+Both looks underline under a pointer. The axis decides whether the underline is there at rest as
+well. A link inside a paragraph is found by its underline as much as by its colour, so a reader who
+cannot tell the two inks apart has nothing else to go on.
+
+The element is `a` and takes an `href`. A link with no address is not a link to anything, and a
+browser gives it no focus, no Enter and no offer to open elsewhere, so a control that acts rather
+than navigates is a button. A router's own link goes in through `as`, which keeps the routing and
+leaves the drawing here.
+
+## Breadcrumb
+
+Draws the path from the front of a site to the page a person is on, composed as `Breadcrumb.Root`
+holding a list of crumbs.
+
+```tsx
+import { Breadcrumb } from "@stealthscale/component-navigation";
+
+<Breadcrumb.Root>
+  <Breadcrumb.List>
+    <Breadcrumb.Item>
+      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+    </Breadcrumb.Item>
+    <Breadcrumb.Separator>/</Breadcrumb.Separator>
+    <Breadcrumb.Item>
+      <Breadcrumb.Link href="/invoices">Invoices</Breadcrumb.Link>
+    </Breadcrumb.Item>
+    <Breadcrumb.Separator>/</Breadcrumb.Separator>
+    <Breadcrumb.Item>
+      <Breadcrumb.CurrentLink>April</Breadcrumb.CurrentLink>
+    </Breadcrumb.Item>
+  </Breadcrumb.List>
+</Breadcrumb.Root>;
+```
+
+| Axis      | Values                       | Default |
+| --------- | ---------------------------- | ------- |
+| `size`    | `xs`, `sm`, `md`, `lg`, `xl` | `md`    |
+| `variant` | `plain`, `underline`         | `plain` |
+
+The size sets the text on the root and the gap on the list, so every part reads at one size by
+inheriting it. It stops at `xl` because it reads the body role, a trail being read at the size of
+the page around it rather than as a heading.
+
+The last crumb is `Breadcrumb.CurrentLink` and not a link. It draws a `span` carrying
+`aria-current="page"`, which is what tells a screen reader which crumb is where the reader is, and a
+link to the page already open would be a control that does nothing. It is the one crumb at full
+strength and the crumbs above it are muted, because the crumb naming where you are is the one worth
+reading first.
+
+The trail does four more things for accessibility:
+
+- **The landmark is named.** The root is a `nav` carrying `aria-label="Breadcrumb"` by default,
+  because a page usually holds more than one navigation landmark and an unnamed one is announced
+  with nothing to tell it from the others. State your own to override it.
+- **The list keeps its role.** The list is an `ol` stating `role="list"`, because a list drawn with
+  no marker loses its role in Safari and a reader is then told neither how many crumbs there are nor
+  which one they are on.
+- **The separator is a row, not a crumb.** It sits between two items as a row of the list rather
+  than inside one, so a screen reader counting the list counts the crumbs.
+- **The separator is silent.** It carries `aria-hidden` and a presentation role, because the list
+  already carries the order and a mark read out between every pair adds nothing.
+
+The separator turns around where the line runs right to left, so a chevron pointing forwards keeps
+pointing forwards.
+
+## 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":"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-navigation","group":"@stealthscale","version":"0.1.0","bom-ref":"pkg:npm/%40stealthscale/component-navigation@0.1.0","description":"Draws the ways a person moves between places: links, tabs, breadcrumbs and rails.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/component-navigation@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/navigation","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/components/navigation#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-navigation@0.1.0"}]}

package/dist/index.d.ts

@@ -0,0 +1,101 @@
+import { ComponentProps } from "react";
+//#region src/breadcrumb/current-link.d.ts
+/**
+ * Draws the name of the page itself, at full strength against the muted crumbs above it.
+ */
+declare const CurrentLink: import("@stealthscale/theme").StyledComponent<"span", {}>;
+/**
+ * Describes what the current crumb takes.
+ */
+type CurrentLinkProps = ComponentProps<typeof CurrentLink>;
+//#endregion
+//#region src/breadcrumb/item.d.ts
+/**
+ * Draws one row of the trail, carrying either a link to somewhere above or the name of the page
+ * itself.
+ */
+declare const Item: import("@stealthscale/theme").StyledComponent<"li", {}>;
+/**
+ * Describes what a crumb takes.
+ */
+type ItemProps = ComponentProps<typeof Item>;
+//#endregion
+//#region src/breadcrumb/link.d.ts
+/**
+ * Draws a link to somewhere above the page.
+ */
+declare const Link$1: import("@stealthscale/theme").StyledComponent<"a", {}>;
+/**
+ * Describes what a crumb's link takes.
+ */
+type LinkProps$1 = ComponentProps<typeof Link$1>;
+//#endregion
+//#region src/breadcrumb/list.d.ts
+/**
+ * Draws the crumbs in order, at the gap its size states.
+ */
+declare const List: import("@stealthscale/theme").StyledComponent<"ol", {}>;
+/**
+ * Describes what the list takes.
+ */
+type ListProps = ComponentProps<typeof List>;
+//#endregion
+//#region src/breadcrumb/root.d.ts
+/**
+ * Draws the landmark and sets the size and look every part below it reads.
+ */
+declare const Root: import("@stealthscale/theme").StyledComponent<"nav", {
+  readonly size?: "lg" | "md" | "sm" | "xl" | "xs";
+  readonly variant?: "plain" | "underline";
+}>;
+/**
+ * Describes what the landmark takes.
+ */
+type RootProps = ComponentProps<typeof Root>;
+//#endregion
+//#region src/breadcrumb/separator.d.ts
+/**
+ * Draws the mark between two crumbs, saying nothing to a screen reader.
+ */
+declare const Separator: import("@stealthscale/theme").StyledComponent<"li", {}>;
+/**
+ * Describes what a separator takes.
+ */
+type SeparatorProps = ComponentProps<typeof Separator>;
+declare namespace index_d_exports {
+  export { CurrentLink, CurrentLinkProps, Item, ItemProps, Link$1 as Link, LinkProps$1 as LinkProps, List, ListProps, Root, RootProps, Separator, SeparatorProps };
+}
+//#endregion
+//#region src/link/context.d.ts
+/**
+ * Binds the link'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.
+ */
+/**
+ * Binds the recipe once, for the link and for whatever sets its variants from above.
+ */
+declare const PropsProvider: import("react").Provider<import("@stealthscale/theme").DataAttrs & Partial<{
+  readonly variant?: "plain" | "underline";
+}>>, withContext: <Tag extends import("react").ElementType>(Component: Tag, options?: import("@stealthscale/theme").JsxFactoryOptions<import("@stealthscale/theme").ComponentProps<Tag> & Partial<{
+  readonly variant?: "plain" | "underline";
+}>> | undefined) => import("@stealthscale/theme").StyledComponent<Tag, {
+  readonly variant?: "plain" | "underline";
+}>;
+//#endregion
+//#region src/link/link.d.ts
+/**
+ * Draws words a person follows to somewhere else.
+ */
+export declare const Link: import("@stealthscale/theme").StyledComponent<"a", {
+  readonly variant?: "plain" | "underline";
+}>;
+/**
+ * Describes what a link takes: the variants its recipe offers, and everything a styled anchor
+ * takes.
+ */
+type LinkProps = ComponentProps<typeof Link>;
+//#endregion
+export { index_d_exports as Breadcrumb, type LinkProps, PropsProvider as LinkPropsProvider };

package/dist/index.js

@@ -0,0 +1,87 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { n as recipe, t as recipe$1 } from "./recipe-TfPpeGkM.js";
+import "react";
+import { createRecipeContext, createSlotRecipeContext } from "@stealthscale/theme";
+//#region src/breadcrumb/context.ts
+/**
+* Binds the breadcrumb's recipe to the elements that draw its parts.
+*
+* @remarks
+*   Apart from the recipe, because an application's compiler reads the recipe at build time and
+*   the binding needs the runtime.
+*/
+/**
+* Binds the recipe once. The root provides the variants and every other part reads them.
+*/
+const { withContext: withContext$1, withProvider } = createSlotRecipeContext(recipe);
+//#endregion
+//#region src/breadcrumb/current-link.ts
+/**
+* Draws the name of the page itself, at full strength against the muted crumbs above it.
+*/
+const CurrentLink = withContext$1("span", "currentLink", { defaultProps: { "aria-current": "page" } });
+//#endregion
+//#region src/breadcrumb/item.ts
+/**
+* Draws one row of the trail, carrying either a link to somewhere above or the name of the page
+* itself.
+*/
+const Item = withContext$1("li", "item");
+//#endregion
+//#region src/breadcrumb/link.ts
+/**
+* Draws a link to somewhere above the page.
+*/
+const Link$1 = withContext$1("a", "link");
+//#endregion
+//#region src/breadcrumb/list.ts
+/**
+* Draws the crumbs in order, at the gap its size states.
+*/
+const List = withContext$1("ol", "list", { defaultProps: { role: "list" } });
+//#endregion
+//#region src/breadcrumb/root.ts
+/**
+* Draws the landmark and sets the size and look every part below it reads.
+*/
+const Root = withProvider("nav", "root", { defaultProps: { "aria-label": "Breadcrumb" } });
+//#endregion
+//#region src/breadcrumb/separator.ts
+/**
+* Draws the mark between two crumbs, saying nothing to a screen reader.
+*/
+const Separator = withContext$1("li", "separator", { defaultProps: {
+	"aria-hidden": true,
+	role: "presentation"
+} });
+//#endregion
+//#region src/breadcrumb/index.ts
+var breadcrumb_exports = /* @__PURE__ */ __exportAll({
+	CurrentLink: () => CurrentLink,
+	Item: () => Item,
+	Link: () => Link$1,
+	List: () => List,
+	Root: () => Root,
+	Separator: () => Separator
+});
+//#endregion
+//#region src/link/context.ts
+/**
+* Binds the link'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.
+*/
+/**
+* Binds the recipe once, for the link and for whatever sets its variants from above.
+*/
+const { PropsProvider, withContext } = createRecipeContext(recipe$1);
+//#endregion
+//#region src/link/link.ts
+/**
+* Draws words a person follows to somewhere else.
+*/
+const Link = withContext("a");
+//#endregion
+export { breadcrumb_exports as Breadcrumb, Link, PropsProvider as LinkPropsProvider };

package/dist/recipe-TfPpeGkM.js

@@ -0,0 +1,150 @@
+import { defineRecipe, defineSlotRecipe, gapSizes, link, onSlots, textSizes } from "@stealthscale/theme/authoring";
+//#region src/breadcrumb/recipe.ts
+/**
+* States what a breadcrumb trail is: the path from the front of a site to the page a person is on,
+* drawn as a list of links with a mark between each pair.
+*
+* @remarks
+*   Six parts. The root is the landmark, the list holds the trail, and each crumb is an item
+*   holding either a link to somewhere above or the name of the page itself. A separator sits
+*   between two crumbs as a row of the list rather than inside one, which is how a screen reader
+*   counts the crumbs rather than counting them twice.
+*   The size axis sets the text on the root and the gap on the list, so every part reads at one
+*   size by inheriting it and only the spacing is stated twice. It stops at `xl` because it reads
+*   the body role, and a trail is read at the size the page around it is read at rather than as a
+*   heading.
+*   The trail is quieter than the page it sits above: the links are muted and darken under a
+*   pointer, and the crumb for the page itself is the one at full strength. That is the way round
+*   a reader needs, because the one crumb that is not a link is the one naming where they are.
+*/
+/**
+* Draws a muted trail at the middle size until a caller says otherwise.
+*/
+const recipe$1 = defineSlotRecipe({
+	base: {
+		currentLink: {
+			alignItems: "center",
+			display: "inline-flex",
+			gap: "gap.xs"
+		},
+		item: {
+			alignItems: "center",
+			display: "inline-flex"
+		},
+		link: {
+			alignItems: "center",
+			borderRadius: "l1",
+			cursor: "button",
+			display: "inline-flex",
+			focusRingColor: "colorPalette.focusRing",
+			focusVisibleRing: "outside",
+			gap: "gap.xs",
+			textDecoration: "none"
+		},
+		list: {
+			alignItems: "center",
+			display: "flex",
+			flexWrap: "wrap",
+			listStyle: "none",
+			margin: "0",
+			padding: "0",
+			wordBreak: "break-word"
+		},
+		separator: {
+			_rtl: { rotate: "180deg" },
+			color: "fg.muted"
+		}
+	},
+	className: "breadcrumb",
+	defaultVariants: {
+		size: "md",
+		variant: "plain"
+	},
+	jsx: [/^Breadcrumb(\.\w+)?$/u],
+	slots: [
+		"root",
+		"list",
+		"item",
+		"link",
+		"currentLink",
+		"separator"
+	],
+	variants: {
+		/**
+		* How big the trail is read at, which every part inherits from the root.
+		*/
+		size: onSlots({
+			list: gapSizes([
+				"xs",
+				"sm",
+				"md",
+				"lg",
+				"xl"
+			]),
+			root: textSizes("body")
+		}),
+		/**
+		* Whether a crumb above the page is underlined at rest or only under a pointer.
+		*/
+		variant: {
+			plain: {
+				currentLink: { color: "fg" },
+				link: {
+					_hover: {
+						color: "fg",
+						textDecoration: "underline"
+					},
+					color: "fg.muted"
+				}
+			},
+			underline: {
+				currentLink: { color: "fg" },
+				link: {
+					_hover: { color: "fg" },
+					color: "fg.muted",
+					textDecoration: "underline"
+				}
+			}
+		}
+	}
+});
+//#endregion
+//#region src/link/recipe.ts
+/**
+* States what a link is: words a person follows to somewhere else, drawn in the theme's link ink
+* and underlined either always or under a pointer.
+*
+* @remarks
+*   The ink, the visited ink, the cursor and the focus ring all come from the theme's own link
+*   fragment, so a theme that decides what a link looks like decides it once for every link. The
+*   box is inline so a link sits in a line of words, and it lays its content out in a row so a
+*   mark beside the words is centred on them rather than sitting on the baseline.
+*   The underline is the one thing this recipe adds. A link inside a paragraph is found by its
+*   underline as much as by its colour, and a reader who cannot tell the two inks apart has
+*   nothing else to go on, which is why colour alone is not enough to mark a link.
+*/
+/**
+* Draws a link underlined under a pointer until a caller asks for one that always is.
+*/
+const recipe = defineRecipe({
+	base: {
+		...link(),
+		alignItems: "center",
+		borderRadius: "l1",
+		display: "inline-flex",
+		gap: "gap.xs"
+	},
+	className: "link",
+	defaultVariants: { variant: "plain" },
+	jsx: [/^Link$/u],
+	variants: { 
+	/**
+	* Whether the underline is drawn at rest or only under a pointer.
+	*/
+variant: {
+		plain: { textDecoration: "none" },
+		underline: { textDecoration: "underline" }
+	} }
+});
+//#endregion
+export { recipe$1 as n, 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,20 @@
+import { n as recipe$1, t as recipe } from "./recipe-TfPpeGkM.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-navigation",
+	theme: { extend: {
+		recipes: { link: recipe },
+		slotRecipes: { breadcrumb: recipe$1 }
+	} }
+});
+//#endregion
+export { theme_default as default };

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@stealthscale/component-navigation",
+  "version": "0.1.0",
+  "description": "Draws the ways a person moves between places: links, tabs, breadcrumbs and rails.",
+  "keywords": [
+    "components",
+    "navigation",
+    "react",
+    "tabs"
+  ],
+  "homepage": "https://github.com/stealth-scale/config/tree/main/components/navigation#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/navigation"
+  },
+  "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/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/theme": "^0.3.0",
+    "react": "^19.3.0"
+  },
+  "engines": {
+    "node": ">=26.0.0"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "check": "vp check",
+    "test": "vp test"
+  }
+}