@sveltia/ui 0.33.1 → 0.35.0

package/dist/components/button/button.svelte

@@ -260,7 +260,8 @@ button.pill {
   border-radius: 80px;
   padding: var(--sui-button-medium-pill-padding, 0 12px);
 }
-button.flex {
+button.flex:not([hidden]) {
+  display: inline-flex;
   flex: auto;
   width: -moz-available;
   width: -webkit-fill-available;

package/dist/components/divider/spacer.svelte

@@ -23,7 +23,8 @@
 
 <div {...restProps} role="none" class="sui spacer {className}" class:flex></div>
 
-<style>.spacer.flex {
+<style>.spacer.flex:not([hidden]) {
+  display: block;
   flex: auto;
 }
 .spacer:not(.flex) {

package/dist/components/text-editor/code-editor.svelte

@@ -115,4 +115,7 @@
 <style>.code-editor {
   margin: var(--sui-focus-ring-width);
   width: calc(100% - var(--sui-focus-ring-width) * 2);
+}
+.code-editor.flex:not([hidden]) {
+  display: block;
 }</style>

package/dist/components/text-editor/text-editor.svelte

@@ -128,6 +128,9 @@
   margin: var(--sui-focus-ring-width);
   width: calc(100% - var(--sui-focus-ring-width) * 2);
 }
+.text-editor.flex:not([hidden]) {
+  display: block;
+}
 .text-editor :global(.sui.text-area) {
   margin: 0 !important;
   width: 100% !important;

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

@@ -204,7 +204,8 @@
   margin: var(--sui-focus-ring-width);
   min-width: var(--sui-textbox-singleline-min-width);
 }
-.number-input.flex {
+.number-input.flex:not([hidden]) {
+  display: inline-flex;
   width: -moz-available;
   width: -webkit-fill-available;
   width: stretch;

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

@@ -107,7 +107,8 @@
   margin: var(--sui-focus-ring-width);
   min-width: var(--sui-textbox-singleline-min-width);
 }
-.password-input.flex {
+.password-input.flex:not([hidden]) {
+  display: inline-flex;
   width: -moz-available;
   width: -webkit-fill-available;
   width: stretch;

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

@@ -22,6 +22,7 @@
    * @property {string} [value] Input value.
    * @property {Snippet} [searchIcon] Search icon slot content.
    * @property {Snippet} [closeIcon] Close icon slot content.
+   * @property {() => void} [onClear] Callback invoked when the clear button is clicked.
    */
 
   /**
@@ -40,6 +41,7 @@
     children,
     searchIcon,
     closeIcon,
+    onClear,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
@@ -98,11 +100,7 @@
       onclick={() => {
         value = '';
         inputElement?.focus();
-        globalThis.requestIdleCallback(() => {
-          inputElement?.dispatchEvent(new KeyboardEvent('input'));
-          inputElement?.dispatchEvent(new KeyboardEvent('keypress'));
-          inputElement?.dispatchEvent(new KeyboardEvent('change'));
-        });
+        onClear?.();
       }}
     >
       {#snippet startIcon()}
@@ -123,7 +121,8 @@
   margin: var(--sui-focus-ring-width);
   min-width: var(--sui-textbox-singleline-min-width);
 }
-.search-bar.flex {
+.search-bar.flex:not([hidden]) {
+  display: inline-flex;
   width: -moz-available;
   width: -webkit-fill-available;
   width: stretch;

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

@@ -24,6 +24,10 @@ declare const SearchBar: import("svelte").Component<TextInputProps & import("../
      * Close icon slot content.
      */
     closeIcon?: Snippet<[]> | undefined;
+    /**
+     * Callback invoked when the clear button is clicked.
+     */
+    onClear?: (() => void) | undefined;
 } & Record<string, any>, {
     focus: () => void;
 }, "value">;
@@ -40,6 +44,10 @@ type Props = {
      * Close icon slot content.
      */
     closeIcon?: Snippet<[]> | undefined;
+    /**
+     * Callback invoked when the clear button is clicked.
+     */
+    onClear?: (() => void) | undefined;
 };
 import type { TextInputProps } from '../../typedefs';
 import type { InputEventHandlers } from '../../typedefs';

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

@@ -0,0 +1,143 @@
+<!--
+  @component
+  Similar to `PasswordInput`, but it doesn’t use `type="password"` to hide the input value. Instead,
+  it relies on CSS to visually conceal the input to prevent password managers from prompting to save
+  the password.
+  @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-security
+-->
+<script>
+  import { _ } from 'svelte-i18n';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
+  import TextInput from './text-input.svelte';
+
+  /**
+   * @import { Snippet } from 'svelte';
+   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {string} [value] Input value.
+   * @property {Snippet} [visibilityIcon] Visibility icon slot content.
+   */
+
+  /**
+   * @type {TextInputProps & CommonEventHandlers & InputEventHandlers & Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(),
+    flex = false,
+    monospace = true,
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    visibilityIcon,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const id = $props.id();
+
+  /**
+   * Reference to the `<input>` element.
+   * @type {HTMLInputElement | undefined}
+   */
+  let inputElement = $state();
+  let show = $state(false);
+</script>
+
+<div
+  role="none"
+  class="sui secret-input {className}"
+  class:flex
+  class:disabled
+  class:readonly
+  class:show
+  {hidden}
+>
+  <TextInput
+    bind:element={inputElement}
+    {...restProps}
+    {id}
+    bind:value
+    spellcheck="false"
+    {flex}
+    {monospace}
+    {hidden}
+    {disabled}
+    {readonly}
+    {required}
+    {invalid}
+  />
+  <Button
+    iconic
+    disabled={disabled || readonly}
+    pressed={show}
+    aria-label={$_(show ? '_sui.secret_input.hide_secret' : '_sui.secret_input.show_secret')}
+    aria-controls={id}
+    onclick={() => {
+      show = !show;
+    }}
+  >
+    {#snippet startIcon()}
+      {#if visibilityIcon}
+        {@render visibilityIcon()}
+      {:else}
+        <Icon name={show ? 'visibility_off' : 'visibility'} />
+      {/if}
+    {/snippet}
+  </Button>
+</div>
+
+<style>.secret-input {
+  display: inline-flex;
+  align-items: center;
+  margin: var(--sui-focus-ring-width);
+  min-width: var(--sui-textbox-singleline-min-width);
+}
+.secret-input.flex:not([hidden]) {
+  display: inline-flex;
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: stretch;
+  min-width: 0;
+}
+.secret-input.show :global(input) {
+  -webkit-text-security: none;
+}
+.secret-input :global(.text-input) {
+  flex: auto;
+  margin: 0 !important;
+  width: 0;
+  min-width: 0 !important;
+}
+.secret-input :global(input) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  -webkit-text-security: disc;
+}
+.secret-input :global(button) {
+  flex: none;
+  margin-block: 0;
+  margin-inline-start: -1px;
+  margin-inline-end: 0;
+  border-width: 1px;
+  border-color: var(--sui-textbox-border-color);
+  width: var(--sui-textbox-height);
+  aspect-ratio: 1/1;
+}
+.secret-input :global(button:last-child) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 4px;
+  border-end-end-radius: 4px;
+  border-end-start-radius: 0;
+}
+.secret-input :global(button) :global(.icon) {
+  font-size: var(--sui-font-size-xx-large);
+}</style>

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

@@ -0,0 +1,34 @@
+export default SecretInput;
+type SecretInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>>): void;
+};
+/**
+ * Similar to `PasswordInput`, but it doesn’t use `type="password"` to hide the input value. Instead,
+ * it relies on CSS to visually conceal the input to prevent password managers from prompting to save
+ * the password.
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-security
+ */
+declare const SecretInput: import("svelte").Component<TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+    /**
+     * Input value.
+     */
+    value?: string | undefined;
+    /**
+     * Visibility icon slot content.
+     */
+    visibilityIcon?: Snippet<[]> | undefined;
+} & Record<string, any>, {}, "value">;
+type Props = {
+    /**
+     * Input value.
+     */
+    value?: string | undefined;
+    /**
+     * Visibility icon slot content.
+     */
+    visibilityIcon?: Snippet<[]> | undefined;
+};
+import type { TextInputProps } from '../../typedefs';
+import type { InputEventHandlers } from '../../typedefs';
+import type { Snippet } from 'svelte';

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

@@ -87,7 +87,8 @@
 .text-area[hidden] {
   display: none;
 }
-.text-area.flex {
+.text-area.flex:not([hidden]) {
+  display: inline-grid;
   width: -moz-available;
   width: -webkit-fill-available;
   width: stretch;

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

@@ -31,6 +31,7 @@
     inputmode = 'text',
     flex = false,
     monospace = false,
+    debounce = false,
     class: className,
     hidden = false,
     disabled = false,
@@ -39,11 +40,43 @@
     invalid = false,
     'aria-label': ariaLabel,
     children,
+    oninput,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 
   const id = $props.id();
+  const timeout = $derived(typeof debounce === 'number' ? debounce : 300);
+
+  let debounceTimer = 0;
+
+  $effect(() => () => {
+    clearTimeout(debounceTimer);
+  });
+
+  /**
+   * Update the `value` and call the `oninput` callback.
+   * @param {InputEvent} event The `input` event object.
+   */
+  const fireInput = (event) => {
+    value = /** @type {HTMLInputElement} */ (event.target).value;
+    oninput?.(event);
+  };
+
+  /**
+   * Handle the `input` event. If `debounce` is `true`, the event will be debounced by 300ms.
+   * @param {InputEvent} event The `input` event object.
+   */
+  const handleInput = (event) => {
+    if (debounce) {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        fireInput(event);
+      }, timeout);
+    } else {
+      fireInput(event);
+    }
+  };
 </script>
 
 <div
@@ -58,7 +91,7 @@
   <input
     bind:this={element}
     {...restProps}
-    bind:value
+    {value}
     type="text"
     {role}
     dir="auto"
@@ -73,6 +106,7 @@
     aria-readonly={readonly}
     aria-required={required}
     aria-invalid={invalid}
+    oninput={handleInput}
     use:activateKeyShortcuts={keyShortcuts}
   />
   {#if ariaLabel && showInlineLabel}
@@ -91,7 +125,8 @@
   margin: var(--sui-focus-ring-width);
   min-width: var(--sui-textbox-singleline-min-width);
 }
-.text-input.flex {
+.text-input.flex:not([hidden]) {
+  display: inline-flex;
   width: -moz-available;
   width: -webkit-fill-available;
   width: stretch;

package/dist/index.d.ts

@@ -67,6 +67,7 @@ export { default as TextEditor } from "./components/text-editor/text-editor.svel
 export { default as NumberInput } from "./components/text-field/number-input.svelte";
 export { default as PasswordInput } from "./components/text-field/password-input.svelte";
 export { default as SearchBar } from "./components/text-field/search-bar.svelte";
+export { default as SecretInput } from "./components/text-field/secret-input.svelte";
 export { default as TextArea } from "./components/text-field/text-area.svelte";
 export { default as TextInput } from "./components/text-field/text-input.svelte";
 export { default as Toast } from "./components/toast/toast.svelte";

package/dist/index.js

@@ -71,6 +71,7 @@ export { default as TextEditor } from './components/text-editor/text-editor.svel
 export { default as NumberInput } from './components/text-field/number-input.svelte';
 export { default as PasswordInput } from './components/text-field/password-input.svelte';
 export { default as SearchBar } from './components/text-field/search-bar.svelte';
+export { default as SecretInput } from './components/text-field/secret-input.svelte';
 export { default as TextArea } from './components/text-field/text-area.svelte';
 export { default as TextInput } from './components/text-field/text-input.svelte';
 export { default as Toast } from './components/toast/toast.svelte';

package/dist/locales/en.d.ts

@@ -35,6 +35,10 @@ export namespace strings {
         let show_password: string;
         let hide_password: string;
     }
+    namespace secret_input {
+        let show_secret: string;
+        let hide_secret: string;
+    }
     namespace select_tags {
         let selected_options: string;
         let remove_x: string;

package/dist/locales/en.js

@@ -35,6 +35,10 @@ export const strings = {
     show_password: 'Show Password',
     hide_password: 'Hide Password',
   },
+  secret_input: {
+    show_secret: 'Show Secret',
+    hide_secret: 'Hide Secret',
+  },
   select_tags: {
     selected_options: 'Selected options',
     remove_x: 'Remove {name}',

package/dist/locales/ja.d.ts

@@ -35,6 +35,10 @@ export namespace strings {
         let show_password: string;
         let hide_password: string;
     }
+    namespace secret_input {
+        let show_secret: string;
+        let hide_secret: string;
+    }
     namespace select_tags {
         let selected_options: string;
         let remove_x: string;

package/dist/locales/ja.js

@@ -35,6 +35,10 @@ export const strings = {
     show_password: 'パスワードを表示',
     hide_password: 'パスワードを隠す',
   },
+  secret_input: {
+    show_secret: 'シークレットを表示',
+    hide_secret: 'シークレットを隠す',
+  },
   select_tags: {
     selected_options: '選択済みのオプション',
     remove_x: '{name} を削除',

package/dist/typedefs.d.ts

@@ -448,6 +448,13 @@ export type TextInputProps = {
      * Whether to use a monospace font for the input text.
      */
     monospace?: boolean | undefined;
+    /**
+     * Whether to debounce the `input` event. If `true`, the
+     * `input` event will be debounced by 300ms. If a number is provided, it will be used as the
+     * debounce delay in milliseconds. This is useful for performance optimization when the input event
+     * triggers expensive operations like API calls. Default: `false`.
+     */
+    debounce?: number | boolean | undefined;
     /**
      * The `class` attribute on the wrapper element.
      */

package/dist/typedefs.js

@@ -159,6 +159,10 @@
  * `inputmode` attribute on the `<input>`.
  * @property {boolean} [flex] Make the text input container flexible.
  * @property {boolean} [monospace] Whether to use a monospace font for the input text.
+ * @property {boolean | number} [debounce] Whether to debounce the `input` event. If `true`, the
+ * `input` event will be debounced by 300ms. If a number is provided, it will be used as the
+ * debounce delay in milliseconds. This is useful for performance optimization when the input event
+ * triggers expensive operations like API calls. Default: `false`.
  * @property {string} [class] The `class` attribute on the wrapper element.
  * @property {boolean} [hidden] Whether to hide the widget.
  * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.33.1",
+  "version": "0.35.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.53.4",
+    "@sveltejs/kit": "^2.54.0",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@vitest/coverage-v8": "^4.0.18",
@@ -40,17 +40,17 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsdoc": "^62.7.1",
     "eslint-plugin-svelte": "^2.46.1",
-    "oxlint": "^1.51.0",
+    "oxlint": "^1.53.0",
     "postcss": "^8.5.8",
     "postcss-html": "^1.8.1",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.5.1",
-    "sass": "^1.97.3",
+    "sass": "^1.98.0",
     "stylelint": "^17.4.0",
     "stylelint-config-recommended-scss": "^17.0.0",
     "stylelint-scss": "^7.0.0",
-    "svelte": "^5.53.7",
-    "svelte-check": "^4.4.4",
+    "svelte": "^5.53.11",
+    "svelte-check": "^4.4.5",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
     "vite": "^7.3.1",