css-typed-om-polyfill 0.1.0 → 1.0.0

package/css-typed-om-polyfill.js

@@ -1,1369 +0,0 @@
-(function () {
-    'use strict'
-
-    console.log('CSS Typed OM Polyfill: Initializing...')
-
-    // --- Helper: Simple unit definitions ---
-    const LENGTH_UNITS = ['px', 'em', 'rem', 'vw', 'vh', 'vmin', 'vmax', 'cm', 'mm', 'in', 'pt', 'pc', 'ch', 'ex', 'cap', 'ic', 'lh', 'rlh', 'q']
-    const ANGLE_UNITS = ['deg', 'rad', 'grad', 'turn']
-    const TIME_UNITS = ['s', 'ms']
-    const FREQUENCY_UNITS = ['hz', 'khz']
-    const RESOLUTION_UNITS = ['dpi', 'dpcm', 'dppx']
-    const FLEX_UNITS = ['fr']
-    const PERCENTAGE_UNIT = ['%']
-    const NUMBER_UNIT_TYPE = 'number'
-
-    const ALL_UNITS = [
-        ...LENGTH_UNITS, ...ANGLE_UNITS, ...TIME_UNITS,
-        ...FREQUENCY_UNITS, ...RESOLUTION_UNITS, ...FLEX_UNITS, PERCENTAGE_UNIT[0]
-    ]
-
-    function getUnitCategory(unit) {
-        if (typeof unit !== 'string') return 'unknown'
-        unit = unit.toLowerCase()
-        if (LENGTH_UNITS.includes(unit)) return 'length'
-        if (ANGLE_UNITS.includes(unit)) return 'angle'
-        if (TIME_UNITS.includes(unit)) return 'time'
-        if (FREQUENCY_UNITS.includes(unit)) return 'frequency'
-        if (RESOLUTION_UNITS.includes(unit)) return 'resolution'
-        if (FLEX_UNITS.includes(unit)) return 'flex'
-        if (PERCENTAGE_UNIT.includes(unit)) return 'percent'
-        if (unit === NUMBER_UNIT_TYPE) return NUMBER_UNIT_TYPE
-        return 'unknown'
-    }
-
-    const conversionRates = {
-        time: { ms: 1, s: 1000 },
-        angle: { deg: 1, rad: 180 / Math.PI, grad: 400 / 360, turn: 360 },
-    }
-
-    // --- CSSStyleValue (Base Class) ---
-    class CSSStyleValue {
-        constructor() {
-            if (this.constructor === CSSStyleValue) {
-                throw new TypeError("Illegal constructor: CSSStyleValue is an abstract base class.")
-            }
-        }
-    }
-
-    // --- Simple Numeric Value Parser ---
-    function parseSimpleCssNumericValue(text) {
-        text = text.trim()
-        const unitMatch = text.match(/^(-?(?:\d*\.\d+|\d+\.?\d*))(%|[a-zA-Z]+)?$/)
-        if (unitMatch) {
-            const value = parseFloat(unitMatch[1])
-            if (!isFinite(value)) return null
-            const unit = unitMatch[2] ? unitMatch[2].toLowerCase() : undefined
-
-            if (unit === undefined) return new CSSNumericValue(value, NUMBER_UNIT_TYPE)
-            if (unit === '%') return new CSSUnitValue(value, '%')
-            if (ALL_UNITS.includes(unit)) return new CSSUnitValue(value, unit)
-            return null
-            // Unknown unit
-        }
-        if (/^(-?(?:\d*\.\d+|\d+\.?\d*))$/.test(text)) {
-            const value = parseFloat(text)
-            if (isFinite(value)) return new CSSNumericValue(value, NUMBER_UNIT_TYPE)
-        }
-        return null
-    }
-
-    // --- Parenthesis Matcher ---
-    function findMatchingParen(str, startIndex = 0) {
-        let level = 0
-        if (str[startIndex] !== '(') return -1
-        for (let i = startIndex; i < str.length; i++) {
-            if (str[i] === '(') level++
-            else if (str[i] === ')') {
-                level--
-                if (level === 0) return i
-            }
-        }
-        return -1
-    }
-
-    // --- Function Argument Parser ---
-    function parseFunctionArguments(argsString, functionName = 'function') {
-        argsString = argsString.trim()
-        if (argsString === '') return []
-        const args = []
-        let currentArg = ''
-        let parenDepth = 0
-        for (let i = 0; i < argsString.length; i++) {
-            const char = argsString[i]
-            if (char === '(') {
-                parenDepth++
-                currentArg += char
-            }
-            else if (char === ')') {
-                currentArg += char
-                parenDepth = Math.max(0, parenDepth - 1)
-            } else if (char === ',' && parenDepth === 0) {
-                const argTrimmed = currentArg.trim()
-                if (argTrimmed === '') throw new Error(`Empty argument found in ${functionName}()`)
-                args.push(parseCssMathExpression(argTrimmed))
-                // Use MATH parser
-                currentArg = ''
-            } else {
-                currentArg += char
-            }
-        }
-        const lastArgTrimmed = currentArg.trim()
-        if (lastArgTrimmed === '') {
-            if (argsString.endsWith(',')) throw new Error(`Trailing comma in ${functionName}()`)
-            if (args.length === 0) throw new Error(`No arguments provided to ${functionName}()`)
-        } else {
-            args.push(parseCssMathExpression(lastArgTrimmed))
-            // Use MATH parser
-        }
-        return args
-    }
-
-
-    // --- Recursive CSS Math Expression Parser ---
-    function parseCssMathExpression(expression) {
-        expression = expression.trim()
-
-        // 1. Outermost Parentheses
-        if (expression.startsWith('(') && findMatchingParen(expression, 0) === expression.length - 1) {
-            return parseCssMathExpression(expression.slice(1, -1))
-        }
-
-        // 2. Addition/Subtraction (right-to-left)
-        let parenLevel = 0
-        for (let i = expression.length - 1; i >= 0; i--) {
-            const char = expression[i]
-            if (char === ')') parenLevel++
-            else if (char === '(') parenLevel--
-            else if (parenLevel === 0 && (char === '+' || char === '-')) {
-                const prevChar = expression[i - 1]
-                const nextChar = expression[i + 1]
-                // CSS requires spaces around binary +/- for calc()
-                if (/\s/.test(prevChar) || /\s/.test(nextChar)) {
-                    const left = expression.slice(0, i)
-                    const right = expression.slice(i + 1)
-                    if (left.trim() !== '' && right.trim() !== '') {
-                        // Check it's not unary following another operator/paren/start
-                        let prevNonSpaceIndex = i - 1
-                        while (prevNonSpaceIndex >= 0 && /\s/.test(expression[prevNonSpaceIndex])) prevNonSpaceIndex--
-                        if (prevNonSpaceIndex >= 0 && !['(', '+', '-', '*', '/'].includes(expression[prevNonSpaceIndex])) {
-                            // Binary operator confirmed
-                            const leftVal = parseCssMathExpression(left)
-                            // Might be VarRef
-                            const rightVal = parseCssMathExpression(right)
-                            // Might be VarRef
-                            if (char === '+') return leftVal.add(rightVal)
-                            // Use .add()
-                            if (char === '-') return leftVal.sub(rightVal)
-                            // Use .sub()
-                        }
-                    } else {
-                        throw new Error(`Invalid syntax: Missing operand around operator '${char}' in "${expression}"`)
-                    }
-                } // else: likely unary or invalid syntax like "10px-5px"
-            }
-        }
-
-        // 3. Multiplication/Division (right-to-left)
-        parenLevel = 0
-        for (let i = expression.length - 1; i >= 0; i--) {
-            const char = expression[i]
-            if (char === ')') parenLevel++
-            else if (char === '(') parenLevel--
-            else if (parenLevel === 0 && (char === '*' || char === '/')) {
-                const left = expression.slice(0, i)
-                const right = expression.slice(i + 1)
-                if (left.trim() === '' || right.trim() === '') {
-                    throw new Error(`Invalid syntax: Missing operand around operator '${char}' in "${expression}"`)
-                }
-                const leftVal = parseCssMathExpression(left)
-                const rightVal = parseCssMathExpression(right)
-                if (char === '*') return leftVal.mul(rightVal)
-                // Use .mul()
-                if (char === '/') return leftVal.div(rightVal)
-                // Use .div()
-            }
-        }
-
-        // 4. Unary Minus/Plus
-        if (expression.startsWith('-')) {
-            const operand = parseCssMathExpression(expression.slice(1))
-            return operand.negate()
-        }
-        if (expression.startsWith('+')) {
-            return parseCssMathExpression(expression.slice(1))
-        }
-
-        // 5. Functions (min, max, var, etc. as terms within calc)
-        const funcMatch = expression.match(/^([a-zA-Z-]+)\((.*)\)$/i)
-        if (funcMatch) {
-            const funcName = funcMatch[1].toLowerCase()
-            const funcContent = funcMatch[2]
-            switch (funcName) {
-                case 'min':
-                case 'max':
-                    try {
-                        const args = parseFunctionArguments(funcContent, funcName)
-                        args.forEach(arg => {
-                            if (!(arg instanceof CSSNumericValue || arg instanceof CSSVariableReferenceValue))
-                                throw new Error(`Invalid argument type ${arg?.constructor?.name}`)
-                        })
-                        if (args.length === 0)
-                            throw new Error(`No arguments for ${funcName}`)
-                        return funcName === 'min' ? new CSSMathMin(...args) : new CSSMathMax(...args)
-                    } catch (e) {
-                        throw new Error(`Failed to parse ${funcName} args: ${e.message}`)
-                    }
-                case 'clamp':
-                    throw new Error(`clamp() not supported`)
-                case 'var':
-                    const varParts = funcContent.match(/^\s*(--[a-zA-Z0-9_-]+)\s*(?:,\s*(.+)\s*)?$/)
-                    if (varParts) {
-                        const fallback = varParts[2] ? new CSSUnparsedValue([varParts[2].trim()]) : null
-                        return new CSSVariableReferenceValue(varParts[1], fallback)
-                    } else {
-                        throw new Error(`Invalid var() syntax: "${expression}"`)
-                    }
-                case 'calc':
-                    return parseCssMathExpression(funcContent)
-                // Nested calc
-                default:
-                    throw new Error(`Unsupported function "${funcName}()" in math expression.`)
-            }
-        }
-
-        // 6. Base Case: Simple numeric value
-        const simpleValue = parseSimpleCssNumericValue(expression)
-        if (simpleValue) return simpleValue
-
-        // 7. Invalid Term
-        throw new Error(`Invalid or unsupported term in math expression: "${expression}"`)
-    }
-
-
-    // --- CSSNumericValue (Base for numbers, units, math) ---
-    class CSSNumericValue extends CSSStyleValue {
-        constructor(value, unitType) {
-            super()
-            this._value = (unitType === NUMBER_UNIT_TYPE) ? value : NaN
-            this._unitType = unitType
-        }
-
-        type() {
-            const types = { length: 0, angle: 0, time: 0, frequency: 0, resolution: 0, flex: 0, percent: 0 }
-            const key = this._unitType
-            if (key === NUMBER_UNIT_TYPE) { /* all 0 */ }
-            else if (key === 'percent') types.percent = 1
-            else if (types.hasOwnProperty(key)) types[key] = 1
-            else if (key !== 'mixed' && key !== 'unknown')
-                console.warn(`CSSNumericValue.type(): Unknown unit type category "${key}"`)
-            return types
-        }
-
-        _toNumericValue(val, opName) {
-            if (val instanceof CSSNumericValue || val instanceof CSSVariableReferenceValue) return val
-            if (typeof val === 'number') return new CSSNumericValue(val, NUMBER_UNIT_TYPE)
-            if (typeof val === 'string') {
-                try {
-                    const parsed = CSSStyleValue.parse('', val)
-                    // Use main parser
-                    if (parsed instanceof CSSNumericValue ||
-                        parsed instanceof CSSVariableReferenceValue
-                    ) return parsed
-                    throw new TypeError(`String "${val}" parsed to non-numeric type "${parsed?.constructor?.name}" for ${opName}.`)
-                } catch (e) {
-                    throw new TypeError(`Could not parse string "${val}" for ${opName}: ${e.message}`)
-                }
-            }
-            throw new TypeError(`Cannot use value of type ${typeof val} in numeric ${opName}.`)
-        }
-
-        // --- Arithmetic Methods ---
-        // These methods handle CSSVariableReferenceValue by creating Math objects.
-        add(...values) {
-            let result = this
-            for (const rawVal of values) {
-                const other = this._toNumericValue(rawVal, 'add')
-                if (result instanceof CSSMathValue || other instanceof CSSMathValue) {
-                    const left = (result instanceof CSSMathSum || result instanceof CSSMathProduct) ? result.values : [result]
-                    const right = (other instanceof CSSMathSum || other instanceof CSSMathProduct) ? other.values : [other]
-                    result = new CSSMathSum([...left, ...right])
-                    continue
-                }
-
-                if (result instanceof CSSUnitValue && other instanceof CSSUnitValue) {
-                    if (result.unit === other.unit)
-                        result = new CSSUnitValue(result.value + other.value, result.unit)
-                    else {
-                        const cat1 = getUnitCategory(result.unit)
-                        const cat2 = getUnitCategory(other.unit)
-                        const conv = ['length', 'angle', 'time', 'frequency', 'resolution']
-                        if (cat1 !== 'unknown' && cat1 === cat2 && conv.includes(cat1)) {
-                            try {
-                                const convOther = other.to(result.unit)
-                                result = new CSSUnitValue(result.value + convOther.value, result.unit)
-                            }
-                            catch (e) {
-                                result = new CSSMathSum([result, other])
-                            }
-                        } else result = new CSSMathSum([result, other])
-                    }
-                } else
-                    result = new CSSMathSum([result, other])
-            }
-            return result
-        }
-        sub(...values) {
-            let result = this
-            for (const rawVal of values) {
-                const other = this._toNumericValue(rawVal, 'sub')
-                // Use add(negate(other)) strategy
-                result = result.add(other.negate())
-            }
-            return result
-        }
-        mul(...values) {
-            let result = this
-            for (const rawVal of values) {
-                const other = this._toNumericValue(rawVal, 'mul')
-                if (result instanceof CSSMathValue || other instanceof CSSMathValue) {
-                    const left = (result instanceof CSSMathProduct) ? result.values : [result]
-                    const right = (other instanceof CSSMathProduct) ? other.values : [other]
-                    result = new CSSMathProduct([...left, ...right])
-                    continue
-                }
-                const typeR = result.type()
-                const typeO = other.type()
-                const isRUnitless = Object.values(typeR).every(v => v === 0)
-                const isOUnitless = Object.values(typeO).every(v => v === 0)
-                let direct = null
-                if (result instanceof CSSUnitValue && isOUnitless && other instanceof CSSNumericValue)
-                    direct = new CSSUnitValue(result.value * other._value, result.unit)
-                else if (other instanceof CSSUnitValue && isRUnitless && result instanceof CSSNumericValue)
-                    direct = new CSSUnitValue(result._value * other.value, other.unit)
-                else if (isRUnitless && isOUnitless && result instanceof CSSNumericValue && other instanceof CSSNumericValue)
-                    direct = new CSSNumericValue(result._value * other._value, NUMBER_UNIT_TYPE)
-                if (direct)
-                    result = direct
-                else {
-                    const left = (result instanceof CSSMathProduct) ? result.values : [result]
-                    const right = (other instanceof CSSMathProduct) ? other.values : [other]
-                    result = new CSSMathProduct([...left, ...right])
-                }
-            }
-            return result
-        }
-        div(...values) {
-            let result = this
-            for (const rawVal of values) {
-                const other = this._toNumericValue(rawVal, 'div')
-                // Check for division by zero early if possible (non-var)
-                const isZero = (other instanceof CSSUnitValue && other.value === 0) ||
-                    (other instanceof CSSNumericValue && other._unitType === NUMBER_UNIT_TYPE && other._value === 0)
-                if (isZero) throw new RangeError("Division by zero in CSS calculation.")
-                // Use mul(invert(other)) strategy
-                result = result.mul(other.invert())
-            }
-            return result
-        }
-
-        // --- Structural Operations ---
-        negate() {
-            if (this instanceof CSSMathNegate) return this.value
-            // -(-x) -> x
-            if (this instanceof CSSUnitValue) return new CSSUnitValue(-this.value, this.unit)
-            if (this instanceof CSSNumericValue && this._unitType === NUMBER_UNIT_TYPE) return new CSSNumericValue(-this._value, NUMBER_UNIT_TYPE)
-            return new CSSMathNegate(this)
-            // Wrap others (including VarRef)
-        }
-        invert() {
-            if (this instanceof CSSMathInvert) return this.value
-            // 1/(1/x) -> x
-            // Check for inversion of zero
-            if ((this instanceof CSSUnitValue && this.value === 0) || (this instanceof CSSNumericValue && this._unitType === NUMBER_UNIT_TYPE && this._value === 0)) {
-                throw new RangeError("Division by zero (inversion of 0).")
-            }
-            if (this instanceof CSSNumericValue && this._unitType === NUMBER_UNIT_TYPE) return new CSSNumericValue(1 / this._value, NUMBER_UNIT_TYPE)
-            return new CSSMathInvert(this)
-            // Wrap others (UnitValue, VarRef, Math)
-        }
-
-        // --- Comparison / Conversion ---
-        min(...values) {
-            const all = [this, ...values].map(v => this._toNumericValue(v, 'min'))
-            return new CSSMathMin(...all)
-        }
-        max(...values) {
-            const all = [this, ...values].map(v => this._toNumericValue(v, 'max'))
-            return new CSSMathMax(...all)
-        }
-        equals(...values) { /* ... Simplified structural check ... */
-            for (const rawVal of values) {
-                let other
-                if (rawVal instanceof CSSNumericValue || rawVal instanceof CSSVariableReferenceValue) other = rawVal
-                else if (typeof rawVal === 'string' || typeof rawVal === 'number') {
-                    try {
-                        other = this._toNumericValue(rawVal, 'equals')
-                    } catch (e) {
-                        return false
-                    }
-                }
-                else return false
-                // Cannot compare other types
-
-                // Crude string comparison (unreliable for math) + zero check
-                if (this.toString() !== other.toString()) {
-                    const isThisZero = (this instanceof CSSUnitValue && this.value === 0) || (this instanceof CSSNumericValue && this._unitType === NUMBER_UNIT_TYPE && this._value === 0)
-                    const isOtherZero = (other instanceof CSSUnitValue && other.value === 0) || (other instanceof CSSNumericValue && other._unitType === NUMBER_UNIT_TYPE && other._value === 0)
-                    if (!(isThisZero && isOtherZero)) return false
-                }
-            }
-            return true
-        }
-        to(targetUnit) {
-            if (!(this instanceof CSSUnitValue)) throw new TypeError(".to() only supported on CSSUnitValue")
-            targetUnit = targetUnit.toLowerCase()
-            if (this.unit === targetUnit) return new CSSUnitValue(this.value, this.unit)
-            const cat1 = getUnitCategory(this.unit)
-            const cat2 = getUnitCategory(targetUnit)
-            if (cat1 === 'unknown' || cat2 === 'unknown' || cat1 !== cat2) throw new TypeError(`Cannot convert from "${this.unit}" to "${targetUnit}". Incompatible categories.`)
-            if (cat1 === NUMBER_UNIT_TYPE || cat2 === NUMBER_UNIT_TYPE || cat1 === 'percent' || cat2 === 'percent') throw new TypeError(`Cannot convert between units and number/percent using .to().`)
-            if (conversionRates[cat1]) {
-                const rates = conversionRates[cat1]
-                if (rates[this.unit] === undefined || rates[targetUnit] === undefined) throw new TypeError(`Conversion between "${this.unit}" and "${targetUnit}" not supported by polyfill rates.`)
-                const valueInBase = this.value * rates[this.unit]
-                const convertedValue = valueInBase / rates[targetUnit]
-                return new CSSUnitValue(convertedValue, targetUnit)
-            }
-            throw new TypeError(`Conversion from "${this.unit}" to "${targetUnit}" (category "${cat1}") is not supported by this polyfill.`)
-        }
-        toSum(...values) {
-            if (values.length > 0) throw new TypeError(".toSum() does not accept arguments.")
-            return (this instanceof CSSMathSum) ? this : new CSSMathSum([this])
-        }
-
-        // --- Default toString ---
-        toString() {
-            if (this._unitType === NUMBER_UNIT_TYPE) return String(this._value)
-            console.warn("CSSNumericValue.toString() called on base/unexpected type:", this.constructor.name)
-            return 'calc(?)'
-        }
-        static parse(cssText) {
-            const p = CSSStyleValue.parse('', cssText.trim())
-            if (p instanceof CSSNumericValue) return p
-            if (p instanceof CSSVariableReferenceValue) throw new TypeError(`Input "${cssText}" parsed as a CSSVariableReferenceValue.`)
-            throw new TypeError(`Could not parse "${cssText}" as a CSSNumericValue (parsed as ${p?.constructor?.name || 'unknown'}).`)
-        }
-    }
-
-    // --- CSSUnitValue ---
-    class CSSUnitValue extends CSSNumericValue {
-        constructor(value, unit) {
-            if (typeof value !== 'number' || !isFinite(value)) throw new TypeError("Value must be finite number.")
-            if (typeof unit !== 'string' || unit === '') throw new TypeError("Unit must be non-empty string.")
-            const unitLower = unit.toLowerCase()
-            const category = getUnitCategory(unitLower)
-            if (category === NUMBER_UNIT_TYPE) throw new TypeError(`Cannot create CSSUnitValue with unit type number.`)
-            super(value, category)
-            // Pass category to parent
-            if (category === 'unknown') console.warn(`CSSUnitValue: Created value with unknown unit "${unit}".`)
-            this._internalValue = value
-            this._unit = unitLower
-        }
-        get value() {
-            return this._internalValue
-        }
-        set value(v) {
-            if (typeof v !== 'number' || !isFinite(v)) throw new TypeError("Value must be finite number.")
-            this._internalValue = v
-        }
-        get unit() {
-            return this._unit
-        }
-        toString() {
-            return `${this.value}${this.unit}`
-        }
-    }
-
-    // --- CSSKeywordValue ---
-    class CSSKeywordValue extends CSSStyleValue {
-        constructor(value) {
-            super()
-            if (typeof value !== 'string' || value.trim() === '') throw new TypeError("Keyword value must be non-empty string.")
-            // Relaxed identifier check
-            if (!/^-?[_a-zA-Z]/.test(value) && !['inherit', 'initial', 'unset', 'revert', 'auto', 'none'].includes(value.toLowerCase())) {
-                console.warn(`CSSKeywordValue: Value "${value}" might not be a valid CSS keyword.`)
-            }
-            this._value = value
-        }
-        get value() {
-            return this._value
-        }
-        set value(v) {
-            if (typeof v !== 'string' || v.trim() === '') throw new TypeError("Keyword value must be non-empty string.")
-            this._value = v
-        }
-        toString() {
-            return this.value
-        }
-    }
-
-    // --- CSSUnparsedValue ---
-    // (Declaration moved up for forward reference)
-    class CSSUnparsedValue extends CSSStyleValue {
-        constructor(members = []) {
-            super()
-            if (!Array.isArray(members))
-                throw new TypeError("CSSUnparsedValue needs an array.")
-            if (!members.every(m => typeof m === 'string' || m instanceof CSSVariableReferenceValue)) {
-                const invalid = members.find(m => typeof m !== 'string' && !(m instanceof CSSVariableReferenceValue))
-                throw new TypeError(`CSSUnparsedValue members must be strings or CSSVariableReferenceValue. Found: ${invalid?.constructor?.name || typeof invalid}`)
-            }
-            this._members = Object.freeze([...members])
-        }
-        [Symbol.iterator]() {
-            return this._members[Symbol.iterator]()
-        }
-        get length() { return this._members.length }
-        item(i) { return this._members[i] }
-        toString() { return this._members.map(m => String(m)).join('') }
-        // Implement array-like readonly properties/methods
-        entries() { return this._members.entries() }
-        forEach(callback, thisArg) { this._members.forEach(callback, thisArg) }
-        keys() { return this._members.keys() }
-        values() { return this._members.values() }
-    }
-
-    // --- CSSVariableReferenceValue ---
-    class CSSVariableReferenceValue extends CSSStyleValue { // Doesn't inherit CSSNumericValue!
-        constructor(variable, fallback = null) {
-            super()
-            if (typeof variable !== 'string' || !variable.startsWith('--'))
-                throw new TypeError("Variable name must start with '--'.")
-            if (fallback !== null && !(fallback instanceof CSSUnparsedValue))
-                throw new TypeError("Fallback must be CSSUnparsedValue or null.")
-            this.variable = variable.trim()
-            this.fallback = fallback
-        }
-        toString() {
-            return `var(${this.variable}${this.fallback ? `, ${this.fallback.toString()}` : ''})`
-        }
-        type() {
-            console.warn("CSSVariableReferenceValue.type(): Type is indeterminate.")
-            return {}
-        }
-
-        // *** FIX: Add delegating arithmetic methods to provide the interface needed by the parser ***
-        _toNumericValue(...values) { return CSSNumericValue.prototype._toNumericValue.call(this, ...values) }
-        add(...values) { return CSSNumericValue.prototype.add.call(this, ...values) }
-        sub(...values) { return CSSNumericValue.prototype.sub.call(this, ...values) }
-        mul(...values) { return CSSNumericValue.prototype.mul.call(this, ...values) }
-        div(...values) { return CSSNumericValue.prototype.div.call(this, ...values) }
-        min(...values) { return CSSNumericValue.prototype.min.call(this, ...values) }
-        max(...values) { return CSSNumericValue.prototype.max.call(this, ...values) }
-        negate() { return CSSNumericValue.prototype.negate.call(this) }
-        invert() { return CSSNumericValue.prototype.invert.call(this) }
-        // Add equals/to/toSum? The parser uses add/sub/mul/div/negate/invert primarily.
-        // Let's skip adding the others unless needed, as VarRef isn't truly numeric itself.
-    }
-
-    // --- CSSMathValue Base ---
-    class CSSMathValue extends CSSNumericValue {
-        constructor() {
-            super(NaN, 'mixed')
-            if (this.constructor === CSSMathValue)
-                throw new TypeError("CSSMathValue is abstract.")
-            this._operands = []
-        }
-        get values() { return this._operands }
-        // Helper for formatting operands in toString()
-        _formatOperand(op, context = 'sum') { // context 'sum' or 'product'
-            let opStr = op.toString()
-            let needsParens = false
-            // Parenthesize lower precedence operations, or functions
-            if (context === 'sum' && (op instanceof CSSMathSum)) needsParens = true
-            // e.g. a + (b+c)
-            if (context === 'product' && (op instanceof CSSMathSum)) needsParens = true
-            // e.g. a * (b+c)
-            // Always wrap nested calc/min/max/clamp? Safer.
-            if (opStr.startsWith('calc(') || opStr.startsWith('min(') || opStr.startsWith('max(') || opStr.startsWith('clamp(')) {
-                needsParens = true
-                if (opStr.startsWith('calc(')) opStr = opStr.slice(5, -1).trim()
-            }
-            // Parenthesize negation if it's not a simple negative number/unit
-            if (op instanceof CSSMathNegate && !(op.value instanceof CSSUnitValue || (op.value instanceof CSSNumericValue && op.value._unitType === NUMBER_UNIT_TYPE))) {
-                needsParens = true
-            }
-            // Parenthesize inversion if it's not a simple number inversion
-            if (op instanceof CSSMathInvert && !(op.value instanceof CSSNumericValue && op.value._unitType === NUMBER_UNIT_TYPE)) {
-                needsParens = true
-            }
-
-            if (needsParens) {
-                // Check again if simple after stripping calc()
-                return (opStr.includes(' ') || opStr.includes('(') || opStr.includes(',')) ? `(${opStr})` : opStr
-            }
-            return opStr
-        }
-    }
-
-    class CSSMathSum extends CSSMathValue {
-        constructor(operands) {
-            super()
-            if (!Array.isArray(operands) || operands.length === 0)
-                throw new TypeError("CSSMathSum needs operands.")
-            this._operands = Object.freeze(operands.map((op, i) => {
-                if (op instanceof CSSNumericValue || op instanceof CSSVariableReferenceValue) return op
-                throw new TypeError(`CSSMathSum operand ${i + 1} invalid type ${op?.constructor?.name}`)
-            }))
-        }
-        get operator() { return "sum" }
-        toString() {
-            if (this.values.length === 0) return 'calc(0)'
-            let result = ''
-            for (let i = 0; i < this.values.length; i++) {
-                const op = this.values[i]
-                let sign = ' + '
-                let valueToFormat = op
-                if (op instanceof CSSMathNegate) {
-                    sign = ' - '
-                    valueToFormat = op.value
-                }
-                if (i === 0 && sign === ' - ') result += '-' + this._formatOperand(valueToFormat, 'sum')
-                else {
-                    if (i > 0) result += sign
-                    result += this._formatOperand(valueToFormat, 'sum')
-                }
-            }
-            return `calc(${result})`
-        }
-        // Refined type compatibility check
-        type() {
-            if (this._operands.length === 0) return super.type()
-            let commonType = null
-            let hasVar = false
-            let hasUnknown = false
-            for (const op of this._operands) {
-                let opType
-                if (op instanceof CSSVariableReferenceValue) {
-                    hasVar = true
-                    opType = {}
-                    /* Treat var as empty type for check */
-                }
-                else if (op instanceof CSSNumericValue) {
-                    opType = op.type()
-                }
-                else {
-                    hasUnknown = true
-                    continue
-                } // Should not happen if constructor validated
-
-                // Skip check if operand is var() - just note its presence
-                const isOpVar = (op instanceof CSSVariableReferenceValue)
-
-                if (Object.keys(opType).length === 0 && !isOpVar && !(op instanceof CSSNumericValue && op._unitType === NUMBER_UNIT_TYPE)) {
-                    hasUnknown = true
-                    continue
-                }
-
-                if (!commonType && !hasUnknown) {
-                    commonType = { ...opType }
-                } // Initialize
-                else if (!hasUnknown) {
-                    // Check compatibility with commonType, allowing var() presence
-                    const currentKeys = Object.keys(commonType).filter(k => commonType[k] !== 0)
-                    const opKeys = Object.keys(opType).filter(k => opType[k] !== 0)
-                    const currentIsVarPlaceholder = currentKeys.length === 0 && hasVar
-                    // Is commonType just from previous vars?
-
-                    if (isOpVar) continue
-                    // Don't check compatibility against var() itself
-
-                    let compatible = false
-                    // Check against established non-var commonType
-                    const commonCategory = currentKeys.find(k => k !== 'percent')
-                    const opCategory = opKeys.find(k => k !== 'percent')
-
-                    if (!commonCategory && !opCategory) compatible = true
-                    // number/percent + number/percent
-                    else if (commonCategory === 'length' && !opCategory) compatible = true
-                    // length + number/percent
-                    else if (!commonCategory && opCategory === 'length') compatible = true
-                    // number/percent + length
-                    else if (commonCategory && commonCategory === opCategory) compatible = true
-                    // unit + same unit (potentially + percent)
-                    // else: incompatible categories
-
-                    if (compatible) {
-                        // Update commonType to reflect mix if needed (e.g., adding percent)
-                        if (!commonType.length && opType.length) commonType.length = opType.length
-                        if (!commonType.percent && opType.percent) commonType.percent = opType.percent
-                        // Update other types similarly if applicable
-                    } else {
-                        console.error(`CSSMathSum incompatible additive types: {${currentKeys.join()}} + {${opKeys.join()}}. Expr:`, this.toString())
-                        return {}
-                        // Incompatible mix
-                    }
-                }
-            }
-            if (hasUnknown && !commonType) return {}
-            // Only unknowns
-            if (hasVar) console.warn("CSSMathSum.type(): Type includes var(), result indeterminate.")
-            return commonType || {}
-            // Return combined type (or empty if only vars/unknowns)
-        }
-    }
-
-    // --- CSSMathProduct ---
-    class CSSMathProduct extends CSSMathValue {
-        constructor(operands) {
-            super()
-            if (!Array.isArray(operands) || operands.length === 0) throw new TypeError("CSSMathProduct needs operands.")
-            this._operands = Object.freeze(operands.map((op, i) => {
-                if (op instanceof CSSNumericValue || op instanceof CSSVariableReferenceValue) return op
-                throw new TypeError(`CSSMathProduct operand ${i + 1} invalid type ${op?.constructor?.name}`)
-            }))
-        }
-        get operator() {
-            return "product"
-        }
-        toString() {
-            const numTerms = []
-            const denTerms = []
-            this.values.forEach(op => {
-                let valueToFormat = op
-                let isDen = false
-                if (op instanceof CSSMathInvert) {
-                    isDen = true
-                    valueToFormat = op.value
-                }
-                const termStr = this._formatOperand(valueToFormat, 'product')
-                // Use product context
-                if (isDen) denTerms.push(termStr)
-                else numTerms.push(termStr)
-            })
-            const numStr = numTerms.length === 0 ? '1' : numTerms.join(' * ')
-            let result = numStr
-            if (denTerms.length > 0) {
-                const denStr = denTerms.join(' * ')
-                // Wrap denominator if it has spaces or is a function call, indicating complexity or multiple terms
-                const wrapDen = denTerms.length > 1 || denStr.includes(' ') || denStr.includes('(')
-                result += ` / ${wrapDen ? `(${denStr})` : denStr}`
-            }
-            return `calc(${result})`
-        }
-        type() {
-            const combined = { length: 0, angle: 0, time: 0, frequency: 0, resolution: 0, flex: 0, percent: 0 }
-            let hasVar = false
-            let hasUnknown = false
-            this._operands.forEach(op => {
-                if (op instanceof CSSVariableReferenceValue) {
-                    hasVar = true
-                    return
-                }
-                let effType
-                let isInverted = op instanceof CSSMathInvert
-                const baseVal = isInverted ? op.value : op
-                if (baseVal instanceof CSSVariableReferenceValue) {
-                    hasVar = true
-                    return
-                }
-                if (!(baseVal instanceof CSSNumericValue)) {
-                    hasUnknown = true
-                    return
-                }
-                effType = baseVal.type()
-                if (Object.keys(effType).length === 0 && !(baseVal instanceof CSSNumericValue && baseVal._unitType === NUMBER_UNIT_TYPE)) {
-                    hasUnknown = true
-                    return
-                }
-
-                for (const key in effType) {
-                    if (combined.hasOwnProperty(key)) combined[key] += (isInverted ? -1 : 1) * effType[key]
-                    else {
-                        hasUnknown = true
-                    } // Should not happen
-                }
-            })
-            if (hasVar) console.warn("CSSMathProduct.type(): Type includes var(), result indeterminate.")
-            if (hasUnknown) console.warn("CSSMathProduct.type(): Operands included unknown types.")
-            // Basic percentage simplification: L * % -> L etc.
-            if (combined.percent === 1) {
-                const otherDims = Object.keys(combined).filter(k => k !== 'percent' && combined[k] === 1)
-                if (otherDims.length === 1 && Object.values(combined).filter(v => v !== 0).length === 2) {
-                    combined.percent = 0
-                    // Remove percent if combined like L^1 * %^1
-                }
-            }
-            return combined
-        }
-    }
-
-    // --- CSSMathNegate ---
-    class CSSMathNegate extends CSSMathValue {
-        constructor(value) {
-            super()
-            if (!(value instanceof CSSNumericValue || value instanceof CSSVariableReferenceValue)) throw new TypeError("CSSMathNegate needs CSSNumericValue or CSSVariableReferenceValue.")
-            this._value = value
-            this._operands = Object.freeze([value])
-        }
-        get operator() {
-            return "negate"
-        }
-        get value() {
-            return this._value
-        }
-        toString() {
-            return `calc(-1 * ${this._formatOperand(this._value, 'product')})`
-        } // Use format helper
-        type() {
-            return this._value.type()
-        } // Type delegates to inner value
-    }
-
-    // --- CSSMathInvert ---
-    class CSSMathInvert extends CSSMathValue {
-        constructor(value) {
-            super()
-            if (!(value instanceof CSSNumericValue || value instanceof CSSVariableReferenceValue)) throw new TypeError("CSSMathInvert needs CSSNumericValue or CSSVariableReferenceValue.")
-            // Check zero early
-            if ((value instanceof CSSUnitValue && value.value === 0) || (value instanceof CSSNumericValue && value._unitType === NUMBER_UNIT_TYPE && value._value === 0)) {
-                throw new RangeError("Division by zero (inversion of 0).")
-            }
-            this._value = value
-            this._operands = Object.freeze([value])
-        }
-        get operator() { return "invert" }
-        get value() { return this._value }
-        toString() { return `calc(1 / ${this._formatOperand(this._value, 'product')})` }
-        type() {
-            const valType = this._value.type()
-            const invType = {}
-            for (const key in valType) {
-                invType[key] = -valType[key]
-            } return (this._value instanceof CSSVariableReferenceValue) ? {} : invType
-        } // Handle inner var()
-    }
-
-    class CSSMathMin extends CSSMathValue {
-        constructor(...operands) {
-            super()
-            if (operands.length === 0) throw new TypeError("CSSMathMin needs >= 1 argument.")
-            this._operands = Object.freeze(operands.map((op, i) => {
-                if (op instanceof CSSNumericValue || op instanceof CSSVariableReferenceValue) return op
-                throw new TypeError(`CSSMathMin operand ${i + 1} invalid type ${op?.constructor?.name}`)
-            }))
-        }
-        get operator() { return "min" }
-        toString() { return `min(${this._operands.map(op => op.toString()).join(", ")})` }
-        type() { return this._calculateMinMaxType() }
-        _calculateMinMaxType() {
-            let commonType = null
-            let hasVar = false
-            let hasUnknown = false
-            for (const op of this._operands) {
-                let opType
-                if (op instanceof CSSVariableReferenceValue) {
-                    hasVar = true
-                    opType = {}
-                }
-                else if (op instanceof CSSNumericValue) {
-                    opType = op.type()
-                }
-                else {
-                    hasUnknown = true
-                    continue
-                }
-                const isOpVar = (op instanceof CSSVariableReferenceValue)
-                if (Object.keys(opType).length === 0 && !isOpVar && !(op instanceof CSSNumericValue && op._unitType === NUMBER_UNIT_TYPE)) {
-                    hasUnknown = true
-                    continue
-                }
-                if (!commonType && !hasUnknown) {
-                    commonType = { ...opType }
-                }
-                else if (!hasUnknown && !isOpVar) { /* Check compatibility (length/percent mix allowed) */
-                    const commonCat = Object.keys(commonType).find(k => commonType[k] !== 0 && k !== 'percent')
-                    const opCat = Object.keys(opType).find(k => opType[k] !== 0 && k !== 'percent')
-                    let compat = false
-                    if (!commonCat && !opCat) compat = true
-                    // num/perc + num/perc
-                    else if (commonCat === 'length' && !opCat) compat = true
-                    // len + num/perc
-                    else if (!commonCat && opCat === 'length') compat = true
-                    // num/perc + len
-                    else if (commonCat && commonCat === opCat) compat = true
-                    // unit + same unit
-                    if (compat) {
-                        if (opType.percent) commonType.percent = 1
-                        /* Update mix */
-                    }
-                    else {
-                        console.error(`${this.constructor.name} incompatible types: {${Object.keys(commonType).filter(k => commonType[k] !== 0)}} vs {${Object.keys(opType).filter(k => opType[k] !== 0)}}`)
-                        return {}
-                    }
-                }
-            }
-            if (hasUnknown && !commonType) return {}
-            if (hasVar) console.warn(`${this.constructor.name}.type(): Includes var(), result indeterminate.`)
-            return commonType || {}
-        }
-    }
-
-    class CSSMathMax extends CSSMathValue {
-        constructor(...operands) {
-            super()
-            if (operands.length === 0) throw new TypeError("CSSMathMax needs >= 1 argument.")
-            this._operands = Object.freeze(operands.map((op, i) => {
-                if (op instanceof CSSNumericValue || op instanceof CSSVariableReferenceValue) return op
-                throw new TypeError(`CSSMathMax operand ${i + 1} invalid type ${op?.constructor?.name}`)
-            }))
-        }
-        get operator() { return "max" }
-        toString() { return `max(${this._operands.map(op => op.toString()).join(", ")})` }
-        type() { return CSSMathMin.prototype._calculateMinMaxType.call(this) }
-    }
-
-    // --- CSSImageValue (Stub) ---
-    class CSSImageValue extends CSSStyleValue {
-        constructor(t) {
-            super()
-            this._cssText = t
-        }
-        toString() { return this._cssText }
-    }
-    // --- CSSPositionValue (Stub) ---
-    class CSSPositionValue extends CSSStyleValue {
-        constructor(x, y) {
-            super()
-            this.x = x
-            this.y = y
-            /* simplified */
-        }
-        toString() { return `${this.x} ${this.y}` }
-    }
-    // --- CSSTransformValue Stubs ---
-    class CSSTransformComponent extends CSSStyleValue {
-        constructor() {
-            super()
-            if (this.constructor === CSSTransformComponent) throw new TypeError("Abstract")
-            this.is2D = true
-        }
-    }
-    class CSSTranslate extends CSSTransformComponent {
-        constructor(x, y, z = null) {
-            super()
-            this.x = x
-            this.y = y
-            this.z = z
-            this.is2D = (z === null)
-        }
-        toString() { return this.is2D ? `translate(${this.x}, ${this.y})` : `translate3d(${this.x}, ${this.y}, ${this.z})` }
-    }
-    class CSSRotate extends CSSTransformComponent {
-        constructor(a, y = null, z = null, angle = null) {
-            super()
-            this.is2D = (y === null && z === null && angle === null)
-
-            if (this.is2D) {
-                if (!(angleOrX instanceof CSSNumericValue) || angleOrX.type().angle !== 1) {
-                    // Allow unitless 0? Spec says <angle>
-                    if (!((angleOrX instanceof CSSUnitValue && angleOrX.value === 0) || (angleOrX instanceof CSSNumericValue && angleOrX._unitType === NUMBER_UNIT_TYPE && angleOrX._value === 0))) {
-                        throw new TypeError(`CSSRotate angle must be CSSNumericValue of type angle, got ${angleOrX?.toString()}`)
-                    }
-                }
-                this.angle = angleOrX
-                this.x = this.y = this.z = CSS.number(0); // Store axis for consistency? No, keep null per spec.
-            } else {
-                // rotate3d(x, y, z, angle)
-                const parseNum = (n, name) => {
-                    if (typeof n !== 'number') throw new TypeError(`CSSRotate ${name} must be a number.`)
-                    return CSS.number(n); // Store as CSSNumericValue internally
-                }
-                this.x = parseNum(angleOrX, 'x')
-                this.y = parseNum(y, 'y')
-                this.z = parseNum(z, 'z')
-
-                if (!(angle instanceof CSSNumericValue) || angle.type().angle !== 1) {
-                    if (!((angle instanceof CSSUnitValue && angle.value === 0) || (angle instanceof CSSNumericValue && angle._unitType === NUMBER_UNIT_TYPE && angle._value === 0))) {
-                        throw new TypeError(`CSSRotate 3D angle must be CSSNumericValue of type angle, got ${angle?.toString()}`)
-                    }
-                }
-                this.angle = angle
-            }
-        }
-        toString() { return this.is2D ? `rotate(${this.angle})` : `rotate3d(${this.x._value}, ${this.y._value}, ${this.z._value}, ${this.angle.toString()})` }
-    }
-    class CSSScale extends CSSTransformComponent {
-        constructor(x, y, z = null) {
-            super()
-            const parseArg = (arg, name) => {
-                let numVal
-                if (arg instanceof CSSNumericValue) {
-                    if (Object.values(arg.type()).some(v => v !== 0)) { // Must be unitless
-                        throw new TypeError(`CSSScale ${name} must be a unitless number, got ${arg.toString()}`)
-                    }
-                    numVal = arg; // Already correct type
-                } else if (typeof arg === 'number' && isFinite(arg)) {
-                    numVal = CSS.number(arg); // Convert number to CSSNumericValue
-                } else {
-                    throw new TypeError(`CSSScale ${name} must be a finite number or unitless CSSNumericValue.`)
-                }
-                return numVal
-            }
-
-            this.x = parseArg(x, 'x')
-            // If y is explicitly undefined or null, it defaults to x. If provided, parse it.
-            this.y = (y === undefined || y === null) ? this.x : parseArg(y, 'y')
-
-            // If z is explicitly null, it's a 2D scale. If provided, parse it.
-            if (z !== null) {
-                this.z = parseArg(z, 'z')
-                this.is2D = false
-            } else {
-                this.z = CSS.number(1); // Default z to 1 for internal matrix math, but mark as 2D conceptually
-                this.is2D = true
-            }
-        }
-        toString() { return this.is2D ? (this.x == this.y ? `scale(${this.x})` : `scale(${this.x}, ${this.y})`) : `scale3d(${this.x}, ${this.y}, ${this.z})` }
-    }
-    class CSSTransformValue extends CSSStyleValue {
-        constructor(t = []) {
-            super()
-            if (!Array.isArray(t) || !t.every(i => i instanceof CSSTransformComponent)) throw new TypeError("Invalid args")
-            this.transforms = Object.freeze([...t])
-        }
-        get length() { return this.transforms.length }
-        item(i) { return this.transforms[i] }
-        get is2D() { return this.transforms.every(i => i.is2D) }
-        toString() { return this.transforms.map(i => i.toString()).join(" ") }
-        [Symbol.iterator]() { return this.transforms[Symbol.iterator]() }
-        entries() { return this.transforms.entries(); }
-        keys() { return this.transforms.keys(); }
-        values() { return this.transforms.values(); }
-        forEach(callback, thisArg) { this.transforms.forEach(callback, thisArg); }
-    }
-
-    // --- CSSStyleValue Static Parsers (Implementation) ---
-    CSSStyleValue.parse = function (property, cssText) {
-        cssText = cssText.trim()
-        if (cssText === '') throw new TypeError(`Cannot parse empty string for property "${property}"`)
-
-        // 1. Top-level var()
-        const varMatch = cssText.match(/^var\(\s*(--[a-zA-Z0-9_-]+)\s*(?:,\s*(.+)\s*)?\)$/i)
-        if (varMatch) return new CSSVariableReferenceValue(varMatch[1], varMatch[2] ? new CSSUnparsedValue([varMatch[2].trim()]) : null)
-
-        // 2. Top-level math functions
-        const mathMatch = cssText.match(/^([a-z-]+)\((.+)\)$/i)
-        if (mathMatch) {
-            const funcName = mathMatch[1].toLowerCase()
-            const content = mathMatch[2]
-            switch (funcName) {
-                case 'calc':
-                    try {
-                        return parseCssMathExpression(content)
-                    } catch (e) {
-                        console.warn(`Parse failed for calc(${content}): ${e.message}`)
-                        return new CSSUnparsedValue([cssText])
-                    }
-                case 'min':
-                case 'max':
-                    try {
-                        const args = parseFunctionArguments(content, funcName)
-                        args.forEach(a => {
-                            if (!(a instanceof CSSNumericValue || a instanceof CSSVariableReferenceValue)) throw new Error('Invalid arg')
-                        })
-                        if (args.length === 0) throw new Error('No args')
-                        return funcName === 'min' ? new CSSMathMin(...args) : new CSSMathMax(...args)
-                    }
-                    catch (e) {
-                        console.warn(`Parse failed for ${funcName}(${content}): ${e.message}`)
-                        return new CSSUnparsedValue([cssText])
-                    }
-                case 'clamp': console.warn('clamp() not parsed')
-                    return new CSSUnparsedValue([cssText])
-            }
-        }
-
-        // 3. url() -> CSSImageValue stub
-        if (cssText.match(/^url\(/i)) return new CSSImageValue(cssText)
-
-        // 4. Simple Number/Unit/Percent
-        const simpleNum = parseSimpleCssNumericValue(cssText)
-        if (simpleNum) return simpleNum
-
-        // 5. Keyword
-        if (/^(-?[_a-zA-Z][_a-zA-Z0-9-]*)$/.test(cssText)) {
-            if (!['calc', 'min', 'max', 'clamp', 'var'].includes(cssText.toLowerCase().split('(')[0])) {
-                // Avoid treating numbers as keywords unless specific ones
-                if (!/^-?\d/.test(cssText) || ['inherit', 'initial', 'unset', 'revert', 'auto', 'none'].includes(cssText.toLowerCase())) {
-                    return new CSSKeywordValue(cssText)
-                }
-            }
-        }
-
-        // 6. String Literal
-        if (cssText.match(/^(['"]).*\1$/)) return new CSSUnparsedValue([cssText])
-
-        // 7. Color Stubs (rgb, #)
-        if (cssText.match(/^(rgb|hsl)a?\(|^#/) || ['transparent', 'currentcolor'].includes(cssText.toLowerCase())) {
-            if (cssText.startsWith('rgb') || cssText.startsWith('hsl') || cssText.startsWith('#')) {
-                console.warn(`Color value "${cssText}" returned as Unparsed.`)
-                return new CSSUnparsedValue([cssText])
-            }
-            // Named colors / keywords handled above
-        }
-
-        // 8. Transform Function Stubs
-        if (cssText.match(/^(translate|rotate|scale|skew|matrix|perspective)[XYZ3d]?\(/i)) {
-            console.warn(`Transform function "${cssText}" returned as Unparsed.`)
-            return new CSSUnparsedValue([cssText])
-        }
-
-        // Fallback
-        console.warn(`CSSStyleValue.parse: Could not parse "${cssText}". Returning as CSSUnparsedValue.`)
-        return new CSSUnparsedValue([cssText])
-    }
-
-    CSSStyleValue.parseAll = function (property, cssText) {
-        /* ... comma splitting logic (mostly unchanged) ... */
-        cssText = cssText.trim()
-        if (cssText === '') return []
-        const values = []
-        let current = ''
-        let depth = 0
-        let quote = null
-        for (let i = 0; i < cssText.length; ++i) {
-            const c = cssText[i]
-            if (quote) {
-                current += c
-                if (c === quote && cssText[i - 1] !== '\\') quote = null
-            }
-            else if (c === '"' || c === "'") {
-                current += c
-                quote = c
-            }
-            else if (c === '(') {
-                current += c
-                depth++
-            }
-            else if (c === ')') {
-                current += c
-                depth = Math.max(0, depth - 1)
-            }
-            else if (c === ',' && depth === 0) {
-                values.push(current.trim())
-                current = ''
-            }
-            else {
-                current += c
-            }
-        }
-        if (current.trim() || values.length > 0) values.push(current.trim())
-        return values.filter(v => v !== '').map(v => {
-            try {
-                return CSSStyleValue.parse(property, v)
-            } catch (e) {
-                console.warn(`parseAll segment failed for "${v}": ${e.message}`)
-                return new CSSUnparsedValue([v])
-            }
-        })
-    }
-
-    class StylePropertyMap {
-        constructor(element) {
-            this._element = element
-        }
-        get size() { return this._element.style.length }
-        get(prop) {
-            const kprop = this._kebab(prop)
-            const v = this._element.style.getPropertyValue(kprop)
-            if (!v) return null
-            try {
-                return CSSStyleValue.parse(kprop, v)
-            } catch (e) {
-                console.warn(`get failed for ${kprop}: ${e.message}`)
-                return new CSSUnparsedValue([v])
-            }
-        }
-        getAll(prop) {
-            const kprop = this._kebab(prop)
-            const v = this._element.style.getPropertyValue(kprop)
-            if (!v) return []
-            try {
-                return CSSStyleValue.parseAll(kprop, v)
-            } catch (e) {
-                console.warn(`getAll failed for ${kprop}: ${e.message}`)
-                return [new CSSUnparsedValue([v])]
-            }
-        }
-        set(prop, ...vals) {
-            const kprop = this._kebab(prop)
-            if (vals.length === 0) throw new TypeError('Set requires values.')
-            const txt = vals.map(v => v instanceof CSSStyleValue ? v.toString() : String(v)).join(' ').trim()
-            try {
-                this._element.style.setProperty(kprop, txt)
-            } catch (e) {
-                console.error(`Set failed for ${kprop}=${txt}: ${e}`)
-                throw e
-            }
-        }
-        append(prop, ...vals) {
-            const kprop = this._kebab(prop)
-            if (vals.length === 0) throw new TypeError('Append requires values.')
-            const newTxt = vals.map(v => v instanceof CSSStyleValue ? v.toString() : String(v)).join(' ').trim()
-            if (!newTxt) return
-            const oldTxt = this._element.style.getPropertyValue(kprop)
-            const listProps = ['font-family', 'text-shadow', 'box-shadow', 'filter', 'transition', 'animation']
-            const isList = listProps.some(p => kprop.includes(p))
-            let finalTxt
-            if (oldTxt && isList) finalTxt = `${oldTxt}, ${newTxt}`
-            else if (oldTxt) finalTxt = `${oldTxt} ${newTxt}`
-            else finalTxt = newTxt
-            try {
-                this._element.style.setProperty(kprop, finalTxt)
-            } catch (e) {
-                console.error(`Append failed for ${kprop}=${finalTxt}: ${e}`)
-                throw e
-            }
-        }
-        delete(prop) {
-            const kprop = this._kebab(prop)
-            try {
-                this._element.style.removeProperty(kprop)
-            } catch (e) {
-                console.error(`Delete failed for ${kprop}: ${e}`)
-                throw e
-            }
-        }
-        clear() { this._element.style.cssText = '' }
-        has(prop) { return this._element.style.getPropertyValue(this._kebab(prop)) !== '' }
-        _kebab(s) { return typeof s === 'string' ? s.replace(/([A-Z])/g, m => `-${m.toLowerCase()}`) : s }
-        // Iterators... (rely on style object, iterates longhands)
-        forEach(cb, thisArg) {
-            const s = this._element.style
-            for (let i = 0; i < s.length; ++i) {
-                const p = s[i]
-                const v = this.get(p)
-                if (v !== null) cb.call(thisArg, v, p, this)
-            }
-        }
-        [Symbol.iterator]() {
-            const s = this._element.style
-            let i = 0
-            const map = this
-            return {
-                next() {
-                    if (i < s.length) {
-                        const p = s[i++]
-                        const v = map.get(p)
-                        return v !== null ? { value: [p, v], done: false } : this.next()
-                    }
-                    return { value: undefined, done: true }
-                },
-                [Symbol.iterator]() { return this }
-            }
-        }
-        entries() { return this[Symbol.iterator]() }
-        keys() {
-            const s = this._element.style
-            let i = 0
-            return {
-                next() {
-                    return i < s.length ? { value: s[i++], done: false } : { value: undefined, done: true }
-                },
-                [Symbol.iterator]() { return this }
-            }
-        }
-        values() {
-            const s = this._element.style
-            let i = 0
-            const map = this
-            return {
-                next() {
-                    if (i < s.length) {
-                        const p = s[i++]
-                        const v = map.get(p)
-                        return v !== null ? { value: v, done: false } : this.next()
-                    }
-                    return { value: undefined, done: true }
-                },
-                [Symbol.iterator]() { return this }
-            }
-        }
-    }
-
-
-
-    // --- Global Scope Injection ---
-    if (typeof window !== 'undefined') {
-        const target = window
-        const defineProp = (obj, name, value) => {
-            if (!obj.hasOwnProperty(name))
-                Object.defineProperty(obj, name, { value, writable: true, enumerable: false, configurable: true })
-        }
-
-        // Core Classes
-        defineProp(target, 'CSSStyleValue', CSSStyleValue)
-        defineProp(target, 'CSSNumericValue', CSSNumericValue)
-        defineProp(target, 'CSSUnitValue', CSSUnitValue)
-        defineProp(target, 'CSSKeywordValue', CSSKeywordValue)
-        defineProp(target, 'CSSUnparsedValue', CSSUnparsedValue)
-        defineProp(target, 'CSSVariableReferenceValue', CSSVariableReferenceValue)
-        // Math Classes
-        defineProp(target, 'CSSMathValue', CSSMathValue)
-        defineProp(target, 'CSSMathSum', CSSMathSum)
-        defineProp(target, 'CSSMathProduct', CSSMathProduct)
-        defineProp(target, 'CSSMathNegate', CSSMathNegate)
-        defineProp(target, 'CSSMathInvert', CSSMathInvert)
-        defineProp(target, 'CSSMathMin', CSSMathMin)
-        defineProp(target, 'CSSMathMax', CSSMathMax)
-        // Other Stubs
-        defineProp(target, 'CSSImageValue', CSSImageValue)
-        defineProp(target, 'CSSPositionValue', CSSPositionValue)
-        defineProp(target, 'CSSTransformValue', CSSTransformValue)
-        defineProp(target, 'CSSTranslate', CSSTranslate)
-        defineProp(target, 'CSSRotate', CSSRotate)
-        defineProp(target, 'CSSScale', CSSScale)
-        defineProp(target, 'CSSTransformComponent', CSSTransformComponent)
-
-        // attributeStyleMap
-        if (typeof HTMLElement !== 'undefined' && !HTMLElement.prototype.hasOwnProperty('attributeStyleMap')) {
-            const cache = new WeakMap()
-            Object.defineProperty(HTMLElement.prototype, 'attributeStyleMap', {
-                configurable: true, enumerable: true, get() {
-                    if (!cache.has(this)) cache.set(this, new StylePropertyMap(this))
-                    return cache.get(this)
-                }, set() {
-                    throw new Error("Cannot set read-only property 'attributeStyleMap'.")
-                }
-            })
-            console.log('Polyfilled HTMLElement.prototype.attributeStyleMap')
-        }
-
-        // CSS.* factories
-        if (typeof target.CSS === 'undefined') target.CSS = {}
-        const defineCssFactory = (name, func) => {
-            if (typeof target.CSS[name] !== 'function') Object.defineProperty(target.CSS, name, { value: func, writable: true, enumerable: true, configurable: true })
-        }
-        defineCssFactory('number', v => {
-            if (typeof v !== 'number' || !isFinite(v)) throw new TypeError('CSS.number needs finite number')
-            return new CSSNumericValue(v, NUMBER_UNIT_TYPE)
-        })
-        ALL_UNITS.forEach(unit => {
-            let name = unit.toLowerCase()
-            if (name === '%') name = 'percent'
-            if (!/^[a-z]/.test(name)) return
-            defineCssFactory(name, v => {
-                if (typeof v !== 'number' || !isFinite(v)) throw new TypeError(`CSS.${name} needs finite number`)
-                return new CSSUnitValue(v, unit)
-            })
-        })
-        console.log('Polyfilled CSS.* factory functions')
-
-        console.log('CSS Typed OM Polyfill: Finished initialization.')
-    } else {
-        console.warn('CSS Typed OM Polyfill: Not running in a browser environment.')
-    }
-
-})()