@sveltia/ui 0.15.16 → 0.17.0

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

@@ -1,52 +1,112 @@
-/** @typedef {typeof __propDef.props}  RadioGroupProps */
-/** @typedef {typeof __propDef.events}  RadioGroupEvents */
-/** @typedef {typeof __propDef.slots}  RadioGroupSlots */
+export default RadioGroup;
+type RadioGroup = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
 /**
  * The container of `<Radio>`s.
  * @see https://w3c.github.io/aria/#radiogroup
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
-export default class RadioGroup extends SvelteComponent<{
-    [x: string]: any;
+declare const RadioGroup: $$__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;
+    /**
+     * - Orientation of the widget. An alias of the
+     * `aria-orientation` attribute.
+     */
+    orientation?: "vertical" | "horizontal" | 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;
+    /**
+     * - 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;
+    /**
+     * - Orientation of the widget. An alias of the
+     * `aria-orientation` attribute.
+     */
     orientation?: "vertical" | "horizontal" | undefined;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type RadioGroupProps = typeof __propDef.props;
-export type RadioGroupEvents = typeof __propDef.events;
-export type RadioGroupSlots = 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;
-        orientation?: "vertical" | "horizontal" | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: 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.svelte

@@ -10,64 +10,64 @@
   import Button from '../button/button.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} [checked] - Whether to check the widget. An alias of the `aria-checked`
+   * attribute.
+   * @property {string | undefined} [name] - The `name` attribute on the `<button>` element.
+   * @property {string | undefined} [value] - The `value` attribute on the `<button>` element.
+   * @property {string | undefined} [label] - Text label displayed next to the checkbox.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   * @property {import('svelte').Snippet} [default] - Default slot content.
+   * @property {(event: CustomEvent) => void} [onChange] - Custom `Change` event handler.
+   * @property {(event: CustomEvent) => void} [onSelect] - Custom `Select` 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 check the widget. An alias of the `aria-checked` attribute.
-   * @type {boolean}
-   */
-  export let checked = false;
-  /**
-   * 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;
+
   /**
-   * Text label displayed next to the checkbox.
-   * @type {string | undefined}
+   * @type {Props & Record<string, any>}
    */
-  export let label = undefined;
+  let {
+    /* eslint-disable prefer-const */
+    checked = false,
+    class: className,
+    hidden = false,
+    disabled = false,
+    name = undefined,
+    value = undefined,
+    label = undefined,
+    children,
+    onChange,
+    onSelect,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const id = generateElementId('checkbox');
 
   /**
-   * Reference to the `Button` component.
-   * @type {Button | undefined}
+   * Reference to the `<button>` element.
+   * @type {HTMLButtonElement | undefined}
    */
-  let buttonComponent;
+  let buttonElement = $state();
 </script>
 
 <span
+  {...restProps}
   role="none"
   class="sui radio {className}"
   class:disabled
-  hidden={hidden || undefined}
-  {...$$restProps}
-  on:click={(event) => {
+  {hidden}
+  onclick={(event) => {
     if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
-      buttonComponent?.element?.click();
+      buttonElement?.click();
     }
   }}
 >
   <Button
+    bind:element={buttonElement}
     role="radio"
     {id}
     {hidden}
@@ -76,20 +76,17 @@
     {value}
     aria-checked={checked}
     aria-labelledby="{id}-label"
-    bind:this={buttonComponent}
-    on:click={(event) => {
+    onclick={(event) => {
       event.preventDefault();
       checked = true;
     }}
-    on:focus
-    on:blur
-    on:select
-    on:change
+    {onChange}
+    {onSelect}
   />
-  {#if $$slots.default || label}
+  {#if children || label}
     <label id="{id}-label">
-      {#if $$slots.default}
-        <slot />
+      {#if children}
+        {@render children?.()}
       {:else}
         {label}
       {/if}

package/package/components/radio/radio.svelte.d.ts

@@ -1,59 +1,123 @@
-/** @typedef {typeof __propDef.props}  RadioProps */
-/** @typedef {typeof __propDef.events}  RadioEvents */
-/** @typedef {typeof __propDef.slots}  RadioSlots */
+export default Radio;
+type Radio = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
 /**
  * The equivalent of the HTML `<input type="radio">` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
  * @see https://w3c.github.io/aria/#radio
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
-export default class Radio extends SvelteComponent<{
-    [x: string]: any;
+declare const Radio: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
-    name?: 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;
-    label?: string | undefined;
+    /**
+     * - Whether to check the widget. An alias of the `aria-checked`
+     * attribute.
+     */
     checked?: boolean | undefined;
+    /**
+     * - The `name` attribute on the `<button>` element.
+     */
+    name?: string | undefined;
+    /**
+     * - The `value` attribute on the `<button>` element.
+     */
     value?: string | undefined;
-    hidden?: boolean | undefined;
-}, {
-    focus: FocusEvent;
-    blur: FocusEvent;
-    select: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
+    /**
+     * - Text label displayed next to the checkbox.
+     */
+    label?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Default slot content.
+     */
+    default?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Select` event handler.
+     */
+    onSelect?: ((event: CustomEvent) => void) | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type RadioProps = typeof __propDef.props;
-export type RadioEvents = typeof __propDef.events;
-export type RadioSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        name?: string | undefined;
-        disabled?: boolean | undefined;
-        label?: string | undefined;
-        checked?: boolean | undefined;
-        value?: string | undefined;
-        hidden?: boolean | undefined;
-    };
-    events: {
-        focus: FocusEvent;
-        blur: FocusEvent;
-        select: CustomEvent<any>;
-        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.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether to check the widget. An alias of the `aria-checked`
+     * attribute.
+     */
+    checked?: boolean | undefined;
+    /**
+     * - The `name` attribute on the `<button>` element.
+     */
+    name?: string | undefined;
+    /**
+     * - The `value` attribute on the `<button>` element.
+     */
+    value?: string | undefined;
+    /**
+     * - Text label displayed next to the checkbox.
+     */
+    label?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Default slot content.
+     */
+    default?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Select` event handler.
+     */
+    onSelect?: ((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;
+}