@sveltia/ui 0.31.0 → 0.31.2

package/dist/components/slider/slider.svelte

@@ -9,6 +9,7 @@
 -->
 <script>
   import { onMount } from 'svelte';
+  import { isRTL } from '../../services/i18n.js';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -81,22 +82,23 @@
 
   /**
    * Move a thumb with mouse.
-   * @param {number} diff Distance from the original X position in pixels.
+   * @param {number} physicalX Physical X position in pixels from the left edge.
    */
-  const moveThumb = (diff) => {
-    if (diff < 0) {
-      diff = 0;
-    } else if (diff > barWidth) {
-      diff = barWidth;
-    }
+  const moveThumb = (physicalX) => {
+    // Convert physical position to logical position (always LTR)
+    // In RTL, left side (physicalX=0) maps to max value (logicalX=barWidth)
+    // In LTR, left side (physicalX=0) maps to min value (logicalX=0)
+    const logicalX = $isRTL ? barWidth - physicalX : physicalX;
 
-    const fromIndex = positionList.findLastIndex((s) => s <= diff);
-    const toIndex = positionList.findIndex((s) => diff <= s);
+    if (logicalX < 0 || logicalX > barWidth) {
+      return;
+    }
 
-    const index =
-      Math.abs(positionList[fromIndex] - diff) < Math.abs(positionList[toIndex] - diff)
-        ? fromIndex
-        : toIndex;
+    const fromIndex = positionList.findLastIndex((s) => s <= logicalX);
+    const toIndex = positionList.findIndex((s) => logicalX <= s);
+    const fromDiff = Math.abs(positionList[fromIndex] - logicalX);
+    const toDiff = Math.abs(positionList[toIndex] - logicalX);
+    const index = fromDiff < toDiff ? fromIndex : toIndex;
 
     if (
       sliderPositions[targetValueIndex] === positionList[index] ||
@@ -130,8 +132,11 @@
 
     const _value = multiThumb ? /** @type {[number, number]} */ (values)[valueIndex] : value;
     let index = -1;
+    // In RTL, ArrowLeft increases value, ArrowRight decreases value
+    const decreaseKeys = $isRTL ? ['ArrowDown', 'ArrowRight'] : ['ArrowDown', 'ArrowLeft'];
+    const increaseKeys = $isRTL ? ['ArrowUp', 'ArrowLeft'] : ['ArrowUp', 'ArrowRight'];
 
-    if (['ArrowDown', 'ArrowLeft'].includes(key)) {
+    if (decreaseKeys.includes(key)) {
       if (_value > min) {
         index = valueList.indexOf(_value) - 1;
       }
@@ -140,7 +145,7 @@
       event.stopPropagation();
     }
 
-    if (['ArrowUp', 'ArrowRight'].includes(key)) {
+    if (increaseKeys.includes(key)) {
       if (_value < max) {
         index = valueList.indexOf(_value) + 1;
       }
@@ -180,7 +185,11 @@
 
     event.stopPropagation();
 
-    moveThumb(startX + (screenX - startScreenX));
+    const screenDiff = screenX - startScreenX;
+    // Calculate new physical position from left edge
+    const physicalX = startX + screenDiff;
+
+    moveThumb(physicalX);
   };
 
   /**
@@ -198,7 +207,11 @@
 
     // Handle a click on the bars
     if (/** @type {HTMLElement} */ (event.target).matches('.base-bar, .slider-bar')) {
-      moveThumb(/** @type {any} */ (event).layerX);
+      const rect = /** @type {HTMLElement} */ (base).getBoundingClientRect();
+      // Get physical X position from left edge
+      const physicalX = /** @type {any} */ (event).clientX - rect.left;
+
+      moveThumb(physicalX);
     }
 
     // Reset everything
@@ -228,7 +241,11 @@
     event.stopPropagation();
 
     dragging = true;
-    startX = clientX - /** @type {HTMLElement} */ (base).getBoundingClientRect().x;
+
+    const rect = /** @type {HTMLElement} */ (base).getBoundingClientRect();
+
+    // Store physical X position from left edge (same in LTR and RTL)
+    startX = clientX - rect.left;
     startScreenX = screenX;
     targetPointerId = pointerId;
     targetValueIndex = valueIndex;

package/dist/components/text-editor/toolbar/code-language-switcher.svelte

@@ -89,12 +89,13 @@
     }
   }}
 >
-  <Option label={$_('_sui.text_editor.plain_text')} value="plain" />
+  <Option label={$_('_sui.text_editor.plain_text')} value="plain" dir="ltr" />
   {#each codeLanguages as { key, label, aliases } (key)}
     <Option
       {label}
       value={key}
       selected={key === selectedLanguage || aliases.includes(selectedLanguage)}
+      dir="ltr"
     />
   {/each}
 </Select>

package/dist/components/text-editor/toolbar/toolbar-wrapper.svelte

@@ -42,7 +42,7 @@
   top: 0;
   z-index: 1;
   display: flex;
-  gap: 8px;
+  gap: 4px;
   border-width: 1px 1px 0;
   border-style: solid;
   border-color: var(--sui-textbox-border-color);
@@ -50,7 +50,8 @@
   border-start-end-radius: var(--sui-textbox-border-radius);
   border-end-start-radius: 0;
   border-end-end-radius: 0;
-  padding: 8px;
+  padding: 0 4px;
+  height: 40px;
   background-color: var(--sui-tertiary-background-color);
 }
 @media (width < 768px) {

package/dist/services/group.svelte.js

@@ -4,6 +4,8 @@
 
 import { generateElementId } from '@sveltia/utils/element';
 import { sleep } from '@sveltia/utils/misc';
+import { get } from 'svelte/store';
+import { isRTL } from './i18n.js';
 import { getSelectedItemDetail } from './select.svelte';
 
 /**
@@ -11,7 +13,7 @@ import { getSelectedItemDetail } from './select.svelte';
  * apply basic normalization.
  * @param {string} value Original value.
  * @returns {string} Normalized value.
- * @todo Move this to @sveltia/utils.
+ * @todo Move this to `@sveltia/utils`.
  */
 const normalize = (value) => {
   value = value.trim();
@@ -428,6 +430,7 @@ class Group {
 
     if (this.grid) {
       const colCount = Math.floor(this.parent.clientWidth / activeMembers[0].clientWidth);
+      const _isRTL = get(isRTL);
 
       index = currentTarget ? allMembers.indexOf(currentTarget) : -1;
 
@@ -439,12 +442,13 @@ class Group {
         newTarget = allMembers[index + colCount];
       }
 
+      // In RTL, ArrowLeft moves right (next), ArrowRight moves left (previous)
       if (key === 'ArrowLeft' && index > 0) {
-        newTarget = allMembers[index - 1];
+        newTarget = allMembers[index + (_isRTL ? 1 : -1)];
       }
 
       if (key === 'ArrowRight' && index < allMembers.length - 1) {
-        newTarget = allMembers[index + 1];
+        newTarget = allMembers[index + (_isRTL ? -1 : 1)];
       }
 
       if (newTarget?.matches('[aria-disabled="true"], [aria-hidden="true"]')) {
@@ -453,7 +457,16 @@ class Group {
     } else {
       index = currentTarget ? activeMembers.indexOf(currentTarget) : -1;
 
-      if (key === (this.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp')) {
+      const _isRTL = get(isRTL);
+
+      // For horizontal orientation in RTL: ArrowLeft moves forward, ArrowRight moves backward
+      const prevKey =
+        this.orientation === 'horizontal' ? (_isRTL ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp';
+
+      const nextKey =
+        this.orientation === 'horizontal' ? (_isRTL ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown';
+
+      if (key === prevKey) {
         if (index > 0) {
           // Previous member
           newTarget = activeMembers[index - 1];
@@ -465,7 +478,7 @@ class Group {
         }
       }
 
-      if (key === (this.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown')) {
+      if (key === nextKey) {
         if (index < activeMembers.length - 1) {
           // Next member
           newTarget = activeMembers[index + 1];

package/dist/services/popup.svelte.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-nested-ternary */
-
 import { generateElementId } from '@sveltia/utils/element';
 import { sleep } from '@sveltia/utils/misc';
 import { on } from 'svelte/events';
@@ -82,6 +80,12 @@ class Popup {
         }
       }
 
+      if (position.endsWith('-right')) {
+        if (intersectionRect.right - contentWidth < 8) {
+          position = /** @type {PopupPosition} */ (position.replace('-right', '-left'));
+        }
+      }
+
       const top = position.startsWith('bottom-')
         ? `${Math.round(intersectionRect.bottom)}px`
         : position.endsWith('-top')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.31.0",
+  "version": "0.31.2",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -8,18 +8,18 @@
     "url": "github:sveltia/sveltia-ui"
   },
   "dependencies": {
-    "@lexical/code": "^0.36.2",
-    "@lexical/dragon": "^0.36.2",
-    "@lexical/history": "^0.36.2",
-    "@lexical/link": "^0.36.2",
-    "@lexical/list": "^0.36.2",
-    "@lexical/markdown": "^0.36.2",
-    "@lexical/rich-text": "^0.36.2",
-    "@lexical/selection": "^0.36.2",
-    "@lexical/table": "^0.36.2",
-    "@lexical/utils": "^0.36.2",
+    "@lexical/code": "^0.37.0",
+    "@lexical/dragon": "^0.37.0",
+    "@lexical/history": "^0.37.0",
+    "@lexical/link": "^0.37.0",
+    "@lexical/list": "^0.37.0",
+    "@lexical/markdown": "^0.37.0",
+    "@lexical/rich-text": "^0.37.0",
+    "@lexical/selection": "^0.37.0",
+    "@lexical/table": "^0.37.0",
+    "@lexical/utils": "^0.37.0",
     "@sveltia/utils": "^0.8.5",
-    "lexical": "^0.36.2",
+    "lexical": "^0.37.0",
     "prismjs": "^1.30.0",
     "svelte-i18n": "^4.0.1"
   },
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^6.1.1",
-    "@sveltejs/kit": "^2.46.2",
+    "@sveltejs/kit": "^2.46.5",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "cspell": "^9.2.1",
@@ -36,9 +36,9 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^57.2.1",
+    "eslint-plugin-jsdoc": "^61.1.1",
     "eslint-plugin-svelte": "^2.46.1",
-    "oxlint": "^1.20.0",
+    "oxlint": "^1.22.0",
     "postcss": "^8.5.6",
     "postcss-html": "^1.8.0",
     "prettier": "^3.6.2",
@@ -47,8 +47,8 @@
     "stylelint": "^16.25.0",
     "stylelint-config-recommended-scss": "^16.0.2",
     "stylelint-scss": "^6.12.1",
-    "svelte": "^5.39.10",
-    "svelte-check": "^4.3.2",
+    "svelte": "^5.39.12",
+    "svelte-check": "^4.3.3",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
     "vite": "^7.1.9",