@sveltia/ui 0.9.0 → 0.10.1

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>;

package/package/components/util/app-shell.svelte

@@ -7,6 +7,12 @@
 <script>
   import { onMount } from 'svelte';
 
+  /**
+   * Orientation of the app shell’s children.
+   * @type {'horizontal' | 'vertical' | undefined}
+   */
+  export let orientation = undefined;
+
   const stylesheets = [
     // https://fonts.google.com/share?selection.family=Merriweather%20Sans:ital,wght@0,300;0,600;1,300%7CNoto%20Sans%20Mono
     'https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap',
@@ -15,7 +21,7 @@
     'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block',
   ];
 
-  /** @type {HTMLElement} */
+  /** @type {HTMLElement | undefined} */
   let fontLoader;
 
   onMount(() => {
@@ -23,7 +29,7 @@
     const { dataset } = document.documentElement;
 
     /**
-     *
+     * Apply the Dark or Light theme.
      */
     const applyTheme = () => {
       if (dataset.autoTheming !== 'false') {
@@ -33,9 +39,7 @@
 
     applyTheme();
 
-    /**
-     *
-     */
+    // eslint-disable-next-line jsdoc/require-jsdoc
     mediaQuery.onchange = () => {
       applyTheme();
     };
@@ -65,7 +69,7 @@
 
 <div
   role="none"
-  class="sui app-shell"
+  class="sui app-shell {orientation ?? ''}"
   {...$$restProps}
   on:dragover|preventDefault
   on:drop|preventDefault
@@ -222,6 +226,7 @@
   --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
   --sui-textbox-multiline-min-width: 480px;
   --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
+  --sui-tab-height: var(--sui-control-medium-height);
   --sui-tab-small-height: var(--sui-control-small-height);
   --sui-tab-medium-height: var(--sui-control-medium-height);
   --sui-tab-large-height: var(--sui-control-large-height);
@@ -414,6 +419,7 @@
   :global(*),
   :global(::before),
   :global(::after) {
+    scroll-behavior: auto;
     transition-duration: 1ms !important;
   }
 }
@@ -518,4 +524,14 @@
   user-select: none;
   touch-action: none;
   cursor: default;
+}
+:global(.app-shell.horizontal) {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+:global(.app-shell.vertical) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }</style>

package/package/components/util/app-shell.svelte.d.ts

@@ -8,6 +8,7 @@
  */
 export default class AppShell extends SvelteComponent<{
     [x: string]: any;
+    orientation?: "vertical" | "horizontal" | undefined;
 }, {
     dragover: DragEvent;
     drop: DragEvent;
@@ -24,6 +25,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        orientation?: 'horizontal' | 'vertical' | undefined;
     };
     events: {
         dragover: DragEvent;

package/package/components/util/group.svelte.d.ts

@@ -7,9 +7,9 @@
  */
 export default class Group extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    disabled?: boolean;
-    hidden?: boolean;
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -23,8 +23,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        disabled?: boolean;
+        class?: string | undefined;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
     };
     events: {