@sveltia/ui 0.45.0 → 0.47.0

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

@@ -39,18 +39,25 @@ import {
   registerRichText,
 } from '@lexical/rich-text';
 import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
-import { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
+import { $getNearestNodeOfType as getNearestNodeOfType, objectKlassEquals } from '@lexical/utils';
 import { sleep } from '@sveltia/utils/misc';
+import { isURL } from '@sveltia/utils/string';
 import {
+  COMMAND_PRIORITY_LOW,
   COMMAND_PRIORITY_NORMAL,
   createEditor,
+  $createTextNode as createTextNode,
   ElementNode,
   $getRoot as getRoot,
   $getSelection as getSelection,
   INDENT_CONTENT_COMMAND,
   INSERT_PARAGRAPH_COMMAND,
+  $insertNodes as insertNodes,
+  $isElementNode as isElementNode,
   $isRangeSelection as isRangeSelection,
+  $isTextNode as isTextNode,
   OUTDENT_CONTENT_COMMAND,
+  PASTE_COMMAND,
 } from 'lexical';
 import prismComponents from 'prismjs/components';
 import {
@@ -269,6 +276,7 @@ export const initEditor = ({
     );
   }
 
+  // https://github.com/facebook/lexical/blob/main/packages/lexical-link/src/LexicalLinkExtension.ts
   if (enabledButtons.includes('link')) {
     addUnregister(
       editor.registerCommand(
@@ -281,6 +289,47 @@ export const initEditor = ({
         COMMAND_PRIORITY_NORMAL,
       ),
     );
+
+    addUnregister(
+      editor.registerCommand(
+        PASTE_COMMAND,
+        (event) => {
+          const selection = getSelection();
+
+          if (
+            !isRangeSelection(selection) ||
+            !objectKlassEquals(event, ClipboardEvent) ||
+            !event.clipboardData ||
+            /** @type {HTMLElement} */ (event.target).matches('input, textarea')
+          ) {
+            return false;
+          }
+
+          const clipboardText = event.clipboardData.getData('text').trim();
+
+          if (!isURL(clipboardText)) {
+            return false;
+          }
+
+          if (selection.isCollapsed()) {
+            insertNodes([createTextNode(clipboardText)]);
+          }
+
+          if (
+            !selection
+              .getNodes()
+              .some((node) => isElementNode(node) || (isTextNode(node) && !node.isSimpleText()))
+          ) {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, clipboardText);
+            event.preventDefault();
+            return true;
+          }
+
+          return false;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+    );
   }
 
   if (enabledButtons.includes('bulleted-list')) {

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

@@ -136,7 +136,7 @@
   border: 1px solid var(--sui-textbox-border-color);
   border-radius: var(--sui-textbox-border-radius) !important;
   padding: var(--sui-textbox-multiline-padding);
-  min-height: 8em;
+  min-height: 120px;
   color: var(--sui-textbox-foreground-color);
   background-color: var(--sui-textbox-background-color);
   font-family: var(--sui-textbox-font-family);

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

@@ -138,14 +138,7 @@
           if (!hasAnchor) {
             anchorText = anchorText.trim();
             anchorText ||= anchorURL;
-
-            const { anchor, focus } = /** @type {RangeSelection} */ (_selection);
-            const node = createTextNode(anchorText);
-            const key = node.getKey();
-
-            insertNodes([node]);
-            anchor.set(key, anchorText.length, 'text');
-            focus.set(key, 0, 'text');
+            insertNodes([createTextNode(anchorText)]);
           }
 
           setSelection(_selection);

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

@@ -6,6 +6,7 @@
 -->
 <script>
   import { onMount } from 'svelte';
+  import FontLinks from './font-links.svelte';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -28,14 +29,6 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  const stylesheets = [
-    // 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',
-  ];
-
   let fontLoaded = $state(false);
 
   onMount(() => {
@@ -80,12 +73,7 @@
     ].join(', ')}
   />
   <meta name="google" content="notranslate" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
-  {#each stylesheets as href (href)}
-    <link rel="preload" {href} as="style" />
-    <link rel="stylesheet" {href} />
-  {/each}
+  <FontLinks />
 </svelte:head>
 
 {#if !fontLoaded}
@@ -200,21 +188,21 @@
   );
   --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
   --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
-  --sui-font-family-default: "Merriweather Sans", sans-serif;
-  --sui-font-size-xxx-large: 24px;
-  --sui-font-size-xx-large: 20px;
-  --sui-font-size-x-large: 18px;
-  --sui-font-size-large: 16px;
-  --sui-font-size-default: 14px;
-  --sui-font-size-small: 12px;
-  --sui-font-size-x-small: 10px;
-  --sui-font-weight-normal: 300;
-  --sui-font-weight-bold: 600;
-  --sui-font-family-monospace: "Noto Sans Mono", monospace;
+  --sui-font-family-default: "Source Sans 3", system-ui, sans-serif;
+  --sui-font-size-xxx-large: 26px;
+  --sui-font-size-xx-large: 22px;
+  --sui-font-size-x-large: 20px;
+  --sui-font-size-large: 18px;
+  --sui-font-size-default: 16px;
+  --sui-font-size-small: 14px;
+  --sui-font-size-x-small: 12px;
+  --sui-font-weight-normal: 400;
+  --sui-font-weight-bold: 700;
+  --sui-font-family-monospace: "Noto Sans Mono", ui-monospace, 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-line-height-default: 1.2;
+  --sui-line-height-compact: 1.4;
+  --sui-line-height-comfortable: 1.6;
   --sui-word-spacing-normal: 1px;
   --sui-heading-margin: 0;
   --sui-heading-font-family: var(--sui-font-family-default);
@@ -489,42 +477,42 @@
 }
 :global(h1) {
   margin: var(--sui-h1-margin, var(--sui-heading-margin));
-  font-size: var(--sui-h1-font-size, 32px);
+  font-size: var(--sui-h1-font-size, 34px);
   font-family: var(--sui-h1-font-family, var(--sui-heading-font-family));
   font-weight: var(--sui-h1-font-weight, var(--sui-heading-font-weight));
   line-height: var(--sui-h1-line-height, var(--sui-heading-line-height));
 }
 :global(h2) {
   margin: var(--sui-h2-margin, var(--sui-heading-margin));
-  font-size: var(--sui-h2-font-size, 28px);
+  font-size: var(--sui-h2-font-size, 30px);
   font-family: var(--sui-h2-font-family, var(--sui-heading-font-family));
   font-weight: var(--sui-h2-font-weight, var(--sui-heading-font-weight));
   line-height: var(--sui-h2-line-height, var(--sui-heading-line-height));
 }
 :global(h3) {
   margin: var(--sui-h3-margin, var(--sui-heading-margin));
-  font-size: var(--sui-h3-font-size, 24px);
+  font-size: var(--sui-h3-font-size, 26px);
   font-family: var(--sui-h3-font-family, var(--sui-heading-font-family));
   font-weight: var(--sui-h3-font-weight, var(--sui-heading-font-weight));
   line-height: var(--sui-h3-line-height, var(--sui-heading-line-height));
 }
 :global(h4) {
   margin: var(--sui-h4-margin, var(--sui-heading-margin));
-  font-size: var(--sui-h4-font-size, 20px);
+  font-size: var(--sui-h4-font-size, 22px);
   font-family: var(--sui-h4-font-family, var(--sui-heading-font-family));
   font-weight: var(--sui-h4-font-weight, var(--sui-heading-font-weight));
   line-height: var(--sui-h4-line-height, var(--sui-heading-line-height));
 }
 :global(h5) {
   margin: var(--sui-h5-margin, var(--sui-heading-margin));
-  font-size: var(--sui-h5-font-size, 16px);
+  font-size: var(--sui-h5-font-size, 18px);
   font-family: var(--sui-h5-font-family, var(--sui-heading-font-family));
   font-weight: var(--sui-h5-font-weight, var(--sui-heading-font-weight));
   line-height: var(--sui-h5-line-height, var(--sui-heading-line-height));
 }
 :global(h6) {
   margin: var(--sui-h6-margin, var(--sui-heading-margin));
-  font-size: var(--sui-h6-font-size, 12px);
+  font-size: var(--sui-h6-font-size, 14px);
   font-family: var(--sui-h6-font-family, var(--sui-heading-font-family));
   font-weight: var(--sui-h6-font-weight, var(--sui-heading-font-weight));
   line-height: var(--sui-h6-line-height, var(--sui-heading-line-height));
@@ -613,6 +601,9 @@
   font-size: var(--sui-font-size-default);
   font-weight: var(--sui-font-weight-normal, normal);
   word-spacing: var(--sui-word-spacing-normal);
+  font-size-adjust: 0.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   -webkit-user-select: none;
   user-select: none;
   touch-action: none;

package/dist/components/util/font-links.svelte

@@ -0,0 +1,56 @@
+<link rel="preconnect" href="https://cdn.jsdelivr.net/" />
+
+<style>
+  /* https://fontsource.org/fonts/source-sans-3/cdn */
+  @font-face {
+    font-family: 'Source Sans 3';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 200 900;
+    src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-sans-3:vf@5.3.0/latin-wght-normal.woff2)
+      format('woff2-variations');
+    unicode-range:
+      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+      U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+  /* https://fontsource.org/fonts/noto-mono/cdn */
+  @font-face {
+    font-family: 'Noto Mono';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400;
+    src: url(https://cdn.jsdelivr.net/fontsource/fonts/noto-mono@5.3.0/latin-400-normal.woff2)
+      format('woff2');
+  }
+
+  /* https://fontsource.org/fonts/material-symbols-outlined/cdn */
+  @font-face {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    font-display: block;
+    font-weight: 400;
+    src: url(https://cdn.jsdelivr.net/fontsource/fonts/material-symbols-outlined:vf@5.3.1/latin-wght-normal.woff2)
+      format('woff2-variations');
+    unicode-range:
+      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+      U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+  :global(.material-symbols-outlined) {
+    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+    font-family: 'Material Symbols Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    overflow-wrap: normal;
+    direction: ltr;
+    -moz-font-feature-settings: 'liga';
+    font-feature-settings: 'liga';
+  }
+</style>

package/dist/components/util/font-links.svelte.d.ts

@@ -0,0 +1,26 @@
+export default FontLinks;
+type FontLinks = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FontLinks: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/locales/el.yaml

@@ -0,0 +1,113 @@
+# Dialog action button labels
+ok: ΟΚ
+cancel: Άκυρο
+close: Κλείσιμο
+
+# Button to clear content, e.g. search input or calendar date
+clear: Έκκαθάριση
+
+# Text editor dialog buttons for link/image insertion
+insert: Εισαγωγή
+update: Ενημέρωση
+remove: Κατάργηση
+
+# Combobox dropdown toggle button aria-labels
+collapse: Σύμπτυξη
+expand: Ανάπτυξη
+
+# Infobar/toast dismiss button label
+dismiss: Παράβλεψη
+
+# Calendar component
+calendar:
+  # View switcher group aria-labels and navigation button aria-labels
+  year: Έτος
+  previous_decade: Προηγούμενη δεκαετία
+  next_decade: Επόμενη δεκαετία
+  month: Μήνας
+  previous_month: Προηγούμενος μήνας
+  next_month: Επόμενος μήνας
+  # “Today” button label in footer
+  today: Σήμερα
+
+# Split button component
+split_button:
+  # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
+  x_options: 'Επιλογές για {$name}'
+  # Dropdown toggle aria-label
+  more_options: Περισσότερες επιλογές
+
+# Combobox component
+combobox:
+  # Placeholder when no option is selected
+  select_an_option: Επιλέξτε μία επιλογή…
+  # Filter input aria-label
+  filter_options: Φιλτράρισμα επιλογών
+  # Empty state message when filter has no matches
+  no_matching_options: Δεν βρέθηκαν επιλογές που να ταιριάζουν
+
+# Number input component
+number_input:
+  # Spin button aria-labels for incrementing/decrementing the number value
+  increase: Αύξηση
+  decrease: Μείωση
+
+# Password input component
+password_input:
+  # Visibility toggle button aria-labels
+  show_password: Εμφάνιση κωδικού πρόσβασης
+  hide_password: Απόκρυψη κωδικού πρόσβασης
+
+# Secret input component (API keys, tokens, etc.)
+secret_input:
+  # Visibility toggle button aria-labels
+  show_secret: Εμφάνιση μυστικού
+  hide_secret: Απόκρυψη μυστικού
+
+# Select tags component (multi-select)
+select_tags:
+  # Listbox aria-label
+  selected_options: Επιλεγμένες επιλογές
+  # Remove button aria-label, e.g. “Remove Option 1”
+  remove_x: 'Κατάργηση {$name}'
+
+# Text editor component
+text_editor:
+  # Toolbar aria-labels
+  text_editor: Επεξεργαστής κειμένου
+  code_editor: Επεξεργαστής κώδικα
+  # Block style menu button and menu aria-labels
+  text_style_options: Επιλογές μορφοποίησης κειμένου
+  show_text_style_options: Εμφάνιση επιλογών μορφοποίησης κειμένου
+  # Block style menu items
+  paragraph: Παράγραφος
+  heading_1: Επικεφαλίδα 1
+  heading_2: Επικεφαλίδα 2
+  heading_3: Επικεφαλίδα 3
+  heading_4: Επικεφαλίδα 4
+  heading_5: Επικεφαλίδα 5
+  heading_6: Επικεφαλίδα 6
+  bulleted_list: Λίστα με κουκίδες
+  numbered_list: Αριθμημένη λίστα
+  blockquote: Παράθεση
+  code_block: Μπλόκ κώδικα
+  # Inline style button aria-labels
+  bold: Έντονα
+  italic: Πλάγια
+  strikethrough: Διακριτή διαγραφή
+  code: Κώδικας
+  link: Σύνδεσμος
+  # Link dialog title
+  insert_link: Εισαγωγή συνδέσμου
+  update_link: Ενημέρωση συνδέσμου
+  # Link dialog input field labels
+  text: Κείμενο
+  url: URL
+  # Markdown mode toggle button aria-label
+  edit_in_markdown: Επεξεργασία σε Markdown
+  # Error message when rich text conversion fails
+  converter_error: Δεν ήταν δυνατή η ενεργοποίηση της λειτουργίας εμπλουτισμένου κειμένου. Παρακαλούμε χρησιμοποιήστε τον επεξεργαστή απλού κειμένου.
+  # Language selector aria-label
+  language: Γλώσσα
+  # Plain text mode option in language selector
+  plain_text: Απλό κείμενο

package/dist/locales/en-CA.yaml

@@ -33,7 +33,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: "{$name} Options"
+  x_options: '{$name} Options'
   # Dropdown toggle aria-label
   more_options: More Options
 
@@ -69,7 +69,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Selected Options
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: "Remove {$name}"
+  remove_x: 'Remove {$name}'
 
 # Text editor component
 text_editor:

package/dist/locales/en-GB.yaml

@@ -33,7 +33,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: "{$name} Options"
+  x_options: '{$name} Options'
   # Dropdown toggle aria-label
   more_options: More Options
 
@@ -69,7 +69,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Selected Options
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: "Remove {$name}"
+  remove_x: 'Remove {$name}'
 
 # Text editor component
 text_editor:

package/dist/locales/en-US.yaml

@@ -33,7 +33,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: "{$name} Options"
+  x_options: '{$name} Options'
   # Dropdown toggle aria-label
   more_options: More Options
 
@@ -69,7 +69,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Selected Options
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: "Remove {$name}"
+  remove_x: 'Remove {$name}'
 
 # Text editor component
 text_editor:

package/dist/locales/ja.yaml

@@ -33,7 +33,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. "Save Options" when primary button is "Save"
-  x_options: "{$name} オプション"
+  x_options: '{$name} オプション'
   # Dropdown toggle aria-label
   more_options: その他のオプション
 
@@ -69,7 +69,7 @@ select_tags:
   # Listbox aria-label
   selected_options: 選択済みのオプション
   # Remove button aria-label, e.g. "Remove Option 1"
-  remove_x: "{$name} を削除"
+  remove_x: '{$name} を削除'
 
 # Text editor component
 text_editor:

package/dist/locales/ru.yaml

@@ -0,0 +1,113 @@
+# Dialog action button labels
+ok: OK
+cancel: Отмена
+close: Закрыть
+
+# Button to clear content, e.g. search input or calendar date
+clear: Очистить
+
+# Text editor dialog buttons for link/image insertion
+insert: Вставить
+update: Обновить
+remove: Удалить
+
+# Combobox dropdown toggle button aria-labels
+collapse: Свернуть
+expand: Развернуть
+
+# Infobar/toast dismiss button label
+dismiss: Отклонить
+
+# Calendar component
+calendar:
+  # View switcher group aria-labels and navigation button aria-labels
+  year: Год
+  previous_decade: Предыдущее десятилетие
+  next_decade: Следующее десятилетие
+  month: Месяц
+  previous_month: Предыдущий месяц
+  next_month: Следующий месяц
+  # “Today” button label in footer
+  today: Сегодня
+
+# Split button component
+split_button:
+  # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
+  x_options: Параметры «{$name}»
+  # Dropdown toggle aria-label
+  more_options: Другие параметры
+
+# Combobox component
+combobox:
+  # Placeholder when no option is selected
+  select_an_option: Выберите вариант…
+  # Filter input aria-label
+  filter_options: Фильтровать варианты
+  # Empty state message when filter has no matches
+  no_matching_options: Подходящих вариантов не найдено
+
+# Number input component
+number_input:
+  # Spin button aria-labels for incrementing/decrementing the number value
+  increase: Увеличить
+  decrease: Уменьшить
+
+# Password input component
+password_input:
+  # Visibility toggle button aria-labels
+  show_password: Показать пароль
+  hide_password: Скрыть пароль
+
+# Secret input component (API keys, tokens, etc.)
+secret_input:
+  # Visibility toggle button aria-labels
+  show_secret: Показать секрет
+  hide_secret: Скрыть секрет
+
+# Select tags component (multi-select)
+select_tags:
+  # Listbox aria-label
+  selected_options: Выбранные варианты
+  # Remove button aria-label, e.g. “Remove Option 1”
+  remove_x: Удалить «{$name}»
+
+# Text editor component
+text_editor:
+  # Toolbar aria-labels
+  text_editor: Текстовый редактор
+  code_editor: Редактор кода
+  # Block style menu button and menu aria-labels
+  text_style_options: Параметры стиля текста
+  show_text_style_options: Показать параметры стиля текста
+  # Block style menu items
+  paragraph: Абзац
+  heading_1: Заголовок 1
+  heading_2: Заголовок 2
+  heading_3: Заголовок 3
+  heading_4: Заголовок 4
+  heading_5: Заголовок 5
+  heading_6: Заголовок 6
+  bulleted_list: Маркированный список
+  numbered_list: Нумерованный список
+  blockquote: Цитата
+  code_block: Блок кода
+  # Inline style button aria-labels
+  bold: Полужирный
+  italic: Курсив
+  strikethrough: Зачёркнутый
+  code: Код
+  link: Ссылка
+  # Link dialog title
+  insert_link: Вставить ссылку
+  update_link: Обновить ссылку
+  # Link dialog input field labels
+  text: Текст
+  url: URL
+  # Markdown mode toggle button aria-label
+  edit_in_markdown: Редактировать в Markdown
+  # Error message when rich text conversion fails
+  converter_error: Не удалось включить режим форматированного текста. Вместо этого используйте редактор обычного текста.
+  # Language selector aria-label
+  language: Язык
+  # Plain text mode option in language selector
+  plain_text: Обычный текст

package/dist/locales/uk.yaml

@@ -0,0 +1,113 @@
+# Dialog action button labels
+ok: OK
+cancel: Скасувати
+close: Закрити
+
+# Button to clear content, e.g. search input or calendar date
+clear: Очистити
+
+# Text editor dialog buttons for link/image insertion
+insert: Вставити
+update: Оновити
+remove: Видалити
+
+# Combobox dropdown toggle button aria-labels
+collapse: Згорнути
+expand: Розгорнути
+
+# Infobar/toast dismiss button label
+dismiss: Відхилити
+
+# Calendar component
+calendar:
+  # View switcher group aria-labels and navigation button aria-labels
+  year: Рік
+  previous_decade: Попереднє десятиліття
+  next_decade: Наступне десятиліття
+  month: Місяць
+  previous_month: Попередній місяць
+  next_month: Наступний місяць
+  # “Today” button label in footer
+  today: Сьогодні
+
+# Split button component
+split_button:
+  # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
+  x_options: Параметри «{$name}»
+  # Dropdown toggle aria-label
+  more_options: Інші параметри
+
+# Combobox component
+combobox:
+  # Placeholder when no option is selected
+  select_an_option: Виберіть варіант…
+  # Filter input aria-label
+  filter_options: Фільтрувати варіанти
+  # Empty state message when filter has no matches
+  no_matching_options: Відповідних варіантів не знайдено
+
+# Number input component
+number_input:
+  # Spin button aria-labels for incrementing/decrementing the number value
+  increase: Збільшити
+  decrease: Зменшити
+
+# Password input component
+password_input:
+  # Visibility toggle button aria-labels
+  show_password: Показати пароль
+  hide_password: Сховати пароль
+
+# Secret input component (API keys, tokens, etc.)
+secret_input:
+  # Visibility toggle button aria-labels
+  show_secret: Показати секрет
+  hide_secret: Сховати секрет
+
+# Select tags component (multi-select)
+select_tags:
+  # Listbox aria-label
+  selected_options: Вибрані варіанти
+  # Remove button aria-label, e.g. “Remove Option 1”
+  remove_x: Видалити «{$name}»
+
+# Text editor component
+text_editor:
+  # Toolbar aria-labels
+  text_editor: Текстовий редактор
+  code_editor: Редактор коду
+  # Block style menu button and menu aria-labels
+  text_style_options: Параметри стилю тексту
+  show_text_style_options: Показати параметри стилю тексту
+  # Block style menu items
+  paragraph: Абзац
+  heading_1: Заголовок 1
+  heading_2: Заголовок 2
+  heading_3: Заголовок 3
+  heading_4: Заголовок 4
+  heading_5: Заголовок 5
+  heading_6: Заголовок 6
+  bulleted_list: Маркований список
+  numbered_list: Нумерований список
+  blockquote: Цитата
+  code_block: Блок коду
+  # Inline style button aria-labels
+  bold: Жирний
+  italic: Курсив
+  strikethrough: Закреслений
+  code: Код
+  link: Посилання
+  # Link dialog title
+  insert_link: Вставити посилання
+  update_link: Оновити посилання
+  # Link dialog input field labels
+  text: Текст
+  url: URL
+  # Markdown mode toggle button aria-label
+  edit_in_markdown: Редагувати в Markdown
+  # Error message when rich text conversion fails
+  converter_error: Не вдалося ввімкнути режим форматованого тексту. Натомість скористайтеся редактором звичайного тексту.
+  # Language selector aria-label
+  language: Мова
+  # Plain text mode option in language selector
+  plain_text: Звичайний текст

package/dist/styles/core.scss

@@ -50,7 +50,7 @@
 
   h1 {
     margin: var(--sui-h1-margin, var(--sui-heading-margin));
-    font-size: var(--sui-h1-font-size, 32px);
+    font-size: var(--sui-h1-font-size, 34px);
     font-family: var(--sui-h1-font-family, var(--sui-heading-font-family));
     font-weight: var(--sui-h1-font-weight, var(--sui-heading-font-weight));
     line-height: var(--sui-h1-line-height, var(--sui-heading-line-height));
@@ -58,7 +58,7 @@
 
   h2 {
     margin: var(--sui-h2-margin, var(--sui-heading-margin));
-    font-size: var(--sui-h2-font-size, 28px);
+    font-size: var(--sui-h2-font-size, 30px);
     font-family: var(--sui-h2-font-family, var(--sui-heading-font-family));
     font-weight: var(--sui-h2-font-weight, var(--sui-heading-font-weight));
     line-height: var(--sui-h2-line-height, var(--sui-heading-line-height));
@@ -66,7 +66,7 @@
 
   h3 {
     margin: var(--sui-h3-margin, var(--sui-heading-margin));
-    font-size: var(--sui-h3-font-size, 24px);
+    font-size: var(--sui-h3-font-size, 26px);
     font-family: var(--sui-h3-font-family, var(--sui-heading-font-family));
     font-weight: var(--sui-h3-font-weight, var(--sui-heading-font-weight));
     line-height: var(--sui-h3-line-height, var(--sui-heading-line-height));
@@ -74,7 +74,7 @@
 
   h4 {
     margin: var(--sui-h4-margin, var(--sui-heading-margin));
-    font-size: var(--sui-h4-font-size, 20px);
+    font-size: var(--sui-h4-font-size, 22px);
     font-family: var(--sui-h4-font-family, var(--sui-heading-font-family));
     font-weight: var(--sui-h4-font-weight, var(--sui-heading-font-weight));
     line-height: var(--sui-h4-line-height, var(--sui-heading-line-height));
@@ -82,7 +82,7 @@
 
   h5 {
     margin: var(--sui-h5-margin, var(--sui-heading-margin));
-    font-size: var(--sui-h5-font-size, 16px);
+    font-size: var(--sui-h5-font-size, 18px);
     font-family: var(--sui-h5-font-family, var(--sui-heading-font-family));
     font-weight: var(--sui-h5-font-weight, var(--sui-heading-font-weight));
     line-height: var(--sui-h5-line-height, var(--sui-heading-line-height));
@@ -90,7 +90,7 @@
 
   h6 {
     margin: var(--sui-h6-margin, var(--sui-heading-margin));
-    font-size: var(--sui-h6-font-size, 12px);
+    font-size: var(--sui-h6-font-size, 14px);
     font-family: var(--sui-h6-font-family, var(--sui-heading-font-family));
     font-weight: var(--sui-h6-font-weight, var(--sui-heading-font-weight));
     line-height: var(--sui-h6-line-height, var(--sui-heading-line-height));

package/dist/styles/variables.scss

@@ -154,21 +154,21 @@
     --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
     --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
     // Text
-    --sui-font-family-default: "Merriweather Sans", sans-serif;
-    --sui-font-size-xxx-large: 24px;
-    --sui-font-size-xx-large: 20px;
-    --sui-font-size-x-large: 18px;
-    --sui-font-size-large: 16px;
-    --sui-font-size-default: 14px;
-    --sui-font-size-small: 12px;
-    --sui-font-size-x-small: 10px;
-    --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-family-default: "Source Sans 3", system-ui, sans-serif;
+    --sui-font-size-xxx-large: 26px;
+    --sui-font-size-xx-large: 22px;
+    --sui-font-size-x-large: 20px;
+    --sui-font-size-large: 18px;
+    --sui-font-size-default: 16px;
+    --sui-font-size-small: 14px;
+    --sui-font-size-x-small: 12px;
+    --sui-font-weight-normal: 400;
+    --sui-font-weight-bold: 700;
+    --sui-font-family-monospace: "Noto Sans Mono", ui-monospace, 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-line-height-default: 1.2;
+    --sui-line-height-compact: 1.4;
+    --sui-line-height-comfortable: 1.6;
     --sui-word-spacing-normal: 1px;
     --sui-heading-margin: 0;
     --sui-heading-font-family: var(--sui-font-family-default);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.45.0",
+  "version": "0.47.0",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "@lexical/table": "^0.48.0",
     "@lexical/utils": "^0.48.0",
     "@sveltia/i18n": "^1.1.3",
-    "@sveltia/utils": "^0.10.7",
+    "@sveltia/utils": "^0.11.0",
     "lexical": "^0.48.0",
     "prismjs": "^1.30.0"
   },
@@ -62,21 +62,21 @@
     "eslint-config-airbnb-extended": "^3.1.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^63.2.0",
-    "eslint-plugin-package-json": "^1.6.0",
+    "eslint-plugin-jsdoc": "^63.3.0",
+    "eslint-plugin-package-json": "^1.6.2",
     "eslint-plugin-svelte": "^3.22.0",
     "globals": "^17.7.0",
     "happy-dom": "^20.11.1",
     "oxlint": "^1.75.0",
-    "postcss": "^8.5.22",
+    "postcss": "^8.5.23",
     "postcss-html": "^1.8.1",
     "prettier": "^3.9.6",
     "prettier-plugin-svelte": "^4.1.1",
-    "sass": "^1.101.6",
+    "sass": "^1.102.0",
     "stylelint": "^17.14.1",
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.2.0",
-    "svelte": "^5.56.7",
+    "svelte": "^5.56.8",
     "svelte-check": "^4.7.3",
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",