@sveltia/ui 0.16.0 → 0.17.1

package/package/components/grid/grid-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="gridcell" class="sui grid-cell {className}" {...$$restProps}>
-  <slot />
+<div {...restProps} role="gridcell" class="sui grid-cell {className}">
+  {@render children?.()}
 </div>
 
 <style>.grid-cell {

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

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

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

@@ -1,36 +1,36 @@
 export default GridColHeader;
-type GridColHeader = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-}, {
-    default: {};
-}>, {
+type GridColHeader = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * The interactive version of `<TableColHeader>`.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
  * @see https://w3c.github.io/aria/#columnheader
  */
-declare const GridColHeader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const GridColHeader: $$__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/grid/grid-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 grid-foot {className}"
   aria-roledescription="grid foot"
-  {...$$restProps}
 >
-  <slot />
+  {@render children?.()}
 </div>
 
 <style>.grid-foot {

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

@@ -1,36 +1,36 @@
 export default GridFoot;
-type GridFoot = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-}, {
-    default: {};
-}>, {
+type GridFoot = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * The interactive version of `<TableFoot>`.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
  * @see https://w3c.github.io/aria/#rowgroup
  */
-declare const GridFoot: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const GridFoot: $$__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/grid/grid-head.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 grid-head {className}"
   aria-roledescription="grid head"
-  {...$$restProps}
 >
-  <slot />
+  {@render children?.()}
 </div>
 
 <style>.grid-head {

package/package/components/grid/grid-head.svelte.d.ts

@@ -1,36 +1,36 @@
 export default GridHead;
-type GridHead = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-}, {
-    default: {};
-}>, {
+type GridHead = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * The interactive version of `<TableThead>`.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
  * @see https://w3c.github.io/aria/#rowgroup
  */
-declare const GridHead: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const GridHead: $$__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/grid/grid-row-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="rowheader" class="sui grid-row-header {className}" {...$$restProps}>
-  <slot />
+<div {...restProps} role="rowheader" class="sui grid-row-header {className}">
+  {@render children?.()}
 </div>
 
 <style>.grid-row-header {

package/package/components/grid/grid-row-header.svelte.d.ts

@@ -1,36 +1,36 @@
 export default GridRowHeader;
-type GridRowHeader = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-}, {
-    default: {};
-}>, {
+type GridRowHeader = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * The interactive version of `<TableRowHeader>`.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
  * @see https://w3c.github.io/aria/#rowheader
  */
-declare const GridRowHeader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const GridRowHeader: $$__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/grid/grid-row.svelte

@@ -5,41 +5,37 @@
   @see https://w3c.github.io/aria/#row
 -->
 <script>
-  import { createEventDispatcher } from 'svelte';
-
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {string} [class] - The `class` attribute on the wrapper element.
+   * @property {boolean} [selected] - Whether to select the widget. An alias of the `aria-selected`
+   * attribute.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   * @property {(event: CustomEvent) => void} [onChange] - Custom `Change` event handler.
+   * @property {(event: CustomEvent) => void} [onSelect] - Custom `Select` event handler.
    */
-  let className = '';
-  export { className as class };
+
   /**
-   * Whether to select the widget. An alias of the `aria-selected` attribute.
-   * @type {boolean}
+   * @type {Props & Record<string, any>}
    */
-  export let selected = false;
-
-  const dispatch = createEventDispatcher();
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    selected = false,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <div
+  {...restProps}
   role="row"
   class="sui grid-row {className}"
   tabindex="0"
   aria-selected={selected}
-  {...$$restProps}
-  on:click
-  on:dblclick
-  on:focus
-  on:blur
-  on:select={(/** @type {any} */ event) => {
-    dispatch('select', /** @type {CustomEvent} */ (event).detail);
-  }}
-  on:change={(/** @type {any} */ event) => {
-    dispatch('change', /** @type {CustomEvent} */ (event).detail);
-  }}
 >
-  <slot />
+  {@render children?.()}
 </div>
 
 <style>.grid-row {

package/package/components/grid/grid-row.svelte.d.ts

@@ -1,52 +1,62 @@
 export default GridRow;
-type GridRow = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    selected?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    click: MouseEvent;
-    dblclick: MouseEvent;
-    focus: FocusEvent;
-    blur: FocusEvent;
-    select: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
+type GridRow = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * The interactive version of `<TableRow>`.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
  * @see https://w3c.github.io/aria/#row
  */
-declare const GridRow: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const GridRow: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
+    /**
+     * - Whether to select the widget. An alias of the `aria-selected`
+     * attribute.
+     */
     selected?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    click: MouseEvent;
-    dblclick: MouseEvent;
-    focus: FocusEvent;
-    blur: FocusEvent;
-    select: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Select` event handler.
+     */
+    onSelect?: ((event: CustomEvent) => void) | 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;
+    /**
+     * - Whether to select the widget. An alias of the `aria-selected`
+     * attribute.
+     */
+    selected?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Select` event handler.
+     */
+    onSelect?: ((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;