@sveltia/ui 0.16.0 → 0.17.0

package/package/components/select/select-tags.svelte.d.ts

@@ -1,48 +1,129 @@
 export default SelectTags;
-type SelectTags = SvelteComponent<{
-    [x: string]: any;
+type SelectTags = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "values" | undefined;
+};
+declare const SelectTags: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Available
+     * options.
+     */
     options: {
         label: string;
         value: string;
-        searchValue?: string | undefined;
+        searchValue?: string;
     }[];
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
+    /**
+     * - Selected option values.
+     */
+    values?: string[] | undefined;
+    /**
+     * - Maximum number of selectable options.
+     */
     max?: number | undefined;
-    required?: 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;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
     readonly?: boolean | undefined;
-    values?: string[] | undefined;
-}, {
-    RemoveValue: CustomEvent<any>;
-    AddValue: CustomEvent<any>;
-} & {
+    /**
+     * - 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;
+    /**
+     * - Custom `AddValue` event handler.
+     */
+    onAddValue?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `RemoveValue` event handler.
+     */
+    onRemoveValue?: ((event: CustomEvent) => void) | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const SelectTags: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
+}, {}, {}, "values">;
+type Props = {
+    /**
+     * - Available
+     * options.
+     */
     options: {
         label: string;
         value: string;
         searchValue?: string;
     }[];
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
+    /**
+     * - Selected option values.
+     */
+    values?: string[] | undefined;
+    /**
+     * - Maximum number of selectable options.
+     */
     max?: number | undefined;
-    required?: 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;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
     readonly?: boolean | undefined;
-    values?: string[] | undefined;
-}, {
-    RemoveValue: CustomEvent<any>;
-    AddValue: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+    /**
+     * - 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;
+    /**
+     * - Custom `AddValue` event handler.
+     */
+    onAddValue?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `RemoveValue` event handler.
+     */
+    onRemoveValue?: ((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/select/select.svelte

@@ -9,44 +9,26 @@
   import Combobox from './combobox.svelte';
 
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @type {import('../../typedefs').ComboboxProps & Record<string, any>}
    */
-  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 disable the widget. 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;
-  /**
-   * Selected option’s value.
-   * @type {any} = string | number | undefined
-   */
-  export let value = undefined;
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(),
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <Combobox
+  {...restProps}
   bind:value
   class="sui select {className}"
   {hidden}
@@ -54,9 +36,8 @@
   {readonly}
   {required}
   {invalid}
-  {...$$restProps}
+  {onChange}
   editable={false}
-  on:change
 >
-  <slot />
+  {@render children?.()}
 </Combobox>

package/package/components/select/select.svelte.d.ts

@@ -1,23 +1,8 @@
 export default Select;
-type Select = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    required?: boolean | undefined;
-    value?: any;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    change: CustomEvent<any>;
-} & {
+type Select = SvelteComponent<ComboboxProps & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "value" | undefined;
 };
 /**
  * A select-only variant of `<Combobox>`. The equivalent of the HTML `<select>` element.
@@ -25,29 +10,9 @@ type Select = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
  * @see https://w3c.github.io/aria/#combobox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  */
-declare const Select: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    required?: boolean | undefined;
-    value?: any;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    change: CustomEvent<any>;
-} & {
+declare const Select: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ComboboxProps & 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;
-} : {});
+}, {}, {}, "value">;
 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/slider/slider.svelte

@@ -8,71 +8,72 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
 -->
 <script>
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { onMount } from 'svelte';
 
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {number} [value] - Current value.
+   * @property {number} [min] - Minimum allowed value. An alias of the `aria-valuemin` attribute.
+   * @property {number} [max] - Maximum allowed value. An alias of the `aria-valuemax` attribute.
+   * @property {string} [sliderLabel] - `aria-label` on the slider.
+   * @property {[number, number] | undefined} [values] - Value list for a multi-thumb slider.
+   * @property {[string, string] | undefined} [sliderLabels] - `aria-label` on a multi-thumb slider.
+   * @property {number} [step] - Step option like `<input type="range">`.
+   * @property {(string[] | number[])} [optionLabels] - Visible labels on the slider.
+   * @property {boolean} [flex] - Make the text input container flexible.
+   * @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} [invalid] - Whether to mark the widget invalid. An alias of the
+   * `aria-invalid` attribute.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   * @property {(detail: { values?: number[], value?: number }) => void} [onChange] - `change` event
+   * handler.
    */
-  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 invalid. An alias of the `aria-invalid` attribute.
-   * @type {boolean}
-   */
-  export let invalid = false;
-  /**
-   * Minimum allowed value. An alias of the `aria-valuemin` attribute.
-   * @type {number}
-   */
-  export let min = 0;
+
   /**
-   * Maximum allowed value. An alias of the `aria-valuemax` attribute.
-   * @type {number}
+   * @type {Props & Record<string, any>}
    */
-  export let max = 100;
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(0),
+    min = 0,
+    max = 100,
+    sliderLabel = '',
+    values = undefined,
+    sliderLabels = undefined,
+    step = 1,
+    optionLabels = [],
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    invalid = false,
+    children,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const multiThumb = $derived(Array.isArray(values));
 
-  export let value = 0;
-  export let sliderLabel = '';
-  /** @type {[number, number] | undefined} */
-  export let values = undefined;
-  /** @type {[string, string] | undefined} */
-  export let sliderLabels = undefined;
-  export let step = 1;
-  /** @type {(string[] | number[])} */
-  export let optionLabels = [];
-
-  $: multiThumb = Array.isArray(values);
-
-  const dispatch = createEventDispatcher();
   /** @type {HTMLElement | undefined} */
-  let base = undefined;
-  let barWidth = 0;
+  let base = $state();
+  let barWidth = $state(0);
   /** @type {number[]} */
-  let positionList = [];
+  let positionList = $state([]);
   /** @type {number[]} */
-  let valueList = [];
-  let startX = 0;
-  let startScreenX = 0;
-  const sliderPositions = [0, 0];
-  let dragging = false;
-  let targetPointerId = 0;
-  let targetValueIndex = 0;
+  let valueList = $state([]);
+  let startX = $state(0);
+  let startScreenX = $state(0);
+  // eslint-disable-next-line prefer-const
+  let sliderPositions = $state([0, 0]);
+  let dragging = $state(false);
+  let targetPointerId = $state(0);
+  let targetValueIndex = $state(0);
 
   /**
    * Move a thumb with mouse.
@@ -104,6 +105,7 @@
 
     if (multiThumb) {
       /** @type {[number, number]} */ (values)[targetValueIndex] = valueList[index];
+      values = [.../** @type {[number, number]} */ (values)];
     } else {
       value = valueList[index];
     }
@@ -155,6 +157,7 @@
 
       if (multiThumb) {
         /** @type {[number, number]} */ (values)[valueIndex] = valueList[index];
+        values = [.../** @type {[number, number]} */ (values)];
       } else {
         value = valueList[index];
       }
@@ -242,10 +245,10 @@
 
       sliderPositions[0] = positionList[valueList.indexOf(value0)];
       sliderPositions[1] = positionList[valueList.indexOf(value1)];
-      dispatch('change', { values });
+      onChange?.({ values });
     } else {
       sliderPositions[0] = positionList[valueList.indexOf(value)];
-      dispatch('change', { value });
+      onChange?.({ value });
     }
   };
 
@@ -282,28 +285,28 @@
     };
   });
 
-  $: {
+  $effect(() => {
     void value;
     void values;
     onValueChange();
-  }
+  });
 </script>
 
 <svelte:body
-  on:click={() => {
+  onclick={() => {
     dragging = false;
   }}
 />
 
 <div
+  {...restProps}
   role="none"
   class="sui slider {className}"
   class:disabled
   class:readonly
-  hidden={hidden || undefined}
-  {...$$restProps}
+  {hidden}
 >
-  <div role="none" class="base" bind:this={base} on:pointerdown={(event) => onPointerDown(event)}>
+  <div bind:this={base} role="none" class="base" onpointerdown={(event) => onPointerDown(event)}>
     <div role="none" class="base-bar"></div>
     <div
       class="slider-bar"
@@ -322,8 +325,8 @@
       aria-valuemax={max}
       aria-valuenow={multiThumb ? values?.[0] : value}
       style:left="{sliderPositions[0]}px"
-      on:pointerdown={(event) => onPointerDown(event, 0)}
-      on:keydown={(event) => onKeyDown(event, 0)}
+      onpointerdown={(event) => onPointerDown(event, 0)}
+      onkeydown={(event) => onKeyDown(event, 0)}
     ></div>
     {#if multiThumb}
       <div
@@ -338,8 +341,8 @@
         aria-valuemax={max}
         aria-valuenow={values?.[1]}
         style:left="{sliderPositions[1]}px"
-        on:pointerdown={(event) => onPointerDown(event, 1)}
-        on:keydown={(event) => onKeyDown(event, 1)}
+        onpointerdown={(event) => onPointerDown(event, 1)}
+        onkeydown={(event) => onKeyDown(event, 1)}
       ></div>
     {/if}
     {#if optionLabels.length}

package/package/components/slider/slider.svelte.d.ts

@@ -1,25 +1,8 @@
 export default Slider;
-type Slider = SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    max?: number | undefined;
-    min?: number | undefined;
-    step?: number | undefined;
-    value?: number | undefined;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
-    values?: [number, number] | undefined;
-    sliderLabel?: string | undefined;
-    sliderLabels?: [string, string] | undefined;
-    optionLabels?: string[] | number[] | undefined;
-}, {
-    change: CustomEvent<any>;
-} & {
+type Slider = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: "value" | undefined;
 };
 /**
  * The equivalent of the HTML `<input type="range">` element, but it comes with the multi-thumb
@@ -30,25 +13,153 @@ type Slider = SvelteComponent<{
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
  */
 declare const Slider: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    max?: number | undefined;
+    /**
+     * - Current value.
+     */
+    value?: number | undefined;
+    /**
+     * - Minimum allowed value. An alias of the `aria-valuemin` attribute.
+     */
     min?: number | undefined;
+    /**
+     * - Maximum allowed value. An alias of the `aria-valuemax` attribute.
+     */
+    max?: number | undefined;
+    /**
+     * - `aria-label` on the slider.
+     */
+    sliderLabel?: string | undefined;
+    /**
+     * - Value list for a multi-thumb slider.
+     */
+    values?: [number, number] | undefined;
+    /**
+     * - `aria-label` on a multi-thumb slider.
+     */
+    sliderLabels?: [string, string] | undefined;
+    /**
+     * - Step option like `<input type="range">`.
+     */
     step?: number | undefined;
-    value?: number | undefined;
+    /**
+     * - Visible labels on the slider.
+     */
+    optionLabels?: string[] | number[] | undefined;
+    /**
+     * - Make the text input container flexible.
+     */
+    flex?: 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;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
     readonly?: boolean | undefined;
-    values?: [number, number] | 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;
+    /**
+     * - `change` event
+     * handler.
+     */
+    onChange?: ((detail: {
+        values?: number[];
+        value?: number;
+    }) => void) | undefined;
+} & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type Props = {
+    /**
+     * - Current value.
+     */
+    value?: number | undefined;
+    /**
+     * - Minimum allowed value. An alias of the `aria-valuemin` attribute.
+     */
+    min?: number | undefined;
+    /**
+     * - Maximum allowed value. An alias of the `aria-valuemax` attribute.
+     */
+    max?: number | undefined;
+    /**
+     * - `aria-label` on the slider.
+     */
     sliderLabel?: string | undefined;
+    /**
+     * - Value list for a multi-thumb slider.
+     */
+    values?: [number, number] | undefined;
+    /**
+     * - `aria-label` on a multi-thumb slider.
+     */
     sliderLabels?: [string, string] | undefined;
+    /**
+     * - Step option like `<input type="range">`.
+     */
+    step?: number | undefined;
+    /**
+     * - Visible labels on the slider.
+     */
     optionLabels?: string[] | number[] | undefined;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+    /**
+     * - Make the text input container flexible.
+     */
+    flex?: 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;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
+    readonly?: 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;
+    /**
+     * - `change` event
+     * handler.
+     */
+    onChange?: ((detail: {
+        values?: number[];
+        value?: number;
+    }) => 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;