@sveltia/ui 0.78.4 → 0.79.1

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

@@ -4,6 +4,12 @@
  * size here is a percentage of the pane group unless stated otherwise.
  */
 
+import { getArrowKeys } from '../../services/navigation.js';
+
+/**
+ * @import { ResizablePaneSize } from '../../typedefs.js';
+ */
+
 /**
  * @typedef {object} SizeEnvironment
  * @property {number} containerSize Size of the pane group in pixels along its direction, or `0`
@@ -20,7 +26,7 @@
 
 /**
  * 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
+ * @param {ResizablePaneSize | 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
@@ -72,7 +78,7 @@ export const resolveToPercent = (value, fallback, env) => {
 /**
  * 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
+ * @param {{ minSize: ResizablePaneSize, maxSize: ResizablePaneSize } | 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.
@@ -91,21 +97,83 @@ export const resolvePaneConstraints = (paneDef, env) => {
   };
 };
 
+/**
+ * Spread an amount over some of the panes, as far as their constraints allow. A positive amount
+ * grows the panes and a negative one shrinks them.
+ * @param {number[]} sizes Size of each pane, updated in place.
+ * @param {PaneConstraints[]} constraints Constraints of each pane.
+ * @param {number[]} indexes Indexes of the panes to spread the amount over.
+ * @param {number} amount Amount to spread.
+ * @returns {number} What is left of the amount once the panes are full or empty.
+ */
+const spreadSize = (sizes, constraints, indexes, amount) => {
+  let remaining = amount;
+  let adjustable = indexes;
+
+  // Each round either uses up the amount or fills at least one pane, so the loop is bounded
+  while (adjustable.length && Math.abs(remaining) > 1e-9) {
+    const share = remaining / adjustable.length;
+
+    const moved = adjustable.map((i) => {
+      const { minSize, maxSize } = constraints[i];
+      const size = Math.min(maxSize, Math.max(minSize, sizes[i] + share));
+      const diff = size - sizes[i];
+
+      sizes[i] = size;
+
+      return diff;
+    });
+
+    remaining -= moved.reduce((sum, diff) => sum + diff, 0);
+    adjustable = adjustable.filter((i) =>
+      share > 0 ? sizes[i] < constraints[i].maxSize : sizes[i] > constraints[i].minSize,
+    );
+  }
+
+  return remaining;
+};
+
 /**
  * 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.
+ * whatever is left of the group equally. When constraints are given, each size is then brought
+ * within its pane’s constraints, and whatever that frees up or takes away is made up by the other
+ * panes, those without a default size first, so the total stays the same where possible.
  * @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.
+ * @param {PaneConstraints[]} [constraints] Constraints of each pane.
  * @returns {number[]} Size of each pane.
  */
-export const getInitialSizes = (resolvedDefaults) => {
+export const getInitialSizes = (resolvedDefaults, constraints) => {
   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;
+  const sizes = resolvedDefaults.map((v) => (Number.isNaN(v) ? defaultSize : v));
+
+  if (!constraints) {
+    return sizes;
+  }
+
+  const total = sizes.reduce((sum, v) => sum + v, 0);
+  const allConstraints = sizes.map((_v, i) => constraints[i] ?? { minSize: 0, maxSize: 100 });
+
+  const fitted = sizes.map((v, i) =>
+    Math.min(allConstraints[i].maxSize, Math.max(allConstraints[i].minSize, v)),
+  );
+
+  const indexes = sizes.map((_v, i) => i);
+  const unspecified = indexes.filter((i) => Number.isNaN(resolvedDefaults[i]));
+  const excess = total - fitted.reduce((sum, v) => sum + v, 0);
 
-  return resolvedDefaults.map((v) => (Number.isNaN(v) ? defaultSize : v));
+  spreadSize(
+    fitted,
+    allConstraints,
+    indexes,
+    spreadSize(fitted, allConstraints, unspecified, excess),
+  );
+
+  return fitted;
 };
 
 /**
@@ -124,14 +192,16 @@ export const clampResizeDelta = (
   deltaPercent,
   { sizeBefore, sizeAfter, constraintsBefore, constraintsAfter },
 ) => {
-  const canGrow = Math.min(
-    constraintsBefore.maxSize - sizeBefore,
-    sizeAfter - constraintsAfter.minSize,
+  // Never below zero, so a pane that is already out of its constraints can’t make the handle move
+  // the wrong way
+  const canGrow = Math.max(
+    0,
+    Math.min(constraintsBefore.maxSize - sizeBefore, sizeAfter - constraintsAfter.minSize),
   );
 
-  const canShrink = Math.min(
-    sizeBefore - constraintsBefore.minSize,
-    constraintsAfter.maxSize - sizeAfter,
+  const canShrink = Math.max(
+    0,
+    Math.min(sizeBefore - constraintsBefore.minSize, constraintsAfter.maxSize - sizeAfter),
   );
 
   return deltaPercent > 0 ? Math.min(deltaPercent, canGrow) : -Math.min(-deltaPercent, canShrink);
@@ -165,24 +235,13 @@ export const getHandleKeyAction = ({ key, shiftKey, isHorizontal, rtl }) => {
   }
 
   const step = shiftKey ? 10 : 1;
+  const { prevKey, nextKey } = getArrowKeys(isHorizontal ? 'horizontal' : 'vertical', rtl);
 
-  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') {
+  if (key === prevKey) {
     return { type: 'resize', delta: -step };
   }
 
-  if (key === 'ArrowDown') {
+  if (key === nextKey) {
     return { type: 'resize', delta: step };
   }
 

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

@@ -35,35 +35,29 @@
 
   const loading = $derived(items.length > loadedItemSize);
 
-  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 {
-        observer.disconnect();
-      }
-    }
-  });
-
   // Observe the spinner anew once each chunk is rendered: the observer only reports changes, so a
   // spinner that stays in view because the chunk didn’t fill the viewport would stall the loading.
-  // Observing an element always reports its current state first. Stop observing on unmount too.
+  // Observing an element always reports its current state first. The observer is created here
+  // rather than when the component is set up, since `IntersectionObserver` doesn’t exist during
+  // server-side rendering, and it’s disconnected before the next chunk and on unmount.
   $effect(() => {
     void loadedItemSize;
 
-    if (spinner) {
-      const target = spinner;
+    if (!spinner) {
+      return undefined;
+    }
 
-      observer.observe(target);
+    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
+      if (isIntersecting && loading) {
+        loadedItemSize += itemChunkSize;
+      }
+    });
 
-      return () => {
-        observer.unobserve(target);
-      };
-    }
+    observer.observe(spinner);
 
-    return undefined;
+    return () => {
+      observer.disconnect();
+    };
   });
 </script>
 
@@ -79,4 +73,5 @@
   .spinner {
     height: 1px;
   }
+
 </style>

package/dist/components/select/combobox.svelte

@@ -8,7 +8,7 @@
 <script>
   import { _ } from '@sveltia/i18n';
   import { onMount } from 'svelte';
-  import { normalize } from '../../services/group.svelte.js';
+  import { normalize } from '../../services/text.js';
   import { createOptionRegistry, getSelectedItemDetail } from '../../services/select.svelte.js';
   import { findTypeAheadMatch, TypeAhead } from '../../services/type-ahead.js';
   import Button from '../button/button.svelte';
@@ -20,7 +20,7 @@
   import Popup from '../util/popup.svelte';
 
   /**
-   * @import { ComboboxProps, TextInputProps } from '../../typedefs';
+   * @import { ComboboxProps, OptionEntry, TextInputProps } from '../../typedefs.js';
    */
 
   /**
@@ -102,15 +102,29 @@
   const registry = createOptionRegistry();
 
   /**
-   * Update the {@link label} and selected option when the {@link value} is changed.
+   * Update the {@link label} and selected option when the {@link value} is changed. A value that
+   * matches no option, including `undefined`, clears both, so the previous option doesn’t stay
+   * selected.
    */
   const _onChange = () => {
     const entry = registry.find(value);
 
-    if (entry) {
-      label = entry.label;
-      registry.selectOnly(value);
-    }
+    label = entry?.label ?? '';
+    // With no matching entry, this deselects every option
+    registry.selectOnly(value);
+  };
+
+  /**
+   * Raise a `Change` event for an option known only through its registry entry. There is no option
+   * element to report while the dropdown is collapsed.
+   * @param {OptionEntry} entry Selected option’s entry.
+   */
+  const dispatchEntryChange = ({ type, name, label: entryLabel, value: entryValue }) => {
+    onChange?.(
+      new CustomEvent('Change', {
+        detail: { target: undefined, type, name, label: entryLabel, value: entryValue },
+      }),
+    );
   };
 
   /**
@@ -126,6 +140,24 @@
     onChange?.(new CustomEvent('Change', { detail }));
   };
 
+  /**
+   * Update the {@link value} as the user types in the editable combobox. The text is a free-form
+   * value, so the `Change` event carries the text itself rather than an option.
+   * @param {Event} event The `input` event.
+   */
+  const onTextInput = (event) => {
+    const { target } = /** @type {Event & { target: HTMLInputElement }} */ (event);
+
+    value = target.value;
+    _onChange();
+    restProps.oninput?.(event);
+    onChange?.(
+      new CustomEvent('Change', {
+        detail: { target, type: 'string', name: undefined, label: target.value, value },
+      }),
+    );
+  };
+
   /**
    * Keystroke buffer for type-ahead on the collapsed select.
    */
@@ -178,17 +210,7 @@
 
     value = entry.value;
     _onChange();
-    onChange?.(
-      new CustomEvent('Change', {
-        detail: {
-          target: undefined,
-          type: entry.type,
-          name: entry.name,
-          label: entry.label,
-          value: entry.value,
-        },
-      }),
-    );
+    dispatchEntryChange(entry);
   };
 
   /**
@@ -280,17 +302,7 @@
     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,
-        },
-      }),
-    );
+    dispatchEntryChange(entry);
   });
 
   $effect(() => {
@@ -304,7 +316,7 @@
   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}>
+<div role="none" class="sui combobox {className}" class:editable {hidden}>
   {#if !editable}
     <div
       bind:this={comboboxElement}
@@ -345,6 +357,7 @@
       aria-expanded={isPopupOpen}
       aria-haspopup="listbox"
       {ariaLabel}
+      oninput={onTextInput}
     />
   {/if}
   <Button
@@ -493,12 +506,6 @@
   font-size: var(--sui-font-size-xx-large);
   opacity: 0.5;
 }
-.combobox > :global(.icon) {
-  position: absolute;
-  inset-block-start: 8px;
-  inset-inline-start: 8px;
-  z-index: 1;
-}
 .combobox > :global(button) {
   position: absolute;
   inset-block-start: 0;
@@ -521,22 +528,6 @@
   padding-inline: 8px 32px;
   width: 0;
 }
-.combobox + :global([role=listbox]) {
-  position: fixed;
-  z-index: 100;
-  border-radius: var(--sui-control-medium-border-radius);
-  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
-  overflow: auto;
-  background-color: var(--sui-secondary-background-color);
-  -webkit-backdrop-filter: blur(32px);
-  backdrop-filter: blur(32px);
-  /* Add .1s delay before the position can be determined */
-  transition: opacity 100ms 100ms;
-}
-.combobox + :global([role=listbox]:not(.open)) {
-  opacity: 0;
-  pointer-events: none;
-}
 
 .combobox-inner {
   flex: auto;

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

@@ -10,5 +10,5 @@ type Combobox = {
  * @todo Add DOM API compatibility.
  */
 declare const Combobox: import("svelte").Component<ComboboxProps & TextInputProps & Record<string, any>, {}, "value">;
-import type { ComboboxProps } from '../../typedefs';
-import type { TextInputProps } from '../../typedefs';
+import type { ComboboxProps } from '../../typedefs.js';
+import type { TextInputProps } from '../../typedefs.js';

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

@@ -67,6 +67,12 @@
    * @type {Set<any>}
    */
   const selectedValues = $derived(new Set(values));
+  /**
+   * Whether any option is left to pick. This can’t be told by comparing the number of selected
+   * values with the number of options, as the values may include entries missing from the options.
+   * @type {boolean}
+   */
+  const hasUnselectedOptions = $derived(options.some(({ value }) => !selectedValues.has(value)));
 
   /**
    * Reference to the wrapper element.
@@ -241,7 +247,7 @@
       </span>
     {/each}
   </span>
-  {#if (typeof max !== 'number' || values.length < max) && values.length < options.length}
+  {#if (typeof max !== 'number' || values.length < max) && hasUnselectedOptions}
     <Select
       {...restProps}
       bind:value={selectedValue}

package/dist/components/select/select.svelte

@@ -9,7 +9,7 @@
   import Combobox from './combobox.svelte';
 
   /**
-   * @import { ComboboxProps } from '../../typedefs';
+   * @import { ComboboxProps } from '../../typedefs.js';
    */
 
   /**
@@ -19,29 +19,9 @@
     /* eslint-disable prefer-const */
     value = $bindable(),
     class: className,
-    hidden = false,
-    disabled = false,
-    readonly = false,
-    required = false,
-    invalid = false,
-    children,
-    onChange,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<Combobox
-  {...restProps}
-  bind:value
-  class="sui select {className}"
-  {hidden}
-  {disabled}
-  {readonly}
-  {required}
-  {invalid}
-  {onChange}
-  editable={false}
->
-  {@render children?.()}
-</Combobox>
+<Combobox {...restProps} bind:value class="sui select {className}" editable={false} />

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

@@ -10,4 +10,4 @@ type Select = {
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  */
 declare const Select: import("svelte").Component<ComboboxProps & Record<string, any>, {}, "value">;
-import type { ComboboxProps } from '../../typedefs';
+import type { ComboboxProps } from '../../typedefs.js';

package/dist/components/slider/slider.d.ts

@@ -21,3 +21,9 @@ export function wouldCrossThumbs({ valueIndex, targetPosition, sliderPositions }
     targetPosition: number;
     sliderPositions: number[];
 }): boolean;
+export function getSliderCurrentIndex({ valueList, value, decreasing }: {
+    valueList: number[];
+    value: number;
+    decreasing: boolean;
+}): number;
+export function getNearestThumbIndex(sliderPositions: number[], logicalX: number): number;

package/dist/components/slider/slider.js

@@ -1,3 +1,5 @@
+import { getArrowKeys } from '../../services/navigation.js';
+
 /**
  * Geometry and keyboard logic behind `<Slider>`, kept apart from the component so the value
  * calculations can be tested without a rendered track.
@@ -89,11 +91,14 @@ export const findNearestStepIndex = (positionList, logicalX) => {
  * @returns {1 | -1 | 0} `1` to increase, `-1` to decrease, `0` if the key doesn’t move the thumb.
  */
 export const getSliderKeyDirection = (key, rtl) => {
-  if (key === 'ArrowUp' || key === (rtl ? 'ArrowLeft' : 'ArrowRight')) {
+  // Only the horizontal keys are mirrored; `ArrowUp` increases the value, unlike in a list
+  const { prevKey, nextKey } = getArrowKeys('horizontal', rtl);
+
+  if (key === 'ArrowUp' || key === nextKey) {
     return 1;
   }
 
-  if (key === 'ArrowDown' || key === (rtl ? 'ArrowRight' : 'ArrowLeft')) {
+  if (key === 'ArrowDown' || key === prevKey) {
     return -1;
   }
 
@@ -152,3 +157,51 @@ export const getSliderKeyTargetIndex = ({ key, rtl, currentIndex, length }) => {
 export const wouldCrossThumbs = ({ valueIndex, targetPosition, sliderPositions }) =>
   (valueIndex === 0 && sliderPositions[1] <= targetPosition) ||
   (valueIndex === 1 && sliderPositions[0] >= targetPosition);
+
+/**
+ * Get the step index a key press starts from. A value that sits between two steps, such as `55`
+ * with a step of `10`, has no index of its own, so it starts from the step below when the key
+ * increases the value and from the step above when it decreases it. That way the first press
+ * moves the thumb to the adjacent step in the direction of the key.
+ * @param {object} options Options.
+ * @param {number[]} options.valueList Values of each step, in ascending order.
+ * @param {number} options.value Current value.
+ * @param {boolean} options.decreasing Whether the key decreases the value.
+ * @returns {number} Index of the current step. It can be `-1` or `valueList.length` for a value
+ * below the minimum or above the maximum, so any move brings it back into the range.
+ */
+export const getSliderCurrentIndex = ({ valueList, value, decreasing }) => {
+  const index = valueList.indexOf(value);
+
+  if (index !== -1) {
+    return index;
+  }
+
+  if (decreasing) {
+    const upperIndex = valueList.findIndex((v) => v > value);
+
+    return upperIndex === -1 ? valueList.length : upperIndex;
+  }
+
+  return valueList.findLastIndex((v) => v < value);
+};
+
+/**
+ * Find the thumb of a multi-thumb slider closest to the given position, so a click on the track
+ * moves that one. When both thumbs sit at the same spot, the second one is picked for a position
+ * after it and the first one otherwise, so the click never has to cross the other thumb.
+ * @param {number[]} sliderPositions Current position of each thumb, in pixels.
+ * @param {number} logicalX Logical position in pixels.
+ * @returns {number} Index of the nearest thumb, `0` or `1`.
+ */
+export const getNearestThumbIndex = (sliderPositions, logicalX) => {
+  const [position0, position1] = sliderPositions;
+  const diff0 = Math.abs(position0 - logicalX);
+  const diff1 = Math.abs(position1 - logicalX);
+
+  if (diff0 === diff1) {
+    return logicalX > position1 ? 1 : 0;
+  }
+
+  return diff1 < diff0 ? 1 : 0;
+};