@sveltia/ui 0.15.16 → 0.17.0

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>
 

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

@@ -1,50 +1,102 @@
-/** @typedef {typeof __propDef.props}  SelectButtonGroupProps */
-/** @typedef {typeof __propDef.events}  SelectButtonGroupEvents */
-/** @typedef {typeof __propDef.slots}  SelectButtonGroupSlots */
+export default SelectButtonGroup;
+type SelectButtonGroup = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
 /**
  * A variant of `<RadioGroup>`, looking like normal buttons.
  * @see https://w3c.github.io/aria/#radiogroup
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
-export default class SelectButtonGroup extends SvelteComponent<{
-    [x: string]: any;
+declare const SelectButtonGroup: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
+    /**
+     * - Whether to hide the widget.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
     disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
+    readonly?: boolean | undefined;
+    /**
+     * - Whether to mark the widget required. An alias of the
+     * `aria-required` attribute.
+     */
     required?: boolean | undefined;
+    /**
+     * - Whether to mark the widget invalid. An alias of the
+     * `aria-invalid` attribute.
+     */
+    invalid?: 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>;
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to hide the widget.
+     */
     hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
     readonly?: boolean | undefined;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type SelectButtonGroupProps = typeof __propDef.props;
-export type SelectButtonGroupEvents = typeof __propDef.events;
-export type SelectButtonGroupSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        invalid?: boolean | undefined;
-        required?: boolean | undefined;
-        hidden?: boolean | undefined;
-        readonly?: boolean | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+    /**
+     * - Whether to mark the widget required. An alias of the
+     * `aria-required` attribute.
+     */
+    required?: boolean | undefined;
+    /**
+     * - Whether to mark the widget invalid. An alias of the
+     * `aria-invalid` attribute.
+     */
+    invalid?: 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/button/select-button.svelte

@@ -8,75 +8,32 @@
   import Button from './button.svelte';
 
   /**
-   * CSS class name on the button.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {boolean} [selected] - Whether to select the widget. An alias of the `aria-checked`
+   * attribute. Because the UI is a button, we expose `selected` instead of `checked`.
    */
-  let className = '';
-  export { className as class };
-  /**
-   * The `value` attribute on the `<button>` element.
-   * @type {string | undefined}
-   */
-  export let value = undefined;
-  /**
-   * Whether to select the widget. An alias of the `aria-checked` attribute.
-   * Because the UI is a button, we expose `selected` instead of `checked`.
-   * @type {boolean}
-   */
-  export let selected = false;
-  /**
-   * 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 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.
-   * @type {boolean}
-   */
-  export let iconic = false;
+   * @type {import('../../typedefs').ButtonProps & import('../../typedefs').CommonEventHandlers &
+   * Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    selected = $bindable(false),
+    class: className,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <Button
+  {...restProps}
   role="radio"
   class="sui select-button {className}"
-  {value}
-  {hidden}
-  {disabled}
-  {label}
-  {variant}
-  {size}
-  {iconic}
   aria-checked={selected}
-  {...$$restProps}
-  on:click
-  on:dblclick
-  on:select
-  on:change
-  on:change={(event) => {
+  onChange={(event) => {
     selected = event.detail.selected;
+    onChange?.(event);
   }}
->
-  <slot name="start-icon" slot="start-icon" />
-  <slot />
-  <slot name="end-icon" slot="end-icon" />
-</Button>
+></Button>

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

@@ -1,74 +1,40 @@
-/** @typedef {typeof __propDef.props}  SelectButtonProps */
-/** @typedef {typeof __propDef.events}  SelectButtonEvents */
-/** @typedef {typeof __propDef.slots}  SelectButtonSlots */
+export default SelectButton;
+type SelectButton = SvelteComponent<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "selected" | undefined;
+};
 /**
  * A variant of `<Radio>`, looking like a normal button.
  * @see https://w3c.github.io/aria/#radio
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
-export default class SelectButton extends SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    label?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    value?: string | undefined;
-    hidden?: boolean | undefined;
-    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "link" | undefined;
-    iconic?: boolean | undefined;
+declare const SelectButton: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+    /**
+     * - Whether to select the widget. An alias of the `aria-checked`
+     * attribute. Because the UI is a button, we expose `selected` instead of `checked`.
+     */
     selected?: boolean | undefined;
-}, {
-    click: MouseEvent;
-    dblclick: MouseEvent;
-    select: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'start-icon': {
-        slot: string;
-    };
-    default: {};
-    'end-icon': {
-        slot: string;
+}, {}, {}, "selected">;
+type Props = {
+    /**
+     * - Whether to select the widget. An alias of the `aria-checked`
+     * attribute. Because the UI is a button, we expose `selected` instead of `checked`.
+     */
+    selected?: 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-}> {
+    z_$$bindings?: Bindings;
 }
-export type SelectButtonProps = typeof __propDef.props;
-export type SelectButtonEvents = typeof __propDef.events;
-export type SelectButtonSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        label?: string | undefined;
-        size?: "small" | "medium" | "large" | undefined;
-        value?: string | undefined;
-        hidden?: boolean | undefined;
-        variant?: "primary" | "secondary" | "tertiary" | "ghost" | "link" | undefined;
-        iconic?: boolean | undefined;
-        selected?: boolean | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        dblclick: MouseEvent;
-        select: CustomEvent<any>;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'start-icon': {
-            slot: string;
-        };
-        default: {};
-        'end-icon': {
-            slot: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/package/components/button/split-button.svelte

@@ -12,65 +12,49 @@
   import Button from './button.svelte';
 
   /**
-   * The `class` attribute on the `<button>` element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {import('../../typedefs').PopupPosition} [popupPosition] - Where to show the dropdown
+   * menu.
+   * @property {boolean} [showPopupBackdrop] - Whether to show the backdrop for the popup.
+   * @property {import('svelte').Snippet} [chevronIcon] - Chevron slot content.
+   * @property {import('svelte').Snippet} [popup] - Popup 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;
-  /**
-   * Text label displayed on the button.
-   * @type {string}
-   */
-  export let label = '';
-  /**
-   * The style variant of the button.
-   * @type {'primary' | 'secondary' | 'tertiary' | 'ghost' | undefined}
-   */
-  export let variant = undefined;
-  /**
-   * The size of the button.
-   * @type {'small' | 'medium' | 'large' | undefined}
-   */
-  export let size = 'medium';
-  /**
-   * 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}
+   * @type {import('../../typedefs').ButtonProps & import('../../typedefs').CommonEventHandlers &
+   * Props & Record<string, any>}
    */
-  export let showPopupBackdrop = false;
+  let {
+    /* eslint-disable prefer-const */
+    hidden = false,
+    disabled = false,
+    label = '',
+    variant = undefined,
+    size = 'medium',
+    popupPosition = 'bottom-left',
+    showPopupBackdrop = false,
+    chevronIcon,
+    popup: _popup,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   /**
    * @type {HTMLElement | undefined}
    */
-  let wrapper;
+  let wrapper = $state();
 </script>
 
 <div
+  bind:this={wrapper}
   role="group"
   class="sui split-button"
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-label={$_('_sui.split_button.x_options', { values: { name: label } })}
-  bind:this={wrapper}
 >
-  <Button class={className} {hidden} {disabled} {label} {variant} {size} {...$$restProps} on:click>
-    <slot name="start-icon" slot="start-icon" />
-  </Button>
+  <Button {...restProps} {hidden} {disabled} {label} {variant} {size}></Button>
   <MenuButton
     iconic
     {hidden}
@@ -82,10 +66,16 @@
     popupPositionBaseElement={wrapper}
     {showPopupBackdrop}
   >
-    <slot name="chevron-icon" slot="end-icon">
-      <Icon name="arrow_drop_down" class="small-arrow" />
-    </slot>
-    <slot name="popup" slot="popup" />
+    {#snippet endIcon()}
+      {#if chevronIcon}
+        {@render chevronIcon()}
+      {:else}
+        <Icon name="arrow_drop_down" class="small-arrow" />
+      {/if}
+    {/snippet}
+    {#snippet popup()}
+      {@render _popup?.()}
+    {/snippet}
   </MenuButton>
 </div>
 

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

@@ -1,71 +1,65 @@
-/** @typedef {typeof __propDef.props}  SplitButtonProps */
-/** @typedef {typeof __propDef.events}  SplitButtonEvents */
-/** @typedef {typeof __propDef.slots}  SplitButtonSlots */
+export default SplitButton;
+type SplitButton = SvelteComponent<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
 /**
  * A combination of a normal `<Button>` (default action) and an arrow-only `<MenuButton>` (different
  * actions). For example, Microsoft Word has the Paste button along with the Keep Source Formatting,
  * Match Formatting and Keep Text Only options.
  * @see https://www.google.com/search?q=split+button&tbm=isch
  */
-export default class SplitButton extends SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    label?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    hidden?: boolean | undefined;
-    variant?: "primary" | "secondary" | "tertiary" | "ghost" | undefined;
+declare const SplitButton: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+    /**
+     * - Where to show the dropdown
+     * menu.
+     */
     popupPosition?: import("../../typedefs").PopupPosition | undefined;
+    /**
+     * - Whether to show the backdrop for the popup.
+     */
     showPopupBackdrop?: boolean | undefined;
-}, {
-    click: MouseEvent;
-} & {
+    /**
+     * - Chevron slot content.
+     */
+    chevronIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Popup slot content.
+     */
+    popup?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'start-icon': {
-        slot: string;
-    };
-    'chevron-icon': {
-        slot: string;
-    };
-    popup: {
-        slot: string;
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - Where to show the dropdown
+     * menu.
+     */
+    popupPosition?: import("../../typedefs").PopupPosition | undefined;
+    /**
+     * - Whether to show the backdrop for the popup.
+     */
+    showPopupBackdrop?: boolean | undefined;
+    /**
+     * - Chevron slot content.
+     */
+    chevronIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Popup slot content.
+     */
+    popup?: 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-}> {
+    z_$$bindings?: Bindings;
 }
-export type SplitButtonProps = typeof __propDef.props;
-export type SplitButtonEvents = typeof __propDef.events;
-export type SplitButtonSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        label?: string | undefined;
-        size?: "small" | "medium" | "large" | undefined;
-        hidden?: boolean | undefined;
-        variant?: "primary" | "secondary" | "tertiary" | "ghost" | undefined;
-        popupPosition?: import("../../typedefs").PopupPosition | undefined;
-        showPopupBackdrop?: boolean | undefined;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'start-icon': {
-            slot: string;
-        };
-        'chevron-icon': {
-            slot: string;
-        };
-        popup: {
-            slot: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};