@sveltia/ui 0.34.0 → 0.35.1

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

@@ -107,7 +107,8 @@
   margin: var(--sui-focus-ring-width);
   min-width: var(--sui-textbox-singleline-min-width);
 }
-.password-input.flex {
+.password-input.flex:not([hidden]) {
+  display: inline-flex;
   width: -moz-available;
   width: -webkit-fill-available;
   width: stretch;

package/dist/components/text-field/search-bar.svelte

@@ -121,7 +121,8 @@
   margin: var(--sui-focus-ring-width);
   min-width: var(--sui-textbox-singleline-min-width);
 }
-.search-bar.flex {
+.search-bar.flex:not([hidden]) {
+  display: inline-flex;
   width: -moz-available;
   width: -webkit-fill-available;
   width: stretch;

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

@@ -101,7 +101,8 @@
   margin: var(--sui-focus-ring-width);
   min-width: var(--sui-textbox-singleline-min-width);
 }
-.secret-input.flex {
+.secret-input.flex:not([hidden]) {
+  display: inline-flex;
   width: -moz-available;
   width: -webkit-fill-available;
   width: stretch;

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

@@ -87,7 +87,8 @@
 .text-area[hidden] {
   display: none;
 }
-.text-area.flex {
+.text-area.flex:not([hidden]) {
+  display: inline-grid;
   width: -moz-available;
   width: -webkit-fill-available;
   width: stretch;

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

@@ -31,6 +31,7 @@
     inputmode = 'text',
     flex = false,
     monospace = false,
+    debounce = false,
     class: className,
     hidden = false,
     disabled = false,
@@ -39,11 +40,47 @@
     invalid = false,
     'aria-label': ariaLabel,
     children,
+    oninput,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 
   const id = $props.id();
+  const timeout = $derived(typeof debounce === 'number' ? debounce : 300);
+
+  let debounceTimer = 0;
+
+  $effect(() => () => {
+    clearTimeout(debounceTimer);
+  });
+
+  /**
+   * Update the `value` and call the `oninput` callback.
+   * @param {InputEvent} event The `input` event object.
+   */
+  const fireInput = (event) => {
+    value = /** @type {HTMLInputElement} */ (event.target).value;
+    oninput?.(event);
+  };
+
+  /**
+   * Handle the `input` event. If `debounce` is `true`, the event will be debounced by 300ms.
+   * @param {InputEvent} event The `input` event object.
+   */
+  const handleInput = (event) => {
+    if (debounce) {
+      clearTimeout(debounceTimer);
+      debounceTimer = /** @type {number} */ (
+        /** @type {unknown} */ (
+          setTimeout(() => {
+            fireInput(event);
+          }, timeout)
+        )
+      );
+    } else {
+      fireInput(event);
+    }
+  };
 </script>
 
 <div
@@ -58,7 +95,7 @@
   <input
     bind:this={element}
     {...restProps}
-    bind:value
+    {value}
     type="text"
     {role}
     dir="auto"
@@ -73,6 +110,7 @@
     aria-readonly={readonly}
     aria-required={required}
     aria-invalid={invalid}
+    oninput={handleInput}
     use:activateKeyShortcuts={keyShortcuts}
   />
   {#if ariaLabel && showInlineLabel}
@@ -91,7 +129,8 @@
   margin: var(--sui-focus-ring-width);
   min-width: var(--sui-textbox-singleline-min-width);
 }
-.text-input.flex {
+.text-input.flex:not([hidden]) {
+  display: inline-flex;
   width: -moz-available;
   width: -webkit-fill-available;
   width: stretch;

package/dist/components/toast/toast.svelte

@@ -112,9 +112,13 @@
     });
 
     if (show && duration) {
-      timerId = globalThis.setTimeout(() => {
-        show = false;
-      }, duration);
+      timerId = /** @type {number} */ (
+        /** @type {unknown} */ (
+          globalThis.setTimeout(() => {
+            show = false;
+          }, duration)
+        )
+      );
     }
   });
 </script>

package/dist/services/events.svelte.js

@@ -2,13 +2,23 @@
  * @import { ActionReturn } from 'svelte/action';
  */
 
+/** @type {boolean | undefined} */
+let _isMac;
+
 /**
  * Check if the user agent is macOS.
  * @returns {boolean} Result.
  */
-export const isMac = () =>
-  /** @type {any} */ (navigator).userAgentData?.platform === 'macOS' ||
-  navigator.platform.startsWith('Mac');
+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.
@@ -19,7 +29,13 @@ export const isMac = () =>
  */
 export const matchShortcuts = (event, shortcuts) => {
   const { ctrlKey, metaKey, altKey, shiftKey, code } = event;
-  const key = code.replace(/^(?:Digit|Key)(.)$/, '$1');
+
+  // 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('+');
@@ -45,7 +61,7 @@ export const matchShortcuts = (event, shortcuts) => {
     }
 
     return keys
-      .filter((_key) => !['Ctrl', 'Meta', 'Alt', 'Shift'].includes(_key))
+      .filter((_key) => !MODIFIER_KEYS.includes(_key))
       .every((_key) => _key.toUpperCase() === key.toUpperCase());
   });
 };
@@ -61,6 +77,12 @@ export const matchShortcuts = (event, shortcuts) => {
 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.
@@ -68,13 +90,33 @@ export const activateKeyShortcuts = (element, shortcuts = '') => {
    */
   const handler = (event) => {
     const { disabled, offsetParent } = element;
-    const { top, left } = element.getBoundingClientRect();
 
-    // Check if the element is visible
-    if (!matchShortcuts(event, /** @type {string} */ (platformKeyShortcuts)) || !offsetParent) {
+    // 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');
@@ -113,8 +155,24 @@ export const activateKeyShortcuts = (element, shortcuts = '') => {
       : 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;
     }
   };
 

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

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

package/dist/services/events.test.js

@@ -0,0 +1,221 @@
+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');
+  });
+});

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

@@ -1,2 +1,3 @@
+export function normalize(value: string): string;
 export function activateGroup(parent: HTMLElement, params?: object | undefined): ActionReturn;
 import type { ActionReturn } from 'svelte/action';

package/dist/services/group.svelte.js

@@ -8,24 +8,28 @@ import { get } from 'svelte/store';
 import { isRTL } from './i18n.js';
 import { getSelectedItemDetail } from './select.svelte.js';
 
+/**
+ * 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.
+ */
+const DIACRITIC_RE = /\p{Diacritic}/gu;
+
 /**
  * Normalize the given string for search value comparison. Since `transliterate` is slow, we only
  * apply basic normalization.
+ * @internal
  * @param {string} value Original value.
  * @returns {string} Normalized value.
  * @todo Move this to `@sveltia/utils`.
  */
-const normalize = (value) => {
+export const normalize = (value) => {
   value = value.trim();
 
   if (!value) {
     return '';
   }
 
-  return value
-    .normalize('NFD')
-    .replace(/\p{Diacritic}/gu, '')
-    .toLocaleLowerCase();
+  return value.normalize('NFD').replace(DIACRITIC_RE, '').toLocaleLowerCase();
 };
 
 /**
@@ -472,8 +476,8 @@ class Group {
           newTarget = activeMembers[index - 1];
         }
 
-        if (index === 0) {
-          // Last member
+        if (index <= 0) {
+          // Last member (also handles the case when nothing is focused, index === -1)
           newTarget = activeMembers[activeMembers.length - 1];
         }
       }
@@ -503,8 +507,9 @@ class Group {
   onUpdate({ searchTerms }) {
     const terms = normalize(searchTerms);
     const _terms = terms ? terms.split(/\s+/) : [];
+    const { allMembers, parent } = this;
 
-    const matched = this.allMembers
+    const matched = allMembers
       .map((member) => {
         const searchValue = normalize(
           member.dataset.searchValue ??
@@ -522,8 +527,8 @@ class Group {
       })
       .filter((hidden) => !hidden).length;
 
-    this.parent.dispatchEvent(
-      new CustomEvent('Filter', { detail: { matched, total: this.allMembers.length } }),
+    parent.dispatchEvent(
+      new CustomEvent('Filter', { detail: { matched, total: allMembers.length } }),
     );
   }
 }

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

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