@sveltia/ui 0.19.2 → 0.20.0

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

@@ -2,14 +2,18 @@
   import { LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
   import { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
   import { generateElementId } from '@sveltia/utils/element';
-  import { isURL } from '@sveltia/utils/string';
+  import { sleep } from '@sveltia/utils/misc';
   import {
     COMMAND_PRIORITY_NORMAL,
     KEY_DOWN_COMMAND,
+    $createRangeSelection as createRangeSelection,
+    $createTextNode as createTextNode,
     $getPreviousSelection as getPreviousSelection,
     $getSelection as getSelection,
     $getTextContent as getTextContent,
+    $insertNodes as insertNodes,
     $isRangeSelection as isRangeSelection,
+    $setSelection as setSelection,
   } from 'lexical';
   import { getContext } from 'svelte';
   import { _ } from 'svelte-i18n';
@@ -47,7 +51,7 @@
     $editor.getEditorState().read(() => {
       const textContent = getTextContent().trim();
 
-      anchorURL = isURL(textContent) ? textContent : '';
+      anchorURL = textContent;
       hasAnchor = !!textContent;
       dialogMode = 'create';
       openDialog = true;
@@ -105,7 +109,7 @@
    * @param {KeyboardEvent} event - `keydown` event.
    */
   const onInputKeyDown = (event) => {
-    if (matchShortcuts(event, 'Enter') && isURL(anchorURL)) {
+    if (matchShortcuts(event, 'Enter') && anchorURL) {
       openDialog = false;
     }
   };
@@ -117,26 +121,34 @@
    */
   const onDialogClose = async (event) => {
     if (event.detail !== 'cancel' && dialogMode !== 'remove') {
-      if (!hasAnchor) {
-        anchorText = anchorText.trim();
-        anchorText ||= anchorURL;
+      await new Promise((resolve) => {
+        $editor.update(async () => {
+          let selection = getSelection() ?? getPreviousSelection()?.clone();
 
-        await new Promise((resolve) => {
-          $editor.update(() => {
-            const selection = getSelection() ?? getPreviousSelection()?.clone();
+          if (!isRangeSelection(selection)) {
+            selection = createRangeSelection();
+          }
 
-            if (isRangeSelection(selection)) {
-              const { anchor, focus } = selection;
+          if (!hasAnchor) {
+            anchorText = anchorText.trim();
+            anchorText ||= anchorURL;
 
-              selection.insertText(anchorText);
-              anchor.offset -= anchorText.length;
-              focus.offset = anchor.offset + anchorText.length;
+            const { anchor, focus } = /** @type {import('lexical').RangeSelection} */ (selection);
+            const node = createTextNode(anchorText);
+            const key = node.getKey();
 
-              resolve(void 0);
-            }
-          });
+            insertNodes([node]);
+            anchor.set(key, anchorText.length, 'text');
+            focus.set(key, 0, 'text');
+          }
+
+          setSelection(selection);
+          resolve(undefined);
         });
-      }
+      });
+
+      // Wait a sec until the text is selected
+      await sleep(50);
 
       $editor.dispatchCommand(TOGGLE_LINK_COMMAND, anchorURL);
     }
@@ -191,18 +203,29 @@
     : $_('_sui.text_editor.update_link')}
   bind:open={openDialog}
   bind:value={anchorURL}
-  okDisabled={!isURL(anchorURL)}
+  okDisabled={!anchorURL}
   okLabel={dialogMode === 'create' ? $_('_sui.insert') : $_('_sui.update')}
   onClose={(event) => {
     onDialogClose(event);
   }}
 >
+  <div role="none">
+    <label for="{id}-url">{$_('_sui.text_editor.url')}</label>
+    <TextInput
+      id="{id}-url"
+      bind:value={anchorURL}
+      flex
+      aria-label="URL"
+      onkeydown={(event) => {
+        onInputKeyDown(event);
+      }}
+    />
+  </div>
   {#if !hasAnchor}
     <div role="none">
       <label for="{id}-text">{$_('_sui.text_editor.text')}</label>
       <TextInput
         id="{id}-text"
-        autofocus
         bind:value={anchorText}
         flex
         onkeydown={(event) => {
@@ -211,19 +234,6 @@
       />
     </div>
   {/if}
-  <div role="none">
-    <label for="{id}-url">{$_('_sui.text_editor.url')}</label>
-    <TextInput
-      id="{id}-url"
-      autofocus={hasAnchor || undefined}
-      bind:value={anchorURL}
-      flex
-      aria-label="URL"
-      onkeydown={(event) => {
-        onInputKeyDown(event);
-      }}
-    />
-  </div>
   {#snippet footerExtra()}
     {#if dialogMode !== 'create'}
       <Button

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

@@ -1,2 +1,6 @@
 export default InsertLinkButton;
+type InsertLinkButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
 declare const InsertLinkButton: import("svelte").Component<Record<string, never>, {}, "">;

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

@@ -1,7 +1,17 @@
 export default ToggleBlockMenuItem;
+type ToggleBlockMenuItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 declare const ToggleBlockMenuItem: import("svelte").Component<{
     /**
      * - Button type.
      */
     type: import("../../../typedefs").TextEditorBlockType;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - Button type.
+     */
+    type: import("../../../typedefs").TextEditorBlockType;
+};

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

@@ -1,4 +1,8 @@
 export default NumberInput;
+type NumberInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>>): void;
+};
 /**
  * The equivalent of the HTML `<input type="number">` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
@@ -27,3 +31,26 @@ declare const NumberInput: import("svelte").Component<import("../../typedefs").T
      */
     decreaseIcon?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "invalid" | "value">;
+type Props = {
+    /**
+     * - Minimum allowed value.
+     */
+    min?: number | undefined;
+    /**
+     * - Maximum allowed value.
+     */
+    max?: number | undefined;
+    /**
+     * - Value to be added or removed when using the up/down arrow key or
+     * button.
+     */
+    step?: number | undefined;
+    /**
+     * - Increase icon slot content.
+     */
+    increaseIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Decrease icon slot content.
+     */
+    decreaseIcon?: import("svelte").Snippet<[]> | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default PasswordInput;
+type PasswordInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>>): void;
+};
 /**
  * The equivalent of the HTML `<input type="password">` element, but it comes with the Show/Hide
  * button.
@@ -11,3 +15,9 @@ declare const PasswordInput: import("svelte").Component<import("../../typedefs")
      */
     visibilityIcon?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "value">;
+type Props = {
+    /**
+     * - Visibility icon slot content.
+     */
+    visibilityIcon?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/text-field/search-bar.svelte.d.ts

@@ -1,4 +1,10 @@
 export default SearchBar;
+type SearchBar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>>): void;
+} & {
+    focus: () => void;
+};
 /**
  * The equivalent of the HTML `<input type="search">` element. It comes with a magnifier icon and
  * clear button.
@@ -17,3 +23,13 @@ declare const SearchBar: import("svelte").Component<import("../../typedefs").Tex
 } & Record<string, any>, {
     focus: () => void;
 }, "value">;
+type Props = {
+    /**
+     * - Search icon slot content.
+     */
+    searchIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Close icon slot content.
+     */
+    closeIcon?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/text-field/text-area.svelte.d.ts

@@ -1,4 +1,8 @@
 export default TextArea;
+type TextArea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>>): void;
+};
 /**
  * A multi-line text field based on the HTML `<textarea>` element, providing the auto-resize support.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
@@ -56,3 +60,54 @@ declare const TextArea: import("svelte").Component<import("../../typedefs").Keyb
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "value">;
+type Props = {
+    /**
+     * - Input value.
+     */
+    value?: string | undefined;
+    /**
+     * - Make the text input container flexible.
+     */
+    flex?: boolean | undefined;
+    /**
+     * - The `name` attribute on the `<textarea>` element.
+     */
+    name?: string | undefined;
+    /**
+     * - Whether to automatically resize the `<textarea>` based on
+     * the content.
+     */
+    autoResize?: boolean | undefined;
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to hide the widget.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
+    readonly?: boolean | undefined;
+    /**
+     * - Whether to mark the widget required. An alias of the
+     * `aria-required` attribute.
+     */
+    required?: boolean | undefined;
+    /**
+     * - Whether to mark the widget invalid. An alias of the
+     * `aria-invalid` attribute.
+     */
+    invalid?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default TextInput;
+type TextInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Record<string, any>>): void;
+};
 /**
  * A generic, single-line text field. The equivalent of the HTML `<input type="text">` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text

package/package/components/toast/toast.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Toast;
+type Toast = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * Toast/snackbar notification. Use the Popover API if possible to acquire a non-modal top layer.
  * @see https://w3c.github.io/aria/#alert
@@ -28,3 +32,27 @@ declare const Toast: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "show">;
+type Props = {
+    /**
+     * - The toast ID. If updated, the timer that hides
+     * the toast will be reset, meaning the same toast can be displayed for a longer period of time.
+     */
+    id?: string | number | undefined;
+    /**
+     * - Whether to show the toast.
+     */
+    show?: boolean | undefined;
+    /**
+     * - Duration to automatically hide the toast. Use `0` to hide it
+     * manually from the consumer.
+     */
+    duration?: number | undefined;
+    /**
+     * - Position of the toast.
+     */
+    position?: import("../../typedefs").ToastPosition | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/toolbar/toolbar.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Toolbar;
+type Toolbar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * A toolbar layout that can contain `<Button>`, `<Select>` and other widgets.
  * @see https://w3c.github.io/aria/#toolbar
@@ -32,3 +36,31 @@ declare const Toolbar: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to hide the widget.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Orientation of the widget. An alias of
+     * the `aria-orientation` attribute.
+     */
+    orientation?: "vertical" | "horizontal" | undefined;
+    /**
+     * - The style variant of the toolbar.
+     */
+    variant?: "primary" | "secondary" | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/util/app-shell.svelte.d.ts

@@ -1,4 +1,8 @@
 export default AppShell;
+type AppShell = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * Provide an application’s shell that makes the web app more like a native app. It also handles the
  * dark/light mode switching. This component has to be placed directly under `<body>` (or
@@ -15,3 +19,14 @@ declare const AppShell: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - Orientation of the app
+     * shell’s children..
+     */
+    orientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/util/group.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Group;
+type Group = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * A generic group layout.
  * @see https://w3c.github.io/aria/#group
@@ -22,3 +26,22 @@ declare const Group: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to hide the widget.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/util/modal.svelte.d.ts

@@ -1,4 +1,10 @@
 export default Modal;
+type Modal = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ModalProps & Record<string, any>>): void;
+} & {
+    close: (returnValue: string) => void;
+};
 /** A generic modal top-layer helper based on the HTML `<dialog>` element. */
 declare const Modal: import("svelte").Component<import("../../typedefs").ModalProps & Record<string, any>, {
     close: (returnValue: string) => void;

package/package/components/util/placeholder.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Placeholder;
+type Placeholder = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /** @see https://github.com/sveltejs/svelte/issues/3088 */
 declare const Placeholder: import("svelte").Component<{
     /**
@@ -6,3 +10,9 @@ declare const Placeholder: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/util/popup.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Popup;
+type Popup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ModalProps & Props & Record<string, any>>): void;
+};
 /** Generic popup helper. */
 declare const Popup: import("svelte").Component<import("../../typedefs").ModalProps & {
     /**
@@ -45,3 +49,48 @@ declare const Popup: import("svelte").Component<import("../../typedefs").ModalPr
      */
     onOpen?: ((event: CustomEvent) => void) | undefined;
 } & Record<string, any>, {}, "open" | "content">;
+type Props = {
+    /**
+     * - The `class` attribute on the content element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to open the popup.
+     */
+    open?: boolean | undefined;
+    /**
+     * - A reference to the anchor element that opens the popup.
+     * Typically a `<button>`.
+     */
+    anchor?: HTMLElement | undefined;
+    /**
+     * - A reference to the content element.
+     */
+    content?: HTMLElement | undefined;
+    /**
+     * - Where to show the popup.
+     */
+    position?: import("../../typedefs").PopupPosition | undefined;
+    /**
+     * - The base element of
+     * {@link position}. If omitted, this will be {@link anchor}.
+     */
+    positionBaseElement?: HTMLElement | undefined;
+    /**
+     * - Whether to show the popup at the center of the screen on
+     * mobile/tablet and ignore the defined dropdown `position`.
+     */
+    touchOptimized?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Extra slot content.
+     */
+    extraContent?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Open` event handler.
+     */
+    onOpen?: ((event: CustomEvent) => void) | undefined;
+};

package/package/index.d.ts

@@ -37,6 +37,7 @@ export { default as MenuItemGroup } from "./components/menu/menu-item-group.svel
 export { default as MenuItemRadio } from "./components/menu/menu-item-radio.svelte";
 export { default as MenuItem } from "./components/menu/menu-item.svelte";
 export { default as Menu } from "./components/menu/menu.svelte";
+export { default as Progressbar } from "./components/progressbar/progressbar.svelte";
 export { default as RadioGroup } from "./components/radio/radio-group.svelte";
 export { default as Radio } from "./components/radio/radio.svelte";
 export { default as Combobox } from "./components/select/combobox.svelte";

package/package/index.js

@@ -62,6 +62,7 @@ export { default as MenuItemGroup } from './components/menu/menu-item-group.svel
 export { default as MenuItemRadio } from './components/menu/menu-item-radio.svelte';
 export { default as MenuItem } from './components/menu/menu-item.svelte';
 export { default as Menu } from './components/menu/menu.svelte';
+export { default as Progressbar } from './components/progressbar/progressbar.svelte';
 export { default as RadioGroup } from './components/radio/radio-group.svelte';
 export { default as Radio } from './components/radio/radio.svelte';
 export { default as Combobox } from './components/select/combobox.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.19.2",
+  "version": "0.20.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -28,50 +28,50 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "@lexical/code": "^0.18.0",
-    "@lexical/dragon": "^0.18.0",
-    "@lexical/history": "^0.18.0",
-    "@lexical/link": "^0.18.0",
-    "@lexical/list": "^0.18.0",
-    "@lexical/markdown": "^0.18.0",
-    "@lexical/rich-text": "^0.18.0",
-    "@lexical/selection": "^0.18.0",
-    "@lexical/table": "^0.18.0",
-    "@lexical/utils": "^0.18.0",
+    "@lexical/code": "^0.20.0",
+    "@lexical/dragon": "^0.20.0",
+    "@lexical/history": "^0.20.0",
+    "@lexical/link": "^0.20.0",
+    "@lexical/list": "^0.20.0",
+    "@lexical/markdown": "^0.20.0",
+    "@lexical/rich-text": "^0.20.0",
+    "@lexical/selection": "^0.20.0",
+    "@lexical/table": "^0.20.0",
+    "@lexical/utils": "^0.20.0",
     "@sveltia/utils": "^0.5.0",
-    "lexical": "^0.18.0"
+    "lexical": "^0.20.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.48.1",
-    "@sveltejs/adapter-auto": "^3.3.0",
-    "@sveltejs/kit": "^2.7.2",
-    "@sveltejs/package": "^2.3.6",
+    "@playwright/test": "^1.48.2",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.8.0",
+    "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "4.0.0",
-    "cspell": "^8.15.4",
+    "cspell": "^8.16.0",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsdoc": "^50.4.3",
     "eslint-plugin-svelte": "^2.46.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-html": "^1.7.0",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.7",
-    "sass": "^1.80.3",
+    "prettier-plugin-svelte": "^3.2.8",
+    "sass": "^1.80.6",
     "stylelint": "^16.10.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-scss": "^6.8.1",
-    "svelte": "5.0.5",
-    "svelte-check": "^4.0.5",
+    "svelte": "5.1.15",
+    "svelte-check": "^4.0.7",
     "svelte-i18n": "^4.0.1",
     "svelte-preprocess": "^6.0.3",
-    "tslib": "^2.8.0",
-    "vite": "^5.4.10",
-    "vitest": "^2.1.3"
+    "tslib": "^2.8.1",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.4"
   },
   "exports": {
     ".": {