@sveltia/ui 0.55.0 → 0.56.0

package/dist/components/listbox/option.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#option
 -->
 <script>
+  import { onDestroy } from 'svelte';
+  import { getOptionRegistry } from '../../services/select.svelte.js';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
 
@@ -47,42 +49,114 @@
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
+
+  /**
+   * The registry provided by an ancestor `<Combobox>`. This is `undefined` when the option is used
+   * standalone within a `<Listbox>`, in which case it always renders itself.
+   */
+  const registry = getOptionRegistry();
+
+  if (registry) {
+    // Expose the props as accessors, so the combobox always reads the current values
+    const unregister = registry.register({
+      /**
+       * Get the option’s value.
+       * @returns {any} Value.
+       */
+      get value() {
+        return value;
+      },
+      /**
+       * Get the option’s text label.
+       * @returns {string} Label.
+       */
+      get label() {
+        return label;
+      },
+      /**
+       * Get the option’s name.
+       * @returns {string | undefined} Name.
+       */
+      get name() {
+        return restProps.name;
+      },
+      /**
+       * Get the data type of the option’s value.
+       * @returns {string} Type.
+       */
+      get type() {
+        return restProps.valueType ?? typeof value;
+      },
+      /**
+       * Get whether the option is selected.
+       * @returns {boolean} Result.
+       */
+      get selected() {
+        return selected;
+      },
+      /**
+       * Select or deselect the option.
+       * @param {boolean} newValue `true` to select.
+       */
+      set selected(newValue) {
+        selected = newValue;
+      },
+      /**
+       * Get whether the option is disabled.
+       * @returns {boolean} Result.
+       */
+      get disabled() {
+        return disabled;
+      },
+    });
+
+    onDestroy(unregister);
+  }
+
+  /**
+   * Whether to render the option. Within a `<Combobox>`, the options are only rendered while the
+   * dropdown is expanded; the registration above is what keeps the collapsed combobox working.
+   * @type {boolean}
+   */
+  const rendered = $derived(!registry || registry.expanded);
 </script>
 
-<div role="none" class="sui option {className}" class:wrap {hidden}>
-  <Button
-    {...restProps}
-    role="option"
-    tabindex="-1"
-    aria-selected={selected}
-    {label}
-    {value}
-    {hidden}
-    {disabled}
-    data-search-value={searchValue}
-    onChange={(event) => {
-      selected = event.detail.selected;
-      onChange?.(event);
-    }}
-    onToggle={(event) => {
-      hidden = event.detail.hidden;
-      if (hidden) selected = false;
-      onToggle?.(event);
-    }}
-  >
-    {#if selected}
-      {#if checkIcon}
-        {@render checkIcon()}
-      {:else}
-        <Icon class="check" name="check" />
+{#if rendered}
+  <div role="none" class="sui option {className}" class:wrap {hidden}>
+    <Button
+      {...restProps}
+      role="option"
+      tabindex="-1"
+      aria-selected={selected}
+      {label}
+      {value}
+      {hidden}
+      {disabled}
+      data-search-value={searchValue}
+      onChange={(event) => {
+        selected = event.detail.selected;
+        onChange?.(event);
+      }}
+      onToggle={(event) => {
+        hidden = event.detail.hidden;
+        if (hidden) selected = false;
+        onToggle?.(event);
+      }}
+    >
+      {#if selected}
+        {#if checkIcon}
+          {@render checkIcon()}
+        {:else}
+          <Icon class="check" name="check" />
+        {/if}
       {/if}
-    {/if}
-    {#snippet startIcon()}
-      {@render _startIcon?.()}
-    {/snippet}
-    {@render children?.()}
-  </Button>
-</div>
+      {#snippet startIcon()}
+        {@render _startIcon?.()}
+      {/snippet}
+      {@render children?.()}
+    </Button>
+  </div>
+{/if}
 
 <style>.option {
   display: contents;

package/dist/components/select/combobox.svelte

@@ -7,7 +7,8 @@
 -->
 <script>
   import { _ } from '@sveltia/i18n';
-  import { getSelectedItemDetail } from '../../services/select.svelte.js';
+  import { onMount } from 'svelte';
+  import { createOptionRegistry, getSelectedItemDetail } from '../../services/select.svelte.js';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import Listbox from '../listbox/listbox.svelte';
@@ -20,12 +21,6 @@
    * @import { ComboboxProps, TextInputProps } from '../../typedefs';
    */
 
-  /**
-   * Selector for the currently selected option in the popup. Used to update the selected option
-   * when the value is changed externally.
-   */
-  const SELECTED_SELECTOR = '[role="option"][aria-selected="true"]';
-
   /**
    * @type {ComboboxProps & TextInputProps & Record<string, any>}
    */
@@ -58,32 +53,61 @@
   let inputElement = $state();
   /** @type {HTMLElement | undefined} */
   let popupContent = $state();
+  /**
+   * Wrapper holding the options while the dropdown is collapsed.
+   * @type {HTMLElement | undefined}
+   */
+  let idleHost = $state();
+  /**
+   * Wrapper holding the options, moved between {@link idleHost} and {@link listboxSlot}.
+   * @type {HTMLElement | undefined}
+   */
+  let optionHost = $state();
+  /**
+   * Where the options go while the dropdown is expanded.
+   * @type {HTMLElement | undefined}
+   */
+  let listboxSlot = $state();
   /** @type {string} */
   let label = $state('');
   /** @type {boolean} */
   let showFilter = $state(false);
   /** @type {string} */
   let searchTerms = $state('');
-  /** @type {boolean} */
-  let hasMatchingOptions = $state(true);
-  /** @type {HTMLElement} */
+  /**
+   * Number of options matching the current search terms, as last reported by the listbox.
+   * @type {number}
+   */
+  let matchedOptions = $state(0);
+
+  /**
+   * Whether to keep the option list free of the “no matching options” notice. That notice is about
+   * filtering, so it’s only meaningful once search terms have been entered — the listbox also
+   * reports zero matches while the options are unrendered, which says nothing about the filter.
+   * @type {boolean}
+   */
+  const hasMatchingOptions = $derived(!searchTerms || matchedOptions > 0);
+  /**
+   * @type {HTMLElement}
+   */
   const anchor = $derived(/** @type {HTMLElement} */ (comboboxElement ?? inputElement));
 
+  /**
+   * The options declared as `<Option>` children. They only render while the dropdown is expanded,
+   * so the label and the initial value below are resolved through the registry rather than the DOM
+   * tree.
+   */
+  const registry = createOptionRegistry();
+
   /**
    * Update the {@link label} and selected option when the {@link value} is changed.
    */
   const _onChange = () => {
-    const target = /** @type {HTMLButtonElement | null} */ (
-      popupContent?.querySelector(`[role="option"][data-value="${value}"]`)
-    );
+    const entry = registry.find(value);
 
-    if (target) {
-      label = target.dataset.label || target.dataset.value || target.textContent || '';
-
-      if (target.getAttribute('aria-selected') !== 'true') {
-        popupContent?.querySelector(SELECTED_SELECTOR)?.setAttribute('aria-selected', 'false');
-        target.setAttribute('aria-selected', 'true');
-      }
+    if (entry) {
+      label = entry.label;
+      registry.selectOnly(value);
     }
   };
 
@@ -100,24 +124,65 @@
     onChange?.(new CustomEvent('Change', { detail }));
   };
 
+  // Let the options know whether they should render themselves
   $effect(() => {
-    if (popupContent) {
-      globalThis.requestAnimationFrame(() => {
-        const selected = popupContent?.querySelector(SELECTED_SELECTOR);
+    registry.expanded = isPopupOpen;
+  });
 
-        if (selected) {
-          _onSelect(/** @type {HTMLButtonElement} */ (selected));
-        }
-      });
+  // Move the options into the popup while it’s expanded, and back out before it’s unmounted. Only
+  // the wrapper is moved, never its children, so Svelte keeps full ownership of the subtree.
+  $effect(() => {
+    if (!optionHost) {
+      return;
+    }
+
+    const parent = isPopupOpen ? listboxSlot : idleHost;
+
+    if (parent && optionHost.parentElement !== parent) {
+      parent.append(optionHost);
     }
   });
 
+  // Derive the initial value from the `<Option>` that is marked as selected in the markup. This has
+  // to be a one-off read rather than an effect on `registry.selectedEntry`: where the markup marks
+  // nothing as selected, the first entry to become selected is the one the user picks, and
+  // reporting that here would raise a second `Change` for a single choice. The options register
+  // during their own initialization, so they are all present by the time this runs.
+  onMount(() => {
+    const entry = registry.selectedEntry;
+
+    if (!entry) {
+      return;
+    }
+
+    value = entry.value;
+    label = entry.label;
+
+    // There is no element to report while the dropdown has never been expanded
+    onChange?.(
+      new CustomEvent('Change', {
+        detail: {
+          target: undefined,
+          type: entry.type,
+          name: entry.name,
+          label: entry.label,
+          value: entry.value,
+        },
+      }),
+    );
+  });
+
   $effect(() => {
     void value;
     _onChange();
   });
 </script>
 
+<!--
+  `aria-controls` is deliberately absent from the `role="combobox"` element below: the popup is
+  only in the DOM tree while it’s expanded, and a reference to a missing element is worse than no
+  reference at all. The popup service adds it on open and removes it on close.
+-->
 <div {...restProps} role="none" class="sui combobox {className}" class:editable {hidden}>
   {#if !editable}
     <div
@@ -127,7 +192,6 @@
       {id}
       class:selected={value !== undefined}
       tabindex={disabled ? -1 : 0}
-      aria-controls="{id}-popup"
       aria-expanded={isPopupOpen}
       aria-hidden={hidden}
       aria-disabled={disabled}
@@ -156,7 +220,6 @@
       {readonly}
       {required}
       {invalid}
-      aria-controls="{id}-popup"
       aria-expanded={isPopupOpen}
       aria-haspopup="listbox"
       aria-label={ariaLabel}
@@ -169,7 +232,7 @@
     {disabled}
     tabindex={!editable || readonly || disabled ? -1 : 0}
     aria-label={isPopupOpen ? _('_sui.collapse') : _('_sui.expand')}
-    aria-controls="{id}-popup"
+    aria-controls={isPopupOpen ? `${id}-popup` : undefined}
     aria-expanded={isPopupOpen}
     onclick={(event) => {
       event.preventDefault();
@@ -189,6 +252,32 @@
     {/snippet}
   </Button>
 </div>
+<!--
+  The `<Option>`s have to stay instantiated while the dropdown is collapsed, so that the registry
+  above can resolve the current label. They render no DOM of their own in that state, so this host
+  is empty apart from any other markup the consumer interleaved, such as a `<Divider>`. It’s moved
+  into the popup when the dropdown expands, which keeps a single set of component instances and lets
+  Svelte own the rendering order.
+-->
+<div bind:this={idleHost} role="none" class="idle-host" hidden>
+  <div bind:this={optionHost} role="none" class="option-host">
+    <Listbox
+      id="{id}-listbox"
+      class="in-combobox"
+      {searchTerms}
+      onclick={(event) => {
+        if (/** @type {HTMLElement} */ (event.target).matches('[role="option"]')) {
+          _onSelect(/** @type {HTMLButtonElement} */ (event.target));
+        }
+      }}
+      onFilter={(event) => {
+        matchedOptions = /** @type {CustomEvent} */ (event).detail.matched;
+      }}
+    >
+      {@render children?.()}
+    </Listbox>
+  </div>
+</div>
 <Popup
   bind:content={popupContent}
   id="{id}-popup"
@@ -198,10 +287,7 @@
   touchOptimized={true}
   bind:open={isPopupOpen}
   onOpen={() => {
-    showFilter =
-      filterThreshold === -1
-        ? false
-        : (popupContent?.querySelectorAll('[role="option"]')?.length ?? 0) > filterThreshold;
+    showFilter = filterThreshold === -1 ? false : registry.count > filterThreshold;
     searchTerms = '';
   }}
 >
@@ -222,21 +308,7 @@
         }}
       />
     {/if}
-    <Listbox
-      id="{id}-listbox"
-      class="in-combobox"
-      {searchTerms}
-      onclick={(event) => {
-        if (/** @type {HTMLElement} */ (event.target).matches('[role="option"]')) {
-          _onSelect(/** @type {HTMLButtonElement} */ (event.target));
-        }
-      }}
-      onFilter={(event) => {
-        hasMatchingOptions = !!(/** @type {CustomEvent} */ (event).detail.matched);
-      }}
-    >
-      {@render children?.()}
-    </Listbox>
+    <div bind:this={listboxSlot} role="none" class="listbox-slot"></div>
     {#if !hasMatchingOptions}
       <div role="alert" class="no-options" aria-live="assertive">
         {_('_sui.combobox.no_matching_options')}
@@ -245,7 +317,11 @@
   </div>
 </Popup>
 
-<style>.combobox {
+<style>:is(.option-host, .listbox-slot) {
+  display: contents;
+}
+
+.combobox {
   margin: var(--sui-focus-ring-width);
   display: flex;
   align-items: center;

package/dist/components/text-editor/constants.d.ts

@@ -36,10 +36,6 @@ export const INLINE_BUTTON_TYPES: TextEditorInlineType[];
  * @type {TextEditorBlockType[]}
  */
 export const BLOCK_BUTTON_TYPES: TextEditorBlockType[];
-/**
- * Image related components IDs. `linked-image` is used in Sveltia CMS.
- */
-export const IMAGE_COMPONENT_IDS: string[];
 /**
  * Map of Lexical nodes for each block type. The `paragraph` block type is excluded because it is
  * the default block type.

package/dist/components/text-editor/constants.js

@@ -199,11 +199,6 @@ export const BLOCK_BUTTON_TYPES = [
   'code-block',
 ];
 
-/**
- * Image related components IDs. `linked-image` is used in Sveltia CMS.
- */
-export const IMAGE_COMPONENT_IDS = ['image', 'linked-image'];
-
 /**
  * Map of Lexical nodes for each block type. The `paragraph` block type is excluded because it is
  * the default block type.

package/dist/components/text-editor/toolbar/{insert-image-button.svelte → insert-item-button.svelte}

@@ -13,7 +13,7 @@
 
   /**
    * @typedef {object} Props
-   * @property {TextEditorComponent} component Image editor component.
+   * @property {TextEditorComponent} component Editor component.
    */
 
   /** @type {Props} */
@@ -25,20 +25,27 @@
 
   /** @type {TextEditorStore} */
   const editorStore = getContext('editorStore');
+
+  const { label, icon, createNode } = $derived(component);
 </script>
 
 <Button
-  iconic
-  aria-label={component.label}
+  iconic={!!icon}
+  label={icon ? undefined : label}
+  title={label}
+  aria-label={label}
   aria-controls="{editorStore.editorId}-lexical-root"
   disabled={!editorStore.useRichText}
   onclick={() => {
     editorStore.editor?.update(() => {
-      insertNodes([component.createNode(), createParagraphNode()]);
+      // Add an additional paragraph for easier editing
+      insertNodes([createNode(), createParagraphNode()]);
     });
   }}
 >
   {#snippet startIcon()}
-    <Icon name={component.icon} />
+    {#if icon}
+      <Icon name={icon} />
+    {/if}
   {/snippet}
 </Button>

package/dist/components/text-editor/toolbar/{insert-image-button.svelte.d.ts → insert-item-button.svelte.d.ts}

@@ -1,17 +1,17 @@
-export default InsertImageButton;
-type InsertImageButton = {
+export default InsertItemButton;
+type InsertItemButton = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const InsertImageButton: import("svelte").Component<{
+declare const InsertItemButton: import("svelte").Component<{
     /**
-     * Image editor component.
+     * Editor component.
      */
     component: TextEditorComponent;
 }, {}, "">;
 type Props = {
     /**
-     * Image editor component.
+     * Editor component.
      */
     component: TextEditorComponent;
 };

package/dist/components/text-editor/toolbar/insert-menu-button.svelte

@@ -1,6 +1,9 @@
 <script>
   import { _ } from '@sveltia/i18n';
-  import { $insertNodes as insertNodes } from 'lexical';
+  import {
+    $createParagraphNode as createParagraphNode,
+    $insertNodes as insertNodes,
+  } from 'lexical';
   import { getContext } from 'svelte';
   import Icon from '../../icon/icon.svelte';
   import MenuButton from '../../menu/menu-button.svelte';
@@ -38,7 +41,8 @@
           {label}
           onclick={() => {
             editorStore.editor?.update(() => {
-              insertNodes([createNode()]);
+              // Add an additional paragraph for easier editing
+              insertNodes([createNode(), createParagraphNode()]);
             });
           }}
         >

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

@@ -9,15 +9,10 @@
   import Icon from '../../icon/icon.svelte';
   import MenuButton from '../../menu/menu-button.svelte';
   import Menu from '../../menu/menu.svelte';
-  import {
-    AVAILABLE_BUTTONS,
-    BLOCK_BUTTON_TYPES,
-    IMAGE_COMPONENT_IDS,
-    INLINE_BUTTON_TYPES,
-  } from '../constants.js';
+  import { AVAILABLE_BUTTONS, BLOCK_BUTTON_TYPES, INLINE_BUTTON_TYPES } from '../constants.js';
   import CodeLanguageSwitcher from './code-language-switcher.svelte';
   import FormatTextButton from './format-text-button.svelte';
-  import InsertImageButton from './insert-image-button.svelte';
+  import InsertItemButton from './insert-item-button.svelte';
   import InsertLinkButton from './insert-link-button.svelte';
   import InsertMenuButton from './insert-menu-button.svelte';
   import ToggleBlockMenuItem from './toggle-block-menu-item.svelte';
@@ -48,11 +43,12 @@
 
   /** @type {TextEditorStore} */
   const editorStore = getContext('editorStore');
-  const imageComponent = $derived(
-    editorStore.config.components.find(({ id }) => IMAGE_COMPONENT_IDS.includes(id)),
+
+  const buttons = $derived(
+    editorStore.config.components.filter(({ trigger = 'menuitem' }) => trigger === 'button'),
   );
-  const otherComponents = $derived(
-    editorStore.config.components.filter(({ id }) => !IMAGE_COMPONENT_IDS.includes(id)),
+  const menuitems = $derived(
+    editorStore.config.components.filter(({ trigger = 'menuitem' }) => trigger === 'menuitem'),
   );
 
   /**
@@ -121,11 +117,11 @@
     {/if}
     {#if editorStore.config.components.length}
       <Divider orientation="vertical" />
-      {#if imageComponent}
-        <InsertImageButton component={imageComponent} />
-      {/if}
-      {#if otherComponents.length}
-        <InsertMenuButton components={otherComponents} />
+      {#each buttons as button (button.id)}
+        <InsertItemButton component={button} />
+      {/each}
+      {#if menuitems.length}
+        <InsertMenuButton components={menuitems} />
       {/if}
     {/if}
   {/if}