@sveltia/ui 0.11.0 → 0.11.1

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

@@ -11,7 +11,7 @@ export default class Drawer extends SvelteComponent<{
     class?: string | undefined;
     title?: string | undefined;
     size?: "small" | "medium" | "large" | "x-large" | "full" | undefined;
-    position?: "top" | "right" | "bottom" | "left" | undefined;
+    position?: "top" | "left" | "right" | "bottom" | undefined;
     open?: boolean | undefined;
     lightDismiss?: boolean | undefined;
     keepContent?: boolean | undefined;
@@ -48,7 +48,7 @@ declare const __propDef: {
         class?: string | undefined;
         title?: string | undefined;
         size?: "small" | "medium" | "large" | "x-large" | "full" | undefined;
-        position?: "top" | "right" | "bottom" | "left" | undefined;
+        position?: "top" | "left" | "right" | "bottom" | undefined;
         open?: boolean | undefined;
         lightDismiss?: boolean | undefined;
         keepContent?: boolean | undefined;

package/package/components/slider/slider.svelte

@@ -172,6 +172,8 @@
       return;
     }
 
+    event.stopPropagation();
+
     moveThumb(startX + (screenX - startScreenX));
   };
 
@@ -186,6 +188,13 @@
       return;
     }
 
+    event.stopPropagation();
+
+    // Handle a click on the bars
+    if (/** @type {HTMLElement} */ (event.target).matches('.base-bar, .slider-bar')) {
+      moveThumb(/** @type {any} */ (event).layerX);
+    }
+
     // Reset everything
     dragging = false;
     startX = 0;
@@ -211,6 +220,8 @@
       return;
     }
 
+    event.stopPropagation();
+
     dragging = true;
     startX = clientX - /** @type {HTMLElement} */ (base).getBoundingClientRect().x;
     startScreenX = screenX;
@@ -222,18 +233,6 @@
     document.addEventListener('pointercancel', onPointerUp);
   };
 
-  /**
-   * Handle the `click` event fired on the slider.
-   * @param {MouseEvent} event - `click` event.
-   */
-  const onClick = (event) => {
-    if (disabled || readonly || multiThumb || dragging) {
-      return;
-    }
-
-    moveThumb(/** @type {any} */ (event).layerX);
-  };
-
   /**
    * Update the thumb position and fire the `change` event when the value is changed.
    */
@@ -303,14 +302,8 @@
   class:readonly
   hidden={hidden || undefined}
   {...$$restProps}
-  on:click|preventDefault|stopPropagation
 >
-  <div
-    role="none"
-    class="base"
-    bind:this={base}
-    on:click|preventDefault|stopPropagation={(event) => onClick(event)}
-  >
+  <div role="none" class="base" bind:this={base} on:pointerdown={(event) => onPointerDown(event)}>
     <div role="none" class="base-bar" />
     <div
       class="slider-bar"

package/package/components/slider/slider.svelte.d.ts

@@ -25,7 +25,6 @@ export default class Slider extends SvelteComponent<{
     sliderLabels?: [string, string] | undefined;
     optionLabels?: string[] | number[] | undefined;
 }, {
-    click: MouseEvent;
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -53,7 +52,6 @@ declare const __propDef: {
         optionLabels?: string[] | number[] | undefined;
     };
     events: {
-        click: MouseEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/services/events.js

@@ -14,7 +14,8 @@ export const isMac = () =>
  * @see https://w3c.github.io/aria/#aria-keyshortcuts
  */
 export const matchShortcuts = (event, shortcuts) => {
-  const { ctrlKey, metaKey, altKey, shiftKey, key } = event;
+  const { ctrlKey, metaKey, altKey, shiftKey, code } = event;
+  const key = code.replace(/^(?:Digit|Key)(.)$/, '$1');
 
   return shortcuts.split(/\s+/).some((shortcut) => {
     const keys = shortcut.split('+');
@@ -62,13 +63,14 @@ export const activateKeyShortcuts = (element, shortcuts = '') => {
    * @param {KeyboardEvent} event - `keydown` event.
    */
   const handler = (event) => {
-    const { disabled, offsetParent, offsetLeft, offsetTop } = element;
+    const { disabled, offsetParent } = element;
+    const { top, left } = element.getBoundingClientRect();
 
     // Check if the element is enabled, visible and clickable (not behind a modal dialog)
     if (
       !disabled &&
       !!offsetParent &&
-      document.elementsFromPoint(offsetLeft + 4, offsetTop + 4).includes(element) &&
+      document.elementsFromPoint(left + 4, top + 4).includes(element) &&
       matchShortcuts(event, /** @type {string} */ (platformKeyShortcuts))
     ) {
       event.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -23,27 +23,27 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "svelte": "^4.2.12"
+    "svelte": "^4.2.14"
   },
   "devDependencies": {
-    "@playwright/test": "^1.43.0",
+    "@playwright/test": "^1.43.1",
     "@sveltejs/adapter-auto": "^3.2.0",
     "@sveltejs/kit": "^2.5.5",
     "@sveltejs/package": "^2.3.1",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "cspell": "^8.6.1",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "cspell": "^8.7.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsdoc": "^48.2.3",
-    "eslint-plugin-svelte": "^2.35.1",
+    "eslint-plugin-svelte": "^2.37.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-html": "^1.6.0",
     "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.2",
-    "sass": "^1.74.1",
+    "prettier-plugin-svelte": "^3.2.3",
+    "sass": "^1.75.0",
     "stylelint": "^16.3.1",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-scss": "^6.2.1",
@@ -52,7 +52,7 @@
     "svelte-preprocess": "^5.1.3",
     "tslib": "^2.6.2",
     "vite": "^5.2.8",
-    "vitest": "^1.4.0"
+    "vitest": "^1.5.0"
   },
   "exports": {
     "./package.json": "./package.json",