@alacris/ui 0.6.2 → 0.8.0

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.6.2/src/index.js",
-    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.6.2/src/theme/index.js",
-    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.6.2/src/components/"
+    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.8.0/src/index.js",
+    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.8.0/src/theme/index.js",
+    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.8.0/src/components/"
   }
 }
 </script>

package/package.json

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

package/src/components/ui-chip.js

@@ -11,7 +11,9 @@
 // removes itself.
 //
 // @prop  {string}  variant='assist' — assist | filter | input | suggestion
-// @prop  {boolean} selected=false   — filter chips only
+// @prop  {boolean} selected=false   — filter chips (toggle, check icon) and input chips
+//                                     (MD3 selected input chip: filled, no check;
+//                                     the app owns the state and its ARIA)
 // @prop  {boolean} disabled=false
 // @prop  {string}  icon=''          — leading icon name (check replaces it while
 //                                     a filter chip is selected)
@@ -73,7 +75,7 @@ const styles = css`
                 border-color ${sys.duration.short2} ${sys.easing.standard},
                 padding-inline-start ${sys.duration.short4} ${sys.easing.emphasized};
   }
-  .selected .control { padding-inline-start: ${sys.space(2)}; }
+  .checked .control { padding-inline-start: ${sys.space(2)}; }
   .lead {
     display: inline-flex;
     align-items: center;
@@ -159,9 +161,11 @@ define('ui-chip', {
     });
 
     const checkWhen = computed(() => variant() === 'filter' && selected());
+    const filled = computed(() => checkWhen() || (variant() === 'input' && selected()));
     const rootCls = computed(() =>
       [
-        checkWhen() ? 'selected' : '',
+        filled() ? 'selected' : '',
+        checkWhen() ? 'checked' : '',
         icon() ? 'with-lead' : '',
         dismissible() ? 'with-dismiss' : '',
       ].filter(Boolean).join(' '));

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' }); }
       }
     },
   };