@sveltia/ui 0.46.0 → 0.48.0

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/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-size-monospace: 0.95em;
-  --sui-line-height-default: 1.25;
-  --sui-line-height-compact: 1.5;
-  --sui-line-height-comfortable: 1.75;
+  --sui-font-family-default: "Source Sans 3", system-ui, sans-serif;
+  --sui-font-size-xxx-large: 25px;
+  --sui-font-size-xx-large: 21px;
+  --sui-font-size-x-large: 19px;
+  --sui-font-size-large: 17px;
+  --sui-font-size-default: 15px;
+  --sui-font-size-small: 13px;
+  --sui-font-size-x-small: 11px;
+  --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.9em;
+  --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);
@@ -464,6 +452,7 @@
   border-width: 0;
   border-style: solid;
   vertical-align: top;
+  font-size-adjust: inherit;
 }
 @media (prefers-reduced-motion) {
   :global(*),
@@ -489,42 +478,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 +602,8 @@
   font-size: var(--sui-font-size-default);
   font-weight: var(--sui-font-weight-normal, normal);
   word-spacing: var(--sui-word-spacing-normal);
+  -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,57 @@
+<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;
+    size-adjust: 110%;
+  }
+
+  /* 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/pt-BR.yaml

@@ -0,0 +1,113 @@
+# Dialog action button labels
+ok: OK
+cancel: Cancelar
+close: Fechar
+
+# Button to clear content, e.g. search input or calendar date
+clear: Limpar
+
+# Text editor dialog buttons for link/image insertion
+insert: Inserir
+update: Atualizar
+remove: Remover
+
+# Combobox dropdown toggle button aria-labels
+collapse: Recolher
+expand: Expandir
+
+# Infobar/toast dismiss button label
+dismiss: Dispensar
+
+# Calendar component
+calendar:
+  # View switcher group aria-labels and navigation button aria-labels
+  year: Ano
+  previous_decade: Década anterior
+  next_decade: Próxima década
+  month: Mês
+  previous_month: Mês anterior
+  next_month: Próximo mês
+  # “Today” button label in footer
+  today: Hoje
+
+# Split button component
+split_button:
+  # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
+  x_options: 'Opções de {$name}'
+  # Dropdown toggle aria-label
+  more_options: Mais opções
+
+# Combobox component
+combobox:
+  # Placeholder when no option is selected
+  select_an_option: Selecione uma opção…
+  # Filter input aria-label
+  filter_options: Filtrar opções
+  # Empty state message when filter has no matches
+  no_matching_options: Nenhuma opção correspondente encontrada
+
+# Number input component
+number_input:
+  # Spin button aria-labels for incrementing/decrementing the number value
+  increase: Aumentar
+  decrease: Diminuir
+
+# Password input component
+password_input:
+  # Visibility toggle button aria-labels
+  show_password: Mostrar senha
+  hide_password: Ocultar senha
+
+# Secret input component (API keys, tokens, etc.)
+secret_input:
+  # Visibility toggle button aria-labels
+  show_secret: Mostrar segredo
+  hide_secret: Ocultar segredo
+
+# Select tags component (multi-select)
+select_tags:
+  # Listbox aria-label
+  selected_options: Opções selecionadas
+  # Remove button aria-label, e.g. “Remove Option 1”
+  remove_x: 'Remover {$name}'
+
+# Text editor component
+text_editor:
+  # Toolbar aria-labels
+  text_editor: Editor de texto
+  code_editor: Editor de código
+  # Block style menu button and menu aria-labels
+  text_style_options: Opções de estilo de texto
+  show_text_style_options: Mostrar opções de estilo de texto
+  # Block style menu items
+  paragraph: Parágrafo
+  heading_1: Título 1
+  heading_2: Título 2
+  heading_3: Título 3
+  heading_4: Título 4
+  heading_5: Título 5
+  heading_6: Título 6
+  bulleted_list: Lista com marcadores
+  numbered_list: Lista numerada
+  blockquote: Citação
+  code_block: Bloco de código
+  # Inline style button aria-labels
+  bold: Negrito
+  italic: Itálico
+  strikethrough: Tachado
+  code: Código
+  link: Link
+  # Link dialog title
+  insert_link: Inserir link
+  update_link: Atualizar link
+  # Link dialog input field labels
+  text: Texto
+  url: URL
+  # Markdown mode toggle button aria-label
+  edit_in_markdown: Editar em Markdown
+  # Error message when rich text conversion fails
+  converter_error: Não foi possível ativar o modo de texto formatado. Use o editor de texto simples.
+  # Language selector aria-label
+  language: Idioma
+  # Plain text mode option in language selector
+  plain_text: Texto simples

package/dist/styles/core.scss

@@ -22,6 +22,7 @@
     border-width: 0;
     border-style: solid;
     vertical-align: top;
+    font-size-adjust: inherit;
 
     @media (prefers-reduced-motion) {
       scroll-behavior: auto;
@@ -50,7 +51,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 +59,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 +67,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 +75,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 +83,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 +91,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-size-monospace: 0.95em;
-    --sui-line-height-default: 1.25;
-    --sui-line-height-compact: 1.5;
-    --sui-line-height-comfortable: 1.75;
+    --sui-font-family-default: "Source Sans 3", system-ui, sans-serif;
+    --sui-font-size-xxx-large: 25px;
+    --sui-font-size-xx-large: 21px;
+    --sui-font-size-x-large: 19px;
+    --sui-font-size-large: 17px;
+    --sui-font-size-default: 15px;
+    --sui-font-size-small: 13px;
+    --sui-font-size-x-small: 11px;
+    --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.9em;
+    --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.46.0",
+  "version": "0.48.0",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -62,12 +62,12 @@
     "eslint-config-airbnb-extended": "^3.1.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^63.3.0",
+    "eslint-plugin-jsdoc": "^63.3.1",
     "eslint-plugin-package-json": "^1.6.2",
     "eslint-plugin-svelte": "^3.22.0",
-    "globals": "^17.7.0",
+    "globals": "^17.8.0",
     "happy-dom": "^20.11.1",
-    "oxlint": "^1.75.0",
+    "oxlint": "^1.76.0",
     "postcss": "^8.5.23",
     "postcss-html": "^1.8.1",
     "prettier": "^3.9.6",
@@ -77,7 +77,7 @@
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.2.0",
     "svelte": "^5.56.8",
-    "svelte-check": "^4.7.3",
+    "svelte-check": "^4.7.4",
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",
     "vite": "^8.1.5",