@sveltia/ui 0.27.9 → 0.28.1

package/dist/components/dialog/dialog.svelte.d.ts

@@ -8,6 +8,6 @@ type Dialog = {
  * @see https://w3c.github.io/aria/#dialog
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
-declare const Dialog: import("svelte").Component<ModalProps & DialogProps & Record<string, any>, {}, "value" | "open">;
+declare const Dialog: import("svelte").Component<ModalProps & DialogProps & Record<string, any>, {}, "open" | "value">;
 import type { ModalProps } from '../../typedefs';
 import type { DialogProps } from '../../typedefs';

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

@@ -27,7 +27,7 @@ declare const PromptDialog: import("svelte").Component<ModalProps & DialogProps
      * Input slot content.
      */
     input?: Snippet<[]> | undefined;
-} & Record<string, any>, {}, "value" | "open">;
+} & Record<string, any>, {}, "open" | "value">;
 type Props = {
     /**
      * Value entered on the textbox.

package/dist/components/slider/slider.svelte.d.ts

@@ -83,7 +83,7 @@ declare const Slider: import("svelte").Component<{
         values?: number[];
         value?: number;
     }) => void) | undefined;
-} & Record<string, any>, {}, "value" | "values">;
+} & Record<string, any>, {}, "values" | "value">;
 type Props = {
     /**
      * Current value.

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

@@ -40,7 +40,7 @@
   let {
     /* eslint-disable prefer-const */
     code = $bindable(''),
-    lang = $bindable(''),
+    lang = $bindable('plain'),
     showLanguageSwitcher = false,
     flex = false,
     hidden = false,
@@ -85,7 +85,7 @@
     void editorStore.inputValue;
 
     untrack(() => {
-      const { lang: _lang = '', code: _code = '' } =
+      const { lang: _lang = 'plain', code: _code = '' } =
         editorStore.inputValue.match(/^```(?<lang>\w+?)?\n(?:(?<code>.*)\n)?```/s)?.groups ?? {};
 
       if (lang !== _lang) {

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

@@ -1,4 +1,4 @@
-export function initEditor({ components, isCodeEditor, defaultLanguage }: TextEditorConfig): LexicalEditor;
+export function initEditor({ components, isCodeEditor, defaultLanguage, }: TextEditorConfig): LexicalEditor;
 export function loadCodeHighlighter(lang: string): Promise<void>;
 export function convertMarkdownToLexical(editor: LexicalEditor, value: string): Promise<void>;
 export function focusEditor(editor: LexicalEditor): Promise<void>;

package/dist/components/text-editor/core.js

@@ -1,6 +1,7 @@
 import {
   CodeHighlightNode,
   CodeNode,
+  PrismTokenizer,
   $createCodeNode as createCodeNode,
   $isCodeHighlightNode as isCodeHighlightNode,
   $isCodeNode as isCodeNode,
@@ -233,7 +234,11 @@ const onEditorUpdate = (editor) => {
  * @param {TextEditorConfig} config Editor configuration.
  * @returns {LexicalEditor} Editor instance.
  */
-export const initEditor = ({ components = [], isCodeEditor = false, defaultLanguage = '' }) => {
+export const initEditor = ({
+  components = [],
+  isCodeEditor = false,
+  defaultLanguage = 'plain',
+}) => {
   components.forEach(({ node, transformer }) => {
     /** @type {any[]} */ (editorConfig.nodes).unshift(node);
     allTransformers.unshift(transformer);
@@ -250,6 +255,7 @@ export const initEditor = ({ components = [], isCodeEditor = false, defaultLangu
     // eslint-disable-next-line jsdoc/require-jsdoc
     tokenize: (code, lang = 'plain') =>
       window.Prism.tokenize(code, window.Prism.languages[lang] ?? window.Prism.languages.plain),
+    $tokenize: PrismTokenizer.$tokenize,
   });
 
   editor.registerCommand(
@@ -391,7 +397,7 @@ export const loadCodeHighlighter = async (lang) => {
 export const convertMarkdownToLexical = async (editor, value) => {
   // Load Prism language support on demand; the `loadLanguages` Prism utility method cannot be used
   await Promise.all(
-    [...value.matchAll(/^```(?<lang>.+?)\n/gm)].map(async ({ groups: { lang } = {} }) =>
+    [...value.matchAll(/^```(?<lang>.+?)\n/gm)].map(async ({ groups: { lang = 'plain' } = {} }) =>
       loadCodeHighlighter(lang),
     ),
   );

package/dist/components/text-editor/toolbar/code-language-switcher.svelte

@@ -46,7 +46,7 @@
   /** @type {TextEditorStore} */
   const editorStore = getContext('editorStore');
 
-  let selectedLanguage = $state('');
+  let selectedLanguage = $state('plain');
 
   $effect(() => {
     void editorStore.selection.blockNodeKey;
@@ -57,7 +57,7 @@
         : getNodeByKey(/** @type {string} */ (editorStore.selection.blockNodeKey));
 
       if (isCodeNode(node)) {
-        selectedLanguage = node.getLanguage() ?? editorStore.config.defaultLanguage ?? '';
+        selectedLanguage = node.getLanguage() ?? editorStore.config.defaultLanguage ?? 'plain';
       }
     });
   });
@@ -89,7 +89,7 @@
     }
   }}
 >
-  <Option label={$_('_sui.text_editor.plain_text')} value="" />
+  <Option label={$_('_sui.text_editor.plain_text')} value="plain" />
   {#each codeLanguages as { key, label, aliases } (key)}
     <Option
       {label}

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

@@ -20,7 +20,7 @@
   let {
     /* eslint-disable prefer-const */
     code = $bindable(''),
-    lang = $bindable(''),
+    lang = $bindable('plain'),
     disabled = false,
     children,
     ...restProps

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

@@ -29,6 +29,7 @@
     /* eslint-disable prefer-const */
     value = $bindable(),
     flex = false,
+    monospace = true,
     class: className,
     hidden = false,
     disabled = false,
@@ -71,6 +72,7 @@
     type="password"
     spellcheck="false"
     {flex}
+    {monospace}
     {hidden}
     {disabled}
     {readonly}

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

@@ -9,7 +9,6 @@
   import TruncatedText from '../typography/truncated-text.svelte';
 
   /**
-   * @import { Snippet } from 'svelte';
    * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs';
    */
 
@@ -31,6 +30,7 @@
     showInlineLabel = false,
     inputmode = 'text',
     flex = false,
+    monospace = false,
     class: className,
     hidden = false,
     disabled = false,
@@ -50,6 +50,7 @@
   role="none"
   class="sui text-input {className}"
   class:flex
+  class:monospace
   class:disabled
   class:readonly
   {hidden}
@@ -96,6 +97,9 @@
   width: stretch;
   min-width: 0;
 }
+.text-input.monospace {
+  --sui-textbox-font-family: var(--sui-font-family-monospace, monospace);
+}
 
 input:is(:-webkit-autofill, :-webkit-autofill:focus) {
   transition: background-color 0s 600000s, color 0s 600000s;

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

@@ -13,7 +13,7 @@ declare const TextInput: import("svelte").Component<TextInputProps & import("../
      * Input value.
      */
     value?: string | undefined;
-} & Record<string, any>, {}, "value" | "element">;
+} & Record<string, any>, {}, "element" | "value">;
 type Props = {
     /**
      * Input value.

package/dist/index.d.ts

@@ -1,7 +1,3 @@
-export function initLocales({ fallbackLocale, initialLocale }?: {
-    fallbackLocale?: string | undefined;
-    initialLocale?: string | undefined;
-} | undefined): void;
 export { default as Alert } from "./components/alert/alert.svelte";
 export { default as Infobar } from "./components/alert/infobar.svelte";
 export { default as BottomNavigation } from "./components/bottom-navigation/bottom-navigation.svelte";
@@ -77,4 +73,6 @@ export { default as AppShell } from "./components/util/app-shell.svelte";
 export { default as EmptyState } from "./components/util/empty-state.svelte";
 export { default as Group } from "./components/util/group.svelte";
 export { default as Modal } from "./components/util/modal.svelte";
+export { initLocales };
 export * from "./typedefs";
+import { initLocales } from './services/i18n';

package/dist/index.js

@@ -1,29 +1,4 @@
-import { addMessages, init } from 'svelte-i18n';
-
-/**
- * Load strings and initialize the locales.
- * @param {object} [init] Initialize options.
- * @param {string} [init.fallbackLocale] Fallback locale.
- * @param {string} [init.initialLocale] Initial locale.
- * @see https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md
- * @see https://vitejs.dev/guide/features.html#glob-import
- */
-export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}) => {
-  /** @type {{ [key: string]: { strings: object }}} */
-  const modules = import.meta.glob('./locales/*.js', { eager: true });
-
-  Object.entries(modules).forEach(([path, { strings }]) => {
-    const [, locale] = /** @type {string[]} */ (path.match(/([a-zA-Z-]+)\.js/));
-
-    // Add `_sui` suffix to avoid collision with app localization
-    addMessages(locale, /** @type {any} */ ({ _sui: strings }));
-  });
-
-  init({
-    fallbackLocale,
-    initialLocale,
-  });
-};
+import { initLocales } from './services/i18n';
 
 initLocales();
 
@@ -102,5 +77,7 @@ export { default as AppShell } from './components/util/app-shell.svelte';
 export { default as EmptyState } from './components/util/empty-state.svelte';
 export { default as Group } from './components/util/group.svelte';
 export { default as Modal } from './components/util/modal.svelte';
+export { initLocales };
 
-// eslint-disable-next-line import/export export * from './typedefs';
+// eslint-disable-next-line import/export
+export * from './typedefs';

package/dist/services/i18n.d.ts

@@ -0,0 +1,4 @@
+export function initLocales({ fallbackLocale, initialLocale }?: {
+    fallbackLocale?: string | undefined;
+    initialLocale?: string | undefined;
+} | undefined): void;

package/dist/services/i18n.js

@@ -0,0 +1,47 @@
+import { addMessages, locale as appLocale, init } from 'svelte-i18n';
+
+/**
+ * Load strings and initialize the locales.
+ * @param {object} [init] Initialize options.
+ * @param {string} [init.fallbackLocale] Fallback locale.
+ * @param {string} [init.initialLocale] Initial locale.
+ * @see https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md
+ * @see https://vitejs.dev/guide/features.html#glob-import
+ */
+export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}) => {
+  /** @type {{ [key: string]: { strings: object }}} */
+  const modules = import.meta.glob('../locales/*.js', { eager: true });
+
+  Object.entries(modules).forEach(([path, { strings }]) => {
+    const [, locale] = /** @type {string[]} */ (path.match(/([a-zA-Z-]+)\.js/));
+
+    // Add `_sui` suffix to avoid collision with app localization
+    addMessages(locale, /** @type {any} */ ({ _sui: strings }));
+  });
+
+  init({
+    fallbackLocale,
+    initialLocale,
+  });
+};
+
+/**
+ * List of RTL locales: Arabic, Persian, Hebrew, Urdu.
+ */
+const RTL_LOCALES = ['ar', 'fa', 'he', 'ur'];
+
+/**
+ * Get the text direction of the given locale.
+ * @param {string | null | undefined} locale Locale code.
+ * @returns {'rtl' | 'ltr'} Text direction.
+ */
+const getDirection = (locale) =>
+  locale && RTL_LOCALES.includes(locale.split('-')[0]) ? 'rtl' : 'ltr';
+
+if (!import.meta.env.SSR) {
+  // Set the `dir` attribute on the HTML element based on the current locale.
+  // @todo Move this to Sveltia UI and then Sveltia I18N
+  appLocale.subscribe((value) => {
+    document.documentElement.dir = getDirection(value);
+  });
+}

package/dist/typedefs.d.ts

@@ -444,6 +444,10 @@ export type TextInputProps = {
      * Make the text input container flexible.
      */
     flex?: boolean | undefined;
+    /**
+     * Whether to use a monospace font for the input text.
+     */
+    monospace?: boolean | undefined;
     /**
      * The `class` attribute on the wrapper element.
      */

package/dist/typedefs.js

@@ -158,6 +158,7 @@
  * @property {'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'} [inputmode] The
  * `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 {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.27.9",
+  "version": "0.28.1",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -29,49 +29,49 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@lexical/code": "^0.33.1",
-    "@lexical/dragon": "^0.33.1",
-    "@lexical/history": "^0.33.1",
-    "@lexical/link": "^0.33.1",
-    "@lexical/list": "^0.33.1",
-    "@lexical/markdown": "^0.33.1",
-    "@lexical/rich-text": "^0.33.1",
-    "@lexical/selection": "^0.33.1",
-    "@lexical/table": "^0.33.1",
-    "@lexical/utils": "^0.33.1",
+    "@lexical/code": "^0.35.0",
+    "@lexical/dragon": "^0.35.0",
+    "@lexical/history": "^0.35.0",
+    "@lexical/link": "^0.35.0",
+    "@lexical/list": "^0.35.0",
+    "@lexical/markdown": "^0.35.0",
+    "@lexical/rich-text": "^0.35.0",
+    "@lexical/selection": "^0.35.0",
+    "@lexical/table": "^0.35.0",
+    "@lexical/utils": "^0.35.0",
     "@sveltia/utils": "^0.8.0",
-    "lexical": "^0.33.1",
-    "prismjs": "^1.30.0"
+    "lexical": "^0.35.0",
+    "prismjs": "^1.30.0",
+    "svelte-i18n": "^4.0.1"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^6.0.1",
-    "@sveltejs/kit": "^2.27.0",
-    "@sveltejs/package": "^2.4.0",
-    "@sveltejs/vite-plugin-svelte": "6.1.0",
-    "cspell": "^9.2.0",
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@sveltejs/kit": "^2.39.1",
+    "@sveltejs/package": "^2.5.1",
+    "@sveltejs/vite-plugin-svelte": "6.2.0",
+    "cspell": "^9.2.1",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^52.0.2",
+    "eslint-plugin-jsdoc": "^57.0.7",
     "eslint-plugin-svelte": "^2.46.1",
     "postcss": "^8.5.6",
     "postcss-html": "^1.8.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "sass": "^1.89.2",
-    "stylelint": "^16.23.0",
-    "stylelint-config-recommended-scss": "^15.0.1",
+    "sass": "^1.92.1",
+    "stylelint": "^16.24.0",
+    "stylelint-config-recommended-scss": "^16.0.1",
     "stylelint-scss": "^6.12.1",
-    "svelte": "5.37.3",
+    "svelte": "5.38.10",
     "svelte-check": "^4.3.1",
-    "svelte-i18n": "^4.0.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^7.0.6",
+    "vite": "^7.1.5",
     "vitest": "^3.2.4"
   },
   "exports": {