@sveltia/ui 0.16.0 → 0.17.0

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

@@ -1,48 +1,80 @@
 export default TabList;
-type TabList = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    hidden?: boolean | undefined;
-    orientation?: "vertical" | "horizontal" | undefined;
-}, {
-    default: {};
-}>, {
-    change: CustomEvent<any>;
-} & {
+type TabList = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * A tab list widget.
  * @see https://w3c.github.io/aria/#tablist
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
-declare const TabList: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const TabList: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
+    /**
+     * - Whether to hide the widget.
+     */
     hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Orientation of the widget. An alias of
+     * the `aria-orientation` attribute.
+     */
     orientation?: "vertical" | "horizontal" | undefined;
-}, {
-    default: {};
-}>, {
-    change: CustomEvent<any>;
-} & {
+    /**
+     * - The `data-name` attribute on the wrapper element.
+     */
+    name?: string | 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>;
-}, {
-    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 hide the widget.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Orientation of the widget. An alias of
+     * the `aria-orientation` attribute.
+     */
+    orientation?: "vertical" | "horizontal" | undefined;
+    /**
+     * - The `data-name` attribute on the wrapper element.
+     */
+    name?: string | 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/tabs/tab-panel.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="tabpanel" class="sui tab-panel {className}" {...$$restProps}>
-  <slot />
+<div {...restProps} role="tabpanel" class="sui tab-panel {className}">
+  {@render children?.()}
 </div>
 
 <style>.tab-panel {

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

@@ -1,36 +1,36 @@
 export default TabPanel;
-type TabPanel = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-}, {
-    default: {};
-}>, {
+type TabPanel = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * A tab content panel.
  * @see https://w3c.github.io/aria/#tabpanel
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
-declare const TabPanel: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const TabPanel: $$__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-panels.svelte

@@ -5,15 +5,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="none" class="sui tab-panels {className}">
-  <slot />
+<div {...restProps} role="none" class="sui tab-panels {className}">
+  {@render children?.()}
 </div>
 
 <style>.tab-panels {

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

@@ -1,33 +1,35 @@
 export default TabPanels;
-type TabPanels = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-}, {
-    default: {};
-}>, {
+type TabPanels = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * The container of `<TabPanel>`s. The component name derives from XUL. This can be omitted if the
  * child tab panels don’t need a sliding animation.
  */
-declare const TabPanels: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+declare const TabPanels: $$__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.svelte

@@ -8,41 +8,44 @@
   import Button from '../button/button.svelte';
 
   /**
-   * The `class` attribute on the `<button>` element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {boolean} [selected] - Whether to select the widget. An alias of the `aria-selected`
+   * attribute.
    */
-  let className = '';
-  export { className as class };
-  /**
-   * Whether to select the widget. An alias of the `aria-selected` attribute.
-   * @type {boolean}
-   */
-  export let selected = false;
-  /**
-   * 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}
+   * @type {import('../../typedefs').ButtonProps & import('../../typedefs').CommonEventHandlers &
+   * Props & Record<string, any>}
    */
-  export let disabled = false;
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    disabled = false,
+    selected = false,
+    children: _children,
+    startIcon: _startIcon,
+    endIcon: _endIcon,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <Button
+  {...restProps}
   role="tab"
   class="sui tab {className}"
   {hidden}
   {disabled}
   aria-selected={selected}
-  {...$$restProps}
-  on:focus
-  on:blur
-  on:select
-  on:change
 >
-  <slot name="start-icon" slot="start-icon" />
-  <slot />
-  <slot name="end-icon" slot="end-icon" />
+  {#snippet startIcon()}
+    {@render _startIcon?.()}
+  {/snippet}
+  {#snippet children()}
+    {@render _children?.()}
+  {/snippet}
+  {#snippet endIcon()}
+    {@render _endIcon?.()}
+  {/snippet}
 </Button>

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

@@ -1,76 +1,30 @@
 export default Tab;
-type Tab = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    hidden?: boolean | undefined;
-    selected?: boolean | undefined;
-}, {
-    'start-icon': {
-        slot: string;
-    };
-    default: {};
-    'end-icon': {
-        slot: string;
-    };
-}>, {
-    focus: FocusEvent;
-    blur: FocusEvent;
-    select: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
+type Tab = SvelteComponent<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'start-icon': {
-        slot: string;
-    };
-    default: {};
-    'end-icon': {
-        slot: string;
-    };
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * A tab widget.
  * @see https://w3c.github.io/aria/#tab
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
-declare const Tab: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    hidden?: boolean | undefined;
+declare const Tab: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+    /**
+     * - Whether to select the widget. An alias of the `aria-selected`
+     * attribute.
+     */
     selected?: boolean | undefined;
-}, {
-    'start-icon': {
-        slot: string;
-    };
-    default: {};
-    'end-icon': {
-        slot: string;
-    };
-}>, {
-    focus: FocusEvent;
-    blur: FocusEvent;
-    select: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'start-icon': {
-        slot: string;
-    };
-    default: {};
-    'end-icon': {
-        slot: string;
-    };
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - Whether to select the widget. An alias of the `aria-selected`
+     * attribute.
+     */
+    selected?: boolean | 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/text-editor/lexical-root.svelte

@@ -2,35 +2,37 @@
   import { getContext, onMount } from 'svelte';
 
   /**
-   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
-   * @type {boolean | undefined}
+   * @typedef {object} Props
+   * @property {string | undefined} [value] - Input value.
+   * @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.
    */
-  export let hidden = undefined;
-  /**
-   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
-   * @type {boolean}
-   */
-  export let disabled = false;
-  /**
-   * Whether to disable the widget. An alias of `aria-readonly` attribute.
-   * @type {boolean}
-   */
-  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;
+
   /**
-   * Input value.
-   * @type {string | undefined}
+   * @type {Props & Record<string, any>}
    */
-  export let value = undefined;
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(),
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   /**
    * Text editor state.
@@ -43,10 +45,13 @@
    * Reference to the Lexical editor root element.
    * @type {HTMLElement | undefined}
    */
-  let lexicalRoot = undefined;
+  let lexicalRoot = $state();
 
-  $: editable = !(disabled || readonly);
-  $: $editor?.setEditable(editable);
+  const editable = $derived(!(disabled || readonly));
+
+  $effect(() => {
+    $editor?.setEditable(editable);
+  });
 
   /**
    * Update {@link value} and other state variables whenever the editor content is updated.
@@ -88,14 +93,16 @@
     };
   });
 
-  $: {
+  $effect(() => {
     if ($editor && lexicalRoot) {
       $editor.setRootElement(lexicalRoot);
     }
-  }
+  });
 </script>
 
 <div
+  bind:this={lexicalRoot}
+  {...restProps}
   role="textbox"
   aria-multiline="true"
   aria-hidden={hidden}
@@ -107,7 +114,6 @@
   id="{$editorId}-lexical-root"
   contenteditable={editable}
   {hidden}
-  bind:this={lexicalRoot}
 ></div>
 
 <style>.lexical-root {

package/package/components/text-editor/lexical-root.svelte.d.ts

@@ -1,26 +1,87 @@
 export default LexicalRoot;
-type LexicalRoot = SvelteComponent<{
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    required?: boolean | undefined;
-    value?: string | undefined;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
-}, {
+type LexicalRoot = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: "value" | undefined;
 };
 declare const LexicalRoot: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Input value.
+     */
+    value?: 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;
-    invalid?: 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;
+} & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type Props = {
+    /**
+     * - Input value.
+     */
     value?: 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;
-}, {
-    [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;
+};
 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;