@sveltia/ui 0.37.4 → 0.39.0

package/dist/components/dialog/prompt-dialog.svelte

@@ -55,6 +55,7 @@
       {@render input()}
     {:else}
       <TextInput
+        dir="auto"
         bind:value
         flex
         autofocus

package/dist/components/select/combobox.svelte

@@ -144,6 +144,7 @@
   {:else}
     <TextInput
       {...restProps}
+      dir="auto"
       bind:element={inputElement}
       role="combobox"
       {id}

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

@@ -27,6 +27,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 {TextEditorMode[]} [modes] Enabled modes.
    * @property {(TextEditorBlockType | TextEditorInlineType)[]} [buttons] Enabled buttons.
    * @property {TextEditorComponent[]} [components] Editor components.
@@ -50,6 +51,7 @@
     /* eslint-disable prefer-const */
     value = $bindable(''),
     flex = false,
+    dir = undefined,
     modes = ['rich-text', 'plain-text'],
     buttons = [...INLINE_BUTTON_TYPES, ...BLOCK_BUTTON_TYPES],
     components = [],
@@ -110,6 +112,7 @@
     autoResize={true}
     bind:value={editorStore.inputValue}
     {flex}
+    {dir}
     hidden={editorStore.useRichText || hidden}
     {disabled}
     {readonly}

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

@@ -13,6 +13,10 @@ declare const TextEditor: import("svelte").Component<{
      * Make the text input container flexible.
      */
     flex?: boolean | undefined;
+    /**
+     * The `dir` attribute on the `<textarea>` element.
+     */
+    dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * Enabled modes.
      */
@@ -67,6 +71,10 @@ type Props = {
      * Make the text input container flexible.
      */
     flex?: boolean | undefined;
+    /**
+     * The `dir` attribute on the `<textarea>` element.
+     */
+    dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * Enabled modes.
      */

package/dist/components/text-editor/toolbar/insert-link-button.svelte

@@ -216,6 +216,7 @@
   <div role="none">
     <label for="{id}-url">{_('_sui.text_editor.url')}</label>
     <TextInput
+      dir="ltr"
       id="{id}-url"
       bind:value={anchorURL}
       flex
@@ -229,6 +230,7 @@
     <div role="none">
       <label for="{id}-text">{_('_sui.text_editor.text')}</label>
       <TextInput
+        dir="auto"
         id="{id}-text"
         bind:value={anchorText}
         flex

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

@@ -156,6 +156,7 @@
     </Button>
   </div>
   <TextInput
+    dir="ltr"
     {...restProps}
     role="spinbutton"
     {id}

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

@@ -65,6 +65,7 @@
   {hidden}
 >
   <TextInput
+    dir="ltr"
     bind:element={inputElement}
     {...restProps}
     {id}

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

@@ -79,6 +79,7 @@
     {/if}
   </span>
   <TextInput
+    dir="auto"
     bind:element={inputElement}
     {...restProps}
     role="searchbox"

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

@@ -62,6 +62,7 @@
   {hidden}
 >
   <TextInput
+    dir="ltr"
     bind:element={inputElement}
     {...restProps}
     {id}

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.4",
+  "version": "0.39.0",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
     "@lexical/selection": "^0.44.0",
     "@lexical/table": "^0.44.0",
     "@lexical/utils": "^0.44.0",
-    "@sveltia/i18n": "^1.0.5",
+    "@sveltia/i18n": "^1.1.0",
     "@sveltia/utils": "^0.10.6",
     "lexical": "^0.44.0",
     "prismjs": "^1.30.0",
@@ -53,9 +53,9 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.59.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",
@@ -67,20 +67,20 @@
     "eslint-plugin-svelte": "^3.17.1",
     "globals": "^17.6.0",
     "happy-dom": "^20.9.0",
-    "oxlint": "^1.62.0",
-    "postcss": "^8.5.13",
+    "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.7",
+    "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": {