@sveltia/ui 0.16.0 → 0.17.1

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

@@ -1,114 +1,17 @@
 export default Dialog;
-type Dialog = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    'extra-content': {
-        slot: string;
-    };
-    header: {};
-    'header-extra': {};
-    'close-icon': {
-        slot: string;
-    };
-    default: {};
-    footer: {};
-    'footer-extra': {};
-}>, {
-    opening: CustomEvent<any>;
-    open: CustomEvent<any>;
-    ok: CustomEvent<any>;
-    cancel: CustomEvent<any>;
-    closing: CustomEvent<any>;
-    close: CustomEvent<any>;
-} & {
+type Dialog = SvelteComponent<ModalProps & DialogProps & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'extra-content': {
-        slot: string;
-    };
-    header: {};
-    'header-extra': {};
-    'close-icon': {
-        slot: string;
-    };
-    default: {};
-    footer: {};
-    'footer-extra': {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$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/
  */
-declare const Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    'extra-content': {
-        slot: string;
-    };
-    header: {};
-    'header-extra': {};
-    'close-icon': {
-        slot: string;
-    };
-    default: {};
-    footer: {};
-    'footer-extra': {};
-}>, {
-    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;
-    };
-    header: {};
-    'header-extra': {};
-    'close-icon': {
-        slot: string;
-    };
-    default: {};
-    footer: {};
-    'footer-extra': {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+}, {}, {}, "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;

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,35 +1,8 @@
 export default PromptDialog;
-type PromptDialog = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    default: {};
-    input: {};
-}>, {
-    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;
-} & {
+type PromptDialog = SvelteComponent<ModalProps & DialogProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    input: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "value" | "open" | undefined;
 };
 /**
  * A modal prompt dialog. It shows the OK and Cancel buttons as well as a textbox, just like
@@ -38,41 +11,44 @@ type PromptDialog = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
  */
-declare const PromptDialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    default: {};
-    input: {};
-}>, {
-    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: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+}, {}, {}, "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;
+};
 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/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,72 +1,90 @@
 export default Disclosure;
-type Disclosure = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    label?: string | undefined;
-    hidden?: boolean | undefined;
-    expanded?: boolean | undefined;
-}, {
-    'chevron-icon': {
-        slot: string;
-    };
-    default: {};
-}>, {
-    change: CustomEvent<any>;
-} & {
+type Disclosure = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'chevron-icon': {
-        slot: string;
-    };
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-} & {
-    class: string;
-    hidden: boolean | undefined;
-    disabled: boolean;
-    expanded: boolean;
-    label: string;
+}, {}> & {
+    $$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/
  */
-declare const Disclosure: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    'chevron-icon': {
-        slot: string;
-    };
-    default: {};
-}>, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    'chevron-icon': {
-        slot: string;
-    };
-    default: {};
-}, {
-    class: string;
-    hidden: boolean | undefined;
-    disabled: boolean;
-    expanded: boolean;
-    label: string;
-}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+    /**
+     * - 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;

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 {