@breadstone/mosaik-elements-foundation 0.0.206 → 0.0.209

package/Controls/Components/Layouts/Page/Themes/PageElement.Memphis.js

@@ -58,6 +58,11 @@ export function pageElementMemphisStyle() {
 }
 
 :host {
+  --page-margin-left: 0px;
+  --page-margin-right: 0px;
+  --page-padding-left: 0px;
+  --page-padding-right: 0px;
+  --page-max-width: 100%;
   box-sizing: border-box;
   flex-flow: column;
   flex: 1;
@@ -73,6 +78,8 @@ export function pageElementMemphisStyle() {
 
 :host([breakpoint]) {
   box-sizing: border-box;
+  --page-margin-left: calc((100vw - var(--page-max-width)) / 2);
+  --page-margin-right: calc((100vw - var(--page-max-width)) / 2);
   width: 100%;
   min-width: 0;
   margin: 0 auto;
@@ -80,22 +87,27 @@ export function pageElementMemphisStyle() {
 }
 
 :host([breakpoint="xs"]) {
+  --page-max-width: 420px;
   max-width: 420px;
 }
 
 :host([breakpoint="sm"]) {
+  --page-max-width: 600px;
   max-width: 600px;
 }
 
 :host([breakpoint="md"]) {
+  --page-max-width: 960px;
   max-width: 960px;
 }
 
 :host([breakpoint="lg"]) {
+  --page-max-width: 1280px;
   max-width: 1280px;
 }
 
 :host([breakpoint="xl"]) {
+  --page-max-width: 1920px;
   max-width: 1920px;
 }
 

package/Controls/Components/Layouts/Page/Themes/PageElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Page/Themes/PageElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,uBAAuB;IACnC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwFT,CAAC;AACN,CAAC"}
+{"version":3,"file":"PageElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Page/Themes/PageElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,uBAAuB;IACnC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoGT,CAAC;AACN,CAAC"}

package/Controls/Components/Layouts/Split/ISplitElementProps.d.ts

@@ -12,13 +12,10 @@ import type { ISlottableProps } from '../../../Behaviors/Slottable';
  */
 export interface ISplitElementProps extends IDisableableProps, IOrientableProps, IFitableProps, IReversibleProps, ISlottableProps {
     /**
-     * The position of the divider in percentage.
+     * The position of the divider.
+     * Accepts any valid CSS length value except 'auto' (e.g., '50%', '200px', '10rem').
      */
-    position: number;
-    /**
-     * The position of the divider in pixels.
-     */
-    positionInPixels: number;
+    position: Exclude<CssLength, 'auto'>;
     /**
      * The lock of the divider.
      */
@@ -35,5 +32,15 @@ export interface ISplitElementProps extends IDisableableProps, IOrientableProps,
      * The thickness describes the width or height of the divider. It is based on the orientation.
      */
     thickness: number;
+    /**
+     * The minimum position constraint for the primary panel.
+     * Accepts any valid CSS length value except 'auto' (e.g., '10%', '100px').
+     */
+    min: Exclude<CssLength, 'auto'>;
+    /**
+     * The maximum position constraint for the primary panel.
+     * Accepts any valid CSS length value except 'auto' (e.g., '90%', '500px').
+     */
+    max: Exclude<CssLength, 'auto'>;
 }
 //# sourceMappingURL=ISplitElementProps.d.ts.map

package/Controls/Components/Layouts/Split/ISplitElementProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ISplitElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Split/ISplitElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAIpE;;;;GAIG;AACH,MAAM,WAAW,kBACb,SAAQ,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe;IAE7F;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAEzC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;CAErB"}
+{"version":3,"file":"ISplitElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Split/ISplitElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAIpE;;;;GAIG;AACH,MAAM,WAAW,kBACb,SAAQ,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe;IAE7F;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAErC;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAEzC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,GAAG,EAAE,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAEhC;;;OAGG;IACH,GAAG,EAAE,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;CAEnC"}

package/Controls/Components/Layouts/Split/SplitElement.d.ts

@@ -27,8 +27,6 @@ declare const SplitElement_base: (abstract new (...args: Array<any>) => import("
  * @csspart divider - The interactive draggable divider element
  * @csspart thumb - The visual grip icon within the divider
  *
- * @cssprop --split-min - Minimum size constraint for the primary panel (default: 0%)
- * @cssprop --split-max - Maximum size constraint for the primary panel (default: 100%)
  * @cssprop --split-divider-width - Width/height of the divider based on orientation
  *
  * @dependency IconElement - For the default thumb grip icon
@@ -61,14 +59,14 @@ declare const SplitElement_base: (abstract new (...args: Array<any>) => import("
 export declare class SplitElement extends SplitElement_base implements ISplitElementProps, ISplitElementEvents, ISlottable {
     private readonly _resizeController;
     private readonly _splitRepositioned;
-    private _cachedPositionInPixels;
     private _size;
     private _position;
-    private _positionInPixels;
     private _lock;
     private _snaps;
     private _snapThreshold;
     private _thickness;
+    private _min;
+    private _max;
     /**
      * Constructs a new instance of the `SplitElement` class.
      *
@@ -86,20 +84,30 @@ export declare class SplitElement extends SplitElement_base implements ISplitEle
     static get is(): string;
     /**
      * Gets or sets the `position` property.
+     * The position of the divider. Accepts any valid CSS length value except 'auto'.
      *
+     * @example '50%', '200px', '10rem'
      * @public
      * @attr
      */
-    get position(): number;
-    set position(value: number);
+    get position(): Exclude<CssLength, 'auto'>;
+    set position(value: Exclude<CssLength, 'auto'>);
     /**
-     * Gets or sets the `positionInPixels` property.
+     * Gets the position as a percentage value (0-100).
+     * This is a computed property used internally for calculations.
      *
      * @public
-     * @attr
+     * @readonly
+     */
+    get positionPercentage(): number;
+    /**
+     * Gets the position in pixels.
+     * This is a computed property used internally for calculations.
+     *
+     * @public
+     * @readonly
      */
     get positionInPixels(): number;
-    set positionInPixels(value: number);
     /**
      * Gets or sets the `lock` property.
      *
@@ -134,6 +142,26 @@ export declare class SplitElement extends SplitElement_base implements ISplitEle
      */
     get thickness(): number;
     set thickness(value: number);
+    /**
+     * Gets or sets the `min` property.
+     * The minimum position constraint for the primary panel.
+     * Accepts any valid CSS length value except 'auto' (e.g., '10%', '100px').
+     *
+     * @public
+     * @attr
+     */
+    get min(): Exclude<CssLength, 'auto'>;
+    set min(value: Exclude<CssLength, 'auto'>);
+    /**
+     * Gets or sets the `max` property.
+     * The maximum position constraint for the primary panel.
+     * Accepts any valid CSS length value except 'auto' (e.g., '90%', '500px').
+     *
+     * @public
+     * @attr
+     */
+    get max(): Exclude<CssLength, 'auto'>;
+    set max(value: Exclude<CssLength, 'auto'>);
     /**
      * Gets or sets the `hasPanels` property.
      *
@@ -181,23 +209,27 @@ export declare class SplitElement extends SplitElement_base implements ISplitEle
     /**
      * @protected
      */
-    protected onPositionPropertyChanged(_prev?: number, next?: number): void;
+    protected onPositionPropertyChanged(_prev?: Exclude<CssLength, 'auto'>, _next?: Exclude<CssLength, 'auto'>): void;
     /**
      * @protected
      */
-    protected onPositionInPixelsPropertyChanged(_prev?: number, next?: number): void;
+    protected onOrientationPropertyChanged(_prev?: boolean, _next?: boolean): void;
     /**
-     * @protected
+     * Converts a CSS length value to pixels.
+     *
+     * @private
      */
-    protected onOrientationPropertyChanged(_prev?: boolean, _next?: boolean): void;
+    private cssLengthToPixels;
     /**
+     * Converts a CSS length value to percentage.
+     *
      * @private
      */
-    private detectSize;
+    private cssLengthToPercentage;
     /**
      * @private
      */
-    private percentageToPixels;
+    private detectSize;
     /**
      * @private
      */

package/Controls/Components/Layouts/Split/SplitElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SplitElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Split/SplitElement.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"SplitElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Split/SplitElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Layouts/Split/SplitElement.js

@@ -33,6 +33,26 @@ import { splitElementCosmopolitanStyle } from './Themes/SplitElement.Cosmopolita
 import { Themeable } from '../../../Behaviors/Themeable';
 import { Slottable } from '../../../Behaviors/Slottable';
 // #endregion
+/**
+ * Normalizes a CSS length attribute value.
+ * If the value is a pure number (e.g., "50"), it appends "px".
+ * Otherwise, it returns the value as-is (e.g., "50%", "10rem").
+ *
+ * @param value - The attribute value to normalize
+ * @param defaultValue - The default value to return if value is null/empty
+ * @returns A valid CssLength value
+ */
+function normalizeCssLengthAttribute(value, defaultValue) {
+    if (!value) {
+        return defaultValue;
+    }
+    // Check if the value is a pure number (no unit)
+    const trimmed = value.trim();
+    if ((/^-?\d+(\.\d+)?$/).test(trimmed)) {
+        return `${trimmed}px`;
+    }
+    return trimmed;
+}
 /**
  * Split - A layout component that creates a resizable split pane layout with a draggable divider.
  *
@@ -53,8 +73,6 @@ import { Slottable } from '../../../Behaviors/Slottable';
  * @csspart divider - The interactive draggable divider element
  * @csspart thumb - The visual grip icon within the divider
  *
- * @cssprop --split-min - Minimum size constraint for the primary panel (default: 0%)
- * @cssprop --split-max - Maximum size constraint for the primary panel (default: 100%)
  * @cssprop --split-divider-width - Width/height of the divider based on orientation
  *
  * @dependency IconElement - For the default thumb grip icon
@@ -88,14 +106,14 @@ let SplitElement = class SplitElement extends Themeable(Reversible(Orientable(Di
     // #region Fields
     _resizeController;
     _splitRepositioned;
-    _cachedPositionInPixels;
     _size;
     _position;
-    _positionInPixels;
     _lock;
     _snaps;
     _snapThreshold;
     _thickness;
+    _min;
+    _max;
     // #endregion
     // #region Ctor
     /**
@@ -105,14 +123,13 @@ let SplitElement = class SplitElement extends Themeable(Reversible(Orientable(Di
      */
     constructor() {
         super();
-        this._position = 0;
-        this._positionInPixels = 0;
+        this._position = '50%';
         this._lock = SplitLock.None;
         this._snaps = [];
         this._snapThreshold = 12;
         this._thickness = 2;
-        this._cachedPositionInPixels = 0;
-        // this._resizeObserver = null;
+        this._min = '0%';
+        this._max = '100%';
         this._size = 0;
         this._resizeController = new ResizeController(this, {
             callback: (entries) => this.handleResize(entries)
@@ -134,7 +151,9 @@ let SplitElement = class SplitElement extends Themeable(Reversible(Orientable(Di
     }
     /**
      * Gets or sets the `position` property.
+     * The position of the divider. Accepts any valid CSS length value except 'auto'.
      *
+     * @example '50%', '200px', '10rem'
      * @public
      * @attr
      */
@@ -148,19 +167,24 @@ let SplitElement = class SplitElement extends Themeable(Reversible(Orientable(Di
         }
     }
     /**
-     * Gets or sets the `positionInPixels` property.
+     * Gets the position as a percentage value (0-100).
+     * This is a computed property used internally for calculations.
      *
      * @public
-     * @attr
+     * @readonly
      */
-    get positionInPixels() {
-        return this._positionInPixels;
+    get positionPercentage() {
+        return this.cssLengthToPercentage(this._position);
     }
-    set positionInPixels(value) {
-        if (this._positionInPixels !== value) {
-            this._positionInPixels = value;
-            this.requestUpdate('positionInPixels');
-        }
+    /**
+     * Gets the position in pixels.
+     * This is a computed property used internally for calculations.
+     *
+     * @public
+     * @readonly
+     */
+    get positionInPixels() {
+        return this.cssLengthToPixels(this._position);
     }
     /**
      * Gets or sets the `lock` property.
@@ -224,6 +248,40 @@ let SplitElement = class SplitElement extends Themeable(Reversible(Orientable(Di
             this.requestUpdate('thickness');
         }
     }
+    /**
+     * Gets or sets the `min` property.
+     * The minimum position constraint for the primary panel.
+     * Accepts any valid CSS length value except 'auto' (e.g., '10%', '100px').
+     *
+     * @public
+     * @attr
+     */
+    get min() {
+        return this._min;
+    }
+    set min(value) {
+        if (this._min !== value) {
+            this._min = value;
+            this.requestUpdate('min');
+        }
+    }
+    /**
+     * Gets or sets the `max` property.
+     * The maximum position constraint for the primary panel.
+     * Accepts any valid CSS length value except 'auto' (e.g., '90%', '500px').
+     *
+     * @public
+     * @attr
+     */
+    get max() {
+        return this._max;
+    }
+    set max(value) {
+        if (this._max !== value) {
+            this._max = value;
+            this.requestUpdate('max');
+        }
+    }
     /**
      * Gets or sets the `hasPanels` property.
      *
@@ -253,14 +311,9 @@ let SplitElement = class SplitElement extends Themeable(Reversible(Orientable(Di
         super.connectedCallback();
         void this.updateComplete.then(() => {
             this._resizeController.observe(this);
+            // Detect size after render when the element has actual dimensions
+            this.detectSize();
         });
-        this.detectSize();
-        if (this.positionInPixels && this.position === 0) {
-            this._position = this.pixelsToPercentage(this.positionInPixels);
-        }
-        this._cachedPositionInPixels = this.positionInPixels
-            ? this.positionInPixels
-            : this.percentageToPixels(this.position);
     }
     /**
      * @public
@@ -299,24 +352,21 @@ let SplitElement = class SplitElement extends Themeable(Reversible(Orientable(Di
                 }
                 // Check snap points
                 this.snaps.forEach((value) => {
-                    let snapPoint = null;
-                    if (typeof value === 'number') {
-                        snapPoint = value;
-                    }
-                    else if (value.endsWith('%')) {
-                        snapPoint = this._size * (parseFloat(value) / 100);
-                    }
-                    else {
-                        snapPoint = CssLength.extractValue(value);
-                    }
-                    if (this.dir === FlowDirection.RightToLeft && this.orientation === Orientation.Horizontal) {
-                        snapPoint = this._size - snapPoint;
-                    }
-                    if (newPositionInPixels >= snapPoint - this.snapThreshold && newPositionInPixels <= snapPoint + this.snapThreshold) {
-                        newPositionInPixels = snapPoint;
+                    const snapPoint = this.cssLengthToPixels(value);
+                    const adjustedSnapPoint = this.dir === FlowDirection.RightToLeft && this.orientation === Orientation.Horizontal
+                        ? this._size - snapPoint
+                        : snapPoint;
+                    if (newPositionInPixels >= adjustedSnapPoint - this.snapThreshold && newPositionInPixels <= adjustedSnapPoint + this.snapThreshold) {
+                        newPositionInPixels = adjustedSnapPoint;
                     }
                 });
-                this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);
+                // Clamp to min/max constraints
+                const minPixels = this.cssLengthToPixels(this.min);
+                const maxPixels = this.cssLengthToPixels(this.max);
+                newPositionInPixels = clamp(newPositionInPixels, minPixels, maxPixels);
+                // Convert back to percentage for consistent storage
+                const percentage = this.pixelsToPercentage(newPositionInPixels);
+                this.position = `${percentage}%`;
             },
             initialEvent: event
         });
@@ -328,24 +378,27 @@ let SplitElement = class SplitElement extends Themeable(Reversible(Orientable(Di
         if (this.disabled) {
             return;
         }
-        // TODO: replace with KeyboardController
         if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
-            let newPosition = this.position;
+            const currentPercentage = this.positionPercentage;
+            const minPercentage = this.cssLengthToPercentage(this.min);
+            const maxPercentage = this.cssLengthToPercentage(this.max);
             const incr = (event.shiftKey ? 10 : 1) * (this.lock === 'end' ? -1 : 1);
+            let newPercentage = currentPercentage;
             event.preventDefault();
             if ((event.key === 'ArrowLeft' && this.orientation === Orientation.Horizontal) || (event.key === 'ArrowUp' && this.orientation === Orientation.Vertical)) {
-                newPosition -= incr;
+                newPercentage -= incr;
             }
             if ((event.key === 'ArrowRight' && this.orientation === Orientation.Horizontal) || (event.key === 'ArrowDown' && this.orientation === Orientation.Vertical)) {
-                newPosition += incr;
+                newPercentage += incr;
             }
             if (event.key === 'Home') {
-                newPosition = this.lock === 'end' ? 100 : 0;
+                newPercentage = this.lock === 'end' ? maxPercentage : minPercentage;
             }
             if (event.key === 'End') {
-                newPosition = this.lock === 'end' ? 0 : 100;
+                newPercentage = this.lock === 'end' ? minPercentage : maxPercentage;
             }
-            this.position = clamp(newPosition, 0, 100);
+            newPercentage = clamp(newPercentage, minPercentage, maxPercentage);
+            this.position = `${newPercentage}%`;
         }
     }
     /**
@@ -359,23 +412,49 @@ let SplitElement = class SplitElement extends Themeable(Reversible(Orientable(Di
     /**
      * @protected
      */
-    onPositionPropertyChanged(_prev, next) {
-        this._cachedPositionInPixels = next ? this.percentageToPixels(next) : 0;
-        this._positionInPixels = next ? this.percentageToPixels(next) : 0;
+    onPositionPropertyChanged(_prev, _next) {
         this.onSplitRepositioned({});
     }
     /**
      * @protected
      */
-    onPositionInPixelsPropertyChanged(_prev, next) {
-        this._position = next ? this.pixelsToPercentage(next) : 0;
-        this.onSplitRepositioned({});
+    onOrientationPropertyChanged(_prev, _next) {
+        this.detectSize();
     }
     /**
-     * @protected
+     * Converts a CSS length value to pixels.
+     *
+     * @private
      */
-    onOrientationPropertyChanged(_prev, _next) {
-        this.detectSize();
+    cssLengthToPixels(value) {
+        // Handle raw number (treated as pixels)
+        if (typeof value === 'number') {
+            return value;
+        }
+        // Handle percentage
+        if (CssLength.isPercentage(value)) {
+            return this._size * (CssLength.extractValue(value) / 100);
+        }
+        // Handle other CSS length units (px, rem, etc.)
+        return CssLength.extractValue(value);
+    }
+    /**
+     * Converts a CSS length value to percentage.
+     *
+     * @private
+     */
+    cssLengthToPercentage(value) {
+        // Handle raw number (treated as pixels, convert to percentage)
+        if (typeof value === 'number') {
+            return this._size > 0 ? (value / this._size) * 100 : 0;
+        }
+        // Handle percentage
+        if (CssLength.isPercentage(value)) {
+            return CssLength.extractValue(value);
+        }
+        // Convert pixel value to percentage
+        const pixels = CssLength.extractValue(value);
+        return this._size > 0 ? (pixels / this._size) * 100 : 0;
     }
     /**
      * @private
@@ -386,17 +465,11 @@ let SplitElement = class SplitElement extends Themeable(Reversible(Orientable(Di
             ? rect.height
             : rect.width;
     }
-    /**
-     * @private
-     */
-    percentageToPixels(value) {
-        return this._size * (value / 100);
-    }
     /**
      * @private
      */
     pixelsToPercentage(value) {
-        return (value / this._size) * 100;
+        return this._size > 0 ? (value / this._size) * 100 : 0;
     }
     /**
      * @private
@@ -406,10 +479,18 @@ let SplitElement = class SplitElement extends Themeable(Reversible(Orientable(Di
             return;
         }
         const rect = entries[0].contentRect;
+        const previousSize = this._size;
         this._size = this.orientation === Orientation.Vertical ? rect.height : rect.width;
-        // Resize when a primary panel is set
-        if (this.lock !== SplitLock.None) {
-            this.position = this.pixelsToPercentage(this._cachedPositionInPixels);
+        // When locked, maintain the absolute pixel position during resize
+        if (this.lock !== SplitLock.None && previousSize > 0) {
+            const positionString = String(this._position);
+            // If position is a percentage, convert to maintain absolute size
+            if (positionString.endsWith('%')) {
+                const absolutePixels = previousSize * (parseFloat(positionString) / 100);
+                const newPercentage = this._size > 0 ? (absolutePixels / this._size) * 100 : 0;
+                this._position = `${newPercentage}%`;
+                this.requestUpdate('position');
+            }
         }
     }
     /**
@@ -441,15 +522,16 @@ let SplitElement = class SplitElement extends Themeable(Reversible(Orientable(Di
     }
 };
 __decorate([
-    Attribute({ type: Number }),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [Number])
+    Attribute({
+        type: String,
+        converter: {
+            fromAttribute: (value) => normalizeCssLengthAttribute(value, '50%'),
+            toAttribute: (value) => String(value)
+        }
+    }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
 ], SplitElement.prototype, "position", null);
-__decorate([
-    Attribute({ type: Number }),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [Number])
-], SplitElement.prototype, "positionInPixels", null);
 __decorate([
     Attribute({ type: SplitLock }),
     __metadata("design:type", String),
@@ -465,7 +547,7 @@ __decorate([
                 }
                 return value
                     .split(' ')
-                    .map((v) => v.trim());
+                    .map((v) => normalizeCssLengthAttribute(v.trim(), '0px'));
             },
             toAttribute: (value) => value.join(' ')
         }
@@ -483,6 +565,28 @@ __decorate([
     __metadata("design:type", Number),
     __metadata("design:paramtypes", [Number])
 ], SplitElement.prototype, "thickness", null);
+__decorate([
+    Attribute({
+        type: String,
+        converter: {
+            fromAttribute: (value) => normalizeCssLengthAttribute(value, '0%'),
+            toAttribute: (value) => String(value)
+        }
+    }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], SplitElement.prototype, "min", null);
+__decorate([
+    Attribute({
+        type: String,
+        converter: {
+            fromAttribute: (value) => normalizeCssLengthAttribute(value, '100%'),
+            toAttribute: (value) => String(value)
+        }
+    }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], SplitElement.prototype, "max", null);
 __decorate([
     Property({ type: Boolean }),
     __metadata("design:type", Boolean),
@@ -496,15 +600,9 @@ __decorate([
 __decorate([
     Watch('position'),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Number, Number]),
+    __metadata("design:paramtypes", [Object, Object]),
     __metadata("design:returntype", void 0)
 ], SplitElement.prototype, "onPositionPropertyChanged", null);
-__decorate([
-    Watch('positionInPixels'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Number, Number]),
-    __metadata("design:returntype", void 0)
-], SplitElement.prototype, "onPositionInPixelsPropertyChanged", null);
 __decorate([
     Watch('orientation'),
     __metadata("design:type", Function),