@sveltia/ui 0.15.16 → 0.17.0

package/package/components/dialog/dialog.svelte.d.ts

@@ -1,94 +1,27 @@
-/** @typedef {typeof __propDef.props}  DialogProps */
-/** @typedef {typeof __propDef.events}  DialogEvents */
-/** @typedef {typeof __propDef.slots}  DialogSlots */
+export default Dialog;
+type Dialog = SvelteComponent<ModalProps & DialogProps & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "value" | "open" | undefined;
+};
 /**
  * A feedback dialog widget based on the HTML `<dialog>` element.
  * @see https://w3c.github.io/aria/#dialog
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
-export default class Dialog extends SvelteComponent<{
-    [x: string]: any;
-    title: string;
-    class?: string | undefined;
-    size?: "small" | "medium" | "large" | "x-large" | undefined;
-    role?: "dialog" | "alertdialog" | undefined;
-    open?: boolean | undefined;
-    lightDismiss?: boolean | undefined;
-    showClose?: boolean | undefined;
-    showOk?: boolean | undefined;
-    okLabel?: string | undefined;
-    okDisabled?: boolean | undefined;
-    showCancel?: boolean | undefined;
-    cancelLabel?: string | undefined;
-    cancelDisabled?: boolean | undefined;
-}, {
-    opening: CustomEvent<any>;
-    open: CustomEvent<any>;
-    ok: CustomEvent<any>;
-    cancel: CustomEvent<any>;
-    closing: CustomEvent<any>;
-    close: CustomEvent<any>;
-} & {
+declare const Dialog: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ModalProps & import("../../typedefs").DialogProps & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'extra-content': {
-        slot: string;
+}, {}, {}, "value" | "open">;
+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;
     };
-    header: {};
-    'header-extra': {};
-    'close-icon': {
-        slot: string;
-    };
-    default: {};
-    footer: {};
-    'footer-extra': {};
-}> {
+    z_$$bindings?: Bindings;
 }
-export type DialogProps = typeof __propDef.props;
-export type DialogEvents = typeof __propDef.events;
-export type DialogSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        title: string;
-        class?: string | undefined;
-        size?: "small" | "medium" | "large" | "x-large" | undefined;
-        role?: "dialog" | "alertdialog" | undefined;
-        open?: boolean | undefined;
-        lightDismiss?: boolean | undefined;
-        showClose?: boolean | undefined;
-        showOk?: boolean | undefined;
-        okLabel?: string | undefined;
-        okDisabled?: boolean | undefined;
-        showCancel?: boolean | undefined;
-        cancelLabel?: string | undefined;
-        cancelDisabled?: boolean | undefined;
-    };
-    events: {
-        opening: CustomEvent<any>;
-        open: CustomEvent<any>;
-        ok: CustomEvent<any>;
-        cancel: CustomEvent<any>;
-        closing: CustomEvent<any>;
-        close: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'extra-content': {
-            slot: string;
-        };
-        header: {};
-        'header-extra': {};
-        'close-icon': {
-            slot: string;
-        };
-        default: {};
-        footer: {};
-        'footer-extra': {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/package/components/dialog/prompt-dialog.svelte

@@ -7,82 +7,53 @@
   @see https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
 -->
 <script>
-  import Dialog from './dialog.svelte';
   import TextInput from '../text-field/text-input.svelte';
+  import Dialog from './dialog.svelte';
 
   /**
-   * The `class` attribute on the `<dialog>` element.
-   * @type {string}
-   */
-  let className = '';
-  export { className as class };
-  /**
-   * Whether to open the dialog.
-   * @type {boolean}
-   */
-  export let open = false;
-  /**
-   * Text label displayed on the header. Required.
-   * @type {string}
-   */
-  export let title;
-  /**
-   * Text label displayed on the OK button.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {string} [value] - Value entered on the textbox.
+   * @property {object} [textboxAttrs] - Extra attributes for the `<TextInput>`.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   * @property {import('svelte').Snippet} [input] - Input slot content.
    */
-  export let okLabel = '';
-  /**
-   * Whether to disable the OK button.
-   * @type {boolean}
-   */
-  export let okDisabled = false;
-  /**
-   * Text label displayed on the Cancel button.
-   * @type {string}
-   */
-  export let cancelLabel = '';
-  /**
-   * Value entered on the textbox.
-   * @type {string}
-   */
-  export let value = '';
+
   /**
-   * Extra attributes for the `<TextInput>`.
-   * @type {object}
+   * @type {import('../../typedefs').ModalProps & import('../../typedefs').DialogProps &
+   * import('../../typedefs').CommonEventHandlers & import('../../typedefs').InputEventHandlers &
+   * Props & Record<string, any>}
    */
-  export let textboxAttrs = {};
+  let {
+    /* eslint-disable prefer-const */
+    open = $bindable(false),
+    value = $bindable(''),
+    textboxAttrs = {},
+    children,
+    input,
+    onkeydown,
+    onkeyup,
+    onkeypress,
+    oninput,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
-<Dialog
-  role="alertdialog"
-  class={className}
-  bind:open
-  {title}
-  {okLabel}
-  {okDisabled}
-  {cancelLabel}
-  {...$$restProps}
-  on:opening
-  on:open
-  on:ok
-  on:cancel
-  on:closing
-  on:close
->
-  <slot />
+<Dialog {...restProps} bind:open role="alertdialog">
+  {@render children?.()}
   <div class="input-outer">
-    {#if $$slots.input}
-      <slot name="input" />
+    {#if input}
+      {@render input()}
     {:else}
       <TextInput
         bind:value
         flex
         autofocus
         {...textboxAttrs}
-        on:input
-        on:keydown
-        on:keyup
-        on:keypress
+        {onkeydown}
+        {onkeyup}
+        {onkeypress}
+        {oninput}
       />
     {/if}
   </div>

package/package/components/dialog/prompt-dialog.svelte.d.ts

@@ -1,6 +1,9 @@
-/** @typedef {typeof __propDef.props}  PromptDialogProps */
-/** @typedef {typeof __propDef.events}  PromptDialogEvents */
-/** @typedef {typeof __propDef.slots}  PromptDialogSlots */
+export default PromptDialog;
+type PromptDialog = SvelteComponent<ModalProps & DialogProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "value" | "open" | undefined;
+};
 /**
  * A modal prompt dialog. It shows the OK and Cancel buttons as well as a textbox, just like
  * `window.prompt()`.
@@ -8,69 +11,54 @@
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
  */
-export default class PromptDialog extends SvelteComponent<{
-    [x: string]: any;
-    title: string;
-    class?: string | undefined;
+declare const PromptDialog: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ModalProps & import("../../typedefs").DialogProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & {
+    /**
+     * - Value entered on the textbox.
+     */
     value?: string | undefined;
-    open?: boolean | undefined;
-    okLabel?: string | undefined;
-    okDisabled?: boolean | undefined;
-    cancelLabel?: string | undefined;
+    /**
+     * - Extra attributes for the `<TextInput>`.
+     */
     textboxAttrs?: object | undefined;
-}, {
-    opening: CustomEvent<any>;
-    open: CustomEvent<any>;
-    ok: CustomEvent<any>;
-    cancel: CustomEvent<any>;
-    closing: CustomEvent<any>;
-    close: CustomEvent<any>;
-    input: Event;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-} & {
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Input slot content.
+     */
+    input?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    input: {};
-}> {
-}
-export type PromptDialogProps = typeof __propDef.props;
-export type PromptDialogEvents = typeof __propDef.events;
-export type PromptDialogSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        title: string;
-        class?: string | undefined;
-        value?: string | undefined;
-        open?: boolean | undefined;
-        okLabel?: string | undefined;
-        okDisabled?: boolean | undefined;
-        cancelLabel?: string | undefined;
-        textboxAttrs?: object | undefined;
-    };
-    events: {
-        opening: CustomEvent<any>;
-        open: CustomEvent<any>;
-        ok: CustomEvent<any>;
-        cancel: CustomEvent<any>;
-        closing: CustomEvent<any>;
-        close: CustomEvent<any>;
-        input: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        keypress: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        input: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+}, {}, {}, "value" | "open">;
+type Props = {
+    /**
+     * - Value entered on the textbox.
+     */
+    value?: string | undefined;
+    /**
+     * - Extra attributes for the `<TextInput>`.
+     */
+    textboxAttrs?: object | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Input slot content.
+     */
+    input?: 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/disclosure/disclosure.svelte

@@ -4,55 +4,56 @@
   @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
   @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
 -->
-<svelte:options accessors={true} />
-
 <script>
   import { generateElementId } from '@sveltia/utils/element';
-  import { createEventDispatcher } from 'svelte';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
 
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
-   */
-  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;
-  /**
-   * Whether to show the content. An alias of the `aria-expanded` attribute.
-   * @type {boolean}
+   * @typedef {object} Props
+   * @property {string} [class] - The `class` attribute on the wrapper element.
+   * @property {boolean} [hidden] - Whether to hide the widget. An alias of the `aria-hidden`
+   * attribute.
+   * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+   * attribute.
+   * @property {boolean} [expanded] - Whether to show the content. An alias of the `aria-expanded`
+   * attribute.
+   * @property {string} [label] - Text label displayed next to the expander.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   * @property {import('svelte').Snippet} [chevronIcon] - Chevron slot content.
+   * @property {(event: CustomEvent) => void} [onChange] - Custom `Change` event handler.
    */
-  export let expanded = false;
+
   /**
-   * Text label displayed next to the expander.
-   * @type {string}
+   * @type {Props & Record<string, any>}
    */
-  export let label = '';
+  let {
+    /* eslint-disable prefer-const */
+    expanded = $bindable(false),
+    class: className,
+    hidden = false,
+    disabled = false,
+    label = '',
+    children,
+    chevronIcon,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
-  const dispatch = createEventDispatcher();
   const id = generateElementId('disclosure');
 </script>
 
 <div
+  {...restProps}
   role="group"
   {id}
   class="sui disclosure {className}"
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-labelledby="{id}-header"
   aria-roledescription="disclosure"
-  {...$$restProps}
 >
   <div role="none" class="inner" inert={disabled}>
     <Button
@@ -61,18 +62,22 @@
       {disabled}
       aria-controls="{id}-content"
       aria-expanded={expanded}
-      on:click={() => {
+      onclick={() => {
         expanded = !expanded;
-        dispatch('change', { expanded });
+        onChange?.(new CustomEvent('change', { detail: { expanded } }));
       }}
     >
-      <slot name="chevron-icon" slot="start-icon">
-        <Icon name="expand_more" />
-      </slot>
+      {#snippet startIcon()}
+        {#if chevronIcon}
+          {@render chevronIcon()}
+        {:else}
+          <Icon name="expand_more" />
+        {/if}
+      {/snippet}
       {label}
     </Button>
     <div class="content" id="{id}-content" hidden={!expanded}>
-      <slot />
+      {@render children?.()}
     </div>
   </div>
 </div>

package/package/components/disclosure/disclosure.svelte.d.ts

@@ -1,69 +1,100 @@
-/** @typedef {typeof __propDef.props}  DisclosureProps */
-/** @typedef {typeof __propDef.events}  DisclosureEvents */
-/** @typedef {typeof __propDef.slots}  DisclosureSlots */
+export default Disclosure;
+type Disclosure = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "expanded" | undefined;
+};
 /**
  * A disclosure (expander) widget. The equivalent of the HTML `<details>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
  */
-export default class Disclosure extends SvelteComponent<{
-    [x: string]: any;
+declare const Disclosure: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
+    /**
+     * - Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
     disabled?: boolean | undefined;
+    /**
+     * - Whether to show the content. An alias of the `aria-expanded`
+     * attribute.
+     */
+    expanded?: boolean | undefined;
+    /**
+     * - Text label displayed next to the expander.
+     */
     label?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Chevron slot content.
+     */
+    chevronIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+} & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "expanded">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
     hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether to show the content. An alias of the `aria-expanded`
+     * attribute.
+     */
     expanded?: boolean | undefined;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    'chevron-icon': {
-        slot: string;
+    /**
+     * - Text label displayed next to the expander.
+     */
+    label?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Chevron slot content.
+     */
+    chevronIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | 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;
     };
-    default: {};
-}> {
-    /**accessor*/
-    set class(_: string | undefined);
-    get class(): string | undefined;
-    /**accessor*/
-    set hidden(_: boolean | undefined);
-    get hidden(): boolean | undefined;
-    /**accessor*/
-    set disabled(_: boolean | undefined);
-    get disabled(): boolean | undefined;
-    /**accessor*/
-    set expanded(_: boolean | undefined);
-    get expanded(): boolean | undefined;
-    /**accessor*/
-    set label(_: string | undefined);
-    get label(): string | undefined;
+    z_$$bindings?: Bindings;
 }
-export type DisclosureProps = typeof __propDef.props;
-export type DisclosureEvents = typeof __propDef.events;
-export type DisclosureSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        label?: string | undefined;
-        hidden?: boolean | undefined;
-        expanded?: boolean | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'chevron-icon': {
-            slot: string;
-        };
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/package/components/divider/divider.svelte

@@ -5,30 +5,34 @@
 -->
 <script>
   /**
-   * CSS class name 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. An alias of the `aria-hidden`
+   * attribute.
+   * @property {'horizontal'|'vertical'} [orientation] - Orientation of the widget. An alias of the
+   * `aria-orientation` attribute.
    */
-  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;
+
   /**
-   * Orientation of the widget. An alias of the `aria-orientation` attribute.
-   * @type {'horizontal' | 'vertical'}
+   * @type {Props & Record<string, any>}
    */
-  export let orientation = 'horizontal';
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    orientation = 'horizontal',
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <div
+  {...restProps}
   role="separator"
   class="sui divider {className}"
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
   aria-orientation={orientation}
-  {...$$restProps}
 ></div>
 
 <style>.divider {