@sveltia/ui 0.12.0 → 0.12.2

package/package/components/select/combobox.svelte

@@ -6,6 +6,7 @@
   @todo Add DOM API compatibility.
 -->
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { createEventDispatcher } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { writable } from 'svelte/store';
@@ -15,7 +16,6 @@
   import SearchBar from '../text-field/search-bar.svelte';
   import TextInput from '../text-field/text-input.svelte';
   import Popup from '../util/popup.svelte';
-  import { getRandomId } from '../../services/util';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -64,7 +64,7 @@
   export let position = 'bottom-left';
 
   const dispatch = createEventDispatcher();
-  const id = getRandomId('combobox');
+  const id = generateElementId('combobox');
   const selectedSelector = '[role="option"][aria-selected="true"]';
   /** @type {HTMLElement} */
   let comboboxElement;

package/package/components/select/combobox.svelte.d.ts

@@ -11,10 +11,10 @@ export default class Combobox extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     invalid?: boolean | undefined;
-    position?: PopupPosition | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | number | undefined;
+    position?: PopupPosition | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     required?: boolean | undefined;
     editable?: boolean | undefined;
@@ -38,10 +38,10 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         invalid?: boolean | undefined;
-        position?: PopupPosition | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: (string | number | undefined);
+        position?: PopupPosition | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         required?: boolean | undefined;
         editable?: boolean | undefined;

package/package/components/select/select.svelte.d.ts

@@ -11,9 +11,9 @@ export default class Select extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | number | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     required?: boolean | undefined;
 }, {
@@ -33,9 +33,9 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: (string | number | undefined);
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         required?: boolean | undefined;
     };

package/package/components/slider/slider.svelte.d.ts

@@ -13,9 +13,9 @@ export default class Slider extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: number | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     values?: [number, number] | undefined;
     min?: number | undefined;
@@ -39,9 +39,9 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: number | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         values?: [number, number] | undefined;
         min?: number | undefined;

package/package/components/switch/switch.svelte.d.ts

@@ -9,10 +9,10 @@
 export default class Switch extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    label?: string | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
+    label?: string | undefined;
     disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     required?: boolean | undefined;
     checked?: boolean | "mixed" | undefined;
@@ -32,10 +32,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        label?: string | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
+        label?: string | undefined;
         disabled?: boolean | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         required?: boolean | undefined;
         checked?: boolean | "mixed" | undefined;

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

@@ -5,7 +5,7 @@
   @see https://w3c.github.io/aria/#rowgroup
 -->
 <script>
-  import { getRandomId } from '../../services/util';
+  import { generateElementId } from '@sveltia/utils/element';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -20,7 +20,7 @@
    */
   export let label = '';
 
-  const id = getRandomId('tbody');
+  const id = generateElementId('tbody');
 </script>
 
 <div

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

@@ -10,8 +10,8 @@ export default class TabList extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
     orientation?: "vertical" | "horizontal" | undefined;
 }, {
     change: CustomEvent<any>;
@@ -30,8 +30,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
+        hidden?: boolean | undefined;
         orientation?: "vertical" | "horizontal" | undefined;
     };
     events: {

package/package/components/tabs/tab.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class Tab extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
     selected?: boolean | undefined;
 }, {
     focus: FocusEvent;
@@ -37,8 +37,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
+        hidden?: boolean | undefined;
         selected?: boolean | undefined;
     };
     events: {

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

@@ -3,6 +3,7 @@
   A rich text editor based on Lexical.
 -->
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { onMount, setContext } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { writable } from 'svelte/store';
@@ -16,7 +17,6 @@
   import EditorToolbar from './toolbar/editor-toolbar.svelte';
   import TextArea from '../text-field/text-area.svelte';
   import Toast from '../toast/toast.svelte';
-  import { getRandomId } from '../../services/util';
 
   /**
    * Make the text input container flexible.
@@ -67,8 +67,8 @@
   const editor = writable(initEditor());
   const selectionBlockType = writable('paragraph');
   const selectionInlineTypes = writable([]);
-  const editorId = writable(getRandomId('editor'));
-  const useRichText = writable(modes.includes('rich-text'));
+  const editorId = writable(generateElementId('editor'));
+  const useRichText = writable(modes[0] === 'rich-text');
   const hasConverterError = writable(false);
   let showConverterError = false;
 

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

@@ -5,9 +5,9 @@
 export default class TextEditor extends SvelteComponent<{
     [x: string]: any;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
     required?: boolean | undefined;
@@ -25,9 +25,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: string | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
         required?: boolean | undefined;

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

@@ -6,8 +6,8 @@
   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 Switch from '../../switch/switch.svelte';
   import {
     availableButtons,
     blockButtonTypes,
@@ -99,29 +99,20 @@
     {/if}
     <Spacer flex />
     {#if modes.length > 1}
-      <MenuButton
-        variant="ghost"
-        iconic
+      <Switch
         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();
+        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();
 
-              if ($useRichText) {
-                convertMarkdown();
-              }
-            }}
-          />
-        </Menu>
-      </MenuButton>
+          if ($useRichText) {
+            convertMarkdown();
+          }
+        }}
+      />
     {/if}
   </Toolbar>
 </div>
@@ -141,7 +132,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 { isURL } from '@sveltia/utils/string';
   import {
     COMMAND_PRIORITY_NORMAL,
     KEY_DOWN_COMMAND,
@@ -17,7 +18,6 @@
   import { availableButtons } from '..';
   import TextInput from '../../text-field/text-input.svelte';
   import { isMac, matchShortcuts } from '../../../services/events';
-  import { isURL } from '../../../services/util';
 
   /**
    * Button type.

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

@@ -5,11 +5,11 @@
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { _ } from 'svelte-i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
-  import { getRandomId } from '../../services/util';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -67,7 +67,7 @@
    */
   export let step = 1;
 
-  const id = getRandomId('input');
+  const id = generateElementId('input');
   let edited = false;
 
   $: maximumFractionDigits = String(step).split('.')[1]?.length || 0;

package/package/components/text-field/number-input.svelte.d.ts

@@ -10,9 +10,9 @@ export default class NumberInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
     required?: boolean | undefined;
@@ -45,9 +45,9 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: string | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
         required?: boolean | undefined;

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

@@ -6,11 +6,11 @@
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { _ } from 'svelte-i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
-  import { getRandomId } from '../../services/util';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -54,7 +54,7 @@
    */
   export let value = undefined;
 
-  const id = getRandomId('input');
+  const id = generateElementId('input');
 
   /**
    * @type {TextInput}

package/package/components/text-field/password-input.svelte.d.ts

@@ -11,9 +11,9 @@ export default class PasswordInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
     required?: boolean | undefined;
@@ -40,9 +40,9 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: string | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
         required?: boolean | undefined;

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

@@ -8,11 +8,11 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { _ } from 'svelte-i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
-  import { getRandomId } from '../../services/util';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -56,7 +56,7 @@
    */
   export let value = undefined;
 
-  const id = getRandomId('searchbox');
+  const id = generateElementId('searchbox');
   /**
    * Reference to the `TextInput` component.
    * @type {TextInput | undefined}

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

@@ -12,9 +12,9 @@ export default class SearchBar extends SvelteComponent<{
     class?: string | undefined;
     focus?: (() => void) | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
     required?: boolean | undefined;
@@ -68,9 +68,9 @@ declare const __propDef: {
         class?: string | undefined;
         focus?: (() => void) | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: string | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
         required?: boolean | undefined;

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

@@ -12,9 +12,9 @@ export default class TextArea extends SvelteComponent<{
     class?: string | undefined;
     name?: string | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
     required?: boolean | undefined;
@@ -39,9 +39,9 @@ declare const __propDef: {
         class?: string | undefined;
         name?: string | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: string | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
         required?: boolean | undefined;

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

@@ -7,8 +7,8 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { activateKeyShortcuts } from '../../services/events';
-  import { getRandomId } from '../../services/util';
 
   /**
    * Reference to the `<input>` element.
@@ -85,7 +85,7 @@
    */
   export let inputmode = 'text';
 
-  const id = getRandomId('input');
+  const id = generateElementId('input');
 
   $: ariaLabel = $$restProps['aria-label'];
 </script>

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

@@ -10,12 +10,12 @@ export default class TextInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
-    element?: HTMLInputElement | undefined;
     value?: string | number | undefined;
+    role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
+    hidden?: boolean | undefined;
+    element?: HTMLInputElement | undefined;
     readonly?: boolean | undefined;
     keyShortcuts?: string | undefined;
     flex?: boolean | undefined;
@@ -83,12 +83,12 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
-        element?: HTMLInputElement | undefined;
         value?: string | number | undefined;
+        role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
+        hidden?: boolean | undefined;
+        element?: HTMLInputElement | undefined;
         readonly?: boolean | undefined;
         keyShortcuts?: string | undefined;
         flex?: boolean | undefined;

package/package/components/toast/toast.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class Toast extends SvelteComponent<{
     [x: string]: any;
     id?: number | undefined;
-    show?: boolean | undefined;
     position?: ToastPosition | undefined;
+    show?: boolean | undefined;
     duration?: number | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -26,8 +26,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         id?: number | undefined;
-        show?: boolean | undefined;
         position?: ToastPosition | undefined;
+        show?: boolean | undefined;
         duration?: number | undefined;
     };
     events: {

package/package/components/toolbar/toolbar.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class Toolbar extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
     variant?: "primary" | "secondary" | undefined;
     orientation?: "vertical" | "horizontal" | undefined;
 }, {
@@ -27,8 +27,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
+        hidden?: boolean | undefined;
         variant?: 'primary' | 'secondary' | undefined;
         orientation?: "vertical" | "horizontal" | undefined;
     };

package/package/components/util/group.svelte.d.ts

@@ -8,8 +8,8 @@
 export default class Group extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -24,8 +24,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
+        hidden?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/util/modal.svelte

@@ -5,8 +5,8 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { sleep } from '@sveltia/utils/misc';
   import { createEventDispatcher, onMount } from 'svelte';
-  import { sleep } from '../../services/util';
 
   /**
    * The `class` attribute on the `<dialog>` element.

package/package/components/util/modal.svelte.d.ts

@@ -5,8 +5,8 @@
 export default class Modal extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    dialog?: HTMLDialogElement | undefined;
     close?: ((returnValue: string) => void) | undefined;
+    dialog?: HTMLDialogElement | undefined;
     role?: "dialog" | "alertdialog" | "none" | undefined;
     open?: boolean | undefined;
     showBackdrop?: boolean | undefined;
@@ -58,8 +58,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        dialog?: HTMLDialogElement | undefined;
         close?: ((returnValue: string) => void) | undefined;
+        dialog?: HTMLDialogElement | undefined;
         role?: "dialog" | "alertdialog" | "none" | undefined;
         open?: boolean | undefined;
         showBackdrop?: boolean | undefined;

package/package/components/util/popup.svelte

@@ -5,11 +5,11 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { sleep } from '@sveltia/utils/misc';
   import { onMount } from 'svelte';
   import { writable } from 'svelte/store';
-  import Modal from './modal.svelte';
   import { activatePopup } from '../../services/popup';
-  import { sleep } from '../../services/util';
+  import Modal from './modal.svelte';
 
   /**
    * The `class` attribute on the content element.

package/package/components/util/popup.svelte.d.ts

@@ -6,9 +6,9 @@ export default class Popup extends SvelteComponent<{
     [x: string]: any;
     anchor: HTMLElement | undefined;
     class?: string | undefined;
+    position?: PopupPosition | undefined;
     open?: import("svelte/store").Writable<boolean> | undefined;
     showBackdrop?: boolean | undefined;
-    position?: PopupPosition | undefined;
     content?: HTMLElement | undefined;
     positionBaseElement?: HTMLElement | undefined;
     touchOptimized?: boolean | undefined;
@@ -61,9 +61,9 @@ declare const __propDef: {
         [x: string]: any;
         anchor: HTMLElement | undefined;
         class?: string | undefined;
+        position?: PopupPosition | undefined;
         open?: import("svelte/store").Writable<boolean> | undefined;
         showBackdrop?: boolean | undefined;
-        position?: PopupPosition | undefined;
         content?: HTMLElement | undefined;
         positionBaseElement?: HTMLElement | undefined;
         touchOptimized?: boolean | undefined;
@@ -78,10 +78,7 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    /**
-       * The `class` attribute on the content element.
-       * @type {string}
-       */ slots: {
+    slots: {
         'extra-content': {
             slot: string;
         };