@stnd/ui 0.7.2 → 0.8.0

package/AlertDialog.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { tick } from "svelte";
   /**
    * @component AlertDialog
    * @description A native `<dialog>`-based confirmation modal. Used
@@ -26,12 +27,28 @@
   } = $props();
 
   let dialog = $state();
+  /** @type {Element | null} */
+  let opener = null;
 
   $effect(() => {
     if (open && dialog && !dialog.open) {
+      opener = document.activeElement;
       dialog.showModal();
     } else if (!open && dialog && dialog.open) {
       dialog.close();
+      // Hand focus back. A closed <dialog> is display:none, but the button
+      // the user just pressed stays `document.activeElement` — and this
+      // dialog swallows keydown (below), so until something else took focus
+      // every key, Escape and the app's shortcuts included, went to a hidden
+      // button and died there. `Dialog` restores focus; this one did not.
+      const back = opener;
+      opener = null;
+      tick().then(() => {
+        if (back?.isConnected) /** @type {HTMLElement} */ (back).focus?.();
+        // The opener may be disabled by now (a busy "Clear" button) and refuse
+        // focus; never leave it on the dialog we just closed.
+        if (dialog?.contains(document.activeElement)) /** @type {HTMLElement} */ (document.activeElement).blur();
+      });
     }
   });
 

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @stnd/ui
 
+## 0.8.0
+
+### Minor Changes
+
+- Auto-bumped @stnd/ui due to modified code.
+
+### Patch Changes
+
+- Updated dependencies
+  - @stnd/icon@0.4.0
+
+## 0.7.3
+
+### Patch Changes
+
+- Auto-bumped @stnd/ui due to modified code.
+
 ## 0.7.2
 
 ### Patch Changes

package/TableOfContents.astro

@@ -104,12 +104,12 @@ const tocHeadings = (headings || [])
     border: 1px solid transparent;
     opacity: 0.45;
     transition:
-      opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
-      background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
-      border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
-      box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
-      backdrop-filter 0.3s cubic-bezier(0.16, 1, 0.3, 1),
-      padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+      opacity var(--duration-fast) cubic-bezier(0.16, 1, 0.3, 1),
+      background var(--duration-fast) cubic-bezier(0.16, 1, 0.3, 1),
+      border-color var(--duration-fast) cubic-bezier(0.16, 1, 0.3, 1),
+      box-shadow var(--duration-fast) cubic-bezier(0.16, 1, 0.3, 1),
+      backdrop-filter var(--duration-fast) cubic-bezier(0.16, 1, 0.3, 1),
+      padding var(--duration-fast) cubic-bezier(0.16, 1, 0.3, 1);
     user-select: none;
   }
 
@@ -121,13 +121,8 @@ const tocHeadings = (headings || [])
   .stnd-toc:hover,
   .stnd-toc:focus-within {
     opacity: 1;
-    background: color-mix(
-      in oklab,
-      var(--color-surface-light-1, var(--color-background)) 92%,
-      transparent
-    );
-    backdrop-filter: var(--filter-glass, blur(20px)) saturate(160%);
-    -webkit-backdrop-filter: var(--filter-glass, blur(20px)) saturate(160%);
+    backdrop-filter: var(--filter-glass);
+    -webkit-backdrop-filter: var(--filter-glass);
     border-color: var(--color-border);
     box-shadow: var(--shadow-xl, var(--shadow-raised));
     padding: 0.75rem 1rem 0.85rem 1.25rem;
@@ -135,6 +130,7 @@ const tocHeadings = (headings || [])
 
   /* Architectural vertical spine guide */
   .toc-spine {
+    display: none;
     position: absolute;
     right: 14px;
     top: 0.75rem;
@@ -195,7 +191,7 @@ const tocHeadings = (headings || [])
   .toc-list {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 0;
     position: relative;
     z-index: 2;
     max-height: calc(75vh - 2rem);
@@ -218,9 +214,9 @@ const tocHeadings = (headings || [])
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: var(--space-half, 0.65rem);
+    gap: 6px;
     text-decoration: none;
-    padding: 3px 0 3px 6px;
+    padding: 3px 0px 3px 6px;
     border-radius: var(--radius-sm, 4px);
     cursor: pointer;
     transition: background 0.15s ease;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stnd/ui",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "type": "module",
   "svelte": "./Combobox.svelte",
   "exports": {
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "wrangler": "^4.129.0",
-    "@stnd/icon": "0.3.1",
+    "@stnd/icon": "0.4.0",
     "@stnd/store": "0.5.1",
     "@stnd/utils": "0.6.1"
   },