@sveltia/ui 0.15.16 → 0.17.0

package/package/components/tabs/tab.svelte

@@ -8,41 +8,44 @@
   import Button from '../button/button.svelte';
 
   /**
-   * The `class` attribute on the `<button>` element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {boolean} [selected] - Whether to select the widget. An alias of the `aria-selected`
+   * attribute.
    */
-  let className = '';
-  export { className as class };
-  /**
-   * Whether to select the widget. An alias of the `aria-selected` attribute.
-   * @type {boolean}
-   */
-  export let selected = false;
-  /**
-   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
-   * @type {boolean | undefined}
-   */
-  export let hidden = undefined;
+
   /**
-   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
-   * @type {boolean}
+   * @type {import('../../typedefs').ButtonProps & import('../../typedefs').CommonEventHandlers &
+   * Props & Record<string, any>}
    */
-  export let disabled = false;
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    disabled = false,
+    selected = false,
+    children: _children,
+    startIcon: _startIcon,
+    endIcon: _endIcon,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <Button
+  {...restProps}
   role="tab"
   class="sui tab {className}"
   {hidden}
   {disabled}
   aria-selected={selected}
-  {...$$restProps}
-  on:focus
-  on:blur
-  on:select
-  on:change
 >
-  <slot name="start-icon" slot="start-icon" />
-  <slot />
-  <slot name="end-icon" slot="end-icon" />
+  {#snippet startIcon()}
+    {@render _startIcon?.()}
+  {/snippet}
+  {#snippet children()}
+    {@render _children?.()}
+  {/snippet}
+  {#snippet endIcon()}
+    {@render _endIcon?.()}
+  {/snippet}
 </Button>

package/package/components/tabs/tab.svelte.d.ts

@@ -1,64 +1,40 @@
-/** @typedef {typeof __propDef.props}  TabProps */
-/** @typedef {typeof __propDef.events}  TabEvents */
-/** @typedef {typeof __propDef.slots}  TabSlots */
+export default Tab;
+type Tab = SvelteComponent<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
 /**
  * A tab widget.
  * @see https://w3c.github.io/aria/#tab
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
-export default class Tab extends SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    hidden?: boolean | undefined;
+declare const Tab: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+    /**
+     * - Whether to select the widget. An alias of the `aria-selected`
+     * attribute.
+     */
     selected?: boolean | undefined;
-}, {
-    focus: FocusEvent;
-    blur: FocusEvent;
-    select: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'start-icon': {
-        slot: string;
-    };
-    default: {};
-    'end-icon': {
-        slot: string;
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - Whether to select the widget. An alias of the `aria-selected`
+     * attribute.
+     */
+    selected?: boolean | undefined;
+};
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-}> {
+    z_$$bindings?: Bindings;
 }
-export type TabProps = typeof __propDef.props;
-export type TabEvents = typeof __propDef.events;
-export type TabSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        hidden?: boolean | undefined;
-        selected?: boolean | undefined;
-    };
-    events: {
-        focus: FocusEvent;
-        blur: FocusEvent;
-        select: CustomEvent<any>;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'start-icon': {
-            slot: string;
-        };
-        default: {};
-        'end-icon': {
-            slot: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/package/components/text-editor/lexical-root.svelte

@@ -2,35 +2,37 @@
   import { getContext, onMount } from 'svelte';
 
   /**
-   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
-   * @type {boolean | undefined}
+   * @typedef {object} Props
+   * @property {string | undefined} [value] - Input value.
+   * @property {string} [class] - The `class` attribute on the wrapper element.
+   * @property {boolean} [hidden] - Whether to hide the widget.
+   * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+   * attribute.
+   * @property {boolean} [readonly] - Whether to make the widget read-only. An alias of the
+   * `aria-readonly` attribute.
+   * @property {boolean} [required] - Whether to mark the widget required. An alias of the
+   * `aria-required` attribute.
+   * @property {boolean} [invalid] - Whether to mark the widget invalid. An alias of the
+   * `aria-invalid` attribute.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
    */
-  export let hidden = undefined;
-  /**
-   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
-   * @type {boolean}
-   */
-  export let disabled = false;
-  /**
-   * Whether to disable the widget. An alias of `aria-readonly` attribute.
-   * @type {boolean}
-   */
-  export let readonly = false;
-  /**
-   * Whether to mark the widget required. An alias of the `aria-required` attribute.
-   * @type {boolean}
-   */
-  export let required = false;
-  /**
-   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
-   * @type {boolean}
-   */
-  export let invalid = false;
+
   /**
-   * Input value.
-   * @type {string | undefined}
+   * @type {Props & Record<string, any>}
    */
-  export let value = undefined;
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(),
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   /**
    * Text editor state.
@@ -43,10 +45,13 @@
    * Reference to the Lexical editor root element.
    * @type {HTMLElement | undefined}
    */
-  let lexicalRoot = undefined;
+  let lexicalRoot = $state();
 
-  $: editable = !(disabled || readonly);
-  $: $editor?.setEditable(editable);
+  const editable = $derived(!(disabled || readonly));
+
+  $effect(() => {
+    $editor?.setEditable(editable);
+  });
 
   /**
    * Update {@link value} and other state variables whenever the editor content is updated.
@@ -88,14 +93,16 @@
     };
   });
 
-  $: {
+  $effect(() => {
     if ($editor && lexicalRoot) {
       $editor.setRootElement(lexicalRoot);
     }
-  }
+  });
 </script>
 
 <div
+  bind:this={lexicalRoot}
+  {...restProps}
   role="textbox"
   aria-multiline="true"
   aria-hidden={hidden}
@@ -107,7 +114,6 @@
   id="{$editorId}-lexical-root"
   contenteditable={editable}
   {hidden}
-  bind:this={lexicalRoot}
 ></div>
 
 <style>.lexical-root {

package/package/components/text-editor/lexical-root.svelte.d.ts

@@ -1,35 +1,97 @@
-/** @typedef {typeof __propDef.props}  LexicalRootProps */
-/** @typedef {typeof __propDef.events}  LexicalRootEvents */
-/** @typedef {typeof __propDef.slots}  LexicalRootSlots */
-export default class LexicalRoot extends SvelteComponent<{
+export default LexicalRoot;
+type LexicalRoot = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "value" | undefined;
+};
+declare const LexicalRoot: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Input value.
+     */
+    value?: string | 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;
-    invalid?: 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;
+} & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type Props = {
+    /**
+     * - Input value.
+     */
     value?: string | 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;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type LexicalRootProps = typeof __propDef.props;
-export type LexicalRootEvents = typeof __propDef.events;
-export type LexicalRootSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        disabled?: boolean | undefined;
-        invalid?: boolean | undefined;
-        required?: boolean | undefined;
-        value?: string | undefined;
-        hidden?: boolean | undefined;
-        readonly?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: 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;
 };
-export {};
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -4,7 +4,7 @@
 -->
 <script>
   import { generateElementId } from '@sveltia/utils/element';
-  import { onMount, setContext } from 'svelte';
+  import { onMount, setContext, untrack } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { writable } from 'svelte/store';
   import { blockButtonTypes, inlineButtonTypes } from '.';
@@ -16,51 +16,43 @@
   import EditorToolbar from './toolbar/editor-toolbar.svelte';
 
   /**
-   * Make the text input container flexible.
-   * @type {boolean}
+   * @typedef {object} Props
+   * @property {string | undefined} [value] - Input value.
+   * @property {boolean} [flex] - Make the text input container flexible.
+   * @property {import('../../typedefs').TextEditorMode[]} [modes] - Enabled modes.
+   * @property {(import('../../typedefs').TextEditorBlockType |
+   * import('../../typedefs').TextEditorInlineType)[]} [buttons] - Enabled buttons.
+   * @property {string} [class] - The `class` attribute on the wrapper element.
+   * @property {boolean} [hidden] - Whether to hide the widget.
+   * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+   * attribute.
+   * @property {boolean} [readonly] - Whether to make the widget read-only. An alias of the
+   * `aria-readonly` attribute.
+   * @property {boolean} [required] - Whether to mark the widget required. An alias of the
+   * `aria-required` attribute.
+   * @property {boolean} [invalid] - Whether to mark the widget invalid. An alias of the
+   * `aria-invalid` attribute.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
    */
-  export let flex = false;
-  /**
-   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
-   * @type {boolean | undefined}
-   */
-  export let hidden = undefined;
-  /**
-   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
-   * @type {boolean}
-   */
-  export let disabled = false;
-  /**
-   * Whether to disable the widget. An alias of `aria-readonly` attribute.
-   * @type {boolean}
-   */
-  export let readonly = false;
-  /**
-   * Whether to mark the widget required. An alias of the `aria-required` attribute.
-   * @type {boolean}
-   */
-  export let required = false;
-  /**
-   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
-   * @type {boolean}
-   */
-  export let invalid = false;
-  /**
-   * Input value.
-   * @type {string | undefined}
-   */
-  export let value = undefined;
-  /**
-   * Enabled modes.
-   * @type {import('../../typedefs').TextEditorMode[]}
-   */
-  export let modes = ['rich-text', 'plain-text'];
+
   /**
-   * Enabled buttons.
-   * @type {(import('../../typedefs').TextEditorBlockType |
-   * import('../../typedefs').TextEditorInlineType)[]}
+   * @type {Props & Record<string, any>}
    */
-  export let buttons = [...inlineButtonTypes, ...blockButtonTypes];
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(''),
+    flex = false,
+    modes = ['rich-text', 'plain-text'],
+    buttons = [...inlineButtonTypes, ...blockButtonTypes],
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   /** @type {import('svelte/store').Writable<import('lexical').LexicalEditor | undefined>} */
   const editor = writable();
@@ -69,8 +61,8 @@
   const editorId = writable(generateElementId('editor'));
   const useRichText = writable(modes[0] === 'rich-text');
   const hasConverterError = writable(false);
-  let inputValue = '';
-  let showConverterError = false;
+  let inputValue = $state('');
+  let showConverterError = $state(false);
 
   /**
    * Convert the Markdown {@link inputValue} to Lexical nodes. Disable the rich text mode and
@@ -94,54 +86,46 @@
     }
   };
 
-  /**
-   * Update {@link inputValue} based on {@link value}.
-   */
-  const setInputValue = () => {
+  $effect(() => {
+    if (!$editor) {
+      return;
+    }
+
     const newValue = value;
 
     // Avoid a cycle dependency & infinite loop
-    if (inputValue !== newValue) {
-      inputValue = newValue ?? '';
+    untrack(() => {
+      if (inputValue !== newValue) {
+        inputValue = newValue ?? '';
 
-      if ($useRichText) {
-        convertMarkdown();
+        if ($useRichText) {
+          convertMarkdown();
+        }
       }
+    });
+  });
+
+  $effect(() => {
+    if (!$editor) {
+      return;
     }
-  };
 
-  /**
-   * Update {@link value} based on {@link inputValue}.
-   */
-  const setCurrentValue = () => {
     const newValue = inputValue;
 
     // Avoid a cycle dependency & infinite loop
-    if (value !== newValue) {
-      value = newValue;
-    }
-  };
-
-  $: {
-    if ($editor) {
-      void value;
-      setInputValue();
-    }
-  }
-
-  $: {
-    if ($editor) {
-      void inputValue;
-      setCurrentValue();
-    }
-  }
+    untrack(() => {
+      if (value !== newValue) {
+        value = newValue;
+      }
+    });
+  });
 
-  $: {
+  $effect(() => {
     if ($hasConverterError) {
       $useRichText = false;
       showConverterError = true;
     }
-  }
+  });
 
   // The editor has to be initialized in the browser
   onMount(() => {
@@ -164,7 +148,7 @@
   );
 </script>
 
-<div role="none" class="sui text-editor" hidden={hidden || undefined} {...$$restProps}>
+<div {...restProps} role="none" class="sui text-editor" {hidden}>
   <EditorToolbar {disabled} {readonly} />
   <LexicalRoot
     bind:value={inputValue}