@sveltia/ui 0.16.0 → 0.17.0

package/package/components/divider/divider.svelte.d.ts

@@ -1,26 +1,47 @@
 export default Divider;
-type Divider = SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    hidden?: boolean | undefined;
-    orientation?: "vertical" | "horizontal" | undefined;
-}, {
+type Divider = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: "" | undefined;
 };
 /**
  * A content divider with a visible vertical/horizontal line.
  * @see https://w3c.github.io/aria/#separator
  */
 declare const Divider: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
+    /**
+     * - Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
     hidden?: boolean | undefined;
+    /**
+     * - Orientation of the widget. An alias of the
+     * `aria-orientation` attribute.
+     */
     orientation?: "vertical" | "horizontal" | undefined;
-}, {
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Orientation of the widget. An alias of the
+     * `aria-orientation` attribute.
+     */
+    orientation?: "vertical" | "horizontal" | 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/divider/spacer.svelte

@@ -4,19 +4,24 @@
 -->
 <script>
   /**
-   * CSS class name on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {string} [class] - The `class` attribute on the wrapper element.
+   * @property {boolean} [flex] - Whether to make the spacer flexible.
    */
-  let className = '';
-  export { className as class };
+
   /**
-   * Whether to make the spacer flexible.
-   * @type {boolean}
+   * @type {Props & Record<string, any>}
    */
-  export let flex = false;
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    flex = false,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
-<div role="none" class="sui spacer {className}" class:flex {...$$restProps}></div>
+<div {...restProps} role="none" class="sui spacer {className}" class:flex></div>
 
 <style>.spacer.flex {
   flex: auto;

package/package/components/divider/spacer.svelte.d.ts

@@ -1,21 +1,32 @@
 export default Spacer;
-type Spacer = SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    flex?: boolean | undefined;
-}, {
+type Spacer = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: "" | undefined;
 };
 /** A content divider with no line. It can be flexible. */
 declare const Spacer: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
+    /**
+     * - Whether to make the spacer flexible.
+     */
     flex?: boolean | undefined;
-}, {
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to make the spacer flexible.
+     */
+    flex?: 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/drawer/drawer.svelte

@@ -13,46 +13,41 @@
   import Modal from '../util/modal.svelte';
 
   /**
-   * The `class` attribute on the content element.
-   * @type {string}
-   */
-  let className = '';
-  export { className as class };
-  /**
-   * Whether to open the drawer.
-   * @type {boolean}
-   */
-  export let open = false;
-  /**
-   * Title text displayed on the header.
-   * @type {string}
-   */
-  export let title = '';
-  /**
-   * Position of the drawer.
-   * @type {'top' | 'right' | 'bottom' | 'left'}
+   * @typedef {object} Props
+   * @property {string} [class] - The `class` attribute on the content element.
+   * @property {boolean} [open] - Whether to open the drawer.
+   * @property {string} [title] - Title text displayed on the header.
+   * @property {'top' | 'right' | 'bottom' | 'left'} [position] - Position of the drawer.
+   * @property {'small' | 'medium' | 'large' | 'x-large' | 'full'} [size] - Width or height of the
+   * drawer.
+   * @property {'inside' | 'outside' | false} [showClose] - Whether to show the Close button.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   * @property {import('svelte').Snippet} [header] - Header slot content.
+   * @property {import('svelte').Snippet} [headerExtra] - Header extra slot content.
+   * @property {import('svelte').Snippet} [footer] - Footer slot content.
+   * @property {import('svelte').Snippet} [closeIcon] - Close icon slot content.
+   * @property {import('svelte').Snippet} [extraContent] - Extra content slot content.
    */
-  export let position = 'right';
-  /**
-   * Width or height of the drawer.
-   * @type {'small' | 'medium' | 'large' | 'x-large' | 'full'}
-   */
-  export let size = 'small';
-  /**
-   * Whether to show the Close button.
-   * @type {'inside' | 'outside' | false}
-   */
-  export let showClose = 'outside';
-  /**
-   * Whether to close the modal when the backdrop (outside of the modal) is clicked.
-   * @type {boolean}
-   */
-  export let lightDismiss = false;
+
   /**
-   * Whether to keep the content in the DOM tree when the modal is not displayed.
-   * @type {boolean}
+   * @type {import('../../typedefs').ModalProps & Props & Record<string, any>}
    */
-  export let keepContent = false;
+  let {
+    /* eslint-disable prefer-const */
+    open = $bindable(false),
+    class: className,
+    title = '',
+    position = 'right',
+    size = 'small',
+    showClose = 'outside',
+    children,
+    header,
+    headerExtra,
+    footer,
+    closeIcon,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   /**
    * The ID of the drawer.
@@ -61,30 +56,16 @@
   const id = generateElementId('drawer');
   /**
    * A reference to the modal component.
-   * @type {Modal}
+   * @type {Modal | undefined}
    */
-  let modal;
+  let modal = $state();
 
-  $: orientation = position === 'right' || position === 'left' ? 'vertical' : 'horizontal';
+  const orientation = $derived(
+    position === 'right' || position === 'left' ? 'vertical' : 'horizontal',
+  );
 </script>
 
-<Modal
-  {id}
-  class="drawer"
-  bind:open
-  showBackdrop
-  {lightDismiss}
-  {keepContent}
-  {...$$restProps}
-  bind:this={modal}
-  on:opening
-  on:open
-  on:ok
-  on:cancel
-  on:closing
-  on:close
->
-  <slot name="extra-content" slot="extra-content" />
+<Modal bind:this={modal} {...restProps} bind:open {id} class="drawer" showBackdrop>
   <div role="none" class="content {className} {size} {position} {orientation}">
     <div role="none" class="extra-control">
       {#if showClose === 'outside'}
@@ -94,28 +75,30 @@
           class="close"
           aria-label={$_('_sui.close')}
           aria-controls={id}
-          on:click={() => {
-            modal.close('close');
+          onclick={() => {
+            modal?.close('close');
           }}
         >
-          <slot name="close-button" slot="start-icon">
-            <Icon name="close" />
-          </slot>
+          {#snippet startIcon()}
+            {#if closeIcon}
+              {@render closeIcon()}
+            {:else}
+              <Icon name="close" />
+            {/if}
+          {/snippet}
         </Button>
       {/if}
     </div>
-    {#if title || showClose === 'inside' || $$slots.header || $$slots['header-extra']}
-      {#if $$slots.header}
-        <slot name="header" />
+    {#if title || showClose === 'inside' || header || headerExtra}
+      {#if header}
+        {@render header()}
       {:else}
         <div role="none" class="header">
           <div role="none" class="title">
             {title}
           </div>
           <Spacer flex={true} />
-          {#if $$slots['header-extra']}
-            <slot name="header-extra" />
-          {/if}
+          {@render headerExtra?.()}
           {#if showClose === 'inside'}
             <Button
               variant="ghost"
@@ -123,24 +106,28 @@
               class="close"
               aria-label={$_('_sui.close')}
               aria-controls={id}
-              on:click={() => {
-                modal.close('close');
+              onclick={() => {
+                modal?.close('close');
               }}
             >
-              <slot name="close-button" slot="start-icon">
-                <Icon name="close" />
-              </slot>
+              {#snippet startIcon()}
+                {#if closeIcon}
+                  {@render closeIcon()}
+                {:else}
+                  <Icon name="close" />
+                {/if}
+              {/snippet}
             </Button>
           {/if}
         </div>
       {/if}
     {/if}
     <div role="none" class="main">
-      <slot />
+      {@render children?.()}
     </div>
-    {#if $$slots.footer}
+    {#if footer}
       <div role="none" class="footer">
-        <slot name="footer" />
+        {@render footer?.()}
       </div>
     {/if}
   </div>

package/package/components/drawer/drawer.svelte.d.ts

@@ -1,100 +1,118 @@
 export default Drawer;
-type Drawer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    title?: string | undefined;
-    size?: "small" | "medium" | "large" | "x-large" | "full" | undefined;
-    position?: "top" | "left" | "right" | "bottom" | undefined;
-    open?: boolean | undefined;
-    lightDismiss?: boolean | undefined;
-    keepContent?: boolean | undefined;
-    showClose?: false | "inside" | "outside" | undefined;
-}, {
-    'extra-content': {
-        slot: string;
-    };
-    'close-button': {
-        slot: string;
-    };
-    header: {};
-    'header-extra': {};
-    default: {};
-    footer: {};
-}>, {
-    opening: CustomEvent<any>;
-    open: CustomEvent<any>;
-    ok: CustomEvent<any>;
-    cancel: CustomEvent<any>;
-    closing: CustomEvent<any>;
-    close: CustomEvent<any>;
-} & {
+type Drawer = SvelteComponent<ModalProps & Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'extra-content': {
-        slot: string;
-    };
-    'close-button': {
-        slot: string;
-    };
-    header: {};
-    'header-extra': {};
-    default: {};
-    footer: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "open" | undefined;
 };
 /**
  * A generic drawer widget based on the HTML `<dialog>` element.
  * @see https://w3c.github.io/aria/#dialog
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
-declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const Drawer: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ModalProps & {
+    /**
+     * - The `class` attribute on the content element.
+     */
     class?: string | undefined;
+    /**
+     * - Whether to open the drawer.
+     */
+    open?: boolean | undefined;
+    /**
+     * - Title text displayed on the header.
+     */
     title?: string | undefined;
-    size?: "small" | "medium" | "large" | "x-large" | "full" | undefined;
+    /**
+     * - Position of the drawer.
+     */
     position?: "top" | "left" | "right" | "bottom" | undefined;
-    open?: boolean | undefined;
-    lightDismiss?: boolean | undefined;
-    keepContent?: boolean | undefined;
+    /**
+     * - Width or height of the
+     * drawer.
+     */
+    size?: "small" | "medium" | "large" | "x-large" | "full" | undefined;
+    /**
+     * - Whether to show the Close button.
+     */
     showClose?: false | "inside" | "outside" | undefined;
-}, {
-    'extra-content': {
-        slot: string;
-    };
-    'close-button': {
-        slot: string;
-    };
-    header: {};
-    'header-extra': {};
-    default: {};
-    footer: {};
-}>, {
-    opening: CustomEvent<any>;
-    open: CustomEvent<any>;
-    ok: CustomEvent<any>;
-    cancel: CustomEvent<any>;
-    closing: CustomEvent<any>;
-    close: CustomEvent<any>;
-} & {
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Header slot content.
+     */
+    header?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Header extra slot content.
+     */
+    headerExtra?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Footer slot content.
+     */
+    footer?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Close icon slot content.
+     */
+    closeIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Extra content slot content.
+     */
+    extraContent?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'extra-content': {
-        slot: string;
-    };
-    'close-button': {
-        slot: string;
-    };
-    header: {};
-    'header-extra': {};
-    default: {};
-    footer: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+}, {}, {}, "open">;
+type Props = {
+    /**
+     * - The `class` attribute on the content element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to open the drawer.
+     */
+    open?: boolean | undefined;
+    /**
+     * - Title text displayed on the header.
+     */
+    title?: string | undefined;
+    /**
+     * - Position of the drawer.
+     */
+    position?: "top" | "left" | "right" | "bottom" | undefined;
+    /**
+     * - Width or height of the
+     * drawer.
+     */
+    size?: "small" | "medium" | "large" | "x-large" | "full" | undefined;
+    /**
+     * - Whether to show the Close button.
+     */
+    showClose?: false | "inside" | "outside" | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Header slot content.
+     */
+    header?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Header extra slot content.
+     */
+    headerExtra?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Footer slot content.
+     */
+    footer?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Close icon slot content.
+     */
+    closeIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Extra content slot content.
+     */
+    extraContent?: 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-body.svelte

@@ -8,38 +8,43 @@
   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 grid-body row-group {className}"
   aria-labelledby={label ? `${id}-label` : undefined}
   aria-roledescription="grid 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/grid/grid-body.svelte.d.ts

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