@sveltia/ui 0.53.1 → 0.55.0

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

@@ -136,16 +136,20 @@
    * @param {PointerEvent} event `pointerup` or `pointercancel` event.
    */
   const onPointerUp = (event) => {
-    if (!dragging || event.pointerId !== targetPointerId) return;
+    const { pointerId } = event;
 
+    if (!dragging || pointerId !== targetPointerId) return;
+
+    element?.releasePointerCapture(pointerId);
     dragging = false;
     startScreenPos = 0;
     targetPointerId = 0;
 
+    onResizeEnd?.();
+
     document.removeEventListener('pointermove', onPointerMove);
     document.removeEventListener('pointerup', onPointerUp);
     document.removeEventListener('pointercancel', onPointerUp);
-    onResizeEnd?.();
   };
 
   /**
@@ -158,9 +162,13 @@
     event.preventDefault();
     event.stopPropagation();
 
+    const { screenX, screenY, pointerId } = event;
+
     dragging = true;
-    startScreenPos = isHorizontal ? event.screenX : event.screenY;
-    targetPointerId = event.pointerId;
+    startScreenPos = isHorizontal ? screenX : screenY;
+    targetPointerId = pointerId;
+    element?.setPointerCapture(pointerId);
+
     onResizeStart?.();
 
     document.addEventListener('pointermove', onPointerMove);

package/dist/components/slider/slider.svelte

@@ -88,17 +88,24 @@
     // Convert physical position to logical position (always LTR)
     // In RTL, left side (physicalX=0) maps to max value (logicalX=barWidth)
     // In LTR, left side (physicalX=0) maps to min value (logicalX=0)
-    const logicalX = isRTL() ? barWidth - physicalX : physicalX;
-
-    if (logicalX < 0 || logicalX > barWidth) {
-      return;
-    }
-
+    // Clamp to the track bounds so a fast drag that overshoots the edge still resolves to the
+    // nearest valid position instead of dropping the update.
+    const logicalX = Math.min(barWidth, Math.max(0, isRTL() ? barWidth - physicalX : physicalX));
     const fromIndex = positionList.findLastIndex((s) => s <= logicalX);
     const toIndex = positionList.findIndex((s) => logicalX <= s);
-    const fromDiff = Math.abs(positionList[fromIndex] - logicalX);
-    const toDiff = Math.abs(positionList[toIndex] - logicalX);
-    const index = fromDiff < toDiff ? fromIndex : toIndex;
+    /** @type {number} */
+    let index;
+
+    if (fromIndex === -1) {
+      index = toIndex;
+    } else if (toIndex === -1) {
+      index = fromIndex;
+    } else {
+      const fromDiff = Math.abs(positionList[fromIndex] - logicalX);
+      const toDiff = Math.abs(positionList[toIndex] - logicalX);
+
+      index = fromDiff < toDiff ? fromIndex : toIndex;
+    }
 
     if (
       sliderPositions[targetValueIndex] === positionList[index] ||
@@ -184,6 +191,7 @@
       return;
     }
 
+    event.preventDefault();
     event.stopPropagation();
 
     const screenDiff = screenX - startScreenX;
@@ -198,7 +206,7 @@
    * @param {PointerEvent} event `pointerup` or `pointercancel` event.
    */
   const onPointerUp = (event) => {
-    const { pointerId } = event;
+    const { pointerId, target } = event;
 
     if (disabled || readonly || !dragging || pointerId !== targetPointerId) {
       return;
@@ -206,8 +214,10 @@
 
     event.stopPropagation();
 
+    const slider = /** @type {HTMLElement} */ (target);
+
     // Handle a click on the bars
-    if (/** @type {HTMLElement} */ (event.target).matches('.base-bar, .slider-bar')) {
+    if (slider.matches('.base-bar, .slider-bar')) {
       const rect = /** @type {HTMLElement} */ (base).getBoundingClientRect();
       // Get physical X position from left edge
       const physicalX = /** @type {any} */ (event).clientX - rect.left;
@@ -216,6 +226,7 @@
     }
 
     // Reset everything
+    slider.releasePointerCapture(pointerId);
     dragging = false;
     startX = 0;
     startScreenX = 0;
@@ -233,16 +244,17 @@
    * @param {number} [valueIndex] Index in the {@link values} array to be used to get/set the value.
    */
   const onPointerDown = (event, valueIndex = 0) => {
-    const { clientX, screenX, pointerId } = event;
-
     if (disabled || readonly) {
       return;
     }
 
+    event.preventDefault();
     event.stopPropagation();
 
     dragging = true;
 
+    const { clientX, screenX, pointerId, target } = event;
+    const slider = /** @type {HTMLElement} */ (target);
     const rect = /** @type {HTMLElement} */ (base).getBoundingClientRect();
 
     // Store physical X position from left edge (same in LTR and RTL)
@@ -250,6 +262,7 @@
     startScreenX = screenX;
     targetPointerId = pointerId;
     targetValueIndex = valueIndex;
+    slider.setPointerCapture(pointerId);
 
     document.addEventListener('pointermove', onPointerMove);
     document.addEventListener('pointerup', onPointerUp);

package/dist/components/tree/tree-item.svelte

@@ -0,0 +1,243 @@
+<!--
+  @component
+  An item (node) within the `<Tree>` widget. An item that has the `items` slot content becomes a
+  parent node that can be expanded and collapsed.
+  @see https://w3c.github.io/aria/#treeitem
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+-->
+<script>
+  import { isRTL } from '@sveltia/i18n';
+  import { getContext, setContext } from 'svelte';
+  import Icon from '../icon/icon.svelte';
+
+  /**
+   * @import { Snippet } from 'svelte';
+   * @import { Attachment } from 'svelte/attachments';
+   * @import { CommonEventHandlers } from '../../typedefs';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {string} [class] The `class` attribute on the wrapper element.
+   * @property {boolean} [hidden] Whether to hide the widget. An alias of the `aria-hidden`
+   * attribute.
+   * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
+   * attribute.
+   * @property {boolean} [selected] Whether to select the item. An alias of the `aria-selected`
+   * attribute.
+   * @property {boolean} [expanded] Whether to expand the item. An alias of the `aria-expanded`
+   * attribute. Ignored if the item has no `items` slot content.
+   * @property {string} [label] Text label displayed on the item.
+   * @property {any} [value] The `data-value` attribute on the item. Default: the `label`.
+   * @property {string} [valueType] Data type of the `value`. Typically `string`, `number` or
+   * `boolean`. Default: auto detect.
+   * @property {Snippet} [children] Primary slot content, used instead of the `label`.
+   * @property {Snippet} [items] Child items slot content, which makes the item a parent node.
+   * @property {Snippet} [startIcon] Start icon slot content.
+   * @property {Snippet} [endIcon] End icon slot content.
+   * @property {Snippet} [chevronIcon] Chevron icon slot content.
+   * @property {(event: CustomEvent) => void} [onChange] Custom `Change` event handler, called when
+   * the selection state is changed.
+   * @property {(event: CustomEvent) => void} [onSelect] Custom `Select` event handler.
+   * @property {(event: CustomEvent) => void} [onExpand] Custom `Expand` event handler, called when
+   * the item is expanded or collapsed.
+   */
+
+  /**
+   * @type {CommonEventHandlers & Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    selected = $bindable(false),
+    expanded = $bindable(false),
+    class: className,
+    hidden = false,
+    disabled = false,
+    label = '',
+    // svelte-ignore state_referenced_locally
+    value = label,
+    // svelte-ignore state_referenced_locally
+    valueType = typeof value,
+    children,
+    items,
+    startIcon,
+    endIcon,
+    chevronIcon,
+    onChange,
+    onSelect,
+    onExpand,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const id = $props.id();
+  /** Nesting level of the item, starting with 1 for the root level items. */
+  const level = /** @type {number} */ (getContext('sui:tree-item-level') ?? 0) + 1;
+
+  setContext('sui:tree-item-level', level);
+
+  /**
+   * Handle the `Change` event dispatched by the parent widget when the selection state is changed.
+   * @param {any} event `Change` event.
+   */
+  const handleChange = (event) => {
+    selected = event.detail.selected;
+    onChange?.(event);
+  };
+
+  /**
+   * Handle the `Expand` event dispatched by the parent widget when the item is expanded or
+   * collapsed.
+   * @param {any} event `Expand` event.
+   */
+  const handleExpand = (event) => {
+    expanded = event.detail.expanded;
+    onExpand?.(event);
+  };
+
+  /**
+   * Handle the `Select` event dispatched by the parent widget when the item is selected.
+   * @param {any} event `Select` event.
+   */
+  const handleSelect = (event) => {
+    onSelect?.(event);
+  };
+
+  /**
+   * Listen to the custom events dispatched on the item element by the parent `<Tree>` widget, so
+   * the component state can be kept in sync with the DOM state.
+   * @type {Attachment}
+   */
+  const handleEvents = (element) => {
+    /** @type {[string, (event: any) => void][]} */
+    const listeners = [
+      ['Change', handleChange],
+      ['Expand', handleExpand],
+      ['Select', handleSelect],
+    ];
+
+    listeners.forEach(([type, handler]) => {
+      element.addEventListener(type, handler);
+    });
+
+    return () => {
+      listeners.forEach(([type, handler]) => {
+        element.removeEventListener(type, handler);
+      });
+    };
+  };
+</script>
+
+<div
+  {...restProps}
+  {id}
+  role="treeitem"
+  class="sui treeitem {className}"
+  tabindex="-1"
+  {hidden}
+  aria-hidden={hidden}
+  aria-disabled={disabled}
+  aria-selected={selected}
+  aria-expanded={items ? expanded : undefined}
+  aria-level={level}
+  aria-labelledby="{id}-label"
+  data-label={label}
+  data-value={value}
+  data-type={valueType}
+  {@attach handleEvents}
+>
+  <div role="none" class="row" style:--sui-tree-item-level={level}>
+    {#if items}
+      <span role="none" class="chevron" data-action="toggle">
+        {#if chevronIcon}
+          {@render chevronIcon()}
+        {:else}
+          <Icon name={isRTL() ? 'chevron_left' : 'chevron_right'} />
+        {/if}
+      </span>
+    {:else}
+      <span role="none" class="chevron placeholder"></span>
+    {/if}
+    {@render startIcon?.()}
+    <span role="none" class="label" id="{id}-label">
+      {#if label}
+        {label}
+      {:else}
+        {@render children?.()}
+      {/if}
+    </span>
+    {@render endIcon?.()}
+  </div>
+  {#if items}
+    <div role="group" class="group" hidden={!expanded}>
+      {@render items()}
+    </div>
+  {/if}
+</div>
+
+<style>[role=treeitem] {
+  display: block;
+}
+[role=treeitem][hidden] {
+  display: none;
+}
+[role=treeitem]:focus-visible {
+  outline-color: transparent;
+}
+[role=treeitem]:focus-visible > .row {
+  outline-color: var(--sui-focus-ring-color);
+  outline-offset: calc(var(--sui-focus-ring-width) * -1);
+}
+[role=treeitem][aria-selected=true] > .row {
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-selected-background-color);
+}
+[role=treeitem] > .row:hover {
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-hover-background-color);
+}
+[role=treeitem] > .row:active {
+  background-color: var(--sui-active-background-color);
+}
+[role=treeitem][aria-expanded=true] > .row > .chevron:dir(ltr) {
+  transform: rotate(90deg);
+}
+[role=treeitem][aria-expanded=true] > .row > .chevron:dir(rtl) {
+  transform: rotate(-90deg);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: var(--sui-tree-item-border-radius, var(--sui-option-border-radius, 4px));
+  padding: var(--sui-tree-item-padding, 0 8px 0 4px);
+  padding-inline-start: calc((var(--sui-tree-item-level, 1) - 1) * var(--sui-tree-item-indent, 16px) + 4px);
+  min-height: var(--sui-tree-item-height, var(--sui-option-height));
+  cursor: pointer;
+  transition: background-color 200ms;
+}
+
+.chevron {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sui-tree-item-chevron-size, 24px);
+  height: var(--sui-tree-item-chevron-size, 24px);
+  transition: transform 200ms;
+}
+
+.label {
+  flex: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.group {
+  display: block;
+}
+.group[hidden] {
+  display: none;
+}</style>

package/dist/components/tree/tree-item.svelte.d.ts

@@ -0,0 +1,158 @@
+export default TreeItem;
+type TreeItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<KeyboardEventHandlers & MouseEventHandlers & PointerEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>>): void;
+};
+/**
+ * An item (node) within the `<Tree>` widget. An item that has the `items` slot content becomes a
+ * parent node that can be expanded and collapsed.
+ * @see https://w3c.github.io/aria/#treeitem
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+ */
+declare const TreeItem: import("svelte").Component<import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+    /**
+     * The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether to select the item. An alias of the `aria-selected`
+     * attribute.
+     */
+    selected?: boolean | undefined;
+    /**
+     * Whether to expand the item. An alias of the `aria-expanded`
+     * attribute. Ignored if the item has no `items` slot content.
+     */
+    expanded?: boolean | undefined;
+    /**
+     * Text label displayed on the item.
+     */
+    label?: string | undefined;
+    /**
+     * The `data-value` attribute on the item. Default: the `label`.
+     */
+    value?: any;
+    /**
+     * Data type of the `value`. Typically `string`, `number` or
+     * `boolean`. Default: auto detect.
+     */
+    valueType?: string | undefined;
+    /**
+     * Primary slot content, used instead of the `label`.
+     */
+    children?: Snippet<[]> | undefined;
+    /**
+     * Child items slot content, which makes the item a parent node.
+     */
+    items?: Snippet<[]> | undefined;
+    /**
+     * Start icon slot content.
+     */
+    startIcon?: Snippet<[]> | undefined;
+    /**
+     * End icon slot content.
+     */
+    endIcon?: Snippet<[]> | undefined;
+    /**
+     * Chevron icon slot content.
+     */
+    chevronIcon?: Snippet<[]> | undefined;
+    /**
+     * Custom `Change` event handler, called when
+     * the selection state is changed.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * Custom `Select` event handler.
+     */
+    onSelect?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * Custom `Expand` event handler, called when
+     * the item is expanded or collapsed.
+     */
+    onExpand?: ((event: CustomEvent) => void) | undefined;
+} & Record<string, any>, {}, "selected" | "expanded">;
+type Props = {
+    /**
+     * The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether to select the item. An alias of the `aria-selected`
+     * attribute.
+     */
+    selected?: boolean | undefined;
+    /**
+     * Whether to expand the item. An alias of the `aria-expanded`
+     * attribute. Ignored if the item has no `items` slot content.
+     */
+    expanded?: boolean | undefined;
+    /**
+     * Text label displayed on the item.
+     */
+    label?: string | undefined;
+    /**
+     * The `data-value` attribute on the item. Default: the `label`.
+     */
+    value?: any;
+    /**
+     * Data type of the `value`. Typically `string`, `number` or
+     * `boolean`. Default: auto detect.
+     */
+    valueType?: string | undefined;
+    /**
+     * Primary slot content, used instead of the `label`.
+     */
+    children?: Snippet<[]> | undefined;
+    /**
+     * Child items slot content, which makes the item a parent node.
+     */
+    items?: Snippet<[]> | undefined;
+    /**
+     * Start icon slot content.
+     */
+    startIcon?: Snippet<[]> | undefined;
+    /**
+     * End icon slot content.
+     */
+    endIcon?: Snippet<[]> | undefined;
+    /**
+     * Chevron icon slot content.
+     */
+    chevronIcon?: Snippet<[]> | undefined;
+    /**
+     * Custom `Change` event handler, called when
+     * the selection state is changed.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * Custom `Select` event handler.
+     */
+    onSelect?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * Custom `Expand` event handler, called when
+     * the item is expanded or collapsed.
+     */
+    onExpand?: ((event: CustomEvent) => void) | undefined;
+};
+import type { Snippet } from 'svelte';

package/dist/components/tree/tree.svelte

@@ -0,0 +1,108 @@
+<!--
+  @component
+  A tree view widget that displays a hierarchical list of items, which can be expanded, collapsed
+  and selected.
+  @see https://w3c.github.io/aria/#tree
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+-->
+<script>
+  import { activateTree } from '../../services/tree.svelte.js';
+
+  /**
+   * @import { Snippet } from 'svelte';
+   * @import { CommonEventHandlers } from '../../typedefs';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {HTMLElement} [element] A reference to the wrapper element.
+   * @property {string} [class] The `class` attribute on the wrapper element.
+   * @property {boolean} [hidden] Whether to hide the widget. An alias of the `aria-hidden`
+   * attribute.
+   * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
+   * attribute.
+   * @property {boolean} [readonly] Whether to make the widget read-only. An alias of the
+   * `aria-readonly` attribute.
+   * @property {boolean} [multiple] Whether to allow selecting more than one `<TreeItem>`. An alias
+   * of the `aria-multiselectable` attribute.
+   * @property {boolean} [clickToSelect] Whether to select an item by clicking on it.
+   * @property {boolean} [selectionFollowsFocus] Whether to select an item as soon as it receives
+   * focus. Default: `true` on a single-select tree, `false` on a multi-select tree.
+   * @property {boolean} [expandOnSelect] Whether to expand or collapse a parent item when the item
+   * itself, rather than its chevron, is clicked or activated with the Enter key.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element. Required
+   * unless the `aria-labelledby` attribute is provided.
+   * @property {Snippet} [children] Primary slot content.
+   * @property {(event: CustomEvent) => void} [onChange] Custom `Change` event handler.
+   */
+
+  /**
+   * @type {CommonEventHandlers & Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    element = $bindable(),
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    multiple = false,
+    clickToSelect = true,
+    selectionFollowsFocus = undefined,
+    expandOnSelect = true,
+    ariaLabel = undefined,
+    children,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+</script>
+
+<!--
+  The `aria-readonly` attribute is not part of the `tree` role in ARIA, but we still use it to keep
+  the API consistent with the other selection widgets, including `<Listbox>`. It’s only rendered
+  when the widget is actually read-only, so assistive technologies can safely ignore it.
+-->
+<!-- svelte-ignore a11y_role_supports_aria_props -->
+<div
+  bind:this={element}
+  {...restProps}
+  role="tree"
+  class="sui tree {className}"
+  {hidden}
+  aria-hidden={hidden}
+  aria-disabled={disabled}
+  aria-readonly={readonly || undefined}
+  aria-multiselectable={multiple}
+  aria-label={ariaLabel}
+  onChange={(/** @type {CustomEvent} */ event) => {
+    onChange?.(event);
+  }}
+  {@attach activateTree({ clickToSelect, selectionFollowsFocus, expandOnSelect })}
+>
+  <div role="none" class="inner" inert={disabled}>
+    {@render children?.()}
+  </div>
+</div>
+
+<style>[role=tree] {
+  display: flex;
+  flex-direction: column;
+  margin: var(--sui-focus-ring-width);
+  border-width: var(--sui-tree-border-width, 1px);
+  border-style: var(--sui-tree-border-style, solid);
+  border-color: var(--sui-tree-border-color, var(--sui-secondary-border-color));
+  border-radius: var(--sui-tree-border-radius, 4px);
+  padding: var(--sui-tree-padding, 4px);
+  min-width: var(--sui-tree-min-width, calc(var(--sui-option-height) * 5));
+  overflow: auto;
+  color: var(--sui-tree-foreground-color, var(--sui-control-foreground-color));
+  background-color: var(--sui-tree-background-color);
+  font-family: var(--sui-control-font-family);
+  font-size: var(--sui-control-font-size);
+  line-height: var(--sui-control-line-height);
+}
+
+.inner {
+  display: contents;
+}</style>