unfold-nav 0.1.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 1.0.0
+
+The existing navigation, public options, events and styling API become the stable 1.x API.
+
+- Reuse graph geometry and SVG paths during hover and keyboard focus changes; coalesce resize work and read animation timing once per batch.
+- Refresh current-page markers immediately, honor document base URLs, and remeasure labels after resizing, font loading and reopening.
+- Cancel interrupted animation timers and label animations; keep collapsing children out of keyboard and screen-reader navigation.
+- Handle rapid clicks, repeated typeahead letters, held activation keys, input composition and event listeners that close or remove the menu while it opens.
+- Keep user page IDs separate from internal hub and label bookkeeping, including IDs with separator characters.
+- Fall back safely from failing icon callbacks, refresh visible icons when the resolver changes, and copy validated offset objects.
+- Keep inline menus aligned when an ancestor scrolls and let page controls receive pointer input during the closing animation.
+- Add regression coverage for these behaviors while retaining the exhaustive showcase and Circuit layout checks.
+
+## 0.1.1
+
+- Link the npm homepage and README to the [live showcase](https://unfold-nav.romagnolo.eu).
+- Document container deployment and check the static showcase container in CI.
+- Allow the exhaustive Circuit regression sweep to finish on slower CI runners.
+
 ## 0.1.0
 
 Initial release of the dependency-free `<unfold-nav>` Web Component.

package/README.md

@@ -1,5 +1,7 @@
 # unfold-nav
 
+**[Live demo](https://unfold-nav.romagnolo.eu)**
+
 One button for your whole site map. Press and hold it, and your pages unfold around it as a small graph.
 Drag along the graph and release on a page to go there. Or tap the button and tap your way through. The
 same component works with a mouse, a finger or a keyboard, on desktop and on phones.
@@ -11,7 +13,8 @@ same component works with a mouse, a finger or a keyboard, on desktop and on pho
 - **Customisable:** options, `--unfold-*` CSS variables, `::part()` selectors, a slot for the button icon, per-page colours, and a hook to plug in any icon library.
 - **Accessibility features:** a modal dialog with a standard tree of pages for screen readers, full keyboard support, focus management, high-contrast and forced-colors support, text that follows the reader's font size, and reduced motion. See [Accessibility](#accessibility).
 
-Version 0.1.0 is an initial release for compact site maps. The API may change before 1.0.
+Version 1.x keeps the public options, events and styling API stable. It is designed for compact site maps;
+see [layout limits](#layout-limits) and test your real menu content.
 
 ## Quick start
 
@@ -352,6 +355,8 @@ Those two properties drive the unfold animation.
 
 ## Showcase: 9 industries × 9 designs
 
+[Try the live demo](https://unfold-nav.romagnolo.eu).
+
 `pnpm dev` opens a showcase with a desktop and a phone frame side by side, running the same mock website. Pick:
 
 - **an industry:** restaurant, fashion, SaaS, healthcare, real estate, developer docs, creative agency, banking, travel. Each is a fictional brand with its own site map, typography and artwork.
@@ -368,6 +373,8 @@ pnpm build:showcase      # static site in showcase-dist/ (relative paths, host i
 pnpm preview:showcase    # serve that build locally
 ```
 
+For container hosting and the Romagnolo deployment workflow, see [Showcase deployment](https://github.com/NikoKaranatsios/unfold-nav/blob/main/deploy/README.md).
+
 ## How the layout works
 
 All the geometry lives in `src/layout.ts` as pure functions.
@@ -403,7 +410,7 @@ pnpm build        # dist/unfold-nav.js (ESM), dist/unfold-nav.umd.cjs, type defi
 
 Browser target: modern evergreen browsers with Custom Elements, Shadow DOM, `<dialog>` and modern CSS (`color-mix`, individual transforms). Chrome has been checked interactively; test Safari, Firefox and assistive technology in your target environments before rollout. The Popover API puts drag navigation in the top layer; browsers without it use a non-modal dialog. IE and legacy browsers are not supported.
 
-See [CONTRIBUTING.md](CONTRIBUTING.md) for the development workflow and reproducible bug reports. GitHub Actions runs the checks and showcase build on Node 22 and 24.
+See [CONTRIBUTING.md](https://github.com/NikoKaranatsios/unfold-nav/blob/main/CONTRIBUTING.md) for the development workflow and reproducible bug reports. GitHub Actions runs the checks and showcase build on Node 22 and 24, and smoke-tests the static showcase container.
 
 A note on SEO: the graph only exists while it is open, so keep a plain list of links somewhere (a footer or a sitemap) for crawlers and no-JS visitors.
 

package/dist/layout.d.cts

@@ -2,11 +2,11 @@
  * Pure geometry: where nodes go, where their labels go, and how edges are drawn.
  * Coordinates are viewport pixels (y grows downwards, angles are clockwise from +x).
  *
- * The guarantee this file is built around: nothing overlaps. Every node reserves room for its label at
+ * The layout prefers clearance: every node reserves room for its label at
  * the moment its fan is placed, a fan is only accepted when all of its nodes *and* labels fit clear of
  * everything already on screen (nodes, labels, edges, the viewport edge), and later fans have to keep
  * clear of what's reserved. When that's impossible (a tiny screen, a huge menu) labels that don't fit
- * are left out rather than drawn on top of something.
+ * are left out. Extreme density can also exhaust node clearance; see the documented layout limits.
  */
 export interface Vec {
     x: number;

package/dist/layout.d.ts

@@ -2,11 +2,11 @@
  * Pure geometry: where nodes go, where their labels go, and how edges are drawn.
  * Coordinates are viewport pixels (y grows downwards, angles are clockwise from +x).
  *
- * The guarantee this file is built around: nothing overlaps. Every node reserves room for its label at
+ * The layout prefers clearance: every node reserves room for its label at
  * the moment its fan is placed, a fan is only accepted when all of its nodes *and* labels fit clear of
  * everything already on screen (nodes, labels, edges, the viewport edge), and later fans have to keep
  * clear of what's reserved. When that's impossible (a tiny screen, a huge menu) labels that don't fit
- * are left out rather than drawn on top of something.
+ * are left out. Extreme density can also exhaust node clearance; see the documented layout limits.
  */
 export interface Vec {
     x: number;