@sveltia/ui 0.34.0 → 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

@@ -121,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/secret-input.svelte

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

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/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.34.0",
+  "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",