@sveltia/ui 0.11.1 → 0.12.1

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

@@ -25,7 +25,7 @@
   let fontLoader;
 
   onMount(() => {
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const mediaQuery = globalThis.matchMedia('(prefers-color-scheme: dark)');
     const { dataset } = document.documentElement;
 
     /**
@@ -44,7 +44,7 @@
       applyTheme();
     };
 
-    window.setTimeout(() => {
+    globalThis.setTimeout(() => {
       fontLoader?.remove();
     }, 1000);
   });
@@ -86,7 +86,7 @@
   <slot />
 </div>
 
-<style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap");
+<style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300;1,600&family=Noto+Sans+Mono&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
 :global(:root),
 :global(:host) {
@@ -116,6 +116,7 @@
   --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
   --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
   --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
+  --sui-code-background-color: hsl(var(--sui-background-color-4-hsl));
   --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
   --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
   --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
@@ -171,10 +172,11 @@
   --sui-font-weight-normal: 300;
   --sui-font-weight-bold: 600;
   --sui-font-family-monospace: "Noto Sans Mono", monospace;
-  --sui-font-size-monospace: 12.5px;
+  --sui-font-size-monospace: 0.9em;
   --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-control-small-border-width: 1px;
   --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
   --sui-control-small-padding: 0 calc((var(--sui-control-small-height) / 5));
@@ -450,6 +452,31 @@
 :global(h6) {
   margin: 0;
   font-weight: var(--sui-font-weight-bold);
+  line-height: var(--sui-line-height-default);
+}
+
+:global(h1) {
+  font-size: 32px;
+}
+
+:global(h2) {
+  font-size: 28px;
+}
+
+:global(h3) {
+  font-size: 24px;
+}
+
+:global(h4) {
+  font-size: 20px;
+}
+
+:global(h5) {
+  font-size: 16px;
+}
+
+:global(h6) {
+  font-size: 12px;
 }
 
 :global(strong) {
@@ -468,16 +495,40 @@
 
 :global(code),
 :global(pre) {
+  border-radius: 4px;
+  background-color: var(--sui-code-background-color);
   font-family: var(--sui-font-family-monospace);
   font-size: var(--sui-font-size-monospace);
+  vertical-align: -0.05em;
 }
 
 :global(pre) {
+  padding: 8px;
   line-height: var(--sui-line-height-compact);
   -webkit-user-select: text;
   user-select: text;
 }
 
+:global(code) {
+  padding: 2px 4px;
+}
+
+:global(table) {
+  border-collapse: collapse;
+}
+
+:global(th),
+:global(td) {
+  border: 1px solid var(--sui-textbox-border-color);
+  padding: 8px;
+}
+
+:global(blockquote) {
+  margin-left: 16px;
+  border-left: 4px solid var(--sui-textbox-border-color);
+  padding-left: 12px;
+}
+
 :global(.disabled),
 :global(.readonly),
 :global([aria-disabled=true]),
@@ -525,6 +576,7 @@
   font-family: var(--sui-font-family-default);
   font-size: var(--sui-font-size-default);
   font-weight: var(--sui-font-weight-normal);
+  word-spacing: var(--sui-word-spacing-normal);
   -webkit-user-select: none;
   user-select: none;
   touch-action: none;

package/package/components/util/modal.svelte

@@ -5,8 +5,8 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { sleep } from '@sveltia/utils/misc';
   import { createEventDispatcher, onMount } from 'svelte';
-  import { sleep } from '../../services/util';
 
   /**
    * The `class` attribute on the `<dialog>` element.
@@ -145,7 +145,6 @@
 
   $: {
     void open;
-    void dialog;
     toggleDialog();
   }
 
@@ -180,7 +179,8 @@
   }}
   on:cancel|preventDefault={() => {
     // Escape key is pressed
-    if (escapeDismiss) {
+    if (dialog && escapeDismiss) {
+      dialog.returnValue = 'cancel';
       open = false;
     }
   }}

package/package/components/util/modal.svelte.d.ts

@@ -7,7 +7,7 @@ export default class Modal extends SvelteComponent<{
     class?: string | undefined;
     close?: ((returnValue: string) => void) | undefined;
     dialog?: HTMLDialogElement | undefined;
-    role?: "dialog" | "none" | "alertdialog" | undefined;
+    role?: "dialog" | "alertdialog" | "none" | undefined;
     open?: boolean | undefined;
     showBackdrop?: boolean | undefined;
     lightDismiss?: boolean | undefined;
@@ -29,8 +29,8 @@ export default class Modal extends SvelteComponent<{
     set class(arg: string | undefined);
     get class(): string | undefined;
     /**accessor*/
-    set role(arg: "dialog" | "none" | "alertdialog" | undefined);
-    get role(): "dialog" | "none" | "alertdialog" | undefined;
+    set role(arg: "dialog" | "alertdialog" | "none" | undefined);
+    get role(): "dialog" | "alertdialog" | "none" | undefined;
     /**accessor*/
     set open(arg: boolean | undefined);
     get open(): boolean | undefined;
@@ -60,7 +60,7 @@ declare const __propDef: {
         class?: string | undefined;
         close?: ((returnValue: string) => void) | undefined;
         dialog?: HTMLDialogElement | undefined;
-        role?: "dialog" | "none" | "alertdialog" | undefined;
+        role?: "dialog" | "alertdialog" | "none" | undefined;
         open?: boolean | undefined;
         showBackdrop?: boolean | undefined;
         lightDismiss?: boolean | undefined;

package/package/components/util/popup.svelte

@@ -5,10 +5,10 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { sleep } from '@sveltia/utils/misc';
   import { onMount } from 'svelte';
   import { writable } from 'svelte/store';
   import { activatePopup } from '../../services/popup';
-  import { sleep } from '../../services/util';
   import Modal from './modal.svelte';
 
   /**
@@ -92,7 +92,7 @@
   $: touch = touchOptimized && touchEnabled;
 
   onMount(() => {
-    touchEnabled = window.matchMedia('(pointer: coarse)').matches;
+    touchEnabled = globalThis.matchMedia('(pointer: coarse)').matches;
   });
 </script>
 

package/package/index.d.ts

@@ -56,7 +56,7 @@ export { default as TabList } from "./components/tabs/tab-list.svelte";
 export { default as TabPanel } from "./components/tabs/tab-panel.svelte";
 export { default as TabPanels } from "./components/tabs/tab-panels.svelte";
 export { default as Tab } from "./components/tabs/tab.svelte";
-export { default as MarkdownEditor } from "./components/text-field/markdown-editor.svelte";
+export { default as TextEditor } from "./components/text-editor/text-editor.svelte";
 export { default as NumberInput } from "./components/text-field/number-input.svelte";
 export { default as PasswordInput } from "./components/text-field/password-input.svelte";
 export { default as SearchBar } from "./components/text-field/search-bar.svelte";
@@ -67,4 +67,3 @@ export { default as Toolbar } from "./components/toolbar/toolbar.svelte";
 export { default as AppShell } from "./components/util/app-shell.svelte";
 export { default as Group } from "./components/util/group.svelte";
 export { default as Modal } from "./components/util/modal.svelte";
-export * from "./services/util";

package/package/index.js

@@ -10,7 +10,14 @@ import { addMessages, init } from 'svelte-i18n';
  */
 export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}) => {
   /** @type {{ [key: string]: { strings: object }}} */
-  const modules = import.meta.glob('./locales/*.js', { eager: true });
+  let modules = import.meta.glob('./locales/*.js', { eager: true });
+
+  // The file path must be relative during local development, or the import may fail when using
+  // `pnpm link -g @sveltia/ui`. On the other hand, it must start with `$lib` when being imported
+  // with `pnpm install @sveltia/ui`, otherwise the path cannot be resolved.
+  if (!Object.keys(modules).length) {
+    modules = import.meta.glob('$lib/locales/*.js', { eager: true });
+  }
 
   Object.entries(modules).forEach(([path, { strings }]) => {
     const [, locale] = /** @type {string[]} */ (path.match(/([a-zA-Z-]+)\.js/));
@@ -81,7 +88,7 @@ export { default as TabList } from './components/tabs/tab-list.svelte';
 export { default as TabPanel } from './components/tabs/tab-panel.svelte';
 export { default as TabPanels } from './components/tabs/tab-panels.svelte';
 export { default as Tab } from './components/tabs/tab.svelte';
-export { default as MarkdownEditor } from './components/text-field/markdown-editor.svelte';
+export { default as TextEditor } from './components/text-editor/text-editor.svelte';
 export { default as NumberInput } from './components/text-field/number-input.svelte';
 export { default as PasswordInput } from './components/text-field/password-input.svelte';
 export { default as SearchBar } from './components/text-field/search-bar.svelte';
@@ -92,5 +99,3 @@ export { default as Toolbar } from './components/toolbar/toolbar.svelte';
 export { default as AppShell } from './components/util/app-shell.svelte';
 export { default as Group } from './components/util/group.svelte';
 export { default as Modal } from './components/util/modal.svelte';
-
-export * from './services/util';

package/package/locales/en.d.ts

@@ -3,6 +3,8 @@ export namespace strings {
     const cancel: string;
     const close: string;
     const clear: string;
+    const insert: string;
+    const update: string;
     const remove: string;
     const collapse: string;
     const expand: string;
@@ -32,16 +34,32 @@ export namespace strings {
         const show_password: string;
         const hide_password: string;
     }
-    namespace markdown_editor {
-        const markdown_editor_1: string;
-        export { markdown_editor_1 as markdown_editor };
+    namespace text_editor {
+        const text_editor_1: string;
+        export { text_editor_1 as text_editor };
+        export const text_style_options: string;
+        export const show_text_style_options: string;
+        export const paragraph: string;
+        export const heading_1: string;
+        export const heading_2: string;
+        export const heading_3: string;
+        export const heading_4: string;
+        export const heading_5: string;
+        export const heading_6: string;
+        export const bulleted_list: string;
+        export const numbered_list: string;
+        export const blockquote: string;
         export const bold: string;
         export const italic: string;
         export const code: string;
         export const link: string;
-        export const heading_x: string;
-        export const quote: string;
-        export const bulleted_list: string;
-        export const numbered_list: string;
+        export const insert_link: string;
+        export const update_link: string;
+        export const text: string;
+        export const url: string;
+        export const edit_options: string;
+        export const show_edit_options: string;
+        export const use_rich_text: string;
+        export const converter_error: string;
     }
 }

package/package/locales/en.js

@@ -3,6 +3,8 @@ export const strings = {
   cancel: 'Cancel',
   close: 'Close',
   clear: 'Clear',
+  insert: 'Insert',
+  update: 'Update',
   remove: 'Remove',
   collapse: 'Collapse',
   expand: 'Expand',
@@ -32,15 +34,32 @@ export const strings = {
     show_password: 'Show Password',
     hide_password: 'Hide Password',
   },
-  markdown_editor: {
-    markdown_editor: 'Markdown Editor',
+  text_editor: {
+    text_editor: 'Text Editor',
+    text_style_options: 'Text Style Options',
+    show_text_style_options: 'Show Text Style Options',
+    paragraph: 'Paragraph',
+    heading_1: 'Heading 1',
+    heading_2: 'Heading 2',
+    heading_3: 'Heading 3',
+    heading_4: 'Heading 4',
+    heading_5: 'Heading 5',
+    heading_6: 'Heading 6',
+    bulleted_list: 'Bulleted List',
+    numbered_list: 'Numbered List',
+    blockquote: 'Block Quote',
     bold: 'Bold',
     italic: 'Italic',
     code: 'Code',
     link: 'Link',
-    heading_x: 'Heading {level}',
-    quote: 'Quote',
-    bulleted_list: 'Bulleted List',
-    numbered_list: 'Numbered List',
+    insert_link: 'Insert Link',
+    update_link: 'Update Link',
+    text: 'Text',
+    url: 'URL',
+    edit_options: 'Edit Options',
+    show_edit_options: 'Show Edit Options',
+    use_rich_text: 'Use Rich Text',
+    converter_error:
+      'There was an error while enabling rich text mode. Please use the plain text editor instead.',
   },
 };

package/package/locales/ja.d.ts

@@ -3,6 +3,8 @@ export namespace strings {
     const cancel: string;
     const close: string;
     const clear: string;
+    const insert: string;
+    const update: string;
     const remove: string;
     const collapse: string;
     const expand: string;
@@ -32,16 +34,32 @@ export namespace strings {
         const show_password: string;
         const hide_password: string;
     }
-    namespace markdown_editor {
-        const markdown_editor_1: string;
-        export { markdown_editor_1 as markdown_editor };
+    namespace text_editor {
+        const text_editor_1: string;
+        export { text_editor_1 as text_editor };
+        export const text_style_options: string;
+        export const show_text_style_options: string;
+        export const paragraph: string;
+        export const heading_1: string;
+        export const heading_2: string;
+        export const heading_3: string;
+        export const heading_4: string;
+        export const heading_5: string;
+        export const heading_6: string;
+        export const bulleted_list: string;
+        export const numbered_list: string;
+        export const blockquote: string;
         export const bold: string;
         export const italic: string;
         export const code: string;
         export const link: string;
-        export const heading_x: string;
-        export const quote: string;
-        export const bulleted_list: string;
-        export const numbered_list: string;
+        export const insert_link: string;
+        export const update_link: string;
+        export const text: string;
+        export const url: string;
+        export const edit_options: string;
+        export const show_edit_options: string;
+        export const use_rich_text: string;
+        export const converter_error: string;
     }
 }

package/package/locales/ja.js

@@ -3,6 +3,8 @@ export const strings = {
   cancel: 'キャンセル',
   close: '閉じる',
   clear: 'クリア',
+  insert: '挿入',
+  update: '更新',
   remove: '削除',
   collapse: '折り畳む',
   expand: '広げる',
@@ -32,15 +34,32 @@ export const strings = {
     show_password: 'パスワードを表示',
     hide_password: 'パスワードを隠す',
   },
-  markdown_editor: {
-    markdown_editor: 'Markdown エディター',
+  text_editor: {
+    text_editor: 'テキストエディター',
+    text_style_options: 'テキストスタイルオプション',
+    show_text_style_options: 'テキストスタイルオプションを表示',
+    paragraph: '段落',
+    heading_1: '見出し 1',
+    heading_2: '見出し 2',
+    heading_3: '見出し 3',
+    heading_4: '見出し 4',
+    heading_5: '見出し 5',
+    heading_6: '見出し 6',
+    bulleted_list: '番号なしリスト',
+    numbered_list: '番号付きリスト',
+    blockquote: 'ブロック引用',
     bold: '太字',
     italic: '斜体',
     code: 'コード',
     link: 'リンク',
-    heading_x: '見出し {level}',
-    quote: '引用',
-    bulleted_list: '番号なしリスト',
-    numbered_list: '番号付きリスト',
+    insert_link: 'リンクを挿入',
+    update_link: 'リンクを更新',
+    text: 'テキスト',
+    url: 'URL',
+    edit_options: '編集オプション',
+    show_edit_options: '編集オプションを表示',
+    use_rich_text: 'リッチテキストを使用',
+    converter_error:
+      'リッチテキストモードを有効化中に問題が発生しました。代わりにプレーンテキストエディターを使用してください。',
   },
 };

package/package/services/events.js

@@ -83,7 +83,7 @@ export const activateKeyShortcuts = (element, shortcuts = '') => {
    * Remove the event listener.
    */
   const removeListener = () => {
-    window.removeEventListener('keydown', handler);
+    globalThis.removeEventListener('keydown', handler);
     element.removeAttribute('aria-keyshortcuts');
   };
 
@@ -96,7 +96,7 @@ export const activateKeyShortcuts = (element, shortcuts = '') => {
       : undefined;
 
     if (platformKeyShortcuts) {
-      window.addEventListener('keydown', handler);
+      globalThis.addEventListener('keydown', handler);
       element.setAttribute('aria-keyshortcuts', platformKeyShortcuts);
     }
   };

package/package/services/group.js

@@ -1,4 +1,5 @@
-import { getRandomId, sleep } from './util';
+import { generateElementId } from '@sveltia/utils/element';
+import { sleep } from '@sveltia/utils/misc';
 
 /**
  * @type {{ [role: string]: {
@@ -62,7 +63,7 @@ class Group {
     this.parent = parent;
     this.role = /** @type {string} */ (parent.getAttribute('role'));
     this.multi = this.parent.getAttribute('aria-multiselectable') === 'true';
-    this.id = getRandomId(this.role);
+    this.id = generateElementId(this.role);
     this.parentGroupSelector = `[role="group"], [role="${this.role}"]`;
 
     const { orientation, childRoles, childSelectedAttr, focusChild } = config[this.role];
@@ -106,7 +107,7 @@ class Group {
         controlTarget.setAttribute('aria-hidden', String(!isSelected));
 
         if (isSelected) {
-          window.setTimeout(() => {
+          globalThis.setTimeout(() => {
             try {
               controlTarget.scrollIntoView({
                 block: 'nearest',
@@ -258,7 +259,7 @@ class Group {
 
       if (this.focusChild) {
         // Wait a bit before the element is rerendered
-        window.requestAnimationFrame(() => {
+        globalThis.requestAnimationFrame(() => {
           element.tabIndex = isTarget ? 0 : -1;
 
           if (isTarget) {
@@ -279,7 +280,7 @@ class Group {
         controlTarget.setAttribute('aria-hidden', String(!isTarget));
 
         if (isTarget) {
-          window.setTimeout(() => {
+          globalThis.setTimeout(() => {
             try {
               controlTarget.scrollIntoView({
                 block: 'nearest',
@@ -296,7 +297,7 @@ class Group {
       if (isTarget) {
         this.parent.setAttribute('aria-activedescendant', element.id);
 
-        window.setTimeout(() => {
+        globalThis.setTimeout(() => {
           try {
             element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
           } catch {

package/package/services/popup.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 
+import { generateElementId } from '@sveltia/utils/element';
 import { get, writable } from 'svelte/store';
-import { getRandomId } from './util';
 
 /**
  * Implement the popup handler.
@@ -105,7 +105,7 @@ class Popup {
     this.popupElement = popupElement; // = backdrop
     this.position = position;
     this.positionBaseElement = positionBaseElement ?? anchorElement;
-    this.id = getRandomId('popup');
+    this.id = generateElementId('popup');
 
     this.anchorElement.setAttribute('aria-controls', this.id);
     this.popupElement.setAttribute('id', this.id);

package/package/styles/core.scss

@@ -1,7 +1,7 @@
 @use "variables.scss";
 
-// https://fonts.google.com/share?selection.family=Merriweather%20Sans:ital,wght@0,300;0,600;1,300%7CNoto%20Sans%20Mono
-@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap");
+// https://fonts.google.com/share?selection.family=Merriweather+Sans:ital,wght@0,300;0,600;1,300;1,600|Noto+Sans+Mono
+@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300;1,600&family=Noto+Sans+Mono&display=swap");
 // https://fonts.google.com/icons?icon.set=Material+Symbols
 // Use `font-display: block;` @see https://stackoverflow.com/q/41710834
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
@@ -61,6 +61,31 @@ h5,
 h6 {
   margin: 0;
   font-weight: var(--sui-font-weight-bold);
+  line-height: var(--sui-line-height-default);
+}
+
+h1 {
+  font-size: 32px;
+}
+
+h2 {
+  font-size: 28px;
+}
+
+h3 {
+  font-size: 24px;
+}
+
+h4 {
+  font-size: 20px;
+}
+
+h5 {
+  font-size: 16px;
+}
+
+h6 {
+  font-size: 12px;
 }
 
 strong {
@@ -79,16 +104,40 @@ li {
 
 code,
 pre {
+  border-radius: 4px;
+  background-color: var(--sui-code-background-color);
   font-family: var(--sui-font-family-monospace);
   font-size: var(--sui-font-size-monospace);
+  vertical-align: -0.05em;
 }
 
 pre {
+  padding: 8px;
   line-height: var(--sui-line-height-compact);
   -webkit-user-select: text;
   user-select: text;
 }
 
+code {
+  padding: 2px 4px;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+th,
+td {
+  border: 1px solid var(--sui-textbox-border-color);
+  padding: 8px;
+}
+
+blockquote {
+  margin-left: 16px;
+  border-left: 4px solid var(--sui-textbox-border-color);
+  padding-left: 12px;
+}
+
 .disabled,
 .readonly,
 [aria-disabled="true"],

package/package/styles/variables.scss

@@ -101,6 +101,7 @@
   --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
   --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
   --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
+  --sui-code-background-color: hsl(var(--sui-background-color-4-hsl));
   --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
   --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
   --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
@@ -160,10 +161,11 @@
   --sui-font-weight-normal: 300;
   --sui-font-weight-bold: 600;
   --sui-font-family-monospace: "Noto Sans Mono", monospace;
-  --sui-font-size-monospace: 12.5px;
+  --sui-font-size-monospace: 0.9em;
   --sui-line-height-default: 1.25;
   --sui-line-height-compact: 1.5;
   --sui-line-height-comfortable: 1.75;
+  --sui-word-spacing-normal: 0.1ex;
   // Controls
   --sui-control-small-border-width: 1px;
   --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);