@sveltia/ui 0.32.1 → 0.33.0

package/dist/components/checkbox/checkbox-group.svelte.d.ts

@@ -22,7 +22,7 @@ declare const CheckboxGroup: import("svelte").Component<{
     /**
      * Orientation of the widget.
      */
-    orientation?: "vertical" | "horizontal" | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
     /**
      * Primary slot content.
      */
@@ -46,7 +46,7 @@ type Props = {
     /**
      * Orientation of the widget.
      */
-    orientation?: "vertical" | "horizontal" | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
     /**
      * Primary slot content.
      */

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

@@ -21,7 +21,7 @@ declare const Divider: import("svelte").Component<{
      * Orientation of the widget. An alias of the
      * `aria-orientation` attribute.
      */
-    orientation?: "vertical" | "horizontal" | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
 } & Record<string, any>, {}, "">;
 type Props = {
     /**
@@ -37,5 +37,5 @@ type Props = {
      * Orientation of the widget. An alias of the
      * `aria-orientation` attribute.
      */
-    orientation?: "vertical" | "horizontal" | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
 };

package/dist/components/radio/radio-group.svelte.d.ts

@@ -41,7 +41,7 @@ declare const RadioGroup: import("svelte").Component<{
      * Orientation of the widget. An alias of the
      * `aria-orientation` attribute.
      */
-    orientation?: "vertical" | "horizontal" | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
     /**
      * Primary slot content.
      */
@@ -84,7 +84,7 @@ type Props = {
      * Orientation of the widget. An alias of the
      * `aria-orientation` attribute.
      */
-    orientation?: "vertical" | "horizontal" | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
     /**
      * Primary slot content.
      */

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

@@ -0,0 +1,312 @@
+<!--
+  @component
+  A draggable handle for resizing adjacent panes within a `<ResizablePaneGroup>`.
+  @see https://w3c.github.io/aria/#separator
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+-->
+<script>
+  import { getContext } from 'svelte';
+  import { isRTL } from '../../services/i18n.js';
+
+  /**
+   * @import { Snippet } from 'svelte';
+   * @import { PaneGroupContext } from '../../typedefs.js';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {boolean} [disabled] Whether to disable the handle.
+   * @property {boolean} [showHandleBar] Whether to show the handle bar.
+   * @property {string} [class] The `class` attribute on the wrapper element.
+   * @property {Snippet} [children] Custom handle content. If omitted, a default visual indicator is
+   * rendered.
+   * @property {() => void} [onResizeStart] Called when a resize interaction begins (pointer down or
+   * first keyboard step).
+   * @property {() => void} [onResizeEnd] Called when a resize interaction ends (pointer up/cancel
+   * or handle blur).
+   */
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    disabled = false,
+    showHandleBar = false,
+    class: className,
+    children,
+    onResizeStart,
+    onResizeEnd,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  /** @type {PaneGroupContext} */
+  const ctx = getContext('paneGroup');
+
+  if (!ctx) {
+    throw new Error('<ResizableHandle> must be used inside a <ResizablePaneGroup>');
+  }
+
+  const handleIndex = ctx.registerHandle();
+  const isHorizontal = $derived(ctx.direction === 'horizontal');
+  const sizes = $derived(ctx.sizes);
+  // The value reported via aria-valuenow is the size of the pane immediately before this handle
+  const currentPaneSize = $derived(sizes[handleIndex] ?? 0);
+  const currentPaneMin = $derived(
+    Math.max(
+      ctx.paneDefs[handleIndex]?.minSize ?? 0,
+      100 - ctx.paneDefs.reduce((sum, p, i) => sum + (i !== handleIndex ? p.maxSize : 0), 0),
+    ),
+  );
+  const currentPaneMax = $derived(
+    Math.min(
+      ctx.paneDefs[handleIndex]?.maxSize ?? 100,
+      100 - ctx.paneDefs.reduce((sum, p, i) => sum + (i !== handleIndex ? p.minSize : 0), 0),
+    ),
+  );
+
+  /**
+   * A reference to the handle element.
+   * @type {HTMLElement | undefined}
+   */
+  let element = $state();
+  let dragging = $state(false);
+  let startScreenPos = $state(0);
+  let targetPointerId = $state(0);
+  /**
+   * Whether the handle is being resized via keyboard (at least one step fired).
+   */
+  let keyResizing = $state(false);
+
+  /**
+   * Get the pane group container element's size in pixels for px→% conversion.
+   * @returns {number} Container size in pixels.
+   */
+  const getContainerSize = () => {
+    const container = element?.closest('.resizable-pane-group');
+
+    if (!container) return 0;
+
+    return isHorizontal ? container.clientWidth : container.clientHeight;
+  };
+
+  /**
+   * Handle pointer move events (attached to `document` while dragging).
+   * @param {PointerEvent} event `pointermove` event.
+   */
+  const onPointerMove = (event) => {
+    const { screenX, screenY, pointerId } = event;
+
+    if (disabled || !dragging || pointerId !== targetPointerId) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const screenPos = isHorizontal ? screenX : screenY;
+    const pixelDelta = screenPos - startScreenPos;
+    const containerSize = getContainerSize();
+
+    if (!containerSize) return;
+
+    let percentDelta = (pixelDelta / containerSize) * 100;
+
+    // In RTL with a horizontal layout, the visual direction is reversed
+    if (isHorizontal && $isRTL) {
+      percentDelta = -percentDelta;
+    }
+
+    startScreenPos = screenPos;
+    ctx.resize(handleIndex, percentDelta);
+  };
+
+  /**
+   * Handle pointer up/cancel events (attached to `document` while dragging).
+   * @param {PointerEvent} event `pointerup` or `pointercancel` event.
+   */
+  const onPointerUp = (event) => {
+    if (!dragging || event.pointerId !== targetPointerId) return;
+
+    dragging = false;
+    startScreenPos = 0;
+    targetPointerId = 0;
+
+    document.removeEventListener('pointermove', onPointerMove);
+    document.removeEventListener('pointerup', onPointerUp);
+    document.removeEventListener('pointercancel', onPointerUp);
+    onResizeEnd?.();
+  };
+
+  /**
+   * Handle pointer down events on the handle.
+   * @param {PointerEvent} event `pointerdown` event.
+   */
+  const onPointerDown = (event) => {
+    if (disabled) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    dragging = true;
+    startScreenPos = isHorizontal ? event.screenX : event.screenY;
+    targetPointerId = event.pointerId;
+    onResizeStart?.();
+
+    document.addEventListener('pointermove', onPointerMove);
+    document.addEventListener('pointerup', onPointerUp);
+    document.addEventListener('pointercancel', onPointerUp);
+  };
+
+  /**
+   * Handle keyboard events for accessibility. Arrow keys move the handle by 1%; Shift+Arrow moves
+   * by 10%. Enter collapses/restores the primary pane. Home/End jump to min/max.
+   * @param {KeyboardEvent} event `keydown` event.
+   */
+  const onKeyDown = (event) => {
+    if (disabled) return;
+
+    const { key, shiftKey } = event;
+    const step = shiftKey ? 10 : 1;
+    let delta = 0;
+
+    if (key === 'Enter') {
+      event.preventDefault();
+      event.stopPropagation();
+      ctx.toggleCollapse(handleIndex);
+
+      return;
+    }
+
+    if (key === 'Home') {
+      event.preventDefault();
+      event.stopPropagation();
+      // Collapse to minimum — clamped internally
+      ctx.resize(handleIndex, -100);
+
+      return;
+    }
+
+    if (key === 'End') {
+      event.preventDefault();
+      event.stopPropagation();
+      // Expand to maximum — clamped internally
+      ctx.resize(handleIndex, 100);
+
+      return;
+    }
+
+    if (isHorizontal) {
+      // In RTL, Left/Right directions are visually swapped
+      if (key === 'ArrowLeft') {
+        delta = $isRTL ? step : -step;
+      } else if (key === 'ArrowRight') {
+        delta = $isRTL ? -step : step;
+      } else {
+        return;
+      }
+    } else if (key === 'ArrowUp') {
+      delta = -step;
+    } else if (key === 'ArrowDown') {
+      delta = step;
+    } else {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (!keyResizing) {
+      keyResizing = true;
+      onResizeStart?.();
+    }
+
+    ctx.resize(handleIndex, delta);
+  };
+
+  /**
+   * Handle blur to signal keyboard resize end.
+   */
+  const onBlur = () => {
+    if (keyResizing) {
+      keyResizing = false;
+      onResizeEnd?.();
+    }
+  };
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  bind:this={element}
+  {...restProps}
+  role="separator"
+  tabindex={disabled ? -1 : 0}
+  aria-orientation={isHorizontal ? 'vertical' : 'horizontal'}
+  aria-valuenow={Math.round(currentPaneSize)}
+  aria-valuemin={currentPaneMin}
+  aria-valuemax={currentPaneMax}
+  aria-controls={ctx.paneDefs[handleIndex]?.id}
+  aria-disabled={disabled || undefined}
+  class="sui resizable-handle {className ?? ''}"
+  class:horizontal={isHorizontal}
+  class:vertical={!isHorizontal}
+  class:disabled
+  class:dragging
+  onpointerdown={onPointerDown}
+  onkeydown={onKeyDown}
+  onblur={onBlur}
+>
+  {#if children}
+    {@render children()}
+  {:else if showHandleBar}
+    <div role="none" class="handle-bar"></div>
+  {/if}
+</div>
+
+<style>.resizable-handle {
+  position: relative;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  touch-action: none;
+  outline-offset: 0;
+  background-color: transparent;
+  transition: background-color 200ms;
+}
+.resizable-handle:focus-visible, .resizable-handle:hover, .resizable-handle.dragging {
+  outline: none;
+  z-index: 1;
+  background-color: var(--sui-primary-accent-color-translucent);
+}
+.resizable-handle:focus-visible .handle-bar, .resizable-handle:hover .handle-bar, .resizable-handle.dragging .handle-bar {
+  background-color: var(--sui-primary-accent-color);
+}
+.resizable-handle.disabled {
+  pointer-events: none;
+  opacity: 0.4;
+}
+.resizable-handle.horizontal {
+  width: var(--sui-resizable-handle-size, 4px);
+  height: 100%;
+  cursor: col-resize;
+}
+.resizable-handle.horizontal .handle-bar {
+  width: 2px;
+  height: 40%;
+  min-height: 20px;
+}
+.resizable-handle.vertical {
+  width: 100%;
+  height: var(--sui-resizable-handle-size, 4px);
+  cursor: row-resize;
+}
+.resizable-handle.vertical .handle-bar {
+  height: 2px;
+  width: 40%;
+  min-width: 20px;
+}
+.resizable-handle .handle-bar {
+  border-radius: 1px;
+  background-color: hsl(var(--sui-border-color-1-hsl));
+  transition: background-color 200ms;
+}</style>

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

@@ -0,0 +1,69 @@
+export default ResizableHandle;
+type ResizableHandle = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
+/**
+ * A draggable handle for resizing adjacent panes within a `<ResizablePaneGroup>`.
+ * @see https://w3c.github.io/aria/#separator
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+ */
+declare const ResizableHandle: import("svelte").Component<{
+    /**
+     * Whether to disable the handle.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether to show the handle bar.
+     */
+    showHandleBar?: boolean | undefined;
+    /**
+     * The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * Custom handle content. If omitted, a default visual indicator is
+     * rendered.
+     */
+    children?: Snippet<[]> | undefined;
+    /**
+     * Called when a resize interaction begins (pointer down or
+     * first keyboard step).
+     */
+    onResizeStart?: (() => void) | undefined;
+    /**
+     * Called when a resize interaction ends (pointer up/cancel
+     * or handle blur).
+     */
+    onResizeEnd?: (() => void) | undefined;
+} & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * Whether to disable the handle.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether to show the handle bar.
+     */
+    showHandleBar?: boolean | undefined;
+    /**
+     * The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * Custom handle content. If omitted, a default visual indicator is
+     * rendered.
+     */
+    children?: Snippet<[]> | undefined;
+    /**
+     * Called when a resize interaction begins (pointer down or
+     * first keyboard step).
+     */
+    onResizeStart?: (() => void) | undefined;
+    /**
+     * Called when a resize interaction ends (pointer up/cancel
+     * or handle blur).
+     */
+    onResizeEnd?: (() => void) | undefined;
+};
+import type { Snippet } from 'svelte';

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

@@ -0,0 +1,179 @@
+<!--
+  @component
+  Container for resizable panes. Panes must be separated by `<ResizableHandle>` components.
+  @see https://w3c.github.io/aria/#separator
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+-->
+<script>
+  import { setContext } from 'svelte';
+
+  /**
+   * @import { Snippet } from 'svelte';
+   * @import { PaneGroupContext } from '../../typedefs.js';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {'horizontal' | 'vertical'} [direction] Layout direction of the panes.
+   * @property {string} [class] The `class` attribute on the wrapper element.
+   * @property {Snippet} [children] Primary slot content.
+   * @property {(detail: { sizes: number[] }) => void} [onResize] `resize` event handler, called
+   * whenever the pane sizes change.
+   */
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    direction = 'horizontal',
+    class: className,
+    children,
+    onResize,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  /**
+   * `ResizablePane` definitions in registration order, populated synchronously by child
+   * `<ResizablePane>` components.
+   * @type {{ id: string, defaultSize: number | undefined, minSize: number, maxSize: number }[]}
+   */
+  const _paneDefs = $state([]);
+
+  /**
+   * Current pane sizes as percentages.
+   * @type {number[]}
+   */
+  const sizes = $state([]);
+
+  /**
+   * Per-handle saved sizes before collapse, for Enter key restore.
+   * @type {(number | undefined)[]}
+   */
+  const _savedSizes = $state([]);
+
+  let _handleCount = 0;
+
+  /**
+   * Initialize pane sizes from `defaultSize` props. Called from `onMount` once all panes have
+   * registered. Panes without `defaultSize` share the remaining space equally.
+   */
+  const initSizes = () => {
+    if (!_paneDefs.length) return;
+
+    const totalSpecified = _paneDefs.reduce((sum, p) => sum + (p.defaultSize ?? 0), 0);
+    const unspecifiedCount = _paneDefs.filter((p) => p.defaultSize === undefined).length;
+    const remaining = Math.max(0, 100 - totalSpecified);
+    const defaultSize = unspecifiedCount > 0 ? remaining / unspecifiedCount : 0;
+    const newSizes = _paneDefs.map((p) => p.defaultSize ?? defaultSize);
+
+    sizes.splice(0, sizes.length, ...newSizes);
+  };
+
+  /**
+   * Resize panes around a handle by the given delta (percentage points).
+   * @param {number} handleIndex Index of the resize handle.
+   * @param {number} deltaPercent Size delta in percentage points.
+   */
+  const resize = (handleIndex, deltaPercent) => {
+    const beforeIdx = handleIndex;
+    const afterIdx = handleIndex + 1;
+
+    if (beforeIdx < 0 || afterIdx >= sizes.length) return;
+
+    const { minSize: minBefore = 0, maxSize: maxBefore = 100 } = _paneDefs[beforeIdx];
+    const { minSize: minAfter = 0, maxSize: maxAfter = 100 } = _paneDefs[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);
+
+    sizes[beforeIdx] = prevBefore + delta;
+    sizes[afterIdx] = prevAfter - delta;
+
+    onResize?.({ sizes: sizes.map((s) => Number(s.toFixed(1))) });
+  };
+
+  /**
+   * Toggle collapse of the primary pane (before the given handle). If the pane is above its minimum
+   * size it is collapsed to `minSize`; if already at `minSize` the previous size is restored.
+   * @param {number} handleIndex Index of the resize handle.
+   */
+  const toggleCollapse = (handleIndex) => {
+    const { minSize: minBefore = 0 } = _paneDefs[handleIndex];
+
+    if (_savedSizes[handleIndex] !== undefined) {
+      const delta = /** @type {number} */ (_savedSizes[handleIndex]) - sizes[handleIndex];
+
+      _savedSizes[handleIndex] = undefined;
+      resize(handleIndex, delta);
+    } else {
+      _savedSizes[handleIndex] = sizes[handleIndex];
+      resize(handleIndex, -(sizes[handleIndex] - minBefore));
+    }
+  };
+
+  setContext(
+    'paneGroup',
+    /* eslint-disable jsdoc/require-jsdoc */
+    /** @type {PaneGroupContext} */ ({
+      get direction() {
+        return direction;
+      },
+      sizes,
+      registerPane: ({ id, defaultSize, minSize, maxSize }) => {
+        const idx = _paneDefs.length;
+
+        _paneDefs.push({ id, defaultSize, minSize, maxSize });
+
+        return { index: idx };
+      },
+      registerHandle: () => {
+        const idx = _handleCount;
+
+        _handleCount += 1;
+
+        return idx;
+      },
+      resize,
+      toggleCollapse,
+      paneDefs: _paneDefs,
+    }),
+    /* eslint-enable jsdoc/require-jsdoc */
+  );
+
+  $effect(() => {
+    if (_paneDefs.length && !sizes.length) {
+      initSizes();
+    }
+  });
+</script>
+
+<div
+  {...restProps}
+  role="none"
+  class="sui resizable-pane-group {direction} {className ?? ''}"
+  data-direction={direction}
+>
+  {@render children?.()}
+</div>
+
+<style>.resizable-pane-group {
+  display: flex;
+  overflow: hidden;
+}
+.resizable-pane-group.horizontal {
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+}
+.resizable-pane-group.vertical {
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}</style>

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

@@ -0,0 +1,53 @@
+export default ResizablePaneGroup;
+type ResizablePaneGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
+/**
+ * Container for resizable panes. Panes must be separated by `<ResizableHandle>` components.
+ * @see https://w3c.github.io/aria/#separator
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+ */
+declare const ResizablePaneGroup: import("svelte").Component<{
+    /**
+     * Layout direction of the panes.
+     */
+    direction?: "horizontal" | "vertical" | undefined;
+    /**
+     * The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * Primary slot content.
+     */
+    children?: Snippet<[]> | undefined;
+    /**
+     * `resize` event handler, called
+     * whenever the pane sizes change.
+     */
+    onResize?: ((detail: {
+        sizes: number[];
+    }) => void) | undefined;
+} & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * Layout direction of the panes.
+     */
+    direction?: "horizontal" | "vertical" | undefined;
+    /**
+     * The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * Primary slot content.
+     */
+    children?: Snippet<[]> | undefined;
+    /**
+     * `resize` event handler, called
+     * whenever the pane sizes change.
+     */
+    onResize?: ((detail: {
+        sizes: number[];
+    }) => void) | undefined;
+};
+import type { Snippet } from 'svelte';