@sveltia/ui 0.12.3 → 0.12.4

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

@@ -1,6 +1,11 @@
 <script>
   import { getContext, onMount } from 'svelte';
 
+  /**
+   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
+   * @type {boolean | undefined}
+   */
+  export let hidden = undefined;
   /**
    * Whether to disable the widget. An alias of the `aria-disabled` attribute.
    * @type {boolean}
@@ -11,6 +16,16 @@
    * @type {boolean}
    */
   export let readonly = false;
+  /**
+   * Whether to mark the widget required. An alias of the `aria-required` attribute.
+   * @type {boolean}
+   */
+  export let required = false;
+  /**
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
+   * @type {boolean}
+   */
+  export let invalid = false;
   /**
    * Input value.
    * @type {string | undefined}
@@ -21,14 +36,8 @@
    * Text editor state.
    * @type {TextEditorState}
    */
-  const {
-    editor,
-    editorId,
-    selectionBlockType,
-    selectionInlineTypes,
-    useRichText,
-    hasConverterError,
-  } = getContext('state');
+  const { editor, editorId, selectionBlockType, selectionInlineTypes, hasConverterError } =
+    getContext('state');
 
   /**
    * Reference to the Lexical editor root element.
@@ -86,19 +95,22 @@
 <div
   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}
   bind:this={lexicalRoot}
-  hidden={!$useRichText}
 ></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: 16px;
+  padding: var(--sui-textbox-multiline-padding);
   min-height: 8em;
   color: var(--sui-textbox-foreground-color);
   background-color: var(--sui-textbox-background-color);
@@ -109,6 +121,9 @@
 .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;
 }

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

@@ -2,9 +2,12 @@
 /** @typedef {typeof __propDef.events}  LexicalRootEvents */
 /** @typedef {typeof __propDef.slots}  LexicalRootSlots */
 export default class LexicalRoot extends SvelteComponent<{
+    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
+    required?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -15,9 +18,12 @@ export type LexicalRootSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: string | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
+        required?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -121,7 +121,14 @@
 
 <div role="none" class="sui text-editor" hidden={hidden || undefined} {...$$restProps}>
   <EditorToolbar {disabled} {readonly} />
-  <LexicalRoot {disabled} {readonly} bind:value />
+  <LexicalRoot
+    bind:value
+    hidden={!$useRichText || hidden}
+    {disabled}
+    {readonly}
+    {required}
+    {invalid}
+  />
   <TextArea
     autoResize={true}
     bind:value

package/package/components/text-field/search-bar.svelte

@@ -163,7 +163,7 @@
   height: var(--sui-button-medium-height);
 }
 .search-bar :global(.label) {
-  --sui-textbox-padding: 0 36px;
+  --sui-textbox-singleline-padding: 0 36px;
 }
 .search-bar :global(.text-input) {
   flex: auto;

package/package/components/text-field/text-area.svelte

@@ -113,7 +113,7 @@ textarea,
   border-width: var(--sui-textbox-border-width, 1px);
   border-color: var(--sui-textbox-border-color);
   border-radius: var(--sui-textbox-border-radius);
-  padding: 8px;
+  padding: var(--sui-textbox-multiline-padding);
   width: 100%;
   min-height: 8em;
   color: var(--sui-textbox-foreground-color);

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

@@ -153,7 +153,7 @@ input {
   border-width: var(--sui-textbox-border-width, 1px);
   border-color: var(--sui-textbox-border-color);
   border-radius: var(--sui-textbox-border-radius);
-  padding: var(--sui-textbox-padding, 0 8px);
+  padding: var(--sui-textbox-singleline-padding);
   min-width: 0;
   height: var(--sui-textbox-height);
   color: var(--sui-textbox-foreground-color);
@@ -200,7 +200,7 @@ input ~ :global(button) :global(.icon) {
 
 .label {
   position: absolute;
-  inset: var(--sui-textbox-padding, 0 8px);
+  inset: var(--sui-textbox-singleline-padding);
   z-index: 2;
   display: flex;
   align-items: center;

package/package/components/util/app-shell.svelte

@@ -224,8 +224,10 @@
   --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
   --sui-textbox-font-family: var(--sui-font-family-default);
   --sui-textbox-font-size: var(--sui-font-size-default);
+  --sui-textbox-singleline-padding: 0 8px;
   --sui-textbox-singleline-min-width: 240px;
   --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
+  --sui-textbox-multiline-padding: 12px;
   --sui-textbox-multiline-min-width: 480px;
   --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
   --sui-tab-height: var(--sui-control-medium-height);
@@ -493,6 +495,11 @@
   line-height: var(--sui-line-height-comfortable);
 }
 
+:global(ul),
+:global(ol) {
+  padding-left: 2em;
+}
+
 :global(code),
 :global(pre) {
   border-radius: 4px;

package/package/styles/core.scss

@@ -102,6 +102,11 @@ li {
   line-height: var(--sui-line-height-comfortable);
 }
 
+ul,
+ol {
+  padding-left: 2em;
+}
+
 code,
 pre {
   border-radius: 4px;

package/package/styles/variables.scss

@@ -219,8 +219,10 @@
   --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
   --sui-textbox-font-family: var(--sui-font-family-default);
   --sui-textbox-font-size: var(--sui-font-size-default);
+  --sui-textbox-singleline-padding: 0 8px;
   --sui-textbox-singleline-min-width: 240px;
   --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
+  --sui-textbox-multiline-padding: 12px;
   --sui-textbox-multiline-min-width: 480px;
   --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
   // Tab

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.12.3",
+  "version": "0.12.4",
   "license": "MIT",
   "type": "module",
   "publishConfig": {