@sveltia/ui 0.35.2 → 0.35.4

package/dist/components/button/button.svelte

@@ -5,7 +5,7 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
 -->
 <script>
-  import { activateKeyShortcuts } from '../../services/events.svelte.js';
+  import { activateKeyShortcuts } from '@sveltia/utils/events';
   import TruncatedText from '../typography/truncated-text.svelte';
   import Popup from '../util/popup.svelte';
 

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

@@ -24,7 +24,7 @@ declare const Drawer: import("svelte").Component<ModalProps & {
     /**
      * Position of the drawer.
      */
-    position?: "top" | "left" | "right" | "bottom" | undefined;
+    position?: "top" | "right" | "bottom" | "left" | undefined;
     /**
      * Width or height of the
      * drawer.
@@ -75,7 +75,7 @@ type Props = {
     /**
      * Position of the drawer.
      */
-    position?: "top" | "left" | "right" | "bottom" | undefined;
+    position?: "top" | "right" | "bottom" | "left" | undefined;
     /**
      * Width or height of the
      * drawer.

package/dist/components/text-editor/core.js

@@ -4,9 +4,8 @@ import {
   $isCodeNode,
   CodeHighlightNode,
   CodeNode,
-  PrismTokenizer,
-  registerCodeHighlighting,
 } from '@lexical/code';
+import { PrismTokenizer, registerCodeHighlighting } from '@lexical/code-prism';
 import { registerDragonSupport } from '@lexical/dragon';
 import { HorizontalRuleNode } from '@lexical/extension';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
@@ -301,33 +300,35 @@ export const initEditor = ({
     COMMAND_PRIORITY_NORMAL,
   );
 
-  editor.registerUpdateListener(async () => {
+  editor.registerUpdateListener(() => {
     if (editor?.isComposing()) {
       return;
     }
 
-    await sleep(100);
+    (async () => {
+      await sleep(100);
 
-    editor.update(() => {
-      // Prevent CodeNode from being removed
-      if (isCodeEditor) {
-        const root = $getRoot();
-        const children = root.getChildren();
+      editor.update(() => {
+        // Prevent CodeNode from being removed
+        if (isCodeEditor) {
+          const root = $getRoot();
+          const children = root.getChildren();
 
-        if (children.length === 1 && !$isCodeNode(children[0])) {
-          children[0].remove();
-        }
+          if (children.length === 1 && !$isCodeNode(children[0])) {
+            children[0].remove();
+          }
 
-        if (children.length === 0) {
-          const node = $createCodeNode();
+          if (children.length === 0) {
+            const node = $createCodeNode();
 
-          node.setLanguage(defaultLanguage);
-          root.append(node);
+            node.setLanguage(defaultLanguage);
+            root.append(node);
+          }
         }
-      }
 
-      onEditorUpdate(editor);
-    });
+        onEditorUpdate(editor);
+      });
+    })();
   });
 
   // `editor.registerCommand(KEY_TAB_COMMAND, listener, priority)` doesn’t work for some reason, so

package/dist/components/text-editor/store.svelte.test.js

@@ -193,4 +193,37 @@ describe('createEditorStore', () => {
     expect(store.hasConverterError).toBe(true);
     consoleSpy.mockRestore();
   });
+
+  it('should pass empty string fallback to convertMarkdownToLexical when inputValue is empty (branch 2)', async () => {
+    const store = createEditorStore();
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    const mockEditor = /** @type {any} */ ({ getEditorState: () => ({ isEmpty: () => false }) });
+
+    store.editor = mockEditor;
+    store.initialized = true;
+    store.inputValue = 'hello'; // non-empty: inputValue || '' uses inputValue (count[0])
+    store.inputValue = ''; // empty: inputValue || '' uses '' fallback (count[1])
+    await new Promise((r) => {
+      setTimeout(r, 0);
+    });
+    expect(store.inputValue).toBe('');
+    consoleSpy.mockRestore();
+  });
+
+  it('should trigger convertMarkdown when isEmpty() is true even though value is unchanged (branch 6)', async () => {
+    const store = createEditorStore();
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    // isEmpty() returns true → triggers convertMarkdown even when hasChange = false
+    const mockEditor = /** @type {any} */ ({ getEditorState: () => ({ isEmpty: () => true }) });
+
+    store.editor = mockEditor;
+    store.initialized = true;
+    store.inputValue = 'hello'; // hasChange=true → count[1] of binary-expr at line 88
+    store.inputValue = 'hello'; // hasChange=false, isEmpty()=true → count[2] is hit
+    await new Promise((r) => {
+      setTimeout(r, 0);
+    });
+    expect(store.inputValue).toBe('hello');
+    consoleSpy.mockRestore();
+  });
 });

package/dist/components/text-editor/toolbar/insert-link-button.svelte

@@ -1,6 +1,7 @@
 <script>
   import { LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
   import { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
+  import { isMac, matchShortcuts } from '@sveltia/utils/events';
   import {
     COMMAND_PRIORITY_NORMAL,
     KEY_DOWN_COMMAND,
@@ -15,7 +16,6 @@
   } from 'lexical';
   import { getContext } from 'svelte';
   import { _ } from 'svelte-i18n';
-  import { isMac, matchShortcuts } from '../../../services/events.svelte.js';
   import Button from '../../button/button.svelte';
   import Dialog from '../../dialog/dialog.svelte';
   import Icon from '../../icon/icon.svelte';

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

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

package/dist/components/text-field/text-area.svelte

@@ -144,5 +144,10 @@ textarea[aria-invalid=true] {
 .clone {
   overflow: hidden;
   visibility: hidden;
+}
+
+textarea,
+.clone {
   white-space: pre-wrap;
+  word-break: break-all;
 }</style>

package/dist/components/text-field/text-input.svelte

@@ -5,7 +5,7 @@
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
-  import { activateKeyShortcuts } from '../../services/events.svelte.js';
+  import { activateKeyShortcuts } from '@sveltia/utils/events';
   import TruncatedText from '../typography/truncated-text.svelte';
 
   /**

package/dist/services/group.svelte.js

@@ -515,8 +515,7 @@ class Group {
           member.dataset.searchValue ??
             member.dataset.label ??
             member.querySelector('.label')?.textContent ??
-            member.textContent ??
-            '',
+            /** @type {string} */ (member.textContent),
         );
 
         const hidden = !_terms.every((term) => searchValue.includes(term));

package/dist/services/group.test.js

@@ -1,7 +1,9 @@
 /* eslint-disable jsdoc/require-jsdoc */
+/* eslint-disable jsdoc/require-description */
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { activateGroup, normalize } from './group.svelte.js';
+import { isRTL } from './i18n.js';
 
 describe('normalize', () => {
   it('should trim whitespace', () => {
@@ -125,6 +127,22 @@ describe('Group - tablist', () => {
     expect(tabs[1].tabIndex).toBe(0);
     expect(tabs[0].tabIndex).toBe(-1);
   });
+
+  it('should navigate backward when pressing ArrowRight in RTL (branch 63 prevKey=ArrowRight)', () => {
+    isRTL.set(true);
+    // 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);
+  });
+
+  it('should navigate forward when pressing ArrowLeft in RTL (branch 65 nextKey=ArrowLeft)', () => {
+    isRTL.set(true);
+    // 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);
+  });
 });
 
 describe('Group - listbox', () => {
@@ -167,6 +185,26 @@ describe('Group - listbox', () => {
       expect(opt.tabIndex).toBe(-1);
     });
   });
+
+  it('should select option when clicking on a child element inside it (target.closest branch 38)', () => {
+    const span = document.createElement('span');
+
+    span.textContent = 'Inner';
+    options[0].appendChild(span);
+    span.dispatchEvent(new MouseEvent('click', { button: 0, bubbles: true }));
+    expect(options[0].getAttribute('aria-selected')).toBe('true');
+    span.remove();
+  });
+
+  it('should not select option when right-clicked (button !== 0, branch 39 early return)', () => {
+    options[0].dispatchEvent(new MouseEvent('click', { button: 2, bubbles: true }));
+    expect(options[0].getAttribute('aria-selected')).toBe('false');
+  });
+
+  it('should not select when clicking the listbox container itself (!newTarget, branch 39)', () => {
+    listbox.dispatchEvent(new MouseEvent('click', { button: 0 }));
+    options.forEach((opt) => expect(opt.getAttribute('aria-selected')).toBe('false'));
+  });
 });
 
 describe('Group - onUpdate (search filter)', () => {
@@ -457,6 +495,22 @@ describe('Group - multiselect listbox', () => {
     expect(options[1].getAttribute('aria-selected')).toBe('false');
     expect(options[2].getAttribute('aria-selected')).toBe('true');
   });
+
+  it('should do nothing when Space pressed with no focused element (branch 47 false path)', () => {
+    // No navigation has occurred → no .focused element → currentTarget = undefined
+    listbox.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
+    options.forEach((opt) => expect(opt.getAttribute('aria-selected')).toBe('false'));
+  });
+
+  it('should select multiselect option via Space keydown (selectByKeydown, branch 22 count[3])', () => {
+    // ArrowDown gives options[0] the .focused class without selecting (multiselect ignores arrow)
+    listbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    expect(options[0].classList.contains('focused')).toBe(true);
+    expect(options[0].getAttribute('aria-selected')).toBe('false');
+    // Space selects via multiSelect && isTarget && selectByKeydown path
+    listbox.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
+    expect(options[0].getAttribute('aria-selected')).toBe('true');
+  });
 });
 
 describe('Group - listbox keyboard navigation', () => {
@@ -760,4 +814,331 @@ describe('Group - grid listbox navigation', () => {
     expect(options[0].getAttribute('aria-selected')).toBe('true');
     expect(options[3].getAttribute('aria-selected')).not.toBe('true');
   });
+
+  it('should navigate grid forward (index+1) on ArrowLeft in RTL (branch 56)', () => {
+    // Navigate to options[1] first
+    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);
+    listbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+    expect(options[2].getAttribute('aria-selected')).toBe('true');
+    isRTL.set(false);
+  });
+
+  it('should navigate grid backward (index-1) on ArrowRight in RTL (branch 59)', () => {
+    // Navigate to options[1]
+    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);
+    listbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    expect(options[0].getAttribute('aria-selected')).toBe('true');
+    isRTL.set(false);
+  });
+});
+
+describe('Group - scrollIntoView catch fallback in activate()', () => {
+  /** @type {HTMLElement} */
+  let tablist;
+  /** @type {HTMLElement[]} */
+  let panels;
+
+  beforeEach(async () => {
+    vi.useFakeTimers();
+    panels = ['panel-catch-a', 'panel-catch-b'].map((id) => {
+      const panel = document.createElement('div');
+
+      panel.id = id;
+      // Make scrollIntoView(options) throw but scrollIntoView(boolean) succeed
+
+      panel.scrollIntoView = (arg) => {
+        if (arg && typeof arg === 'object') {
+          throw new Error('not supported');
+        }
+      };
+
+      document.body.appendChild(panel);
+
+      return panel;
+    });
+    tablist = document.createElement('div');
+    tablist.setAttribute('role', 'tablist');
+    panels.forEach((panel, i) => {
+      const tab = document.createElement('div');
+
+      tab.setAttribute('role', 'tab');
+      tab.setAttribute('aria-controls', panel.id);
+      tab.textContent = `Tab ${i + 1}`;
+      tablist.appendChild(tab);
+    });
+    document.body.appendChild(tablist);
+    activateGroup(tablist);
+    // flush sleep(100) + setTimeout(300) in activate()
+    await vi.advanceTimersByTimeAsync(500);
+  });
+
+  afterEach(() => {
+    tablist.remove();
+    panels.forEach((p) => p.remove());
+    vi.useRealTimers();
+  });
+
+  it('should fall back to scrollIntoView(true) when options form throws during activate()', () => {
+    // If the catch branch executed without throwing, the panel is set up correctly
+    expect(panels[0].getAttribute('aria-hidden')).toBe('false');
+  });
+});
+
+describe('Group - scrollIntoView catch fallback in selectTarget()', () => {
+  /** @type {HTMLElement} */
+  let tablist;
+  /** @type {HTMLElement[]} */
+  let tabs;
+  /** @type {HTMLElement[]} */
+  let panels;
+
+  beforeEach(async () => {
+    vi.useFakeTimers();
+    panels = ['panel-sel-a', 'panel-sel-b'].map((id) => {
+      const panel = document.createElement('div');
+
+      panel.id = id;
+
+      panel.scrollIntoView = (arg) => {
+        if (arg && typeof arg === 'object') {
+          throw new Error('not supported');
+        }
+      };
+
+      document.body.appendChild(panel);
+
+      return panel;
+    });
+    tablist = document.createElement('div');
+    tablist.setAttribute('role', 'tablist');
+    tabs = panels.map((panel, i) => {
+      const tab = document.createElement('div');
+
+      tab.setAttribute('role', 'tab');
+      tab.setAttribute('aria-controls', panel.id);
+      tab.textContent = `Tab ${i + 1}`;
+      // Also override the tab element's scrollIntoView to throw on options form
+
+      tab.scrollIntoView = (arg) => {
+        if (arg && typeof arg === 'object') {
+          throw new Error('not supported');
+        }
+      };
+
+      tablist.appendChild(tab);
+
+      return tab;
+    });
+    document.body.appendChild(tablist);
+    activateGroup(tablist);
+    await vi.advanceTimersByTimeAsync(500);
+  });
+
+  afterEach(() => {
+    tablist.remove();
+    panels.forEach((p) => p.remove());
+    vi.useRealTimers();
+  });
+
+  it('should fall back to scrollIntoView(true) on controlTarget and element when options form throws', async () => {
+    // Switch to the second tab to trigger selectTarget() catch branches
+    tabs[1].click();
+    await vi.advanceTimersByTimeAsync(400);
+    // Verify the panel switched correctly despite the scrollIntoView error
+    expect(panels[1].getAttribute('aria-hidden')).toBe('false');
+    expect(panels[0].getAttribute('aria-hidden')).toBe('true');
+  });
+});
+
+describe('Group - tablist with pre-selected second tab (branch 7 defaultSelected)', () => {
+  it('should preserve pre-selected tab and use defaultSelected ternary path', async () => {
+    vi.useFakeTimers();
+
+    const tl = document.createElement('div');
+
+    tl.setAttribute('role', 'tablist');
+
+    const tbs = ['Tab 1', 'Tab 2', 'Tab 3'].map((label) => {
+      const tab = document.createElement('div');
+
+      tab.setAttribute('role', 'tab');
+      tab.textContent = label;
+      tl.appendChild(tab);
+
+      return tab;
+    });
+
+    // Pre-select the second tab before activation
+    tbs[1].setAttribute('aria-selected', 'true');
+    document.body.appendChild(tl);
+    activateGroup(tl);
+    await vi.advanceTimersByTimeAsync(150);
+
+    // defaultSelected = tbs[1]; the ternary `defaultSelected ? element === defaultSelected : ...`
+    // evaluates to true for tbs[1] → branch 7 count[0] is hit
+    expect(tbs[1].getAttribute('aria-selected')).toBe('true');
+    expect(tbs[0].getAttribute('aria-selected')).toBe('false');
+    tl.remove();
+    vi.useRealTimers();
+  });
+});
+
+describe('Group - menu with nested radio groups (branch 16 cross-group filter)', () => {
+  it('should not affect radio items in a different group when selecting one', async () => {
+    vi.useFakeTimers();
+
+    const menu = document.createElement('div');
+
+    menu.setAttribute('role', 'menu');
+
+    const group1 = document.createElement('div');
+
+    group1.setAttribute('role', 'group');
+
+    const radioA = document.createElement('div');
+
+    radioA.setAttribute('role', 'menuitemradio');
+    radioA.textContent = 'A';
+    group1.appendChild(radioA);
+
+    const group2 = document.createElement('div');
+
+    group2.setAttribute('role', 'group');
+
+    const radioB = document.createElement('div');
+
+    radioB.setAttribute('role', 'menuitemradio');
+    radioB.textContent = 'B';
+    group2.appendChild(radioB);
+
+    menu.appendChild(group1);
+    menu.appendChild(group2);
+    document.body.appendChild(menu);
+    activateGroup(menu);
+    await vi.advanceTimersByTimeAsync(150);
+
+    // Click radioA — radioB is in a different group, so line 267 early return filters it out
+    radioA.click();
+    expect(radioA.getAttribute('aria-checked')).toBe('true');
+    // radioB was skipped (early return at line 267) — remains unaffected
+    expect(radioB.getAttribute('aria-checked')).toBe('false');
+    menu.remove();
+    vi.useRealTimers();
+  });
+});
+
+describe('Group - onClick with clickToSelect disabled (branch 39 !clickToSelect)', () => {
+  it('should not select option when clickToSelect is false', async () => {
+    vi.useFakeTimers();
+
+    const lb = document.createElement('div');
+
+    lb.setAttribute('role', 'listbox');
+
+    const opt = document.createElement('div');
+
+    opt.setAttribute('role', 'option');
+    opt.textContent = 'Option';
+    lb.appendChild(opt);
+    document.body.appendChild(lb);
+    activateGroup(lb, { clickToSelect: false });
+    await vi.advanceTimersByTimeAsync(150);
+    opt.click();
+    // !clickToSelect → early return in onClick → aria-selected stays false
+    expect(opt.getAttribute('aria-selected')).toBe('false');
+    lb.remove();
+    vi.useRealTimers();
+  });
+});
+
+describe('Group - grid listbox with no initial focus (branch 49 currentTarget?...: -1)', () => {
+  it('should use index -1 as fallback when no item is focused in grid', async () => {
+    vi.useFakeTimers();
+
+    const gridListbox = document.createElement('div');
+
+    gridListbox.setAttribute('role', 'listbox');
+    gridListbox.classList.add('grid');
+
+    const gridOptions = Array.from({ length: 6 }, (_, i) => {
+      const opt = document.createElement('div');
+
+      opt.setAttribute('role', 'option');
+      opt.textContent = `Item ${i + 1}`;
+      gridListbox.appendChild(opt);
+
+      return opt;
+    });
+
+    document.body.appendChild(gridListbox);
+    Object.defineProperty(gridListbox, 'clientWidth', { configurable: true, get: () => 300 });
+    gridOptions.forEach((opt) => {
+      Object.defineProperty(opt, 'clientWidth', { configurable: true, get: () => 100 });
+    });
+    activateGroup(gridListbox);
+    await vi.advanceTimersByTimeAsync(150);
+
+    // Press ArrowDown with no focused element → currentTarget=undefined → index=-1
+    // -1 + colCount(3) = 2 → gridOptions[2]
+    gridListbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    expect(gridOptions[2].getAttribute('aria-selected')).toBe('true');
+    gridListbox.remove();
+    vi.useRealTimers();
+  });
+});
+
+describe('Group - onUpdate with querySelector(.label) and textContent fallbacks (branch 75)', () => {
+  it('should use .label child textContent and plain textContent as search sources', async () => {
+    vi.useFakeTimers();
+
+    const listbox = document.createElement('div');
+
+    listbox.setAttribute('role', 'listbox');
+
+    // opt1: has .label span child, no dataset attrs → querySelector('.label').textContent path
+    const opt1 = document.createElement('div');
+
+    opt1.setAttribute('role', 'option');
+
+    const labelSpan = document.createElement('span');
+
+    labelSpan.className = 'label';
+    labelSpan.textContent = 'Apple';
+    opt1.appendChild(labelSpan);
+
+    // opt2: plain textContent only, no dataset, no .label child → member.textContent path
+    const opt2 = document.createElement('div');
+
+    opt2.setAttribute('role', 'option');
+    opt2.textContent = 'Banana';
+
+    listbox.appendChild(opt1);
+    listbox.appendChild(opt2);
+    document.body.appendChild(listbox);
+
+    const action = /** @type {any} */ (activateGroup(listbox, { searchTerms: '' }));
+
+    await vi.advanceTimersByTimeAsync(150);
+
+    /** @type {any} */
+    let filterDetail = null;
+
+    listbox.addEventListener('Filter', (e) => {
+      filterDetail = /** @type {any} */ (e).detail;
+    });
+
+    // Searching 'apple' matches opt1 (via .label span) but not opt2 (via textContent 'Banana')
+    action.update({ searchTerms: 'apple' });
+    expect(filterDetail.matched).toBe(1);
+    expect(filterDetail.total).toBe(2);
+
+    listbox.remove();
+    vi.useRealTimers();
+  });
 });

package/dist/services/popup.test.js

@@ -123,6 +123,29 @@ describe('Popup', () => {
     expect(get(instance.open)).toBe(false);
   });
 
+  it('should not close popup when clicking a non-menuitem element inside it (branch 35 false)', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+    const div = document.createElement('div');
+
+    popup.appendChild(div);
+    anchor.click(); // open
+    div.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    // div has no role → neither menuitem nor popup backdrop → popup stays open
+    expect(get(instance.open)).toBe(true);
+    div.remove();
+  });
+
+  it('should not close popup on Escape with modifier key held (branch 38 false)', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.click(); // open
+    popup.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Escape', shiftKey: true, bubbles: false }),
+    );
+    // hasModifier=true → condition false → popup stays open
+    expect(get(instance.open)).toBe(true);
+  });
+
   it('should toggle open to true on Enter keydown on anchor', () => {
     const instance = activatePopup(anchor, popup, 'bottom-left');
 
@@ -450,7 +473,7 @@ describe('Popup - IntersectionObserver position callback (lines 35-132)', () =>
   });
 
   it('should normalize RTL position when document.dir is rtl', () => {
-    document.documentElement.setAttribute('dir', 'rtl');
+    Object.defineProperty(document, 'dir', { get: () => 'rtl', configurable: true });
 
     const instance = activatePopup(anchor, popup, 'bottom-left');
 
@@ -459,7 +482,93 @@ describe('Popup - IntersectionObserver position callback (lines 35-132)', () =>
     const style = get(instance.style);
 
     expect(style.inset).not.toBeUndefined();
-    document.documentElement.removeAttribute('dir');
+    Reflect.deleteProperty(document, 'dir');
+  });
+
+  it('should normalize bottom-right to bottom-left in RTL (endsWith -right branch)', () => {
+    Object.defineProperty(document, 'dir', { get: () => 'rtl', configurable: true });
+
+    const instance = activatePopup(anchor, popup, 'bottom-right');
+
+    ioCallbacks[0]([makeEntry()]);
+
+    const style = get(instance.style);
+
+    // After RTL normalization bottom-right → bottom-left; inset should be computed
+    expect(style.inset).not.toBeUndefined();
+    Reflect.deleteProperty(document, 'dir');
+  });
+
+  it('should normalize left-top to right-top in RTL (startsWith left- branch)', () => {
+    Object.defineProperty(document, 'dir', { get: () => 'rtl', configurable: true });
+
+    const instance = activatePopup(anchor, popup, 'left-top');
+
+    ioCallbacks[0]([makeEntry()]);
+
+    const style = get(instance.style);
+
+    // After RTL normalization left-top → right-top; inset should be computed
+    expect(style.inset).not.toBeUndefined();
+    Reflect.deleteProperty(document, 'dir');
+  });
+
+  it('should normalize right-top to left-top in RTL (startsWith right- branch)', () => {
+    Object.defineProperty(document, 'dir', { get: () => 'rtl', configurable: true });
+
+    const instance = activatePopup(anchor, popup, 'right-top');
+
+    ioCallbacks[0]([makeEntry()]);
+
+    const style = get(instance.style);
+
+    // After RTL normalization right-top → left-top; inset should be computed
+    expect(style.inset).not.toBeUndefined();
+    Reflect.deleteProperty(document, 'dir');
+  });
+
+  it('should set height to bottomMargin when content overflows bottom but top is not better', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    // bottomMargin = 500 - 400 - 8 = 92; topMargin = 50 - 8 = 42; topMargin < bottomMargin
+    // so the else branch runs: height = bottomMargin (92px)
+    Object.defineProperty(content, 'scrollHeight', { configurable: true, get: () => 200 });
+    ioCallbacks[0]([makeEntry({ top: 50, bottom: 400, vw: 800, vh: 500 })]);
+
+    const style = get(instance.style);
+
+    expect(style.height).toBe('92px');
+  });
+
+  it('should compute bottom from rootBounds.height - intersectionRect.bottom for -bottom position (branch 19)', () => {
+    // 'right-bottom' ends with '-bottom' → bottom = Math.round(vh - intersectionRect.bottom)
+    const instance = activatePopup(anchor, popup, 'right-bottom');
+
+    // default: top=100, bottom=150, left=50, right=300, vh=600
+    // bottom = Math.round(600 - 150) = 450
+    ioCallbacks[0]([makeEntry()]);
+
+    const style = get(instance.style);
+
+    expect(style.inset).toContain('450px');
+  });
+
+  it('should not update style when intersection callback fires with identical geometry (branch 25)', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+    const entry = makeEntry();
+
+    // First call — style is updated (inset differs from initial empty object)
+    ioCallbacks[0]([entry]);
+
+    const styleBefore = get(instance.style);
+
+    // Second call with same entry — all comparisons are equal → style.set not called again
+    ioCallbacks[0]([entry]);
+
+    const styleAfter = get(instance.style);
+
+    expect(styleAfter.inset).toBe(styleBefore.inset);
+    expect(styleAfter.zIndex).toBe(styleBefore.zIndex);
   });
 });
 describe('Popup - ResizeObserver callback (lines 223-224)', () => {

package/dist/typedefs.d.ts

@@ -10,7 +10,7 @@ export type ButtonProps = {
     /**
      * The `type` attribute on the `<button>` element.
      */
-    type?: "reset" | "submit" | "button" | undefined;
+    type?: "button" | "submit" | "reset" | undefined;
     /**
      * The `role` attribute on the `<button>` element.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.35.2",
+  "version": "0.35.4",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -8,19 +8,20 @@
     "url": "github:sveltia/sveltia-ui"
   },
   "dependencies": {
-    "@lexical/code": "^0.41.0",
-    "@lexical/dragon": "^0.41.0",
-    "@lexical/extension": "^0.41.0",
-    "@lexical/history": "^0.41.0",
-    "@lexical/link": "^0.41.0",
-    "@lexical/list": "^0.41.0",
-    "@lexical/markdown": "^0.41.0",
-    "@lexical/rich-text": "^0.41.0",
-    "@lexical/selection": "^0.41.0",
-    "@lexical/table": "^0.41.0",
-    "@lexical/utils": "^0.41.0",
-    "@sveltia/utils": "^0.8.6",
-    "lexical": "^0.41.0",
+    "@lexical/code": "^0.42.0",
+    "@lexical/code-prism": "^0.42.0",
+    "@lexical/dragon": "^0.42.0",
+    "@lexical/extension": "^0.42.0",
+    "@lexical/history": "^0.42.0",
+    "@lexical/link": "^0.42.0",
+    "@lexical/list": "^0.42.0",
+    "@lexical/markdown": "^0.42.0",
+    "@lexical/rich-text": "^0.42.0",
+    "@lexical/selection": "^0.42.0",
+    "@lexical/table": "^0.42.0",
+    "@lexical/utils": "^0.42.0",
+    "@sveltia/utils": "^0.9.1",
+    "lexical": "^0.42.0",
     "prismjs": "^1.30.0",
     "svelte-i18n": "^4.0.1"
   },
@@ -47,14 +48,14 @@
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.5.1",
     "sass": "^1.98.0",
-    "stylelint": "^17.4.0",
+    "stylelint": "^17.5.0",
     "stylelint-config-recommended-scss": "^17.0.0",
     "stylelint-scss": "^7.0.0",
     "svelte": "^5.54.0",
     "svelte-check": "^4.4.5",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^8.0.0",
+    "vite": "^8.0.1",
     "vitest": "^4.1.0"
   },
   "exports": {
@@ -94,7 +95,7 @@
     "check:oxlint": "oxlint .",
     "check:stylelint": "stylelint '**/*.{css,scss,svelte}'",
     "test": "vitest run",
-    "test:coverage": "vitest --coverage",
+    "test:coverage": "vitest run --coverage",
     "test:watch": "vitest"
   }
 }

package/dist/services/events.svelte.d.ts

@@ -1,4 +0,0 @@
-export function isMac(): boolean;
-export function matchShortcuts(event: KeyboardEvent, shortcuts: string): boolean;
-export function activateKeyShortcuts(element: (HTMLInputElement | HTMLButtonElement), shortcuts?: string | undefined): ActionReturn;
-import type { ActionReturn } from 'svelte/action';

package/dist/services/events.svelte.js

@@ -1,193 +0,0 @@
-/**
- * @import { ActionReturn } from 'svelte/action';
- */
-
-/** @type {boolean | undefined} */
-let _isMac;
-
-/**
- * Check if the user agent is macOS.
- * @returns {boolean} Result.
- */
-export const isMac = () => {
-  _isMac ??=
-    /** @type {any} */ (navigator).userAgentData?.platform === 'macOS' ||
-    navigator.platform.startsWith('Mac');
-
-  return _isMac;
-};
-
-const MODIFIER_KEYS = ['Ctrl', 'Meta', 'Alt', 'Shift'];
-const CODE_RE = /^(?:Digit|Key)(.)$/;
-
-/**
- * Whether the event matches the given keyboard shortcuts.
- * @param {KeyboardEvent} event `keydown` or `keypress` event.
- * @param {string} shortcuts Keyboard shortcuts like `A` or `Ctrl+S`.
- * @returns {boolean} Result.
- * @see https://w3c.github.io/aria/#aria-keyshortcuts
- */
-export const matchShortcuts = (event, shortcuts) => {
-  const { ctrlKey, metaKey, altKey, shiftKey, code } = event;
-
-  // The `code` property can be `undefined` in some cases
-  if (!code) {
-    return false;
-  }
-
-  const key = code.replace(CODE_RE, '$1');
-
-  return shortcuts.split(/\s+/).some((shortcut) => {
-    const keys = shortcut.split('+');
-
-    // Check if required modifier keys are pressed
-    if (
-      (keys.includes('Ctrl') && !ctrlKey) ||
-      (keys.includes('Meta') && !metaKey) ||
-      (keys.includes('Alt') && !altKey) ||
-      (keys.includes('Shift') && !shiftKey)
-    ) {
-      return false;
-    }
-
-    // Check if unnecessary modifier keys are not pressed
-    if (
-      (!keys.includes('Ctrl') && ctrlKey) ||
-      (!keys.includes('Meta') && metaKey) ||
-      (!keys.includes('Alt') && altKey) ||
-      (!keys.includes('Shift') && shiftKey)
-    ) {
-      return false;
-    }
-
-    return keys
-      .filter((_key) => !MODIFIER_KEYS.includes(_key))
-      .every((_key) => _key.toUpperCase() === key.toUpperCase());
-  });
-};
-
-/**
- * Activate keyboard shortcuts.
- * @param {(HTMLInputElement | HTMLButtonElement)} element Element.
- * @param {string} [shortcuts] Keyboard shortcuts like `A` or `Accel+S` to focus and click the text
- * field or button. Multiple shortcuts can be defined space-separated. The `Accel` modifier will be
- * replaced with `Ctrl` on Windows/Linux and `Command` on macOS.
- * @returns {ActionReturn} Actions.
- */
-export const activateKeyShortcuts = (element, shortcuts = '') => {
-  /** @type {string | undefined} */
-  let platformKeyShortcuts;
-  /**
-   * Pre-parsed shortcuts for fast per-event matching without string allocations.
-   * @type {{ ctrl: boolean, meta: boolean, alt: boolean, shift: boolean, nonModifierKeys: string[]
-   * }[] | undefined}
-   */
-  let parsedShortcuts;
-
-  /**
-   * Handle the event.
-   * @param {KeyboardEvent} event `keydown` event.
-   */
-  const handler = (event) => {
-    const { disabled, offsetParent } = element;
-
-    // Check shortcut match and visibility first — no layout reflow until needed
-    if (
-      !offsetParent ||
-      !parsedShortcuts?.some(({ ctrl, meta, alt, shift, nonModifierKeys }) => {
-        const { ctrlKey, metaKey, altKey, shiftKey, code } = event;
-
-        if (!code) {
-          return false;
-        }
-
-        const key = code.replace(CODE_RE, '$1').toUpperCase();
-
-        return (
-          ctrl === ctrlKey &&
-          meta === metaKey &&
-          alt === altKey &&
-          shift === shiftKey &&
-          nonModifierKeys.every((k) => k === key)
-        );
-      })
-    ) {
-      return;
-    }
-
-    const { top, left } = element.getBoundingClientRect();
-
-    if (disabled) {
-      // Make sure `elementsFromPoint()` works as expected
-      element.style.setProperty('pointer-events', 'auto');
-    }
-
-    // Check if the element is clickable (not behind a modal dialog)
-    if (document.elementsFromPoint(left + 4, top + 4).includes(element)) {
-      event.preventDefault();
-
-      // Trigger click only when the element is enabled
-      if (!disabled) {
-        element.focus();
-        element.click();
-      }
-    }
-
-    if (disabled) {
-      element.style.removeProperty('pointer-events');
-    }
-  };
-
-  /**
-   * Remove the event listener.
-   */
-  const removeListener = () => {
-    globalThis.removeEventListener('keydown', handler, { capture: true });
-    element.removeAttribute('aria-keyshortcuts');
-  };
-
-  /**
-   * Add the event listener.
-   */
-  const addListener = () => {
-    platformKeyShortcuts = shortcuts
-      ? shortcuts.replace(/\bAccel\b/g, isMac() ? 'Meta' : 'Ctrl')
-      : undefined;
-
-    if (platformKeyShortcuts) {
-      parsedShortcuts = platformKeyShortcuts.split(/\s+/).map((shortcut) => {
-        const parts = shortcut.split('+');
-
-        return {
-          ctrl: parts.includes('Ctrl'),
-          meta: parts.includes('Meta'),
-          alt: parts.includes('Alt'),
-          shift: parts.includes('Shift'),
-          nonModifierKeys: parts
-            .filter((k) => !MODIFIER_KEYS.includes(k))
-            .map((k) => k.toUpperCase()),
-        };
-      });
-
-      globalThis.addEventListener('keydown', handler, { capture: true });
-      element.setAttribute('aria-keyshortcuts', platformKeyShortcuts);
-    } else {
-      parsedShortcuts = undefined;
-    }
-  };
-
-  addListener();
-
-  return {
-    // eslint-disable-next-line jsdoc/require-jsdoc, no-shadow, no-unused-vars
-    update(shortcuts) {
-      removeListener();
-      addListener();
-    },
-
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    destroy() {
-      removeListener();
-    },
-  };
-};

package/dist/services/events.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/services/events.test.js

@@ -1,221 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { activateKeyShortcuts, isMac, matchShortcuts } from './events.svelte.js';
-
-/**
- * Helper to create a minimal KeyboardEvent-like object.
- * @param {Partial<KeyboardEvent>} overrides Event property overrides.
- * @returns {KeyboardEvent} A fake keyboard event.
- */
-const makeEvent = (overrides = {}) =>
-  /** @type {KeyboardEvent} */ ({
-    ctrlKey: false,
-    metaKey: false,
-    altKey: false,
-    shiftKey: false,
-    code: 'KeyA',
-    ...overrides,
-  });
-
-describe('matchShortcuts', () => {
-  it('should match a plain key shortcut', () => {
-    expect(matchShortcuts(makeEvent({ code: 'KeyS' }), 'S')).toBe(true);
-  });
-
-  it('should not match when the key differs', () => {
-    expect(matchShortcuts(makeEvent({ code: 'KeyA' }), 'S')).toBe(false);
-  });
-
-  it('should match Ctrl+S', () => {
-    expect(matchShortcuts(makeEvent({ code: 'KeyS', ctrlKey: true }), 'Ctrl+S')).toBe(true);
-  });
-
-  it('should not match Ctrl+S when Ctrl is not pressed', () => {
-    expect(matchShortcuts(makeEvent({ code: 'KeyS' }), 'Ctrl+S')).toBe(false);
-  });
-
-  it('should not match Ctrl+S when an extra modifier is pressed', () => {
-    expect(
-      matchShortcuts(makeEvent({ code: 'KeyS', ctrlKey: true, shiftKey: true }), 'Ctrl+S'),
-    ).toBe(false);
-  });
-
-  it('should match Shift+A', () => {
-    expect(matchShortcuts(makeEvent({ code: 'KeyA', shiftKey: true }), 'Shift+A')).toBe(true);
-  });
-
-  it('should match Alt+F4', () => {
-    expect(matchShortcuts(makeEvent({ code: 'KeyF', altKey: true }), 'Alt+F')).toBe(true);
-  });
-
-  it('should match any of multiple space-separated shortcuts', () => {
-    expect(matchShortcuts(makeEvent({ code: 'KeyZ', ctrlKey: true }), 'Ctrl+Z Ctrl+Y')).toBe(true);
-    expect(matchShortcuts(makeEvent({ code: 'KeyY', ctrlKey: true }), 'Ctrl+Z Ctrl+Y')).toBe(true);
-  });
-
-  it('should return false when code is empty', () => {
-    expect(matchShortcuts(makeEvent({ code: '' }), 'S')).toBe(false);
-  });
-
-  it('should match digit keys using Digit prefix', () => {
-    expect(matchShortcuts(makeEvent({ code: 'Digit1' }), '1')).toBe(true);
-  });
-
-  it('should be case-insensitive for the key', () => {
-    expect(matchShortcuts(makeEvent({ code: 'KeyS' }), 's')).toBe(true);
-  });
-});
-
-describe('isMac', () => {
-  it('should return a boolean', () => {
-    expect(typeof isMac()).toBe('boolean');
-  });
-});
-
-describe('activateKeyShortcuts', () => {
-  /** @type {HTMLButtonElement} */
-  let button;
-
-  beforeEach(() => {
-    button = /** @type {HTMLButtonElement} */ (document.createElement('button'));
-    document.body.appendChild(button);
-
-    // happy-dom doesn't expose document.elementsFromPoint as a configurable property;
-    // define a stub so vi.spyOn can wrap it in handler tests.
-    if (!document.elementsFromPoint) {
-      Object.defineProperty(document, 'elementsFromPoint', {
-        configurable: true,
-        writable: true,
-        // eslint-disable-next-line jsdoc/require-jsdoc
-        value: () => /** @type {Element[]} */ ([]),
-      });
-    }
-  });
-
-  afterEach(() => {
-    button.remove();
-    vi.restoreAllMocks();
-  });
-
-  it('should set aria-keyshortcuts when shortcuts are provided', () => {
-    const action = activateKeyShortcuts(button, 'Ctrl+S');
-
-    expect(button.getAttribute('aria-keyshortcuts')).toBe('Ctrl+S');
-    action.destroy?.();
-  });
-
-  it('should not set aria-keyshortcuts when no shortcuts are provided', () => {
-    const action = activateKeyShortcuts(button);
-
-    expect(button.getAttribute('aria-keyshortcuts')).toBeNull();
-    action.destroy?.();
-  });
-
-  it('should remove aria-keyshortcuts after destroy', () => {
-    const action = activateKeyShortcuts(button, 'Ctrl+S');
-
-    action.destroy?.();
-    expect(button.getAttribute('aria-keyshortcuts')).toBeNull();
-  });
-
-  it('should replace Accel with Meta or Ctrl depending on platform', () => {
-    const action = activateKeyShortcuts(button, 'Accel+S');
-    const attr = button.getAttribute('aria-keyshortcuts');
-
-    expect(attr === 'Meta+S' || attr === 'Ctrl+S').toBe(true);
-    action.destroy?.();
-  });
-
-  it('should re-register the original shortcuts when update() is called', () => {
-    // update() re-applies the same original shortcuts (param is intentionally ignored)
-    const action = activateKeyShortcuts(button, 'Ctrl+S');
-
-    /** @type {any} */ (action).update('Ctrl+Z');
-    expect(button.getAttribute('aria-keyshortcuts')).toBe('Ctrl+S');
-    action.destroy?.();
-  });
-
-  it('should keep no aria-keyshortcuts when update() is called on a no-shortcut action', () => {
-    const action = activateKeyShortcuts(button);
-
-    /** @type {any} */ (action).update('Ctrl+Z'); // original shortcuts was '' so still none
-    expect(button.getAttribute('aria-keyshortcuts')).toBeNull();
-    action.destroy?.();
-  });
-
-  it('should trigger click on element when matching shortcut key is pressed', () => {
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    Object.defineProperty(button, 'offsetParent', { configurable: true, get: () => document.body });
-    vi.spyOn(document, 'elementsFromPoint').mockReturnValue(/** @type {any} */ ([button]));
-
-    const clickSpy = vi.fn();
-
-    button.addEventListener('click', clickSpy);
-    activateKeyShortcuts(button, 'Ctrl+S');
-    globalThis.dispatchEvent(
-      new KeyboardEvent('keydown', { code: 'KeyS', ctrlKey: true, bubbles: true }),
-    );
-    expect(clickSpy).toHaveBeenCalledOnce();
-  });
-
-  it('should not trigger click when a non-matching key is pressed', () => {
-    // Handler returns early before reaching elementsFromPoint when shortcut doesn't match
-    const clickSpy = vi.fn();
-
-    button.addEventListener('click', clickSpy);
-    activateKeyShortcuts(button, 'Ctrl+S');
-    globalThis.dispatchEvent(
-      new KeyboardEvent('keydown', { code: 'KeyZ', ctrlKey: true, bubbles: true }),
-    );
-    expect(clickSpy).not.toHaveBeenCalled();
-  });
-
-  it('should not trigger click when element is not in elementsFromPoint result', () => {
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    Object.defineProperty(button, 'offsetParent', { configurable: true, get: () => document.body });
-    vi.spyOn(document, 'elementsFromPoint').mockReturnValue(/** @type {any} */ ([]));
-
-    const clickSpy = vi.fn();
-
-    button.addEventListener('click', clickSpy);
-    activateKeyShortcuts(button, 'Ctrl+S');
-    globalThis.dispatchEvent(
-      new KeyboardEvent('keydown', { code: 'KeyS', ctrlKey: true, bubbles: true }),
-    );
-    expect(clickSpy).not.toHaveBeenCalled();
-  });
-
-  it('should not trigger click when the event code is empty (covers inner return false branch)', () => {
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    Object.defineProperty(button, 'offsetParent', { configurable: true, get: () => document.body });
-    activateKeyShortcuts(button, 'Ctrl+S');
-
-    const clickSpy = vi.fn();
-
-    button.addEventListener('click', clickSpy);
-    // Dispatch with empty code — the parsedShortcuts.some() callback returns false (line 101)
-    globalThis.dispatchEvent(
-      new KeyboardEvent('keydown', { code: '', ctrlKey: true, bubbles: true }),
-    );
-    expect(clickSpy).not.toHaveBeenCalled();
-  });
-
-  it('should manipulate pointer-events for disabled button but not trigger click', () => {
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    Object.defineProperty(button, 'offsetParent', { configurable: true, get: () => document.body });
-    vi.spyOn(document, 'elementsFromPoint').mockReturnValue(/** @type {any} */ ([button]));
-    button.disabled = true;
-
-    const clickSpy = vi.fn();
-    const setPropertySpy = vi.spyOn(button.style, 'setProperty');
-    const removePropertySpy = vi.spyOn(button.style, 'removeProperty');
-
-    button.addEventListener('click', clickSpy);
-    activateKeyShortcuts(button, 'Ctrl+S');
-    globalThis.dispatchEvent(
-      new KeyboardEvent('keydown', { code: 'KeyS', ctrlKey: true, bubbles: true }),
-    );
-    expect(clickSpy).not.toHaveBeenCalled();
-    expect(setPropertySpy).toHaveBeenCalledWith('pointer-events', 'auto');
-    expect(removePropertySpy).toHaveBeenCalledWith('pointer-events');
-  });
-});