@sveltia/ui 0.16.0 → 0.17.1

package/package/components/alert/alert.svelte

@@ -8,17 +8,32 @@
   import Icon from '../icon/icon.svelte';
 
   /**
-   * Status of the alert.
-   * @type {'error' | 'warning' | 'info' | 'success'}
+   * @typedef {object} Props
+   * @property {'error' | 'warning' | 'info' | 'success'} status - Alert status.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   * @property {import('svelte').Snippet} [icon] - Icon slot content.
    */
-  export let status = 'error';
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    status,
+    children,
+    icon,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
-<div role="alert" class="sui alert {status}" {...$$restProps}>
-  <slot name="icon">
+<div {...restProps} role="alert" class="sui alert {status}">
+  {#if icon}
+    {@render icon()}
+  {:else}
     <Icon name={status === 'success' ? 'check_circle' : status} />
-  </slot>
-  <slot />
+  {/if}
+  {@render children?.()}
 </div>
 
 <style>.alert {

package/package/components/alert/alert.svelte.d.ts

@@ -1,40 +1,44 @@
 export default Alert;
-type Alert = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    status?: "error" | "warning" | "info" | "success" | undefined;
-}, {
-    icon: {};
-    default: {};
-}>, {
+type Alert = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    icon: {};
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * Inline alert message.
  * @see https://w3c.github.io/aria/#alert
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
  */
-declare const Alert: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    status?: "error" | "warning" | "info" | "success" | undefined;
-}, {
-    icon: {};
-    default: {};
-}>, {
+declare const Alert: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Alert status.
+     */
+    status: "error" | "warning" | "info" | "success";
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Icon slot content.
+     */
+    icon?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    icon: {};
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - Alert status.
+     */
+    status: "error" | "warning" | "info" | "success";
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Icon slot content.
+     */
+    icon?: 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/button/button-group.svelte

@@ -1,14 +1,24 @@
 <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="group" class="sui button-group {className}" {...$$restProps}>
-  <slot />
+<div {...restProps} role="group" class="sui button-group {className}">
+  {@render children?.()}
 </div>
 
 <style>.button-group {

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

@@ -1,31 +1,31 @@
 export default ButtonGroup;
-type ButtonGroup = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-}, {
-    default: {};
-}>, {
+type ButtonGroup = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
-declare const ButtonGroup: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const ButtonGroup: $$__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/button/button.svelte

@@ -4,119 +4,47 @@
   @see https://w3c.github.io/aria/#button
   @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
 -->
-<svelte:options accessors={true} />
-
 <script>
-  import { createEventDispatcher } from 'svelte';
-  import { activateKeyShortcuts } from '../../services/events';
+  import { activateKeyShortcuts } from '../../services/events.svelte';
   import Popup from '../util/popup.svelte';
 
   /**
-   * Reference to the `<button>` element.
-   * @type {HTMLButtonElement | undefined}
-   */
-  export let element = undefined;
-  /**
-   * The `class` attribute on the `<button>` element.
-   * @type {string}
-   */
-  let className = '';
-  export { className as class };
-  /**
-   * The `type` attribute on the `<button>` element.
-   * @type {'button' | 'submit' | 'reset'}
-   */
-  export let type = 'button';
-  /**
-   * The `role` attribute on the `<button>` element.
-   * @type {string}
-   */
-  export let role = 'button';
-  /**
-   * 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 used in certain
-   * roles, including `checkbox`, `listbox`, `slider` and `textbox`.
-   * @type {boolean | undefined}
-   */
-  export let readonly = undefined;
-  /**
-   * Whether to mark the widget pressed. An alias of the `aria-pressed` attribute.
-   * @type {boolean | 'mixed' | undefined}
-   */
-  export let pressed = undefined;
-  /**
-   * Keyboard shortcuts. An alias of the `aria-keyshortcuts` attribute. Accepts the special `Accel`
-   * key, which will be replaced with `Control` or `Meta` depending on the user’s operating system.
-   * @type {string | undefined}
-   */
-  export let keyShortcuts = undefined;
-  /**
-   * Text label displayed on the button.
-   * @type {string}
-   */
-  export let label = '';
-  /**
-   * The style variant of the button.
-   * @type {'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined}
-   */
-  export let variant = undefined;
-  /**
-   * The size of the button.
-   * @type {'small' | 'medium' | 'large' | undefined}
-   */
-  export let size = 'medium';
-  /**
-   * Whether to only show an icon on the button and trim the padding.
-   */
-  export let iconic = false;
-  /**
-   * Whether to make the button rounded.
-   */
-  export let pill = false;
-  /**
-   * Make the button width flexible.
-   * @type {boolean}
-   */
-  export let flex = false;
-  /**
-   * Where to show the dropdown menu.
-   * @type {import('../../typedefs').PopupPosition}
-   */
-  export let popupPosition = 'bottom-left';
-  /**
-   * Whether to show the backdrop for the popup.
-   * @type {boolean}
-   */
-  export let showPopupBackdrop = false;
-
-  const dispatch = createEventDispatcher();
-  /**
-   * Reference to the `Popup` component.
-   * @type {Popup | undefined}
+   * @type {import('../../typedefs').ButtonProps & import('../../typedefs').CommonEventHandlers &
+   * Record<string, any>}
    */
-  let popupComponent = undefined;
+  let {
+    /* eslint-disable prefer-const */
+    element = $bindable(),
+    class: className = '',
+    type = 'button',
+    role = 'button',
+    name = undefined,
+    value = undefined,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    pressed = undefined,
+    keyShortcuts = undefined,
+    label = '',
+    variant = undefined,
+    size = 'medium',
+    iconic = false,
+    pill = false,
+    flex = false,
+    popupPosition = 'bottom-left',
+    showPopupBackdrop = false,
+    children,
+    startIcon,
+    endIcon,
+    popup,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <button
+  bind:this={element}
+  {...restProps}
   class="sui button {variant ?? ''} {size} {className}"
   class:iconic
   class:pill
@@ -124,38 +52,16 @@
   {type}
   {name}
   {value}
-  hidden={hidden || undefined}
-  disabled={disabled || undefined}
+  {hidden}
+  {disabled}
   {role}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-readonly={readonly}
   aria-pressed={pressed}
-  {...$$restProps}
-  bind:this={element}
   use:activateKeyShortcuts={keyShortcuts}
-  on:mouseenter
-  on:mouseleave
-  on:click
-  on:dblclick
-  on:dragover
-  on:dragleave
-  on:dragend
-  on:drop
-  on:keydown
-  on:keyup
-  on:keypress
-  on:focus
-  on:blur
-  on:select={(/** @type {CustomEvent} */ event) => {
-    dispatch('select', event.detail);
-  }}
-  on:change={(/** @type {CustomEvent} */ event) => {
-    dispatch('change', event.detail);
-  }}
-  on:toggle
 >
-  <slot name="start-icon" />
+  {@render startIcon?.()}
   {#if variant === 'link'}
     {#if label}
       <span role="none" class="label">
@@ -163,7 +69,7 @@
       </span>
     {:else}
       <span role="none" class="label">
-        <slot />
+        {@render children?.()}
       </span>
     {/if}
   {:else}
@@ -172,20 +78,19 @@
         {label}
       </span>
     {/if}
-    <slot />
+    {@render children?.()}
   {/if}
-  <slot name="end-icon" />
+  {@render endIcon?.()}
 </button>
 
-{#if $$slots.popup}
+{#if popup}
   <Popup
     anchor={element}
     position={popupPosition}
     showBackdrop={showPopupBackdrop}
     touchOptimized={true}
-    bind:this={popupComponent}
   >
-    <slot name="popup" />
+    {@render popup()}
   </Popup>
 {/if}
 

package/package/components/button/button.svelte.d.ts

@@ -1,158 +1,17 @@
 export default Button;
-type Button = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    label?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    type?: "reset" | "submit" | "button" | undefined;
-    value?: string | undefined;
-    role?: string | undefined;
-    hidden?: boolean | undefined;
-    element?: HTMLButtonElement | undefined;
-    readonly?: boolean | undefined;
-    pressed?: boolean | "mixed" | undefined;
-    keyShortcuts?: string | undefined;
-    variant?: "link" | "primary" | "secondary" | "tertiary" | "ghost" | undefined;
-    iconic?: boolean | undefined;
-    pill?: boolean | undefined;
-    flex?: boolean | undefined;
-    popupPosition?: PopupPosition | undefined;
-    showPopupBackdrop?: boolean | undefined;
-}, {
-    'start-icon': {};
-    default: {};
-    'end-icon': {};
-    popup: {};
-}>, {
-    mouseenter: MouseEvent;
-    mouseleave: MouseEvent;
-    click: MouseEvent;
-    dblclick: MouseEvent;
-    dragover: DragEvent;
-    dragleave: DragEvent;
-    dragend: DragEvent;
-    drop: DragEvent;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    focus: FocusEvent;
-    blur: FocusEvent;
-    toggle: Event;
-    select: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
+type Button = SvelteComponent<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'start-icon': {};
-    default: {};
-    'end-icon': {};
-    popup: {};
-}> & {
-    $$bindings?: string | undefined;
-} & {
-    element: HTMLButtonElement | undefined;
-    class: string;
-    type: "reset" | "submit" | "button";
-    role: string;
-    name: string | undefined;
-    value: string | undefined;
-    hidden: boolean | undefined;
-    disabled: boolean;
-    readonly: boolean | undefined;
-    pressed: boolean | "mixed" | undefined;
-    keyShortcuts: string | undefined;
-    label: string;
-    variant: "link" | "primary" | "secondary" | "tertiary" | "ghost" | undefined;
-    size: "small" | "medium" | "large" | undefined;
-    iconic: boolean;
-    pill: boolean;
-    flex: boolean;
-    popupPosition: PopupPosition;
-    showPopupBackdrop: boolean;
+}, {}> & {
+    $$bindings?: "element" | undefined;
 };
 /**
  * A generic button widget based on the HTML `<button>` element.
  * @see https://w3c.github.io/aria/#button
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
  */
-declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    label?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    type?: "reset" | "submit" | "button" | undefined;
-    value?: string | undefined;
-    role?: string | undefined;
-    hidden?: boolean | undefined;
-    element?: HTMLButtonElement | undefined;
-    readonly?: boolean | undefined;
-    pressed?: boolean | "mixed" | undefined;
-    keyShortcuts?: string | undefined;
-    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "link" | undefined;
-    iconic?: boolean | undefined;
-    pill?: boolean | undefined;
-    flex?: boolean | undefined;
-    popupPosition?: import("../../typedefs").PopupPosition | undefined;
-    showPopupBackdrop?: boolean | undefined;
-}, {
-    'start-icon': {};
-    default: {};
-    'end-icon': {};
-    popup: {};
-}>, {
-    mouseenter: MouseEvent;
-    mouseleave: MouseEvent;
-    click: MouseEvent;
-    dblclick: MouseEvent;
-    dragover: DragEvent;
-    dragleave: DragEvent;
-    dragend: DragEvent;
-    drop: DragEvent;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    focus: FocusEvent;
-    blur: FocusEvent;
-    toggle: Event;
-    select: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
+declare const Button: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'start-icon': {};
-    default: {};
-    'end-icon': {};
-    popup: {};
-}, {
-    element: HTMLButtonElement | undefined;
-    class: string;
-    type: "reset" | "submit" | "button";
-    role: string;
-    name: string | undefined;
-    value: string | undefined;
-    hidden: boolean | undefined;
-    disabled: boolean;
-    readonly: boolean | undefined;
-    pressed: boolean | "mixed" | undefined;
-    keyShortcuts: string | undefined;
-    label: string;
-    variant: "link" | "primary" | "secondary" | "tertiary" | "ghost" | undefined;
-    size: "small" | "medium" | "large" | undefined;
-    iconic: boolean;
-    pill: boolean;
-    flex: boolean;
-    popupPosition: import("../../typedefs").PopupPosition;
-    showPopupBackdrop: boolean;
-}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+}, {}, {}, "element">;
 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/button/select-button-group.svelte

@@ -5,62 +5,56 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
 -->
 <script>
-  import { createEventDispatcher } from 'svelte';
-  import { activateGroup } from '../../services/group';
+  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 {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.
+   * @property {(event: CustomEvent) => void} [onChange] - Custom `Change` event handler.
    */
-  let className = '';
-  export { className as class };
-  /**
-   * Whether to hide the widget.
-   * @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}
+   * @type {Props & Record<string, any>}
    */
-  export let invalid = false;
-
-  const dispatch = createEventDispatcher();
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <div
+  {...restProps}
   role="radiogroup"
   class="sui select-button-group {className}"
-  hidden={hidden || undefined}
+  {hidden}
   tabindex="-1"
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-readonly={readonly}
   aria-required={required}
   aria-invalid={invalid}
-  {...$$restProps}
   use:activateGroup
-  on:change={(/** @type {CustomEvent} */ event) => {
-    dispatch('change', event.detail);
-  }}
 >
   <div role="none" class="inner" inert={disabled}>
-    <slot />
+    {@render children?.()}
   </div>
 </div>