@sveltia/ui 0.78.4 → 0.79.0

package/dist/components/menu/menu-button.svelte.d.ts

@@ -9,10 +9,10 @@ type MenuButton = {
  * A button to open a `<Menu>` widget.
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
  */
-declare const MenuButton: import("svelte").Component<ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+declare const MenuButton: import("svelte").Component<ButtonProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & {
     /**
      * The base element of {@link popupPosition}.
-     * If omitted, this will be {@link buttonComponent}.
+     * If omitted, this will be the button itself.
      */
     popupPositionBaseElement?: HTMLElement | undefined;
 } & Record<string, any>, {
@@ -21,8 +21,8 @@ declare const MenuButton: import("svelte").Component<ButtonProps & import("../..
 type Props = {
     /**
      * The base element of {@link popupPosition}.
-     * If omitted, this will be {@link buttonComponent}.
+     * If omitted, this will be the button itself.
      */
     popupPositionBaseElement?: HTMLElement | undefined;
 };
-import type { ButtonProps } from '../../typedefs';
+import type { ButtonProps } from '../../typedefs.js';

package/dist/components/menu/menu-item-checkable.svelte

@@ -0,0 +1,71 @@
+<!--
+  @component
+  The checkable menu item behind `<MenuItemCheckbox>` and `<MenuItemRadio>`, which only differ in
+  their role. Internal; not exported.
+  @see https://w3c.github.io/aria/#menuitemcheckbox
+  @see https://w3c.github.io/aria/#menuitemradio
+-->
+<script>
+  import Icon from '../icon/icon.svelte';
+  import MenuItem from './menu-item.svelte';
+
+  /**
+   * @import { ButtonProps, CommonEventHandlers, MenuItemProps } from '../../typedefs.js';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {'menuitemcheckbox' | 'menuitemradio'} role The `role` attribute on the item.
+   */
+
+  /**
+   * @type {ButtonProps & MenuItemProps & CommonEventHandlers & Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    role,
+    checked = $bindable(),
+    class: className,
+    hidden = false,
+    disabled = false,
+    label = '',
+    children: _children,
+    startIcon: _startIcon,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  /**
+   * The class name for the role, e.g. `menu-item-checkbox`.
+   */
+  const roleClass = $derived(role === 'menuitemradio' ? 'menu-item-radio' : 'menu-item-checkbox');
+</script>
+
+<MenuItem
+  {...restProps}
+  {role}
+  class="sui {roleClass} {className}"
+  {label}
+  {hidden}
+  {disabled}
+  aria-checked={checked}
+  onChange={(event) => {
+    // Update the state first, so the handler sees the new value through a bound `checked`
+    checked = event.detail.checked;
+    onChange?.(event);
+  }}
+>
+  {#snippet startIcon()}
+    {@render _startIcon?.()}
+  {/snippet}
+  <!-- eslint-disable-next-line svelte/no-useless-children-snippet -->
+  {#snippet children()}
+    {@render _children?.()}
+  {/snippet}
+  {#snippet endIcon()}
+    {#if checked}
+      <Icon name="check" />
+    {/if}
+  {/snippet}
+</MenuItem>

package/dist/components/menu/menu-item-checkable.svelte.d.ts

@@ -0,0 +1,25 @@
+export default MenuItemCheckable;
+type MenuItemCheckable = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ButtonProps & MenuItemProps & KeyboardEventHandlers & MouseEventHandlers & PointerEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>>): void;
+};
+/**
+ * The checkable menu item behind `<MenuItemCheckbox>` and `<MenuItemRadio>`, which only differ in
+ * their role. Internal; not exported.
+ * @see https://w3c.github.io/aria/#menuitemcheckbox
+ * @see https://w3c.github.io/aria/#menuitemradio
+ */
+declare const MenuItemCheckable: import("svelte").Component<ButtonProps & MenuItemProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & {
+    /**
+     * The `role` attribute on the item.
+     */
+    role: "menuitemcheckbox" | "menuitemradio";
+} & Record<string, any>, {}, "checked">;
+type Props = {
+    /**
+     * The `role` attribute on the item.
+     */
+    role: "menuitemcheckbox" | "menuitemradio";
+};
+import type { ButtonProps } from '../../typedefs.js';
+import type { MenuItemProps } from '../../typedefs.js';

package/dist/components/menu/menu-item-checkbox.svelte

@@ -4,11 +4,10 @@
   @see https://w3c.github.io/aria/#menuitemcheckbox
 -->
 <script>
-  import Icon from '../icon/icon.svelte';
-  import MenuItem from './menu-item.svelte';
+  import MenuItemCheckable from './menu-item-checkable.svelte';
 
   /**
-   * @import { ButtonProps, CommonEventHandlers, MenuItemProps } from '../../typedefs';
+   * @import { ButtonProps, CommonEventHandlers, MenuItemProps } from '../../typedefs.js';
    */
 
   /**
@@ -17,41 +16,9 @@
   let {
     /* eslint-disable prefer-const */
     checked = $bindable(),
-    class: className,
-    hidden = false,
-    disabled = false,
-    label = '',
-    children: _children,
-    startIcon: _startIcon,
-    onChange,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<MenuItem
-  {...restProps}
-  role="menuitemcheckbox"
-  class="sui menu-item-checkbox {className}"
-  {label}
-  {hidden}
-  {disabled}
-  aria-checked={checked}
-  onChange={(event) => {
-    onChange?.(event);
-    checked = event.detail.checked;
-  }}
->
-  {#snippet startIcon()}
-    {@render _startIcon?.()}
-  {/snippet}
-  <!-- eslint-disable-next-line svelte/no-useless-children-snippet -->
-  {#snippet children()}
-    {@render _children?.()}
-  {/snippet}
-  {#snippet endIcon()}
-    {#if checked}
-      <Icon name="check" />
-    {/if}
-  {/snippet}
-</MenuItem>
+<MenuItemCheckable {...restProps} bind:checked role="menuitemcheckbox" />

package/dist/components/menu/menu-item-checkbox.svelte.d.ts

@@ -7,6 +7,6 @@ type MenuItemCheckbox = {
  * A menu item widget with a checkbox.
  * @see https://w3c.github.io/aria/#menuitemcheckbox
  */
-declare const MenuItemCheckbox: import("svelte").Component<ButtonProps & MenuItemProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & Record<string, any>, {}, "checked">;
-import type { ButtonProps } from '../../typedefs';
-import type { MenuItemProps } from '../../typedefs';
+declare const MenuItemCheckbox: import("svelte").Component<ButtonProps & MenuItemProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & Record<string, any>, {}, "checked">;
+import type { ButtonProps } from '../../typedefs.js';
+import type { MenuItemProps } from '../../typedefs.js';

package/dist/components/menu/menu-item-group.svelte

@@ -6,7 +6,7 @@
   import { _ } from '@sveltia/i18n';
 
   /**
-   * @import { CommonEventHandlers } from '../../typedefs';
+   * @import { CommonEventHandlers } from '../../typedefs.js';
    */
 
   /**
@@ -16,7 +16,8 @@
    * attribute.
    * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
    * attribute.
-   * @property {string} [title] Text label displayed above the group items.
+   * @property {string} [label] Text label displayed above the group items.
+   * @property {string} [title] Deprecated: use `label` instead.
    */
 
   /**
@@ -27,6 +28,7 @@
     class: className,
     hidden = false,
     disabled = false,
+    label = '',
     title = '',
     children,
     ...restProps
@@ -34,6 +36,7 @@
   } = $props();
 
   const id = $props.id();
+  const groupLabel = $derived(label || title);
 </script>
 
 <div
@@ -44,11 +47,11 @@
   {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
-  aria-labelledby={title ? `${id}-title` : undefined}
+  aria-labelledby={groupLabel ? `${id}-title` : undefined}
   aria-roledescription={_('_sui.role_descriptions.menu_item_group')}
 >
-  {#if title}
-    <div role="none" class="title" id="{id}-title">{title}</div>
+  {#if groupLabel}
+    <div role="none" class="title" id="{id}-title">{groupLabel}</div>
   {/if}
   <div role="none" class="inner" inert={disabled}>
     {@render children?.()}

package/dist/components/menu/menu-item-group.svelte.d.ts

@@ -4,7 +4,7 @@ type MenuItemGroup = {
     $set?(props: Partial<KeyboardEventHandlers & MouseEventHandlers & PointerEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>>): void;
 };
 /** A menu item group. */
-declare const MenuItemGroup: import("svelte").Component<import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+declare const MenuItemGroup: import("svelte").Component<import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & {
     /**
      * The `class` attribute on the wrapper element.
      */
@@ -22,6 +22,10 @@ declare const MenuItemGroup: import("svelte").Component<import("../../typedefs")
     /**
      * Text label displayed above the group items.
      */
+    label?: string | undefined;
+    /**
+     * Deprecated: use `label` instead.
+     */
     title?: string | undefined;
 } & Record<string, any>, {}, "">;
 type Props = {
@@ -42,5 +46,9 @@ type Props = {
     /**
      * Text label displayed above the group items.
      */
+    label?: string | undefined;
+    /**
+     * Deprecated: use `label` instead.
+     */
     title?: string | undefined;
 };

package/dist/components/menu/menu-item-radio.svelte

@@ -5,11 +5,10 @@
   @see https://w3c.github.io/aria/#menuitemradio
 -->
 <script>
-  import Icon from '../icon/icon.svelte';
-  import MenuItem from './menu-item.svelte';
+  import MenuItemCheckable from './menu-item-checkable.svelte';
 
   /**
-   * @import { ButtonProps, CommonEventHandlers, MenuItemProps } from '../../typedefs';
+   * @import { ButtonProps, CommonEventHandlers, MenuItemProps } from '../../typedefs.js';
    */
 
   /**
@@ -18,41 +17,9 @@
   let {
     /* eslint-disable prefer-const */
     checked = $bindable(),
-    class: className,
-    hidden = false,
-    disabled = false,
-    label = '',
-    children: _children,
-    startIcon: _startIcon,
-    onChange,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<MenuItem
-  {...restProps}
-  role="menuitemradio"
-  class="sui menu-item-radio {className}"
-  {label}
-  {hidden}
-  {disabled}
-  aria-checked={checked}
-  onChange={(event) => {
-    onChange?.(event);
-    checked = event.detail.checked;
-  }}
->
-  {#snippet startIcon()}
-    {@render _startIcon?.()}
-  {/snippet}
-  <!-- eslint-disable-next-line svelte/no-useless-children-snippet -->
-  {#snippet children()}
-    {@render _children?.()}
-  {/snippet}
-  {#snippet endIcon()}
-    {#if checked}
-      <Icon name="check" />
-    {/if}
-  {/snippet}
-</MenuItem>
+<MenuItemCheckable {...restProps} bind:checked role="menuitemradio" />

package/dist/components/menu/menu-item-radio.svelte.d.ts

@@ -8,6 +8,6 @@ type MenuItemRadio = {
  * `<MenuItemGroup>` component.
  * @see https://w3c.github.io/aria/#menuitemradio
  */
-declare const MenuItemRadio: import("svelte").Component<ButtonProps & MenuItemProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & Record<string, any>, {}, "checked">;
-import type { ButtonProps } from '../../typedefs';
-import type { MenuItemProps } from '../../typedefs';
+declare const MenuItemRadio: import("svelte").Component<ButtonProps & MenuItemProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & Record<string, any>, {}, "checked">;
+import type { ButtonProps } from '../../typedefs.js';
+import type { MenuItemProps } from '../../typedefs.js';

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

@@ -17,7 +17,7 @@
    * CommonEventHandlers,
    * MenuItemProps,
    * PopupPosition,
-   * } from '../../typedefs';
+   * } from '../../typedefs.js';
    */
 
   /**
@@ -54,6 +54,8 @@
 
   let isPopupOpen = $state(false);
   let isPopupHovered = $state(false);
+  /** @type {number | undefined} */
+  let hoverTimer;
 
   /**
    * Reference to the `<button>` element.
@@ -62,15 +64,29 @@
   let buttonElement = $state();
 
   /**
-   * Reference to the `<button>` element.
+   * Reference to the `<dialog>` element the menu is in, if any.
    * @type {HTMLDialogElement | undefined}
    */
   let dialogElement = $state();
 
   const hasItems = $derived(role === 'menuitem' && !!items);
 
+  /**
+   * Open or close the submenu after a short delay, cancelling any pending change, so that quickly
+   * moving the pointer in and out doesn’t leave a stale timer to act on the state later.
+   * @param {() => void} callback Function to run after the delay.
+   */
+  const scheduleHoverChange = (callback) => {
+    window.clearTimeout(hoverTimer);
+    hoverTimer = window.setTimeout(callback, 200);
+  };
+
   onMount(() => {
     dialogElement = buttonElement?.closest('dialog') ?? undefined;
+
+    return () => {
+      window.clearTimeout(hoverTimer);
+    };
   });
 </script>
 
@@ -85,20 +101,20 @@
     aria-expanded={hasItems ? isPopupOpen : undefined}
     onmouseenter={(event) => {
       if (hasItems) {
-        window.setTimeout(() => {
+        scheduleHoverChange(() => {
           isPopupOpen = true;
-        }, 200);
+        });
       }
 
       onmouseenter?.(event);
     }}
     onmouseleave={(event) => {
       if (hasItems) {
-        window.setTimeout(() => {
+        scheduleHoverChange(() => {
           if (!isPopupHovered) {
             isPopupOpen = false;
           }
-        }, 200);
+        });
       }
 
       onmouseleave?.(event);

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

@@ -7,7 +7,7 @@ type MenuItem = {
  * A menu item widget.
  * @see https://w3c.github.io/aria/#menuitem
  */
-declare const MenuItem: import("svelte").Component<ButtonProps & MenuItemProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+declare const MenuItem: import("svelte").Component<ButtonProps & MenuItemProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & {
     /**
      * Where to show the dropdown menu.
      */
@@ -19,6 +19,6 @@ type Props = {
      */
     popupPosition?: PopupPosition | undefined;
 };
-import type { ButtonProps } from '../../typedefs';
-import type { MenuItemProps } from '../../typedefs';
-import type { PopupPosition } from '../../typedefs';
+import type { ButtonProps } from '../../typedefs.js';
+import type { MenuItemProps } from '../../typedefs.js';
+import type { PopupPosition } from '../../typedefs.js';

package/dist/components/radio/radio.svelte

@@ -138,7 +138,18 @@
         group = value;
       }
     }}
-    {onChange}
+    onChange={(/** @type {CustomEvent} */ event) => {
+      // The group checks and unchecks the radio buttons by itself, as the arrow keys move, so keep
+      // the state in step; otherwise a radio button unchecked that way would still think it’s
+      // checked and ignore the next click
+      checked = event.detail.checked;
+
+      if (checked && typeof group === 'string') {
+        group = value;
+      }
+
+      onChange?.(event);
+    }}
     {onSelect}
   />
   {#if children || label}

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

@@ -57,25 +57,15 @@
   // The value reported via aria-valuenow is the size of the pane immediately before this handle
   const currentPaneSize = $derived(sizes[handleIndex] ?? 0);
   const currentPaneConstraints = $derived(ctx.getPaneConstraints(handleIndex));
+  const nextPaneConstraints = $derived(ctx.getPaneConstraints(handleIndex + 1));
+  // The handle only moves space between the panes either side of it, so its range is bound by
+  // what those two panes can take
+  const pairSize = $derived(currentPaneSize + (sizes[handleIndex + 1] ?? 0));
   const currentPaneMin = $derived(
-    Math.max(
-      currentPaneConstraints.minSize,
-      100 -
-        ctx.paneDefs.reduce(
-          (sum, _pane, i) => sum + (i !== handleIndex ? ctx.getPaneConstraints(i).maxSize : 0),
-          0,
-        ),
-    ),
+    Math.max(currentPaneConstraints.minSize, pairSize - nextPaneConstraints.maxSize),
   );
   const currentPaneMax = $derived(
-    Math.min(
-      currentPaneConstraints.maxSize,
-      100 -
-        ctx.paneDefs.reduce(
-          (sum, _pane, i) => sum + (i !== handleIndex ? ctx.getPaneConstraints(i).minSize : 0),
-          0,
-        ),
-    ),
+    Math.min(currentPaneConstraints.maxSize, pairSize - nextPaneConstraints.minSize),
   );
 
   /**
@@ -85,6 +75,12 @@
   let element = $state();
   let dragging = $state(false);
   let startScreenPos = $state(0);
+  /**
+   * Size of the pane before the handle when the drag began. Each move sets the pane to this plus
+   * the distance from where the drag began, rather than adding the latest step to the current
+   * size, so the handle stays under the pointer after it has been held back at a limit.
+   */
+  let startPaneSize = 0;
   let targetPointerId = $state(0);
   /**
    * Whether the handle is being resized via keyboard (at least one step fired).
@@ -126,8 +122,7 @@
       percentDelta = -percentDelta;
     }
 
-    startScreenPos = screenPos;
-    ctx.resize(handleIndex, percentDelta);
+    ctx.resize(handleIndex, startPaneSize + percentDelta - (sizes[handleIndex] ?? 0));
   };
 
   /**
@@ -165,6 +160,7 @@
 
     dragging = true;
     startScreenPos = isHorizontal ? screenX : screenY;
+    startPaneSize = sizes[handleIndex] ?? 0;
     targetPointerId = pointerId;
     containerSize = ctx.measurePaneSpace();
     element?.setPointerCapture(pointerId);

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

@@ -15,7 +15,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { PaneGroupContext } from '../../typedefs.js';
+   * @import { PaneGroupContext, ResizablePaneSize } from '../../typedefs.js';
    */
 
   /**
@@ -30,9 +30,9 @@
   /**
    * @typedef {{
    * id: string,
-   * defaultSize: number | string | undefined,
-   * minSize: number | string,
-   * maxSize: number | string,
+   * defaultSize: ResizablePaneSize | undefined,
+   * minSize: ResizablePaneSize,
+   * maxSize: ResizablePaneSize,
    * }} PaneDef
    */
 
@@ -121,7 +121,8 @@
 
   /**
    * Initialize pane sizes from `defaultSize` props. Called once all panes have registered. Panes
-   * without `defaultSize` share the remaining space equally.
+   * without `defaultSize` share the remaining space equally, and every size is kept within its
+   * pane’s `minSize` and `maxSize`.
    */
   const initSizes = () => {
     // Only called once panes have registered; see the effect below
@@ -135,7 +136,9 @@
       p.defaultSize === undefined ? NaN : resolveToPercent(p.defaultSize, NaN, env),
     );
 
-    sizes.splice(0, sizes.length, ...getInitialSizes(resolvedDefaults));
+    const constraints = _paneDefs.map((p) => resolvePaneConstraints(p, env));
+
+    sizes.splice(0, sizes.length, ...getInitialSizes(resolvedDefaults, constraints));
   };
 
   /**

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

@@ -8,18 +8,18 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { PaneGroupContext } from '../../typedefs.js';
+   * @import { PaneGroupContext, ResizablePaneSize } from '../../typedefs.js';
    */
 
   /**
    * @typedef {object} Props
-   * @property {number | string} [defaultSize] Default size. Numbers are percentages (0-100) of
+   * @property {ResizablePaneSize} [defaultSize] Default size. Numbers are percentages (0-100) of
    * the space the panes share, which is the group less its handles; strings can be any CSS
    * length/percentage such as `240px`, `20%` or `20dvw`. Panes without `defaultSize` share the
    * remaining space equally.
-   * @property {number | string} [minSize] Minimum size. Numbers are percentages, strings are CSS
+   * @property {ResizablePaneSize} [minSize] Minimum size. Numbers are percentages, strings are CSS
    * lengths. Defaults to `0`.
-   * @property {number | string} [maxSize] Maximum size. Numbers are percentages, strings are CSS
+   * @property {ResizablePaneSize} [maxSize] Maximum size. Numbers are percentages, strings are CSS
    * lengths. Defaults to `100`.
    * @property {string} [class] The `class` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.

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

@@ -14,17 +14,17 @@ declare const ResizablePane: import("svelte").Component<{
      * length/percentage such as `240px`, `20%` or `20dvw`. Panes without `defaultSize` share the
      * remaining space equally.
      */
-    defaultSize?: string | number | undefined;
+    defaultSize?: ResizablePaneSize | undefined;
     /**
      * Minimum size. Numbers are percentages, strings are CSS
      * lengths. Defaults to `0`.
      */
-    minSize?: string | number | undefined;
+    minSize?: ResizablePaneSize | undefined;
     /**
      * Maximum size. Numbers are percentages, strings are CSS
      * lengths. Defaults to `100`.
      */
-    maxSize?: string | number | undefined;
+    maxSize?: ResizablePaneSize | undefined;
     /**
      * The `class` attribute on the wrapper element.
      */
@@ -48,17 +48,17 @@ type Props = {
      * length/percentage such as `240px`, `20%` or `20dvw`. Panes without `defaultSize` share the
      * remaining space equally.
      */
-    defaultSize?: string | number | undefined;
+    defaultSize?: ResizablePaneSize | undefined;
     /**
      * Minimum size. Numbers are percentages, strings are CSS
      * lengths. Defaults to `0`.
      */
-    minSize?: string | number | undefined;
+    minSize?: ResizablePaneSize | undefined;
     /**
      * Maximum size. Numbers are percentages, strings are CSS
      * lengths. Defaults to `100`.
      */
-    maxSize?: string | number | undefined;
+    maxSize?: ResizablePaneSize | undefined;
     /**
      * The `class` attribute on the wrapper element.
      */
@@ -75,4 +75,5 @@ type Props = {
         size: number;
     }) => void) | undefined;
 };
+import type { ResizablePaneSize } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

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

@@ -1,9 +1,9 @@
-export function resolveToPercent(value: number | string | undefined, fallback: number, env: SizeEnvironment): number;
+export function resolveToPercent(value: ResizablePaneSize | undefined, fallback: number, env: SizeEnvironment): number;
 export function resolvePaneConstraints(paneDef: {
-    minSize: number | string;
-    maxSize: number | string;
+    minSize: ResizablePaneSize;
+    maxSize: ResizablePaneSize;
 } | undefined, env: SizeEnvironment): PaneConstraints;
-export function getInitialSizes(resolvedDefaults: number[]): number[];
+export function getInitialSizes(resolvedDefaults: number[], constraints?: PaneConstraints[]): number[];
 export function clampResizeDelta(deltaPercent: number, { sizeBefore, sizeAfter, constraintsBefore, constraintsAfter }: {
     sizeBefore: number;
     sizeAfter: number;
@@ -46,3 +46,4 @@ export type PaneConstraints = {
      */
     maxSize: number;
 };
+import type { ResizablePaneSize } from '../../typedefs.js';