@sveltia/ui 0.35.5 → 0.36.0

package/dist/services/group.svelte.js

@@ -1,13 +1,12 @@
-/**
- * @import { ActionReturn } from 'svelte/action';
- */
-
+import { isRTL } from '@sveltia/i18n';
 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.js';
 
+/**
+ * @import { Attachment } from 'svelte/attachments';
+ */
+
 /**
  * Diacritic characters regex for normalization. We use a regex instead of `Intl` APIs for better
  * performance, since `transliterate` is slow and we only need basic normalization.
@@ -89,7 +88,7 @@ const config = {
 /**
  * Implement keyboard and mouse interactions for a grouping composite widget.
  */
-class Group {
+export class Group {
   /**
    * Initialize a new `Group` instance.
    * @param {HTMLElement} parent Parent element.
@@ -107,6 +106,18 @@ class Group {
     this.parentGroupSelector = `[role="group"], [role="${this.role}"]`;
     this.clickToSelect = clickToSelect;
 
+    // eslint-disable-next-line jsdoc/require-description
+    /** @type {(event: MouseEvent) => void} */
+    this._onClick = (event) => {
+      this.onClick(event);
+    };
+
+    // eslint-disable-next-line jsdoc/require-description
+    /** @type {(event: KeyboardEvent) => void} */
+    this._onKeyDown = (event) => {
+      this.onKeyDown(event);
+    };
+
     const { orientation, childRoles, childSelectedAttr, focusChild, selectFirst } =
       config[this.role];
 
@@ -169,14 +180,8 @@ class Group {
       }
     });
 
-    parent.addEventListener('click', (event) => {
-      this.onClick(event);
-    });
-
-    parent.addEventListener('keydown', (event) => {
-      this.onKeyDown(event);
-    });
-
+    parent.addEventListener('click', this._onClick);
+    parent.addEventListener('keydown', this._onKeyDown);
     parent.dispatchEvent(new CustomEvent('Initialized'));
   }
 
@@ -434,7 +439,7 @@ class Group {
 
     if (this.grid) {
       const colCount = Math.floor(this.parent.clientWidth / activeMembers[0].clientWidth);
-      const _isRTL = get(isRTL);
+      const _isRTL = isRTL();
 
       index = currentTarget ? allMembers.indexOf(currentTarget) : -1;
 
@@ -461,7 +466,7 @@ class Group {
     } else {
       index = currentTarget ? activeMembers.indexOf(currentTarget) : -1;
 
-      const _isRTL = get(isRTL);
+      const _isRTL = isRTL();
 
       // For horizontal orientation in RTL: ArrowLeft moves forward, ArrowRight moves backward
       const prevKey =
@@ -500,6 +505,14 @@ class Group {
     }
   }
 
+  /**
+   * Clean up event listeners.
+   */
+  destroy() {
+    this.parent.removeEventListener('click', this._onClick);
+    this.parent.removeEventListener('keydown', this._onKeyDown);
+  }
+
   /**
    * Called whenever the params are updated. Filter the items based on the search terms.
    * @param {{ searchTerms: string }} params Updated params.
@@ -534,20 +547,22 @@ class Group {
 
 /**
  * Activate a new group.
- * @param {HTMLElement} parent Parent element.
- * @param {object} [params] Action params.
- * @returns {ActionReturn} Action.
+ * @param {object | (() => object)} [paramsOrGetter] Params object or a getter function for reactive
+ * params.
+ * @returns {Attachment} Attachment.
  */
-export const activateGroup = (parent, params) => {
-  const group = new Group(parent, params);
-
-  return {
-    /**
-     * Called whenever the params are updated.
-     * @param {any} newParams Updated params.
-     */
-    update(newParams) {
-      group.onUpdate(newParams);
-    },
+export const activateGroup = (paramsOrGetter) => (parent) => {
+  const isGetter = typeof paramsOrGetter === 'function';
+  const initialParams = isGetter ? paramsOrGetter() : paramsOrGetter;
+  const group = new Group(/** @type {HTMLElement} */ (parent), initialParams);
+
+  if (isGetter) {
+    $effect(() => {
+      group.onUpdate(paramsOrGetter());
+    });
+  }
+
+  return () => {
+    group.destroy();
   };
 };

package/dist/services/group.test.js

@@ -1,9 +1,8 @@
 /* eslint-disable jsdoc/require-jsdoc */
-/* eslint-disable jsdoc/require-description */
 
+import { locale } from '@sveltia/i18n';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { activateGroup, normalize } from './group.svelte.js';
-import { isRTL } from './i18n.js';
+import { activateGroup, Group, normalize } from './group.svelte.js';
 
 describe('normalize', () => {
   it('should trim whitespace', () => {
@@ -51,7 +50,7 @@ describe('Group - tablist', () => {
       return tab;
     });
     document.body.appendChild(tablist);
-    activateGroup(tablist);
+    activateGroup()(tablist);
     await vi.advanceTimersByTimeAsync(150);
   });
 
@@ -129,19 +128,19 @@ describe('Group - tablist', () => {
   });
 
   it('should navigate backward when pressing ArrowRight in RTL (branch 63 prevKey=ArrowRight)', () => {
-    isRTL.set(true);
+    locale.set('ar'); // RTL locale to set _isRTL=true in activate()
     // In RTL prevKey='ArrowRight'; press from tabs[2] → backward to tabs[1]
     tabs[2].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
     expect(tabs[1].getAttribute('aria-selected')).toBe('true');
-    isRTL.set(false);
+    locale.set('en'); // Reset locale to LTR
   });
 
   it('should navigate forward when pressing ArrowLeft in RTL (branch 65 nextKey=ArrowLeft)', () => {
-    isRTL.set(true);
+    locale.set('ar'); // RTL locale to set _isRTL=true in activate()
     // In RTL nextKey='ArrowLeft'; press from tabs[0] → forward to tabs[1]
     tabs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
     expect(tabs[1].getAttribute('aria-selected')).toBe('true');
-    isRTL.set(false);
+    locale.set('en'); // Reset locale to LTR
   });
 });
 
@@ -165,7 +164,7 @@ describe('Group - listbox', () => {
       return opt;
     });
     document.body.appendChild(listbox);
-    activateGroup(listbox);
+    activateGroup()(listbox);
     await vi.advanceTimersByTimeAsync(150);
   });
 
@@ -213,7 +212,7 @@ describe('Group - onUpdate (search filter)', () => {
   /** @type {HTMLElement[]} */
   let options;
   /** @type {any} */
-  let action;
+  let group;
 
   beforeEach(async () => {
     vi.useFakeTimers();
@@ -230,7 +229,7 @@ describe('Group - onUpdate (search filter)', () => {
       return opt;
     });
     document.body.appendChild(listbox);
-    action = activateGroup(listbox, { searchTerms: '' });
+    group = new Group(listbox);
     await vi.advanceTimersByTimeAsync(150);
   });
 
@@ -243,7 +242,7 @@ describe('Group - onUpdate (search filter)', () => {
     const filterEvents = /** @type {CustomEvent[]} */ ([]);
 
     listbox.addEventListener('Filter', (e) => filterEvents.push(/** @type {CustomEvent} */ (e)));
-    action.update({ searchTerms: 'an' }); // matches Banana
+    group.onUpdate({ searchTerms: 'an' }); // matches Banana
     expect(filterEvents.length).toBeGreaterThan(0);
     expect(filterEvents[filterEvents.length - 1].detail.matched).toBe(1);
     expect(filterEvents[filterEvents.length - 1].detail.total).toBe(3);
@@ -259,7 +258,7 @@ describe('Group - onUpdate (search filter)', () => {
         }
       });
     });
-    action.update({ searchTerms: 'apple' });
+    group.onUpdate({ searchTerms: 'apple' });
     // Banana and Cherry should be toggled hidden
     expect(toggledItems).toContain('Banana');
     expect(toggledItems).toContain('Cherry');
@@ -267,12 +266,12 @@ describe('Group - onUpdate (search filter)', () => {
   });
 
   it('should show all items when search terms are cleared', () => {
-    action.update({ searchTerms: 'apple' });
+    group.onUpdate({ searchTerms: 'apple' });
 
     const filterEvents = /** @type {CustomEvent[]} */ ([]);
 
     listbox.addEventListener('Filter', (e) => filterEvents.push(/** @type {CustomEvent} */ (e)));
-    action.update({ searchTerms: '' });
+    group.onUpdate({ searchTerms: '' });
     expect(filterEvents[filterEvents.length - 1].detail.matched).toBe(3);
   });
 });
@@ -297,7 +296,7 @@ describe('Group - tablist keyboard (Enter and Space)', () => {
       return tab;
     });
     document.body.appendChild(tablist);
-    activateGroup(tablist);
+    activateGroup()(tablist);
     await vi.advanceTimersByTimeAsync(150);
   });
 
@@ -354,7 +353,7 @@ describe('Group - tablist with aria-controls panels', () => {
       return tab;
     });
     document.body.appendChild(tablist);
-    activateGroup(tablist);
+    activateGroup()(tablist);
     // also covers scrollIntoView setTimeout(300) in activate()
     await vi.advanceTimersByTimeAsync(500);
   });
@@ -425,7 +424,7 @@ describe('Group - disabled and read-only', () => {
       return opt;
     });
     document.body.appendChild(listbox);
-    activateGroup(listbox);
+    activateGroup()(listbox);
     await vi.advanceTimersByTimeAsync(150);
   });
 
@@ -468,7 +467,7 @@ describe('Group - multiselect listbox', () => {
       return opt;
     });
     document.body.appendChild(listbox);
-    activateGroup(listbox);
+    activateGroup()(listbox);
     await vi.advanceTimersByTimeAsync(150);
   });
 
@@ -533,7 +532,7 @@ describe('Group - listbox keyboard navigation', () => {
       return opt;
     });
     document.body.appendChild(listbox);
-    activateGroup(listbox);
+    activateGroup()(listbox);
     await vi.advanceTimersByTimeAsync(150);
   });
 
@@ -610,7 +609,7 @@ describe('Group - menu with menuitemradio', () => {
       return item;
     });
     document.body.appendChild(menu);
-    activateGroup(menu);
+    activateGroup()(menu);
     await vi.advanceTimersByTimeAsync(150);
   });
 
@@ -658,7 +657,7 @@ describe('Group - menu with menuitemcheckbox', () => {
       return item;
     });
     document.body.appendChild(menu);
-    activateGroup(menu);
+    activateGroup()(menu);
     await vi.advanceTimersByTimeAsync(150);
   });
 
@@ -707,7 +706,7 @@ describe('Group - radiogroup keyboard navigation', () => {
       return radio;
     });
     document.body.appendChild(radiogroup);
-    activateGroup(radiogroup);
+    activateGroup()(radiogroup);
     await vi.advanceTimersByTimeAsync(150);
     radios[0].click(); // select first radio
   });
@@ -773,7 +772,7 @@ describe('Group - grid listbox navigation', () => {
         get: () => 100,
       });
     });
-    activateGroup(listbox);
+    activateGroup()(listbox);
     await vi.advanceTimersByTimeAsync(150);
     options[0].click(); // add .focused class to options[0]
   });
@@ -820,10 +819,10 @@ describe('Group - grid listbox navigation', () => {
     listbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
     expect(options[1].getAttribute('aria-selected')).toBe('true');
     // In RTL, ArrowLeft moves forward: index 1 + 1 = options[2]
-    isRTL.set(true);
+    locale.set('ar'); // RTL locale to set _isRTL=true in activate()
     listbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
     expect(options[2].getAttribute('aria-selected')).toBe('true');
-    isRTL.set(false);
+    locale.set('en'); // Reset locale to LTR
   });
 
   it('should navigate grid backward (index-1) on ArrowRight in RTL (branch 59)', () => {
@@ -831,10 +830,10 @@ describe('Group - grid listbox navigation', () => {
     listbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
     expect(options[1].getAttribute('aria-selected')).toBe('true');
     // In RTL, ArrowRight moves backward: index 1 - 1 = options[0]
-    isRTL.set(true);
+    locale.set('ar'); // RTL locale to set _isRTL=true in activate()
     listbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
     expect(options[0].getAttribute('aria-selected')).toBe('true');
-    isRTL.set(false);
+    locale.set('en'); // Reset locale to LTR
   });
 });
 
@@ -873,7 +872,7 @@ describe('Group - scrollIntoView catch fallback in activate()', () => {
       tablist.appendChild(tab);
     });
     document.body.appendChild(tablist);
-    activateGroup(tablist);
+    activateGroup()(tablist);
     // flush sleep(100) + setTimeout(300) in activate()
     await vi.advanceTimersByTimeAsync(500);
   });
@@ -936,7 +935,7 @@ describe('Group - scrollIntoView catch fallback in selectTarget()', () => {
       return tab;
     });
     document.body.appendChild(tablist);
-    activateGroup(tablist);
+    activateGroup()(tablist);
     await vi.advanceTimersByTimeAsync(500);
   });
 
@@ -977,7 +976,7 @@ describe('Group - tablist with pre-selected second tab (branch 7 defaultSelected
     // Pre-select the second tab before activation
     tbs[1].setAttribute('aria-selected', 'true');
     document.body.appendChild(tl);
-    activateGroup(tl);
+    activateGroup()(tl);
     await vi.advanceTimersByTimeAsync(150);
 
     // defaultSelected = tbs[1]; the ternary `defaultSelected ? element === defaultSelected : ...`
@@ -1020,7 +1019,7 @@ describe('Group - menu with nested radio groups (branch 16 cross-group filter)',
     menu.appendChild(group1);
     menu.appendChild(group2);
     document.body.appendChild(menu);
-    activateGroup(menu);
+    activateGroup()(menu);
     await vi.advanceTimersByTimeAsync(150);
 
     // Click radioA — radioB is in a different group, so line 267 early return filters it out
@@ -1047,7 +1046,7 @@ describe('Group - onClick with clickToSelect disabled (branch 39 !clickToSelect)
     opt.textContent = 'Option';
     lb.appendChild(opt);
     document.body.appendChild(lb);
-    activateGroup(lb, { clickToSelect: false });
+    activateGroup({ clickToSelect: false })(lb);
     await vi.advanceTimersByTimeAsync(150);
     opt.click();
     // !clickToSelect → early return in onClick → aria-selected stays false
@@ -1081,7 +1080,7 @@ describe('Group - grid listbox with no initial focus (branch 49 currentTarget?..
     gridOptions.forEach((opt) => {
       Object.defineProperty(opt, 'clientWidth', { configurable: true, get: () => 100 });
     });
-    activateGroup(gridListbox);
+    activateGroup()(gridListbox);
     await vi.advanceTimersByTimeAsync(150);
 
     // Press ArrowDown with no focused element → currentTarget=undefined → index=-1
@@ -1122,7 +1121,7 @@ describe('Group - onUpdate with querySelector(.label) and textContent fallbacks
     listbox.appendChild(opt2);
     document.body.appendChild(listbox);
 
-    const action = /** @type {any} */ (activateGroup(listbox, { searchTerms: '' }));
+    const group = new Group(listbox);
 
     await vi.advanceTimersByTimeAsync(150);
 
@@ -1134,7 +1133,7 @@ describe('Group - onUpdate with querySelector(.label) and textContent fallbacks
     });
 
     // Searching 'apple' matches opt1 (via .label span) but not opt2 (via textContent 'Banana')
-    action.update({ searchTerms: 'apple' });
+    group.onUpdate({ searchTerms: 'apple' });
     expect(filterDetail.matched).toBe(1);
     expect(filterDetail.total).toBe(2);
 
@@ -1142,3 +1141,75 @@ describe('Group - onUpdate with querySelector(.label) and textContent fallbacks
     vi.useRealTimers();
   });
 });
+
+describe('Group - destroy', () => {
+  it('should remove click and keydown listeners after destroy()', async () => {
+    vi.useFakeTimers();
+
+    const listbox = document.createElement('div');
+
+    listbox.setAttribute('role', 'listbox');
+
+    const opt = document.createElement('div');
+
+    opt.setAttribute('role', 'option');
+    opt.textContent = 'Option';
+    listbox.appendChild(opt);
+    document.body.appendChild(listbox);
+
+    const group = new Group(listbox);
+
+    await vi.advanceTimersByTimeAsync(150);
+
+    // Click selects before destroy
+    opt.click();
+    expect(opt.getAttribute('aria-selected')).toBe('true');
+
+    group.destroy();
+
+    // Reset and click again — listener should be gone
+    opt.setAttribute('aria-selected', 'false');
+    opt.click();
+    expect(opt.getAttribute('aria-selected')).toBe('false');
+
+    listbox.remove();
+    vi.useRealTimers();
+  });
+});
+
+describe('activateGroup - attachment cleanup', () => {
+  it('should return a cleanup function that calls destroy()', async () => {
+    vi.useFakeTimers();
+
+    const listbox = document.createElement('div');
+
+    listbox.setAttribute('role', 'listbox');
+
+    const opt = document.createElement('div');
+
+    opt.setAttribute('role', 'option');
+    opt.textContent = 'Option';
+    listbox.appendChild(opt);
+    document.body.appendChild(listbox);
+
+    const cleanup = activateGroup()(listbox);
+
+    await vi.advanceTimersByTimeAsync(150);
+
+    // Click selects before cleanup
+    opt.click();
+    expect(opt.getAttribute('aria-selected')).toBe('true');
+
+    // Run cleanup
+    expect(typeof cleanup).toBe('function');
+    /** @type {() => void} */ (cleanup)();
+
+    // Reset and click again — listener should be gone
+    opt.setAttribute('aria-selected', 'false');
+    opt.click();
+    expect(opt.getAttribute('aria-selected')).toBe('false');
+
+    listbox.remove();
+    vi.useRealTimers();
+  });
+});

package/dist/services/i18n.d.ts

@@ -1,15 +1,4 @@
-/**
- * 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;
 } | undefined): void;
-/**
- * List of RTL locales: Arabic, Persian, Hebrew, Urdu.
- * @internal
- */
-export const RTL_LOCALES: string[];
-export function getDirection(locale: string | null | undefined): "rtl" | "ltr";

package/dist/services/i18n.js

@@ -1,64 +1,28 @@
-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);
+import { addMessages, init } from '@sveltia/i18n';
+import { parse as parseYaml } from 'yaml';
 
 /**
  * Load strings and initialize the locales.
  * @param {object} [init] Initialize options.
  * @param {string} [init.fallbackLocale] Fallback locale.
  * @param {string} [init.initialLocale] Initial locale.
- * @see https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md
+ * @see https://github.com/sveltia/sveltia-i18n
  * @see https://vitejs.dev/guide/features.html#glob-import
  */
 export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}) => {
-  /** @type {{ [key: string]: { strings: object }}} */
-  const modules = import.meta.glob('../locales/*.js', { eager: true });
-
-  Object.entries(modules).forEach(([path, { strings }]) => {
-    const [, locale] = /** @type {string[]} */ (path.match(/([a-zA-Z-]+)\.js/));
-
-    // Add `_sui` suffix to avoid collision with app localization
-    addMessages(locale, /** @type {any} */ ({ _sui: strings }));
-  });
-
-  init({
-    fallbackLocale,
-    initialLocale,
+  const resources = import.meta.glob('../locales/*.yaml', {
+    eager: true,
+    query: '?raw',
+    import: 'default',
   });
-};
 
-/**
- * List of RTL locales: Arabic, Persian, Hebrew, Urdu.
- * @internal
- */
-export const RTL_LOCALES = ['ar', 'fa', 'he', 'ur'];
-
-/**
- * Get the text direction of the given locale.
- * @internal
- * @param {string | null | undefined} locale Locale code.
- * @returns {'rtl' | 'ltr'} Text direction.
- */
-export const getDirection = (locale) =>
-  locale && RTL_LOCALES.includes(locale.split('-')[0]) ? 'rtl' : 'ltr';
-
-if (!import.meta.env.SSR) {
-  // Set the `dir` attribute on the HTML element based on the current locale.
-  // @todo Move this to Sveltia UI and then Sveltia I18N
-  appLocale.subscribe((value) => {
-    document.documentElement.dir = getDirection(value);
+  Object.entries(resources).forEach(([path, resource]) => {
+    addMessages(
+      /** @type {string} */ (path.match(/.+\/(?<locale>.+?)\.yaml$/)?.groups?.locale),
+      // Add `_sui` suffix to avoid collision with app localization
+      { _sui: parseYaml(/** @type {string} */ (resource)) },
+    );
   });
 
-  // Update `isRTL` store based on the current document direction.
-  new MutationObserver(() => {
-    isRTL.set(document.dir === 'rtl');
-  }).observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ['dir'],
-  });
-}
+  init({ fallbackLocale, initialLocale });
+};

package/dist/services/i18n.test.js

@@ -1,61 +1,5 @@
-import { locale as appLocale } from 'svelte-i18n';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { getDirection, initLocales, RTL_LOCALES } from './i18n.js';
-
-describe('RTL_LOCALES', () => {
-  it('should include Arabic, Persian, Hebrew, and Urdu', () => {
-    expect(RTL_LOCALES).toContain('ar');
-    expect(RTL_LOCALES).toContain('fa');
-    expect(RTL_LOCALES).toContain('he');
-    expect(RTL_LOCALES).toContain('ur');
-  });
-});
-
-describe('getDirection', () => {
-  it('should return rtl for Arabic', () => {
-    expect(getDirection('ar')).toBe('rtl');
-  });
-
-  it('should return rtl for Persian', () => {
-    expect(getDirection('fa')).toBe('rtl');
-  });
-
-  it('should return rtl for Hebrew', () => {
-    expect(getDirection('he')).toBe('rtl');
-  });
-
-  it('should return rtl for Urdu', () => {
-    expect(getDirection('ur')).toBe('rtl');
-  });
-
-  it('should return rtl for a regional RTL locale like ar-SA', () => {
-    expect(getDirection('ar-SA')).toBe('rtl');
-  });
-
-  it('should return ltr for English', () => {
-    expect(getDirection('en')).toBe('ltr');
-  });
-
-  it('should return ltr for Japanese', () => {
-    expect(getDirection('ja')).toBe('ltr');
-  });
-
-  it('should return ltr for a regional LTR locale like en-US', () => {
-    expect(getDirection('en-US')).toBe('ltr');
-  });
-
-  it('should return ltr for null', () => {
-    expect(getDirection(null)).toBe('ltr');
-  });
-
-  it('should return ltr for undefined', () => {
-    expect(getDirection(undefined)).toBe('ltr');
-  });
-
-  it('should return ltr for an empty string', () => {
-    expect(getDirection('')).toBe('ltr');
-  });
-});
+import { describe, expect, it, vi } from 'vitest';
+import { initLocales } from './i18n.js';
 
 describe('initLocales', () => {
   it('should not throw when called with default options', () => {
@@ -72,35 +16,3 @@ describe('initLocales', () => {
     warnSpy.mockRestore();
   });
 });
-
-describe('i18n side effects', () => {
-  afterEach(async () => {
-    // Restore locale and document direction after each test
-    appLocale.set('en');
-    document.documentElement.removeAttribute('dir');
-    await Promise.resolve();
-  });
-
-  it('should update document.dir to rtl when locale is set to an RTL language', () => {
-    appLocale.set('ar');
-    expect(document.documentElement.dir).toBe('rtl');
-  });
-
-  it('should update document.dir back to ltr when locale is set to a LTR language', () => {
-    appLocale.set('ar');
-    appLocale.set('en');
-    expect(document.documentElement.dir).toBe('ltr');
-  });
-
-  it('should update the isRTL store when document dir attribute changes', async () => {
-    // Set dir via appLocale subscriber (which sets document.documentElement.dir synchronously)
-    // This triggers the MutationObserver set up in i18n.js (line 59)
-    appLocale.set('ar'); // → document.documentElement.dir = 'rtl' synchronously
-    // happy-dom MO callback fires via internal scheduling; give it time to run
-    await new Promise((r) => {
-      setTimeout(r, 50);
-    });
-    // Whether isRTL updated or not depends on MO timing, but document.dir is definitely set
-    expect(document.documentElement.dir).toBe('rtl');
-  });
-});