@sveltia/ui 0.15.16 → 0.17.0

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

@@ -4,90 +4,38 @@
   @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
   @see https://w3c.github.io/aria/#textbox
 -->
-<svelte:options accessors={true} />
-
 <script>
   import { generateElementId } from '@sveltia/utils/element';
-  import { activateKeyShortcuts } from '../../services/events';
+  import { activateKeyShortcuts } from '../../services/events.svelte';
 
   /**
-   * Reference to the `<input>` element.
-   * @type {HTMLInputElement | undefined}
-   */
-  export let element = undefined;
-  /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
-   */
-  let className = '';
-  export { className as class };
-  /**
-   * Make the text input container flexible.
-   * @type {boolean}
-   */
-  export let flex = false;
-  /**
-   * The `role` attribute on the `<input>` element.
-   * @type {'textbox' | 'searchbox' | 'combobox' | 'spinbutton'}
-   */
-  export let role = 'textbox';
-  /**
-   * 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;
-  /**
-   * Keyboard shortcuts. An alias of the `aria-keyshortcuts` attribute. Accepts the special `Accel`
-   * key, which will be replaced with `Control` or `Meta` depending on the user’s operating system.
-   * @type {string | undefined}
-   */
-  export let keyShortcuts = undefined;
-  /**
-   * The `name` attribute on the `<input>` element.
-   * @type {string | undefined}
-   */
-  export let name = undefined;
-  /**
-   * Input value.
-   * @type {string | number | undefined}
-   */
-  export let value = undefined;
-  /**
-   * Whether to display `aria-label` over the `<input>` element if it’s empty, just like how the
-   * HTML `placeholder` attribute works.
-   * @type {boolean}
-   */
-  export let showInlineLabel = false;
-  /**
-   * The `inputmode` attribute on the `<input>`.
-   * @type {'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'}
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+   * @type {import('../../typedefs').TextInputProps & import('../../typedefs').CommonEventHandlers &
+   * import('../../typedefs').InputEventHandlers & Record<string, any>}
    */
-  export let inputmode = 'text';
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(),
+    element = $bindable(),
+    role = 'textbox',
+    keyShortcuts = undefined,
+    name = undefined,
+    showInlineLabel = false,
+    inputmode = 'text',
+    flex = false,
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    'aria-label': ariaLabel,
+    children,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const id = generateElementId('input');
-
-  $: ariaLabel = $$restProps['aria-label'];
 </script>
 
 <div
@@ -96,9 +44,12 @@
   class:flex
   class:disabled
   class:readonly
-  hidden={hidden || undefined}
+  {hidden}
 >
   <input
+    bind:this={element}
+    {...restProps}
+    bind:value
     type="text"
     {role}
     name={name || undefined}
@@ -111,14 +62,7 @@
     aria-readonly={readonly}
     aria-required={required}
     aria-invalid={invalid}
-    {...$$restProps}
-    bind:this={element}
-    bind:value
-    on:keydown
-    on:keyup
-    on:keypress
-    on:input
-    on:change
+    {onChange}
     use:activateKeyShortcuts={keyShortcuts}
   />
   {#if ariaLabel && showInlineLabel}

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

@@ -1,112 +1,27 @@
-/** @typedef {typeof __propDef.props}  TextInputProps */
-/** @typedef {typeof __propDef.events}  TextInputEvents */
-/** @typedef {typeof __propDef.slots}  TextInputSlots */
+export default TextInput;
+type TextInput = SvelteComponent<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "value" | "element" | undefined;
+};
 /**
  * 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
  * @see https://w3c.github.io/aria/#textbox
  */
-export default class TextInput extends SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    required?: boolean | undefined;
-    value?: string | number | undefined;
-    role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
-    hidden?: boolean | undefined;
-    element?: HTMLInputElement | undefined;
-    readonly?: boolean | undefined;
-    keyShortcuts?: string | undefined;
-    flex?: boolean | undefined;
-    showInlineLabel?: boolean | undefined;
-    inputmode?: "search" | "text" | "email" | "tel" | "numeric" | "decimal" | "url" | undefined;
-}, {
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    input: Event;
-    change: Event;
-} & {
+declare const TextInput: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-    /**accessor*/
-    set element(_: HTMLInputElement | undefined);
-    get element(): HTMLInputElement | undefined;
-    /**accessor*/
-    set class(_: string | undefined);
-    get class(): string | undefined;
-    /**accessor*/
-    set flex(_: boolean | undefined);
-    get flex(): boolean | undefined;
-    /**accessor*/
-    set role(_: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined);
-    get role(): "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
-    /**accessor*/
-    set hidden(_: boolean | undefined);
-    get hidden(): boolean | undefined;
-    /**accessor*/
-    set disabled(_: boolean | undefined);
-    get disabled(): boolean | undefined;
-    /**accessor*/
-    set readonly(_: boolean | undefined);
-    get readonly(): boolean | undefined;
-    /**accessor*/
-    set required(_: boolean | undefined);
-    get required(): boolean | undefined;
-    /**accessor*/
-    set invalid(_: boolean | undefined);
-    get invalid(): boolean | undefined;
-    /**accessor*/
-    set keyShortcuts(_: string | undefined);
-    get keyShortcuts(): string | undefined;
-    /**accessor*/
-    set name(_: string | undefined);
-    get name(): string | undefined;
-    /**accessor*/
-    set value(_: string | number | undefined);
-    get value(): string | number | undefined;
-    /**accessor*/
-    set showInlineLabel(_: boolean | undefined);
-    get showInlineLabel(): boolean | undefined;
-    /**accessor*/
-    set inputmode(_: "search" | "text" | "email" | "tel" | "numeric" | "decimal" | "url" | undefined);
-    get inputmode(): "search" | "text" | "email" | "tel" | "numeric" | "decimal" | "url" | undefined;
-}
-export type TextInputProps = typeof __propDef.props;
-export type TextInputEvents = typeof __propDef.events;
-export type TextInputSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        name?: string | undefined;
-        disabled?: boolean | undefined;
-        invalid?: boolean | undefined;
-        required?: boolean | undefined;
-        value?: string | number | undefined;
-        role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
-        hidden?: boolean | undefined;
-        element?: HTMLInputElement | undefined;
-        readonly?: boolean | undefined;
-        keyShortcuts?: string | undefined;
-        flex?: boolean | undefined;
-        showInlineLabel?: boolean | undefined;
-        inputmode?: "search" | "text" | "email" | "tel" | "numeric" | "decimal" | "url" | undefined;
+}, {}, {}, "value" | "element">;
+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;
     };
-    events: {
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        keypress: KeyboardEvent;
-        input: Event;
-        change: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+    z_$$bindings?: Bindings;
+}

package/package/components/toast/toast.svelte

@@ -5,46 +5,49 @@
   @see https://developer.chrome.com/blog/introducing-popover-api/
 -->
 <script>
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
 
   /**
-   * 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.
-   * @type {number | undefined}
+   * @typedef {object} Props
+   * @property {string | number | undefined} [id] - 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.
+   * @property {boolean} [show] - Whether to show the toast.
+   * @property {number} [duration] - Duration to automatically hide the toast. Use `0` to hide it
+   * manually from the consumer.
+   * @property {import('../../typedefs').ToastPosition} [position] - Position of the toast.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
    */
-  export let id = undefined;
-  /**
-   * Whether to show the toast.
-   * @type {boolean}
-   */
-  export let show = false;
-  /**
-   * Duration to automatically hide the toast. Use `0` to hide it manually from the consumer.
-   * @type {number}
-   */
-  export let duration = 5000;
+
   /**
-   * Position of the toast.
-   * @type {import('../../typedefs').ToastPosition}
+   * @type {Props & Record<string, any>}
    */
-  export let position = 'bottom-right';
+  let {
+    /* eslint-disable prefer-const */
+    show = $bindable(false),
+    id = undefined,
+    duration = 5000,
+    position = 'bottom-right',
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   /**
    * @type {HTMLElement | undefined}
    */
-  let popoverBase;
+  let popoverBase = $state();
   /**
    * @type {HTMLElement | undefined}
    */
-  let popover;
+  let popover = $state();
   /**
    * @type {HTMLElement | undefined}
    */
-  let toast;
+  let toast = $state();
   /**
    * @type {number}
    */
-  let timerId = 0;
+  let timerId = $state(0);
 
   onMount(() => {
     popover =
@@ -72,30 +75,33 @@
     };
   });
 
-  $: {
+  $effect(() => {
     if (popover && toast) {
       popover.appendChild(toast);
     }
-  }
+  });
 
-  $: {
+  $effect(() => {
     void id;
     void show;
     void duration;
-    globalThis.clearTimeout(timerId);
+
+    untrack(() => {
+      globalThis.clearTimeout(timerId);
+    });
 
     if (show && duration) {
       timerId = globalThis.setTimeout(() => {
         show = false;
       }, duration);
     }
-  }
+  });
 </script>
 
-<div role="none" class="sui toast-base" bind:this={popoverBase}></div>
+<div bind:this={popoverBase} role="none" class="sui toast-base"></div>
 
-<div class="sui toast {position}" aria-hidden={!show} bind:this={toast} {...$$restProps}>
-  <slot />
+<div {...restProps} bind:this={toast} class="sui toast {position}" aria-hidden={!show}>
+  {@render children?.()}
 </div>
 
 <style>.toast-base {

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

@@ -1,42 +1,74 @@
-/** @typedef {typeof __propDef.props}  ToastProps */
-/** @typedef {typeof __propDef.events}  ToastEvents */
-/** @typedef {typeof __propDef.slots}  ToastSlots */
+export default Toast;
+type Toast = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "show" | undefined;
+};
 /**
  * Toast/snackbar notification. Use the Popover API if possible to acquire a non-modal top layer.
  * @see https://w3c.github.io/aria/#alert
  * @see https://developer.chrome.com/blog/introducing-popover-api/
  */
-export default class Toast extends SvelteComponent<{
-    [x: string]: any;
-    id?: number | undefined;
-    position?: import("../../typedefs").ToastPosition | undefined;
+declare const Toast: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - 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;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ToastProps = typeof __propDef.props;
-export type ToastEvents = typeof __propDef.events;
-export type ToastSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id?: number | undefined;
-        position?: import("../../typedefs").ToastPosition | undefined;
-        show?: boolean | undefined;
-        duration?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+}, {}, {}, "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;
 };
-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/toolbar/toolbar.svelte

@@ -6,44 +6,44 @@
 -->
 <script>
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @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 {'horizontal' | 'vertical'} [orientation] - Orientation of the widget. An alias of
+   * the `aria-orientation` attribute.
+   * @property {'primary' | 'secondary' | undefined} [variant] - The style variant of the toolbar.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
    */
-  let className = '';
-  export { className as class };
-  /**
-   * 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;
-  /**
-   * Orientation of the widget. An alias of the `aria-orientation` attribute.
-   * @type {'horizontal' | 'vertical'}
-   */
-  export let orientation = 'horizontal';
+
   /**
-   * The style variant of the toolbar.
-   * @type {'primary' | 'secondary' | undefined}
+   * @type {Props & Record<string, any>}
    */
-  export let variant = undefined;
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    disabled = false,
+    orientation = 'horizontal',
+    variant = undefined,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <div
+  {...restProps}
   role="toolbar"
   class="sui toolbar {orientation} {variant ?? ''} {className}"
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-orientation={orientation}
-  {...$$restProps}
 >
   <div role="none" class="inner" inert={disabled}>
-    <slot />
+    {@render children?.()}
   </div>
 </div>