@sveltia/ui 0.37.3 → 0.38.0

package/dist/components/listbox/option.svelte

@@ -66,7 +66,7 @@
     }}
     onToggle={(event) => {
       hidden = event.detail.hidden;
-      selected = false;
+      if (hidden) selected = false;
       onToggle?.(event);
     }}
   >

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

@@ -15,6 +15,7 @@
    * @typedef {object} Props
    * @property {string} [value] Input value.
    * @property {boolean} [flex] Make the text input container flexible.
+   * @property {'ltr' | 'rtl' | 'auto'} [dir] The `dir` attribute on the `<textarea>` element.
    * @property {string} [name] The `name` attribute on the `<textarea>` element.
    * @property {boolean} [autoResize] Whether to automatically resize the `<textarea>` based on the
    * content.
@@ -38,6 +39,7 @@
     /* eslint-disable prefer-const */
     value = $bindable(''),
     flex = false,
+    dir = undefined,
     name = undefined,
     autoResize = false,
     class: className,
@@ -62,9 +64,9 @@
 >
   <textarea
     {...restProps}
+    {dir}
     {name}
     bind:value
-    dir="auto"
     disabled={disabled || undefined}
     readonly={readonly || undefined}
     aria-hidden={hidden}
@@ -75,7 +77,7 @@
     class:auto-resize={autoResize}
   ></textarea>
   {#if autoResize}
-    <div class="clone" aria-hidden="true">{value}</div>
+    <div class="clone" aria-hidden="true" {dir}>{value}</div>
   {/if}
 </div>
 

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

@@ -18,6 +18,10 @@ declare const TextArea: import("svelte").Component<import("../../typedefs").Keyb
      * Make the text input container flexible.
      */
     flex?: boolean | undefined;
+    /**
+     * The `dir` attribute on the `<textarea>` element.
+     */
+    dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * The `name` attribute on the `<textarea>` element.
      */
@@ -69,6 +73,10 @@ type Props = {
      * Make the text input container flexible.
      */
     flex?: boolean | undefined;
+    /**
+     * The `dir` attribute on the `<textarea>` element.
+     */
+    dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * The `name` attribute on the `<textarea>` element.
      */

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

@@ -26,6 +26,7 @@
     element = $bindable(),
     role = 'textbox',
     keyShortcuts = undefined,
+    dir = undefined,
     name = undefined,
     showInlineLabel = false,
     inputmode = 'text',
@@ -102,8 +103,8 @@
     {value}
     type="text"
     {role}
-    dir="auto"
-    name={name || undefined}
+    {dir}
+    {name}
     tabindex={disabled ? -1 : 0}
     disabled={disabled || undefined}
     readonly={readonly || undefined}

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

@@ -207,14 +207,14 @@
   --sui-font-size-default: 14px;
   --sui-font-size-small: 12px;
   --sui-font-size-x-small: 10px;
-  --sui-font-weight-normal: 325;
-  --sui-font-weight-bold: 625;
+  --sui-font-weight-normal: 300;
+  --sui-font-weight-bold: 600;
   --sui-font-family-monospace: "Noto Sans Mono", monospace;
   --sui-font-size-monospace: 0.95em;
   --sui-line-height-default: 1.25;
   --sui-line-height-compact: 1.5;
   --sui-line-height-comfortable: 1.75;
-  --sui-word-spacing-normal: 0.1ex;
+  --sui-word-spacing-normal: 1px;
   --sui-heading-margin: 0;
   --sui-heading-font-family: var(--sui-font-family-default);
   --sui-heading-font-weight: var(--sui-font-weight-bold);

package/dist/styles/variables.scss

@@ -159,14 +159,14 @@
     --sui-font-size-default: 14px;
     --sui-font-size-small: 12px;
     --sui-font-size-x-small: 10px;
-    --sui-font-weight-normal: 325; // Merriweather Sans is a little bit bold, so we need to adjust the weight
-    --sui-font-weight-bold: 625; // ditto
+    --sui-font-weight-normal: 300; // Merriweather Sans is a little bit bold, so we need to adjust the weight
+    --sui-font-weight-bold: 600; // ditto
     --sui-font-family-monospace: "Noto Sans Mono", monospace;
     --sui-font-size-monospace: 0.95em;
     --sui-line-height-default: 1.25;
     --sui-line-height-compact: 1.5;
     --sui-line-height-comfortable: 1.75;
-    --sui-word-spacing-normal: 0.1ex;
+    --sui-word-spacing-normal: 1px;
     --sui-heading-margin: 0;
     --sui-heading-font-family: var(--sui-font-family-default);
     --sui-heading-font-weight: var(--sui-font-weight-bold);

package/dist/typedefs.d.ts

@@ -426,6 +426,10 @@ export type TextInputProps = {
      * depending on the user’s operating system.
      */
     keyShortcuts?: string | undefined;
+    /**
+     * The `dir` attribute on the `<input>` element.
+     */
+    dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * The `name` attribute on the `<input>` element.
      */

package/dist/typedefs.js

@@ -152,6 +152,7 @@
  * @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.
+ * @property {'ltr' | 'rtl' | 'auto'} [dir] The `dir` attribute on the `<input>` element.
  * @property {string} [name] The `name` attribute on the `<input>` element.
  * @property {boolean} [showInlineLabel] Whether to display `aria-label` over the `<input>` element
  * if it’s empty, just like how the HTML `placeholder` attribute works.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.37.3",
+  "version": "0.38.0",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -49,13 +49,13 @@
     "@sveltia/utils": "^0.10.6",
     "lexical": "^0.44.0",
     "prismjs": "^1.30.0",
-    "yaml": "^2.8.3"
+    "yaml": "^2.8.4"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.58.0",
+    "@sveltejs/kit": "^2.59.1",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@vitest/coverage-v8": "^4.1.5",
     "cspell": "^10.0.0",
     "eslint": "^9.39.4",
@@ -65,22 +65,22 @@
     "eslint-plugin-jsdoc": "^62.9.0",
     "eslint-plugin-package-json": "^0.91.2",
     "eslint-plugin-svelte": "^3.17.1",
-    "globals": "^17.5.0",
+    "globals": "^17.6.0",
     "happy-dom": "^20.9.0",
-    "oxlint": "^1.62.0",
-    "postcss": "^8.5.12",
+    "oxlint": "^1.63.0",
+    "postcss": "^8.5.14",
     "postcss-html": "^1.8.1",
     "prettier": "^3.8.3",
     "prettier-plugin-svelte": "^3.5.1",
     "sass": "^1.99.0",
-    "stylelint": "^17.9.1",
+    "stylelint": "^17.11.0",
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.0.0",
     "svelte": "^5.55.5",
-    "svelte-check": "^4.4.6",
+    "svelte-check": "^4.4.8",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^8.0.10",
+    "vite": "^8.0.11",
     "vitest": "^4.1.5"
   },
   "peerDependencies": {