@sveltia/ui 0.12.2 → 0.12.4

package/package/components/button/split-button.svelte

@@ -96,11 +96,11 @@
 .split-button :global(button) {
   margin: 0;
 }
-.split-button :global(button):not(.menu-button) {
+.split-button :global(button:not(.menu-button)) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.split-button :global(button):is(.menu-button) {
+.split-button :global(button.menu-button) {
   border-left-width: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;

package/package/components/divider/divider.svelte

@@ -29,7 +29,7 @@
   aria-hidden={hidden}
   aria-orientation={orientation}
   {...$$restProps}
-/>
+></div>
 
 <style>.divider {
   flex: none;

package/package/components/divider/spacer.svelte

@@ -16,7 +16,7 @@
   export let flex = false;
 </script>
 
-<div role="none" class="sui spacer {className}" class:flex {...$$restProps} />
+<div role="none" class="sui spacer {className}" class:flex {...$$restProps}></div>
 
 <style>.spacer.flex {
   flex: auto;

package/package/components/grid/grid-body.svelte

@@ -31,18 +31,26 @@
   {...$$restProps}
 >
   {#if label}
-    <tr class="row-group-caption">
-      <th id="{id}-label" colspan="9999" scope="rowgroup">{label}</th>
-    </tr>
+    <div role="row" class="row-group-caption">
+      <!-- We need `colspan` here but cannot place `<th>` under `<div>`, so use a hack -->
+      <svelte:element this="th" role="rowheader" id="{id}-label" colspan="9999">
+        {label}
+      </svelte:element>
+    </div>
   {/if}
   <slot />
 </div>
 
-<style>.grid-body {
+<style>[role=rowgroup] {
   display: table-row-group;
 }
 
-th {
+[role=row] {
+  display: table-row;
+}
+
+[role=rowheader] {
+  display: table-cell;
   padding: 8px;
   color: var(--sui-secondary-foreground-color);
   background-color: var(--sui-secondary-background-color);

package/package/components/slider/slider.svelte

@@ -304,12 +304,12 @@
   {...$$restProps}
 >
   <div role="none" class="base" bind:this={base} on:pointerdown={(event) => onPointerDown(event)}>
-    <div role="none" class="base-bar" />
+    <div role="none" class="base-bar"></div>
     <div
       class="slider-bar"
       style:left="{multiThumb ? sliderPositions[0] : 0}px"
       style:width="{multiThumb ? sliderPositions[1] - sliderPositions[0] : sliderPositions[0]}px"
-    />
+    ></div>
     <div
       role="slider"
       tabindex={disabled ? -1 : 0}
@@ -324,7 +324,7 @@
       style:left="{sliderPositions[0]}px"
       on:pointerdown={(event) => onPointerDown(event, 0)}
       on:keydown={(event) => onKeyDown(event, 0)}
-    />
+    ></div>
     {#if multiThumb}
       <div
         role="slider"
@@ -340,7 +340,7 @@
         style:left="{sliderPositions[1]}px"
         on:pointerdown={(event) => onPointerDown(event, 1)}
         on:keydown={(event) => onKeyDown(event, 1)}
-      />
+      ></div>
     {/if}
     {#if optionLabels.length}
       {#each optionLabels as label, index}

package/package/components/switch/switch.svelte

@@ -72,7 +72,7 @@
     }
   }}
 >
-  <span role="none" />
+  <span role="none"></span>
   {#if label}
     {label}
   {:else}

package/package/components/table/table-body.svelte

@@ -31,18 +31,26 @@
   {...$$restProps}
 >
   {#if label}
-    <tr class="row-group-caption">
-      <th id="{id}-label" colspan="9999" scope="rowgroup">{label}</th>
-    </tr>
+    <div role="row" class="row-group-caption">
+      <!-- We need `colspan` here but cannot place `<th>` under `<div>`, so use a hack -->
+      <svelte:element this="th" role="rowheader" id="{id}-label" colspan="9999">
+        {label}
+      </svelte:element>
+    </div>
   {/if}
   <slot />
 </div>
 
-<style>.table-body {
+<style>[role=rowgroup] {
   display: table-row-group;
 }
 
-th {
+[role=row] {
+  display: table-row;
+}
+
+[role=rowheader] {
+  display: table-cell;
   padding: 8px;
   color: var(--sui-secondary-foreground-color);
   background-color: var(--sui-secondary-background-color);

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

@@ -108,7 +108,7 @@
   <div role="none" class="inner" inert={disabled}>
     <slot />
   </div>
-  <div role="none" class="indicator" style={indicatorStyle} />
+  <div role="none" class="indicator" style={indicatorStyle}></div>
 </div>
 
 <style>.tab-list {

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-editor/toolbar/editor-toolbar.svelte

@@ -1,13 +1,13 @@
 <script>
-  import { getContext, tick } from 'svelte';
+  import { getContext } from 'svelte';
   import { _ } from 'svelte-i18n';
   import ButtonGroup from '../../button/button-group.svelte';
+  import Button from '../../button/button.svelte';
   import Divider from '../../divider/divider.svelte';
   import Spacer from '../../divider/spacer.svelte';
   import Icon from '../../icon/icon.svelte';
   import MenuButton from '../../menu/menu-button.svelte';
   import Menu from '../../menu/menu.svelte';
-  import Switch from '../../switch/switch.svelte';
   import {
     availableButtons,
     blockButtonTypes,
@@ -99,20 +99,21 @@
     {/if}
     <Spacer flex />
     {#if modes.length > 1}
-      <Switch
+      <Button
+        iconic
         disabled={$hasConverterError}
-        bind:checked={$useRichText}
-        label={$_('_sui.text_editor.rich_text')}
-        aria-label={$_('_sui.text_editor.use_rich_text_mode')}
-        on:change={async () => {
-          // Wait for `$useRichText` to be updated
-          await tick();
+        pressed={!$useRichText}
+        aria-label={$_('_sui.text_editor.edit_in_markdown')}
+        on:click={() => {
+          $useRichText = !$useRichText;
 
           if ($useRichText) {
             convertMarkdown();
           }
         }}
-      />
+      >
+        <Icon slot="start-icon" name="markdown" />
+      </Button>
     {/if}
   </Toolbar>
 </div>

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

@@ -1,6 +1,7 @@
 <script>
   import { LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
   import { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
+  import { generateElementId } from '@sveltia/utils/element';
   import { isURL } from '@sveltia/utils/string';
   import {
     COMMAND_PRIORITY_NORMAL,
@@ -12,12 +13,14 @@
   } from 'lexical';
   import { getContext, onMount } from 'svelte';
   import { _ } from 'svelte-i18n';
-  import Button from '../../button/button.svelte';
-  import Dialog from '../../dialog/dialog.svelte';
-  import Icon from '../../icon/icon.svelte';
-  import { availableButtons } from '..';
-  import TextInput from '../../text-field/text-input.svelte';
   import { isMac, matchShortcuts } from '../../../services/events';
+  import TextInput from '../../text-field/text-input.svelte';
+  import { availableButtons } from '..';
+  import Icon from '../../icon/icon.svelte';
+  import Dialog from '../../dialog/dialog.svelte';
+  import Button from '../../button/button.svelte';
+
+  const id = generateElementId('insert-link');
 
   /**
    * Button type.
@@ -186,34 +189,30 @@
 >
   {#if !hasAnchor}
     <div role="none">
-      <!-- svelte-ignore a11y-label-has-associated-control -->
-      <label>
-        {$_('_sui.text_editor.text')}<br />
-        <TextInput
-          autofocus
-          bind:value={anchorText}
-          flex
-          on:keydown={(event) => {
-            onInputKeyDown(event);
-          }}
-        />
-      </label>
-    </div>
-  {/if}
-  <div role="none">
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label>
-      {$_('_sui.text_editor.url')}<br />
+      <label for="{id}-text">{$_('_sui.text_editor.text')}</label>
       <TextInput
-        autofocus={hasAnchor || undefined}
-        bind:value={anchorURL}
+        id="{id}-text"
+        autofocus
+        bind:value={anchorText}
         flex
-        aria-label="URL"
         on:keydown={(event) => {
           onInputKeyDown(event);
         }}
       />
-    </label>
+    </div>
+  {/if}
+  <div role="none">
+    <label for="{id}-url">{$_('_sui.text_editor.url')}</label>
+    <TextInput
+      id="{id}-url"
+      autofocus={hasAnchor || undefined}
+      bind:value={anchorURL}
+      flex
+      aria-label="URL"
+      on:keydown={(event) => {
+        onInputKeyDown(event);
+      }}
+    />
   </div>
   <svelte:fragment slot="footer-extra">
     {#if dialogMode !== 'create'}

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

@@ -84,7 +84,7 @@
     on:keypress
     on:input
     on:change
-  />
+  ></textarea>
   {#if autoResize}
     <div class="clone" aria-hidden="true">{value ?? ''}</div>
   {/if}
@@ -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/toast/toast.svelte

@@ -92,7 +92,7 @@
   }
 </script>
 
-<div role="none" class="sui toast-base" bind:this={popoverBase} />
+<div role="none" class="sui toast-base" bind:this={popoverBase}></div>
 
 <div class="sui toast {position}" aria-hidden={!show} bind:this={toast} {...$$restProps}>
   <slot />

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/locales/en.d.ts

@@ -57,8 +57,7 @@ export namespace strings {
         export const update_link: string;
         export const text: string;
         export const url: string;
-        export const rich_text: string;
-        export const use_rich_text_mode: string;
+        export const edit_in_markdown: string;
         export const converter_error: string;
     }
 }

package/package/locales/en.js

@@ -56,8 +56,7 @@ export const strings = {
     update_link: 'Update Link',
     text: 'Text',
     url: 'URL',
-    rich_text: 'Rich Text',
-    use_rich_text_mode: 'Use Rich Text Mode',
+    edit_in_markdown: 'Edit in Markdown',
     converter_error:
       'There was an error while enabling rich text mode. Please use the plain text editor instead.',
   },

package/package/locales/ja.d.ts

@@ -57,8 +57,7 @@ export namespace strings {
         export const update_link: string;
         export const text: string;
         export const url: string;
-        export const rich_text: string;
-        export const use_rich_text_mode: string;
+        export const edit_in_markdown: string;
         export const converter_error: string;
     }
 }

package/package/locales/ja.js

@@ -56,8 +56,7 @@ export const strings = {
     update_link: 'リンクを更新',
     text: 'テキスト',
     url: 'URL',
-    rich_text: 'リッチテキスト',
-    use_rich_text_mode: 'リッチテキストモードを使用',
+    edit_in_markdown: 'マークダウンで編集',
     converter_error:
       'リッチテキストモードを有効化中に問題が発生しました。代わりにプレーンテキストエディターを使用してください。',
   },

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.2",
+  "version": "0.12.4",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -48,22 +48,22 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsdoc": "^48.2.3",
-    "eslint-plugin-svelte": "^2.37.0",
+    "eslint-plugin-svelte": "^2.38.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-html": "^1.6.0",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.3",
     "sass": "^1.75.0",
-    "stylelint": "^16.3.1",
+    "stylelint": "^16.4.0",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-scss": "^6.2.1",
-    "svelte-check": "^3.6.9",
+    "svelte-check": "^3.7.0",
     "svelte-i18n": "^4.0.0",
     "svelte-preprocess": "^5.1.4",
     "tslib": "^2.6.2",
     "vite": "^5.2.10",
-    "vitest": "^1.5.0"
+    "vitest": "^1.5.2"
   },
   "exports": {
     "./package.json": "./package.json",