@sveltia/ui 0.22.1 → 0.22.3

package/dist/components/checkbox/checkbox.svelte

@@ -179,7 +179,7 @@
   color: var(--sui-error-foreground-color);
 }
 .checkbox :global(button[aria-checked="true"][aria-invalid="true"]) {
-  background-color: var(--sui-error-background-color);
+  background-color: var(--sui-checkbox-background-color);
 }
 .checkbox label {
   cursor: inherit;

package/dist/components/select/combobox.svelte

@@ -182,7 +182,7 @@
   {position}
   touchOptimized={true}
   bind:open={isPopupOpen}
-  onopen={() => {
+  onOpen={() => {
     showFilter = (popupContent?.querySelectorAll('[role="option"]')?.length ?? 0) > 5;
     searchTerms = '';
   }}
@@ -284,7 +284,6 @@
 }
 .combobox div[role=combobox][aria-invalid=true] {
   border-color: var(--sui-error-border-color);
-  background-color: var(--sui-error-background-color);
 }
 .combobox div[role=combobox] .label {
   display: block;

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

@@ -6,6 +6,7 @@
 -->
 <script>
   import { generateElementId } from '@sveltia/utils/element';
+  import { untrack } from 'svelte';
   import { _ } from 'svelte-i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
@@ -55,6 +56,16 @@
   const isMin = $derived(typeof min === 'number' && Number(inputValue || 0) <= min);
   const isMax = $derived(typeof max === 'number' && Number(inputValue || 0) >= max);
 
+  $effect(() => {
+    const newInputValue = String(value ?? '');
+
+    untrack(() => {
+      if (inputValue !== newInputValue) {
+        inputValue = newInputValue;
+      }
+    });
+  });
+
   $effect(() => {
     const newValue = inputValue.trim() ? Number(inputValue) : NaN;
 

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

@@ -98,9 +98,7 @@
   {@render children?.()}
 </div>
 
-<style>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Noto+Sans+Mono:wght@100..900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
-:global(:root),
+<style>:global(:root),
 :global(:host) {
   --sui-base-hue: 210;
   --sui-highlight-foreground-color: hsl(var(--sui-foreground-color-1-hsl));

package/dist/styles/core.scss

@@ -1,11 +1,5 @@
 @use "variables.scss";
 
-// https://fonts.google.com/share?selection.family=Merriweather+Sans:ital,wght@0,300..800;1,300..800|Noto+Sans+Mono:wght@100..900
-@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Noto+Sans+Mono:wght@100..900&display=swap");
-// https://fonts.google.com/icons?icon.set=Material+Symbols
-// Use `font-display: block;` @see https://stackoverflow.com/q/41710834
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
-
 :global {
   .material-symbols-outlined {
     font-variation-settings:

package/dist/typedefs.d.ts

@@ -387,10 +387,10 @@ export type TextInputProps = {
      */
     element?: HTMLInputElement | undefined;
     /**
-     * - The `role` attribute on
-     * the `<input>` element.
+     * - The `role`
+     * attribute on the `<input>` element.
      */
-    role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
+    role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | "gridcell" | undefined;
     /**
      * - Keyboard shortcuts. An alias of the
      * `aria-keyshortcuts` attribute. Accepts the special `Accel` key, which will be replaced with

package/dist/typedefs.js

@@ -130,8 +130,8 @@
 /**
  * @typedef {object} TextInputProps
  * @property {HTMLInputElement} [element] - Reference to the `<input>` element.
- * @property {'textbox' | 'searchbox' | 'combobox' | 'spinbutton'} [role] - The `role` attribute on
- * the `<input>` element.
+ * @property {'textbox' | 'searchbox' | 'combobox' | 'spinbutton' | 'gridcell'} [role] - The `role`
+ * attribute on the `<input>` element.
  * @property {string} [keyShortcuts] - 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.22.1",
+  "version": "0.22.3",
   "license": "MIT",
   "type": "module",
   "repository": {