@sveltia/ui 0.29.0 → 0.30.1

package/dist/components/calendar/calendar.svelte

@@ -4,7 +4,7 @@
 -->
 <script>
   import { _ } from 'svelte-i18n';
-  import { browser } from '$app/environment';
+  import { isRTL } from '../../services/i18n';
   import Button from '../button/button.svelte';
   import Divider from '../divider/divider.svelte';
   import Spacer from '../divider/spacer.svelte';
@@ -99,7 +99,7 @@
                   //
                 }}
               >
-                <Icon name={browser && document.dir === 'rtl' ? 'chevron_left' : 'chevron_right'} />
+                <Icon name={$isRTL ? 'chevron_left' : 'chevron_right'} />
               </Button>
             </div>
             <div role="none" class="grid">
@@ -143,7 +143,7 @@
         firstDay = firstDay;
       }}
     >
-      <Icon name={browser && document.dir === 'rtl' ? 'chevron_left' : 'chevron_right'} />
+      <Icon name={$isRTL ? 'chevron_left' : 'chevron_right'} />
     </Button>
   </div>
   <div role="listbox" class="grid">

package/dist/components/checkbox/checkbox.svelte

@@ -119,7 +119,6 @@
         }
 
         checked = indeterminate ? true : !checked;
-        onChange?.(new CustomEvent('Change', { detail: { checked } }));
 
         if (checked) {
           if (!group.includes(value)) {
@@ -128,6 +127,8 @@
         } else if (group.includes(value)) {
           group = group.filter((v) => v !== value);
         }
+
+        onChange?.(new CustomEvent('Change', { detail: { checked } }));
       }}
     >
       {#snippet startIcon()}

package/dist/components/menu/menu-item.svelte

@@ -5,7 +5,7 @@
 -->
 <script>
   import { onMount } from 'svelte';
-  import { browser } from '$app/environment';
+  import { isRTL } from '../../services/i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import Popup from '../util/popup.svelte';
@@ -129,7 +129,7 @@
           {#if chevronIcon}
             {@render chevronIcon()}
           {:else}
-            <Icon name={browser && document.dir === 'rtl' ? 'chevron_left' : 'chevron_right'} />
+            <Icon name={$isRTL ? 'chevron_left' : 'chevron_right'} />
           {/if}
         </span>
       {/if}

package/dist/index.d.ts

@@ -73,6 +73,7 @@ export { default as AppShell } from "./components/util/app-shell.svelte";
 export { default as EmptyState } from "./components/util/empty-state.svelte";
 export { default as Group } from "./components/util/group.svelte";
 export { default as Modal } from "./components/util/modal.svelte";
-export { initLocales };
 export * from "./typedefs";
 import { initLocales } from './services/i18n';
+import { isRTL } from './services/i18n';
+export { initLocales, isRTL };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { initLocales } from './services/i18n';
+import { initLocales, isRTL } from './services/i18n';
 
 initLocales();
 
@@ -77,7 +77,7 @@ export { default as AppShell } from './components/util/app-shell.svelte';
 export { default as EmptyState } from './components/util/empty-state.svelte';
 export { default as Group } from './components/util/group.svelte';
 export { default as Modal } from './components/util/modal.svelte';
-export { initLocales };
+export { initLocales, isRTL };
 
 // eslint-disable-next-line import/export
 export * from './typedefs';

package/dist/services/i18n.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Whether the current document is in RTL mode.
+ * @type {import('svelte/store').Writable<boolean>}
+ */
+export const isRTL: import("svelte/store").Writable<boolean>;
 export function initLocales({ fallbackLocale, initialLocale }?: {
     fallbackLocale?: string | undefined;
     initialLocale?: string | undefined;

package/dist/services/i18n.js

@@ -1,4 +1,11 @@
 import { addMessages, locale as appLocale, init } from 'svelte-i18n';
+import { writable } from 'svelte/store';
+
+/**
+ * Whether the current document is in RTL mode.
+ * @type {import('svelte/store').Writable<boolean>}
+ */
+export const isRTL = writable(false);
 
 /**
  * Load strings and initialize the locales.
@@ -44,4 +51,12 @@ if (!import.meta.env.SSR) {
   appLocale.subscribe((value) => {
     document.documentElement.dir = getDirection(value);
   });
+
+  // Update `isRTL` store based on the current document direction.
+  new MutationObserver(() => {
+    isRTL.set(document.dir === 'rtl');
+  }).observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['dir'],
+  });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.29.0",
+  "version": "0.30.1",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^6.1.1",
-    "@sveltejs/kit": "^2.43.8",
+    "@sveltejs/kit": "^2.44.0",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "cspell": "^9.2.1",
@@ -46,7 +46,7 @@
     "stylelint": "^16.25.0",
     "stylelint-config-recommended-scss": "^16.0.2",
     "stylelint-scss": "^6.12.1",
-    "svelte": "^5.39.8",
+    "svelte": "^5.39.9",
     "svelte-check": "^4.3.2",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",