@sveltia/ui 0.12.1 → 0.12.3

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

@@ -93,7 +93,7 @@
   contenteditable={editable}
   bind:this={lexicalRoot}
   hidden={!$useRichText}
-/>
+></div>
 
 <style>.lexical-root {
   border: 1px solid var(--sui-textbox-border-color);

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

@@ -68,7 +68,7 @@
   const selectionBlockType = writable('paragraph');
   const selectionInlineTypes = writable([]);
   const editorId = writable(generateElementId('editor'));
-  const useRichText = writable(modes.includes('rich-text'));
+  const useRichText = writable(modes[0] === 'rich-text');
   const hasConverterError = writable(false);
   let showConverterError = false;
 

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

@@ -1,12 +1,12 @@
 <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 MenuItemCheckbox from '../../menu/menu-item-checkbox.svelte';
   import Menu from '../../menu/menu.svelte';
   import {
     availableButtons,
@@ -99,29 +99,21 @@
     {/if}
     <Spacer flex />
     {#if modes.length > 1}
-      <MenuButton
-        variant="ghost"
+      <Button
         iconic
         disabled={$hasConverterError}
-        popupPosition="bottom-right"
-        aria-label={$_('_sui.text_editor.show_edit_options')}
-      >
-        <Icon slot="start-icon" name="more_vert" />
-        <Menu slot="popup" aria-label={$_('_sui.text_editor.edit_options')}>
-          <MenuItemCheckbox
-            label={$_('_sui.text_editor.use_rich_text')}
-            bind:checked={$useRichText}
-            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();
-              }
-            }}
-          />
-        </Menu>
-      </MenuButton>
+          if ($useRichText) {
+            convertMarkdown();
+          }
+        }}
+      >
+        <Icon slot="start-icon" name="markdown" />
+      </Button>
     {/if}
   </Toolbar>
 </div>
@@ -141,7 +133,10 @@
   padding: 8px;
   background-color: var(--sui-tertiary-background-color);
 }
-.wrapper :global(button) {
+.wrapper :global(.sui.menu-button) {
+  padding: 0 4px;
+}
+.wrapper :global(.sui.button) {
   flex: none;
   margin: 0 !important;
 }

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/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}

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

@@ -57,9 +57,7 @@ export namespace strings {
         export const update_link: string;
         export const text: string;
         export const url: string;
-        export const edit_options: string;
-        export const show_edit_options: string;
-        export const use_rich_text: string;
+        export const edit_in_markdown: string;
         export const converter_error: string;
     }
 }

package/package/locales/en.js

@@ -56,9 +56,7 @@ export const strings = {
     update_link: 'Update Link',
     text: 'Text',
     url: 'URL',
-    edit_options: 'Edit Options',
-    show_edit_options: 'Show Edit Options',
-    use_rich_text: 'Use Rich Text',
+    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,9 +57,7 @@ export namespace strings {
         export const update_link: string;
         export const text: string;
         export const url: string;
-        export const edit_options: string;
-        export const show_edit_options: string;
-        export const use_rich_text: string;
+        export const edit_in_markdown: string;
         export const converter_error: string;
     }
 }

package/package/locales/ja.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.12.1",
+  "version": "0.12.3",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -32,7 +32,7 @@
     "@lexical/selection": "^0.14.5",
     "@lexical/table": "^0.14.5",
     "@lexical/utils": "^0.14.5",
-    "@sveltia/utils": "^0.1.0",
+    "@sveltia/utils": "^0.1.1",
     "lexical": "^0.14.5",
     "svelte": "^4.2.15"
   },
@@ -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",