@sveltia/ui 0.8.3 → 0.10.0

package/package/components/text-field/password-input.svelte

@@ -64,7 +64,7 @@
 
   $: {
     if (inputComponent) {
-      inputComponent.element.setAttribute('type', passwordVisible ? 'text' : 'password');
+      inputComponent.element?.setAttribute('type', passwordVisible ? 'text' : 'password');
     }
   }
 </script>
@@ -90,8 +90,10 @@
     {invalid}
     {...$$restProps}
     bind:this={inputComponent}
-    on:input
+    on:keydown
+    on:keyup
     on:keypress
+    on:input
     on:change
   />
   <Button
@@ -106,7 +108,9 @@
       passwordVisible = !passwordVisible;
     }}
   >
-    <Icon slot="start-icon" name={passwordVisible ? 'visibility_off' : 'visibility'} />
+    <slot name="visibility-icon" slot="start-icon">
+      <Icon name={passwordVisible ? 'visibility_off' : 'visibility'} />
+    </slot>
   </Button>
 </div>
 

package/package/components/text-field/password-input.svelte.d.ts

@@ -9,21 +9,27 @@
  */
 export default class PasswordInput extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    value?: string;
-    hidden?: boolean;
-    readonly?: boolean;
-    flex?: boolean;
+    class?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    value?: string | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
+    flex?: boolean | undefined;
 }, {
-    input: Event;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
     keypress: KeyboardEvent;
+    input: Event;
     change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}> {
+}, {
+    'visibility-icon': {
+        slot: string;
+    };
+}> {
 }
 export type PasswordInputProps = typeof __propDef.props;
 export type PasswordInputEvents = typeof __propDef.events;
@@ -32,22 +38,28 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        invalid?: boolean;
-        disabled?: boolean;
-        required?: boolean;
+        class?: string | undefined;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
-        readonly?: boolean;
-        flex?: boolean;
+        readonly?: boolean | undefined;
+        flex?: boolean | undefined;
     };
     events: {
-        input: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
         keypress: KeyboardEvent;
+        input: Event;
         change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        'visibility-icon': {
+            slot: string;
+        };
+    };
 };
 export {};

package/package/components/text-field/search-bar.svelte

@@ -83,7 +83,9 @@
   aria-hidden={hidden}
 >
   <span role="none">
-    <Icon name="search" />
+    <slot name="search-icon">
+      <Icon name="search" />
+    </slot>
   </span>
   <TextInput
     role="searchbox"
@@ -98,10 +100,10 @@
     inputmode="search"
     {...$$restProps}
     bind:this={inputComponent}
-    on:input
     on:keydown
     on:keyup
     on:keypress
+    on:input
     on:change
   />
   {#if value}
@@ -119,7 +121,9 @@
         });
       }}
     >
-      <Icon slot="start-icon" name="close" />
+      <slot name="close-button" slot="start-icon">
+        <Icon name="close" />
+      </slot>
     </Button>
   {/if}
 </div>

package/package/components/text-field/search-bar.svelte.d.ts

@@ -9,49 +9,54 @@
  */
 export default class SearchBar extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    focus?: () => void;
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    value?: string;
-    hidden?: boolean;
-    readonly?: boolean;
-    flex?: boolean;
+    class?: string | undefined;
+    focus?: (() => void) | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    value?: string | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
+    flex?: boolean | undefined;
 }, {
-    input: Event;
     keydown: KeyboardEvent;
     keyup: KeyboardEvent;
     keypress: KeyboardEvent;
+    input: Event;
     change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}> {
+}, {
+    'search-icon': {};
+    'close-button': {
+        slot: string;
+    };
+}> {
     get focus(): () => void;
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: string | undefined);
+    get class(): string | undefined;
     /**accessor*/
-    set flex(arg: boolean);
-    get flex(): boolean;
+    set flex(arg: boolean | undefined);
+    get flex(): boolean | undefined;
     /**accessor*/
-    set hidden(arg: boolean);
-    get hidden(): boolean;
+    set hidden(arg: boolean | undefined);
+    get hidden(): boolean | undefined;
     /**accessor*/
-    set disabled(arg: boolean);
-    get disabled(): boolean;
+    set disabled(arg: boolean | undefined);
+    get disabled(): boolean | undefined;
     /**accessor*/
-    set readonly(arg: boolean);
-    get readonly(): boolean;
+    set readonly(arg: boolean | undefined);
+    get readonly(): boolean | undefined;
     /**accessor*/
-    set required(arg: boolean);
-    get required(): boolean;
+    set required(arg: boolean | undefined);
+    get required(): boolean | undefined;
     /**accessor*/
-    set invalid(arg: boolean);
-    get invalid(): boolean;
+    set invalid(arg: boolean | undefined);
+    get invalid(): boolean | undefined;
     /**accessor*/
-    set value(arg: string);
-    get value(): string;
+    set value(arg: string | undefined);
+    get value(): string | undefined;
 }
 export type SearchBarProps = typeof __propDef.props;
 export type SearchBarEvents = typeof __propDef.events;
@@ -60,25 +65,30 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        focus?: () => void;
-        invalid?: boolean;
-        disabled?: boolean;
-        required?: boolean;
+        class?: string | undefined;
+        focus?: (() => void) | undefined;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
-        readonly?: boolean;
-        flex?: boolean;
+        readonly?: boolean | undefined;
+        flex?: boolean | undefined;
     };
     events: {
-        input: Event;
         keydown: KeyboardEvent;
         keyup: KeyboardEvent;
         keypress: KeyboardEvent;
+        input: Event;
         change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        'search-icon': {};
+        'close-button': {
+            slot: string;
+        };
+    };
 };
 export {};

package/package/components/text-field/text-area.svelte

@@ -79,9 +79,11 @@
     aria-invalid={invalid}
     {...$$restProps}
     class:auto-resize={autoResize}
-    on:click
-    on:input
+    on:keydown
+    on:keyup
     on:keypress
+    on:input
+    on:change
   />
   {#if autoResize}
     <div class="clone" aria-hidden="true">{value ?? ''}</div>

package/package/components/text-field/text-area.svelte.d.ts

@@ -9,20 +9,22 @@
  */
 export default class TextArea extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    name?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    value?: string;
-    hidden?: boolean;
-    readonly?: boolean;
-    flex?: boolean;
-    autoResize?: boolean;
+    class?: string | undefined;
+    name?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    value?: string | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
+    flex?: boolean | undefined;
+    autoResize?: boolean | undefined;
 }, {
-    click: MouseEvent;
-    input: Event;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
     keypress: KeyboardEvent;
+    input: Event;
+    change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -34,21 +36,23 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
         name?: string | undefined;
-        invalid?: boolean;
-        disabled?: boolean;
-        required?: boolean;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
-        readonly?: boolean;
-        flex?: boolean;
-        autoResize?: boolean;
+        readonly?: boolean | undefined;
+        flex?: boolean | undefined;
+        autoResize?: boolean | undefined;
     };
     events: {
-        click: MouseEvent;
-        input: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
         keypress: KeyboardEvent;
+        input: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/text-field/text-input.svelte

@@ -114,10 +114,10 @@
     {...$$restProps}
     bind:this={element}
     bind:value
-    on:input
     on:keydown
     on:keyup
     on:keypress
+    on:input
     on:change
     use:activateKeyShortcuts={keyShortcuts}
   />
@@ -153,7 +153,7 @@ input {
   border-width: 1px;
   border-color: var(--sui-textbox-border-color);
   border-radius: var(--sui-textbox-border-radius);
-  padding: 0 8px;
+  padding: var(--sui-textbox-padding, 0 8px);
   min-width: 0;
   height: var(--sui-textbox-height);
   color: var(--sui-textbox-foreground-color);
@@ -161,6 +161,10 @@ input {
   font-family: var(--sui-textbox-font-family);
   font-size: var(--sui-textbox-font-size);
   line-height: var(--sui-textbox-singleline-line-height);
+  font-weight: var(--sui-textbox-font-weight, normal);
+  text-align: var(--sui-textbox-text-align, left);
+  text-indent: var(--sui-textbox-text-indent, 0);
+  letter-spacing: var(--sui-textbox-letter-spacing, normal);
   transition: all 200ms;
 }
 input:focus {
@@ -176,6 +180,17 @@ input:disabled, input:read-only {
 input[aria-invalid=true] {
   border-color: var(--sui-error-foreground-color);
 }
+input::placeholder {
+  color: var(--sui-textbox-placeholder-foreground-color, var(--sui-textbox-foreground-color));
+  opacity: var(--sui-textbox-placeholder-opacity, 0.5);
+  font-family: var(--sui-textbox-placeholder-font-family, var(--sui-textbox-font-family));
+  font-size: var(--sui-textbox-placeholder-font-size, var(--sui-textbox-font-size));
+  line-height: var(--sui-textbox-placeholder-singleline-line-height, var(--sui-textbox-singleline-line-height));
+  font-weight: var(--sui-textbox-placeholder-font-weight, var(--sui-textbox-font-weight, normal));
+  text-align: var(--sui-textbox-placeholder-text-align, var(--sui-textbox-text-align, left));
+  text-indent: var(--sui-textbox-placeholder-text-indent, var(--sui-textbox-text-indent, 0));
+  letter-spacing: var(--sui-textbox-placeholder-letter-spacing, var(--sui-textbox-letter-spacing, normal));
+}
 input ~ :global(button) {
   flex: none;
   margin-left: -1px;

package/package/components/text-field/text-input.svelte.d.ts

@@ -8,71 +8,71 @@
  */
 export default class TextInput extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    name?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    value?: string | number;
-    role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
-    hidden?: boolean;
-    element?: HTMLInputElement;
-    readonly?: boolean;
-    keyShortcuts?: string;
-    flex?: boolean;
-    showInlineLabel?: boolean;
-    inputmode?: "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url";
+    class?: string | undefined;
+    name?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    value?: string | number | undefined;
+    role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
+    hidden?: boolean | undefined;
+    element?: HTMLInputElement | undefined;
+    readonly?: boolean | undefined;
+    keyShortcuts?: string | undefined;
+    flex?: boolean | undefined;
+    showInlineLabel?: boolean | undefined;
+    inputmode?: "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url" | undefined;
 }, {
-    input: Event;
     keydown: KeyboardEvent;
     keyup: KeyboardEvent;
     keypress: KeyboardEvent;
+    input: Event;
     change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
     /**accessor*/
-    set element(arg: HTMLInputElement);
-    get element(): HTMLInputElement;
+    set element(arg: HTMLInputElement | undefined);
+    get element(): HTMLInputElement | undefined;
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: string | undefined);
+    get class(): string | undefined;
     /**accessor*/
-    set flex(arg: boolean);
-    get flex(): boolean;
+    set flex(arg: boolean | undefined);
+    get flex(): boolean | undefined;
     /**accessor*/
-    set role(arg: "textbox" | "searchbox" | "combobox" | "spinbutton");
-    get role(): "textbox" | "searchbox" | "combobox" | "spinbutton";
+    set role(arg: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined);
+    get role(): "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
     /**accessor*/
-    set hidden(arg: boolean);
-    get hidden(): boolean;
+    set hidden(arg: boolean | undefined);
+    get hidden(): boolean | undefined;
     /**accessor*/
-    set disabled(arg: boolean);
-    get disabled(): boolean;
+    set disabled(arg: boolean | undefined);
+    get disabled(): boolean | undefined;
     /**accessor*/
-    set readonly(arg: boolean);
-    get readonly(): boolean;
+    set readonly(arg: boolean | undefined);
+    get readonly(): boolean | undefined;
     /**accessor*/
-    set required(arg: boolean);
-    get required(): boolean;
+    set required(arg: boolean | undefined);
+    get required(): boolean | undefined;
     /**accessor*/
-    set invalid(arg: boolean);
-    get invalid(): boolean;
+    set invalid(arg: boolean | undefined);
+    get invalid(): boolean | undefined;
     /**accessor*/
-    set keyShortcuts(arg: string);
-    get keyShortcuts(): string;
+    set keyShortcuts(arg: string | undefined);
+    get keyShortcuts(): string | undefined;
     /**accessor*/
-    set name(arg: string);
-    get name(): string;
+    set name(arg: string | undefined);
+    get name(): string | undefined;
     /**accessor*/
-    set value(arg: string | number);
-    get value(): string | number;
+    set value(arg: string | number | undefined);
+    get value(): string | number | undefined;
     /**accessor*/
-    set showInlineLabel(arg: boolean);
-    get showInlineLabel(): boolean;
+    set showInlineLabel(arg: boolean | undefined);
+    get showInlineLabel(): boolean | undefined;
     /**accessor*/
-    set inputmode(arg: "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url");
-    get inputmode(): "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url";
+    set inputmode(arg: "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url" | undefined);
+    get inputmode(): "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url" | undefined;
 }
 export type TextInputProps = typeof __propDef.props;
 export type TextInputEvents = typeof __propDef.events;
@@ -81,26 +81,26 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
         name?: string | undefined;
-        invalid?: boolean;
-        disabled?: boolean;
-        required?: boolean;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
         value?: string | number | undefined;
-        role?: 'textbox' | 'searchbox' | 'combobox' | 'spinbutton';
+        role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
         hidden?: boolean | undefined;
         element?: HTMLInputElement | undefined;
-        readonly?: boolean;
+        readonly?: boolean | undefined;
         keyShortcuts?: string | undefined;
-        flex?: boolean;
-        showInlineLabel?: boolean;
-        inputmode?: 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+        flex?: boolean | undefined;
+        showInlineLabel?: boolean | undefined;
+        inputmode?: "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url" | undefined;
     };
     events: {
-        input: Event;
         keydown: KeyboardEvent;
         keyup: KeyboardEvent;
         keypress: KeyboardEvent;
+        input: Event;
         change: Event;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/toast/toast.svelte

@@ -10,7 +10,7 @@
   /**
    * The toast ID. If updated, the timer that hides the toast will be reset, meaning the same toast
    * can be displayed for a longer period of time.
-   * @type {number}
+   * @type {number | undefined}
    */
   export let id = undefined;
   /**
@@ -30,15 +30,15 @@
   export let position = 'bottom-right';
 
   /**
-   * @type {HTMLElement}
+   * @type {HTMLElement | undefined}
    */
   let popoverBase;
   /**
-   * @type {HTMLElement}
+   * @type {HTMLElement | undefined}
    */
   let popover;
   /**
-   * @type {HTMLElement}
+   * @type {HTMLElement | undefined}
    */
   let toast;
   /**
@@ -47,19 +47,23 @@
   let timerId = 0;
 
   onMount(() => {
-    popover = document.querySelector('.sui.toast-base.enabled');
+    popover =
+      /** @type {HTMLElement} */ (document.querySelector('.sui.toast-base.enabled')) ?? undefined;
 
     if (popover) {
-      popoverBase.remove();
+      popoverBase?.remove();
     } else {
       popover = popoverBase;
-      popover.classList.add('enabled');
-      (document.querySelector('.sui.app-shell') ?? document.body).appendChild(popover);
 
-      // Move the element to top layer
-      if (popover.showPopover) {
-        popover.popover = 'manual';
-        popover.showPopover();
+      if (popover) {
+        popover.classList.add('enabled');
+        (document.querySelector('.sui.app-shell') ?? document.body).appendChild(popover);
+
+        // Move the element to top layer
+        if (popover.showPopover) {
+          popover.popover = 'manual';
+          popover.showPopover();
+        }
       }
     }
 

package/package/components/toast/toast.svelte.d.ts

@@ -8,10 +8,10 @@
  */
 export default class Toast extends SvelteComponent<{
     [x: string]: any;
-    id?: number;
-    position?: ToastPosition;
-    show?: boolean;
-    duration?: number;
+    id?: number | undefined;
+    position?: ToastPosition | undefined;
+    show?: boolean | undefined;
+    duration?: number | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -25,10 +25,10 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id?: number;
-        position?: ToastPosition;
-        show?: boolean;
-        duration?: number;
+        id?: number | undefined;
+        position?: ToastPosition | undefined;
+        show?: boolean | undefined;
+        duration?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/toolbar/toolbar.svelte.d.ts

@@ -8,11 +8,11 @@
  */
 export default class Toolbar extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    disabled?: boolean;
-    hidden?: boolean;
-    variant?: "primary" | "secondary";
-    orientation?: "vertical" | "horizontal";
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
+    variant?: "primary" | "secondary" | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -26,11 +26,11 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        disabled?: boolean;
+        class?: string | undefined;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
         variant?: 'primary' | 'secondary' | undefined;
-        orientation?: 'horizontal' | 'vertical';
+        orientation?: "vertical" | "horizontal" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;