@triniwiz/nativescript-masonkit 1.0.0-beta.121 → 1.0.0-beta.123

package/style.js

@@ -242,6 +242,58 @@ var StyleKeys;
     StyleKeys[StyleKeys["TRANSFORM_ORIGIN_X_VALUE"] = 600] = "TRANSFORM_ORIGIN_X_VALUE";
     StyleKeys[StyleKeys["TRANSFORM_ORIGIN_Y_VALUE"] = 604] = "TRANSFORM_ORIGIN_Y_VALUE";
     StyleKeys[StyleKeys["TRANSFORM_ORIGIN_STATE"] = 608] = "TRANSFORM_ORIGIN_STATE";
+    StyleKeys[StyleKeys["TEXT_ORIENTATION"] = 609] = "TEXT_ORIENTATION";
+    StyleKeys[StyleKeys["TEXT_ORIENTATION_STATE"] = 610] = "TEXT_ORIENTATION_STATE";
+    // CSS logical properties, mapped onto physical sides by the box's writing mode and direction.
+    // A group's ORDER bytes are its physical slots (top, right, bottom, left; sizes: width, height,
+    // min-width, min-height, max-width, max-height) then its logical ones in the order below: 0
+    // never written, else the write's LOGICAL_SEQ stamp. A logical value applies to the side it
+    // maps to when it was written after that side's physical one. Types are the physical group's.
+    StyleKeys[StyleKeys["LOGICAL_SEQ"] = 611] = "LOGICAL_SEQ";
+    StyleKeys[StyleKeys["MARGIN_ORDER"] = 612] = "MARGIN_ORDER";
+    StyleKeys[StyleKeys["MARGIN_BLOCK_START_TYPE"] = 620] = "MARGIN_BLOCK_START_TYPE";
+    StyleKeys[StyleKeys["MARGIN_INLINE_END_TYPE"] = 621] = "MARGIN_INLINE_END_TYPE";
+    StyleKeys[StyleKeys["MARGIN_BLOCK_END_TYPE"] = 622] = "MARGIN_BLOCK_END_TYPE";
+    StyleKeys[StyleKeys["MARGIN_INLINE_START_TYPE"] = 623] = "MARGIN_INLINE_START_TYPE";
+    StyleKeys[StyleKeys["MARGIN_BLOCK_START_VALUE"] = 624] = "MARGIN_BLOCK_START_VALUE";
+    StyleKeys[StyleKeys["MARGIN_INLINE_END_VALUE"] = 628] = "MARGIN_INLINE_END_VALUE";
+    StyleKeys[StyleKeys["MARGIN_BLOCK_END_VALUE"] = 632] = "MARGIN_BLOCK_END_VALUE";
+    StyleKeys[StyleKeys["MARGIN_INLINE_START_VALUE"] = 636] = "MARGIN_INLINE_START_VALUE";
+    StyleKeys[StyleKeys["PADDING_ORDER"] = 640] = "PADDING_ORDER";
+    StyleKeys[StyleKeys["PADDING_BLOCK_START_TYPE"] = 648] = "PADDING_BLOCK_START_TYPE";
+    StyleKeys[StyleKeys["PADDING_INLINE_END_TYPE"] = 649] = "PADDING_INLINE_END_TYPE";
+    StyleKeys[StyleKeys["PADDING_BLOCK_END_TYPE"] = 650] = "PADDING_BLOCK_END_TYPE";
+    StyleKeys[StyleKeys["PADDING_INLINE_START_TYPE"] = 651] = "PADDING_INLINE_START_TYPE";
+    StyleKeys[StyleKeys["PADDING_BLOCK_START_VALUE"] = 652] = "PADDING_BLOCK_START_VALUE";
+    StyleKeys[StyleKeys["PADDING_INLINE_END_VALUE"] = 656] = "PADDING_INLINE_END_VALUE";
+    StyleKeys[StyleKeys["PADDING_BLOCK_END_VALUE"] = 660] = "PADDING_BLOCK_END_VALUE";
+    StyleKeys[StyleKeys["PADDING_INLINE_START_VALUE"] = 664] = "PADDING_INLINE_START_VALUE";
+    StyleKeys[StyleKeys["INSET_ORDER"] = 668] = "INSET_ORDER";
+    StyleKeys[StyleKeys["INSET_BLOCK_START_TYPE"] = 676] = "INSET_BLOCK_START_TYPE";
+    StyleKeys[StyleKeys["INSET_INLINE_END_TYPE"] = 677] = "INSET_INLINE_END_TYPE";
+    StyleKeys[StyleKeys["INSET_BLOCK_END_TYPE"] = 678] = "INSET_BLOCK_END_TYPE";
+    StyleKeys[StyleKeys["INSET_INLINE_START_TYPE"] = 679] = "INSET_INLINE_START_TYPE";
+    StyleKeys[StyleKeys["INSET_BLOCK_START_VALUE"] = 680] = "INSET_BLOCK_START_VALUE";
+    StyleKeys[StyleKeys["INSET_INLINE_END_VALUE"] = 684] = "INSET_INLINE_END_VALUE";
+    StyleKeys[StyleKeys["INSET_BLOCK_END_VALUE"] = 688] = "INSET_BLOCK_END_VALUE";
+    StyleKeys[StyleKeys["INSET_INLINE_START_VALUE"] = 692] = "INSET_INLINE_START_VALUE";
+    StyleKeys[StyleKeys["SIZE_ORDER"] = 696] = "SIZE_ORDER";
+    StyleKeys[StyleKeys["INLINE_SIZE_TYPE"] = 708] = "INLINE_SIZE_TYPE";
+    StyleKeys[StyleKeys["BLOCK_SIZE_TYPE"] = 709] = "BLOCK_SIZE_TYPE";
+    StyleKeys[StyleKeys["MIN_INLINE_SIZE_TYPE"] = 710] = "MIN_INLINE_SIZE_TYPE";
+    StyleKeys[StyleKeys["MIN_BLOCK_SIZE_TYPE"] = 711] = "MIN_BLOCK_SIZE_TYPE";
+    StyleKeys[StyleKeys["MAX_INLINE_SIZE_TYPE"] = 712] = "MAX_INLINE_SIZE_TYPE";
+    StyleKeys[StyleKeys["MAX_BLOCK_SIZE_TYPE"] = 713] = "MAX_BLOCK_SIZE_TYPE";
+    StyleKeys[StyleKeys["INLINE_SIZE_VALUE"] = 714] = "INLINE_SIZE_VALUE";
+    StyleKeys[StyleKeys["BLOCK_SIZE_VALUE"] = 718] = "BLOCK_SIZE_VALUE";
+    StyleKeys[StyleKeys["MIN_INLINE_SIZE_VALUE"] = 722] = "MIN_INLINE_SIZE_VALUE";
+    StyleKeys[StyleKeys["MIN_BLOCK_SIZE_VALUE"] = 726] = "MIN_BLOCK_SIZE_VALUE";
+    StyleKeys[StyleKeys["MAX_INLINE_SIZE_VALUE"] = 730] = "MAX_INLINE_SIZE_VALUE";
+    StyleKeys[StyleKeys["MAX_BLOCK_SIZE_VALUE"] = 734] = "MAX_BLOCK_SIZE_VALUE";
+    StyleKeys[StyleKeys["TEXT_COMBINE_UPRIGHT"] = 738] = "TEXT_COMBINE_UPRIGHT";
+    StyleKeys[StyleKeys["TEXT_COMBINE_UPRIGHT_STATE"] = 739] = "TEXT_COMBINE_UPRIGHT_STATE";
+    StyleKeys[StyleKeys["TEXT_SPACING_TRIM"] = 740] = "TEXT_SPACING_TRIM";
+    StyleKeys[StyleKeys["TEXT_SPACING_TRIM_STATE"] = 741] = "TEXT_SPACING_TRIM_STATE";
     // </style-keys:offsets>
 })(StyleKeys || (StyleKeys = {}));
 // Windows: the native Style.UpdateGrid takes all grid strings at once. To set one while preserving
@@ -757,10 +809,13 @@ StateKeys.FONT_STRETCH = StateKeys.flag(78);
 StateKeys.TEXT_INDENT = StateKeys.flag(79);
 StateKeys.LINE_CLAMP = StateKeys.flag(80);
 StateKeys.TRANSFORM_ORIGIN = StateKeys.flag(81);
+StateKeys.TEXT_ORIENTATION = StateKeys.flag(82);
+StateKeys.TEXT_COMBINE_UPRIGHT = StateKeys.flag(83);
+StateKeys.TEXT_SPACING_TRIM = StateKeys.flag(84);
 // </style-keys:state>
 StateKeys.DISPLAY_AND_MODE = StateKeys.DISPLAY.or(StateKeys.DISPLAY_MODE);
 StateKeys.FLOW_TYPE = StateKeys.DISPLAY.or(StateKeys.DISPLAY_MODE).or(StateKeys.POSITION).or(StateKeys.FLOAT);
-StateKeys.WINDOWS_TEXT = [StateKeys.INVALIDATE_TEXT, StateKeys.FONT_COLOR, StateKeys.DECORATION_LINE, StateKeys.DECORATION_COLOR, StateKeys.TEXT_ALIGN, StateKeys.TEXT_JUSTIFY, StateKeys.FONT_SIZE, StateKeys.TEXT_TRANSFORM, StateKeys.FONT_STYLE, StateKeys.FONT_STYLE_SLANT, StateKeys.TEXT_WRAP, StateKeys.TEXT_OVERFLOW, StateKeys.DECORATION_STYLE, StateKeys.WHITE_SPACE, StateKeys.FONT_WEIGHT, StateKeys.LINE_HEIGHT, StateKeys.VERTICAL_ALIGN, StateKeys.DECORATION_THICKNESS, StateKeys.TEXT_SHADOWS, StateKeys.FONT_FAMILY, StateKeys.LETTER_SPACING, StateKeys.FONT_VARIANT_NUMERIC, StateKeys.WRITING_MODE, StateKeys.UNICODE_BIDI, StateKeys.HYPHENS, StateKeys.WORD_SPACING, StateKeys.FONT_STRETCH, StateKeys.TEXT_INDENT, StateKeys.LINE_CLAMP].reduce((mask, key) => mask.or(key), StateKeys.NONE);
+StateKeys.WINDOWS_TEXT = [StateKeys.INVALIDATE_TEXT, StateKeys.FONT_COLOR, StateKeys.DECORATION_LINE, StateKeys.DECORATION_COLOR, StateKeys.TEXT_ALIGN, StateKeys.TEXT_JUSTIFY, StateKeys.FONT_SIZE, StateKeys.TEXT_TRANSFORM, StateKeys.FONT_STYLE, StateKeys.FONT_STYLE_SLANT, StateKeys.TEXT_WRAP, StateKeys.TEXT_OVERFLOW, StateKeys.DECORATION_STYLE, StateKeys.WHITE_SPACE, StateKeys.FONT_WEIGHT, StateKeys.LINE_HEIGHT, StateKeys.VERTICAL_ALIGN, StateKeys.DECORATION_THICKNESS, StateKeys.TEXT_SHADOWS, StateKeys.FONT_FAMILY, StateKeys.LETTER_SPACING, StateKeys.FONT_VARIANT_NUMERIC, StateKeys.WRITING_MODE, StateKeys.UNICODE_BIDI, StateKeys.HYPHENS, StateKeys.WORD_SPACING, StateKeys.FONT_STRETCH, StateKeys.TEXT_INDENT, StateKeys.LINE_CLAMP, StateKeys.TEXT_ORIENTATION].reduce((mask, key) => mask.or(key), StateKeys.NONE);
 function wordsToBigInt(w0, w1, w2, w3) {
     return BigInt(w0 >>> 0) | (BigInt(w1 >>> 0) << 32n) | (BigInt(w2 >>> 0) << 64n) | (BigInt(w3 >>> 0) << 96n);
 }
@@ -800,6 +855,10 @@ const getFloat32 = (view, offset) => {
 const setFloat32 = (view, offset, value) => {
     view.setFloat32(offset, value, true);
 };
+// Core's Windows currentApp() is the package folder; the app's files are in its app\ folder.
+export function windowsAppFile(url) {
+    return url.startsWith('~/') ? knownFolders.currentApp().path + '\\app\\' + url.slice(2).replace(/\//g, '\\') : url;
+}
 // Split a comma-separated list at top level only (commas inside parentheses, e.g. rgba(0,0,0,.5),
 // are kept with their token).
 function splitTopLevelCommas(s) {
@@ -866,7 +925,7 @@ function parseGradientCorner(token) {
     return x && y ? [x, y] : undefined;
 }
 const LINEAR_GRADIENT = /linear-gradient/i;
-const ANY_GRADIENT = /gradient/i;
+const ANY_GRADIENT = /-gradient\(/i;
 const LINEAR_GRADIENT_ARGS = /linear-gradient\s*\(([\s\S]*)\)\s*$/i;
 const INTERPOLATION_METHOD = /(?:^|\s)in\s+([a-z][a-z0-9-]*(?:\s+(?:shorter|longer|increasing|decreasing)\s+hue)?)(?=\s|$)/i;
 // Parse `linear-gradient(<dir>? <in colorspace>?, <color> <stop>?, ...)` into a CSS angle, per-stop argb + offsets and the interpolation.
@@ -1319,6 +1378,53 @@ function parseSidesColorShorthand(value) {
             return { t: cols[0], r: cols[1], b: cols[2], l: cols[3] };
     }
 }
+const LOGICAL_GROUPS = {
+    margin: { order: StyleKeys.MARGIN_ORDER, half: 4, types: StyleKeys.MARGIN_BLOCK_START_TYPE, values: StyleKeys.MARGIN_BLOCK_START_VALUE, kind: () => 'auto', state: () => StateKeys.MARGIN },
+    padding: { order: StyleKeys.PADDING_ORDER, half: 4, types: StyleKeys.PADDING_BLOCK_START_TYPE, values: StyleKeys.PADDING_BLOCK_START_VALUE, kind: () => 'length', state: () => StateKeys.PADDING },
+    inset: { order: StyleKeys.INSET_ORDER, half: 4, types: StyleKeys.INSET_BLOCK_START_TYPE, values: StyleKeys.INSET_BLOCK_START_VALUE, kind: () => 'auto', state: () => StateKeys.INSET },
+    size: {
+        order: StyleKeys.SIZE_ORDER,
+        half: 6,
+        types: StyleKeys.INLINE_SIZE_TYPE,
+        values: StyleKeys.INLINE_SIZE_VALUE,
+        kind: (slot) => (slot < 2 ? 'dimension' : 'auto'),
+        state: (slot) => (slot < 2 ? StateKeys.SIZE : slot < 4 ? StateKeys.MIN_SIZE : StateKeys.MAX_SIZE),
+    },
+};
+const LOGICAL_STAMPS = [
+    [StyleKeys.MARGIN_ORDER, 8],
+    [StyleKeys.PADDING_ORDER, 8],
+    [StyleKeys.INSET_ORDER, 8],
+    [StyleKeys.SIZE_ORDER, 12],
+];
+const stampUsed = new Uint8Array(256);
+const stampRank = new Uint8Array(256);
+/** A length in the buffer's encoding for `kind` (auto: margins, insets, min/max; length: padding; dimension: sizes). */
+function logicalTypeValue(value, kind, emBasis) {
+    switch (typeof value) {
+        case 'string':
+            return kind === 'length' ? lengthPercentageFromString(value, emBasis) : kind === 'dimension' ? dimensionFromString(value, emBasis) : lengthPercentageAutoFromString(value, emBasis);
+        case 'number':
+            return { type: kind === 'length' ? 0 : 1, value: layout.toDevicePixels(value) };
+        case 'object': {
+            const length = value;
+            if (!length)
+                return undefined;
+            switch (length.unit) {
+                case 'dip':
+                case 'px':
+                    return { type: kind === 'length' ? 0 : 1, value: layout.toDevicePixels(length.value) };
+                case '%':
+                    return { type: kind === 'length' ? 1 : 2, value: length.value };
+            }
+            const keyword = kind === 'dimension' ? sizingKeywordOf(length) : undefined;
+            return keyword ? dimensionFromString(keyword) : undefined;
+        }
+    }
+    return undefined;
+}
+// text-spacing-trim keywords, in their buffer order.
+const TEXT_SPACING_TRIM_VALUES = ['normal', 'space-all', 'space-first', 'trim-start', 'trim-both', 'trim-all', 'auto'];
 const i8Buffer = new Int8Array(4);
 const f32Buffer = new Uint8Array(Float32Array.BYTES_PER_ELEMENT * 4);
 const f32View = new Float32Array(f32Buffer.buffer);
@@ -1574,6 +1680,17 @@ export function refreshViewportUnits() {
             style[keys[i]] = writes.get(keys[i]);
     }
 }
+// Inherited text properties a stylesheet can drop back to inheriting: their *_STATE byte.
+const INHERITED_TEXT_STATE = {
+    writingMode: [StyleKeys.WRITING_MODE_STATE, StateKeys.WRITING_MODE],
+    textOrientation: [StyleKeys.TEXT_ORIENTATION_STATE, StateKeys.TEXT_ORIENTATION],
+    textCombineUpright: [StyleKeys.TEXT_COMBINE_UPRIGHT_STATE, StateKeys.TEXT_COMBINE_UPRIGHT],
+    textSpacingTrim: [StyleKeys.TEXT_SPACING_TRIM_STATE, StateKeys.TEXT_SPACING_TRIM],
+    hyphens: [StyleKeys.HYPHENS_STATE, StateKeys.HYPHENS],
+    whiteSpace: [StyleKeys.WHITE_SPACE_STATE, StateKeys.WHITE_SPACE],
+    wordSpacing: [StyleKeys.WORD_SPACING_STATE, StateKeys.WORD_SPACING],
+    fontStretch: [StyleKeys.FONT_STRETCH_STATE, StateKeys.FONT_STRETCH],
+};
 export class Style {
     constructor() {
         this._bufferRequested = false;
@@ -1862,9 +1979,7 @@ export class Style {
                 // Painted natively over background-color (CssMask.h), which an ImageBrush would replace.
                 if (setLayers(encodeWindowsBackground(url[2], size, position, repeat, this.windowsMaskContext(), boxes)))
                     return;
-                let source = url[2];
-                if (source.startsWith('~/'))
-                    source = source.replace('~/', knownFolders.currentApp().path + '/');
+                const source = windowsAppFile(url[2]);
                 const box = parseBoxPosition(position || '0% 0%', 0);
                 const align = (f) => (f <= 0.25 ? 0 : f >= 0.75 ? 2 : 1);
                 NativeScript.Mason.Css.ApplyBackgroundImage(this.nativeView, source, backgroundFit(size), align(box.x), align(box.y));
@@ -1932,7 +2047,7 @@ export class Style {
             color: (color) => normalizeColorValue(color),
             linear: parseLinearGradientCss,
             radial: parseRadialGradientCss,
-            source: (url) => (url.startsWith('~/') ? url.replace('~/', knownFolders.currentApp().path + '/') : url),
+            source: windowsAppFile,
         };
     }
     // The mask longhands arrive one setter at a time (a shorthand sets eight, a keyframe two), so
@@ -2976,6 +3091,7 @@ export class Style {
             default:
                 return;
         }
+        this.stampPhysical('size', 0b100);
         this.commitState(StateKeys.MIN_SIZE);
     }
     get minHeight() {
@@ -3021,6 +3137,7 @@ export class Style {
             default:
                 return;
         }
+        this.stampPhysical('size', 0b1000);
         this.commitState(StateKeys.MIN_SIZE);
     }
     get width() {
@@ -3076,6 +3193,7 @@ export class Style {
             default:
                 return;
         }
+        this.stampPhysical('size', 0b1);
         this.commitState(StateKeys.SIZE);
     }
     get height() {
@@ -3131,6 +3249,7 @@ export class Style {
             default:
                 return;
         }
+        this.stampPhysical('size', 0b10);
         this.commitState(StateKeys.SIZE);
     }
     get maxWidth() {
@@ -3176,6 +3295,7 @@ export class Style {
             default:
                 return;
         }
+        this.stampPhysical('size', 0b10000);
         this.commitState(StateKeys.MAX_SIZE);
     }
     get maxHeight() {
@@ -3221,6 +3341,7 @@ export class Style {
             default:
                 return;
         }
+        this.stampPhysical('size', 0b100000);
         this.commitState(StateKeys.MAX_SIZE);
     }
     get borderLeftWidth() {
@@ -3398,6 +3519,7 @@ export class Style {
                 this.bottom = sides[2];
                 this.left = sides[3];
                 this.inBatch = wasInBatch;
+                this.stampPhysical('inset', 0b1111);
                 this.commitState(StateKeys.INSET);
                 return;
             }
@@ -3438,6 +3560,7 @@ export class Style {
             this.u8View.set(i8Buffer, StyleKeys.INSET_LEFT_TYPE);
             f32View.fill(insetValue);
             this.u8View.set(f32Buffer, StyleKeys.INSET_LEFT_VALUE);
+            this.stampPhysical('inset', 0b1111);
             this.commitState(StateKeys.INSET);
         }
     }
@@ -3480,6 +3603,7 @@ export class Style {
                 }
                 break;
         }
+        this.stampPhysical('inset', 0b1000);
         this.commitState(StateKeys.INSET);
     }
     get right() {
@@ -3521,6 +3645,7 @@ export class Style {
                 }
                 break;
         }
+        this.stampPhysical('inset', 0b10);
         this.commitState(StateKeys.INSET);
     }
     get top() {
@@ -3562,6 +3687,7 @@ export class Style {
                 }
                 break;
         }
+        this.stampPhysical('inset', 0b1);
         this.commitState(StateKeys.INSET);
     }
     get bottom() {
@@ -3603,6 +3729,7 @@ export class Style {
                 }
                 break;
         }
+        this.stampPhysical('inset', 0b100);
         this.commitState(StateKeys.INSET);
     }
     set margin(value) {
@@ -3616,6 +3743,7 @@ export class Style {
                 this.marginBottom = sides[2];
                 this.marginLeft = sides[3];
                 this.inBatch = wasInBatch;
+                this.stampPhysical('margin', 0b1111);
                 this.commitState(StateKeys.MARGIN);
                 return;
             }
@@ -3656,6 +3784,7 @@ export class Style {
             this.u8View.set(i8Buffer, StyleKeys.MARGIN_LEFT_TYPE);
             f32View.fill(marginValue);
             this.u8View.set(f32Buffer, StyleKeys.MARGIN_LEFT_VALUE);
+            this.stampPhysical('margin', 0b1111);
             this.commitState(StateKeys.MARGIN);
         }
     }
@@ -3698,6 +3827,7 @@ export class Style {
                 }
                 break;
         }
+        this.stampPhysical('margin', 0b1000);
         this.commitState(StateKeys.MARGIN);
     }
     get marginRight() {
@@ -3739,6 +3869,7 @@ export class Style {
                 }
                 break;
         }
+        this.stampPhysical('margin', 0b10);
         this.commitState(StateKeys.MARGIN);
     }
     get marginTop() {
@@ -3780,6 +3911,7 @@ export class Style {
                 }
                 break;
         }
+        this.stampPhysical('margin', 0b1);
         this.commitState(StateKeys.MARGIN);
     }
     get marginBottom() {
@@ -3821,6 +3953,7 @@ export class Style {
                 }
                 break;
         }
+        this.stampPhysical('margin', 0b100);
         this.commitState(StateKeys.MARGIN);
     }
     set padding(value) {
@@ -3834,6 +3967,7 @@ export class Style {
                 this.paddingBottom = sides[2];
                 this.paddingLeft = sides[3];
                 this.inBatch = wasInBatch;
+                this.stampPhysical('padding', 0b1111);
                 this.commitState(StateKeys.PADDING);
                 return;
             }
@@ -3842,6 +3976,7 @@ export class Style {
         this.inBatch = true;
         this.paddingBottom = this.paddingLeft = this.paddingRight = this.paddingTop = value;
         this.inBatch = wasInBatch;
+        this.stampPhysical('padding', 0b1111);
         this.commitState(StateKeys.PADDING);
     }
     get paddingLeft() {
@@ -3883,6 +4018,7 @@ export class Style {
                 }
                 break;
         }
+        this.stampPhysical('padding', 0b1000);
         this.commitState(StateKeys.PADDING);
     }
     get paddingRight() {
@@ -3924,6 +4060,7 @@ export class Style {
                 }
                 break;
         }
+        this.stampPhysical('padding', 0b10);
         this.commitState(StateKeys.PADDING);
     }
     get paddingTop() {
@@ -3965,6 +4102,7 @@ export class Style {
                 }
                 break;
         }
+        this.stampPhysical('padding', 0b1);
         this.commitState(StateKeys.PADDING);
     }
     get paddingBottom() {
@@ -4006,8 +4144,73 @@ export class Style {
                 }
                 break;
         }
+        this.stampPhysical('padding', 0b100);
         this.commitState(StateKeys.PADDING);
     }
+    // CSS logical properties: see StyleKeys.LOGICAL_SEQ.
+    /** The next write stamp; at the counter's end every stamp is renumbered by rank, keeping their order. */
+    nextLogicalStamp() {
+        const view = this.style_view;
+        let seq = getUint8(view, StyleKeys.LOGICAL_SEQ);
+        if (seq === 255) {
+            stampUsed.fill(0);
+            for (const [order, length] of LOGICAL_STAMPS) {
+                for (let i = 0; i < length; i++)
+                    stampUsed[getUint8(view, order + i)] = 1;
+            }
+            let next = 0;
+            for (let stamp = 1; stamp < 256; stamp++)
+                stampRank[stamp] = stampUsed[stamp] ? ++next : 0;
+            for (const [order, length] of LOGICAL_STAMPS) {
+                for (let i = 0; i < length; i++)
+                    setUint8(view, order + i, stampRank[getUint8(view, order + i)]);
+            }
+            seq = next;
+        }
+        setUint8(view, StyleKeys.LOGICAL_SEQ, seq + 1);
+        return seq + 1;
+    }
+    /** Stamps the physical slots in `mask` as written now, so they win over older logical values. Free while the group has none. */
+    stampPhysical(group, mask) {
+        const { order, half } = LOGICAL_GROUPS[group];
+        const view = this.style_view;
+        let logical = false;
+        for (let i = 0; i < half; i++) {
+            if (getUint8(view, order + half + i) !== 0) {
+                logical = true;
+                break;
+            }
+        }
+        if (!logical)
+            return;
+        const stamp = this.nextLogicalStamp();
+        for (let i = 0; i < half; i++) {
+            if (mask & (1 << i))
+                setUint8(view, order + i, stamp);
+        }
+    }
+    /**
+     * Sets a logical side (margin, padding, inset: 0 block-start, 1 inline-end, 2 block-end,
+     * 3 inline-start; size: see LOGICAL_GROUPS). null or undefined removes it, so the physical
+     * value applies again.
+     */
+    setLogical(group, slot, value) {
+        const entry = LOGICAL_GROUPS[group];
+        const parsed = value == null || value === '' ? undefined : logicalTypeValue(value, entry.kind(slot), this.emBasisFor(value));
+        if (value != null && value !== '' && !parsed)
+            return;
+        this.prepareMut();
+        const view = this.style_view;
+        if (parsed) {
+            setUint8(view, entry.order + entry.half + slot, this.nextLogicalStamp());
+            setInt8(view, entry.types + slot, parsed.type);
+            setFloat32(view, entry.values + slot * 4, parsed.value);
+        }
+        else {
+            setUint8(view, entry.order + entry.half + slot, 0);
+        }
+        this.commitState(entry.state(slot));
+    }
     get gridGap() {
         return this.gap;
     }
@@ -6908,6 +7111,12 @@ export class Style {
     get 'mask-border-mode'() {
         return this.maskBorderMode;
     }
+    /** This box's own writing-mode (0 horizontal-tb, 1 vertical-rl, 2 vertical-lr), or -1 when it inherits. */
+    get ownWritingMode() {
+        if (!this.style_view || !getUint8(this.style_view, StyleKeys.WRITING_MODE_STATE))
+            return -1;
+        return getUint8(this.style_view, StyleKeys.WRITING_MODE);
+    }
     get writingMode() {
         if (!this.style_view)
             return 'horizontal-tb';
@@ -6951,6 +7160,110 @@ export class Style {
     get 'writing-mode'() {
         return this.writingMode;
     }
+    get textOrientation() {
+        if (!this.style_view)
+            return 'mixed';
+        const state = getUint8(this.style_view, StyleKeys.TEXT_ORIENTATION_STATE);
+        if (!state)
+            return 'mixed';
+        switch (getUint8(this.style_view, StyleKeys.TEXT_ORIENTATION)) {
+            case 1:
+                return 'upright';
+            case 2:
+                return 'sideways';
+            default:
+                return 'mixed';
+        }
+    }
+    set textOrientation(value) {
+        let v = -1;
+        switch (value) {
+            case 'mixed':
+                v = 0;
+                break;
+            case 'upright':
+                v = 1;
+                break;
+            case 'sideways':
+            case 'sideways-right':
+                v = 2;
+                break;
+        }
+        if (v === -1)
+            return;
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.TEXT_ORIENTATION, v);
+        setUint8(this.style_view, StyleKeys.TEXT_ORIENTATION_STATE, 1);
+        this.commitState(StateKeys.TEXT_ORIENTATION);
+    }
+    set 'text-orientation'(value) {
+        this.textOrientation = value;
+    }
+    get 'text-orientation'() {
+        return this.textOrientation;
+    }
+    /** text-combine-upright: `none`, `all`, or `digits` with an optional count of 2 to 4 (2 when omitted). */
+    get textCombineUpright() {
+        if (!this.style_view || !getUint8(this.style_view, StyleKeys.TEXT_COMBINE_UPRIGHT_STATE))
+            return 'none';
+        const value = getUint8(this.style_view, StyleKeys.TEXT_COMBINE_UPRIGHT);
+        return value === 0 ? 'none' : value === 1 ? 'all' : `digits ${value}`;
+    }
+    set textCombineUpright(value) {
+        const parts = String(value).trim().toLowerCase().split(/\s+/);
+        let v = -1;
+        if (parts.length === 1 && parts[0] === 'none')
+            v = 0;
+        else if (parts.length === 1 && parts[0] === 'all')
+            v = 1;
+        else if (parts[0] === 'digits' && parts.length <= 2) {
+            const count = parts.length === 2 ? Number(parts[1]) : 2;
+            if (Number.isInteger(count) && count >= 2 && count <= 4)
+                v = count;
+        }
+        if (v === -1)
+            return;
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.TEXT_COMBINE_UPRIGHT, v);
+        setUint8(this.style_view, StyleKeys.TEXT_COMBINE_UPRIGHT_STATE, 1);
+        this.commitState(StateKeys.TEXT_COMBINE_UPRIGHT);
+    }
+    set 'text-combine-upright'(value) {
+        this.textCombineUpright = value;
+    }
+    get 'text-combine-upright'() {
+        return this.textCombineUpright;
+    }
+    /** text-spacing-trim: `normal`, `space-all`, `space-first`, `trim-start`, `trim-both`, `trim-all` or `auto`. */
+    get textSpacingTrim() {
+        if (!this.style_view || !getUint8(this.style_view, StyleKeys.TEXT_SPACING_TRIM_STATE))
+            return 'normal';
+        return TEXT_SPACING_TRIM_VALUES[getUint8(this.style_view, StyleKeys.TEXT_SPACING_TRIM)] ?? 'normal';
+    }
+    set textSpacingTrim(value) {
+        const v = TEXT_SPACING_TRIM_VALUES.indexOf(String(value).trim().toLowerCase());
+        if (v === -1)
+            return;
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.TEXT_SPACING_TRIM, v);
+        setUint8(this.style_view, StyleKeys.TEXT_SPACING_TRIM_STATE, 1);
+        this.commitState(StateKeys.TEXT_SPACING_TRIM);
+    }
+    set 'text-spacing-trim'(value) {
+        this.textSpacingTrim = value;
+    }
+    get 'text-spacing-trim'() {
+        return this.textSpacingTrim;
+    }
+    /** Lets an inherited text property inherit again, as when its declaration is removed. */
+    unsetInheritedText(name) {
+        const [state, key] = INHERITED_TEXT_STATE[name];
+        if (!this.style_view || !getUint8(this.style_view, state))
+            return;
+        this.prepareMut();
+        setUint8(this.style_view, state, 0);
+        this.commitState(key);
+    }
     get unicodeBidi() {
         if (!this.style_view)
             return 'normal';
@@ -7103,6 +7416,9 @@ export class Style {
             objectPosition: this.objectPosition,
             borderStyle: this.borderStyle,
             writingMode: this.writingMode,
+            textOrientation: this.textOrientation,
+            textCombineUpright: this.textCombineUpright,
+            textSpacingTrim: this.textSpacingTrim,
             unicodeBidi: this.unicodeBidi,
             hyphens: this.hyphens,
             caretColor: this.caretColor,