@sveltia/ui 0.15.16 → 0.17.0

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

@@ -1,6 +1,9 @@
-/** @typedef {typeof __propDef.props}  SliderProps */
-/** @typedef {typeof __propDef.events}  SliderEvents */
-/** @typedef {typeof __propDef.slots}  SliderSlots */
+export default Slider;
+type Slider = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "value" | undefined;
+};
 /**
  * The equivalent of the HTML `<input type="range">` element, but it comes with the multi-thumb
  * support.
@@ -9,55 +12,164 @@
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider/
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
  */
-export default class Slider extends SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    max?: number | undefined;
+declare const Slider: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - 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>;
-}, {}> {
-}
-export type SliderProps = typeof __propDef.props;
-export type SliderEvents = typeof __propDef.events;
-export type SliderSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [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;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: 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;
+    /**
+     * - 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;
 };
-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/switch/switch.svelte

@@ -5,58 +5,49 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/switch/
 -->
 <script>
-  import { createEventDispatcher } from '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}
+   * @typedef {object} Props
+   * @property {string | undefined} [label] - Text label displayed next to the switch.
+   * @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.
+   * @property {(event: CustomEvent) => void} [onChange] - Custom `Change` event handler.
    */
-  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 check the widget. An alias of the `aria-checked` attribute.
-   * @type {boolean | 'mixed'}
-   */
-  export let checked = false;
+
   /**
-   * Text label displayed next to the switch.
-   * @type {string | undefined}
+   * @type {Props & Record<string, any>}
    */
-  export let label = undefined;
-
-  const dispatch = createEventDispatcher();
+  let {
+    /* eslint-disable prefer-const */
+    checked = $bindable(false),
+    label = undefined,
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <button
+  {...restProps}
   role="switch"
   class="sui switch {className}"
   type="button"
-  hidden={hidden || undefined}
+  {hidden}
   disabled={disabled || undefined}
   aria-checked={checked}
   aria-hidden={hidden}
@@ -64,11 +55,10 @@
   aria-readonly={readonly}
   aria-required={required}
   aria-invalid={invalid}
-  {...$$restProps}
-  on:click={() => {
+  onclick={() => {
     if (!disabled && !readonly) {
       checked = !checked;
-      dispatch('change', { checked });
+      onChange?.(new CustomEvent('Change', { detail: { checked } }));
     }
   }}
 >
@@ -76,7 +66,7 @@
   {#if label}
     {label}
   {:else}
-    <slot />
+    {@render children?.()}
   {/if}
 </button>
 

package/package/components/switch/switch.svelte.d.ts

@@ -1,54 +1,110 @@
-/** @typedef {typeof __propDef.props}  SwitchProps */
-/** @typedef {typeof __propDef.events}  SwitchEvents */
-/** @typedef {typeof __propDef.slots}  SwitchSlots */
+export default Switch;
+type Switch = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "checked" | undefined;
+};
 /**
  * A variant of `<Checkbox>`, looking like a switch that can be often seen on mobile apps.
  * @see https://w3c.github.io/aria/#switch
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/switch/
  */
-export default class Switch extends SvelteComponent<{
-    [x: string]: any;
+declare const Switch: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Text label displayed next to the switch.
+     */
+    label?: string | 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 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 `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+} & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "checked">;
+type Props = {
+    /**
+     * - Text label displayed next to the switch.
+     */
     label?: string | undefined;
-    checked?: boolean | "mixed" | 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;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type SwitchProps = typeof __propDef.props;
-export type SwitchEvents = typeof __propDef.events;
-export type SwitchSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        invalid?: boolean | undefined;
-        label?: string | undefined;
-        checked?: boolean | "mixed" | undefined;
-        required?: boolean | undefined;
-        hidden?: boolean | undefined;
-        readonly?: boolean | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: 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;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((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/table/table-body.svelte

@@ -6,40 +6,44 @@
 -->
 <script>
   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 {string} [label] - Display label for the row group.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
    */
-  let className = '';
-  export { className as class };
 
   /**
-   * Display label for the row group.
-   * @type {string}
+   * @type {Props & Record<string, any>}
    */
-  export let label = '';
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    label = '',
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const id = generateElementId('tbody');
 </script>
 
 <div
+  {...restProps}
   role="rowgroup"
   class="sui table-body row-group {className}"
   aria-labelledby={label ? `${id}-label` : undefined}
   aria-roledescription="table body"
-  {...$$restProps}
 >
   {#if label}
     <div role="row" class="row-group-caption">
       <!-- We need `colspan` here but cannot place `<th>` under `<div>`, so use a hack -->
-      <!-- prettier-ignore -->
       <svelte:element this={'th'} role="rowheader" id="{id}-label" colspan="9999">
         {label}
       </svelte:element>
     </div>
   {/if}
-  <slot />
+  {@render children?.()}
 </div>
 
 <style>[role=rowgroup] {

package/package/components/table/table-body.svelte.d.ts

@@ -1,38 +1,54 @@
-/** @typedef {typeof __propDef.props}  TableBodyProps */
-/** @typedef {typeof __propDef.events}  TableBodyEvents */
-/** @typedef {typeof __propDef.slots}  TableBodySlots */
+export default TableBody;
+type TableBody = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
 /**
  * The equivalent of the HTML `<tbody>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
  * @see https://w3c.github.io/aria/#rowgroup
  */
-export default class TableBody extends SvelteComponent<{
-    [x: string]: any;
+declare const TableBody: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
+    /**
+     * - Display label for the row group.
+     */
     label?: string | undefined;
-}, {
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type TableBodyProps = typeof __propDef.props;
-export type TableBodyEvents = typeof __propDef.events;
-export type TableBodySlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        label?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Display label for the row group.
+     */
+    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/table/table-cell.svelte

@@ -6,15 +6,25 @@
 -->
 <script>
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {string} [class] - The `class` attribute on the wrapper element.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
    */
-  let className = '';
-  export { className as class };
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
-<div role="cell" class="sui table-cell {className}" {...$$restProps}>
-  <slot />
+<div {...restProps} role="cell" class="sui table-cell {className}">
+  {@render children?.()}
 </div>
 
 <style>.table-cell {