@sveltia/ui 0.22.2 → 0.22.4

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/text-input.svelte

@@ -62,6 +62,7 @@
     disabled={disabled || undefined}
     readonly={readonly || undefined}
     {inputmode}
+    aria-label={ariaLabel}
     aria-hidden={hidden}
     aria-disabled={disabled}
     aria-readonly={readonly}

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

@@ -26,8 +26,8 @@
   } = $props();
 
   const stylesheets = [
-    // https://fonts.google.com/share?selection.family=Merriweather%20Sans:ital,wght@0,300;0,600;1,300%7CNoto%20Sans%20Mono
-    'https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap',
+    // https://fonts.google.com/share?selection.family=Merriweather+Sans:ital,wght@0,300..800;1,300..800|Noto+Sans+Mono:wght@100..900
+    '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
     'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block',
@@ -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.2",
+  "version": "0.22.4",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -48,7 +48,7 @@
   "devDependencies": {
     "@playwright/test": "^1.49.1",
     "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.15.0",
+    "@sveltejs/kit": "^2.15.1",
     "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "5.0.3",
     "cspell": "^8.17.1",
@@ -66,12 +66,12 @@
     "stylelint": "^16.12.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-scss": "^6.10.0",
-    "svelte": "5.15.0",
+    "svelte": "5.16.0",
     "svelte-check": "^4.1.1",
     "svelte-i18n": "^4.0.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^6.0.5",
+    "vite": "^6.0.6",
     "vitest": "^2.1.8"
   },
   "exports": {