verstak 0.24.272 → 0.24.273

package/build/dist/source/html/El.d.ts

@@ -8,12 +8,12 @@ export type El<T = any, M = any> = {
     area: ElArea;
     width: Range;
     height: Range;
-    alignment: Alignment | undefined;
-    alignmentInside: Alignment | undefined;
-    verticalAlignment: VerticalAlignment | undefined;
-    verticalAlignmentInside: VerticalAlignment | undefined;
-    stretchingStrengthX: number | undefined;
-    stretchingStrengthY: number | undefined;
+    horizontal: PosH | undefined;
+    contentHorizontal: PosH | undefined;
+    vertical: PosV | undefined;
+    contentVertical: PosV | undefined;
+    stretchingStrengthH: number | undefined;
+    stretchingStrengthV: number | undefined;
     contentWrapping: boolean;
     overlayVisible: boolean | undefined;
     sealed: Direction | undefined;
@@ -31,7 +31,7 @@ export type El<T = any, M = any> = {
     useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
 };
 export declare enum ElKind {
-    section = 0,
+    panel = 0,
     table = 1,
     note = 2,
     group = 3,
@@ -46,13 +46,13 @@ export type ElCoords = {
     x2: number;
     y2: number;
 };
-export declare enum Alignment {
+export declare enum PosH {
     left = 0,
     center = 1,
     right = 2,
     stretch = 3
 }
-export declare enum VerticalAlignment {
+export declare enum PosV {
     top = 0,
     center = 1,
     bottom = 2,
@@ -89,12 +89,12 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     private _coords;
     private _width;
     private _height;
-    private _alignment;
-    private _verticalAlignment;
-    private _alignmentInside;
-    private _verticalAlignmentInside;
-    private _stretchingStrengthX;
-    private _stretchingStrengthY;
+    private _horizontal;
+    private _vertical;
+    private _contentHorizontal;
+    private _contentVertical;
+    private _stretchingStrengthH;
+    private _stretchingStrengthV;
     private _contentWrapping;
     private _overlayVisible;
     private _sealed;
@@ -103,7 +103,7 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     constructor(node: RxNode<El<T, M>>);
     prepareForUpdate(): void;
     get index(): number;
-    get isSection(): boolean;
+    get isPanel(): boolean;
     get isTable(): boolean;
     get isAuxiliary(): boolean;
     get kind(): ElKind;
@@ -134,18 +134,18 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     });
     get preferredHeightUsed(): boolean;
     set preferredHeightUsed(value: boolean);
-    get alignment(): Alignment | undefined;
-    set alignment(value: Alignment | undefined);
-    get verticalAlignment(): VerticalAlignment | undefined;
-    set verticalAlignment(value: VerticalAlignment | undefined);
-    get alignmentInside(): Alignment | undefined;
-    set alignmentInside(value: Alignment | undefined);
-    get verticalAlignmentInside(): VerticalAlignment | undefined;
-    set verticalAlignmentInside(value: VerticalAlignment | undefined);
-    get stretchingStrengthX(): number | undefined;
-    set stretchingStrengthX(value: number | undefined);
-    get stretchingStrengthY(): number | undefined;
-    set stretchingStrengthY(value: number | undefined);
+    get horizontal(): PosH | undefined;
+    set horizontal(value: PosH | undefined);
+    get vertical(): PosV | undefined;
+    set vertical(value: PosV | undefined);
+    get contentHorizontal(): PosH | undefined;
+    set contentHorizontal(value: PosH | undefined);
+    get contentVertical(): PosV | undefined;
+    set contentVertical(value: PosV | undefined);
+    get stretchingStrengthH(): number | undefined;
+    set stretchingStrengthH(value: number | undefined);
+    get stretchingStrengthV(): number | undefined;
+    set stretchingStrengthV(value: number | undefined);
     get contentWrapping(): boolean;
     set contentWrapping(value: boolean);
     get overlayVisible(): boolean | undefined;
@@ -164,10 +164,10 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     private static applyCoords;
     private static applyWidth;
     private static applyHeight;
-    private static applyAlignment;
-    private static applyVerticalAlignment;
-    private static applyStretchingStrengthX;
-    private static applyStretchingStrengthY;
+    private static applyHorizontal;
+    private static applyVertical;
+    private static applyStretchingStrengthH;
+    private static applyStretchingStrengthV;
     private static applyContentWrapping;
     private static applyOverlayVisible;
     static applySealed<T extends Element>(element: El<T, any>, value: Direction | undefined): void;

package/build/dist/source/html/El.js

@@ -11,7 +11,7 @@ import { RxNode, BaseDriver, Transaction, obs, ObservableObject } from "reactron
 import { equalElCoords, parseElCoords } from "./ElUtils.js";
 export var ElKind;
 (function (ElKind) {
-    ElKind[ElKind["section"] = 0] = "section";
+    ElKind[ElKind["panel"] = 0] = "panel";
     ElKind[ElKind["table"] = 1] = "table";
     ElKind[ElKind["note"] = 2] = "note";
     ElKind[ElKind["group"] = 3] = "group";
@@ -20,20 +20,20 @@ export var ElKind;
     ElKind[ElKind["cursor"] = 6] = "cursor";
     ElKind[ElKind["native"] = 7] = "native";
 })(ElKind || (ElKind = {}));
-export var Alignment;
-(function (Alignment) {
-    Alignment[Alignment["left"] = 0] = "left";
-    Alignment[Alignment["center"] = 1] = "center";
-    Alignment[Alignment["right"] = 2] = "right";
-    Alignment[Alignment["stretch"] = 3] = "stretch";
-})(Alignment || (Alignment = {}));
-export var VerticalAlignment;
-(function (VerticalAlignment) {
-    VerticalAlignment[VerticalAlignment["top"] = 0] = "top";
-    VerticalAlignment[VerticalAlignment["center"] = 1] = "center";
-    VerticalAlignment[VerticalAlignment["bottom"] = 2] = "bottom";
-    VerticalAlignment[VerticalAlignment["stretch"] = 3] = "stretch";
-})(VerticalAlignment || (VerticalAlignment = {}));
+export var PosH;
+(function (PosH) {
+    PosH[PosH["left"] = 0] = "left";
+    PosH[PosH["center"] = 1] = "center";
+    PosH[PosH["right"] = 2] = "right";
+    PosH[PosH["stretch"] = 3] = "stretch";
+})(PosH || (PosH = {}));
+export var PosV;
+(function (PosV) {
+    PosV[PosV["top"] = 0] = "top";
+    PosV[PosV["center"] = 1] = "center";
+    PosV[PosV["bottom"] = 2] = "bottom";
+    PosV[PosV["stretch"] = 3] = "stretch";
+})(PosV || (PosV = {}));
 export var Direction;
 (function (Direction) {
     Direction[Direction["horizontal"] = 0] = "horizontal";
@@ -66,12 +66,12 @@ export class ElImpl {
         this._coords = UndefinedElCoords;
         this._width = Transaction.separate(() => new Size());
         this._height = Transaction.separate(() => new Size());
-        this._alignment = undefined;
-        this._verticalAlignment = undefined;
-        this._alignmentInside = undefined;
-        this._verticalAlignmentInside = undefined;
-        this._stretchingStrengthX = undefined;
-        this._stretchingStrengthY = undefined;
+        this._horizontal = undefined;
+        this._vertical = undefined;
+        this._contentHorizontal = undefined;
+        this._contentVertical = undefined;
+        this._stretchingStrengthH = undefined;
+        this._stretchingStrengthV = undefined;
         this._contentWrapping = true;
         this._overlayVisible = undefined;
         this._sealed = undefined;
@@ -83,7 +83,7 @@ export class ElImpl {
         this._hasStylingPresets = false;
     }
     get index() { return this.node.seat.index; }
-    get isSection() { return this.kind === ElKind.section; }
+    get isPanel() { return this.kind === ElKind.panel; }
     get isTable() { return this.kind === ElKind.table; }
     get isAuxiliary() { return this.kind > ElKind.note; }
     get kind() { return this._kind; }
@@ -120,7 +120,7 @@ export class ElImpl {
     get width() { return this._width.raw; }
     set width(value) {
         const w = this._width.raw;
-        if (value.min !== w.min || value.max !== w.max) {
+        if (value.min !== w.min || value.max !== w.max || value.preferred !== undefined) {
             ElImpl.applyWidth(this, value);
             this._width.raw = value;
             this._width.preferredUsed = false;
@@ -143,7 +143,7 @@ export class ElImpl {
     get height() { return this._height.raw; }
     set height(value) {
         const h = this._height.raw;
-        if (value.min !== h.min || value.max !== h.max) {
+        if (value.min !== h.min || value.max !== h.max || value.preferred !== undefined) {
             ElImpl.applyHeight(this, value);
             this._height.raw = value;
             this._height.preferredUsed = false;
@@ -163,52 +163,52 @@ export class ElImpl {
     set preferredHeightUsed(value) {
         this._height.preferredUsed = value;
     }
-    get alignment() { return this._alignment; }
-    set alignment(value) {
-        const existing = this._alignment;
+    get horizontal() { return this._horizontal; }
+    set horizontal(value) {
+        const existing = this._horizontal;
         if (value !== existing) {
-            ElImpl.applyAlignment(this, existing, value, this._alignmentInside, this._alignmentInside, this._stretchingStrengthX);
-            this._alignment = value;
+            ElImpl.applyHorizontal(this, existing, value, this._contentHorizontal, this._contentHorizontal, this._stretchingStrengthH);
+            this._horizontal = value;
         }
     }
-    get verticalAlignment() { return this._verticalAlignment; }
-    set verticalAlignment(value) {
-        const existing = this._verticalAlignment;
+    get vertical() { return this._vertical; }
+    set vertical(value) {
+        const existing = this._vertical;
         if (value !== existing) {
-            ElImpl.applyVerticalAlignment(this, existing, value, this._verticalAlignmentInside, this._verticalAlignmentInside, this._stretchingStrengthY);
-            this._verticalAlignment = value;
+            ElImpl.applyVertical(this, existing, value, this._contentVertical, this._contentVertical, this._stretchingStrengthV);
+            this._vertical = value;
         }
     }
-    get alignmentInside() { return this._alignmentInside; }
-    set alignmentInside(value) {
-        const existing = this._alignmentInside;
+    get contentHorizontal() { return this._contentHorizontal; }
+    set contentHorizontal(value) {
+        const existing = this._contentHorizontal;
         if (value !== existing) {
-            ElImpl.applyAlignment(this, this._alignment, this._alignment, existing, value, this._stretchingStrengthX);
-            this._alignmentInside = value;
+            ElImpl.applyHorizontal(this, this._horizontal, this._horizontal, existing, value, this._stretchingStrengthH);
+            this._contentHorizontal = value;
         }
     }
-    get verticalAlignmentInside() { return this._verticalAlignmentInside; }
-    set verticalAlignmentInside(value) {
-        const existing = this._verticalAlignmentInside;
+    get contentVertical() { return this._contentVertical; }
+    set contentVertical(value) {
+        const existing = this._contentVertical;
         if (value !== existing) {
-            ElImpl.applyVerticalAlignment(this, this._verticalAlignment, this._verticalAlignment, existing, value, this._stretchingStrengthY);
-            this._verticalAlignmentInside = value;
+            ElImpl.applyVertical(this, this._vertical, this._vertical, existing, value, this._stretchingStrengthV);
+            this._contentVertical = value;
         }
     }
-    get stretchingStrengthX() { return this._stretchingStrengthX; }
-    set stretchingStrengthX(value) {
-        const existing = this._stretchingStrengthX;
+    get stretchingStrengthH() { return this._stretchingStrengthH; }
+    set stretchingStrengthH(value) {
+        const existing = this._stretchingStrengthH;
         if (value !== existing) {
-            ElImpl.applyStretchingStrengthX(this, existing, value);
-            this._stretchingStrengthX = value;
+            ElImpl.applyStretchingStrengthH(this, existing, value);
+            this._stretchingStrengthH = value;
         }
     }
-    get stretchingStrengthY() { return this._stretchingStrengthY; }
-    set stretchingStrengthY(value) {
-        const existing = this._stretchingStrengthY;
+    get stretchingStrengthV() { return this._stretchingStrengthV; }
+    set stretchingStrengthV(value) {
+        const existing = this._stretchingStrengthV;
         if (value !== existing) {
-            ElImpl.applyStretchingStrengthY(this, existing, value);
-            this._stretchingStrengthY = value;
+            ElImpl.applyStretchingStrengthV(this, existing, value);
+            this._stretchingStrengthV = value;
         }
     }
     get contentWrapping() { return this._contentWrapping; }
@@ -310,10 +310,10 @@ export class ElImpl {
             s.maxHeight = (_b = value.max) !== null && _b !== void 0 ? _b : "";
         }
     }
-    static applyAlignment(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
+    static applyHorizontal(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
         var _a, _b;
-        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = Alignment.left);
-        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = Alignment.left);
+        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = PosH.left);
+        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = PosH.left);
         oldInside !== null && oldInside !== void 0 ? oldInside : (oldInside = oldPrimary);
         newInside !== null && newInside !== void 0 ? newInside : (newInside = newPrimary);
         const css = element.style;
@@ -326,8 +326,8 @@ export class ElImpl {
         }
         let isEffectiveAlignerX = false;
         if (hostLayout) {
-            const isAligner = newPrimary === Alignment.center ||
-                newPrimary === Alignment.right;
+            const isAligner = newPrimary === PosH.center ||
+                newPrimary === PosH.right;
             isEffectiveAlignerX = isAligner && (hostLayout.alignerX === undefined ||
                 element.index <= hostLayout.alignerX.index);
             if (hostLayout.alignerX === element) {
@@ -347,63 +347,63 @@ export class ElImpl {
         }
         switch (newPrimary) {
             default:
-            case Alignment.left:
+            case PosH.left:
                 css.justifySelf = "start";
-                if (oldPrimary === Alignment.center) {
+                if (oldPrimary === PosH.center) {
                     css.marginLeft = "";
                     css.marginRight = "";
                 }
-                else if (oldPrimary === Alignment.right)
+                else if (oldPrimary === PosH.right)
                     css.marginLeft = "";
                 break;
-            case Alignment.center:
+            case PosH.center:
                 css.justifySelf = "center";
                 if (hostLayout)
                     css.marginLeft = isEffectiveAlignerX ? "auto" : "";
                 css.marginRight = "auto";
                 break;
-            case Alignment.right:
+            case PosH.right:
                 css.justifySelf = "end";
                 if (hostLayout)
                     css.marginLeft = isEffectiveAlignerX ? "auto" : "";
-                if (oldPrimary === Alignment.center)
+                if (oldPrimary === PosH.center)
                     css.marginRight = "";
                 break;
-            case Alignment.stretch:
+            case PosH.stretch:
                 css.justifySelf = "stretch";
-                if (oldPrimary === Alignment.center) {
+                if (oldPrimary === PosH.center) {
                     css.marginLeft = "";
                     css.marginRight = "";
                 }
-                else if (oldPrimary === Alignment.right)
+                else if (oldPrimary === PosH.right)
                     css.marginLeft = "";
                 break;
         }
         switch (newInside) {
             default:
-            case Alignment.left:
+            case PosH.left:
                 css.alignItems = "start";
                 css.textAlign = "left";
                 break;
-            case Alignment.center:
+            case PosH.center:
                 css.alignItems = "center";
                 css.textAlign = "center";
                 break;
-            case Alignment.right:
+            case PosH.right:
                 css.alignItems = "end";
                 css.textAlign = "right";
                 break;
-            case Alignment.stretch:
+            case PosH.stretch:
                 css.alignItems = "stretch";
                 css.textAlign = "justify";
                 break;
         }
-        if (newPrimary === Alignment.stretch && strength === undefined)
-            ElImpl.applyStretchingStrengthX(element, 0, 1);
+        if (newPrimary === PosH.stretch && strength === undefined)
+            ElImpl.applyStretchingStrengthH(element, 0, 1);
     }
-    static applyVerticalAlignment(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
-        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = VerticalAlignment.top);
-        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = VerticalAlignment.top);
+    static applyVertical(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
+        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = PosV.top);
+        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = PosV.top);
         oldInside !== null && oldInside !== void 0 ? oldInside : (oldInside = oldPrimary);
         newInside !== null && newInside !== void 0 ? newInside : (newInside = newPrimary);
         const css = element.style;
@@ -418,10 +418,10 @@ export class ElImpl {
         }
         let isEffectiveAlignerY = false;
         if (hostLayout) {
-            const isAligner = newPrimary === VerticalAlignment.center ||
-                newPrimary === VerticalAlignment.bottom;
+            const isAligner = newPrimary === PosV.center ||
+                newPrimary === PosV.bottom;
             isEffectiveAlignerY = isAligner && (hostLayout.alignerY === undefined ||
-                hostLayout.alignerY.verticalAlignment !== VerticalAlignment.center);
+                hostLayout.alignerY.vertical !== PosV.center);
             if (hostLayout.alignerY === element) {
                 if (!isEffectiveAlignerY) {
                     hostCss.marginTop = "";
@@ -436,43 +436,43 @@ export class ElImpl {
         }
         switch (newPrimary) {
             default:
-            case VerticalAlignment.top:
+            case PosV.top:
                 css.alignSelf = "start";
                 break;
-            case VerticalAlignment.center:
+            case PosV.center:
                 css.alignSelf = "center";
                 break;
-            case VerticalAlignment.bottom:
+            case PosV.bottom:
                 css.alignSelf = "end";
                 break;
-            case VerticalAlignment.stretch:
+            case PosV.stretch:
                 css.alignSelf = "stretch";
                 break;
         }
         switch (newInside) {
             default:
-            case VerticalAlignment.top:
+            case PosV.top:
                 css.justifyContent = "start";
                 break;
-            case VerticalAlignment.center:
+            case PosV.center:
                 css.justifyContent = "center";
                 break;
-            case VerticalAlignment.bottom:
+            case PosV.bottom:
                 css.justifyContent = "end";
                 break;
-            case VerticalAlignment.stretch:
+            case PosV.stretch:
                 css.justifyContent = "stretch";
                 break;
         }
-        if (newPrimary === VerticalAlignment.stretch && strength === undefined)
-            ElImpl.applyStretchingStrengthY(element, 0, 1);
+        if (newPrimary === PosV.stretch && strength === undefined)
+            ElImpl.applyStretchingStrengthV(element, 0, 1);
     }
-    static applyStretchingStrengthX(element, existing, value) {
+    static applyStretchingStrengthH(element, existing, value) {
         const s = element.style;
         const host = element.node.host;
         if (host.driver.isPartition) {
             const hostEl = host.element;
-            hostEl._stretchingStrengthX = value;
+            hostEl._stretchingStrengthH = value;
             existing !== null && existing !== void 0 ? existing : (existing = 0);
             value !== null && value !== void 0 ? value : (value = 0);
         }
@@ -486,12 +486,12 @@ export class ElImpl {
             s.flexBasis = "";
         }
     }
-    static applyStretchingStrengthY(element, existing, value) {
+    static applyStretchingStrengthV(element, existing, value) {
         var _a;
         const host = element.node.host;
         if (host.driver.isPartition) {
             const hostElement = host.element;
-            hostElement._stretchingStrengthY = value;
+            hostElement._stretchingStrengthV = value;
             let delta = 0;
             existing !== null && existing !== void 0 ? existing : (existing = 0);
             value !== null && value !== void 0 ? value : (value = 0);
@@ -504,7 +504,7 @@ export class ElImpl {
                     delta = -1;
             }
             if (delta !== 0) {
-                const count = (_a = hostElement._stretchingStrengthY) !== null && _a !== void 0 ? _a : 0 + delta;
+                const count = (_a = hostElement._stretchingStrengthV) !== null && _a !== void 0 ? _a : 0 + delta;
                 const s = hostElement.style;
                 if (count === 1)
                     s.flexGrow = `${value}`;

package/build/dist/source/html/Elements.d.ts

@@ -1,7 +1,7 @@
 import { RxNodeDecl, RxNodeDriver, RxNode, Delegate, MergedItem } from "reactronic";
 import { CursorCommandDriver, El, ElArea } from "./El.js";
 import { HtmlDriver } from "./HtmlDriver.js";
-export declare function Section<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
+export declare function Panel<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
 export declare function Table<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
 export declare function row<T = void>(builder?: (element: void) => T, shiftCursorDown?: number): void;
 export declare function Splitter<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
@@ -12,13 +12,13 @@ export declare function Note(content: string, formatted?: boolean, declaration?:
 export declare function Group<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
 export declare function Handling<M = unknown>(onChange: Delegate<El<void, M>>): RxNode<El<void, M>>;
 export declare function SyntheticElement<M = unknown>(declaration?: RxNodeDecl<El<void, M>>, preset?: RxNodeDecl<El<void, M>>): RxNode<El<void, M>>;
-export declare class SectionDriver<T extends HTMLElement> extends HtmlDriver<T> {
+export declare class PanelDriver<T extends HTMLElement> extends HtmlDriver<T> {
     update(node: RxNode<El<T>>): void | Promise<void>;
     child(ownerNode: RxNode<El<T, any>>, childDriver: RxNodeDriver<any>, childDeclaration?: RxNodeDecl<any> | undefined, childPreset?: RxNodeDecl<any> | undefined): MergedItem<RxNode> | undefined;
 }
 export declare function isSplitViewPartition(childDriver: RxNodeDriver): boolean;
 export declare const Drivers: {
-    section: SectionDriver<HTMLElement>;
+    panel: PanelDriver<HTMLElement>;
     table: HtmlDriver<HTMLElement, any>;
     note: HtmlDriver<HTMLElement, any>;
     group: HtmlDriver<HTMLElement, any>;

package/build/dist/source/html/Elements.js

@@ -4,8 +4,8 @@ import { getPrioritiesForEmptySpaceDistribution, getPrioritiesForSizeChanging, r
 import { Axis, BodyFontSize, Dimension, toPx } from "./Sizes.js";
 import { HtmlDriver } from "./HtmlDriver.js";
 import { clamp } from "./ElUtils.js";
-export function Section(declaration, preset) {
-    return RxNode.declare(Drivers.section, declaration, preset);
+export function Panel(declaration, preset) {
+    return RxNode.declare(Drivers.panel, declaration, preset);
 }
 export function Table(declaration, preset) {
     return RxNode.declare(Drivers.table, declaration, preset);
@@ -108,7 +108,7 @@ export function Handling(onChange) {
 export function SyntheticElement(declaration, preset) {
     return RxNode.declare(Drivers.synthetic, declaration, preset);
 }
-export class SectionDriver extends HtmlDriver {
+export class PanelDriver extends HtmlDriver {
     update(node) {
         rowBreak();
         const result = super.update(node);
@@ -157,7 +157,7 @@ export class SectionDriver extends HtmlDriver {
         if (el.splitView !== undefined) {
             SyntheticElement({
                 mode: Mode.independentUpdate,
-                triggers: { count: el.node.stamp },
+                triggers: { stamp: el.node.stamp },
                 onChange: () => {
                     const native = el.native;
                     const isHorizontal = el.splitView === Direction.horizontal;
@@ -261,7 +261,7 @@ function overrideMethod(declaration, method, func) {
         : (el, base) => { base(); func(el); };
 }
 export const Drivers = {
-    section: new SectionDriver(Constants.element, false, el => el.kind = ElKind.section),
+    panel: new PanelDriver(Constants.element, false, el => el.kind = ElKind.panel),
     table: new HtmlDriver(Constants.element, false, el => el.kind = ElKind.table),
     note: new HtmlDriver(Constants.element, false, el => el.kind = ElKind.note),
     group: new HtmlDriver(Constants.group, false, el => el.kind = ElKind.group),

package/build/dist/source/html/Handlers.d.ts

@@ -1,6 +1,7 @@
 import { ToggleRef } from "reactronic";
 import { FocusModel } from "./sensors/FocusSensor.js";
 import { ResizedElement } from "./sensors/ResizeSensor.js";
-export declare function OnClick(target: HTMLElement, action: (() => void) | ToggleRef | undefined, key?: string): void;
+import { PointerSensor } from "./sensors/PointerSensor.js";
+export declare function OnClick(target: HTMLElement, action: ((pointer: PointerSensor) => void) | ToggleRef | undefined, key?: string): void;
 export declare function OnResize(target: HTMLElement, action: ((element: ResizedElement) => void) | undefined, key?: string): void;
 export declare function OnFocus(target: HTMLElement, model: FocusModel, switchEditMode?: ((model: FocusModel) => void) | undefined, key?: string): void;

package/build/dist/source/html/Handlers.js

@@ -8,9 +8,9 @@ export function OnClick(target, action, key) {
             triggers: { target },
             onChange: el => {
                 const pointer = target.sensors.pointer;
-                if (pointer.clicked) {
+                if (target.dataForSensor.click !== undefined && pointer.clicked === target.dataForSensor.click || target.dataForSensor.click === undefined && pointer.clicked) {
                     if (action instanceof Function) {
-                        unobs(() => action());
+                        unobs(() => action(pointer));
                     }
                     else if (action instanceof ToggleRef) {
                         unobs(() => action.toggle());
@@ -44,7 +44,7 @@ export function OnFocus(target, model, switchEditMode = undefined, key) {
             el.node.configureReactronic({ throttling: 0 });
         },
         onChange: el => {
-            if (switchEditMode === undefined && !target.hasAttribute("tabindex"))
+            if (switchEditMode === undefined && !(target instanceof HTMLInputElement || target.hasAttribute("tabindex")))
                 console.warn(`"${key !== null && key !== void 0 ? key : "noname"}" element must have "tabindex" attribute set in order to be focusable`);
             if (switchEditMode !== undefined) {
                 switchEditMode(model);

package/build/dist/source/html/HtmlElements.js

@@ -2,7 +2,7 @@ import { RxNode } from "reactronic";
 import { ElKind } from "./El.js";
 import { StaticDriver, HtmlDriver, SvgDriver } from "./HtmlDriver.js";
 export function Page(declaration, preset) {
-    const driver = new StaticDriver(global.document.body, "Page", false, el => el.kind = ElKind.section);
+    const driver = new StaticDriver(global.document.body, "Page", false, el => el.kind = ElKind.panel);
     return RxNode.declare(driver, declaration, preset);
 }
 export function A(declaration, preset) { return RxNode.declare(HtmlTags.a, declaration, preset); }

package/build/dist/source/html/SplitViewMath.js

@@ -181,9 +181,8 @@ export function getPrioritiesForSizeChanging(isHorizontal, children, indexes) {
     const manuallyResizable = [];
     const items = Array.from(children.items()).filter(x => isSplitViewPartition(x.instance.driver));
     for (let i = items.length - 1; i >= 0; i--) {
-        const item = items[i];
-        const el = item.instance.element;
-        const strength = (_a = (isHorizontal ? el.stretchingStrengthX : el.stretchingStrengthY)) !== null && _a !== void 0 ? _a : 1;
+        const el = items[i].instance.element;
+        const strength = (_a = (isHorizontal ? el.stretchingStrengthH : el.stretchingStrengthV)) !== null && _a !== void 0 ? _a : 1;
         if (!indexes.includes(i)) {
             if (strength > 0)
                 resizable.push(1 << i);
@@ -191,15 +190,20 @@ export function getPrioritiesForSizeChanging(isHorizontal, children, indexes) {
                 manuallyResizable.push(1 << i);
         }
     }
+    let r = 0;
+    let mr = 0;
     for (const i of indexes) {
-        const item = items[i];
-        const el = item.instance.element;
-        const strength = (_b = (isHorizontal ? el.stretchingStrengthX : el.stretchingStrengthY)) !== null && _b !== void 0 ? _b : 1;
+        const el = items[i].instance.element;
+        const strength = (_b = (isHorizontal ? el.stretchingStrengthH : el.stretchingStrengthV)) !== null && _b !== void 0 ? _b : 1;
         if (strength > 0)
-            resizable.push(1 << i);
+            r |= 1 << i;
         else
-            manuallyResizable.push(1 << i);
+            mr |= 1 << i;
     }
+    if (r > 0)
+        resizable.push(r);
+    if (mr > 0)
+        manuallyResizable.push(mr);
     return { resizable, manuallyResizable };
 }
 export function getPrioritiesForEmptySpaceDistribution(isHorizontal, children) {
@@ -210,7 +214,7 @@ export function getPrioritiesForEmptySpaceDistribution(isHorizontal, children) {
     for (const child of children.items()) {
         if (isSplitViewPartition(child.instance.driver)) {
             const el = child.instance.element;
-            const strength = (_a = (isHorizontal ? el.stretchingStrengthX : el.stretchingStrengthY)) !== null && _a !== void 0 ? _a : 1;
+            const strength = (_a = (isHorizontal ? el.stretchingStrengthH : el.stretchingStrengthV)) !== null && _a !== void 0 ? _a : 1;
             if (strength > 0)
                 r |= 1 << i;
             else
@@ -224,7 +228,7 @@ function getFractionCount(isHorizontal, children, vector, index, force = false)
     var _a;
     let result = 0;
     for (const i of indexes(vector, index)) {
-        const growth = (_a = (isHorizontal ? children[i].element.stretchingStrengthX : children[i].element.stretchingStrengthY)) !== null && _a !== void 0 ? _a : 1;
+        const growth = (_a = (isHorizontal ? children[i].element.stretchingStrengthH : children[i].element.stretchingStrengthV)) !== null && _a !== void 0 ? _a : 1;
         result += growth > 0 ? growth : (force ? 1 : 0);
     }
     return result;
@@ -269,7 +273,7 @@ function distribute(sign, deltaPx, index, priorities, sizesPx, isHorizontal, for
             for (const i of indexes(vector, sign * index)) {
                 const child = sizesPx[i].node;
                 const initialSizePx = sizesPx[i].sizePx;
-                const strength = isHorizontal ? ((_a = child.element.stretchingStrengthX) !== null && _a !== void 0 ? _a : 1) : ((_b = child.element.stretchingStrengthY) !== null && _b !== void 0 ? _b : 1);
+                const strength = isHorizontal ? ((_a = child.element.stretchingStrengthH) !== null && _a !== void 0 ? _a : 1) : ((_b = child.element.stretchingStrengthV) !== null && _b !== void 0 ? _b : 1);
                 const growth = strength > 0 ? strength : (force ? 1 : 0);
                 const newSizePx = initialSizePx + sign * (growth * fractionSizePx);
                 const size = isHorizontal ? sizesPx[i].node.element.widthPx : sizesPx[i].node.element.heightPx;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verstak",
-  "version": "0.24.272",
+  "version": "0.24.273",
   "description": "Verstak - Front-End Library",
   "publisher": "Nezaboodka Software",
   "license": "Apache-2.0",
@@ -31,7 +31,7 @@
   },
   "homepage": "https://github.com/nezaboodka/verstak/blob/master/README.md#readme",
   "dependencies": {
-    "reactronic": "^0.24.270"
+    "reactronic": "^0.24.271"
   },
   "devDependencies": {
     "@types/node": "20.11.17",