@sveltia/ui 0.41.2 → 0.41.5

package/dist/components/table/table.svelte

@@ -12,6 +12,7 @@
   /**
    * @typedef {object} Props
    * @property {string} [class] The `class` attribute on the wrapper element.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.
    */
 
@@ -21,13 +22,14 @@
   let {
     /* eslint-disable prefer-const */
     class: className,
+    ariaLabel = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div {...restProps} role="table" class="sui table {className}">
+<div {...restProps} role="table" class="sui table {className}" aria-label={ariaLabel}>
   {@render children?.()}
 </div>
 

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

@@ -13,6 +13,10 @@ declare const Table: import("svelte").Component<{
      * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -23,6 +27,10 @@ type Props = {
      * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/tabs/tab-list.svelte

@@ -21,6 +21,7 @@
    * @property {'horizontal' | 'vertical'} [orientation] Orientation of the widget. An alias of the
    * `aria-orientation` attribute.
    * @property {string} [name] The `data-name` attribute on the wrapper element.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.
    * @property {(event: CustomEvent) => void} [onChange] Custom `Change` event handler.
    */
@@ -35,6 +36,7 @@
     disabled = false,
     orientation = 'horizontal',
     name = undefined,
+    ariaLabel = undefined,
     children,
     onChange,
     ...restProps
@@ -100,6 +102,7 @@
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-orientation={orientation}
+  aria-label={ariaLabel}
   data-name={name || undefined}
   onInitialized={() => {
     updateIndicator();

package/dist/components/tabs/tab-list.svelte.d.ts

@@ -31,6 +31,10 @@ declare const TabList: import("svelte").Component<{
      * The `data-name` attribute on the wrapper element.
      */
     name?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -63,6 +67,10 @@ type Props = {
      * The `data-name` attribute on the wrapper element.
      */
     name?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

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

@@ -52,6 +52,15 @@ export const NODE_MAP: Record<Exclude<TextEditorBlockType | "link", "paragraph">
  * @type {Record<Exclude<TextEditorNodeType, 'paragraph'>, Transformer[]>}
  */
 export const TRANSFORMER_MAP: Record<Exclude<TextEditorNodeType, "paragraph">, Transformer[]>;
+/**
+ * List of Markdown tags that should be disabled in the editor when converting Lexical nodes to
+ * Markdown (but not when converting Markdown to Lexical nodes because we don’t want to lose any
+ * formatting). Use underscore for italic text in Markdown instead of asterisks, and use double
+ * asterisks for bold text in Markdown instead of underscores. Also, disable triple asterisks and
+ * triple underscores for bold+italic text in Markdown, which can be confusing and is not commonly
+ * used. This is to ensure that the Markdown output is more readable and consistent.
+ */
+export const DISABLED_MARKDOWN_TAGS: string[];
 import type { EditorThemeClasses } from 'lexical';
 import type { TextEditorFormatType } from '../../typedefs';
 import type { TextEditorInlineType } from '../../typedefs';

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

@@ -5,9 +5,11 @@ import {
   BOLD_ITALIC_STAR,
   BOLD_ITALIC_UNDERSCORE,
   BOLD_STAR,
+  BOLD_UNDERSCORE,
   CODE,
   HEADING,
   INLINE_CODE,
+  ITALIC_STAR,
   ITALIC_UNDERSCORE,
   LINK,
   ORDERED_LIST,
@@ -241,9 +243,31 @@ export const TRANSFORMER_MAP = {
   'code-block': [CODE],
   // TEXT_FORMAT_TRANSFORMERS
   code: [INLINE_CODE],
-  bold: [BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR], // Exclude BOLD_UNDERSCORE
-  italic: [BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, ITALIC_UNDERSCORE], // Exclude ITALIC_STAR
+  bold: [
+    BOLD_STAR,
+    // Disabled for Markdown output in `DISABLED_MARKDOWN_TAGS` below
+    BOLD_UNDERSCORE,
+    BOLD_ITALIC_STAR,
+    BOLD_ITALIC_UNDERSCORE,
+  ],
+  italic: [
+    ITALIC_UNDERSCORE,
+    // Disabled for Markdown output in `DISABLED_MARKDOWN_TAGS` below
+    ITALIC_STAR,
+    BOLD_ITALIC_STAR,
+    BOLD_ITALIC_UNDERSCORE,
+  ],
   strikethrough: [STRIKETHROUGH],
   // TEXT_MATCH_TRANSFORMERS
   link: [LINK],
 };
+
+/**
+ * List of Markdown tags that should be disabled in the editor when converting Lexical nodes to
+ * Markdown (but not when converting Markdown to Lexical nodes because we don’t want to lose any
+ * formatting). Use underscore for italic text in Markdown instead of asterisks, and use double
+ * asterisks for bold text in Markdown instead of underscores. Also, disable triple asterisks and
+ * triple underscores for bold+italic text in Markdown, which can be confusing and is not commonly
+ * used. This is to ensure that the Markdown output is more readable and consistent.
+ */
+export const DISABLED_MARKDOWN_TAGS = ['*', '__', '***', '___'];

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

@@ -3,6 +3,8 @@
 import 'prismjs';
 
 import {
+  CodeHighlightNode,
+  CodeNode,
   $createCodeNode as createCodeNode,
   $isCodeHighlightNode as isCodeHighlightNode,
   $isCodeNode as isCodeNode,
@@ -52,6 +54,7 @@ import {
 import prismComponents from 'prismjs/components';
 import {
   BLOCK_BUTTON_TYPES,
+  DISABLED_MARKDOWN_TAGS,
   EDITOR_THEME,
   NODE_MAP,
   PRISM_BASE_URL,
@@ -162,10 +165,14 @@ export const getSelectionTypes = () => {
  * @param {Transformer[]} enabledTransformers Enabled Markdown transformers.
  */
 export const onEditorUpdate = (editor, enabledTransformers) => {
+  const transformers = enabledTransformers.filter(
+    (/** @type {any} */ { tag }) => !DISABLED_MARKDOWN_TAGS.includes(tag),
+  );
+
   editor.getRootElement()?.dispatchEvent(
     new CustomEvent('Update', {
       detail: {
-        value: convertToMarkdownString(enabledTransformers)
+        value: convertToMarkdownString(transformers)
           // Remove unnecessary backslash for underscore and backslash characters
           // @see https://github.com/sveltia/sveltia-cms/issues/430
           // @see https://github.com/sveltia/sveltia-cms/issues/512
@@ -203,6 +210,7 @@ export const initEditor = ({
           .filter(([button]) => enabledButtons.includes(/** @type {TextEditorNodeType} */ (button)))
           .flatMap(([, nodes]) => nodes),
       ),
+      ...(isCodeEditor ? [CodeNode, CodeHighlightNode] : []),
       HorizontalRuleNode,
       TableNode,
       TableCellNode,

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

@@ -220,7 +220,7 @@
       id="{id}-url"
       bind:value={anchorURL}
       flex
-      aria-label="URL"
+      aria-label={_('_sui.text_editor.url')}
       onkeydown={(event) => {
         onInputKeyDown(event);
       }}
@@ -234,6 +234,7 @@
         id="{id}-text"
         bind:value={anchorText}
         flex
+        aria-label={_('_sui.text_editor.text')}
         onkeydown={(event) => {
           onInputKeyDown(event);
         }}

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

@@ -39,7 +39,7 @@
     readonly = false,
     required = false,
     invalid = false,
-    'aria-label': ariaLabel,
+    ariaLabel = undefined,
     children,
     oninput,
     ...restProps

package/dist/components/toolbar/toolbar.svelte

@@ -18,6 +18,7 @@
    * @property {'horizontal' | 'vertical'} [orientation] Orientation of the widget. An alias of the
    * `aria-orientation` attribute.
    * @property {'primary' | 'secondary'} [variant] The style variant of the toolbar.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.
    */
 
@@ -31,6 +32,7 @@
     disabled = false,
     orientation = 'horizontal',
     variant = undefined,
+    ariaLabel = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
@@ -45,6 +47,7 @@
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-orientation={orientation}
+  aria-label={ariaLabel}
 >
   <div role="none" class="inner" inert={disabled}>
     {@render children?.()}

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

@@ -31,6 +31,10 @@ declare const Toolbar: import("svelte").Component<{
      * The style variant of the toolbar.
      */
     variant?: "primary" | "secondary" | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -59,6 +63,10 @@ type Props = {
      * The style variant of the toolbar.
      */
     variant?: "primary" | "secondary" | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/util/group.svelte

@@ -14,6 +14,7 @@
    * @property {boolean} [hidden] Whether to hide the widget.
    * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
    * attribute.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.
    */
 
@@ -25,6 +26,7 @@
     class: className,
     hidden = false,
     disabled = false,
+    ariaLabel = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
@@ -38,6 +40,7 @@
   {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
+  aria-label={ariaLabel}
 >
   <div role="none" class="inner" inert={disabled}>
     {@render children?.()}

package/dist/components/util/group.svelte.d.ts

@@ -21,6 +21,10 @@ declare const Group: import("svelte").Component<{
      * attribute.
      */
     disabled?: boolean | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -40,6 +44,10 @@ type Props = {
      * attribute.
      */
     disabled?: boolean | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/locales/en.yaml

@@ -1,45 +1,85 @@
+# Dialog action button labels
 ok: OK
 cancel: Cancel
 close: Close
+
+# Button to clear content, e.g. search input or calendar date
 clear: Clear
+
+# Text editor dialog buttons for link/image insertion
 insert: Insert
 update: Update
 remove: Remove
+
+# Combobox dropdown toggle button aria-labels
 collapse: Collapse
 expand: Expand
+
+# Infobar/toast dismiss button label
 dismiss: Dismiss
+
+# Calendar component
 calendar:
+  # View switcher group aria-labels and navigation button aria-labels
   year: Year
   previous_decade: Previous Decade
   next_decade: Next Decade
   month: Month
   previous_month: Previous Month
   next_month: Next Month
+  # “Today” button label in footer
   today: Today
+
+# Split button component
 split_button:
+  # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
   x_options: "{$name} Options"
+  # Dropdown toggle aria-label
   more_options: More Options
+
+# Combobox component
 combobox:
+  # Placeholder when no option is selected
   select_an_option: Select an option…
+  # Filter input aria-label
   filter_options: Filter Options
+  # Empty state message when filter has no matches
   no_matching_options: No matching options found
+
+# Number input component
 number_input:
-  decrease: Decrease
+  # Spin button aria-labels for incrementing/decrementing the number value
   increase: Increase
+  decrease: Decrease
+
+# Password input component
 password_input:
+  # Visibility toggle button aria-labels
   show_password: Show Password
   hide_password: Hide Password
+
+# Secret input component (API keys, tokens, etc.)
 secret_input:
+  # Visibility toggle button aria-labels
   show_secret: Show Secret
   hide_secret: Hide Secret
+
+# Select tags component (multi-select)
 select_tags:
-  selected_options: Selected options
+  # Listbox aria-label
+  selected_options: Selected Options
+  # Remove button aria-label, e.g. “Remove Option 1”
   remove_x: "Remove {$name}"
+
+# Text editor component
 text_editor:
+  # Toolbar aria-labels
   text_editor: Text Editor
   code_editor: Code Editor
+  # Block style menu button and menu aria-labels
   text_style_options: Text Style Options
   show_text_style_options: Show Text Style Options
+  # Block style menu items
   paragraph: Paragraph
   heading_1: Heading 1
   heading_2: Heading 2
@@ -51,16 +91,23 @@ text_editor:
   numbered_list: Numbered List
   blockquote: Block Quote
   code_block: Code Block
+  # Inline style button aria-labels
   bold: Bold
   italic: Italic
   strikethrough: Strikethrough
   code: Code
   link: Link
+  # Link dialog title
   insert_link: Insert Link
   update_link: Update Link
+  # Link dialog input field labels
   text: Text
   url: URL
+  # Markdown mode toggle button aria-label
   edit_in_markdown: Edit in Markdown
-  converter_error: There was an error while enabling rich text mode. Please use the plain text editor instead.
+  # Error message when rich text conversion fails
+  converter_error: Unable to enable rich text mode. Please use the plain text editor instead.
+  # Language selector aria-label
   language: Language
+  # Plain text mode option in language selector
   plain_text: Plain Text

package/dist/locales/ja.yaml

@@ -1,45 +1,85 @@
+# 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: 前の 10 年
   next_decade: 次の 10 年
   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:
-  decrease: 減らす
+  # 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
@@ -51,16 +91,23 @@ text_editor:
   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: マークダウンで編集
-  converter_error: リッチテキストモードを有効化中に問題が発生しました。代わりにプレーンテキストエディターを使用してください。
+  # 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/typedefs.d.ts

@@ -397,6 +397,10 @@ export type ComboboxProps = {
      * Use `-1` to always hide the filter.
      */
     filterThreshold?: number | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -490,7 +494,7 @@ export type TextInputProps = {
     /**
      * `aria-label` attribute.
      */
-    "aria-label"?: string | undefined;
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/typedefs.js

@@ -139,6 +139,7 @@
  * @property {PopupPosition} [position] Where to show the dropdown menu.
  * @property {number} [filterThreshold] Number of items to start showing the filter. Default: `5`.
  * Use `-1` to always hide the filter.
+ * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
  * @property {Snippet} [children] Primary slot content.
  * @property {Snippet} [chevronIcon] Chevron icon slot content.
  * @property {(event: CustomEvent) => void} [onChange] Custom `change` event handler.
@@ -174,7 +175,7 @@
  * `aria-required` attribute.
  * @property {boolean} [invalid] Whether to mark the widget invalid. An alias of the `aria-invalid`
  * attribute.
- * @property {string} [aria-label] `aria-label` attribute.
+ * @property {string} [ariaLabel] `aria-label` attribute.
  * @property {Snippet} [children] Primary slot content.
  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.41.2",
+  "version": "0.41.5",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -53,9 +53,9 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.69.1",
+    "@sveltejs/kit": "^2.69.2",
     "@sveltejs/package": "^2.5.8",
-    "@sveltejs/vite-plugin-svelte": "^7.1.4",
+    "@sveltejs/vite-plugin-svelte": "^7.2.0",
     "@vitest/coverage-v8": "^4.1.10",
     "cspell": "^10.0.1",
     "eslint": "^9.39.4",
@@ -77,7 +77,7 @@
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.2.0",
     "svelte": "^5.56.4",
-    "svelte-check": "^4.7.1",
+    "svelte-check": "^4.7.2",
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",
     "vite": "^8.1.3",