@sveltia/ui 0.16.0 → 0.17.1

package/package/components/text-editor/toolbar/toggle-block-menu-item.svelte

@@ -12,13 +12,22 @@
   import { getContext } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { availableButtons } from '..';
+  import Icon from '../../icon/icon.svelte';
   import MenuItemCheckbox from '../../menu/menu-item-checkbox.svelte';
 
   /**
-   * Button type.
-   * @type {import('../../../typedefs').TextEditorBlockType}
+   * @typedef {object} Props
+   * @property {import('../../../typedefs').TextEditorBlockType} type - Button type.
    */
-  export let type;
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    type,
+    /* eslint-enable prefer-const */
+  } = $props();
 
   /**
    * Text editor state.
@@ -29,7 +38,7 @@
   /**
    * Whether the current selection matches the button {@link type}.
    */
-  $: selectionTypeMatches = $selectionBlockType === type;
+  const selectionTypeMatches = $derived($selectionBlockType === type);
 
   /**
    * Change the current selection’s type to {@link type}.
@@ -76,13 +85,16 @@
 
 {#key selectionTypeMatches}
   <MenuItemCheckbox
-    iconName={availableButtons[type].icon}
     label={$_(`_sui.text_editor.${availableButtons[type].labelKey}`)}
     checked={selectionTypeMatches}
-    on:click={() => {
+    onclick={() => {
       if (!selectionTypeMatches) {
         changeBlockType();
       }
     }}
-  />
+  >
+    {#snippet startIcon()}
+      <Icon name={availableButtons[type].icon} />
+    {/snippet}
+  </MenuItemCheckbox>
 {/key}

package/package/components/text-editor/toolbar/toggle-block-menu-item.svelte.d.ts

@@ -1,16 +1,23 @@
 export default ToggleBlockMenuItem;
-type ToggleBlockMenuItem = SvelteComponent<{
-    type: TextEditorBlockType;
-}, {
+type ToggleBlockMenuItem = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: "" | undefined;
 };
 declare const ToggleBlockMenuItem: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Button type.
+     */
     type: import("../../../typedefs").TextEditorBlockType;
-}, {
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - Button type.
+     */
+    type: import("../../../typedefs").TextEditorBlockType;
+};
 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/number-input.svelte

@@ -12,77 +12,56 @@
   import TextInput from './text-input.svelte';
 
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {number | undefined} [min] - Minimum allowed value.
+   * @property {number | undefined} [max] - Maximum allowed value.
+   * @property {number} [step] - Value to be added or removed when using the up/down arrow key or
+   * button.
+   * @property {import('svelte').Snippet} [increaseIcon] - Increase icon slot content.
+   * @property {import('svelte').Snippet} [decreaseIcon] - Decrease 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}
-   */
-  export let value = undefined;
-  /**
-   * Minimum allowed value.
-   * @type {number | undefined}
-   */
-  export let min = undefined;
-  /**
-   * Maximum allowed value.
-   * @type {number | undefined}
-   */
-  export let max = undefined;
+
   /**
-   * Value to be added or removed when using the up/down arrow key or button.
+   * @type {import('../../typedefs').TextInputProps & import('../../typedefs').CommonEventHandlers &
+   * import('../../typedefs').InputEventHandlers & Props & Record<string, any>}
    */
-  export let step = 1;
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(),
+    invalid = $bindable(false),
+    flex = false,
+    min = undefined,
+    max = undefined,
+    step = 1,
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    children,
+    increaseIcon,
+    decreaseIcon,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const id = generateElementId('input');
-  let edited = false;
-
-  $: maximumFractionDigits = String(step).split('.')[1]?.length || 0;
-  $: isMin = typeof min === 'number' && Number(value || 0) <= min;
-  $: isMax = typeof max === 'number' && Number(value || 0) >= max;
+  let edited = $state(false);
 
-  $: invalid =
-    (required && edited && (value === undefined || value === '')) ||
-    (value !== undefined &&
-      value !== '' &&
-      (Number.isNaN(Number(value)) ||
-        (typeof min === 'number' && Number(value || 0) < min) ||
-        (typeof max === 'number' && Number(value || 0) > max)));
+  const maximumFractionDigits = $derived(String(step).split('.')[1]?.length || 0);
+  const isMin = $derived(typeof min === 'number' && Number(value || 0) <= min);
+  const isMax = $derived(typeof max === 'number' && Number(value || 0) >= max);
 
-  let component;
+  $effect(() => {
+    invalid =
+      (required && edited && (value === undefined || value === '')) ||
+      (value !== undefined &&
+        value !== '' &&
+        (Number.isNaN(Number(value)) ||
+          (typeof min === 'number' && Number(value || 0) < min) ||
+          (typeof max === 'number' && Number(value || 0) > max)));
+  });
 
   /**
    * Decrease the number.
@@ -113,7 +92,7 @@
   class:flex
   class:disabled
   class:readonly
-  hidden={hidden || undefined}
+  {hidden}
 >
   <div role="none" class="buttons">
     <Button
@@ -121,29 +100,38 @@
       disabled={disabled || readonly || Number.isNaN(Number(value)) || isMax}
       aria-label={$_('_sui.number_input.increase')}
       aria-controls={id}
-      on:click={() => {
+      onclick={() => {
         increase();
       }}
     >
-      <slot name="increase-icon" slot="start-icon">
-        <Icon name="expand_less" />
-      </slot>
+      {#snippet startIcon()}
+        {#if increaseIcon}
+          {@render increaseIcon()}
+        {:else}
+          <Icon name="expand_less" />
+        {/if}
+      {/snippet}
     </Button>
     <Button
       iconic
       disabled={disabled || readonly || Number.isNaN(Number(value)) || isMin}
       aria-label={$_('_sui.number_input.decrease')}
       aria-controls={id}
-      on:click={() => {
+      onclick={() => {
         decrease();
       }}
     >
-      <slot name="decrease-icon" slot="start-icon">
-        <Icon name="expand_more" />
-      </slot>
+      {#snippet startIcon()}
+        {#if decreaseIcon}
+          {@render decreaseIcon()}
+        {:else}
+          <Icon name="expand_more" />
+        {/if}
+      {/snippet}
     </Button>
   </div>
   <TextInput
+    {...restProps}
     role="spinbutton"
     {id}
     bind:value
@@ -158,9 +146,7 @@
     aria-valuemin={min}
     aria-valuemax={max}
     inputmode={maximumFractionDigits > 0 ? 'decimal' : 'numeric'}
-    {...$$restProps}
-    bind:this={component}
-    on:keydown={(event) => {
+    onkeydown={(event) => {
       const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
       const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
@@ -178,11 +164,7 @@
         edited = true;
       }
     }}
-    on:keydown
-    on:keyup
-    on:keypress
-    on:input
-    on:change
+    {onChange}
   />
 </div>
 

package/package/components/text-field/number-input.svelte.d.ts

@@ -1,69 +1,62 @@
 export default NumberInput;
-type NumberInput = SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    max?: number | undefined;
-    min?: number | undefined;
-    required?: boolean | undefined;
-    step?: number | undefined;
-    value?: string | undefined;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
-    flex?: boolean | undefined;
-}, {
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    input: Event;
-    change: Event;
-} & {
+type NumberInput = SvelteComponent<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'increase-icon': {
-        slot: string;
-    };
-    'decrease-icon': {
-        slot: string;
-    };
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "invalid" | "value" | undefined;
 };
 /**
  * The equivalent of the HTML `<input type="number">` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
  * @see https://w3c.github.io/aria/#textbox
  */
-declare const NumberInput: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    max?: number | undefined;
+declare const NumberInput: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & {
+    /**
+     * - Minimum allowed value.
+     */
     min?: number | undefined;
-    required?: boolean | undefined;
+    /**
+     * - Maximum allowed value.
+     */
+    max?: number | undefined;
+    /**
+     * - Value to be added or removed when using the up/down arrow key or
+     * button.
+     */
     step?: number | undefined;
-    value?: string | undefined;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
-    flex?: boolean | undefined;
-}, {
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    input: Event;
-    change: Event;
-} & {
+    /**
+     * - Increase icon slot content.
+     */
+    increaseIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Decrease icon slot content.
+     */
+    decreaseIcon?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'increase-icon': {
-        slot: string;
-    };
-    'decrease-icon': {
-        slot: string;
-    };
-}, {}, string>;
+}, {}, {}, "invalid" | "value">;
+type Props = {
+    /**
+     * - Minimum allowed value.
+     */
+    min?: number | undefined;
+    /**
+     * - Maximum allowed value.
+     */
+    max?: number | undefined;
+    /**
+     * - Value to be added or removed when using the up/down arrow key or
+     * button.
+     */
+    step?: number | undefined;
+    /**
+     * - Increase icon slot content.
+     */
+    increaseIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Decrease icon slot content.
+     */
+    decreaseIcon?: 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/password-input.svelte

@@ -13,60 +13,42 @@
   import TextInput from './text-input.svelte';
 
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {import('svelte').Snippet} [visibilityIcon] - Visibility 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,
+    visibilityIcon,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const id = generateElementId('input');
 
   /**
-   * @type {TextInput}
+   * Reference to the `<input>` element.
+   * @type {HTMLInputElement | undefined}
    */
-  let inputComponent;
-  let passwordVisible = false;
+  let inputElement = $state();
+  let passwordVisible = $state(false);
 
-  $: {
-    if (inputComponent) {
-      inputComponent.element?.setAttribute('type', passwordVisible ? 'text' : 'password');
-    }
-  }
+  $effect(() => {
+    inputElement?.setAttribute('type', passwordVisible ? 'text' : 'password');
+  });
 </script>
 
 <div
@@ -75,9 +57,11 @@
   class:flex
   class:disabled
   class:readonly
-  hidden={hidden || undefined}
+  {hidden}
 >
   <TextInput
+    bind:element={inputElement}
+    {...restProps}
     {id}
     bind:value
     type="password"
@@ -88,13 +72,6 @@
     {readonly}
     {required}
     {invalid}
-    {...$$restProps}
-    bind:this={inputComponent}
-    on:keydown
-    on:keyup
-    on:keypress
-    on:input
-    on:change
   />
   <Button
     iconic
@@ -104,13 +81,17 @@
       passwordVisible ? '_sui.password_input.hide_password' : '_sui.password_input.show_password',
     )}
     aria-controls={id}
-    on:click={() => {
+    onclick={() => {
       passwordVisible = !passwordVisible;
     }}
   >
-    <slot name="visibility-icon" slot="start-icon">
-      <Icon name={passwordVisible ? 'visibility_off' : 'visibility'} />
-    </slot>
+    {#snippet startIcon()}
+      {#if visibilityIcon}
+        {@render visibilityIcon()}
+      {:else}
+        <Icon name={passwordVisible ? 'visibility_off' : 'visibility'} />
+      {/if}
+    {/snippet}
   </Button>
 </div>
 

package/package/components/text-field/password-input.svelte.d.ts

@@ -1,28 +1,8 @@
 export default PasswordInput;
-type PasswordInput = SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | 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 PasswordInput = SvelteComponent<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'visibility-icon': {
-        slot: string;
-    };
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "value" | undefined;
 };
 /**
  * The equivalent of the HTML `<input type="password">` element, but it comes with the Show/Hide
@@ -30,29 +10,20 @@ type PasswordInput = SvelteComponent<{
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
  * @see https://w3c.github.io/aria/#textbox
  */
-declare const PasswordInput: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | 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 PasswordInput: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & {
+    /**
+     * - Visibility icon slot content.
+     */
+    visibilityIcon?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'visibility-icon': {
-        slot: string;
-    };
-}, {}, string>;
+}, {}, {}, "value">;
+type Props = {
+    /**
+     * - Visibility icon slot content.
+     */
+    visibilityIcon?: 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;