@sveltia/ui 0.35.6 → 0.36.1

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

@@ -4,10 +4,10 @@
   import 'prismjs';
 
   import { $isCodeNode as isCodeNode } from '@lexical/code';
+  import { _ } from '@sveltia/i18n';
   import { $getNodeByKey as getNodeByKey, $getRoot as getRoot } from 'lexical';
   import prismComponents from 'prismjs/components';
   import { getContext } from 'svelte';
-  import { _ } from 'svelte-i18n';
   import Option from '../../listbox/option.svelte';
   import Select from '../../select/select.svelte';
   import { focusEditor, loadCodeHighlighter } from '../core.js';
@@ -69,7 +69,7 @@
 
 <Select
   {disabled}
-  aria-label={$_('_sui.text_editor.language')}
+  aria-label={_('_sui.text_editor.language')}
   value={selectedLanguage}
   onChange={async ({ detail: { value: lang } }) => {
     if (!editorStore.editor || selectedLanguage === lang) {
@@ -93,7 +93,7 @@
     }
   }}
 >
-  <Option label={$_('_sui.text_editor.plain_text')} value="plain" dir="ltr" />
+  <Option label={_('_sui.text_editor.plain_text')} value="plain" dir="ltr" />
   {#each codeLanguages as { key, label, aliases } (key)}
     <Option
       {label}

package/dist/components/text-editor/toolbar/format-text-button.svelte

@@ -1,7 +1,7 @@
 <script>
+  import { _ } from '@sveltia/i18n';
   import { FORMAT_TEXT_COMMAND } from 'lexical';
   import { getContext } from 'svelte';
-  import { _ } from 'svelte-i18n';
   import Button from '../../button/button.svelte';
   import Icon from '../../icon/icon.svelte';
   import { AVAILABLE_BUTTONS } from '../constants.js';
@@ -32,7 +32,7 @@
 
 <Button
   iconic
-  aria-label={$_(`_sui.text_editor.${AVAILABLE_BUTTONS[type].labelKey}`)}
+  aria-label={_(`_sui.text_editor.${AVAILABLE_BUTTONS[type].labelKey}`)}
   aria-controls="{editorStore.editorId}-lexical-root"
   disabled={!editorStore.useRichText}
   pressed={selectionTypeMatches}

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 { _ } from '@sveltia/i18n';
   import { isMac, matchesShortcuts } from '@sveltia/utils/events';
   import {
     COMMAND_PRIORITY_NORMAL,
@@ -15,7 +16,6 @@
     $setSelection as setSelection,
   } from 'lexical';
   import { getContext } from 'svelte';
-  import { _ } from 'svelte-i18n';
   import Button from '../../button/button.svelte';
   import Dialog from '../../dialog/dialog.svelte';
   import Icon from '../../icon/icon.svelte';
@@ -188,7 +188,7 @@
 
 <Button
   iconic
-  aria-label={$_(`_sui.text_editor.${AVAILABLE_BUTTONS[type].labelKey}`)}
+  aria-label={_(`_sui.text_editor.${AVAILABLE_BUTTONS[type].labelKey}`)}
   aria-controls="{editorStore.editorId}-lexical-root"
   disabled={!editorStore.useRichText}
   pressed={selectionTypeMatches}
@@ -203,18 +203,18 @@
 
 <Dialog
   title={dialogMode === 'create'
-    ? $_('_sui.text_editor.insert_link')
-    : $_('_sui.text_editor.update_link')}
+    ? _('_sui.text_editor.insert_link')
+    : _('_sui.text_editor.update_link')}
   bind:open={openDialog}
   bind:value={anchorURL}
   okDisabled={!anchorURL}
-  okLabel={dialogMode === 'create' ? $_('_sui.insert') : $_('_sui.update')}
+  okLabel={dialogMode === 'create' ? _('_sui.insert') : _('_sui.update')}
   onClose={(event) => {
     onDialogClose(event);
   }}
 >
   <div role="none">
-    <label for="{id}-url">{$_('_sui.text_editor.url')}</label>
+    <label for="{id}-url">{_('_sui.text_editor.url')}</label>
     <TextInput
       id="{id}-url"
       bind:value={anchorURL}
@@ -227,7 +227,7 @@
   </div>
   {#if !hasAnchor}
     <div role="none">
-      <label for="{id}-text">{$_('_sui.text_editor.text')}</label>
+      <label for="{id}-text">{_('_sui.text_editor.text')}</label>
       <TextInput
         id="{id}-text"
         bind:value={anchorText}
@@ -242,7 +242,7 @@
     {#if dialogMode !== 'create'}
       <Button
         variant="secondary"
-        label={$_('_sui.remove')}
+        label={_('_sui.remove')}
         onclick={() => {
           removeLink();
           dialogMode = 'remove';

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

@@ -1,7 +1,7 @@
 <script>
+  import { _ } from '@sveltia/i18n';
   import { $insertNodes as insertNodes } from 'lexical';
   import { getContext } from 'svelte';
-  import { _ } from 'svelte-i18n';
   import Icon from '../../icon/icon.svelte';
   import MenuButton from '../../menu/menu-button.svelte';
   import MenuItem from '../../menu/menu-item.svelte';
@@ -27,7 +27,7 @@
   const editorStore = getContext('editorStore');
 </script>
 
-<MenuButton disabled={!editorStore.useRichText} label={$_('_sui.insert')}>
+<MenuButton disabled={!editorStore.useRichText} label={_('_sui.insert')}>
   {#snippet endIcon()}
     <Icon name="arrow_drop_down" class="small-arrow" />
   {/snippet}

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

@@ -1,7 +1,7 @@
 <script>
+  import { _ } from '@sveltia/i18n';
   import { unique } from '@sveltia/utils/array';
   import { getContext } from 'svelte';
-  import { _ } from 'svelte-i18n';
   import ButtonGroup from '../../button/button-group.svelte';
   import Button from '../../button/button.svelte';
   import Divider from '../../divider/divider.svelte';
@@ -81,10 +81,10 @@
   );
 </script>
 
-<ToolbarWrapper disabled={disabled || readonly} aria-label={$_('_sui.text_editor.text_editor')}>
+<ToolbarWrapper disabled={disabled || readonly} aria-label={_('_sui.text_editor.text_editor')}>
   <MenuButton
     disabled={!editorStore.useRichText}
-    aria-label={$_('_sui.text_editor.show_text_style_options')}
+    aria-label={_('_sui.text_editor.show_text_style_options')}
     aria-controls="{editorStore.editorId}-lexical-root"
   >
     {#snippet startIcon()}
@@ -93,7 +93,7 @@
       />
     {/snippet}
     {#snippet popup()}
-      <Menu aria-label={$_('_sui.text_editor.text_style_options')}>
+      <Menu aria-label={_('_sui.text_editor.text_style_options')}>
         {#each blockLevelButtons as type (type)}
           <ToggleBlockMenuItem {type} />
         {/each}
@@ -132,7 +132,7 @@
       iconic
       disabled={editorStore.hasConverterError}
       pressed={!editorStore.useRichText}
-      aria-label={$_('_sui.text_editor.edit_in_markdown')}
+      aria-label={_('_sui.text_editor.edit_in_markdown')}
       onclick={() => {
         editorStore.useRichText = !editorStore.useRichText;
 

package/dist/components/text-editor/toolbar/toggle-block-menu-item.svelte

@@ -10,12 +10,12 @@
     $createQuoteNode as createQuoteNode,
   } from '@lexical/rich-text';
   import { $setBlocksType as setBlocksType } from '@lexical/selection';
+  import { _ } from '@sveltia/i18n';
   import {
     $createParagraphNode as createParagraphNode,
     $getSelection as getSelection,
   } from 'lexical';
   import { getContext } from 'svelte';
-  import { _ } from 'svelte-i18n';
   import Icon from '../../icon/icon.svelte';
   import MenuItemCheckbox from '../../menu/menu-item-checkbox.svelte';
   import { AVAILABLE_BUTTONS } from '../constants.js';
@@ -94,7 +94,7 @@
 
 {#key selectionTypeMatches}
   <MenuItemCheckbox
-    label={$_(`_sui.text_editor.${AVAILABLE_BUTTONS[type].labelKey}`)}
+    label={_(`_sui.text_editor.${AVAILABLE_BUTTONS[type].labelKey}`)}
     checked={selectionTypeMatches}
     onclick={() => {
       if (!selectionTypeMatches) {

package/dist/components/text-editor/transformers/hr.test.js

@@ -7,12 +7,10 @@ import { HR } from './hr.js';
 vi.mock('@lexical/extension', () => {
   const mockHRNode = {
     __type: 'horizontalrule',
-    // eslint-disable-next-line jsdoc/require-jsdoc
     selectNext: vi.fn(),
   };
 
   return {
-    // eslint-disable-next-line jsdoc/require-jsdoc
     $createHorizontalRuleNode: vi.fn(() => mockHRNode),
     // eslint-disable-next-line jsdoc/require-jsdoc
     $isHorizontalRuleNode: (/** @type {{ __type: string; }} */ node) =>

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

@@ -5,8 +5,8 @@
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
   import { untrack } from 'svelte';
-  import { _ } from 'svelte-i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
@@ -123,7 +123,7 @@
     <Button
       iconic
       disabled={disabled || readonly || Number.isNaN(Number(value)) || isMax}
-      aria-label={$_('_sui.number_input.increase')}
+      aria-label={_('_sui.number_input.increase')}
       aria-controls={id}
       onclick={() => {
         increase();
@@ -140,7 +140,7 @@
     <Button
       iconic
       disabled={disabled || readonly || Number.isNaN(Number(value)) || isMin}
-      aria-label={$_('_sui.number_input.decrease')}
+      aria-label={_('_sui.number_input.decrease')}
       aria-controls={id}
       onclick={() => {
         decrease();

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

@@ -6,7 +6,7 @@
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
-  import { _ } from 'svelte-i18n';
+  import { _ } from '@sveltia/i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
@@ -83,7 +83,7 @@
     iconic
     disabled={disabled || readonly}
     pressed={passwordVisible}
-    aria-label={$_(
+    aria-label={_(
       passwordVisible ? '_sui.password_input.hide_password' : '_sui.password_input.show_password',
     )}
     aria-controls={id}

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

@@ -7,7 +7,7 @@
 -->
 
 <script>
-  import { _ } from 'svelte-i18n';
+  import { _ } from '@sveltia/i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
@@ -95,7 +95,7 @@
   {#if value}
     <Button
       iconic
-      aria-label={$_('_sui.clear')}
+      aria-label={_('_sui.clear')}
       aria-controls={id}
       onclick={() => {
         value = '';

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

@@ -6,7 +6,7 @@
   @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-security
 -->
 <script>
-  import { _ } from 'svelte-i18n';
+  import { _ } from '@sveltia/i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
@@ -79,7 +79,7 @@
     iconic
     disabled={disabled || readonly}
     pressed={show}
-    aria-label={$_(show ? '_sui.secret_input.hide_secret' : '_sui.secret_input.show_secret')}
+    aria-label={_(show ? '_sui.secret_input.hide_secret' : '_sui.secret_input.show_secret')}
     aria-controls={id}
     onclick={() => {
       show = !show;

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

@@ -67,20 +67,22 @@
    * Handle the `input` event. If `debounce` is `true`, the event will be debounced by 300ms. We use
    * `oninputcapture` to ensure that the event is fired before any `oninput` handlers on parent
    * elements, including the Lexical editor.
-   * @param {InputEvent} event The `input` event object.
+   * @param {Event} event The `input` event object.
    */
   const handleInput = (event) => {
+    const inputEvent = /** @type {InputEvent} */ (event);
+
     if (debounce) {
       clearTimeout(debounceTimer);
       debounceTimer = /** @type {number} */ (
         /** @type {unknown} */ (
           setTimeout(() => {
-            fireInput(event);
+            fireInput(inputEvent);
           }, timeout)
         )
       );
     } else {
-      fireInput(event);
+      fireInput(inputEvent);
     }
   };
 </script>
@@ -113,7 +115,7 @@
     aria-required={required}
     aria-invalid={invalid}
     oninputcapture={handleInput}
-    use:activateKeyShortcuts={keyShortcuts}
+    {@attach activateKeyShortcuts(keyShortcuts)}
   />
   {#if ariaLabel && showInlineLabel}
     <span id="{id}-label" class="label" class:hidden={!!value} aria-hidden="true">

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

@@ -13,7 +13,7 @@ declare const TextInput: import("svelte").Component<TextInputProps & import("../
      * Input value.
      */
     value?: string | undefined;
-} & Record<string, any>, {}, "element" | "value">;
+} & Record<string, any>, {}, "value" | "element">;
 type Props = {
     /**
      * Input value.

package/dist/components/toast/toast.svelte

@@ -59,6 +59,7 @@
       /** @type {HTMLElement} */ (document.querySelector('.sui.toast-base.enabled')) ?? undefined;
 
     if (popover) {
+      // eslint-disable-next-line svelte/no-dom-manipulating
       popoverBase?.remove();
     } else {
       popover = popoverBase;
@@ -76,6 +77,7 @@
     }
 
     return () => {
+      // eslint-disable-next-line svelte/no-dom-manipulating
       toast?.remove();
     };
   });

package/dist/components/util/app-shell.svelte

@@ -36,8 +36,7 @@
     'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block',
   ];
 
-  /** @type {HTMLElement | undefined} */
-  let fontLoader = $state();
+  let fontLoaded = $state(false);
 
   onMount(() => {
     const mediaQuery = globalThis.matchMedia('(prefers-color-scheme: dark)');
@@ -60,7 +59,7 @@
     };
 
     globalThis.setTimeout(() => {
-      fontLoader?.remove();
+      fontLoaded = true;
     }, 1000);
   });
 </script>
@@ -82,17 +81,19 @@
   <meta name="google" content="notranslate" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
-  {#each stylesheets as href}
+  {#each stylesheets as href (href)}
     <link rel="preload" {href} as="style" />
     <link rel="stylesheet" {href} />
   {/each}
 </svelte:head>
 
-<!-- Preload fonts, including the icons -->
-<div bind:this={fontLoader} class="font-loader" aria-hidden="true" style:opacity="0">
-  Loading <strong>Sveltia</strong> <em>UI</em>
-  <span role="none" class="material-symbols-outlined">favorite</span>
-</div>
+{#if !fontLoaded}
+  <!-- Preload fonts, including the icons -->
+  <div class="font-loader" aria-hidden="true" style:opacity="0">
+    Loading <strong>Sveltia</strong> <em>UI</em>
+    <span role="none" class="material-symbols-outlined">favorite</span>
+  </div>
+{/if}
 
 <div
   {...restProps}

package/dist/index.d.ts

@@ -78,6 +78,3 @@ 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 * from "./typedefs.js";
-import { initLocales } from './services/i18n.js';
-import { isRTL } from './services/i18n.js';
-export { initLocales, isRTL };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { initLocales, isRTL } from './services/i18n.js';
+import { initLocales } from './services/i18n.js';
 
 initLocales();
 
@@ -81,7 +81,6 @@ 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, isRTL };
 
 // eslint-disable-next-line import/export
 export * from './typedefs.js';

package/dist/locales/en.yaml

@@ -0,0 +1,66 @@
+ok: OK
+cancel: Cancel
+close: Close
+clear: Clear
+insert: Insert
+update: Update
+remove: Remove
+collapse: Collapse
+expand: Expand
+dismiss: Dismiss
+calendar:
+  year: Year
+  previous_decade: Previous Decade
+  next_decade: Next Decade
+  month: Month
+  previous_month: Previous Month
+  next_month: Next Month
+  today: Today
+split_button:
+  x_options: "{$name} Options"
+  more_options: More Options
+combobox:
+  select_an_option: Select an option…
+  filter_options: Filter Options
+  no_matching_options: No matching options found
+number_input:
+  decrease: Decrease
+  increase: Increase
+password_input:
+  show_password: Show Password
+  hide_password: Hide Password
+secret_input:
+  show_secret: Show Secret
+  hide_secret: Hide Secret
+select_tags:
+  selected_options: Selected options
+  remove_x: "Remove {$name}"
+text_editor:
+  text_editor: Text Editor
+  code_editor: Code Editor
+  text_style_options: Text Style Options
+  show_text_style_options: Show Text Style Options
+  paragraph: Paragraph
+  heading_1: Heading 1
+  heading_2: Heading 2
+  heading_3: Heading 3
+  heading_4: Heading 4
+  heading_5: Heading 5
+  heading_6: Heading 6
+  bulleted_list: Bulleted List
+  numbered_list: Numbered List
+  blockquote: Block Quote
+  code_block: Code Block
+  bold: Bold
+  italic: Italic
+  strikethrough: Strikethrough
+  code: Code
+  link: Link
+  insert_link: Insert Link
+  update_link: Update Link
+  text: Text
+  url: URL
+  edit_in_markdown: Edit in Markdown
+  converter_error: There was an error while enabling rich text mode. Please use the plain text editor instead.
+  language: Language
+  plain_text: Plain Text

package/dist/locales/ja.yaml

@@ -0,0 +1,66 @@
+ok: OK
+cancel: キャンセル
+close: 閉じる
+clear: クリア
+insert: 挿入
+update: 更新
+remove: 削除
+collapse: 折り畳む
+expand: 広げる
+dismiss: 閉じる
+calendar:
+  year: 年
+  previous_decade: 前の 10 年
+  next_decade: 次の 10 年
+  month: 月
+  previous_month: 前月
+  next_month: 翌月
+  today: 今日
+split_button:
+  x_options: "{$name} オプション"
+  more_options: その他のオプション
+combobox:
+  select_an_option: オプションを選択…
+  filter_options: オプションを絞り込み
+  no_matching_options: 一致するオプションは見つかりませんでした
+number_input:
+  decrease: 減らす
+  increase: 増やす
+password_input:
+  show_password: パスワードを表示
+  hide_password: パスワードを隠す
+secret_input:
+  show_secret: シークレットを表示
+  hide_secret: シークレットを隠す
+select_tags:
+  selected_options: 選択済みのオプション
+  remove_x: "{$name} を削除"
+text_editor:
+  text_editor: テキストエディター
+  code_editor: コードエディター
+  text_style_options: テキストスタイルオプション
+  show_text_style_options: テキストスタイルオプションを表示
+  paragraph: 段落
+  heading_1: 見出し 1
+  heading_2: 見出し 2
+  heading_3: 見出し 3
+  heading_4: 見出し 4
+  heading_5: 見出し 5
+  heading_6: 見出し 6
+  bulleted_list: 番号なしリスト
+  numbered_list: 番号付きリスト
+  blockquote: ブロック引用
+  code_block: コードブロック
+  bold: 太字
+  italic: 斜体
+  strikethrough: 取り消し線
+  code: コード
+  link: リンク
+  insert_link: リンクを挿入
+  update_link: リンクを更新
+  text: テキスト
+  url: URL
+  edit_in_markdown: マークダウンで編集
+  converter_error: リッチテキストモードを有効化中に問題が発生しました。代わりにプレーンテキストエディターを使用してください。
+  language: 言語
+  plain_text: プレーンテキスト

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

@@ -1,3 +1,100 @@
 export function normalize(value: string): string;
-export function activateGroup(parent: HTMLElement, params?: object | undefined): ActionReturn;
-import type { ActionReturn } from 'svelte/action';
+/**
+ * Implement keyboard and mouse interactions for a grouping composite widget.
+ */
+export class Group {
+    /**
+     * Initialize a new `Group` instance.
+     * @param {HTMLElement} parent Parent element.
+     * @param {object} [options] Options.
+     * @param {boolean} [options.clickToSelect] Whether to select an item by clicking on it.
+     * @todo Check for added elements probably with `MutationObserver`.
+     */
+    constructor(parent: HTMLElement, { clickToSelect }?: {
+        clickToSelect?: boolean | undefined;
+    } | undefined);
+    parent: HTMLElement;
+    role: string;
+    multi: boolean;
+    id: string;
+    parentGroupSelector: string;
+    clickToSelect: boolean;
+    /** @type {(event: MouseEvent) => void} */
+    _onClick: (event: MouseEvent) => void;
+    /** @type {(event: KeyboardEvent) => void} */
+    _onKeyDown: (event: KeyboardEvent) => void;
+    orientation: string;
+    childRoles: string[];
+    childSelectedAttr: "aria-selected" | "aria-checked";
+    childSelectedProp: string;
+    focusChild: boolean;
+    selectFirst: boolean;
+    /**
+     * Activate the members.
+     */
+    activate(): void;
+    /**
+     * CSS selector to retrieve the members.
+     * @type {string}
+     */
+    get selector(): string;
+    /**
+     * List of all the members.
+     * @type {HTMLElement[]}
+     */
+    get allMembers(): HTMLElement[];
+    /**
+     * List of the enabled and visible members.
+     * @type {HTMLElement[]}
+     */
+    get activeMembers(): HTMLElement[];
+    /**
+     * Get the currently selected member.
+     * @type {HTMLElement | undefined}
+     */
+    get selected(): HTMLElement | undefined;
+    /**
+     * Whether the parent is disabled.
+     * @type {boolean}
+     */
+    get isDisabled(): boolean;
+    /**
+     * Whether the parent is read-only.
+     * @type {boolean}
+     */
+    get isReadOnly(): boolean;
+    /**
+     * Whether the widget is displayed in grid mode.
+     * @type {boolean}
+     */
+    get grid(): boolean;
+    /**
+     * Select (and move focus to) the given target.
+     * @param {(MouseEvent | KeyboardEvent)} event Triggered event.
+     * @param {HTMLElement} newTarget Target element.
+     */
+    selectTarget(event: (MouseEvent | KeyboardEvent), newTarget: HTMLElement): void;
+    /**
+     * Handle the `click` event on the widget.
+     * @param {MouseEvent} event `click` event.
+     */
+    onClick(event: MouseEvent): void;
+    /**
+     * Handle the `keydown` event on the widget.
+     * @param {KeyboardEvent} event `keydown` event.
+     */
+    onKeyDown(event: KeyboardEvent): void;
+    /**
+     * Clean up event listeners.
+     */
+    destroy(): void;
+    /**
+     * Called whenever the params are updated. Filter the items based on the search terms.
+     * @param {{ searchTerms: string }} params Updated params.
+     */
+    onUpdate({ searchTerms }: {
+        searchTerms: string;
+    }): void;
+}
+export function activateGroup(paramsOrGetter?: object | (() => object) | undefined): Attachment;
+import type { Attachment } from 'svelte/attachments';