@sveltia/ui 0.16.0 → 0.17.0

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

@@ -1,91 +1,17 @@
 export default TextInput;
-type TextInput = SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    required?: boolean | undefined;
-    value?: any;
-    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;
-} & {
+type TextInput = SvelteComponent<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
-} & {
-    element: HTMLInputElement | undefined;
-    class: string;
-    flex: boolean;
-    role: "textbox" | "searchbox" | "combobox" | "spinbutton";
-    hidden: boolean | undefined;
-    disabled: boolean;
-    readonly: boolean;
-    required: boolean;
-    invalid: boolean;
-    keyShortcuts: string | undefined;
-    name: string | undefined;
-    value: any;
-    showInlineLabel: boolean;
-    inputmode: "search" | "text" | "email" | "tel" | "numeric" | "decimal" | "url";
+    $$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
  */
-declare const TextInput: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    required?: boolean | undefined;
-    value?: any;
-    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>;
-}, {}, {
-    element: HTMLInputElement | undefined;
-    class: string;
-    flex: boolean;
-    role: "textbox" | "searchbox" | "combobox" | "spinbutton";
-    hidden: boolean | undefined;
-    disabled: boolean;
-    readonly: boolean;
-    required: boolean;
-    invalid: boolean;
-    keyShortcuts: string | undefined;
-    name: string | undefined;
-    value: any;
-    showInlineLabel: boolean;
-    inputmode: "search" | "text" | "email" | "tel" | "numeric" | "decimal" | "url";
-}, string>;
+}, {}, {}, "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;

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,64 @@
 export default Toast;
-type Toast = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    id?: number | undefined;
-    position?: ToastPosition | undefined;
-    show?: boolean | undefined;
-    duration?: number | undefined;
-}, {
-    default: {};
-}>, {
+type Toast = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$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/
  */
-declare const Toast: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    default: {};
-}>, {
+    /**
+     * - 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: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: 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;
+};
 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;

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>
 

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

@@ -1,44 +1,72 @@
 export default Toolbar;
-type Toolbar = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    hidden?: boolean | undefined;
-    variant?: "primary" | "secondary" | undefined;
-    orientation?: "vertical" | "horizontal" | undefined;
-}, {
-    default: {};
-}>, {
+type Toolbar = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * A toolbar layout that can contain `<Button>`, `<Select>` and other widgets.
  * @see https://w3c.github.io/aria/#toolbar
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
  */
-declare const Toolbar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const Toolbar: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
-    disabled?: boolean | undefined;
+    /**
+     * - Whether to hide the widget.
+     */
     hidden?: boolean | undefined;
-    variant?: "primary" | "secondary" | 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;
-}, {
-    default: {};
-}>, {
+    /**
+     * - The style variant of the toolbar.
+     */
+    variant?: "primary" | "secondary" | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: 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;
+};
 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;

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

@@ -8,10 +8,22 @@
   import { onMount } from 'svelte';
 
   /**
-   * Orientation of the app shell’s children.
-   * @type {'horizontal' | 'vertical' | undefined}
+   * @typedef {object} Props
+   * @property {'horizontal' | 'vertical' | undefined} [orientation] - Orientation of the app
+   * shell’s children..
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
    */
-  export let orientation = undefined;
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    orientation = 'horizontal',
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const stylesheets = [
     // https://fonts.google.com/share?selection.family=Merriweather%20Sans:ital,wght@0,300;0,600;1,300%7CNoto%20Sans%20Mono
@@ -22,7 +34,7 @@
   ];
 
   /** @type {HTMLElement | undefined} */
-  let fontLoader;
+  let fontLoader = $state();
 
   onMount(() => {
     const mediaQuery = globalThis.matchMedia('(prefers-color-scheme: dark)');
@@ -62,18 +74,18 @@
 </svelte:head>
 
 <!-- Preload fonts, including the icons -->
-<div class="font-loader" aria-hidden="true" bind:this={fontLoader} style:opacity="0">
+<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>
 
 <div
+  {...restProps}
   role="none"
   class="sui app-shell {orientation ?? ''}"
-  {...$$restProps}
-  on:dragover|preventDefault
-  on:drop|preventDefault
-  on:contextmenu={(event) => {
+  ondragover={(event) => event.preventDefault()}
+  ondrop={(event) => event.preventDefault()}
+  oncontextmenu={(event) => {
     // Enable the native context menu only in the developer mode or on text fields
     if (
       !document.documentElement.matches('[data-env="dev"]') &&
@@ -83,7 +95,7 @@
     }
   }}
 >
-  <slot />
+  {@render children?.()}
 </div>
 
 <style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300;1,600&family=Noto+Sans+Mono&display=swap");

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

@@ -1,42 +1,38 @@
 export default AppShell;
-type AppShell = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    orientation?: "vertical" | "horizontal" | undefined;
-}, {
-    default: {};
-}>, {
-    dragover: DragEvent;
-    drop: DragEvent;
-} & {
+type AppShell = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * 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
  * `<div style="display:contents">` in a SvelteKit app).
  */
-declare const AppShell: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const AppShell: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Orientation of the app
+     * shell’s children..
+     */
     orientation?: "horizontal" | "vertical" | undefined;
-}, {
-    default: {};
-}>, {
-    dragover: DragEvent;
-    drop: DragEvent;
-} & {
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - Orientation of the app
+     * shell’s children..
+     */
+    orientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | 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;

package/package/components/util/group.svelte

@@ -5,33 +5,38 @@
 -->
 <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 {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}
+   * @type {Props & Record<string, any>}
    */
-  export let disabled = false;
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    disabled = false,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <div
+  {...restProps}
   role="group"
   class="sui group {className}"
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
-  {...$$restProps}
 >
   <div role="none" class="inner" inert={disabled}>
-    <slot />
+    {@render children?.()}
   </div>
 </div>