@sveltia/ui 0.7.4 → 0.8.0

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}
@@ -35,12 +41,12 @@
    */
   export let readonly = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-required` attribute.
+   * Whether to mark the widget required. An alias of the `aria-required` attribute.
    * @type {boolean}
    */
   export let required = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
@@ -50,6 +56,7 @@
    */
   export let value = undefined;
 
+  const id = getRandomId('searchbox');
   /**
    * Reference to the `TextInput` component.
    * @type {TextInput | undefined}
@@ -67,23 +74,28 @@
 </script>
 
 <div
+  role={hidden ? undefined : 'none'}
   class="sui search-bar {className}"
+  class:flex
   class:disabled
-  role="search"
+  class:readonly
   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}
     {required}
     {invalid}
+    inputmode="search"
     {...$$restProps}
     bind:this={inputComponent}
     on:input
@@ -95,6 +107,8 @@
   {#if value}
     <Button
       iconic
+      aria-label={$_('_sui.clear')}
+      aria-controls={id}
       on:click={() => {
         value = '';
         input?.focus();
@@ -105,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;
@@ -129,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}
@@ -28,12 +33,12 @@
    */
   export let readonly = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-required` attribute.
+   * Whether to mark the widget required. An alias of the `aria-required` attribute.
    * @type {boolean}
    */
   export let required = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
@@ -54,7 +59,14 @@
   export let autoResize = false;
 </script>
 
-<div class="sui text-area {className}" class:disabled 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,
@@ -107,8 +126,9 @@ textarea:focus,
 .clone:focus {
   border-color: var(--sui-primary-accent-color);
 }
-textarea:disabled,
-.clone:disabled {
+textarea:disabled, textarea:read-only,
+.clone:disabled,
+.clone:read-only {
   background-color: var(--sui-disabled-background-color);
 }
 

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'}
@@ -42,12 +47,12 @@
    */
   export let readonly = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-required` attribute.
+   * Whether to mark the widget required. An alias of the `aria-required` attribute.
    * @type {boolean}
    */
   export let required = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
@@ -73,13 +78,26 @@
    * @type {boolean}
    */
   export let showInlineLabel = false;
+  /**
+   * The `inputmode` attribute on the `<input>`.
+   * @type {'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'}
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+   */
+  export let inputmode = 'text';
 
   const id = getRandomId('input');
 
   $: ariaLabel = $$restProps['aria-label'];
 </script>
 
-<div class="sui text-input {className}" class:disabled hidden={hidden || undefined}>
+<div
+  role="none"
+  class="sui text-input {className}"
+  class:flex
+  class:disabled
+  class:readonly
+  hidden={hidden || undefined}
+>
   <input
     type="text"
     {role}
@@ -87,6 +105,7 @@
     tabindex={disabled ? -1 : 0}
     disabled={disabled || undefined}
     readonly={readonly || undefined}
+    {inputmode}
     aria-hidden={hidden}
     aria-disabled={disabled}
     aria-readonly={readonly}
@@ -110,14 +129,25 @@
 </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,
+input:-webkit-autofill:focus {
+  transition: background-color 0s 600000s, color 0s 600000s;
 }
 
 input {
-  z-index: 1;
   display: inline-block;
   flex: auto;
   border-width: 1px;
@@ -140,7 +170,7 @@ input:read-only {
   color: var(--sui-tertiary-foreground-color);
   border-color: var(--sui-textbox-border-color) !important;
 }
-input:disabled {
+input:disabled, input:read-only {
   background-color: var(--sui-disabled-background-color);
 }
 input[aria-invalid=true] {

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

@@ -14,12 +14,14 @@ 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";
-    keyShortcuts?: string;
     readonly?: boolean;
+    keyShortcuts?: string;
+    flex?: boolean;
     showInlineLabel?: boolean;
+    inputmode?: "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url";
 }, {
     input: Event;
     keydown: KeyboardEvent;
@@ -36,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*/
@@ -65,6 +70,9 @@ export default class TextInput extends SvelteComponent<{
     /**accessor*/
     set showInlineLabel(arg: boolean);
     get showInlineLabel(): boolean;
+    /**accessor*/
+    set inputmode(arg: "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url");
+    get inputmode(): "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url";
 }
 export type TextInputProps = typeof __propDef.props;
 export type TextInputEvents = typeof __propDef.events;
@@ -79,12 +87,14 @@ 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';
-        keyShortcuts?: string | undefined;
         readonly?: boolean;
+        keyShortcuts?: string | undefined;
+        flex?: boolean;
         showInlineLabel?: boolean;
+        inputmode?: 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     };
     events: {
         input: Event;

package/package/components/toast/toast.svelte

@@ -6,7 +6,6 @@
 -->
 <script>
   import { onMount } from 'svelte';
-  import Alert from '../alert/alert.svelte';
 
   /**
    * @type {boolean}
@@ -17,11 +16,6 @@
    * @type {number}
    */
   export let duration = 5000;
-  /**
-   * Alert type.
-   * @type {'error' | 'warning' | 'info' | 'success'}
-   */
-  export let type = 'info';
 
   /**
    * @type {HTMLElement}
@@ -73,14 +67,10 @@
   }
 </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" aria-hidden={!show} bind:this={toast} {...$$restProps}>
+  <slot />
 </div>
 
 <style>.toast-base {
@@ -95,8 +85,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);
@@ -114,7 +104,7 @@
   transition-duration: 250ms;
   will-change: opacity;
 }
-.toast[hidden] {
+.toast[aria-hidden=true] {
   display: block;
   opacity: 0;
 }</style>

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

@@ -7,7 +7,7 @@
  * @see https://developer.chrome.com/blog/introducing-popover-api/
  */
 export default class Toast extends SvelteComponent<{
-    type?: "error" | "warning" | "info" | "success";
+    [x: string]: any;
     show?: boolean;
     duration?: number;
 }, {
@@ -22,7 +22,7 @@ export type ToastSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        type?: 'error' | 'warning' | 'info' | 'success';
+        [x: string]: any;
         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
@@ -96,7 +96,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
   --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
   --sui-background-color-5-hsl: var(--sui-base-hue) 5% 74%;
-  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 54%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 50%;
   --sui-border-color-2-hsl: var(--sui-base-hue) 5% 74%;
   --sui-border-color-3-hsl: var(--sui-base-hue) 5% 70%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -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;
@@ -129,7 +130,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
   --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
   --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
-  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 46%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 50%;
   --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
   --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -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,30 +395,10 @@
   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]),
+:global([aria-readonly=true]),
 :global([inert]) {
   cursor: default;
   pointer-events: none;
@@ -406,13 +407,17 @@
   filter: grayscale(1) opacity(0.35);
 }
 :global(.disabled) :global(*),
+:global(.readonly) :global(*),
 :global([aria-disabled=true]) :global(*),
+:global([aria-readonly=true]) :global(*),
 :global([inert]) :global(*) {
   filter: grayscale(0) opacity(1);
 }
 
 :global(.disabled) :global(*),
+:global(.readonly) :global(*),
 :global([aria-disabled=true]) :global(*),
+:global([aria-readonly=true]) :global(*),
 :global([inert]) :global(*) {
   cursor: default;
   pointer-events: none;

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>