@sveltia/ui 0.71.1 → 0.72.1

package/dist/components/resizable-pane/resizable-pane-group.svelte

@@ -6,6 +6,12 @@
 -->
 <script>
   import { setContext } from 'svelte';
+  import {
+    clampResizeDelta,
+    getInitialSizes,
+    resolvePaneConstraints,
+    resolveToPercent,
+  } from './sizing.js';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -68,113 +74,44 @@
   let _handleCount = 0;
 
   /**
-   * Get the pane group container element’s size in pixels for size conversion.
-   * @returns {number} Container size in pixels.
+   * Get the sizes the pane lengths are relative to.
+   * @returns {import('./sizing.js').SizeEnvironment} Environment.
    */
-  const getContainerSize = () => {
-    if (!element) return 0;
-
-    return direction === 'horizontal' ? element.clientWidth : element.clientHeight;
-  };
-
-  /**
-   * Resolve numeric or CSS string size values to percentage points.
-   * @param {number | string | undefined} value Size as percentage number or CSS size string.
-   * @param {number} fallback Fallback percentage when resolution fails.
-   * @returns {number} Size in percentage points.
-   */
-  const resolveToPercent = (value, fallback) => {
-    if (typeof value === 'number') {
-      return value;
-    }
-
-    if (!value || typeof value !== 'string') {
-      return fallback;
-    }
-
-    const trimmed = value.trim();
-    const matchedPercent = trimmed.match(/^(-?\d+(?:\.\d+)?)%$/);
-
-    if (matchedPercent) {
-      return Number(matchedPercent[1]);
-    }
-
-    const containerSize = getContainerSize();
-
-    if (!containerSize) {
-      return fallback;
-    }
-
-    const matchedPx = trimmed.match(/^(-?\d+(?:\.\d+)?)px$/i);
-
-    if (matchedPx) {
-      return (Number(matchedPx[1]) / containerSize) * 100;
-    }
-
-    const matchedViewport = trimmed.match(/^(-?\d+(?:\.\d+)?)(dvw|vw|dvh|vh)$/i);
-
-    if (matchedViewport) {
-      const viewportValue = Number(matchedViewport[1]);
-      const unit = matchedViewport[2].toLowerCase();
-      const viewportSize = unit.endsWith('w') ? window.innerWidth : window.innerHeight;
-      const pixels = (viewportValue / 100) * viewportSize;
-
-      return (pixels / containerSize) * 100;
-    }
-
-    return fallback;
-  };
+  const getSizeEnvironment = () => ({
+    containerSize: element
+      ? direction === 'horizontal'
+        ? element.clientWidth
+        : element.clientHeight
+      : 0,
+    viewportWidth: window.innerWidth,
+    viewportHeight: window.innerHeight,
+  });
 
   /**
    * Get pane constraints converted to percentages for the current container size.
    * @param {number} paneIndex Pane index.
    * @returns {{ minSize: number, maxSize: number }} Min/max in percentages.
    */
-  const getPaneConstraints = (paneIndex) => {
-    const paneDef = _paneDefs[paneIndex];
-
-    if (!paneDef) {
-      return { minSize: 0, maxSize: 100 };
-    }
-
-    const minSize = Math.max(0, resolveToPercent(paneDef.minSize, 0));
-    const maxSize = Math.min(100, resolveToPercent(paneDef.maxSize, 100));
-
-    return {
-      minSize,
-      maxSize: Math.max(minSize, maxSize),
-    };
-  };
+  const getPaneConstraints = (paneIndex) =>
+    resolvePaneConstraints(_paneDefs[paneIndex], getSizeEnvironment());
 
   /**
-   * Initialize pane sizes from `defaultSize` props. Called from `onMount` once all panes have
-   * registered. Panes without `defaultSize` share the remaining space equally.
+   * Initialize pane sizes from `defaultSize` props. Called once all panes have registered. Panes
+   * without `defaultSize` share the remaining space equally.
    */
   const initSizes = () => {
+    // Only called once panes have registered; see the effect below
+    /* v8 ignore next */
     if (!_paneDefs.length) return;
 
-    // Resolve each pane’s defaultSize to a percentage (NaN if unspecified or unresolvable).
-    // Resolving once ensures totalSpecified and newSizes use the same resolved value.
-    const resolvedDefaults = _paneDefs.map((p) => {
-      if (p.defaultSize === undefined) {
-        return NaN;
-      }
-
-      const resolved = resolveToPercent(p.defaultSize, NaN);
-
-      return resolved;
-    });
+    const env = getSizeEnvironment();
 
-    const totalSpecified = resolvedDefaults
-      .filter((v) => !Number.isNaN(v))
-      .reduce((sum, v) => sum + v, 0);
+    // Resolve each pane’s defaultSize to a percentage (NaN if unspecified or unresolvable)
+    const resolvedDefaults = _paneDefs.map((p) =>
+      p.defaultSize === undefined ? NaN : resolveToPercent(p.defaultSize, NaN, env),
+    );
 
-    const unspecifiedCount = resolvedDefaults.filter((v) => Number.isNaN(v)).length;
-    const remaining = Math.max(0, 100 - totalSpecified);
-    const defaultSize = unspecifiedCount > 0 ? remaining / unspecifiedCount : 0;
-    const newSizes = resolvedDefaults.map((v) => (Number.isNaN(v) ? defaultSize : v));
-
-    sizes.splice(0, sizes.length, ...newSizes);
+    sizes.splice(0, sizes.length, ...getInitialSizes(resolvedDefaults));
   };
 
   /**
@@ -188,16 +125,16 @@
 
     if (beforeIdx < 0 || afterIdx >= sizes.length) return;
 
-    const { minSize: minBefore, maxSize: maxBefore } = getPaneConstraints(beforeIdx);
-    const { minSize: minAfter, maxSize: maxAfter } = getPaneConstraints(afterIdx);
     const prevBefore = sizes[beforeIdx];
     const prevAfter = sizes[afterIdx];
-    // Clamp delta so neither pane exceeds its min/max constraints
-    const canGrow = Math.min(maxBefore - prevBefore, prevAfter - minAfter);
-    const canShrink = Math.min(prevBefore - minBefore, maxAfter - prevAfter);
 
-    const delta =
-      deltaPercent > 0 ? Math.min(deltaPercent, canGrow) : -Math.min(-deltaPercent, canShrink);
+    // Clamp delta so neither pane exceeds its min/max constraints
+    const delta = clampResizeDelta(deltaPercent, {
+      sizeBefore: prevBefore,
+      sizeAfter: prevAfter,
+      constraintsBefore: getPaneConstraints(beforeIdx),
+      constraintsAfter: getPaneConstraints(afterIdx),
+    });
 
     sizes[beforeIdx] = prevBefore + delta;
     sizes[afterIdx] = prevAfter - delta;
@@ -265,7 +202,7 @@
   bind:this={element}
   {...restProps}
   role="none"
-  class="sui resizable-pane-group {direction} {className ?? ''}"
+  class={['sui', 'resizable-pane-group', direction, className]}
   data-direction={direction}
 >
   {@render children?.()}

package/dist/components/resizable-pane/resizable-pane.svelte

@@ -78,7 +78,7 @@
   {...restProps}
   {id}
   role="none"
-  class="sui resizable-pane {className ?? ''}"
+  class="sui resizable-pane {className}"
   style:flex-basis={sizeStyle}
   style:flex-grow="0"
   style:flex-shrink="0"

package/dist/components/resizable-pane/sizing.d.ts

@@ -0,0 +1,48 @@
+export function resolveToPercent(value: number | string | undefined, fallback: number, env: SizeEnvironment): number;
+export function resolvePaneConstraints(paneDef: {
+    minSize: number | string;
+    maxSize: number | string;
+} | undefined, env: SizeEnvironment): PaneConstraints;
+export function getInitialSizes(resolvedDefaults: number[]): number[];
+export function clampResizeDelta(deltaPercent: number, { sizeBefore, sizeAfter, constraintsBefore, constraintsAfter }: {
+    sizeBefore: number;
+    sizeAfter: number;
+    constraintsBefore: PaneConstraints;
+    constraintsAfter: PaneConstraints;
+}): number;
+export function getHandleKeyAction({ key, shiftKey, isHorizontal, rtl }: {
+    key: string;
+    shiftKey: boolean;
+    isHorizontal: boolean;
+    rtl: boolean;
+}): {
+    type: "toggle";
+} | {
+    type: "resize";
+    delta: number;
+} | undefined;
+export type SizeEnvironment = {
+    /**
+     * Size of the pane group in pixels along its direction, or `0`
+     * if it hasn’t been laid out yet.
+     */
+    containerSize: number;
+    /**
+     * Width of the viewport in pixels.
+     */
+    viewportWidth: number;
+    /**
+     * Height of the viewport in pixels.
+     */
+    viewportHeight: number;
+};
+export type PaneConstraints = {
+    /**
+     * Minimum size.
+     */
+    minSize: number;
+    /**
+     * Maximum size, never below `minSize`.
+     */
+    maxSize: number;
+};

package/dist/components/resizable-pane/sizing.js

@@ -0,0 +1,190 @@
+/**
+ * Size arithmetic behind `<ResizablePaneGroup>` and `<ResizableHandle>`, kept apart from the
+ * components so the conversions and clamping can be tested without laying anything out. Every
+ * size here is a percentage of the pane group unless stated otherwise.
+ */
+
+/**
+ * @typedef {object} SizeEnvironment
+ * @property {number} containerSize Size of the pane group in pixels along its direction, or `0`
+ * if it hasn’t been laid out yet.
+ * @property {number} viewportWidth Width of the viewport in pixels.
+ * @property {number} viewportHeight Height of the viewport in pixels.
+ */
+
+/**
+ * @typedef {object} PaneConstraints
+ * @property {number} minSize Minimum size.
+ * @property {number} maxSize Maximum size, never below `minSize`.
+ */
+
+/**
+ * Resolve a size given as a percentage number or a CSS length string to a percentage.
+ * @param {number | string | undefined} value Size as a percentage number, or a CSS size string
+ * such as `240px`, `20%` or `20dvw`.
+ * @param {number} fallback Percentage to return when the value can’t be resolved.
+ * @param {SizeEnvironment} env Sizes the lengths are relative to. A length other than a percentage
+ * can’t be resolved while the container has no size.
+ * @returns {number} Size in percentage points.
+ */
+export const resolveToPercent = (value, fallback, env) => {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  if (!value || typeof value !== 'string') {
+    return fallback;
+  }
+
+  const trimmed = value.trim();
+  const matchedPercent = trimmed.match(/^(-?\d+(?:\.\d+)?)%$/);
+
+  if (matchedPercent) {
+    return Number(matchedPercent[1]);
+  }
+
+  const { containerSize } = env;
+
+  if (!containerSize) {
+    return fallback;
+  }
+
+  const matchedPx = trimmed.match(/^(-?\d+(?:\.\d+)?)px$/i);
+
+  if (matchedPx) {
+    return (Number(matchedPx[1]) / containerSize) * 100;
+  }
+
+  const matchedViewport = trimmed.match(/^(-?\d+(?:\.\d+)?)(dvw|vw|dvh|vh)$/i);
+
+  if (matchedViewport) {
+    const viewportValue = Number(matchedViewport[1]);
+    const unit = matchedViewport[2].toLowerCase();
+    const viewportSize = unit.endsWith('w') ? env.viewportWidth : env.viewportHeight;
+    const pixels = (viewportValue / 100) * viewportSize;
+
+    return (pixels / containerSize) * 100;
+  }
+
+  return fallback;
+};
+
+/**
+ * Resolve a pane’s size constraints to percentages, clamped to the `0`–`100` range, with the
+ * maximum never below the minimum.
+ * @param {{ minSize: number | string, maxSize: number | string } | undefined} paneDef Pane
+ * definition, or `undefined` for a pane that hasn’t registered, which is unconstrained.
+ * @param {SizeEnvironment} env Sizes the lengths are relative to.
+ * @returns {PaneConstraints} Constraints.
+ */
+export const resolvePaneConstraints = (paneDef, env) => {
+  if (!paneDef) {
+    return { minSize: 0, maxSize: 100 };
+  }
+
+  const minSize = Math.max(0, resolveToPercent(paneDef.minSize, 0, env));
+  const maxSize = Math.min(100, resolveToPercent(paneDef.maxSize, 100, env));
+
+  return {
+    minSize,
+    maxSize: Math.max(minSize, maxSize),
+  };
+};
+
+/**
+ * Work out the initial size of each pane. Panes with a default size get it; the others share
+ * whatever is left of the group equally.
+ * @param {number[]} resolvedDefaults Each pane’s default size as a percentage, or `NaN` for a pane
+ * that has none, or whose default couldn’t be resolved.
+ * @returns {number[]} Size of each pane.
+ */
+export const getInitialSizes = (resolvedDefaults) => {
+  const specified = resolvedDefaults.filter((v) => !Number.isNaN(v));
+  const totalSpecified = specified.reduce((sum, v) => sum + v, 0);
+  const unspecifiedCount = resolvedDefaults.length - specified.length;
+  const remaining = Math.max(0, 100 - totalSpecified);
+  const defaultSize = unspecifiedCount > 0 ? remaining / unspecifiedCount : 0;
+
+  return resolvedDefaults.map((v) => (Number.isNaN(v) ? defaultSize : v));
+};
+
+/**
+ * Clamp the delta a handle is moved by, so neither of the two panes around it leaves its size
+ * constraints. A positive delta grows the pane before the handle at the expense of the one after
+ * it, and a negative delta does the opposite.
+ * @param {number} deltaPercent Requested delta.
+ * @param {object} panes The panes around the handle.
+ * @param {number} panes.sizeBefore Current size of the pane before the handle.
+ * @param {number} panes.sizeAfter Current size of the pane after the handle.
+ * @param {PaneConstraints} panes.constraintsBefore Constraints of the pane before the handle.
+ * @param {PaneConstraints} panes.constraintsAfter Constraints of the pane after the handle.
+ * @returns {number} Delta both panes can accommodate.
+ */
+export const clampResizeDelta = (
+  deltaPercent,
+  { sizeBefore, sizeAfter, constraintsBefore, constraintsAfter },
+) => {
+  const canGrow = Math.min(
+    constraintsBefore.maxSize - sizeBefore,
+    sizeAfter - constraintsAfter.minSize,
+  );
+
+  const canShrink = Math.min(
+    sizeBefore - constraintsBefore.minSize,
+    constraintsAfter.maxSize - sizeAfter,
+  );
+
+  return deltaPercent > 0 ? Math.min(deltaPercent, canGrow) : -Math.min(-deltaPercent, canShrink);
+};
+
+/**
+ * Interpret a key pressed on a resize handle. Arrow keys move the handle by 1%, or 10% with Shift.
+ * Enter collapses or restores the pane before the handle. Home and End move it to its minimum and
+ * maximum; the delta for those is oversized, and gets clamped by {@link clampResizeDelta}.
+ * @param {object} options Options.
+ * @param {string} options.key The key pressed.
+ * @param {boolean} options.shiftKey Whether Shift was held.
+ * @param {boolean} options.isHorizontal Whether the panes are laid out horizontally, in which case
+ * the handle moves left and right.
+ * @param {boolean} options.rtl Whether the layout is right-to-left, which swaps the horizontal
+ * arrow keys.
+ * @returns {{ type: 'toggle' } | { type: 'resize', delta: number } | undefined} What to do, or
+ * `undefined` if the key has no meaning here.
+ */
+export const getHandleKeyAction = ({ key, shiftKey, isHorizontal, rtl }) => {
+  if (key === 'Enter') {
+    return { type: 'toggle' };
+  }
+
+  if (key === 'Home') {
+    return { type: 'resize', delta: -100 };
+  }
+
+  if (key === 'End') {
+    return { type: 'resize', delta: 100 };
+  }
+
+  const step = shiftKey ? 10 : 1;
+
+  if (isHorizontal) {
+    if (key === 'ArrowLeft') {
+      return { type: 'resize', delta: rtl ? step : -step };
+    }
+
+    if (key === 'ArrowRight') {
+      return { type: 'resize', delta: rtl ? -step : step };
+    }
+
+    return undefined;
+  }
+
+  if (key === 'ArrowUp') {
+    return { type: 'resize', delta: -step };
+  }
+
+  if (key === 'ArrowDown') {
+    return { type: 'resize', delta: step };
+  }
+
+  return undefined;
+};

package/dist/components/scroll/infinite-scroll.svelte

@@ -37,6 +37,8 @@
 
   const observer = new IntersectionObserver(([{ isIntersecting }]) => {
     if (isIntersecting) {
+      // The spinner is unmounted as soon as everything is loaded, so it can’t intersect afterwards
+      /* v8 ignore else */
       if (loading) {
         loadedItemSize += itemChunkSize;
       } else {

package/dist/components/select/combobox.svelte

@@ -184,6 +184,8 @@
   // 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(() => {
+    // The host is bound before any effect runs
+    /* v8 ignore next */
     if (!optionHost) {
       return;
     }
@@ -274,7 +276,7 @@
       {invalid}
       aria-expanded={isPopupOpen}
       aria-haspopup="listbox"
-      aria-label={ariaLabel}
+      {ariaLabel}
     />
   {/if}
   <Button

package/dist/components/select/select-tags.d.ts

@@ -0,0 +1,17 @@
+export function moveItem<T>(list: T[], from: number, to: number): T[];
+export function getKeyboardMoveTarget({ key, index, length, rtl }: {
+    key: string;
+    index: number;
+    length: number;
+    rtl: boolean;
+}): number;
+export function getDropIndex({ index, clientX, rect, rtl }: {
+    index: number;
+    clientX: number;
+    rect: {
+        left: number;
+        width: number;
+    };
+    rtl: boolean;
+}): number;
+export function getDropTarget(fromIndex: number, dropIndex: number): number | undefined;

package/dist/components/select/select-tags.js

@@ -0,0 +1,95 @@
+/**
+ * Reordering logic behind `<SelectTags>`, kept apart from the component so it can be tested
+ * without dragging anything.
+ */
+
+/**
+ * Move an item within a list.
+ * @template T
+ * @param {T[]} list List.
+ * @param {number} from Index of the item to move.
+ * @param {number} to Index the item should end up at.
+ * @returns {T[]} A new list with the item moved, or the same list if `from` and `to` are equal.
+ */
+export const moveItem = (list, from, to) => {
+  if (from === to) {
+    return list;
+  }
+
+  const newList = [...list];
+  const [item] = newList.splice(from, 1);
+
+  newList.splice(to, 0, item);
+
+  return newList;
+};
+
+/**
+ * Get the index a tag should move to when a key is pressed on it. The arrow keys swap it with a
+ * neighbor, following the visual direction of the list, and Home/End move it to either end.
+ * @param {object} options Options.
+ * @param {string} options.key The key pressed.
+ * @param {number} options.index Index of the tag.
+ * @param {number} options.length Number of tags.
+ * @param {boolean} options.rtl Whether the layout is right-to-left, in which case the arrow keys
+ * are swapped.
+ * @returns {number} Target index, or `-1` if the key doesn’t move the tag, including when it’s
+ * already at the end the key would move it to.
+ */
+export const getKeyboardMoveTarget = ({ key, index, length, rtl }) => {
+  const prevKey = rtl ? 'ArrowRight' : 'ArrowLeft';
+  const nextKey = rtl ? 'ArrowLeft' : 'ArrowRight';
+
+  if (key === prevKey && index > 0) {
+    return index - 1;
+  }
+
+  if (key === nextKey && index < length - 1) {
+    return index + 1;
+  }
+
+  if (key === 'Home' && index > 0) {
+    return 0;
+  }
+
+  if (key === 'End' && index < length - 1) {
+    return length - 1;
+  }
+
+  return -1;
+};
+
+/**
+ * Get where a dragged tag would be inserted when the pointer is over another tag: before it when
+ * the pointer is in the half nearer to the start of the list, after it otherwise.
+ * @param {object} options Options.
+ * @param {number} options.index Index of the tag under the pointer.
+ * @param {number} options.clientX Horizontal position of the pointer.
+ * @param {{ left: number, width: number }} options.rect Bounds of the tag under the pointer.
+ * @param {boolean} options.rtl Whether the layout is right-to-left, in which case the start of the
+ * list is on the right.
+ * @returns {number} Insertion index: the dragged tag would be placed before the tag at this index,
+ * so `length` means after the last one.
+ */
+export const getDropIndex = ({ index, clientX, rect, rtl }) => {
+  const inFirstHalf = clientX < rect.left + rect.width / 2;
+
+  return inFirstHalf !== rtl ? index : index + 1;
+};
+
+/**
+ * Turn an insertion index into the index the dragged tag ends up at once it’s been taken out of
+ * the list.
+ * @param {number} fromIndex Index of the dragged tag.
+ * @param {number} dropIndex Insertion index, as returned by {@link getDropIndex}.
+ * @returns {number | undefined} Destination index for {@link moveItem}, or `undefined` if the
+ * drop leaves the order unchanged, which is the case when the tag is dropped on either side of
+ * its own position.
+ */
+export const getDropTarget = (fromIndex, dropIndex) => {
+  if (dropIndex === fromIndex || dropIndex === fromIndex + 1) {
+    return undefined;
+  }
+
+  return dropIndex > fromIndex ? dropIndex - 1 : dropIndex;
+};

package/dist/components/select/select-tags.svelte

@@ -6,6 +6,7 @@
   import Icon from '../icon/icon.svelte';
   import Option from '../listbox/option.svelte';
   import Select from './select.svelte';
+  import { getDropIndex, getDropTarget, getKeyboardMoveTarget, moveItem } from './select-tags.js';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -66,8 +67,6 @@
    * @type {Set<any>}
    */
   const selectedValues = $derived(new Set(values));
-  const prevKey = $derived(isRTL() ? 'ArrowRight' : 'ArrowLeft');
-  const nextKey = $derived(isRTL() ? 'ArrowLeft' : 'ArrowRight');
 
   /**
    * Reference to the wrapper element.
@@ -99,12 +98,12 @@
    * @param {number} to Destination index.
    */
   const moveValue = (from, to) => {
+    // The callers only ask for actual moves
+    /* v8 ignore next */
     if (from === to) return;
 
-    const newValues = [...values];
-    const [item] = newValues.splice(from, 1);
+    const newValues = moveItem(values, from, to);
 
-    newValues.splice(to, 0, item);
     values = newValues;
     onReorder?.(new CustomEvent('Reorder', { detail: { values: newValues } }));
   };
@@ -162,10 +161,12 @@
             event.dataTransfer.dropEffect = 'move';
           }
 
-          const rect = event.currentTarget.getBoundingClientRect();
-          const inFirstHalf = event.clientX < rect.left + rect.width / 2;
-
-          dropIndex = inFirstHalf !== isRTL() ? index : index + 1;
+          dropIndex = getDropIndex({
+            index,
+            clientX: event.clientX,
+            rect: event.currentTarget.getBoundingClientRect(),
+            rtl: isRTL(),
+          });
         }}
         ondrop={async (event) => {
           event.preventDefault();
@@ -176,13 +177,14 @@
           dragIndex = undefined;
           dropIndex = undefined;
 
-          if (
-            fromIndex !== undefined &&
-            toIndex !== undefined &&
-            toIndex !== fromIndex &&
-            toIndex !== fromIndex + 1
-          ) {
-            await moveAndFocus(fromIndex, toIndex > fromIndex ? toIndex - 1 : toIndex);
+          if (fromIndex === undefined || toIndex === undefined) {
+            return;
+          }
+
+          const target = getDropTarget(fromIndex, toIndex);
+
+          if (target !== undefined) {
+            await moveAndFocus(fromIndex, target);
           }
         }}
         ondragend={() => {
@@ -197,18 +199,12 @@
           aria-selected="true"
           tabindex={disabled || readonly ? undefined : 0}
           onkeydown={async (event) => {
-            const { key } = event;
-
-            const targetIndex =
-              key === prevKey && index > 0
-                ? index - 1
-                : key === nextKey && index < values.length - 1
-                  ? index + 1
-                  : key === 'Home' && index > 0
-                    ? 0
-                    : key === 'End' && index < values.length - 1
-                      ? values.length - 1
-                      : -1;
+            const targetIndex = getKeyboardMoveTarget({
+              key: event.key,
+              index,
+              length: values.length,
+              rtl: isRTL(),
+            });
 
             if (targetIndex === -1) return;
 
@@ -246,6 +242,8 @@
       {required}
       {invalid}
       onChange={() => {
+        // The select only reports a change once an option has been picked
+        /* v8 ignore else */
         if (selectedValue) {
           values = [...values, selectedValue];
           onAddValue?.(new CustomEvent('AddValue', { detail: { value: selectedValue } }));