@sveltia/ui 0.16.0 → 0.17.1

package/package/components/text-field/search-bar.svelte

@@ -5,7 +5,6 @@
   @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
   @see https://w3c.github.io/aria/#search
 -->
-<svelte:options accessors={true} />
 
 <script>
   import { generateElementId } from '@sveltia/utils/element';
@@ -15,61 +14,44 @@
   import TextInput from './text-input.svelte';
 
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {import('svelte').Snippet} [searchIcon] - Search icon slot content.
+   * @property {import('svelte').Snippet} [closeIcon] - Close icon slot content.
    */
-  let className = '';
-  export { className as class };
-  /**
-   * Make the text input container flexible.
-   * @type {boolean}
-   */
-  export let flex = 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;
-  /**
-   * Whether to disable the widget. An alias of `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;
+
   /**
-   * Input value.
-   * @type {string | undefined}
+   * @type {import('../../typedefs').TextInputProps & import('../../typedefs').CommonEventHandlers &
+   * import('../../typedefs').InputEventHandlers & Props & Record<string, any>}
    */
-  export let value = undefined;
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(),
+    flex = false,
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    searchIcon,
+    closeIcon,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const id = generateElementId('searchbox');
   /**
-   * Reference to the `TextInput` component.
-   * @type {TextInput | undefined}
+   * Reference to the `<input>` element.
+   * @type {HTMLInputElement | undefined}
    */
-  let inputComponent;
-
-  $: input = inputComponent?.element;
+  let inputElement = $state();
 
   /**
    * Move focus to the `<input>` element.
    */
   export const focus = () => {
-    input?.focus();
+    inputElement?.focus();
   };
 </script>
 
@@ -79,15 +61,19 @@
   class:flex
   class:disabled
   class:readonly
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
 >
   <span role="none">
-    <slot name="search-icon">
+    {#if searchIcon}
+      {@render searchIcon()}
+    {:else}
       <Icon name="search" />
-    </slot>
+    {/if}
   </span>
   <TextInput
+    bind:element={inputElement}
+    {...restProps}
     role="searchbox"
     {id}
     bind:value
@@ -98,32 +84,29 @@
     {required}
     {invalid}
     inputmode="search"
-    {...$$restProps}
-    bind:this={inputComponent}
-    on:keydown
-    on:keyup
-    on:keypress
-    on:input
-    on:change
   />
   {#if value}
     <Button
       iconic
       aria-label={$_('_sui.clear')}
       aria-controls={id}
-      on:click={() => {
+      onclick={() => {
         value = '';
-        input?.focus();
+        inputElement?.focus();
         globalThis.requestIdleCallback(() => {
-          input?.dispatchEvent(new KeyboardEvent('input'));
-          input?.dispatchEvent(new KeyboardEvent('keypress'));
-          input?.dispatchEvent(new KeyboardEvent('change'));
+          inputElement?.dispatchEvent(new KeyboardEvent('input'));
+          inputElement?.dispatchEvent(new KeyboardEvent('keypress'));
+          inputElement?.dispatchEvent(new KeyboardEvent('change'));
         });
       }}
     >
-      <slot name="close-button" slot="start-icon">
-        <Icon name="close" />
-      </slot>
+      {#snippet startIcon()}
+        {#if closeIcon}
+          {@render closeIcon()}
+        {:else}
+          <Icon name="close" />
+        {/if}
+      {/snippet}
     </Button>
   {/if}
 </div>

package/package/components/text-field/search-bar.svelte.d.ts

@@ -1,39 +1,9 @@
 export default SearchBar;
-type SearchBar = SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    focus?: (() => void) | undefined;
-    invalid?: boolean | undefined;
-    required?: boolean | undefined;
-    value?: string | undefined;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
-    flex?: boolean | undefined;
-}, {
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    input: Event;
-    change: Event;
-} & {
+type SearchBar = SvelteComponent<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'search-icon': {};
-    'close-button': {
-        slot: string;
-    };
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "value" | undefined;
 } & {
-    class: string;
-    flex: boolean;
-    hidden: boolean | undefined;
-    disabled: boolean;
-    readonly: boolean;
-    required: boolean;
-    invalid: boolean;
-    value: string | undefined;
     focus: () => void;
 };
 /**
@@ -42,41 +12,30 @@ type SearchBar = SvelteComponent<{
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
  * @see https://w3c.github.io/aria/#search
  */
-declare const SearchBar: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    focus?: (() => void) | undefined;
-    invalid?: boolean | undefined;
-    required?: boolean | undefined;
-    value?: string | undefined;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
-    flex?: boolean | undefined;
-}, {
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    input: Event;
-    change: Event;
-} & {
+declare const SearchBar: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & {
+    /**
+     * - Search icon slot content.
+     */
+    searchIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Close icon slot content.
+     */
+    closeIcon?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'search-icon': {};
-    'close-button': {
-        slot: string;
-    };
-}, {
-    class: string;
-    flex: boolean;
-    hidden: boolean | undefined;
-    disabled: boolean;
-    readonly: boolean;
-    required: boolean;
-    invalid: boolean;
-    value: string | undefined;
+}, {}, {
     focus: () => void;
-}, string>;
+}, "value">;
+type Props = {
+    /**
+     * - Search icon slot content.
+     */
+    searchIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Close icon slot content.
+     */
+    closeIcon?: 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/text-field/text-area.svelte

@@ -7,56 +7,45 @@
 -->
 <script>
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {string | undefined} [value] - Input value.
+   * @property {boolean} [flex] - Make the text input container flexible.
+   * @property {string | undefined} [name] - The `name` attribute on the `<textarea>` element.
+   * @property {boolean} [autoResize] - Whether to automatically resize the `<textarea>` based on
+   * the content.
+   * @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 {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 {import('svelte').Snippet} [children] - Primary slot content.
    */
-  let className = '';
-  export { className as class };
-  /**
-   * Make the text input container flexible.
-   * @type {boolean}
-   */
-  export let flex = 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;
-  /**
-   * Whether to disable the widget. An alias of `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;
-  /**
-   * The `name` attribute on the `<textarea>` element.
-   * @type {string | undefined}
-   */
-  export let name = undefined;
-  /**
-   * Input value.
-   * @type {string | undefined}
-   */
-  export let value = undefined;
+
   /**
-   * Whether to automatically resize the `<textarea>` based on the content.
-   * @type {boolean}
+   * @type {import('../../typedefs').CommonEventHandlers & import('../../typedefs').InputEventHandlers
+   * & Props & Record<string, any>}
    */
-  export let autoResize = false;
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(''),
+    flex = false,
+    name = undefined,
+    autoResize = false,
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <div
@@ -65,9 +54,10 @@
   class:flex
   class:disabled
   class:readonly
-  hidden={hidden || undefined}
+  {hidden}
 >
   <textarea
+    {...restProps}
     {name}
     bind:value
     disabled={disabled || undefined}
@@ -77,13 +67,7 @@
     aria-readonly={readonly}
     aria-required={required}
     aria-invalid={invalid}
-    {...$$restProps}
     class:auto-resize={autoResize}
-    on:keydown
-    on:keyup
-    on:keypress
-    on:input
-    on:change
   ></textarea>
   {#if autoResize}
     <div class="clone" aria-hidden="true">{value ?? ''}</div>

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

@@ -1,26 +1,8 @@
 export default TextArea;
-type TextArea = SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    required?: boolean | undefined;
-    value?: string | undefined;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
-    flex?: boolean | undefined;
-    autoResize?: boolean | undefined;
-}, {
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    input: Event;
-    change: Event;
-} & {
+type TextArea = SvelteComponent<KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: "value" | undefined;
 };
 /**
  * A multi-line text field based on the HTML `<textarea>` element, providing the auto-resize support.
@@ -28,27 +10,110 @@ type TextArea = SvelteComponent<{
  * @see https://w3c.github.io/aria/#textbox
  * @see https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
  */
-declare const TextArea: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    class?: string | undefined;
+declare const TextArea: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & {
+    /**
+     * - Input value.
+     */
+    value?: string | undefined;
+    /**
+     * - Make the text input container flexible.
+     */
+    flex?: boolean | undefined;
+    /**
+     * - The `name` attribute on the `<textarea>` element.
+     */
     name?: string | undefined;
+    /**
+     * - Whether to automatically resize the `<textarea>` based on
+     * the content.
+     */
+    autoResize?: boolean | undefined;
+    /**
+     * - 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;
-    invalid?: 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;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type Props = {
+    /**
+     * - Input value.
+     */
     value?: string | undefined;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
+    /**
+     * - Make the text input container flexible.
+     */
     flex?: boolean | undefined;
+    /**
+     * - The `name` attribute on the `<textarea>` element.
+     */
+    name?: string | undefined;
+    /**
+     * - Whether to automatically resize the `<textarea>` based on
+     * the content.
+     */
     autoResize?: boolean | undefined;
-}, {
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    input: Event;
-    change: Event;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+    /**
+     * - 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;
+    /**
+     * - 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;
+    /**
+     * - 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/text-field/text-input.svelte

@@ -4,90 +4,37 @@
   @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
   @see https://w3c.github.io/aria/#textbox
 -->
-<svelte:options accessors={true} />
-
 <script>
   import { generateElementId } from '@sveltia/utils/element';
-  import { activateKeyShortcuts } from '../../services/events';
+  import { activateKeyShortcuts } from '../../services/events.svelte';
 
   /**
-   * Reference to the `<input>` element.
-   * @type {HTMLInputElement | undefined}
-   */
-  export let element = undefined;
-  /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
-   */
-  let className = '';
-  export { className as class };
-  /**
-   * Make the text input container flexible.
-   * @type {boolean}
-   */
-  export let flex = false;
-  /**
-   * The `role` attribute on the `<input>` element.
-   * @type {'textbox' | 'searchbox' | 'combobox' | 'spinbutton'}
-   */
-  export let role = 'textbox';
-  /**
-   * 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 disable the widget. An alias of `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;
-  /**
-   * Keyboard shortcuts. An alias of the `aria-keyshortcuts` attribute. Accepts the special `Accel`
-   * key, which will be replaced with `Control` or `Meta` depending on the user’s operating system.
-   * @type {string | undefined}
-   */
-  export let keyShortcuts = undefined;
-  /**
-   * The `name` attribute on the `<input>` element.
-   * @type {string | undefined}
-   */
-  export let name = undefined;
-  /**
-   * Input value.
-   * @type {any} = string | number | undefined
-   */
-  export let value = undefined;
-  /**
-   * Whether to display `aria-label` over the `<input>` element if it’s empty, just like how the
-   * HTML `placeholder` attribute works.
-   * @type {boolean}
-   */
-  export let showInlineLabel = false;
-  /**
-   * The `inputmode` attribute on the `<input>`.
-   * @type {'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'}
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+   * @type {import('../../typedefs').TextInputProps & import('../../typedefs').CommonEventHandlers &
+   * import('../../typedefs').InputEventHandlers & Record<string, any>}
    */
-  export let inputmode = 'text';
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(),
+    element = $bindable(),
+    role = 'textbox',
+    keyShortcuts = undefined,
+    name = undefined,
+    showInlineLabel = false,
+    inputmode = 'text',
+    flex = false,
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    'aria-label': ariaLabel,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const id = generateElementId('input');
-
-  $: ariaLabel = $$restProps['aria-label'];
 </script>
 
 <div
@@ -96,9 +43,12 @@
   class:flex
   class:disabled
   class:readonly
-  hidden={hidden || undefined}
+  {hidden}
 >
   <input
+    bind:this={element}
+    {...restProps}
+    bind:value
     type="text"
     {role}
     name={name || undefined}
@@ -111,14 +61,6 @@
     aria-readonly={readonly}
     aria-required={required}
     aria-invalid={invalid}
-    {...$$restProps}
-    bind:this={element}
-    bind:value
-    on:keydown
-    on:keyup
-    on:keypress
-    on:input
-    on:change
     use:activateKeyShortcuts={keyShortcuts}
   />
   {#if ariaLabel && showInlineLabel}