pagyra-js 0.0.19 → 0.0.21

package/dist/src/css/parsers/register-parsers.js

@@ -1,7 +1,7 @@
 // src/css/parsers/register-parsers.ts
 import { registerPropertyParser } from "./registry.js";
 // Display and Flex
-import { parseDisplay, parseJustifyContent, parseAlignItems, parseAlignContent, parseAlignSelf, parseFlexDirection, parseFlexWrap, } from "./display-flex-parser.js";
+import { parseDisplay, parseJustifyContent, parseAlignItems, parseAlignContent, parseAlignSelf, parseFlexDirection, parseFlexWrap, parseFlexGrow, parseFlexShrink, parseFlexBasis, parseFlex, } from "./display-flex-parser.js";
 // Color
 import { parseColor, parseBackgroundColor } from "./color-parser.js";
 // Border
@@ -25,16 +25,20 @@ import { parsePosition, parseTop, parseRight, parseBottom, parseLeft } from "./p
 // Text
 import { parseTextAlign, parseTextDecoration, parseTextDecorationLine, parseTextDecorationColor, parseTextDecorationStyle, parseFloat, parseTextIndent, parseTextTransform, parseLetterSpacing, } from "./text-parser-extended.js";
 import { parseOverflowWrap, parseWordWrap } from "./overflow-wrap-parser.js";
+import { parseWordBreak } from "./word-break-parser.js";
 import { parseTextShadow } from "./text-shadow-parser.js";
 import { parseListStyleType } from "./list-style-parser.js";
 import { parseContent } from "./content-parser.js";
+import { parseCounterIncrement, parseCounterReset } from "../../layout/counter.js";
 // Background
 import { applyBackgroundSizeDecl, applyBackgroundPositionDecl, applyBackgroundOriginDecl, applyBackgroundRepeatDecl, applyBackgroundClipDecl, parseBackgroundImage, parseBackground, parseObjectFit, } from "./background-parser-extended.js";
 import { parseClipPath } from "./clip-path-parser.js";
 // Grid
-import { parseGridTemplateColumns, parseGridTemplateRows, parseGridAutoFlow, parseGap, parseRowGap, parseColumnGap, } from "./grid-parser-extended.js";
+import { parseGridTemplateColumns, parseGridTemplateRows, parseGridAutoFlow, parseGridColumn, parseGap, parseRowGap, parseColumnGap, } from "./grid-parser-extended.js";
 // Opacity
 import { parseOpacity } from "./opacity-parser.js";
+// Filter
+import { parseFilter, parseBackdropFilter } from "./filter-parser.js";
 // Flag to ensure parsers are registered only once
 let parsersRegistered = false;
 export function registerAllPropertyParsers() {
@@ -43,6 +47,13 @@ export function registerAllPropertyParsers() {
         return;
     }
     parsersRegistered = true;
+    // Box Sizing
+    registerPropertyParser("box-sizing", (value, target) => {
+        const lower = value.trim().toLowerCase();
+        if (lower === "border-box" || lower === "content-box") {
+            target.boxSizing = lower;
+        }
+    });
     // Display and Flex
     registerPropertyParser("display", parseDisplay);
     registerPropertyParser("justify-content", parseJustifyContent);
@@ -51,6 +62,10 @@ export function registerAllPropertyParsers() {
     registerPropertyParser("align-self", parseAlignSelf);
     registerPropertyParser("flex-direction", parseFlexDirection);
     registerPropertyParser("flex-wrap", parseFlexWrap);
+    registerPropertyParser("flex-grow", parseFlexGrow);
+    registerPropertyParser("flex-shrink", parseFlexShrink);
+    registerPropertyParser("flex-basis", parseFlexBasis);
+    registerPropertyParser("flex", parseFlex);
     // Color
     registerPropertyParser("color", parseColor);
     registerPropertyParser("background-color", parseBackgroundColor);
@@ -140,9 +155,16 @@ export function registerAllPropertyParsers() {
     registerPropertyParser("float", parseFloat);
     registerPropertyParser("overflow-wrap", parseOverflowWrap);
     registerPropertyParser("word-wrap", parseWordWrap);
+    registerPropertyParser("word-break", parseWordBreak);
     registerPropertyParser("text-shadow", parseTextShadow);
     registerPropertyParser("list-style-type", parseListStyleType);
     registerPropertyParser("content", parseContent);
+    registerPropertyParser("counter-reset", (value, target) => {
+        target.counterReset = parseCounterReset(value);
+    });
+    registerPropertyParser("counter-increment", (value, target) => {
+        target.counterIncrement = parseCounterIncrement(value);
+    });
     // Transform (store as raw string for limited later use)
     registerPropertyParser("transform", (value, target) => {
         // store raw transform string
@@ -162,9 +184,14 @@ export function registerAllPropertyParsers() {
     registerPropertyParser("grid-template-columns", parseGridTemplateColumns);
     registerPropertyParser("grid-template-rows", parseGridTemplateRows);
     registerPropertyParser("grid-auto-flow", parseGridAutoFlow);
+    registerPropertyParser("grid-column", parseGridColumn);
     registerPropertyParser("gap", parseGap);
     registerPropertyParser("row-gap", parseRowGap);
     registerPropertyParser("column-gap", parseColumnGap);
     // Opacity
     registerPropertyParser("opacity", parseOpacity);
+    // Filter
+    registerPropertyParser("filter", parseFilter);
+    registerPropertyParser("backdrop-filter", parseBackdropFilter);
+    registerPropertyParser("-webkit-backdrop-filter", parseBackdropFilter); // vendor prefix comum
 }

package/dist/src/css/parsers/word-break-parser.d.ts

@@ -0,0 +1,2 @@
+import type { StyleAccumulator } from "../style.js";
+export declare function parseWordBreak(value: string, target: StyleAccumulator): void;

package/dist/src/css/parsers/word-break-parser.js

@@ -0,0 +1,23 @@
+function normalizeWordBreak(value) {
+    switch (value) {
+        case "normal":
+            return "normal";
+        case "break-all":
+            return "break-all";
+        case "keep-all":
+            return "keep-all";
+        case "break-word":
+            return "break-word";
+        default:
+            return undefined;
+    }
+}
+export function parseWordBreak(value, target) {
+    if (!value) {
+        return;
+    }
+    const keyword = normalizeWordBreak(value.trim().toLowerCase());
+    if (keyword) {
+        target.wordBreak = keyword;
+    }
+}

package/dist/src/css/properties/grid.d.ts

@@ -16,7 +16,13 @@ export interface AutoTrackSize {
     min?: number;
     max?: number;
 }
-export type TrackSize = FixedTrackSize | FlexTrackSize | AutoTrackSize;
+export interface ClampTrackSize {
+    kind: "clamp";
+    min: number;
+    preferred: number;
+    max: number;
+}
+export type TrackSize = FixedTrackSize | FlexTrackSize | AutoTrackSize | ClampTrackSize;
 export interface RepeatTrackDefinition {
     kind: "repeat";
     count: number;
@@ -43,7 +49,13 @@ export interface AutoTrackSizeInput {
     min?: NumericLength;
     max?: NumericLength;
 }
-export type TrackSizeInput = FixedTrackSizeInput | FlexTrackSizeInput | AutoTrackSizeInput;
+export interface ClampTrackSizeInput {
+    kind: "clamp";
+    min: NumericLength;
+    preferred: NumericLength;
+    max: NumericLength;
+}
+export type TrackSizeInput = FixedTrackSizeInput | FlexTrackSizeInput | AutoTrackSizeInput | ClampTrackSizeInput;
 export interface RepeatTrackDefinitionInput {
     kind: "repeat";
     count: number;
@@ -69,4 +81,6 @@ export interface GridProperties extends GapProperties {
     trackListRows: TrackDefinition[];
     /** Auto-placement flow direction */
     autoFlow: GridAutoFlow;
+    /** Number of columns a grid item spans */
+    gridColumnSpan: number;
 }

package/dist/src/css/properties/layout.d.ts

@@ -1,5 +1,5 @@
 import type { LengthLike } from "../length.js";
-import { Display, Position } from "../enums.js";
+import { BoxSizing, Display, Position } from "../enums.js";
 /**
  * Layout-related CSS properties.
  * Handles positioning, sizing, and display modes.
@@ -11,6 +11,8 @@ export interface LayoutProperties {
     position: Position;
     /** Stacking order */
     zIndex: number | "auto";
+    /** Box sizing model (content-box or border-box) */
+    boxSizing: BoxSizing;
     /** Element width */
     width: LengthLike;
     /** Element height */

package/dist/src/css/properties/layout.js

@@ -1 +1 @@
-import { Display, Position } from "../enums.js";
+import { BoxSizing, Display, Position } from "../enums.js";

package/dist/src/css/properties/misc.d.ts

@@ -1,5 +1,6 @@
 import { FloatMode, ClearMode, TableLayoutMode, BorderModel } from "../enums.js";
 import { CustomPropertiesMap } from "../custom-properties.js";
+import type { CounterIncrement, CounterReset } from "../../layout/counter.js";
 /**
  * Miscellaneous CSS properties.
  * Handles specialized properties like float, list styling, table layout, and page breaks.
@@ -29,4 +30,8 @@ export interface MiscProperties {
     orphans: number;
     /** CSS Custom Properties (Variables) */
     customProperties?: CustomPropertiesMap;
+    /** CSS counters reset declarations */
+    counterReset?: CounterReset[];
+    /** CSS counters increment declarations */
+    counterIncrement?: CounterIncrement[];
 }

package/dist/src/css/properties/typography.d.ts

@@ -3,6 +3,7 @@ import type { WhiteSpace, TextWrap, WritingMode } from "../enums.js";
 import type { ContentValue } from "../parsers/content-parser.js";
 export type TextTransform = "none" | "uppercase" | "lowercase" | "capitalize";
 export type OverflowWrap = "normal" | "break-word" | "anywhere";
+export type WordBreak = "normal" | "break-all" | "keep-all" | "break-word";
 /**
  * font-variant-numeric values as defined in CSS Fonts Level 3
  */
@@ -60,6 +61,8 @@ export interface TypographyProperties {
     textWrap: TextWrap;
     /** Overflow wrap behavior */
     overflowWrap: OverflowWrap;
+    /** Word break behavior */
+    wordBreak: WordBreak;
     /** Writing mode (horizontal-tb, vertical-rl, etc.) */
     writingMode: WritingMode;
     /** Text color */

package/dist/src/css/properties/visual.d.ts

@@ -30,6 +30,38 @@ export interface TextShadowInput {
     blurRadius?: NumericLength;
     color?: string;
 }
+/** Funções de filtro com argumento numérico (number ou percentage → number) */
+export interface NumericFilterFunction {
+    kind: "brightness" | "contrast" | "grayscale" | "sepia" | "saturate" | "invert" | "opacity";
+    /** Valor normalizado: percentage já convertido para number (50% → 0.5) */
+    value: number;
+}
+/** blur() usa <length>, não número puro */
+export interface BlurFilterFunction {
+    kind: "blur";
+    /** Raio em px (já resolvido de em/rem via NumericLength) */
+    value: NumericLength;
+}
+/** hue-rotate() usa <angle> */
+export interface HueRotateFilterFunction {
+    kind: "hue-rotate";
+    /** Ângulo normalizado em graus */
+    valueDeg: number;
+}
+/**
+ * drop-shadow() — subconjunto de box-shadow:
+ * NÃO suporta `inset` nem `spread-radius`.
+ * Reutiliza NumericLength para offset/blur para resolução posterior em overrides.ts.
+ */
+export interface DropShadowFilterFunction {
+    kind: "drop-shadow";
+    offsetX: NumericLength;
+    offsetY: NumericLength;
+    blurRadius: NumericLength;
+    color?: string;
+}
+/** União de todas as funções de filtro suportadas */
+export type FilterFunction = NumericFilterFunction | BlurFilterFunction | HueRotateFilterFunction | DropShadowFilterFunction;
 /**
  * Visual effects and rendering CSS properties.
  * Handles backgrounds, shadows, opacity, transforms, and overflow.
@@ -51,4 +83,8 @@ export interface VisualProperties {
     overflowY: OverflowMode;
     /** Clipping path applied to the element */
     clipPath?: ClipPath;
+    /** CSS filter — lista ordenada de funções (aplicadas da esquerda para direita) */
+    filter?: FilterFunction[];
+    /** CSS backdrop-filter — mesma estrutura, render diferente */
+    backdropFilter?: FilterFunction[];
 }

package/dist/src/css/shorthands/box-shorthand.d.ts

@@ -1,4 +1,4 @@
-import type { RelativeLength } from "../length.js";
-type BoxLength = number | RelativeLength | "auto" | undefined;
+import type { LengthInput } from "../length.js";
+type BoxLength = LengthInput | undefined;
 export declare function applyBoxShorthand<T extends BoxLength = BoxLength>(value: string, apply: (top: T, right: T, bottom: T, left: T) => void, parser?: (input: string) => T): void;
 export {};

package/dist/src/css/style-inheritance.d.ts

@@ -1,6 +1,6 @@
 import type { ComputedStyle } from "./style.js";
 import type { LineHeightValue } from "./line-height.js";
-import type { OverflowWrap, TextTransform } from "./properties/typography.js";
+import type { OverflowWrap, WordBreak, TextTransform } from "./properties/typography.js";
 import type { LengthLike } from "./length.js";
 import type { StyleDefaults } from "./ua-defaults/types.js";
 /**
@@ -19,6 +19,7 @@ export interface InheritedStyleProperties {
     textDecorationColor?: string;
     textDecorationStyle?: string;
     overflowWrap?: OverflowWrap;
+    wordBreak?: WordBreak;
     textIndent: LengthLike;
     textTransform: TextTransform;
     listStyleType: string;

package/dist/src/css/style-inheritance.js

@@ -21,6 +21,7 @@ export class StyleInheritanceResolver {
             textDecorationColor: parentStyle.textDecorationColor ?? mergedDefaults.textDecorationColor,
             textDecorationStyle: parentStyle.textDecorationStyle ?? mergedDefaults.textDecorationStyle,
             overflowWrap: parentStyle.overflowWrap ?? mergedDefaults.overflowWrap,
+            wordBreak: parentStyle.wordBreak ?? mergedDefaults.wordBreak,
             textIndent: parentStyle.textIndent ?? mergedDefaults.textIndent ?? 0,
             textTransform: parentStyle.textTransform ?? mergedDefaults.textTransform ?? "none",
             listStyleType: parentStyle.listStyleType ?? mergedDefaults.listStyleType ?? "disc",

package/dist/src/css/style.d.ts

@@ -1,23 +1,24 @@
-import { AlignContent, AlignItems, BorderModel, ClearMode, Display, FloatMode, JustifyContent, OverflowMode, Position, TableLayoutMode, TextWrap, WhiteSpace, WritingMode } from "./enums.js";
-import type { LengthInput, LengthLike, RelativeLength, NumericLength } from "./length.js";
+import { AlignContent, AlignItems, BorderModel, BoxSizing, ClearMode, Display, FloatMode, JustifyContent, OverflowMode, Position, TableLayoutMode, TextWrap, WhiteSpace, WritingMode } from "./enums.js";
+import type { LengthInput, LengthLike, RelativeLength, NumericLength, ClampNumericLength } from "./length.js";
 import type { BackgroundLayer } from "./background-types.js";
 import { type LineHeightInput, type LineHeightValue } from "./line-height.js";
 import { CustomPropertiesMap } from "./custom-properties.js";
 import type { LayoutProperties } from "./properties/layout.js";
-import type { TypographyProperties, TextTransform, OverflowWrap, FontVariantNumeric } from "./properties/typography.js";
+import type { TypographyProperties, TextTransform, OverflowWrap, WordBreak, FontVariantNumeric } from "./properties/typography.js";
 import type { BoxModelProperties } from "./properties/box-model.js";
 import type { FlexboxProperties, FlexDirection, AlignSelfValue } from "./properties/flexbox.js";
-import type { GridProperties, GridAutoFlow, TrackSize, TrackDefinition, FixedTrackSize, FlexTrackSize, AutoTrackSize, RepeatTrackDefinition, AutoRepeatTrackDefinition, TrackSizeInput, TrackDefinitionInput, FixedTrackSizeInput, FlexTrackSizeInput, AutoTrackSizeInput, RepeatTrackDefinitionInput, AutoRepeatTrackDefinitionInput } from "./properties/grid.js";
-import type { VisualProperties, BoxShadow, BoxShadowInput, TextShadow, TextShadowInput } from "./properties/visual.js";
+import type { GridProperties, GridAutoFlow, TrackSize, TrackDefinition, FixedTrackSize, FlexTrackSize, AutoTrackSize, ClampTrackSize, RepeatTrackDefinition, AutoRepeatTrackDefinition, TrackSizeInput, TrackDefinitionInput, FixedTrackSizeInput, FlexTrackSizeInput, AutoTrackSizeInput, ClampTrackSizeInput, RepeatTrackDefinitionInput, AutoRepeatTrackDefinitionInput } from "./properties/grid.js";
+import type { VisualProperties, BoxShadow, BoxShadowInput, TextShadow, TextShadowInput, FilterFunction } from "./properties/visual.js";
 import type { MiscProperties } from "./properties/misc.js";
 import type { ClipPath } from "./clip-path-types.js";
 import type { ContentValue } from "./parsers/content-parser.js";
+import type { CounterIncrement, CounterReset } from "../layout/counter.js";
 export type { NumericLength } from "./length.js";
 export type { LineHeightInput, LineHeightValue } from "./line-height.js";
-export type { TextTransform, OverflowWrap, FontVariantNumeric };
+export type { TextTransform, OverflowWrap, WordBreak, FontVariantNumeric };
 export type { FlexDirection, AlignSelfValue };
 export type { GridAutoFlow };
-export type { TrackSize, TrackDefinition, FixedTrackSize, FlexTrackSize, AutoTrackSize, RepeatTrackDefinition, AutoRepeatTrackDefinition, TrackSizeInput, TrackDefinitionInput, FixedTrackSizeInput, FlexTrackSizeInput, AutoTrackSizeInput, RepeatTrackDefinitionInput, AutoRepeatTrackDefinitionInput, };
+export type { TrackSize, TrackDefinition, FixedTrackSize, FlexTrackSize, AutoTrackSize, ClampTrackSize, RepeatTrackDefinition, AutoRepeatTrackDefinition, TrackSizeInput, TrackDefinitionInput, FixedTrackSizeInput, FlexTrackSizeInput, AutoTrackSizeInput, ClampTrackSizeInput, RepeatTrackDefinitionInput, AutoRepeatTrackDefinitionInput, };
 export type { BoxShadow, BoxShadowInput, TextShadow, TextShadowInput };
 export interface StyleAccumulator {
     display?: Display;
@@ -56,18 +57,21 @@ export interface StyleAccumulator {
     paddingRight?: LengthInput;
     paddingBottom?: LengthInput;
     paddingLeft?: LengthInput;
+    boxSizing?: string;
     width?: LengthInput;
     minWidth?: LengthInput;
     height?: LengthInput;
     minHeight?: LengthInput;
     maxHeight?: LengthInput;
-    fontSize?: number | RelativeLength;
+    fontSize?: number | RelativeLength | ClampNumericLength;
     lineHeight?: LineHeightInput;
     fontFamily?: string;
     fontStyle?: string;
     fontVariant?: string;
     fontVariantNumeric?: FontVariantNumeric[];
     content?: ContentValue[];
+    counterReset?: CounterReset[];
+    counterIncrement?: CounterIncrement[];
     fontWeight?: number;
     letterSpacing?: number | RelativeLength;
     borderModel?: BorderModel;
@@ -85,18 +89,27 @@ export interface StyleAccumulator {
     alignSelf?: AlignSelfValue;
     flexDirection?: FlexDirection;
     flexWrap?: boolean;
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: LengthInput;
     overflowWrap?: OverflowWrap;
+    wordBreak?: WordBreak;
     trackListColumns?: TrackDefinitionInput[];
     trackListRows?: TrackDefinitionInput[];
     autoFlow?: GridAutoFlow;
-    rowGap?: NumericLength;
-    columnGap?: NumericLength;
+    rowGap?: NumericLength | ClampNumericLength;
+    columnGap?: NumericLength | ClampNumericLength;
+    gridColumnSpan?: number;
     zIndex?: number | "auto";
     top?: LengthInput;
     right?: LengthInput;
     bottom?: LengthInput;
     left?: LengthInput;
     opacity?: number;
+    /** Parsed filter functions (pre-resolution — blur pode ter RelativeLength) */
+    filter?: FilterFunction[];
+    /** Parsed backdrop-filter functions */
+    backdropFilter?: FilterFunction[];
 }
 /**
  * Complete CSS style properties.
@@ -122,7 +135,9 @@ export declare class ComputedStyle implements StyleProperties {
     whiteSpace: WhiteSpace;
     textWrap: TextWrap;
     overflowWrap: OverflowWrap;
+    wordBreak: WordBreak;
     writingMode: WritingMode;
+    boxSizing: BoxSizing;
     width: LengthLike;
     height: LengthLike;
     minWidth?: LengthLike;
@@ -164,6 +179,8 @@ export declare class ComputedStyle implements StyleProperties {
     fontVariant?: string;
     fontVariantNumeric?: FontVariantNumeric[];
     content?: ContentValue[];
+    counterReset?: CounterReset[];
+    counterIncrement?: CounterIncrement[];
     clipPath?: ClipPath;
     objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
     left?: LengthLike;
@@ -193,6 +210,7 @@ export declare class ComputedStyle implements StyleProperties {
     autoFlow: GridAutoFlow;
     rowGap: number;
     columnGap: number;
+    gridColumnSpan: number;
     tableLayout: TableLayoutMode;
     borderModel: BorderModel;
     breakBefore: string;
@@ -201,6 +219,8 @@ export declare class ComputedStyle implements StyleProperties {
     widows: number;
     orphans: number;
     opacity: number;
+    filter?: FilterFunction[];
+    backdropFilter?: FilterFunction[];
     customProperties: CustomPropertiesMap;
     constructor(init?: Partial<StyleProperties>);
     get backgroundColor(): string | undefined;

package/dist/src/css/style.js

@@ -1,4 +1,4 @@
-import { AlignContent, AlignItems, BorderModel, ClearMode, Display, FloatMode, JustifyContent, OverflowMode, Position, TableLayoutMode, TextWrap, WhiteSpace, WritingMode, } from "./enums.js";
+import { AlignContent, AlignItems, BorderModel, BoxSizing, ClearMode, Display, FloatMode, JustifyContent, OverflowMode, Position, TableLayoutMode, TextWrap, WhiteSpace, WritingMode, } from "./enums.js";
 import { BrowserDefaults } from "./browser-defaults.js";
 import { cloneLineHeight, lineHeightToPx, } from "./line-height.js";
 import { CustomPropertiesMap } from "./custom-properties.js";
@@ -23,8 +23,10 @@ export class ComputedStyle {
         this.overflowY = data.overflowY;
         this.whiteSpace = data.whiteSpace;
         this.overflowWrap = data.overflowWrap;
+        this.wordBreak = data.wordBreak;
         this.textWrap = data.textWrap;
         this.writingMode = data.writingMode;
+        this.boxSizing = data.boxSizing;
         this.width = data.width;
         this.height = data.height;
         this.minWidth = data.minWidth;
@@ -66,6 +68,8 @@ export class ComputedStyle {
         this.fontVariant = data.fontVariant;
         this.fontVariantNumeric = data.fontVariantNumeric;
         this.content = data.content;
+        this.counterReset = data.counterReset;
+        this.counterIncrement = data.counterIncrement;
         this.clipPath = data.clipPath;
         this.objectFit = data.objectFit;
         this.zIndex = data.zIndex;
@@ -96,6 +100,7 @@ export class ComputedStyle {
         this.autoFlow = data.autoFlow;
         this.rowGap = data.rowGap;
         this.columnGap = data.columnGap;
+        this.gridColumnSpan = data.gridColumnSpan;
         this.tableLayout = data.tableLayout;
         this.borderModel = data.borderModel;
         this.breakBefore = data.breakBefore;
@@ -112,6 +117,8 @@ export class ComputedStyle {
         this.textDecorationColor = init?.textDecorationColor ?? defaultStyle.textDecorationColor;
         this.textDecorationStyle = init?.textDecorationStyle ?? defaultStyle.textDecorationStyle;
         this.opacity = data.opacity;
+        this.filter = data.filter ? [...data.filter] : undefined;
+        this.backdropFilter = data.backdropFilter ? [...data.backdropFilter] : undefined;
         this.customProperties = init?.customProperties ?? new CustomPropertiesMap();
     }
     get backgroundColor() {

package/dist/src/css/ua-defaults/base-defaults.d.ts

@@ -45,6 +45,7 @@ export declare class LayoutDefaults {
 export declare class TextLayoutDefaults {
     static getWhiteSpace(): WhiteSpace;
     static getOverflowWrap(): "normal" | "break-word" | "anywhere";
+    static getWordBreak(): "normal" | "break-all" | "keep-all" | "break-word";
     static getTextWrap(): TextWrap;
     static getWritingMode(): WritingMode;
     static getTextAlign(): string;

package/dist/src/css/ua-defaults/base-defaults.js

@@ -1,4 +1,4 @@
-import { AlignContent, AlignItems, BorderModel, ClearMode, Display, FloatMode, JustifyContent, OverflowMode, Position, TableLayoutMode, TextWrap, WhiteSpace, WritingMode, } from "../enums.js";
+import { AlignContent, AlignItems, BorderModel, BoxSizing, ClearMode, Display, FloatMode, JustifyContent, OverflowMode, Position, TableLayoutMode, TextWrap, WhiteSpace, WritingMode, } from "../enums.js";
 import { AUTO_LENGTH } from "../length.js";
 import { createNormalLineHeight, DEFAULT_NORMAL_LINE_HEIGHT } from "../line-height.js";
 import { remToPx, emToPx } from "../unit-conversion.js";
@@ -97,6 +97,9 @@ export class TextLayoutDefaults {
     static getOverflowWrap() {
         return "normal";
     }
+    static getWordBreak() {
+        return "normal";
+    }
     static getTextWrap() {
         return TextWrap.Wrap;
     }
@@ -166,6 +169,7 @@ export function createBaseDefaultsObject() {
         minHeight: BoxModelDefaults.getMinHeight(),
         maxHeight: BoxModelDefaults.getMaxHeight(),
         // Layout
+        boxSizing: BoxSizing.ContentBox,
         display: LayoutDefaults.getDisplay(),
         position: LayoutDefaults.getPosition(),
         float: FloatMode.None,
@@ -175,6 +179,7 @@ export function createBaseDefaultsObject() {
         // Text layout
         whiteSpace: TextLayoutDefaults.getWhiteSpace(),
         overflowWrap: TextLayoutDefaults.getOverflowWrap(),
+        wordBreak: TextLayoutDefaults.getWordBreak(),
         textWrap: TextLayoutDefaults.getTextWrap(),
         writingMode: TextLayoutDefaults.getWritingMode(),
         textAlign: TextLayoutDefaults.getTextAlign(),
@@ -195,6 +200,7 @@ export function createBaseDefaultsObject() {
         trackListColumns: [],
         trackListRows: [],
         autoFlow: "row",
+        gridColumnSpan: 1,
         rowGap: 0,
         columnGap: 0,
         // Table (defaults)
@@ -208,5 +214,8 @@ export function createBaseDefaultsObject() {
         orphans: 2,
         // Opacity
         opacity: 1,
+        // Filter (no filter applied by default)
+        filter: undefined,
+        backdropFilter: undefined,
     };
 }

package/dist/src/css/ua-defaults/element-defaults.js

@@ -216,8 +216,6 @@ class ElementSpecificDefaultsImpl {
             },
             code: {
                 display: Display.Inline,
-                fontSize: 14,
-                lineHeight: createNormalLineHeight(),
                 fontFamily: "Monaco, 'Courier New', monospace",
                 color: TypographyDefaults.getColor(),
             },

package/dist/src/html/css/parse-css.d.ts

@@ -1,10 +1,12 @@
 import { type DomLikeElement } from "../../css/selectors/matcher.js";
 import type { DomElement } from "../../types/core.js";
 export type DomEl = DomElement;
+export type CssPseudoElement = "::before" | "::after";
 export interface CssRuleEntry {
     selector: string;
     declarations: Record<string, string>;
     match: (el: DomLikeElement) => boolean;
+    pseudoElement?: CssPseudoElement;
 }
 export interface FontFaceRule {
     declarations: Record<string, string>;

package/dist/src/html/css/parse-css.js

@@ -29,12 +29,23 @@ export function buildCssRules(cssText) {
                 }
             }
             for (const selector of selectors) {
-                const matcher = createSelectorMatcher(selector.trim());
+                const trimmedSelector = selector.trim();
+                const parsedSelector = splitTerminalPseudoElement(trimmedSelector);
+                if (parsedSelector.unsupportedPseudo) {
+                    console.warn(`Unsupported pseudo-element selector: ${trimmedSelector}`);
+                    continue;
+                }
+                const matcher = createSelectorMatcher(parsedSelector.baseSelector);
                 if (!matcher) {
-                    console.warn(`Invalid CSS selector: ${selector.trim()}`);
+                    console.warn(`Invalid CSS selector: ${trimmedSelector}`);
                     continue;
                 }
-                result.styleRules.push({ selector, declarations: { ...declarations }, match: matcher });
+                result.styleRules.push({
+                    selector,
+                    declarations: { ...declarations },
+                    match: matcher,
+                    pseudoElement: parsedSelector.pseudoElement,
+                });
             }
         }
         else if (rule.type === "font-face") {
@@ -61,6 +72,24 @@ export function buildCssRules(cssText) {
     }
     return result;
 }
+function splitTerminalPseudoElement(selector) {
+    const trimmed = selector.trim();
+    const supported = /(.*?)(::?before|::?after)\s*$/i.exec(trimmed);
+    if (supported) {
+        const pseudoRaw = supported[2].toLowerCase();
+        const pseudoElement = pseudoRaw.endsWith("before") ? "::before" : "::after";
+        const baseSelector = (supported[1].trim() || "*");
+        return { baseSelector, pseudoElement };
+    }
+    const unsupported = /(.*?)(::[a-z-]+)\s*$/i.exec(trimmed);
+    if (unsupported) {
+        return {
+            baseSelector: unsupported[1].trim() || "*",
+            unsupportedPseudo: unsupported[2].toLowerCase(),
+        };
+    }
+    return { baseSelector: trimmed || "*" };
+}
 export function parseCss(cssText) {
     return buildCssRules(cssText);
 }

package/dist/src/html/dom-converter/background-images.d.ts

@@ -0,0 +1,3 @@
+import { ComputedStyle } from "../../css/style.js";
+import { type ConversionContext } from "../image-converter.js";
+export declare function hydrateBackgroundImages(style: ComputedStyle, context: ConversionContext): Promise<void>;