@alacris/ui 0.2.1 → 0.2.3

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.1/dist/alacris.js",
+    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.2.3/src/index.js",
+    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.2.3/src/theme/index.js",
+    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.2.3/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.3",
   "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/components/ui-text-field.js

@@ -37,6 +37,11 @@ const t = vars('ui-text-field', {
   radius: sys.radius.xs,
   font: sys.type.bodyLg,
   height: '56px',
+
+  // The lane reserved at the end of a number field for its stepper. It is a
+  // variable because the buttons are the browser's and their width is not the
+  // same on every engine — a consumer with a denser field can shorten it.
+  stepperWidth: '18px',
 });
 
 const styles = css`
@@ -217,6 +222,43 @@ const styles = css`
   .filled.has-label textarea { padding-top: ${sys.space(7)}; }
   .with-leading.multiline .field { padding-inline-start: ${sys.space(4)}; }
   .with-leading.multiline textarea { padding-inline-start: 0; }
+  /* A number field's stepper gets its own lane.
+  
+     The browser draws the spin buttons inside the input's content box, at the
+     inline end, and they are painted over whatever is already there: the
+     floating label, the placeholder, and the value itself once it is long
+     enough. On a narrow field it lands squarely on the label — a chevron
+     sitting on the word it is meant to sit beside.
+  
+     So the end of the field is reserved for it. The input is padded by the
+     stepper's width, and the label and legend are shortened by the same
+     amount so a long label ellipsises before it reaches the buttons rather
+     than sliding underneath them. appearance:none does not help here: it
+     removes the field's own chrome and leaves the ::-webkit-*-spin-button
+     alone, which is why this needs saying explicitly. */
+  .numeric input { padding-inline-end: ${t.stepperWidth}; }
+  .numeric .label {
+    max-inline-size: calc(100% - ${sys.space(4)} - ${t.stepperWidth});
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .numeric legend { max-inline-size: calc(100% - ${t.stepperWidth}); }
+  .numeric input::-webkit-outer-spin-button,
+  .numeric input::-webkit-inner-spin-button {
+    /* Held at the end of the reserved lane rather than tight against the
+       text, and always visible: a stepper that appears on hover is a control
+       nobody knows is there. */
+    margin: 0;
+    margin-inline-start: ${sys.space(2)};
+    opacity: 1;
+  }
+  /* Firefox draws no buttons at all unless asked, so the reserved lane would
+     be an empty gap. Asking for them makes the two engines agree. */
+  @supports (-moz-appearance: number-input) {
+    .numeric input { -moz-appearance: number-input; }
+  }
+
   input::placeholder, textarea::placeholder { color: ${t.labelFg}; opacity: 0; transition: opacity ${sys.duration.short2} linear; }
   .floating input::placeholder, .floating textarea::placeholder { opacity: 1; }
 
@@ -255,7 +297,8 @@ define('ui-text-field', {
     const cls = computed(() =>
       ['root', variant(), floating() && 'floating', focused() && 'focused',
        error() && 'error', disabled() && 'disabled', label() && 'has-label',
-       hasLeading() && 'with-leading', type() === 'textarea' && 'multiline'].filter(Boolean).join(' '));
+       hasLeading() && 'with-leading', type() === 'textarea' && 'multiline',
+       type() === 'number' && 'numeric'].filter(Boolean).join(' '));
 
     const onInput = (e) => {
       value.set(e.target.value);

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);
+}