@alacris/ui 0.7.0 → 0.8.1

package/README.md

@@ -47,9 +47,9 @@ The published package is plain ESM. Point an import map at a pinned CDN build of
 {
   "imports": {
     "@alacris/core": "https://cdn.jsdelivr.net/npm/@alacris/core@0.11.5/dist/alacris.js",
-    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.7.0/src/index.js",
-    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.7.0/src/theme/index.js",
-    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.7.0/src/components/"
+    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.8.1/src/index.js",
+    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.8.1/src/theme/index.js",
+    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.8.1/src/components/"
   }
 }
 </script>

package/package.json

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

package/src/components/ui-search.js

@@ -283,11 +283,12 @@ define('ui-search', {
           <input part="input" ref=${(el) => (input = el)}
                  .value=${() => value() ?? ''}
                  placeholder=${ph}
+                 role="combobox"
                  aria-label=${() => label() || 'Search'}
                  aria-expanded=${() => String(open())}
                  aria-controls=${() => (showPanel() ? 'suggestions' : null)}
                  aria-autocomplete="list"
-                 aria-haspopup=${() => (isView() || slotted() ? 'true' : null)}
+                 aria-haspopup=${() => (isView() ? 'dialog' : slotted() ? 'listbox' : null)}
                  ?disabled=${disabled}
                  @input=${onInput} @change=${commit} @keydown=${onKeydown}
                  @focus=${onFocus}>

package/src/components/ui-snackbar.js

@@ -8,7 +8,8 @@
 //
 // Imperative (fire and forget; FIFO — one visible at a time):
 //
-//   const { close, closed } = showSnackbar('Message archived', { action: 'Undo' });
+//   const { close, closed } = showSnackbar('Message archived', { action: 'Undo', onAction: undo });
+//   const { reason } = await closed  // 'action' | 'timeout' | 'close' | 'method'
 //
 // The component requests closing by emitting `close` with a reason — the
 // PARENT flips `open`. `closed` fires after the exit animation finishes.
@@ -183,11 +184,15 @@ function serviceHost() {
   if (!serviceEl || !serviceEl.isConnected) {
     serviceEl = document.createElement('ui-snackbar');
     // The service is the "parent": it owns the open state.
-    serviceEl.addEventListener('close', () => { serviceEl.open = false; });
+    serviceEl.addEventListener('close', (e) => {
+      if (current && !current.reason) current.reason = e.detail?.reason ?? 'close';
+      serviceEl.open = false;
+    });
+    serviceEl.addEventListener('action', () => current?.onAction?.());
     serviceEl.addEventListener('closed', () => {
       const done = current;
       current = null;
-      done?.resolve();
+      done?.resolve({ reason: done.reason ?? 'close' });
       next();
     });
     document.body.append(serviceEl);
@@ -210,23 +215,25 @@ function next() {
  * showSnackbar(message, { action, duration, closeButton })
  *
  * Returns { close, closed }: `close()` dismisses this snackbar (or removes it
- * from the queue if it has not shown yet); `closed` resolves once it has fully
- * left the screen.
+ * from the queue if it has not shown yet); `closed` resolves with
+ * `{ reason }` ('action' | 'timeout' | 'close' | 'method') once it has fully
+ * left the screen. `onAction` runs when the action button is pressed.
  */
-export function showSnackbar(message, { action = '', duration = 4000, closeButton = false } = {}) {
+export function showSnackbar(message, { action = '', duration = 4000, closeButton = false, onAction } = {}) {
   let resolve;
   const closed = new Promise((r) => { resolve = r; });
-  const entry = { message, action, duration, closeButton, resolve };
+  const entry = { message, action, duration, closeButton, resolve, onAction, reason: null };
   queue.push(entry);
   next();
   return {
     closed,
     close() {
       if (current === entry) {
+        entry.reason ??= 'method';
         serviceEl.open = false; // exit animation → 'closed' → resolve + next
       } else {
         const i = queue.indexOf(entry);
-        if (i > -1) { queue.splice(i, 1); entry.resolve(); }
+        if (i > -1) { queue.splice(i, 1); entry.resolve({ reason: 'method' }); }
       }
     },
   };