@sveltia/ui 0.16.0 → 0.17.0

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

@@ -1,50 +1,92 @@
 export default SelectButtonGroup;
-type SelectButtonGroup = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    required?: boolean | undefined;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    change: CustomEvent<any>;
-} & {
+type SelectButtonGroup = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$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/
  */
-declare const SelectButtonGroup: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    default: {};
-}>, {
-    change: CustomEvent<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;
-} : {});
+    /**
+     * - 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;
+};
 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.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,86 +1,30 @@
 export default SelectButton;
-type SelectButton = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    label?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    value?: string | undefined;
-    hidden?: boolean | undefined;
-    variant?: "link" | "primary" | "secondary" | "tertiary" | "ghost" | undefined;
-    iconic?: boolean | undefined;
-    selected?: boolean | undefined;
-}, {
-    'start-icon': {
-        slot: string;
-    };
-    default: {};
-    'end-icon': {
-        slot: string;
-    };
-}>, {
-    click: MouseEvent;
-    dblclick: MouseEvent;
-    select: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
+type SelectButton = SvelteComponent<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'start-icon': {
-        slot: string;
-    };
-    default: {};
-    'end-icon': {
-        slot: string;
-    };
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$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/
  */
-declare const SelectButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    'start-icon': {
-        slot: string;
-    };
-    default: {};
-    'end-icon': {
-        slot: string;
-    };
-}>, {
-    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;
-    };
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+}, {}, {}, "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;

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,30 +1,8 @@
 export default SplitButton;
-type SplitButton = 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;
-    popupPosition?: PopupPosition | undefined;
-    showPopupBackdrop?: boolean | undefined;
-}, {
-    click: MouseEvent;
-} & {
+type SplitButton = SvelteComponent<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'start-icon': {
-        slot: string;
-    };
-    'chevron-icon': {
-        slot: string;
-    };
-    popup: {
-        slot: string;
-    };
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * A combination of a normal `<Button>` (default action) and an arrow-only `<MenuButton>` (different
@@ -32,31 +10,46 @@ type SplitButton = SvelteComponent<{
  * Match Formatting and Keep Text Only options.
  * @see https://www.google.com/search?q=split+button&tbm=isch
  */
-declare const SplitButton: $$__sveltets_2_IsomorphicComponent<{
-    [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;
-    };
-}, {}, 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;