@sveltia/ui 0.15.16 → 0.17.0

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

@@ -1,56 +1,27 @@
-/** @typedef {typeof __propDef.props}  MenuItemRadioProps */
-/** @typedef {typeof __propDef.events}  MenuItemRadioEvents */
-/** @typedef {typeof __propDef.slots}  MenuItemRadioSlots */
+export default MenuItemRadio;
+type MenuItemRadio = SvelteComponent<ButtonProps & MenuItemProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "checked" | undefined;
+};
 /**
  * A menu item widget with a radio. Only one item can be selected within the parent `<Menu>` or
  * `<MenuItemGroup>` component.
  * @see https://w3c.github.io/aria/#menuitemradio
  */
-export default class MenuItemRadio 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 MenuItemRadio: $$__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 MenuItemRadioProps = typeof __propDef.props;
-export type MenuItemRadioEvents = typeof __propDef.events;
-export type MenuItemRadioSlots = 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.svelte

@@ -4,104 +4,95 @@
   @see https://w3c.github.io/aria/#menuitem
 -->
 <script>
-  import { writable } from 'svelte/store';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
-  import Menu from './menu.svelte';
   import Popup from '../util/popup.svelte';
+  import Menu from './menu.svelte';
 
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
-   */
-  let className = '';
-  export { className as class };
-  /**
-   * The `role` attribute on the `<button>` element.
-   * @type {'menuitem' | 'menuitemcheckbox' | 'menuitemradio'}
-   */
-  export let role = 'menuitem';
-  /**
-   * 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').MenuItemProps &
+   * import('../../typedefs').CommonEventHandlers & Record<string, any>}
    */
-  export let disabled = false;
-  /**
-   * Text label displayed on the item.
-   * @type {string | undefined}
-   */
-  export let label = '';
-  /**
-   * Name of `<Icon>` displayed before the label.
-   */
-  export let iconName = '';
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    role = 'menuitem',
+    hidden = false,
+    disabled = false,
+    label = '',
+    children: _children,
+    startIcon: _startIcon,
+    endIcon: _endIcon,
+    chevronIcon,
+    items,
+    onChange,
+    onSelect,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  let isPopupOpen = $state(false);
+
   /**
-   * ARIA label of `<Icon>` displayed before the label.
+   * Reference to the `<button>` element.
+   * @type {HTMLButtonElement | undefined}
    */
-  export let iconLabel = '';
+  let buttonElement = $state();
 
-  /** @type {Button} */
-  let buttonComponent;
-  let isPopupOpen = writable(false);
-
-  $: hasChildren = role === 'menuitem' && $$slots.children;
+  const hasItems = $derived(role === 'menuitem' && !!items);
 </script>
 
-<div role="none" class="sui menuitem {className}" hidden={hidden || undefined}>
+<div role="none" class="sui menuitem {className}" {hidden}>
   <Button
+    bind:element={buttonElement}
+    {...restProps}
     {role}
     {hidden}
     {disabled}
-    aria-haspopup={hasChildren ? 'menu' : undefined}
-    aria-expanded={hasChildren ? $isPopupOpen : undefined}
-    {...$$restProps}
-    bind:this={buttonComponent}
-    on:click
-    on:mouseenter={() => {
-      if (hasChildren) {
-        $isPopupOpen = true;
+    aria-haspopup={hasItems ? 'menu' : undefined}
+    aria-expanded={hasItems ? isPopupOpen : undefined}
+    onmouseenter={() => {
+      if (hasItems) {
+        isPopupOpen = true;
       }
     }}
-    on:mouseleave={() => {
-      if (hasChildren) {
-        $isPopupOpen = false;
+    onmouseleave={() => {
+      if (hasItems) {
+        isPopupOpen = false;
       }
     }}
-    on:focus
-    on:blur
-    on:select
-    on:change
+    {onChange}
+    {onSelect}
   >
-    <slot name="start-icon" slot="start-icon">
-      {#if iconName}
-        <Icon name={iconName} aria-label={iconLabel} />
-      {/if}
-    </slot>
-    <div role="none" class="content" class:label={!!label}>
-      {#if label}
-        {label}
-      {:else}
-        <slot />
+    {#snippet startIcon()}
+      {@render _startIcon?.()}
+    {/snippet}
+    {#snippet children()}
+      <div role="none" class="content" class:label={!!label}>
+        {#if label}
+          {label}
+        {:else}
+          {@render _children?.()}
+        {/if}
+      </div>
+      {#if hasItems}
+        <span role="none" class="icon-outer">
+          {#if chevronIcon}
+            {@render chevronIcon()}
+          {:else}
+            <Icon name="chevron_right" />
+          {/if}
+        </span>
       {/if}
-    </div>
-    <slot name="end-icon" slot="end-icon" />
-    {#if hasChildren}
-      <span role="none" class="icon-outer">
-        <slot name="chevron-icon">
-          <Icon name="chevron_right" />
-        </slot>
-      </span>
-    {/if}
+    {/snippet}
+    {#snippet endIcon()}
+      {@render _endIcon?.()}
+    {/snippet}
   </Button>
-  {#if hasChildren}
-    <Popup anchor={buttonComponent?.element} position="right-top" bind:open={isPopupOpen}>
+  {#if hasItems}
+    <Popup anchor={buttonElement} position="right-top" bind:open={isPopupOpen}>
       <Menu>
-        <slot name="children" />
+        {@render items?.()}
       </Menu>
     </Popup>
   {/if}

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

@@ -1,75 +1,26 @@
-/** @typedef {typeof __propDef.props}  MenuItemProps */
-/** @typedef {typeof __propDef.events}  MenuItemEvents */
-/** @typedef {typeof __propDef.slots}  MenuItemSlots */
+export default MenuItem;
+type MenuItem = SvelteComponent<ButtonProps & MenuItemProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
 /**
  * A menu item widget.
  * @see https://w3c.github.io/aria/#menuitem
  */
-export default class MenuItem extends SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    label?: string | undefined;
-    role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
-    hidden?: boolean | undefined;
-    iconName?: string | undefined;
-    iconLabel?: string | undefined;
-}, {
-    click: MouseEvent;
-    focus: FocusEvent;
-    blur: FocusEvent;
-    select: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
+declare const MenuItem: $$__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>;
-}, {
-    'start-icon': {
-        slot: string;
+}, {}, {}, "">;
+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;
     };
-    default: {};
-    'end-icon': {
-        slot: string;
-    };
-    'chevron-icon': {};
-    children: {};
-}> {
+    z_$$bindings?: Bindings;
 }
-export type MenuItemProps = typeof __propDef.props;
-export type MenuItemEvents = typeof __propDef.events;
-export type MenuItemSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        label?: string | undefined;
-        role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
-        hidden?: boolean | undefined;
-        iconName?: string | undefined;
-        iconLabel?: string | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        select: CustomEvent<any>;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'start-icon': {
-            slot: string;
-        };
-        default: {};
-        'end-icon': {
-            slot: string;
-        };
-        'chevron-icon': {};
-        children: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/package/components/menu/menu.svelte

@@ -5,42 +5,45 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
 -->
 <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. An alias of the `aria-hidden`
+   * attribute.
+   * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+   * 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. 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 {Props & Record<string, any>}
    */
-  export let disabled = false;
-
-  const dispatch = createEventDispatcher();
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    disabled = false,
+    children,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <div
+  {...restProps}
   role="menu"
   class="sui menu {className}"
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
-  {...$$restProps}
+  {onChange}
   use:activateGroup
-  on:change={(/** @type {CustomEvent} */ event) => {
-    dispatch('change', event.detail);
-  }}
 >
-  <slot />
+  {@render children?.()}
 </div>
 
 <style>.menu {

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

@@ -1,44 +1,74 @@
-/** @typedef {typeof __propDef.props}  MenuProps */
-/** @typedef {typeof __propDef.events}  MenuEvents */
-/** @typedef {typeof __propDef.slots}  MenuSlots */
+export default Menu;
+type Menu = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
 /**
  * A menu widget.
  * @see https://w3c.github.io/aria/#menu
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
  */
-export default class Menu extends SvelteComponent<{
-    [x: string]: any;
+declare const Menu: $$__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;
-}, {
-    change: CustomEvent<any>;
-} & {
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | 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: {};
-}> {
-}
-export type MenuProps = typeof __propDef.props;
-export type MenuEvents = typeof __propDef.events;
-export type MenuSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        hidden?: boolean | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [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;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | 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/radio/radio-group.svelte

@@ -5,68 +5,62 @@
   @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 {'horizontal'|'vertical'} [orientation] - Orientation of the widget. An alias of the
+   * `aria-orientation` 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. 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;
+
   /**
-   * Orientation of the widget. An alias of the `aria-orientation` attribute.
-   * @type {'horizontal' | 'vertical'}
+   * @type {Props & Record<string, any>}
    */
-  export let orientation = 'horizontal';
-
-  const dispatch = createEventDispatcher();
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    orientation = 'horizontal',
+    children,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <div
+  {...restProps}
   role="radiogroup"
   class="sui radio-group {className} {orientation}"
   tabindex="-1"
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-readonly={readonly}
   aria-required={required}
   aria-invalid={invalid}
   aria-orientation={orientation}
-  {...$$restProps}
+  {onChange}
   use:activateGroup
-  on:change={(/** @type {CustomEvent} */ event) => {
-    dispatch('change', event.detail);
-  }}
 >
   <div role="none" class="inner" inert={disabled}>
-    <slot />
+    {@render children?.()}
   </div>
 </div>