@sveltia/ui 0.16.0 → 0.17.1

package/package/components/calendar/calendar.svelte

@@ -9,8 +9,19 @@
   import Spacer from '../divider/spacer.svelte';
   import Icon from '../icon/icon.svelte';
 
-  /** @type {string | undefined} */
-  export let value = undefined;
+  /**
+   * @typedef {object} Props
+   * @property {string | undefined} [value] - Date.
+   */
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(undefined),
+    /* eslint-enable prefer-const */
+  } = $props();
 
   /** @type {{ day: Date }[]} */
   const dayList = [];
@@ -18,9 +29,13 @@
   const weeks = [];
   const now = new Date();
 
-  $: date = value ? new Date(value) : now;
-  $: firstDayOfMonth = new Date(date.getUTCFullYear(), date.getUTCMonth(), 1);
-  $: firstDay = new Date(firstDayOfMonth);
+  const date = $derived(value ? new Date(value) : now);
+  const firstDayOfMonth = $derived(new Date(date.getUTCFullYear(), date.getUTCMonth(), 1));
+  let firstDay = $state();
+
+  $effect(() => {
+    firstDay = new Date(firstDayOfMonth);
+  });
 
   /**
    * Populate {@link weeks} as per the current {@link firstDay}.
@@ -41,11 +56,11 @@
     }
   };
 
-  $: {
+  $effect(() => {
     if (firstDay) {
       getWeeks();
     }
-  }
+  });
 </script>
 
 <div role="group">
@@ -53,57 +68,67 @@
   <div role="none" class="header">
     <Button
       variant="ghost"
-      label={firstDay.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
+      label={firstDay?.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
       aria-haspopup="dialog"
     >
-      <Icon slot="end-icon" name="arrow_drop_down" class="small-arrow" />
-      <div slot="popup" role="none" class="popup-inner" on:click|stopPropagation>
-        <div role="group" aria-label={$_('_sui.calendar.year')}>
-          <div role="none" class="header">
-            <Button
-              aria-label={$_('_sui.calendar.previous_decade')}
-              on:click={() => {
-                //
-              }}
-            >
-              <Icon name="chevron_left" />
-            </Button>
-            <Button
-              aria-label={$_('_sui.calendar.next_decade')}
-              on:click={() => {
-                //
-              }}
-            >
-              <Icon name="chevron_right" />
-            </Button>
+      {#snippet endIcon()}
+        <Icon name="arrow_drop_down" class="small-arrow" />
+      {/snippet}
+      {#snippet popup()}
+        <div
+          role="none"
+          class="popup-inner"
+          onclick={(event) => {
+            event.stopPropagation();
+          }}
+        >
+          <div role="group" aria-label={$_('_sui.calendar.year')}>
+            <div role="none" class="header">
+              <Button
+                aria-label={$_('_sui.calendar.previous_decade')}
+                onclick={() => {
+                  //
+                }}
+              >
+                <Icon name="chevron_left" />
+              </Button>
+              <Button
+                aria-label={$_('_sui.calendar.next_decade')}
+                onclick={() => {
+                  //
+                }}
+              >
+                <Icon name="chevron_right" />
+              </Button>
+            </div>
+            <div role="none" class="grid">
+              {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as year}
+                <div role="none">
+                  <Button>202{year}</Button>
+                </div>
+              {/each}
+            </div>
           </div>
-          <div role="none" class="grid">
-            {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as year}
-              <div role="none">
-                <Button>202{year}</Button>
-              </div>
-            {/each}
+          <Divider orientation="vertical" />
+          <div role="group" aria-label={$_('_sui.calendar.month')}>
+            <div role="none" class="grid">
+              {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as month}
+                <div role="none">
+                  <Button>
+                    {new Date(date.getUTCFullYear(), month, 10).toLocaleDateString('en', {
+                      month: 'short',
+                    })}
+                  </Button>
+                </div>
+              {/each}
+            </div>
           </div>
         </div>
-        <Divider orientation="vertical" />
-        <div role="group" aria-label={$_('_sui.calendar.month')}>
-          <div role="none" class="grid">
-            {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as month}
-              <div role="none">
-                <Button>
-                  {new Date(date.getUTCFullYear(), month, 10).toLocaleDateString('en', {
-                    month: 'short',
-                  })}
-                </Button>
-              </div>
-            {/each}
-          </div>
-        </div>
-      </div>
+      {/snippet}
     </Button>
     <Button
       aria-label={$_('_sui.calendar.previous_month')}
-      on:click={() => {
+      onclick={() => {
         firstDay.setUTCMonth(firstDay.getUTCMonth() - 1);
         firstDay = firstDay;
       }}
@@ -112,7 +137,7 @@
     </Button>
     <Button
       aria-label={$_('_sui.calendar.next_month')}
-      on:click={() => {
+      onclick={() => {
         firstDay.setUTCMonth(firstDay.getUTCMonth() + 1);
         firstDay = firstDay;
       }}
@@ -129,7 +154,7 @@
     {#each dayList as { day }}
       <div
         role="none"
-        class:other-month={day.getUTCMonth() !== firstDay.getUTCMonth()}
+        class:other-month={day.getUTCMonth() !== firstDay?.getUTCMonth()}
         class:today={day.getFullYear() === now.getFullYear() &&
           day.getMonth() === now.getMonth() &&
           day.getDate() === now.getDate()}
@@ -137,7 +162,7 @@
         <Button
           role="option"
           aria-selected={false}
-          on:click={() => {
+          onclick={() => {
             [value] = day.toJSON().split('T');
           }}
         >
@@ -148,7 +173,7 @@
   </div>
   <div role="none" class="footer">
     <Button
-      on:click={() => {
+      onclick={() => {
         value = '';
       }}
     >
@@ -156,7 +181,7 @@
     </Button>
     <Spacer flex={true} />
     <Button
-      on:click={() => {
+      onclick={() => {
         [value] = now.toJSON().split('T');
       }}
     >

package/package/components/calendar/calendar.svelte.d.ts

@@ -1,21 +1,24 @@
 export default Calendar;
-type Calendar = SvelteComponent<{
-    value?: string | undefined;
-}, {
-    click: MouseEvent;
-} & {
+type Calendar = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: "value" | undefined;
 };
 /** A calendar (date picker) widget. */
 declare const Calendar: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Date.
+     */
     value?: string | undefined;
-}, {
-    click: MouseEvent;
-} & {
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "value">;
+type Props = {
+    /**
+     * - Date.
+     */
+    value?: string | 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/checkbox/checkbox-group.svelte

@@ -4,39 +4,42 @@
 -->
 <script>
   /**
-   * 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. An alias of the `aria-hidden`
+   * attribute.
+   * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+   * attribute.
+   * @property {'horizontal'|'vertical'} [orientation] - Orientation of the widget.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
    */
-  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.
-   * @type {('horizontal'|'vertical')}
+   * @type {Props & Record<string, any>}
    */
-  export let orientation = 'horizontal';
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    disabled = false,
+    orientation = 'horizontal',
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <div
+  {...restProps}
   role="group"
   class="sui checkbox-group {className} {orientation}"
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-roledescription="checkbox group"
-  {...$$restProps}
 >
   <div role="none" class="inner" inert={disabled}>
-    <slot />
+    {@render children?.()}
   </div>
 </div>
 

package/package/components/checkbox/checkbox-group.svelte.d.ts

@@ -1,38 +1,60 @@
 export default CheckboxGroup;
-type CheckboxGroup = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    hidden?: boolean | undefined;
-    orientation?: "vertical" | "horizontal" | undefined;
-}, {
-    default: {};
-}>, {
+type CheckboxGroup = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /** The layout container of `<Checkbox>`es. */
-declare const CheckboxGroup: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const CheckboxGroup: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
-    disabled?: boolean | undefined;
+    /**
+     * - Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
     hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Orientation of the widget.
+     */
     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;
+    /**
+     * - Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Orientation of the widget.
+     */
+    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/checkbox/checkbox.svelte

@@ -7,73 +7,56 @@
 -->
 <script>
   import { generateElementId } from '@sveltia/utils/element';
-  import { createEventDispatcher } from 'svelte';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.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} [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 {boolean | 'mixed'} [checked] - Whether to check the widget. An alias of the
+   * `aria-checked` attribute.
+   * @property {string | undefined} [label] - Text label displayed next to the checkbox.
+   * @property {string} [aria-label] - `aria-label` attribute.
+   * @property {import('svelte').Snippet} [checkIcon] - Check icon slot content.
    */
-  let className = '';
-  export { className as class };
-  /**
-   * The `name` attribute on the `<button>` element.
-   * @type {string | undefined}
-   */
-  export let name = undefined;
-  /**
-   * The `value` attribute on the `<button>` element.
-   * @type {string | undefined}
-   */
-  export let value = undefined;
-  /**
-   * 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}
-   */
-  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 checkbox.
-   * @type {string | undefined}
+   * @type {import('../../typedefs').ButtonProps & import('../../typedefs').CommonEventHandlers &
+   * Props & Record<string, any>}
    */
-  export let label = undefined;
+  let {
+    /* eslint-disable prefer-const */
+    checked = $bindable(false),
+    class: className,
+    name = undefined,
+    value = undefined,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    label = undefined,
+    'aria-label': ariaLabel,
+    onChange,
+    children,
+    checkIcon,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
-  const dispatch = createEventDispatcher();
   const id = generateElementId('checkbox');
 
   /**
-   * Reference to the `Button` component.
-   * @type {Button | undefined}
+   * Reference to the `<button>` element.
+   * @type {HTMLButtonElement | undefined}
    */
-  let buttonComponent = undefined;
+  let buttonElement = $state();
 
-  $: ariaLabel = $$restProps['aria-label'];
-  $: indeterminate = checked === 'mixed';
+  const indeterminate = $derived(checked === 'mixed');
 </script>
 
 <div
@@ -83,15 +66,20 @@
   class:indeterminate
   class:disabled
   class:readonly
-  hidden={hidden || undefined}
-  on:click|preventDefault|stopPropagation={(event) => {
+  {hidden}
+  onclick={(event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
     if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
-      buttonComponent?.element?.click();
+      buttonElement?.click();
     }
   }}
 >
   <div role="none" class="inner" inert={disabled}>
     <Button
+      {...restProps}
+      bind:element={buttonElement}
       role="checkbox"
       {id}
       {name}
@@ -104,26 +92,28 @@
       aria-checked={checked}
       aria-label={ariaLabel || undefined}
       aria-labelledby={ariaLabel ? undefined : `${id}-label`}
-      {...$$restProps}
-      bind:this={buttonComponent}
-      on:click={(event) => {
+      onclick={(event) => {
         event.preventDefault();
         event.stopPropagation();
 
         if (!disabled && !readonly) {
           checked = indeterminate ? true : !checked;
-          dispatch('change', { checked });
+          onChange?.(new CustomEvent('Change', { detail: { checked } }));
         }
       }}
     >
-      <slot name="check-icon" slot="start-icon">
-        <Icon name={indeterminate ? 'remove' : 'check'} />
-      </slot>
+      {#snippet startIcon()}
+        {#if checkIcon}
+          {@render checkIcon()}
+        {:else}
+          <Icon name={indeterminate ? 'remove' : 'check'} />
+        {/if}
+      {/snippet}
     </Button>
-    {#if $$slots.default || label}
+    {#if children || label}
       <label id="{id}-label">
-        {#if $$slots.default}
-          <slot />
+        {#if children}
+          {@render children()}
         {:else}
           {label}
         {/if}