@web-atoms/core 2.5.11 → 2.5.13

package/dist-esm/style/StyleRule.js

@@ -0,0 +1,2657 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AtomStyleRules = void 0;
+exports.toUnit = toUnit;
+function toUnit(n, unit) {
+    if (!unit) {
+        unit = "";
+    }
+    return typeof n === "number" ? n + unit : n;
+}
+class AtomStyleRules {
+    constructor(name) {
+        this.style = {};
+        if (typeof name === "string") {
+            this.name = name;
+        }
+        else {
+            this.style = name ?? {};
+        }
+    }
+    alignContent(value) {
+        if (value !== undefined && value !== null) {
+            this.style.alignContent = value;
+        }
+        return this;
+    }
+    alignItems(value) {
+        if (value !== undefined && value !== null) {
+            this.style.alignItems = value;
+        }
+        return this;
+    }
+    alignSelf(value) {
+        if (value !== undefined && value !== null) {
+            this.style.alignSelf = value;
+        }
+        return this;
+    }
+    alignmentBaseline(value) {
+        if (value !== undefined && value !== null) {
+            this.style.alignmentBaseline = value;
+        }
+        return this;
+    }
+    animation(value) {
+        if (value !== undefined && value !== null) {
+            this.style.animation = value;
+        }
+        return this;
+    }
+    animationDelay(value) {
+        if (value !== undefined && value !== null) {
+            this.style.animationDelay = value;
+        }
+        return this;
+    }
+    animationDirection(value) {
+        if (value !== undefined && value !== null) {
+            this.style.animationDirection = value;
+        }
+        return this;
+    }
+    animationDuration(value) {
+        if (value !== undefined && value !== null) {
+            this.style.animationDuration = value;
+        }
+        return this;
+    }
+    animationFillMode(value) {
+        if (value !== undefined && value !== null) {
+            this.style.animationFillMode = value;
+        }
+        return this;
+    }
+    animationIterationCount(value) {
+        if (value !== undefined && value !== null) {
+            this.style.animationIterationCount = value;
+        }
+        return this;
+    }
+    animationName(value) {
+        if (value !== undefined && value !== null) {
+            this.style.animationName = value;
+        }
+        return this;
+    }
+    animationPlayState(value) {
+        if (value !== undefined && value !== null) {
+            this.style.animationPlayState = value;
+        }
+        return this;
+    }
+    animationTimingFunction(value) {
+        if (value !== undefined && value !== null) {
+            this.style.animationTimingFunction = value;
+        }
+        return this;
+    }
+    backfaceVisibility(value) {
+        if (value !== undefined && value !== null) {
+            this.style.backfaceVisibility = value;
+        }
+        return this;
+    }
+    background(value) {
+        if (value !== undefined && value !== null) {
+            this.style.background = value;
+        }
+        return this;
+    }
+    backgroundAttachment(value) {
+        if (value !== undefined && value !== null) {
+            this.style.backgroundAttachment = value;
+        }
+        return this;
+    }
+    backgroundBlendMode(value) {
+        if (value !== undefined && value !== null) {
+            this.style.backgroundBlendMode = value;
+        }
+        return this;
+    }
+    backgroundClip(value) {
+        if (value !== undefined && value !== null) {
+            this.style.backgroundClip = value;
+        }
+        return this;
+    }
+    backgroundColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.backgroundColor = value;
+        }
+        return this;
+    }
+    backgroundImage(value) {
+        if (value !== undefined && value !== null) {
+            this.style.backgroundImage = value;
+        }
+        return this;
+    }
+    backgroundOrigin(value) {
+        if (value !== undefined && value !== null) {
+            this.style.backgroundOrigin = value;
+        }
+        return this;
+    }
+    backgroundPosition(value) {
+        if (value !== undefined && value !== null) {
+            this.style.backgroundPosition = value;
+        }
+        return this;
+    }
+    backgroundPositionX(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.backgroundPositionX = toUnit(value, unit);
+        }
+        return this;
+    }
+    backgroundPositionY(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.backgroundPositionY = toUnit(value, unit);
+        }
+        return this;
+    }
+    backgroundRepeat(value) {
+        if (value !== undefined && value !== null) {
+            this.style.backgroundRepeat = value;
+        }
+        return this;
+    }
+    backgroundSize(value) {
+        if (value !== undefined && value !== null) {
+            this.style.backgroundSize = value;
+        }
+        return this;
+    }
+    baselineShift(value) {
+        if (value !== undefined && value !== null) {
+            this.style.baselineShift = value;
+        }
+        return this;
+    }
+    border(value) {
+        if (value !== undefined && value !== null) {
+            this.style.border = value;
+        }
+        return this;
+    }
+    borderBottom(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderBottom = value;
+        }
+        return this;
+    }
+    borderBottomColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderBottomColor = value;
+        }
+        return this;
+    }
+    borderBottomLeftRadius(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.borderBottomLeftRadius = toUnit(value, unit);
+        }
+        return this;
+    }
+    borderBottomRightRadius(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.borderBottomRightRadius = toUnit(value, unit);
+        }
+        return this;
+    }
+    borderBottomStyle(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderBottomStyle = value;
+        }
+        return this;
+    }
+    borderBottomWidth(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.borderBottomWidth = toUnit(value, unit);
+        }
+        return this;
+    }
+    borderCollapse(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderCollapse = value;
+        }
+        return this;
+    }
+    borderColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderColor = value;
+        }
+        return this;
+    }
+    borderImage(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderImage = value;
+        }
+        return this;
+    }
+    borderImageOutset(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderImageOutset = value;
+        }
+        return this;
+    }
+    borderImageRepeat(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderImageRepeat = value;
+        }
+        return this;
+    }
+    borderImageSlice(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderImageSlice = value;
+        }
+        return this;
+    }
+    borderImageSource(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderImageSource = value;
+        }
+        return this;
+    }
+    borderImageWidth(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderImageWidth = value;
+        }
+        return this;
+    }
+    borderLeft(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderLeft = value;
+        }
+        return this;
+    }
+    borderLeftColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderLeftColor = value;
+        }
+        return this;
+    }
+    borderLeftStyle(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderLeftStyle = value;
+        }
+        return this;
+    }
+    borderLeftWidth(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.borderLeftWidth = toUnit(value, unit);
+        }
+        return this;
+    }
+    borderRadius(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.borderRadius = toUnit(value, unit);
+        }
+        return this;
+    }
+    borderRight(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderRight = value;
+        }
+        return this;
+    }
+    borderRightColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderRightColor = value;
+        }
+        return this;
+    }
+    borderRightStyle(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderRightStyle = value;
+        }
+        return this;
+    }
+    borderRightWidth(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.borderRightWidth = toUnit(value, unit);
+        }
+        return this;
+    }
+    borderSpacing(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderSpacing = value;
+        }
+        return this;
+    }
+    borderStyle(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderStyle = value;
+        }
+        return this;
+    }
+    borderTop(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderTop = value;
+        }
+        return this;
+    }
+    borderTopColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderTopColor = value;
+        }
+        return this;
+    }
+    borderTopLeftRadius(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.borderTopLeftRadius = toUnit(value, unit);
+        }
+        return this;
+    }
+    borderTopRightRadius(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.borderTopRightRadius = toUnit(value, unit);
+        }
+        return this;
+    }
+    borderTopStyle(value) {
+        if (value !== undefined && value !== null) {
+            this.style.borderTopStyle = value;
+        }
+        return this;
+    }
+    borderTopWidth(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.borderTopWidth = toUnit(value, unit);
+        }
+        return this;
+    }
+    borderWidth(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.borderWidth = toUnit(value, unit);
+        }
+        return this;
+    }
+    bottom(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.bottom = toUnit(value, unit);
+        }
+        return this;
+    }
+    boxShadow(value) {
+        if (value !== undefined && value !== null) {
+            this.style.boxShadow = value;
+        }
+        return this;
+    }
+    boxSizing(value) {
+        if (value !== undefined && value !== null) {
+            this.style.boxSizing = value;
+        }
+        return this;
+    }
+    breakAfter(value) {
+        if (value !== undefined && value !== null) {
+            this.style.breakAfter = value;
+        }
+        return this;
+    }
+    breakBefore(value) {
+        if (value !== undefined && value !== null) {
+            this.style.breakBefore = value;
+        }
+        return this;
+    }
+    breakInside(value) {
+        if (value !== undefined && value !== null) {
+            this.style.breakInside = value;
+        }
+        return this;
+    }
+    captionSide(value) {
+        if (value !== undefined && value !== null) {
+            this.style.captionSide = value;
+        }
+        return this;
+    }
+    caretColor(value) {
+        this.style.caretColor = value;
+        return this;
+    }
+    clear(value) {
+        if (value !== undefined && value !== null) {
+            this.style.clear = value;
+        }
+        return this;
+    }
+    clip(value) {
+        if (value !== undefined && value !== null) {
+            this.style.clip = value;
+        }
+        return this;
+    }
+    clipPath(value) {
+        if (value !== undefined && value !== null) {
+            this.style.clipPath = value;
+        }
+        return this;
+    }
+    clipRule(value) {
+        if (value !== undefined && value !== null) {
+            this.style.clipRule = value;
+        }
+        return this;
+    }
+    color(value) {
+        if (value !== undefined && value !== null) {
+            this.style.color = value;
+        }
+        return this;
+    }
+    colorInterpolationFilters(value) {
+        if (value !== undefined && value !== null) {
+            this.style.colorInterpolationFilters = value;
+        }
+        return this;
+    }
+    columnCount(value) {
+        if (value !== undefined && value !== null) {
+            this.style.columnCount = value;
+        }
+        return this;
+    }
+    columnFill(value) {
+        if (value !== undefined && value !== null) {
+            this.style.columnFill = value;
+        }
+        return this;
+    }
+    columnGap(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.columnGap = toUnit(value, unit);
+        }
+        return this;
+    }
+    columnRule(value) {
+        if (value !== undefined && value !== null) {
+            this.style.columnRule = value;
+        }
+        return this;
+    }
+    columnRuleColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.columnRuleColor = value;
+        }
+        return this;
+    }
+    columnRuleStyle(value) {
+        if (value !== undefined && value !== null) {
+            this.style.columnRuleStyle = value;
+        }
+        return this;
+    }
+    columnRuleWidth(value) {
+        if (value !== undefined && value !== null) {
+            this.style.columnRuleWidth = value;
+        }
+        return this;
+    }
+    columnSpan(value) {
+        if (value !== undefined && value !== null) {
+            this.style.columnSpan = value;
+        }
+        return this;
+    }
+    columnWidth(value) {
+        if (value !== undefined && value !== null) {
+            this.style.columnWidth = value;
+        }
+        return this;
+    }
+    columns(value) {
+        if (value !== undefined && value !== null) {
+            this.style.columns = value;
+        }
+        return this;
+    }
+    content(value) {
+        if (value !== undefined && value !== null) {
+            this.style.content = value;
+        }
+        return this;
+    }
+    counterIncrement(value) {
+        if (value !== undefined && value !== null) {
+            this.style.counterIncrement = value;
+        }
+        return this;
+    }
+    counterReset(value) {
+        if (value !== undefined && value !== null) {
+            this.style.counterReset = value;
+        }
+        return this;
+    }
+    cssFloat(value) {
+        if (value !== undefined && value !== null) {
+            this.style.cssFloat = value;
+        }
+        return this;
+    }
+    cssText(value) {
+        if (value !== undefined && value !== null) {
+            this.style.cssText = value;
+        }
+        return this;
+    }
+    cursor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.cursor = value;
+        }
+        return this;
+    }
+    direction(value) {
+        if (value !== undefined && value !== null) {
+            this.style.direction = value;
+        }
+        return this;
+    }
+    display(value) {
+        if (value !== undefined && value !== null) {
+            this.style.display = value;
+        }
+        return this;
+    }
+    dominantBaseline(value) {
+        if (value !== undefined && value !== null) {
+            this.style.dominantBaseline = value;
+        }
+        return this;
+    }
+    emptyCells(value) {
+        if (value !== undefined && value !== null) {
+            this.style.emptyCells = value;
+        }
+        return this;
+    }
+    enableBackground(value) {
+        if (value !== undefined && value !== null) {
+            this.style.enableBackground = value;
+        }
+        return this;
+    }
+    fill(value) {
+        if (value !== undefined && value !== null) {
+            this.style.fill = value;
+        }
+        return this;
+    }
+    fillOpacity(value) {
+        if (value !== undefined && value !== null) {
+            this.style.fillOpacity = value;
+        }
+        return this;
+    }
+    fillRule(value) {
+        if (value !== undefined && value !== null) {
+            this.style.fillRule = value;
+        }
+        return this;
+    }
+    filter(value) {
+        if (value !== undefined && value !== null) {
+            this.style.filter = value;
+        }
+        return this;
+    }
+    flex(value) {
+        if (value !== undefined && value !== null) {
+            this.style.flex = value;
+        }
+        return this;
+    }
+    flexBasis(value) {
+        if (value !== undefined && value !== null) {
+            this.style.flexBasis = value;
+        }
+        return this;
+    }
+    flexDirection(value) {
+        if (value !== undefined && value !== null) {
+            this.style.flexDirection = value;
+        }
+        return this;
+    }
+    flexFlow(value) {
+        if (value !== undefined && value !== null) {
+            this.style.flexFlow = value;
+        }
+        return this;
+    }
+    flexGrow(value) {
+        if (value !== undefined && value !== null) {
+            this.style.flexGrow = value;
+        }
+        return this;
+    }
+    flexShrink(value) {
+        if (value !== undefined && value !== null) {
+            this.style.flexShrink = value;
+        }
+        return this;
+    }
+    flexWrap(value) {
+        if (value !== undefined && value !== null) {
+            this.style.flexWrap = value;
+        }
+        return this;
+    }
+    float(value) {
+        if (value !== undefined && value !== null) {
+            this.style.float = value;
+        }
+        return this;
+    }
+    floodColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.floodColor = value;
+        }
+        return this;
+    }
+    floodOpacity(value) {
+        if (value !== undefined && value !== null) {
+            this.style.floodOpacity = value;
+        }
+        return this;
+    }
+    font(value) {
+        if (value !== undefined && value !== null) {
+            this.style.font = value;
+        }
+        return this;
+    }
+    fontFamily(value) {
+        if (value !== undefined && value !== null) {
+            this.style.fontFamily = value;
+        }
+        return this;
+    }
+    fontFeatureSettings(value) {
+        if (value !== undefined && value !== null) {
+            this.style.fontFeatureSettings = value;
+        }
+        return this;
+    }
+    fontSize(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.fontSize = toUnit(value, unit);
+        }
+        return this;
+    }
+    fontSizeAdjust(value) {
+        if (value !== undefined && value !== null) {
+            this.style.fontSizeAdjust = value;
+        }
+        return this;
+    }
+    fontStretch(value) {
+        if (value !== undefined && value !== null) {
+            this.style.fontStretch = value;
+        }
+        return this;
+    }
+    fontStyle(value) {
+        if (value !== undefined && value !== null) {
+            this.style.fontStyle = value;
+        }
+        return this;
+    }
+    fontVariant(value) {
+        if (value !== undefined && value !== null) {
+            this.style.fontVariant = value;
+        }
+        return this;
+    }
+    fontWeight(value) {
+        if (value !== undefined && value !== null) {
+            this.style.fontWeight = value;
+        }
+        return this;
+    }
+    gap(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.gap = toUnit(value, unit);
+        }
+        return this;
+    }
+    glyphOrientationHorizontal(value) {
+        if (value !== undefined && value !== null) {
+            this.style.glyphOrientationHorizontal = value;
+        }
+        return this;
+    }
+    glyphOrientationVertical(value) {
+        if (value !== undefined && value !== null) {
+            this.style.glyphOrientationVertical = value;
+        }
+        return this;
+    }
+    grid(value) {
+        if (value !== undefined && value !== null) {
+            this.style.grid = value;
+        }
+        return this;
+    }
+    gridArea(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridArea = value;
+        }
+        return this;
+    }
+    gridAutoColumns(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridAutoColumns = value;
+        }
+        return this;
+    }
+    gridAutoFlow(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridAutoFlow = value;
+        }
+        return this;
+    }
+    gridAutoRows(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridAutoRows = value;
+        }
+        return this;
+    }
+    gridColumn(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridColumn = value;
+        }
+        return this;
+    }
+    gridColumnEnd(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridColumnEnd = value;
+        }
+        return this;
+    }
+    gridColumnGap(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridColumnGap = value;
+        }
+        return this;
+    }
+    gridColumnStart(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridColumnStart = value;
+        }
+        return this;
+    }
+    gridGap(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridGap = value;
+        }
+        return this;
+    }
+    gridRow(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridRow = value;
+        }
+        return this;
+    }
+    gridRowEnd(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridRowEnd = value;
+        }
+        return this;
+    }
+    gridRowGap(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridRowGap = value;
+        }
+        return this;
+    }
+    gridRowStart(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridRowStart = value;
+        }
+        return this;
+    }
+    gridTemplate(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridTemplate = value;
+        }
+        return this;
+    }
+    gridTemplateAreas(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridTemplateAreas = value;
+        }
+        return this;
+    }
+    gridTemplateColumns(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridTemplateColumns = value;
+        }
+        return this;
+    }
+    gridTemplateRows(value) {
+        if (value !== undefined && value !== null) {
+            this.style.gridTemplateRows = value;
+        }
+        return this;
+    }
+    height(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.height = toUnit(value, unit);
+        }
+        return this;
+    }
+    imeMode(value) {
+        if (value !== undefined && value !== null) {
+            this.style.imeMode = value;
+        }
+        return this;
+    }
+    justifyContent(value) {
+        if (value !== undefined && value !== null) {
+            this.style.justifyContent = value;
+        }
+        return this;
+    }
+    justifyItems(value) {
+        if (value !== undefined && value !== null) {
+            this.style.justifyItems = value;
+        }
+        return this;
+    }
+    justifySelf(value) {
+        if (value !== undefined && value !== null) {
+            this.style.justifySelf = value;
+        }
+        return this;
+    }
+    kerning(value) {
+        if (value !== undefined && value !== null) {
+            this.style.kerning = value;
+        }
+        return this;
+    }
+    layoutGrid(value) {
+        if (value !== undefined && value !== null) {
+            this.style.layoutGrid = value;
+        }
+        return this;
+    }
+    layoutGridChar(value) {
+        if (value !== undefined && value !== null) {
+            this.style.layoutGridChar = value;
+        }
+        return this;
+    }
+    layoutGridLine(value) {
+        if (value !== undefined && value !== null) {
+            this.style.layoutGridLine = value;
+        }
+        return this;
+    }
+    layoutGridMode(value) {
+        if (value !== undefined && value !== null) {
+            this.style.layoutGridMode = value;
+        }
+        return this;
+    }
+    layoutGridType(value) {
+        if (value !== undefined && value !== null) {
+            this.style.layoutGridType = value;
+        }
+        return this;
+    }
+    left(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.left = toUnit(value, unit);
+        }
+        return this;
+    }
+    letterSpacing(value) {
+        if (value !== undefined && value !== null) {
+            this.style.letterSpacing = value;
+        }
+        return this;
+    }
+    lightingColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.lightingColor = value;
+        }
+        return this;
+    }
+    lineBreak(value) {
+        if (value !== undefined && value !== null) {
+            this.style.lineBreak = value;
+        }
+        return this;
+    }
+    lineHeight(value) {
+        if (value !== undefined && value !== null) {
+            this.style.lineHeight = value;
+        }
+        return this;
+    }
+    listStyle(value) {
+        if (value !== undefined && value !== null) {
+            this.style.listStyle = value;
+        }
+        return this;
+    }
+    listStyleImage(value) {
+        if (value !== undefined && value !== null) {
+            this.style.listStyleImage = value;
+        }
+        return this;
+    }
+    listStylePosition(value) {
+        if (value !== undefined && value !== null) {
+            this.style.listStylePosition = value;
+        }
+        return this;
+    }
+    listStyleType(value) {
+        if (value !== undefined && value !== null) {
+            this.style.listStyleType = value;
+        }
+        return this;
+    }
+    margin(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.margin = toUnit(value, unit);
+        }
+        return this;
+    }
+    marginBottom(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.marginBottom = toUnit(value, unit);
+        }
+        return this;
+    }
+    marginLeft(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.marginLeft = toUnit(value, unit);
+        }
+        return this;
+    }
+    marginRight(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.marginRight = toUnit(value, unit);
+        }
+        return this;
+    }
+    marginTop(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.marginTop = toUnit(value, unit);
+        }
+        return this;
+    }
+    marginInlineStart(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.marginInlineStart = toUnit(value, unit);
+        }
+        return this;
+    }
+    marginInlineEnd(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.marginInlineEnd = toUnit(value, unit);
+        }
+        return this;
+    }
+    marginBlockStart(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.marginBlockStart = toUnit(value, unit);
+        }
+        return this;
+    }
+    marginBlockEnd(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.marginBlockEnd = toUnit(value, unit);
+        }
+        return this;
+    }
+    marker(value) {
+        if (value !== undefined && value !== null) {
+            this.style.marker = value;
+        }
+        return this;
+    }
+    markerEnd(value) {
+        if (value !== undefined && value !== null) {
+            this.style.markerEnd = value;
+        }
+        return this;
+    }
+    markerMid(value) {
+        if (value !== undefined && value !== null) {
+            this.style.markerMid = value;
+        }
+        return this;
+    }
+    markerStart(value) {
+        if (value !== undefined && value !== null) {
+            this.style.markerStart = value;
+        }
+        return this;
+    }
+    mask(value) {
+        if (value !== undefined && value !== null) {
+            this.style.mask = value;
+        }
+        return this;
+    }
+    maskImage(value) {
+        if (value !== undefined && value !== null) {
+            this.style.maskImage = value;
+        }
+        return this;
+    }
+    maxHeight(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.maxHeight = toUnit(value, unit);
+        }
+        return this;
+    }
+    maxWidth(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.maxWidth = toUnit(value, unit);
+        }
+        return this;
+    }
+    minHeight(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.minHeight = toUnit(value, unit);
+        }
+        return this;
+    }
+    minWidth(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.minWidth = toUnit(value, unit);
+        }
+        return this;
+    }
+    msContentZoomChaining(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msContentZoomChaining = value;
+        }
+        return this;
+    }
+    msContentZoomLimit(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msContentZoomLimit = value;
+        }
+        return this;
+    }
+    msContentZoomLimitMax(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msContentZoomLimitMax = value;
+        }
+        return this;
+    }
+    msContentZoomLimitMin(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msContentZoomLimitMin = value;
+        }
+        return this;
+    }
+    msContentZoomSnap(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msContentZoomSnap = value;
+        }
+        return this;
+    }
+    msContentZoomSnapPoints(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msContentZoomSnapPoints = value;
+        }
+        return this;
+    }
+    msContentZoomSnapType(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msContentZoomSnapType = value;
+        }
+        return this;
+    }
+    msContentZooming(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msContentZooming = value;
+        }
+        return this;
+    }
+    msFlowFrom(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msFlowFrom = value;
+        }
+        return this;
+    }
+    msFlowInto(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msFlowInto = value;
+        }
+        return this;
+    }
+    msFontFeatureSettings(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msFontFeatureSettings = value;
+        }
+        return this;
+    }
+    msGridColumn(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msGridColumn = value;
+        }
+        return this;
+    }
+    msGridColumnAlign(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msGridColumnAlign = value;
+        }
+        return this;
+    }
+    msGridColumnSpan(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msGridColumnSpan = value;
+        }
+        return this;
+    }
+    msGridColumns(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msGridColumns = value;
+        }
+        return this;
+    }
+    msGridRow(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msGridRow = value;
+        }
+        return this;
+    }
+    msGridRowAlign(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msGridRowAlign = value;
+        }
+        return this;
+    }
+    msGridRowSpan(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msGridRowSpan = value;
+        }
+        return this;
+    }
+    msGridRows(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msGridRows = value;
+        }
+        return this;
+    }
+    msHighContrastAdjust(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msHighContrastAdjust = value;
+        }
+        return this;
+    }
+    msHyphenateLimitChars(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msHyphenateLimitChars = value;
+        }
+        return this;
+    }
+    msHyphenateLimitLines(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msHyphenateLimitLines = value;
+        }
+        return this;
+    }
+    msHyphenateLimitZone(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msHyphenateLimitZone = value;
+        }
+        return this;
+    }
+    msHyphens(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msHyphens = value;
+        }
+        return this;
+    }
+    msImeAlign(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msImeAlign = value;
+        }
+        return this;
+    }
+    msOverflowStyle(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msOverflowStyle = value;
+        }
+        return this;
+    }
+    msScrollChaining(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msScrollChaining = value;
+        }
+        return this;
+    }
+    msScrollLimit(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msScrollLimit = value;
+        }
+        return this;
+    }
+    msScrollLimitXMax(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msScrollLimitXMax = value;
+        }
+        return this;
+    }
+    msScrollLimitXMin(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msScrollLimitXMin = value;
+        }
+        return this;
+    }
+    msScrollLimitYMax(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msScrollLimitYMax = value;
+        }
+        return this;
+    }
+    msScrollLimitYMin(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msScrollLimitYMin = value;
+        }
+        return this;
+    }
+    msScrollRails(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msScrollRails = value;
+        }
+        return this;
+    }
+    msScrollSnapPointsX(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msScrollSnapPointsX = value;
+        }
+        return this;
+    }
+    msScrollSnapPointsY(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msScrollSnapPointsY = value;
+        }
+        return this;
+    }
+    msScrollSnapType(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msScrollSnapType = value;
+        }
+        return this;
+    }
+    msScrollSnapX(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msScrollSnapX = value;
+        }
+        return this;
+    }
+    msScrollSnapY(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msScrollSnapY = value;
+        }
+        return this;
+    }
+    msScrollTranslation(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msScrollTranslation = value;
+        }
+        return this;
+    }
+    msTextCombineHorizontal(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msTextCombineHorizontal = value;
+        }
+        return this;
+    }
+    msTextSizeAdjust(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msTextSizeAdjust = value;
+        }
+        return this;
+    }
+    msTouchAction(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msTouchAction = value;
+        }
+        return this;
+    }
+    msTouchSelect(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msTouchSelect = value;
+        }
+        return this;
+    }
+    msUserSelect(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msUserSelect = value;
+        }
+        return this;
+    }
+    msWrapFlow(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msWrapFlow = value;
+        }
+        return this;
+    }
+    msWrapMargin(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msWrapMargin = value;
+        }
+        return this;
+    }
+    msWrapThrough(value) {
+        if (value !== undefined && value !== null) {
+            this.style.msWrapThrough = value;
+        }
+        return this;
+    }
+    objectFit(value) {
+        if (value !== undefined && value !== null) {
+            this.style.objectFit = value;
+        }
+        return this;
+    }
+    objectPosition(value) {
+        if (value !== undefined && value !== null) {
+            this.style.objectPosition = value;
+        }
+        return this;
+    }
+    opacity(value) {
+        if (value !== undefined && value !== null) {
+            this.style.opacity = value;
+        }
+        return this;
+    }
+    order(value) {
+        if (value !== undefined && value !== null) {
+            this.style.order = value;
+        }
+        return this;
+    }
+    orphans(value) {
+        if (value !== undefined && value !== null) {
+            this.style.orphans = value;
+        }
+        return this;
+    }
+    outline(value) {
+        if (value !== undefined && value !== null) {
+            this.style.outline = value;
+        }
+        return this;
+    }
+    outlineColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.outlineColor = value;
+        }
+        return this;
+    }
+    outlineOffset(value) {
+        if (value !== undefined && value !== null) {
+            this.style.outlineOffset = value;
+        }
+        return this;
+    }
+    outlineStyle(value) {
+        if (value !== undefined && value !== null) {
+            this.style.outlineStyle = value;
+        }
+        return this;
+    }
+    outlineWidth(value) {
+        if (value !== undefined && value !== null) {
+            this.style.outlineWidth = value;
+        }
+        return this;
+    }
+    overflow(value) {
+        if (value !== undefined && value !== null) {
+            this.style.overflow = value;
+        }
+        return this;
+    }
+    overflowX(value) {
+        if (value !== undefined && value !== null) {
+            this.style.overflowX = value;
+        }
+        return this;
+    }
+    overflowY(value) {
+        if (value !== undefined && value !== null) {
+            this.style.overflowY = value;
+        }
+        return this;
+    }
+    padding(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.padding = toUnit(value, unit);
+        }
+        return this;
+    }
+    paddingBottom(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.paddingBottom = toUnit(value, unit);
+        }
+        return this;
+    }
+    paddingLeft(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.paddingLeft = toUnit(value, unit);
+        }
+        return this;
+    }
+    paddingRight(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.paddingRight = toUnit(value, unit);
+        }
+        return this;
+    }
+    paddingTop(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.paddingTop = toUnit(value, unit);
+        }
+        return this;
+    }
+    paddingInlineStart(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.paddingInlineStart = toUnit(value, unit);
+        }
+        return this;
+    }
+    paddingInlineEnd(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.paddingInlineEnd = toUnit(value, unit);
+        }
+        return this;
+    }
+    pageBreakAfter(value) {
+        if (value !== undefined && value !== null) {
+            this.style.pageBreakAfter = value;
+        }
+        return this;
+    }
+    pageBreakBefore(value) {
+        if (value !== undefined && value !== null) {
+            this.style.pageBreakBefore = value;
+        }
+        return this;
+    }
+    pageBreakInside(value) {
+        if (value !== undefined && value !== null) {
+            this.style.pageBreakInside = value;
+        }
+        return this;
+    }
+    penAction(value) {
+        if (value !== undefined && value !== null) {
+            this.style.penAction = value;
+        }
+        return this;
+    }
+    perspective(value) {
+        if (value !== undefined && value !== null) {
+            this.style.perspective = value;
+        }
+        return this;
+    }
+    perspectiveOrigin(value) {
+        if (value !== undefined && value !== null) {
+            this.style.perspectiveOrigin = value;
+        }
+        return this;
+    }
+    pointerEvents(value) {
+        if (value !== undefined && value !== null) {
+            this.style.pointerEvents = value;
+        }
+        return this;
+    }
+    position(value) {
+        if (value !== undefined && value !== null) {
+            this.style.position = value;
+        }
+        return this;
+    }
+    quotes(value) {
+        if (value !== undefined && value !== null) {
+            this.style.quotes = value;
+        }
+        return this;
+    }
+    resize(value) {
+        if (value !== undefined && value !== null) {
+            this.style.resize = value;
+        }
+        return this;
+    }
+    right(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.right = toUnit(value, unit);
+        }
+        return this;
+    }
+    rotate(value) {
+        if (value !== undefined && value !== null) {
+            this.style.rotate = value;
+        }
+        return this;
+    }
+    rowGap(value) {
+        if (value !== undefined && value !== null) {
+            this.style.rowGap = value;
+        }
+        return this;
+    }
+    rubyAlign(value) {
+        if (value !== undefined && value !== null) {
+            this.style.rubyAlign = value;
+        }
+        return this;
+    }
+    rubyOverhang(value) {
+        if (value !== undefined && value !== null) {
+            this.style.rubyOverhang = value;
+        }
+        return this;
+    }
+    rubyPosition(value) {
+        if (value !== undefined && value !== null) {
+            this.style.rubyPosition = value;
+        }
+        return this;
+    }
+    scale(value) {
+        if (value !== undefined && value !== null) {
+            this.style.scale = value;
+        }
+        return this;
+    }
+    custom(name, value) {
+        this.style[name] = value;
+        return this;
+    }
+    scrollBarWidth(value, unit) {
+        var _a, _b;
+        this.style["scrollbar-width"] = toUnit(value, unit);
+        (_a = this.style).subclasses ?? (_a.subclasses = {});
+        const ws = (_b = this.style.subclasses)["::-webkit-scrollbar"] ?? (_b["::-webkit-scrollbar"] = {});
+        ws.width = toUnit(value, unit);
+        return this;
+    }
+    scrollBarColor(thumb, bg) {
+        var _a, _b;
+        this.style["scrollbar-color"] = `${thumb} ${bg}`;
+        (_a = this.style).subclasses ?? (_a.subclasses = {});
+        const ws = (_b = this.style.subclasses)["::-webkit-scrollbar-thumb"] ?? (_b["::-webkit-scrollbar-thumb"] = {});
+        ws.backgroundColor = bg;
+        ws.borderRadius = "20px";
+        ws.border = `3px solid ${thumb}`;
+        return this;
+    }
+    stopColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.stopColor = value;
+        }
+        return this;
+    }
+    stopOpacity(value) {
+        if (value !== undefined && value !== null) {
+            this.style.stopOpacity = value;
+        }
+        return this;
+    }
+    stroke(value) {
+        if (value !== undefined && value !== null) {
+            this.style.stroke = value;
+        }
+        return this;
+    }
+    strokeDasharray(value) {
+        if (value !== undefined && value !== null) {
+            this.style.strokeDasharray = value;
+        }
+        return this;
+    }
+    strokeDashoffset(value) {
+        if (value !== undefined && value !== null) {
+            this.style.strokeDashoffset = value;
+        }
+        return this;
+    }
+    strokeLinecap(value) {
+        if (value !== undefined && value !== null) {
+            this.style.strokeLinecap = value;
+        }
+        return this;
+    }
+    strokeLinejoin(value) {
+        if (value !== undefined && value !== null) {
+            this.style.strokeLinejoin = value;
+        }
+        return this;
+    }
+    strokeMiterlimit(value) {
+        if (value !== undefined && value !== null) {
+            this.style.strokeMiterlimit = value;
+        }
+        return this;
+    }
+    strokeOpacity(value) {
+        if (value !== undefined && value !== null) {
+            this.style.strokeOpacity = value;
+        }
+        return this;
+    }
+    strokeWidth(value) {
+        if (value !== undefined && value !== null) {
+            this.style.strokeWidth = value;
+        }
+        return this;
+    }
+    tableLayout(value) {
+        if (value !== undefined && value !== null) {
+            this.style.tableLayout = value;
+        }
+        return this;
+    }
+    textAlign(value) {
+        if (value !== undefined && value !== null) {
+            this.style.textAlign = value;
+        }
+        return this;
+    }
+    textAlignLast(value) {
+        if (value !== undefined && value !== null) {
+            this.style.textAlignLast = value;
+        }
+        return this;
+    }
+    textAnchor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.textAnchor = value;
+        }
+        return this;
+    }
+    textCombineUpright(value) {
+        if (value !== undefined && value !== null) {
+            this.style.textCombineUpright = value;
+        }
+        return this;
+    }
+    textDecoration(value) {
+        if (value !== undefined && value !== null) {
+            this.style.textDecoration = value;
+        }
+        return this;
+    }
+    textIndent(value) {
+        if (value !== undefined && value !== null) {
+            this.style.textIndent = value;
+        }
+        return this;
+    }
+    textJustify(value) {
+        if (value !== undefined && value !== null) {
+            this.style.textJustify = value;
+        }
+        return this;
+    }
+    textKashida(value) {
+        if (value !== undefined && value !== null) {
+            this.style.textKashida = value;
+        }
+        return this;
+    }
+    textKashidaSpace(value) {
+        if (value !== undefined && value !== null) {
+            this.style.textKashidaSpace = value;
+        }
+        return this;
+    }
+    textOverflow(value) {
+        if (value !== undefined && value !== null) {
+            this.style.textOverflow = value;
+        }
+        return this;
+    }
+    textShadow(value) {
+        if (value !== undefined && value !== null) {
+            this.style.textShadow = value;
+        }
+        return this;
+    }
+    textTransform(value) {
+        if (value !== undefined && value !== null) {
+            this.style.textTransform = value;
+        }
+        return this;
+    }
+    textUnderlinePosition(value) {
+        if (value !== undefined && value !== null) {
+            this.style.textUnderlinePosition = value;
+        }
+        return this;
+    }
+    top(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.top = toUnit(value, unit);
+        }
+        return this;
+    }
+    touchAction(value) {
+        if (value !== undefined && value !== null) {
+            this.style.touchAction = value;
+        }
+        return this;
+    }
+    transform(value) {
+        if (value !== undefined && value !== null) {
+            this.style.transform = value;
+        }
+        return this;
+    }
+    transformOrigin(value) {
+        if (value !== undefined && value !== null) {
+            this.style.transformOrigin = value;
+        }
+        return this;
+    }
+    transformStyle(value) {
+        if (value !== undefined && value !== null) {
+            this.style.transformStyle = value;
+        }
+        return this;
+    }
+    transition(value) {
+        if (value !== undefined && value !== null) {
+            this.style.transition = value;
+        }
+        return this;
+    }
+    transitionDelay(value) {
+        if (value !== undefined && value !== null) {
+            this.style.transitionDelay = value;
+        }
+        return this;
+    }
+    transitionDuration(value) {
+        if (value !== undefined && value !== null) {
+            this.style.transitionDuration = value;
+        }
+        return this;
+    }
+    transitionProperty(value) {
+        if (value !== undefined && value !== null) {
+            this.style.transitionProperty = value;
+        }
+        return this;
+    }
+    transitionTimingFunction(value) {
+        if (value !== undefined && value !== null) {
+            this.style.transitionTimingFunction = value;
+        }
+        return this;
+    }
+    translate(value) {
+        if (value !== undefined && value !== null) {
+            this.style.translate = value;
+        }
+        return this;
+    }
+    unicodeBidi(value) {
+        if (value !== undefined && value !== null) {
+            this.style.unicodeBidi = value;
+        }
+        return this;
+    }
+    userSelect(value) {
+        if (value !== undefined && value !== null) {
+            this.style.userSelect = value;
+        }
+        return this;
+    }
+    userDrag(value) {
+        if (value !== undefined && value !== null) {
+            this.style.userDrag = value;
+        }
+        return this;
+    }
+    verticalAlign(value) {
+        if (value !== undefined && value !== null) {
+            this.style.verticalAlign = value;
+        }
+        return this;
+    }
+    visibility(value) {
+        if (value !== undefined && value !== null) {
+            this.style.visibility = value;
+        }
+        return this;
+    }
+    webkitAlignContent(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitAlignContent = value;
+        }
+        return this;
+    }
+    webkitAlignItems(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitAlignItems = value;
+        }
+        return this;
+    }
+    webkitAlignSelf(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitAlignSelf = value;
+        }
+        return this;
+    }
+    webkitAnimation(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitAnimation = value;
+        }
+        return this;
+    }
+    webkitAnimationDelay(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitAnimationDelay = value;
+        }
+        return this;
+    }
+    webkitAnimationDirection(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitAnimationDirection = value;
+        }
+        return this;
+    }
+    webkitAnimationDuration(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitAnimationDuration = value;
+        }
+        return this;
+    }
+    webkitAnimationFillMode(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitAnimationFillMode = value;
+        }
+        return this;
+    }
+    webkitAnimationIterationCount(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitAnimationIterationCount = value;
+        }
+        return this;
+    }
+    webkitAnimationName(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitAnimationName = value;
+        }
+        return this;
+    }
+    webkitAnimationPlayState(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitAnimationPlayState = value;
+        }
+        return this;
+    }
+    webkitAnimationTimingFunction(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitAnimationTimingFunction = value;
+        }
+        return this;
+    }
+    webkitAppearance(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitAppearance = value;
+        }
+        return this;
+    }
+    webkitBackfaceVisibility(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBackfaceVisibility = value;
+        }
+        return this;
+    }
+    webkitBackgroundClip(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBackgroundClip = value;
+        }
+        return this;
+    }
+    webkitBackgroundOrigin(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBackgroundOrigin = value;
+        }
+        return this;
+    }
+    webkitBackgroundSize(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBackgroundSize = value;
+        }
+        return this;
+    }
+    webkitBorderBottomLeftRadius(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBorderBottomLeftRadius = value;
+        }
+        return this;
+    }
+    webkitBorderBottomRightRadius(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBorderBottomRightRadius = value;
+        }
+        return this;
+    }
+    webkitBorderImage(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBorderImage = value;
+        }
+        return this;
+    }
+    webkitBorderRadius(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBorderRadius = value;
+        }
+        return this;
+    }
+    webkitBorderTopLeftRadius(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBorderTopLeftRadius = value;
+        }
+        return this;
+    }
+    webkitBorderTopRightRadius(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBorderTopRightRadius = value;
+        }
+        return this;
+    }
+    webkitBoxAlign(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBoxAlign = value;
+        }
+        return this;
+    }
+    webkitBoxDirection(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBoxDirection = value;
+        }
+        return this;
+    }
+    webkitBoxFlex(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBoxFlex = value;
+        }
+        return this;
+    }
+    webkitBoxOrdinalGroup(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBoxOrdinalGroup = value;
+        }
+        return this;
+    }
+    webkitBoxOrient(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBoxOrient = value;
+        }
+        return this;
+    }
+    webkitBoxPack(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBoxPack = value;
+        }
+        return this;
+    }
+    webkitBoxSizing(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitBoxSizing = value;
+        }
+        return this;
+    }
+    webkitColumnBreakAfter(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitColumnBreakAfter = value;
+        }
+        return this;
+    }
+    webkitColumnBreakBefore(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitColumnBreakBefore = value;
+        }
+        return this;
+    }
+    webkitColumnBreakInside(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitColumnBreakInside = value;
+        }
+        return this;
+    }
+    webkitColumnCount(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitColumnCount = value;
+        }
+        return this;
+    }
+    webkitColumnGap(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitColumnGap = value;
+        }
+        return this;
+    }
+    webkitColumnRule(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitColumnRule = value;
+        }
+        return this;
+    }
+    webkitColumnRuleColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitColumnRuleColor = value;
+        }
+        return this;
+    }
+    webkitColumnRuleStyle(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitColumnRuleStyle = value;
+        }
+        return this;
+    }
+    webkitColumnRuleWidth(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitColumnRuleWidth = value;
+        }
+        return this;
+    }
+    webkitColumnSpan(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitColumnSpan = value;
+        }
+        return this;
+    }
+    webkitColumnWidth(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitColumnWidth = value;
+        }
+        return this;
+    }
+    webkitColumns(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitColumns = value;
+        }
+        return this;
+    }
+    webkitFilter(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitFilter = value;
+        }
+        return this;
+    }
+    webkitFlex(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitFlex = value;
+        }
+        return this;
+    }
+    webkitFlexBasis(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitFlexBasis = value;
+        }
+        return this;
+    }
+    webkitFlexDirection(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitFlexDirection = value;
+        }
+        return this;
+    }
+    webkitFlexFlow(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitFlexFlow = value;
+        }
+        return this;
+    }
+    webkitFlexGrow(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitFlexGrow = value;
+        }
+        return this;
+    }
+    webkitFlexShrink(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitFlexShrink = value;
+        }
+        return this;
+    }
+    webkitFlexWrap(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitFlexWrap = value;
+        }
+        return this;
+    }
+    webkitJustifyContent(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitJustifyContent = value;
+        }
+        return this;
+    }
+    webkitOrder(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitOrder = value;
+        }
+        return this;
+    }
+    webkitPerspective(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitPerspective = value;
+        }
+        return this;
+    }
+    webkitPerspectiveOrigin(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitPerspectiveOrigin = value;
+        }
+        return this;
+    }
+    webkitTapHighlightColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitTapHighlightColor = value;
+        }
+        return this;
+    }
+    webkitTextFillColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitTextFillColor = value;
+        }
+        return this;
+    }
+    webkitTextSizeAdjust(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitTextSizeAdjust = value;
+        }
+        return this;
+    }
+    webkitTextStroke(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitTextStroke = value;
+        }
+        return this;
+    }
+    webkitTextStrokeColor(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitTextStrokeColor = value;
+        }
+        return this;
+    }
+    webkitTextStrokeWidth(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitTextStrokeWidth = value;
+        }
+        return this;
+    }
+    webkitTransform(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitTransform = value;
+        }
+        return this;
+    }
+    webkitTransformOrigin(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitTransformOrigin = value;
+        }
+        return this;
+    }
+    webkitTransformStyle(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitTransformStyle = value;
+        }
+        return this;
+    }
+    webkitTransition(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitTransition = value;
+        }
+        return this;
+    }
+    webkitTransitionDelay(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitTransitionDelay = value;
+        }
+        return this;
+    }
+    webkitTransitionDuration(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitTransitionDuration = value;
+        }
+        return this;
+    }
+    webkitTransitionProperty(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitTransitionProperty = value;
+        }
+        return this;
+    }
+    webkitTransitionTimingFunction(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitTransitionTimingFunction = value;
+        }
+        return this;
+    }
+    webkitUserModify(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitUserModify = value;
+        }
+        return this;
+    }
+    webkitUserSelect(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitUserSelect = value;
+        }
+        return this;
+    }
+    webkitUserDrag(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitUserDrag = value;
+        }
+        return this;
+    }
+    webkitWritingMode(value) {
+        if (value !== undefined && value !== null) {
+            this.style.webkitWritingMode = value;
+        }
+        return this;
+    }
+    whiteSpace(value) {
+        if (value !== undefined && value !== null) {
+            this.style.whiteSpace = value;
+        }
+        return this;
+    }
+    widows(value) {
+        if (value !== undefined && value !== null) {
+            this.style.widows = value;
+        }
+        return this;
+    }
+    width(value, unit = "px") {
+        if (value !== undefined && value !== null) {
+            this.style.width = toUnit(value, unit);
+        }
+        return this;
+    }
+    wordBreak(value) {
+        if (value !== undefined && value !== null) {
+            this.style.wordBreak = value;
+        }
+        return this;
+    }
+    wordSpacing(value) {
+        if (value !== undefined && value !== null) {
+            this.style.wordSpacing = value;
+        }
+        return this;
+    }
+    wordWrap(value) {
+        if (value !== undefined && value !== null) {
+            this.style.wordWrap = value;
+        }
+        return this;
+    }
+    writingMode(value) {
+        if (value !== undefined && value !== null) {
+            this.style.writingMode = value;
+        }
+        return this;
+    }
+    zIndex(value) {
+        if (value !== undefined && value !== null) {
+            this.style.zIndex = value;
+        }
+        return this;
+    }
+    zoom(value) {
+        if (value !== undefined && value !== null) {
+            this.style.zoom = value;
+        }
+        return this;
+    }
+    displayFlex() {
+        this.style.display = "flex";
+        return this;
+    }
+    flexStretch() {
+        return this.flex("1 1 100%");
+    }
+    roundBorderFull() {
+        this.style.borderRadius = "9999px";
+        return this;
+    }
+    subclass(name, style) {
+        var _a;
+        if (style instanceof AtomStyleRules) {
+            style = style.style;
+        }
+        const sc = (_a = this.style).subclasses ?? (_a.subclasses = {});
+        sc[name] = style;
+        return this;
+    }
+    childSubclass(name, style) {
+        return this.subclass(" > " + name, style);
+    }
+    subclasses(...styles) {
+        var _a;
+        const sc = (_a = this.style).subclasses ?? (_a.subclasses = {});
+        for (const iterator of styles) {
+            sc[iterator.name] = iterator.style;
+        }
+        return this;
+    }
+    /**
+     * Creates rule for immediate child like `this > child`
+     * @param styles children
+     * @returns this
+     */
+    childSubclasses(...styles) {
+        var _a;
+        const sc = (_a = this.style).subclasses ?? (_a.subclasses = {});
+        for (const iterator of styles) {
+            sc[" > " + iterator.name] = iterator.style;
+        }
+        return this;
+    }
+    roundBox(bgColor, padding = 5, radius = 5, unit = "px") {
+        this.style.padding = toUnit(padding, unit);
+        this.style.borderRadius = toUnit(radius, unit);
+        this.style.borderColor = bgColor;
+        this.style.backgroundColor = bgColor;
+        return this;
+    }
+    maximizeAbsolute() {
+        this.style.position = "absolute";
+        this.style.left = 0;
+        this.style.top = 0;
+        this.style.bottom = 0;
+        this.style.right = 0;
+        return this;
+    }
+    setRect(position, { top, left, right, bottom, width, height } = {}, unit = "px") {
+        this.style.position = position;
+        if (typeof top !== "undefined") {
+            this.style.top = toUnit(top, unit);
+        }
+        if (typeof left !== "undefined") {
+            this.style.left = toUnit(left, unit);
+        }
+        if (typeof width !== "undefined") {
+            this.style.width = toUnit(width, unit);
+        }
+        if (typeof height !== "undefined") {
+            this.style.height = toUnit(height, unit);
+        }
+        if (typeof right !== "undefined") {
+            this.style.right = toUnit(right, unit);
+        }
+        if (typeof bottom !== "undefined") {
+            this.style.bottom = toUnit(bottom, unit);
+        }
+        return this;
+    }
+    absolutePosition(rect = {}, unit = "px") {
+        return this.setRect("absolute", rect, unit);
+    }
+    relativePosition(rect = {}, unit = "px") {
+        return this.setRect("relative", rect, unit);
+    }
+    absoluteDockTop(height, unit = "px") {
+        this.style.position = "absolute";
+        this.style.left = 0;
+        this.style.top = 0;
+        this.style.right = 0;
+        this.style.height = toUnit(height, unit);
+        return this;
+    }
+    absoluteDockBottom(top, unit = "px") {
+        this.style.position = "absolute";
+        this.style.left = 0;
+        this.style.bottom = 0;
+        this.style.right = 0;
+        this.style.top = toUnit(top, unit);
+        return this;
+    }
+    defaultBoxShadow() {
+        this.style.boxShadow = "rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;";
+        this.style.border = "solid 1px rgba(0, 0, 0, 0.05)";
+        return this;
+    }
+    textEllipsis() {
+        this.style.overflow = "hidden";
+        this.style.whiteSpace = "nowrap";
+        this.style.textOverflow = "ellipsis";
+        return this;
+    }
+    hover(style) {
+        var _a;
+        const sc = (_a = this.style).subclasses ?? (_a.subclasses = {});
+        sc[":hover"] = { ...sc[":hover"], ...style.style };
+        return this;
+    }
+    focus(style) {
+        var _a;
+        const sc = (_a = this.style).subclasses ?? (_a.subclasses = {});
+        sc[":focus"] = { ...sc[":focus"], ...style.style };
+        return this;
+    }
+    hoverBackgroundColor(color) {
+        var _a;
+        const sc = (_a = this.style).subclasses ?? (_a.subclasses = {});
+        const hover = sc[":hover"] ?? (sc[":hover"] = {});
+        hover.backgroundColor = color;
+        return this;
+    }
+    hoverColor(color) {
+        var _a;
+        const sc = (_a = this.style).subclasses ?? (_a.subclasses = {});
+        const hover = sc[":hover"] ?? (sc[":hover"] = {});
+        hover.color = color;
+        return this;
+    }
+    and(...styles) {
+        var _a;
+        const sc = (_a = this.style).subclasses ?? (_a.subclasses = {});
+        for (const style of styles) {
+            sc[style.name] = style.style;
+        }
+        return this;
+    }
+    nested(...styles) {
+        var _a;
+        const sc = (_a = this.style).subclasses ?? (_a.subclasses = {});
+        for (const style of styles) {
+            sc[" " + style.name] = style.style;
+        }
+        return this;
+    }
+    child(...styles) {
+        var _a;
+        const sc = (_a = this.style).subclasses ?? (_a.subclasses = {});
+        for (const style of styles) {
+            sc[" > " + style.name] = style.style;
+        }
+        return this;
+    }
+    merge(...styles) {
+        for (const { style } of styles) {
+            for (const key in style) {
+                if (Object.prototype.hasOwnProperty.call(style, key)) {
+                    const element = style[key];
+                    this.style[key] = element;
+                }
+            }
+        }
+        return this;
+    }
+    toStyleSheet() {
+        const list = createStyleText(this.name, [], this.style);
+        return list.join("\n");
+    }
+    /**
+     * @deprecated Please use `displayNone(":not(XX) > A.XX")` format
+     * @param showSelector showSelector
+     * @param hideSelector hideSelector
+     * @returns AtomStyleRule
+     */
+    toggle(showSelector, hideSelector) {
+        var _a;
+        const sc = (_a = this.style).subclasses ?? (_a.subclasses = {});
+        const h = sc[hideSelector] ?? (sc[hideSelector] = {});
+        const d = sc[showSelector] ?? (sc[showSelector] = {});
+        d.display = "inherit";
+        h.display = "none";
+        return this;
+    }
+    displayNone(...selectors) {
+        var _a;
+        const sc = (_a = this.style).subclasses ?? (_a.subclasses = {});
+        for (const iterator of selectors) {
+            const d = sc[iterator] ?? (sc[iterator] = {});
+            d.display = "none";
+        }
+        return this;
+    }
+    /**
+     * Creates vertical flex layout with 5px gap
+     * @param p defaults { direction: "column", alignItems: "center", justifyContent: "space-around" }
+     * @param units px
+     */
+    verticalFlexLayout(a = {}, units = "px") {
+        a.direction ?? (a.direction = "column");
+        return this.flexLayout(a, units);
+    }
+    /**
+     * Creates flex layout with 5px gap
+     * @param p defaults { direction: "row", alignItems: "center", justifyContent: "space-around" }
+     * @param units px
+     */
+    flexLayout({ direction = "row", alignItems = "center", justifyContent = "space-around", stretch, inline, gap = 4 } = {}, units = "px") {
+        if (direction !== void 0) {
+            this.style.flexDirection = direction;
+        }
+        if (alignItems !== void 0) {
+            this.style.alignItems = alignItems;
+        }
+        if (justifyContent !== void 0) {
+            this.style.justifyContent = justifyContent;
+        }
+        if (stretch) {
+            this.style.flex = "1 1 100%";
+        }
+        if (gap) {
+            this.style.gap = toUnit(gap, units);
+        }
+        this.style.display = inline ? "inline-flex" : "flex";
+        return this;
+    }
+    toString() {
+        const list = [];
+        if (this.style) {
+            for (const key in this.style) {
+                if (Object.prototype.hasOwnProperty.call(this.style, key)) {
+                    const element = this.style[key];
+                    if (key === "subclasses") {
+                        throw new Error("Single AtomStyleRule cannot contain subclasses");
+                    }
+                    if (key === "toString") {
+                        continue;
+                    }
+                    if (!element) {
+                        continue;
+                    }
+                    const name = fromCamelToHyphen(key);
+                    if (element.url) {
+                        list.push(`${name}: url(${element.url})`);
+                        continue;
+                    }
+                    list.push(`${name}: ${element}`);
+                }
+            }
+        }
+        return list.join(";");
+    }
+}
+exports.AtomStyleRules = AtomStyleRules;
+/**
+ * Creates new style rule
+ * @param selector [optional] name of child subclass
+ * @returns StyleRuleClass
+ */
+function StyleRule(selector) {
+    return new AtomStyleRules(selector);
+}
+exports.default = StyleRule;
+const styleId = 1;
+function fromCamelToHyphen(input) {
+    return input.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function createStyleText(name, pairs, styles) {
+    const styleList = [];
+    for (const key in styles) {
+        if (styles.hasOwnProperty(key)) {
+            if (/^(\_\$\_|className$|toString$)/i.test(key)) {
+                continue;
+            }
+            const element = styles[key];
+            if (element === undefined || element === null) {
+                continue;
+            }
+            const keyName = fromCamelToHyphen(key);
+            if (key === "subclasses") {
+                const n = name;
+                for (const subclassKey in element) {
+                    if (element.hasOwnProperty(subclassKey)) {
+                        const ve = element[subclassKey];
+                        pairs = createStyleText(`${n}${subclassKey}`, pairs, ve);
+                    }
+                }
+            }
+            else {
+                if (element.url) {
+                    styleList.push(`${keyName}: url(${element})`);
+                }
+                else {
+                    styleList.push(`${keyName}: ${element}`);
+                }
+            }
+        }
+    }
+    if (!name) {
+        return [styleList.join(";")];
+    }
+    const cname = fromCamelToHyphen(name);
+    const styleClassName = `${cname}`;
+    if (styleList.length) {
+        pairs.push(`.${styleClassName} { ${styleList.join(";\r\n")}; }`);
+    }
+    return pairs;
+}
+//# sourceMappingURL=StyleRule.js.map