@sveltia/ui 0.11.1 → 0.12.0

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/group.svelte.d.ts

@@ -8,8 +8,8 @@
 export default class Group extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
     hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -24,8 +24,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/util/modal.svelte

@@ -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

@@ -5,9 +5,9 @@
 export default class Modal extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    close?: ((returnValue: string) => void) | undefined;
     dialog?: HTMLDialogElement | undefined;
-    role?: "dialog" | "none" | "alertdialog" | undefined;
+    close?: ((returnValue: string) => void) | 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;
@@ -58,9 +58,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        close?: ((returnValue: string) => void) | undefined;
         dialog?: HTMLDialogElement | undefined;
-        role?: "dialog" | "none" | "alertdialog" | undefined;
+        close?: ((returnValue: string) => void) | undefined;
+        role?: "dialog" | "alertdialog" | "none" | undefined;
         open?: boolean | undefined;
         showBackdrop?: boolean | undefined;
         lightDismiss?: boolean | undefined;

package/package/components/util/popup.svelte

@@ -7,9 +7,9 @@
 <script>
   import { onMount } from 'svelte';
   import { writable } from 'svelte/store';
+  import Modal from './modal.svelte';
   import { activatePopup } from '../../services/popup';
   import { sleep } from '../../services/util';
-  import Modal from './modal.svelte';
 
   /**
    * The `class` attribute on the content element.
@@ -92,7 +92,7 @@
   $: touch = touchOptimized && touchEnabled;
 
   onMount(() => {
-    touchEnabled = window.matchMedia('(pointer: coarse)').matches;
+    touchEnabled = globalThis.matchMedia('(pointer: coarse)').matches;
   });
 </script>
 

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

@@ -6,9 +6,9 @@ export default class Popup extends SvelteComponent<{
     [x: string]: any;
     anchor: HTMLElement | undefined;
     class?: string | undefined;
-    position?: PopupPosition | undefined;
     open?: import("svelte/store").Writable<boolean> | undefined;
     showBackdrop?: boolean | undefined;
+    position?: PopupPosition | undefined;
     content?: HTMLElement | undefined;
     positionBaseElement?: HTMLElement | undefined;
     touchOptimized?: boolean | undefined;
@@ -61,9 +61,9 @@ declare const __propDef: {
         [x: string]: any;
         anchor: HTMLElement | undefined;
         class?: string | undefined;
-        position?: PopupPosition | undefined;
         open?: import("svelte/store").Writable<boolean> | undefined;
         showBackdrop?: boolean | undefined;
+        position?: PopupPosition | undefined;
         content?: HTMLElement | undefined;
         positionBaseElement?: HTMLElement | undefined;
         touchOptimized?: boolean | undefined;
@@ -78,7 +78,10 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
+    /**
+       * The `class` attribute on the content element.
+       * @type {string}
+       */ slots: {
         'extra-content': {
             slot: string;
         };

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";

package/package/index.js

@@ -81,7 +81,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';

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

@@ -106,7 +106,7 @@ class Group {
         controlTarget.setAttribute('aria-hidden', String(!isSelected));
 
         if (isSelected) {
-          window.setTimeout(() => {
+          globalThis.setTimeout(() => {
             try {
               controlTarget.scrollIntoView({
                 block: 'nearest',
@@ -258,7 +258,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 +279,7 @@ class Group {
         controlTarget.setAttribute('aria-hidden', String(!isTarget));
 
         if (isTarget) {
-          window.setTimeout(() => {
+          globalThis.setTimeout(() => {
             try {
               controlTarget.scrollIntoView({
                 block: 'nearest',
@@ -296,7 +296,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/util.d.ts

@@ -1,3 +1,4 @@
 export function getRandomId(prefix?: string | undefined, length?: number | undefined): string;
 export function isObject(input: any): boolean;
 export function sleep(ms?: number | undefined): Promise<void>;
+export function isURL(str: string): boolean;

package/package/services/util.js

@@ -29,7 +29,28 @@ export const isObject = (input) =>
  */
 export const sleep = (ms = 1000) =>
   new Promise((resolve) => {
-    window.setTimeout(() => {
+    globalThis.setTimeout(() => {
       resolve();
     }, ms);
   });
+
+/**
+ * Check if the given string is a URL.
+ * @param {string} str - String that might be a URL.
+ * @returns {boolean} Result.
+ */
+export const isURL = (str) => {
+  // @ts-ignore
+  if (typeof URL.canParse === 'function') {
+    // @ts-ignore
+    return URL.canParse(str);
+  }
+
+  try {
+    // eslint-disable-next-line no-new
+    new URL(str);
+    return true;
+  } catch {
+    return false;
+  }
+};

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);