pagyra-js 0.0.19 → 0.0.21

package/dist/src/css/parsers/filter-parser.d.ts

@@ -0,0 +1,14 @@
+import type { FilterFunction } from "../properties/visual.js";
+import type { StyleAccumulator } from "../style.js";
+export declare function parseFilter(value: string, target: StyleAccumulator): void;
+export declare function parseBackdropFilter(value: string, target: StyleAccumulator): void;
+/**
+ * Parseia a string completa do valor de filter/backdrop-filter.
+ * Retorna `undefined` para keywords de herança (inherit/revert),
+ * `[]` para `none`/`initial`, ou a lista de funções parseadas.
+ *
+ * A separação de funções NÃO usa splitCssCommaList — no CSS filter,
+ * as funções são separadas por espaço, e os parênteses delimitam
+ * cada função. Usamos regex para extrair cada `name(...)`.
+ */
+export declare function parseFilterList(value: string): FilterFunction[] | undefined;

package/dist/src/css/parsers/filter-parser.js

@@ -0,0 +1,255 @@
+// src/css/parsers/filter-parser.ts
+import { splitCssList } from "../utils.js";
+import { parseLength } from "./length-parser.js";
+// ── Funções expostas ao registro ────────────────────────────────────
+export function parseFilter(value, target) {
+    const result = parseFilterList(value);
+    if (result !== undefined) {
+        target.filter = result;
+    }
+}
+export function parseBackdropFilter(value, target) {
+    const result = parseFilterList(value);
+    if (result !== undefined) {
+        target.backdropFilter = result;
+    }
+}
+// ── Lógica de parsing ───────────────────────────────────────────────
+/**
+ * Parseia a string completa do valor de filter/backdrop-filter.
+ * Retorna `undefined` para keywords de herança (inherit/revert),
+ * `[]` para `none`/`initial`, ou a lista de funções parseadas.
+ *
+ * A separação de funções NÃO usa splitCssCommaList — no CSS filter,
+ * as funções são separadas por espaço, e os parênteses delimitam
+ * cada função. Usamos regex para extrair cada `name(...)`.
+ */
+export function parseFilterList(value) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return undefined;
+    const keyword = trimmed.toLowerCase();
+    if (keyword === "none" || keyword === "initial")
+        return [];
+    if (keyword === "inherit" || keyword === "revert" || keyword === "revert-layer")
+        return undefined;
+    // Regex para extrair funções: captura "name(" e conteúdo até ")"
+    // Respeita parênteses aninhados (ex: drop-shadow com rgb(...))
+    const functions = extractFilterFunctions(trimmed);
+    if (functions.length === 0)
+        return undefined;
+    const result = [];
+    for (const { name, args } of functions) {
+        const parsed = parseSingleFilterFunction(name, args);
+        if (parsed) {
+            result.push(parsed);
+        }
+        // Funções desconhecidas são silenciosamente ignoradas (spec-compliant)
+    }
+    return result.length > 0 ? result : undefined;
+}
+/**
+ * Extrai funções CSS da string. Trata parênteses aninhados
+ * (necessário para `drop-shadow(2px 2px rgba(0,0,0,0.5))`).
+ */
+function extractFilterFunctions(input) {
+    const results = [];
+    let i = 0;
+    const len = input.length;
+    while (i < len) {
+        // Pula espaços
+        while (i < len && /\s/.test(input[i]))
+            i++;
+        if (i >= len)
+            break;
+        // Lê nome da função
+        const nameStart = i;
+        while (i < len && input[i] !== "(" && !/\s/.test(input[i]))
+            i++;
+        if (i >= len || input[i] !== "(")
+            break;
+        const name = input.slice(nameStart, i).toLowerCase();
+        i++; // pula "("
+        // Lê argumentos respeitando parênteses aninhados
+        let depth = 1;
+        const argsStart = i;
+        while (i < len && depth > 0) {
+            if (input[i] === "(")
+                depth++;
+            else if (input[i] === ")")
+                depth--;
+            if (depth > 0)
+                i++;
+        }
+        const args = input.slice(argsStart, i).trim();
+        if (depth === 0)
+            i++; // pula ")" final
+        results.push({ name, args });
+    }
+    return results;
+}
+// ── Parsing de cada função individual ───────────────────────────────
+const NUMERIC_FILTER_NAMES = new Set([
+    "brightness", "contrast", "grayscale", "sepia", "saturate", "invert", "opacity",
+]);
+// Funções com clamp em [0, 1]
+const CLAMPED_FILTER_NAMES = new Set([
+    "grayscale", "sepia", "invert", "opacity",
+]);
+function parseSingleFilterFunction(name, args) {
+    if (NUMERIC_FILTER_NAMES.has(name)) {
+        return parseNumericFilter(name, args);
+    }
+    switch (name) {
+        case "blur":
+            return parseBlurFilter(args);
+        case "hue-rotate":
+            return parseHueRotateFilter(args);
+        case "drop-shadow":
+            return parseDropShadowFilter(args);
+        default:
+            return null; // função desconhecida
+    }
+}
+/**
+ * Parseia funções numéricas: `brightness(1.5)`, `opacity(50%)`, etc.
+ * - Sem argumento → usa default da spec (1.0 para a maioria).
+ * - `%` → dividido por 100.
+ * - Clamp para funções com domínio [0,1].
+ * - Clamp ≥ 0 para brightness/contrast/saturate.
+ */
+function parseNumericFilter(kind, args) {
+    const trimmed = args.trim();
+    let value;
+    if (trimmed === "") {
+        // Spec: sem argumento usa o default (equivale a amount máximo para efeito completo)
+        // brightness/contrast/saturate default = 1; grayscale/sepia/invert/opacity default = 1
+        value = 1;
+    }
+    else if (trimmed.endsWith("%")) {
+        const percentStr = trimmed.slice(0, -1);
+        const percent = parseFloat(percentStr);
+        if (isNaN(percent))
+            return null;
+        value = percent / 100;
+    }
+    else {
+        value = parseFloat(trimmed);
+        if (isNaN(value))
+            return null;
+    }
+    // Clamp conforme domínio
+    if (CLAMPED_FILTER_NAMES.has(kind)) {
+        value = Math.max(0, Math.min(1, value));
+    }
+    else {
+        // brightness, contrast, saturate: ≥ 0, sem limite superior
+        value = Math.max(0, value);
+    }
+    return { kind, value };
+}
+/**
+ * Parseia `blur(<length>)`.
+ * - Sem argumento → `blur(0px)`.
+ * - Valor negativo → inválido (descartado).
+ */
+function parseBlurFilter(args) {
+    const trimmed = args.trim();
+    if (trimmed === "") {
+        return { kind: "blur", value: 0 };
+    }
+    const length = parseLength(trimmed);
+    if (length === undefined)
+        return null;
+    // Blur não aceita valor negativo
+    if (typeof length === "number" && length < 0)
+        return null;
+    return { kind: "blur", value: length };
+}
+/**
+ * Parseia `hue-rotate(<angle>)`.
+ * - Sem argumento → `0deg`.
+ * - Suporta `deg`, `rad`, `grad`, `turn`.
+ * - Valores negativos são permitidos (rotação anti-horária).
+ */
+function parseHueRotateFilter(args) {
+    const trimmed = args.trim();
+    if (trimmed === "") {
+        return { kind: "hue-rotate", valueDeg: 0 };
+    }
+    const deg = parseAngleToDeg(trimmed);
+    if (deg === null)
+        return null;
+    return { kind: "hue-rotate", valueDeg: deg };
+}
+function parseAngleToDeg(input) {
+    const lower = input.toLowerCase();
+    if (lower.endsWith("deg")) {
+        const v = parseFloat(lower.slice(0, -3));
+        return isNaN(v) ? null : v;
+    }
+    if (lower.endsWith("rad")) {
+        const v = parseFloat(lower.slice(0, -3));
+        return isNaN(v) ? null : v * (180 / Math.PI);
+    }
+    if (lower.endsWith("grad")) {
+        const v = parseFloat(lower.slice(0, -4));
+        return isNaN(v) ? null : v * 0.9;
+    }
+    if (lower.endsWith("turn")) {
+        const v = parseFloat(lower.slice(0, -4));
+        return isNaN(v) ? null : v * 360;
+    }
+    // Número sem unidade: a spec trata "0" como 0deg, outros são inválidos
+    const v = parseFloat(lower);
+    if (isNaN(v))
+        return null;
+    if (v === 0)
+        return 0;
+    return null; // spec exige unidade para valores != 0
+}
+/**
+ * Parseia `drop-shadow(<offset-x> <offset-y> [<blur-radius>]? [<color>]?)`.
+ * Mesma lógica do `parseSingleBoxShadow`, mas SEM `inset` e SEM `spread-radius`.
+ * Reutiliza `splitCssList` e `parseLength` do projeto.
+ */
+function parseDropShadowFilter(args) {
+    const tokens = splitCssList(args);
+    if (tokens.length < 2)
+        return null;
+    const lengths = [];
+    let color;
+    for (const token of tokens) {
+        const length = parseLength(token);
+        if (length !== undefined) {
+            lengths.push(length);
+            continue;
+        }
+        if (color === undefined && isColorLike(token)) {
+            color = token;
+            continue;
+        }
+        // Token desconhecido ignorado
+    }
+    if (lengths.length < 2)
+        return null;
+    return {
+        kind: "drop-shadow",
+        offsetX: lengths[0],
+        offsetY: lengths[1],
+        blurRadius: lengths[2] ?? 0,
+        color,
+    };
+}
+function isColorLike(value) {
+    const lower = value.toLowerCase();
+    if (lower.startsWith("#") || lower.startsWith("rgb(") || lower.startsWith("rgba(") ||
+        lower.startsWith("hsl(") || lower.startsWith("hsla(")) {
+        return true;
+    }
+    const colorNames = [
+        "transparent", "black", "white", "red", "green", "blue",
+        "yellow", "gray", "grey", "currentcolor",
+    ];
+    return colorNames.includes(lower);
+}

package/dist/src/css/parsers/grid-parser-extended.d.ts

@@ -4,4 +4,5 @@ export declare function parseGridTemplateRows(value: string, target: StyleAccumu
 export declare function parseGridAutoFlow(value: string, target: StyleAccumulator): void;
 export declare function parseGap(value: string, target: StyleAccumulator): void;
 export declare function parseRowGap(value: string, target: StyleAccumulator): void;
+export declare function parseGridColumn(value: string, target: StyleAccumulator): void;
 export declare function parseColumnGap(value: string, target: StyleAccumulator): void;

package/dist/src/css/parsers/grid-parser-extended.js

@@ -1,6 +1,6 @@
 // src/css/parsers/grid-parser-extended.ts
 import { parseGap as parseGapValue, parseGridTemplate } from "./grid-parser.js";
-import { parseLength } from "./length-parser.js";
+import { parseClampArgs, parseLength } from "./length-parser.js";
 export function parseGridTemplateColumns(value, target) {
     const parsed = parseGridTemplate(value);
     if (parsed) {
@@ -37,11 +37,50 @@ export function parseRowGap(value, target) {
     const parsed = parseLength(value);
     if (parsed !== undefined) {
         target.rowGap = parsed;
+        return;
+    }
+    const clampArgs = parseClampArgs(value);
+    if (clampArgs) {
+        const min = parseLength(clampArgs[0]);
+        const preferred = parseLength(clampArgs[1]);
+        const max = parseLength(clampArgs[2]);
+        if (min !== undefined && preferred !== undefined && max !== undefined) {
+            const clampValue = { kind: "clamp", min, preferred, max };
+            target.rowGap = clampValue;
+        }
+    }
+}
+export function parseGridColumn(value, target) {
+    const trimmed = value.trim().toLowerCase();
+    // Handle "span N" pattern
+    const spanMatch = trimmed.match(/^span\s+(\d+)$/);
+    if (spanMatch) {
+        const span = Number.parseInt(spanMatch[1], 10);
+        if (Number.isFinite(span) && span > 0) {
+            target.gridColumnSpan = span;
+            return;
+        }
+    }
+    // Handle plain integer (line number, treat as span 1)
+    const num = Number.parseInt(trimmed, 10);
+    if (Number.isFinite(num) && num > 0) {
+        target.gridColumnSpan = 1;
     }
 }
 export function parseColumnGap(value, target) {
     const parsed = parseLength(value);
     if (parsed !== undefined) {
         target.columnGap = parsed;
+        return;
+    }
+    const clampArgs = parseClampArgs(value);
+    if (clampArgs) {
+        const min = parseLength(clampArgs[0]);
+        const preferred = parseLength(clampArgs[1]);
+        const max = parseLength(clampArgs[2]);
+        if (min !== undefined && preferred !== undefined && max !== undefined) {
+            const clampValue = { kind: "clamp", min, preferred, max };
+            target.columnGap = clampValue;
+        }
     }
 }

package/dist/src/css/parsers/grid-parser.d.ts

@@ -1,6 +1,9 @@
 import type { TrackDefinitionInput, NumericLength } from "../style.js";
+import type { ClampNumericLength } from "../length.js";
+type GapLengthInput = NumericLength | ClampNumericLength;
 export declare function parseGridTemplate(value: string): TrackDefinitionInput[] | undefined;
 export declare function parseGap(value: string): {
-    row: NumericLength;
-    column: NumericLength;
+    row: GapLengthInput;
+    column: GapLengthInput;
 } | undefined;
+export {};

package/dist/src/css/parsers/grid-parser.js

@@ -1,4 +1,4 @@
-import { parseLength } from "./length-parser.js";
+import { parseClampArgs, parseLength } from "./length-parser.js";
 function tokenizeTrackList(value) {
     const tokens = [];
     let buffer = "";
@@ -29,6 +29,36 @@ function tokenizeTrackList(value) {
     }
     return tokens;
 }
+function tokenizeSpaceSeparated(value) {
+    const tokens = [];
+    let buffer = "";
+    let depth = 0;
+    for (let i = 0; i < value.length; i++) {
+        const char = value[i];
+        if (char === "(") {
+            depth += 1;
+            buffer += char;
+            continue;
+        }
+        if (char === ")") {
+            depth = Math.max(0, depth - 1);
+            buffer += char;
+            continue;
+        }
+        if (/\s/.test(char) && depth === 0) {
+            if (buffer) {
+                tokens.push(buffer.trim());
+                buffer = "";
+            }
+            continue;
+        }
+        buffer += char;
+    }
+    if (buffer) {
+        tokens.push(buffer.trim());
+    }
+    return tokens;
+}
 function splitArgs(value) {
     const args = [];
     let buffer = "";
@@ -107,6 +137,21 @@ function parseTrackSize(token) {
     if (normalized === "auto") {
         return { kind: "auto" };
     }
+    const clampArgs = parseClampArgs(token);
+    if (clampArgs) {
+        const min = parseLength(clampArgs[0]);
+        const preferred = parseLength(clampArgs[1]);
+        const max = parseLength(clampArgs[2]);
+        if (min !== undefined && preferred !== undefined && max !== undefined) {
+            const track = {
+                kind: "clamp",
+                min,
+                preferred,
+                max,
+            };
+            return track;
+        }
+    }
     const length = parseLength(normalized);
     if (length !== undefined) {
         return { kind: "fixed", size: length };
@@ -164,22 +209,41 @@ export function parseGridTemplate(value) {
     }
     return tracks;
 }
+function parseGapLengthValue(value) {
+    const parsed = parseLength(value);
+    if (parsed !== undefined) {
+        return parsed;
+    }
+    const clampArgs = parseClampArgs(value);
+    if (!clampArgs) {
+        return undefined;
+    }
+    const min = parseLength(clampArgs[0]);
+    const preferred = parseLength(clampArgs[1]);
+    const max = parseLength(clampArgs[2]);
+    if (min === undefined || preferred === undefined || max === undefined) {
+        return undefined;
+    }
+    return {
+        kind: "clamp",
+        min,
+        preferred,
+        max,
+    };
+}
 export function parseGap(value) {
     if (!value) {
         return undefined;
     }
-    const tokens = value
-        .split(/\s+/)
-        .map((token) => token.trim())
-        .filter((token) => token.length > 0);
+    const tokens = tokenizeSpaceSeparated(value.trim());
     if (tokens.length === 0) {
         return undefined;
     }
-    const first = parseLength(tokens[0]);
+    const first = parseGapLengthValue(tokens[0]);
     if (first === undefined) {
         return undefined;
     }
-    const second = tokens.length > 1 ? parseLength(tokens[1]) : undefined;
+    const second = tokens.length > 1 ? parseGapLengthValue(tokens[1]) : undefined;
     return {
         row: first,
         column: second ?? first,

package/dist/src/css/parsers/length-parser.d.ts

@@ -1,5 +1,10 @@
-import { percent, type RelativeLength } from "../length.js";
+import { percent, type CalcLength, type LengthInput, type RelativeLength } from "../length.js";
 export declare function parseLength(value: string): number | RelativeLength | undefined;
 export declare function parseNumeric(value: string): number | RelativeLength | undefined;
-export declare function parseLengthOrPercent(value: string): number | RelativeLength | ReturnType<typeof percent> | undefined;
-export declare function parseLengthOrAuto(value: string): number | RelativeLength | "auto" | undefined;
+export declare function parseLengthOrPercent(value: string): number | RelativeLength | ReturnType<typeof percent> | CalcLength | undefined;
+/**
+ * Extract the three arguments from a CSS clamp() function.
+ * Returns [min, preferred, max] strings or undefined if not a clamp value.
+ */
+export declare function parseClampArgs(value: string): [string, string, string] | undefined;
+export declare function parseLengthOrAuto(value: string): LengthInput | undefined;

package/dist/src/css/parsers/length-parser.js

@@ -2,7 +2,9 @@
 import { cmToPx, inToPx, mmToPx, pcToPx, ptToPx, qToPx } from "../../units/units.js";
 import { getViewportHeight, getViewportWidth } from "../viewport.js";
 import { percent, relativeLength } from "../length.js";
+import { parseCalcLength } from "./calc-parser.js";
 const PERCENT_LENGTH_REGEX = /^(-?\d+(?:\.\d+)?)%$/;
+const CONTAINER_QUERY_LENGTH_REGEX = /^(-?\d+(?:\.\d+)?)(cqw|cqh|cqi|cqb|cqmin|cqmax)$/i;
 export function parseLength(value) {
     if (!value) {
         return undefined;
@@ -69,7 +71,32 @@ export function parseLengthOrPercent(value) {
     }
     const match = PERCENT_LENGTH_REGEX.exec(value.trim());
     if (!match) {
-        return undefined;
+        const cqMatch = CONTAINER_QUERY_LENGTH_REGEX.exec(value.trim());
+        if (cqMatch) {
+            const numeric = Number.parseFloat(cqMatch[1]);
+            if (Number.isNaN(numeric)) {
+                return undefined;
+            }
+            const ratio = numeric / 100;
+            const unit = cqMatch[2].toLowerCase();
+            switch (unit) {
+                case "cqw":
+                    return { kind: "calc", px: 0, percent: 0, cqw: ratio };
+                case "cqh":
+                    return { kind: "calc", px: 0, percent: 0, cqh: ratio };
+                case "cqi":
+                    return { kind: "calc", px: 0, percent: 0, cqi: ratio };
+                case "cqb":
+                    return { kind: "calc", px: 0, percent: 0, cqb: ratio };
+                case "cqmin":
+                    return { kind: "calc", px: 0, percent: 0, cqmin: ratio };
+                case "cqmax":
+                    return { kind: "calc", px: 0, percent: 0, cqmax: ratio };
+                default:
+                    return undefined;
+            }
+        }
+        return parseCalcLength(value);
     }
     const numeric = Number.parseFloat(match[1]);
     if (Number.isNaN(numeric)) {
@@ -77,6 +104,22 @@ export function parseLengthOrPercent(value) {
     }
     return percent(numeric / 100);
 }
+/**
+ * Extract the three arguments from a CSS clamp() function.
+ * Returns [min, preferred, max] strings or undefined if not a clamp value.
+ */
+export function parseClampArgs(value) {
+    const trimmed = value.trim();
+    if (!trimmed.toLowerCase().startsWith("clamp(") || !trimmed.endsWith(")")) {
+        return undefined;
+    }
+    const inner = trimmed.slice(6, -1);
+    const parts = inner.split(",");
+    if (parts.length !== 3) {
+        return undefined;
+    }
+    return [parts[0].trim(), parts[1].trim(), parts[2].trim()];
+}
 export function parseLengthOrAuto(value) {
     if (!value) {
         return undefined;
@@ -85,5 +128,5 @@ export function parseLengthOrAuto(value) {
     if (normalized === "auto") {
         return "auto";
     }
-    return parseLength(normalized);
+    return parseLengthOrPercent(normalized);
 }

package/dist/src/css/parsers/margin-block-parser.js

@@ -1,8 +1,8 @@
 // src/css/parsers/margin-block-parser.ts
-import { parseLength } from "./length-parser.js";
+import { parseLengthOrAuto } from "./length-parser.js";
 export function parseMarginBlockStart(value, target) {
-    target.marginTop = parseLength(value) ?? target.marginTop;
+    target.marginTop = parseLengthOrAuto(value) ?? target.marginTop;
 }
 export function parseMarginBlockEnd(value, target) {
-    target.marginBottom = parseLength(value) ?? target.marginBottom;
+    target.marginBottom = parseLengthOrAuto(value) ?? target.marginBottom;
 }

package/dist/src/css/parsers/margin-parser.js

@@ -1,6 +1,6 @@
 // src/css/parsers/margin-parser.ts
 import { applyBoxShorthand } from "../shorthands/box-shorthand.js";
-import { parseLength, parseLengthOrAuto } from "./length-parser.js";
+import { parseLengthOrAuto } from "./length-parser.js";
 export function parseMargin(value, target) {
     applyBoxShorthand(value, (top, right, bottom, left) => {
         target.marginTop = top;
@@ -10,13 +10,13 @@ export function parseMargin(value, target) {
     });
 }
 export function parseMarginTop(value, target) {
-    target.marginTop = parseLength(value) ?? target.marginTop;
+    target.marginTop = parseLengthOrAuto(value) ?? target.marginTop;
 }
 export function parseMarginRight(value, target) {
     target.marginRight = parseLengthOrAuto(value) ?? target.marginRight;
 }
 export function parseMarginBottom(value, target) {
-    target.marginBottom = parseLength(value) ?? target.marginBottom;
+    target.marginBottom = parseLengthOrAuto(value) ?? target.marginBottom;
 }
 export function parseMarginLeft(value, target) {
     target.marginLeft = parseLengthOrAuto(value) ?? target.marginLeft;

package/dist/src/css/parsers/padding-block-parser.js

@@ -1,8 +1,8 @@
 // src/css/parsers/padding-block-parser.ts
-import { parseLength } from "./length-parser.js";
+import { parseLengthOrPercent } from "./length-parser.js";
 export function parsePaddingBlockStart(value, target) {
-    target.paddingTop = parseLength(value) ?? target.paddingTop;
+    target.paddingTop = parseLengthOrPercent(value) ?? target.paddingTop;
 }
 export function parsePaddingBlockEnd(value, target) {
-    target.paddingBottom = parseLength(value) ?? target.paddingBottom;
+    target.paddingBottom = parseLengthOrPercent(value) ?? target.paddingBottom;
 }

package/dist/src/css/parsers/padding-inline-parser.js

@@ -1,8 +1,8 @@
 // src/css/parsers/padding-inline-parser.ts
-import { parseLength } from "./length-parser.js";
+import { parseLengthOrPercent } from "./length-parser.js";
 export function parsePaddingInlineStart(value, target) {
-    target.paddingLeft = parseLength(value) ?? target.paddingLeft;
+    target.paddingLeft = parseLengthOrPercent(value) ?? target.paddingLeft;
 }
 export function parsePaddingInlineEnd(value, target) {
-    target.paddingRight = parseLength(value) ?? target.paddingRight;
+    target.paddingRight = parseLengthOrPercent(value) ?? target.paddingRight;
 }

package/dist/src/css/parsers/padding-parser.js

@@ -1,23 +1,23 @@
 // src/css/parsers/padding-parser.ts
 import { applyBoxShorthand } from "../shorthands/box-shorthand.js";
-import { parseLength } from "./length-parser.js";
+import { parseLengthOrPercent } from "./length-parser.js";
 export function parsePadding(value, target) {
     applyBoxShorthand(value, (top, right, bottom, left) => {
         target.paddingTop = top;
         target.paddingRight = right;
         target.paddingBottom = bottom;
         target.paddingLeft = left;
-    }, parseLength);
+    }, parseLengthOrPercent);
 }
 export function parsePaddingTop(value, target) {
-    target.paddingTop = parseLength(value) ?? target.paddingTop;
+    target.paddingTop = parseLengthOrPercent(value) ?? target.paddingTop;
 }
 export function parsePaddingRight(value, target) {
-    target.paddingRight = parseLength(value) ?? target.paddingRight;
+    target.paddingRight = parseLengthOrPercent(value) ?? target.paddingRight;
 }
 export function parsePaddingBottom(value, target) {
-    target.paddingBottom = parseLength(value) ?? target.paddingBottom;
+    target.paddingBottom = parseLengthOrPercent(value) ?? target.paddingBottom;
 }
 export function parsePaddingLeft(value, target) {
-    target.paddingLeft = parseLength(value) ?? target.paddingLeft;
+    target.paddingLeft = parseLengthOrPercent(value) ?? target.paddingLeft;
 }

package/dist/src/css/parsers/position-parser.js

@@ -1,27 +1,7 @@
 import { Position } from "../enums.js";
-import { percent } from "../length.js";
-import { parseLength } from "./length-parser.js";
-const PERCENT_LENGTH_REGEX = /^(-?\d+(?:\.\d+)?)%$/;
+import { parseLengthOrAuto } from "./length-parser.js";
 function parseLengthLike(value) {
-    const trimmed = value.trim();
-    if (!trimmed) {
-        return undefined;
-    }
-    if (trimmed.toLowerCase() === "auto") {
-        return "auto";
-    }
-    const parsed = parseLength(trimmed);
-    if (parsed !== undefined) {
-        return parsed;
-    }
-    const percentMatch = PERCENT_LENGTH_REGEX.exec(trimmed);
-    if (percentMatch) {
-        const numeric = Number.parseFloat(percentMatch[1]);
-        if (!Number.isNaN(numeric)) {
-            return percent(numeric / 100);
-        }
-    }
-    return undefined;
+    return parseLengthOrAuto(value);
 }
 export function parsePosition(value, target) {
     const normalized = value.trim().toLowerCase();