fix: correct demo navigation and touch backdrop dismissal

CONTRIBUTING.md

@@ -292,7 +292,7 @@ It generates reference pages and searchable guides from `docs/guide/` in
 `public/api/`. That generated directory is ignored by Git and excluded from npm.
 Do not edit the generated HTML or include private implementation classes.
 
-`npm run dev` generates the documentation before starting Vite; open `/api/` or
+`npm run dev` generates the documentation before starting Vite; open `/api/index.html` or
 use the demo navigation. After editing guides or API comments, rerun
 `npm run build:docs` and refresh. `npm run build:demo` regenerates and copies the
 site to `dist/demo/api/`, so the existing Pages workflow publishes it with the demo.

demo/main.ts

@@ -96,7 +96,10 @@ document.addEventListener('pointercancel', () => {
   settingsPressOutside = false;
 });
 document.addEventListener('click', (event) => {
-  if (settingsPressOutside && outsideSettings(event)) {
+  // The native backdrop button handles touch and keyboard activation itself.
+  // Only the modal dialog backdrop needs a separate outside-press guard.
+  const backdropActivation = event.target === settingsBackdrop;
+  if ((settingsPressOutside || backdropActivation) && outsideSettings(event)) {
     settingsDialog.close();
   }
   settingsPressOutside = false;

demo/style.css

@@ -491,6 +491,12 @@ footer {
   position: fixed;
   inset: 0;
   z-index: 20;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  cursor: default;
   background: rgb(10 12 15 / 72%);
   backdrop-filter: grayscale(1);
   -webkit-backdrop-filter: grayscale(1);

examples/angular/index.html

@@ -10,7 +10,7 @@
       <nav aria-label="Examples navigation">
         <a href="../index.html">← All examples</a
         ><a href="https://rosek86.github.io/smithkit/">Full demo</a>
-        <a href="https://rosek86.github.io/smithkit/api/">API documentation</a>
+        <a href="https://rosek86.github.io/smithkit/api/index.html">API documentation</a>
       </nav>
       <header>
         <p class="eyebrow">SMITHKIT EXAMPLES</p>

examples/appearance/index.html

@@ -10,7 +10,7 @@
       <nav aria-label="Examples navigation">
         <a href="../index.html">← All examples</a
         ><a href="https://rosek86.github.io/smithkit/">Full demo</a>
-        <a href="https://rosek86.github.io/smithkit/api/">API documentation</a>
+        <a href="https://rosek86.github.io/smithkit/api/index.html">API documentation</a>
       </nav>
       <header>
         <p class="eyebrow">SMITHKIT EXAMPLES</p>

examples/basic/index.html

@@ -12,7 +12,7 @@
         <a href="https://github.com/rosek86/smithkit/blob/main/examples/basic/main.ts"
           >View TypeScript source</a
         >
-        <a href="https://rosek86.github.io/smithkit/api/">API documentation</a>
+        <a href="https://rosek86.github.io/smithkit/api/index.html">API documentation</a>
       </nav>
       <header>
         <p class="eyebrow">SMITHKIT EXAMPLES</p>

examples/export/index.html

@@ -10,7 +10,7 @@
       <nav aria-label="Examples navigation">
         <a href="../index.html">← All examples</a
         ><a href="https://rosek86.github.io/smithkit/">Full demo</a>
-        <a href="https://rosek86.github.io/smithkit/api/">API documentation</a>
+        <a href="https://rosek86.github.io/smithkit/api/index.html">API documentation</a>
       </nav>
       <header>
         <p class="eyebrow">SMITHKIT EXAMPLES</p>

examples/index.html

@@ -11,7 +11,7 @@
       <nav aria-label="Examples navigation">
         <a href="https://rosek86.github.io/smithkit/">← Full demo</a
         ><a href="https://github.com/rosek86/smithkit/tree/main/examples">Source on GitHub</a>
-        <a href="https://rosek86.github.io/smithkit/api/">API documentation</a>
+        <a href="https://rosek86.github.io/smithkit/api/index.html">API documentation</a>
       </nav>
       <header>
         <p class="eyebrow">SMITHKIT EXAMPLES</p>
@@ -73,7 +73,7 @@ <h1>One example, one task.</h1>
       </div>
       <footer>
         All examples import from <code>smithkit</code>.
-        <a href="https://rosek86.github.io/smithkit/api/">Library documentation</a>
+        <a href="https://rosek86.github.io/smithkit/api/index.html">Library documentation</a>
       </footer>
     </main>
   </body>

examples/large-trace/index.html

@@ -10,7 +10,7 @@
       <nav aria-label="Examples navigation">
         <a href="../index.html">← All examples</a
         ><a href="https://rosek86.github.io/smithkit/">Full demo</a>
-        <a href="https://rosek86.github.io/smithkit/api/">API documentation</a>
+        <a href="https://rosek86.github.io/smithkit/api/index.html">API documentation</a>
       </nav>
       <header>
         <p class="eyebrow">SMITHKIT EXAMPLES</p>

examples/markers/index.html

@@ -10,7 +10,7 @@
       <nav aria-label="Examples navigation">
         <a href="../index.html">← All examples</a
         ><a href="https://rosek86.github.io/smithkit/">Full demo</a>
-        <a href="https://rosek86.github.io/smithkit/api/">API documentation</a>
+        <a href="https://rosek86.github.io/smithkit/api/index.html">API documentation</a>
       </nav>
       <header>
         <p class="eyebrow">SMITHKIT EXAMPLES</p>

examples/react/index.html

@@ -10,7 +10,7 @@
       <nav aria-label="Examples navigation">
         <a href="../index.html">← All examples</a
         ><a href="https://rosek86.github.io/smithkit/">Full demo</a>
-        <a href="https://rosek86.github.io/smithkit/api/">API documentation</a>
+        <a href="https://rosek86.github.io/smithkit/api/index.html">API documentation</a>
       </nav>
       <header>
         <p class="eyebrow">SMITHKIT EXAMPLES</p>

examples/static/index.html

@@ -10,7 +10,7 @@
       <nav aria-label="Examples navigation">
         <a href="../index.html">← All examples</a
         ><a href="https://rosek86.github.io/smithkit/">Full demo</a>
-        <a href="https://rosek86.github.io/smithkit/api/">API documentation</a>
+        <a href="https://rosek86.github.io/smithkit/api/index.html">API documentation</a>
       </nav>
       <header>
         <p class="eyebrow">SMITHKIT EXAMPLES</p>

examples/touchstone/index.html

@@ -10,7 +10,7 @@
       <nav aria-label="Examples navigation">
         <a href="../index.html">← All examples</a
         ><a href="https://rosek86.github.io/smithkit/">Full demo</a>
-        <a href="https://rosek86.github.io/smithkit/api/">API documentation</a>
+        <a href="https://rosek86.github.io/smithkit/api/index.html">API documentation</a>
       </nav>
       <header>
         <p class="eyebrow">SMITHKIT EXAMPLES</p>

index.html

@@ -182,7 +182,13 @@ <h2 id="comparison-heading">Compare markers</h2>
       </div>
       <footer>Smithkit</footer>
     </main>
-    <div id="settings-backdrop" hidden aria-hidden="true"></div>
+    <button
+      id="settings-backdrop"
+      type="button"
+      tabindex="-1"
+      aria-label="Close chart settings"
+      hidden
+    ></button>
     <dialog
       id="chart-settings"
       aria-labelledby="chart-settings-title"