@alacris/ui 0.5.0 → 0.5.1

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.4/dist/alacris.js",
-    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.5.0/src/index.js",
-    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.5.0/src/theme/index.js",
-    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.5.0/src/components/"
+    "@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.5.1/src/index.js",
+    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.5.1/src/theme/index.js",
+    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.5.1/src/components/"
   }
 }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alacris/ui",
-  "version": "0.5.0",
+  "version": "0.5.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-date-picker.js

@@ -36,7 +36,7 @@ import { sys } from '../tokens/sys.js';
 import { base } from './base.js';
 import { formBind } from '../util/form.js';
 import { presence } from '../motion/presence.js';
-import { animate, fx } from '../motion/animate.js';
+import { animate, fx, releaseFill } from '../motion/animate.js';
 import { autoUpdate } from '../util/position.js';
 import { escapeLayer } from '../util/keys.js';
 import { popupEvent } from '../util/popup.js';
@@ -279,12 +279,7 @@ const styles = css`
     place-items: center;
   }
   .scrim { position: absolute; inset: 0; background: ${t.scrim}; }
-  @keyframes ui-date-picker-in {
-    from { transform: scale(0.8); }
-    to { transform: none; }
-  }
   .modal-surface {
-    animation: ui-date-picker-in ${sys.duration.medium2} ${sys.easing.emphasizedDecelerate};
     position: relative;
     display: flex;
     flex-direction: column;
@@ -714,12 +709,17 @@ define('ui-date-picker', {
         ${calGrid}
       </div>`;
 
+    const modalSurfaceRef = (el) => {
+      modalSurfaceEl = el;
+      releaseFill(animate(el, fx.scaleIn, { duration: 'medium2', easing: 'emphasizedDecelerate' }));
+    };
+
     const modalView = () => html`
       <div class="overlay">
         <div class="scrim" aria-hidden="true" @click=${closePanel}></div>
         <div class="modal-surface" part="panel" role="dialog" aria-modal="true"
              aria-label=${() => label() || 'Choose date'}
-             ref=${(el) => (modalSurfaceEl = el)}>
+             ref=${modalSurfaceRef}>
           <div class="headline">${() => (range() ? 'Select dates' : 'Select date')}</div>
           <div class="picked">${pickedLabel}</div>
           <div class="cal-header">

package/src/components/ui-dialog.js

@@ -29,7 +29,7 @@ import { define, html, css, vars, effect, onCleanup, signal } from '@alacris/cor
 import { sys } from '../tokens/sys.js';
 import { base } from './base.js';
 import { presence } from '../motion/presence.js';
-import { animate, fx } from '../motion/animate.js';
+import { animate, fx, releaseFill } from '../motion/animate.js';
 import { focusTrap, scrollLock } from '../util/focus.js';
 
 const t = vars('ui-dialog', {
@@ -51,12 +51,7 @@ const styles = css`
     place-items: center;
   }
   .scrim { position: absolute; inset: 0; background: ${t.scrim}; }
-  @keyframes ui-dialog-in {
-    from { transform: scale(0.8); }
-    to { transform: none; }
-  }
   .surface {
-    animation: ui-dialog-in ${sys.duration.medium2} ${sys.easing.emphasizedDecelerate};
     position: relative;
     display: flex;
     flex-direction: column;
@@ -146,13 +141,18 @@ define('ui-dialog', {
       sync();
     };
 
+    const surfaceRef = (el) => {
+      surfaceEl = el;
+      releaseFill(animate(el, fx.scaleIn, { duration: 'medium2', easing: 'emphasizedDecelerate' }));
+    };
+
     const view = () => html`
       <div class="overlay">
         <div class="scrim" part="scrim" aria-hidden="true" @click=${() => requestClose('scrim')}></div>
         <div class="surface" part="surface" role="dialog" aria-modal="true"
              aria-labelledby=${() => (hasHeadline() ? 'headline' : null)}
              aria-label=${() => (hasHeadline() ? null : (label() || 'Dialog'))}
-             tabindex="-1" ref=${(el) => (surfaceEl = el)}>
+             tabindex="-1" ref=${surfaceRef}>
           <div class="headline" part="headline" id="headline"
                ref=${(el) => hasSlot(el.querySelector('slot'), (has) => {
                  hasHeadline.set(has);

package/src/components/ui-drawer.js

@@ -116,9 +116,11 @@ define('ui-drawer', {
     };
 
     // Trap focus + lock scroll exactly while the modal drawer is open.
+    let closingViaSwipe = false;
     let prevActive = null;
     effect(() => {
       if (open() && variant() === 'modal') {
+        closingViaSwipe = false;
         prevActive = document.activeElement;
         document.addEventListener('keydown', onDocKeydown, true);
         if (!unlock) unlock = scrollLock();
@@ -143,7 +145,7 @@ define('ui-drawer', {
 
     // The panel slides out while the presence overlay (scrim included) fades.
     effect(() => {
-      if (!open() && surfaceEl?.isConnected) {
+      if (!open() && surfaceEl?.isConnected && !closingViaSwipe) {
         animate(surfaceEl, slideOut(), { duration: 'short4', easing: 'emphasizedAccelerate' });
       }
     });
@@ -161,6 +163,7 @@ define('ui-drawer', {
           return true;
         },
         onStart() {
+          el.getAnimations?.()?.forEach((a) => a.cancel());
           el.style.transition = 'none';
         },
         onMove({ dx }) {
@@ -183,29 +186,34 @@ define('ui-drawer', {
           const shouldDismiss = !cancelled && dismissDirection;
 
           if (shouldDismiss) {
+            closingViaSwipe = true;
             const targetTransform = isEnd ? 'translateX(100%)' : 'translateX(-100%)';
             const remaining = Math.max(0, w - Math.abs(dx));
             const ms = Math.min(300, Math.max(120, Math.round(remaining / (Math.max(Math.abs(vx), 0.8)))));
             if (scrimEl) {
               animate(scrimEl, fx.fadeOut, { duration: ms, easing: 'emphasizedAccelerate' });
             }
-            const anim = animate(el, [
+            animate(el, [
               { transform: el.style.transform || `translateX(${dx}px)` },
               { transform: targetTransform },
-            ], { duration: ms, easing: 'emphasizedAccelerate' });
-            anim.finished.then(() => {
-              requestClose('swipe');
-            });
+            ], { duration: ms, easing: 'emphasizedAccelerate', fill: 'forwards' });
+            requestClose('swipe');
           } else {
             if (scrimEl) {
-              animate(scrimEl, [{ opacity: scrimEl.style.opacity || '0.5' }, { opacity: 1 }], {
+              const scrimSnap = animate(scrimEl, [{ opacity: scrimEl.style.opacity || '0.5' }, { opacity: 1 }], {
                 duration: 'short4', easing: 'emphasizedDecelerate',
-              }).finished.then(() => { if (scrimEl) scrimEl.style.opacity = ''; });
+              });
+              scrimSnap.finished.then(() => {
+                try { scrimSnap.cancel(); } catch {}
+                if (scrimEl) scrimEl.style.opacity = '';
+              });
             }
-            animate(el, [
+            const snapAnim = animate(el, [
               { transform: el.style.transform || `translateX(${dx}px)` },
               { transform: 'translateX(0)' },
-            ], { duration: 'short4', easing: 'emphasizedDecelerate' }).finished.then(() => {
+            ], { duration: 'short4', easing: 'emphasizedDecelerate' });
+            snapAnim.finished.then(() => {
+              try { snapAnim.cancel(); } catch {}
               if (el) el.style.transform = '';
             });
           }

package/src/components/ui-sheet.js

@@ -134,9 +134,11 @@ define('ui-sheet', {
       if (e.key === 'Escape') requestClose('esc');
     };
 
+    let closingViaSwipe = false;
     let prevActive = null;
     effect(() => {
       if (open() && variant() !== 'standard') {
+        closingViaSwipe = false;
         prevActive = document.activeElement;
         document.addEventListener('keydown', onDocKeydown, true);
         unlock = scrollLock();
@@ -150,7 +152,7 @@ define('ui-sheet', {
         prevActive = null;
         unlock?.();
         unlock = null;
-        if (surfaceEl?.isConnected) {
+        if (surfaceEl?.isConnected && !closingViaSwipe) {
           animate(surfaceEl, fx.sheetOut, { duration: 'short4', easing: 'emphasizedAccelerate' });
         }
       }
@@ -185,6 +187,7 @@ define('ui-sheet', {
           return true;
         },
         onStart() {
+          el.getAnimations?.()?.forEach((a) => a.cancel());
           el.style.transition = 'none';
         },
         onMove({ dy }) {
@@ -204,28 +207,33 @@ define('ui-sheet', {
           const shouldDismiss = !cancelled && (vy > 0.4 || dy > h * 0.35);
 
           if (shouldDismiss) {
+            closingViaSwipe = true;
             const remaining = Math.max(0, h - dy);
             const ms = Math.min(300, Math.max(120, Math.round(remaining / (Math.max(vy, 0.8)))));
             if (scrimEl) {
               animate(scrimEl, fx.fadeOut, { duration: ms, easing: 'emphasizedAccelerate' });
             }
-            const anim = animate(el, [
+            animate(el, [
               { transform: el.style.transform || `translateY(${dy}px)` },
               { transform: 'translateY(100%)' },
-            ], { duration: ms, easing: 'emphasizedAccelerate' });
-            anim.finished.then(() => {
-              requestClose('swipe');
-            });
+            ], { duration: ms, easing: 'emphasizedAccelerate', fill: 'forwards' });
+            requestClose('swipe');
           } else {
             if (scrimEl) {
-              animate(scrimEl, [{ opacity: scrimEl.style.opacity || '0.5' }, { opacity: 1 }], {
+              const scrimSnap = animate(scrimEl, [{ opacity: scrimEl.style.opacity || '0.5' }, { opacity: 1 }], {
                 duration: 'short4', easing: 'emphasizedDecelerate',
-              }).finished.then(() => { if (scrimEl) scrimEl.style.opacity = ''; });
+              });
+              scrimSnap.finished.then(() => {
+                try { scrimSnap.cancel(); } catch {}
+                if (scrimEl) scrimEl.style.opacity = '';
+              });
             }
-            animate(el, [
+            const snapAnim = animate(el, [
               { transform: el.style.transform || `translateY(${dy}px)` },
               { transform: 'translateY(0)' },
-            ], { duration: 'short4', easing: 'emphasizedDecelerate' }).finished.then(() => {
+            ], { duration: 'short4', easing: 'emphasizedDecelerate' });
+            snapAnim.finished.then(() => {
+              try { snapAnim.cancel(); } catch {}
               if (el) el.style.transform = '';
             });
           }

package/src/components/ui-side-sheet.js

@@ -136,9 +136,11 @@ define('ui-side-sheet', {
       if (e.key === 'Escape') requestClose('esc');
     };
 
+    let closingViaSwipe = false;
     let prevActive = null;
     effect(() => {
       if (open() && variant() !== 'standard') {
+        closingViaSwipe = false;
         prevActive = document.activeElement;
         document.addEventListener('keydown', onDocKeydown, true);
         unlock = scrollLock();
@@ -155,7 +157,7 @@ define('ui-side-sheet', {
       }
     });
     effect(() => {
-      if (!open() && surfaceEl?.isConnected) {
+      if (!open() && surfaceEl?.isConnected && !closingViaSwipe) {
         animate(surfaceEl, slideOut(), { duration: 'short4', easing: 'emphasizedAccelerate' });
       }
     });
@@ -179,6 +181,7 @@ define('ui-side-sheet', {
           return true;
         },
         onStart() {
+          el.getAnimations?.()?.forEach((a) => a.cancel());
           el.style.transition = 'none';
         },
         onMove({ dx }) {
@@ -201,29 +204,34 @@ define('ui-side-sheet', {
           const shouldDismiss = !cancelled && dismissDirection;
 
           if (shouldDismiss) {
+            closingViaSwipe = true;
             const targetTransform = isEnd ? 'translateX(100%)' : 'translateX(-100%)';
             const remaining = Math.max(0, w - Math.abs(dx));
             const ms = Math.min(300, Math.max(120, Math.round(remaining / (Math.max(Math.abs(vx), 0.8)))));
             if (scrimEl) {
               animate(scrimEl, fx.fadeOut, { duration: ms, easing: 'emphasizedAccelerate' });
             }
-            const anim = animate(el, [
+            animate(el, [
               { transform: el.style.transform || `translateX(${dx}px)` },
               { transform: targetTransform },
-            ], { duration: ms, easing: 'emphasizedAccelerate' });
-            anim.finished.then(() => {
-              requestClose('swipe');
-            });
+            ], { duration: ms, easing: 'emphasizedAccelerate', fill: 'forwards' });
+            requestClose('swipe');
           } else {
             if (scrimEl) {
-              animate(scrimEl, [{ opacity: scrimEl.style.opacity || '0.5' }, { opacity: 1 }], {
+              const scrimSnap = animate(scrimEl, [{ opacity: scrimEl.style.opacity || '0.5' }, { opacity: 1 }], {
                 duration: 'short4', easing: 'emphasizedDecelerate',
-              }).finished.then(() => { if (scrimEl) scrimEl.style.opacity = ''; });
+              });
+              scrimSnap.finished.then(() => {
+                try { scrimSnap.cancel(); } catch {}
+                if (scrimEl) scrimEl.style.opacity = '';
+              });
             }
-            animate(el, [
+            const snapAnim = animate(el, [
               { transform: el.style.transform || `translateX(${dx}px)` },
               { transform: 'translateX(0)' },
-            ], { duration: 'short4', easing: 'emphasizedDecelerate' }).finished.then(() => {
+            ], { duration: 'short4', easing: 'emphasizedDecelerate' });
+            snapAnim.finished.then(() => {
+              try { snapAnim.cancel(); } catch {}
               if (el) el.style.transform = '';
             });
           }

package/src/components/ui-swipe-row.js

@@ -97,6 +97,7 @@ define('ui-swipe-row', {
         { transform: targetTransform },
       ], { duration: ms, easing });
       return anim.finished.then(() => {
+        try { anim.cancel(); } catch {}
         if (contentEl) contentEl.style.transform = targetTransform;
       });
     };
@@ -163,6 +164,7 @@ define('ui-swipe-row', {
           return true;
         },
         onStart() {
+          el.getAnimations?.()?.forEach((a) => a.cancel());
           if (currentOpen === 'end') startOffset = -getEndWidth();
           else if (currentOpen === 'start') startOffset = getStartWidth();
           else startOffset = 0;