@sveltia/ui 0.16.0 → 0.17.0

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,100 @@
 export default Switch;
-type Switch = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    default: {};
-}>, {
-    change: CustomEvent<any>;
-} & {
+type Switch = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$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/
  */
-declare const Switch: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    default: {};
-}>, {
-    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;
-} : {});
+    /**
+     * - 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;
+};
 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/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,44 @@
 export default TableBody;
-type TableBody = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    label?: string | undefined;
-}, {
-    default: {};
-}>, {
+type TableBody = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$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
  */
-declare const TableBody: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    default: {};
-}>, {
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | 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;
-} : {});
+}, {}, {}, "">;
+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;
+};
 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/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 {

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

@@ -1,36 +1,36 @@
 export default TableCell;
-type TableCell = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-}, {
-    default: {};
-}>, {
+type TableCell = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * The equivalent of the HTML `<td>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
  * @see https://w3c.github.io/aria/#cell
  */
-declare const TableCell: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const TableCell: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
-}, {
-    default: {};
-}>, {
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | 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;
-} : {});
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | 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/table/table-col-header.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="columnheader" class="sui table-col-header {className}" {...$$restProps}>
-  <slot />
+<div {...restProps} role="columnheader" class="sui table-col-header {className}">
+  {@render children?.()}
 </div>
 
 <style>.table-col-header {

package/package/components/table/table-col-header.svelte.d.ts

@@ -1,36 +1,36 @@
 export default TableColHeader;
-type TableColHeader = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-}, {
-    default: {};
-}>, {
+type TableColHeader = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * The equivalent of the HTML `<th scope="col">` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
  * @see https://w3c.github.io/aria/#columnheader
  */
-declare const TableColHeader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const TableColHeader: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
-}, {
-    default: {};
-}>, {
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | 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;
-} : {});
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | 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/table/table-foot.svelte

@@ -6,20 +6,30 @@
 -->
 <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
+  {...restProps}
   role="rowgroup"
   class="sui table-foot {className}"
   aria-roledescription="table foot"
-  {...$$restProps}
 >
-  <slot />
+  {@render children?.()}
 </div>
 
 <style>.table-foot {

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

@@ -1,36 +1,36 @@
 export default TableFoot;
-type TableFoot = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-}, {
-    default: {};
-}>, {
+type TableFoot = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * The equivalent of the HTML `<tfoot>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
  * @see https://w3c.github.io/aria/#rowgroup
  */
-declare const TableFoot: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const TableFoot: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
-}, {
-    default: {};
-}>, {
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | 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;
-} : {});
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | 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;