@sveltia/ui 0.39.2 → 0.40.0

package/dist/components/grid/grid-body.svelte

@@ -41,7 +41,7 @@
   {#if label}
     <div role="row" class="row-group-caption">
       <!-- We need `colspan` here but cannot place `<th>` under `<div>`, so use a hack -->
-      <svelte:element this={'th'} role="columnheader" id="{id}-label" colspan="9999">
+      <svelte:element this={"th"} role="columnheader" id="{id}-label" colspan="9999">
         {label}
       </svelte:element>
     </div>

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

@@ -53,16 +53,25 @@
   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 currentPaneConstraints = $derived(ctx.getPaneConstraints(handleIndex));
   const currentPaneMin = $derived(
     Math.max(
-      ctx.paneDefs[handleIndex]?.minSize ?? 0,
-      100 - ctx.paneDefs.reduce((sum, p, i) => sum + (i !== handleIndex ? p.maxSize : 0), 0),
+      currentPaneConstraints.minSize,
+      100 -
+        ctx.paneDefs.reduce(
+          (sum, _pane, i) => sum + (i !== handleIndex ? ctx.getPaneConstraints(i).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),
+      currentPaneConstraints.maxSize,
+      100 -
+        ctx.paneDefs.reduce(
+          (sum, _pane, i) => sum + (i !== handleIndex ? ctx.getPaneConstraints(i).minSize : 0),
+          0,
+        ),
     ),
   );
 

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

@@ -21,6 +21,15 @@
    * whenever the pane sizes change.
    */
 
+  /**
+   * @typedef {{
+   * id: string,
+   * defaultSize: number | string | undefined,
+   * minSize: number | string,
+   * maxSize: number | string,
+   * }} PaneDef
+   */
+
   /**
    * @type {Props & Record<string, any>}
    */
@@ -37,10 +46,13 @@
   /**
    * `ResizablePane` definitions in registration order, populated synchronously by child
    * `<ResizablePane>` components.
-   * @type {{ id: string, defaultSize: number | undefined, minSize: number, maxSize: number }[]}
+   * @type {PaneDef[]}
    */
   const _paneDefs = $state([]);
 
+  /** @type {HTMLDivElement | undefined} */
+  let element = $state();
+
   /**
    * Current pane sizes as percentages.
    * @type {number[]}
@@ -55,6 +67,85 @@
 
   let _handleCount = 0;
 
+  /**
+   * Get the pane group container element’s size in pixels for size conversion.
+   * @returns {number} Container size in pixels.
+   */
+  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;
+  };
+
+  /**
+   * 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),
+    };
+  };
+
   /**
    * Initialize pane sizes from `defaultSize` props. Called from `onMount` once all panes have
    * registered. Panes without `defaultSize` share the remaining space equally.
@@ -62,11 +153,26 @@
   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;
+    // 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 totalSpecified = resolvedDefaults
+      .filter((v) => !Number.isNaN(v))
+      .reduce((sum, v) => sum + v, 0);
+
+    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 = _paneDefs.map((p) => p.defaultSize ?? defaultSize);
+    const newSizes = resolvedDefaults.map((v) => (Number.isNaN(v) ? defaultSize : v));
 
     sizes.splice(0, sizes.length, ...newSizes);
   };
@@ -82,8 +188,8 @@
 
     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 { 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
@@ -105,7 +211,7 @@
    * @param {number} handleIndex Index of the resize handle.
    */
   const toggleCollapse = (handleIndex) => {
-    const { minSize: minBefore = 0 } = _paneDefs[handleIndex];
+    const { minSize: minBefore } = getPaneConstraints(handleIndex);
 
     if (_savedSizes[handleIndex] !== undefined) {
       const delta = /** @type {number} */ (_savedSizes[handleIndex]) - sizes[handleIndex];
@@ -142,6 +248,7 @@
       },
       resize,
       toggleCollapse,
+      getPaneConstraints,
       paneDefs: _paneDefs,
     }),
     /* eslint-enable jsdoc/require-jsdoc */
@@ -155,6 +262,7 @@
 </script>
 
 <div
+  bind:this={element}
   {...restProps}
   role="none"
   class="sui resizable-pane-group {direction} {className ?? ''}"

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

@@ -13,10 +13,13 @@
 
   /**
    * @typedef {object} Props
-   * @property {number} [defaultSize] Default size as a percentage (0–100). Panes without
+   * @property {number | string} [defaultSize] Default size. Numbers are percentages (0-100);
+   * strings can be any CSS length/percentage such as `240px`, `20%` or `20dvw`. Panes without
    * `defaultSize` share the remaining space equally.
-   * @property {number} [minSize] Minimum size as a percentage. Defaults to `0`.
-   * @property {number} [maxSize] Maximum size as a percentage. Defaults to `100`.
+   * @property {number | string} [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
+   * lengths. Defaults to `100`.
    * @property {string} [class] The `class` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.
    * @property {(detail: { size: number }) => void} [onResize] Called whenever this pane’s size (in
@@ -52,7 +55,17 @@
 
   const direction = $derived(ctx.direction);
   const size = $derived(ctx.sizes[paneIndex]);
-  const sizeStyle = $derived(size !== undefined ? size : (defaultSize ?? 0));
+  const sizeStyle = $derived.by(() => {
+    if (size !== undefined) {
+      return `${size}%`;
+    }
+
+    if (typeof defaultSize === 'number') {
+      return `${defaultSize}%`;
+    }
+
+    return defaultSize ?? '0%';
+  });
 
   $effect(() => {
     if (size !== undefined) {
@@ -66,7 +79,7 @@
   {id}
   role="none"
   class="sui resizable-pane {className ?? ''}"
-  style:flex-basis="{sizeStyle}%"
+  style:flex-basis={sizeStyle}
   style:flex-grow="0"
   style:flex-shrink="0"
   style:overflow-x={direction === 'horizontal' ? 'auto' : undefined}

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

@@ -9,18 +9,21 @@ type ResizablePane = {
  */
 declare const ResizablePane: import("svelte").Component<{
     /**
-     * Default size as a percentage (0–100). Panes without
+     * Default size. Numbers are percentages (0-100);
+     * strings can be any CSS length/percentage such as `240px`, `20%` or `20dvw`. Panes without
      * `defaultSize` share the remaining space equally.
      */
-    defaultSize?: number | undefined;
+    defaultSize?: string | number | undefined;
     /**
-     * Minimum size as a percentage. Defaults to `0`.
+     * Minimum size. Numbers are percentages, strings are CSS
+     * lengths. Defaults to `0`.
      */
-    minSize?: number | undefined;
+    minSize?: string | number | undefined;
     /**
-     * Maximum size as a percentage. Defaults to `100`.
+     * Maximum size. Numbers are percentages, strings are CSS
+     * lengths. Defaults to `100`.
      */
-    maxSize?: number | undefined;
+    maxSize?: string | number | undefined;
     /**
      * The `class` attribute on the wrapper element.
      */
@@ -39,18 +42,21 @@ declare const ResizablePane: import("svelte").Component<{
 } & Record<string, any>, {}, "">;
 type Props = {
     /**
-     * Default size as a percentage (0–100). Panes without
+     * Default size. Numbers are percentages (0-100);
+     * strings can be any CSS length/percentage such as `240px`, `20%` or `20dvw`. Panes without
      * `defaultSize` share the remaining space equally.
      */
-    defaultSize?: number | undefined;
+    defaultSize?: string | number | undefined;
     /**
-     * Minimum size as a percentage. Defaults to `0`.
+     * Minimum size. Numbers are percentages, strings are CSS
+     * lengths. Defaults to `0`.
      */
-    minSize?: number | undefined;
+    minSize?: string | number | undefined;
     /**
-     * Maximum size as a percentage. Defaults to `100`.
+     * Maximum size. Numbers are percentages, strings are CSS
+     * lengths. Defaults to `100`.
      */
-    maxSize?: number | undefined;
+    maxSize?: string | number | undefined;
     /**
      * The `class` attribute on the wrapper element.
      */

package/dist/components/table/table-body.svelte

@@ -41,7 +41,7 @@
   {#if label}
     <div role="row" class="row-group-caption">
       <!-- We need `colspan` here but cannot place `<th>` under `<div>`, so use a hack -->
-      <svelte:element this={'th'} role="columnheader" id="{id}-label" colspan="9999">
+      <svelte:element this={"th"} role="columnheader" id="{id}-label" colspan="9999">
         {label}
       </svelte:element>
     </div>

package/dist/typedefs.d.ts

@@ -731,6 +731,7 @@ export type SelectedItemDetail = {
      */
     value: any;
 };
+export type ResizablePaneSize = number | string;
 export type ResizablePaneDefinition = {
     /**
      * ResizablePane element ID (generated via `$props.id()` in the pane
@@ -738,17 +739,20 @@ export type ResizablePaneDefinition = {
      */
     id: string;
     /**
-     * Default size as a percentage (0–100).
+     * Default size as percentage number or CSS
+     * length/percentage string.
      */
-    defaultSize: number | undefined;
+    defaultSize: ResizablePaneSize | undefined;
     /**
-     * Minimum size as a percentage.
+     * Minimum size as percentage number or CSS length/percentage
+     * string.
      */
-    minSize: number;
+    minSize: ResizablePaneSize;
     /**
-     * Maximum size as a percentage.
+     * Maximum size as percentage number or CSS length/percentage
+     * string.
      */
-    maxSize: number;
+    maxSize: ResizablePaneSize;
 };
 export type PaneGroupContext = {
     /**
@@ -780,6 +784,13 @@ export type PaneGroupContext = {
      * before the given handle.
      */
     toggleCollapse: (handleIndex: number) => void;
+    /**
+     * Resolve pane constraints to percentages for the current container size.
+     */
+    getPaneConstraints: (paneIndex: number) => {
+        minSize: number;
+        maxSize: number;
+    };
     /**
      * Registered pane definitions.
      */

package/dist/typedefs.js

@@ -306,13 +306,20 @@
  * @property {any} value The `data-value` attribute on the element. Casted to the `valueType`.
  */
 
+/**
+ * @typedef {number | string} ResizablePaneSize
+ */
+
 /**
  * @typedef {object} ResizablePaneDefinition
  * @property {string} id ResizablePane element ID (generated via `$props.id()` in the pane
  * component).
- * @property {number | undefined} defaultSize Default size as a percentage (0–100).
- * @property {number} minSize Minimum size as a percentage.
- * @property {number} maxSize Maximum size as a percentage.
+ * @property {ResizablePaneSize | undefined} defaultSize Default size as percentage number or CSS
+ * length/percentage string.
+ * @property {ResizablePaneSize} minSize Minimum size as percentage number or CSS length/percentage
+ * string.
+ * @property {ResizablePaneSize} maxSize Maximum size as percentage number or CSS length/percentage
+ * string.
  */
 
 /**
@@ -326,6 +333,8 @@
  * handle by the given delta.
  * @property {(handleIndex: number) => void} toggleCollapse Toggle collapse of the primary pane
  * before the given handle.
+ * @property {(paneIndex: number) => { minSize: number, maxSize: number }} getPaneConstraints
+ * Resolve pane constraints to percentages for the current container size.
  * @property {ResizablePaneDefinition[]} paneDefs Registered pane definitions.
  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.39.2",
+  "version": "0.40.0",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -56,32 +56,32 @@
     "@sveltejs/kit": "^2.60.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
-    "@vitest/coverage-v8": "^4.1.6",
+    "@vitest/coverage-v8": "^4.1.7",
     "cspell": "^10.0.0",
     "eslint": "^9.39.4",
     "eslint-config-airbnb-extended": "^3.1.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^62.9.0",
-    "eslint-plugin-package-json": "^0.91.2",
+    "eslint-plugin-jsdoc": "^63.0.0",
+    "eslint-plugin-package-json": "^1.1.0",
     "eslint-plugin-svelte": "^3.17.1",
     "globals": "^17.6.0",
     "happy-dom": "^20.9.0",
-    "oxlint": "^1.65.0",
-    "postcss": "^8.5.14",
+    "oxlint": "^1.66.0",
+    "postcss": "^8.5.15",
     "postcss-html": "^1.8.1",
     "prettier": "^3.8.3",
-    "prettier-plugin-svelte": "^3.5.2",
+    "prettier-plugin-svelte": "^4.0.1",
     "sass": "^1.99.0",
-    "stylelint": "^17.11.1",
+    "stylelint": "^17.12.0",
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.1.1",
-    "svelte": "^5.55.7",
+    "svelte": "^5.55.9",
     "svelte-check": "^4.4.8",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^8.0.13",
-    "vitest": "^4.1.6"
+    "vite": "^8.0.14",
+    "vitest": "^4.1.7"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"