@alacris/ui 0.4.7 → 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.4.7/src/index.js",
-    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.7/src/theme/index.js",
-    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.7/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,7 +1,7 @@
 {
   "name": "@alacris/ui",
-  "version": "0.4.7",
-  "description": "Themeable design system for Alacris — Material defaults, sixty-eight custom elements, ESM-only, no build step.",
+  "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

@@ -14,8 +14,10 @@
 // @prop  {boolean} open=false
 // @prop  {string}  variant='modal' — modal | standard
 // @prop  {string}  anchor='start'  — start | end (which edge it slides from)
+// @prop  {boolean} persistent=false — Escape/scrim/swipe do not request closing
+// @prop  {boolean} swipable=true   — swipe in anchor direction to dismiss
 // @prop  {string}  label=''        — accessible name; falls back to "Navigation"
-// @event close  — modal dismissed; detail: { reason: 'esc' | 'scrim' }
+// @event close  — modal dismissed; detail: { reason: 'esc' | 'scrim' | 'swipe' }
 // @event opened — modal enter animation finished
 // @event closed — modal exit animation finished, DOM removed
 // @slot  (default) — drawer content
@@ -27,6 +29,7 @@ import { sys } from '../tokens/sys.js';
 import { base } from './base.js';
 import { presence } from '../motion/presence.js';
 import { animate, fx, releaseFill } from '../motion/animate.js';
+import { createSwipeTracker, rubberBand } from '../motion/gesture.js';
 import { focusTrap, scrollLock } from '../util/focus.js';
 
 const t = vars('ui-drawer', {
@@ -56,6 +59,7 @@ const styles = css`
     padding: ${t.pad};
     overflow-y: auto;
     box-shadow: ${sys.elevation[1]};
+    touch-action: pan-y;
   }
   .surface.start {
     inset-inline-start: 0;
@@ -88,12 +92,19 @@ const styles = css`
 `;
 
 define('ui-drawer', {
-  props: { open: false, variant: 'modal', anchor: 'start', label: '' },
+  props: { open: false, variant: 'modal', anchor: 'start', persistent: false, swipable: true, label: '' },
   styles: [base, styles],
-  setup({ open, variant, anchor, label }, host) {
+  setup({ open, variant, anchor, persistent, swipable, label }, host) {
     let releaseTrap = null;
     let unlock = null;
     let surfaceEl = null;
+    let scrimEl = null;
+    let tracker = null;
+
+    const requestClose = (reason) => {
+      if (reason !== 'method' && persistent()) return;
+      host.emit('close', { reason });
+    };
 
     const slideIn = () => (anchor.peek() === 'start' ? fx.slideInLeft : fx.slideInRight);
     const slideOut = () => (anchor.peek() === 'start' ? fx.slideOutLeft : fx.slideOutRight);
@@ -101,13 +112,15 @@ define('ui-drawer', {
     // Escape must work wherever focus is, so listen at the document while
     // the modal drawer is open.
     const onDocKeydown = (e) => {
-      if (e.key === 'Escape') host.emit('close', { reason: 'esc' });
+      if (e.key === 'Escape') requestClose('esc');
     };
 
     // 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();
@@ -127,11 +140,12 @@ define('ui-drawer', {
       document.removeEventListener('keydown', onDocKeydown, true);
       releaseTrap?.();
       unlock?.();
+      tracker?.destroy();
     });
 
     // 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' });
       }
     });
@@ -139,11 +153,79 @@ define('ui-drawer', {
     const surfaceRef = (el) => {
       surfaceEl = el;
       releaseFill(animate(el, slideIn(), { duration: 'medium2', easing: 'emphasizedDecelerate' }));
+
+      tracker?.destroy();
+      tracker = createSwipeTracker(el, {
+        axis: 'x',
+        threshold: 8,
+        filter(e) {
+          if (!swipable() || persistent() || variant() !== 'modal') return false;
+          return true;
+        },
+        onStart() {
+          el.getAnimations?.()?.forEach((a) => a.cancel());
+          el.style.transition = 'none';
+        },
+        onMove({ dx }) {
+          const isEnd = anchor.peek() === 'end';
+          let effectiveDx = dx;
+          if (isEnd) {
+            if (dx < 0) effectiveDx = rubberBand(dx, 0.2);
+          } else {
+            if (dx > 0) effectiveDx = rubberBand(dx, 0.2);
+          }
+          el.style.transform = `translateX(${effectiveDx}px)`;
+          const w = el.offsetWidth || 300;
+          const progress = Math.min(1, Math.max(0, Math.abs(effectiveDx) / w));
+          if (scrimEl) scrimEl.style.opacity = String(1 - progress * 0.7);
+        },
+        onEnd({ dx, vx, cancelled }) {
+          const isEnd = anchor.peek() === 'end';
+          const w = el.offsetWidth || 300;
+          const dismissDirection = isEnd ? (vx > 0.4 || dx > w * 0.35) : (vx < -0.4 || dx < -w * 0.35);
+          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' });
+            }
+            animate(el, [
+              { transform: el.style.transform || `translateX(${dx}px)` },
+              { transform: targetTransform },
+            ], { duration: ms, easing: 'emphasizedAccelerate', fill: 'forwards' });
+            requestClose('swipe');
+          } else {
+            if (scrimEl) {
+              const scrimSnap = animate(scrimEl, [{ opacity: scrimEl.style.opacity || '0.5' }, { opacity: 1 }], {
+                duration: 'short4', easing: 'emphasizedDecelerate',
+              });
+              scrimSnap.finished.then(() => {
+                try { scrimSnap.cancel(); } catch {}
+                if (scrimEl) scrimEl.style.opacity = '';
+              });
+            }
+            const snapAnim = animate(el, [
+              { transform: el.style.transform || `translateX(${dx}px)` },
+              { transform: 'translateX(0)' },
+            ], { duration: 'short4', easing: 'emphasizedDecelerate' });
+            snapAnim.finished.then(() => {
+              try { snapAnim.cancel(); } catch {}
+              if (el) el.style.transform = '';
+            });
+          }
+        },
+      });
     };
 
     const overlay = () => html`
       <div class="overlay">
-        <div class="scrim" part="scrim" aria-hidden="true" @click=${() => host.emit('close', { reason: 'scrim' })}></div>
+        <div class="scrim" part="scrim" aria-hidden="true"
+             ref=${(el) => { scrimEl = el; }}
+             @click=${() => requestClose('scrim')}></div>
         <aside class=${() => `surface ${anchor()}`} part="surface" role="dialog" aria-modal="true"
                aria-label=${() => label() || 'Navigation'} tabindex="-1" ref=${surfaceRef}>
           <slot></slot>
@@ -163,7 +245,10 @@ define('ui-drawer', {
         exit: fx.fadeOut,
         exitDuration: 'short4',
         onEntered: () => host.emit('opened'),
-        onExited: () => host.emit('closed'),
+        onExited: () => {
+          tracker?.destroy();
+          host.emit('closed');
+        },
       })}`;
   },
 });

package/src/components/ui-sheet.js

@@ -14,9 +14,10 @@
 //
 // @prop  {boolean} open=false
 // @prop  {string}  variant='modal' — modal | standard
-// @prop  {boolean} persistent=false — Escape/scrim do not request closing
+// @prop  {boolean} persistent=false — Escape/scrim/swipe do not request closing
+// @prop  {boolean} swipable=true   — swipe down to dismiss
 // @prop  {string}  label=''         — accessible name if no headline slot
-// @event close  — detail: { reason: 'esc' | 'scrim' | 'method' }
+// @event close  — detail: { reason: 'esc' | 'scrim' | 'swipe' | 'method' }
 // @event opened — enter animation finished
 // @event closed — exit animation finished, DOM removed
 // @slot  (default) — body content
@@ -30,6 +31,7 @@ import { sys } from '../tokens/sys.js';
 import { base } from './base.js';
 import { presence } from '../motion/presence.js';
 import { animate, fx, releaseFill } from '../motion/animate.js';
+import { createSwipeTracker, rubberBand } from '../motion/gesture.js';
 import { focusTrap, scrollLock } from '../util/focus.js';
 
 const t = vars('ui-sheet', {
@@ -63,6 +65,7 @@ const styles = css`
     border-start-start-radius: ${t.radius};
     border-start-end-radius: ${t.radius};
     box-shadow: ${sys.elevation[3]};
+    touch-action: pan-x;
   }
   .handle {
     flex: none;
@@ -71,12 +74,15 @@ const styles = css`
     margin: ${sys.space(4)} auto ${sys.space(2)};
     border-radius: ${sys.radius.full};
     background: ${t.handle};
+    cursor: grab;
+    touch-action: none;
   }
   .headline {
     padding-inline: ${sys.space(6)};
     padding-block-end: ${sys.space(2)};
     font: ${sys.type.titleLg};
     letter-spacing: ${sys.tracking.titleLg};
+    user-select: none;
   }
   .headline:not(.has) { display: none; }
   .body {
@@ -109,12 +115,14 @@ const styles = css`
 `;
 
 define('ui-sheet', {
-  props: { open: false, variant: 'modal', persistent: false, label: '' },
+  props: { open: false, variant: 'modal', persistent: false, swipable: true, label: '' },
   styles: [base, styles],
-  setup({ open, variant, persistent, label }, host) {
+  setup({ open, variant, persistent, swipable, label }, host) {
     let releaseTrap = null;
     let unlock = null;
     let surfaceEl = null;
+    let scrimEl = null;
+    let tracker = null;
     const hasHeadline = signal(false);
 
     const requestClose = (reason) => {
@@ -126,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();
@@ -142,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' });
         }
       }
@@ -151,6 +161,7 @@ define('ui-sheet', {
       document.removeEventListener('keydown', onDocKeydown, true);
       releaseTrap?.();
       unlock?.();
+      tracker?.destroy();
     });
 
     const hasSlot = (el, set) => {
@@ -159,14 +170,87 @@ define('ui-sheet', {
       sync();
     };
 
+    const surfaceRef = (el) => {
+      surfaceEl = el;
+      releaseFill(animate(el, fx.sheetIn, { duration: 'medium2', easing: 'emphasizedDecelerate' }));
+
+      tracker?.destroy();
+      tracker = createSwipeTracker(el, {
+        axis: 'y',
+        threshold: 8,
+        filter(e) {
+          if (!swipable() || persistent() || variant() === 'standard') return false;
+          const body = el.querySelector('.body');
+          if (body && body.contains(e.target) && body.scrollTop > 0) {
+            return false;
+          }
+          return true;
+        },
+        onStart() {
+          el.getAnimations?.()?.forEach((a) => a.cancel());
+          el.style.transition = 'none';
+        },
+        onMove({ dy }) {
+          if (dy < 0) {
+            const damped = rubberBand(dy, 0.2);
+            el.style.transform = `translateY(${damped}px)`;
+            if (scrimEl) scrimEl.style.opacity = '1';
+          } else {
+            el.style.transform = `translateY(${dy}px)`;
+            const h = el.offsetHeight || 300;
+            const progress = Math.min(1, Math.max(0, dy / h));
+            if (scrimEl) scrimEl.style.opacity = String(1 - progress * 0.7);
+          }
+        },
+        onEnd({ dy, vy, cancelled }) {
+          const h = el.offsetHeight || 300;
+          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' });
+            }
+            animate(el, [
+              { transform: el.style.transform || `translateY(${dy}px)` },
+              { transform: 'translateY(100%)' },
+            ], { duration: ms, easing: 'emphasizedAccelerate', fill: 'forwards' });
+            requestClose('swipe');
+          } else {
+            if (scrimEl) {
+              const scrimSnap = animate(scrimEl, [{ opacity: scrimEl.style.opacity || '0.5' }, { opacity: 1 }], {
+                duration: 'short4', easing: 'emphasizedDecelerate',
+              });
+              scrimSnap.finished.then(() => {
+                try { scrimSnap.cancel(); } catch {}
+                if (scrimEl) scrimEl.style.opacity = '';
+              });
+            }
+            const snapAnim = animate(el, [
+              { transform: el.style.transform || `translateY(${dy}px)` },
+              { transform: 'translateY(0)' },
+            ], { duration: 'short4', easing: 'emphasizedDecelerate' });
+            snapAnim.finished.then(() => {
+              try { snapAnim.cancel(); } catch {}
+              if (el) el.style.transform = '';
+            });
+          }
+        },
+      });
+    };
+
     const modalView = () => html`
       <div class="overlay">
-        <div class="scrim" part="scrim" aria-hidden="true" @click=${() => requestClose('scrim')}></div>
+        <div class="scrim" part="scrim" aria-hidden="true"
+             ref=${(el) => { scrimEl = el; }}
+             @click=${() => requestClose('scrim')}></div>
         <div class="surface" part="surface" role="dialog" aria-modal="true"
              aria-labelledby=${() => (hasHeadline() ? 'headline' : null)}
              aria-label=${() => (hasHeadline() ? null : (label() || 'Sheet'))}
              tabindex="-1"
-             ref=${(el) => { surfaceEl = el; releaseFill(animate(el, fx.sheetIn, { duration: 'medium2', easing: 'emphasizedDecelerate' })); }}>
+             ref=${surfaceRef}>
           <div class="handle" part="handle" aria-hidden="true"></div>
           <div class="headline" part="headline" id="headline"
                ref=${(el) => hasSlot(el.querySelector('slot'), (has) => {
@@ -199,10 +283,14 @@ define('ui-sheet', {
         exit: fx.fadeOut,
         exitDuration: 'short4',
         onEntered: () => host.emit('opened'),
-        onExited: () => host.emit('closed'),
+        onExited: () => {
+          tracker?.destroy();
+          host.emit('closed');
+        },
       })}`;
   },
 });
 
 export const tag = 'ui-sheet';
 export const themeVars = t;
+

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

@@ -14,9 +14,10 @@
 // @prop  {boolean} open=false
 // @prop  {string}  variant='modal' — modal | standard
 // @prop  {string}  anchor='end'    — start | end
-// @prop  {boolean} persistent=false — Escape/scrim do not request closing
+// @prop  {boolean} persistent=false — Escape/scrim/swipe do not request closing
+// @prop  {boolean} swipable=true   — swipe in anchor direction to dismiss
 // @prop  {string}  label=''         — accessible name if no headline slot
-// @event close  — detail: { reason: 'esc' | 'scrim' | 'method' }
+// @event close  — detail: { reason: 'esc' | 'scrim' | 'swipe' | 'method' }
 // @event opened — enter animation finished
 // @event closed — exit animation finished, DOM removed
 // @slot  (default) — body content
@@ -30,6 +31,7 @@ import { sys } from '../tokens/sys.js';
 import { base } from './base.js';
 import { presence } from '../motion/presence.js';
 import { animate, fx, releaseFill } from '../motion/animate.js';
+import { createSwipeTracker, rubberBand } from '../motion/gesture.js';
 import { focusTrap, scrollLock } from '../util/focus.js';
 import './ui-icon-button.js';
 
@@ -58,6 +60,7 @@ const styles = css`
     background: ${t.bg};
     color: ${t.fg};
     box-shadow: ${sys.elevation[1]};
+    touch-action: pan-y;
   }
   .surface.start {
     inset-inline-start: 0;
@@ -75,6 +78,7 @@ const styles = css`
     gap: ${sys.space(1)};
     min-block-size: 64px;
     padding-inline: ${sys.space(4)} ${sys.space(2)};
+    user-select: none;
   }
   .headline {
     flex: 1;
@@ -110,12 +114,14 @@ const styles = css`
 `;
 
 define('ui-side-sheet', {
-  props: { open: false, variant: 'modal', anchor: 'end', persistent: false, label: '' },
+  props: { open: false, variant: 'modal', anchor: 'end', persistent: false, swipable: true, label: '' },
   styles: [base, styles],
-  setup({ open, variant, anchor, persistent, label }, host) {
+  setup({ open, variant, anchor, persistent, swipable, label }, host) {
     let releaseTrap = null;
     let unlock = null;
     let surfaceEl = null;
+    let scrimEl = null;
+    let tracker = null;
     const hasHeadline = signal(false);
 
     const requestClose = (reason) => {
@@ -130,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();
@@ -149,7 +157,7 @@ define('ui-side-sheet', {
       }
     });
     effect(() => {
-      if (!open() && surfaceEl?.isConnected) {
+      if (!open() && surfaceEl?.isConnected && !closingViaSwipe) {
         animate(surfaceEl, slideOut(), { duration: 'short4', easing: 'emphasizedAccelerate' });
       }
     });
@@ -157,11 +165,78 @@ define('ui-side-sheet', {
       document.removeEventListener('keydown', onDocKeydown, true);
       releaseTrap?.();
       unlock?.();
+      tracker?.destroy();
     });
 
     const surfaceRef = (el) => {
       surfaceEl = el;
       releaseFill(animate(el, slideIn(), { duration: 'medium2', easing: 'emphasizedDecelerate' }));
+
+      tracker?.destroy();
+      tracker = createSwipeTracker(el, {
+        axis: 'x',
+        threshold: 8,
+        filter(e) {
+          if (!swipable() || persistent() || variant() === 'standard') return false;
+          return true;
+        },
+        onStart() {
+          el.getAnimations?.()?.forEach((a) => a.cancel());
+          el.style.transition = 'none';
+        },
+        onMove({ dx }) {
+          const isEnd = anchor.peek() === 'end';
+          let effectiveDx = dx;
+          if (isEnd) {
+            if (dx < 0) effectiveDx = rubberBand(dx, 0.2);
+          } else {
+            if (dx > 0) effectiveDx = rubberBand(dx, 0.2);
+          }
+          el.style.transform = `translateX(${effectiveDx}px)`;
+          const w = el.offsetWidth || 300;
+          const progress = Math.min(1, Math.max(0, Math.abs(effectiveDx) / w));
+          if (scrimEl) scrimEl.style.opacity = String(1 - progress * 0.7);
+        },
+        onEnd({ dx, vx, cancelled }) {
+          const isEnd = anchor.peek() === 'end';
+          const w = el.offsetWidth || 300;
+          const dismissDirection = isEnd ? (vx > 0.4 || dx > w * 0.35) : (vx < -0.4 || dx < -w * 0.35);
+          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' });
+            }
+            animate(el, [
+              { transform: el.style.transform || `translateX(${dx}px)` },
+              { transform: targetTransform },
+            ], { duration: ms, easing: 'emphasizedAccelerate', fill: 'forwards' });
+            requestClose('swipe');
+          } else {
+            if (scrimEl) {
+              const scrimSnap = animate(scrimEl, [{ opacity: scrimEl.style.opacity || '0.5' }, { opacity: 1 }], {
+                duration: 'short4', easing: 'emphasizedDecelerate',
+              });
+              scrimSnap.finished.then(() => {
+                try { scrimSnap.cancel(); } catch {}
+                if (scrimEl) scrimEl.style.opacity = '';
+              });
+            }
+            const snapAnim = animate(el, [
+              { transform: el.style.transform || `translateX(${dx}px)` },
+              { transform: 'translateX(0)' },
+            ], { duration: 'short4', easing: 'emphasizedDecelerate' });
+            snapAnim.finished.then(() => {
+              try { snapAnim.cancel(); } catch {}
+              if (el) el.style.transform = '';
+            });
+          }
+        },
+      });
     };
 
     const hasSlot = (el, set) => {
@@ -172,7 +247,9 @@ define('ui-side-sheet', {
 
     const modalView = () => html`
       <div class="overlay">
-        <div class="scrim" part="scrim" aria-hidden="true" @click=${() => requestClose('scrim')}></div>
+        <div class="scrim" part="scrim" aria-hidden="true"
+             ref=${(el) => { scrimEl = el; }}
+             @click=${() => requestClose('scrim')}></div>
         <aside class=${() => `surface ${anchor()}`} part="surface" role="dialog" aria-modal="true"
                aria-labelledby=${() => (hasHeadline() ? 'headline' : null)}
                aria-label=${() => (hasHeadline() ? null : (label() || 'Side sheet'))}
@@ -215,10 +292,14 @@ define('ui-side-sheet', {
         exit: fx.fadeOut,
         exitDuration: 'short4',
         onEntered: () => host.emit('opened'),
-        onExited: () => host.emit('closed'),
+        onExited: () => {
+          tracker?.destroy();
+          host.emit('closed');
+        },
       })}`;
   },
 });
 
 export const tag = 'ui-side-sheet';
 export const themeVars = t;
+

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

@@ -0,0 +1,255 @@
+// <ui-swipe-row> — an Android-style horizontal swipe-to-reveal row container.
+//
+//   <ui-swipe-row>
+//     <ui-icon-button slot="end" icon="delete" label="Delete" danger></ui-icon-button>
+//     <ui-icon-button slot="end" icon="archive" label="Archive"></ui-icon-button>
+//     <ui-list-item headline="Swipeable message" supporting="Swipe left to reveal actions"></ui-list-item>
+//   </ui-swipe-row>
+//
+// @prop  {string}  open=''         — '' | 'start' | 'end'
+// @prop  {boolean} disabled=false  — disables gesture tracking
+// @prop  {number}  threshold=0.4   — fraction of action width to snap open
+// @prop  {boolean} fullSwipe=false — swiping past 65% width triggers action
+// @event open   — detail: { side: 'start' | 'end' }
+// @event close  — detail: {}
+// @event action — detail: { side: 'start' | 'end' }
+// @slot  (default) — primary row content (e.g. <ui-list-item>, <ui-card>)
+// @slot  start — actions revealed when swiping right
+// @slot  end   — actions revealed when swiping left
+// @part  container, content, start-actions, end-actions
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, effect, onCleanup, signal } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import { animate } from '../motion/animate.js';
+import { createSwipeTracker, rubberBand } from '../motion/gesture.js';
+
+const t = vars('ui-swipe-row', {
+  bg: sys.color.surface,
+  actionStartBg: sys.color.primaryContainer,
+  actionStartFg: sys.color.onPrimaryContainer,
+  actionEndBg: sys.color.errorContainer,
+  actionEndFg: sys.color.onErrorContainer,
+});
+
+const styles = css`
+  :host { display: block; overflow: hidden; isolation: isolate; }
+  .container {
+    position: relative;
+    inline-size: 100%;
+    overflow: hidden;
+    user-select: none;
+    touch-action: pan-y;
+  }
+  .actions {
+    position: absolute;
+    inset-block: 0;
+    display: flex;
+    align-items: center;
+    z-index: 0;
+  }
+  .actions.start {
+    inset-inline-start: 0;
+    background: ${t.actionStartBg};
+    color: ${t.actionStartFg};
+  }
+  .actions.end {
+    inset-inline-end: 0;
+    background: ${t.actionEndBg};
+    color: ${t.actionEndFg};
+  }
+  .actions:not(.has) { display: none; }
+  .content {
+    position: relative;
+    z-index: 1;
+    background: ${t.bg};
+    inline-size: 100%;
+    touch-action: pan-y;
+  }
+  .disabled .content, .disabled .container { touch-action: auto; }
+`;
+
+define('ui-swipe-row', {
+  props: { open: '', disabled: false, threshold: 0.4, fullSwipe: false },
+  styles: [base, styles],
+  setup({ open, disabled, threshold, fullSwipe }, host) {
+    let containerEl = null;
+    let contentEl = null;
+    let startActionsEl = null;
+    let endActionsEl = null;
+    let tracker = null;
+    let currentOpen = '';
+    let startOffset = 0;
+
+    const hasStart = signal(false);
+    const hasEnd = signal(false);
+
+    const getStartWidth = () => (startActionsEl?.offsetWidth || 0);
+    const getEndWidth = () => (endActionsEl?.offsetWidth || 0);
+
+    const snapTo = (x, ms = 200, easing = 'emphasizedDecelerate') => {
+      if (!contentEl) return Promise.resolve();
+      const currentTransform = contentEl.style.transform || 'translateX(0px)';
+      const targetTransform = `translateX(${x}px)`;
+      const anim = animate(contentEl, [
+        { transform: currentTransform },
+        { transform: targetTransform },
+      ], { duration: ms, easing });
+      return anim.finished.then(() => {
+        try { anim.cancel(); } catch {}
+        if (contentEl) contentEl.style.transform = targetTransform;
+      });
+    };
+
+    const setOpenState = (side, emitEvent = true) => {
+      currentOpen = side;
+      if (side === 'end' && hasEnd.peek()) {
+        const w = getEndWidth();
+        snapTo(-w);
+        if (emitEvent) host.emit('open', { side: 'end' });
+      } else if (side === 'start' && hasStart.peek()) {
+        const w = getStartWidth();
+        snapTo(w);
+        if (emitEvent) host.emit('open', { side: 'start' });
+      } else {
+        currentOpen = '';
+        snapTo(0);
+        if (emitEvent) host.emit('close');
+      }
+    };
+
+    effect(() => {
+      const target = open();
+      if (target !== currentOpen) {
+        setOpenState(target, false);
+      }
+    });
+
+    const onDocClick = (e) => {
+      if (currentOpen && !host.contains(e.target)) {
+        setOpenState('');
+      }
+    };
+
+    document.addEventListener('click', onDocClick);
+    onCleanup(() => {
+      document.removeEventListener('click', onDocClick);
+      tracker?.destroy();
+    });
+
+    const onContentClick = (e) => {
+      if (currentOpen !== '') {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpenState('');
+      }
+    };
+
+    const hasSlot = (el, set) => {
+      const sync = () => set(el.assignedElements().length > 0);
+      el.addEventListener('slotchange', sync);
+      sync();
+    };
+
+    const initTracker = (el) => {
+      contentEl = el;
+      tracker?.destroy();
+
+      tracker = createSwipeTracker(el, {
+        axis: 'x',
+        threshold: 8,
+        filter(e) {
+          if (disabled()) return false;
+          return true;
+        },
+        onStart() {
+          el.getAnimations?.()?.forEach((a) => a.cancel());
+          if (currentOpen === 'end') startOffset = -getEndWidth();
+          else if (currentOpen === 'start') startOffset = getStartWidth();
+          else startOffset = 0;
+          el.style.transition = 'none';
+        },
+        onMove({ dx }) {
+          const totalDx = startOffset + dx;
+          const startW = getStartWidth();
+          const endW = getEndWidth();
+          let effectiveDx = totalDx;
+
+          if (totalDx > 0) {
+            if (!hasStart.peek()) effectiveDx = rubberBand(totalDx, 0.15);
+            else if (totalDx > startW && !fullSwipe()) {
+              effectiveDx = startW + rubberBand(totalDx - startW, 0.25);
+            }
+          } else if (totalDx < 0) {
+            if (!hasEnd.peek()) effectiveDx = rubberBand(totalDx, 0.15);
+            else if (-totalDx > endW && !fullSwipe()) {
+              effectiveDx = -endW - rubberBand(-totalDx - endW, 0.25);
+            }
+          }
+
+          el.style.transform = `translateX(${effectiveDx}px)`;
+        },
+        onEnd({ dx, vx, cancelled }) {
+          if (cancelled) {
+            setOpenState(currentOpen, false);
+            return;
+          }
+
+          const totalDx = startOffset + dx;
+          const containerW = containerEl?.offsetWidth || 300;
+          const startW = getStartWidth() || 80;
+          const endW = getEndWidth() || 80;
+          const thresh = Number(threshold()) || 0.4;
+
+          // Check full-swipe action
+          if (fullSwipe() && Math.abs(totalDx) > containerW * 0.65) {
+            const side = totalDx > 0 ? 'start' : 'end';
+            const targetX = totalDx > 0 ? containerW : -containerW;
+            snapTo(targetX, 150, 'emphasizedAccelerate').then(() => {
+              host.emit('action', { side });
+              setOpenState('');
+            });
+            return;
+          }
+
+          // Check reveal / snap
+          if (totalDx < 0 && hasEnd.peek()) {
+            if (vx < -0.4 || -totalDx > endW * thresh) {
+              setOpenState('end');
+              return;
+            }
+          } else if (totalDx > 0 && hasStart.peek()) {
+            if (vx > 0.4 || totalDx > startW * thresh) {
+              setOpenState('start');
+              return;
+            }
+          }
+
+          setOpenState('');
+        },
+      });
+    };
+
+    return html`
+      <div class=${() => `container${disabled() ? ' disabled' : ''}`} part="container"
+           ref=${(el) => { containerEl = el; }}>
+        <div class=${() => `actions start${hasStart() ? ' has' : ''}`} part="start-actions"
+             ref=${(el) => { startActionsEl = el; }}>
+          <slot name="start" ref=${(el) => hasSlot(el, hasStart.set)}></slot>
+        </div>
+        <div class=${() => `actions end${hasEnd() ? ' has' : ''}`} part="end-actions"
+             ref=${(el) => { endActionsEl = el; }}>
+          <slot name="end" ref=${(el) => hasSlot(el, hasEnd.set)}></slot>
+        </div>
+        <div class="content" part="content"
+             ref=${initTracker}
+             @click=${onContentClick}>
+          <slot></slot>
+        </div>
+      </div>`;
+  },
+});
+
+export const tag = 'ui-swipe-row';
+export const themeVars = t;

package/src/index.js

@@ -24,6 +24,7 @@ export { animate, releaseFill, settled, duration, easing, fx, prefersReducedMoti
 export { presence } from './motion/presence.js';
 export { withFlip } from './motion/flip.js';
 export { ripple } from './motion/ripple.js';
+export { createSwipeTracker, calculateVelocity, rubberBand } from './motion/gesture.js';
 
 // Utilities
 export { position, autoUpdate } from './util/position.js';
@@ -73,6 +74,7 @@ import './components/ui-badge.js';
 import './components/ui-divider.js';
 import './components/ui-list.js';
 import './components/ui-list-item.js';
+import './components/ui-swipe-row.js';
 import './components/ui-table.js';
 import './components/ui-table-toolbar.js';
 import './components/ui-table-footer.js';

package/src/motion/gesture.js

@@ -0,0 +1,196 @@
+// Gesture — fluid pointer drag and velocity tracking for Material gestures.
+//
+// Features:
+//   - Pointer event coordination with pointer capture and directional locking.
+//   - Rolling-window velocity calculation (px/ms) for natural inertia flicks.
+//   - Resistance / rubber-band calculation for out-of-bounds dragging.
+//   - Safe cleanup when elements disconnect.
+
+/**
+ * Calculate velocity from a rolling history of pointer positions.
+ * @param {Array<{ x: number, y: number, t: number }>} history
+ * @param {number} now
+ * @param {number} windowMs
+ * @returns {{ vx: number, vy: number }} in px/ms
+ */
+export function calculateVelocity(history, now = Date.now(), windowMs = 120) {
+  if (!history || history.length < 2) return { vx: 0, vy: 0 };
+  const cutoff = now - windowMs;
+  const recent = history.filter((p) => p.t >= cutoff);
+  if (recent.length < 2) return { vx: 0, vy: 0 };
+
+  const first = recent[0];
+  const last = recent[recent.length - 1];
+  const dt = Math.max(1, last.t - first.t);
+  return {
+    vx: (last.x - first.x) / dt,
+    vy: (last.y - first.y) / dt,
+  };
+}
+
+/**
+ * Apply logarithmic / exponential rubber-band damping.
+ * @param {number} delta Current displacement
+ * @param {number} factor Damping factor
+ * @returns {number} Damped displacement
+ */
+export function rubberBand(delta, factor = 0.25) {
+  return delta * factor;
+}
+
+/**
+ * createSwipeTracker(element, options)
+ *
+ * Tracks 1D or 2D drag gestures with directional locking and velocity calculation.
+ *
+ * Options:
+ *   - axis: 'x' | 'y' | 'both' (default 'both')
+ *   - threshold: minimum drag distance before locking (default 6)
+ *   - filter: (e) => boolean (return false to ignore pointerdown)
+ *   - onStart: ({ x, y, event }) => void
+ *   - onMove: ({ dx, dy, x, y, vx, vy, event }) => void
+ *   - onEnd: ({ dx, dy, vx, vy, event, cancelled }) => void
+ *
+ * Returns: { destroy() }
+ */
+export function createSwipeTracker(element, opts = {}) {
+  const {
+    axis = 'both',
+    threshold = 6,
+    filter = null,
+    onStart = null,
+    onMove = null,
+    onEnd = null,
+  } = opts;
+
+  let activePointerId = null;
+  let startX = 0;
+  let startY = 0;
+  let isTracking = false;
+  let isLocked = false;
+  let history = [];
+
+  const onPointerDown = (e) => {
+    if (activePointerId !== null) return;
+    if (e.button !== 0 && e.isPrimary === false) return;
+    if (typeof filter === 'function' && !filter(e)) return;
+
+    activePointerId = e.pointerId;
+    startX = e.clientX;
+    startY = e.clientY;
+    isTracking = true;
+    isLocked = false;
+    history = [{ x: e.clientX, y: e.clientY, t: Date.now() }];
+
+    element.addEventListener('pointermove', onPointerMove);
+    element.addEventListener('pointerup', onPointerUp);
+    element.addEventListener('pointercancel', onPointerCancel);
+  };
+
+  const onPointerMove = (e) => {
+    if (!isTracking || e.pointerId !== activePointerId) return;
+
+    const currentX = e.clientX;
+    const currentY = e.clientY;
+    const dx = currentX - startX;
+    const dy = currentY - startY;
+    const now = Date.now();
+
+    history.push({ x: currentX, y: currentY, t: now });
+    if (history.length > 20) history.shift();
+
+    if (!isLocked) {
+      const absX = Math.abs(dx);
+      const absY = Math.abs(dy);
+
+      if (axis === 'x') {
+        if (absY > absX && absY > threshold) {
+          // Vertical movement dominates -> cancel horizontal swipe
+          cleanupListeners();
+          return;
+        }
+        if (absX >= threshold) {
+          isLocked = true;
+          try { element.setPointerCapture(activePointerId); } catch {}
+          onStart?.({ x: currentX, y: currentY, event: e });
+        }
+      } else if (axis === 'y') {
+        if (absX > absY && absX > threshold) {
+          // Horizontal movement dominates -> cancel vertical swipe
+          cleanupListeners();
+          return;
+        }
+        if (absY >= threshold) {
+          isLocked = true;
+          try { element.setPointerCapture(activePointerId); } catch {}
+          onStart?.({ x: currentX, y: currentY, event: e });
+        }
+      } else {
+        if (absX >= threshold || absY >= threshold) {
+          isLocked = true;
+          try { element.setPointerCapture(activePointerId); } catch {}
+          onStart?.({ x: currentX, y: currentY, event: e });
+        }
+      }
+    }
+
+    if (isLocked) {
+      if (e.cancelable) e.preventDefault();
+      const { vx, vy } = calculateVelocity(history, now);
+      onMove?.({ dx, dy, x: currentX, y: currentY, vx, vy, event: e });
+    }
+  };
+
+  const onPointerUp = (e) => {
+    if (!isTracking || e.pointerId !== activePointerId) return;
+    const dx = e.clientX - startX;
+    const dy = e.clientY - startY;
+    const now = Date.now();
+    history.push({ x: e.clientX, y: e.clientY, t: now });
+    const { vx, vy } = calculateVelocity(history, now);
+    const wasLocked = isLocked;
+
+    cleanupListeners();
+
+    if (wasLocked) {
+      onEnd?.({ dx, dy, vx, vy, event: e, cancelled: false });
+    }
+  };
+
+  const onPointerCancel = (e) => {
+    if (!isTracking || e.pointerId !== activePointerId) return;
+    const dx = e.clientX - startX;
+    const dy = e.clientY - startY;
+    const now = Date.now();
+    const { vx, vy } = calculateVelocity(history, now);
+    const wasLocked = isLocked;
+
+    cleanupListeners();
+
+    if (wasLocked) {
+      onEnd?.({ dx, dy, vx, vy, event: e, cancelled: true });
+    }
+  };
+
+  const cleanupListeners = () => {
+    if (activePointerId !== null) {
+      try { element.releasePointerCapture(activePointerId); } catch {}
+    }
+    element.removeEventListener('pointermove', onPointerMove);
+    element.removeEventListener('pointerup', onPointerUp);
+    element.removeEventListener('pointercancel', onPointerCancel);
+    activePointerId = null;
+    isTracking = false;
+    isLocked = false;
+    history = [];
+  };
+
+  element.addEventListener('pointerdown', onPointerDown);
+
+  return {
+    destroy() {
+      cleanupListeners();
+      element.removeEventListener('pointerdown', onPointerDown);
+    },
+  };
+}

package/src/motion/index.js

@@ -2,3 +2,4 @@ export { animate, releaseFill, settled, duration, easing, fx, prefersReducedMoti
 export { presence } from './presence.js';
 export { withFlip } from './flip.js';
 export { ripple } from './ripple.js';
+export { createSwipeTracker, calculateVelocity, rubberBand } from './gesture.js';

package/types/elements.d.ts

@@ -60,6 +60,7 @@ declare global {
     'ui-step': HTMLElement;
     'ui-stepper': HTMLElement;
     'ui-surface': HTMLElement;
+    'ui-swipe-row': HTMLElement;
     'ui-switch': HTMLElement;
     'ui-tab': HTMLElement;
     'ui-tab-panel': HTMLElement;

package/types/index.d.ts

@@ -108,6 +108,26 @@ export function ripple(
   opts?: { disabled?: boolean | Signal<boolean> | (() => boolean); centered?: boolean }
 ): Element;
 
+export function createSwipeTracker(
+  el: Element,
+  opts?: {
+    axis?: 'x' | 'y' | 'both';
+    threshold?: number;
+    filter?: (e: PointerEvent) => boolean;
+    onStart?: (info: { x: number; y: number; event: PointerEvent }) => void;
+    onMove?: (info: { dx: number; dy: number; x: number; y: number; vx: number; vy: number; event: PointerEvent }) => void;
+    onEnd?: (info: { dx: number; dy: number; vx: number; vy: number; event: PointerEvent; cancelled: boolean }) => void;
+  }
+): { destroy: () => void };
+
+export function calculateVelocity(
+  history: Array<{ x: number; y: number; t: number }>,
+  now?: number,
+  windowMs?: number
+): { vx: number; vy: number };
+
+export function rubberBand(delta: number, factor?: number): number;
+
 export function position(
   panel: HTMLElement,
   anchor: Element,