@sveltia/ui 0.15.16 → 0.17.0

package/package/components/menu/menu-button.svelte

@@ -8,77 +8,53 @@
   import Popup from '../util/popup.svelte';
 
   /**
-   * The `class` attribute on the `<button>` element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {HTMLElement | undefined} [popupPositionBaseElement] - The base element of
+   * {@link popupPosition}. If omitted, this will be {@link buttonComponent}.
    */
-  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;
-  /**
-   * Where to show the dropdown menu.
-   * @type {import('../../typedefs').PopupPosition}
-   */
-  export let popupPosition = 'bottom-left';
-  /**
-   * The base element of {@link popupPosition}. If omitted, this will be {@link buttonComponent}.
-   * @type {HTMLElement | undefined}
-   */
-  export let popupPositionBaseElement = undefined;
-  /**
-   * Whether to show the backdrop for the popup.
-   * @type {boolean}
-   */
-  export let showPopupBackdrop = false;
-  /**
-   * 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'}
-   */
-  export let size = 'medium';
-  /**
-   * Whether to only show an icon on the button and trim the padding.
-   */
-  export let iconic = false;
 
   /**
-   * Reference to the `Button` component.
-   * @type {Button | undefined}
+   * @type {import('../../typedefs').ButtonProps & import('../../typedefs').CommonEventHandlers &
+   * Props & Record<string, any>}
    */
-  let buttonComponent;
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    disabled = false,
+    popupPosition = 'bottom-left',
+    popupPositionBaseElement = undefined,
+    showPopupBackdrop = false,
+    label = '',
+    variant = undefined,
+    size = 'medium',
+    iconic = false,
+    children: _children,
+    startIcon: _startIcon,
+    endIcon: _endIcon,
+    popup,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
   /**
-   * Reference to the `Popup` component.
-   * @type {Popup | undefined}
+   * Reference to the `<button>` element.
+   * @type {HTMLButtonElement | undefined}
    */
-  let popupComponent;
+  let buttonElement = $state();
 
   /**
    * Move focus to the `<button>` element.
    */
   export const focus = () => {
-    buttonComponent?.element?.focus();
+    buttonElement?.focus();
   };
 </script>
 
 <div role="none" class="wrapper">
   <Button
+    {...restProps}
+    bind:element={buttonElement}
     class="sui menu-button {className}"
     {hidden}
     {disabled}
@@ -87,21 +63,24 @@
     {size}
     {iconic}
     aria-haspopup="menu"
-    {...$$restProps}
-    bind:this={buttonComponent}
   >
-    <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>
 </div>
 
 <Popup
-  anchor={buttonComponent?.element}
+  anchor={buttonElement}
   position={popupPosition}
   positionBaseElement={popupPositionBaseElement}
   showBackdrop={showPopupBackdrop}
-  bind:this={popupComponent}
 >
-  <slot name="popup" />
+  {@render popup?.()}
 </Popup>

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

@@ -1,70 +1,43 @@
-/** @typedef {typeof __propDef.props}  MenuButtonProps */
-/** @typedef {typeof __propDef.events}  MenuButtonEvents */
-/** @typedef {typeof __propDef.slots}  MenuButtonSlots */
+export default MenuButton;
+type MenuButton = SvelteComponent<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+} & {
+    focus: () => void;
+};
 /**
  * A button to open a `<Menu>` widget.
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
  */
-export default class MenuButton extends SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    focus?: (() => void) | undefined;
-    label?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    hidden?: boolean | undefined;
-    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "link" | undefined;
-    iconic?: boolean | undefined;
-    popupPosition?: import("../../typedefs").PopupPosition | undefined;
-    showPopupBackdrop?: boolean | undefined;
+declare const MenuButton: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+    /**
+     * - The base element of
+     * {@link popupPosition}. If omitted, this will be {@link buttonComponent}.
+     */
     popupPositionBaseElement?: HTMLElement | undefined;
-}, {
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'start-icon': {
-        slot: string;
-    };
-    default: {};
-    'end-icon': {
-        slot: string;
+}, {}, {
+    focus: () => void;
+}, "">;
+type Props = {
+    /**
+     * - The base element of
+     * {@link popupPosition}. If omitted, this will be {@link buttonComponent}.
+     */
+    popupPositionBaseElement?: HTMLElement | 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    popup: {};
-}> {
-    get focus(): () => void;
+    z_$$bindings?: Bindings;
 }
-export type MenuButtonProps = typeof __propDef.props;
-export type MenuButtonEvents = typeof __propDef.events;
-export type MenuButtonSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        focus?: (() => void) | undefined;
-        label?: string | undefined;
-        size?: "small" | "medium" | "large" | undefined;
-        hidden?: boolean | undefined;
-        variant?: "primary" | "secondary" | "tertiary" | "ghost" | "link" | undefined;
-        iconic?: boolean | undefined;
-        popupPosition?: import("../../typedefs").PopupPosition | undefined;
-        showPopupBackdrop?: boolean | undefined;
-        popupPositionBaseElement?: HTMLElement | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'start-icon': {
-            slot: string;
-        };
-        default: {};
-        'end-icon': {
-            slot: string;
-        };
-        popup: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/package/components/menu/menu-item-checkbox.svelte

@@ -8,58 +8,46 @@
   import MenuItem from './menu-item.svelte';
 
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @type {import('../../typedefs').ButtonProps & import('../../typedefs').MenuItemProps &
+   * import('../../typedefs').CommonEventHandlers & Record<string, any>}
    */
-  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;
-  /**
-   * Whether to mark the widget checked.
-   * @type {boolean}
-   */
-  export let checked = false;
-  /**
-   * Text label displayed on the item.
-   * @type {string | undefined}
-   */
-  export let label = '';
-  /**
-   * Name of `<Icon>` displayed before the label.
-   */
-  export let iconName = '';
-  /**
-   * ARIA label of `<Icon>` displayed before the label.
-   */
-  export let iconLabel = '';
+  let {
+    /* eslint-disable prefer-const */
+    checked = $bindable(false),
+    class: className,
+    hidden = false,
+    disabled = false,
+    label = '',
+    children: _children,
+    startIcon: _startIcon,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <MenuItem
+  {...restProps}
   role="menuitemcheckbox"
   class="sui menu-item-checkbox {className}"
   {label}
   {hidden}
   {disabled}
   aria-checked={checked}
-  {iconName}
-  {iconLabel}
-  {...$$restProps}
-  on:click
-  on:select
-  on:change
-  on:change={(event) => {
+  onChange={(event) => {
+    onChange?.(event);
     checked = event.detail.checked;
   }}
 >
-  <slot />
-  <svelte:component this={checked ? Icon : undefined} slot="end-icon" name="check" />
+  {#snippet startIcon()}
+    {@render _startIcon?.()}
+  {/snippet}
+  {#snippet children()}
+    {@render _children?.()}
+  {/snippet}
+  {#snippet endIcon()}
+    {#if checked}
+      <Icon name="check" />
+    {/if}
+  {/snippet}
 </MenuItem>

package/package/components/menu/menu-item-checkbox.svelte.d.ts

@@ -1,55 +1,26 @@
-/** @typedef {typeof __propDef.props}  MenuItemCheckboxProps */
-/** @typedef {typeof __propDef.events}  MenuItemCheckboxEvents */
-/** @typedef {typeof __propDef.slots}  MenuItemCheckboxSlots */
+export default MenuItemCheckbox;
+type MenuItemCheckbox = SvelteComponent<ButtonProps & MenuItemProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "checked" | undefined;
+};
 /**
  * A menu item widget with a checkbox.
  * @see https://w3c.github.io/aria/#menuitemcheckbox
  */
-export default class MenuItemCheckbox extends SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    label?: string | undefined;
-    checked?: boolean | undefined;
-    hidden?: boolean | undefined;
-    iconName?: string | undefined;
-    iconLabel?: string | undefined;
-}, {
-    click: MouseEvent;
-    select: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
+declare const MenuItemCheckbox: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ButtonProps & import("../../typedefs").MenuItemProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type MenuItemCheckboxProps = typeof __propDef.props;
-export type MenuItemCheckboxEvents = typeof __propDef.events;
-export type MenuItemCheckboxSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        label?: string | undefined;
-        checked?: boolean | undefined;
-        hidden?: boolean | undefined;
-        iconName?: string | undefined;
-        iconLabel?: string | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        select: CustomEvent<any>;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+}, {}, {}, "checked">;
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+    z_$$bindings?: Bindings;
+}

package/package/components/menu/menu-item-group.svelte

@@ -6,45 +6,48 @@
   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 {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 {string} [title] - Text label displayed above the group items.
    */
-  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;
+
   /**
-   * Text label displayed above the group items.
+   * @type {import('../../typedefs').CommonEventHandlers & Props & Record<string, any>}
    */
-  export let title = '';
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    disabled = false,
+    title = '',
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const id = generateElementId('group');
 </script>
 
 <div
+  {...restProps}
   role="group"
   {id}
   class="sui menu-item-group {className}"
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-labelledby={title ? `${id}-title` : undefined}
   aria-roledescription="menu item group"
-  {...$$restProps}
 >
   {#if title}
     <div role="none" class="title" id="{id}-title">{title}</div>
   {/if}
   <div role="none" class="inner" inert={disabled}>
-    <slot />
+    {@render children?.()}
   </div>
 </div>
 

package/package/components/menu/menu-item-group.svelte.d.ts

@@ -1,38 +1,62 @@
-/** @typedef {typeof __propDef.props}  MenuItemGroupProps */
-/** @typedef {typeof __propDef.events}  MenuItemGroupEvents */
-/** @typedef {typeof __propDef.slots}  MenuItemGroupSlots */
+export default MenuItemGroup;
+type MenuItemGroup = SvelteComponent<KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
 /** A menu item group. */
-export default class MenuItemGroup extends SvelteComponent<{
-    [x: string]: any;
+declare const MenuItemGroup: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+    /**
+     * - 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;
+    /**
+     * - Text label displayed above the group items.
+     */
     title?: string | undefined;
-    hidden?: boolean | undefined;
-}, {
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type MenuItemGroupProps = typeof __propDef.props;
-export type MenuItemGroupEvents = typeof __propDef.events;
-export type MenuItemGroupSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        title?: string | undefined;
-        hidden?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+}, {}, {}, "">;
+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;
+    /**
+     * - Text label displayed above the group items.
+     */
+    title?: string | undefined;
 };
-export {};
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/package/components/menu/menu-item-radio.svelte

@@ -9,58 +9,46 @@
   import MenuItem from './menu-item.svelte';
 
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @type {import('../../typedefs').ButtonProps & import('../../typedefs').MenuItemProps &
+   * import('../../typedefs').CommonEventHandlers & Record<string, any>}
    */
-  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;
-  /**
-   * Whether to check the widget. An alias of the `aria-checked` attribute.
-   * @type {boolean}
-   */
-  export let checked = false;
-  /**
-   * Text label displayed on the item.
-   * @type {string | undefined}
-   */
-  export let label = '';
-  /**
-   * Name of `<Icon>` displayed before the label.
-   */
-  export let iconName = '';
-  /**
-   * ARIA label of `<Icon>` displayed before the label.
-   */
-  export let iconLabel = '';
+  let {
+    /* eslint-disable prefer-const */
+    checked = $bindable(false),
+    class: className,
+    hidden = false,
+    disabled = false,
+    label = '',
+    children: _children,
+    startIcon: _startIcon,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <MenuItem
+  {...restProps}
   role="menuitemradio"
   class="sui menu-item-radio {className}"
   {label}
   {hidden}
   {disabled}
   aria-checked={checked}
-  {iconName}
-  {iconLabel}
-  {...$$restProps}
-  on:click
-  on:select
-  on:change
-  on:change={(event) => {
+  onChange={(event) => {
+    onChange?.(event);
     checked = event.detail.checked;
   }}
 >
-  <slot />
-  <svelte:component this={checked ? Icon : undefined} slot="end-icon" name="check" />
+  {#snippet startIcon()}
+    {@render _startIcon?.()}
+  {/snippet}
+  {#snippet children()}
+    {@render _children?.()}
+  {/snippet}
+  {#snippet endIcon()}
+    {#if checked}
+      <Icon name="check" />
+    {/if}
+  {/snippet}
 </MenuItem>