@sveltia/ui 0.7.5 → 0.8.1

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

@@ -9,6 +9,7 @@
 
 <script>
   import { _ } from 'svelte-i18n';
+  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
@@ -19,6 +20,11 @@
    */
   let className = '';
   export { className as class };
+  /**
+   * Make the text input container flexible.
+   * @type {boolean}
+   */
+  export let flex = false;
   /**
    * Whether to hide the widget. An alias of the `aria-hidden` attribute.
    * @type {boolean | undefined}
@@ -50,6 +56,7 @@
    */
   export let value = undefined;
 
+  const id = getRandomId('searchbox');
   /**
    * Reference to the `TextInput` component.
    * @type {TextInput | undefined}
@@ -67,19 +74,22 @@
 </script>
 
 <div
+  role={hidden ? undefined : 'none'}
   class="sui search-bar {className}"
+  class:flex
   class:disabled
   class:readonly
-  role="search"
   hidden={hidden || undefined}
   aria-hidden={hidden}
 >
-  <span>
+  <span role="none">
     <Icon name="search" />
   </span>
   <TextInput
-    bind:value
     role="searchbox"
+    {id}
+    bind:value
+    {flex}
     {hidden}
     {disabled}
     {readonly}
@@ -97,6 +107,8 @@
   {#if value}
     <Button
       iconic
+      aria-label={$_('_sui.clear')}
+      aria-controls={id}
       on:click={() => {
         value = '';
         input?.focus();
@@ -107,21 +119,29 @@
         });
       }}
     >
-      <Icon slot="start-icon" name="close" label={$_('_sui.clear')} />
+      <Icon slot="start-icon" name="close" />
     </Button>
   {/if}
 </div>
 
-<style>[role=search] {
-  display: flex;
+<style>.search-bar {
+  display: inline-flex;
   align-items: center;
   position: relative;
+  margin: var(--sui-focus-ring-width);
+  min-width: var(--sui-textbox-singleline-min-width);
 }
-[role=search] :global(.icon) {
+.search-bar.flex {
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: stretch;
+  min-width: 0;
+}
+.search-bar :global(.icon) {
   font-size: var(--sui-font-size-xx-large);
   opacity: 0.5;
 }
-[role=search] > span {
+.search-bar > span {
   position: absolute;
   inset: 0 auto 0 0;
   z-index: 2;
@@ -131,16 +151,24 @@
   width: var(--sui-button-medium-height);
   height: var(--sui-button-medium-height);
 }
-[role=search] > :global(button) {
+.search-bar > :global(button) {
   position: absolute;
   inset: 0 0 auto auto;
   z-index: 2;
+  margin: 0 !important;
   height: var(--sui-button-medium-height);
 }
-[role=search] :global(.label) {
+.search-bar :global(.label) {
   inset: 0 36px;
 }
-[role=search] :global(input) {
+.search-bar :global(.text-input) {
+  flex: auto;
+  margin: 0 !important;
+  width: 0;
+  min-width: 0 !important;
+}
+.search-bar :global(input) {
+  z-index: 1;
   padding: 0 var(--sui-button-medium-height) !important;
   width: 100%;
 }</style>

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

@@ -17,6 +17,7 @@ export default class SearchBar extends SvelteComponent<{
     value?: string;
     hidden?: boolean;
     readonly?: boolean;
+    flex?: boolean;
 }, {
     input: Event;
     keydown: KeyboardEvent;
@@ -31,6 +32,9 @@ export default class SearchBar extends SvelteComponent<{
     set class(arg: string);
     get class(): string;
     /**accessor*/
+    set flex(arg: boolean);
+    get flex(): boolean;
+    /**accessor*/
     set hidden(arg: boolean);
     get hidden(): boolean;
     /**accessor*/
@@ -64,6 +68,7 @@ declare const __propDef: {
         value?: string | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean;
+        flex?: boolean;
     };
     events: {
         input: Event;

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

@@ -12,6 +12,11 @@
    */
   let className = '';
   export { className as class };
+  /**
+   * Make the text input container flexible.
+   * @type {boolean}
+   */
+  export let flex = false;
   /**
    * Whether to hide the widget. An alias of the `aria-hidden` attribute.
    * @type {boolean | undefined}
@@ -54,7 +59,14 @@
   export let autoResize = false;
 </script>
 
-<div class="sui text-area {className}" class:disabled class:readonly hidden={hidden || undefined}>
+<div
+  role="none"
+  class="sui text-area {className}"
+  class:flex
+  class:disabled
+  class:readonly
+  hidden={hidden || undefined}
+>
   <textarea
     {name}
     bind:value
@@ -78,7 +90,14 @@
 
 <style>.text-area {
   display: inline-grid;
-  width: 100%;
+  margin: var(--sui-focus-ring-width);
+  min-width: var(--sui-textbox-multiline-min-width);
+}
+.text-area.flex {
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: stretch;
+  min-width: 0;
 }
 
 textarea,

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

@@ -17,6 +17,7 @@ export default class TextArea extends SvelteComponent<{
     value?: string;
     hidden?: boolean;
     readonly?: boolean;
+    flex?: boolean;
     autoResize?: boolean;
 }, {
     click: MouseEvent;
@@ -41,6 +42,7 @@ declare const __propDef: {
         value?: string | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean;
+        flex?: boolean;
         autoResize?: boolean;
     };
     events: {

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

@@ -21,6 +21,11 @@
    */
   let className = '';
   export { className as class };
+  /**
+   * Make the text input container flexible.
+   * @type {boolean}
+   */
+  export let flex = false;
   /**
    * The `role` attribute on the `<input>` element.
    * @type {'textbox' | 'searchbox' | 'combobox' | 'spinbutton'}
@@ -85,7 +90,14 @@
   $: ariaLabel = $$restProps['aria-label'];
 </script>
 
-<div class="sui text-input {className}" class:disabled class:readonly hidden={hidden || undefined}>
+<div
+  role="none"
+  class="sui text-input {className}"
+  class:flex
+  class:disabled
+  class:readonly
+  hidden={hidden || undefined}
+>
   <input
     type="text"
     {role}
@@ -117,10 +129,17 @@
 </div>
 
 <style>.text-input {
-  position: relative;
-  width: 100%;
   display: inline-flex;
   align-items: center;
+  position: relative;
+  margin: var(--sui-focus-ring-width);
+  min-width: var(--sui-textbox-singleline-min-width);
+}
+.text-input.flex {
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: stretch;
+  min-width: 0;
 }
 
 input:-webkit-autofill,
@@ -129,7 +148,6 @@ input:-webkit-autofill:focus {
 }
 
 input {
-  z-index: 1;
   display: inline-block;
   flex: auto;
   border-width: 1px;

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

@@ -14,11 +14,12 @@ export default class TextInput extends SvelteComponent<{
     disabled?: boolean;
     required?: boolean;
     value?: string | number;
+    role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
     hidden?: boolean;
     element?: HTMLInputElement;
-    role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
     readonly?: boolean;
     keyShortcuts?: string;
+    flex?: boolean;
     showInlineLabel?: boolean;
     inputmode?: "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url";
 }, {
@@ -37,6 +38,9 @@ export default class TextInput extends SvelteComponent<{
     set class(arg: string);
     get class(): string;
     /**accessor*/
+    set flex(arg: boolean);
+    get flex(): boolean;
+    /**accessor*/
     set role(arg: "textbox" | "searchbox" | "combobox" | "spinbutton");
     get role(): "textbox" | "searchbox" | "combobox" | "spinbutton";
     /**accessor*/
@@ -83,11 +87,12 @@ declare const __propDef: {
         disabled?: boolean;
         required?: boolean;
         value?: string | number | undefined;
+        role?: 'textbox' | 'searchbox' | 'combobox' | 'spinbutton';
         hidden?: boolean | undefined;
         element?: HTMLInputElement | undefined;
-        role?: 'textbox' | 'searchbox' | 'combobox' | 'spinbutton';
         readonly?: boolean;
         keyShortcuts?: string | undefined;
+        flex?: boolean;
         showInlineLabel?: boolean;
         inputmode?: 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     };

package/package/components/toast/toast.svelte

@@ -1,14 +1,20 @@
 <!--
   @component
-  Toast notification. Use the Popover API if possible to acquire a non-modal top layer.
+  Toast/snackbar notification. Use the Popover API if possible to acquire a non-modal top layer.
   @see https://w3c.github.io/aria/#alert
   @see https://developer.chrome.com/blog/introducing-popover-api/
 -->
 <script>
   import { onMount } from 'svelte';
-  import Alert from '../alert/alert.svelte';
 
   /**
+   * 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}
+   */
+  export let id = undefined;
+  /**
+   * Whether to show the toast.
    * @type {boolean}
    */
   export let show = false;
@@ -18,10 +24,10 @@
    */
   export let duration = 5000;
   /**
-   * Alert type.
-   * @type {'error' | 'warning' | 'info' | 'success'}
+   * Position of the toast.
+   * @type {ToastPosition}
    */
-  export let type = 'info';
+  export let position = 'bottom-right';
 
   /**
    * @type {HTMLElement}
@@ -35,6 +41,10 @@
    * @type {HTMLElement}
    */
   let toast;
+  /**
+   * @type {number}
+   */
+  let timerId = 0;
 
   onMount(() => {
     popover = document.querySelector('.sui.toast-base.enabled');
@@ -65,22 +75,23 @@
   }
 
   $: {
+    void id;
+    void show;
+    void duration;
+    window.clearTimeout(timerId);
+
     if (show && duration) {
-      window.setTimeout(() => {
+      timerId = window.setTimeout(() => {
         show = false;
       }, duration);
     }
   }
 </script>
 
-<div class="sui toast-base" bind:this={popoverBase} />
+<div role="none" class="sui toast-base" bind:this={popoverBase} />
 
-<div class="sui toast" hidden={!show || undefined} bind:this={toast}>
-  <Alert {type}>
-    {#if show}
-      <slot />
-    {/if}
-  </Alert>
+<div class="sui toast {position}" aria-hidden={!show} bind:this={toast} {...$$restProps}>
+  <slot />
 </div>
 
 <style>.toast-base {
@@ -95,8 +106,8 @@
   margin: 0;
   border: 0;
   padding: 16px;
-  width: 100vw;
-  height: 100vh;
+  width: 100dvw;
+  height: 100dvh;
   background-color: transparent;
   font-family: var(--sui-font-family-default);
   font-size: var(--sui-font-size-default);
@@ -108,13 +119,32 @@
 
 .toast {
   position: absolute;
-  inset: auto 16px 16px auto;
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   opacity: 1;
   transition-duration: 250ms;
   will-change: opacity;
 }
-.toast[hidden] {
+.toast[aria-hidden=true] {
   display: block;
   opacity: 0;
+}
+.toast.top-left {
+  inset: 16px auto auto 16px;
+}
+.toast.top-center {
+  inset: 16px auto auto 50%;
+  transform: translateX(-50%);
+}
+.toast.top-right {
+  inset: 16px 16px auto auto;
+}
+.toast.bottom-left {
+  inset: auto auto 16px 16px;
+}
+.toast.bottom-center {
+  inset: auto auto 16px 50%;
+  transform: translateX(-50%);
+}
+.toast.bottom-right {
+  inset: auto 16px 16px auto;
 }</style>

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

@@ -2,12 +2,14 @@
 /** @typedef {typeof __propDef.events}  ToastEvents */
 /** @typedef {typeof __propDef.slots}  ToastSlots */
 /**
- * Toast notification. Use the Popover API if possible to acquire a non-modal top layer.
+ * Toast/snackbar notification. Use the Popover API if possible to acquire a non-modal top layer.
  * @see https://w3c.github.io/aria/#alert
  * @see https://developer.chrome.com/blog/introducing-popover-api/
  */
 export default class Toast extends SvelteComponent<{
-    type?: "error" | "warning" | "info" | "success";
+    [x: string]: any;
+    id?: number;
+    position?: ToastPosition;
     show?: boolean;
     duration?: number;
 }, {
@@ -22,7 +24,9 @@ export type ToastSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        type?: 'error' | 'warning' | 'info' | 'success';
+        [x: string]: any;
+        id?: number;
+        position?: ToastPosition;
         show?: boolean;
         duration?: number;
     };

package/package/components/toolbar/toolbar.svelte

@@ -34,15 +34,15 @@
 </script>
 
 <div
-  class="sui toolbar {orientation} {variant ?? ''} {className}"
   role="toolbar"
+  class="sui toolbar {orientation} {variant ?? ''} {className}"
   hidden={hidden || undefined}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-orientation={orientation}
   {...$$restProps}
 >
-  <div class="inner" inert={disabled}>
+  <div role="none" class="inner" inert={disabled}>
     <slot />
   </div>
 </div>
@@ -52,8 +52,7 @@
   flex: none !important;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px;
+  padding: 0 4px;
 }
 [role=toolbar].primary {
   --toolbar-size: var(--sui-primary-toolbar-size);

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

@@ -60,12 +60,12 @@
 <!-- Preload fonts, including the icons -->
 <div class="font-loader" aria-hidden="true" bind:this={fontLoader} style:opacity="0">
   Loading <strong>Sveltia</strong> <em>UI</em>
-  <span class="material-symbols-outlined">favorite</span>
+  <span role="none" class="material-symbols-outlined">favorite</span>
 </div>
 
 <div
-  class="sui app-shell"
   role="none"
+  class="sui app-shell"
   {...$$restProps}
   on:dragover|preventDefault
   on:drop|preventDefault
@@ -105,6 +105,7 @@
   --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 40%);
   --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 35%);
   --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
+  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
   --sui-error-color-hue: 0;
   --sui-warning-color-hue: 40;
   --sui-info-color-hue: 210;
@@ -138,6 +139,7 @@
   --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 40%);
   --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 100% 35%);
   --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
+  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
   --sui-error-color-hue: 0;
   --sui-warning-color-hue: 40;
   --sui-info-color-hue: 210;
@@ -201,6 +203,7 @@
     var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
       var(--sui-alert-background-color-lightness)
   );
+  --sui-focus-ring-width: 4px;
   --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
   --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
   --sui-error-border-color: hsl(
@@ -283,7 +286,9 @@
   --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
   --sui-textbox-font-family: var(--sui-font-family-default);
   --sui-textbox-font-size: var(--sui-font-size-default);
+  --sui-textbox-singleline-min-width: 240px;
   --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-small-height: var(--sui-control-small-height);
   --sui-tab-medium-height: var(--sui-control-medium-height);
@@ -306,6 +311,14 @@
     --sui-secondary-row-height: 48px;
   }
 }
+@media (prefers-reduced-transparency) {
+  :global(:root),
+  :global(:host) {
+    --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
+    --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
+    --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
+  }
+}
 
 :global(.material-symbols-outlined) {
   font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
@@ -317,14 +330,21 @@
   overflow-anchor: none;
   scroll-behavior: smooth;
   box-sizing: border-box;
-  outline-offset: 1px;
-  outline-width: 2px !important;
+  outline-offset: 0px;
+  outline-width: var(--sui-focus-ring-width) !important;
   outline-style: solid;
   outline-color: transparent;
   border-width: 0;
   border-style: solid;
   vertical-align: top;
 }
+@media (prefers-reduced-motion) {
+  :global(*),
+  :global(::before),
+  :global(::after) {
+    transition-duration: 1ms !important;
+  }
+}
 
 :global(*) {
   -webkit-tap-highlight-color: transparent;
@@ -336,7 +356,8 @@
 }
 
 :global(:focus-visible) {
-  outline-color: var(--sui-primary-accent-color-light);
+  outline-color: var(--sui-primary-accent-color-translucent);
+  z-index: 2;
 }
 
 :global(h1),
@@ -374,28 +395,6 @@
   user-select: text;
 }
 
-:global(dialog) {
-  position: fixed;
-  inset: 0;
-  outline: 0;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  width: 100vw;
-  max-width: 100vw;
-  height: 100vh;
-  max-height: 100vh;
-  color: var(--sui-primary-foreground-color);
-  background: transparent;
-  -webkit-user-select: none;
-  user-select: none;
-  touch-action: none;
-  cursor: default;
-}
-:global(dialog::backdrop) {
-  background: transparent;
-}
-
 :global(.disabled),
 :global(.readonly),
 :global([aria-disabled=true]),

package/package/components/util/group.svelte

@@ -23,14 +23,14 @@
 </script>
 
 <div
-  class="sui group {className}"
   role="group"
+  class="sui group {className}"
   hidden={hidden || undefined}
   aria-hidden={hidden}
   aria-disabled={disabled}
   {...$$restProps}
 >
-  <div class="inner" inert={disabled}>
+  <div role="none" class="inner" inert={disabled}>
     <slot />
   </div>
 </div>