@sveltia/ui 0.16.0 → 0.17.0

package/package/components/grid/grid.svelte

@@ -5,44 +5,45 @@
   @see https://w3c.github.io/aria/#grid
 -->
 <script>
-  import { createEventDispatcher } from 'svelte';
-  import { activateGroup } from '../../services/group';
+  import { activateGroup } from '../../services/group.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 allow selecting more than one `<GridRow>` and/or
+   * `<GridCell>`. An alias of the `aria-multiselectable` attribute.
+   * @property {boolean} [clickToSelect] - Whether to select a row by clicking on it.
+   * @property {HTMLElement | undefined} [element] - A reference to the wrapper element.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   * @property {(event: CustomEvent) => void} [onChange] - Custom `Change` event handler.
    */
-  let className = '';
-  export { className as class };
-  /**
-   * Whether to allow selecting more than one `<GridRow>` and/or `<GridCell>`. An alias of the
-   * `aria-multiselectable` attribute.
-   * @type {boolean}
-   */
-  export let multiple = false;
+
   /**
-   * Whether to select a row by clicking on it.
+   * @type {Props & Record<string, any>}
    */
-  export let clickToSelect = true;
-
-  /** @type {HTMLElement | undefined} */
-  export let element = undefined;
-
-  const dispatch = createEventDispatcher();
+  let {
+    /* eslint-disable prefer-const */
+    element = $bindable(),
+    class: className,
+    multiple = false,
+    clickToSelect = true,
+    children,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <div
+  bind:this={element}
+  {...restProps}
   role="grid"
   class="sui grid {className}"
   aria-multiselectable={multiple}
-  {...$$restProps}
-  bind:this={element}
+  {onChange}
   use:activateGroup={{ clickToSelect }}
-  on:change={(/** @type {CustomEvent} */ event) => {
-    dispatch('change', event.detail);
-  }}
 >
-  <slot />
+  {@render children?.()}
 </div>
 
 <style>.grid {

package/package/components/grid/grid.svelte.d.ts

@@ -1,46 +1,70 @@
 export default Grid;
-type Grid = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    multiple?: boolean | undefined;
-    element?: HTMLElement | undefined;
-    clickToSelect?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    change: CustomEvent<any>;
-} & {
+type Grid = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "element" | undefined;
 };
 /**
  * The interactive version of `<Table>`.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
  * @see https://w3c.github.io/aria/#grid
  */
-declare const Grid: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const Grid: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
-    multiple?: boolean | undefined;
-    element?: HTMLElement | undefined;
+    /**
+     * - Whether to allow selecting more than one `<GridRow>` and/or
+     * `<GridCell>`. An alias of the `aria-multiselectable` attribute.
+     */
+    selected?: boolean | undefined;
+    /**
+     * - Whether to select a row by clicking on it.
+     */
     clickToSelect?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    change: CustomEvent<any>;
-} & {
+    /**
+     * - A reference to the wrapper element.
+     */
+    element?: HTMLElement | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | 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;
-} : {});
+}, {}, {}, "element">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to allow selecting more than one `<GridRow>` and/or
+     * `<GridCell>`. An alias of the `aria-multiselectable` attribute.
+     */
+    selected?: boolean | undefined;
+    /**
+     * - Whether to select a row by clicking on it.
+     */
+    clickToSelect?: boolean | undefined;
+    /**
+     * - A reference to the wrapper element.
+     */
+    element?: HTMLElement | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: 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/icon/icon.svelte

@@ -5,22 +5,27 @@
 -->
 <script>
   /**
-   * The `class` attribute on the `span` element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {string} [class] - The `class` attribute on the `span` element.
+   * @property {string} [name] - Icon name, e.g. `search`, `expand_more`, `close`, etc.
    */
-  let className = '';
-  export { className as class };
+
   /**
-   * Icon name, e.g. `search`, `expand_more`, `close`, etc.
-   * @type {string}
+   * @type {Props & Record<string, any>}
    */
-  export let name = '';
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    name,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <span
+  {...restProps}
   class="sui icon material-symbols-outlined {className}"
-  aria-hidden={!('aria-label' in $$restProps)}
-  {...$$restProps}
+  aria-hidden={!('aria-label' in restProps)}
 >
   {name}
 </span>

package/package/components/icon/icon.svelte.d.ts

@@ -1,24 +1,35 @@
 export default Icon;
-type Icon = SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    name?: string | undefined;
-}, {
+type Icon = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: "" | undefined;
 };
 /**
  * A Material Symbols icon.
  * @see https://developers.google.com/fonts/docs/material_symbols
  */
 declare const Icon: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
+    /**
+     * - The `class` attribute on the `span` element.
+     */
     class?: string | undefined;
+    /**
+     * - Icon name, e.g. `search`, `expand_more`, `close`, etc.
+     */
     name?: string | undefined;
-}, {
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the `span` element.
+     */
+    class?: string | undefined;
+    /**
+     * - Icon name, e.g. `search`, `expand_more`, `close`, etc.
+     */
+    name?: string | 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/listbox/listbox.svelte

@@ -6,85 +6,79 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
 -->
 <script>
-  import { createEventDispatcher } from 'svelte';
-  import { activateGroup } from '../../services/group';
+  import { activateGroup } from '../../services/group.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 make the widget read-only. An alias of the `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;
-  /**
-   * Whether to allow selecting more than one `<Option>`. An alias of the `aria-multiselectable`
+   * @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.
-   * @type {boolean}
+   * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+   * attribute.
+   * @property {boolean} [readonly] - Whether to make the widget read-only. An alias of the
+   * `aria-readonly` attribute.
+   * @property {boolean} [required] - Whether to mark the widget required. An alias of the
+   * `aria-required` attribute.
+   * @property {boolean} [invalid] - Whether to mark the widget invalid. An alias of the
+   * `aria-invalid` attribute.
+   * @property {boolean} [multiple] - Whether to allow selecting more than one `<Option>`. An alias
+   * of the `aria-multiselectable` attribute.
+   * @property {string} [searchTerms] - Search terms to be used to filter the items.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   * @property {(event: CustomEvent) => void} [onChange] - Custom `Change` event handler.
+   * @property {(event: CustomEvent) => void} [onFilter] - Custom `Filter` event handler.
    */
-  export let multiple = false;
+
   /**
-   * Search terms to be used to filter the items.
-   * @type {string}
+   * @type {import('../../typedefs').CommonEventHandlers & Props & Record<string, any>}
    */
-  export let searchTerms = '';
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    multiple = false,
+    searchTerms = '',
+    children,
+    onFilter,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   /**
    * @type {boolean}
    */
-  let filtered = false;
-
-  const dispatch = createEventDispatcher();
+  let filtered = $state(false);
 </script>
 
 <div
+  {...restProps}
   role="listbox"
   class="sui listbox {className}"
   class:filtered
   tabindex={disabled ? -1 : 0}
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-readonly={readonly}
   aria-required={required}
   aria-invalid={invalid}
   aria-multiselectable={multiple}
-  {...$$restProps}
-  use:activateGroup={{ searchTerms }}
-  on:click
-  on:change={(/** @type {CustomEvent} */ event) => {
-    dispatch('change', event.detail);
-  }}
-  on:filter
-  on:filter={(/** @type {CustomEvent} */ { detail: { matched, total } }) => {
+  onFilter={(/** @type {CustomEvent} */ event) => {
+    const {
+      detail: { matched, total },
+    } = event;
+
     filtered = matched !== total;
+    onFilter?.(event);
   }}
+  use:activateGroup={{ searchTerms }}
 >
   <div role="none" class="inner" inert={disabled}>
-    <slot />
+    {@render children?.()}
   </div>
 </div>
 

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

@@ -1,26 +1,8 @@
 export default Listbox;
-type Listbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    default: {};
-}>, {
-    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>;
-} & {
+type Listbox = SvelteComponent<KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * A list widget with selectable options. The equivalent of the HTML `<select multiple>` element.
@@ -28,32 +10,112 @@ type Listbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
  * @see https://w3c.github.io/aria/#listbox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
  */
-declare const Listbox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    default: {};
-}>, {
-    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: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+    /**
+     * - 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;
+};
 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/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>