@sveltia/ui 0.16.0 → 0.17.0

package/package/components/table/table-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 table-head {className}"
   aria-roledescription="table head"
-  {...$$restProps}
 >
-  <slot />
+  {@render children?.()}
 </div>
 
 <style>.table-head {

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

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

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

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

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

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

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

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

@@ -5,21 +5,28 @@
 -->
 <script>
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {string} [class] - The `class` attribute on the wrapper element.
+   * @property {'horizontal' | 'vertical'} [orientation] - Orientation of the widget. This is
+   * typically contrary to `<TabList>`’s `orientation`.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
    */
-  let className = '';
-  export { className as class };
 
   /**
-   * Orientation of the widget. This is typically contrary to `<TabList>`’s `orientation`.
-   * @type {'horizontal' | 'vertical'}
+   * @type {Props & Record<string, any>}
    */
-  export let orientation = 'vertical';
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    orientation = 'vertical',
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
-<div role="none" class="sui tab-box {orientation} {className}">
-  <slot />
+<div {...restProps} role="none" class="sui tab-box {orientation} {className}">
+  {@render children?.()}
 </div>
 
 <style>.tab-box {

package/package/components/tabs/tab-box.svelte.d.ts

@@ -1,35 +1,45 @@
 export default TabBox;
-type TabBox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    orientation?: "vertical" | "horizontal" | undefined;
-}, {
-    default: {};
-}>, {
+type TabBox = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * The container of `<TabList>` and `<TabPanels>`. The component name derives from XUL. This can be
  * omitted if not using vertical tabs.
  */
-declare const TabBox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+declare const TabBox: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
+    /**
+     * - Orientation of the widget. This is
+     * typically contrary to `<TabList>`’s `orientation`.
+     */
     orientation?: "vertical" | "horizontal" | 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;
+    /**
+     * - Orientation of the widget. This is
+     * typically contrary to `<TabList>`’s `orientation`.
+     */
+    orientation?: "vertical" | "horizontal" | 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/tabs/tab-list.svelte

@@ -5,47 +5,48 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 -->
 <script>
-  import { createEventDispatcher, onMount } from 'svelte';
-  import { activateGroup } from '../../services/group';
+  import { onMount } from 'svelte';
+  import { activateGroup } from '../../services/group.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} [hidden] - Whether to hide the widget.
+   * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+   * attribute.
+   * @property {'horizontal' | 'vertical'} [orientation] - Orientation of the widget. An alias of
+   * the `aria-orientation` attribute.
+   * @property {string | undefined} [name] - The `data-name` attribute on the wrapper element.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   * @property {(event: CustomEvent) => void} [onChange] - Custom `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;
-  /**
-   * Orientation of the widget. An alias of the `aria-orientation` attribute.
-   * @type {'horizontal' | 'vertical'}
-   */
-  export let orientation = 'horizontal';
+
   /**
-   * The `data-name` attribute on the wrapper element.
-   * @type {string | undefined}
+   * @type {Props & Record<string, any>}
    */
-  export let name = undefined;
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    disabled = false,
+    orientation = 'horizontal',
+    name = undefined,
+    children,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
-  const dispatch = createEventDispatcher();
   /**
    * A reference to the wrapper element.
    * @type {HTMLElement | undefined}
    */
-  let wrapper = undefined;
+  let wrapper = $state();
   /**
    * The indicator’s CSS style.
    * @type {string | undefined}
    */
-  let indicatorStyle = undefined;
+  let indicatorStyle = $state();
 
   /**
    * Update the indicator position.
@@ -87,26 +88,26 @@
 </script>
 
 <div
+  bind:this={wrapper}
+  {...restProps}
   role="tablist"
   class="sui tab-list {className}"
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-orientation={orientation}
   data-name={name || undefined}
-  {...$$restProps}
-  bind:this={wrapper}
-  use:activateGroup
-  on:initialized={() => {
+  onInitialized={() => {
     updateIndicator();
   }}
-  on:change={(/** @type {CustomEvent} */ event) => {
-    dispatch('change', event.detail);
+  onChange={(/** @type {CustomEvent} */ event) => {
     updateIndicator();
+    onChange?.(event);
   }}
+  use:activateGroup
 >
   <div role="none" class="inner" inert={disabled}>
-    <slot />
+    {@render children?.()}
   </div>
   <div role="none" class="indicator" style={indicatorStyle}></div>
 </div>