@alacris/ui 0.2.1 → 0.2.2

package/README.md

@@ -46,10 +46,10 @@ The published package is plain ESM. Point an import map at a pinned CDN build of
 <script type="importmap">
 {
   "imports": {
-    "@alacris/core": "https://cdn.jsdelivr.net/npm/@alacris/core@0.11/dist/alacris.js",
-    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui/src/index.js",
-    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui/src/theme/index.js",
-    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui/src/components/"
+    "@alacris/core": "https://cdn.jsdelivr.net/npm/@alacris/core@0.11.0/dist/alacris.js",
+    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.2.2/src/index.js",
+    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.2.2/src/theme/index.js",
+    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.2.2/src/components/"
   }
 }
 </script>
@@ -61,7 +61,7 @@ The published package is plain ESM. Point an import map at a pinned CDN build of
 <ui-button>Hello</ui-button>
 ```
 
-Pin both packages in production.
+Never mix two versions of `@alacris/core` on one page — two copies means two reactive graphs.
 
 ## Theming
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alacris/ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Themeable design system for Alacris — Material defaults, sixty-eight custom elements, ESM-only, no build step.",
   "type": "module",
   "exports": {

package/src/components/ui-autocomplete.js

@@ -28,6 +28,7 @@ import { define, html, css, vars, computed, signal, effect, onCleanup, each } fr
 import { sys } from '../tokens/sys.js';
 import { base } from './base.js';
 import { formBind } from '../util/form.js';
+import { escapeLayer } from '../util/keys.js';
 import { presence } from '../motion/presence.js';
 import { fx } from '../motion/animate.js';
 import { autoUpdate } from '../util/position.js';
@@ -295,9 +296,15 @@ define('ui-autocomplete', {
           if (showPanel() && activeOpt()) { e.preventDefault(); commit(activeOpt().value); }
           else if (freeSolo()) commit(query().trim());
           break;
-        case 'Escape': open.set(false); break;
       }
     };
+    // The panel owns Escape while it is up, so that closing it inside a
+    // dialog does not close the dialog as well.
+    effect(() => {
+      if (!showPanel()) return;
+      return escapeLayer(() => open.set(false));
+    });
+
     const onFocus = () => { focused.set(true); open.set(true); };
     const onBlur = () => {
       focused.set(false);

package/src/components/ui-date-picker.js

@@ -38,6 +38,7 @@ import { formBind } from '../util/form.js';
 import { presence } from '../motion/presence.js';
 import { animate, fx } from '../motion/animate.js';
 import { autoUpdate } from '../util/position.js';
+import { escapeLayer } from '../util/keys.js';
 import { focusTrap, scrollLock } from '../util/focus.js';
 import './ui-icon-button.js';
 import './ui-button.js';
@@ -607,12 +608,14 @@ define('ui-date-picker', {
         if (e.composedPath().includes(host)) return;
         closePanel();
       };
-      const onEsc = (e) => { if (e.key === 'Escape') closePanel(); };
+      // Capture at the document is not early enough: a dialog registers the
+      // same way when it opens, so it is already listening by the time this
+      // panel does and one Escape closes both.
+      const releaseEsc = escapeLayer(closePanel);
       document.addEventListener('pointerdown', onDoc);
-      document.addEventListener('keydown', onEsc, true);
       return () => {
         document.removeEventListener('pointerdown', onDoc);
-        document.removeEventListener('keydown', onEsc, true);
+        releaseEsc();
       };
     });
     effect(() => {

package/src/components/ui-select.js

@@ -7,7 +7,8 @@
 //   </ui-select>
 //
 // Keyboard (APG select-only combobox): Enter/Space/ArrowDown/ArrowUp open;
-// arrows move the active option, Enter/Space selects it, Escape closes,
+// arrows move the active option, Enter/Space selects it, Escape closes the
+// panel only — an enclosing dialog keeps its own Escape for a second press,
 // typing jumps to the next option starting with that letter. The panel closes
 // on outside pointerdown and returns focus to the field.
 //
@@ -37,6 +38,7 @@ import { formBind } from '../util/form.js';
 import { presence } from '../motion/presence.js';
 import { fx } from '../motion/animate.js';
 import { autoUpdate } from '../util/position.js';
+import { escapeLayer } from '../util/keys.js';
 import './ui-icon.js';
 import './ui-option.js';
 
@@ -294,6 +296,18 @@ define('ui-select', {
       fieldEl?.focus();
     };
 
+    // Escape belongs to the panel while it is open, not to whatever encloses
+    // it. A dialog listens for the key in the capture phase at the document,
+    // so without claiming it a step earlier one press closes the panel and the
+    // dialog together.
+    effect(() => {
+      if (!open()) return;
+      return escapeLayer(() => {
+        closePanel();
+        fieldEl?.focus();
+      });
+    });
+
     // Outside pointerdown closes (scrim-less popup).
     effect(() => {
       if (!open()) return;
@@ -362,7 +376,6 @@ define('ui-select', {
         }
         case 'Enter':
         case ' ': e.preventDefault(); commit(opts[activeIndex()]); break;
-        case 'Escape': e.preventDefault(); closePanel(); break;
         case 'Tab': closePanel(); break;
         default:
           if (e.key.length === 1 && e.key !== ' ') typeahead(e.key);

package/src/util/keys.js

@@ -108,3 +108,34 @@ export function rovingTabindex(container, opts = {}) {
     },
   };
 }
+
+// escapeLayer — claim Escape for the innermost open layer.
+//
+// `ui-dialog` listens for Escape in the capture phase at the document, so that
+// the key works wherever focus happens to be. That is right for a dialog and
+// wrong for anything transient opened inside one: a select's panel, a menu, a
+// date picker. Those handle Escape too, but the dialog has already seen it by
+// then, so one press closes both — and choosing a format in a dialog looks
+// like the dialog is broken rather than like an ordering problem nobody can
+// see.
+//
+// Capture descends window → document → …, so a layer claims the key one step
+// earlier than the dialog and stops it there. Nothing below ever runs.
+
+/**
+ * escapeLayer(onEscape)
+ *
+ * Call while a transient layer is open; call the returned function when it
+ * closes. Only registers a listener while it is held, so a page with nothing
+ * open behaves exactly as before.
+ */
+export function escapeLayer(onEscape) {
+  const onKeydown = (e) => {
+    if (e.key !== 'Escape') return;
+    e.preventDefault();
+    e.stopPropagation();
+    onEscape(e);
+  };
+  window.addEventListener('keydown', onKeydown, true);
+  return () => window.removeEventListener('keydown', onKeydown, true);
+}