@sveltia/ui 0.6.5 → 0.7.0

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

@@ -14,33 +14,78 @@
   import TextInput from './text-input.svelte';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   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 disable the widget. An alias of `aria-readonly` attribute.
+   * @type {boolean}
+   */
+  export let readonly = false;
+  /**
+   * Whether to disable the widget. 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.
+   * @type {boolean}
+   */
+  export let invalid = false;
+  /**
+   * Input value.
+   * @type {string | undefined}
+   */
+  export let value = undefined;
 
-  /** @type {import('svelte').SvelteComponent} */
-  let input;
+  /**
+   * Reference to the `TextInput` component.
+   * @type {TextInput | undefined}
+   */
+  let inputComponent;
 
-  export let value = '';
+  $: input = inputComponent?.element;
 
   /**
    * Move focus to the `<input>` element.
    */
   export const focus = () => {
-    input?.element?.focus();
+    input?.focus();
   };
 </script>
 
-<div class="sui search-bar {className}" role="search">
-  <Icon name="search" />
+<div
+  class="sui search-bar {className}"
+  class:disabled
+  role="search"
+  hidden={hidden || undefined}
+  aria-hidden={hidden}
+>
+  <span>
+    <Icon name="search" />
+  </span>
   <TextInput
-    bind:this={input}
     bind:value
     role="searchbox"
+    {hidden}
+    {disabled}
+    {readonly}
+    {required}
+    {invalid}
     {...$$restProps}
+    bind:this={inputComponent}
     on:input
     on:keydown
     on:keyup
@@ -49,18 +94,18 @@
   />
   {#if value}
     <Button
-      class="iconic"
+      iconic
       on:click={() => {
         value = '';
-        input.element.focus();
+        input?.focus();
         window.requestIdleCallback(() => {
-          input.element.dispatchEvent(new KeyboardEvent('input'));
-          input.element.dispatchEvent(new KeyboardEvent('keypress'));
-          input.element.dispatchEvent(new KeyboardEvent('change'));
+          input?.dispatchEvent(new KeyboardEvent('input'));
+          input?.dispatchEvent(new KeyboardEvent('keypress'));
+          input?.dispatchEvent(new KeyboardEvent('change'));
         });
       }}
     >
-      <Icon slot="start-icon" name="close" label={$_('_sui._.clear')} />
+      <Icon slot="start-icon" name="close" label={$_('_sui.clear')} />
     </Button>
   {/if}
 </div>
@@ -74,10 +119,15 @@
   font-size: var(--sui-font-size-xx-large);
   opacity: 0.5;
 }
-[role=search] > :global(.icon) {
+[role=search] > span {
   position: absolute;
-  inset: 8px auto auto 8px;
+  inset: 0 auto 0 0;
   z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sui-button-medium-height);
+  height: var(--sui-button-medium-height);
 }
 [role=search] > :global(button) {
   position: absolute;
@@ -89,6 +139,6 @@
   inset: 0 36px;
 }
 [role=search] :global(input) {
-  padding: 0 36px !important;
+  padding: 0 var(--sui-button-medium-height) !important;
   width: 100%;
 }</style>

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

@@ -11,7 +11,12 @@ 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;
 }, {
     input: Event;
     keydown: KeyboardEvent;
@@ -26,6 +31,21 @@ export default class SearchBar extends SvelteComponent<{
     set class(arg: string);
     get class(): string;
     /**accessor*/
+    set hidden(arg: boolean);
+    get hidden(): boolean;
+    /**accessor*/
+    set disabled(arg: boolean);
+    get disabled(): boolean;
+    /**accessor*/
+    set readonly(arg: boolean);
+    get readonly(): boolean;
+    /**accessor*/
+    set required(arg: boolean);
+    get required(): boolean;
+    /**accessor*/
+    set invalid(arg: boolean);
+    get invalid(): boolean;
+    /**accessor*/
     set value(arg: string);
     get value(): string;
 }
@@ -38,7 +58,12 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         focus?: () => void;
-        value?: string;
+        invalid?: boolean;
+        disabled?: boolean;
+        required?: boolean;
+        value?: string | undefined;
+        hidden?: boolean | undefined;
+        readonly?: boolean;
     };
     events: {
         input: Event;

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

@@ -5,41 +5,74 @@
   @see https://w3c.github.io/aria/#textbox
   @see https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
 -->
-<svelte:options accessors={true} />
-
 <script>
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
-  /** @type {HTMLTextAreaElement?} */
-  export let element = undefined;
-
-  export let name = '';
-
-  /** @type {string?} */
+  /**
+   * 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 disable the widget. An alias of `aria-readonly` attribute.
+   * @type {boolean}
+   */
+  export let readonly = false;
+  /**
+   * Whether to disable the widget. 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.
+   * @type {boolean}
+   */
+  export let invalid = false;
+  /**
+   * The `name` attribute on the `<textarea>` element.
+   * @type {string | undefined}
+   */
+  export let name = undefined;
+  /**
+   * Input value.
+   * @type {string | undefined}
+   */
   export let value = undefined;
-
+  /**
+   * Whether to automatically resize the `<textarea>` based on the content.
+   * @type {boolean}
+   */
   export let autoResize = false;
 </script>
 
-<div class="sui text-area {className}">
+<div class="sui text-area {className}" class:disabled hidden={hidden || undefined}>
   <textarea
-    name={name || undefined}
+    {name}
+    bind:value
+    disabled={disabled || undefined}
+    readonly={readonly || undefined}
+    aria-hidden={hidden}
+    aria-disabled={disabled}
+    aria-readonly={readonly}
+    aria-required={required}
+    aria-invalid={invalid}
     {...$$restProps}
     class:auto-resize={autoResize}
-    bind:this={element}
-    bind:value
     on:click
     on:input
     on:keypress
   />
   {#if autoResize}
-    <div class="clone" aria-hidden="true">{value}</div>
+    <div class="clone" aria-hidden="true">{value ?? ''}</div>
   {/if}
 </div>
 
@@ -54,8 +87,8 @@ textarea,
   display: block;
   margin: 0;
   border-width: 1px;
-  border-color: var(--sui-control-border-color);
-  border-radius: var(--sui-textbox-medium-border-radius);
+  border-color: var(--sui-textbox-border-color);
+  border-radius: var(--sui-textbox-border-radius);
   padding: 8px;
   width: 100%;
   min-height: 8em;
@@ -77,8 +110,6 @@ textarea:focus,
 textarea:disabled,
 .clone:disabled {
   background-color: var(--sui-disabled-background-color);
-  opacity: 0.4;
-  cursor: default;
 }
 
 textarea {
@@ -88,6 +119,9 @@ textarea.auto-resize {
   overflow: hidden;
   resize: none;
 }
+textarea[aria-invalid=true] {
+  border-color: var(--sui-error-foreground-color);
+}
 
 .clone {
   visibility: hidden;

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

@@ -11,8 +11,12 @@ export default class TextArea extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     name?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
     value?: string;
-    element?: HTMLTextAreaElement;
+    hidden?: boolean;
+    readonly?: boolean;
     autoResize?: boolean;
 }, {
     click: MouseEvent;
@@ -21,21 +25,6 @@ export default class TextArea extends SvelteComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
-    /**accessor*/
-    set class(arg: string);
-    get class(): string;
-    /**accessor*/
-    set element(arg: HTMLTextAreaElement);
-    get element(): HTMLTextAreaElement;
-    /**accessor*/
-    set name(arg: string);
-    get name(): string;
-    /**accessor*/
-    set value(arg: string);
-    get value(): string;
-    /**accessor*/
-    set autoResize(arg: boolean);
-    get autoResize(): boolean;
 }
 export type TextAreaProps = typeof __propDef.props;
 export type TextAreaEvents = typeof __propDef.events;
@@ -45,9 +34,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        name?: string;
-        value?: string | null;
-        element?: HTMLTextAreaElement | null;
+        name?: string | undefined;
+        invalid?: boolean;
+        disabled?: boolean;
+        required?: boolean;
+        value?: string | undefined;
+        hidden?: boolean | undefined;
+        readonly?: boolean;
         autoResize?: boolean;
     };
     events: {

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

@@ -7,64 +7,91 @@
 <svelte:options accessors={true} />
 
 <script>
-  import { activateKeyShortcuts } from '../util/events';
-  import { getRandomId } from '../util/util';
+  import { activateKeyShortcuts } from '../../services/events';
+  import { getRandomId } from '../../services/util';
 
   /**
-   * CSS class name on the button.
+   * Reference to the `<input>` element.
+   * @type {HTMLInputElement | undefined}
+   */
+  export let element = undefined;
+  /**
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
-  /** @type {HTMLInputElement?} */
-  export let element = undefined;
-
-  /** @type {('textbox'|'searchbox'|'combobox'|'spinbutton')} */
+  /**
+   * The `role` attribute on the `<input>` element.
+   * @type {'textbox' | 'searchbox' | 'combobox' | 'spinbutton'}
+   */
   export let role = 'textbox';
-
   /**
-   * Whether the textbox is editable.
+   * 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 readOnly = false;
-
   export let disabled = false;
-
-  export let name = '';
-
-  /** @type {(string | number | undefined)} */
+  /**
+   * Whether to disable the widget. An alias of `aria-readonly` attribute.
+   * @type {boolean}
+   */
+  export let readonly = false;
+  /**
+   * Whether to disable the widget. 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.
+   * @type {boolean}
+   */
+  export let invalid = false;
+  /**
+   * Keyboard shortcuts. An alias of the `aria-keyshortcuts` attribute. Accepts the special `Accel`
+   * key, which will be replaced with `Control` or `Meta` depending on the user’s operating system.
+   * @type {string | undefined}
+   */
+  export let keyShortcuts = undefined;
+  /**
+   * The `name` attribute on the `<input>` element.
+   * @type {string | undefined}
+   */
+  export let name = undefined;
+  /**
+   * Input value.
+   * @type {string | number | undefined}
+   */
   export let value = undefined;
-
   /**
-   * Keyboard shortcuts.
-   * @type {string}
+   * Whether to display `aria-label` over the `<input>` element if it’s empty, just like how the
+   * HTML `placeholder` attribute works.
+   * @type {boolean}
    */
-  export let keyShortcuts = '';
+  export let showInlineLabel = false;
 
   const id = getRandomId('input');
-  let ariaLabel = '';
 
-  $: {
-    // Replace `aria-label` with a visible label if `<input placeholder>` is not defined
-    if ('aria-label' in $$restProps && !('placeholder' in $$restProps)) {
-      ariaLabel = $$restProps['aria-label'];
-      delete $$restProps['aria-label'];
-      $$restProps['aria-labelledby'] = `${id}-label`;
-    }
-  }
+  $: ariaLabel = $$restProps['aria-label'];
 </script>
 
-<div class="sui text-input {className}">
+<div class="sui text-input {className}" class:disabled hidden={hidden || undefined}>
   <input
     type="text"
     {role}
     name={name || undefined}
     tabindex={disabled ? -1 : 0}
-    readOnly={readOnly ? true : undefined}
-    aria-readonly={readOnly ? true : undefined}
-    {disabled}
-    aria-disabled={disabled ? true : undefined}
+    disabled={disabled || undefined}
+    readonly={readonly || undefined}
+    aria-hidden={hidden}
+    aria-disabled={disabled}
+    aria-readonly={readonly}
+    aria-required={required}
+    aria-invalid={invalid}
     {...$$restProps}
     bind:this={element}
     bind:value
@@ -75,8 +102,8 @@
     on:change
     use:activateKeyShortcuts={keyShortcuts}
   />
-  {#if ariaLabel}
-    <span id="{id}-label" class="label" class:hidden={!!value}>
+  {#if ariaLabel && showInlineLabel}
+    <span id="{id}-label" class="label" class:hidden={!!value} aria-hidden="true">
       {ariaLabel}
     </span>
   {/if}
@@ -94,11 +121,11 @@ input {
   display: inline-block;
   flex: auto;
   border-width: 1px;
-  border-color: var(--sui-control-border-color);
-  border-radius: var(--sui-textbox-medium-border-radius);
+  border-color: var(--sui-textbox-border-color);
+  border-radius: var(--sui-textbox-border-radius);
   padding: 0 8px;
   min-width: 0;
-  height: var(--sui-textbox-medium-height);
+  height: var(--sui-textbox-height);
   color: var(--sui-textbox-foreground-color);
   background-color: var(--sui-textbox-background-color);
   font-family: var(--sui-textbox-font-family);
@@ -111,22 +138,20 @@ input:focus {
 }
 input:read-only {
   color: var(--sui-tertiary-foreground-color);
-  border-color: var(--sui-control-border-color) !important;
+  border-color: var(--sui-textbox-border-color) !important;
 }
 input:disabled {
   background-color: var(--sui-disabled-background-color);
-  opacity: 0.4;
-  cursor: default;
 }
 input[aria-invalid=true] {
-  border-color: deeppink;
+  border-color: var(--sui-error-foreground-color);
 }
 input ~ :global(button) {
   flex: none;
   margin-left: -1px;
   border-width: 1px;
-  border-color: var(--sui-control-border-color);
-  height: var(--sui-textbox-medium-height);
+  border-color: var(--sui-textbox-border-color);
+  height: var(--sui-textbox-height);
   aspect-ratio: 1/1;
 }
 input ~ :global(button):last-child {

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

@@ -10,12 +10,16 @@ export default class TextInput extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     name?: string;
+    invalid?: boolean;
     disabled?: boolean;
-    readOnly?: boolean;
+    required?: boolean;
     value?: string | number;
+    hidden?: boolean;
     element?: HTMLInputElement;
     role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
     keyShortcuts?: string;
+    readonly?: boolean;
+    showInlineLabel?: boolean;
 }, {
     input: Event;
     keydown: KeyboardEvent;
@@ -25,30 +29,42 @@ export default class TextInput extends SvelteComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
-    /**accessor*/
-    set class(arg: string);
-    get class(): string;
     /**accessor*/
     set element(arg: HTMLInputElement);
     get element(): HTMLInputElement;
     /**accessor*/
+    set class(arg: string);
+    get class(): string;
+    /**accessor*/
     set role(arg: "textbox" | "searchbox" | "combobox" | "spinbutton");
     get role(): "textbox" | "searchbox" | "combobox" | "spinbutton";
     /**accessor*/
-    set readOnly(arg: boolean);
-    get readOnly(): boolean;
+    set hidden(arg: boolean);
+    get hidden(): boolean;
     /**accessor*/
     set disabled(arg: boolean);
     get disabled(): boolean;
     /**accessor*/
+    set readonly(arg: boolean);
+    get readonly(): boolean;
+    /**accessor*/
+    set required(arg: boolean);
+    get required(): boolean;
+    /**accessor*/
+    set invalid(arg: boolean);
+    get invalid(): boolean;
+    /**accessor*/
+    set keyShortcuts(arg: string);
+    get keyShortcuts(): string;
+    /**accessor*/
     set name(arg: string);
     get name(): string;
     /**accessor*/
     set value(arg: string | number);
     get value(): string | number;
     /**accessor*/
-    set keyShortcuts(arg: string);
-    get keyShortcuts(): string;
+    set showInlineLabel(arg: boolean);
+    get showInlineLabel(): boolean;
 }
 export type TextInputProps = typeof __propDef.props;
 export type TextInputEvents = typeof __propDef.events;
@@ -58,13 +74,17 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        name?: string;
+        name?: string | undefined;
+        invalid?: boolean;
         disabled?: boolean;
-        readOnly?: boolean;
-        value?: (string | number | undefined);
-        element?: HTMLInputElement | null;
-        role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
-        keyShortcuts?: string;
+        required?: boolean;
+        value?: string | number | undefined;
+        hidden?: boolean | undefined;
+        element?: HTMLInputElement | undefined;
+        role?: 'textbox' | 'searchbox' | 'combobox' | 'spinbutton';
+        keyShortcuts?: string | undefined;
+        readonly?: boolean;
+        showInlineLabel?: boolean;
     };
     events: {
         input: Event;