@sveltia/ui 0.21.0 → 0.22.1

package/{package → dist}/components/util/app-shell.svelte.d.ts

@@ -13,7 +13,7 @@ declare const AppShell: import("svelte").Component<{
      * - Orientation of the app
      * shell’s children..
      */
-    orientation?: "horizontal" | "vertical" | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
     /**
      * - Primary slot content.
      */
@@ -24,7 +24,7 @@ type Props = {
      * - Orientation of the app
      * shell’s children..
      */
-    orientation?: "horizontal" | "vertical" | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
     /**
      * - Primary slot content.
      */

package/{package → dist}/components/util/popup.svelte

@@ -15,9 +15,9 @@
    * @property {boolean} [open] - Whether to open the popup.
    * @property {HTMLElement} [anchor] - A reference to the anchor element that opens the popup.
    * Typically a `<button>`.
-   * @property {HTMLElement | undefined} [content] - A reference to the content element.
+   * @property {HTMLElement} [content] - A reference to the content element.
    * @property {import('../../typedefs').PopupPosition} [position] - Where to show the popup.
-   * @property {HTMLElement | undefined} [positionBaseElement] - The base element of
+   * @property {HTMLElement} [positionBaseElement] - The base element of
    * {@link position}. If omitted, this will be {@link anchor}.
    * @property {boolean} [touchOptimized] - Whether to show the popup at the center of the screen on
    * mobile/tablet and ignore the defined dropdown `position`.

package/{package → dist}/locales/en.d.ts

@@ -49,6 +49,7 @@ export namespace strings {
         export let bulleted_list: string;
         export let numbered_list: string;
         export let blockquote: string;
+        export let code_block: string;
         export let bold: string;
         export let italic: string;
         export let code: string;

package/{package → dist}/locales/en.js

@@ -48,6 +48,7 @@ export const strings = {
     bulleted_list: 'Bulleted List',
     numbered_list: 'Numbered List',
     blockquote: 'Block Quote',
+    code_block: 'Code Block',
     bold: 'Bold',
     italic: 'Italic',
     code: 'Code',

package/{package → dist}/locales/ja.d.ts

@@ -49,6 +49,7 @@ export namespace strings {
         export let bulleted_list: string;
         export let numbered_list: string;
         export let blockquote: string;
+        export let code_block: string;
         export let bold: string;
         export let italic: string;
         export let code: string;

package/{package → dist}/locales/ja.js

@@ -48,6 +48,7 @@ export const strings = {
     bulleted_list: '番号なしリスト',
     numbered_list: '番号付きリスト',
     blockquote: 'ブロック引用',
+    code_block: 'コードブロック',
     bold: '太字',
     italic: '斜体',
     code: 'コード',

package/{package → dist}/styles/variables.scss

@@ -66,8 +66,8 @@
   --sui-alert-foreground-color-lightness: 75%;
   --sui-alert-background-color-saturation: 40%;
   --sui-alert-background-color-lightness: 10%;
-  --sui-alert-border-color-saturation: 38%;
-  --sui-alert-border-color-lightness: 18%;
+  --sui-alert-border-color-saturation: 48%;
+  --sui-alert-border-color-lightness: 38%;
 }
 
 :global {

package/{package → dist}/typedefs.d.ts

@@ -382,10 +382,6 @@ export type ComboboxProps = {
     onChange?: ((event: CustomEvent) => void) | undefined;
 };
 export type TextInputProps = {
-    /**
-     * - Input value.
-     */
-    value?: string | undefined;
     /**
      * - Reference to the `<input>` element.
      */
@@ -545,7 +541,7 @@ export type InputEventHandlers = {
 };
 export type PopupPosition = ("top-left" | "top-right" | "right-top" | "right-bottom" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom");
 export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
-export type TextEditorBlockType = "paragraph" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "heading-6" | "bulleted-list" | "numbered-list" | "blockquote";
+export type TextEditorBlockType = "paragraph" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "heading-6" | "bulleted-list" | "numbered-list" | "blockquote" | "code-block";
 export type TextEditorFormatType = "bold" | "italic" | "code";
 export type TextEditorInlineType = TextEditorFormatType | "link";
 export type TextEditorMode = "rich-text" | "plain-text";

package/{package → dist}/typedefs.js

@@ -1,12 +1,12 @@
 /**
  * @typedef {object} ButtonProps
- * @property {HTMLButtonElement | undefined} [element] - Reference to the `<button>` element.
+ * @property {HTMLButtonElement} [element] - Reference to the `<button>` element.
  * @property {string} [class] - The `class` attribute on the `<button>` element.
  * @property {'button' | 'submit' | 'reset'} [type] - The `type` attribute on the `<button>`
  * element.
  * @property {string} [role] - The `role` attribute on the `<button>` element.
- * @property {string | undefined} [name] - The `name` attribute on the `<button>` element.
- * @property {string | undefined} [value] - The `value` attribute on the `<button>` element.
+ * @property {string} [name] - The `name` attribute on the `<button>` element.
+ * @property {string} [value] - The `value` attribute on the `<button>` element.
  * @property {boolean} [hidden] - Whether to hide the widget. An alias of the `aria-hidden`
  * attribute.
  * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
@@ -14,15 +14,15 @@
  * @property {boolean} [readonly] - Whether to make the widget read-only. An alias of the
  * `aria-readonly` attribute used in certain roles, including `checkbox`, `listbox`, `slider` and
  * `textbox`.
- * @property {boolean | 'mixed' | undefined} [pressed] - Whether to mark the widget pressed. An
+ * @property {boolean | 'mixed'} [pressed] - Whether to mark the widget pressed. An
  * alias of the `aria-pressed` attribute.
- * @property {string | undefined} [keyShortcuts] - Keyboard shortcuts. An alias of the
+ * @property {string} [keyShortcuts] - Keyboard shortcuts. An alias of the
  * `aria-keyshortcuts` attribute. Accepts the special `Accel` key, which will be replaced with
  * `Control` or `Meta` depending on the user’s operating system.
  * @property {string} [label] - Text label displayed on the button.
- * @property {'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined} [variant] - The
+ * @property {'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link'} [variant] - The
  * style variant of the button.
- * @property {'small' | 'medium' | 'large' | undefined} [size] - The size of the button.
+ * @property {'small' | 'medium' | 'large'} [size] - The size of the button.
  * @property {boolean} [iconic] - Whether to only show an icon on the button and trim the padding.
  * @property {boolean} [pill] - Whether to make the button rounded.
  * @property {boolean} [flex] - Make the button width flexible.
@@ -49,7 +49,7 @@
  * @property {boolean} [escapeDismiss] - Whether to close the modal when the Escape key is pressed.
  * @property {boolean} [keepContent] - Whether to keep the content in the DOM tree when the modal is
  * not displayed.
- * @property {HTMLDialogElement | undefined} [dialog] - A reference to the `<dialog>` element.
+ * @property {HTMLDialogElement} [dialog] - A reference to the `<dialog>` element.
  * @property {import('svelte').Snippet} [children] - Primary slot content.
  * @property {import('svelte').Snippet} [extraContent] - Extra slot content.
  * @property {(event: CustomEvent) => void} [onOpening] - Custom `Opening` event handler.
@@ -119,7 +119,7 @@
  * `aria-required` attribute.
  * @property {boolean} [invalid] - Whether to mark the widget invalid. An alias of the
  * `aria-invalid` attribute.
- * @property {string | undefined} [value] - Selected option’s value.
+ * @property {string} [value] - Selected option’s value.
  * @property {boolean} [editable] - Whether to make the `combobox` editable.
  * @property {PopupPosition} [position] - Where to show the dropdown menu.
  * @property {import('svelte').Snippet} [children] - Primary slot content.
@@ -129,14 +129,13 @@
 
 /**
  * @typedef {object} TextInputProps
- * @property {string | undefined} [value] - Input value.
- * @property {HTMLInputElement | undefined} [element] - Reference to the `<input>` element.
+ * @property {HTMLInputElement} [element] - Reference to the `<input>` element.
  * @property {'textbox' | 'searchbox' | 'combobox' | 'spinbutton'} [role] - The `role` attribute on
  * the `<input>` element.
- * @property {string | undefined} [keyShortcuts] - Keyboard shortcuts. An alias of the
+ * @property {string} [keyShortcuts] - Keyboard shortcuts. An alias of the
  * `aria-keyshortcuts` attribute. Accepts the special `Accel` key, which will be replaced with
  * `Control` or `Meta` depending on the user’s operating system.
- * @property {string | undefined} [name] - The `name` attribute on the `<input>` element.
+ * @property {string} [name] - The `name` attribute on the `<input>` element.
  * @property {boolean} [showInlineLabel] - Whether to display `aria-label` over the `<input>`
  * element if it’s empty, just like how the HTML `placeholder` attribute works.
  * @property {'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'} [inputmode] - The
@@ -212,7 +211,8 @@
 
 /**
  * @typedef {'paragraph' | 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' |
- * 'heading-6' | 'bulleted-list' | 'numbered-list' | 'blockquote'} TextEditorBlockType
+ * 'heading-6' | 'bulleted-list' | 'numbered-list' | 'blockquote' | 'code-block'}
+ * TextEditorBlockType
  */
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -12,8 +12,8 @@
   },
   "scripts": {
     "dev": "vite dev",
-    "build": "svelte-kit sync && svelte-package -o package",
-    "build:watch": "svelte-kit sync && svelte-package -o package --watch",
+    "build": "svelte-kit sync && svelte-package",
+    "build:watch": "svelte-kit sync && svelte-package --watch",
     "preview": "vite preview",
     "prepublishOnly": "npm run build",
     "format": "prettier --write .",
@@ -28,18 +28,19 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "@lexical/code": "^0.21.0",
-    "@lexical/dragon": "^0.21.0",
-    "@lexical/history": "^0.21.0",
-    "@lexical/link": "^0.21.0",
-    "@lexical/list": "^0.21.0",
-    "@lexical/markdown": "^0.21.0",
-    "@lexical/rich-text": "^0.21.0",
-    "@lexical/selection": "^0.21.0",
-    "@lexical/table": "^0.21.0",
-    "@lexical/utils": "^0.21.0",
-    "@sveltia/utils": "^0.6.0",
-    "lexical": "^0.21.0"
+    "@lexical/code": "^0.22.0",
+    "@lexical/dragon": "^0.22.0",
+    "@lexical/history": "^0.22.0",
+    "@lexical/link": "^0.22.0",
+    "@lexical/list": "^0.22.0",
+    "@lexical/markdown": "^0.22.0",
+    "@lexical/rich-text": "^0.22.0",
+    "@lexical/selection": "^0.22.0",
+    "@lexical/table": "^0.22.0",
+    "@lexical/utils": "^0.22.0",
+    "@sveltia/utils": "^0.6.3",
+    "prismjs": "^1.29.0",
+    "lexical": "^0.22.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -47,10 +48,10 @@
   "devDependencies": {
     "@playwright/test": "^1.49.1",
     "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.10.1",
+    "@sveltejs/kit": "^2.15.0",
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "5.0.1",
-    "cspell": "^8.16.1",
+    "@sveltejs/vite-plugin-svelte": "5.0.3",
+    "cspell": "^8.17.1",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
@@ -61,33 +62,33 @@
     "postcss-html": "^1.7.0",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.2",
-    "sass": "^1.82.0",
-    "stylelint": "^16.11.0",
+    "sass": "^1.83.0",
+    "stylelint": "^16.12.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-scss": "^6.10.0",
-    "svelte": "5.11.2",
+    "svelte": "5.15.0",
     "svelte-check": "^4.1.1",
     "svelte-i18n": "^4.0.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^6.0.3",
+    "vite": "^6.0.5",
     "vitest": "^2.1.8"
   },
   "exports": {
     ".": {
-      "types": "./package/index.d.ts",
-      "svelte": "./package/index.js",
-      "default": "./package/index.js"
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
     }
   },
   "files": [
-    "package"
+    "dist"
   ],
-  "svelte": "./package/index.js",
+  "svelte": "./dist/index.js",
   "typesVersions": {
     ">4.0": {
       "index": [
-        "./package/index.d.ts"
+        "./dist/index.d.ts"
       ]
     }
   },

package/package/components/text-editor/lexical-root.svelte

@@ -1,150 +0,0 @@
-<script>
-  import { getContext, onMount } from 'svelte';
-
-  /**
-   * @typedef {object} Props
-   * @property {string | undefined} [value] - Input value.
-   * @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`
-   * attribute.
-   * @property {boolean} [readonly] - Whether to make the widget read-only. An alias of the
-   * `aria-readonly` attribute.
-   * @property {boolean} [required] - Whether to mark the widget required. An alias of the
-   * `aria-required` attribute.
-   * @property {boolean} [invalid] - Whether to mark the widget invalid. An alias of the
-   * `aria-invalid` attribute.
-   * @property {import('svelte').Snippet} [children] - Primary slot content.
-   */
-
-  /**
-   * @type {Props & Record<string, any>}
-   */
-  let {
-    /* eslint-disable prefer-const */
-    value = $bindable(),
-    class: className,
-    hidden = false,
-    disabled = false,
-    readonly = false,
-    required = false,
-    invalid = false,
-    children,
-    ...restProps
-    /* eslint-enable prefer-const */
-  } = $props();
-
-  /**
-   * Text editor state.
-   * @type {import('../../typedefs').TextEditorState}
-   */
-  const { editor, editorId, selectionBlockType, selectionInlineTypes, hasConverterError } =
-    getContext('state');
-
-  /**
-   * Reference to the Lexical editor root element.
-   * @type {HTMLElement | undefined}
-   */
-  let lexicalRoot = $state();
-
-  const editable = $derived(!(disabled || readonly));
-
-  $effect(() => {
-    $editor?.setEditable(editable);
-  });
-
-  /**
-   * Update {@link value} and other state variables whenever the editor content is updated.
-   * @param {Event} event - `Update` custom event.
-   */
-  const onUpdate = (event) => {
-    if ($hasConverterError) {
-      return;
-    }
-
-    const { detail } = /** @type {CustomEvent} */ (event);
-    const newValue = detail.value;
-
-    if (value !== newValue) {
-      value = newValue;
-    }
-
-    $selectionBlockType = detail.selectionBlockType;
-    $selectionInlineTypes = detail.selectionInlineTypes;
-  };
-
-  /**
-   * Listen to `click` events on the editor. Ignore a click on a link.
-   * @param {MouseEvent} event - `click` event.
-   */
-  const onClick = (event) => {
-    if (/** @type {HTMLElement} */ (event.target)?.matches('a')) {
-      event.preventDefault();
-    }
-  };
-
-  onMount(() => {
-    lexicalRoot?.addEventListener('Update', onUpdate);
-    lexicalRoot?.addEventListener('click', onClick);
-
-    return () => {
-      lexicalRoot?.removeEventListener('Update', onUpdate);
-      lexicalRoot?.removeEventListener('click', onClick);
-    };
-  });
-
-  $effect(() => {
-    if ($editor && lexicalRoot) {
-      $editor.setRootElement(lexicalRoot);
-    }
-  });
-</script>
-
-<div
-  bind:this={lexicalRoot}
-  {...restProps}
-  role="textbox"
-  aria-multiline="true"
-  aria-hidden={hidden}
-  aria-disabled={disabled}
-  aria-readonly={readonly}
-  aria-required={required}
-  aria-invalid={invalid}
-  class="lexical-root"
-  id="{$editorId}-lexical-root"
-  contenteditable={editable}
-  {hidden}
-></div>
-
-<style>.lexical-root {
-  border: 1px solid var(--sui-textbox-border-color);
-  border-radius: 0 0 var(--sui-textbox-border-radius) var(--sui-textbox-border-radius) !important;
-  padding: var(--sui-textbox-multiline-padding);
-  min-height: 8em;
-  color: var(--sui-textbox-foreground-color);
-  background-color: var(--sui-textbox-background-color);
-  font-family: var(--sui-textbox-font-family);
-  font-size: var(--sui-textbox-font-size);
-  line-height: var(--sui-textbox-multiline-line-height);
-}
-.lexical-root:focus-visible {
-  outline: 0;
-}
-.lexical-root[aria-invalid=true] {
-  border-color: var(--sui-error-foreground-color);
-}
-.lexical-root > :global(:first-child) {
-  margin-top: 0;
-}
-.lexical-root > :global(:last-child) {
-  margin-bottom: 0;
-}
-.lexical-root :global(strong.italic) {
-  font-style: italic;
-}
-.lexical-root :global(li.nested) {
-  list-style-type: none;
-}
-.lexical-root :global([data-lexical-text="true"]) {
-  cursor: text;
-}</style>