@sveltia/ui 0.21.0 → 0.22.1

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

@@ -0,0 +1,288 @@
+<script>
+  import { getContext, onMount } from 'svelte';
+
+  /**
+   * @typedef {object} Props
+   * @property {string} [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-border-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(.code-block) {
+  position: relative;
+  display: block;
+  padding: 8px 8px 8px 56px;
+  background-color: var(--sui-code-background-color);
+  overflow-x: auto;
+  white-space: pre;
+}
+.lexical-root :global(.code-block:not(:first-child)) {
+  margin-top: 1em;
+}
+.lexical-root :global(.code-block:not(:last-child)) {
+  margin-bottom: 1em;
+}
+.lexical-root :global(.code-block::before) {
+  position: absolute;
+  inset: 0 auto 0 0;
+  content: attr(data-gutter);
+  padding: 8px;
+  min-width: 40px;
+  color: var(--sui-tertiary-foreground-color);
+  background-color: var(--sui-secondary-background-color);
+  text-align: right;
+}
+.lexical-root :global([data-lexical-text=true]) {
+  cursor: text;
+}
+
+:root[data-theme=light] .lexical-root :global(.token.comment),
+:root[data-theme=light] .lexical-root :global(.token.prolog),
+:root[data-theme=light] .lexical-root :global(.token.doctype),
+:root[data-theme=light] .lexical-root :global(.token.cdata) {
+  color: slategray;
+}
+:root[data-theme=light] .lexical-root :global(.token.punctuation) {
+  color: #999;
+}
+:root[data-theme=light] .lexical-root :global(.token.namespace) {
+  opacity: 0.7;
+}
+:root[data-theme=light] .lexical-root :global(.token.property),
+:root[data-theme=light] .lexical-root :global(.token.tag),
+:root[data-theme=light] .lexical-root :global(.token.boolean),
+:root[data-theme=light] .lexical-root :global(.token.number),
+:root[data-theme=light] .lexical-root :global(.token.constant),
+:root[data-theme=light] .lexical-root :global(.token.symbol),
+:root[data-theme=light] .lexical-root :global(.token.deleted) {
+  color: #905;
+}
+:root[data-theme=light] .lexical-root :global(.token.selector),
+:root[data-theme=light] .lexical-root :global(.token.attr-name),
+:root[data-theme=light] .lexical-root :global(.token.string),
+:root[data-theme=light] .lexical-root :global(.token.char),
+:root[data-theme=light] .lexical-root :global(.token.builtin),
+:root[data-theme=light] .lexical-root :global(.token.inserted) {
+  color: #690;
+}
+:root[data-theme=light] .lexical-root :global(.token.operator),
+:root[data-theme=light] .lexical-root :global(.token.entity),
+:root[data-theme=light] .lexical-root :global(.token.url),
+:root[data-theme=light] .lexical-root :global(.language-css) :global(.token.string),
+:root[data-theme=light] .lexical-root :global(.style) :global(.token.string) {
+  color: #9a6e3a;
+}
+:root[data-theme=light] .lexical-root :global(.token.atrule),
+:root[data-theme=light] .lexical-root :global(.token.attr-value),
+:root[data-theme=light] .lexical-root :global(.token.keyword) {
+  color: #07a;
+}
+:root[data-theme=light] .lexical-root :global(.token.function),
+:root[data-theme=light] .lexical-root :global(.token.class-name) {
+  color: #dd4a68;
+}
+:root[data-theme=light] .lexical-root :global(.token.regex),
+:root[data-theme=light] .lexical-root :global(.token.important),
+:root[data-theme=light] .lexical-root :global(.token.variable) {
+  color: #e90;
+}
+
+:root[data-theme=dark] .lexical-root :global(.token.comment),
+:root[data-theme=dark] .lexical-root :global(.token.block-comment),
+:root[data-theme=dark] .lexical-root :global(.token.prolog),
+:root[data-theme=dark] .lexical-root :global(.token.doctype),
+:root[data-theme=dark] .lexical-root :global(.token.cdata) {
+  color: #999;
+}
+:root[data-theme=dark] .lexical-root :global(.token.punctuation) {
+  color: #ccc;
+}
+:root[data-theme=dark] .lexical-root :global(.token.tag),
+:root[data-theme=dark] .lexical-root :global(.token.attr-name),
+:root[data-theme=dark] .lexical-root :global(.token.namespace),
+:root[data-theme=dark] .lexical-root :global(.token.deleted) {
+  color: #e2777a;
+}
+:root[data-theme=dark] .lexical-root :global(.token.function-name) {
+  color: #6196cc;
+}
+:root[data-theme=dark] .lexical-root :global(.token.boolean),
+:root[data-theme=dark] .lexical-root :global(.token.number),
+:root[data-theme=dark] .lexical-root :global(.token.function) {
+  color: #f08d49;
+}
+:root[data-theme=dark] .lexical-root :global(.token.property),
+:root[data-theme=dark] .lexical-root :global(.token.class-name),
+:root[data-theme=dark] .lexical-root :global(.token.constant),
+:root[data-theme=dark] .lexical-root :global(.token.symbol) {
+  color: #f8c555;
+}
+:root[data-theme=dark] .lexical-root :global(.token.selector),
+:root[data-theme=dark] .lexical-root :global(.token.important),
+:root[data-theme=dark] .lexical-root :global(.token.atrule),
+:root[data-theme=dark] .lexical-root :global(.token.keyword),
+:root[data-theme=dark] .lexical-root :global(.token.builtin) {
+  color: #cc99cd;
+}
+:root[data-theme=dark] .lexical-root :global(.token.string),
+:root[data-theme=dark] .lexical-root :global(.token.char),
+:root[data-theme=dark] .lexical-root :global(.token.attr-value),
+:root[data-theme=dark] .lexical-root :global(.token.regex),
+:root[data-theme=dark] .lexical-root :global(.token.variable) {
+  color: #7ec699;
+}
+:root[data-theme=dark] .lexical-root :global(.token.operator),
+:root[data-theme=dark] .lexical-root :global(.token.entity),
+:root[data-theme=dark] .lexical-root :global(.token.url) {
+  color: #67cdcc;
+}
+:root[data-theme=dark] .lexical-root :global(.token.important),
+:root[data-theme=dark] .lexical-root :global(.token.bold) {
+  font-weight: bold;
+}
+:root[data-theme=dark] .lexical-root :global(.token.italic) {
+  font-style: italic;
+}
+:root[data-theme=dark] .lexical-root :global(.token.entity) {
+  cursor: help;
+}
+:root[data-theme=dark] .lexical-root :global(.token.inserted) {
+  color: green;
+}</style>

package/{package → dist}/components/text-editor/text-editor.svelte

@@ -17,7 +17,7 @@
 
   /**
    * @typedef {object} Props
-   * @property {string | undefined} [value] - Input value.
+   * @property {string} [value] - Input value.
    * @property {boolean} [flex] - Make the text input container flexible.
    * @property {import('../../typedefs').TextEditorMode[]} [modes] - Enabled modes.
    * @property {(import('../../typedefs').TextEditorBlockType |
@@ -97,12 +97,14 @@
 
     // Avoid a cycle dependency & infinite loop
     untrack(() => {
-      if (inputValue !== newValue) {
+      const hasChange = inputValue !== newValue;
+
+      if (hasChange) {
         inputValue = newValue ?? '';
+      }
 
-        if ($useRichText) {
-          convertMarkdown();
-        }
+      if ($useRichText && (hasChange || $editor?.getEditorState().isEmpty())) {
+        convertMarkdown();
       }
     });
   });

package/{package → dist}/components/text-editor/toolbar/toggle-block-menu-item.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { $createCodeNode as createCodeNode } from '@lexical/code';
   import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
   import {
     $createHeadingNode as createHeadingNode,
@@ -78,6 +79,12 @@
         setBlocksType(getSelection(), () => createQuoteNode());
       });
     }
+
+    if (type === 'code-block') {
+      $editor.update(() => {
+        setBlocksType(getSelection(), () => createCodeNode());
+      });
+    }
   };
 </script>
 

package/{package → dist}/components/text-field/number-input.svelte

@@ -13,8 +13,9 @@
 
   /**
    * @typedef {object} Props
-   * @property {number | undefined} [min] - Minimum allowed value.
-   * @property {number | undefined} [max] - Maximum allowed value.
+   * @property {number} [value] - Input value.
+   * @property {number} [min] - Minimum allowed value.
+   * @property {number} [max] - Maximum allowed value.
    * @property {number} [step] - Value to be added or removed when using the up/down arrow key or
    * button.
    * @property {import('svelte').Snippet} [increaseIcon] - Increase icon slot content.
@@ -48,41 +49,50 @@
 
   const id = generateElementId('input');
   let edited = $state(false);
+  let inputValue = $state('');
 
   const maximumFractionDigits = $derived(String(step).split('.')[1]?.length || 0);
-  const isMin = $derived(typeof min === 'number' && Number(value || 0) <= min);
-  const isMax = $derived(typeof max === 'number' && Number(value || 0) >= max);
+  const isMin = $derived(typeof min === 'number' && Number(inputValue || 0) <= min);
+  const isMax = $derived(typeof max === 'number' && Number(inputValue || 0) >= max);
 
   $effect(() => {
-    invalid =
-      (required && edited && (value === undefined || value === '')) ||
-      (value !== undefined &&
-        value !== '' &&
-        (Number.isNaN(Number(value)) ||
-          (typeof min === 'number' && Number(value || 0) < min) ||
-          (typeof max === 'number' && Number(value || 0) > max)));
+    const newValue = inputValue.trim() ? Number(inputValue) : NaN;
+
+    value = !Number.isNaN(newValue) ? newValue : undefined;
+  });
+
+  $effect(() => {
+    if (edited) {
+      invalid =
+        (required && (value === undefined || inputValue === '')) ||
+        (inputValue !== undefined &&
+          inputValue !== '' &&
+          (Number.isNaN(Number(inputValue)) ||
+            (typeof min === 'number' && Number(inputValue || 0) < min) ||
+            (typeof max === 'number' && Number(inputValue || 0) > max)));
+    }
   });
 
   /**
    * Decrease the number.
    */
   const decrease = () => {
-    if (isMin) {
+    if (isMin || Number.isNaN(Number(inputValue))) {
       return;
     }
 
-    value = Number(Number(value || 0) - step).toFixed(maximumFractionDigits);
+    inputValue = Number(Number(inputValue || 0) - step).toFixed(maximumFractionDigits);
   };
 
   /**
    * Increase the number.
    */
   const increase = () => {
-    if (isMax) {
+    if (isMax || Number.isNaN(Number(inputValue))) {
       return;
     }
 
-    value = Number(Number(value || 0) + step).toFixed(maximumFractionDigits);
+    inputValue = Number(Number(inputValue || 0) + step).toFixed(maximumFractionDigits);
   };
 </script>
 
@@ -134,7 +144,7 @@
     {...restProps}
     role="spinbutton"
     {id}
-    bind:value
+    bind:value={inputValue}
     spellcheck="false"
     {flex}
     {hidden}
@@ -164,6 +174,11 @@
         edited = true;
       }
     }}
+    oninput={() => {
+      if (!edited) {
+        edited = true;
+      }
+    }}
     {onChange}
   />
 </div>

package/{package → dist}/components/text-field/number-input.svelte.d.ts

@@ -9,6 +9,10 @@ type NumberInput = {
  * @see https://w3c.github.io/aria/#textbox
  */
 declare const NumberInput: import("svelte").Component<import("../../typedefs").TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & {
+    /**
+     * - Input value.
+     */
+    value?: number | undefined;
     /**
      * - Minimum allowed value.
      */
@@ -32,6 +36,10 @@ declare const NumberInput: import("svelte").Component<import("../../typedefs").T
     decreaseIcon?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "invalid" | "value">;
 type Props = {
+    /**
+     * - Input value.
+     */
+    value?: number | undefined;
     /**
      * - Minimum allowed value.
      */

package/{package → dist}/components/text-field/password-input.svelte

@@ -14,6 +14,7 @@
 
   /**
    * @typedef {object} Props
+   * @property {string} [value] - Input value.
    * @property {import('svelte').Snippet} [visibilityIcon] - Visibility icon slot content.
    */
 

package/{package → dist}/components/text-field/password-input.svelte.d.ts

@@ -10,12 +10,20 @@ type PasswordInput = {
  * @see https://w3c.github.io/aria/#textbox
  */
 declare const PasswordInput: import("svelte").Component<import("../../typedefs").TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & {
+    /**
+     * - Input value.
+     */
+    value?: string | undefined;
     /**
      * - Visibility icon slot content.
      */
     visibilityIcon?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "value">;
 type Props = {
+    /**
+     * - Input value.
+     */
+    value?: string | undefined;
     /**
      * - Visibility icon slot content.
      */

package/{package → dist}/components/text-field/search-bar.svelte

@@ -15,6 +15,7 @@
 
   /**
    * @typedef {object} Props
+   * @property {string} [value] - Input value.
    * @property {import('svelte').Snippet} [searchIcon] - Search icon slot content.
    * @property {import('svelte').Snippet} [closeIcon] - Close icon slot content.
    */

package/{package → dist}/components/text-field/search-bar.svelte.d.ts

@@ -12,6 +12,10 @@ type SearchBar = {
  * @see https://w3c.github.io/aria/#search
  */
 declare const SearchBar: import("svelte").Component<import("../../typedefs").TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & {
+    /**
+     * - Input value.
+     */
+    value?: string | undefined;
     /**
      * - Search icon slot content.
      */
@@ -24,6 +28,10 @@ declare const SearchBar: import("svelte").Component<import("../../typedefs").Tex
     focus: () => void;
 }, "value">;
 type Props = {
+    /**
+     * - Input value.
+     */
+    value?: string | undefined;
     /**
      * - Search icon slot content.
      */

package/{package → dist}/components/text-field/text-area.svelte

@@ -8,9 +8,9 @@
 <script>
   /**
    * @typedef {object} Props
-   * @property {string | undefined} [value] - Input value.
+   * @property {string} [value] - Input value.
    * @property {boolean} [flex] - Make the text input container flexible.
-   * @property {string | undefined} [name] - The `name` attribute on the `<textarea>` element.
+   * @property {string} [name] - The `name` attribute on the `<textarea>` element.
    * @property {boolean} [autoResize] - Whether to automatically resize the `<textarea>` based on
    * the content.
    * @property {string} [class] - The `class` attribute on the wrapper element.
@@ -71,7 +71,7 @@
     class:auto-resize={autoResize}
   ></textarea>
   {#if autoResize}
-    <div class="clone" aria-hidden="true">{value ?? ''}</div>
+    <div class="clone" aria-hidden="true">{value}</div>
   {/if}
 </div>
 
@@ -138,7 +138,7 @@ textarea.auto-resize {
   resize: none;
 }
 textarea[aria-invalid=true] {
-  border-color: var(--sui-error-foreground-color);
+  border-color: var(--sui-error-border-color);
 }
 
 .clone {

package/{package → dist}/components/text-field/text-input.svelte

@@ -8,9 +8,14 @@
   import { generateElementId } from '@sveltia/utils/element';
   import { activateKeyShortcuts } from '../../services/events.svelte';
 
+  /**
+   * @typedef {object} Props
+   * @property {string} [value] - Input value.
+   */
+
   /**
    * @type {import('../../typedefs').TextInputProps & import('../../typedefs').CommonEventHandlers &
-   * import('../../typedefs').InputEventHandlers & Record<string, any>}
+   * import('../../typedefs').InputEventHandlers & Props & Record<string, any>}
    */
   let {
     /* eslint-disable prefer-const */
@@ -125,7 +130,7 @@ input:disabled, input:read-only {
   background-color: var(--sui-disabled-background-color);
 }
 input[aria-invalid=true] {
-  border-color: var(--sui-error-foreground-color);
+  border-color: var(--sui-error-border-color);
 }
 input ~ :global(button) {
   flex: none;

package/{package → dist}/components/text-field/text-input.svelte.d.ts

@@ -1,11 +1,22 @@
 export default TextInput;
 type TextInput = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Record<string, any>>): void;
+    $set?(props: Partial<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>>): void;
 };
 /**
  * A generic, single-line text field. The equivalent of the HTML `<input type="text">` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
  * @see https://w3c.github.io/aria/#textbox
  */
-declare const TextInput: import("svelte").Component<import("../../typedefs").TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & Record<string, any>, {}, "value" | "element">;
+declare const TextInput: import("svelte").Component<import("../../typedefs").TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & {
+    /**
+     * - Input value.
+     */
+    value?: string | undefined;
+} & Record<string, any>, {}, "value" | "element">;
+type Props = {
+    /**
+     * - Input value.
+     */
+    value?: string | undefined;
+};

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

@@ -9,7 +9,7 @@
 
   /**
    * @typedef {object} Props
-   * @property {string | number | undefined} [id] - The toast ID. If updated, the timer that hides
+   * @property {string | number} [id] - The toast ID. If updated, the timer that hides
    * the toast will be reset, meaning the same toast can be displayed for a longer period of time.
    * @property {boolean} [show] - Whether to show the toast.
    * @property {number} [duration] - Duration to automatically hide the toast. Use `0` to hide it

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

@@ -13,7 +13,7 @@
    * attribute.
    * @property {'horizontal' | 'vertical'} [orientation] - Orientation of the widget. An alias of
    * the `aria-orientation` attribute.
-   * @property {'primary' | 'secondary' | undefined} [variant] - The style variant of the toolbar.
+   * @property {'primary' | 'secondary'} [variant] - The style variant of the toolbar.
    * @property {import('svelte').Snippet} [children] - Primary slot content.
    */
 
@@ -36,7 +36,7 @@
 <div
   {...restProps}
   role="toolbar"
-  class="sui toolbar {orientation} {variant ?? ''} {className}"
+  class="sui toolbar {orientation} {variant} {className}"
   {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}

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

@@ -9,7 +9,7 @@
 
   /**
    * @typedef {object} Props
-   * @property {'horizontal' | 'vertical' | undefined} [orientation] - Orientation of the app
+   * @property {'horizontal' | 'vertical'} [orientation] - Orientation of the app
    * shell’s children..
    * @property {import('svelte').Snippet} [children] - Primary slot content.
    */
@@ -82,7 +82,7 @@
 <div
   {...restProps}
   role="none"
-  class="sui app-shell {orientation ?? ''}"
+  class="sui app-shell {orientation}"
   ondragover={(event) => event.preventDefault()}
   ondrop={(event) => event.preventDefault()}
   oncontextmenu={(event) => {
@@ -339,8 +339,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%;
 }
 @media (prefers-color-scheme: light) {
   :global(:root:not([data-theme])),
@@ -410,8 +410,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%;
   }
 }