@sveltia/ui 0.76.1 → 0.77.1

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Geometry behind the swipe-to-dismiss gesture of `<Drawer>`, kept apart from the component so the
+ * calculations can be tested without a rendered drawer.
+ */
+/**
+ * @typedef {object} SwipeSample
+ * @property {number} offset Distance the drawer has been dragged towards its edge, in pixels.
+ * @property {number} time Time of the sample in milliseconds, such as an event’s
+ * `timeStamp`.
+ */
+/**
+ * @typedef {object} SwipeState
+ * @property {number} pointerId ID of the pointer dragging the drawer.
+ * @property {'X' | 'Y'} axis Axis along which the drawer is dragged.
+ * @property {1 | -1} sign Sign of the direction towards the edge. See {@link getSwipeDirection}.
+ * @property {number} start Position along the axis where the drag has started, in pixels.
+ * @property {SwipeSample[]} samples Recent samples. See {@link addSwipeSample}.
+ */
+/**
+ * Portion of the drawer’s size it has to be dragged by to be dismissed on release.
+ */
+export const SWIPE_DISMISS_DISTANCE_RATIO: 0.3;
+/**
+ * Speed in pixels per millisecond towards the edge at which a release dismisses the drawer, however
+ * short the drag, so a quick flick is enough.
+ */
+export const SWIPE_DISMISS_VELOCITY: 0.5;
+/**
+ * Distance in pixels a flick has to cover to dismiss the drawer, so a finger that rolls a little
+ * while tapping the header doesn’t count as one.
+ */
+export const SWIPE_FLICK_MIN_DISTANCE: 16;
+/**
+ * Time window in milliseconds over which the speed of a drag is measured when it’s released.
+ */
+export const SWIPE_VELOCITY_WINDOW: 100;
+export function getSwipeDirection(position: "top" | "right" | "bottom" | "left", rtl: boolean): {
+    axis: "X" | "Y";
+    sign: 1 | -1;
+};
+export function getSwipeOffset(delta: number, sign: 1 | -1): number;
+export function addSwipeSample(samples: SwipeSample[], sample: SwipeSample): SwipeSample[];
+export function getSwipeVelocity(samples: SwipeSample[]): number;
+export function shouldDismissSwipe({ offset, size, velocity }: {
+    offset: number;
+    size: number;
+    velocity: number;
+}): boolean;
+export type SwipeSample = {
+    /**
+     * Distance the drawer has been dragged towards its edge, in pixels.
+     */
+    offset: number;
+    /**
+     * Time of the sample in milliseconds, such as an event’s
+     * `timeStamp`.
+     */
+    time: number;
+};
+export type SwipeState = {
+    /**
+     * ID of the pointer dragging the drawer.
+     */
+    pointerId: number;
+    /**
+     * Axis along which the drawer is dragged.
+     */
+    axis: "X" | "Y";
+    /**
+     * Sign of the direction towards the edge. See {@link getSwipeDirection}.
+     */
+    sign: 1 | -1;
+    /**
+     * Position along the axis where the drag has started, in pixels.
+     */
+    start: number;
+    /**
+     * Recent samples. See {@link addSwipeSample}.
+     */
+    samples: SwipeSample[];
+};

package/dist/components/drawer/drawer.js

@@ -0,0 +1,110 @@
+/**
+ * Geometry behind the swipe-to-dismiss gesture of `<Drawer>`, kept apart from the component so the
+ * calculations can be tested without a rendered drawer.
+ */
+
+/**
+ * @typedef {object} SwipeSample
+ * @property {number} offset Distance the drawer has been dragged towards its edge, in pixels.
+ * @property {number} time Time of the sample in milliseconds, such as an event’s
+ * `timeStamp`.
+ */
+
+/**
+ * @typedef {object} SwipeState
+ * @property {number} pointerId ID of the pointer dragging the drawer.
+ * @property {'X' | 'Y'} axis Axis along which the drawer is dragged.
+ * @property {1 | -1} sign Sign of the direction towards the edge. See {@link getSwipeDirection}.
+ * @property {number} start Position along the axis where the drag has started, in pixels.
+ * @property {SwipeSample[]} samples Recent samples. See {@link addSwipeSample}.
+ */
+
+/**
+ * Portion of the drawer’s size it has to be dragged by to be dismissed on release.
+ */
+export const SWIPE_DISMISS_DISTANCE_RATIO = 0.3;
+
+/**
+ * Speed in pixels per millisecond towards the edge at which a release dismisses the drawer, however
+ * short the drag, so a quick flick is enough.
+ */
+export const SWIPE_DISMISS_VELOCITY = 0.5;
+
+/**
+ * Distance in pixels a flick has to cover to dismiss the drawer, so a finger that rolls a little
+ * while tapping the header doesn’t count as one.
+ */
+export const SWIPE_FLICK_MIN_DISTANCE = 16;
+
+/**
+ * Time window in milliseconds over which the speed of a drag is measured when it’s released.
+ */
+export const SWIPE_VELOCITY_WINDOW = 100;
+
+/**
+ * Get the axis along which the drawer is swiped away, and the sign of the physical direction
+ * towards the edge it’s attached to.
+ * @param {'top' | 'right' | 'bottom' | 'left'} position Position of the drawer.
+ * @param {boolean} rtl Whether the layout is right-to-left, which mirrors the `left` and `right`
+ * positions: they’re logical, like the `inset-inline` properties they’re laid out with.
+ * @returns {{ axis: 'X' | 'Y', sign: 1 | -1 }} Axis, named as in `translateX()` and
+ * `translateY()`, and sign.
+ */
+export const getSwipeDirection = (position, rtl) => {
+  if (position === 'top' || position === 'bottom') {
+    return { axis: 'Y', sign: position === 'bottom' ? 1 : -1 };
+  }
+
+  return { axis: 'X', sign: (position === 'right') !== rtl ? 1 : -1 };
+};
+
+/**
+ * Get the distance the drawer has been dragged towards its edge. A drag the other way is ignored:
+ * the drawer can’t be pulled out further than it’s open.
+ * @param {number} delta Physical distance the pointer has moved along the axis, in pixels.
+ * @param {1 | -1} sign Sign of the direction towards the edge. See {@link getSwipeDirection}.
+ * @returns {number} Offset in pixels, `0` or more.
+ */
+export const getSwipeOffset = (delta, sign) => Math.max(0, delta * sign);
+
+/**
+ * Add a sample to the list the speed of a drag is measured with, dropping the ones that have left
+ * the measuring window.
+ * @param {SwipeSample[]} samples Previous samples, oldest first.
+ * @param {SwipeSample} sample New sample.
+ * @returns {SwipeSample[]} Samples within {@link SWIPE_VELOCITY_WINDOW}, oldest first.
+ */
+export const addSwipeSample = (samples, sample) => [
+  ...samples.filter(({ time }) => sample.time - time <= SWIPE_VELOCITY_WINDOW),
+  sample,
+];
+
+/**
+ * Get the speed of a drag towards the edge.
+ * @param {SwipeSample[]} samples Recent samples, oldest first. See {@link addSwipeSample}.
+ * @returns {number} Speed in pixels per millisecond, negative if the drag was heading back.
+ */
+export const getSwipeVelocity = (samples) => {
+  const first = samples[0];
+  const last = samples[samples.length - 1];
+
+  if (!first || !last || last.time <= first.time) {
+    return 0;
+  }
+
+  return (last.offset - first.offset) / (last.time - first.time);
+};
+
+/**
+ * Check whether a drag that has just been released should dismiss the drawer: it has been dragged
+ * far enough, or flicked towards its edge.
+ * @param {object} args Arguments.
+ * @param {number} args.offset Distance the drawer has been dragged towards its edge, in pixels.
+ * @param {number} args.size Size of the drawer along the axis, in pixels.
+ * @param {number} args.velocity Speed of the drag towards the edge, in pixels per millisecond.
+ * @returns {boolean} Result.
+ */
+export const shouldDismissSwipe = ({ offset, size, velocity }) =>
+  offset > 0 &&
+  (offset >= size * SWIPE_DISMISS_DISTANCE_RATIO ||
+    (offset >= SWIPE_FLICK_MIN_DISTANCE && velocity >= SWIPE_DISMISS_VELOCITY));

package/dist/components/drawer/drawer.svelte

@@ -6,14 +6,23 @@
 -->
 <script>
   import { _ } from '@sveltia/i18n';
+  import { untrack } from 'svelte';
   import Button from '../button/button.svelte';
   import Spacer from '../divider/spacer.svelte';
   import Icon from '../icon/icon.svelte';
   import Modal from '../util/modal.svelte';
+  import {
+    addSwipeSample,
+    getSwipeDirection,
+    getSwipeOffset,
+    getSwipeVelocity,
+    shouldDismissSwipe,
+  } from './drawer.js';
 
   /**
    * @import { Snippet } from 'svelte';
    * @import { ModalProps } from '../../typedefs';
+   * @import { SwipeState } from './drawer.js';
    */
 
   /**
@@ -29,6 +38,11 @@
    * @property {'small' | 'medium' | 'large' | 'x-large' | 'full'} [size] Width or height of the
    * drawer.
    * @property {'inside' | 'outside' | false} [showClose] Whether to show the Close button.
+   * @property {boolean} [swipeDismiss] Whether the drawer can be dismissed by dragging it towards
+   * the edge it’s attached to, as a bottom sheet on a mobile device is. The drag starts from the
+   * header, or from a grab handle shown on a top or bottom drawer; the main content and the footer
+   * are left alone, so they can be scrolled and interacted with. The Close button and the Escape
+   * key still work, as the gesture isn’t available to everyone.
    * @property {Snippet} [children] Primary slot content.
    * @property {Snippet} [header] Header slot content.
    * @property {Snippet} [headerExtra] Header extra slot content.
@@ -49,6 +63,7 @@
     position = 'right',
     size = 'small',
     showClose = 'outside',
+    swipeDismiss = false,
     children,
     header,
     headerExtra,
@@ -58,6 +73,23 @@
     /* eslint-enable prefer-const */
   } = $props();
 
+  /**
+   * Elements a drag can’t start from: the parts of the drawer that can scroll or hold text to
+   * select, and anything interactive.
+   */
+  const EXCLUDED_SWIPE_TARGETS = [
+    '.main',
+    '.footer',
+    '.extra-control',
+    'a',
+    'button',
+    'input',
+    'select',
+    'textarea',
+    '[contenteditable]',
+    '[tabindex]',
+  ].join(', ');
+
   /**
    * The ID of the drawer.
    * @type {string}
@@ -74,6 +106,109 @@
     position === 'right' || position === 'left' ? 'vertical' : 'horizontal',
   );
 
+  /**
+   * A reference to the content element.
+   * @type {HTMLElement | undefined}
+   */
+  let content = $state();
+  /**
+   * The drag in progress, if any. The object is replaced rather than updated, except for the
+   * samples, which only feed the speed calculation on release, so nothing needs to track them.
+   * @type {SwipeState | undefined}
+   */
+  let swipe = $state.raw();
+  /**
+   * Distance the drawer has been dragged towards its edge, in pixels.
+   * @type {number}
+   */
+  let swipeOffset = $state(0);
+
+  /**
+   * Handle the `pointerdown` event on the content, starting a drag from anywhere but the main
+   * content, the footer and the controls.
+   * @param {PointerEvent} event `pointerdown` event.
+   */
+  const onPointerDown = (event) => {
+    const { button, isPrimary, pointerId, target, clientX, clientY } = event;
+
+    if (!swipeDismiss || !content || swipe || button !== 0 || !isPrimary) {
+      return;
+    }
+
+    // The dialog around the content is focusable too, so only look inside the content
+    const excluded = /** @type {Element} */ (target).closest(EXCLUDED_SWIPE_TARGETS);
+
+    if (excluded && content.contains(excluded)) {
+      return;
+    }
+
+    const { axis, sign } = getSwipeDirection(position, content.matches(':dir(rtl)'));
+
+    swipe = { pointerId, axis, sign, start: axis === 'Y' ? clientY : clientX, samples: [] };
+    swipeOffset = 0;
+    content.setPointerCapture(pointerId);
+  };
+
+  /**
+   * Handle the `pointermove` event on the content while dragging.
+   * @param {PointerEvent} event `pointermove` event.
+   */
+  const onPointerMove = (event) => {
+    const { pointerId, clientX, clientY, timeStamp } = event;
+
+    if (!swipe || pointerId !== swipe.pointerId) {
+      return;
+    }
+
+    swipeOffset = getSwipeOffset(
+      (swipe.axis === 'Y' ? clientY : clientX) - swipe.start,
+      swipe.sign,
+    );
+    swipe.samples = addSwipeSample(swipe.samples, { offset: swipeOffset, time: timeStamp });
+  };
+
+  /**
+   * Handle the `pointerup` and `pointercancel` events on the content, ending the drag. The drawer
+   * is dismissed if it has been dragged far enough or flicked, or goes back into place otherwise.
+   * Either way, the transition picks up from where the drag has left the drawer.
+   * @param {PointerEvent} event `pointerup` or `pointercancel` event.
+   */
+  const onPointerUp = (event) => {
+    if (!swipe || !content || event.pointerId !== swipe.pointerId) {
+      return;
+    }
+
+    const { width, height } = content.getBoundingClientRect();
+    // The pointer may have been held still since it last moved, which ends any flick
+    const samples = addSwipeSample(swipe.samples, { offset: swipeOffset, time: event.timeStamp });
+
+    const dismiss =
+      event.type === 'pointerup' &&
+      shouldDismissSwipe({
+        offset: swipeOffset,
+        size: swipe.axis === 'Y' ? height : width,
+        velocity: getSwipeVelocity(samples),
+      });
+
+    swipe = undefined;
+    swipeOffset = 0;
+
+    if (dismiss) {
+      modal?.close('close');
+    }
+  };
+
+  $effect(() => {
+    if (!open) {
+      // The drawer can be closed in the middle of a drag, e.g. with the Escape key, and should
+      // then slide away rather than stay where the drag has left it
+      untrack(() => {
+        swipe = undefined;
+        swipeOffset = 0;
+      });
+    }
+  });
+
   /**
    * Accessible name for the `<dialog>`, resolved the same way as `<Dialog>`: the built-in header
    * renders the title in an element the dialog can point at; with a custom header the title is
@@ -93,7 +228,27 @@
   aria-labelledby={labelledby}
   showBackdrop
 >
-  <div role="none" class={['content', className, size, position, orientation]}>
+  <div
+    bind:this={content}
+    role="none"
+    class={[
+      'content',
+      className,
+      size,
+      position,
+      orientation,
+      { 'swipe-dismiss': swipeDismiss, swiping: !!swipe },
+    ]}
+    style:transform={swipe ? `translate${swipe.axis}(${swipe.sign * swipeOffset}px)` : undefined}
+    style:transition-duration={swipe ? '0s' : undefined}
+    onpointerdown={onPointerDown}
+    onpointermove={onPointerMove}
+    onpointerup={onPointerUp}
+    onpointercancel={onPointerUp}
+  >
+    {#if swipeDismiss && position === 'bottom'}
+      <div role="none" class="handle"></div>
+    {/if}
     <div role="none" class="extra-control">
       {#if showClose === 'outside'}
         <Button
@@ -157,6 +312,9 @@
         {@render footer?.()}
       </div>
     {/if}
+    {#if swipeDismiss && position === 'top'}
+      <div role="none" class="handle"></div>
+    {/if}
   </div>
 </Modal>
 
@@ -323,6 +481,30 @@
   max-height: 100dvh;
 }
 
+.content.swipe-dismiss > :global(:not(.main, .footer, .extra-control)) {
+  touch-action: none;
+  user-select: none;
+}
+.content.swipe-dismiss.swiping, .content.swipe-dismiss.swiping .handle {
+  cursor: grabbing;
+}
+
+.handle {
+  flex: none;
+  display: flex;
+  justify-content: center;
+  padding: 8px 0;
+  cursor: grab;
+}
+.handle::before {
+  content: "";
+  border-radius: 2px;
+  width: 32px;
+  height: 4px;
+  background-color: var(--sui-drawer-handle-color, var(--sui-secondary-foreground-color));
+  opacity: 0.5;
+}
+
 :is(.header, .footer) {
   display: flex;
   align-items: center;

package/dist/components/drawer/drawer.svelte.d.ts

@@ -41,6 +41,14 @@ declare const Drawer: import("svelte").Component<ModalProps & {
      * Whether to show the Close button.
      */
     showClose?: false | "inside" | "outside" | undefined;
+    /**
+     * Whether the drawer can be dismissed by dragging it towards
+     * the edge it’s attached to, as a bottom sheet on a mobile device is. The drag starts from the
+     * header, or from a grab handle shown on a top or bottom drawer; the main content and the footer
+     * are left alone, so they can be scrolled and interacted with. The Close button and the Escape
+     * key still work, as the gesture isn’t available to everyone.
+     */
+    swipeDismiss?: boolean | undefined;
     /**
      * Primary slot content.
      */
@@ -99,6 +107,14 @@ type Props = {
      * Whether to show the Close button.
      */
     showClose?: false | "inside" | "outside" | undefined;
+    /**
+     * Whether the drawer can be dismissed by dragging it towards
+     * the edge it’s attached to, as a bottom sheet on a mobile device is. The drag starts from the
+     * header, or from a grab handle shown on a top or bottom drawer; the main content and the footer
+     * are left alone, so they can be scrolled and interacted with. The Close button and the Escape
+     * key still work, as the gesture isn’t available to everyone.
+     */
+    swipeDismiss?: boolean | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/text-editor/shiki/version.d.ts

@@ -1,4 +1,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.76.1";
+export const UI_VERSION: "0.77.1";

package/dist/components/text-editor/shiki/version.js

@@ -3,4 +3,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = '0.76.1';
+export const UI_VERSION = '0.77.1';

package/dist/components/util/fonts.js

@@ -129,7 +129,8 @@ export const getFontFaceDescriptors = ({ weight, display, unicodeRange, sizeAdju
  * Call it before the `AppShell` component is mounted, so no font is fetched from the CDN first.
  * @param {Record<string, string>} urls URLs keyed with the Fontsource file name, e.g.
  * `source-sans-3-latin-wght-normal.woff2`. Any font omitted, or whose file fails to load, is still
- * loaded from the CDN; a failure is reported in the console.
+ * loaded from the CDN, unless the app has removed the `@font-face` rules for it; a failure is
+ * reported in the console.
  */
 export const setFontURLs = (urls) => {
   if (typeof document === 'undefined' || !document.fonts) {
@@ -153,13 +154,13 @@ export const setFontURLs = (urls) => {
 
     document.fonts.add(fontFace);
 
-    // The browser falls back to the `@font-face` rule for the CDN if the file can’t be loaded,
-    // which goes unnoticed otherwise. `loaded` settles once the font is used, without forcing a
-    // download
+    // The browser falls back to the `@font-face` rule for the CDN if the file can’t be loaded, or
+    // to another font if the app has removed the rule, which goes unnoticed otherwise. `loaded`
+    // settles once the font is used, without forcing a download
     fontFace.loaded.catch(() => {
       // eslint-disable-next-line no-console
       console.warn(
-        `Failed to load the ${font.family} font from ${url}. It’s loaded from the CDN instead.`,
+        `Failed to load the ${font.family} font from ${url}. A fallback font is used instead.`,
       );
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.76.1",
+  "version": "0.77.1",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -68,10 +68,10 @@
     "@sveltejs/adapter-auto": "^7.0.1",
     "@sveltejs/kit": "^2.70.3",
     "@sveltejs/package": "^2.5.8",
-    "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "@vitest/browser-playwright": "^5.0.1",
-    "@vitest/coverage-v8": "^5.0.1",
-    "cspell": "^10.3.3",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@vitest/browser-playwright": "^5.0.2",
+    "@vitest/coverage-v8": "^5.0.2",
+    "cspell": "^10.3.4",
     "eslint": "^9.39.5",
     "eslint-config-airbnb-extended": "^3.2.0",
     "eslint-config-prettier": "^10.1.8",
@@ -85,9 +85,9 @@
     "playwright": "^1.63.0",
     "postcss": "^8.5.28",
     "postcss-html": "^2.0.0",
-    "prettier": "^3.9.8",
+    "prettier": "^3.9.9",
     "prettier-plugin-svelte": "^4.1.1",
-    "rolldown": "^1.2.9",
+    "rolldown": "^1.2.11",
     "sass": "^1.105.0",
     "shiki": "^4.4.3",
     "stylelint": "^17.15.0",
@@ -97,8 +97,8 @@
     "svelte-check": "^4.7.6",
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",
-    "vite": "^8.3.0",
-    "vitest": "^5.0.1",
+    "vite": "^8.3.1",
+    "vitest": "^5.0.2",
     "vitest-browser-svelte": "^3.1.0"
   },
   "peerDependencies": {