@sveltia/ui 0.15.16 → 0.17.0

package/package/components/listbox/listbox.svelte.d.ts

@@ -1,59 +1,131 @@
-/** @typedef {typeof __propDef.props}  ListboxProps */
-/** @typedef {typeof __propDef.events}  ListboxEvents */
-/** @typedef {typeof __propDef.slots}  ListboxSlots */
+export default Listbox;
+type Listbox = SvelteComponent<KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
 /**
  * A list widget with selectable options. The equivalent of the HTML `<select multiple>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
  * @see https://w3c.github.io/aria/#listbox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
  */
-export default class Listbox extends SvelteComponent<{
-    [x: string]: any;
+declare const Listbox: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+    /**
+     * - 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 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;
+    /**
+     * - Whether to allow selecting more than one `<Option>`. An alias
+     * of the `aria-multiselectable` attribute.
+     */
     multiple?: boolean | undefined;
-    required?: boolean | undefined;
+    /**
+     * - Search terms to be used to filter the items.
+     */
+    searchTerms?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Filter` event handler.
+     */
+    onFilter?: ((event: CustomEvent) => void) | undefined;
+} & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+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 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;
+    /**
+     * - Whether to allow selecting more than one `<Option>`. An alias
+     * of the `aria-multiselectable` attribute.
+     */
+    multiple?: boolean | undefined;
+    /**
+     * - Search terms to be used to filter the items.
+     */
     searchTerms?: string | undefined;
-}, {
-    click: MouseEvent;
-    filter: Event | KeyboardEvent | UIEvent | ErrorEvent | AnimationEvent | MouseEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | ProgressEvent<EventTarget> | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ListboxProps = typeof __propDef.props;
-export type ListboxEvents = typeof __propDef.events;
-export type ListboxSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        invalid?: boolean | undefined;
-        multiple?: boolean | undefined;
-        required?: boolean | undefined;
-        hidden?: boolean | undefined;
-        readonly?: boolean | undefined;
-        searchTerms?: string | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        filter: Event | KeyboardEvent | UIEvent | ErrorEvent | AnimationEvent | MouseEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | ProgressEvent<EventTarget> | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Filter` event handler.
+     */
+    onFilter?: ((event: CustomEvent) => void) | 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/listbox/option-group.svelte

@@ -10,43 +10,47 @@
   import { generateElementId } from '@sveltia/utils/element';
 
   /**
-   * 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. An alias of the `aria-hidden`
+   * attribute.
+   * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+   * attribute.
+   * @property {string} [label] - The group’s label to be displayed above the child `<Option>`s.
+   * @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;
+
   /**
-   * The group’s label to be displayed above the child `<Option>`s.
+   * @type {Props & Record<string, any>}
    */
-  export let label = '';
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    disabled = false,
+    label = '',
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const id = generateElementId('optgroup');
 </script>
 
 <div
+  {...restProps}
   role="group"
   {id}
   class="sui option-group {className}"
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-labelledby="{id}-label"
   aria-roledescription="option group"
-  {...$$restProps}
 >
   <div role="none" id="{id}-label" class="label">{label}</div>
   <div role="none" class="inner" inert={disabled}>
-    <slot />
+    {@render children?.()}
   </div>
 </div>
 

package/package/components/listbox/option-group.svelte.d.ts

@@ -1,6 +1,9 @@
-/** @typedef {typeof __propDef.props}  OptionGroupProps */
-/** @typedef {typeof __propDef.events}  OptionGroupEvents */
-/** @typedef {typeof __propDef.slots}  OptionGroupSlots */
+export default OptionGroup;
+type OptionGroup = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
 /**
  * A group within a `<Listbox>`. The equivalent of the HTML `<optgroup>` element. It can contain one
  * or more `<Option>`s.
@@ -8,37 +11,66 @@
  * @see https://w3c.github.io/aria/#listbox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/
  */
-export default class OptionGroup extends SvelteComponent<{
-    [x: string]: any;
+declare const OptionGroup: $$__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;
+    /**
+     * - The group’s label to be displayed above the child `<Option>`s.
+     */
     label?: string | undefined;
-    hidden?: boolean | undefined;
-}, {
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type OptionGroupProps = typeof __propDef.props;
-export type OptionGroupEvents = typeof __propDef.events;
-export type OptionGroupSlots = 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;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+}, {}, {}, "">;
+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;
+    /**
+     * - The group’s label to be displayed above the child `<Option>`s.
+     */
+    label?: string | 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/listbox/option.svelte

@@ -9,50 +9,43 @@
   import Icon from '../icon/icon.svelte';
 
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {string} [class] - The `class` attribute on the wrapper element.
+   * @property {boolean} [selected] - Whether to select the widget. An alias of the `aria-selected`
+   * attribute.
+   * @property {string} label - Text label displayed on the item.
+   * @property {string} [searchValue] - The value to be searched.
+   * @property {boolean} [wrap] - Whether to wrap a long label.
+   * @property {import('svelte').Snippet} [checkIcon] - Check icon slot content.
    */
-  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}
-   */
-  export let disabled = false;
-  /**
-   * Text label displayed on the item.
-   * @type {string}
-   */
-  export let label;
-  /**
-   * The `value` attribute on the `<button>` element.
-   * @type {string}
-   */
-  export let value = label;
-  /**
-   * The value to be searched.
-   * @type {string}
-   */
-  export let searchValue = label;
+
   /**
-   * Whether to wrap a long label.
-   * @type {boolean}
+   * @type {import('../../typedefs').ButtonProps & import('../../typedefs').CommonEventHandlers &
+   * Props & Record<string, any>}
    */
-  export let wrap = false;
+  let {
+    /* eslint-disable prefer-const */
+    selected = $bindable(false),
+    hidden = $bindable(false),
+    class: className,
+    disabled = false,
+    label,
+    value = label,
+    searchValue = label,
+    wrap = false,
+    children,
+    checkIcon,
+    startIcon: _startIcon,
+    onChange,
+    onToggle,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
-<div role="none" class="sui option {className}" class:wrap hidden={hidden || undefined}>
+<div role="none" class="sui option {className}" class:wrap {hidden}>
   <Button
+    {...restProps}
     role="option"
     tabindex="-1"
     aria-selected={selected}
@@ -63,33 +56,27 @@
     data-type={typeof value}
     data-label={label}
     data-search-value={searchValue}
-    {...$$restProps}
-    on:click
-    on:dblclick
-    on:focus
-    on:blur
-    on:dragover
-    on:dragleave
-    on:dragend
-    on:drop
-    on:select
-    on:change
-    on:change={(event) => {
+    onChange={(event) => {
       selected = event.detail.selected;
+      onChange?.(event);
     }}
-    on:toggle={(event) => {
-      hidden = /** @type {CustomEvent} */ (event).detail.hidden;
+    onToggle={(event) => {
+      hidden = event.detail.hidden;
       selected = false;
+      onToggle?.(event);
     }}
   >
     {#if selected}
-      <slot name="check-icon">
+      {#if checkIcon}
+        {@render checkIcon()}
+      {:else}
         <Icon class="check" name="check" />
-      </slot>
+      {/if}
     {/if}
-    <slot name="start-icon" slot="start-icon" />
-    <slot />
-    <slot name="end-icon" slot="end-icon" />
+    {#snippet startIcon()}
+      {@render _startIcon?.()}
+    {/snippet}
+    {@render children?.()}
   </Button>
 </div>
 

package/package/components/listbox/option.svelte.d.ts

@@ -1,86 +1,80 @@
-/** @typedef {typeof __propDef.props}  OptionProps */
-/** @typedef {typeof __propDef.events}  OptionEvents */
-/** @typedef {typeof __propDef.slots}  OptionSlots */
+export default Option;
+type Option = SvelteComponent<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "hidden" | "selected" | undefined;
+};
 /**
  * An option within the `<Listbox>` widget. The equivalent of the HTML `<option>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
  * @see https://w3c.github.io/aria/#option
  */
-export default class Option extends SvelteComponent<{
-    [x: string]: any;
-    label: string;
+declare const Option: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | undefined;
-    hidden?: boolean | undefined;
+    /**
+     * - Whether to select the widget. An alias of the `aria-selected`
+     * attribute.
+     */
     selected?: boolean | undefined;
+    /**
+     * - Text label displayed on the item.
+     */
+    label: string;
+    /**
+     * - The value to be searched.
+     */
     searchValue?: string | undefined;
+    /**
+     * - Whether to wrap a long label.
+     */
     wrap?: boolean | undefined;
-}, {
-    click: MouseEvent;
-    dblclick: MouseEvent;
-    focus: FocusEvent;
-    blur: FocusEvent;
-    dragover: DragEvent;
-    dragleave: DragEvent;
-    dragend: DragEvent;
-    drop: DragEvent;
-    select: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
+    /**
+     * - Check icon slot content.
+     */
+    checkIcon?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'check-icon': {};
-    'start-icon': {
-        slot: string;
-    };
-    default: {};
-    'end-icon': {
-        slot: string;
+}, {}, {}, "hidden" | "selected">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to select the widget. An alias of the `aria-selected`
+     * attribute.
+     */
+    selected?: boolean | undefined;
+    /**
+     * - Text label displayed on the item.
+     */
+    label: string;
+    /**
+     * - The value to be searched.
+     */
+    searchValue?: string | undefined;
+    /**
+     * - Whether to wrap a long label.
+     */
+    wrap?: boolean | undefined;
+    /**
+     * - Check icon slot content.
+     */
+    checkIcon?: 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-}> {
+    z_$$bindings?: Bindings;
 }
-export type OptionProps = typeof __propDef.props;
-export type OptionEvents = typeof __propDef.events;
-export type OptionSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label: string;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        value?: string | undefined;
-        hidden?: boolean | undefined;
-        selected?: boolean | undefined;
-        searchValue?: string | undefined;
-        wrap?: boolean | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        dblclick: MouseEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        dragover: DragEvent;
-        dragleave: DragEvent;
-        dragend: DragEvent;
-        drop: DragEvent;
-        select: CustomEvent<any>;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'check-icon': {};
-        'start-icon': {
-            slot: string;
-        };
-        default: {};
-        'end-icon': {
-            slot: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};