@sveltia/ui 0.20.2 → 0.22.0

package/{package → dist}/components/button/button.svelte

@@ -45,7 +45,7 @@
 <button
   bind:this={element}
   {...restProps}
-  class="sui button {variant ?? ''} {size} {className}"
+  class="sui button {variant} {size} {className}"
   class:iconic
   class:pill
   class:flex

package/{package → dist}/components/button/select-button-group.svelte

@@ -82,6 +82,9 @@
   border-top-right-radius: 4px !important;
   border-bottom-right-radius: 4px !important;
 }
+.select-button-group[aria-invalid=true] :global(button) {
+  border-color: var(--sui-error-border-color);
+}
 .select-button-group :global(button[aria-checked="true"]) {
   color: var(--sui-highlight-foreground-color);
   background-color: var(--sui-selected-background-color);

package/{package → dist}/components/calendar/calendar.svelte

@@ -11,7 +11,7 @@
 
   /**
    * @typedef {object} Props
-   * @property {string | undefined} [value] - Date.
+   * @property {string} [value] - Date.
    */
 
   /**

package/{package → dist}/components/checkbox/checkbox.svelte

@@ -19,7 +19,7 @@
    * `aria-invalid` attribute.
    * @property {boolean | 'mixed'} [checked] - Whether to check the widget. An alias of the
    * `aria-checked` attribute.
-   * @property {string | undefined} [label] - Text label displayed next to the checkbox.
+   * @property {string} [label] - Text label displayed next to the checkbox.
    * @property {string} [aria-label] - `aria-label` attribute.
    * @property {import('svelte').Snippet} [checkIcon] - Check icon slot content.
    */
@@ -88,7 +88,7 @@
       {disabled}
       {readonly}
       {required}
-      {invalid}
+      aria-invalid={invalid}
       aria-checked={checked}
       aria-label={ariaLabel || undefined}
       aria-labelledby={ariaLabel ? undefined : `${id}-label`}
@@ -174,6 +174,13 @@
 .checkbox :global(button[aria-checked="false"]) {
   color: transparent;
 }
+.checkbox :global(button[aria-invalid="true"]) {
+  border-color: var(--sui-error-border-color);
+  color: var(--sui-error-foreground-color);
+}
+.checkbox :global(button[aria-checked="true"][aria-invalid="true"]) {
+  background-color: var(--sui-error-background-color);
+}
 .checkbox label {
   cursor: inherit;
 }

package/{package → dist}/components/grid/grid.svelte

@@ -13,7 +13,7 @@
    * @property {boolean} [selected] - Whether to allow selecting more than one `<GridRow>` and/or
    * `<GridCell>`. An alias of the `aria-multiselectable` attribute.
    * @property {boolean} [clickToSelect] - Whether to select a row by clicking on it.
-   * @property {HTMLElement | undefined} [element] - A reference to the wrapper element.
+   * @property {HTMLElement} [element] - A reference to the wrapper element.
    * @property {import('svelte').Snippet} [children] - Primary slot content.
    * @property {(event: CustomEvent) => void} [onChange] - Custom `Change` event handler.
    */

package/{package → dist}/components/listbox/listbox.svelte

@@ -102,6 +102,9 @@
   margin: 4px;
   background-color: var(--sui-control-border-color);
 }
+[role=listbox][aria-invalid=true] {
+  border-color: var(--sui-error-border-color);
+}
 [role=listbox]:global(.tabs) {
   padding: 0;
   border-width: 0 1px 0 0;

package/{package → dist}/components/menu/menu-button.svelte

@@ -10,7 +10,7 @@
 
   /**
    * @typedef {object} Props
-   * @property {HTMLElement | undefined} [popupPositionBaseElement] - The base element of
+   * @property {HTMLElement} [popupPositionBaseElement] - The base element of
    * {@link popupPosition}. If omitted, this will be {@link buttonComponent}.
    */
 

package/{package → dist}/components/progressbar/progressbar.svelte

@@ -42,9 +42,12 @@
 
 <style>.progressbar {
   overflow: hidden;
+  border-width: var(--sui-progressbar-border-width, 1px);
+  border-style: var(--sui-progressbar-border-style, solid);
+  border-color: var(--sui-progressbar-border-color, var(--sui-control-border-color));
   border-radius: var(--sui-progressbar-border-radius, 16px);
   width: var(--sui-progressbar-width, 240px);
-  height: var(--sui-progressbar-height, 8px);
+  height: var(--sui-progressbar-height, 10px);
   background-color: var(--sui-progressbar-background-color, var(--sui-secondary-background-color));
 }
 .progressbar div {

package/{package → dist}/components/radio/radio-group.svelte

@@ -86,6 +86,15 @@
     gap: 8px;
   }
 }
+.radio-group[aria-invalid=true] :global(button) {
+  border-color: var(--sui-error-border-color);
+}
+.radio-group[aria-invalid=true] :global(button[aria-checked="true"]) {
+  border-color: var(--sui-error-border-color);
+}
+.radio-group[aria-invalid=true] :global(button[aria-checked="true"]::before) {
+  background-color: var(--sui-error-border-color);
+}
 
 .inner {
   display: contents;

package/{package → dist}/components/radio/radio.svelte

@@ -17,9 +17,9 @@
    * attribute.
    * @property {boolean} [checked] - Whether to check the widget. An alias of the `aria-checked`
    * attribute.
-   * @property {string | undefined} [name] - The `name` attribute on the `<button>` element.
-   * @property {string | undefined} [value] - The `value` attribute on the `<button>` element.
-   * @property {string | undefined} [label] - Text label displayed next to the checkbox.
+   * @property {string} [name] - The `name` attribute on the `<button>` element.
+   * @property {string} [value] - The `value` attribute on the `<button>` element.
+   * @property {string} [label] - Text label displayed next to the checkbox.
    * @property {import('svelte').Snippet} [children] - Primary slot content.
    * @property {import('svelte').Snippet} [default] - Default slot content.
    * @property {(event: CustomEvent) => void} [onChange] - Custom `Change` event handler.

package/{package → dist}/components/select/combobox.svelte

@@ -122,8 +122,9 @@
       aria-hidden={hidden}
       aria-disabled={disabled}
       aria-readonly={readonly}
+      aria-required={required}
+      aria-invalid={invalid}
       aria-haspopup="listbox"
-      aria-activedescendant="selected-option"
     >
       <div role="none" class="label">
         {value !== undefined ? label : $_('_sui.combobox.select_an_option')}
@@ -144,7 +145,6 @@
       aria-controls="{id}-popup"
       aria-expanded={isPopupOpen}
       aria-haspopup="listbox"
-      aria-activedescendant="selected-option"
     />
   {/if}
   <Button
@@ -282,6 +282,10 @@
 .combobox div[role=combobox]:hover, .combobox div[role=combobox]:focus {
   background-color: var(--sui-hover-background-color);
 }
+.combobox div[role=combobox][aria-invalid=true] {
+  border-color: var(--sui-error-border-color);
+  background-color: var(--sui-error-background-color);
+}
 .combobox div[role=combobox] .label {
   display: block;
   overflow: hidden;

package/{package → dist}/components/select/select-tags.svelte

@@ -10,7 +10,7 @@
    * @property {{ label: string, value: string, searchValue?: string }[]} options - Available
    * options.
    * @property {string[]} [values] - Selected option values.
-   * @property {number | undefined} [max] - Maximum number of selectable options.
+   * @property {number} [max] - Maximum number of selectable options.
    * @property {string} [class] - The `class` attribute on the wrapper element.
    * @property {boolean} [hidden] - Whether to hide the widget.
    * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`

package/{package → dist}/components/slider/slider.svelte

@@ -16,8 +16,8 @@
    * @property {number} [min] - Minimum allowed value. An alias of the `aria-valuemin` attribute.
    * @property {number} [max] - Maximum allowed value. An alias of the `aria-valuemax` attribute.
    * @property {string} [sliderLabel] - `aria-label` on the slider.
-   * @property {[number, number] | undefined} [values] - Value list for a multi-thumb slider.
-   * @property {[string, string] | undefined} [sliderLabels] - `aria-label` on a multi-thumb slider.
+   * @property {[number, number]} [values] - Value list for a multi-thumb slider.
+   * @property {[string, string]} [sliderLabels] - `aria-label` on a multi-thumb slider.
    * @property {number} [step] - Step option like `<input type="range">`.
    * @property {(string[] | number[])} [optionLabels] - Visible labels on the slider.
    * @property {boolean} [flex] - Make the text input container flexible.
@@ -304,6 +304,7 @@
   class="sui slider {className}"
   class:disabled
   class:readonly
+  class:invalid
   {hidden}
 >
   <div bind:this={base} role="none" class="base" onpointerdown={(event) => onPointerDown(event)}>
@@ -316,7 +317,7 @@
     <div
       role="slider"
       tabindex={disabled ? -1 : 0}
-      aria-label={multiThumb ? sliderLabels?.[0] || '' : sliderLabel}
+      aria-label={multiThumb ? sliderLabels?.[0] : sliderLabel}
       aria-hidden={hidden}
       aria-disabled={disabled}
       aria-readonly={readonly}
@@ -332,7 +333,7 @@
       <div
         role="slider"
         tabindex={disabled ? -1 : 0}
-        aria-label={sliderLabels?.[1] || ''}
+        aria-label={sliderLabels?.[1]}
         aria-hidden={hidden}
         aria-disabled={disabled}
         aria-readonly={readonly}
@@ -363,7 +364,7 @@
   position: relative;
   display: inline-block;
   margin: var(--sui-focus-ring-width);
-  padding: var(--sui-checkbox-height) calc(var(--sui-checkbox-height) / 2);
+  padding: 4px 6px;
   touch-action: none;
 }
 .slider:hover .base-bar {
@@ -375,7 +376,7 @@
 
 .base {
   position: relative;
-  width: var(--sui-slider-base-width, calc(var(--sui-checkbox-height) * 10));
+  width: var(--sui-slider-base-width, 240px);
   height: calc(var(--sui-checkbox-height) / 2);
   cursor: pointer;
 }
@@ -385,7 +386,7 @@
   border-style: solid;
   border-color: var(--sui-control-border-color);
   border-radius: var(--sui-checkbox-height);
-  background-color: var(--sui-button-background-color);
+  background-color: var(--sui-slider-background-color, var(--sui-secondary-background-color));
   transition: all 200ms;
   width: 100%;
   height: 100%;
@@ -398,6 +399,9 @@
   border-radius: var(--sui-checkbox-height);
   background-color: var(--sui-primary-accent-color-light);
 }
+.invalid .slider-bar {
+  background-color: var(--sui-error-border-color);
+}
 
 [role=slider] {
   position: absolute;
@@ -410,6 +414,9 @@
   cursor: pointer;
   transform: translate(calc((var(--sui-checkbox-height) / 2 - 1px) * -1), calc((var(--sui-checkbox-height) / 4 - 1px) * -1));
 }
+.invalid [role=slider] {
+  border-color: var(--sui-error-border-color);
+}
 
 .label {
   position: absolute;

package/{package → dist}/components/switch/switch.svelte

@@ -7,7 +7,7 @@
 <script>
   /**
    * @typedef {object} Props
-   * @property {string | undefined} [label] - Text label displayed next to the switch.
+   * @property {string} [label] - Text label displayed next to the switch.
    * @property {string} [class] - The `class` attribute on the wrapper element.
    * @property {boolean} [hidden] - Whether to hide the widget.
    * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
@@ -90,6 +90,9 @@
   -webkit-user-select: none;
   user-select: none;
 }
+button[aria-invalid=true] span {
+  background-color: var(--sui-error-border-color) !important;
+}
 button:hover[aria-checked=false] span {
   background-color: var(--sui-hover-background-color);
 }

package/{package → dist}/components/tabs/tab-list.svelte

@@ -16,7 +16,7 @@
    * attribute.
    * @property {'horizontal' | 'vertical'} [orientation] - Orientation of the widget. An alias of
    * the `aria-orientation` attribute.
-   * @property {string | undefined} [name] - The `data-name` attribute on the wrapper element.
+   * @property {string} [name] - The `data-name` attribute on the wrapper element.
    * @property {import('svelte').Snippet} [children] - Primary slot content.
    * @property {(event: CustomEvent) => void} [onChange] - Custom `Change` event handler.
    */

package/{package → dist}/components/text-editor/core.d.ts

@@ -1,3 +1,5 @@
-export function initEditor(): import("lexical").LexicalEditor;
+export function initEditor({ components }?: {
+    components?: import("../../typedefs").TextEditorComponent[] | undefined;
+} | undefined): import("lexical").LexicalEditor;
 export function convertMarkdown(editor: import("lexical").LexicalEditor, value: string): Promise<void>;
 export function focusEditor(editor: import("lexical").LexicalEditor): Promise<void>;

package/{package → dist}/components/text-editor/core.js

@@ -1,4 +1,10 @@
-import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import {
+  CodeHighlightNode,
+  CodeNode,
+  $isCodeHighlightNode as isCodeHighlightNode,
+  $isCodeNode as isCodeNode,
+  registerCodeHighlighting,
+} from '@lexical/code';
 import { registerDragonSupport } from '@lexical/dragon';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
 import {
@@ -31,6 +37,7 @@ import {
 } from '@lexical/rich-text';
 import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
 import { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
+import { sleep } from '@sveltia/utils/misc';
 import {
   COMMAND_PRIORITY_NORMAL,
   ElementNode,
@@ -41,8 +48,11 @@ import {
   $getSelection as getSelection,
   $isRangeSelection as isRangeSelection,
 } from 'lexical';
+import prismComponents from 'prismjs/components';
 import { blockButtonTypes, textFormatButtonTypes } from '.';
 
+const allTransformers = [...TRANSFORMERS];
+
 /**
  * Lexical editor configuration.
  * @type {import('lexical').CreateEditorArgs}
@@ -74,31 +84,66 @@ const editorConfig = {
         listitem: 'nested',
       },
     },
+    code: 'code-block',
+    // https://github.com/facebook/lexical/blob/main/packages/lexical-website/docs/getting-started/theming.md
+    codeHighlight: {
+      atrule: 'token atrule',
+      attr: 'token attr',
+      boolean: 'token boolean',
+      builtin: 'token builtin',
+      cdata: 'token cdata',
+      char: 'token char',
+      class: 'token class',
+      'class-name': 'token class-name',
+      comment: 'token comment',
+      constant: 'token constant',
+      deleted: 'token deleted',
+      doctype: 'token doctype',
+      entity: 'token entity',
+      function: 'token function',
+      important: 'token important',
+      inserted: 'token inserted',
+      keyword: 'token keyword',
+      namespace: 'token namespace',
+      number: 'token number',
+      operator: 'token operator',
+      prolog: 'token prolog',
+      property: 'token property',
+      punctuation: 'token punctuation',
+      regex: 'token regex',
+      selector: 'token selector',
+      string: 'token string',
+      symbol: 'token symbol',
+      tag: 'token tag',
+      url: 'token url',
+      variable: 'token variable',
+    },
   },
 };
 
 /**
- * Listen to changes on the editor.
- * @param {import('lexical').LexicalEditor} editor - Editor instance.
+ * Get the current selection’s block and inline level types.
+ * @returns {{ blockType: import('../../typedefs').TextEditorBlockType,
+ * inlineTypes: import('../../typedefs').TextEditorInlineType[] }} Types.
  */
-const onEditorUpdate = (editor) => {
+const getSelectionTypes = () => {
   const selection = getSelection();
 
   if (!isRangeSelection(selection)) {
-    return;
+    return { blockType: 'paragraph', inlineTypes: [] };
   }
 
   const anchor = selection.anchor.getNode();
   /** @type {ElementNode | null} */
   let parent = null;
   /** @type {import('../../typedefs').TextEditorInlineType[]} */
-  const selectionInlineTypes = textFormatButtonTypes.filter((type) => selection.hasFormat(type));
+  const inlineTypes = textFormatButtonTypes.filter((type) => selection.hasFormat(type));
 
   if (anchor.getType() !== 'root') {
     parent = anchor instanceof ElementNode ? anchor : getNearestNodeOfType(anchor, ElementNode);
 
     if (isLinkNode(parent)) {
-      selectionInlineTypes.push('link');
+      inlineTypes.push('link');
       parent = getNearestNodeOfType(parent, ElementNode);
     }
 
@@ -107,7 +152,7 @@ const onEditorUpdate = (editor) => {
     }
   }
 
-  const selectionBlockType = /** @type {import('../../typedefs').TextEditorBlockType} */ (
+  const blockType = /** @type {import('../../typedefs').TextEditorBlockType} */ (
     (() => {
       if (!parent) {
         return 'paragraph';
@@ -125,6 +170,10 @@ const onEditorUpdate = (editor) => {
         return 'blockquote';
       }
 
+      if (isCodeNode(parent) || isCodeHighlightNode(parent)) {
+        return 'code-block';
+      }
+
       const type = parent.getType();
 
       if (blockButtonTypes.includes(/** @type {any} */ (type))) {
@@ -135,15 +184,25 @@ const onEditorUpdate = (editor) => {
     })()
   );
 
+  return { blockType, inlineTypes };
+};
+
+/**
+ * Listen to changes made on the editor and trigger the Update event.
+ * @param {import('lexical').LexicalEditor} editor - Editor instance.
+ */
+const onEditorUpdate = (editor) => {
+  const { blockType, inlineTypes } = getSelectionTypes();
+
   editor.getRootElement()?.dispatchEvent(
     new CustomEvent('Update', {
       detail: {
         value: convertToMarkdownString(
           // Use underscores for italic text in Markdown instead of asterisks
-          TRANSFORMERS.filter((/** @type {any} */ { tag }) => tag !== '*'),
+          allTransformers.filter((/** @type {any} */ { tag }) => tag !== '*'),
         ),
-        selectionBlockType,
-        selectionInlineTypes,
+        selectionBlockType: blockType,
+        selectionInlineTypes: inlineTypes,
       },
     }),
   );
@@ -151,15 +210,29 @@ const onEditorUpdate = (editor) => {
 
 /**
  * Initialize the Lexical editor.
+ * @param {object} [options] - Options.
+ * @param {import('../../typedefs').TextEditorComponent[]} [options.components] - Editor components.
  * @returns {import('lexical').LexicalEditor} Editor instance.
  */
-export const initEditor = () => {
+export const initEditor = ({ components } = {}) => {
+  components?.forEach(({ node, transformer }) => {
+    /** @type {any[]} */ (editorConfig.nodes).unshift(node);
+    allTransformers.unshift(transformer);
+  });
+
   const editor = createEditor(editorConfig);
 
   registerRichText(editor);
   registerDragonSupport(editor);
   registerHistory(editor, createEmptyHistoryState(), 1000);
 
+  registerCodeHighlighting(editor, {
+    defaultLanguage: 'plain',
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    tokenize: (code, language = 'plain') =>
+      window.Prism.tokenize(code, window.Prism.languages[language] ?? window.Prism.languages.plain),
+  });
+
   editor.registerCommand(
     TOGGLE_LINK_COMMAND,
     (payload) => {
@@ -250,26 +323,47 @@ export const initEditor = () => {
  * @returns {Promise<void>} Nothing.
  * @throws {Error} Failed to convert the value to Lexical nodes.
  */
-export const convertMarkdown = async (editor, value) =>
-  new Promise((resolve, reject) => {
+export const convertMarkdown = async (editor, value) => {
+  // Load Prism language support on demand; the `loadLanguages` Prism utility method cannot be used
+  await Promise.all(
+    [...value.matchAll(/^```(?<lang>.+?)\n/gm)].map(async ({ groups: { lang } = {} }) => {
+      if (!(lang in window.Prism.languages) && lang in prismComponents.languages) {
+        try {
+          await import(
+            // eslint-disable-next-line jsdoc/no-bad-blocks
+            /* @vite-ignore */ `https://unpkg.com/prismjs@1.29.0/components/prism-${lang}.min.js`
+          );
+        } catch {
+          //
+        }
+      }
+    }),
+  );
+
+  return new Promise((resolve, reject) => {
     editor.update(() => {
       try {
-        convertFromMarkdownString(value, TRANSFORMERS);
+        convertFromMarkdownString(value, allTransformers);
         resolve(void 0);
-      } catch {
-        reject(new Error('Failed to convert Markdown'));
+      } catch (ex) {
+        reject(new Error('Failed to convert Markdown', { cause: ex }));
       }
     });
   });
+};
 
 /**
  * Move focus to the editor so the user can start editing immediately.
  * @param {import('lexical').LexicalEditor} editor - Editor instance.
  * @returns {Promise<void>} Nothing.
  */
-export const focusEditor = async (editor) =>
-  new Promise((resolve) => {
+export const focusEditor = async (editor) => {
+  await sleep(100);
+  editor.getRootElement()?.focus();
+
+  return new Promise((resolve) => {
     editor.focus(() => {
       resolve(undefined);
     });
   });
+};

package/{package → dist}/components/text-editor/index.js

@@ -73,6 +73,11 @@ export const availableButtons = {
     icon: 'format_quote',
     inline: false,
   },
+  'code-block': {
+    labelKey: 'code_block',
+    icon: 'code_blocks',
+    inline: false,
+  },
 };
 /**
  * @type {import('../../typedefs').TextEditorFormatType[]}
@@ -96,4 +101,5 @@ export const blockButtonTypes = [
   'bulleted-list',
   'numbered-list',
   'blockquote',
+  'code-block',
 ];