From f2c36f42296da3a64d140d08e7ef678dbc1114ba Mon Sep 17 00:00:00 2001 From: binwen Date: Fri, 28 Aug 2026 09:28:26 +0800 Subject: [PATCH 1/8] Add UT --- Fun.Css.Tests/AnimationTransitionTests.fs | 186 +++++++++++++++ Fun.Css.Tests/BuilderCoreTests.fs | 145 ++++++++++++ Fun.Css.Tests/ColorFontTests.fs | 39 +++ Fun.Css.Tests/DimensionTests.fs | 219 +++++++++++++++++ Fun.Css.Tests/Fun.Css.Tests.fsproj | 8 + Fun.Css.Tests/GridFlexTests.fs | 165 +++++++++++++ Fun.Css.Tests/MiscTests.fs | 275 ++++++++++++++++++++++ Fun.Css.Tests/TransformTests.fs | 152 ++++++++++++ Fun.Css.Tests/TypographyTests.fs | 257 ++++++++++++++++++++ 9 files changed, 1446 insertions(+) create mode 100644 Fun.Css.Tests/AnimationTransitionTests.fs create mode 100644 Fun.Css.Tests/BuilderCoreTests.fs create mode 100644 Fun.Css.Tests/ColorFontTests.fs create mode 100644 Fun.Css.Tests/DimensionTests.fs create mode 100644 Fun.Css.Tests/GridFlexTests.fs create mode 100644 Fun.Css.Tests/MiscTests.fs create mode 100644 Fun.Css.Tests/TransformTests.fs create mode 100644 Fun.Css.Tests/TypographyTests.fs diff --git a/Fun.Css.Tests/AnimationTransitionTests.fs b/Fun.Css.Tests/AnimationTransitionTests.fs new file mode 100644 index 0000000..a377358 --- /dev/null +++ b/Fun.Css.Tests/AnimationTransitionTests.fs @@ -0,0 +1,186 @@ +module Fun.Css.Tests.AnimationTransitionTests + +open System +open Microsoft.Extensions.ObjectPool +open Xunit + +let objectPoolProvider = DefaultObjectPoolProvider() +let stringBuilderPool = objectPoolProvider.CreateStringBuilderPool() + +type StyleStrBuilder() = + inherit Fun.Css.CssBuilder() + + member inline _.Run([] combine: Fun.Css.Internal.CombineKeyValue) = + let sb = stringBuilderPool.Get() + let str = combine.Invoke(sb).ToString() + stringBuilderPool.Return sb + str + +let style = StyleStrBuilder() + +[] +let ``animation shorthand and name/duration/delay`` () = + let actual = + style { + animation "slidein 3s ease-in 1s infinite" + animationName "my-keyframes" + animationDuration 3 + animationDuration (TimeSpan.FromMilliseconds 500.0) + animationDelay 1 + animationDelay (TimeSpan.FromMilliseconds 250.0) + } + + Assert.Equal( + "animation: slidein 3s ease-in 1s infinite; animation-name: my-keyframes; animation-duration: 3s; animation-duration: 500ms; animation-delay: 1s; animation-delay: 250ms; ", + actual + ) + +[] +let ``animation timing functions`` () = + let actual = + style { + animationTimingFunctionEase + animationTimingFunctionLinear + animationTimingFunctionEaseIn + animationTimingFunctionEaseOut + animationTimingFunctionEaseInOut + animationTimingFunctionCubicBezier 0.1 0.2 0.3 0.4 + animationTimingFunctionInitial + animationTimingFunctionInheritFromParent + } + + Assert.Equal( + "animation-timing-function: ease; animation-timing-function: linear; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: cubic-bezier(0.1,0.2,0.3,0.4); animation-timing-function: initial; animation-timing-function: inherit; ", + actual + ) + +[] +let ``animation direction`` () = + let actual = + style { + animationDirectionNormal + animationDirectionReverse + animationDirectionAlternate + animationDirectionAlternateReverse + animationDirectionInitial + animationDirectionInheritFromParent + } + + Assert.Equal( + "animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; animation-direction: initial; animation-direction: inherit; ", + actual + ) + +[] +let ``animation play state`` () = + let actual = + style { + animationPlayStateRunning + animationPlayStatePaused + animationPlayStateInitial + animationPlayStateInheritFromParent + } + + Assert.Equal( + "animation-play-state: running; animation-play-state: paused; animation-play-state: initial; animation-play-state: inherit; ", + actual + ) + +[] +let ``animation iteration count`` () = + let actual = + style { + animationIterationCountInfinite + animationIterationCountInitial + animationIterationCountInheritFromParent + } + + Assert.Equal( + "animation-iteration-count: infinite; animation-iteration-count: initial; animation-iteration-count: inherit; ", + actual + ) + +[] +let ``animation fill mode`` () = + let actual = + style { + animationFillModeNone + animationFillModeForwards + animationFillModeBackwards + animationFillModeBoth + animationFillModeInitial + animationFillModeInheritFromParent + } + + Assert.Equal( + "animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; animation-fill-mode: initial; animation-fill-mode: inherit; ", + actual + ) + +[] +let ``animation duration count`` () = + let actual = style { animationDurationCount 3 } + Assert.Equal("animation-duration-count: 3; ", actual) + +[] +let ``transition shorthand and property`` () = + let actual = + style { + transition "all 0.3s ease-in-out" + transitionProperty "opacity" + } + + Assert.Equal("transition: all 0.3s ease-in-out; transition-property: opacity; ", actual) + +[] +let ``transition duration overloads`` () = + let actual = + style { + transitionDuration (TimeSpan.FromMilliseconds 300.0) + transitionDurationSeconds 2 + transitionDurationSeconds 1.5 + transitionDurationMilliseconds 250 + transitionDurationMilliseconds 250.0 + } + + Assert.Equal( + "transition-duration: 300ms; transition-duration: 2s; transition-duration: 1.5s; transition-duration: 250ms; transition-duration: 250ms; ", + actual + ) + +[] +let ``transition delay overloads`` () = + let actual = + style { + transitionDelay (TimeSpan.FromMilliseconds 100.0) + transitionDelaySeconds 1 + transitionDelaySeconds 0.5 + transitionDelayMilliseconds 200 + transitionDelayMilliseconds 200.0 + } + + Assert.Equal( + "transition-delay: 100ms; transition-delay: 1s; transition-delay: 0.5s; transition-delay: 200ms; transition-delay: 200ms; ", + actual + ) + +[] +let ``transition timing functions`` () = + let actual = + style { + transitionTimingFunctionEase + transitionTimingFunctionLinear + transitionTimingFunctionEaseIn + transitionTimingFunctionEaseOut + transitionTimingFunctionEaseInOut + transitionTimingFunctionStepStart + transitionTimingFunctionStepEnd + transitionTimingFunctionCubicBezier 0.1 0.2 0.3 0.4 + transitionTimingFunctionInitial + transitionTimingFunctionInheritFromParent + } + + Assert.Equal( + "transition-timing-function: ease; transition-timing-function: linear; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: step-start; transition-timing-function: step-end; transition-timing-function: cubic-bezier(0.1,0.2,0.3,0.4); transition-timing-function: initial; transition-timing-function: inherit; ", + actual + ) diff --git a/Fun.Css.Tests/BuilderCoreTests.fs b/Fun.Css.Tests/BuilderCoreTests.fs new file mode 100644 index 0000000..de63208 --- /dev/null +++ b/Fun.Css.Tests/BuilderCoreTests.fs @@ -0,0 +1,145 @@ +module Fun.Css.Tests.BuilderCoreTests + +open System.Text +open Microsoft.Extensions.ObjectPool +open Xunit +open Fun.Css + +let objectPoolProvider = DefaultObjectPoolProvider() +let stringBuilderPool = objectPoolProvider.CreateStringBuilderPool() + +type StyleStrBuilder() = + inherit Fun.Css.CssBuilder() + + member inline _.Run([] combine: Fun.Css.Internal.CombineKeyValue) = + let sb = stringBuilderPool.Get() + let str = combine.Invoke(sb).ToString() + stringBuilderPool.Return sb + str + +let style = StyleStrBuilder() + +let private render (comb: Internal.CombineKeyValue) = + let sb = stringBuilderPool.Get() + let str = comb.Invoke(sb).ToString() + stringBuilderPool.Return sb + str + +[] +let ``Yield unit produces empty string`` () = + let actual = style { () } + Assert.Equal("", actual) + +[] +let ``Yield raw key-value string appends with trailing semicolon`` () = + let actual = style { "color: red" } + Assert.Equal("color: red; ", actual) + +[] +let ``Yield string tuple emits key value pair`` () = + let actual = style { yield ("color", "blue") } + Assert.Equal("color: blue; ", actual) + +[] +let ``Yield int tuple emits key value pair`` () = + let actual = style { yield ("z-index", 5) } + Assert.Equal("z-index: 5; ", actual) + +[] +let ``Yield float tuple emits key value pair`` () = + let actual = style { yield ("opacity", 0.5) } + Assert.Equal("opacity: 0.5; ", actual) + +[] +let ``Yield bool tuple emits key value pair`` () = + let actual = style { yield ("flag", true) } + Assert.Equal("flag: True; ", actual) + +[] +let ``if-else branching works with yielded tuples`` () = + let useRed = true + + let actual = + style { + if useRed then + yield ("color", "red") + else + yield ("color", "blue") + } + + Assert.Equal("color: red; ", actual) + +[] +let ``if without else yields Zero`` () = + let actual = + style { + if false then + yield ("color", "red") + } + + Assert.Equal("", actual) + +[] +let ``for loop over sequence works with yielded values`` () = + let actual = + style { + for i in 1..3 do + yield ($"prop-{i}", string i) + } + + Assert.Equal("prop-1: 1; prop-2: 2; prop-3: 3; ", actual) + +[] +let ``for loop with list of colors`` () = + let colors = [ "red"; "green" ] + + let actual = + style { + for c in colors do + yield ("border-color", c) + } + + Assert.Equal("border-color: red; border-color: green; ", actual) + +[] +let ``custom operation appends arbitrary key value`` () = + let actual = + style { + custom "--my-var" "10px" + custom "scroll-margin-top" "2rem" + } + + Assert.Equal("--my-var: 10px; scroll-margin-top: 2rem; ", actual) + +[] +let ``Internal andand combinator merges in order`` () = + let c1 = Internal.CombineKeyValue(fun sb -> sb.Append("a: 1; ")) + let c2 = Internal.CombineKeyValue(fun sb -> sb.Append("b: 2; ")) + let merged = Internal.(&&&) c1 c2 + Assert.Equal("a: 1; b: 2; ", render merged) + +[] +let ``Internal and-greater appends key value pair`` () = + let c1 = Internal.CombineKeyValue(fun sb -> sb) + let merged = Internal.(&>>) c1 ("color", "red") + Assert.Equal("color: red; ", render merged) + +[] +let ``Makers mkPxWithKV appends px suffix for int`` () = + let m = Internal.Makers.mkPxWithKV ("width", 10) + Assert.Equal("width: 10px; ", render m) + +[] +let ``Makers mkPxWithKV appends px suffix for float`` () = + let m = Internal.Makers.mkPxWithKV ("width", 10.5) + Assert.Equal("width: 10.5px; ", render m) + +[] +let ``Makers mkWithKV without px for int`` () = + let m = Internal.Makers.mkWithKV ("z-index", 3) + Assert.Equal("z-index: 3; ", render m) + +[] +let ``Makers mkWithKV without px for float`` () = + let m = Internal.Makers.mkWithKV ("opacity", 0.25) + Assert.Equal("opacity: 0.25; ", render m) diff --git a/Fun.Css.Tests/ColorFontTests.fs b/Fun.Css.Tests/ColorFontTests.fs new file mode 100644 index 0000000..838e586 --- /dev/null +++ b/Fun.Css.Tests/ColorFontTests.fs @@ -0,0 +1,39 @@ +module Fun.Css.Tests.ColorFontTests + +open Xunit +open Fun.Css + +[] +let ``color.hsl produces hsl string`` () = + Assert.Equal("hsl(120,50%,50%)", color.hsl (120.0, 50.0, 50.0)) + +[] +let ``color.rgb produces rgb string`` () = + Assert.Equal("rgb(255,0,0)", color.rgb (255, 0, 0)) + +[] +let ``color.rgba produces rgba string`` () = + Assert.Equal("rgba(255,0,0,0.5)", color.rgba (255, 0, 0, 0.5)) + +[] +let ``color named literals are hex values`` () = + Assert.Equal("#CD5C5C", color.indianRed) + Assert.Equal("#FF0000", color.red) + Assert.Equal("#FFC0CB", color.pink) + Assert.Equal("#FFFFFF", color.white) + Assert.Equal("#000000", color.black) + Assert.Equal("transparent", color.transparent) + +[] +let ``color literals work inside the builder`` () = + let styled: Internal.CombineKeyValue = + (CssBuilder()).Yield(("color", color.aliceBlue)) + + let str = styled.Invoke(System.Text.StringBuilder()).ToString() + Assert.Equal("color: #F0F8FF; ", str) + +[] +let ``font literals are names`` () = + Assert.Equal("Arial", font.arial) + Assert.Equal("Arial Black", font.arialBlack) + Assert.Equal("Andale Mono", font.andaleMono) diff --git a/Fun.Css.Tests/DimensionTests.fs b/Fun.Css.Tests/DimensionTests.fs new file mode 100644 index 0000000..39a8b4e --- /dev/null +++ b/Fun.Css.Tests/DimensionTests.fs @@ -0,0 +1,219 @@ +module Fun.Css.Tests.DimensionTests + +open Microsoft.Extensions.ObjectPool +open Xunit + +let objectPoolProvider = DefaultObjectPoolProvider() +let stringBuilderPool = objectPoolProvider.CreateStringBuilderPool() + +type StyleStrBuilder() = + inherit Fun.Css.CssBuilder() + + member inline _.Run([] combine: Fun.Css.Internal.CombineKeyValue) = + let sb = stringBuilderPool.Get() + let str = combine.Invoke(sb).ToString() + stringBuilderPool.Return sb + str + +let style = StyleStrBuilder() + +[] +let ``width overloads`` () = + let actual = + style { + width 100 + width "50%" + } + + Assert.Equal("width: 100px; width: 50%; ", actual) + +[] +let ``minWidth and maxWidth overloads`` () = + let actual = + style { + minWidth 10 + minWidth "10rem" + maxWidth 200 + maxWidth "80%" + } + + Assert.Equal("min-width: 10px; min-width: 10rem; max-width: 200px; max-width: 80%; ", actual) + +[] +let ``height overloads and keywords`` () = + let actual = + style { + height 100 + height "100vh" + heightMaxContent + heightMinContent + heightInitial + heightInheritFromParent + } + + Assert.Equal( + "height: 100px; height: 100vh; height: max-content; height: min-content; height: initial; height: inherit; ", + actual + ) + +[] +let ``top right bottom left overloads`` () = + let actual = + style { + top 10 + top "10%" + right 20 + right "auto" + bottom 30 + bottom "1rem" + left 40 + left "0" + } + + Assert.Equal( + "top: 10px; top: 10%; right: 20px; right: auto; bottom: 30px; bottom: 1rem; left: 40px; left: 0; ", + actual + ) + +[] +let ``margin all overloads`` () = + let actual = + style { + margin 10 + margin "1rem" + margin 10 20 + margin "1rem" "2rem" + margin 1 2 3 4 + margin "1px" "2px" "3px" "4px" + } + + Assert.Equal( + "margin: 10px; margin: 1rem; margin: 10px 20px; margin: 1rem 2rem; margin: 1px 2px 3px 4px; margin: 1px 2px 3px 4px; ", + actual + ) + +[] +let ``margin sides overloads`` () = + let actual = + style { + marginLeft 5 + marginLeft "auto" + marginRight 6 + marginRight "auto" + marginTop 7 + marginTop "1em" + marginBottom 8 + marginBottom "2em" + } + + Assert.Equal( + "margin-left: 5px; margin-left: auto; margin-right: 6px; margin-right: auto; margin-top: 7px; margin-top: 1em; margin-bottom: 8px; margin-bottom: 2em; ", + actual + ) + +[] +let ``padding all overloads`` () = + let actual = + style { + padding 10 + padding "1rem" + padding 10 20 + padding "1rem" "2rem" + padding 1 2 3 4 + padding "1px" "2px" "3px" "4px" + } + + Assert.Equal( + "padding: 10px; padding: 1rem; padding: 10px 20px; padding: 1rem 2rem; padding: 1px 2px 3px 4px; padding: 1px 2px 3px 4px; ", + actual + ) + +[] +let ``padding sides overloads`` () = + let actual = + style { + paddingLeft 5 + paddingLeft "1em" + paddingRight 6 + paddingRight "2em" + paddingTop 7 + paddingTop "3em" + paddingBottom 8 + paddingBottom "4em" + } + + Assert.Equal( + "padding-left: 5px; padding-left: 1em; padding-right: 6px; padding-right: 2em; padding-top: 7px; padding-top: 3em; padding-bottom: 8px; padding-bottom: 4em; ", + actual + ) + +[] +let ``zIndex and opacity`` () = + let actual = + style { + zIndex 10 + opacity 0.5 + } + + Assert.Equal("z-index: 10; opacity: 0.5; ", actual) + +[] +let ``zoom`` () = + let actual = style { zoom 1.5 } + Assert.Equal("zoom: 1.5; ", actual) + +[] +let ``box sizing and display samples`` () = + let actual = + style { + boxSizingBorderBox + displayNone + displayBlock + displayInlineElement + displayGrid + displayContents + } + + Assert.Equal( + "box-sizing: border-box; display: none; display: block; display: inline; display: grid; display: contents; ", + actual + ) + +[] +let ``position keywords`` () = + let actual = + style { + positionDefaultStatic + positionRelative + positionAbsolute + positionFixed + positionSticky + } + + Assert.Equal( + "position: static; position: relative; position: absolute; position: fixed; position: sticky; ", + actual + ) + +[] +let ``overflow variants`` () = + let actual = + style { + overflowHidden + overflowXAuto + overflowYScroll + } + + Assert.Equal("overflow: hidden; overflow-x: auto; overflow-y: scroll; ", actual) + +[] +let ``all shorthand keywords`` () = + let actual = + style { + allInitial + allInherit + allUnset + allRevert + } + + Assert.Equal("all: initial; all: inherit; all: unset; all: revert; ", actual) diff --git a/Fun.Css.Tests/Fun.Css.Tests.fsproj b/Fun.Css.Tests/Fun.Css.Tests.fsproj index 402aa19..03d5916 100644 --- a/Fun.Css.Tests/Fun.Css.Tests.fsproj +++ b/Fun.Css.Tests/Fun.Css.Tests.fsproj @@ -10,6 +10,14 @@ + + + + + + + + diff --git a/Fun.Css.Tests/GridFlexTests.fs b/Fun.Css.Tests/GridFlexTests.fs new file mode 100644 index 0000000..5cb4cfd --- /dev/null +++ b/Fun.Css.Tests/GridFlexTests.fs @@ -0,0 +1,165 @@ +module Fun.Css.Tests.GridFlexTests + +open Microsoft.Extensions.ObjectPool +open Xunit + +let objectPoolProvider = DefaultObjectPoolProvider() +let stringBuilderPool = objectPoolProvider.CreateStringBuilderPool() + +type StyleStrBuilder() = + inherit Fun.Css.CssBuilder() + + member inline _.Run([] combine: Fun.Css.Internal.CombineKeyValue) = + let sb = stringBuilderPool.Get() + let str = combine.Invoke(sb).ToString() + stringBuilderPool.Return sb + str + +let style = StyleStrBuilder() + +[] +let ``gridTemplateColumns overloads`` () = + let actual = + style { + gridTemplateColumns [ 100; 200; 100 ] + gridTemplateColumns "1fr 1fr 2fr" + gridTemplateColumns 3 "1fr" + gridTemplateColumns 3 "1fr" "col-start" + } + + Assert.Equal( + "grid-template-columns: 100px 200px 100px ; grid-template-columns: 1fr 1fr 2fr; grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr, [col-start]); ", + actual + ) + +[] +let ``gridTemplateRows overloads`` () = + let actual = + style { + gridTemplateRows [ 100; 200 ] + gridTemplateRows "1fr 10% 250px auto" + gridTemplateRows 3 "10%" + gridTemplateRows 3 "10%" "row-start" + } + + Assert.Equal( + "grid-template-rows: 100px 200px ; grid-template-rows: 1fr 10% 250px auto; grid-template-rows: repeat(3, 10%); grid-template-rows: repeat(3, 10% [row-start]); ", + actual + ) + +[] +let ``gridTemplateAreas`` () = + let actual = + style { gridTemplateAreas [ "header header header"; "nav main sidebar"; "footer footer footer" ] } + + Assert.Equal("grid-template-areas: 'header header header' 'nav main sidebar' 'footer footer footer' ; ", actual) + +[] +let ``gap overloads`` () = + let actual = + style { + gap 10 + gap "1em" + gap "1em" "2em" + rowGap 5 + rowGap "1rem" + columnGap 6 + columnGap "2rem" + } + + Assert.Equal( + "gap: 10px; gap: 1em; gap: 1em 2em; row-gap: 5px; row-gap: 1rem; column-gap: 6px; column-gap: 2rem; ", + actual + ) + +[] +let ``gridColumnStart and gridColumnEnd overloads`` () = + let actual = + style { + gridColumnStart 1 + gridColumnStart "col" + gridColumnStart "col" 2 + gridColumnEnd 3 + gridColumnEnd "col-end" + gridColumnEnd "col-end" 2 + } + + Assert.Equal( + "grid-column-start: 1; grid-column-start: col; grid-column-start: col, 2; grid-column-end: 3; grid-column-end: col-end; grid-column-end: col-end, 2; ", + actual + ) + +[] +let ``gridRowStart and gridRowEnd overloads`` () = + let actual = + style { + gridRowStart 1 + gridRowStart "row" + gridRowStart "row" 2 + gridRowEnd 3 + gridRowEnd "row-end" + gridRowEnd "row-end" 2 + } + + Assert.Equal( + "grid-row-start: 1; grid-row-start: row; grid-row-start: row, 2; grid-row-end: 3; grid-row-end: row-end; grid-row-end: row-end, 2; ", + actual + ) + +[] +let ``gridColumn and gridRow shorthand`` () = + let actual = + style { + gridColumn "1" "3" + gridColumn 1 3 + gridRow "1" "2" + } + + Assert.Equal("grid-column: 1 / 3; grid-column: 1 / 3; grid-row: 1 / 2; ", actual) + +[] +let ``gridArea and gridTemplate`` () = + let actual = + style { + gridArea "header" + gridTemplate "'a a a' 'b b b' / 1fr 1fr 1fr" + } + + Assert.Equal("grid-area: header; grid-template: 'a a a' 'b b b' / 1fr 1fr 1fr; ", actual) + +[] +let ``flex direction and wrap keywords`` () = + let actual = + style { + flexDirectionRow + flexDirectionRowReverse + flexDirectionColumn + flexDirectionColumnReverse + flexWrapNowrap + flexWrapWrap + flexWrapWrapReverse + flexWrapInitial + flexWrapInheritFromParent + } + + Assert.Equal( + "flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; flex-wrap: initial; flex-wrap: inherit; ", + actual + ) + +[] +let ``flexShrink and flexBasis`` () = + let actual = + style { + flexShrink 2 + flexBasis 100 + flexBasis "auto" + flexBasisAuto + flexBasisInitial + flexBasisInheritFromParent + } + + Assert.Equal( + "flex-shrink: 2; flex-basis: 100px; flex-basis: auto; flex-basis: auto; flex-basis: initial; flex-basis: inherit; ", + actual + ) diff --git a/Fun.Css.Tests/MiscTests.fs b/Fun.Css.Tests/MiscTests.fs new file mode 100644 index 0000000..5c60c7b --- /dev/null +++ b/Fun.Css.Tests/MiscTests.fs @@ -0,0 +1,275 @@ +module Fun.Css.Tests.MiscTests + +open Microsoft.Extensions.ObjectPool +open Xunit + +let objectPoolProvider = DefaultObjectPoolProvider() +let stringBuilderPool = objectPoolProvider.CreateStringBuilderPool() + +type StyleStrBuilder() = + inherit Fun.Css.CssBuilder() + + member inline _.Run([] combine: Fun.Css.Internal.CombineKeyValue) = + let sb = stringBuilderPool.Get() + let str = combine.Invoke(sb).ToString() + stringBuilderPool.Return sb + str + +let style = StyleStrBuilder() + +[] +let ``border radius, color, width and style`` () = + let actual = + style { + borderRadius 10 + borderRadius "50%" + borderColor "red" + borderWidth 2 + borderStyleSolid + borderStyleDashed + borderStyleDotted + borderStyleDouble + borderStyleGroove + borderStyleRidge + borderStyleInset + borderStyleOutset + borderStyleNone + borderStyleHidden + borderStyleInitial + borderStyleInheritFromParent + } + + Assert.Equal( + "border-radius: 10px; border-radius: 50%; border-color: red; border-width: 2px; border-style: solid; border-style: dashed; border-style: dotted; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; border-style: none; border-style: hidden; border-style: initial; border-style: inherit; ", + actual + ) + +[] +let ``borderWidth multi-value overloads`` () = + let actual = + style { + borderWidth "1px" "2px" + borderWidth "1px" + borderWidth "1px" "2px" "3px" "4px" + } + + Assert.Equal("border-width: 1px, 2px; border-width: 1px; border-width: 1px, 2px, 3px, , 4px; ", actual) + +[] +let ``cursor variants`` () = + let actual = + style { + cursor "crosshair" + cursorAuto + cursorPointer + cursorMove + cursorNotAllowed + cursorGrab + cursorGrabbing + cursorZoomIn + cursorZoomOut + cursorWait + cursorText + cursorNone + } + + Assert.Equal( + "cursor: crosshair; cursor: auto; cursor: pointer; cursor: move; cursor: not-allowed; cursor: grab; cursor: grabbing; cursor: zoom-in; cursor: zoom-out; cursor: wait; cursor: text; cursor: none; ", + actual + ) + +[] +let ``visibility keywords`` () = + let actual = + style { + visibilityHidden + visibilityVisible + visibilityCollapse + visibilityInitial + visibilityInheritFromParent + } + + Assert.Equal( + "visibility: hidden; visibility: visible; visibility: collapse; visibility: initial; visibility: inherit; ", + actual + ) + +[] +let ``float and clear`` () = + let actual = + style { + floatLeft + floatRight + floatNone + } + + Assert.Equal("float: left; float: right; float: none; ", actual) + +[] +let ``colors and caret`` () = + let actual = + style { + color "rebeccapurple" + backgroundColor "#fff" + caretColor "auto" + } + + Assert.Equal("color: rebeccapurple; background-color: #fff; caret-color: auto; ", actual) + +[] +let ``background image and url helper`` () = + let actual = + style { + backgroundImage "linear-gradient(red, blue)" + backgroundImageUrl "images/bg.png" + } + + Assert.Equal("background-image: linear-gradient(red, blue); background-image: url('images/bg.png'); ", actual) + +[] +let ``backgroundSize overloads`` () = + let actual = + style { + backgroundSize "100% 100%" + backgroundSize "100px" "auto" + backgroundSizeAuto + backgroundSizeCover + backgroundSizeContain + } + + Assert.Equal( + "background-size: 100% 100%; background-size: 100px, auto; background-size: auto; background-size: cover; background-size: contain; ", + actual + ) + +[] +let ``backgroundRepeat keywords`` () = + let actual = + style { + backgroundRepeatRepeat + backgroundRepeatRepeatX + backgroundRepeatRepeatY + backgroundRepeatNoRepeat + backgroundRepeatInitial + backgroundRepeatInheritFromParent + } + + Assert.Equal( + "background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat; background-repeat: initial; background-repeat: inherit; ", + actual + ) + +[] +let ``listStyleType and listStylePosition keywords`` () = + let actual = + style { + listStyleTypeDisc + listStyleTypeCircle + listStyleTypeSquare + listStyleTypeDecimal + listStyleTypeLowerRoman + listStyleTypeUpperAlpha + listStyleTypeNone + listStylePositionInside + listStylePositionOutside + } + + Assert.Equal( + "list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: lower-roman; list-style-type: upper-alpha; list-style-type: none; list-style-position: inside; list-style-position: outside; ", + actual + ) + +[] +let ``direction keywords`` () = + let actual = + style { + directionLeftToRight + directionRightToLeft + directionInitial + directionInheritFromParent + } + + Assert.Equal("direction: ltr; direction: rtl; direction: initial; direction: inherit; ", actual) + +[] +let ``userSelect keywords`` () = + let actual = + style { + userSelectAll + userSelectAuto + userSelectNone + userSelectText + userSelectInitial + userSelectInheritFromParent + } + + Assert.Equal( + "user-select: all; user-select: auto; user-select: none; user-select: text; user-select: initial; user-select: inherit; ", + actual + ) + +[] +let ``scrollBehavior keywords`` () = + let actual = + style { + scrollBehaviorAuto + scrollBehaviorSmooth + scrollBehaviorInitial + scrollBehaviorInheritFromParent + } + + Assert.Equal( + "scroll-behavior: auto; scroll-behavior: smooth; scroll-behavior: initial; scroll-behavior: inherit; ", + actual + ) + +[] +let ``outlineStyle keywords`` () = + let actual = + style { + outlineStyleAuto + outlineStyleDashed + outlineStyleDotted + outlineStyleSolid + outlineStyleNone + outlineStyleInitial + outlineStyleInheritFromParent + } + + Assert.Equal( + "outline-style: auto; outline-style: dashed; outline-style: dotted; outline-style: solid; outline-style: none; outline-style: initial; outline-style: inherit; ", + actual + ) + +[] +let ``writingMode keywords`` () = + let actual = + style { + writingModeHorizontalTopBottom + writingModeVerticalLeftRight + writingModeVerticalRightLeft + writingModeInitial + writingModeInheritFromParent + } + + Assert.Equal( + "writing-mode: horizontal-tb; writing-mode: vertical-lr; writing-mode: vertical-rl; writing-mode: initial; writing-mode: inherit; ", + actual + ) + +[] +let ``emptyCells and tableLayout`` () = + let actual = + style { + emptyCellsShow + emptyCellsHide + tableLayoutAuto + tableLayoutFixed' + } + + Assert.Equal("empty-cells: show; empty-cells: hide; table-layout: auto; table-layout: fixed; ", actual) + +[] +let ``fill and stroke for SVG`` () = + let actual = style { fill "currentColor" } + Assert.Equal("fill: currentColor; ", actual) diff --git a/Fun.Css.Tests/TransformTests.fs b/Fun.Css.Tests/TransformTests.fs new file mode 100644 index 0000000..9e5b293 --- /dev/null +++ b/Fun.Css.Tests/TransformTests.fs @@ -0,0 +1,152 @@ +module Fun.Css.Tests.TransformTests + +open Microsoft.Extensions.ObjectPool +open Xunit + +let objectPoolProvider = DefaultObjectPoolProvider() +let stringBuilderPool = objectPoolProvider.CreateStringBuilderPool() + +type StyleStrBuilder() = + inherit Fun.Css.CssBuilder() + + member inline _.Run([] combine: Fun.Css.Internal.CombineKeyValue) = + let sb = stringBuilderPool.Get() + let str = combine.Invoke(sb).ToString() + stringBuilderPool.Return sb + str + +let style = StyleStrBuilder() + +[] +let ``transform string and keywords`` () = + let actual = + style { + transform "translateX(10px) rotate(45deg)" + transformNone + transformInitial + transformInheritFromParent + } + + Assert.Equal( + "transform: translateX(10px) rotate(45deg); transform: none; transform: initial; transform: inherit; ", + actual + ) + +[] +let ``transformOrigin overloads`` () = + let actual = + style { + transformOrigin "center" + transformOrigin "left" "top" + } + + Assert.Equal("transform-origin: center; transform-origin: left top; ", actual) + +[] +let ``transformMatrix has correct value order`` () = + // matrix(x1, y2, z1, x2, y2, z2) -- note: y1 is skipped (bug? see TODO.md) + let actual = style { transformMatrix 1 2 3 4 5 6 } + Assert.Equal("transform: matrix(1,5,3,4,5,6); ", actual) + +[] +let ``transformTranslate overloads`` () = + let actual = + style { + transformTranslate 10 20 + transformTranslate "10%" "20%" + } + + Assert.Equal("transform: translate(10px, 20px); transform: translate(10%, 20%); ", actual) + +[] +let ``transformTranslate3D overloads`` () = + let actual = + style { + transformTranslate3D 1 2 3 + transformTranslate3D "1em" "2em" "3em" + } + + Assert.Equal("transform: translate3d(1px, 2px, 3px); transform: translate3d(1em, 2em, 3em); ", actual) + +[] +let ``transformTranslateX/Y/Z overloads`` () = + let actual = + style { + transformTranslateX 10 + transformTranslateX "10%" + transformTranslateY 20 + transformTranslateY "20%" + transformTranslateZ 30 + transformTranslateZ "30%" + } + + Assert.Equal( + "transform: translateX(10px); transform: translateX(10%); transform: translateY(20px); transform: translateY(20%); transform: translateZ(30px); transform: translateZ(30%); ", + actual + ) + +[] +let ``transformScale overloads`` () = + let actual = + style { + transformScale 2 3 + transformScale 1.5 + transformScale3D 1 2 3 + transformScaleX 2 + transformScaleY 3 + transformScaleZ 4 + } + + Assert.Equal( + "transform: scale(2, 3); transform: scale(1.5); transform: scale3d(1, 2, 3); transform: scaleX(2); transform: scaleY(3); transform: scaleZ(4); ", + actual + ) + +[] +let ``transformRotate overloads`` () = + let actual = + style { + transformRotate 45 + transformRotate 45.5 + transformRotateX 10.0 + transformRotateY 20.0 + transformRotateZ 30.0 + } + + Assert.Equal( + "transform: rotate(45deg); transform: rotate(45.5deg); transform: rotateX(10deg); transform: rotateY(20deg); transform: rotateZ(30deg); ", + actual + ) + +[] +let ``transformSkew overloads`` () = + let actual = + style { + transformSkew 10.0 20.0 + transformSkewX 15.0 + transformSkewY 25.0 + } + + Assert.Equal("transform: skew(10deg, 20deg); transform: skewX(15deg); transform: skewY(25deg); ", actual) + +[] +let ``transformPerspective`` () = + let actual = style { transformPerspective 100 } + Assert.Equal("transform: perspective(100); ", actual) + +[] +let ``boxShadow overloads`` () = + let actual = + style { + boxShadow "2px 4px 8px rgba(0,0,0,0.2)" + boxShadow 1 2 "red" + boxShadow 1 2 3 "blue" + boxShadow 1 2 3 4 "green" + boxShadowNone + boxShadowInheritFromParent + } + + Assert.Equal( + "box-shadow: 2px 4px 8px rgba(0,0,0,0.2); box-shadow1px 2px red; box-shadow: 1px 2px 3px blue; box-shadow: 1px 2px 3px 4px green; box-shadow: none; box-shadow: inherit; ", + actual + ) diff --git a/Fun.Css.Tests/TypographyTests.fs b/Fun.Css.Tests/TypographyTests.fs new file mode 100644 index 0000000..b6346dd --- /dev/null +++ b/Fun.Css.Tests/TypographyTests.fs @@ -0,0 +1,257 @@ +module Fun.Css.Tests.TypographyTests + +open Microsoft.Extensions.ObjectPool +open Xunit + +let objectPoolProvider = DefaultObjectPoolProvider() +let stringBuilderPool = objectPoolProvider.CreateStringBuilderPool() + +type StyleStrBuilder() = + inherit Fun.Css.CssBuilder() + + member inline _.Run([] combine: Fun.Css.Internal.CombineKeyValue) = + let sb = stringBuilderPool.Get() + let str = combine.Invoke(sb).ToString() + stringBuilderPool.Return sb + str + +let style = StyleStrBuilder() + +[] +let ``fontSize and lineHeight overloads`` () = + let actual = + style { + fontSize 16 + fontSize "1.5rem" + lineHeight 24 + lineHeight "1.5" + } + + Assert.Equal("font-size: 16px; font-size: 1.5rem; line-height: 24px; line-height: 1.5; ", actual) + +[] +let ``fontWeight overloads and keywords`` () = + let actual = + style { + fontWeight 700 + fontWeightNormal + fontWeightBold + fontWeightBolder + fontWeightLighter + fontWeightInitial + fontWeightInheritFromParent + } + + Assert.Equal( + "font-weight: 700; font-weight: normal; font-weight: bold; font-weight: bolder; font-weight: lighter; font-weight: initial; font-weight: inherit; ", + actual + ) + +[] +let ``fontStyle keywords`` () = + let actual = + style { + fontStyleNormal + fontStyleItalic + fontStyleOblique + fontStyleInitial + fontStyleInheritFromParent + } + + Assert.Equal( + "font-style: normal; font-style: italic; font-style: oblique; font-style: initial; font-style: inherit; ", + actual + ) + +[] +let ``fontVariant keywords`` () = + let actual = + style { + fontVariantNormal + fontVariantSmallCaps + fontVariantInitial + fontVariantInheritFromParent + } + + Assert.Equal( + "font-variant: normal; font-variant: small-caps; font-variant: initial; font-variant: inherit; ", + actual + ) + +[] +let ``fontFamily and textDecorationColor`` () = + let actual = + style { + fontFamily "Arial, sans-serif" + textDecorationColor "red" + } + + Assert.Equal("font-family: Arial, sans-serif; text-decoration-color: red; ", actual) + +[] +let ``textAlign keywords`` () = + let actual = + style { + textAlignLeft + textAlignRight + textAlignCenter + textAlignJustify + textAlignInitial + textAlignInheritFromParent + } + + Assert.Equal( + "text-align: left; text-align: right; text-align: center; text-align: justify; text-align: initial; text-align: inherit; ", + actual + ) + +[] +let ``textDecoration and textDecorationLine`` () = + let actual = + style { + textDecoration "underline dotted red" + textDecorationNone + textDecorationUnderline + textDecorationOverline + textDecorationLineThrough + textDecorationLine "underline overline" + textDecorationLineNone + textDecorationLineLineThrough + } + + Assert.Equal( + "text-decoration: underline dotted red; text-decoration: none; text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration-line: underline overline; text-decoration-line: none; text-decoration-line: line-through; ", + actual + ) + +[] +let ``textDecorationStyle keywords`` () = + let actual = + style { + textDecorationStyleSolid + textDecorationStyleDouble + textDecorationStyleDotted + textDecorationStyleDashed + textDecorationStyleWavy + textDecorationStyleInitial + textDecorationStyleInheritFromParent + } + + Assert.Equal( + "text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; text-decoration-style: initial; text-decoration-style: inherit; ", + actual + ) + +[] +let ``textTransform keywords`` () = + let actual = + style { + textTransformNone + textTransformCapitalize + textTransformUppercase + textTransformLowercase + } + + Assert.Equal( + "text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; ", + actual + ) + +[] +let ``textOverflow keywords`` () = + let actual = + style { + textOverflowClip + textOverflowEllipsis + textOverflowInitial + textOverflowInheritFromParent + } + + Assert.Equal( + "text-overflow: clip; text-overflow: ellipsis; text-overflow: initial; text-overflow: inherit; ", + actual + ) + +[] +let ``textIndent overloads`` () = + let actual = + style { + textIndent 10 + textIndent "2em" + } + // note: int overload does NOT emit px (uses mkWithKV instead of mkPxWithKV) - see TODO.md + Assert.Equal("text-indent: 10; text-indent: 2em; ", actual) + +[] +let ``verticalAlign keywords`` () = + let actual = + style { + verticalAlignBaseline + verticalAlignSub + verticalAlignSuper + verticalAlignTop + verticalAlignTextTop + verticalAlignMiddle + verticalAlignBottom + verticalAlignTextBottom + verticalAlignInitial + verticalAlignInheritFromParent + } + + Assert.Equal( + // note: verticalAlignSub emits "sup" (bug - see TODO.md) + "vertical-align: baseline; vertical-align: sup; vertical-align: super; vertical-align: top; vertical-align: text-top; vertical-align: middle; vertical-align: bottom; vertical-align: text-bottom; vertical-align: initial; vertical-align: inherit; ", + actual + ) + +[] +let ``whiteSpace keywords`` () = + let actual = + style { + whiteSpaceNormal + whiteSpaceNowrap + whiteSpacePre + whiteSpacePreLine + whiteSpacePreWrap + whiteSpaceInitial + whiteSpaceInheritFromParent + } + + Assert.Equal( + "white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-line; white-space: pre-wrap; white-space: initial; white-space: inherit; ", + actual + ) + +[] +let ``wordbreak keywords`` () = + let actual = + style { + wordbreakNormal + wordbreakBreakAll + wordbreakKeepAll + wordbreakBreakWord + wordbreakInitial + wordbreakInheritFromParent + } + + Assert.Equal( + "word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; word-break: initial; word-break: inherit; ", + actual + ) + +[] +let ``textJustify keywords`` () = + let actual = + style { + textJustifyAuto + textJustifyInterWord + textJustifyInterCharacter + textJustifyNone + textJustifyInitial + textJustifyInheritFromParent + } + + Assert.Equal( + "text-justify: auto; text-justify: inter-word; text-justify: inter-character; text-justify: none; text-justify: initial; text-justify: inherit; ", + actual + ) From 59e82739ef5b5960634da0f35b4b0013f3e87027 Mon Sep 17 00:00:00 2001 From: binwen Date: Fri, 28 Aug 2026 10:06:54 +0800 Subject: [PATCH 2/8] Improve consistency --- Benchmark/Benchmarks.fs | 37 +- Fun.Css.Tests/AnimationTransitionTests.fs | 36 +- Fun.Css.Tests/BasicTests.fs | 14 +- Fun.Css.Tests/DimensionTests.fs | 23 + Fun.Css.Tests/GridFlexTests.fs | 23 +- Fun.Css.Tests/MiscTests.fs | 56 +- Fun.Css.Tests/TransformTests.fs | 4 +- Fun.Css.Tests/TypographyTests.fs | 49 +- Fun.Css/CssBuilder.fs | 2272 ++++++++++++++++----- README.md | 2 + SKILL.md | 196 ++ build.fsx | 1 + 12 files changed, 2185 insertions(+), 528 deletions(-) create mode 100644 SKILL.md diff --git a/Benchmark/Benchmarks.fs b/Benchmark/Benchmarks.fs index 0d55787..b309b59 100644 --- a/Benchmark/Benchmarks.fs +++ b/Benchmark/Benchmarks.fs @@ -76,30 +76,27 @@ type Benchmarks() = member _.BuildStyleWithFeliz() = makeStyles ".my-feliz-style" - [ - felizStyle.backgroundColor "#44c767" - felizStyle.borderRadius 30 - felizStyle.borderWidth 1 - felizStyle.borderStyleSolid - felizStyle.borderColor "#18ab29" - felizStyle.displayInlineBlock - felizStyle.cursorPointer - felizStyle.fontSize 17 - ] + [ felizStyle.backgroundColor "#44c767" + felizStyle.borderRadius 30 + felizStyle.borderWidth 1 + felizStyle.borderStyleSolid + felizStyle.borderColor "#18ab29" + felizStyle.displayInlineBlock + felizStyle.cursorPointer + felizStyle.fontSize 17 ] [] member _.BuildStyleWithFss() = - createFss [ - BackgroundColor.hex "44c767" - BorderRadius.value (px 30) - BorderWidth.value (px 1) - BorderStyle.solid - BorderColor.hex "18ab29" - Display.inlineBlock - Cursor.pointer - FontSize.value (px 17) - ] + createFss + [ BackgroundColor.hex "44c767" + BorderRadius.value (px 30) + BorderWidth.value (px 1) + BorderStyle.solid + BorderColor.hex "18ab29" + Display.inlineBlock + Cursor.pointer + FontSize.value (px 17) ] // From Fun.Css diff --git a/Fun.Css.Tests/AnimationTransitionTests.fs b/Fun.Css.Tests/AnimationTransitionTests.fs index a377358..9b651eb 100644 --- a/Fun.Css.Tests/AnimationTransitionTests.fs +++ b/Fun.Css.Tests/AnimationTransitionTests.fs @@ -1,3 +1,5 @@ +#nowarn "44" // obsolete-op usage is intentional: verifies legacy names keep working (backward compatibility) + module Fun.Css.Tests.AnimationTransitionTests open System @@ -118,9 +120,39 @@ let ``animation fill mode`` () = ) [] -let ``animation duration count`` () = +let ``animation duration count (obsolete) still emits animation-iteration-count`` () = let actual = style { animationDurationCount 3 } - Assert.Equal("animation-duration-count: 3; ", actual) + Assert.Equal("animation-iteration-count: 3; ", actual) + +[] +let ``animationIterationCount overloads`` () = + let actual = + style { + animationIterationCount 3 + animationIterationCount "var(--animation-count)" + } + + Assert.Equal("animation-iteration-count: 3; animation-iteration-count: var(--animation-count); ", actual) + +[] +let ``animation timing and direction string overloads`` () = + let actual = + style { + animationTimingFunction "cubic-bezier(0.1, 0.7, 1, 0.1)" + animationDirection "var(--animation-direction)" + animationPlayState "var(--animation-play-state)" + animationFillMode "var(--animation-fill-mode)" + } + + Assert.Equal( + "animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1); animation-direction: var(--animation-direction); animation-play-state: var(--animation-play-state); animation-fill-mode: var(--animation-fill-mode); ", + actual + ) + +[] +let ``transitionTimingFunction string overload`` () = + let actual = style { transitionTimingFunction "steps(4, end)" } + Assert.Equal("transition-timing-function: steps(4, end); ", actual) [] let ``transition shorthand and property`` () = diff --git a/Fun.Css.Tests/BasicTests.fs b/Fun.Css.Tests/BasicTests.fs index 0474d56..273578e 100644 --- a/Fun.Css.Tests/BasicTests.fs +++ b/Fun.Css.Tests/BasicTests.fs @@ -1,3 +1,5 @@ +#nowarn "44" // obsolete-op usage is intentional: verifies legacy names keep working (backward compatibility) + module Fun.Css.Tests.BasicTests open Microsoft.Extensions.ObjectPool @@ -73,13 +75,21 @@ let ``outline-offset should emit outline-offset`` () = Assert.Equal("outline-offset: 4px; outline-offset: 1rem; ", actual) [] -let ``justify-items and justify-self Strench should emit the valid stretch value`` () = +let ``justify-items and justify-self Strench (obsolete) should emit the valid stretch value`` () = let actual = style { justifyItemsStrench justifySelfStrench } Assert.Equal("justify-items: stretch; justify-self: stretch; ", actual) - + +[] +let ``justifyItemsStretch and justifySelfStretch should emit the valid stretch value`` () = + let actual = style { + justifyItemsStretch + justifySelfStretch + } + Assert.Equal("justify-items: stretch; justify-self: stretch; ", actual) + [] let ``font-weight string should work`` () = let actual = style { diff --git a/Fun.Css.Tests/DimensionTests.fs b/Fun.Css.Tests/DimensionTests.fs index 39a8b4e..eedfd52 100644 --- a/Fun.Css.Tests/DimensionTests.fs +++ b/Fun.Css.Tests/DimensionTests.fs @@ -1,3 +1,5 @@ +#nowarn "44" // obsolete-op usage is intentional: verifies legacy names keep working (backward compatibility) + module Fun.Css.Tests.DimensionTests open Microsoft.Extensions.ObjectPool @@ -179,6 +181,17 @@ let ``box sizing and display samples`` () = actual ) +[] +let ``display new name and string overload`` () = + let actual = + style { + displayInline + display "var(--display)" + boxSizing "var(--box-sizing)" + } + + Assert.Equal("display: inline; display: var(--display); box-sizing: var(--box-sizing); ", actual) + [] let ``position keywords`` () = let actual = @@ -195,6 +208,16 @@ let ``position keywords`` () = actual ) +[] +let ``position new name and string overload`` () = + let actual = + style { + positionStatic + position "var(--position)" + } + + Assert.Equal("position: static; position: var(--position); ", actual) + [] let ``overflow variants`` () = let actual = diff --git a/Fun.Css.Tests/GridFlexTests.fs b/Fun.Css.Tests/GridFlexTests.fs index 5cb4cfd..d79b085 100644 --- a/Fun.Css.Tests/GridFlexTests.fs +++ b/Fun.Css.Tests/GridFlexTests.fs @@ -28,7 +28,7 @@ let ``gridTemplateColumns overloads`` () = } Assert.Equal( - "grid-template-columns: 100px 200px 100px ; grid-template-columns: 1fr 1fr 2fr; grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr, [col-start]); ", + "grid-template-columns: 100px 200px 100px; grid-template-columns: 1fr 1fr 2fr; grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr, [col-start]); ", actual ) @@ -43,7 +43,7 @@ let ``gridTemplateRows overloads`` () = } Assert.Equal( - "grid-template-rows: 100px 200px ; grid-template-rows: 1fr 10% 250px auto; grid-template-rows: repeat(3, 10%); grid-template-rows: repeat(3, 10% [row-start]); ", + "grid-template-rows: 100px 200px; grid-template-rows: 1fr 10% 250px auto; grid-template-rows: repeat(3, 10%); grid-template-rows: repeat(3, 10% [row-start]); ", actual ) @@ -52,7 +52,7 @@ let ``gridTemplateAreas`` () = let actual = style { gridTemplateAreas [ "header header header"; "nav main sidebar"; "footer footer footer" ] } - Assert.Equal("grid-template-areas: 'header header header' 'nav main sidebar' 'footer footer footer' ; ", actual) + Assert.Equal("grid-template-areas: 'header header header' 'nav main sidebar' 'footer footer footer'; ", actual) [] let ``gap overloads`` () = @@ -163,3 +163,20 @@ let ``flexShrink and flexBasis`` () = "flex-shrink: 2; flex-basis: 100px; flex-basis: auto; flex-basis: auto; flex-basis: initial; flex-basis: inherit; ", actual ) + +[] +let ``flex and align string overloads`` () = + let actual = + style { + flexDirection "var(--flex-direction)" + flexWrap "var(--flex-wrap)" + alignContent "var(--align-content)" + alignItems "var(--align-items)" + alignSelf "var(--align-self)" + transformStyle "var(--transform-style)" + } + + Assert.Equal( + "flex-direction: var(--flex-direction); flex-wrap: var(--flex-wrap); align-content: var(--align-content); align-items: var(--align-items); align-self: var(--align-self); transform-style: var(--transform-style); ", + actual + ) diff --git a/Fun.Css.Tests/MiscTests.fs b/Fun.Css.Tests/MiscTests.fs index 5c60c7b..15e05a6 100644 --- a/Fun.Css.Tests/MiscTests.fs +++ b/Fun.Css.Tests/MiscTests.fs @@ -1,3 +1,5 @@ +#nowarn "44" // obsolete-op usage is intentional: verifies legacy names keep working (backward compatibility) + module Fun.Css.Tests.MiscTests open Microsoft.Extensions.ObjectPool @@ -53,7 +55,7 @@ let ``borderWidth multi-value overloads`` () = borderWidth "1px" "2px" "3px" "4px" } - Assert.Equal("border-width: 1px, 2px; border-width: 1px; border-width: 1px, 2px, 3px, , 4px; ", actual) + Assert.Equal("border-width: 1px 2px; border-width: 1px; border-width: 1px 2px 3px 4px; ", actual) [] let ``cursor variants`` () = @@ -105,6 +107,18 @@ let ``float and clear`` () = Assert.Equal("float: left; float: right; float: none; ", actual) +[] +let ``floatStyle keywords and string overload`` () = + let actual = + style { + floatStyleLeft + floatStyleRight + floatStyleNone + floatStyle "var(--float)" + } + + Assert.Equal("float: left; float: right; float: none; float: var(--float); ", actual) + [] let ``colors and caret`` () = let actual = @@ -138,7 +152,7 @@ let ``backgroundSize overloads`` () = } Assert.Equal( - "background-size: 100% 100%; background-size: 100px, auto; background-size: auto; background-size: cover; background-size: contain; ", + "background-size: 100% 100%; background-size: 100px auto; background-size: auto; background-size: cover; background-size: contain; ", actual ) @@ -269,7 +283,45 @@ let ``emptyCells and tableLayout`` () = Assert.Equal("empty-cells: show; empty-cells: hide; table-layout: auto; table-layout: fixed; ", actual) +[] +let ``tableLayoutFixed (new name) and string overloads`` () = + let actual = + style { + tableLayoutFixed + tableLayout "var(--table-layout)" + emptyCells "var(--empty-cells)" + } + + Assert.Equal("table-layout: fixed; table-layout: var(--table-layout); empty-cells: var(--empty-cells); ", actual) + [] let ``fill and stroke for SVG`` () = let actual = style { fill "currentColor" } Assert.Equal("fill: currentColor; ", actual) + +[] +let ``string overloads for keyword-only properties (design token support)`` () = + let actual = + style { + visibility "var(--visibility)" + overflow "var(--overflow)" + overflowX "var(--overflow-x)" + overflowY "var(--overflow-y)" + resize "var(--resize)" + userSelect "var(--user-select)" + scrollBehavior "var(--scroll-behavior)" + listStyleType "var(--list-style-type)" + listStylePosition "var(--list-style-position)" + borderCollapse "var(--border-collapse)" + direction "var(--direction)" + writingMode "var(--writing-mode)" + outlineStyle "var(--outline-style)" + backgroundClip "var(--background-clip)" + backgroundBlendMode "var(--background-blend-mode)" + filter "var(--filter)" + } + + Assert.Equal( + "visibility: var(--visibility); overflow: var(--overflow); overflow-x: var(--overflow-x); overflow-y: var(--overflow-y); resize: var(--resize); user-select: var(--user-select); scroll-behavior: var(--scroll-behavior); list-style-type: var(--list-style-type); list-style-position: var(--list-style-position); border-collapse: var(--border-collapse); direction: var(--direction); writing-mode: var(--writing-mode); outline-style: var(--outline-style); background-clip: var(--background-clip); background-blend-mode: var(--background-blend-mode); filter: var(--filter); ", + actual + ) diff --git a/Fun.Css.Tests/TransformTests.fs b/Fun.Css.Tests/TransformTests.fs index 9e5b293..69c0420 100644 --- a/Fun.Css.Tests/TransformTests.fs +++ b/Fun.Css.Tests/TransformTests.fs @@ -46,7 +46,7 @@ let ``transformOrigin overloads`` () = let ``transformMatrix has correct value order`` () = // matrix(x1, y2, z1, x2, y2, z2) -- note: y1 is skipped (bug? see TODO.md) let actual = style { transformMatrix 1 2 3 4 5 6 } - Assert.Equal("transform: matrix(1,5,3,4,5,6); ", actual) + Assert.Equal("transform: matrix(1,2,3,4,5,6); ", actual) [] let ``transformTranslate overloads`` () = @@ -147,6 +147,6 @@ let ``boxShadow overloads`` () = } Assert.Equal( - "box-shadow: 2px 4px 8px rgba(0,0,0,0.2); box-shadow1px 2px red; box-shadow: 1px 2px 3px blue; box-shadow: 1px 2px 3px 4px green; box-shadow: none; box-shadow: inherit; ", + "box-shadow: 2px 4px 8px rgba(0,0,0,0.2); box-shadow: 1px 2px red; box-shadow: 1px 2px 3px blue; box-shadow: 1px 2px 3px 4px green; box-shadow: none; box-shadow: inherit; ", actual ) diff --git a/Fun.Css.Tests/TypographyTests.fs b/Fun.Css.Tests/TypographyTests.fs index b6346dd..f458720 100644 --- a/Fun.Css.Tests/TypographyTests.fs +++ b/Fun.Css.Tests/TypographyTests.fs @@ -1,3 +1,5 @@ +#nowarn "44" // obsolete-op usage is intentional: verifies legacy names keep working (backward compatibility) + module Fun.Css.Tests.TypographyTests open Microsoft.Extensions.ObjectPool @@ -180,7 +182,7 @@ let ``textIndent overloads`` () = textIndent "2em" } // note: int overload does NOT emit px (uses mkWithKV instead of mkPxWithKV) - see TODO.md - Assert.Equal("text-indent: 10; text-indent: 2em; ", actual) + Assert.Equal("text-indent: 10px; text-indent: 2em; ", actual) [] let ``verticalAlign keywords`` () = @@ -200,7 +202,7 @@ let ``verticalAlign keywords`` () = Assert.Equal( // note: verticalAlignSub emits "sup" (bug - see TODO.md) - "vertical-align: baseline; vertical-align: sup; vertical-align: super; vertical-align: top; vertical-align: text-top; vertical-align: middle; vertical-align: bottom; vertical-align: text-bottom; vertical-align: initial; vertical-align: inherit; ", + "vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: top; vertical-align: text-top; vertical-align: middle; vertical-align: bottom; vertical-align: text-bottom; vertical-align: initial; vertical-align: inherit; ", actual ) @@ -223,7 +225,7 @@ let ``whiteSpace keywords`` () = ) [] -let ``wordbreak keywords`` () = +let ``wordbreak keywords (obsolete names)`` () = let actual = style { wordbreakNormal @@ -239,6 +241,24 @@ let ``wordbreak keywords`` () = actual ) +[] +let ``wordBreak keywords (new names) and string overload`` () = + let actual = + style { + wordBreakNormal + wordBreakBreakAll + wordBreakKeepAll + wordBreakBreakWord + wordBreakInitial + wordBreakInheritFromParent + wordBreak "var(--word-break)" + } + + Assert.Equal( + "word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; word-break: initial; word-break: inherit; word-break: var(--word-break); ", + actual + ) + [] let ``textJustify keywords`` () = let actual = @@ -255,3 +275,26 @@ let ``textJustify keywords`` () = "text-justify: auto; text-justify: inter-word; text-justify: inter-character; text-justify: none; text-justify: initial; text-justify: inherit; ", actual ) + +[] +let ``typography string overloads`` () = + let actual = + style { + verticalAlign "var(--vertical-align)" + whiteSpace "var(--white-space)" + textAlign "var(--text-align)" + textTransform "var(--text-transform)" + textJustify "var(--text-justify)" + textOverflow "var(--text-overflow)" + wordWrap "var(--word-wrap)" + fontStyle "var(--font-style)" + fontVariant "var(--font-variant)" + fontKerning "var(--font-kerning)" + fontStretch "var(--font-stretch)" + textDecorationStyle "var(--text-decoration-style)" + } + + Assert.Equal( + "vertical-align: var(--vertical-align); white-space: var(--white-space); text-align: var(--text-align); text-transform: var(--text-transform); text-justify: var(--text-justify); text-overflow: var(--text-overflow); word-wrap: var(--word-wrap); font-style: var(--font-style); font-variant: var(--font-variant); font-kerning: var(--font-kerning); font-stretch: var(--font-stretch); text-decoration-style: var(--text-decoration-style); ", + actual + ) diff --git a/Fun.Css/CssBuilder.fs b/Fun.Css/CssBuilder.fs index d6e4651..520c867 100644 --- a/Fun.Css/CssBuilder.fs +++ b/Fun.Css/CssBuilder.fs @@ -17,13 +17,17 @@ module Internal = type Makers = - static member inline mkPxWithKV(k: string, v: int) = CombineKeyValue(fun sb -> sb.Append(k).Append(": ").Append(v).Append("px; ")) + static member inline mkPxWithKV(k: string, v: int) = + CombineKeyValue(fun sb -> sb.Append(k).Append(": ").Append(v).Append("px; ")) - static member inline mkPxWithKV(k: string, v: float) = CombineKeyValue(fun sb -> sb.Append(k).Append(": ").Append(v).Append("px; ")) + static member inline mkPxWithKV(k: string, v: float) = + CombineKeyValue(fun sb -> sb.Append(k).Append(": ").Append(v).Append("px; ")) - static member inline mkWithKV(k: string, v: int) = CombineKeyValue(fun sb -> sb.Append(k).Append(": ").Append(v).Append("; ")) + static member inline mkWithKV(k: string, v: int) = + CombineKeyValue(fun sb -> sb.Append(k).Append(": ").Append(v).Append("; ")) - static member inline mkWithKV(k: string, v: float) = CombineKeyValue(fun sb -> sb.Append(k).Append(": ").Append(v).Append("; ")) + static member inline mkWithKV(k: string, v: float) = + CombineKeyValue(fun sb -> sb.Append(k).Append(": ").Append(v).Append("; ")) open Internal @@ -34,24 +38,37 @@ type CssBuilder() = member inline _.Yield(_: unit) = CombineKeyValue(fun sb -> sb) member inline _.Yield([] x: CombineKeyValue) = x - member inline _.Yield(keyValue: string) = CombineKeyValue(fun s -> s.Append(keyValue).Append("; ")) - member inline _.Yield((key, value): string * string) = CombineKeyValue(fun s -> s.Append(key).Append(": ").Append(value).Append("; ")) - member inline _.Yield((key, value): string * int) = CombineKeyValue(fun s -> s.Append(key).Append(": ").Append(value).Append("; ")) - member inline _.Yield((key, value): string * float) = CombineKeyValue(fun s -> s.Append(key).Append(": ").Append(value).Append("; ")) - member inline _.Yield((key, value): string * bool) = CombineKeyValue(fun s -> s.Append(key).Append(": ").Append(value).Append("; ")) + member inline _.Yield(keyValue: string) = + CombineKeyValue(fun s -> s.Append(keyValue).Append("; ")) + + member inline _.Yield((key, value): string * string) = + CombineKeyValue(fun s -> s.Append(key).Append(": ").Append(value).Append("; ")) + + member inline _.Yield((key, value): string * int) = + CombineKeyValue(fun s -> s.Append(key).Append(": ").Append(value).Append("; ")) + + member inline _.Yield((key, value): string * float) = + CombineKeyValue(fun s -> s.Append(key).Append(": ").Append(value).Append("; ")) + + member inline _.Yield((key, value): string * bool) = + CombineKeyValue(fun s -> s.Append(key).Append(": ").Append(value).Append("; ")) member inline _.Run([] combine: CombineKeyValue) = combine - member inline _.For([] comb: CombineKeyValue, [] fn: unit -> CombineKeyValue) = comb &&& (fn ()) + member inline _.For([] comb: CombineKeyValue, [] fn: unit -> CombineKeyValue) = + comb &&& (fn ()) - member inline _.For(ls: 'T seq, [] fn: 'T -> CombineKeyValue) = ls |> Seq.map fn |> Seq.fold (&&&) (CombineKeyValue(fun x -> x)) + member inline _.For(ls: 'T seq, [] fn: 'T -> CombineKeyValue) = + ls |> Seq.map fn |> Seq.fold (&&&) (CombineKeyValue(fun x -> x)) - member inline _.Delay([] fn: unit -> CombineKeyValue) = CombineKeyValue(fun x -> fn().Invoke(x)) + member inline _.Delay([] fn: unit -> CombineKeyValue) = + CombineKeyValue(fun x -> fn().Invoke(x)) member inline _.Zero() = CombineKeyValue(fun sb -> sb) - member inline _.Combine([] render1: CombineKeyValue, [] render2: CombineKeyValue) = render1 &&& render2 + member inline _.Combine([] render1: CombineKeyValue, [] render2: CombineKeyValue) = + render1 &&& render2 /// Define a custom property @@ -66,9 +83,11 @@ type CssBuilder() = /// Specifies that all the element's properties should be changed to their initial values. [] member inline _.allInitial([] comb: CombineKeyValue) = comb &>> ("all", "initial") + /// Specifies that all the element's properties should be changed to their inherited values. [] member inline _.allInherit([] comb: CombineKeyValue) = comb &>> ("all", "inherit") + /// Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not. [] member inline _.allUnset([] comb: CombineKeyValue) = comb &>> ("all", "unset") @@ -90,22 +109,25 @@ type CssBuilder() = /// Attaches a shadow with the given horizontal and vertical offsets (in pixels) and color. [] - member inline _.boxShadow([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, color: string) = + member inline _.boxShadow + ([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, color: string) + = CombineKeyValue(fun sb -> comb .Invoke(sb) - .Append("box-shadow") + .Append("box-shadow: ") .Append(horizontalOffset) .Append("px ") .Append(verticalOffset) .Append("px ") .Append(color) - .Append("; ") - ) + .Append("; ")) /// Attaches a shadow with the given horizontal offset, vertical offset, and blur radius (all in pixels), plus a color. [] - member inline _.boxShadow([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, blur: int, color: string) = + member inline _.boxShadow + ([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, blur: int, color: string) + = CombineKeyValue(fun sb -> comb .Invoke(sb) @@ -117,8 +139,7 @@ type CssBuilder() = .Append(blur) .Append("px ") .Append(color) - .Append("; ") - ) + .Append("; ")) /// Attaches a shadow with the given horizontal offset, vertical offset, blur radius, and spread radius (all in pixels), plus a color. [] @@ -130,8 +151,7 @@ type CssBuilder() = blur: int, spread: int, color: string - ) - = + ) = CombineKeyValue(fun sb -> comb .Invoke(sb) @@ -145,210 +165,343 @@ type CssBuilder() = .Append(spread) .Append("px ") .Append(color) - .Append("; ") - ) + .Append("; ")) /// Removes the box shadow from an element. [] member inline _.boxShadowNone([] comb: CombineKeyValue) = comb &>> ("box-shadow", "none") + /// Inherits this property from its parent element. [] - member inline _.boxShadowInheritFromParent([] comb: CombineKeyValue) = comb &>> ("box-shadow", "inherit") + member inline _.boxShadowInheritFromParent([] comb: CombineKeyValue) = + comb &>> ("box-shadow", "inherit") /// Sets the height of an element. [] member inline _.height([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("height", value) + /// Sets the height of an element. [] member inline _.height([] comb: CombineKeyValue, value: string) = comb &>> ("height", value) + /// Inherits this property from its parent element. [] member inline _.heightInheritFromParent([] comb: CombineKeyValue) = comb &>> ("height", "inherit") + /// Sets this property to its default value. [] member inline _.heightInitial([] comb: CombineKeyValue) = comb &>> ("height", "initial") + /// The intrinsic preferred height. [] member inline _.heightMaxContent([] comb: CombineKeyValue) = comb &>> ("height", "max-content") + /// The intrinsic minimum height. [] member inline _.heightMinContent([] comb: CombineKeyValue) = comb &>> ("height", "min-content") /// Sets the maximum height of an element. [] - member inline _.maxHeight([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("max-height", value) + member inline _.maxHeight([] comb: CombineKeyValue, value: int) = + comb &&& mkPxWithKV ("max-height", value) + /// Sets the maximum height of an element. [] member inline _.maxHeight([] comb: CombineKeyValue, value: string) = comb &>> ("max-height", value) + /// Inherits this property from its parent element. [] - member inline _.maxHeightInheritFromParent([] comb: CombineKeyValue) = comb &>> ("max-height", "inherit") + member inline _.maxHeightInheritFromParent([] comb: CombineKeyValue) = + comb &>> ("max-height", "inherit") + /// Sets this property to its default value. [] member inline _.maxHeightInitial([] comb: CombineKeyValue) = comb &>> ("max-height", "initial") + /// The intrinsic preferred height. [] - member inline _.maxHeightMaxContent([] comb: CombineKeyValue) = comb &>> ("max-height", "max-content") + member inline _.maxHeightMaxContent([] comb: CombineKeyValue) = + comb &>> ("max-height", "max-content") + /// The intrinsic minimum height. [] - member inline _.maxHeightMinContent([] comb: CombineKeyValue) = comb &>> ("max-height", "min-content") + member inline _.maxHeightMinContent([] comb: CombineKeyValue) = + comb &>> ("max-height", "min-content") /// Sets the minimum height of an element. [] - member inline _.minHeight([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("min-height", value) + member inline _.minHeight([] comb: CombineKeyValue, value: int) = + comb &&& mkPxWithKV ("min-height", value) + /// Sets the minimum height of an element. [] member inline _.minHeight([] comb: CombineKeyValue, value: string) = comb &>> ("min-height", value) + /// Inherits this property from its parent element. [] - member inline _.minHeightInheritFromParent([] comb: CombineKeyValue) = comb &>> ("min-height", "inherit") + member inline _.minHeightInheritFromParent([] comb: CombineKeyValue) = + comb &>> ("min-height", "inherit") + /// Sets this property to its default value. [] member inline _.minHeightInitial([] comb: CombineKeyValue) = comb &>> ("min-height", "initial") + /// The intrinsic preferred height. [] - member inline _.minHeightMaxContent([] comb: CombineKeyValue) = comb &>> ("min-height", "max-content") + member inline _.minHeightMaxContent([] comb: CombineKeyValue) = + comb &>> ("min-height", "max-content") + /// The intrinsic minimum height. [] - member inline _.minHeightMinContent([] comb: CombineKeyValue) = comb &>> ("min-height", "min-content") + member inline _.minHeightMinContent([] comb: CombineKeyValue) = + comb &>> ("min-height", "min-content") /// The browser determines the justification algorithm [] member inline _.textJustifyAuto([] comb: CombineKeyValue) = comb &>> ("text-justify", "auto") + /// Increases/Decreases the space between words [] - member inline _.textJustifyInterWord([] comb: CombineKeyValue) = comb &>> ("text-justify", "inter-word") + member inline _.textJustifyInterWord([] comb: CombineKeyValue) = + comb &>> ("text-justify", "inter-word") + /// Increases/Decreases the space between characters [] - member inline _.textJustifyInterCharacter([] comb: CombineKeyValue) = comb &>> ("text-justify", "inter-character") + member inline _.textJustifyInterCharacter([] comb: CombineKeyValue) = + comb &>> ("text-justify", "inter-character") + /// Disables justification methods [] member inline _.textJustifyNone([] comb: CombineKeyValue) = comb &>> ("text-justify", "none") + /// Sets this property to its default value. [] member inline _.textJustifyInitial([] comb: CombineKeyValue) = comb &>> ("text-justify", "initial") + /// Inherits this property from its parent element. [] - member inline _.textJustifyInheritFromParent([] comb: CombineKeyValue) = comb &>> ("text-justify", "inherit") + member inline _.textJustifyInheritFromParent([] comb: CombineKeyValue) = + comb &>> ("text-justify", "inherit") + + /// Sets the justification method using a CSS string value (e.g. "inter-word", "var(--text-justify)"). + [] + member inline _.textJustify([] comb: CombineKeyValue, value: string) = + comb &>> ("text-justify", value) /// Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default. [] member inline _.whiteSpaceNormal([] comb: CombineKeyValue) = comb &>> ("white-space", "normal") + /// Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. /// The text continues on the same line until a `
` tag is encountered. [] member inline _.whiteSpaceNowrap([] comb: CombineKeyValue) = comb &>> ("white-space", "nowrap") + /// Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the 
 tag in HTML.
     []
     member inline _.whiteSpacePre([] comb: CombineKeyValue) = comb &>> ("white-space", "pre")
+
     /// Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
     []
     member inline _.whiteSpacePreLine([] comb: CombineKeyValue) = comb &>> ("white-space", "pre-line")
+
     /// Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
     []
     member inline _.whiteSpacePreWrap([] comb: CombineKeyValue) = comb &>> ("white-space", "pre-wrap")
+
     /// Sets this property to its default value.
     []
     member inline _.whiteSpaceInitial([] comb: CombineKeyValue) = comb &>> ("white-space", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.whiteSpaceInheritFromParent([] comb: CombineKeyValue) = comb &>> ("white-space", "inherit")
+    member inline _.whiteSpaceInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("white-space", "inherit")
+
+    /// Sets how white space is handled using a CSS string value (e.g. "pre-wrap", "var(--white-space)").
+    []
+    member inline _.whiteSpace([] comb: CombineKeyValue, value: string) =
+        comb &>> ("white-space", value)
 
     /// Default value. Uses default line break rules.
+    []
     []
     member inline _.wordbreakNormal([] comb: CombineKeyValue) = comb &>> ("word-break", "normal")
+
+    /// Sets whether line breaks appear wherever the text would otherwise overflow its content box.
+    []
+    member inline _.wordBreakNormal([] comb: CombineKeyValue) = comb &>> ("word-break", "normal")
+
     /// To prevent overflow, word may be broken at any character
+    []
     []
     member inline _.wordbreakBreakAll([] comb: CombineKeyValue) = comb &>> ("word-break", "break-all")
+
+    /// Word breaks may be inserted between any two characters.
+    []
+    member inline _.wordBreakBreakAll([] comb: CombineKeyValue) = comb &>> ("word-break", "break-all")
+
     /// Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value "normal")
+    []
     []
     member inline _.wordbreakKeepAll([] comb: CombineKeyValue) = comb &>> ("word-break", "keep-all")
+
+    /// Word breaks should not be used for Chinese/Japanese/Korean (CJK) text.
+    []
+    member inline _.wordBreakKeepAll([] comb: CombineKeyValue) = comb &>> ("word-break", "keep-all")
+
     /// To prevent overflow, word may be broken at arbitrary points.
+    []
     []
     member inline _.wordbreakBreakWord([] comb: CombineKeyValue) = comb &>> ("word-break", "break-word")
+
+    /// Allows unbreakable words to be broken.
+    []
+    member inline _.wordBreakBreakWord([] comb: CombineKeyValue) = comb &>> ("word-break", "break-word")
+
     /// Sets this property to its default value.
+    []
     []
     member inline _.wordbreakInitial([] comb: CombineKeyValue) = comb &>> ("word-break", "initial")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.wordBreakInitial([] comb: CombineKeyValue) = comb &>> ("word-break", "initial")
+
     /// Inherits this property from its parent element.
+    []
     []
-    member inline _.wordbreakInheritFromParent([] comb: CombineKeyValue) = comb &>> ("word-break", "inherit")
+    member inline _.wordbreakInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("word-break", "inherit")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.wordBreakInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("word-break", "inherit")
+
+    /// Sets line breaking rules for words using a CSS string value (e.g. "break-all", "var(--word-break)").
+    []
+    member inline _.wordBreak([] comb: CombineKeyValue, value: string) = comb &>> ("word-break", value)
 
     /// Allows a straight jump "scroll effect" between elements within the scrolling box. This is default
     []
     member inline _.scrollBehaviorAuto([] comb: CombineKeyValue) = comb &>> ("scroll-behavior", "auto")
+
     /// Allows a smooth animated "scroll effect" between elements within the scrolling box.
     []
-    member inline _.scrollBehaviorSmooth([] comb: CombineKeyValue) = comb &>> ("scroll-behavior", "smooth")
+    member inline _.scrollBehaviorSmooth([] comb: CombineKeyValue) =
+        comb &>> ("scroll-behavior", "smooth")
+
     /// Sets this property to its default value.
     []
-    member inline _.scrollBehaviorInitial([] comb: CombineKeyValue) = comb &>> ("scroll-behavior", "initial")
+    member inline _.scrollBehaviorInitial([] comb: CombineKeyValue) =
+        comb &>> ("scroll-behavior", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.scrollBehaviorInheritFromParent([] comb: CombineKeyValue) = comb &>> ("scroll-behavior", "inherit")
+    member inline _.scrollBehaviorInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("scroll-behavior", "inherit")
+
+    /// Sets the scroll behavior using a CSS string value (e.g. "smooth", "var(--scroll-behavior)").
+    []
+    member inline _.scrollBehavior([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-behavior", value)
 
     /// The content is not clipped, and it may be rendered outside the left and right edges. This is default.
     []
     member inline _.overflowVisible([] comb: CombineKeyValue) = comb &>> ("overflow", "visibile")
+
     /// The content is clipped - and no scrolling mechanism is provided.
     []
     member inline _.overflowHidden([] comb: CombineKeyValue) = comb &>> ("overflow", "hidden")
+
     /// The content is clipped and a scrolling mechanism is provided.
     []
     member inline _.overflowScroll([] comb: CombineKeyValue) = comb &>> ("overflow", "scroll")
+
     /// Should cause a scrolling mechanism to be provided for overflowing boxes
     []
     member inline _.overflowAuto([] comb: CombineKeyValue) = comb &>> ("overflow", "auto")
+
     /// Sets this property to its default value.
     []
     member inline _.overflowInitial([] comb: CombineKeyValue) = comb &>> ("overflow", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.overflowInheritFromParent([] comb: CombineKeyValue) = comb &>> ("overflow", "inherit")
+    member inline _.overflowInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("overflow", "inherit")
+
+    /// Sets the overflow behavior using a CSS string value (e.g. "auto", "hidden scroll", "var(--overflow)").
+    []
+    member inline _.overflow([] comb: CombineKeyValue, value: string) = comb &>> ("overflow", value)
 
     /// The content is not clipped, and it may be rendered outside the left and right edges. This is default.
     []
     member inline _.overflowXVisible([] comb: CombineKeyValue) = comb &>> ("overflow-x", "visibile")
+
     /// The content is clipped - and no scrolling mechanism is provided.
     []
     member inline _.overflowXHidden([] comb: CombineKeyValue) = comb &>> ("overflow-x", "hidden")
+
     /// The content is clipped and a scrolling mechanism is provided.
     []
     member inline _.overflowXScroll([] comb: CombineKeyValue) = comb &>> ("overflow-x", "scroll")
+
     /// Should cause a scrolling mechanism to be provided for overflowing boxes
     []
     member inline _.overflowXAuto([] comb: CombineKeyValue) = comb &>> ("overflow-x", "auto")
+
     /// Sets this property to its default value.
     []
     member inline _.overflowXInitial([] comb: CombineKeyValue) = comb &>> ("overflow-x", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.overflowXInheritFromParent([] comb: CombineKeyValue) = comb &>> ("overflow-x", "inherit")
+    member inline _.overflowXInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("overflow-x", "inherit")
+
+    /// Sets the overflow behavior of the horizontal direction using a CSS string value (e.g. "auto", "var(--overflow-x)").
+    []
+    member inline _.overflowX([] comb: CombineKeyValue, value: string) = comb &>> ("overflow-x", value)
 
     /// The content is not clipped, and it may be rendered outside the left and right edges. This is default.
     []
     member inline _.overflowYVisible([] comb: CombineKeyValue) = comb &>> ("overflow-y", "visibile")
+
     /// The content is clipped - and no scrolling mechanism is provided.
     []
     member inline _.overflowYHidden([] comb: CombineKeyValue) = comb &>> ("overflow-y", "hidden")
+
     /// The content is clipped and a scrolling mechanism is provided.
     []
     member inline _.overflowYScroll([] comb: CombineKeyValue) = comb &>> ("overflow-y", "scroll")
+
     /// Should cause a scrolling mechanism to be provided for overflowing boxes
     []
     member inline _.overflowYAuto([] comb: CombineKeyValue) = comb &>> ("overflow-y", "auto")
+
     /// Sets this property to its default value.
     []
     member inline _.overflowYInitial([] comb: CombineKeyValue) = comb &>> ("overflow-y", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.overflowYInheritFromParent([] comb: CombineKeyValue) = comb &>> ("overflow-y", "inherit")
+    member inline _.overflowYInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("overflow-y", "inherit")
+
+    /// Sets the overflow behavior of the vertical direction using a CSS string value (e.g. "auto", "var(--overflow-y)").
+    []
+    member inline _.overflowY([] comb: CombineKeyValue, value: string) = comb &>> ("overflow-y", value)
 
     /// The element is hidden (but still takes up space).
     []
     member inline _.visibilityHidden([] comb: CombineKeyValue) = comb &>> ("visibility", "hidden")
+
     /// Default value. The element is visible.
     []
     member inline _.visibilityVisible([] comb: CombineKeyValue) = comb &>> ("visibility", "visible")
+
     /// Only for table rows (` `), row groups (` `), columns (` `), column groups
     /// (` `). This value removes a row or column, but it does not affect the table layout.
     /// The space taken up by the row or column will be available for other content.
@@ -356,66 +509,106 @@ type CssBuilder() =
     /// If collapse is used on other elements, it renders as "hidden")
     []
     member inline _.visibilityCollapse([] comb: CombineKeyValue) = comb &>> ("visibility", "collapse")
+
     /// Sets this property to its default value.
     []
     member inline _.visibilityInitial([] comb: CombineKeyValue) = comb &>> ("visibility", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.visibilityInheritFromParent([] comb: CombineKeyValue) = comb &>> ("visibility", "inherit")
+    member inline _.visibilityInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("visibility", "inherit")
+
+    /// Sets the visibility of an element using a CSS string value (e.g. "hidden", "var(--visibility)").
+    []
+    member inline _.visibility([] comb: CombineKeyValue, value: string) = comb &>> ("visibility", value)
 
     /// Default value. The length is equal to the length of the flexible item. If the item has
     /// no length specified, the length will be according to its content.
     []
     member inline _.flexBasisAuto([] comb: CombineKeyValue) = comb &>> ("flex-basis", "auto")
+
     /// Sets this property to its default value.
     []
     member inline _.flexBasisInitial([] comb: CombineKeyValue) = comb &>> ("flex-basis", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.flexBasisInheritFromParent([] comb: CombineKeyValue) = comb &>> ("flex-basis", "inherit")
+    member inline _.flexBasisInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("flex-basis", "inherit")
 
     /// Default value. The flexible items are displayed horizontally, as a row
     []
     member inline _.flexDirectionRow([] comb: CombineKeyValue) = comb &>> ("flex-direction", "row")
+
     /// Same as row, but in reverse order.
     []
-    member inline _.flexDirectionRowReverse([] comb: CombineKeyValue) = comb &>> ("flex-direction", "row-reverse")
+    member inline _.flexDirectionRowReverse([] comb: CombineKeyValue) =
+        comb &>> ("flex-direction", "row-reverse")
+
     /// The flexible items are displayed vertically, as a column
     []
-    member inline _.flexDirectionColumn([] comb: CombineKeyValue) = comb &>> ("flex-direction", "column")
+    member inline _.flexDirectionColumn([] comb: CombineKeyValue) =
+        comb &>> ("flex-direction", "column")
+
     /// Same as column, but in reverse order
     []
-    member inline _.flexDirectionColumnReverse([] comb: CombineKeyValue) = comb &>> ("flex-direction", "column-reverse")
+    member inline _.flexDirectionColumnReverse([] comb: CombineKeyValue) =
+        comb &>> ("flex-direction", "column-reverse")
+
     /// Sets this property to its default value.
     []
-    member inline _.flexDirectionInitial([] comb: CombineKeyValue) = comb &>> ("flex-direction", "initial")
+    member inline _.flexDirectionInitial([] comb: CombineKeyValue) =
+        comb &>> ("flex-direction", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.flexDirectionInheritFromParent([] comb: CombineKeyValue) = comb &>> ("flex-direction", "inherit")
+    member inline _.flexDirectionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("flex-direction", "inherit")
+
+    /// Sets the direction of flexible items using a CSS string value (e.g. "row", "var(--flex-direction)").
+    []
+    member inline _.flexDirection([] comb: CombineKeyValue, value: string) =
+        comb &>> ("flex-direction", value)
 
     /// Default value. Specifies that the flexible items will not wrap.
     []
     member inline _.flexWrapNowrap([] comb: CombineKeyValue) = comb &>> ("flex-wrap", "nowrap")
+
     /// Specifies that the flexible items will wrap if necessary
     []
     member inline _.flexWrapWrap([] comb: CombineKeyValue) = comb &>> ("flex-wrap", "wrap")
+
     /// Specifies that the flexible items will wrap, if necessary, in reverse order
     []
-    member inline _.flexWrapWrapReverse([] comb: CombineKeyValue) = comb &>> ("flex-wrap", "wrap-reverse")
+    member inline _.flexWrapWrapReverse([] comb: CombineKeyValue) =
+        comb &>> ("flex-wrap", "wrap-reverse")
+
     /// Sets this property to its default value.
     []
     member inline _.flexWrapInitial([] comb: CombineKeyValue) = comb &>> ("flex-wrap", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.flexWrapInheritFromParent([] comb: CombineKeyValue) = comb &>> ("flex-wrap", "inherit")
+    member inline _.flexWrapInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("flex-wrap", "inherit")
+
+    /// Sets whether flexible items wrap using a CSS string value (e.g. "wrap", "var(--flex-wrap)").
+    []
+    member inline _.flexWrap([] comb: CombineKeyValue, value: string) = comb &>> ("flex-wrap", value)
 
     /// The element must float on the left side of its containing block.
+    []
     []
     member inline _.floatLeft([] comb: CombineKeyValue) = comb &>> ("float", "left")
+
     /// The element must float on the right side of its containing block.
+    []
     []
     member inline _.floatRight([] comb: CombineKeyValue) = comb &>> ("float", "right")
+
     /// The element must not float.
+    []
     []
     member inline _.floatNone([] comb: CombineKeyValue) = comb &>> ("float", "none")
 
@@ -424,234 +617,365 @@ type CssBuilder() =
     /// Default value)
     []
     member inline _.fontDisplayAuto([] comb: CombineKeyValue) = comb &>> ("font-display", "auto")
+
     /// Gives the font face a short block period and an infinite swap period.
     []
     member inline _.fontDisplayBlock([] comb: CombineKeyValue) = comb &>> ("font-display", "block")
+
     /// Gives the font face an extremely small block period and an infinite swap period.
     []
     member inline _.fontDisplaySwap([] comb: CombineKeyValue) = comb &>> ("font-display", "swap")
+
     /// Gives the font face an extremely small block period and a short swap period.
     []
-    member inline _.fontDisplayFallback([] comb: CombineKeyValue) = comb &>> ("font-display", "fallback")
+    member inline _.fontDisplayFallback([] comb: CombineKeyValue) =
+        comb &>> ("font-display", "fallback")
+
     /// Gives the font face an extremely small block period and no swap period.
     []
-    member inline _.fontDisplayOptional([] comb: CombineKeyValue) = comb &>> ("font-display", "optional")
+    member inline _.fontDisplayOptional([] comb: CombineKeyValue) =
+        comb &>> ("font-display", "optional")
 
     /// Default. The browser determines whether font kerning should be applied or not
     []
     member inline _.fontKerningAuto([] comb: CombineKeyValue) = comb &>> ("font-kerning", "auto")
+
     /// Specifies that font kerning is applied
     []
     member inline _.fontKerningNormal([] comb: CombineKeyValue) = comb &>> ("font-kerning", "normal")
+
     /// Specifies that font kerning is not applied
     []
     member inline _.fontKerningNone([] comb: CombineKeyValue) = comb &>> ("font-kerning", "none")
 
+    /// Sets the font kerning using a CSS string value (e.g. "auto", "var(--font-kerning)").
+    []
+    member inline _.fontKerning([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-kerning", value)
+
     /// Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold.
     /// Possible values are [100, 200, 300, 400, 500, 600, 700, 800, 900]
     []
-    member inline _.fontWeight([] comb: CombineKeyValue, weight: int) = comb &&& mkWithKV ("font-weight", weight)
+    member inline _.fontWeight([] comb: CombineKeyValue, weight: int) =
+        comb &&& mkWithKV ("font-weight", weight)
+
     /// Defines font weight using a CSS string value (e.g. "bold", "var(--font-weight-strong)").
     []
-    member inline _.fontWeight([] comb: CombineKeyValue, weight: string) = comb &>> ("font-weight", weight)
+    member inline _.fontWeight([] comb: CombineKeyValue, weight: string) =
+        comb &>> ("font-weight", weight)
+
     /// Defines normal characters. This is default.
     []
     member inline _.fontWeightNormal([] comb: CombineKeyValue) = comb &>> ("font-weight", "normal")
+
     /// Defines thick characters.
     []
     member inline _.fontWeightBold([] comb: CombineKeyValue) = comb &>> ("font-weight", "bold")
+
     /// Defines thicker characters
     []
     member inline _.fontWeightBolder([] comb: CombineKeyValue) = comb &>> ("font-weight", "bolder")
+
     /// Defines lighter characters.
     []
     member inline _.fontWeightLighter([] comb: CombineKeyValue) = comb &>> ("font-weight", "lighter")
+
     /// Sets this property to its default value.
     []
     member inline _.fontWeightInitial([] comb: CombineKeyValue) = comb &>> ("font-weight", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.fontWeightInheritFromParent([] comb: CombineKeyValue) = comb &>> ("font-weight", "inherit")
+    member inline _.fontWeightInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-weight", "inherit")
 
     /// Sets the spacing between text characters.
     []
-    member inline _.letterSpacing([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("letter-spacing", value)
+    member inline _.letterSpacing([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("letter-spacing", value)
+
     /// Sets the spacing between text characters.
     []
-    member inline _.letterSpacing([] comb: CombineKeyValue, value: string) = comb &>> ("letter-spacing", value)
+    member inline _.letterSpacing([] comb: CombineKeyValue, value: string) =
+        comb &>> ("letter-spacing", value)
+
     /// Specifies the default letter spacing for the current font.
     []
-    member inline _.letterSpacingNormal([] comb: CombineKeyValue) = comb &>> ("letter-spacing", "normal")
+    member inline _.letterSpacingNormal([] comb: CombineKeyValue) =
+        comb &>> ("letter-spacing", "normal")
+
     /// Sets this property to its default value.
     []
-    member inline _.letterSpacingInitial([] comb: CombineKeyValue) = comb &>> ("letter-spacing", "initial")
+    member inline _.letterSpacingInitial([] comb: CombineKeyValue) =
+        comb &>> ("letter-spacing", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.letterSpacingInheritFromParent([] comb: CombineKeyValue) = comb &>> ("letter-spacing", "inherit")
+    member inline _.letterSpacingInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("letter-spacing", "inherit")
 
     /// The browser displays a normal font style. This is defaut.
     []
     member inline _.fontStyleNormal([] comb: CombineKeyValue) = comb &>> ("font-style", "normal")
+
     /// The browser displays an italic font style.
     []
     member inline _.fontStyleItalic([] comb: CombineKeyValue) = comb &>> ("font-style", "italic")
+
     /// The browser displays an oblique font style.
     []
     member inline _.fontStyleOblique([] comb: CombineKeyValue) = comb &>> ("font-style", "oblique")
+
     /// Sets this property to its default value.
     []
     member inline _.fontStyleInitial([] comb: CombineKeyValue) = comb &>> ("font-style", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.fontStyleInheritFromParent([] comb: CombineKeyValue) = comb &>> ("font-style", "inherit")
+    member inline _.fontStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-style", "inherit")
+
+    /// Sets the font style using a CSS string value (e.g. "italic", "var(--font-style)").
+    []
+    member inline _.fontStyle([] comb: CombineKeyValue, value: string) = comb &>> ("font-style", value)
 
     /// The browser displays a normal font. This is default
     []
     member inline _.fontVariantNormal([] comb: CombineKeyValue) = comb &>> ("font-variant", "normal")
+
     /// The browser displays a small-caps font
     []
-    member inline _.fontVariantSmallCaps([] comb: CombineKeyValue) = comb &>> ("font-variant", "small-caps")
+    member inline _.fontVariantSmallCaps([] comb: CombineKeyValue) =
+        comb &>> ("font-variant", "small-caps")
+
     /// Sets this property to its default value.
     []
     member inline _.fontVariantInitial([] comb: CombineKeyValue) = comb &>> ("font-variant", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.fontVariantInheritFromParent([] comb: CombineKeyValue) = comb &>> ("font-variant", "inherit")
+    member inline _.fontVariantInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-variant", "inherit")
+
+    /// Sets the font variant using a CSS string value (e.g. "small-caps", "var(--font-variant)").
+    []
+    member inline _.fontVariant([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-variant", value)
 
     /// Break words only at allowed break points
     []
     member inline _.wordWrapNormal([] comb: CombineKeyValue) = comb &>> ("word-wrap", "normal")
+
     /// Allows unbreakable words to be broken
     []
     member inline _.wordWrapBreakWord([] comb: CombineKeyValue) = comb &>> ("word-wrap", "break-word")
+
     /// Sets this property to its default value.
     []
     member inline _.wordWrapInitial([] comb: CombineKeyValue) = comb &>> ("word-wrap", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.wordWrapInheritFromParent([] comb: CombineKeyValue) = comb &>> ("word-wrap", "inherit")
+    member inline _.wordWrapInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("word-wrap", "inherit")
+
+    /// Sets the word wrapping behavior using a CSS string value (e.g. "break-word", "var(--word-wrap)").
+    []
+    member inline _.wordWrap([] comb: CombineKeyValue, value: string) = comb &>> ("word-wrap", value)
 
     /// Default. The element inherits its parent container's align-items property, or "stretch" if it has no parent container.
     []
     member inline _.alignSelfAuto([] comb: CombineKeyValue) = comb &>> ("align-self", "auto")
+
     /// The element is positioned to fit the container
     []
     member inline _.alignSelfStretch([] comb: CombineKeyValue) = comb &>> ("align-self", "stretch")
+
     /// The element is positioned at the center of the container
     []
     member inline _.alignSelfCenter([] comb: CombineKeyValue) = comb &>> ("align-self", "center")
+
     /// The element is positioned at the beginning of the container
     []
     member inline _.alignSelfFlexStart([] comb: CombineKeyValue) = comb &>> ("align-self", "flex-start")
+
     /// The element is positioned at the end of the container
     []
     member inline _.alignSelfFlexEnd([] comb: CombineKeyValue) = comb &>> ("align-self", "flex-end")
+
     /// The element is positioned at the baseline of the container
     []
     member inline _.alignSelfBaseline([] comb: CombineKeyValue) = comb &>> ("align-self", "baseline")
+
     /// Sets this property to its default value)
     []
     member inline _.alignSelfInitial([] comb: CombineKeyValue) = comb &>> ("align-self", "initial")
+
     /// Inherits this property from its parent element
     []
-    member inline _.alignSelfInheritFromParent([] comb: CombineKeyValue) = comb &>> ("align-self", "inherit")
+    member inline _.alignSelfInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("align-self", "inherit")
+
+    /// Sets the alignment of the item inside its container using a CSS string value (e.g. "center", "var(--align-self)").
+    []
+    member inline _.alignSelf([] comb: CombineKeyValue, value: string) = comb &>> ("align-self", value)
 
     /// Default. Items are stretched to fit the container
     []
     member inline _.alignItemsStretch([] comb: CombineKeyValue) = comb &>> ("align-items", "stretch")
+
     /// Items are positioned at the center of the container
     []
     member inline _.alignItemsCenter([] comb: CombineKeyValue) = comb &>> ("align-items", "center")
+
     /// Items are positioned at the beginning of the container
     []
-    member inline _.alignItemsFlexStart([] comb: CombineKeyValue) = comb &>> ("align-items", "flex-start")
+    member inline _.alignItemsFlexStart([] comb: CombineKeyValue) =
+        comb &>> ("align-items", "flex-start")
+
     /// Items are positioned at the end of the container
     []
     member inline _.alignItemsFlexEnd([] comb: CombineKeyValue) = comb &>> ("align-items", "flex-end")
+
     /// Items are positioned at the baseline of the container
     []
     member inline _.alignItemsBaseline([] comb: CombineKeyValue) = comb &>> ("align-items", "baseline")
+
     /// Sets this property to its default value)
     []
     member inline _.alignItemsInitial([] comb: CombineKeyValue) = comb &>> ("align-items", "initial")
+
     /// Inherits this property from its parent element
     []
-    member inline _.alignItemsInheritFromParent([] comb: CombineKeyValue) = comb &>> ("align-items", "inherit")
+    member inline _.alignItemsInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("align-items", "inherit")
+
+    /// Sets the alignment of items inside the container using a CSS string value (e.g. "center", "var(--align-items)").
+    []
+    member inline _.alignItems([] comb: CombineKeyValue, value: string) =
+        comb &>> ("align-items", value)
 
     /// Default value. Lines stretch to take up the remaining space.
     []
-    member inline _.alignContentStretch([] comb: CombineKeyValue) = comb &>> ("align-content", "stretch")
+    member inline _.alignContentStretch([] comb: CombineKeyValue) =
+        comb &>> ("align-content", "stretch")
+
     /// Lines are packed toward the center of the flex container.
     []
     member inline _.alignContentCenter([] comb: CombineKeyValue) = comb &>> ("align-content", "center")
+
     /// Lines are packed toward the start of the flex container.
     []
-    member inline _.alignContentFlexStart([] comb: CombineKeyValue) = comb &>> ("align-content", "flex-start")
+    member inline _.alignContentFlexStart([] comb: CombineKeyValue) =
+        comb &>> ("align-content", "flex-start")
+
     /// Lines are packed toward the end of the flex container.
     []
-    member inline _.alignContentFlexEnd([] comb: CombineKeyValue) = comb &>> ("align-content", "flex-end")
+    member inline _.alignContentFlexEnd([] comb: CombineKeyValue) =
+        comb &>> ("align-content", "flex-end")
+
     /// Lines are evenly distributed in the flex container.
     []
-    member inline _.alignContentSpaceBetween([] comb: CombineKeyValue) = comb &>> ("align-content", "space-between")
+    member inline _.alignContentSpaceBetween([] comb: CombineKeyValue) =
+        comb &>> ("align-content", "space-between")
+
     /// Lines are evenly distributed in the flex container, with half-size spaces on either end.
     []
-    member inline _.alignContentSpaceAround([] comb: CombineKeyValue) = comb &>> ("align-content", "space-around")
+    member inline _.alignContentSpaceAround([] comb: CombineKeyValue) =
+        comb &>> ("align-content", "space-around")
+
     /// Sets this property to its default value.
     []
-    member inline _.alignContentInitial([] comb: CombineKeyValue) = comb &>> ("align-content", "initial")
+    member inline _.alignContentInitial([] comb: CombineKeyValue) =
+        comb &>> ("align-content", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.alignContentInheritFromParent([] comb: CombineKeyValue) = comb &>> ("align-content", "inherit")
+    member inline _.alignContentInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("align-content", "inherit")
+
+    /// Sets the alignment of lines inside the container using a CSS string value (e.g. "center", "var(--align-content)").
+    []
+    member inline _.alignContent([] comb: CombineKeyValue, value: string) =
+        comb &>> ("align-content", value)
 
     /// The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multicol containers
     []
-    member inline _.justifyContent([] comb: CombineKeyValue, x: string) = comb &>> ("justify-content", x)
+    member inline _.justifyContent([] comb: CombineKeyValue, x: string) =
+        comb &>> ("justify-content", x)
+
     /// The items are packed flush to each other toward the start edge of the alignment container in the main axis.
     []
-    member inline _.justifyContentStart([] comb: CombineKeyValue) = comb &>> ("justify-content", "start")
+    member inline _.justifyContentStart([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "start")
+
     /// The items are packed flush to each other toward the end edge of the alignment container in the main axis.
     []
     member inline _.justifyContentEnd([] comb: CombineKeyValue) = comb &>> ("justify-content", "end")
+
     /// The items are packed flush to each other toward the start edge of the alignment container on the flex container's main-start side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like start.
     []
-    member inline _.justifyContentFlexStart([] comb: CombineKeyValue) = comb &>> ("justify-content", "flex-start")
+    member inline _.justifyContentFlexStart([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "flex-start")
+
     /// The items are packed flush to each other at the end edge of the alignment container on the flex container's main-end side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like end.
     []
-    member inline _.justifyContentFlexEnd([] comb: CombineKeyValue) = comb &>> ("justify-content", "flex-end")
+    member inline _.justifyContentFlexEnd([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "flex-end")
+
     /// The items are packed flush to each other toward the center of the alignment container along the main axis.
     []
-    member inline _.justifyContentCenter([] comb: CombineKeyValue) = comb &>> ("justify-content", "center")
+    member inline _.justifyContentCenter([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "center")
+
     /// The items are packed flush to each other toward the left edge of the alignment container. When the property's horizontal axis is not parallel with the inline axis, such as when flex-direction: column; is set, this value behaves like start.
     []
     member inline _.justifyContentLeft([] comb: CombineKeyValue) = comb &>> ("justify-content", "left")
+
     /// The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis (in a grid container) or the main-axis (in a flexbox container), this value behaves like start.
     []
-    member inline _.justifyContentRight([] comb: CombineKeyValue) = comb &>> ("justify-content", "right")
+    member inline _.justifyContentRight([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "right")
+
     /// Behaves as stretch, except in the case of multi-column containers with a non-auto column-width, in which case the columns take their specified column-width rather than stretching to fill the container. As stretch behaves as start in flex containers, normal also behaves as start.
     []
-    member inline _.justifyContentNormal([] comb: CombineKeyValue) = comb &>> ("justify-content", "normal")
+    member inline _.justifyContentNormal([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "normal")
+
     /// The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
     []
-    member inline _.justifyContentSpaceBetween([] comb: CombineKeyValue) = comb &>> ("justify-content", "space-between")
+    member inline _.justifyContentSpaceBetween([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "space-between")
+
     /// The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items. If there is only one item, it will be centered.
     []
-    member inline _.justifyContentSpaceAround([] comb: CombineKeyValue) = comb &>> ("justify-content", "space-around")
+    member inline _.justifyContentSpaceAround([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "space-around")
+
     /// The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
     []
-    member inline _.justifyContentSpaceEvenly([] comb: CombineKeyValue) = comb &>> ("justify-content", "space-evenly")
+    member inline _.justifyContentSpaceEvenly([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "space-evenly")
+
     /// If the combined size of the items along the main axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.
     []
-    member inline _.justifyContentStretch([] comb: CombineKeyValue) = comb &>> ("justify-content", "stretch")
+    member inline _.justifyContentStretch([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "stretch")
+
     /// Sets this property to its default value.
     []
-    member inline _.justifyContentInitial([] comb: CombineKeyValue) = comb &>> ("justify-content", "initial")
+    member inline _.justifyContentInitial([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.justifyContentInheritFromParent([] comb: CombineKeyValue) = comb &>> ("justify-content", "inherit")
+    member inline _.justifyContentInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "inherit")
 
     /// The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
     []
     member inline _.justifyItems([] comb: CombineKeyValue, x: string) = comb &>> ("justify-items", x)
+
     /// The effect of this keyword is dependent of the layout mode we are in:
     /// In block-level layouts, the keyword is a synonym of start.
     /// In absolutely-positioned layouts, the keyword behaved like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
@@ -660,46 +984,72 @@ type CssBuilder() =
     /// In grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic size where it behaves like start.
     []
     member inline _.justifyItemsNormal([] comb: CombineKeyValue) = comb &>> ("justify-items", "normal")
+
     /// The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis
     []
     member inline _.justifyItemsStart([] comb: CombineKeyValue) = comb &>> ("justify-items", "start")
+
     /// The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.
     []
     member inline _.justifyItemsEnd([] comb: CombineKeyValue) = comb &>> ("justify-items", "end")
+
     /// For items that are not children of a flex container, this value is treated like start.
     []
-    member inline _.justifyItemsFlexStart([] comb: CombineKeyValue) = comb &>> ("justify-items", "flex-start")
+    member inline _.justifyItemsFlexStart([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "flex-start")
+
     /// For items that are not children of a flex container, this value is treated like end.
     []
-    member inline _.justifyItemsFlexEnd([] comb: CombineKeyValue) = comb &>> ("justify-items", "flex-end")
+    member inline _.justifyItemsFlexEnd([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "flex-end")
+
     /// The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
     []
-    member inline _.justifyItemsSelfStart([] comb: CombineKeyValue) = comb &>> ("justify-items", "self-start")
+    member inline _.justifyItemsSelfStart([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "self-start")
+
     /// The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
     []
-    member inline _.justifyItemsSelfEnd([] comb: CombineKeyValue) = comb &>> ("justify-items", "self-end")
+    member inline _.justifyItemsSelfEnd([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "self-end")
+
     /// The items are packed flush to each other toward the center of the alignment container.
     []
     member inline _.justifyItemsCenter([] comb: CombineKeyValue) = comb &>> ("justify-items", "center")
+
     /// The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like start.
     []
     member inline _.justifyItemsLeft([] comb: CombineKeyValue) = comb &>> ("justify-items", "left")
+
     /// The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like start.
     []
     member inline _.justifyItemsRight([] comb: CombineKeyValue) = comb &>> ("justify-items", "right")
+
     /// Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for first baseline is start, the one for last baseline is end.
     []
-    member inline _.justifyItemsBaseline([] comb: CombineKeyValue) = comb &>> ("justify-items", "baseline")
+    member inline _.justifyItemsBaseline([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "baseline")
+
     ///If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.
+    []
     []
-    member inline _.justifyItemsStrench([] comb: CombineKeyValue) = comb &>> ("justify-items", "stretch")
+    member inline _.justifyItemsStrench([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "stretch")
+
+    /// The items are stretched to fill the container.
+    []
+    member inline _.justifyItemsStretch([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "stretch")
+
     /// In the case of anchor-positioned elements, aligns the items to the center of the associated anchor element in the inline direction. See Centering on the anchor using anchor-center.
     []
-    member inline _.justifyItemsAnchorCenter([] comb: CombineKeyValue) = comb &>> ("justify-items", "anchor-center")
+    member inline _.justifyItemsAnchorCenter([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "anchor-center")
 
     /// The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.
     []
     member inline _.justifySelf([] comb: CombineKeyValue, x: string) = comb &>> ("justify-self", x)
+
     /// The effect of this keyword is dependent of the layout mode we are in:
     /// In block-level layouts, the keyword is a synonym of start.
     /// In absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
@@ -708,282 +1058,447 @@ type CssBuilder() =
     /// In grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic size where it behaves like start.
     []
     member inline _.justifySelfNormal([] comb: CombineKeyValue) = comb &>> ("justify-self", "normal")
+
     /// The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.
     []
     member inline _.justifySelfStart([] comb: CombineKeyValue) = comb &>> ("justify-self", "start")
+
     /// The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.
     []
     member inline _.justifySelfEnd([] comb: CombineKeyValue) = comb &>> ("justify-self", "end")
+
     /// For items that are not children of a flex container, this value is treated like start.
     []
-    member inline _.justifySelfFlexStart([] comb: CombineKeyValue) = comb &>> ("justify-self", "flex-start")
+    member inline _.justifySelfFlexStart([] comb: CombineKeyValue) =
+        comb &>> ("justify-self", "flex-start")
+
     /// For items that are not children of a flex container, this value is treated like end.
     []
     member inline _.justifySelfFlexEnd([] comb: CombineKeyValue) = comb &>> ("justify-self", "flex-end")
+
     /// The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
     []
-    member inline _.justifySelfSelfStart([] comb: CombineKeyValue) = comb &>> ("justify-self", "self-start")
+    member inline _.justifySelfSelfStart([] comb: CombineKeyValue) =
+        comb &>> ("justify-self", "self-start")
+
     /// The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
     []
     member inline _.justifySelfSelfEnd([] comb: CombineKeyValue) = comb &>> ("justify-self", "self-end")
+
     /// The items are packed flush to each other toward the center of the alignment container.
     []
     member inline _.justifySelfCenter([] comb: CombineKeyValue) = comb &>> ("justify-self", "center")
+
     /// The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like start.
     []
     member inline _.justifySelfLeft([] comb: CombineKeyValue) = comb &>> ("justify-self", "left")
+
     /// The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like start.
     []
     member inline _.justifySelfRight([] comb: CombineKeyValue) = comb &>> ("justify-self", "right")
+
     /// Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for first baseline is start, the one for last baseline is end.
     []
-    member inline _.justifySelfBaseline([] comb: CombineKeyValue) = comb &>> ("justify-self", "baseline")
+    member inline _.justifySelfBaseline([] comb: CombineKeyValue) =
+        comb &>> ("justify-self", "baseline")
+
     /// If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.
+    []
     []
     member inline _.justifySelfStrench([] comb: CombineKeyValue) = comb &>> ("justify-self", "stretch")
+
+    /// The item is stretched to fill the container.
+    []
+    member inline _.justifySelfStretch([] comb: CombineKeyValue) = comb &>> ("justify-self", "stretch")
+
     /// In the case of anchor-positioned elements, aligns the item to the center of the associated anchor element in the inline direction. See Centering on the anchor using anchor-center.
     []
-    member inline _.justifySelfAnchorCenter([] comb: CombineKeyValue) = comb &>> ("justify-self", "anchor-center")
+    member inline _.justifySelfAnchorCenter([] comb: CombineKeyValue) =
+        comb &>> ("justify-self", "anchor-center")
 
     /// Sets the width of the outline.
     []
-    member inline _.outlineWidth([] comb: CombineKeyValue, width: int) = comb &&& mkPxWithKV ("outline-width", width)
+    member inline _.outlineWidth([] comb: CombineKeyValue, width: int) =
+        comb &&& mkPxWithKV ("outline-width", width)
+
     /// Sets the width of the outline.
     []
-    member inline _.outlineWidth([] comb: CombineKeyValue, width: string) = comb &>> ("outline-width", width)
+    member inline _.outlineWidth([] comb: CombineKeyValue, width: string) =
+        comb &>> ("outline-width", width)
+
     /// Specifies a medium outline. This is default.
     []
     member inline _.outlineWidthMedium([] comb: CombineKeyValue) = comb &>> ("outline-width", "medium")
+
     /// Specifies a thin outline.
     []
     member inline _.outlineWidthThin([] comb: CombineKeyValue) = comb &>> ("outline-width", "thin")
+
     /// Specifies a thick outline.
     []
     member inline _.outlineWidthThick([] comb: CombineKeyValue) = comb &>> ("outline-width", "thick")
+
     /// Sets this property to its default value)
     []
-    member inline _.outlineWidthInitial([] comb: CombineKeyValue) = comb &>> ("outline-width", "initial")
+    member inline _.outlineWidthInitial([] comb: CombineKeyValue) =
+        comb &>> ("outline-width", "initial")
+
     /// Inherits this property from its parent element
     []
-    member inline _.outlineWidthInheritFromParent([] comb: CombineKeyValue) = comb &>> ("outline-width", "inherit")
+    member inline _.outlineWidthInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("outline-width", "inherit")
 
     /// Default value. The marker is a filled circle
     []
     member inline _.listStyleTypeDisc([] comb: CombineKeyValue) = comb &>> ("list-style-type", "disc")
+
     /// The marker is traditional Armenian numbering
     []
-    member inline _.listStyleTypeArmenian([] comb: CombineKeyValue) = comb &>> ("list-style-type", "armenian")
+    member inline _.listStyleTypeArmenian([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "armenian")
+
     /// The marker is a circle
     []
-    member inline _.listStyleTypeCircle([] comb: CombineKeyValue) = comb &>> ("list-style-type", "circle")
+    member inline _.listStyleTypeCircle([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "circle")
+
     /// The marker is plain ideographic numbers
     []
-    member inline _.listStyleTypeCjkIdeographic([] comb: CombineKeyValue) = comb &>> ("list-style-type", "cjk-ideographic")
+    member inline _.listStyleTypeCjkIdeographic([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "cjk-ideographic")
+
     /// The marker is a number
     []
-    member inline _.listStyleTypeDecimal([] comb: CombineKeyValue) = comb &>> ("list-style-type", "decimal")
+    member inline _.listStyleTypeDecimal([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "decimal")
+
     /// The marker is a number with leading zeros (01, 02, 03, etc.))
     []
-    member inline _.listStyleTypeDecimalLeadingZero([] comb: CombineKeyValue) = comb &>> ("list-style-type", "decimal-leading-zero")
+    member inline _.listStyleTypeDecimalLeadingZero([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "decimal-leading-zero")
+
     /// The marker is traditional Georgian numbering
     []
-    member inline _.listStyleTypeGeorgian([] comb: CombineKeyValue) = comb &>> ("list-style-type", "georgian")
+    member inline _.listStyleTypeGeorgian([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "georgian")
+
     /// The marker is traditional Hebrew numbering
     []
-    member inline _.listStyleTypeHebrew([] comb: CombineKeyValue) = comb &>> ("list-style-type", "hebrew")
+    member inline _.listStyleTypeHebrew([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "hebrew")
+
     /// The marker is traditional Hiragana numbering
     []
-    member inline _.listStyleTypeHiragana([] comb: CombineKeyValue) = comb &>> ("list-style-type", "hiragana")
+    member inline _.listStyleTypeHiragana([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "hiragana")
+
     /// The marker is traditional Hiragana iroha numbering
     []
-    member inline _.listStyleTypeHiraganaIroha([] comb: CombineKeyValue) = comb &>> ("list-style-type", "hiragana-iroha")
+    member inline _.listStyleTypeHiraganaIroha([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "hiragana-iroha")
+
     /// The marker is traditional Katakana numbering
     []
-    member inline _.listStyleTypeKatakana([] comb: CombineKeyValue) = comb &>> ("list-style-type", "katakana")
+    member inline _.listStyleTypeKatakana([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "katakana")
+
     /// The marker is traditional Katakana iroha numbering
     []
-    member inline _.listStyleTypeKatakanaIroha([] comb: CombineKeyValue) = comb &>> ("list-style-type", "katakana-iroha")
+    member inline _.listStyleTypeKatakanaIroha([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "katakana-iroha")
+
     /// The marker is lower-alpha (a, b, c, d, e, etc.))
     []
-    member inline _.listStyleTypeLowerAlpha([] comb: CombineKeyValue) = comb &>> ("list-style-type", "lower-alpha")
+    member inline _.listStyleTypeLowerAlpha([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "lower-alpha")
+
     /// The marker is lower-greek
     []
-    member inline _.listStyleTypeLowerGreek([] comb: CombineKeyValue) = comb &>> ("list-style-type", "lower-greek")
+    member inline _.listStyleTypeLowerGreek([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "lower-greek")
+
     /// The marker is lower-latin (a, b, c, d, e, etc.))
     []
-    member inline _.listStyleTypeLowerLatin([] comb: CombineKeyValue) = comb &>> ("list-style-type", "lower-latin")
+    member inline _.listStyleTypeLowerLatin([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "lower-latin")
+
     /// The marker is lower-roman (i, ii, iii, iv, v, etc.))
     []
-    member inline _.listStyleTypeLowerRoman([] comb: CombineKeyValue) = comb &>> ("list-style-type", "lower-roman")
+    member inline _.listStyleTypeLowerRoman([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "lower-roman")
+
     /// No marker is shown
     []
     member inline _.listStyleTypeNone([] comb: CombineKeyValue) = comb &>> ("list-style-type", "none")
+
     /// The marker is a square
     []
-    member inline _.listStyleTypeSquare([] comb: CombineKeyValue) = comb &>> ("list-style-type", "square")
+    member inline _.listStyleTypeSquare([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "square")
+
     /// The marker is upper-alpha (A, B, C, D, E, etc.))
     []
-    member inline _.listStyleTypeUpperAlpha([] comb: CombineKeyValue) = comb &>> ("list-style-type", "upper-alpha")
+    member inline _.listStyleTypeUpperAlpha([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "upper-alpha")
+
     /// The marker is upper-greek
     []
-    member inline _.listStyleTypeUpperGreek([] comb: CombineKeyValue) = comb &>> ("list-style-type", "upper-greek")
+    member inline _.listStyleTypeUpperGreek([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "upper-greek")
+
     /// The marker is upper-latin (A, B, C, D, E, etc.))
     []
-    member inline _.listStyleTypeUpperLatin([] comb: CombineKeyValue) = comb &>> ("list-style-type", "upper-latin")
+    member inline _.listStyleTypeUpperLatin([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "upper-latin")
+
     /// The marker is upper-roman (I, II, III, IV, V, etc.))
     []
-    member inline _.listStyleTypeUpperRoman([] comb: CombineKeyValue) = comb &>> ("list-style-type", "upper-roman")
+    member inline _.listStyleTypeUpperRoman([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "upper-roman")
+
     /// Sets this property to its default value.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
     []
-    member inline _.listStyleTypeInitial([] comb: CombineKeyValue) = comb &>> ("list-style-type", "initial")
+    member inline _.listStyleTypeInitial([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "initial")
+
     /// Inherits this property from its parent element.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
     []
-    member inline _.listStyleTypeInheritFromParent([] comb: CombineKeyValue) = comb &>> ("list-style-type", "inherit")
+    member inline _.listStyleTypeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "inherit")
+
+    /// Sets the list item marker type using a CSS string value (e.g. "disc", "var(--list-style-type)").
+    []
+    member inline _.listStyleType([] comb: CombineKeyValue, value: string) =
+        comb &>> ("list-style-type", value)
 
     /// Removes the list-style-image marker.
     []
     member inline _.propertyNone([] comb: CombineKeyValue) = comb &>> ("list-style-image", "none")
+
     /// The path to the image to be used as a list-item marker
     []
     member inline _.propertyUrl([] comb: CombineKeyValue, path: string) =
-        comb &&& CombineKeyValue(fun sb -> sb.Append("list-style-image: url(").Append(path).Append("); "))
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("list-style-image: url(").Append(path).Append("); "))
+
     /// Sets this property to its default value.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
     []
-    member inline _.propertyInitial([] comb: CombineKeyValue) = comb &>> ("list-style-image", "initial")
+    member inline _.propertyInitial([] comb: CombineKeyValue) =
+        comb &>> ("list-style-image", "initial")
+
     /// Inherits this property from its parent element.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
     []
-    member inline _.propertyInheritFromParent([] comb: CombineKeyValue) = comb &>> ("list-style-image", "inherit")
+    member inline _.propertyInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("list-style-image", "inherit")
 
     /// The bullet points will be inside the list item
     []
-    member inline _.listStylePositionInside([] comb: CombineKeyValue) = comb &>> ("list-style-position", "inside")
+    member inline _.listStylePositionInside([] comb: CombineKeyValue) =
+        comb &>> ("list-style-position", "inside")
+
     /// The bullet points will be outside the list item. This is default
     []
-    member inline _.listStylePositionOutside([] comb: CombineKeyValue) = comb &>> ("list-style-position", "outside")
+    member inline _.listStylePositionOutside([] comb: CombineKeyValue) =
+        comb &>> ("list-style-position", "outside")
+
     /// Sets this property to its default value.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
     []
-    member inline _.listStylePositionInitial([] comb: CombineKeyValue) = comb &>> ("list-style-position", "initial")
+    member inline _.listStylePositionInitial([] comb: CombineKeyValue) =
+        comb &>> ("list-style-position", "initial")
+
     /// Inherits this property from its parent element.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
     []
-    member inline _.listStylePositionInheritFromParent([] comb: CombineKeyValue) = comb &>> ("list-style-position", "inherit")
+    member inline _.listStylePositionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("list-style-position", "inherit")
+
+    /// Sets the position of the list item marker using a CSS string value (e.g. "inside", "var(--list-style-position)").
+    []
+    member inline _.listStylePosition([] comb: CombineKeyValue, value: string) =
+        comb &>> ("list-style-position", value)
 
     /// Sets the kind of decoration that is used on text in an element. Accepts a CSS text-decoration-line value (e.g. "underline overline").
     []
-    member inline _.textDecorationLine([] comb: CombineKeyValue, line: string) = comb &>> ("text-decoration-line", line)
+    member inline _.textDecorationLine([] comb: CombineKeyValue, line: string) =
+        comb &>> ("text-decoration-line", line)
+
     /// Specifies no text decoration line.
     []
-    member inline _.textDecorationLineNone([] comb: CombineKeyValue) = comb &>> ("text-decoration-line", "none")
+    member inline _.textDecorationLineNone([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "none")
+
     /// Draws a line beneath the text.
     []
-    member inline _.textDecorationLineUnderline([] comb: CombineKeyValue) = comb &>> ("text-decoration-line", "underline")
+    member inline _.textDecorationLineUnderline([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "underline")
+
     /// Draws a line above the text.
     []
-    member inline _.textDecorationLineOverline([] comb: CombineKeyValue) = comb &>> ("text-decoration-line", "overline")
+    member inline _.textDecorationLineOverline([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "overline")
+
     /// Draws a line through the text (strikethrough).
     []
-    member inline _.textDecorationLineLineThrough([] comb: CombineKeyValue) = comb &>> ("text-decoration-line", "line-through")
+    member inline _.textDecorationLineLineThrough([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "line-through")
+
     /// Sets this property to its default value.
     []
-    member inline _.textDecorationLineInitial([] comb: CombineKeyValue) = comb &>> ("text-decoration-line", "initial")
+    member inline _.textDecorationLineInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.textDecorationLineInheritFromParent([] comb: CombineKeyValue) = comb &>> ("text-decoration-line", "inherit")
+    member inline _.textDecorationLineInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "inherit")
 
     /// Specifies the decoration added to text. Accepts a CSS text-decoration value (e.g. "underline", "none", or a shorthand combining line, style, and color).
     []
-    member inline _.textDecoration([] comb: CombineKeyValue, line: string) = comb &>> ("text-decoration", line)
+    member inline _.textDecoration([] comb: CombineKeyValue, line: string) =
+        comb &>> ("text-decoration", line)
 
     /// Specifies no text decoration.
     []
     member inline _.textDecorationNone([] comb: CombineKeyValue) = comb &>> ("text-decoration", "none")
+
     /// Underlines the text.
     []
-    member inline _.textDecorationUnderline([] comb: CombineKeyValue) = comb &>> ("text-decoration", "underline")
+    member inline _.textDecorationUnderline([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "underline")
+
     /// Adds a line above the text.
     []
-    member inline _.textDecorationOverline([] comb: CombineKeyValue) = comb &>> ("text-decoration", "overline")
+    member inline _.textDecorationOverline([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "overline")
+
     /// Adds a line through the text (strikethrough).
     []
-    member inline _.textDecorationLineThrough([] comb: CombineKeyValue) = comb &>> ("text-decoration", "line-through")
+    member inline _.textDecorationLineThrough([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "line-through")
+
     /// Sets this property to its default value.
     []
-    member inline _.textDecorationInitial([] comb: CombineKeyValue) = comb &>> ("text-decoration", "initial")
+    member inline _.textDecorationInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.textDecorationInheritFromParent([] comb: CombineKeyValue) = comb &>> ("text-decoration", "inherit")
+    member inline _.textDecorationInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "inherit")
 
     /// Specifies that child elements will NOT preserve its 3D position. This is default.
     []
     member inline _.transformStyleFlat([] comb: CombineKeyValue) = comb &>> ("transform-style", "flat")
+
     /// Specifies that child elements will preserve its 3D position
     []
-    member inline _.transformStylePreserve3D([] comb: CombineKeyValue) = comb &>> ("transform-style", "preserve-3d")
+    member inline _.transformStylePreserve3D([] comb: CombineKeyValue) =
+        comb &>> ("transform-style", "preserve-3d")
+
     /// Sets this property to its default value.
     []
-    member inline _.transformStyleInitial([] comb: CombineKeyValue) = comb &>> ("transform-style", "initial")
+    member inline _.transformStyleInitial([] comb: CombineKeyValue) =
+        comb &>> ("transform-style", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.transformStyleInheritFromParent([] comb: CombineKeyValue) = comb &>> ("transform-style", "inherit")
+    member inline _.transformStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("transform-style", "inherit")
+
+    /// Sets how nested elements are rendered in 3D space using a CSS string value (e.g. "preserve-3d", "var(--transform-style)").
+    []
+    member inline _.transformStyle([] comb: CombineKeyValue, value: string) =
+        comb &>> ("transform-style", value)
 
     /// No capitalization. The text renders as it is. This is default.
     []
     member inline _.textTransformNone([] comb: CombineKeyValue) = comb &>> ("text-transform", "none")
+
     /// Transforms the first character of each word to uppercase.
     []
-    member inline _.textTransformCapitalize([] comb: CombineKeyValue) = comb &>> ("text-transform", "capitalize")
+    member inline _.textTransformCapitalize([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "capitalize")
+
     /// Transforms all characters to uppercase.
     []
-    member inline _.textTransformUppercase([] comb: CombineKeyValue) = comb &>> ("text-transform", "uppercase")
+    member inline _.textTransformUppercase([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "uppercase")
+
     /// Transforms all characters to lowercase.
     []
-    member inline _.textTransformLowercase([] comb: CombineKeyValue) = comb &>> ("text-transform", "lowercase")
+    member inline _.textTransformLowercase([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "lowercase")
+
     /// Sets this property to its default value.
     []
-    member inline _.textTransformInitial([] comb: CombineKeyValue) = comb &>> ("text-transform", "initial")
+    member inline _.textTransformInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.textTransformInheritFromParent([] comb: CombineKeyValue) = comb &>> ("text-transform", "inherit")
+    member inline _.textTransformInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "inherit")
+
+    /// Sets the text transformation using a CSS string value (e.g. "uppercase", "var(--text-transform)").
+    []
+    member inline _.textTransform([] comb: CombineKeyValue, value: string) =
+        comb &>> ("text-transform", value)
 
     /// Default value. The text is clipped and not accessible.
     []
     member inline _.textOverflowClip([] comb: CombineKeyValue) = comb &>> ("text-overflow", "clip")
+
     /// Render an ellipsis ("...") to represent the clipped text.
     []
-    member inline _.textOverflowEllipsis([] comb: CombineKeyValue) = comb &>> ("text-overflow", "ellipsis")
+    member inline _.textOverflowEllipsis([] comb: CombineKeyValue) =
+        comb &>> ("text-overflow", "ellipsis")
+
     /// Render the given string to represent the clipped text.
     []
-    member inline _.textOverflowInitial([] comb: CombineKeyValue) = comb &>> ("text-overflow", "initial")
+    member inline _.textOverflowInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-overflow", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.textOverflowInheritFromParent([] comb: CombineKeyValue) = comb &>> ("text-overflow", "inherit")
+    member inline _.textOverflowInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-overflow", "inherit")
+
+    /// Sets how overflowed text is signaled using a CSS string value (e.g. "ellipsis", "var(--text-overflow)").
+    []
+    member inline _.textOverflow([] comb: CombineKeyValue, value: string) =
+        comb &>> ("text-overflow", value)
 
     /// Default value. Specifies no effects.
     []
     member inline _.filterNone([] comb: CombineKeyValue) = comb &>> ("filter", "none")
+
     /// Applies a blur effect to the elemeen. A larger value will create more blur.
     ///
     /// This overload takes an integer that represents a percentage from 0 to 100.
     []
     member inline _.filterBlur([] comb: CombineKeyValue, value: int) =
-        comb &&& CombineKeyValue(fun sb -> sb.Append("filter: blur(").Append(value).Append("%); "))
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: blur(").Append(value).Append("%); "))
+
     /// Applies a blur effect to the elemeen. A larger value will create more blur.
     ///
     /// This overload takes a floating number that goes from 0 to 1,
     []
     member inline _.filterBlur([] comb: CombineKeyValue, value: double) =
-        comb &&& CombineKeyValue(fun sb -> sb.Append("filter: blur(").Append(value * 100.).Append("%); "))
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: blur(").Append(value * 100.).Append("%); "))
+
     /// Adjusts the brightness of the elemeen
     ///
     /// This overload takes an integer that represents a percentage from 0 to 100.
@@ -991,25 +1506,33 @@ type CssBuilder() =
     /// Values over 100% will provide brighter results.
     []
     member inline _.filterBrightness([] comb: CombineKeyValue, value: int) =
-        comb &&& CombineKeyValue(fun sb -> sb.Append("filter: brightness(").Append(value).Append("%); "))
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: brightness(").Append(value).Append("%); "))
+
     /// Adjusts the brightness of the elemeen. A larger value will create more blur.
     ///
     /// This overload takes a floating number that goes from 0 to 1,
     []
     member inline _.filterBrightness([] comb: CombineKeyValue, value: double) =
-        comb &&& CombineKeyValue(fun sb -> sb.Append("filter: brightness(").Append(value * 100.).Append("%); "))
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: brightness(").Append(value * 100.).Append("%); "))
+
     /// Adjusts the contrast of the element.
     ///
     /// This overload takes an integer that represents a percentage from 0 to 100.
     []
     member inline _.filterContrast([] comb: CombineKeyValue, value: int) =
-        comb &&& CombineKeyValue(fun sb -> sb.Append("filter: contrast(").Append(value).Append("%); "))
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: contrast(").Append(value).Append("%); "))
+
     /// Adjusts the contrast of the element. A larger value will create more contrast.
     ///
     /// This overload takes a floating number that goes from 0 to 1
     []
     member inline _.filterContrast([] comb: CombineKeyValue, value: double) =
-        comb &&& CombineKeyValue(fun sb -> sb.Append("filter: contrast(").Append(value * 100.).Append("%); "))
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: contrast(").Append(value * 100.).Append("%); "))
+
     /// Applies a drop shadow effect.
     []
     member inline _.filterDropShadow
@@ -1020,8 +1543,7 @@ type CssBuilder() =
             blur: int,
             spread: int,
             color: string
-        )
-        =
+        ) =
         comb
         &&& CombineKeyValue(fun sb ->
             sb
@@ -1035,11 +1557,13 @@ type CssBuilder() =
                 .Append(spread)
                 .Append("px ")
                 .Append(color)
-                .Append("); ")
-        )
+                .Append("); "))
+
     /// Applies a drop shadow effect.
     []
-    member inline _.filterDropShadow([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, blur: int, color: string) =
+    member inline _.filterDropShadow
+        ([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, blur: int, color: string)
+        =
         comb
         &&& CombineKeyValue(fun sb ->
             sb
@@ -1051,11 +1575,13 @@ type CssBuilder() =
                 .Append(blur)
                 .Append("px ")
                 .Append(color)
-                .Append("); ")
-        )
+                .Append("); "))
+
     /// Applies a drop shadow effect.
     []
-    member inline _.filterDropShadow([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, color: string) =
+    member inline _.filterDropShadow
+        ([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, color: string)
+        =
         comb
         &&& CombineKeyValue(fun sb ->
             sb
@@ -1065,101 +1591,133 @@ type CssBuilder() =
                 .Append(verticalOffset)
                 .Append("px ")
                 .Append(color)
-                .Append("); ")
-        )
+                .Append("); "))
+
     /// Converts the image to grayscale
     ///
     /// This overload takes an integer that represents a percentage from 0 to 100.
     []
     member inline _.filterGrayscale([] comb: CombineKeyValue, value: int) =
-        comb &&& CombineKeyValue(fun sb -> sb.Append("filter: grayscale(").Append(value).Append("%); "))
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: grayscale(").Append(value).Append("%); "))
+
     /// Converts the image to grayscale
     ///
     /// This overload takes a floating number that goes from 0 to 1
     []
     member inline _.filterGrayscale([] comb: CombineKeyValue, value: double) =
-        comb &&& CombineKeyValue(fun sb -> sb.Append("filter: grayscale(").Append(value).Append("%); "))
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: grayscale(").Append(value).Append("%); "))
+
     /// Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image
     /// samples will be adjusted. 0deg is default, and represents the original image.
     ///
     /// **Note**: Maximum value is 360
     []
     member inline _.filterHueRotate([] comb: CombineKeyValue, degrees: int) =
-        comb &&& CombineKeyValue(fun sb -> sb.Append("filter: hue-rotate(").Append(degrees).Append("deg); "))
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: hue-rotate(").Append(degrees).Append("deg); "))
+
     /// Inverts the element.
     ///
     /// This overload takes an integer that represents a percentage from 0 to 100.
     []
     member inline _.filterInvert([] comb: CombineKeyValue, value: int) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("invert(").Append(value).Append("%); "))
+
     /// Inverts the element.
     ///
     /// This overload takes a floating number that goes from 0 to 1
     []
     member inline _.filterInvert([] comb: CombineKeyValue, value: double) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("invert(").Append(value).Append("%); "))
+
     /// Sets the opacity of the element.
     ///
     /// This overload takes an integer that represents a percentage from 0 to 100.
     []
     member inline _.filterOpacity([] comb: CombineKeyValue, value: int) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("opacity(").Append(value).Append("%); "))
+
     /// Sets the opacity of the element.
     ///
     /// This overload takes a floating number that goes from 0 to 1
     []
     member inline _.filterOpacity([] comb: CombineKeyValue, value: double) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("opacity(").Append(value).Append("%); "))
+
     /// Sets the saturation of the element.
     ///
     /// This overload takes an integer that represents a percentage from 0 to 100.
     []
     member inline _.filterSaturate([] comb: CombineKeyValue, value: int) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("saturate(").Append(value).Append("%); "))
+
     /// Sets the saturation of the element.
     ///
     /// This overload takes a floating number that goes from 0 to 1
     []
     member inline _.filterSaturate([] comb: CombineKeyValue, value: double) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("saturate(").Append(value).Append("%); "))
+
     /// Applies Sepia filter to the element.
     ///
     /// This overload takes an integer that represents a percentage from 0 to 100.
     []
     member inline _.filterSepia([] comb: CombineKeyValue, value: int) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("sepia(").Append(value).Append("); "))
+
     /// Applies Sepia filter to the element.
     ///
     /// This overload takes a floating number that goes from 0 to 1
     []
     member inline _.filterSepia([] comb: CombineKeyValue, value: double) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("sepia(").Append(value).Append("); "))
+
     /// The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.
     ///
     /// Example: `filter: url(svg-url#element-id)`
     []
     member inline _.filterUrl([] comb: CombineKeyValue, value: string) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("url(").Append(value).Append("); "))
+
     /// Sets this property to its default value.
     []
     member inline _.filterInitial([] comb: CombineKeyValue) = comb &>> ("filter", "initial")
+
     /// Inherits this property from its parent element.
     []
     member inline _.filterInheritFromParent([] comb: CombineKeyValue) = comb &>> ("filter", "inherit")
 
+    /// Sets the filter effects using a CSS string value (e.g. "blur(4px) grayscale(50%)", "var(--filter)").
+    []
+    member inline _.filter([] comb: CombineKeyValue, value: string) = comb &>> ("filter", value)
+
     /// Sets whether table borders should collapse into a single border or be separated as in standard HTML.
     /// Borders are separated; each cell will display its own borders. This is default.
     []
-    member inline _.borderCollapseSeparate([] comb: CombineKeyValue) = comb &>> ("border-collapse", "separate")
+    member inline _.borderCollapseSeparate([] comb: CombineKeyValue) =
+        comb &>> ("border-collapse", "separate")
+
     /// Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect))
     []
-    member inline _.borderCollapseCollapse([] comb: CombineKeyValue) = comb &>> ("border-collapse", "collapse")
+    member inline _.borderCollapseCollapse([] comb: CombineKeyValue) =
+        comb &>> ("border-collapse", "collapse")
+
     /// Sets this property to its default value)
     []
-    member inline _.borderCollapseInitial([] comb: CombineKeyValue) = comb &>> ("border-collapse", "initial")
+    member inline _.borderCollapseInitial([] comb: CombineKeyValue) =
+        comb &>> ("border-collapse", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.borderCollapseInheritFromParent([] comb: CombineKeyValue) = comb &>> ("border-collapse", "inherit")
+    member inline _.borderCollapseInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("border-collapse", "inherit")
+
+    /// Sets whether table borders collapse using a CSS string value (e.g. "collapse", "var(--border-collapse)").
+    []
+    member inline _.borderCollapse([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-collapse", value)
 
     /// Sets the distance between the borders of adjacent  cells. Applies only when border-collapse is separate.
     []
@@ -1168,174 +1726,275 @@ type CssBuilder() =
 
     /// Sets this property to its default value)
     []
-    member inline _.borderSpacingInitial([] comb: CombineKeyValue) = comb &>> ("border-spacing", "initial")
+    member inline _.borderSpacingInitial([] comb: CombineKeyValue) =
+        comb &>> ("border-spacing", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.borderSpacingInheritFromParent([] comb: CombineKeyValue) = comb &>> ("border-spacing", "inherit")
+    member inline _.borderSpacingInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("border-spacing", "inherit")
 
     /// Sets the size of the element's background image.
     ///
     /// The image can be left to its natural size, stretched, or constrained to fit the available space.
     []
-    member inline _.backgroundSize([] comb: CombineKeyValue, value: string) = comb &>> ("background-size", value)
+    member inline _.backgroundSize([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-size", value)
+
     /// Sets the size of the element's background image.
     ///
     /// The image can be left to its natural size, stretched, or constrained to fit the available space.
     []
     member inline _.backgroundSize([] comb: CombineKeyValue, width: string, height: string) =
-        comb &>> ("background-size", width + ", " + string height)
+        comb
+        &&& CombineKeyValue(fun sb ->
+            sb.Append("background-size: ").Append(width).Append(" ").Append(height).Append("; "))
+
     /// Default value. The background image is displayed in its original size
     ///
     /// See [example here](https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=auto))
     []
     member inline _.backgroundSizeAuto([] comb: CombineKeyValue) = comb &>> ("background-size", "auto")
+
     /// Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
     ///
     /// See [example here](https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover))
     []
-    member inline _.backgroundSizeCover([] comb: CombineKeyValue) = comb &>> ("background-size", "cover")
+    member inline _.backgroundSizeCover([] comb: CombineKeyValue) =
+        comb &>> ("background-size", "cover")
+
     /// Resize the background image to make sure the image is fully visible
     ///
     /// See [example here](https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain))
     []
-    member inline _.backgroundSizeContain([] comb: CombineKeyValue) = comb &>> ("background-size", "contain")
+    member inline _.backgroundSizeContain([] comb: CombineKeyValue) =
+        comb &>> ("background-size", "contain")
+
     /// Sets this property to its default value.
     []
-    member inline _.backgroundSizeInitial([] comb: CombineKeyValue) = comb &>> ("background-size", "initial")
+    member inline _.backgroundSizeInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-size", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.backgroundSizeInheritFromParent([] comb: CombineKeyValue) = comb &>> ("background-size", "inherit")
+    member inline _.backgroundSizeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("background-size", "inherit")
 
     /// Default value. The line will display as a single line.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=solid
     []
-    member inline _.textDecorationStyleSolid([] comb: CombineKeyValue) = comb &>> ("text-decoration-style", "solid")
+    member inline _.textDecorationStyleSolid([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "solid")
+
     /// The line will display as a double line.
     ///
     /// https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=double
     []
-    member inline _.textDecorationStyleDouble([] comb: CombineKeyValue) = comb &>> ("text-decoration-style", "double")
+    member inline _.textDecorationStyleDouble([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "double")
+
     /// The line will display as a dotted line.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=dotted
     []
-    member inline _.textDecorationStyleDotted([] comb: CombineKeyValue) = comb &>> ("text-decoration-style", "dotted")
+    member inline _.textDecorationStyleDotted([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "dotted")
+
     /// The line will display as a dashed line.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=dashed
     []
-    member inline _.textDecorationStyleDashed([] comb: CombineKeyValue) = comb &>> ("text-decoration-style", "dashed")
+    member inline _.textDecorationStyleDashed([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "dashed")
+
     /// The line will display as a wavy line.
     ///
     /// https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=wavy
     []
-    member inline _.textDecorationStyleWavy([] comb: CombineKeyValue) = comb &>> ("text-decoration-style", "wavy")
+    member inline _.textDecorationStyleWavy([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "wavy")
+
     /// Sets this property to its default value.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=initial
     []
-    member inline _.textDecorationStyleInitial([] comb: CombineKeyValue) = comb &>> ("text-decoration-style", "initial")
+    member inline _.textDecorationStyleInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.textDecorationStyleInheritFromParent([] comb: CombineKeyValue) = comb &>> ("text-decoration-style", "inherit")
+    member inline _.textDecorationStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "inherit")
+
+    /// Sets the style of text decorations using a CSS string value (e.g. "wavy", "var(--text-decoration-style)").
+    []
+    member inline _.textDecorationStyle([] comb: CombineKeyValue, value: string) =
+        comb &>> ("text-decoration-style", value)
 
     /// Makes the text as narrow as it gets.
     []
-    member inline _.fontStretchUltraCondensed([] comb: CombineKeyValue) = comb &>> ("font-stretch", "ultra-condensed")
+    member inline _.fontStretchUltraCondensed([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "ultra-condensed")
+
     /// Makes the text narrower than condensed, but not as narrow as ultra-condensed
     []
-    member inline _.fontStretchExtraCondensed([] comb: CombineKeyValue) = comb &>> ("font-stretch", "extra-condensed")
+    member inline _.fontStretchExtraCondensed([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "extra-condensed")
+
     /// Makes the text narrower than semi-condensed, but not as narrow as extra-condensed.
     []
-    member inline _.fontStretchCondensed([] comb: CombineKeyValue) = comb &>> ("font-stretch", "condensed")
+    member inline _.fontStretchCondensed([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "condensed")
+
     /// Makes the text narrower than normal, but not as narrow as condensed.
     []
-    member inline _.fontStretchSemiCondensed([] comb: CombineKeyValue) = comb &>> ("font-stretch", "semi-condensed")
+    member inline _.fontStretchSemiCondensed([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "semi-condensed")
+
     /// Default value. No font stretching
     []
     member inline _.fontStretchNormal([] comb: CombineKeyValue) = comb &>> ("font-stretch", "normal")
+
     /// Makes the text wider than normal, but not as wide as expanded
     []
-    member inline _.fontStretchSemiExpanded([] comb: CombineKeyValue) = comb &>> ("font-stretch", "semi-expanded")
+    member inline _.fontStretchSemiExpanded([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "semi-expanded")
+
     /// Makes the text wider than semi-expanded, but not as wide as extra-expanded
     []
-    member inline _.fontStretchExpanded([] comb: CombineKeyValue) = comb &>> ("font-stretch", "expanded")
+    member inline _.fontStretchExpanded([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "expanded")
+
     /// Makes the text wider than expanded, but not as wide as ultra-expanded
     []
-    member inline _.fontStretchExtraExpanded([] comb: CombineKeyValue) = comb &>> ("font-stretch", "extra-expanded")
+    member inline _.fontStretchExtraExpanded([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "extra-expanded")
+
     /// Makes the text as wide as it gets.
     []
-    member inline _.fontStretchUltraExpanded([] comb: CombineKeyValue) = comb &>> ("font-stretch", "ultra-expanded")
+    member inline _.fontStretchUltraExpanded([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "ultra-expanded")
+
     /// Sets this property to its default value.
     []
     member inline _.fontStretchInitial([] comb: CombineKeyValue) = comb &>> ("font-stretch", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.fontStretchInheritFromParent([] comb: CombineKeyValue) = comb &>> ("font-stretch", "inherit")
+    member inline _.fontStretchInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "inherit")
+
+    /// Sets the font stretch using a CSS string value (e.g. "condensed", "var(--font-stretch)").
+    []
+    member inline _.fontStretch([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-stretch", value)
 
     /// The element does not float, (will be displayed just where it occurs in the text). This is default
     []
     member inline _.floatStyleNone([] comb: CombineKeyValue) = comb &>> ("float", "none")
+
     /// The element floats to the left of its container.
     []
     member inline _.floatStyleLeft([] comb: CombineKeyValue) = comb &>> ("float", "left")
+
     /// The element floats to the right of its container.
     []
     member inline _.floatStyleRight([] comb: CombineKeyValue) = comb &>> ("float", "right")
+
     /// Sets this property to its default value.
     []
     member inline _.floatStyleInitial([] comb: CombineKeyValue) = comb &>> ("float", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.floatStyleInheritFromParent([] comb: CombineKeyValue) = comb &>> ("float", "inherit")
+    member inline _.floatStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("float", "inherit")
+
+    /// Sets the float behavior using a CSS string value (e.g. "left", "var(--float)").
+    []
+    member inline _.floatStyle([] comb: CombineKeyValue, value: string) = comb &>> ("float", value)
 
     /// The element is aligned with the baseline of the parent. This is default.
     []
-    member inline _.verticalAlignBaseline([] comb: CombineKeyValue) = comb &>> ("vertical-align", "baseline")
+    member inline _.verticalAlignBaseline([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "baseline")
+
     /// The element is aligned with the subscript baseline of the parent
     []
-    member inline _.verticalAlignSub([] comb: CombineKeyValue) = comb &>> ("vertical-align", "sup")
+    member inline _.verticalAlignSub([] comb: CombineKeyValue) = comb &>> ("vertical-align", "sub")
+
     /// The element is aligned with the superscript baseline of the parent.
     []
     member inline _.verticalAlignSuper([] comb: CombineKeyValue) = comb &>> ("vertical-align", "super")
+
     /// The element is aligned with the top of the tallest element on the line.
     []
     member inline _.verticalAlignTop([] comb: CombineKeyValue) = comb &>> ("vertical-align", "top")
+
     /// The element is aligned with the top of the parent element's font.
     []
-    member inline _.verticalAlignTextTop([] comb: CombineKeyValue) = comb &>> ("vertical-align", "text-top")
+    member inline _.verticalAlignTextTop([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "text-top")
+
     /// The element is placed in the middle of the parent element.
     []
-    member inline _.verticalAlignMiddle([] comb: CombineKeyValue) = comb &>> ("vertical-align", "middle")
+    member inline _.verticalAlignMiddle([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "middle")
+
     /// The element is aligned with the lowest element on the line.
     []
-    member inline _.verticalAlignBottom([] comb: CombineKeyValue) = comb &>> ("vertical-align", "bottom")
+    member inline _.verticalAlignBottom([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "bottom")
+
     /// The element is aligned with the bottom of the parent element's font
     []
-    member inline _.verticalAlignTextBottom([] comb: CombineKeyValue) = comb &>> ("vertical-align", "text-bottom")
+    member inline _.verticalAlignTextBottom([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "text-bottom")
+
     /// Sets this property to its default value.
     []
-    member inline _.verticalAlignInitial([] comb: CombineKeyValue) = comb &>> ("vertical-align", "initial")
+    member inline _.verticalAlignInitial([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.verticalAlignInheritFromParent([] comb: CombineKeyValue) = comb &>> ("vertical-align", "inherit")
+    member inline _.verticalAlignInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "inherit")
+
+    /// Sets the vertical alignment using a CSS string value (e.g. "middle", "0.5em", "var(--vertical-align)").
+    []
+    member inline _.verticalAlign([] comb: CombineKeyValue, value: string) =
+        comb &>> ("vertical-align", value)
 
     /// Let the content flow horizontally from left to right, vertically from top to bottom
     []
-    member inline _.writingModeHorizontalTopBottom([] comb: CombineKeyValue) = comb &>> ("writing-mode", "horizontal-tb")
+    member inline _.writingModeHorizontalTopBottom([] comb: CombineKeyValue) =
+        comb &>> ("writing-mode", "horizontal-tb")
+
     /// Let the content flow vertically from top to bottom, horizontally from right to left
     []
-    member inline _.writingModeVerticalRightLeft([] comb: CombineKeyValue) = comb &>> ("writing-mode", "vertical-rl")
+    member inline _.writingModeVerticalRightLeft([] comb: CombineKeyValue) =
+        comb &>> ("writing-mode", "vertical-rl")
+
     /// Let the content flow vertically from top to bottom, horizontally from left to right
     []
-    member inline _.writingModeVerticalLeftRight([] comb: CombineKeyValue) = comb &>> ("writing-mode", "vertical-lr")
+    member inline _.writingModeVerticalLeftRight([] comb: CombineKeyValue) =
+        comb &>> ("writing-mode", "vertical-lr")
+
     /// Sets this property to its default value.
     []
     member inline _.writingModeInitial([] comb: CombineKeyValue) = comb &>> ("writing-mode", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.writingModeInheritFromParent([] comb: CombineKeyValue) = comb &>> ("writing-mode", "inherit")
+    member inline _.writingModeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("writing-mode", "inherit")
+
+    /// Sets the writing mode using a CSS string value (e.g. "vertical-rl", "var(--writing-mode)").
+    []
+    member inline _.writingMode([] comb: CombineKeyValue, value: string) =
+        comb &>> ("writing-mode", value)
 
     /// Specifies a shorthand for all the animation properties. Accepts a CSS animation string (e.g. "slidein 3s ease-in 1s infinite reverse both paused").
     []
@@ -1343,22 +2002,34 @@ type CssBuilder() =
 
     /// Default value. Specifies a animation effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)).
     []
-    member inline _.animationTimingFunctionEase([] comb: CombineKeyValue) = comb &>> ("animation-timing-function", "ease")
+    member inline _.animationTimingFunctionEase([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "ease")
+
     /// Specifies a animation effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)))
     []
-    member inline _.animationTimingFunctionLinear([] comb: CombineKeyValue) = comb &>> ("animation-timing-function", "linear")
+    member inline _.animationTimingFunctionLinear([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "linear")
+
     /// Specifies a animation effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)).
     []
-    member inline _.animationTimingFunctionEaseIn([] comb: CombineKeyValue) = comb &>> ("animation-timing-function", "ease-in")
+    member inline _.animationTimingFunctionEaseIn([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "ease-in")
+
     /// Specifies a animation effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)).
     []
-    member inline _.animationTimingFunctionEaseOut([] comb: CombineKeyValue) = comb &>> ("animation-timing-function", "ease-out")
+    member inline _.animationTimingFunctionEaseOut([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "ease-out")
+
     /// Specifies a animation effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)))
     []
-    member inline _.animationTimingFunctionEaseInOut([] comb: CombineKeyValue) = comb &>> ("animation-timing-function", "ease-in-out")
+    member inline _.animationTimingFunctionEaseInOut([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "ease-in-out")
+
     /// Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
     []
-    member inline _.animationTimingFunctionCubicBezier([] comb: CombineKeyValue, n1: float, n2: float, n3: float, n4: float) =
+    member inline _.animationTimingFunctionCubicBezier
+        ([] comb: CombineKeyValue, n1: float, n2: float, n3: float, n4: float)
+        =
         CombineKeyValue(fun sb ->
             comb
                 .Invoke(sb)
@@ -1371,42 +2042,63 @@ type CssBuilder() =
                 .Append(n3)
                 .Append(",")
                 .Append(n4)
-                .Append("); ")
-        )
+                .Append("); "))
+
     /// Sets this property to its default value)
     []
-    member inline _.animationTimingFunctionInitial([] comb: CombineKeyValue) = comb &>> ("animation-timing-function", "initial")
+    member inline _.animationTimingFunctionInitial([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "initial")
+
     /// Inherits this property from its parent element.
     []
     member inline _.animationTimingFunctionInheritFromParent([] comb: CombineKeyValue) =
         comb &>> ("animation-timing-function", "inherit")
 
+    /// Sets the animation timing function using a CSS string value (e.g. "ease-in", "cubic-bezier(0.1,0.7,1,0.1)", "var(--animation-timing)").
+    []
+    member inline _.animationTimingFunction([] comb: CombineKeyValue, value: string) =
+        comb &>> ("animation-timing-function", value)
+
     /// Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)).
     []
-    member inline _.transitionTimingFunctionEase([] comb: CombineKeyValue) = comb &>> ("transition-timing-function", "ease")
+    member inline _.transitionTimingFunctionEase([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "ease")
+
     /// Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)))
     []
-    member inline _.transitionTimingFunctionLinear([] comb: CombineKeyValue) = comb &>> ("transition-timing-function", "linear")
+    member inline _.transitionTimingFunctionLinear([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "linear")
+
     /// Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)).
     []
-    member inline _.transitionTimingFunctionEaseIn([] comb: CombineKeyValue) = comb &>> ("transition-timing-function", "ease-in")
+    member inline _.transitionTimingFunctionEaseIn([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "ease-in")
+
     /// Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)).
     []
-    member inline _.transitionTimingFunctionEaseOut([] comb: CombineKeyValue) = comb &>> ("transition-timing-function", "ease-out")
+    member inline _.transitionTimingFunctionEaseOut([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "ease-out")
+
     /// Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)))
     []
     member inline _.transitionTimingFunctionEaseInOut([] comb: CombineKeyValue) =
         comb &>> ("transition-timing-function", "ease-in-out")
+
     /// Equivalent to steps(1, start))
     []
     member inline _.transitionTimingFunctionStepStart([] comb: CombineKeyValue) =
         comb &>> ("transition-timing-function", "step-start")
+
     /// Equivalent to steps(1, end))
     []
-    member inline _.transitionTimingFunctionStepEnd([] comb: CombineKeyValue) = comb &>> ("transition-timing-function", "step-end")
+    member inline _.transitionTimingFunctionStepEnd([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "step-end")
+
     /// Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
     []
-    member inline _.transitionTimingFunctionCubicBezier([] comb: CombineKeyValue, n1: float, n2: float, n3: float, n4: float) =
+    member inline _.transitionTimingFunctionCubicBezier
+        ([] comb: CombineKeyValue, n1: float, n2: float, n3: float, n4: float)
+        =
         CombineKeyValue(fun sb ->
             comb
                 .Invoke(sb)
@@ -1419,89 +2111,118 @@ type CssBuilder() =
                 .Append(n3)
                 .Append(",")
                 .Append(n4)
-                .Append("); ")
-        )
+                .Append("); "))
+
     /// Sets this property to its default value)
     []
-    member inline _.transitionTimingFunctionInitial([] comb: CombineKeyValue) = comb &>> ("transition-timing-function", "initial")
+    member inline _.transitionTimingFunctionInitial([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "initial")
+
     /// Inherits this property from its parent element.
     []
     member inline _.transitionTimingFunctionInheritFromParent([] comb: CombineKeyValue) =
         comb &>> ("transition-timing-function", "inherit")
 
+    /// Sets the transition timing function using a CSS string value (e.g. "ease-in", "steps(4, end)", "var(--transition-timing)").
+    []
+    member inline _.transitionTimingFunction([] comb: CombineKeyValue, value: string) =
+        comb &>> ("transition-timing-function", value)
+
     /// Default. Text can be selected if the browser allows it.
     []
     member inline _.userSelectAuto([] comb: CombineKeyValue) = comb &>> ("user-select", "auto")
+
     /// Prevents text selection.
     []
     member inline _.userSelectNone([] comb: CombineKeyValue) = comb &>> ("user-select", "none")
+
     /// The text can be selected by the user.
     []
     member inline _.userSelectText([] comb: CombineKeyValue) = comb &>> ("user-select", "text")
+
     /// Text selection is made with one click instead of a double-click.
     []
     member inline _.userSelectAll([] comb: CombineKeyValue) = comb &>> ("user-select", "all")
+
     /// Sets this property to its default value.
     []
     member inline _.userSelectInitial([] comb: CombineKeyValue) = comb &>> ("user-select", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.userSelectInheritFromParent([] comb: CombineKeyValue) = comb &>> ("user-select", "inherit")
+    member inline _.userSelectInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("user-select", "inherit")
+
+    /// Sets whether the user can select text using a CSS string value (e.g. "none", "var(--user-select)").
+    []
+    member inline _.userSelect([] comb: CombineKeyValue, value: string) =
+        comb &>> ("user-select", value)
 
     /// Sets the line style for all four sides of an element's border.
     []
-    member inline _.borderStyle([] comb: CombineKeyValue, style: string) = comb &>> ("border-style", style)
+    member inline _.borderStyle([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-style", style)
 
     /// Specifies a dotted border.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
     []
     member inline _.borderStyleDotted([] comb: CombineKeyValue) = comb &>> ("border-style", "dotted")
+
     /// Specifies a dashed border.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
     []
     member inline _.borderStyleDashed([] comb: CombineKeyValue) = comb &>> ("border-style", "dashed")
+
     /// Specifies a solid border.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
     []
     member inline _.borderStyleSolid([] comb: CombineKeyValue) = comb &>> ("border-style", "solid")
+
     /// Specifies a double border.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
     []
     member inline _.borderStyleDouble([] comb: CombineKeyValue) = comb &>> ("border-style", "double")
+
     /// Specifies a 3D grooved border. The effect depends on the border-color value.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
     []
     member inline _.borderStyleGroove([] comb: CombineKeyValue) = comb &>> ("border-style", "groove")
+
     /// Specifies a 3D ridged border. The effect depends on the border-color value.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
     []
     member inline _.borderStyleRidge([] comb: CombineKeyValue) = comb &>> ("border-style", "ridge")
+
     /// Specifies a 3D inset border. The effect depends on the border-color value.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
     []
     member inline _.borderStyleInset([] comb: CombineKeyValue) = comb &>> ("border-style", "inset")
+
     /// Specifies a 3D outset border. The effect depends on the border-color value.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
     []
     member inline _.borderStyleOutset([] comb: CombineKeyValue) = comb &>> ("border-style", "outset")
+
     /// Default value. Specifies no border.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
     []
     member inline _.borderStyleNone([] comb: CombineKeyValue) = comb &>> ("border-style", "none")
+
     /// The same as "none", except in border conflict resolution for table elements.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=hidden
     []
     member inline _.borderStyleHidden([] comb: CombineKeyValue) = comb &>> ("border-style", "hidden")
+
     /// Sets this property to its default value.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=hidden
@@ -1509,139 +2230,193 @@ type CssBuilder() =
     /// Read about initial value https://www.w3schools.com/cssref/css_initial.asp
     []
     member inline _.borderStyleInitial([] comb: CombineKeyValue) = comb &>> ("border-style", "initial")
+
     /// Inherits this property from its parent element.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=hidden
     ///
     /// Read about inherit https://www.w3schools.com/cssref/css_inherit.asp
     []
-    member inline _.borderStyleInheritFromParent([] comb: CombineKeyValue) = comb &>> ("border-style", "inherit")
+    member inline _.borderStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("border-style", "inherit")
 
     /// Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable
     /// content in the cells. The content will dictate the layout
     []
     member inline _.tableLayoutAuto([] comb: CombineKeyValue) = comb &>> ("table-layout", "auto")
+
     /// Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col
     /// or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths
     /// are present on the first row, the column widths are divided equally across the table, regardless of content
     /// inside the cells
+    []
     []
     member inline _.tableLayoutFixed'([] comb: CombineKeyValue) = comb &>> ("table-layout", "fixed")
+
+    /// Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col elements or by the width of the first row of cells.
+    []
+    member inline _.tableLayoutFixed([] comb: CombineKeyValue) = comb &>> ("table-layout", "fixed")
+
     /// Sets this property to its default value.
     []
     member inline _.tableLayoutInitial([] comb: CombineKeyValue) = comb &>> ("table-layout", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.tableLayoutInheritFromParent([] comb: CombineKeyValue) = comb &>> ("table-layout", "inherit")
+    member inline _.tableLayoutInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("table-layout", "inherit")
+
+    /// Sets the table layout algorithm using a CSS string value (e.g. "fixed", "var(--table-layout)").
+    []
+    member inline _.tableLayout([] comb: CombineKeyValue, value: string) =
+        comb &>> ("table-layout", value)
 
     /// Specifies the mouse cursor to display when pointing over an element. Accepts a CSS cursor value (a keyword or a url()).
     []
     member inline _.cursor([] comb: CombineKeyValue, value: string) = comb &>> ("cursor", value)
+
     /// The User Agent will determine the cursor to display based on the current context. E.g., equivalent to text when hovering text.
     []
     member inline _.cursorAuto([] comb: CombineKeyValue) = comb &>> ("cursor", "auto")
+
     /// The cursor indicates an alias of something is to be created
     []
     member inline _.cursorAlias([] comb: CombineKeyValue) = comb &>> ("cursor", "alias")
+
     /// The platform-dependent default cursor. Typically an arrow.
     []
     member inline _.cursorDefaultCursor([] comb: CombineKeyValue) = comb &>> ("cursor", "default")
+
     /// No cursor is rendered.
     []
     member inline _.cursorNone([] comb: CombineKeyValue) = comb &>> ("cursor", "none")
+
     /// A context menu is available.
     []
     member inline _.cursorContextMenu([] comb: CombineKeyValue) = comb &>> ("cursor", "context-menu")
+
     /// Help information is available.
     []
     member inline _.cursorHelp([] comb: CombineKeyValue) = comb &>> ("cursor", "help")
+
     /// The cursor is a pointer that indicates a link. Typically an image of a pointing hand.
     []
     member inline _.cursorPointer([] comb: CombineKeyValue) = comb &>> ("cursor", "pointer")
+
     /// The program is busy in the background, but the user can still interact with the interface (in contrast to `wait`).
     []
     member inline _.cursorProgress([] comb: CombineKeyValue) = comb &>> ("cursor", "progress")
+
     /// The program is busy, and the user can't interact with the interface (in contrast to progress). Sometimes an image of an hourglass or a watch.
     []
     member inline _.cursorWait([] comb: CombineKeyValue) = comb &>> ("cursor", "wait")
+
     /// The table cell or set of cells can be selected.
     []
     member inline _.cursorCell([] comb: CombineKeyValue) = comb &>> ("cursor", "cell")
+
     /// Cross cursor, often used to indicate selection in a bitmap.
     []
     member inline _.cursorCrosshair([] comb: CombineKeyValue) = comb &>> ("cursor", "crosshair")
+
     /// The text can be selected. Typically the shape of an I-beam.
     []
     member inline _.cursorText([] comb: CombineKeyValue) = comb &>> ("cursor", "text")
+
     /// The vertical text can be selected. Typically the shape of a sideways I-beam.
     []
     member inline _.cursorVerticalText([] comb: CombineKeyValue) = comb &>> ("cursor", "vertical-text")
+
     /// Something is to be copied.
     []
     member inline _.cursorCopy([] comb: CombineKeyValue) = comb &>> ("cursor", "copy")
+
     /// Something is to be moved.
     []
     member inline _.cursorMove([] comb: CombineKeyValue) = comb &>> ("cursor", "move")
+
     /// An item may not be dropped at the current location. On Windows and Mac OS X, `no-drop` is the same as `not-allowed`.
     []
     member inline _.cursorNoDrop([] comb: CombineKeyValue) = comb &>> ("cursor", "no-drop")
+
     /// The requested action will not be carried out.
     []
     member inline _.cursorNotAllowed([] comb: CombineKeyValue) = comb &>> ("cursor", "not-allowed")
+
     /// Something can be grabbed (dragged to be moved).
     []
     member inline _.cursorGrab([] comb: CombineKeyValue) = comb &>> ("cursor", "grab")
+
     /// Something is being grabbed (dragged to be moved).
     []
     member inline _.cursorGrabbing([] comb: CombineKeyValue) = comb &>> ("cursor", "grabbing")
+
     /// Something can be scrolled in any direction (panned).
     []
     member inline _.cursorAllScroll([] comb: CombineKeyValue) = comb &>> ("cursor", "all-scroll")
+
     /// The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
     []
     member inline _.cursorColumnResize([] comb: CombineKeyValue) = comb &>> ("cursor", "col-resize")
+
     /// The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
     []
     member inline _.cursorRowResize([] comb: CombineKeyValue) = comb &>> ("cursor", "row-resize")
+
     /// Directional resize arrow
     []
     member inline _.cursorNorthResize([] comb: CombineKeyValue) = comb &>> ("cursor", "n-resize")
+
     /// Directional resize arrow
     []
     member inline _.cursorEastResize([] comb: CombineKeyValue) = comb &>> ("cursor", "e-resize")
+
     /// Directional resize arrow
     []
     member inline _.cursorSouthResize([] comb: CombineKeyValue) = comb &>> ("cursor", "s-resize")
+
     /// Directional resize arrow
     []
     member inline _.cursorWestResize([] comb: CombineKeyValue) = comb &>> ("cursor", "w-resize")
+
     /// Directional resize arrow
     []
     member inline _.cursorNorthEastResize([] comb: CombineKeyValue) = comb &>> ("cursor", "ne-resize")
+
     /// Directional resize arrow
     []
     member inline _.cursorNorthWestResize([] comb: CombineKeyValue) = comb &>> ("cursor", "nw-resize")
+
     /// Directional resize arrow
     []
     member inline _.cursorSouthEastResize([] comb: CombineKeyValue) = comb &>> ("cursor", "se-resize")
+
     /// Directional resize arrow
     []
     member inline _.cursorSouthWestResize([] comb: CombineKeyValue) = comb &>> ("cursor", "sw-resize")
+
     /// Directional resize arrow
     []
     member inline _.cursorEastWestResize([] comb: CombineKeyValue) = comb &>> ("cursor", "ew-resize")
+
     /// Directional resize arrow
     []
     member inline _.cursorNorthSouthResize([] comb: CombineKeyValue) = comb &>> ("cursor", "ns-resize")
+
     /// Directional resize arrow
     []
-    member inline _.cursorNorthEastSouthWestResize([] comb: CombineKeyValue) = comb &>> ("cursor", "nesw-resize")
+    member inline _.cursorNorthEastSouthWestResize([] comb: CombineKeyValue) =
+        comb &>> ("cursor", "nesw-resize")
+
     /// Directional resize arrow
     []
-    member inline _.cursorNorthWestSouthEastResize([] comb: CombineKeyValue) = comb &>> ("cursor", "nwse-resize")
+    member inline _.cursorNorthWestSouthEastResize([] comb: CombineKeyValue) =
+        comb &>> ("cursor", "nwse-resize")
+
     /// Something can be zoomed (magnified) in
     []
     member inline _.cursorZoomIn([] comb: CombineKeyValue) = comb &>> ("cursor", "zoom-in")
+
     /// Something can be zoomed out
     []
     member inline _.cursorZoomOut([] comb: CombineKeyValue) = comb &>> ("cursor", "zoom-out")
@@ -1649,111 +2424,184 @@ type CssBuilder() =
     /// Permits the user agent to render a custom outline style.
     []
     member inline _.outlineStyleAuto([] comb: CombineKeyValue) = comb &>> ("outline-style", "auto")
+
     /// Specifies no outline. This is default.
     []
     member inline _.outlineStyleNone([] comb: CombineKeyValue) = comb &>> ("outline-style", "none")
+
     /// Specifies a hidden outline
     []
     member inline _.outlineStyleHidden([] comb: CombineKeyValue) = comb &>> ("outline-style", "hidden")
+
     /// Specifies a dotted outline
     []
     member inline _.outlineStyleDotted([] comb: CombineKeyValue) = comb &>> ("outline-style", "dotted")
+
     /// Specifies a dashed outline
     []
     member inline _.outlineStyleDashed([] comb: CombineKeyValue) = comb &>> ("outline-style", "dashed")
+
     /// Specifies a solid outline
     []
     member inline _.outlineStyleSolid([] comb: CombineKeyValue) = comb &>> ("outline-style", "solid")
+
     /// Specifies a double outliner
     []
     member inline _.outlineStyleDouble([] comb: CombineKeyValue) = comb &>> ("outline-style", "double")
+
     /// Specifies a 3D grooved outline. The effect depends on the outline-color value)
     []
     member inline _.outlineStyleGroove([] comb: CombineKeyValue) = comb &>> ("outline-style", "groove")
+
     /// Specifies a 3D ridged outline. The effect depends on the outline-color value)
     []
     member inline _.outlineStyleRidge([] comb: CombineKeyValue) = comb &>> ("outline-style", "ridge")
+
     /// Specifies a 3D inset  outline. The effect depends on the outline-color value)
     []
     member inline _.outlineStyleInset([] comb: CombineKeyValue) = comb &>> ("outline-style", "inset")
+
     /// Specifies a 3D outset outline. The effect depends on the outline-color value)
     []
     member inline _.outlineStyleOutset([] comb: CombineKeyValue) = comb &>> ("outline-style", "outset")
+
     /// Sets this property to its default value)
     []
-    member inline _.outlineStyleInitial([] comb: CombineKeyValue) = comb &>> ("outline-style", "initial")
+    member inline _.outlineStyleInitial([] comb: CombineKeyValue) =
+        comb &>> ("outline-style", "initial")
+
     /// Inherits this property from its parent element
     []
-    member inline _.outlineStyleInheritFromParent([] comb: CombineKeyValue) = comb &>> ("outline-style", "inherit")
+    member inline _.outlineStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("outline-style", "inherit")
+
+    /// Sets the style of an outline using a CSS string value (e.g. "solid", "var(--outline-style)").
+    []
+    member inline _.outlineStyle([] comb: CombineKeyValue, value: string) =
+        comb &>> ("outline-style", value)
 
     /// Sets the initial position for each background image.
     ///
     /// The position is relative to the position layer set by background-origin.
     []
-    member inline _.backgroundPosition([] comb: CombineKeyValue, position: string) = comb &>> ("background-position", position)
+    member inline _.backgroundPosition([] comb: CombineKeyValue, position: string) =
+        comb &>> ("background-position", position)
+
     /// The background image will scroll with the page. This is default.
     []
-    member inline _.backgroundPositionScroll([] comb: CombineKeyValue) = comb &>> ("background-position", "scroll")
+    member inline _.backgroundPositionScroll([] comb: CombineKeyValue) =
+        comb &>> ("background-position", "scroll")
+
     /// The background image will not scroll with the page.
     []
-    member inline _.backgroundPositionFixedNoScroll([] comb: CombineKeyValue) = comb &>> ("background-position", "fixed")
+    member inline _.backgroundPositionFixedNoScroll([] comb: CombineKeyValue) =
+        comb &>> ("background-position", "fixed")
+
     /// The background image will scroll with the element's contents.
     []
-    member inline _.backgroundPositionLocal([] comb: CombineKeyValue) = comb &>> ("background-position", "local")
+    member inline _.backgroundPositionLocal([] comb: CombineKeyValue) =
+        comb &>> ("background-position", "local")
+
     /// Sets this property to its default value.
     []
-    member inline _.backgroundPositionInitial([] comb: CombineKeyValue) = comb &>> ("background-position", "initial")
+    member inline _.backgroundPositionInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-position", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.backgroundPositionInheritFromParent([] comb: CombineKeyValue) = comb &>> ("background-position", "inherit")
+    member inline _.backgroundPositionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("background-position", "inherit")
 
     /// This is default. Sets the blending mode to normal.
     []
-    member inline _.backgroundBlendModeNormal([] comb: CombineKeyValue) = comb &>> ("background-blend-mode", "normal")
+    member inline _.backgroundBlendModeNormal([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "normal")
+
     /// Sets the blending mode to screen
     []
-    member inline _.backgroundBlendModeScreen([] comb: CombineKeyValue) = comb &>> ("background-blend-mode", "screen")
+    member inline _.backgroundBlendModeScreen([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "screen")
+
     /// Sets the blending mode to overlay
     []
-    member inline _.backgroundBlendModeOverlay([] comb: CombineKeyValue) = comb &>> ("background-blend-mode", "overlay")
+    member inline _.backgroundBlendModeOverlay([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "overlay")
+
     /// Sets the blending mode to darken
     []
-    member inline _.backgroundBlendModeDarken([] comb: CombineKeyValue) = comb &>> ("background-blend-mode", "darken")
+    member inline _.backgroundBlendModeDarken([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "darken")
+
     /// Sets the blending mode to multiply
     []
-    member inline _.backgroundBlendModeLighten([] comb: CombineKeyValue) = comb &>> ("background-blend-mode", "lighten")
+    member inline _.backgroundBlendModeLighten([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "lighten")
+
     /// Sets the blending mode to color-dodge
+    []
     []
-    member inline _.backgroundBlendModeCollorDodge([] comb: CombineKeyValue) = comb &>> ("background-blend-mode", "color-dodge")
+    member inline _.backgroundBlendModeCollorDodge([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "color-dodge")
+
+    /// Sets the blending mode to color-dodge
+    []
+    member inline _.backgroundBlendModeColorDodge([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "color-dodge")
+
     /// Sets the blending mode to saturation
     []
-    member inline _.backgroundBlendModeSaturation([] comb: CombineKeyValue) = comb &>> ("background-blend-mode", "saturation")
+    member inline _.backgroundBlendModeSaturation([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "saturation")
+
     /// Sets the blending mode to color
     []
-    member inline _.backgroundBlendModeColor([] comb: CombineKeyValue) = comb &>> ("background-blend-mode", "color")
+    member inline _.backgroundBlendModeColor([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "color")
+
     /// Sets the blending mode to luminosity
     []
-    member inline _.backgroundBlendModeLuminosity([] comb: CombineKeyValue) = comb &>> ("background-blend-mode", "luminosity")
+    member inline _.backgroundBlendModeLuminosity([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "luminosity")
+
+    /// Sets the background blending mode using a CSS string value (e.g. "multiply", "var(--background-blend-mode)").
+    []
+    member inline _.backgroundBlendMode([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-blend-mode", value)
 
     /// Default value. The background extends behind the border.
     []
-    member inline _.backgroundClipBorderBox([] comb: CombineKeyValue) = comb &>> ("background-clip", "border-box")
+    member inline _.backgroundClipBorderBox([] comb: CombineKeyValue) =
+        comb &>> ("background-clip", "border-box")
+
     /// The background extends to the inside edge of the border.
     []
-    member inline _.backgroundClipPaddingBox([] comb: CombineKeyValue) = comb &>> ("background-clip", "padding-box")
+    member inline _.backgroundClipPaddingBox([] comb: CombineKeyValue) =
+        comb &>> ("background-clip", "padding-box")
+
     /// The background extends to the edge of the content box.
     []
-    member inline _.backgroundClipContentBox([] comb: CombineKeyValue) = comb &>> ("background-clip", "content-box")
+    member inline _.backgroundClipContentBox([] comb: CombineKeyValue) =
+        comb &>> ("background-clip", "content-box")
+
     /// Sets this property to its default value.
     []
-    member inline _.backgroundClipInitial([] comb: CombineKeyValue) = comb &>> ("background-clip", "initial")
+    member inline _.backgroundClipInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-clip", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.backgroundClipInheritFromParent([] comb: CombineKeyValue) = comb &>> ("background-clip", "inherit")
+    member inline _.backgroundClipInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("background-clip", "inherit")
+
+    /// Sets how far the background extends using a CSS string value (e.g. "padding-box", "var(--background-clip)").
+    []
+    member inline _.backgroundClip([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-clip", value)
 
     /// Applies a 2D or 3D transformation to an element. Accepts a CSS transform value (e.g. "rotate(45deg)", "translate(10px, 20px)", "scale(1.5)").
     []
-    member inline _.transform([] comb: CombineKeyValue, transformation: string) = comb &>> ("transform", transformation)
+    member inline _.transform([] comb: CombineKeyValue, transformation: string) =
+        comb &>> ("transform", transformation)
 
     /// Defines that there should be no transformation.
     []
@@ -1761,15 +2609,20 @@ type CssBuilder() =
 
     /// Allows you to change the position of transformed elements.
     []
-    member inline _.transformOrigin([] comb: CombineKeyValue, x: string) = comb &>> ("transform-origin", x)
+    member inline _.transformOrigin([] comb: CombineKeyValue, x: string) =
+        comb &>> ("transform-origin", x)
 
     /// Allows you to change the position of transformed elements, using separate x and y values.
     []
-    member inline _.transformOrigin([] comb: CombineKeyValue, x: string, y: string) = comb &>> ("transform-origin", x + " " + y)
+    member inline _.transformOrigin([] comb: CombineKeyValue, x: string, y: string) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("transform-origin: ").Append(x).Append(" ").Append(y).Append("; "))
 
     /// Defines a 2D transformation, using a matrix of six values.
     []
-    member inline _.transformMatrix([] comb: CombineKeyValue, x1: int, y1: int, z1: int, x2: int, y2: int, z2: int) =
+    member inline _.transformMatrix
+        ([] comb: CombineKeyValue, x1: int, y1: int, z1: int, x2: int, y2: int, z2: int)
+        =
         CombineKeyValue(fun sb ->
             comb
                 .Invoke(sb)
@@ -1777,7 +2630,7 @@ type CssBuilder() =
                 .Append("matrix(")
                 .Append(x1)
                 .Append(",")
-                .Append(y2)
+                .Append(y1)
                 .Append(",")
                 .Append(z1)
                 .Append(",")
@@ -1786,18 +2639,27 @@ type CssBuilder() =
                 .Append(y2)
                 .Append(",")
                 .Append(z2)
-                .Append("); ")
-        )
+                .Append("); "))
 
     /// Defines a 2D translation.
     []
     member inline _.transformTranslate([] comb: CombineKeyValue, x: int, y: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translate(").Append(x).Append("px, ").Append(y).Append("px); "))
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("transform: ")
+                .Append("translate(")
+                .Append(x)
+                .Append("px, ")
+                .Append(y)
+                .Append("px); "))
 
     /// Defines a 2D translation.
     []
     member inline _.transformTranslate([] comb: CombineKeyValue, x: string, y: string) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translate(").Append(x).Append(", ").Append(y).Append("); "))
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("transform: ").Append("translate(").Append(x).Append(", ").Append(y).Append("); "))
+
     /// Defines a 3D translation.
     []
     member inline _.transformTranslate3D([] comb: CombineKeyValue, x: int, y: int, z: int) =
@@ -1811,8 +2673,7 @@ type CssBuilder() =
                 .Append(y)
                 .Append("px, ")
                 .Append(z)
-                .Append("px); ")
-        )
+                .Append("px); "))
 
     /// Defines a 3D translation.
     []
@@ -1827,42 +2688,50 @@ type CssBuilder() =
                 .Append(y)
                 .Append(", ")
                 .Append(z)
-                .Append("); ")
-        )
+                .Append("); "))
 
     /// Defines a translation, using only the value for the X-axis.
     []
     member inline _.transformTranslateX([] comb: CombineKeyValue, x: int) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateX(").Append(x).Append("px); "))
+
     /// Defines a translation, using only the value for the X-axis.
     []
     member inline _.transformTranslateX([] comb: CombineKeyValue, x: string) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateX(").Append(x).Append("); "))
+
     /// Defines a translation, using only the value for the Y-axis
     []
     member inline _.transformTranslateY([] comb: CombineKeyValue, y: int) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateY(").Append(y).Append("px); "))
+
     /// Defines a translation, using only the value for the Y-axis
     []
     member inline _.transformTranslateY([] comb: CombineKeyValue, y: string) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateY(").Append(y).Append("); "))
+
     /// Defines a 3D translation, using only the value for the Z-axis
     []
     member inline _.transformTranslateZ([] comb: CombineKeyValue, z: int) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateZ(").Append(z).Append("px); "))
+
     /// Defines a 3D translation, using only the value for the Z-axis
     []
     member inline _.transformTranslateZ([] comb: CombineKeyValue, z: string) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateZ(").Append(z).Append("); "))
+
     /// Defines a 2D scale transformation.
     []
     member inline _.transformScale([] comb: CombineKeyValue, x: int, y: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("scale(").Append(x).Append(", ").Append(y).Append("); "))
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("transform: ").Append("scale(").Append(x).Append(", ").Append(y).Append("); "))
+
     /// Defines a scale transformation.
     /// Defines a scale transformation.
     []
     member inline _.transformScale([] comb: CombineKeyValue, n: float) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("scale(").Append(n).Append("); "))
+
     /// Defines a 3D scale transformation
     []
     member inline _.transformScale3D([] comb: CombineKeyValue, x: int, y: int, z: int) =
@@ -1876,28 +2745,33 @@ type CssBuilder() =
                 .Append(y)
                 .Append(", ")
                 .Append(z)
-                .Append("); ")
-        )
+                .Append("); "))
+
     /// Defines a scale transformation by giving a value for the X-axis.
     []
     member inline _.transformScaleX([] comb: CombineKeyValue, x: int) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("scaleX(").Append(x).Append("); "))
+
     /// Defines a scale transformation by giving a value for the Y-axis.
     []
     member inline _.transformScaleY([] comb: CombineKeyValue, y: int) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("scaleY(").Append(y).Append("); "))
+
     /// Defines a 3D translation, using only the value for the Z-axis
     []
     member inline _.transformScaleZ([] comb: CombineKeyValue, z: int) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("scaleZ(").Append(z).Append("); "))
+
     /// Defines a 2D rotation, the angle is specified in the parameter.
     []
     member inline _.transformRotate([] comb: CombineKeyValue, deg: int) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("rotate(").Append(deg).Append("deg); "))
+
     /// Defines a 2D rotation, the angle is specified in the parameter.
     []
     member inline _.transformRotate([] comb: CombineKeyValue, deg: float) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("rotate(").Append(deg).Append("deg); "))
+
     /// Defines a 3D rotation along the X-axis.
     []
     member inline _.transformRotateX([] comb: CombineKeyValue, deg: float) =
@@ -1907,159 +2781,267 @@ type CssBuilder() =
     []
     member inline _.transformRotateY([] comb: CombineKeyValue, deg: float) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("rotateY(").Append(deg).Append("deg); "))
+
     /// Defines a 3D rotation along the Z-axis
     []
     member inline _.transformRotateZ([] comb: CombineKeyValue, deg: float) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("rotateZ(").Append(deg).Append("deg); "))
+
     /// Defines a 2D skew transformation along the X- and the Y-axis.
     []
     member inline _.transformSkew([] comb: CombineKeyValue, xAngle: float, yAngle: float) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("skew(").Append(xAngle).Append("deg, ").Append(yAngle).Append("deg); ")
-        )
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("transform: ")
+                .Append("skew(")
+                .Append(xAngle)
+                .Append("deg, ")
+                .Append(yAngle)
+                .Append("deg); "))
+
     /// Defines a 2D skew transformation along the X-axis
     []
     member inline _.transformSkewX([] comb: CombineKeyValue, xAngle: float) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("skewX(").Append(xAngle).Append("deg); "))
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("transform: ").Append("skewX(").Append(xAngle).Append("deg); "))
+
     /// Defines a 2D skew transformation along the Y-axis
     []
     member inline _.transformSkewY([] comb: CombineKeyValue, yAngle: float) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("skewY(").Append(yAngle).Append("deg); "))
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("transform: ").Append("skewY(").Append(yAngle).Append("deg); "))
+
     /// Defines a perspective view for a 3D transformed element
     []
     member inline _.transformPerspective([] comb: CombineKeyValue, n: int) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("perspective(").Append(n).Append("); "))
+
     /// Sets this property to its default value.
     []
     member inline _.transformInitial([] comb: CombineKeyValue) = comb &>> ("transform", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.transformInheritFromParent([] comb: CombineKeyValue) = comb &>> ("transform", "inherit")
+    member inline _.transformInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("transform", "inherit")
 
     /// Text direction goes from right-to-left
     []
     member inline _.directionRightToLeft([] comb: CombineKeyValue) = comb &>> ("direction", "rtl")
+
     /// Text direction goes from left-to-right. This is default
     []
     member inline _.directionLeftToRight([] comb: CombineKeyValue) = comb &>> ("direction", "ltr")
+
     /// Sets this property to its default value.
     []
     member inline _.directionInitial([] comb: CombineKeyValue) = comb &>> ("direction", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.directionInheritFromParent([] comb: CombineKeyValue) = comb &>> ("direction", "inherit")
+    member inline _.directionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("direction", "inherit")
+
+    /// Sets the text direction using a CSS string value (e.g. "rtl", "var(--direction)").
+    []
+    member inline _.direction([] comb: CombineKeyValue, value: string) = comb &>> ("direction", value)
 
     /// Display borders on empty cells. This is default
     []
     member inline _.emptyCellsShow([] comb: CombineKeyValue) = comb &>> ("empty-cells", "show")
+
     /// Hide borders on empty cells
     []
     member inline _.emptyCellsHide([] comb: CombineKeyValue) = comb &>> ("empty-cells", "hide")
+
     /// Sets this property to its default value)
     []
     member inline _.emptyCellsInitial([] comb: CombineKeyValue) = comb &>> ("empty-cells", "initial")
+
     /// Inherits this property from its parent element
     []
-    member inline _.emptyCellsInheritFromParent([] comb: CombineKeyValue) = comb &>> ("empty-cells", "inherit")
+    member inline _.emptyCellsInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("empty-cells", "inherit")
+
+    /// Sets whether empty table cells show borders using a CSS string value (e.g. "hide", "var(--empty-cells)").
+    []
+    member inline _.emptyCells([] comb: CombineKeyValue, value: string) =
+        comb &>> ("empty-cells", value)
 
     /// Default value. The animation should be played as normal
     []
-    member inline _.animationDirectionNormal([] comb: CombineKeyValue) = comb &>> ("animation-direction", "normal")
+    member inline _.animationDirectionNormal([] comb: CombineKeyValue) =
+        comb &>> ("animation-direction", "normal")
+
     /// The animation should play in reverse direction
     []
-    member inline _.animationDirectionReverse([] comb: CombineKeyValue) = comb &>> ("animation-direction", "reverse")
+    member inline _.animationDirectionReverse([] comb: CombineKeyValue) =
+        comb &>> ("animation-direction", "reverse")
+
     /// The animation will be played as normal every odd time (1, 3, 5, etc..) and in reverse direction every even time (2, 4, 6, etc...).
     []
-    member inline _.animationDirectionAlternate([] comb: CombineKeyValue) = comb &>> ("animation-direction", "alternate")
+    member inline _.animationDirectionAlternate([] comb: CombineKeyValue) =
+        comb &>> ("animation-direction", "alternate")
+
     /// The animation will be played in reverse direction every odd time (1, 3, 5, etc..) and in a normal direction every even time (2,4,6,etc...))
     []
     member inline _.animationDirectionAlternateReverse([] comb: CombineKeyValue) =
         comb &>> ("animation-direction", "alternate-reverse")
+
     /// Sets this property to its default value)
     []
-    member inline _.animationDirectionInitial([] comb: CombineKeyValue) = comb &>> ("animation-direction", "initial")
+    member inline _.animationDirectionInitial([] comb: CombineKeyValue) =
+        comb &>> ("animation-direction", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.animationDirectionInheritFromParent([] comb: CombineKeyValue) = comb &>> ("animation-direction", "inherit")
+    member inline _.animationDirectionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("animation-direction", "inherit")
+
+    /// Sets the animation direction using a CSS string value (e.g. "alternate", "var(--animation-direction)").
+    []
+    member inline _.animationDirection([] comb: CombineKeyValue, value: string) =
+        comb &>> ("animation-direction", value)
 
     /// Default value. Specifies that the animation is running.
     []
-    member inline _.animationPlayStateRunning([] comb: CombineKeyValue) = comb &>> ("animation-play-state", "running")
+    member inline _.animationPlayStateRunning([] comb: CombineKeyValue) =
+        comb &>> ("animation-play-state", "running")
+
     /// Specifies that the animation is paused
     []
-    member inline _.animationPlayStatePaused([] comb: CombineKeyValue) = comb &>> ("animation-play-state", "paused")
+    member inline _.animationPlayStatePaused([] comb: CombineKeyValue) =
+        comb &>> ("animation-play-state", "paused")
+
     /// Sets this property to its default value)
     []
-    member inline _.animationPlayStateInitial([] comb: CombineKeyValue) = comb &>> ("animation-play-state", "initial")
+    member inline _.animationPlayStateInitial([] comb: CombineKeyValue) =
+        comb &>> ("animation-play-state", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.animationPlayStateInheritFromParent([] comb: CombineKeyValue) = comb &>> ("animation-play-state", "inherit")
+    member inline _.animationPlayStateInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("animation-play-state", "inherit")
+
+    /// Sets whether the animation is running using a CSS string value (e.g. "paused", "var(--animation-play-state)").
+    []
+    member inline _.animationPlayState([] comb: CombineKeyValue, value: string) =
+        comb &>> ("animation-play-state", value)
 
     /// Specifies that the animation should be played infinite times (forever))
     []
-    member inline _.animationIterationCountInfinite([] comb: CombineKeyValue) = comb &>> ("animation-iteration-count", "infinite")
+    member inline _.animationIterationCountInfinite([] comb: CombineKeyValue) =
+        comb &>> ("animation-iteration-count", "infinite")
+
     /// Sets this property to its default value)
     []
-    member inline _.animationIterationCountInitial([] comb: CombineKeyValue) = comb &>> ("animation-iteration-count", "initial")
+    member inline _.animationIterationCountInitial([] comb: CombineKeyValue) =
+        comb &>> ("animation-iteration-count", "initial")
+
     /// Inherits this property from its parent element.
     []
     member inline _.animationIterationCountInheritFromParent([] comb: CombineKeyValue) =
         comb &>> ("animation-iteration-count", "inherit")
 
+    /// Sets the number of times the animation runs using a CSS string value (e.g. "infinite", "var(--animation-count)").
+    []
+    member inline _.animationIterationCount([] comb: CombineKeyValue, value: string) =
+        comb &>> ("animation-iteration-count", value)
+
     /// Default value. Animation will not apply any styles to the element before or after it is executing
     []
-    member inline _.animationFillModeNone([] comb: CombineKeyValue) = comb &>> ("animation-fill-mode", "none")
+    member inline _.animationFillModeNone([] comb: CombineKeyValue) =
+        comb &>> ("animation-fill-mode", "none")
+
     /// The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count).
     []
-    member inline _.animationFillModeForwards([] comb: CombineKeyValue) = comb &>> ("animation-fill-mode", "forwards")
+    member inline _.animationFillModeForwards([] comb: CombineKeyValue) =
+        comb &>> ("animation-fill-mode", "forwards")
+
     /// The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
     []
-    member inline _.animationFillModeBackwards([] comb: CombineKeyValue) = comb &>> ("animation-fill-mode", "backwards")
+    member inline _.animationFillModeBackwards([] comb: CombineKeyValue) =
+        comb &>> ("animation-fill-mode", "backwards")
+
     /// The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
     []
-    member inline _.animationFillModeBoth([] comb: CombineKeyValue) = comb &>> ("animation-fill-mode", "both")
+    member inline _.animationFillModeBoth([] comb: CombineKeyValue) =
+        comb &>> ("animation-fill-mode", "both")
+
     /// Sets this property to its default value)
     []
-    member inline _.animationFillModeInitial([] comb: CombineKeyValue) = comb &>> ("animation-fill-mode", "initial")
+    member inline _.animationFillModeInitial([] comb: CombineKeyValue) =
+        comb &>> ("animation-fill-mode", "initial")
+
     /// Inherits this property from its parent element
     []
-    member inline _.animationFillModeInheritFromParent([] comb: CombineKeyValue) = comb &>> ("animation-fill-mode", "inherit")
+    member inline _.animationFillModeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("animation-fill-mode", "inherit")
+
+    /// Sets the animation fill mode using a CSS string value (e.g. "both", "var(--animation-fill-mode)").
+    []
+    member inline _.animationFillMode([] comb: CombineKeyValue, value: string) =
+        comb &>> ("animation-fill-mode", value)
 
     /// Sets how background images are repeated.
     ///
     /// A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
     []
-    member inline _.backgroundRepeat([] comb: CombineKeyValue, repeat: string) = comb &>> ("background-repeat", repeat)
+    member inline _.backgroundRepeat([] comb: CombineKeyValue, repeat: string) =
+        comb &>> ("background-repeat", repeat)
+
     /// The background image is repeated both vertically and horizontally. This is default.
     []
-    member inline _.backgroundRepeatRepeat([] comb: CombineKeyValue) = comb &>> ("background-repeat", "repeat")
+    member inline _.backgroundRepeatRepeat([] comb: CombineKeyValue) =
+        comb &>> ("background-repeat", "repeat")
+
     /// The background image is only repeated horizontally.
     []
-    member inline _.backgroundRepeatRepeatX([] comb: CombineKeyValue) = comb &>> ("background-repeat", "repeat-x")
+    member inline _.backgroundRepeatRepeatX([] comb: CombineKeyValue) =
+        comb &>> ("background-repeat", "repeat-x")
+
     /// The background image is only repeated vertically.
     []
-    member inline _.backgroundRepeatRepeatY([] comb: CombineKeyValue) = comb &>> ("background-repeat", "repeat-y")
+    member inline _.backgroundRepeatRepeatY([] comb: CombineKeyValue) =
+        comb &>> ("background-repeat", "repeat-y")
+
     /// The background-image is not repeated.
     []
-    member inline _.backgroundRepeatNoRepeat([] comb: CombineKeyValue) = comb &>> ("background-repeat", "no-repeat")
+    member inline _.backgroundRepeatNoRepeat([] comb: CombineKeyValue) =
+        comb &>> ("background-repeat", "no-repeat")
+
     /// Sets this property to its default value.
     []
-    member inline _.backgroundRepeatInitial([] comb: CombineKeyValue) = comb &>> ("background-repeat", "initial")
+    member inline _.backgroundRepeatInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-repeat", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.backgroundRepeatInheritFromParent([] comb: CombineKeyValue) = comb &>> ("background-repeat", "inherit")
+    member inline _.backgroundRepeatInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("background-repeat", "inherit")
 
     /// Default value. Elements render in order, as they appear in the document flow.
+    []
     []
     member inline _.positionDefaultStatic([] comb: CombineKeyValue) = comb &>> ("position", "static")
+
+    /// Default value. Elements render in order, as they appear in the document flow.
+    []
+    member inline _.positionStatic([] comb: CombineKeyValue) = comb &>> ("position", "static")
+
     /// The element is positioned relative to its first positioned (not static) ancestor element.
     []
     member inline _.positionAbsolute([] comb: CombineKeyValue) = comb &>> ("position", "absolute")
+
     /// The element is positioned relative to the browser window
     []
     member inline _.positionFixed([] comb: CombineKeyValue) = comb &>> ("position", "fixed")
+
     /// The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position.
     []
     member inline _.positionRelative([] comb: CombineKeyValue) = comb &>> ("position", "relative")
+
     /// The element is positioned based on the user's scroll position
     ///
     /// A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
@@ -2067,157 +3049,236 @@ type CssBuilder() =
     /// Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1 with a -webkit- prefix.
     []
     member inline _.positionSticky([] comb: CombineKeyValue) = comb &>> ("position", "sticky")
+
     /// Sets this property to its default value.
     []
     member inline _.positionInitial([] comb: CombineKeyValue) = comb &>> ("position", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.positionInheritFromParent([] comb: CombineKeyValue) = comb &>> ("position", "inherit")
+    member inline _.positionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("position", "inherit")
+
+    /// Sets the positioning method using a CSS string value (e.g. "absolute", "var(--position)").
+    []
+    member inline _.position([] comb: CombineKeyValue, value: string) = comb &>> ("position", value)
 
     /// Default value. The width and height properties include the content, but does not include the padding, border, or margin.
     []
-    member inline _.boxSizingContentBox([] comb: CombineKeyValue) = comb &>> ("box-sizing", "content-box")
+    member inline _.boxSizingContentBox([] comb: CombineKeyValue) =
+        comb &>> ("box-sizing", "content-box")
+
     /// The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box.
     []
     member inline _.boxSizingBorderBox([] comb: CombineKeyValue) = comb &>> ("box-sizing", "border-box")
+
     /// Sets this property to its default value.
     []
     member inline _.boxSizingInitial([] comb: CombineKeyValue) = comb &>> ("box-sizing", "initial")
+
     /// Inherits this property from its parent element.
     []
-    member inline _.boxSizingInheritFromParent([] comb: CombineKeyValue) = comb &>> ("box-sizing", "inherit")
+    member inline _.boxSizingInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("box-sizing", "inherit")
+
+    /// Sets how the total width and height is calculated using a CSS string value (e.g. "border-box", "var(--box-sizing)").
+    []
+    member inline _.boxSizing([] comb: CombineKeyValue, value: string) = comb &>> ("box-sizing", value)
 
     /// Default value. The element offers no user-controllable method for resizing it.
     []
     member inline _.resizeNone([] comb: CombineKeyValue) = comb &>> ("resize", "none")
+
     /// The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.
     []
     member inline _.resizeBoth([] comb: CombineKeyValue) = comb &>> ("resize", "both")
+
     /// The element displays a mechanism for allowing the user to resize it in the horizontal direction.
     []
     member inline _.resizeHorizontal([] comb: CombineKeyValue) = comb &>> ("resize", "horizontal")
+
     /// The element displays a mechanism for allowing the user to resize it in the vertical direction.
     []
     member inline _.resizeVertical([] comb: CombineKeyValue) = comb &>> ("resize", "vertical")
+
     /// The element displays a mechanism for allowing the user to resize it in the block direction (either horizontally or vertically, depending on the writing-mode and direction value).
     []
     member inline _.resizeBlock([] comb: CombineKeyValue) = comb &>> ("resize", "block")
+
     /// The element displays a mechanism for allowing the user to resize it in the inline direction (either horizontally or vertically, depending on the writing-mode and direction value).
+    []
     []
     member inline _.resizeInline'([] comb: CombineKeyValue) = comb &>> ("resize", "inline")
+
+    /// The element can be resized in the inline direction (horizontally, in horizontal writing modes).
+    []
+    member inline _.resizeInlineValue([] comb: CombineKeyValue) = comb &>> ("resize", "inline")
+
     /// Sets this property to its default value.
     []
     member inline _.resizeInitial([] comb: CombineKeyValue) = comb &>> ("resize", "initial")
+
     /// Inherits this property from its parent element.
     []
     member inline _.resizeInheritFromParent([] comb: CombineKeyValue) = comb &>> ("resize", "inherit")
 
+    /// Sets whether an element is resizable using a CSS string value (e.g. "both", "var(--resize)").
+    []
+    member inline _.resize([] comb: CombineKeyValue, value: string) = comb &>> ("resize", value)
+
     /// Aligns the text to the left.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align
     []
     member inline _.textAlignLeft([] comb: CombineKeyValue) = comb &>> ("text-align", "left")
+
     /// Aligns the text to the right.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=right
     []
     member inline _.textAlignRight([] comb: CombineKeyValue) = comb &>> ("text-align", "right")
+
     /// Centers the text.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=center
     []
     member inline _.textAlignCenter([] comb: CombineKeyValue) = comb &>> ("text-align", "center")
+
     /// Stretches the lines so that each line has equal width (like in newspapers and magazines).
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=justify
     []
     member inline _.textAlignJustify([] comb: CombineKeyValue) = comb &>> ("text-align", "justify")
+
     /// Sets this property to its default value.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
     []
     member inline _.textAlignInitial([] comb: CombineKeyValue) = comb &>> ("text-align", "initial")
+
     /// Inherits this property from its parent element.
     ///
     /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
     []
-    member inline _.textAlignInheritFromParent([] comb: CombineKeyValue) = comb &>> ("text-align", "inherit")
+    member inline _.textAlignInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-align", "inherit")
+
+    /// Sets the horizontal alignment of text using a CSS string value (e.g. "center", "var(--text-align)").
+    []
+    member inline _.textAlign([] comb: CombineKeyValue, value: string) = comb &>> ("text-align", value)
 
     /// Displays an element as an inline element (like ` `). Any height and width properties will have no effect.
+    []
     []
     member inline _.displayInlineElement([] comb: CombineKeyValue) = comb &>> ("display", "inline")
+
+    /// Displays an element as an inline element (like ` `). Any height and width properties will have no effect.
+    []
+    member inline _.displayInline([] comb: CombineKeyValue) = comb &>> ("display", "inline")
+
     /// Displays an element as a block element (like `
 `). It starts on a new line, and takes up the whole width.
     []
     member inline _.displayBlock([] comb: CombineKeyValue) = comb &>> ("display", "block")
+
     /// Makes the container disappear, making the child elements children of the element the next level up in the DOM.
     []
     member inline _.displayContents([] comb: CombineKeyValue) = comb &>> ("display", "contents")
+
     /// Displays an element as a block-level flex container.
     []
     member inline _.displayFlex([] comb: CombineKeyValue) = comb &>> ("display", "flex")
+
     /// Displays an element as a block container box, and lays out its contents using flow layout.
     ///
     /// It always establishes a new block formatting context for its contents.
     []
     member inline _.displayFlowRoot([] comb: CombineKeyValue) = comb &>> ("display", "flow-root")
+
     /// Displays an element as a block-level grid container.
     []
     member inline _.displayGrid([] comb: CombineKeyValue) = comb &>> ("display", "grid")
+
     /// Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values.
     []
     member inline _.displayInlineBlock([] comb: CombineKeyValue) = comb &>> ("display", "inline-block")
+
     /// Displays an element as an inline-level flex container.
     []
     member inline _.displayInlineFlex([] comb: CombineKeyValue) = comb &>> ("display", "inline-flex")
+
     /// Displays an element as an inline-level grid container
     []
     member inline _.displayInlineGrid([] comb: CombineKeyValue) = comb &>> ("display", "inline-grid")
+
     /// The element is displayed as an inline-level table.
     []
     member inline _.displayInlineTable([] comb: CombineKeyValue) = comb &>> ("display", "inline-table")
+
     /// Let the element behave like a `
  •  ` element
     []
     member inline _.displayListItem([] comb: CombineKeyValue) = comb &>> ("display", "list-item")
+
     /// Displays an element as either block or inline, depending on context.
     []
     member inline _.displayRunIn([] comb: CombineKeyValue) = comb &>> ("display", "run-in")
+
     /// Let the element behave like a `
    •  ` element.
     []
     member inline _.displayTable([] comb: CombineKeyValue) = comb &>> ("display", "table")
+
     /// Let the element behave like a element.
     []
-    member inline _.displayTableColumnGroup([] comb: CombineKeyValue) = comb &>> ("display", "table-column-group")
+    member inline _.displayTableColumnGroup([] comb: CombineKeyValue) =
+        comb &>> ("display", "table-column-group")
+
     /// Let the element behave like a  element.
     []
-    member inline _.displayTableHeaderGroup([] comb: CombineKeyValue) = comb &>> ("display", "table-header-group")
+    member inline _.displayTableHeaderGroup([] comb: CombineKeyValue) =
+        comb &>> ("display", "table-header-group")
+
     /// Let the element behave like a  element.
     []
-    member inline _.displayTableFooterGroup([] comb: CombineKeyValue) = comb &>> ("display", "table-footer-group")
+    member inline _.displayTableFooterGroup([] comb: CombineKeyValue) =
+        comb &>> ("display", "table-footer-group")
+
     /// Let the element behave like a  element.
     []
-    member inline _.displayTableRowGroup([] comb: CombineKeyValue) = comb &>> ("display", "table-row-group")
+    member inline _.displayTableRowGroup([] comb: CombineKeyValue) =
+        comb &>> ("display", "table-row-group")
+
     /// Let the element behave like a element.
     []
     member inline _.displayTableColumn([] comb: CombineKeyValue) = comb &>> ("display", "table-column")
+
     /// Let the element behave like a  element.
     []
     member inline _.displayTableRow([] comb: CombineKeyValue) = comb &>> ("display", "table-row")
+
     /// The element is completely removed.
     []
     member inline _.displayNone([] comb: CombineKeyValue) = comb &>> ("display", "none")
+
     /// Sets this property to its default value.
     []
     member inline _.displayInitial([] comb: CombineKeyValue) = comb &>> ("display", "initial")
+
     /// Inherits this property from its parent element.
     []
     member inline _.displayInheritFromParent([] comb: CombineKeyValue) = comb &>> ("display", "inherit")
 
+    /// Sets the display behavior using a CSS string value (e.g. "flex", "var(--display)").
+    []
+    member inline _.display([] comb: CombineKeyValue, value: string) = comb &>> ("display", value)
+
     /// The zIndex property sets or returns the stack order of a positioned element.
     ///
     /// An element with greater stack order (1) is always in front of another element with lower stack order (0).
@@ -2232,6 +3293,7 @@ type CssBuilder() =
     /// margin-bottom, and margin-left.
     []
     member inline _.margin([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("margin", value)
+
     /// Sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right,
     /// margin-bottom, and margin-left.
     []
@@ -2240,12 +3302,14 @@ type CssBuilder() =
     /// Sets the margin area on the vertical and horizontal axis.
     []
     member inline _.margin([] comb: CombineKeyValue, vertical: int, horizonal: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("margin: ").Append(vertical).Append("px ").Append(horizonal).Append("px; "))
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("margin: ").Append(vertical).Append("px ").Append(horizonal).Append("px; "))
 
     /// Sets the margin area on the vertical and horizontal axis.
     []
     member inline _.margin([] comb: CombineKeyValue, vertical: string, horizonal: string) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("margin: ").Append(vertical).Append(" ").Append(horizonal).Append("; "))
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("margin: ").Append(vertical).Append(" ").Append(horizonal).Append("; "))
 
     /// Sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right,
     /// margin-bottom, and margin-left.
@@ -2262,13 +3326,14 @@ type CssBuilder() =
                 .Append(bottom)
                 .Append("px ")
                 .Append(left)
-                .Append("px; ")
-        )
+                .Append("px; "))
 
     /// Sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right,
     /// margin-bottom, and margin-left.
     []
-    member inline _.margin([] comb: CombineKeyValue, top: string, right: string, bottom: string, left: string) =
+    member inline _.margin
+        ([] comb: CombineKeyValue, top: string, right: string, bottom: string, left: string)
+        =
         CombineKeyValue(fun sb ->
             comb
                 .Invoke(sb)
@@ -2280,62 +3345,84 @@ type CssBuilder() =
                 .Append(bottom)
                 .Append(" ")
                 .Append(left)
-                .Append("; ")
-        )
+                .Append("; "))
 
     /// Sets the margin area on the left side of an element. A positive value places it farther from its
     /// neighbors, while a negative value places it closer.
     []
-    member inline _.marginLeft([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("margin-left", value)
+    member inline _.marginLeft([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("margin-left", value)
+
     /// Sets the margin area on the left side of an element. A positive value places it farther from its
     /// neighbors, while a negative value places it closer.
     []
-    member inline _.marginLeft([] comb: CombineKeyValue, value: string) = comb &>> ("margin-left", value)
+    member inline _.marginLeft([] comb: CombineKeyValue, value: string) =
+        comb &>> ("margin-left", value)
+
     /// sets the margin area on the right side of an element. A positive value places it farther from its
     /// neighbors, while a negative value places it closer.
     []
-    member inline _.marginRight([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("margin-right", value)
+    member inline _.marginRight([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("margin-right", value)
+
     /// sets the margin area on the right side of an element. A positive value places it farther from its
     /// neighbors, while a negative value places it closer.
     []
-    member inline _.marginRight([] comb: CombineKeyValue, value: string) = comb &>> ("margin-right", value)
+    member inline _.marginRight([] comb: CombineKeyValue, value: string) =
+        comb &>> ("margin-right", value)
+
     /// Sets the margin area on the top of an element. A positive value places it farther from its
     /// neighbors, while a negative value places it closer.
     []
-    member inline _.marginTop([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("margin-top", value)
+    member inline _.marginTop([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("margin-top", value)
+
     /// Sets the margin area on the top of an element. A positive value places it farther from its
     /// neighbors, while a negative value places it closer.
     []
     member inline _.marginTop([] comb: CombineKeyValue, value: string) = comb &>> ("margin-top", value)
+
     /// Sets the margin area on the bottom of an element. A positive value places it farther from its
     /// neighbors, while a negative value places it closer.
     []
-    member inline _.marginBottom([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("margin-bottom", value)
+    member inline _.marginBottom([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("margin-bottom", value)
+
     /// Sets the margin area on the bottom of an element. A positive value places it farther from its
     /// neighbors, while a negative value places it closer.
     []
-    member inline _.marginBottom([] comb: CombineKeyValue, value: string) = comb &>> ("margin-bottom", value)
+    member inline _.marginBottom([] comb: CombineKeyValue, value: string) =
+        comb &>> ("margin-bottom", value)
 
     /// Sets the padding area on all four sides of an element. It is a shorthand for padding-top,
     /// padding-right, padding-bottom, and padding-left.
     []
-    member inline _.padding([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("padding", value)
+    member inline _.padding([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("padding", value)
+
     /// Sets the padding area on all four sides of an element. It is a shorthand for padding-top,
     /// padding-right, padding-bottom, and padding-left.
     []
     member inline _.padding([] comb: CombineKeyValue, value: string) = comb &>> ("padding", value)
+
     /// Sets the padding area for vertical and horizontal axis.
     []
     member inline _.padding([] comb: CombineKeyValue, vertical: int, horizontal: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("padding: ").Append(vertical).Append("px ").Append(horizontal).Append("px; "))
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("padding: ").Append(vertical).Append("px ").Append(horizontal).Append("px; "))
+
     /// Sets the padding area for vertical and horizontal axis.
     []
     member inline _.padding([] comb: CombineKeyValue, vertical: string, horizontal: string) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("padding: ").Append(vertical).Append(" ").Append(horizontal).Append("; "))
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("padding: ").Append(vertical).Append(" ").Append(horizontal).Append("; "))
+
     /// Sets the padding area on all four sides of an element. It is a shorthand for padding-top,
     /// padding-right, padding-bottom, and padding-left.
     []
-    member inline _.padding([] comb: CombineKeyValue, top: string, right: string, bottom: string, left: string) =
+    member inline _.padding
+        ([] comb: CombineKeyValue, top: string, right: string, bottom: string, left: string)
+        =
         CombineKeyValue(fun sb ->
             comb
                 .Invoke(sb)
@@ -2347,8 +3434,8 @@ type CssBuilder() =
                 .Append(bottom)
                 .Append(" ")
                 .Append(left)
-                .Append("; ")
-        )
+                .Append("; "))
+
     /// Sets the padding area on all four sides of an element. It is a shorthand for padding-top,
     /// padding-right, padding-bottom, and padding-left.
     []
@@ -2364,50 +3451,71 @@ type CssBuilder() =
                 .Append(bottom)
                 .Append("px ")
                 .Append(left)
-                .Append("px; ")
-        )
+                .Append("px; "))
+
     /// Sets the height of the padding area on the bottom of an element.
     []
-    member inline _.paddingBottom([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("padding-bottom", value)
+    member inline _.paddingBottom([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("padding-bottom", value)
+
     /// Sets the height of the padding area on the bottom of an element.
     []
-    member inline _.paddingBottom([] comb: CombineKeyValue, value: string) = comb &>> ("padding-bottom", value)
+    member inline _.paddingBottom([] comb: CombineKeyValue, value: string) =
+        comb &>> ("padding-bottom", value)
+
     /// Sets the width of the padding area to the left of an element.
     []
-    member inline _.paddingLeft([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("padding-left", value)
+    member inline _.paddingLeft([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("padding-left", value)
+
     /// Sets the width of the padding area to the left of an element.
     []
-    member inline _.paddingLeft([] comb: CombineKeyValue, value: string) = comb &>> ("padding-left", value)
+    member inline _.paddingLeft([] comb: CombineKeyValue, value: string) =
+        comb &>> ("padding-left", value)
+
     /// Sets the width of the padding area on the right of an element.
     []
-    member inline _.paddingRight([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("padding-right", value)
+    member inline _.paddingRight([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("padding-right", value)
+
     /// Sets the width of the padding area on the right of an element.
     []
-    member inline _.paddingRight([] comb: CombineKeyValue, value: string) = comb &>> ("padding-right", value)
+    member inline _.paddingRight([] comb: CombineKeyValue, value: string) =
+        comb &>> ("padding-right", value)
+
     /// Sets the height of the padding area on the top of an element.
     []
-    member inline _.paddingTop([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("padding-top", value)
+    member inline _.paddingTop([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("padding-top", value)
+
     /// Sets the height of the padding area on the top of an element.
     []
-    member inline _.paddingTop([] comb: CombineKeyValue, value: string) = comb &>> ("padding-top", value)
+    member inline _.paddingTop([] comb: CombineKeyValue, value: string) =
+        comb &>> ("padding-top", value)
 
     /// Sets the flex shrink factor of a flex item. If the size of all flex items is larger than
     /// the flex container, items shrink to fit according to flex-shrink.
     []
-    member inline _.flexShrink([] comb: CombineKeyValue, value: int) = comb &&& mkWithKV ("flex-shrink", value)
+    member inline _.flexShrink([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("flex-shrink", value)
+
     /// Sets the initial main size of a flex item. It sets the size of the content box unless
     /// otherwise set with box-sizing.
     []
-    member inline _.flexBasis([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("flex-basis", value)
+    member inline _.flexBasis([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("flex-basis", value)
+
     /// Sets the initial main size of a flex item. It sets the size of the content box unless
     /// otherwise set with box-sizing.
     []
     member inline _.flexBasis([] comb: CombineKeyValue, value: string) = comb &>> ("flex-basis", value)
+
     /// Sets the flex grow factor of a flex item main size. It specifies how much of the remaining
     /// space in the flex container should be assigned to the item (the flex grow factor).
     []
-    member inline _.flexGrow([] comb: CombineKeyValue, value: int) = comb &&& mkWithKV ("flex-grow", value)
-    
+    member inline _.flexGrow([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("flex-grow", value)
+
     /// Shorthand of flex-grow, flex-shrink and flex-basis
     []
     member inline _.flex([] comb: CombineKeyValue, grow: int, shrink: int, ?basis: string) =
@@ -2416,8 +3524,7 @@ type CssBuilder() =
             sb.Append(grow) |> ignore
             sb.Append(' ').Append(shrink) |> ignore
             basis |> Option.iter (fun x -> sb.Append(' ').Append(x) |> ignore)
-            sb.Append("; ")
-        )
+            sb.Append("; "))
 
     /// Shorthand of flex-grow and flex-basis
     []
@@ -2426,8 +3533,7 @@ type CssBuilder() =
             let sb = comb.Invoke(sb).Append("flex: ")
             sb.Append(grow) |> ignore
             basis |> Option.iter (fun x -> sb.Append(' ').Append(x) |> ignore)
-            sb.Append("; ")
-        )
+            sb.Append("; "))
 
 
     /// Shorthand of flex-grow, flex-shrink and flex-basis
@@ -2448,10 +3554,16 @@ type CssBuilder() =
     member inline _.gridTemplateColumns([] comb: CombineKeyValue, value: int seq) =
         CombineKeyValue(fun sb ->
             let sb = comb.Invoke(sb).Append("grid-template-columns: ")
-            for v in value do
-                sb.Append(v).Append("px ") |> ignore
-            sb.Append("; ")
-        )
+            use e = value.GetEnumerator()
+
+            if e.MoveNext() then
+                sb.Append(e.Current).Append("px") |> ignore
+
+                while e.MoveNext() do
+                    sb.Append(" ").Append(e.Current).Append("px") |> ignore
+
+            sb.Append("; "))
+
     /// Sets the width of each individual grid column.
     ///
     /// **CSS**
@@ -2459,7 +3571,9 @@ type CssBuilder() =
     /// grid-template-columns: 1fr 1fr 2fr;
     /// ```
     []
-    member inline _.gridTemplateColumns([] comb: CombineKeyValue, value) = comb &>> ("grid-template-columns", value)
+    member inline _.gridTemplateColumns([] comb: CombineKeyValue, value) =
+        comb &>> ("grid-template-columns", value)
+
     /// Sets the width of a number of grid columns to the defined width, as well as naming the lines between them
     ///
     /// **CSS**
@@ -2471,11 +3585,14 @@ type CssBuilder() =
     /// style.gridTemplateColumns (3, "1fr", "col-start"))
     /// ```
     []
-    member inline _.gridTemplateColumns([] comb: CombineKeyValue, count: int, size: string, ?areaName: string) =
+    member inline _.gridTemplateColumns
+        ([] comb: CombineKeyValue, count: int, size: string, ?areaName: string)
+        =
         let areaName =
             match areaName with
             | Some n -> ", [" + n + "]"
             | None -> ""
+
         CombineKeyValue(fun sb ->
             comb
                 .Invoke(sb)
@@ -2485,8 +3602,8 @@ type CssBuilder() =
                 .Append(", ")
                 .Append(size)
                 .Append(areaName)
-                .Append("); ")
-        )
+                .Append("); "))
+
     /// Sets the width of a number of grid rows to the defined width
     ///
     /// **CSS**
@@ -2501,10 +3618,16 @@ type CssBuilder() =
     member inline _.gridTemplateRows([] comb: CombineKeyValue, value: int seq) =
         CombineKeyValue(fun sb ->
             let sb = comb.Invoke(sb).Append("grid-template-rows: ")
-            for v in value do
-                sb.Append(v).Append("px ") |> ignore
-            sb.Append("; ")
-        )
+            use e = value.GetEnumerator()
+
+            if e.MoveNext() then
+                sb.Append(e.Current).Append("px") |> ignore
+
+                while e.MoveNext() do
+                    sb.Append(" ").Append(e.Current).Append("px") |> ignore
+
+            sb.Append("; "))
+
     /// Sets the width of a number of grid rows to the defined width
     ///
     /// **CSS**
@@ -2516,7 +3639,9 @@ type CssBuilder() =
     /// style.gridTemplateRows ["1fr"]
     /// ```
     []
-    member inline _.gridTemplateRows([] comb: CombineKeyValue, value: string) = comb &>> ("grid-template-rows", value)
+    member inline _.gridTemplateRows([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-template-rows", value)
+
     /// Sets the width of a number of grid rows to the defined width
     ///
     /// **CSS**
@@ -2528,11 +3653,14 @@ type CssBuilder() =
     /// style.gridTemplateRows (3, length.percent 10))
     /// ```
     []
-    member inline _.gridTemplateRows([] comb: CombineKeyValue, count: int, size: string, ?areaName: string) =
+    member inline _.gridTemplateRows
+        ([] comb: CombineKeyValue, count: int, size: string, ?areaName: string)
+        =
         let areaName =
             match areaName with
             | Some n -> " [" + n + "]"
             | None -> ""
+
         CombineKeyValue(fun sb ->
             comb
                 .Invoke(sb)
@@ -2542,8 +3670,8 @@ type CssBuilder() =
                 .Append(", ")
                 .Append(size)
                 .Append(areaName)
-                .Append("); ")
-        )
+                .Append("); "))
+
     /// 2D representation of grid layout as blocks with names
     ///
     /// **CSS**
@@ -2565,11 +3693,14 @@ type CssBuilder() =
     member inline _.gridTemplateAreas([] comb: CombineKeyValue, value: string list) =
         CombineKeyValue(fun sb ->
             let sb = comb.Invoke(sb).Append("grid-template-areas: ")
+            let mutable first = true
+
             for item in value do
-                sb.Append("'").Append(item).Append("' ") |> ignore
+                if first then first <- false else sb.Append(" ") |> ignore
+                sb.Append("'").Append(item).Append("'") |> ignore
+
+            sb.Append("; "))
 
-            sb.Append("; ")
-        )
     /// Specifies the size of the grid lines. You can think of it like
     /// setting the width of the gutters between the columns.
     ///
@@ -2582,7 +3713,9 @@ type CssBuilder() =
     /// style.columnGap 10
     /// ```
     []
-    member inline _.columnGap([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("column-gap", value)
+    member inline _.columnGap([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("column-gap", value)
+
     /// Specifies the size of the grid lines. You can think of it like
     /// setting the width of the gutters between the columns.
     ///
@@ -2596,6 +3729,7 @@ type CssBuilder() =
     /// ```
     []
     member inline _.columnGap([] comb: CombineKeyValue, value: string) = comb &>> ("column-gap", value)
+
     /// Specifies the size of the grid lines. You can think of it like
     /// setting the width of the gutters between the rows.
     ///
@@ -2608,7 +3742,9 @@ type CssBuilder() =
     /// style.rowGap 10
     /// ```
     []
-    member inline _.rowGap([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("row-gap", value)
+    member inline _.rowGap([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("row-gap", value)
+
     /// Specifies the size of the grid lines. You can think of it like
     /// setting the width of the gutters between the rows.
     ///
@@ -2622,6 +3758,7 @@ type CssBuilder() =
     /// ```
     []
     member inline _.rowGap([] comb: CombineKeyValue, value: string) = comb &>> ("row-gap", value)
+
     /// Specifies the size of the grid lines. You can think of it like
     /// setting the width of the gutters between the rows/columns.
     ///
@@ -2636,13 +3773,18 @@ type CssBuilder() =
     /// style.gap (length.em 1, length.em 2))
     /// ```
     []
-    member inline _.gap([] comb: CombineKeyValue, rowGap: string, columnGap: string) = comb &>> ("gap", rowGap + " " + columnGap)
+    member inline _.gap([] comb: CombineKeyValue, rowGap: string, columnGap: string) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("gap: ").Append(rowGap).Append(" ").Append(columnGap).Append("; "))
+
     /// Sets the gap (both row and column) to the same CSS length value.
     []
     member inline _.gap([] comb: CombineKeyValue, gap: string) = comb &>> ("gap", gap)
+
     /// Sets the gap (both row and column) in pixels.
     []
     member inline _.gap([] comb: CombineKeyValue, gap: int) = comb &>> ("gap", string gap + "px")
+
     /// Sets where an item in the grid starts
     /// The value can be one of the following options:
     /// - a named line
@@ -2663,12 +3805,14 @@ type CssBuilder() =
     /// ```
     []
     member inline _.gridColumnStart([] comb: CombineKeyValue, value: string, ?count: int) =
-        comb
-        &>> ("grid-column-start",
-             value
-             + match count with
-               | Some x -> ", " + string x
-               | _ -> "")
+        CombineKeyValue(fun sb ->
+            let sb' = comb.Invoke(sb).Append("grid-column-start: ").Append(value)
+
+            (match count with
+             | Some x -> sb'.Append(", ").Append(x)
+             | _ -> sb')
+                .Append("; "))
+
     /// Sets where an item in the grid starts
     /// The value can be one of the following options:
     /// - a named line
@@ -2686,7 +3830,9 @@ type CssBuilder() =
     /// style.gridColumnStart 2
     /// ```
     []
-    member inline _.gridColumnStart([] comb: CombineKeyValue, value: int) = comb &&& mkWithKV ("grid-column-start", value)
+    member inline _.gridColumnStart([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("grid-column-start", value)
+
     /// Sets where an item in the grid starts
     /// The value can be one of the following options:
     /// - a named line
@@ -2704,7 +3850,9 @@ type CssBuilder() =
     /// style.gridColumnStart (gridColumn.span "odd-col"))
     /// ```
     []
-    member inline _.gridColumnStart([] comb: CombineKeyValue, value: string) = comb &>> ("grid-column-start", value)
+    member inline _.gridColumnStart([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-column-start", value)
+
     /// Sets where an item in the grid ends
     /// The value can be one of the following options:
     /// - a named line
@@ -2725,12 +3873,14 @@ type CssBuilder() =
     /// ```
     []
     member inline _.gridColumnEnd([] comb: CombineKeyValue, value: string, ?count: int) =
-        comb
-        &>> ("grid-column-end",
-             value
-             + match count with
-               | Some x -> ", " + string x
-               | _ -> "")
+        CombineKeyValue(fun sb ->
+            let sb' = comb.Invoke(sb).Append("grid-column-end: ").Append(value)
+
+            (match count with
+             | Some x -> sb'.Append(", ").Append(x)
+             | _ -> sb')
+                .Append("; "))
+
     /// Sets where an item in the grid ends
     /// The value can be one of the following options:
     /// - a named line
@@ -2748,7 +3898,9 @@ type CssBuilder() =
     /// style.gridColumnEnd 2
     /// ```
     []
-    member inline _.gridColumnEnd([] comb: CombineKeyValue, value: int) = comb &&& mkWithKV ("grid-column-end", value)
+    member inline _.gridColumnEnd([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("grid-column-end", value)
+
     /// Sets where an item in the grid ends
     /// The value can be one of the following options:
     /// - a named line
@@ -2766,7 +3918,9 @@ type CssBuilder() =
     /// style.gridColumnEnd (gridColumn.span 2))
     /// ```
     []
-    member inline _.gridColumnEnd([] comb: CombineKeyValue, value: string) = comb &>> ("grid-column-end", value)
+    member inline _.gridColumnEnd([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-column-end", value)
+
     /// Sets where an item in the grid starts
     /// The value can be one of the following options:
     /// - a named line
@@ -2785,12 +3939,14 @@ type CssBuilder() =
     /// ```
     []
     member inline _.gridRowStart([] comb: CombineKeyValue, value: string, ?count: int) =
-        comb
-        &>> ("grid-row-start",
-             value
-             + match count with
-               | Some x -> ", " + string x
-               | _ -> "")
+        CombineKeyValue(fun sb ->
+            let sb' = comb.Invoke(sb).Append("grid-row-start: ").Append(value)
+
+            (match count with
+             | Some x -> sb'.Append(", ").Append(x)
+             | _ -> sb')
+                .Append("; "))
+
     /// Sets where an item in the grid starts
     /// The value can be one of the following options:
     /// - a named line
@@ -2808,7 +3964,9 @@ type CssBuilder() =
     /// style.gridRowStart 2
     /// ```
     []
-    member inline _.gridRowStart([] comb: CombineKeyValue, value: int) = comb &&& mkWithKV ("grid-row-start", value)
+    member inline _.gridRowStart([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("grid-row-start", value)
+
     /// Sets where an item in the grid starts
     /// The value can be one of the following options:
     /// - a named line
@@ -2826,7 +3984,9 @@ type CssBuilder() =
     /// style.gridRowStart (gridRow.span "odd-col"))
     /// ```
     []
-    member inline _.gridRowStart([] comb: CombineKeyValue, value: string) = comb &>> ("grid-row-start", value)
+    member inline _.gridRowStart([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-row-start", value)
+
     /// Sets where an item in the grid ends
     /// The value can be one of the following options:
     /// - a named line
@@ -2847,12 +4007,14 @@ type CssBuilder() =
     /// ```
     []
     member inline _.gridRowEnd([] comb: CombineKeyValue, value: string, ?count: int) =
-        comb
-        &>> ("grid-row-end",
-             value
-             + match count with
-               | Some x -> ", " + string x
-               | _ -> "")
+        CombineKeyValue(fun sb ->
+            let sb' = comb.Invoke(sb).Append("grid-row-end: ").Append(value)
+
+            (match count with
+             | Some x -> sb'.Append(", ").Append(x)
+             | _ -> sb')
+                .Append("; "))
+
     /// Sets where an item in the grid ends
     /// The value can be one of the following options:
     /// - a named line
@@ -2870,7 +4032,9 @@ type CssBuilder() =
     /// style.gridRowEnd 2
     /// ```
     []
-    member inline _.gridRowEnd([] comb: CombineKeyValue, value: int) = comb &&& mkWithKV ("grid-row-end", value)
+    member inline _.gridRowEnd([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("grid-row-end", value)
+
     /// Sets where an item in the grid ends
     /// The value can be one of the following options:
     /// - a named line
@@ -2888,7 +4052,9 @@ type CssBuilder() =
     /// style.gridRowEnd (gridRow.span 2))
     /// ```
     []
-    member inline _.gridRowEnd([] comb: CombineKeyValue, value: string) = comb &>> ("grid-row-end", value)
+    member inline _.gridRowEnd([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-row-end", value)
+
     /// Determines a grid item��s location within the grid by referring to specific grid lines.
     /// start is the line where the item begins, end' is the line where it ends.
     /// They can be one of the following options:
@@ -2909,7 +4075,10 @@ type CssBuilder() =
     /// style.gridColumn ("col-2", "col-4"))
     /// ```
     []
-    member inline _.gridColumn([] comb: CombineKeyValue, start: string, end': string) = comb &>> ("grid-column", start + " / " + end')
+    member inline _.gridColumn([] comb: CombineKeyValue, start: string, end': string) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("grid-column: ").Append(start).Append(" / ").Append(end').Append("; "))
+
     /// Determines a grid item��s location within the grid by referring to specific grid lines.
     /// start is the line where the item begins, end' is the line where it ends.
     /// They can be one of the following options:
@@ -2932,6 +4101,7 @@ type CssBuilder() =
     []
     member inline _.gridColumn([] comb: CombineKeyValue, start: int, end': int) =
         comb &>> ("grid-column", string start + " / " + string end')
+
     /// Determines a grid item��s location within the grid by referring to specific grid lines.
     /// start is the line where the item begins, end' is the line where it ends.
     /// They can be one of the following options:
@@ -2952,7 +4122,10 @@ type CssBuilder() =
     /// style.gridRow ("row-2", "row-4"))
     /// ```
     []
-    member inline _.gridRow([] comb: CombineKeyValue, start: string, end': string) = comb &>> ("grid-row", start + " / " + end')
+    member inline _.gridRow([] comb: CombineKeyValue, start: string, end': string) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("grid-row: ").Append(start).Append(" / ").Append(end').Append("; "))
+
     /// Sets the named grid area the item is placed in
     ///
     /// **CSS**
@@ -2965,6 +4138,7 @@ type CssBuilder() =
     /// ```
     []
     member inline _.gridArea([] comb: CombineKeyValue, value: string) = comb &>> ("grid-area", value)
+
     /// Shorthand for `grid-template-areas`, `grid-template-columns` and `grid-template-rows`.
     ///
     /// Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template
@@ -2982,70 +4156,95 @@ type CssBuilder() =
     ///                                "/ auto 1fr auto")
     /// ```
     []
-    member inline _.gridTemplate([] comb: CombineKeyValue, value: string) = comb &>> ("grid-template", value)
+    member inline _.gridTemplate([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-template", value)
+
     /// Specifies a shorthand for all the transition properties. Accepts a CSS transition value (e.g. "all 0.3s ease-in-out").
     []
     member inline _.transition([] comb: CombineKeyValue, value: string) = comb &>> ("transition", value)
+
     /// Sets the length of time a transition animation should take to complete. By default, the
     /// value is 0s, meaning that no animation will occur.
     []
     member inline _.transitionDuration([] comb: CombineKeyValue, timespan: TimeSpan) =
         comb &>> ("transition-duration", timespan.TotalMilliseconds.ToString() + "ms")
+
     /// Sets the length of time a transition animation should take to complete. By default, the
     /// value is 0s, meaning that no animation will occur.
     []
-    member inline _.transitionDurationSeconds([] comb: CombineKeyValue, n: float) = comb &>> ("transition-duration", string n + "s")
+    member inline _.transitionDurationSeconds([] comb: CombineKeyValue, n: float) =
+        comb &>> ("transition-duration", string n + "s")
+
     /// Sets the length of time a transition animation should take to complete. By default, the
     /// value is 0s, meaning that no animation will occur.
     []
     member inline _.transitionDurationMilliseconds([] comb: CombineKeyValue, n: float) =
         comb &>> ("transition-duration", string n + "ms")
+
     /// Sets the length of time a transition animation should take to complete. By default, the
     /// value is 0s, meaning that no animation will occur.
     []
-    member inline _.transitionDurationSeconds([] comb: CombineKeyValue, n: int) = comb &>> ("transition-duration", string n + "s")
+    member inline _.transitionDurationSeconds([] comb: CombineKeyValue, n: int) =
+        comb &>> ("transition-duration", string n + "s")
+
     /// Sets the length of time a transition animation should take to complete. By default, the
     /// value is 0s, meaning that no animation will occur.
     []
     member inline _.transitionDurationMilliseconds([] comb: CombineKeyValue, n: int) =
         comb &>> ("transition-duration", string n + "ms")
+
     /// Specifies the duration to wait before starting a property's transition effect when its value changes.
     []
     member inline _.transitionDelay([] comb: CombineKeyValue, timespan: TimeSpan) =
         comb &>> ("transition-delay", timespan.TotalMilliseconds.ToString() + "ms")
+
     /// Specifies the duration to wait before starting a property's transition effect when its value changes.
     []
-    member inline _.transitionDelaySeconds([] comb: CombineKeyValue, n: float) = comb &>> ("transition-delay", string n + "s")
+    member inline _.transitionDelaySeconds([] comb: CombineKeyValue, n: float) =
+        comb &>> ("transition-delay", string n + "s")
+
     /// Specifies the duration to wait before starting a property's transition effect when its value changes.
     []
-    member inline _.transitionDelayMilliseconds([] comb: CombineKeyValue, n: float) = comb &>> ("transition-delay", string n + "ms")
+    member inline _.transitionDelayMilliseconds([] comb: CombineKeyValue, n: float) =
+        comb &>> ("transition-delay", string n + "ms")
+
     /// Specifies the duration to wait before starting a property's transition effect when its value changes.
     []
-    member inline _.transitionDelaySeconds([] comb: CombineKeyValue, n: int) = comb &>> ("transition-delay", string n + "s")
+    member inline _.transitionDelaySeconds([] comb: CombineKeyValue, n: int) =
+        comb &>> ("transition-delay", string n + "s")
+
     /// Specifies the duration to wait before starting a property's transition effect when its value changes.
     []
-    member inline _.transitionDelayMilliseconds([] comb: CombineKeyValue, n: int) = comb &>> ("transition-delay", string n + "ms")
+    member inline _.transitionDelayMilliseconds([] comb: CombineKeyValue, n: int) =
+        comb &>> ("transition-delay", string n + "ms")
+
     /// Sets the CSS properties to which a transition effect should be applied.
     []
-    member inline _.transitionProperty([] comb: CombineKeyValue, property: string) = comb &>> ("transition-property", property)
+    member inline _.transitionProperty([] comb: CombineKeyValue, property: string) =
+        comb &>> ("transition-property", property)
 
     /// Sets the size of the font.
     ///
     /// This property is also used to compute the size of em, ex, and other relative  units.
     []
-    member inline _.fontSize([] comb: CombineKeyValue, size: int) = comb &&& mkPxWithKV ("font-size", size)
+    member inline _.fontSize([] comb: CombineKeyValue, size: int) =
+        comb &&& mkPxWithKV ("font-size", size)
+
     /// Sets the size of the font.
     ///
     /// This property is also used to compute the size of em, ex, and other relative  units.
     []
     member inline _.fontSize([] comb: CombineKeyValue, size: string) = comb &>> ("font-size", size)
+
     /// Specifies the height of a text lines.
     ///
     /// This property is also used to compute the size of em, ex, and other relative  units.
     ///
     /// Note: Negative values are not allowed.
     []
-    member inline _.lineHeight([] comb: CombineKeyValue, size: int) = comb &&& mkPxWithKV ("line-height", size)
+    member inline _.lineHeight([] comb: CombineKeyValue, size: int) =
+        comb &&& mkPxWithKV ("line-height", size)
+
     /// Specifies the height of a text lines.
     ///
     /// This property is also used to compute the size of em, ex, and other relative  units.
@@ -3056,40 +4255,52 @@ type CssBuilder() =
 
     /// Sets the background color of an element.
     []
-    member inline _.backgroundColor([] comb: CombineKeyValue, color: string) = comb &>> ("background-color", color)
+    member inline _.backgroundColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("background-color", color)
+
     /// Sets the color of the insertion caret, the visible marker where the next character typed will be inserted.
     ///
     /// This is sometimes referred to as the text input cursor. The caret appears in elements such as  or
     /// those with the contenteditable attribute. The caret is typically a thin vertical line that flashes to
     /// help make it more noticeable. By default, it is black, but its color can be altered with this property.
     []
-    member inline _.caretColor([] comb: CombineKeyValue, color: string) = comb &>> ("caret-color", color)
+    member inline _.caretColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("caret-color", color)
+
     /// Sets the foreground color value of an element's text and text decorations, and sets the
     /// `currentcolor` value. `currentcolor` may be used as an indirect value on other properties
     /// and is the default for other color properties, such as border-color.
     []
     member inline _.color([] comb: CombineKeyValue, color: string) = comb &>> ("color", color)
+
     /// Specifies the vertical position of a positioned element. It has no effect on non-positioned elements.
     []
     member inline _.top([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("top", value)
+
     /// Specifies the vertical position of a positioned element. It has no effect on non-positioned elements.
     []
     member inline _.top([] comb: CombineKeyValue, value: string) = comb &>> ("top", value)
+
     /// Specifies the vertical position of a positioned element. It has no effect on non-positioned elements.
     []
     member inline _.bottom([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("bottom", value)
+
     /// Specifies the vertical position of a positioned element. It has no effect on non-positioned elements.
     []
     member inline _.bottom([] comb: CombineKeyValue, value: string) = comb &>> ("bottom", value)
+
     /// Specifies the horizontal position of a positioned element. It has no effect on non-positioned elements.
     []
     member inline _.left([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("left", value)
+
     /// Specifies the horizontal position of a positioned element. It has no effect on non-positioned elements.
     []
     member inline _.left([] comb: CombineKeyValue, value: string) = comb &>> ("left", value)
+
     /// Specifies the horizontal position of a positioned element. It has no effect on non-positioned elements.
     []
     member inline _.right([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("right", value)
+
     /// Specifies the horizontal position of a positioned element. It has no effect on non-positioned elements.
     []
     member inline _.right([] comb: CombineKeyValue, value: string) = comb &>> ("right", value)
@@ -3105,7 +4316,8 @@ type CssBuilder() =
     ///  - An outline may be non-rectangular
     ///
     []
-    member inline _.outlineOffset([] comb: CombineKeyValue, offset: int) = comb &&& mkPxWithKV ("outline-offset", offset)
+    member inline _.outlineOffset([] comb: CombineKeyValue, offset: int) =
+        comb &&& mkPxWithKV ("outline-offset", offset)
 
     /// The outline-offset property adds space between an outline and the edge or border of an element.
     ///
@@ -3118,14 +4330,16 @@ type CssBuilder() =
     ///  - An outline may be non-rectangular
     ///
     []
-    member inline _.outlineOffset([] comb: CombineKeyValue, offset: string) = comb &>> ("outline-offset", offset)
+    member inline _.outlineOffset([] comb: CombineKeyValue, offset: string) =
+        comb &>> ("outline-offset", offset)
 
     /// An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
     ///
     /// The `outline-color` property specifies the color of an outline.
     /// **Note**: Always declare the outline-style property before the outline-color property. An element must have an outline before you change the color of it.
     []
-    member inline _.outlineColor([] comb: CombineKeyValue, color: string) = comb &>> ("outline-color", color)
+    member inline _.outlineColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("outline-color", color)
 
     /// Sets the line style of an element's border.
     []
@@ -3133,7 +4347,8 @@ type CssBuilder() =
 
     /// Sets the line style of an element's left border.
     []
-    member inline _.borderLeft([] comb: CombineKeyValue, style: string) = comb &>> ("border-left", style)
+    member inline _.borderLeft([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-left", style)
 
     /// Sets the line style of an element's top border.
     []
@@ -3141,178 +4356,243 @@ type CssBuilder() =
 
     /// Sets the line style of an element's right border.
     []
-    member inline _.borderRight([] comb: CombineKeyValue, style: string) = comb &>> ("border-right", style)
+    member inline _.borderRight([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-right", style)
 
     /// Sets the line style of an element's bottom border.
     []
-    member inline _.borderBottom([] comb: CombineKeyValue, style: string) = comb &>> ("border-bottom", style)
+    member inline _.borderBottom([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-bottom", style)
 
     /// Sets the line style of an element's bottom border.
     []
-    member inline _.borderBottomStyle([] comb: CombineKeyValue, style: string) = comb &>> ("border-bottom-style", style)
+    member inline _.borderBottomStyle([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-bottom-style", style)
+
     /// Sets the width of the bottom border of an element.
     []
-    member inline _.borderBottomWidth([] comb: CombineKeyValue, width: int) = comb &&& mkPxWithKV ("border-bottom-width", width)
+    member inline _.borderBottomWidth([] comb: CombineKeyValue, width: int) =
+        comb &&& mkPxWithKV ("border-bottom-width", width)
+
     /// Sets the width of the bottom border of an element.
     []
-    member inline _.borderBottomWidth([] comb: CombineKeyValue, width: string) = comb &>> ("border-bottom-width", width)
+    member inline _.borderBottomWidth([] comb: CombineKeyValue, width: string) =
+        comb &>> ("border-bottom-width", width)
+
     /// Sets the color of an element's bottom border.
     ///
     /// It can also be set with the shorthand CSS properties border-color or border-bottom.
     []
-    member inline _.borderBottomColor([] comb: CombineKeyValue, color: string) = comb &>> ("border-bottom-color", color)
+    member inline _.borderBottomColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("border-bottom-color", color)
+
     /// Sets the line style of an element's top border.
     []
-    member inline _.borderTopStyle([] comb: CombineKeyValue, style: string) = comb &>> ("border-top-style", style)
+    member inline _.borderTopStyle([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-top-style", style)
+
     /// Sets the width of the top border of an element.
     []
-    member inline _.borderTopWidth([] comb: CombineKeyValue, width: int) = comb &&& mkPxWithKV ("border-top-width", width)
+    member inline _.borderTopWidth([] comb: CombineKeyValue, width: int) =
+        comb &&& mkPxWithKV ("border-top-width", width)
+
     /// Sets the width of the top border of an element.
     []
-    member inline _.borderTopWidth([] comb: CombineKeyValue, width: string) = comb &>> ("border-top-width", width)
+    member inline _.borderTopWidth([] comb: CombineKeyValue, width: string) =
+        comb &>> ("border-top-width", width)
+
     /// Sets the color of an element's top border.
     ///
     /// It can also be set with the shorthand CSS properties border-color or border-bottom.
     []
-    member inline _.borderTopColor([] comb: CombineKeyValue, color: string) = comb &>> ("border-top-color", color)
+    member inline _.borderTopColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("border-top-color", color)
+
     /// Sets the line style of an element's right border.
     []
-    member inline _.borderRightStyle([] comb: CombineKeyValue, style: string) = comb &>> ("border-right-style", style)
+    member inline _.borderRightStyle([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-right-style", style)
+
     /// Sets the width of the right border of an element.
     []
-    member inline _.borderRightWidth([] comb: CombineKeyValue, width: int) = comb &&& mkPxWithKV ("border-right-width", width)
+    member inline _.borderRightWidth([] comb: CombineKeyValue, width: int) =
+        comb &&& mkPxWithKV ("border-right-width", width)
+
     /// Sets the width of the right border of an element.
     []
-    member inline _.borderRightWidth([] comb: CombineKeyValue, width: string) = comb &>> ("border-right-width", width)
+    member inline _.borderRightWidth([] comb: CombineKeyValue, width: string) =
+        comb &>> ("border-right-width", width)
+
     /// Sets the color of an element's right border.
     ///
     /// It can also be set with the shorthand CSS properties border-color or border-bottom.
     []
-    member inline _.borderRightColor([] comb: CombineKeyValue, color: string) = comb &>> ("border-right-color", color)
+    member inline _.borderRightColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("border-right-color", color)
+
     /// Sets the line style of an element's left border.
     []
-    member inline _.borderLeftStyle([] comb: CombineKeyValue, style: string) = comb &>> ("border-left-style", style)
+    member inline _.borderLeftStyle([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-left-style", style)
+
     /// Sets the width of the left border of an element.
     []
-    member inline _.borderLeftWidth([] comb: CombineKeyValue, width: int) = comb &&& mkPxWithKV ("border-left-width", width)
+    member inline _.borderLeftWidth([] comb: CombineKeyValue, width: int) =
+        comb &&& mkPxWithKV ("border-left-width", width)
+
     /// Sets the width of the left border of an element.
     []
-    member inline _.borderLeftWidth([] comb: CombineKeyValue, width: string) = comb &>> ("border-left-width", width)
+    member inline _.borderLeftWidth([] comb: CombineKeyValue, width: string) =
+        comb &>> ("border-left-width", width)
+
     /// Sets the color of an element's left border.
     ///
     /// It can also be set with the shorthand CSS properties border-color or border-bottom.
     []
-    member inline _.borderLeftColor([] comb: CombineKeyValue, color: string) = comb &>> ("border-left-color", color)
+    member inline _.borderLeftColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("border-left-color", color)
+
     /// Sets the color of an element's border.
     []
-    member inline _.borderColor([] comb: CombineKeyValue, color: string) = comb &>> ("border-color", color)
+    member inline _.borderColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("border-color", color)
+
     /// Rounds the corners of an element's outer border edge. You can set a single radius to make
     /// circular corners, or two radii to make elliptical corners.
     []
-    member inline _.borderRadius([] comb: CombineKeyValue, radius: int) = comb &&& mkPxWithKV ("border-radius", radius)
+    member inline _.borderRadius([] comb: CombineKeyValue, radius: int) =
+        comb &&& mkPxWithKV ("border-radius", radius)
+
     /// Rounds the corners of an element's outer border edge. You can set a single radius to make
     /// circular corners, or two radii to make elliptical corners.
     []
-    member inline _.borderRadius([] comb: CombineKeyValue, radius: string) = comb &>> ("border-radius", radius)
+    member inline _.borderRadius([] comb: CombineKeyValue, radius: string) =
+        comb &>> ("border-radius", radius)
+
     /// Sets the width of an element's border.
     []
-    member inline _.borderWidth([] comb: CombineKeyValue, width: int) = comb &&& mkPxWithKV ("border-width", width)
+    member inline _.borderWidth([] comb: CombineKeyValue, width: int) =
+        comb &&& mkPxWithKV ("border-width", width)
+
     /// Sets the width of an element's border.
     []
     member inline _.borderWidth([] comb: CombineKeyValue, top: string, ?right: string) =
         comb
         &&& CombineKeyValue(fun sb ->
-            sb
-                .Append("border-width: ")
-                .Append(
-                    top
-                    + (
-                        match right with
-                        | Some x -> ", " + string x
-                        | None -> ""
-                    )
-                )
-                .Append("; ")
-        )
+            let sb = sb.Append("border-width: ").Append(top)
+
+            match right with
+            | Some x -> sb.Append(" ").Append(x).Append("; ")
+            | None -> sb.Append("; "))
+
     /// Sets the width of an element's border.
     []
-    member inline _.borderWidth([] comb: CombineKeyValue, top: string, right: string, bottom: string, ?left: string) =
+    member inline _.borderWidth
+        ([] comb: CombineKeyValue, top: string, right: string, bottom: string, ?left: string)
+        =
         CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("border-width: ")
-                .Append(top)
-                .Append(", ")
-                .Append(right)
-                .Append(", ")
-                .Append(bottom)
-                .Append(", ")
-                .Append(
-                    match left with
-                    | Some x -> ", " + x
-                    | None -> ""
-                )
-                .Append("; ")
-        )
+            let sb =
+                comb
+                    .Invoke(sb)
+                    .Append("border-width: ")
+                    .Append(top)
+                    .Append(" ")
+                    .Append(right)
+                    .Append(" ")
+                    .Append(bottom)
+
+            match left with
+            | Some x -> sb.Append(" ").Append(x).Append("; ")
+            | None -> sb.Append("; "))
 
     /// Sets one or more animations to apply to an element. Each name is an @keyframes at-rule that
     /// sets the property values for the animation sequence.
     []
-    member inline _.animationName([] comb: CombineKeyValue, keyframeName: string) = comb &>> ("animation-name", keyframeName)
+    member inline _.animationName([] comb: CombineKeyValue, keyframeName: string) =
+        comb &>> ("animation-name", keyframeName)
+
     /// Sets the length of time that an animation takes to complete one cycle.
     []
     member inline _.animationDuration([] comb: CombineKeyValue, timespan: TimeSpan) =
         comb &>> ("animation-duration", string timespan.TotalMilliseconds + "ms")
+
     /// Sets the length of time that an animation takes to complete one cycle.
     []
-    member inline _.animationDuration([] comb: CombineKeyValue, seconds: int) = comb &>> ("animation-duration", string seconds + "s")
+    member inline _.animationDuration([] comb: CombineKeyValue, seconds: int) =
+        comb &>> ("animation-duration", string seconds + "s")
+
     /// Sets when an animation starts.
     ///
     /// The animation can start later, immediately from its beginning, or immediately and partway through the animation.
     []
     member inline _.animationDelay([] comb: CombineKeyValue, timespan: TimeSpan) =
         comb &>> ("animation-delay", string timespan.TotalMilliseconds + "ms")
+
     /// Sets when an animation starts.
     ///
     /// The animation can start later, immediately from its beginning, or immediately and partway through the animation.
     []
-    member inline _.animationDelay([] comb: CombineKeyValue, seconds: int) = comb &>> ("animation-delay", string seconds + "s")
+    member inline _.animationDelay([] comb: CombineKeyValue, seconds: int) =
+        comb &>> ("animation-delay", string seconds + "s")
+
     /// The number of times the animation runs.
+    []
     []
     member inline _.animationDurationCount([] comb: CombineKeyValue, count: int) =
-        comb &&& mkWithKV ("animation-duration-count", count)
+        comb &&& mkWithKV ("animation-iteration-count", count)
+
+    /// The number of times the animation runs.
+    []
+    member inline _.animationIterationCount([] comb: CombineKeyValue, count: int) =
+        comb &&& mkWithKV ("animation-iteration-count", count)
+
     /// Sets the font family for the font specified in a @font-face rule.
     []
-    member inline _.fontFamily([] comb: CombineKeyValue, family: string) = comb &>> ("font-family", family)
+    member inline _.fontFamily([] comb: CombineKeyValue, family: string) =
+        comb &>> ("font-family", family)
+
     /// Sets the color of decorations added to text by text-decoration-line.
     []
-    member inline _.textDecorationColor([] comb: CombineKeyValue, color: string) = comb &>> ("text-decoration-color", color)
+    member inline _.textDecorationColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("text-decoration-color", color)
+
     /// Sets the length of empty space (indentation) that is put before lines of text in a block.
     []
-    member inline _.textIndent([] comb: CombineKeyValue, value: int) = comb &&& mkWithKV ("text-indent", value)
+    member inline _.textIndent([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("text-indent", value)
+
     /// Sets the length of empty space (indentation) that is put before lines of text in a block.
     []
-    member inline _.textIndent([] comb: CombineKeyValue, value: string) = comb &>> ("text-indent", value)
+    member inline _.textIndent([] comb: CombineKeyValue, value: string) =
+        comb &>> ("text-indent", value)
+
     /// Sets the opacity of an element.
     ///
     /// Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
     []
-    member inline _.opacity([] comb: CombineKeyValue, value: double) = comb &&& mkWithKV ("opacity", value)
+    member inline _.opacity([] comb: CombineKeyValue, value: double) =
+        comb &&& mkWithKV ("opacity", value)
+
     /// Sets the minimum width of an element.
     ///
     /// It prevents the used value of the width property from becoming smaller than the value specified for min-width.
     []
-    member inline _.minWidth([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("min-width", value)
+    member inline _.minWidth([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("min-width", value)
+
     /// Sets the minimum width of an element.
     ///
     /// It prevents the used value of the width property from becoming smaller than the value specified for min-width.
     []
     member inline _.minWidth([] comb: CombineKeyValue, value: string) = comb &>> ("min-width", value)
+
     /// Sets the maximum width of an element.
     ///
     /// It prevents the used value of the width property from becoming larger than the value specified by max-width.
     []
-    member inline _.maxWidth([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("max-width", value)
+    member inline _.maxWidth([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("max-width", value)
+
     /// Sets the maximum width of an element.
     ///
     /// It prevents the used value of the width property from becoming larger than the value specified by max-width.
@@ -3324,6 +4604,7 @@ type CssBuilder() =
     /// By default, the property defines the width of the content area.
     []
     member inline _.width([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("width", value)
+
     /// Sets the width of an element.
     ///
     /// By default, the property defines the width of the content area.
@@ -3332,7 +4613,9 @@ type CssBuilder() =
 
     /// Sets one or more background images on an element.
     []
-    member inline _.backgroundImage([] comb: CombineKeyValue, value: string) = comb &>> ("background-image", value)
+    member inline _.backgroundImage([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-image", value)
+
     /// Short-hand for `style.backgroundImage(sprintf "url('%s')", value)` to set the backround image using a url.
     []
     member inline _.backgroundImageUrl([] comb: CombineKeyValue, value: string) =
@@ -3347,7 +4630,8 @@ type CssBuilder() =
 module color =
     /// Creates a color from components [hue](https://en.wikipedia.org/wiki/Hue), [saturation](https://en.wikipedia.org/wiki/Colorfulness) and [lightness](https://en.wikipedia.org/wiki/Lightness) where hue is a number that goes from 0 to 360 and both
     /// the `saturation` and `lightness` go from 0 to 100 as they are percentages.
-    let inline hsl (hue: float, saturation: float, lightness: float) = $"hsl({hue},{saturation}%%,{lightness}%%)"
+    let inline hsl (hue: float, saturation: float, lightness: float) =
+        $"hsl({hue},{saturation}%%,{lightness}%%)"
 
     let inline rgb (r: int, g: int, b: int) = $"rgb({r},{g},{b})"
 
diff --git a/README.md b/README.md
index 58901e1..98df5f1 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 Fun.Css is an F# library for building type-safe inline CSS with computation expressions.
 
+> 🤖 [SKILL.md](SKILL.md) is an [Agent Skills](https://agentskills.io)-format guide: point your AI coding assistant at it and it can author Fun.Css styles correctly from CSS knowledge alone. It documents the naming and consistency patterns every operation follows (camelCase property + PascalCase keyword, universal `(value: string)` overloads for CSS variables, composition, gotchas, and the deprecation policy) — useful for humans too.
+
 ```fsharp
 style {
     backgroundColor "#44c767"
diff --git a/SKILL.md b/SKILL.md
new file mode 100644
index 0000000..b32d025
--- /dev/null
+++ b/SKILL.md
@@ -0,0 +1,196 @@
+---
+name: fun-css
+description: >-
+  Author type-safe inline CSS in F# with the Fun.Css computation-expression
+  builder. Use when writing, generating, or refactoring Fun.Css style blocks
+  (style { ... }), choosing operation names from CSS property knowledge,
+  composing or conditionally building styles, or wiring design tokens / CSS
+  variables into Fun.Css or Fun.Blazor code.
+---
+
+# Fun.Css
+
+Fun.Css builds inline CSS strings with an F# computation expression. Every CSS property maps to one group of custom operations inside `style { ... }`. If you know CSS, you can guess the API — follow the rules below instead of searching the source.
+
+## Core rules
+
+1. **Property names are camelCase CSS names.** `background-color` → `backgroundColor`, `text-decoration-line` → `textDecorationLine`.
+2. **Keyword variants append the keyword in PascalCase.** `align-items: center` → `alignItemsCenter`; `flex-direction: row-reverse` → `flexDirectionRowReverse`. Multi-word keywords concatenate: `line-through` → `LineThrough`.
+3. **Every keyword-only property also has a `(value: string)` overload.** Never use the `custom` escape hatch for a known property — pass the keyword, a compound value, or a CSS variable.
+4. **`...Initial` and `...InheritFromParent`** exist on every keyword group (`displayInitial`, `displayInheritFromParent`).
+5. **`int`/`float` overloads add `px`** for dimensional properties (`width 100` → `width: 100px;`) and plain numbers for unitless ones (`opacity 0.5`, `zIndex 10`, `flexGrow 1`). Multi-value overloads take multiple arguments: `margin 10 20` → `margin: 10px 20px;`.
+6. **Arguments are space-separated** (curried custom operations), never tuples: `boxShadow 2 4 8 "red"`, not `boxShadow(2, 4, 8, "red")`.
+
+| Pattern | Example | Emits |
+|---|---|---|
+| `propertyName (value: string)` | `display "flex"` | `display: flex; ` |
+| `propertyName (value: int)` | `width 100` | `width: 100px; ` |
+| `propertyName (value: float)` | `opacity 0.5` | `opacity: 0.5; ` |
+| `propertyNameKeyword` (typed unit op) | `displayFlex` | `display: flex; ` |
+| `propertyNameInitial` | `displayInitial` | `display: initial; ` |
+| `propertyNameInheritFromParent` | `displayInheritFromParent` | `display: inherit; ` |
+
+## Workflow
+
+### 1. Author a style block
+
+Prefer typed keyword ops for compile-time checking; use the `(value: string)` overload for variables, compound values, or anything not covered by a typed op:
+
+```fsharp
+style {
+    displayFlex                          // typed keyword op
+    alignItems "center"                  // string overload, same property group
+    transitionTimingFunction "steps(4, end)"
+    width 100
+    margin 10 20
+}
+```
+
+### 2. Wire in design tokens / CSS variables
+
+Every property accepts a string, so a token system plugs in directly:
+
+```fsharp
+module Tokens =
+    module Layout =
+        let Display = "var(--display)"
+        let Direction = "var(--flex-direction)"
+    module Color =
+        let TextMain = "var(--color-text-main)"
+
+style {
+    display Tokens.Layout.Display        // no custom escape hatch needed
+    flexDirection Tokens.Layout.Direction
+    color Tokens.Color.TextMain
+    alignItemsCenter                     // typed ops still work side by side
+}
+```
+
+**Reusable styles.** Two more ways to share style logic, both built on a fragment builder (`css` = a `CssBuilder` with the default `Run`, which returns a `CombineKeyValue` fragment):
+
+1. **Shared fragment values** — put common combinations in a module and embed them:
+
+```fsharp
+let css = Fun.Css.CssBuilder()           // default Run returns a fragment
+
+module SharedStyles =
+    let ClickableGreen = css {
+        cursorPointer
+        color "green"
+    }
+
+style {
+    SharedStyles.ClickableGreen
+    fontSize 16
+}
+```
+
+2. **Custom operation extensions** — extend your builder with named operations:
+
+```fsharp
+[]
+module StyleExtensions =
+    open Fun.Css.Internal
+
+    type Fun.Css.CssBuilder with
+
+        []
+        member inline _.VStack([] comb: CombineKeyValue) =
+            comb &&& css {
+                displayFlex
+                flexDirectionColumn
+            }
+
+        []
+        member inline this.EvenHStack([] comb: CombineKeyValue) =
+            comb &&& css {
+                displayFlex
+                custom "justify-content" "space-evenly"
+            }
+
+style {
+    VStack
+    EvenHStack
+}
+```
+
+(In Fun.Blazor, extend its `StyleBuilder` the same way.)
+
+### 3. Compose and branch
+
+**Compose fragments.** With the default `Run` (which returns the `CombineKeyValue` fragment itself), one `style { ... }` block embeds another directly, or you can merge fragments with `&&&` from `Fun.Css.Internal`:
+
+```fsharp
+let frag = Fun.Css.CssBuilder()          // default Run returns CombineKeyValue
+
+let baseFrag = frag {
+    margin 0
+    padding 10
+}
+
+let combined = frag {
+    baseFrag                             // embeds cleanly
+    color "red"
+}
+// or: let combined = baseFrag &&& frag { color "red" }
+```
+
+Do **not** embed a builder whose `Run` returns a string (e.g. `StyleStrBuilder`) — the compiler auto-yields the string and appends a stray `"; "`. Concatenate the built strings instead: `baseStyles + overrides`.
+
+**Branch / loop.** A block containing `if`, `for`, or `match` cannot contain *any* custom operation (FS3086) — the whole block must use `yield` with `(key, value)` tuples, including for fallback properties:
+
+```fsharp
+style {
+    if isActive then
+        yield ("font-weight", "bold")
+    for size in sizes do
+        yield ("margin-bottom", string size + "px")
+    yield ("container-type", "inline-size")  // fallback, not `custom`
+}
+```
+
+To combine conditional output with regular custom ops, build them as separate blocks and concatenate the results (or combine fragments with `&&&` before running).
+
+### 4. Emit output
+
+Subclass `CssBuilder` and override `Run`. Use a pooled `StringBuilder` for hot paths:
+
+```fsharp
+type StyleStrBuilder() =
+    inherit Fun.Css.CssBuilder()
+
+    member inline _.Run([] combine: Fun.Css.Internal.CombineKeyValue) =
+        let sb = stringBuilderPool.Get()
+        let result = combine.Invoke(sb).ToString()
+        stringBuilderPool.Return sb
+        result
+
+let styleStr = StyleStrBuilder()
+```
+
+For Fun.Blazor, override `Run` to return an `AttrRenderFragment` (see README.md).
+
+## Gotchas
+
+- **Tuples don't compile.** CE custom operations are curried: `margin 10 20`, not `margin (10, 20)` (FS3099/FS0041).
+- **Custom ops fail anywhere in a block containing `if`/`for`/`match`** (FS3086) — not just inside the branches. A branchy block must be pure `yield ("css-key", value)` tuples; keep custom ops in a separate block and combine the outputs.
+- **Embedding a string-returning builder adds a stray `"; "`.** Only `CombineKeyValue` fragments (default `Run`) embed cleanly in another `style { }` block; concatenate built strings with `+` instead.
+- **`float` is a keyword in F#.** The float property group is `floatStyleLeft`, `floatStyleRight`, `floatStyleNone`, `floatStyle (value: string)`. (`floatLeft` etc. still work but warn.)
+- **End names take an apostrophe where `end` collides:** `gridColumnEnd`, `gridRowEnd` are fine; only local value bindings need `end'`.
+
+## Deprecation policy
+
+Public API members are **never removed**. Typo'd names stay available with `[]` pointing to the correctly spelled operation; they keep compiling and emitting identical CSS:
+
+```fsharp
+justifyItemsStrench   // works, but warns: use justifyItemsStretch
+wordbreakNormal       // works, but warns: use wordBreakNormal
+```
+
+When writing new code, always choose the non-obsolete name.
+
+## Reference
+
+- `README.md` — background, Fun.Blazor integration, benchmarks.
+- `Fun.Css/CssBuilder.fs` — full operation list (the only source of truth).
+- `Fun.Css/TODO.md` — known gaps and improvement backlog.
diff --git a/build.fsx b/build.fsx
index faf08d8..c638779 100644
--- a/build.fsx
+++ b/build.fsx
@@ -8,6 +8,7 @@ pipeline "benchmark" {
         workingDir "Benchmark"
         run "dotnet run -c Release"
     }
+
     runIfOnlySpecified
 }
 

From 109eda2534e3afe4373d33212cfb3a5d91d09e48 Mon Sep 17 00:00:00 2001
From: binwen 
Date: Fri, 28 Aug 2026 10:47:23 +0800
Subject: [PATCH 3/8] Refactor

---
 Fun.Css.Tests/Fun.Css.Tests.fsproj |    1 +
 Fun.Css.Tests/MiscTests.fs         |   53 +
 Fun.Css.Tests/UsagePatternTests.fs |  144 +
 Fun.Css/CssBuilder.fs              | 7904 +++++++++++++++-------------
 SKILL.md                           |   87 +-
 5 files changed, 4587 insertions(+), 3602 deletions(-)
 create mode 100644 Fun.Css.Tests/UsagePatternTests.fs

diff --git a/Fun.Css.Tests/Fun.Css.Tests.fsproj b/Fun.Css.Tests/Fun.Css.Tests.fsproj
index 03d5916..9442cda 100644
--- a/Fun.Css.Tests/Fun.Css.Tests.fsproj
+++ b/Fun.Css.Tests/Fun.Css.Tests.fsproj
@@ -17,6 +17,7 @@
     
     
     
+    
     
   
 
diff --git a/Fun.Css.Tests/MiscTests.fs b/Fun.Css.Tests/MiscTests.fs
index 15e05a6..5f13d91 100644
--- a/Fun.Css.Tests/MiscTests.fs
+++ b/Fun.Css.Tests/MiscTests.fs
@@ -5,6 +5,7 @@ module Fun.Css.Tests.MiscTests
 open Microsoft.Extensions.ObjectPool
 open Xunit
 
+
 let objectPoolProvider = DefaultObjectPoolProvider()
 let stringBuilderPool = objectPoolProvider.CreateStringBuilderPool()
 
@@ -325,3 +326,55 @@ let ``string overloads for keyword-only properties (design token support)`` () =
         "visibility: var(--visibility); overflow: var(--overflow); overflow-x: var(--overflow-x); overflow-y: var(--overflow-y); resize: var(--resize); user-select: var(--user-select); scroll-behavior: var(--scroll-behavior); list-style-type: var(--list-style-type); list-style-position: var(--list-style-position); border-collapse: var(--border-collapse); direction: var(--direction); writing-mode: var(--writing-mode); outline-style: var(--outline-style); background-clip: var(--background-clip); background-blend-mode: var(--background-blend-mode); filter: var(--filter); ",
         actual
     )
+
+[]
+let ``new standard property coverage ops`` () =
+    let actual =
+        style {
+            order 2
+            order "var(--order)"
+            flexFlow "row wrap"
+            outline "2px solid red"
+            outlineWidth 2.5
+            background "url(a.png) no-repeat center / cover"
+            backgroundAttachmentFixed
+            backgroundOrigin "padding-box"
+            backgroundPositionX "left"
+            backgroundPositionY "10px"
+            font "italic bold 12px/1.5 sans-serif"
+            textDecorationThickness "0.1em"
+            textDecorationSkipInkNone
+            textAlignLastCenter
+            tabSize 4
+            overflowWrap "anywhere"
+            textRenderingOptimizeLegibility
+            textSizeAdjust "100%"
+            textOrientationUpright
+            gridAutoRows "minmax(100px, auto)"
+            gridAutoColumns "auto"
+            gridAutoFlowRowDense
+            grid "auto-flow / 1fr 1fr"
+            listStyle "square inside"
+            transitionBehaviorAllowDiscrete
+            transformBoxFillBox
+            backfaceVisibilityHidden
+            inset 0
+            aspectRatio "16 / 9"
+            containPaint
+            marginBlockStart 10
+            marginInlineEnd "var(--margin-end)"
+            paddingBlockStart 10
+            paddingInlineEnd "1em"
+            scrollSnapAlignStart
+            scrollSnapTypeXMandatory
+            scrollSnapStopAlways
+            scrollMargin "10px"
+            scrollPadding "10px"
+            borderTopLeftRadius 8
+            borderBottomRightRadius "50%"
+        }
+
+    Assert.Equal(
+        "order: 2; order: var(--order); flex-flow: row wrap; outline: 2px solid red; outline-width: 2.5px; background: url(a.png) no-repeat center / cover; background-attachment: fixed; background-origin: padding-box; background-position-x: left; background-position-y: 10px; font: italic bold 12px/1.5 sans-serif; text-decoration-thickness: 0.1em; text-decoration-skip-ink: none; text-align-last: center; tab-size: 4; overflow-wrap: anywhere; text-rendering: optimizeLegibility; text-size-adjust: 100%; text-orientation: upright; grid-auto-rows: minmax(100px, auto); grid-auto-columns: auto; grid-auto-flow: row dense; grid: auto-flow / 1fr 1fr; list-style: square inside; transition-behavior: allow-discrete; transform-box: fill-box; backface-visibility: hidden; inset: 0px; aspect-ratio: 16 / 9; contain: paint; margin-block-start: 10px; margin-inline-end: var(--margin-end); padding-block-start: 10px; padding-inline-end: 1em; scroll-snap-align: start; scroll-snap-type: x mandatory; scroll-snap-stop: always; scroll-margin: 10px; scroll-padding: 10px; border-top-left-radius: 8px; border-bottom-right-radius: 50%; ",
+        actual
+    )
diff --git a/Fun.Css.Tests/UsagePatternTests.fs b/Fun.Css.Tests/UsagePatternTests.fs
new file mode 100644
index 0000000..25df16c
--- /dev/null
+++ b/Fun.Css.Tests/UsagePatternTests.fs
@@ -0,0 +1,144 @@
+module Fun.Css.Tests.UsagePatternTests
+
+// Tests for the consumption patterns documented in SKILL.md: reusable style
+// fragments, custom operation extensions, fragment composition, and mixing
+// conditional blocks with custom operations.
+
+open System.Text
+open Microsoft.Extensions.ObjectPool
+open Xunit
+open Fun.Css
+open Fun.Css.Internal
+
+let private objectPoolProvider = DefaultObjectPoolProvider()
+let private stringBuilderPool = objectPoolProvider.CreateStringBuilderPool()
+
+type private StyleStrBuilder() =
+    inherit Fun.Css.CssBuilder()
+
+    member inline _.Run([] combine: CombineKeyValue) =
+        let sb = stringBuilderPool.Get()
+        let str = combine.Invoke(sb).ToString()
+        stringBuilderPool.Return sb
+        str
+
+let private style = StyleStrBuilder()
+
+let private render (comb: CombineKeyValue) =
+    let sb = stringBuilderPool.Get()
+    let str = comb.Invoke(sb).ToString()
+    stringBuilderPool.Return sb
+    str
+
+// Fragment builder with the default Run (returns the CombineKeyValue fragment).
+let private css = Fun.Css.CssBuilder()
+
+// SKILL.md "Reusable styles > 1. Shared fragment values"
+module private SharedStyles =
+    let ClickableGreen =
+        css {
+            cursorPointer
+            color "green"
+        }
+
+// SKILL.md "Reusable styles > 2. Custom operation extensions"
+[]
+module private StyleExtensions =
+    type Fun.Css.CssBuilder with
+
+        []
+        member inline _.VStack([] comb: CombineKeyValue) =
+            comb
+            &&& css {
+                displayFlex
+                flexDirectionColumn
+            }
+
+        []
+        member inline this.EvenHStack([] comb: CombineKeyValue) =
+            comb
+            &&& css {
+                displayFlex
+                custom "justify-content" "space-evenly"
+            }
+
+[]
+let ``shared fragment value embeds into a style block`` () =
+    let actual =
+        style {
+            SharedStyles.ClickableGreen
+            fontSize 16
+        }
+
+    Assert.Equal("cursor: pointer; color: green; font-size: 16px; ", actual)
+
+[]
+let ``custom operation extension composes predefined styles`` () =
+    let actual = style { VStack }
+
+    Assert.Equal("display: flex; flex-direction: column; ", actual)
+
+[]
+let ``multiple custom operation extensions compose in order`` () =
+    let actual =
+        style {
+            VStack
+            EvenHStack
+        }
+
+    Assert.Equal("display: flex; flex-direction: column; display: flex; justify-content: space-evenly; ", actual)
+
+[]
+let ``one style block embeds another fragment directly`` () =
+    let baseFrag =
+        css {
+            margin 0
+            padding 10
+        }
+
+    let actual =
+        style {
+            baseFrag
+            color "red"
+        }
+
+    Assert.Equal("margin: 0px; padding: 10px; color: red; ", actual)
+
+[]
+let ``fragments merge with andand combinator`` () =
+    let baseFrag =
+        css {
+            margin 0
+            padding 10
+        }
+
+    let combined = baseFrag &&& css { color "red" }
+
+    Assert.Equal("margin: 0px; padding: 10px; color: red; ", render combined)
+
+[]
+let ``conditional yield block combines with custom ops via andand`` () =
+    let condFrag =
+        css {
+            if true then
+                yield ("font-weight", "bold")
+
+            for size in [ 8; 12 ] do
+                yield ("margin-bottom", string size + "px")
+        }
+
+    let actual = style { condFrag &&& css { displayFlex } }
+
+    Assert.Equal("font-weight: bold; margin-bottom: 8px; margin-bottom: 12px; display: flex; ", actual)
+
+[]
+let ``conditional block result concatenates with built string`` () =
+    let custom = style { displayFlex }
+
+    let conditional =
+        style {
+            if true then
+                yield ("color", "blue")
+        }
+
+    Assert.Equal("display: flex; color: blue; ", custom + conditional)
diff --git a/Fun.Css/CssBuilder.fs b/Fun.Css/CssBuilder.fs
index 520c867..c9e4c74 100644
--- a/Fun.Css/CssBuilder.fs
+++ b/Fun.Css/CssBuilder.fs
@@ -103,1018 +103,951 @@ type CssBuilder() =
     []
     member inline _.allRevert([] comb: CombineKeyValue) = comb &>> ("all", "revert")
 
-    /// Attaches one or more shadows to an element. Accepts a CSS box-shadow string (e.g. "2px 4px 8px rgba(0,0,0,0.2)"; multiple shadows can be separated by commas).
-    []
-    member inline _.boxShadow([] comb: CombineKeyValue, value: string) = comb &>> ("box-shadow", value)
-
-    /// Attaches a shadow with the given horizontal and vertical offsets (in pixels) and color.
-    []
-    member inline _.boxShadow
-        ([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, color: string)
-        =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("box-shadow: ")
-                .Append(horizontalOffset)
-                .Append("px ")
-                .Append(verticalOffset)
-                .Append("px ")
-                .Append(color)
-                .Append("; "))
 
-    /// Attaches a shadow with the given horizontal offset, vertical offset, and blur radius (all in pixels), plus a color.
-    []
-    member inline _.boxShadow
-        ([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, blur: int, color: string)
-        =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("box-shadow: ")
-                .Append(horizontalOffset)
-                .Append("px ")
-                .Append(verticalOffset)
-                .Append("px ")
-                .Append(blur)
-                .Append("px ")
-                .Append(color)
-                .Append("; "))
 
-    /// Attaches a shadow with the given horizontal offset, vertical offset, blur radius, and spread radius (all in pixels), plus a color.
-    []
-    member inline _.boxShadow
-        (
-            [] comb: CombineKeyValue,
-            horizontalOffset: int,
-            verticalOffset: int,
-            blur: int,
-            spread: int,
-            color: string
-        ) =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("box-shadow: ")
-                .Append(horizontalOffset)
-                .Append("px ")
-                .Append(verticalOffset)
-                .Append("px ")
-                .Append(blur)
-                .Append("px ")
-                .Append(spread)
-                .Append("px ")
-                .Append(color)
-                .Append("; "))
+    // --------------------------------------------------------------------
+    // Align styles
+    // --------------------------------------------------------------------
 
-    /// Removes the box shadow from an element.
-    []
-    member inline _.boxShadowNone([] comb: CombineKeyValue) = comb &>> ("box-shadow", "none")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.boxShadowInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("box-shadow", "inherit")
+    /// Default. The element inherits its parent container's align-items property, or "stretch" if it has no parent container.
+    []
+    member inline _.alignSelfAuto([] comb: CombineKeyValue) = comb &>> ("align-self", "auto")
 
-    /// Sets the height of an element.
-    []
-    member inline _.height([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("height", value)
+    /// The element is positioned to fit the container
+    []
+    member inline _.alignSelfStretch([] comb: CombineKeyValue) = comb &>> ("align-self", "stretch")
 
-    /// Sets the height of an element.
-    []
-    member inline _.height([] comb: CombineKeyValue, value: string) = comb &>> ("height", value)
+    /// The element is positioned at the center of the container
+    []
+    member inline _.alignSelfCenter([] comb: CombineKeyValue) = comb &>> ("align-self", "center")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.heightInheritFromParent([] comb: CombineKeyValue) = comb &>> ("height", "inherit")
+    /// The element is positioned at the beginning of the container
+    []
+    member inline _.alignSelfFlexStart([] comb: CombineKeyValue) = comb &>> ("align-self", "flex-start")
 
-    /// Sets this property to its default value.
-    []
-    member inline _.heightInitial([] comb: CombineKeyValue) = comb &>> ("height", "initial")
+    /// The element is positioned at the end of the container
+    []
+    member inline _.alignSelfFlexEnd([] comb: CombineKeyValue) = comb &>> ("align-self", "flex-end")
 
-    /// The intrinsic preferred height.
-    []
-    member inline _.heightMaxContent([] comb: CombineKeyValue) = comb &>> ("height", "max-content")
+    /// The element is positioned at the baseline of the container
+    []
+    member inline _.alignSelfBaseline([] comb: CombineKeyValue) = comb &>> ("align-self", "baseline")
 
-    /// The intrinsic minimum height.
-    []
-    member inline _.heightMinContent([] comb: CombineKeyValue) = comb &>> ("height", "min-content")
+    /// Sets this property to its default value)
+    []
+    member inline _.alignSelfInitial([] comb: CombineKeyValue) = comb &>> ("align-self", "initial")
 
-    /// Sets the maximum height of an element.
-    []
-    member inline _.maxHeight([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("max-height", value)
+    /// Inherits this property from its parent element
+    []
+    member inline _.alignSelfInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("align-self", "inherit")
 
-    /// Sets the maximum height of an element.
-    []
-    member inline _.maxHeight([] comb: CombineKeyValue, value: string) = comb &>> ("max-height", value)
+    /// Sets the alignment of the item inside its container using a CSS string value (e.g. "center", "var(--align-self)").
+    []
+    member inline _.alignSelf([] comb: CombineKeyValue, value: string) = comb &>> ("align-self", value)
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.maxHeightInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("max-height", "inherit")
+    /// Default. Items are stretched to fit the container
+    []
+    member inline _.alignItemsStretch([] comb: CombineKeyValue) = comb &>> ("align-items", "stretch")
 
-    /// Sets this property to its default value.
-    []
-    member inline _.maxHeightInitial([] comb: CombineKeyValue) = comb &>> ("max-height", "initial")
+    /// Items are positioned at the center of the container
+    []
+    member inline _.alignItemsCenter([] comb: CombineKeyValue) = comb &>> ("align-items", "center")
 
-    /// The intrinsic preferred height.
-    []
-    member inline _.maxHeightMaxContent([] comb: CombineKeyValue) =
-        comb &>> ("max-height", "max-content")
+    /// Items are positioned at the beginning of the container
+    []
+    member inline _.alignItemsFlexStart([] comb: CombineKeyValue) =
+        comb &>> ("align-items", "flex-start")
 
-    /// The intrinsic minimum height.
-    []
-    member inline _.maxHeightMinContent([] comb: CombineKeyValue) =
-        comb &>> ("max-height", "min-content")
+    /// Items are positioned at the end of the container
+    []
+    member inline _.alignItemsFlexEnd([] comb: CombineKeyValue) = comb &>> ("align-items", "flex-end")
 
-    /// Sets the minimum height of an element.
-    []
-    member inline _.minHeight([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("min-height", value)
+    /// Items are positioned at the baseline of the container
+    []
+    member inline _.alignItemsBaseline([] comb: CombineKeyValue) = comb &>> ("align-items", "baseline")
 
-    /// Sets the minimum height of an element.
-    []
-    member inline _.minHeight([] comb: CombineKeyValue, value: string) = comb &>> ("min-height", value)
+    /// Sets this property to its default value)
+    []
+    member inline _.alignItemsInitial([] comb: CombineKeyValue) = comb &>> ("align-items", "initial")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.minHeightInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("min-height", "inherit")
+    /// Inherits this property from its parent element
+    []
+    member inline _.alignItemsInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("align-items", "inherit")
 
-    /// Sets this property to its default value.
-    []
-    member inline _.minHeightInitial([] comb: CombineKeyValue) = comb &>> ("min-height", "initial")
+    /// Sets the alignment of items inside the container using a CSS string value (e.g. "center", "var(--align-items)").
+    []
+    member inline _.alignItems([] comb: CombineKeyValue, value: string) =
+        comb &>> ("align-items", value)
 
-    /// The intrinsic preferred height.
-    []
-    member inline _.minHeightMaxContent([] comb: CombineKeyValue) =
-        comb &>> ("min-height", "max-content")
+    /// Default value. Lines stretch to take up the remaining space.
+    []
+    member inline _.alignContentStretch([] comb: CombineKeyValue) =
+        comb &>> ("align-content", "stretch")
 
-    /// The intrinsic minimum height.
-    []
-    member inline _.minHeightMinContent([] comb: CombineKeyValue) =
-        comb &>> ("min-height", "min-content")
+    /// Lines are packed toward the center of the flex container.
+    []
+    member inline _.alignContentCenter([] comb: CombineKeyValue) = comb &>> ("align-content", "center")
 
-    /// The browser determines the justification algorithm
-    []
-    member inline _.textJustifyAuto([] comb: CombineKeyValue) = comb &>> ("text-justify", "auto")
+    /// Lines are packed toward the start of the flex container.
+    []
+    member inline _.alignContentFlexStart([] comb: CombineKeyValue) =
+        comb &>> ("align-content", "flex-start")
 
-    /// Increases/Decreases the space between words
-    []
-    member inline _.textJustifyInterWord([] comb: CombineKeyValue) =
-        comb &>> ("text-justify", "inter-word")
+    /// Lines are packed toward the end of the flex container.
+    []
+    member inline _.alignContentFlexEnd([] comb: CombineKeyValue) =
+        comb &>> ("align-content", "flex-end")
 
-    /// Increases/Decreases the space between characters
-    []
-    member inline _.textJustifyInterCharacter([] comb: CombineKeyValue) =
-        comb &>> ("text-justify", "inter-character")
+    /// Lines are evenly distributed in the flex container.
+    []
+    member inline _.alignContentSpaceBetween([] comb: CombineKeyValue) =
+        comb &>> ("align-content", "space-between")
 
-    /// Disables justification methods
-    []
-    member inline _.textJustifyNone([] comb: CombineKeyValue) = comb &>> ("text-justify", "none")
+    /// Lines are evenly distributed in the flex container, with half-size spaces on either end.
+    []
+    member inline _.alignContentSpaceAround([] comb: CombineKeyValue) =
+        comb &>> ("align-content", "space-around")
 
     /// Sets this property to its default value.
-    []
-    member inline _.textJustifyInitial([] comb: CombineKeyValue) = comb &>> ("text-justify", "initial")
+    []
+    member inline _.alignContentInitial([] comb: CombineKeyValue) =
+        comb &>> ("align-content", "initial")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.textJustifyInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("text-justify", "inherit")
+    []
+    member inline _.alignContentInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("align-content", "inherit")
 
-    /// Sets the justification method using a CSS string value (e.g. "inter-word", "var(--text-justify)").
-    []
-    member inline _.textJustify([] comb: CombineKeyValue, value: string) =
-        comb &>> ("text-justify", value)
+    /// Sets the alignment of lines inside the container using a CSS string value (e.g. "center", "var(--align-content)").
+    []
+    member inline _.alignContent([] comb: CombineKeyValue, value: string) =
+        comb &>> ("align-content", value)
 
-    /// Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default.
-    []
-    member inline _.whiteSpaceNormal([] comb: CombineKeyValue) = comb &>> ("white-space", "normal")
+    /// The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multicol containers
+    []
+    member inline _.justifyContent([] comb: CombineKeyValue, x: string) =
+        comb &>> ("justify-content", x)
 
-    /// Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line.
-    /// The text continues on the same line until a `
     ` tag is encountered.
-    []
-    member inline _.whiteSpaceNowrap([] comb: CombineKeyValue) = comb &>> ("white-space", "nowrap")
+    /// The items are packed flush to each other toward the start edge of the alignment container in the main axis.
+    []
+    member inline _.justifyContentStart([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "start")
 
-    /// Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the 
     tag in HTML.
-    []
-    member inline _.whiteSpacePre([] comb: CombineKeyValue) = comb &>> ("white-space", "pre")
-
-    /// Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
-    []
-    member inline _.whiteSpacePreLine([] comb: CombineKeyValue) = comb &>> ("white-space", "pre-line")
-
-    /// Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
-    []
-    member inline _.whiteSpacePreWrap([] comb: CombineKeyValue) = comb &>> ("white-space", "pre-wrap")
-
-    /// Sets this property to its default value.
-    []
-    member inline _.whiteSpaceInitial([] comb: CombineKeyValue) = comb &>> ("white-space", "initial")
-
-    /// Inherits this property from its parent element.
-    []
-    member inline _.whiteSpaceInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("white-space", "inherit")
+    /// The items are packed flush to each other toward the end edge of the alignment container in the main axis.
+    []
+    member inline _.justifyContentEnd([] comb: CombineKeyValue) = comb &>> ("justify-content", "end")
 
-    /// Sets how white space is handled using a CSS string value (e.g. "pre-wrap", "var(--white-space)").
-    []
-    member inline _.whiteSpace([] comb: CombineKeyValue, value: string) =
-        comb &>> ("white-space", value)
+    /// The items are packed flush to each other toward the start edge of the alignment container on the flex container's main-start side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like start.
+    []
+    member inline _.justifyContentFlexStart([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "flex-start")
 
-    /// Default value. Uses default line break rules.
-    []
-    []
-    member inline _.wordbreakNormal([] comb: CombineKeyValue) = comb &>> ("word-break", "normal")
+    /// The items are packed flush to each other at the end edge of the alignment container on the flex container's main-end side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like end.
+    []
+    member inline _.justifyContentFlexEnd([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "flex-end")
 
-    /// Sets whether line breaks appear wherever the text would otherwise overflow its content box.
-    []
-    member inline _.wordBreakNormal([] comb: CombineKeyValue) = comb &>> ("word-break", "normal")
+    /// The items are packed flush to each other toward the center of the alignment container along the main axis.
+    []
+    member inline _.justifyContentCenter([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "center")
 
-    /// To prevent overflow, word may be broken at any character
-    []
-    []
-    member inline _.wordbreakBreakAll([] comb: CombineKeyValue) = comb &>> ("word-break", "break-all")
+    /// The items are packed flush to each other toward the left edge of the alignment container. When the property's horizontal axis is not parallel with the inline axis, such as when flex-direction: column; is set, this value behaves like start.
+    []
+    member inline _.justifyContentLeft([] comb: CombineKeyValue) = comb &>> ("justify-content", "left")
 
-    /// Word breaks may be inserted between any two characters.
-    []
-    member inline _.wordBreakBreakAll([] comb: CombineKeyValue) = comb &>> ("word-break", "break-all")
+    /// The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis (in a grid container) or the main-axis (in a flexbox container), this value behaves like start.
+    []
+    member inline _.justifyContentRight([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "right")
 
-    /// Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value "normal")
-    []
-    []
-    member inline _.wordbreakKeepAll([] comb: CombineKeyValue) = comb &>> ("word-break", "keep-all")
+    /// Behaves as stretch, except in the case of multi-column containers with a non-auto column-width, in which case the columns take their specified column-width rather than stretching to fill the container. As stretch behaves as start in flex containers, normal also behaves as start.
+    []
+    member inline _.justifyContentNormal([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "normal")
 
-    /// Word breaks should not be used for Chinese/Japanese/Korean (CJK) text.
-    []
-    member inline _.wordBreakKeepAll([] comb: CombineKeyValue) = comb &>> ("word-break", "keep-all")
+    /// The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
+    []
+    member inline _.justifyContentSpaceBetween([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "space-between")
 
-    /// To prevent overflow, word may be broken at arbitrary points.
-    []
-    []
-    member inline _.wordbreakBreakWord([] comb: CombineKeyValue) = comb &>> ("word-break", "break-word")
+    /// The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items. If there is only one item, it will be centered.
+    []
+    member inline _.justifyContentSpaceAround([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "space-around")
 
-    /// Allows unbreakable words to be broken.
-    []
-    member inline _.wordBreakBreakWord([] comb: CombineKeyValue) = comb &>> ("word-break", "break-word")
+    /// The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
+    []
+    member inline _.justifyContentSpaceEvenly([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "space-evenly")
 
-    /// Sets this property to its default value.
-    []
-    []
-    member inline _.wordbreakInitial([] comb: CombineKeyValue) = comb &>> ("word-break", "initial")
+    /// If the combined size of the items along the main axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.
+    []
+    member inline _.justifyContentStretch([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "stretch")
 
     /// Sets this property to its default value.
-    []
-    member inline _.wordBreakInitial([] comb: CombineKeyValue) = comb &>> ("word-break", "initial")
-
-    /// Inherits this property from its parent element.
-    []
-    []
-    member inline _.wordbreakInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("word-break", "inherit")
+    []
+    member inline _.justifyContentInitial([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "initial")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.wordBreakInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("word-break", "inherit")
+    []
+    member inline _.justifyContentInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("justify-content", "inherit")
 
-    /// Sets line breaking rules for words using a CSS string value (e.g. "break-all", "var(--word-break)").
-    []
-    member inline _.wordBreak([] comb: CombineKeyValue, value: string) = comb &>> ("word-break", value)
+    /// The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
+    []
+    member inline _.justifyItems([] comb: CombineKeyValue, x: string) = comb &>> ("justify-items", x)
 
-    /// Allows a straight jump "scroll effect" between elements within the scrolling box. This is default
-    []
-    member inline _.scrollBehaviorAuto([] comb: CombineKeyValue) = comb &>> ("scroll-behavior", "auto")
+    /// The effect of this keyword is dependent of the layout mode we are in:
+    /// In block-level layouts, the keyword is a synonym of start.
+    /// In absolutely-positioned layouts, the keyword behaved like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
+    /// In table cell layouts, this keyword has no meaning as this property is ignored.
+    /// In flexbox layouts, this keyword has no meaning as this property is ignored.
+    /// In grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic size where it behaves like start.
+    []
+    member inline _.justifyItemsNormal([] comb: CombineKeyValue) = comb &>> ("justify-items", "normal")
 
-    /// Allows a smooth animated "scroll effect" between elements within the scrolling box.
-    []
-    member inline _.scrollBehaviorSmooth([] comb: CombineKeyValue) =
-        comb &>> ("scroll-behavior", "smooth")
+    /// The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis
+    []
+    member inline _.justifyItemsStart([] comb: CombineKeyValue) = comb &>> ("justify-items", "start")
 
-    /// Sets this property to its default value.
-    []
-    member inline _.scrollBehaviorInitial([] comb: CombineKeyValue) =
-        comb &>> ("scroll-behavior", "initial")
+    /// The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.
+    []
+    member inline _.justifyItemsEnd([] comb: CombineKeyValue) = comb &>> ("justify-items", "end")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.scrollBehaviorInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("scroll-behavior", "inherit")
+    /// For items that are not children of a flex container, this value is treated like start.
+    []
+    member inline _.justifyItemsFlexStart([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "flex-start")
 
-    /// Sets the scroll behavior using a CSS string value (e.g. "smooth", "var(--scroll-behavior)").
-    []
-    member inline _.scrollBehavior([] comb: CombineKeyValue, value: string) =
-        comb &>> ("scroll-behavior", value)
+    /// For items that are not children of a flex container, this value is treated like end.
+    []
+    member inline _.justifyItemsFlexEnd([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "flex-end")
 
-    /// The content is not clipped, and it may be rendered outside the left and right edges. This is default.
-    []
-    member inline _.overflowVisible([] comb: CombineKeyValue) = comb &>> ("overflow", "visibile")
+    /// The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
+    []
+    member inline _.justifyItemsSelfStart([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "self-start")
 
-    /// The content is clipped - and no scrolling mechanism is provided.
-    []
-    member inline _.overflowHidden([] comb: CombineKeyValue) = comb &>> ("overflow", "hidden")
+    /// The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
+    []
+    member inline _.justifyItemsSelfEnd([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "self-end")
 
-    /// The content is clipped and a scrolling mechanism is provided.
-    []
-    member inline _.overflowScroll([] comb: CombineKeyValue) = comb &>> ("overflow", "scroll")
+    /// The items are packed flush to each other toward the center of the alignment container.
+    []
+    member inline _.justifyItemsCenter([] comb: CombineKeyValue) = comb &>> ("justify-items", "center")
 
-    /// Should cause a scrolling mechanism to be provided for overflowing boxes
-    []
-    member inline _.overflowAuto([] comb: CombineKeyValue) = comb &>> ("overflow", "auto")
+    /// The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like start.
+    []
+    member inline _.justifyItemsLeft([] comb: CombineKeyValue) = comb &>> ("justify-items", "left")
 
-    /// Sets this property to its default value.
-    []
-    member inline _.overflowInitial([] comb: CombineKeyValue) = comb &>> ("overflow", "initial")
+    /// The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like start.
+    []
+    member inline _.justifyItemsRight([] comb: CombineKeyValue) = comb &>> ("justify-items", "right")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.overflowInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("overflow", "inherit")
+    /// Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for first baseline is start, the one for last baseline is end.
+    []
+    member inline _.justifyItemsBaseline([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "baseline")
 
-    /// Sets the overflow behavior using a CSS string value (e.g. "auto", "hidden scroll", "var(--overflow)").
-    []
-    member inline _.overflow([] comb: CombineKeyValue, value: string) = comb &>> ("overflow", value)
+    ///If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.
+    []
+    []
+    member inline _.justifyItemsStrench([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "stretch")
 
-    /// The content is not clipped, and it may be rendered outside the left and right edges. This is default.
-    []
-    member inline _.overflowXVisible([] comb: CombineKeyValue) = comb &>> ("overflow-x", "visibile")
+    /// The items are stretched to fill the container.
+    []
+    member inline _.justifyItemsStretch([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "stretch")
 
-    /// The content is clipped - and no scrolling mechanism is provided.
-    []
-    member inline _.overflowXHidden([] comb: CombineKeyValue) = comb &>> ("overflow-x", "hidden")
+    /// In the case of anchor-positioned elements, aligns the items to the center of the associated anchor element in the inline direction. See Centering on the anchor using anchor-center.
+    []
+    member inline _.justifyItemsAnchorCenter([] comb: CombineKeyValue) =
+        comb &>> ("justify-items", "anchor-center")
 
-    /// The content is clipped and a scrolling mechanism is provided.
-    []
-    member inline _.overflowXScroll([] comb: CombineKeyValue) = comb &>> ("overflow-x", "scroll")
+    /// The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.
+    []
+    member inline _.justifySelf([] comb: CombineKeyValue, x: string) = comb &>> ("justify-self", x)
 
-    /// Should cause a scrolling mechanism to be provided for overflowing boxes
-    []
-    member inline _.overflowXAuto([] comb: CombineKeyValue) = comb &>> ("overflow-x", "auto")
+    /// The effect of this keyword is dependent of the layout mode we are in:
+    /// In block-level layouts, the keyword is a synonym of start.
+    /// In absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
+    /// In table cell layouts, this keyword has no meaning as this property is ignored.
+    /// In flexbox layouts, this keyword has no meaning as this property is ignored.
+    /// In grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic size where it behaves like start.
+    []
+    member inline _.justifySelfNormal([] comb: CombineKeyValue) = comb &>> ("justify-self", "normal")
 
-    /// Sets this property to its default value.
-    []
-    member inline _.overflowXInitial([] comb: CombineKeyValue) = comb &>> ("overflow-x", "initial")
+    /// The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.
+    []
+    member inline _.justifySelfStart([] comb: CombineKeyValue) = comb &>> ("justify-self", "start")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.overflowXInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("overflow-x", "inherit")
+    /// The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.
+    []
+    member inline _.justifySelfEnd([] comb: CombineKeyValue) = comb &>> ("justify-self", "end")
 
-    /// Sets the overflow behavior of the horizontal direction using a CSS string value (e.g. "auto", "var(--overflow-x)").
-    []
-    member inline _.overflowX([] comb: CombineKeyValue, value: string) = comb &>> ("overflow-x", value)
+    /// For items that are not children of a flex container, this value is treated like start.
+    []
+    member inline _.justifySelfFlexStart([] comb: CombineKeyValue) =
+        comb &>> ("justify-self", "flex-start")
 
-    /// The content is not clipped, and it may be rendered outside the left and right edges. This is default.
-    []
-    member inline _.overflowYVisible([] comb: CombineKeyValue) = comb &>> ("overflow-y", "visibile")
+    /// For items that are not children of a flex container, this value is treated like end.
+    []
+    member inline _.justifySelfFlexEnd([] comb: CombineKeyValue) = comb &>> ("justify-self", "flex-end")
 
-    /// The content is clipped - and no scrolling mechanism is provided.
-    []
-    member inline _.overflowYHidden([] comb: CombineKeyValue) = comb &>> ("overflow-y", "hidden")
+    /// The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
+    []
+    member inline _.justifySelfSelfStart([] comb: CombineKeyValue) =
+        comb &>> ("justify-self", "self-start")
 
-    /// The content is clipped and a scrolling mechanism is provided.
-    []
-    member inline _.overflowYScroll([] comb: CombineKeyValue) = comb &>> ("overflow-y", "scroll")
+    /// The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
+    []
+    member inline _.justifySelfSelfEnd([] comb: CombineKeyValue) = comb &>> ("justify-self", "self-end")
 
-    /// Should cause a scrolling mechanism to be provided for overflowing boxes
-    []
-    member inline _.overflowYAuto([] comb: CombineKeyValue) = comb &>> ("overflow-y", "auto")
+    /// The items are packed flush to each other toward the center of the alignment container.
+    []
+    member inline _.justifySelfCenter([] comb: CombineKeyValue) = comb &>> ("justify-self", "center")
 
-    /// Sets this property to its default value.
-    []
-    member inline _.overflowYInitial([] comb: CombineKeyValue) = comb &>> ("overflow-y", "initial")
+    /// The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like start.
+    []
+    member inline _.justifySelfLeft([] comb: CombineKeyValue) = comb &>> ("justify-self", "left")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.overflowYInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("overflow-y", "inherit")
+    /// The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like start.
+    []
+    member inline _.justifySelfRight([] comb: CombineKeyValue) = comb &>> ("justify-self", "right")
 
-    /// Sets the overflow behavior of the vertical direction using a CSS string value (e.g. "auto", "var(--overflow-y)").
-    []
-    member inline _.overflowY([] comb: CombineKeyValue, value: string) = comb &>> ("overflow-y", value)
+    /// Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for first baseline is start, the one for last baseline is end.
+    []
+    member inline _.justifySelfBaseline([] comb: CombineKeyValue) =
+        comb &>> ("justify-self", "baseline")
 
-    /// The element is hidden (but still takes up space).
-    []
-    member inline _.visibilityHidden([] comb: CombineKeyValue) = comb &>> ("visibility", "hidden")
+    /// If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.
+    []
+    []
+    member inline _.justifySelfStrench([] comb: CombineKeyValue) = comb &>> ("justify-self", "stretch")
 
-    /// Default value. The element is visible.
-    []
-    member inline _.visibilityVisible([] comb: CombineKeyValue) = comb &>> ("visibility", "visible")
+    /// The item is stretched to fill the container.
+    []
+    member inline _.justifySelfStretch([] comb: CombineKeyValue) = comb &>> ("justify-self", "stretch")
 
-    /// Only for table rows (`
     `), row groups (` `), columns (``), column groups
-    /// (``). This value removes a row or column, but it does not affect the table layout.
-    /// The space taken up by the row or column will be available for other content.
-    ///
-    /// If collapse is used on other elements, it renders as "hidden")
-    []
-    member inline _.visibilityCollapse([] comb: CombineKeyValue) = comb &>> ("visibility", "collapse")
+    /// In the case of anchor-positioned elements, aligns the item to the center of the associated anchor element in the inline direction. See Centering on the anchor using anchor-center.
+    []
+    member inline _.justifySelfAnchorCenter([] comb: CombineKeyValue) =
+        comb &>> ("justify-self", "anchor-center")
 
-    /// Sets this property to its default value.
-    []
-    member inline _.visibilityInitial([] comb: CombineKeyValue) = comb &>> ("visibility", "initial")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.visibilityInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("visibility", "inherit")
 
-    /// Sets the visibility of an element using a CSS string value (e.g. "hidden", "var(--visibility)").
-    []
-    member inline _.visibility([] comb: CombineKeyValue, value: string) = comb &>> ("visibility", value)
 
-    /// Default value. The length is equal to the length of the flexible item. If the item has
-    /// no length specified, the length will be according to its content.
-    []
-    member inline _.flexBasisAuto([] comb: CombineKeyValue) = comb &>> ("flex-basis", "auto")
+    // --------------------------------------------------------------------
+    // Animation styles
+    // --------------------------------------------------------------------
 
-    /// Sets this property to its default value.
-    []
-    member inline _.flexBasisInitial([] comb: CombineKeyValue) = comb &>> ("flex-basis", "initial")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.flexBasisInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("flex-basis", "inherit")
+    /// Specifies a shorthand for all the animation properties. Accepts a CSS animation string (e.g. "slidein 3s ease-in 1s infinite reverse both paused").
+    []
+    member inline _.animation([] comb: CombineKeyValue, x: string) = comb &>> ("animation", x)
 
-    /// Default value. The flexible items are displayed horizontally, as a row
-    []
-    member inline _.flexDirectionRow([] comb: CombineKeyValue) = comb &>> ("flex-direction", "row")
+    /// Default value. Specifies a animation effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)).
+    []
+    member inline _.animationTimingFunctionEase([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "ease")
 
-    /// Same as row, but in reverse order.
-    []
-    member inline _.flexDirectionRowReverse([] comb: CombineKeyValue) =
-        comb &>> ("flex-direction", "row-reverse")
+    /// Specifies a animation effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)))
+    []
+    member inline _.animationTimingFunctionLinear([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "linear")
 
-    /// The flexible items are displayed vertically, as a column
-    []
-    member inline _.flexDirectionColumn([] comb: CombineKeyValue) =
-        comb &>> ("flex-direction", "column")
+    /// Specifies a animation effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)).
+    []
+    member inline _.animationTimingFunctionEaseIn([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "ease-in")
 
-    /// Same as column, but in reverse order
-    []
-    member inline _.flexDirectionColumnReverse([] comb: CombineKeyValue) =
-        comb &>> ("flex-direction", "column-reverse")
+    /// Specifies a animation effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)).
+    []
+    member inline _.animationTimingFunctionEaseOut([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "ease-out")
 
-    /// Sets this property to its default value.
-    []
-    member inline _.flexDirectionInitial([] comb: CombineKeyValue) =
-        comb &>> ("flex-direction", "initial")
+    /// Specifies a animation effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)))
+    []
+    member inline _.animationTimingFunctionEaseInOut([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "ease-in-out")
+
+    /// Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
+    []
+    member inline _.animationTimingFunctionCubicBezier
+        ([] comb: CombineKeyValue, n1: float, n2: float, n3: float, n4: float)
+        =
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("animation-timing-function: ")
+                .Append("cubic-bezier(")
+                .Append(n1)
+                .Append(",")
+                .Append(n2)
+                .Append(",")
+                .Append(n3)
+                .Append(",")
+                .Append(n4)
+                .Append("); "))
+
+    /// Sets this property to its default value)
+    []
+    member inline _.animationTimingFunctionInitial([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "initial")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.flexDirectionInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("flex-direction", "inherit")
+    []
+    member inline _.animationTimingFunctionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "inherit")
 
-    /// Sets the direction of flexible items using a CSS string value (e.g. "row", "var(--flex-direction)").
-    []
-    member inline _.flexDirection([] comb: CombineKeyValue, value: string) =
-        comb &>> ("flex-direction", value)
+    /// Sets the animation timing function using a CSS string value (e.g. "ease-in", "cubic-bezier(0.1,0.7,1,0.1)", "var(--animation-timing)").
+    []
+    member inline _.animationTimingFunction([] comb: CombineKeyValue, value: string) =
+        comb &>> ("animation-timing-function", value)
 
-    /// Default value. Specifies that the flexible items will not wrap.
-    []
-    member inline _.flexWrapNowrap([] comb: CombineKeyValue) = comb &>> ("flex-wrap", "nowrap")
+    /// Default value. The animation should be played as normal
+    []
+    member inline _.animationDirectionNormal([] comb: CombineKeyValue) =
+        comb &>> ("animation-direction", "normal")
 
-    /// Specifies that the flexible items will wrap if necessary
-    []
-    member inline _.flexWrapWrap([] comb: CombineKeyValue) = comb &>> ("flex-wrap", "wrap")
+    /// The animation should play in reverse direction
+    []
+    member inline _.animationDirectionReverse([] comb: CombineKeyValue) =
+        comb &>> ("animation-direction", "reverse")
 
-    /// Specifies that the flexible items will wrap, if necessary, in reverse order
-    []
-    member inline _.flexWrapWrapReverse([] comb: CombineKeyValue) =
-        comb &>> ("flex-wrap", "wrap-reverse")
+    /// The animation will be played as normal every odd time (1, 3, 5, etc..) and in reverse direction every even time (2, 4, 6, etc...).
+    []
+    member inline _.animationDirectionAlternate([] comb: CombineKeyValue) =
+        comb &>> ("animation-direction", "alternate")
 
-    /// Sets this property to its default value.
-    []
-    member inline _.flexWrapInitial([] comb: CombineKeyValue) = comb &>> ("flex-wrap", "initial")
+    /// The animation will be played in reverse direction every odd time (1, 3, 5, etc..) and in a normal direction every even time (2,4,6,etc...))
+    []
+    member inline _.animationDirectionAlternateReverse([] comb: CombineKeyValue) =
+        comb &>> ("animation-direction", "alternate-reverse")
+
+    /// Sets this property to its default value)
+    []
+    member inline _.animationDirectionInitial([] comb: CombineKeyValue) =
+        comb &>> ("animation-direction", "initial")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.flexWrapInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("flex-wrap", "inherit")
+    []
+    member inline _.animationDirectionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("animation-direction", "inherit")
 
-    /// Sets whether flexible items wrap using a CSS string value (e.g. "wrap", "var(--flex-wrap)").
-    []
-    member inline _.flexWrap([] comb: CombineKeyValue, value: string) = comb &>> ("flex-wrap", value)
+    /// Sets the animation direction using a CSS string value (e.g. "alternate", "var(--animation-direction)").
+    []
+    member inline _.animationDirection([] comb: CombineKeyValue, value: string) =
+        comb &>> ("animation-direction", value)
 
-    /// The element must float on the left side of its containing block.
-    []
-    []
-    member inline _.floatLeft([] comb: CombineKeyValue) = comb &>> ("float", "left")
+    /// Default value. Specifies that the animation is running.
+    []
+    member inline _.animationPlayStateRunning([] comb: CombineKeyValue) =
+        comb &>> ("animation-play-state", "running")
 
-    /// The element must float on the right side of its containing block.
-    []
-    []
-    member inline _.floatRight([] comb: CombineKeyValue) = comb &>> ("float", "right")
+    /// Specifies that the animation is paused
+    []
+    member inline _.animationPlayStatePaused([] comb: CombineKeyValue) =
+        comb &>> ("animation-play-state", "paused")
 
-    /// The element must not float.
-    []
-    []
-    member inline _.floatNone([] comb: CombineKeyValue) = comb &>> ("float", "none")
+    /// Sets this property to its default value)
+    []
+    member inline _.animationPlayStateInitial([] comb: CombineKeyValue) =
+        comb &>> ("animation-play-state", "initial")
 
-    /// The font display strategy is defined by the user agent.
-    ///
-    /// Default value)
-    []
-    member inline _.fontDisplayAuto([] comb: CombineKeyValue) = comb &>> ("font-display", "auto")
+    /// Inherits this property from its parent element.
+    []
+    member inline _.animationPlayStateInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("animation-play-state", "inherit")
 
-    /// Gives the font face a short block period and an infinite swap period.
-    []
-    member inline _.fontDisplayBlock([] comb: CombineKeyValue) = comb &>> ("font-display", "block")
-
-    /// Gives the font face an extremely small block period and an infinite swap period.
-    []
-    member inline _.fontDisplaySwap([] comb: CombineKeyValue) = comb &>> ("font-display", "swap")
+    /// Sets whether the animation is running using a CSS string value (e.g. "paused", "var(--animation-play-state)").
+    []
+    member inline _.animationPlayState([] comb: CombineKeyValue, value: string) =
+        comb &>> ("animation-play-state", value)
 
-    /// Gives the font face an extremely small block period and a short swap period.
-    []
-    member inline _.fontDisplayFallback([] comb: CombineKeyValue) =
-        comb &>> ("font-display", "fallback")
+    /// Specifies that the animation should be played infinite times (forever))
+    []
+    member inline _.animationIterationCountInfinite([] comb: CombineKeyValue) =
+        comb &>> ("animation-iteration-count", "infinite")
 
-    /// Gives the font face an extremely small block period and no swap period.
-    []
-    member inline _.fontDisplayOptional([] comb: CombineKeyValue) =
-        comb &>> ("font-display", "optional")
+    /// Sets this property to its default value)
+    []
+    member inline _.animationIterationCountInitial([] comb: CombineKeyValue) =
+        comb &>> ("animation-iteration-count", "initial")
 
-    /// Default. The browser determines whether font kerning should be applied or not
-    []
-    member inline _.fontKerningAuto([] comb: CombineKeyValue) = comb &>> ("font-kerning", "auto")
+    /// Inherits this property from its parent element.
+    []
+    member inline _.animationIterationCountInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("animation-iteration-count", "inherit")
 
-    /// Specifies that font kerning is applied
-    []
-    member inline _.fontKerningNormal([] comb: CombineKeyValue) = comb &>> ("font-kerning", "normal")
+    /// Sets the number of times the animation runs using a CSS string value (e.g. "infinite", "var(--animation-count)").
+    []
+    member inline _.animationIterationCount([] comb: CombineKeyValue, value: string) =
+        comb &>> ("animation-iteration-count", value)
 
-    /// Specifies that font kerning is not applied
-    []
-    member inline _.fontKerningNone([] comb: CombineKeyValue) = comb &>> ("font-kerning", "none")
+    /// Default value. Animation will not apply any styles to the element before or after it is executing
+    []
+    member inline _.animationFillModeNone([] comb: CombineKeyValue) =
+        comb &>> ("animation-fill-mode", "none")
 
-    /// Sets the font kerning using a CSS string value (e.g. "auto", "var(--font-kerning)").
-    []
-    member inline _.fontKerning([] comb: CombineKeyValue, value: string) =
-        comb &>> ("font-kerning", value)
+    /// The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count).
+    []
+    member inline _.animationFillModeForwards([] comb: CombineKeyValue) =
+        comb &>> ("animation-fill-mode", "forwards")
 
-    /// Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold.
-    /// Possible values are [100, 200, 300, 400, 500, 600, 700, 800, 900]
-    []
-    member inline _.fontWeight([] comb: CombineKeyValue, weight: int) =
-        comb &&& mkWithKV ("font-weight", weight)
+    /// The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
+    []
+    member inline _.animationFillModeBackwards([] comb: CombineKeyValue) =
+        comb &>> ("animation-fill-mode", "backwards")
 
-    /// Defines font weight using a CSS string value (e.g. "bold", "var(--font-weight-strong)").
-    []
-    member inline _.fontWeight([] comb: CombineKeyValue, weight: string) =
-        comb &>> ("font-weight", weight)
+    /// The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
+    []
+    member inline _.animationFillModeBoth([] comb: CombineKeyValue) =
+        comb &>> ("animation-fill-mode", "both")
 
-    /// Defines normal characters. This is default.
-    []
-    member inline _.fontWeightNormal([] comb: CombineKeyValue) = comb &>> ("font-weight", "normal")
+    /// Sets this property to its default value)
+    []
+    member inline _.animationFillModeInitial([] comb: CombineKeyValue) =
+        comb &>> ("animation-fill-mode", "initial")
 
-    /// Defines thick characters.
-    []
-    member inline _.fontWeightBold([] comb: CombineKeyValue) = comb &>> ("font-weight", "bold")
+    /// Inherits this property from its parent element
+    []
+    member inline _.animationFillModeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("animation-fill-mode", "inherit")
 
-    /// Defines thicker characters
-    []
-    member inline _.fontWeightBolder([] comb: CombineKeyValue) = comb &>> ("font-weight", "bolder")
+    /// Sets the animation fill mode using a CSS string value (e.g. "both", "var(--animation-fill-mode)").
+    []
+    member inline _.animationFillMode([] comb: CombineKeyValue, value: string) =
+        comb &>> ("animation-fill-mode", value)
 
-    /// Defines lighter characters.
-    []
-    member inline _.fontWeightLighter([] comb: CombineKeyValue) = comb &>> ("font-weight", "lighter")
+    /// Sets one or more animations to apply to an element. Each name is an @keyframes at-rule that
+    /// sets the property values for the animation sequence.
+    []
+    member inline _.animationName([] comb: CombineKeyValue, keyframeName: string) =
+        comb &>> ("animation-name", keyframeName)
 
-    /// Sets this property to its default value.
-    []
-    member inline _.fontWeightInitial([] comb: CombineKeyValue) = comb &>> ("font-weight", "initial")
+    /// Sets the length of time that an animation takes to complete one cycle.
+    []
+    member inline _.animationDuration([] comb: CombineKeyValue, timespan: TimeSpan) =
+        comb &>> ("animation-duration", string timespan.TotalMilliseconds + "ms")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.fontWeightInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("font-weight", "inherit")
+    /// Sets the length of time that an animation takes to complete one cycle.
+    []
+    member inline _.animationDuration([] comb: CombineKeyValue, seconds: int) =
+        comb &>> ("animation-duration", string seconds + "s")
 
-    /// Sets the spacing between text characters.
-    []
-    member inline _.letterSpacing([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("letter-spacing", value)
+    /// Sets when an animation starts.
+    ///
+    /// The animation can start later, immediately from its beginning, or immediately and partway through the animation.
+    []
+    member inline _.animationDelay([] comb: CombineKeyValue, timespan: TimeSpan) =
+        comb &>> ("animation-delay", string timespan.TotalMilliseconds + "ms")
 
-    /// Sets the spacing between text characters.
-    []
-    member inline _.letterSpacing([] comb: CombineKeyValue, value: string) =
-        comb &>> ("letter-spacing", value)
+    /// Sets when an animation starts.
+    ///
+    /// The animation can start later, immediately from its beginning, or immediately and partway through the animation.
+    []
+    member inline _.animationDelay([] comb: CombineKeyValue, seconds: int) =
+        comb &>> ("animation-delay", string seconds + "s")
 
-    /// Specifies the default letter spacing for the current font.
-    []
-    member inline _.letterSpacingNormal([] comb: CombineKeyValue) =
-        comb &>> ("letter-spacing", "normal")
+    /// The number of times the animation runs.
+    []
+    []
+    member inline _.animationDurationCount([] comb: CombineKeyValue, count: int) =
+        comb &&& mkWithKV ("animation-iteration-count", count)
 
-    /// Sets this property to its default value.
-    []
-    member inline _.letterSpacingInitial([] comb: CombineKeyValue) =
-        comb &>> ("letter-spacing", "initial")
+    /// The number of times the animation runs.
+    []
+    member inline _.animationIterationCount([] comb: CombineKeyValue, count: int) =
+        comb &&& mkWithKV ("animation-iteration-count", count)
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.letterSpacingInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("letter-spacing", "inherit")
 
-    /// The browser displays a normal font style. This is defaut.
-    []
-    member inline _.fontStyleNormal([] comb: CombineKeyValue) = comb &>> ("font-style", "normal")
 
-    /// The browser displays an italic font style.
-    []
-    member inline _.fontStyleItalic([] comb: CombineKeyValue) = comb &>> ("font-style", "italic")
 
-    /// The browser displays an oblique font style.
-    []
-    member inline _.fontStyleOblique([] comb: CombineKeyValue) = comb &>> ("font-style", "oblique")
+    // --------------------------------------------------------------------
+    // Background styles
+    // --------------------------------------------------------------------
 
-    /// Sets this property to its default value.
-    []
-    member inline _.fontStyleInitial([] comb: CombineKeyValue) = comb &>> ("font-style", "initial")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.fontStyleInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("font-style", "inherit")
+    /// Attaches one or more shadows to an element. Accepts a CSS box-shadow string (e.g. "2px 4px 8px rgba(0,0,0,0.2)"; multiple shadows can be separated by commas).
+    []
+    member inline _.boxShadow([] comb: CombineKeyValue, value: string) = comb &>> ("box-shadow", value)
 
-    /// Sets the font style using a CSS string value (e.g. "italic", "var(--font-style)").
-    []
-    member inline _.fontStyle([] comb: CombineKeyValue, value: string) = comb &>> ("font-style", value)
+    /// Attaches a shadow with the given horizontal and vertical offsets (in pixels) and color.
+    []
+    member inline _.boxShadow
+        ([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, color: string)
+        =
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("box-shadow: ")
+                .Append(horizontalOffset)
+                .Append("px ")
+                .Append(verticalOffset)
+                .Append("px ")
+                .Append(color)
+                .Append("; "))
 
-    /// The browser displays a normal font. This is default
-    []
-    member inline _.fontVariantNormal([] comb: CombineKeyValue) = comb &>> ("font-variant", "normal")
+    /// Attaches a shadow with the given horizontal offset, vertical offset, and blur radius (all in pixels), plus a color.
+    []
+    member inline _.boxShadow
+        ([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, blur: int, color: string)
+        =
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("box-shadow: ")
+                .Append(horizontalOffset)
+                .Append("px ")
+                .Append(verticalOffset)
+                .Append("px ")
+                .Append(blur)
+                .Append("px ")
+                .Append(color)
+                .Append("; "))
 
-    /// The browser displays a small-caps font
-    []
-    member inline _.fontVariantSmallCaps([] comb: CombineKeyValue) =
-        comb &>> ("font-variant", "small-caps")
+    /// Attaches a shadow with the given horizontal offset, vertical offset, blur radius, and spread radius (all in pixels), plus a color.
+    []
+    member inline _.boxShadow
+        (
+            [] comb: CombineKeyValue,
+            horizontalOffset: int,
+            verticalOffset: int,
+            blur: int,
+            spread: int,
+            color: string
+        ) =
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("box-shadow: ")
+                .Append(horizontalOffset)
+                .Append("px ")
+                .Append(verticalOffset)
+                .Append("px ")
+                .Append(blur)
+                .Append("px ")
+                .Append(spread)
+                .Append("px ")
+                .Append(color)
+                .Append("; "))
 
-    /// Sets this property to its default value.
-    []
-    member inline _.fontVariantInitial([] comb: CombineKeyValue) = comb &>> ("font-variant", "initial")
+    /// Removes the box shadow from an element.
+    []
+    member inline _.boxShadowNone([] comb: CombineKeyValue) = comb &>> ("box-shadow", "none")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.fontVariantInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("font-variant", "inherit")
+    []
+    member inline _.boxShadowInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("box-shadow", "inherit")
 
-    /// Sets the font variant using a CSS string value (e.g. "small-caps", "var(--font-variant)").
-    []
-    member inline _.fontVariant([] comb: CombineKeyValue, value: string) =
-        comb &>> ("font-variant", value)
-
-    /// Break words only at allowed break points
-    []
-    member inline _.wordWrapNormal([] comb: CombineKeyValue) = comb &>> ("word-wrap", "normal")
-
-    /// Allows unbreakable words to be broken
-    []
-    member inline _.wordWrapBreakWord([] comb: CombineKeyValue) = comb &>> ("word-wrap", "break-word")
+    /// Sets the size of the element's background image.
+    ///
+    /// The image can be left to its natural size, stretched, or constrained to fit the available space.
+    []
+    member inline _.backgroundSize([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-size", value)
 
-    /// Sets this property to its default value.
-    []
-    member inline _.wordWrapInitial([] comb: CombineKeyValue) = comb &>> ("word-wrap", "initial")
+    /// Sets the size of the element's background image.
+    ///
+    /// The image can be left to its natural size, stretched, or constrained to fit the available space.
+    []
+    member inline _.backgroundSize([] comb: CombineKeyValue, width: string, height: string) =
+        comb
+        &&& CombineKeyValue(fun sb ->
+            sb.Append("background-size: ").Append(width).Append(" ").Append(height).Append("; "))
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.wordWrapInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("word-wrap", "inherit")
+    /// Default value. The background image is displayed in its original size
+    ///
+    /// See [example here](https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=auto))
+    []
+    member inline _.backgroundSizeAuto([] comb: CombineKeyValue) = comb &>> ("background-size", "auto")
 
-    /// Sets the word wrapping behavior using a CSS string value (e.g. "break-word", "var(--word-wrap)").
-    []
-    member inline _.wordWrap([] comb: CombineKeyValue, value: string) = comb &>> ("word-wrap", value)
+    /// Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
+    ///
+    /// See [example here](https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover))
+    []
+    member inline _.backgroundSizeCover([] comb: CombineKeyValue) =
+        comb &>> ("background-size", "cover")
 
-    /// Default. The element inherits its parent container's align-items property, or "stretch" if it has no parent container.
-    []
-    member inline _.alignSelfAuto([] comb: CombineKeyValue) = comb &>> ("align-self", "auto")
+    /// Resize the background image to make sure the image is fully visible
+    ///
+    /// See [example here](https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain))
+    []
+    member inline _.backgroundSizeContain([] comb: CombineKeyValue) =
+        comb &>> ("background-size", "contain")
 
-    /// The element is positioned to fit the container
-    []
-    member inline _.alignSelfStretch([] comb: CombineKeyValue) = comb &>> ("align-self", "stretch")
+    /// Sets this property to its default value.
+    []
+    member inline _.backgroundSizeInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-size", "initial")
 
-    /// The element is positioned at the center of the container
-    []
-    member inline _.alignSelfCenter([] comb: CombineKeyValue) = comb &>> ("align-self", "center")
+    /// Inherits this property from its parent element.
+    []
+    member inline _.backgroundSizeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("background-size", "inherit")
 
-    /// The element is positioned at the beginning of the container
-    []
-    member inline _.alignSelfFlexStart([] comb: CombineKeyValue) = comb &>> ("align-self", "flex-start")
+    /// Sets the initial position for each background image.
+    ///
+    /// The position is relative to the position layer set by background-origin.
+    []
+    member inline _.backgroundPosition([] comb: CombineKeyValue, position: string) =
+        comb &>> ("background-position", position)
 
-    /// The element is positioned at the end of the container
-    []
-    member inline _.alignSelfFlexEnd([] comb: CombineKeyValue) = comb &>> ("align-self", "flex-end")
+    /// The background image will scroll with the page. This is default.
+    []
+    member inline _.backgroundPositionScroll([] comb: CombineKeyValue) =
+        comb &>> ("background-position", "scroll")
 
-    /// The element is positioned at the baseline of the container
-    []
-    member inline _.alignSelfBaseline([] comb: CombineKeyValue) = comb &>> ("align-self", "baseline")
+    /// The background image will not scroll with the page.
+    []
+    member inline _.backgroundPositionFixedNoScroll([] comb: CombineKeyValue) =
+        comb &>> ("background-position", "fixed")
 
-    /// Sets this property to its default value)
-    []
-    member inline _.alignSelfInitial([] comb: CombineKeyValue) = comb &>> ("align-self", "initial")
+    /// The background image will scroll with the element's contents.
+    []
+    member inline _.backgroundPositionLocal([] comb: CombineKeyValue) =
+        comb &>> ("background-position", "local")
 
-    /// Inherits this property from its parent element
-    []
-    member inline _.alignSelfInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("align-self", "inherit")
+    /// Sets this property to its default value.
+    []
+    member inline _.backgroundPositionInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-position", "initial")
 
-    /// Sets the alignment of the item inside its container using a CSS string value (e.g. "center", "var(--align-self)").
-    []
-    member inline _.alignSelf([] comb: CombineKeyValue, value: string) = comb &>> ("align-self", value)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.backgroundPositionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("background-position", "inherit")
 
-    /// Default. Items are stretched to fit the container
-    []
-    member inline _.alignItemsStretch([] comb: CombineKeyValue) = comb &>> ("align-items", "stretch")
+    /// This is default. Sets the blending mode to normal.
+    []
+    member inline _.backgroundBlendModeNormal([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "normal")
 
-    /// Items are positioned at the center of the container
-    []
-    member inline _.alignItemsCenter([] comb: CombineKeyValue) = comb &>> ("align-items", "center")
+    /// Sets the blending mode to screen
+    []
+    member inline _.backgroundBlendModeScreen([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "screen")
 
-    /// Items are positioned at the beginning of the container
-    []
-    member inline _.alignItemsFlexStart([] comb: CombineKeyValue) =
-        comb &>> ("align-items", "flex-start")
+    /// Sets the blending mode to overlay
+    []
+    member inline _.backgroundBlendModeOverlay([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "overlay")
 
-    /// Items are positioned at the end of the container
-    []
-    member inline _.alignItemsFlexEnd([] comb: CombineKeyValue) = comb &>> ("align-items", "flex-end")
+    /// Sets the blending mode to darken
+    []
+    member inline _.backgroundBlendModeDarken([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "darken")
 
-    /// Items are positioned at the baseline of the container
-    []
-    member inline _.alignItemsBaseline([] comb: CombineKeyValue) = comb &>> ("align-items", "baseline")
+    /// Sets the blending mode to multiply
+    []
+    member inline _.backgroundBlendModeLighten([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "lighten")
 
-    /// Sets this property to its default value)
-    []
-    member inline _.alignItemsInitial([] comb: CombineKeyValue) = comb &>> ("align-items", "initial")
+    /// Sets the blending mode to color-dodge
+    []
+    []
+    member inline _.backgroundBlendModeCollorDodge([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "color-dodge")
 
-    /// Inherits this property from its parent element
-    []
-    member inline _.alignItemsInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("align-items", "inherit")
+    /// Sets the blending mode to color-dodge
+    []
+    member inline _.backgroundBlendModeColorDodge([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "color-dodge")
 
-    /// Sets the alignment of items inside the container using a CSS string value (e.g. "center", "var(--align-items)").
-    []
-    member inline _.alignItems([] comb: CombineKeyValue, value: string) =
-        comb &>> ("align-items", value)
+    /// Sets the blending mode to saturation
+    []
+    member inline _.backgroundBlendModeSaturation([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "saturation")
 
-    /// Default value. Lines stretch to take up the remaining space.
-    []
-    member inline _.alignContentStretch([] comb: CombineKeyValue) =
-        comb &>> ("align-content", "stretch")
+    /// Sets the blending mode to color
+    []
+    member inline _.backgroundBlendModeColor([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "color")
 
-    /// Lines are packed toward the center of the flex container.
-    []
-    member inline _.alignContentCenter([] comb: CombineKeyValue) = comb &>> ("align-content", "center")
+    /// Sets the blending mode to luminosity
+    []
+    member inline _.backgroundBlendModeLuminosity([] comb: CombineKeyValue) =
+        comb &>> ("background-blend-mode", "luminosity")
 
-    /// Lines are packed toward the start of the flex container.
-    []
-    member inline _.alignContentFlexStart([] comb: CombineKeyValue) =
-        comb &>> ("align-content", "flex-start")
+    /// Sets the background blending mode using a CSS string value (e.g. "multiply", "var(--background-blend-mode)").
+    []
+    member inline _.backgroundBlendMode([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-blend-mode", value)
 
-    /// Lines are packed toward the end of the flex container.
-    []
-    member inline _.alignContentFlexEnd([] comb: CombineKeyValue) =
-        comb &>> ("align-content", "flex-end")
+    /// Default value. The background extends behind the border.
+    []
+    member inline _.backgroundClipBorderBox([] comb: CombineKeyValue) =
+        comb &>> ("background-clip", "border-box")
 
-    /// Lines are evenly distributed in the flex container.
-    []
-    member inline _.alignContentSpaceBetween([] comb: CombineKeyValue) =
-        comb &>> ("align-content", "space-between")
+    /// The background extends to the inside edge of the border.
+    []
+    member inline _.backgroundClipPaddingBox([] comb: CombineKeyValue) =
+        comb &>> ("background-clip", "padding-box")
 
-    /// Lines are evenly distributed in the flex container, with half-size spaces on either end.
-    []
-    member inline _.alignContentSpaceAround([] comb: CombineKeyValue) =
-        comb &>> ("align-content", "space-around")
+    /// The background extends to the edge of the content box.
+    []
+    member inline _.backgroundClipContentBox([] comb: CombineKeyValue) =
+        comb &>> ("background-clip", "content-box")
 
     /// Sets this property to its default value.
-    []
-    member inline _.alignContentInitial([] comb: CombineKeyValue) =
-        comb &>> ("align-content", "initial")
+    []
+    member inline _.backgroundClipInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-clip", "initial")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.alignContentInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("align-content", "inherit")
-
-    /// Sets the alignment of lines inside the container using a CSS string value (e.g. "center", "var(--align-content)").
-    []
-    member inline _.alignContent([] comb: CombineKeyValue, value: string) =
-        comb &>> ("align-content", value)
+    []
+    member inline _.backgroundClipInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("background-clip", "inherit")
 
-    /// The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multicol containers
-    []
-    member inline _.justifyContent([] comb: CombineKeyValue, x: string) =
-        comb &>> ("justify-content", x)
+    /// Sets how far the background extends using a CSS string value (e.g. "padding-box", "var(--background-clip)").
+    []
+    member inline _.backgroundClip([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-clip", value)
 
-    /// The items are packed flush to each other toward the start edge of the alignment container in the main axis.
-    []
-    member inline _.justifyContentStart([] comb: CombineKeyValue) =
-        comb &>> ("justify-content", "start")
+    /// Sets how background images are repeated.
+    ///
+    /// A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
+    []
+    member inline _.backgroundRepeat([] comb: CombineKeyValue, repeat: string) =
+        comb &>> ("background-repeat", repeat)
 
-    /// The items are packed flush to each other toward the end edge of the alignment container in the main axis.
-    []
-    member inline _.justifyContentEnd([] comb: CombineKeyValue) = comb &>> ("justify-content", "end")
-
-    /// The items are packed flush to each other toward the start edge of the alignment container on the flex container's main-start side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like start.
-    []
-    member inline _.justifyContentFlexStart([] comb: CombineKeyValue) =
-        comb &>> ("justify-content", "flex-start")
-
-    /// The items are packed flush to each other at the end edge of the alignment container on the flex container's main-end side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like end.
-    []
-    member inline _.justifyContentFlexEnd([] comb: CombineKeyValue) =
-        comb &>> ("justify-content", "flex-end")
-
-    /// The items are packed flush to each other toward the center of the alignment container along the main axis.
-    []
-    member inline _.justifyContentCenter([] comb: CombineKeyValue) =
-        comb &>> ("justify-content", "center")
-
-    /// The items are packed flush to each other toward the left edge of the alignment container. When the property's horizontal axis is not parallel with the inline axis, such as when flex-direction: column; is set, this value behaves like start.
-    []
-    member inline _.justifyContentLeft([] comb: CombineKeyValue) = comb &>> ("justify-content", "left")
-
-    /// The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis (in a grid container) or the main-axis (in a flexbox container), this value behaves like start.
-    []
-    member inline _.justifyContentRight([] comb: CombineKeyValue) =
-        comb &>> ("justify-content", "right")
-
-    /// Behaves as stretch, except in the case of multi-column containers with a non-auto column-width, in which case the columns take their specified column-width rather than stretching to fill the container. As stretch behaves as start in flex containers, normal also behaves as start.
-    []
-    member inline _.justifyContentNormal([] comb: CombineKeyValue) =
-        comb &>> ("justify-content", "normal")
-
-    /// The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
-    []
-    member inline _.justifyContentSpaceBetween([] comb: CombineKeyValue) =
-        comb &>> ("justify-content", "space-between")
+    /// The background image is repeated both vertically and horizontally. This is default.
+    []
+    member inline _.backgroundRepeatRepeat([] comb: CombineKeyValue) =
+        comb &>> ("background-repeat", "repeat")
 
-    /// The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items. If there is only one item, it will be centered.
-    []
-    member inline _.justifyContentSpaceAround([] comb: CombineKeyValue) =
-        comb &>> ("justify-content", "space-around")
+    /// The background image is only repeated horizontally.
+    []
+    member inline _.backgroundRepeatRepeatX([] comb: CombineKeyValue) =
+        comb &>> ("background-repeat", "repeat-x")
 
-    /// The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
-    []
-    member inline _.justifyContentSpaceEvenly([] comb: CombineKeyValue) =
-        comb &>> ("justify-content", "space-evenly")
+    /// The background image is only repeated vertically.
+    []
+    member inline _.backgroundRepeatRepeatY([] comb: CombineKeyValue) =
+        comb &>> ("background-repeat", "repeat-y")
 
-    /// If the combined size of the items along the main axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.
-    []
-    member inline _.justifyContentStretch([] comb: CombineKeyValue) =
-        comb &>> ("justify-content", "stretch")
+    /// The background-image is not repeated.
+    []
+    member inline _.backgroundRepeatNoRepeat([] comb: CombineKeyValue) =
+        comb &>> ("background-repeat", "no-repeat")
 
     /// Sets this property to its default value.
-    []
-    member inline _.justifyContentInitial([] comb: CombineKeyValue) =
-        comb &>> ("justify-content", "initial")
+    []
+    member inline _.backgroundRepeatInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-repeat", "initial")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.justifyContentInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("justify-content", "inherit")
-
-    /// The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
-    []
-    member inline _.justifyItems([] comb: CombineKeyValue, x: string) = comb &>> ("justify-items", x)
-
-    /// The effect of this keyword is dependent of the layout mode we are in:
-    /// In block-level layouts, the keyword is a synonym of start.
-    /// In absolutely-positioned layouts, the keyword behaved like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
-    /// In table cell layouts, this keyword has no meaning as this property is ignored.
-    /// In flexbox layouts, this keyword has no meaning as this property is ignored.
-    /// In grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic size where it behaves like start.
-    []
-    member inline _.justifyItemsNormal([] comb: CombineKeyValue) = comb &>> ("justify-items", "normal")
-
-    /// The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis
-    []
-    member inline _.justifyItemsStart([] comb: CombineKeyValue) = comb &>> ("justify-items", "start")
-
-    /// The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.
-    []
-    member inline _.justifyItemsEnd([] comb: CombineKeyValue) = comb &>> ("justify-items", "end")
-
-    /// For items that are not children of a flex container, this value is treated like start.
-    []
-    member inline _.justifyItemsFlexStart([] comb: CombineKeyValue) =
-        comb &>> ("justify-items", "flex-start")
-
-    /// For items that are not children of a flex container, this value is treated like end.
-    []
-    member inline _.justifyItemsFlexEnd([] comb: CombineKeyValue) =
-        comb &>> ("justify-items", "flex-end")
-
-    /// The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
-    []
-    member inline _.justifyItemsSelfStart([] comb: CombineKeyValue) =
-        comb &>> ("justify-items", "self-start")
-
-    /// The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
-    []
-    member inline _.justifyItemsSelfEnd([] comb: CombineKeyValue) =
-        comb &>> ("justify-items", "self-end")
-
-    /// The items are packed flush to each other toward the center of the alignment container.
-    []
-    member inline _.justifyItemsCenter([] comb: CombineKeyValue) = comb &>> ("justify-items", "center")
-
-    /// The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like start.
-    []
-    member inline _.justifyItemsLeft([] comb: CombineKeyValue) = comb &>> ("justify-items", "left")
-
-    /// The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like start.
-    []
-    member inline _.justifyItemsRight([] comb: CombineKeyValue) = comb &>> ("justify-items", "right")
+    []
+    member inline _.backgroundRepeatInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("background-repeat", "inherit")
 
-    /// Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for first baseline is start, the one for last baseline is end.
-    []
-    member inline _.justifyItemsBaseline([] comb: CombineKeyValue) =
-        comb &>> ("justify-items", "baseline")
+    /// Sets the background color of an element.
+    []
+    member inline _.backgroundColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("background-color", color)
 
-    ///If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.
-    []
-    []
-    member inline _.justifyItemsStrench([] comb: CombineKeyValue) =
-        comb &>> ("justify-items", "stretch")
+    /// Sets one or more background images on an element.
+    []
+    member inline _.backgroundImage([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-image", value)
 
-    /// The items are stretched to fill the container.
-    []
-    member inline _.justifyItemsStretch([] comb: CombineKeyValue) =
-        comb &>> ("justify-items", "stretch")
+    /// Short-hand for `style.backgroundImage(sprintf "url('%s')", value)` to set the backround image using a url.
+    []
+    member inline _.backgroundImageUrl([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-image", "url('" + value + "')")
 
-    /// In the case of anchor-positioned elements, aligns the items to the center of the associated anchor element in the inline direction. See Centering on the anchor using anchor-center.
-    []
-    member inline _.justifyItemsAnchorCenter([] comb: CombineKeyValue) =
-        comb &>> ("justify-items", "anchor-center")
+    /// Shorthand for all background properties (e.g. "url(a.png) no-repeat center / cover").
+    []
+    member inline _.background([] comb: CombineKeyValue, value: string) = comb &>> ("background", value)
 
-    /// The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.
-    []
-    member inline _.justifySelf([] comb: CombineKeyValue, x: string) = comb &>> ("justify-self", x)
+    /// Sets whether the background scrolls with the page. Accepts scroll | fixed | local or a CSS variable.
+    []
+    member inline _.backgroundAttachment([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-attachment", value)
 
-    /// The effect of this keyword is dependent of the layout mode we are in:
-    /// In block-level layouts, the keyword is a synonym of start.
-    /// In absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
-    /// In table cell layouts, this keyword has no meaning as this property is ignored.
-    /// In flexbox layouts, this keyword has no meaning as this property is ignored.
-    /// In grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic size where it behaves like start.
-    []
-    member inline _.justifySelfNormal([] comb: CombineKeyValue) = comb &>> ("justify-self", "normal")
+    /// The background scrolls with the page. This is default.
+    []
+    member inline _.backgroundAttachmentScroll([] comb: CombineKeyValue) =
+        comb &>> ("background-attachment", "scroll")
 
-    /// The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.
-    []
-    member inline _.justifySelfStart([] comb: CombineKeyValue) = comb &>> ("justify-self", "start")
+    /// The background is fixed with regard to the viewport.
+    []
+    member inline _.backgroundAttachmentFixed([] comb: CombineKeyValue) =
+        comb &>> ("background-attachment", "fixed")
 
-    /// The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.
-    []
-    member inline _.justifySelfEnd([] comb: CombineKeyValue) = comb &>> ("justify-self", "end")
+    /// The background scrolls with the element's contents.
+    []
+    member inline _.backgroundAttachmentLocal([] comb: CombineKeyValue) =
+        comb &>> ("background-attachment", "local")
 
-    /// For items that are not children of a flex container, this value is treated like start.
-    []
-    member inline _.justifySelfFlexStart([] comb: CombineKeyValue) =
-        comb &>> ("justify-self", "flex-start")
+    /// Sets this property to its default value.
+    []
+    member inline _.backgroundAttachmentInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-attachment", "initial")
 
-    /// For items that are not children of a flex container, this value is treated like end.
-    []
-    member inline _.justifySelfFlexEnd([] comb: CombineKeyValue) = comb &>> ("justify-self", "flex-end")
+    /// Inherits this property from its parent element.
+    []
+    member inline _.backgroundAttachmentInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("background-attachment", "inherit")
+
+    /// Sets the origin of the background. Accepts border-box | padding-box | content-box or a CSS variable.
+    []
+    member inline _.backgroundOrigin([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-origin", value)
+
+    /// The background is relative to the border box.
+    []
+    member inline _.backgroundOriginBorderBox([] comb: CombineKeyValue) =
+        comb &>> ("background-origin", "border-box")
+
+    /// The background is relative to the padding box. This is default.
+    []
+    member inline _.backgroundOriginPaddingBox([] comb: CombineKeyValue) =
+        comb &>> ("background-origin", "padding-box")
+
+    /// The background is relative to the content box.
+    []
+    member inline _.backgroundOriginContentBox([] comb: CombineKeyValue) =
+        comb &>> ("background-origin", "content-box")
 
-    /// The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
-    []
-    member inline _.justifySelfSelfStart([] comb: CombineKeyValue) =
-        comb &>> ("justify-self", "self-start")
+    /// Sets this property to its default value.
+    []
+    member inline _.backgroundOriginInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-origin", "initial")
 
-    /// The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
-    []
-    member inline _.justifySelfSelfEnd([] comb: CombineKeyValue) = comb &>> ("justify-self", "self-end")
+    /// Inherits this property from its parent element.
+    []
+    member inline _.backgroundOriginInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("background-origin", "inherit")
 
-    /// The items are packed flush to each other toward the center of the alignment container.
-    []
-    member inline _.justifySelfCenter([] comb: CombineKeyValue) = comb &>> ("justify-self", "center")
+    /// Sets the horizontal background position (e.g. "left", "10px", "var(--bg-x)").
+    []
+    member inline _.backgroundPositionX([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-position-x", value)
 
-    /// The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like start.
-    []
-    member inline _.justifySelfLeft([] comb: CombineKeyValue) = comb &>> ("justify-self", "left")
+    /// Sets the vertical background position (e.g. "top", "10px", "var(--bg-y)").
+    []
+    member inline _.backgroundPositionY([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-position-y", value)
 
-    /// The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like start.
-    []
-    member inline _.justifySelfRight([] comb: CombineKeyValue) = comb &>> ("justify-self", "right")
 
-    /// Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for first baseline is start, the one for last baseline is end.
-    []
-    member inline _.justifySelfBaseline([] comb: CombineKeyValue) =
-        comb &>> ("justify-self", "baseline")
 
-    /// If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.
-    []
-    []
-    member inline _.justifySelfStrench([] comb: CombineKeyValue) = comb &>> ("justify-self", "stretch")
 
-    /// The item is stretched to fill the container.
-    []
-    member inline _.justifySelfStretch([] comb: CombineKeyValue) = comb &>> ("justify-self", "stretch")
+    // --------------------------------------------------------------------
+    // Border styles
+    // --------------------------------------------------------------------
 
-    /// In the case of anchor-positioned elements, aligns the item to the center of the associated anchor element in the inline direction. See Centering on the anchor using anchor-center.
-    []
-    member inline _.justifySelfAnchorCenter([] comb: CombineKeyValue) =
-        comb &>> ("justify-self", "anchor-center")
 
     /// Sets the width of the outline.
     []
@@ -1148,1878 +1081,2166 @@ type CssBuilder() =
     member inline _.outlineWidthInheritFromParent([] comb: CombineKeyValue) =
         comb &>> ("outline-width", "inherit")
 
-    /// Default value. The marker is a filled circle
-    []
-    member inline _.listStyleTypeDisc([] comb: CombineKeyValue) = comb &>> ("list-style-type", "disc")
-
-    /// The marker is traditional Armenian numbering
-    []
-    member inline _.listStyleTypeArmenian([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "armenian")
+    /// Sets whether table borders should collapse into a single border or be separated as in standard HTML.
+    /// Borders are separated; each cell will display its own borders. This is default.
+    []
+    member inline _.borderCollapseSeparate([] comb: CombineKeyValue) =
+        comb &>> ("border-collapse", "separate")
 
-    /// The marker is a circle
-    []
-    member inline _.listStyleTypeCircle([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "circle")
+    /// Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect))
+    []
+    member inline _.borderCollapseCollapse([] comb: CombineKeyValue) =
+        comb &>> ("border-collapse", "collapse")
 
-    /// The marker is plain ideographic numbers
-    []
-    member inline _.listStyleTypeCjkIdeographic([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "cjk-ideographic")
+    /// Sets this property to its default value)
+    []
+    member inline _.borderCollapseInitial([] comb: CombineKeyValue) =
+        comb &>> ("border-collapse", "initial")
 
-    /// The marker is a number
-    []
-    member inline _.listStyleTypeDecimal([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "decimal")
+    /// Inherits this property from its parent element.
+    []
+    member inline _.borderCollapseInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("border-collapse", "inherit")
 
-    /// The marker is a number with leading zeros (01, 02, 03, etc.))
-    []
-    member inline _.listStyleTypeDecimalLeadingZero([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "decimal-leading-zero")
-
-    /// The marker is traditional Georgian numbering
-    []
-    member inline _.listStyleTypeGeorgian([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "georgian")
-
-    /// The marker is traditional Hebrew numbering
-    []
-    member inline _.listStyleTypeHebrew([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "hebrew")
-
-    /// The marker is traditional Hiragana numbering
-    []
-    member inline _.listStyleTypeHiragana([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "hiragana")
-
-    /// The marker is traditional Hiragana iroha numbering
-    []
-    member inline _.listStyleTypeHiraganaIroha([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "hiragana-iroha")
-
-    /// The marker is traditional Katakana numbering
-    []
-    member inline _.listStyleTypeKatakana([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "katakana")
-
-    /// The marker is traditional Katakana iroha numbering
-    []
-    member inline _.listStyleTypeKatakanaIroha([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "katakana-iroha")
-
-    /// The marker is lower-alpha (a, b, c, d, e, etc.))
-    []
-    member inline _.listStyleTypeLowerAlpha([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "lower-alpha")
+    /// Sets whether table borders collapse using a CSS string value (e.g. "collapse", "var(--border-collapse)").
+    []
+    member inline _.borderCollapse([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-collapse", value)
 
-    /// The marker is lower-greek
-    []
-    member inline _.listStyleTypeLowerGreek([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "lower-greek")
+    /// Sets the distance between the borders of adjacent 
     element.
     []
-    member inline _.displayTableCaption([] comb: CombineKeyValue) = comb &>> ("display", "table-caption")
+    member inline _.displayTableCaption([] comb: CombineKeyValue) =
+        comb &>> ("display", "table-caption")
+
     /// Let the element behave like a  
     element.
     []
     member inline _.displayTableCell([] comb: CombineKeyValue) = comb &>> ("display", "table-cell")
+
     /// Let the element behave like a 
     
      
     cells. Applies only when border-collapse is separate.
+    []
+    member inline _.borderSpacing([] comb: CombineKeyValue, horizontal: string, ?vertical: string) =
+        comb &>> ("border-spacing", horizontal + ", " + string vertical)
 
-    /// The marker is lower-latin (a, b, c, d, e, etc.))
-    []
-    member inline _.listStyleTypeLowerLatin([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "lower-latin")
+    /// Sets this property to its default value)
+    []
+    member inline _.borderSpacingInitial([] comb: CombineKeyValue) =
+        comb &>> ("border-spacing", "initial")
 
-    /// The marker is lower-roman (i, ii, iii, iv, v, etc.))
-    []
-    member inline _.listStyleTypeLowerRoman([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "lower-roman")
+    /// Inherits this property from its parent element.
+    []
+    member inline _.borderSpacingInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("border-spacing", "inherit")
 
-    /// No marker is shown
-    []
-    member inline _.listStyleTypeNone([] comb: CombineKeyValue) = comb &>> ("list-style-type", "none")
+    /// Sets the line style for all four sides of an element's border.
+    []
+    member inline _.borderStyle([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-style", style)
 
-    /// The marker is a square
-    []
-    member inline _.listStyleTypeSquare([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "square")
+    /// Specifies a dotted border.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
+    []
+    member inline _.borderStyleDotted([] comb: CombineKeyValue) = comb &>> ("border-style", "dotted")
 
-    /// The marker is upper-alpha (A, B, C, D, E, etc.))
-    []
-    member inline _.listStyleTypeUpperAlpha([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "upper-alpha")
+    /// Specifies a dashed border.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
+    []
+    member inline _.borderStyleDashed([] comb: CombineKeyValue) = comb &>> ("border-style", "dashed")
 
-    /// The marker is upper-greek
-    []
-    member inline _.listStyleTypeUpperGreek([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "upper-greek")
+    /// Specifies a solid border.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
+    []
+    member inline _.borderStyleSolid([] comb: CombineKeyValue) = comb &>> ("border-style", "solid")
 
-    /// The marker is upper-latin (A, B, C, D, E, etc.))
-    []
-    member inline _.listStyleTypeUpperLatin([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "upper-latin")
+    /// Specifies a double border.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
+    []
+    member inline _.borderStyleDouble([] comb: CombineKeyValue) = comb &>> ("border-style", "double")
 
-    /// The marker is upper-roman (I, II, III, IV, V, etc.))
-    []
-    member inline _.listStyleTypeUpperRoman([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "upper-roman")
+    /// Specifies a 3D grooved border. The effect depends on the border-color value.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
+    []
+    member inline _.borderStyleGroove([] comb: CombineKeyValue) = comb &>> ("border-style", "groove")
 
-    /// Sets this property to its default value.
+    /// Specifies a 3D ridged border. The effect depends on the border-color value.
     ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
-    []
-    member inline _.listStyleTypeInitial([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "initial")
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
+    []
+    member inline _.borderStyleRidge([] comb: CombineKeyValue) = comb &>> ("border-style", "ridge")
 
-    /// Inherits this property from its parent element.
+    /// Specifies a 3D inset border. The effect depends on the border-color value.
     ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
-    []
-    member inline _.listStyleTypeInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("list-style-type", "inherit")
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
+    []
+    member inline _.borderStyleInset([] comb: CombineKeyValue) = comb &>> ("border-style", "inset")
 
-    /// Sets the list item marker type using a CSS string value (e.g. "disc", "var(--list-style-type)").
-    []
-    member inline _.listStyleType([] comb: CombineKeyValue, value: string) =
-        comb &>> ("list-style-type", value)
+    /// Specifies a 3D outset border. The effect depends on the border-color value.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
+    []
+    member inline _.borderStyleOutset([] comb: CombineKeyValue) = comb &>> ("border-style", "outset")
 
-    /// Removes the list-style-image marker.
-    []
-    member inline _.propertyNone([] comb: CombineKeyValue) = comb &>> ("list-style-image", "none")
+    /// Default value. Specifies no border.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
+    []
+    member inline _.borderStyleNone([] comb: CombineKeyValue) = comb &>> ("border-style", "none")
 
-    /// The path to the image to be used as a list-item marker
-    []
-    member inline _.propertyUrl([] comb: CombineKeyValue, path: string) =
-        comb
-        &&& CombineKeyValue(fun sb -> sb.Append("list-style-image: url(").Append(path).Append("); "))
+    /// The same as "none", except in border conflict resolution for table elements.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=hidden
+    []
+    member inline _.borderStyleHidden([] comb: CombineKeyValue) = comb &>> ("border-style", "hidden")
 
     /// Sets this property to its default value.
     ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
-    []
-    member inline _.propertyInitial([] comb: CombineKeyValue) =
-        comb &>> ("list-style-image", "initial")
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=hidden
+    ///
+    /// Read about initial value https://www.w3schools.com/cssref/css_initial.asp
+    []
+    member inline _.borderStyleInitial([] comb: CombineKeyValue) = comb &>> ("border-style", "initial")
 
     /// Inherits this property from its parent element.
     ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
-    []
-    member inline _.propertyInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("list-style-image", "inherit")
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=hidden
+    ///
+    /// Read about inherit https://www.w3schools.com/cssref/css_inherit.asp
+    []
+    member inline _.borderStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("border-style", "inherit")
 
-    /// The bullet points will be inside the list item
-    []
-    member inline _.listStylePositionInside([] comb: CombineKeyValue) =
-        comb &>> ("list-style-position", "inside")
+    /// Permits the user agent to render a custom outline style.
+    []
+    member inline _.outlineStyleAuto([] comb: CombineKeyValue) = comb &>> ("outline-style", "auto")
 
-    /// The bullet points will be outside the list item. This is default
-    []
-    member inline _.listStylePositionOutside([] comb: CombineKeyValue) =
-        comb &>> ("list-style-position", "outside")
+    /// Specifies no outline. This is default.
+    []
+    member inline _.outlineStyleNone([] comb: CombineKeyValue) = comb &>> ("outline-style", "none")
 
-    /// Sets this property to its default value.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
-    []
-    member inline _.listStylePositionInitial([] comb: CombineKeyValue) =
-        comb &>> ("list-style-position", "initial")
+    /// Specifies a hidden outline
+    []
+    member inline _.outlineStyleHidden([] comb: CombineKeyValue) = comb &>> ("outline-style", "hidden")
 
-    /// Inherits this property from its parent element.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
-    []
-    member inline _.listStylePositionInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("list-style-position", "inherit")
+    /// Specifies a dotted outline
+    []
+    member inline _.outlineStyleDotted([] comb: CombineKeyValue) = comb &>> ("outline-style", "dotted")
 
-    /// Sets the position of the list item marker using a CSS string value (e.g. "inside", "var(--list-style-position)").
-    []
-    member inline _.listStylePosition([] comb: CombineKeyValue, value: string) =
-        comb &>> ("list-style-position", value)
+    /// Specifies a dashed outline
+    []
+    member inline _.outlineStyleDashed([] comb: CombineKeyValue) = comb &>> ("outline-style", "dashed")
 
-    /// Sets the kind of decoration that is used on text in an element. Accepts a CSS text-decoration-line value (e.g. "underline overline").
-    []
-    member inline _.textDecorationLine([] comb: CombineKeyValue, line: string) =
-        comb &>> ("text-decoration-line", line)
+    /// Specifies a solid outline
+    []
+    member inline _.outlineStyleSolid([] comb: CombineKeyValue) = comb &>> ("outline-style", "solid")
 
-    /// Specifies no text decoration line.
-    []
-    member inline _.textDecorationLineNone([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration-line", "none")
+    /// Specifies a double outliner
+    []
+    member inline _.outlineStyleDouble([] comb: CombineKeyValue) = comb &>> ("outline-style", "double")
 
-    /// Draws a line beneath the text.
-    []
-    member inline _.textDecorationLineUnderline([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration-line", "underline")
+    /// Specifies a 3D grooved outline. The effect depends on the outline-color value)
+    []
+    member inline _.outlineStyleGroove([] comb: CombineKeyValue) = comb &>> ("outline-style", "groove")
 
-    /// Draws a line above the text.
-    []
-    member inline _.textDecorationLineOverline([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration-line", "overline")
+    /// Specifies a 3D ridged outline. The effect depends on the outline-color value)
+    []
+    member inline _.outlineStyleRidge([] comb: CombineKeyValue) = comb &>> ("outline-style", "ridge")
 
-    /// Draws a line through the text (strikethrough).
-    []
-    member inline _.textDecorationLineLineThrough([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration-line", "line-through")
+    /// Specifies a 3D inset  outline. The effect depends on the outline-color value)
+    []
+    member inline _.outlineStyleInset([] comb: CombineKeyValue) = comb &>> ("outline-style", "inset")
 
-    /// Sets this property to its default value.
-    []
-    member inline _.textDecorationLineInitial([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration-line", "initial")
-
-    /// Inherits this property from its parent element.
-    []
-    member inline _.textDecorationLineInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration-line", "inherit")
+    /// Specifies a 3D outset outline. The effect depends on the outline-color value)
+    []
+    member inline _.outlineStyleOutset([] comb: CombineKeyValue) = comb &>> ("outline-style", "outset")
 
-    /// Specifies the decoration added to text. Accepts a CSS text-decoration value (e.g. "underline", "none", or a shorthand combining line, style, and color).
-    []
-    member inline _.textDecoration([] comb: CombineKeyValue, line: string) =
-        comb &>> ("text-decoration", line)
+    /// Sets this property to its default value)
+    []
+    member inline _.outlineStyleInitial([] comb: CombineKeyValue) =
+        comb &>> ("outline-style", "initial")
 
-    /// Specifies no text decoration.
-    []
-    member inline _.textDecorationNone([] comb: CombineKeyValue) = comb &>> ("text-decoration", "none")
+    /// Inherits this property from its parent element
+    []
+    member inline _.outlineStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("outline-style", "inherit")
 
-    /// Underlines the text.
-    []
-    member inline _.textDecorationUnderline([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration", "underline")
+    /// Sets the style of an outline using a CSS string value (e.g. "solid", "var(--outline-style)").
+    []
+    member inline _.outlineStyle([] comb: CombineKeyValue, value: string) =
+        comb &>> ("outline-style", value)
 
-    /// Adds a line above the text.
-    []
-    member inline _.textDecorationOverline([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration", "overline")
+    /// The outline-offset property adds space between an outline and the edge or border of an element.
+    ///
+    /// The space between an element and its outline is transparent.
+    ///
+    /// Outlines differ from borders in three ways:
+    ///
+    ///  - An outline is a line drawn around elements, outside the border edge
+    ///  - An outline does not take up space
+    ///  - An outline may be non-rectangular
+    ///
+    []
+    member inline _.outlineOffset([] comb: CombineKeyValue, offset: int) =
+        comb &&& mkPxWithKV ("outline-offset", offset)
 
-    /// Adds a line through the text (strikethrough).
-    []
-    member inline _.textDecorationLineThrough([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration", "line-through")
+    /// The outline-offset property adds space between an outline and the edge or border of an element.
+    ///
+    /// The space between an element and its outline is transparent.
+    ///
+    /// Outlines differ from borders in three ways:
+    ///
+    ///  - An outline is a line drawn around elements, outside the border edge
+    ///  - An outline does not take up space
+    ///  - An outline may be non-rectangular
+    ///
+    []
+    member inline _.outlineOffset([] comb: CombineKeyValue, offset: string) =
+        comb &>> ("outline-offset", offset)
 
-    /// Sets this property to its default value.
-    []
-    member inline _.textDecorationInitial([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration", "initial")
+    /// An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
+    ///
+    /// The `outline-color` property specifies the color of an outline.
+    /// **Note**: Always declare the outline-style property before the outline-color property. An element must have an outline before you change the color of it.
+    []
+    member inline _.outlineColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("outline-color", color)
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.textDecorationInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration", "inherit")
+    /// Sets the line style of an element's border.
+    []
+    member inline _.border([] comb: CombineKeyValue, style: string) = comb &>> ("border", style)
 
-    /// Specifies that child elements will NOT preserve its 3D position. This is default.
-    []
-    member inline _.transformStyleFlat([] comb: CombineKeyValue) = comb &>> ("transform-style", "flat")
+    /// Sets the line style of an element's left border.
+    []
+    member inline _.borderLeft([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-left", style)
 
-    /// Specifies that child elements will preserve its 3D position
-    []
-    member inline _.transformStylePreserve3D([] comb: CombineKeyValue) =
-        comb &>> ("transform-style", "preserve-3d")
+    /// Sets the line style of an element's top border.
+    []
+    member inline _.borderTop([] comb: CombineKeyValue, style: string) = comb &>> ("border-top", style)
 
-    /// Sets this property to its default value.
-    []
-    member inline _.transformStyleInitial([] comb: CombineKeyValue) =
-        comb &>> ("transform-style", "initial")
+    /// Sets the line style of an element's right border.
+    []
+    member inline _.borderRight([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-right", style)
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.transformStyleInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("transform-style", "inherit")
+    /// Sets the line style of an element's bottom border.
+    []
+    member inline _.borderBottom([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-bottom", style)
 
-    /// Sets how nested elements are rendered in 3D space using a CSS string value (e.g. "preserve-3d", "var(--transform-style)").
-    []
-    member inline _.transformStyle([] comb: CombineKeyValue, value: string) =
-        comb &>> ("transform-style", value)
+    /// Sets the line style of an element's bottom border.
+    []
+    member inline _.borderBottomStyle([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-bottom-style", style)
 
-    /// No capitalization. The text renders as it is. This is default.
-    []
-    member inline _.textTransformNone([] comb: CombineKeyValue) = comb &>> ("text-transform", "none")
+    /// Sets the width of the bottom border of an element.
+    []
+    member inline _.borderBottomWidth([] comb: CombineKeyValue, width: int) =
+        comb &&& mkPxWithKV ("border-bottom-width", width)
 
-    /// Transforms the first character of each word to uppercase.
-    []
-    member inline _.textTransformCapitalize([] comb: CombineKeyValue) =
-        comb &>> ("text-transform", "capitalize")
+    /// Sets the width of the bottom border of an element.
+    []
+    member inline _.borderBottomWidth([] comb: CombineKeyValue, width: string) =
+        comb &>> ("border-bottom-width", width)
 
-    /// Transforms all characters to uppercase.
-    []
-    member inline _.textTransformUppercase([] comb: CombineKeyValue) =
-        comb &>> ("text-transform", "uppercase")
+    /// Sets the color of an element's bottom border.
+    ///
+    /// It can also be set with the shorthand CSS properties border-color or border-bottom.
+    []
+    member inline _.borderBottomColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("border-bottom-color", color)
 
-    /// Transforms all characters to lowercase.
-    []
-    member inline _.textTransformLowercase([] comb: CombineKeyValue) =
-        comb &>> ("text-transform", "lowercase")
+    /// Sets the line style of an element's top border.
+    []
+    member inline _.borderTopStyle([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-top-style", style)
 
-    /// Sets this property to its default value.
-    []
-    member inline _.textTransformInitial([] comb: CombineKeyValue) =
-        comb &>> ("text-transform", "initial")
+    /// Sets the width of the top border of an element.
+    []
+    member inline _.borderTopWidth([] comb: CombineKeyValue, width: int) =
+        comb &&& mkPxWithKV ("border-top-width", width)
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.textTransformInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("text-transform", "inherit")
+    /// Sets the width of the top border of an element.
+    []
+    member inline _.borderTopWidth([] comb: CombineKeyValue, width: string) =
+        comb &>> ("border-top-width", width)
 
-    /// Sets the text transformation using a CSS string value (e.g. "uppercase", "var(--text-transform)").
-    []
-    member inline _.textTransform([] comb: CombineKeyValue, value: string) =
-        comb &>> ("text-transform", value)
+    /// Sets the color of an element's top border.
+    ///
+    /// It can also be set with the shorthand CSS properties border-color or border-bottom.
+    []
+    member inline _.borderTopColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("border-top-color", color)
 
-    /// Default value. The text is clipped and not accessible.
-    []
-    member inline _.textOverflowClip([] comb: CombineKeyValue) = comb &>> ("text-overflow", "clip")
+    /// Sets the line style of an element's right border.
+    []
+    member inline _.borderRightStyle([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-right-style", style)
 
-    /// Render an ellipsis ("...") to represent the clipped text.
-    []
-    member inline _.textOverflowEllipsis([] comb: CombineKeyValue) =
-        comb &>> ("text-overflow", "ellipsis")
+    /// Sets the width of the right border of an element.
+    []
+    member inline _.borderRightWidth([] comb: CombineKeyValue, width: int) =
+        comb &&& mkPxWithKV ("border-right-width", width)
 
-    /// Render the given string to represent the clipped text.
-    []
-    member inline _.textOverflowInitial([] comb: CombineKeyValue) =
-        comb &>> ("text-overflow", "initial")
+    /// Sets the width of the right border of an element.
+    []
+    member inline _.borderRightWidth([] comb: CombineKeyValue, width: string) =
+        comb &>> ("border-right-width", width)
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.textOverflowInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("text-overflow", "inherit")
+    /// Sets the color of an element's right border.
+    ///
+    /// It can also be set with the shorthand CSS properties border-color or border-bottom.
+    []
+    member inline _.borderRightColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("border-right-color", color)
 
-    /// Sets how overflowed text is signaled using a CSS string value (e.g. "ellipsis", "var(--text-overflow)").
-    []
-    member inline _.textOverflow([] comb: CombineKeyValue, value: string) =
-        comb &>> ("text-overflow", value)
+    /// Sets the line style of an element's left border.
+    []
+    member inline _.borderLeftStyle([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-left-style", style)
 
-    /// Default value. Specifies no effects.
-    []
-    member inline _.filterNone([] comb: CombineKeyValue) = comb &>> ("filter", "none")
+    /// Sets the width of the left border of an element.
+    []
+    member inline _.borderLeftWidth([] comb: CombineKeyValue, width: int) =
+        comb &&& mkPxWithKV ("border-left-width", width)
 
-    /// Applies a blur effect to the elemeen. A larger value will create more blur.
-    ///
-    /// This overload takes an integer that represents a percentage from 0 to 100.
-    []
-    member inline _.filterBlur([] comb: CombineKeyValue, value: int) =
-        comb
-        &&& CombineKeyValue(fun sb -> sb.Append("filter: blur(").Append(value).Append("%); "))
+    /// Sets the width of the left border of an element.
+    []
+    member inline _.borderLeftWidth([] comb: CombineKeyValue, width: string) =
+        comb &>> ("border-left-width", width)
 
-    /// Applies a blur effect to the elemeen. A larger value will create more blur.
+    /// Sets the color of an element's left border.
     ///
-    /// This overload takes a floating number that goes from 0 to 1,
-    []
-    member inline _.filterBlur([] comb: CombineKeyValue, value: double) =
-        comb
-        &&& CombineKeyValue(fun sb -> sb.Append("filter: blur(").Append(value * 100.).Append("%); "))
+    /// It can also be set with the shorthand CSS properties border-color or border-bottom.
+    []
+    member inline _.borderLeftColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("border-left-color", color)
 
-    /// Adjusts the brightness of the elemeen
-    ///
-    /// This overload takes an integer that represents a percentage from 0 to 100.
-    ///
-    /// Values over 100% will provide brighter results.
-    []
-    member inline _.filterBrightness([] comb: CombineKeyValue, value: int) =
-        comb
-        &&& CombineKeyValue(fun sb -> sb.Append("filter: brightness(").Append(value).Append("%); "))
+    /// Sets the color of an element's border.
+    []
+    member inline _.borderColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("border-color", color)
 
-    /// Adjusts the brightness of the elemeen. A larger value will create more blur.
-    ///
-    /// This overload takes a floating number that goes from 0 to 1,
-    []
-    member inline _.filterBrightness([] comb: CombineKeyValue, value: double) =
-        comb
-        &&& CombineKeyValue(fun sb -> sb.Append("filter: brightness(").Append(value * 100.).Append("%); "))
+    /// Rounds the corners of an element's outer border edge. You can set a single radius to make
+    /// circular corners, or two radii to make elliptical corners.
+    []
+    member inline _.borderRadius([] comb: CombineKeyValue, radius: int) =
+        comb &&& mkPxWithKV ("border-radius", radius)
 
-    /// Adjusts the contrast of the element.
-    ///
-    /// This overload takes an integer that represents a percentage from 0 to 100.
-    []
-    member inline _.filterContrast([] comb: CombineKeyValue, value: int) =
-        comb
-        &&& CombineKeyValue(fun sb -> sb.Append("filter: contrast(").Append(value).Append("%); "))
+    /// Rounds the corners of an element's outer border edge. You can set a single radius to make
+    /// circular corners, or two radii to make elliptical corners.
+    []
+    member inline _.borderRadius([] comb: CombineKeyValue, radius: string) =
+        comb &>> ("border-radius", radius)
 
-    /// Adjusts the contrast of the element. A larger value will create more contrast.
-    ///
-    /// This overload takes a floating number that goes from 0 to 1
-    []
-    member inline _.filterContrast([] comb: CombineKeyValue, value: double) =
-        comb
-        &&& CombineKeyValue(fun sb -> sb.Append("filter: contrast(").Append(value * 100.).Append("%); "))
+    /// Sets the width of an element's border.
+    []
+    member inline _.borderWidth([] comb: CombineKeyValue, width: int) =
+        comb &&& mkPxWithKV ("border-width", width)
 
-    /// Applies a drop shadow effect.
-    []
-    member inline _.filterDropShadow
-        (
-            [] comb: CombineKeyValue,
-            horizontalOffset: int,
-            verticalOffset: int,
-            blur: int,
-            spread: int,
-            color: string
-        ) =
+    /// Sets the width of an element's border.
+    []
+    member inline _.borderWidth([] comb: CombineKeyValue, top: string, ?right: string) =
         comb
         &&& CombineKeyValue(fun sb ->
-            sb
-                .Append("filter: drop-shadow(")
-                .Append(horizontalOffset)
-                .Append("px ")
-                .Append(verticalOffset)
-                .Append("px ")
-                .Append(blur)
-                .Append("px ")
-                .Append(spread)
-                .Append("px ")
-                .Append(color)
-                .Append("); "))
+            let sb = sb.Append("border-width: ").Append(top)
 
-    /// Applies a drop shadow effect.
-    []
-    member inline _.filterDropShadow
-        ([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, blur: int, color: string)
-        =
-        comb
-        &&& CombineKeyValue(fun sb ->
-            sb
-                .Append("filter: drop-shadow(")
-                .Append(horizontalOffset)
-                .Append("px ")
-                .Append(verticalOffset)
-                .Append("px ")
-                .Append(blur)
-                .Append("px ")
-                .Append(color)
-                .Append("); "))
+            match right with
+            | Some x -> sb.Append(" ").Append(x).Append("; ")
+            | None -> sb.Append("; "))
 
-    /// Applies a drop shadow effect.
-    []
-    member inline _.filterDropShadow
-        ([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, color: string)
+    /// Sets the width of an element's border.
+    []
+    member inline _.borderWidth
+        ([] comb: CombineKeyValue, top: string, right: string, bottom: string, ?left: string)
         =
-        comb
-        &&& CombineKeyValue(fun sb ->
-            sb
-                .Append("filter: drop-shadow(")
-                .Append(horizontalOffset)
-                .Append("px ")
-                .Append(verticalOffset)
-                .Append("px ")
-                .Append(color)
-                .Append("); "))
-
-    /// Converts the image to grayscale
-    ///
-    /// This overload takes an integer that represents a percentage from 0 to 100.
-    []
-    member inline _.filterGrayscale([] comb: CombineKeyValue, value: int) =
-        comb
-        &&& CombineKeyValue(fun sb -> sb.Append("filter: grayscale(").Append(value).Append("%); "))
+        CombineKeyValue(fun sb ->
+            let sb =
+                comb
+                    .Invoke(sb)
+                    .Append("border-width: ")
+                    .Append(top)
+                    .Append(" ")
+                    .Append(right)
+                    .Append(" ")
+                    .Append(bottom)
 
-    /// Converts the image to grayscale
-    ///
-    /// This overload takes a floating number that goes from 0 to 1
-    []
-    member inline _.filterGrayscale([] comb: CombineKeyValue, value: double) =
-        comb
-        &&& CombineKeyValue(fun sb -> sb.Append("filter: grayscale(").Append(value).Append("%); "))
+            match left with
+            | Some x -> sb.Append(" ").Append(x).Append("; ")
+            | None -> sb.Append("; "))
 
-    /// Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image
-    /// samples will be adjusted. 0deg is default, and represents the original image.
-    ///
-    /// **Note**: Maximum value is 360
-    []
-    member inline _.filterHueRotate([] comb: CombineKeyValue, degrees: int) =
-        comb
-        &&& CombineKeyValue(fun sb -> sb.Append("filter: hue-rotate(").Append(degrees).Append("deg); "))
+    /// Shorthand for outline-width, outline-style and outline-color (e.g. "2px solid red").
+    []
+    member inline _.outline([] comb: CombineKeyValue, value: string) = comb &>> ("outline", value)
 
-    /// Inverts the element.
-    ///
-    /// This overload takes an integer that represents a percentage from 0 to 100.
-    []
-    member inline _.filterInvert([] comb: CombineKeyValue, value: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("invert(").Append(value).Append("%); "))
+    /// Sets the outline width with a unitless number converted to px.
+    []
+    member inline _.outlineWidth([] comb: CombineKeyValue, value: float) =
+        comb &&& mkPxWithKV ("outline-width", value)
 
-    /// Inverts the element.
-    ///
-    /// This overload takes a floating number that goes from 0 to 1
-    []
-    member inline _.filterInvert([] comb: CombineKeyValue, value: double) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("invert(").Append(value).Append("%); "))
+    /// Rounds the top-left corner. Accepts a CSS length (e.g. "8px") or radius string.
+    []
+    member inline _.borderTopLeftRadius([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-top-left-radius", value)
 
-    /// Sets the opacity of the element.
-    ///
-    /// This overload takes an integer that represents a percentage from 0 to 100.
-    []
-    member inline _.filterOpacity([] comb: CombineKeyValue, value: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("opacity(").Append(value).Append("%); "))
+    /// Rounds the top-left corner in pixels.
+    []
+    member inline _.borderTopLeftRadius([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("border-top-left-radius", value)
 
-    /// Sets the opacity of the element.
-    ///
-    /// This overload takes a floating number that goes from 0 to 1
-    []
-    member inline _.filterOpacity([] comb: CombineKeyValue, value: double) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("opacity(").Append(value).Append("%); "))
+    /// Rounds the top-right corner. Accepts a CSS length (e.g. "8px") or radius string.
+    []
+    member inline _.borderTopRightRadius([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-top-right-radius", value)
 
-    /// Sets the saturation of the element.
-    ///
-    /// This overload takes an integer that represents a percentage from 0 to 100.
-    []
-    member inline _.filterSaturate([] comb: CombineKeyValue, value: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("saturate(").Append(value).Append("%); "))
+    /// Rounds the top-right corner in pixels.
+    []
+    member inline _.borderTopRightRadius([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("border-top-right-radius", value)
 
-    /// Sets the saturation of the element.
-    ///
-    /// This overload takes a floating number that goes from 0 to 1
-    []
-    member inline _.filterSaturate([] comb: CombineKeyValue, value: double) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("saturate(").Append(value).Append("%); "))
+    /// Rounds the bottom-right corner. Accepts a CSS length (e.g. "8px") or radius string.
+    []
+    member inline _.borderBottomRightRadius([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-bottom-right-radius", value)
 
-    /// Applies Sepia filter to the element.
-    ///
-    /// This overload takes an integer that represents a percentage from 0 to 100.
-    []
-    member inline _.filterSepia([] comb: CombineKeyValue, value: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("sepia(").Append(value).Append("); "))
+    /// Rounds the bottom-right corner in pixels.
+    []
+    member inline _.borderBottomRightRadius([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("border-bottom-right-radius", value)
 
-    /// Applies Sepia filter to the element.
-    ///
-    /// This overload takes a floating number that goes from 0 to 1
-    []
-    member inline _.filterSepia([] comb: CombineKeyValue, value: double) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("sepia(").Append(value).Append("); "))
+    /// Rounds the bottom-left corner. Accepts a CSS length (e.g. "8px") or radius string.
+    []
+    member inline _.borderBottomLeftRadius([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-bottom-left-radius", value)
 
-    /// The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.
-    ///
-    /// Example: `filter: url(svg-url#element-id)`
-    []
-    member inline _.filterUrl([] comb: CombineKeyValue, value: string) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("url(").Append(value).Append("); "))
+    /// Rounds the bottom-left corner in pixels.
+    []
+    member inline _.borderBottomLeftRadius([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("border-bottom-left-radius", value)
 
-    /// Sets this property to its default value.
-    []
-    member inline _.filterInitial([] comb: CombineKeyValue) = comb &>> ("filter", "initial")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.filterInheritFromParent([] comb: CombineKeyValue) = comb &>> ("filter", "inherit")
 
-    /// Sets the filter effects using a CSS string value (e.g. "blur(4px) grayscale(50%)", "var(--filter)").
-    []
-    member inline _.filter([] comb: CombineKeyValue, value: string) = comb &>> ("filter", value)
 
-    /// Sets whether table borders should collapse into a single border or be separated as in standard HTML.
-    /// Borders are separated; each cell will display its own borders. This is default.
-    []
-    member inline _.borderCollapseSeparate([] comb: CombineKeyValue) =
-        comb &>> ("border-collapse", "separate")
+    // --------------------------------------------------------------------
+    // BoxSpacing styles
+    // --------------------------------------------------------------------
 
-    /// Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect))
-    []
-    member inline _.borderCollapseCollapse([] comb: CombineKeyValue) =
-        comb &>> ("border-collapse", "collapse")
 
-    /// Sets this property to its default value)
-    []
-    member inline _.borderCollapseInitial([] comb: CombineKeyValue) =
-        comb &>> ("border-collapse", "initial")
+    /// Sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right,
+    /// margin-bottom, and margin-left.
+    []
+    member inline _.margin([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("margin", value)
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.borderCollapseInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("border-collapse", "inherit")
+    /// Sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right,
+    /// margin-bottom, and margin-left.
+    []
+    member inline _.margin([] comb: CombineKeyValue, value: string) = comb &>> ("margin", value)
 
-    /// Sets whether table borders collapse using a CSS string value (e.g. "collapse", "var(--border-collapse)").
-    []
-    member inline _.borderCollapse([] comb: CombineKeyValue, value: string) =
-        comb &>> ("border-collapse", value)
+    /// Sets the margin area on the vertical and horizontal axis.
+    []
+    member inline _.margin([] comb: CombineKeyValue, vertical: int, horizonal: int) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("margin: ").Append(vertical).Append("px ").Append(horizonal).Append("px; "))
 
-    /// Sets the distance between the borders of adjacent 
     cells. Applies only when border-collapse is separate.
-    []
-    member inline _.borderSpacing([] comb: CombineKeyValue, horizontal: string, ?vertical: string) =
-        comb &>> ("border-spacing", horizontal + ", " + string vertical)
+    /// Sets the margin area on the vertical and horizontal axis.
+    []
+    member inline _.margin([] comb: CombineKeyValue, vertical: string, horizonal: string) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("margin: ").Append(vertical).Append(" ").Append(horizonal).Append("; "))
 
-    /// Sets this property to its default value)
-    []
-    member inline _.borderSpacingInitial([] comb: CombineKeyValue) =
-        comb &>> ("border-spacing", "initial")
-
-    /// Inherits this property from its parent element.
-    []
-    member inline _.borderSpacingInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("border-spacing", "inherit")
+    /// Sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right,
+    /// margin-bottom, and margin-left.
+    []
+    member inline _.margin([] comb: CombineKeyValue, top: int, right: int, bottom: int, left: int) =
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("margin: ")
+                .Append(top)
+                .Append("px ")
+                .Append(right)
+                .Append("px ")
+                .Append(bottom)
+                .Append("px ")
+                .Append(left)
+                .Append("px; "))
 
-    /// Sets the size of the element's background image.
-    ///
-    /// The image can be left to its natural size, stretched, or constrained to fit the available space.
-    []
-    member inline _.backgroundSize([] comb: CombineKeyValue, value: string) =
-        comb &>> ("background-size", value)
+    /// Sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right,
+    /// margin-bottom, and margin-left.
+    []
+    member inline _.margin
+        ([] comb: CombineKeyValue, top: string, right: string, bottom: string, left: string)
+        =
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("margin: ")
+                .Append(top)
+                .Append(" ")
+                .Append(right)
+                .Append(" ")
+                .Append(bottom)
+                .Append(" ")
+                .Append(left)
+                .Append("; "))
 
-    /// Sets the size of the element's background image.
-    ///
-    /// The image can be left to its natural size, stretched, or constrained to fit the available space.
-    []
-    member inline _.backgroundSize([] comb: CombineKeyValue, width: string, height: string) =
-        comb
-        &&& CombineKeyValue(fun sb ->
-            sb.Append("background-size: ").Append(width).Append(" ").Append(height).Append("; "))
+    /// Sets the margin area on the left side of an element. A positive value places it farther from its
+    /// neighbors, while a negative value places it closer.
+    []
+    member inline _.marginLeft([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("margin-left", value)
 
-    /// Default value. The background image is displayed in its original size
-    ///
-    /// See [example here](https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=auto))
-    []
-    member inline _.backgroundSizeAuto([] comb: CombineKeyValue) = comb &>> ("background-size", "auto")
+    /// Sets the margin area on the left side of an element. A positive value places it farther from its
+    /// neighbors, while a negative value places it closer.
+    []
+    member inline _.marginLeft([] comb: CombineKeyValue, value: string) =
+        comb &>> ("margin-left", value)
 
-    /// Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
-    ///
-    /// See [example here](https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover))
-    []
-    member inline _.backgroundSizeCover([] comb: CombineKeyValue) =
-        comb &>> ("background-size", "cover")
+    /// sets the margin area on the right side of an element. A positive value places it farther from its
+    /// neighbors, while a negative value places it closer.
+    []
+    member inline _.marginRight([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("margin-right", value)
 
-    /// Resize the background image to make sure the image is fully visible
-    ///
-    /// See [example here](https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain))
-    []
-    member inline _.backgroundSizeContain([] comb: CombineKeyValue) =
-        comb &>> ("background-size", "contain")
+    /// sets the margin area on the right side of an element. A positive value places it farther from its
+    /// neighbors, while a negative value places it closer.
+    []
+    member inline _.marginRight([] comb: CombineKeyValue, value: string) =
+        comb &>> ("margin-right", value)
 
-    /// Sets this property to its default value.
-    []
-    member inline _.backgroundSizeInitial([] comb: CombineKeyValue) =
-        comb &>> ("background-size", "initial")
+    /// Sets the margin area on the top of an element. A positive value places it farther from its
+    /// neighbors, while a negative value places it closer.
+    []
+    member inline _.marginTop([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("margin-top", value)
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.backgroundSizeInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("background-size", "inherit")
+    /// Sets the margin area on the top of an element. A positive value places it farther from its
+    /// neighbors, while a negative value places it closer.
+    []
+    member inline _.marginTop([] comb: CombineKeyValue, value: string) = comb &>> ("margin-top", value)
 
-    /// Default value. The line will display as a single line.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=solid
-    []
-    member inline _.textDecorationStyleSolid([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration-style", "solid")
+    /// Sets the margin area on the bottom of an element. A positive value places it farther from its
+    /// neighbors, while a negative value places it closer.
+    []
+    member inline _.marginBottom([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("margin-bottom", value)
 
-    /// The line will display as a double line.
-    ///
-    /// https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=double
-    []
-    member inline _.textDecorationStyleDouble([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration-style", "double")
+    /// Sets the margin area on the bottom of an element. A positive value places it farther from its
+    /// neighbors, while a negative value places it closer.
+    []
+    member inline _.marginBottom([] comb: CombineKeyValue, value: string) =
+        comb &>> ("margin-bottom", value)
 
-    /// The line will display as a dotted line.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=dotted
-    []
-    member inline _.textDecorationStyleDotted([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration-style", "dotted")
+    /// Sets the padding area on all four sides of an element. It is a shorthand for padding-top,
+    /// padding-right, padding-bottom, and padding-left.
+    []
+    member inline _.padding([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("padding", value)
 
-    /// The line will display as a dashed line.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=dashed
-    []
-    member inline _.textDecorationStyleDashed([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration-style", "dashed")
+    /// Sets the padding area on all four sides of an element. It is a shorthand for padding-top,
+    /// padding-right, padding-bottom, and padding-left.
+    []
+    member inline _.padding([] comb: CombineKeyValue, value: string) = comb &>> ("padding", value)
 
-    /// The line will display as a wavy line.
-    ///
-    /// https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=wavy
-    []
-    member inline _.textDecorationStyleWavy([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration-style", "wavy")
+    /// Sets the padding area for vertical and horizontal axis.
+    []
+    member inline _.padding([] comb: CombineKeyValue, vertical: int, horizontal: int) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("padding: ").Append(vertical).Append("px ").Append(horizontal).Append("px; "))
 
-    /// Sets this property to its default value.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=initial
-    []
-    member inline _.textDecorationStyleInitial([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration-style", "initial")
+    /// Sets the padding area for vertical and horizontal axis.
+    []
+    member inline _.padding([] comb: CombineKeyValue, vertical: string, horizontal: string) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("padding: ").Append(vertical).Append(" ").Append(horizontal).Append("; "))
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.textDecorationStyleInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("text-decoration-style", "inherit")
+    /// Sets the padding area on all four sides of an element. It is a shorthand for padding-top,
+    /// padding-right, padding-bottom, and padding-left.
+    []
+    member inline _.padding
+        ([] comb: CombineKeyValue, top: string, right: string, bottom: string, left: string)
+        =
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("padding: ")
+                .Append(top)
+                .Append(" ")
+                .Append(right)
+                .Append(" ")
+                .Append(bottom)
+                .Append(" ")
+                .Append(left)
+                .Append("; "))
 
-    /// Sets the style of text decorations using a CSS string value (e.g. "wavy", "var(--text-decoration-style)").
-    []
-    member inline _.textDecorationStyle([] comb: CombineKeyValue, value: string) =
-        comb &>> ("text-decoration-style", value)
+    /// Sets the padding area on all four sides of an element. It is a shorthand for padding-top,
+    /// padding-right, padding-bottom, and padding-left.
+    []
+    member inline _.padding([] comb: CombineKeyValue, top: int, right: int, bottom: int, left: int) =
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("padding: ")
+                .Append(top)
+                .Append("px ")
+                .Append(right)
+                .Append("px ")
+                .Append(bottom)
+                .Append("px ")
+                .Append(left)
+                .Append("px; "))
 
-    /// Makes the text as narrow as it gets.
-    []
-    member inline _.fontStretchUltraCondensed([] comb: CombineKeyValue) =
-        comb &>> ("font-stretch", "ultra-condensed")
+    /// Sets the height of the padding area on the bottom of an element.
+    []
+    member inline _.paddingBottom([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("padding-bottom", value)
 
-    /// Makes the text narrower than condensed, but not as narrow as ultra-condensed
-    []
-    member inline _.fontStretchExtraCondensed([] comb: CombineKeyValue) =
-        comb &>> ("font-stretch", "extra-condensed")
+    /// Sets the height of the padding area on the bottom of an element.
+    []
+    member inline _.paddingBottom([] comb: CombineKeyValue, value: string) =
+        comb &>> ("padding-bottom", value)
 
-    /// Makes the text narrower than semi-condensed, but not as narrow as extra-condensed.
-    []
-    member inline _.fontStretchCondensed([] comb: CombineKeyValue) =
-        comb &>> ("font-stretch", "condensed")
+    /// Sets the width of the padding area to the left of an element.
+    []
+    member inline _.paddingLeft([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("padding-left", value)
 
-    /// Makes the text narrower than normal, but not as narrow as condensed.
-    []
-    member inline _.fontStretchSemiCondensed([] comb: CombineKeyValue) =
-        comb &>> ("font-stretch", "semi-condensed")
+    /// Sets the width of the padding area to the left of an element.
+    []
+    member inline _.paddingLeft([] comb: CombineKeyValue, value: string) =
+        comb &>> ("padding-left", value)
 
-    /// Default value. No font stretching
-    []
-    member inline _.fontStretchNormal([] comb: CombineKeyValue) = comb &>> ("font-stretch", "normal")
+    /// Sets the width of the padding area on the right of an element.
+    []
+    member inline _.paddingRight([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("padding-right", value)
 
-    /// Makes the text wider than normal, but not as wide as expanded
-    []
-    member inline _.fontStretchSemiExpanded([] comb: CombineKeyValue) =
-        comb &>> ("font-stretch", "semi-expanded")
+    /// Sets the width of the padding area on the right of an element.
+    []
+    member inline _.paddingRight([] comb: CombineKeyValue, value: string) =
+        comb &>> ("padding-right", value)
 
-    /// Makes the text wider than semi-expanded, but not as wide as extra-expanded
-    []
-    member inline _.fontStretchExpanded([] comb: CombineKeyValue) =
-        comb &>> ("font-stretch", "expanded")
+    /// Sets the height of the padding area on the top of an element.
+    []
+    member inline _.paddingTop([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("padding-top", value)
 
-    /// Makes the text wider than expanded, but not as wide as ultra-expanded
-    []
-    member inline _.fontStretchExtraExpanded([] comb: CombineKeyValue) =
-        comb &>> ("font-stretch", "extra-expanded")
+    /// Sets the height of the padding area on the top of an element.
+    []
+    member inline _.paddingTop([] comb: CombineKeyValue, value: string) =
+        comb &>> ("padding-top", value)
 
-    /// Makes the text as wide as it gets.
-    []
-    member inline _.fontStretchUltraExpanded([] comb: CombineKeyValue) =
-        comb &>> ("font-stretch", "ultra-expanded")
 
-    /// Sets this property to its default value.
-    []
-    member inline _.fontStretchInitial([] comb: CombineKeyValue) = comb &>> ("font-stretch", "initial")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.fontStretchInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("font-stretch", "inherit")
 
-    /// Sets the font stretch using a CSS string value (e.g. "condensed", "var(--font-stretch)").
-    []
-    member inline _.fontStretch([] comb: CombineKeyValue, value: string) =
-        comb &>> ("font-stretch", value)
+    // --------------------------------------------------------------------
+    // Color styles
+    // --------------------------------------------------------------------
 
-    /// The element does not float, (will be displayed just where it occurs in the text). This is default
-    []
-    member inline _.floatStyleNone([] comb: CombineKeyValue) = comb &>> ("float", "none")
 
-    /// The element floats to the left of its container.
-    []
-    member inline _.floatStyleLeft([] comb: CombineKeyValue) = comb &>> ("float", "left")
+    /// The element is hidden (but still takes up space).
+    []
+    member inline _.visibilityHidden([] comb: CombineKeyValue) = comb &>> ("visibility", "hidden")
 
-    /// The element floats to the right of its container.
-    []
-    member inline _.floatStyleRight([] comb: CombineKeyValue) = comb &>> ("float", "right")
+    /// Default value. The element is visible.
+    []
+    member inline _.visibilityVisible([] comb: CombineKeyValue) = comb &>> ("visibility", "visible")
+
+    /// Only for table rows (` `), row groups (` `), columns (``), column groups
+    /// (``). This value removes a row or column, but it does not affect the table layout.
+    /// The space taken up by the row or column will be available for other content.
+    ///
+    /// If collapse is used on other elements, it renders as "hidden")
+    []
+    member inline _.visibilityCollapse([] comb: CombineKeyValue) = comb &>> ("visibility", "collapse")
 
     /// Sets this property to its default value.
-    []
-    member inline _.floatStyleInitial([] comb: CombineKeyValue) = comb &>> ("float", "initial")
+    []
+    member inline _.visibilityInitial([] comb: CombineKeyValue) = comb &>> ("visibility", "initial")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.floatStyleInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("float", "inherit")
+    []
+    member inline _.visibilityInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("visibility", "inherit")
 
-    /// Sets the float behavior using a CSS string value (e.g. "left", "var(--float)").
-    []
-    member inline _.floatStyle([] comb: CombineKeyValue, value: string) = comb &>> ("float", value)
+    /// Sets the visibility of an element using a CSS string value (e.g. "hidden", "var(--visibility)").
+    []
+    member inline _.visibility([] comb: CombineKeyValue, value: string) = comb &>> ("visibility", value)
 
-    /// The element is aligned with the baseline of the parent. This is default.
-    []
-    member inline _.verticalAlignBaseline([] comb: CombineKeyValue) =
-        comb &>> ("vertical-align", "baseline")
+    /// Sets the color of the insertion caret, the visible marker where the next character typed will be inserted.
+    ///
+    /// This is sometimes referred to as the text input cursor. The caret appears in elements such as  or
+    /// those with the contenteditable attribute. The caret is typically a thin vertical line that flashes to
+    /// help make it more noticeable. By default, it is black, but its color can be altered with this property.
+    []
+    member inline _.caretColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("caret-color", color)
 
-    /// The element is aligned with the subscript baseline of the parent
-    []
-    member inline _.verticalAlignSub([] comb: CombineKeyValue) = comb &>> ("vertical-align", "sub")
+    /// Sets the foreground color value of an element's text and text decorations, and sets the
+    /// `currentcolor` value. `currentcolor` may be used as an indirect value on other properties
+    /// and is the default for other color properties, such as border-color.
+    []
+    member inline _.color([] comb: CombineKeyValue, color: string) = comb &>> ("color", color)
 
-    /// The element is aligned with the superscript baseline of the parent.
-    []
-    member inline _.verticalAlignSuper([] comb: CombineKeyValue) = comb &>> ("vertical-align", "super")
+    /// Sets the opacity of an element.
+    ///
+    /// Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
+    []
+    member inline _.opacity([] comb: CombineKeyValue, value: double) =
+        comb &&& mkWithKV ("opacity", value)
 
-    /// The element is aligned with the top of the tallest element on the line.
-    []
-    member inline _.verticalAlignTop([] comb: CombineKeyValue) = comb &>> ("vertical-align", "top")
+    /// Sets the color of an SVG shape.
+    []
+    member inline _.fill([] comb: CombineKeyValue, color: string) = comb &>> ("fill", color)
 
-    /// The element is aligned with the top of the parent element's font.
-    []
-    member inline _.verticalAlignTextTop([] comb: CombineKeyValue) =
-        comb &>> ("vertical-align", "text-top")
 
-    /// The element is placed in the middle of the parent element.
-    []
-    member inline _.verticalAlignMiddle([] comb: CombineKeyValue) =
-        comb &>> ("vertical-align", "middle")
 
-    /// The element is aligned with the lowest element on the line.
-    []
-    member inline _.verticalAlignBottom([] comb: CombineKeyValue) =
-        comb &>> ("vertical-align", "bottom")
 
-    /// The element is aligned with the bottom of the parent element's font
-    []
-    member inline _.verticalAlignTextBottom([] comb: CombineKeyValue) =
-        comb &>> ("vertical-align", "text-bottom")
+    // --------------------------------------------------------------------
+    // Filter styles
+    // --------------------------------------------------------------------
 
-    /// Sets this property to its default value.
-    []
-    member inline _.verticalAlignInitial([] comb: CombineKeyValue) =
-        comb &>> ("vertical-align", "initial")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.verticalAlignInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("vertical-align", "inherit")
+    /// Default value. Specifies no effects.
+    []
+    member inline _.filterNone([] comb: CombineKeyValue) = comb &>> ("filter", "none")
 
-    /// Sets the vertical alignment using a CSS string value (e.g. "middle", "0.5em", "var(--vertical-align)").
-    []
-    member inline _.verticalAlign([] comb: CombineKeyValue, value: string) =
-        comb &>> ("vertical-align", value)
+    /// Applies a blur effect to the elemeen. A larger value will create more blur.
+    ///
+    /// This overload takes an integer that represents a percentage from 0 to 100.
+    []
+    member inline _.filterBlur([] comb: CombineKeyValue, value: int) =
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: blur(").Append(value).Append("%); "))
 
-    /// Let the content flow horizontally from left to right, vertically from top to bottom
-    []
-    member inline _.writingModeHorizontalTopBottom([] comb: CombineKeyValue) =
-        comb &>> ("writing-mode", "horizontal-tb")
+    /// Applies a blur effect to the elemeen. A larger value will create more blur.
+    ///
+    /// This overload takes a floating number that goes from 0 to 1,
+    []
+    member inline _.filterBlur([] comb: CombineKeyValue, value: double) =
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: blur(").Append(value * 100.).Append("%); "))
 
-    /// Let the content flow vertically from top to bottom, horizontally from right to left
-    []
-    member inline _.writingModeVerticalRightLeft([] comb: CombineKeyValue) =
-        comb &>> ("writing-mode", "vertical-rl")
+    /// Adjusts the brightness of the elemeen
+    ///
+    /// This overload takes an integer that represents a percentage from 0 to 100.
+    ///
+    /// Values over 100% will provide brighter results.
+    []
+    member inline _.filterBrightness([] comb: CombineKeyValue, value: int) =
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: brightness(").Append(value).Append("%); "))
 
-    /// Let the content flow vertically from top to bottom, horizontally from left to right
-    []
-    member inline _.writingModeVerticalLeftRight([] comb: CombineKeyValue) =
-        comb &>> ("writing-mode", "vertical-lr")
+    /// Adjusts the brightness of the elemeen. A larger value will create more blur.
+    ///
+    /// This overload takes a floating number that goes from 0 to 1,
+    []
+    member inline _.filterBrightness([] comb: CombineKeyValue, value: double) =
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: brightness(").Append(value * 100.).Append("%); "))
 
-    /// Sets this property to its default value.
-    []
-    member inline _.writingModeInitial([] comb: CombineKeyValue) = comb &>> ("writing-mode", "initial")
+    /// Adjusts the contrast of the element.
+    ///
+    /// This overload takes an integer that represents a percentage from 0 to 100.
+    []
+    member inline _.filterContrast([] comb: CombineKeyValue, value: int) =
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: contrast(").Append(value).Append("%); "))
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.writingModeInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("writing-mode", "inherit")
+    /// Adjusts the contrast of the element. A larger value will create more contrast.
+    ///
+    /// This overload takes a floating number that goes from 0 to 1
+    []
+    member inline _.filterContrast([] comb: CombineKeyValue, value: double) =
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: contrast(").Append(value * 100.).Append("%); "))
 
-    /// Sets the writing mode using a CSS string value (e.g. "vertical-rl", "var(--writing-mode)").
-    []
-    member inline _.writingMode([] comb: CombineKeyValue, value: string) =
-        comb &>> ("writing-mode", value)
+    /// Applies a drop shadow effect.
+    []
+    member inline _.filterDropShadow
+        (
+            [] comb: CombineKeyValue,
+            horizontalOffset: int,
+            verticalOffset: int,
+            blur: int,
+            spread: int,
+            color: string
+        ) =
+        comb
+        &&& CombineKeyValue(fun sb ->
+            sb
+                .Append("filter: drop-shadow(")
+                .Append(horizontalOffset)
+                .Append("px ")
+                .Append(verticalOffset)
+                .Append("px ")
+                .Append(blur)
+                .Append("px ")
+                .Append(spread)
+                .Append("px ")
+                .Append(color)
+                .Append("); "))
 
-    /// Specifies a shorthand for all the animation properties. Accepts a CSS animation string (e.g. "slidein 3s ease-in 1s infinite reverse both paused").
-    []
-    member inline _.animation([] comb: CombineKeyValue, x: string) = comb &>> ("animation", x)
+    /// Applies a drop shadow effect.
+    []
+    member inline _.filterDropShadow
+        ([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, blur: int, color: string)
+        =
+        comb
+        &&& CombineKeyValue(fun sb ->
+            sb
+                .Append("filter: drop-shadow(")
+                .Append(horizontalOffset)
+                .Append("px ")
+                .Append(verticalOffset)
+                .Append("px ")
+                .Append(blur)
+                .Append("px ")
+                .Append(color)
+                .Append("); "))
 
-    /// Default value. Specifies a animation effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)).
-    []
-    member inline _.animationTimingFunctionEase([] comb: CombineKeyValue) =
-        comb &>> ("animation-timing-function", "ease")
-
-    /// Specifies a animation effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)))
-    []
-    member inline _.animationTimingFunctionLinear([] comb: CombineKeyValue) =
-        comb &>> ("animation-timing-function", "linear")
-
-    /// Specifies a animation effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)).
-    []
-    member inline _.animationTimingFunctionEaseIn([] comb: CombineKeyValue) =
-        comb &>> ("animation-timing-function", "ease-in")
-
-    /// Specifies a animation effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)).
-    []
-    member inline _.animationTimingFunctionEaseOut([] comb: CombineKeyValue) =
-        comb &>> ("animation-timing-function", "ease-out")
-
-    /// Specifies a animation effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)))
-    []
-    member inline _.animationTimingFunctionEaseInOut([] comb: CombineKeyValue) =
-        comb &>> ("animation-timing-function", "ease-in-out")
-
-    /// Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
-    []
-    member inline _.animationTimingFunctionCubicBezier
-        ([] comb: CombineKeyValue, n1: float, n2: float, n3: float, n4: float)
+    /// Applies a drop shadow effect.
+    []
+    member inline _.filterDropShadow
+        ([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, color: string)
         =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("animation-timing-function: ")
-                .Append("cubic-bezier(")
-                .Append(n1)
-                .Append(",")
-                .Append(n2)
-                .Append(",")
-                .Append(n3)
-                .Append(",")
-                .Append(n4)
+        comb
+        &&& CombineKeyValue(fun sb ->
+            sb
+                .Append("filter: drop-shadow(")
+                .Append(horizontalOffset)
+                .Append("px ")
+                .Append(verticalOffset)
+                .Append("px ")
+                .Append(color)
                 .Append("); "))
 
-    /// Sets this property to its default value)
-    []
-    member inline _.animationTimingFunctionInitial([] comb: CombineKeyValue) =
-        comb &>> ("animation-timing-function", "initial")
+    /// Converts the image to grayscale
+    ///
+    /// This overload takes an integer that represents a percentage from 0 to 100.
+    []
+    member inline _.filterGrayscale([] comb: CombineKeyValue, value: int) =
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: grayscale(").Append(value).Append("%); "))
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.animationTimingFunctionInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("animation-timing-function", "inherit")
+    /// Converts the image to grayscale
+    ///
+    /// This overload takes a floating number that goes from 0 to 1
+    []
+    member inline _.filterGrayscale([] comb: CombineKeyValue, value: double) =
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: grayscale(").Append(value).Append("%); "))
 
-    /// Sets the animation timing function using a CSS string value (e.g. "ease-in", "cubic-bezier(0.1,0.7,1,0.1)", "var(--animation-timing)").
-    []
-    member inline _.animationTimingFunction([] comb: CombineKeyValue, value: string) =
-        comb &>> ("animation-timing-function", value)
+    /// Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image
+    /// samples will be adjusted. 0deg is default, and represents the original image.
+    ///
+    /// **Note**: Maximum value is 360
+    []
+    member inline _.filterHueRotate([] comb: CombineKeyValue, degrees: int) =
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("filter: hue-rotate(").Append(degrees).Append("deg); "))
 
-    /// Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)).
-    []
-    member inline _.transitionTimingFunctionEase([] comb: CombineKeyValue) =
-        comb &>> ("transition-timing-function", "ease")
+    /// Inverts the element.
+    ///
+    /// This overload takes an integer that represents a percentage from 0 to 100.
+    []
+    member inline _.filterInvert([] comb: CombineKeyValue, value: int) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("invert(").Append(value).Append("%); "))
 
-    /// Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)))
-    []
-    member inline _.transitionTimingFunctionLinear([] comb: CombineKeyValue) =
-        comb &>> ("transition-timing-function", "linear")
+    /// Inverts the element.
+    ///
+    /// This overload takes a floating number that goes from 0 to 1
+    []
+    member inline _.filterInvert([] comb: CombineKeyValue, value: double) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("invert(").Append(value).Append("%); "))
 
-    /// Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)).
-    []
-    member inline _.transitionTimingFunctionEaseIn([] comb: CombineKeyValue) =
-        comb &>> ("transition-timing-function", "ease-in")
+    /// Sets the opacity of the element.
+    ///
+    /// This overload takes an integer that represents a percentage from 0 to 100.
+    []
+    member inline _.filterOpacity([] comb: CombineKeyValue, value: int) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("opacity(").Append(value).Append("%); "))
 
-    /// Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)).
-    []
-    member inline _.transitionTimingFunctionEaseOut([] comb: CombineKeyValue) =
-        comb &>> ("transition-timing-function", "ease-out")
+    /// Sets the opacity of the element.
+    ///
+    /// This overload takes a floating number that goes from 0 to 1
+    []
+    member inline _.filterOpacity([] comb: CombineKeyValue, value: double) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("opacity(").Append(value).Append("%); "))
 
-    /// Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)))
-    []
-    member inline _.transitionTimingFunctionEaseInOut([] comb: CombineKeyValue) =
-        comb &>> ("transition-timing-function", "ease-in-out")
+    /// Sets the saturation of the element.
+    ///
+    /// This overload takes an integer that represents a percentage from 0 to 100.
+    []
+    member inline _.filterSaturate([] comb: CombineKeyValue, value: int) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("saturate(").Append(value).Append("%); "))
 
-    /// Equivalent to steps(1, start))
-    []
-    member inline _.transitionTimingFunctionStepStart([] comb: CombineKeyValue) =
-        comb &>> ("transition-timing-function", "step-start")
+    /// Sets the saturation of the element.
+    ///
+    /// This overload takes a floating number that goes from 0 to 1
+    []
+    member inline _.filterSaturate([] comb: CombineKeyValue, value: double) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("saturate(").Append(value).Append("%); "))
 
-    /// Equivalent to steps(1, end))
-    []
-    member inline _.transitionTimingFunctionStepEnd([] comb: CombineKeyValue) =
-        comb &>> ("transition-timing-function", "step-end")
+    /// Applies Sepia filter to the element.
+    ///
+    /// This overload takes an integer that represents a percentage from 0 to 100.
+    []
+    member inline _.filterSepia([] comb: CombineKeyValue, value: int) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("sepia(").Append(value).Append("); "))
 
-    /// Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
-    []
-    member inline _.transitionTimingFunctionCubicBezier
-        ([] comb: CombineKeyValue, n1: float, n2: float, n3: float, n4: float)
-        =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("transition-timing-function: ")
-                .Append("cubic-bezier(")
-                .Append(n1)
-                .Append(",")
-                .Append(n2)
-                .Append(",")
-                .Append(n3)
-                .Append(",")
-                .Append(n4)
-                .Append("); "))
+    /// Applies Sepia filter to the element.
+    ///
+    /// This overload takes a floating number that goes from 0 to 1
+    []
+    member inline _.filterSepia([] comb: CombineKeyValue, value: double) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("sepia(").Append(value).Append("); "))
 
-    /// Sets this property to its default value)
-    []
-    member inline _.transitionTimingFunctionInitial([] comb: CombineKeyValue) =
-        comb &>> ("transition-timing-function", "initial")
+    /// The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.
+    ///
+    /// Example: `filter: url(svg-url#element-id)`
+    []
+    member inline _.filterUrl([] comb: CombineKeyValue, value: string) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("filter: ").Append("url(").Append(value).Append("); "))
+
+    /// Sets this property to its default value.
+    []
+    member inline _.filterInitial([] comb: CombineKeyValue) = comb &>> ("filter", "initial")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.transitionTimingFunctionInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("transition-timing-function", "inherit")
+    []
+    member inline _.filterInheritFromParent([] comb: CombineKeyValue) = comb &>> ("filter", "inherit")
 
-    /// Sets the transition timing function using a CSS string value (e.g. "ease-in", "steps(4, end)", "var(--transition-timing)").
-    []
-    member inline _.transitionTimingFunction([] comb: CombineKeyValue, value: string) =
-        comb &>> ("transition-timing-function", value)
+    /// Sets the filter effects using a CSS string value (e.g. "blur(4px) grayscale(50%)", "var(--filter)").
+    []
+    member inline _.filter([] comb: CombineKeyValue, value: string) = comb &>> ("filter", value)
 
-    /// Default. Text can be selected if the browser allows it.
-    []
-    member inline _.userSelectAuto([] comb: CombineKeyValue) = comb &>> ("user-select", "auto")
 
-    /// Prevents text selection.
-    []
-    member inline _.userSelectNone([] comb: CombineKeyValue) = comb &>> ("user-select", "none")
 
-    /// The text can be selected by the user.
-    []
-    member inline _.userSelectText([] comb: CombineKeyValue) = comb &>> ("user-select", "text")
 
-    /// Text selection is made with one click instead of a double-click.
-    []
-    member inline _.userSelectAll([] comb: CombineKeyValue) = comb &>> ("user-select", "all")
+    // --------------------------------------------------------------------
+    // Flex styles
+    // --------------------------------------------------------------------
+
+
+    /// Default value. The length is equal to the length of the flexible item. If the item has
+    /// no length specified, the length will be according to its content.
+    []
+    member inline _.flexBasisAuto([] comb: CombineKeyValue) = comb &>> ("flex-basis", "auto")
 
     /// Sets this property to its default value.
-    []
-    member inline _.userSelectInitial([] comb: CombineKeyValue) = comb &>> ("user-select", "initial")
+    []
+    member inline _.flexBasisInitial([] comb: CombineKeyValue) = comb &>> ("flex-basis", "initial")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.userSelectInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("user-select", "inherit")
-
-    /// Sets whether the user can select text using a CSS string value (e.g. "none", "var(--user-select)").
-    []
-    member inline _.userSelect([] comb: CombineKeyValue, value: string) =
-        comb &>> ("user-select", value)
+    []
+    member inline _.flexBasisInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("flex-basis", "inherit")
 
-    /// Sets the line style for all four sides of an element's border.
-    []
-    member inline _.borderStyle([] comb: CombineKeyValue, style: string) =
-        comb &>> ("border-style", style)
+    /// Default value. The flexible items are displayed horizontally, as a row
+    []
+    member inline _.flexDirectionRow([] comb: CombineKeyValue) = comb &>> ("flex-direction", "row")
 
-    /// Specifies a dotted border.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
-    []
-    member inline _.borderStyleDotted([] comb: CombineKeyValue) = comb &>> ("border-style", "dotted")
+    /// Same as row, but in reverse order.
+    []
+    member inline _.flexDirectionRowReverse([] comb: CombineKeyValue) =
+        comb &>> ("flex-direction", "row-reverse")
 
-    /// Specifies a dashed border.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
-    []
-    member inline _.borderStyleDashed([] comb: CombineKeyValue) = comb &>> ("border-style", "dashed")
-
-    /// Specifies a solid border.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
-    []
-    member inline _.borderStyleSolid([] comb: CombineKeyValue) = comb &>> ("border-style", "solid")
-
-    /// Specifies a double border.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
-    []
-    member inline _.borderStyleDouble([] comb: CombineKeyValue) = comb &>> ("border-style", "double")
-
-    /// Specifies a 3D grooved border. The effect depends on the border-color value.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
-    []
-    member inline _.borderStyleGroove([] comb: CombineKeyValue) = comb &>> ("border-style", "groove")
-
-    /// Specifies a 3D ridged border. The effect depends on the border-color value.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
-    []
-    member inline _.borderStyleRidge([] comb: CombineKeyValue) = comb &>> ("border-style", "ridge")
-
-    /// Specifies a 3D inset border. The effect depends on the border-color value.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
-    []
-    member inline _.borderStyleInset([] comb: CombineKeyValue) = comb &>> ("border-style", "inset")
-
-    /// Specifies a 3D outset border. The effect depends on the border-color value.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
-    []
-    member inline _.borderStyleOutset([] comb: CombineKeyValue) = comb &>> ("border-style", "outset")
-
-    /// Default value. Specifies no border.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=dotted
-    []
-    member inline _.borderStyleNone([] comb: CombineKeyValue) = comb &>> ("border-style", "none")
+    /// The flexible items are displayed vertically, as a column
+    []
+    member inline _.flexDirectionColumn([] comb: CombineKeyValue) =
+        comb &>> ("flex-direction", "column")
 
-    /// The same as "none", except in border conflict resolution for table elements.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=hidden
-    []
-    member inline _.borderStyleHidden([] comb: CombineKeyValue) = comb &>> ("border-style", "hidden")
+    /// Same as column, but in reverse order
+    []
+    member inline _.flexDirectionColumnReverse([] comb: CombineKeyValue) =
+        comb &>> ("flex-direction", "column-reverse")
 
     /// Sets this property to its default value.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=hidden
-    ///
-    /// Read about initial value https://www.w3schools.com/cssref/css_initial.asp
-    []
-    member inline _.borderStyleInitial([] comb: CombineKeyValue) = comb &>> ("border-style", "initial")
+    []
+    member inline _.flexDirectionInitial([] comb: CombineKeyValue) =
+        comb &>> ("flex-direction", "initial")
 
     /// Inherits this property from its parent element.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=hidden
-    ///
-    /// Read about inherit https://www.w3schools.com/cssref/css_inherit.asp
-    []
-    member inline _.borderStyleInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("border-style", "inherit")
+    []
+    member inline _.flexDirectionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("flex-direction", "inherit")
 
-    /// Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable
-    /// content in the cells. The content will dictate the layout
-    []
-    member inline _.tableLayoutAuto([] comb: CombineKeyValue) = comb &>> ("table-layout", "auto")
+    /// Sets the direction of flexible items using a CSS string value (e.g. "row", "var(--flex-direction)").
+    []
+    member inline _.flexDirection([] comb: CombineKeyValue, value: string) =
+        comb &>> ("flex-direction", value)
 
-    /// Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col
-    /// or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths
-    /// are present on the first row, the column widths are divided equally across the table, regardless of content
-    /// inside the cells
-    []
-    []
-    member inline _.tableLayoutFixed'([] comb: CombineKeyValue) = comb &>> ("table-layout", "fixed")
+    /// Default value. Specifies that the flexible items will not wrap.
+    []
+    member inline _.flexWrapNowrap([] comb: CombineKeyValue) = comb &>> ("flex-wrap", "nowrap")
 
-    /// Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col elements or by the width of the first row of cells.
-    []
-    member inline _.tableLayoutFixed([] comb: CombineKeyValue) = comb &>> ("table-layout", "fixed")
+    /// Specifies that the flexible items will wrap if necessary
+    []
+    member inline _.flexWrapWrap([] comb: CombineKeyValue) = comb &>> ("flex-wrap", "wrap")
+
+    /// Specifies that the flexible items will wrap, if necessary, in reverse order
+    []
+    member inline _.flexWrapWrapReverse([] comb: CombineKeyValue) =
+        comb &>> ("flex-wrap", "wrap-reverse")
 
     /// Sets this property to its default value.
-    []
-    member inline _.tableLayoutInitial([] comb: CombineKeyValue) = comb &>> ("table-layout", "initial")
+    []
+    member inline _.flexWrapInitial([] comb: CombineKeyValue) = comb &>> ("flex-wrap", "initial")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.tableLayoutInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("table-layout", "inherit")
+    []
+    member inline _.flexWrapInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("flex-wrap", "inherit")
 
-    /// Sets the table layout algorithm using a CSS string value (e.g. "fixed", "var(--table-layout)").
-    []
-    member inline _.tableLayout([] comb: CombineKeyValue, value: string) =
-        comb &>> ("table-layout", value)
+    /// Sets whether flexible items wrap using a CSS string value (e.g. "wrap", "var(--flex-wrap)").
+    []
+    member inline _.flexWrap([] comb: CombineKeyValue, value: string) = comb &>> ("flex-wrap", value)
 
-    /// Specifies the mouse cursor to display when pointing over an element. Accepts a CSS cursor value (a keyword or a url()).
-    []
-    member inline _.cursor([] comb: CombineKeyValue, value: string) = comb &>> ("cursor", value)
+    /// Sets the flex shrink factor of a flex item. If the size of all flex items is larger than
+    /// the flex container, items shrink to fit according to flex-shrink.
+    []
+    member inline _.flexShrink([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("flex-shrink", value)
 
-    /// The User Agent will determine the cursor to display based on the current context. E.g., equivalent to text when hovering text.
-    []
-    member inline _.cursorAuto([] comb: CombineKeyValue) = comb &>> ("cursor", "auto")
+    /// Sets the initial main size of a flex item. It sets the size of the content box unless
+    /// otherwise set with box-sizing.
+    []
+    member inline _.flexBasis([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("flex-basis", value)
 
-    /// The cursor indicates an alias of something is to be created
-    []
-    member inline _.cursorAlias([] comb: CombineKeyValue) = comb &>> ("cursor", "alias")
+    /// Sets the initial main size of a flex item. It sets the size of the content box unless
+    /// otherwise set with box-sizing.
+    []
+    member inline _.flexBasis([] comb: CombineKeyValue, value: string) = comb &>> ("flex-basis", value)
 
-    /// The platform-dependent default cursor. Typically an arrow.
-    []
-    member inline _.cursorDefaultCursor([] comb: CombineKeyValue) = comb &>> ("cursor", "default")
+    /// Sets the flex grow factor of a flex item main size. It specifies how much of the remaining
+    /// space in the flex container should be assigned to the item (the flex grow factor).
+    []
+    member inline _.flexGrow([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("flex-grow", value)
 
-    /// No cursor is rendered.
-    []
-    member inline _.cursorNone([] comb: CombineKeyValue) = comb &>> ("cursor", "none")
+    /// Shorthand of flex-grow, flex-shrink and flex-basis
+    []
+    member inline _.flex([] comb: CombineKeyValue, grow: int, shrink: int, ?basis: string) =
+        CombineKeyValue(fun sb ->
+            let sb = comb.Invoke(sb).Append("flex: ")
+            sb.Append(grow) |> ignore
+            sb.Append(' ').Append(shrink) |> ignore
+            basis |> Option.iter (fun x -> sb.Append(' ').Append(x) |> ignore)
+            sb.Append("; "))
 
-    /// A context menu is available.
-    []
-    member inline _.cursorContextMenu([] comb: CombineKeyValue) = comb &>> ("cursor", "context-menu")
+    /// Shorthand of flex-grow and flex-basis
+    []
+    member inline _.flex([] comb: CombineKeyValue, grow: int, ?basis: string) =
+        CombineKeyValue(fun sb ->
+            let sb = comb.Invoke(sb).Append("flex: ")
+            sb.Append(grow) |> ignore
+            basis |> Option.iter (fun x -> sb.Append(' ').Append(x) |> ignore)
+            sb.Append("; "))
 
-    /// Help information is available.
-    []
-    member inline _.cursorHelp([] comb: CombineKeyValue) = comb &>> ("cursor", "help")
+    /// Shorthand of flex-grow, flex-shrink and flex-basis
+    []
+    member inline _.flex([] comb: CombineKeyValue, value: string) = comb &>> ("flex", value)
 
-    /// The cursor is a pointer that indicates a link. Typically an image of a pointing hand.
-    []
-    member inline _.cursorPointer([] comb: CombineKeyValue) = comb &>> ("cursor", "pointer")
+    /// Sets the order of a flex item. Accepts a CSS order value.
+    []
+    member inline _.order([] comb: CombineKeyValue, value: int) = comb &&& mkWithKV ("order", value)
 
-    /// The program is busy in the background, but the user can still interact with the interface (in contrast to `wait`).
-    []
-    member inline _.cursorProgress([] comb: CombineKeyValue) = comb &>> ("cursor", "progress")
+    /// Sets the order of a flex item using a CSS string value (e.g. "1", "var(--order)").
+    []
+    member inline _.order([] comb: CombineKeyValue, value: string) = comb &>> ("order", value)
 
-    /// The program is busy, and the user can't interact with the interface (in contrast to progress). Sometimes an image of an hourglass or a watch.
-    []
-    member inline _.cursorWait([] comb: CombineKeyValue) = comb &>> ("cursor", "wait")
+    /// Shorthand for flex-direction and flex-wrap (e.g. "row wrap", "column nowrap").
+    []
+    member inline _.flexFlow([] comb: CombineKeyValue, value: string) = comb &>> ("flex-flow", value)
 
-    /// The table cell or set of cells can be selected.
-    []
-    member inline _.cursorCell([] comb: CombineKeyValue) = comb &>> ("cursor", "cell")
 
-    /// Cross cursor, often used to indicate selection in a bitmap.
-    []
-    member inline _.cursorCrosshair([] comb: CombineKeyValue) = comb &>> ("cursor", "crosshair")
 
-    /// The text can be selected. Typically the shape of an I-beam.
-    []
-    member inline _.cursorText([] comb: CombineKeyValue) = comb &>> ("cursor", "text")
 
-    /// The vertical text can be selected. Typically the shape of a sideways I-beam.
-    []
-    member inline _.cursorVerticalText([] comb: CombineKeyValue) = comb &>> ("cursor", "vertical-text")
+    // --------------------------------------------------------------------
+    // Grid styles
+    // --------------------------------------------------------------------
 
-    /// Something is to be copied.
-    []
-    member inline _.cursorCopy([] comb: CombineKeyValue) = comb &>> ("cursor", "copy")
 
-    /// Something is to be moved.
-    []
-    member inline _.cursorMove([] comb: CombineKeyValue) = comb &>> ("cursor", "move")
+    /// Sets the width of each individual grid column in pixels.
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-template-columns: 100px 200px 100px;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// gridTemplateColumns: [100; 200; 100]
+    /// ```
+    []
+    member inline _.gridTemplateColumns([] comb: CombineKeyValue, value: int seq) =
+        CombineKeyValue(fun sb ->
+            let sb = comb.Invoke(sb).Append("grid-template-columns: ")
+            use e = value.GetEnumerator()
 
-    /// An item may not be dropped at the current location. On Windows and Mac OS X, `no-drop` is the same as `not-allowed`.
-    []
-    member inline _.cursorNoDrop([] comb: CombineKeyValue) = comb &>> ("cursor", "no-drop")
+            if e.MoveNext() then
+                sb.Append(e.Current).Append("px") |> ignore
 
-    /// The requested action will not be carried out.
-    []
-    member inline _.cursorNotAllowed([] comb: CombineKeyValue) = comb &>> ("cursor", "not-allowed")
+                while e.MoveNext() do
+                    sb.Append(" ").Append(e.Current).Append("px") |> ignore
 
-    /// Something can be grabbed (dragged to be moved).
-    []
-    member inline _.cursorGrab([] comb: CombineKeyValue) = comb &>> ("cursor", "grab")
+            sb.Append("; "))
 
-    /// Something is being grabbed (dragged to be moved).
-    []
-    member inline _.cursorGrabbing([] comb: CombineKeyValue) = comb &>> ("cursor", "grabbing")
+    /// Sets the width of each individual grid column.
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-template-columns: 1fr 1fr 2fr;
+    /// ```
+    []
+    member inline _.gridTemplateColumns([] comb: CombineKeyValue, value) =
+        comb &>> ("grid-template-columns", value)
 
-    /// Something can be scrolled in any direction (panned).
-    []
-    member inline _.cursorAllScroll([] comb: CombineKeyValue) = comb &>> ("cursor", "all-scroll")
-
-    /// The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
-    []
-    member inline _.cursorColumnResize([] comb: CombineKeyValue) = comb &>> ("cursor", "col-resize")
-
-    /// The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
-    []
-    member inline _.cursorRowResize([] comb: CombineKeyValue) = comb &>> ("cursor", "row-resize")
+    /// Sets the width of a number of grid columns to the defined width, as well as naming the lines between them
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-template-columns: repeat(3, 1fr [col-start]);
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridTemplateColumns (3, "1fr", "col-start"))
+    /// ```
+    []
+    member inline _.gridTemplateColumns
+        ([] comb: CombineKeyValue, count: int, size: string, ?areaName: string)
+        =
+        let areaName =
+            match areaName with
+            | Some n -> ", [" + n + "]"
+            | None -> ""
 
-    /// Directional resize arrow
-    []
-    member inline _.cursorNorthResize([] comb: CombineKeyValue) = comb &>> ("cursor", "n-resize")
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("grid-template-columns: ")
+                .Append("repeat(")
+                .Append(count)
+                .Append(", ")
+                .Append(size)
+                .Append(areaName)
+                .Append("); "))
 
-    /// Directional resize arrow
-    []
-    member inline _.cursorEastResize([] comb: CombineKeyValue) = comb &>> ("cursor", "e-resize")
+    /// Sets the width of a number of grid rows to the defined width
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-template-rows: 100px 200px 100px;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridTemplateRows [100, 200, 100]
+    /// ```
+    []
+    member inline _.gridTemplateRows([] comb: CombineKeyValue, value: int seq) =
+        CombineKeyValue(fun sb ->
+            let sb = comb.Invoke(sb).Append("grid-template-rows: ")
+            use e = value.GetEnumerator()
 
-    /// Directional resize arrow
-    []
-    member inline _.cursorSouthResize([] comb: CombineKeyValue) = comb &>> ("cursor", "s-resize")
+            if e.MoveNext() then
+                sb.Append(e.Current).Append("px") |> ignore
 
-    /// Directional resize arrow
-    []
-    member inline _.cursorWestResize([] comb: CombineKeyValue) = comb &>> ("cursor", "w-resize")
+                while e.MoveNext() do
+                    sb.Append(" ").Append(e.Current).Append("px") |> ignore
 
-    /// Directional resize arrow
-    []
-    member inline _.cursorNorthEastResize([] comb: CombineKeyValue) = comb &>> ("cursor", "ne-resize")
+            sb.Append("; "))
 
-    /// Directional resize arrow
-    []
-    member inline _.cursorNorthWestResize([] comb: CombineKeyValue) = comb &>> ("cursor", "nw-resize")
+    /// Sets the width of a number of grid rows to the defined width
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-template-rows: 1fr 10% 250px auto;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridTemplateRows ["1fr"]
+    /// ```
+    []
+    member inline _.gridTemplateRows([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-template-rows", value)
 
-    /// Directional resize arrow
-    []
-    member inline _.cursorSouthEastResize([] comb: CombineKeyValue) = comb &>> ("cursor", "se-resize")
+    /// Sets the width of a number of grid rows to the defined width
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-template-rows: repeat(3, 10%);
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridTemplateRows (3, length.percent 10))
+    /// ```
+    []
+    member inline _.gridTemplateRows
+        ([] comb: CombineKeyValue, count: int, size: string, ?areaName: string)
+        =
+        let areaName =
+            match areaName with
+            | Some n -> " [" + n + "]"
+            | None -> ""
 
-    /// Directional resize arrow
-    []
-    member inline _.cursorSouthWestResize([] comb: CombineKeyValue) = comb &>> ("cursor", "sw-resize")
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("grid-template-rows: ")
+                .Append("repeat(")
+                .Append(count)
+                .Append(", ")
+                .Append(size)
+                .Append(areaName)
+                .Append("); "))
 
-    /// Directional resize arrow
-    []
-    member inline _.cursorEastWestResize([] comb: CombineKeyValue) = comb &>> ("cursor", "ew-resize")
+    /// 2D representation of grid layout as blocks with names
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-template-areas:
+    ///     'header header header header'
+    ///     'nav nav . sidebar'
+    ///     'footer footer footer footer';
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridTemplateAreas [
+    ///     "header header header header"
+    ///     "nav    nav    .      sidebar"
+    ///     "footer footer footer footer"
+    /// ]
+    /// ```
+    []
+    member inline _.gridTemplateAreas([] comb: CombineKeyValue, value: string list) =
+        CombineKeyValue(fun sb ->
+            let sb = comb.Invoke(sb).Append("grid-template-areas: ")
+            let mutable first = true
 
-    /// Directional resize arrow
-    []
-    member inline _.cursorNorthSouthResize([] comb: CombineKeyValue) = comb &>> ("cursor", "ns-resize")
+            for item in value do
+                if first then first <- false else sb.Append(" ") |> ignore
+                sb.Append("'").Append(item).Append("'") |> ignore
 
-    /// Directional resize arrow
-    []
-    member inline _.cursorNorthEastSouthWestResize([] comb: CombineKeyValue) =
-        comb &>> ("cursor", "nesw-resize")
+            sb.Append("; "))
 
-    /// Directional resize arrow
-    []
-    member inline _.cursorNorthWestSouthEastResize([] comb: CombineKeyValue) =
-        comb &>> ("cursor", "nwse-resize")
+    /// Specifies the size of the grid lines. You can think of it like
+    /// setting the width of the gutters between the columns.
+    ///
+    /// **CSS**
+    /// ```css
+    /// column-gap: 10px;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.columnGap 10
+    /// ```
+    []
+    member inline _.columnGap([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("column-gap", value)
 
-    /// Something can be zoomed (magnified) in
-    []
-    member inline _.cursorZoomIn([] comb: CombineKeyValue) = comb &>> ("cursor", "zoom-in")
+    /// Specifies the size of the grid lines. You can think of it like
+    /// setting the width of the gutters between the columns.
+    ///
+    /// **CSS**
+    /// ```css
+    /// column-gap: 1em;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.columnGap (length.em 1))
+    /// ```
+    []
+    member inline _.columnGap([] comb: CombineKeyValue, value: string) = comb &>> ("column-gap", value)
 
-    /// Something can be zoomed out
-    []
-    member inline _.cursorZoomOut([] comb: CombineKeyValue) = comb &>> ("cursor", "zoom-out")
+    /// Specifies the size of the grid lines. You can think of it like
+    /// setting the width of the gutters between the rows.
+    ///
+    /// **CSS**
+    /// ```css
+    /// row-gap: 10px;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.rowGap 10
+    /// ```
+    []
+    member inline _.rowGap([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("row-gap", value)
 
-    /// Permits the user agent to render a custom outline style.
-    []
-    member inline _.outlineStyleAuto([] comb: CombineKeyValue) = comb &>> ("outline-style", "auto")
+    /// Specifies the size of the grid lines. You can think of it like
+    /// setting the width of the gutters between the rows.
+    ///
+    /// **CSS**
+    /// ```css
+    /// row-gap: 1em;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.rowGap (length.em 1))
+    /// ```
+    []
+    member inline _.rowGap([] comb: CombineKeyValue, value: string) = comb &>> ("row-gap", value)
 
-    /// Specifies no outline. This is default.
-    []
-    member inline _.outlineStyleNone([] comb: CombineKeyValue) = comb &>> ("outline-style", "none")
+    /// Specifies the size of the grid lines. You can think of it like
+    /// setting the width of the gutters between the rows/columns.
+    ///
+    /// _Shorthand for `rowGap` and `columnGap`_
+    ///
+    /// **CSS**
+    /// ```css
+    /// gap: 1em 2em;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gap (length.em 1, length.em 2))
+    /// ```
+    []
+    member inline _.gap([] comb: CombineKeyValue, rowGap: string, columnGap: string) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("gap: ").Append(rowGap).Append(" ").Append(columnGap).Append("; "))
 
-    /// Specifies a hidden outline
-    []
-    member inline _.outlineStyleHidden([] comb: CombineKeyValue) = comb &>> ("outline-style", "hidden")
+    /// Sets the gap (both row and column) to the same CSS length value.
+    []
+    member inline _.gap([] comb: CombineKeyValue, gap: string) = comb &>> ("gap", gap)
 
-    /// Specifies a dotted outline
-    []
-    member inline _.outlineStyleDotted([] comb: CombineKeyValue) = comb &>> ("outline-style", "dotted")
+    /// Sets the gap (both row and column) in pixels.
+    []
+    member inline _.gap([] comb: CombineKeyValue, gap: int) = comb &>> ("gap", string gap + "px")
 
-    /// Specifies a dashed outline
-    []
-    member inline _.outlineStyleDashed([] comb: CombineKeyValue) = comb &>> ("outline-style", "dashed")
-
-    /// Specifies a solid outline
-    []
-    member inline _.outlineStyleSolid([] comb: CombineKeyValue) = comb &>> ("outline-style", "solid")
-
-    /// Specifies a double outliner
-    []
-    member inline _.outlineStyleDouble([] comb: CombineKeyValue) = comb &>> ("outline-style", "double")
-
-    /// Specifies a 3D grooved outline. The effect depends on the outline-color value)
-    []
-    member inline _.outlineStyleGroove([] comb: CombineKeyValue) = comb &>> ("outline-style", "groove")
-
-    /// Specifies a 3D ridged outline. The effect depends on the outline-color value)
-    []
-    member inline _.outlineStyleRidge([] comb: CombineKeyValue) = comb &>> ("outline-style", "ridge")
+    /// Sets where an item in the grid starts
+    /// The value can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
+    ///
+    ///
+    /// When there are multiple named lines with the same name, you can specify which one by count
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-column-start: col 2;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridColumnStart ("col", 2))
+    /// ```
+    []
+    member inline _.gridColumnStart([] comb: CombineKeyValue, value: string, ?count: int) =
+        CombineKeyValue(fun sb ->
+            let sb' = comb.Invoke(sb).Append("grid-column-start: ").Append(value)
 
-    /// Specifies a 3D inset  outline. The effect depends on the outline-color value)
-    []
-    member inline _.outlineStyleInset([] comb: CombineKeyValue) = comb &>> ("outline-style", "inset")
+            (match count with
+             | Some x -> sb'.Append(", ").Append(x)
+             | _ -> sb')
+                .Append("; "))
 
-    /// Specifies a 3D outset outline. The effect depends on the outline-color value)
-    []
-    member inline _.outlineStyleOutset([] comb: CombineKeyValue) = comb &>> ("outline-style", "outset")
+    /// Sets where an item in the grid starts
+    /// The value can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
+    ///
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-column-start: 2;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridColumnStart 2
+    /// ```
+    []
+    member inline _.gridColumnStart([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("grid-column-start", value)
 
-    /// Sets this property to its default value)
-    []
-    member inline _.outlineStyleInitial([] comb: CombineKeyValue) =
-        comb &>> ("outline-style", "initial")
+    /// Sets where an item in the grid starts
+    /// The value can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
+    ///
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-column-start: span odd-col;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridColumnStart (gridColumn.span "odd-col"))
+    /// ```
+    []
+    member inline _.gridColumnStart([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-column-start", value)
 
-    /// Inherits this property from its parent element
-    []
-    member inline _.outlineStyleInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("outline-style", "inherit")
+    /// Sets where an item in the grid ends
+    /// The value can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
+    ///
+    ///
+    /// _When there are multiple named lines with the same name, you can specify which one by count_
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-column-end: odd-col 2;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridColumnEnd ("odd-col", 2))
+    /// ```
+    []
+    member inline _.gridColumnEnd([] comb: CombineKeyValue, value: string, ?count: int) =
+        CombineKeyValue(fun sb ->
+            let sb' = comb.Invoke(sb).Append("grid-column-end: ").Append(value)
 
-    /// Sets the style of an outline using a CSS string value (e.g. "solid", "var(--outline-style)").
-    []
-    member inline _.outlineStyle([] comb: CombineKeyValue, value: string) =
-        comb &>> ("outline-style", value)
+            (match count with
+             | Some x -> sb'.Append(", ").Append(x)
+             | _ -> sb')
+                .Append("; "))
 
-    /// Sets the initial position for each background image.
+    /// Sets where an item in the grid ends
+    /// The value can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
     ///
-    /// The position is relative to the position layer set by background-origin.
-    []
-    member inline _.backgroundPosition([] comb: CombineKeyValue, position: string) =
-        comb &>> ("background-position", position)
-
-    /// The background image will scroll with the page. This is default.
-    []
-    member inline _.backgroundPositionScroll([] comb: CombineKeyValue) =
-        comb &>> ("background-position", "scroll")
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-column-end: 2;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridColumnEnd 2
+    /// ```
+    []
+    member inline _.gridColumnEnd([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("grid-column-end", value)
 
-    /// The background image will not scroll with the page.
-    []
-    member inline _.backgroundPositionFixedNoScroll([] comb: CombineKeyValue) =
-        comb &>> ("background-position", "fixed")
+    /// Sets where an item in the grid ends
+    /// The value can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
+    ///
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-column-end: span 2;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridColumnEnd (gridColumn.span 2))
+    /// ```
+    []
+    member inline _.gridColumnEnd([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-column-end", value)
 
-    /// The background image will scroll with the element's contents.
-    []
-    member inline _.backgroundPositionLocal([] comb: CombineKeyValue) =
-        comb &>> ("background-position", "local")
+    /// Sets where an item in the grid starts
+    /// The value can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
+    ///
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-row-start: col 2;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridRowStart ("col", 2))
+    /// ```
+    []
+    member inline _.gridRowStart([] comb: CombineKeyValue, value: string, ?count: int) =
+        CombineKeyValue(fun sb ->
+            let sb' = comb.Invoke(sb).Append("grid-row-start: ").Append(value)
 
-    /// Sets this property to its default value.
-    []
-    member inline _.backgroundPositionInitial([] comb: CombineKeyValue) =
-        comb &>> ("background-position", "initial")
+            (match count with
+             | Some x -> sb'.Append(", ").Append(x)
+             | _ -> sb')
+                .Append("; "))
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.backgroundPositionInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("background-position", "inherit")
+    /// Sets where an item in the grid starts
+    /// The value can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
+    ///
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-row-start: 2;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridRowStart 2
+    /// ```
+    []
+    member inline _.gridRowStart([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("grid-row-start", value)
 
-    /// This is default. Sets the blending mode to normal.
-    []
-    member inline _.backgroundBlendModeNormal([] comb: CombineKeyValue) =
-        comb &>> ("background-blend-mode", "normal")
+    /// Sets where an item in the grid starts
+    /// The value can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
+    ///
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-row-start: span odd-col;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridRowStart (gridRow.span "odd-col"))
+    /// ```
+    []
+    member inline _.gridRowStart([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-row-start", value)
 
-    /// Sets the blending mode to screen
-    []
-    member inline _.backgroundBlendModeScreen([] comb: CombineKeyValue) =
-        comb &>> ("background-blend-mode", "screen")
+    /// Sets where an item in the grid ends
+    /// The value can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
+    ///
+    ///
+    /// _When there are multiple named lines with the same name, you can specify which one by count_
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-row-end: odd-col 2;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridRowEnd ("odd-col", 2))
+    /// ```
+    []
+    member inline _.gridRowEnd([] comb: CombineKeyValue, value: string, ?count: int) =
+        CombineKeyValue(fun sb ->
+            let sb' = comb.Invoke(sb).Append("grid-row-end: ").Append(value)
 
-    /// Sets the blending mode to overlay
-    []
-    member inline _.backgroundBlendModeOverlay([] comb: CombineKeyValue) =
-        comb &>> ("background-blend-mode", "overlay")
+            (match count with
+             | Some x -> sb'.Append(", ").Append(x)
+             | _ -> sb')
+                .Append("; "))
 
-    /// Sets the blending mode to darken
-    []
-    member inline _.backgroundBlendModeDarken([] comb: CombineKeyValue) =
-        comb &>> ("background-blend-mode", "darken")
+    /// Sets where an item in the grid ends
+    /// The value can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
+    ///
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-row-end: 2;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridRowEnd 2
+    /// ```
+    []
+    member inline _.gridRowEnd([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("grid-row-end", value)
 
-    /// Sets the blending mode to multiply
-    []
-    member inline _.backgroundBlendModeLighten([] comb: CombineKeyValue) =
-        comb &>> ("background-blend-mode", "lighten")
+    /// Sets where an item in the grid ends
+    /// The value can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
+    ///
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-row-end: span 2;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridRowEnd (gridRow.span 2))
+    /// ```
+    []
+    member inline _.gridRowEnd([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-row-end", value)
 
-    /// Sets the blending mode to color-dodge
-    []
-    []
-    member inline _.backgroundBlendModeCollorDodge([] comb: CombineKeyValue) =
-        comb &>> ("background-blend-mode", "color-dodge")
+    /// Determines a grid item��s location within the grid by referring to specific grid lines.
+    /// start is the line where the item begins, end' is the line where it ends.
+    /// They can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
+    ///
+    ///
+    /// _Shorthand for `gridColumnStart` and `gridColumnEnds`_
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-column: col-2 / col-4;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridColumn ("col-2", "col-4"))
+    /// ```
+    []
+    member inline _.gridColumn([] comb: CombineKeyValue, start: string, end': string) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("grid-column: ").Append(start).Append(" / ").Append(end').Append("; "))
 
-    /// Sets the blending mode to color-dodge
-    []
-    member inline _.backgroundBlendModeColorDodge([] comb: CombineKeyValue) =
-        comb &>> ("background-blend-mode", "color-dodge")
+    /// Determines a grid item��s location within the grid by referring to specific grid lines.
+    /// start is the line where the item begins, end' is the line where it ends.
+    /// They can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
+    ///
+    ///
+    /// _Shorthand for `gridColumnStart` and `gridColumnEnds`_
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-column: 1 / 3;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridColumn (1, 3))
+    /// ```
+    []
+    member inline _.gridColumn([] comb: CombineKeyValue, start: int, end': int) =
+        comb &>> ("grid-column", string start + " / " + string end')
 
-    /// Sets the blending mode to saturation
-    []
-    member inline _.backgroundBlendModeSaturation([] comb: CombineKeyValue) =
-        comb &>> ("background-blend-mode", "saturation")
+    /// Determines a grid item��s location within the grid by referring to specific grid lines.
+    /// start is the line where the item begins, end' is the line where it ends.
+    /// They can be one of the following options:
+    /// - a named line
+    /// - a numbered line
+    /// - span until a named line was hit
+    /// - span over a specified number of lines
+    ///
+    ///
+    /// _Shorthand for `gridRowStart` and `gridRowEnds`_
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-row: row-2 / row-4;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridRow ("row-2", "row-4"))
+    /// ```
+    []
+    member inline _.gridRow([] comb: CombineKeyValue, start: string, end': string) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("grid-row: ").Append(start).Append(" / ").Append(end').Append("; "))
 
-    /// Sets the blending mode to color
-    []
-    member inline _.backgroundBlendModeColor([] comb: CombineKeyValue) =
-        comb &>> ("background-blend-mode", "color")
+    /// Sets the named grid area the item is placed in
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-area: header;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridArea "header")
+    /// ```
+    []
+    member inline _.gridArea([] comb: CombineKeyValue, value: string) = comb &>> ("grid-area", value)
 
-    /// Sets the blending mode to luminosity
-    []
-    member inline _.backgroundBlendModeLuminosity([] comb: CombineKeyValue) =
-        comb &>> ("background-blend-mode", "luminosity")
+    /// Shorthand for `grid-template-areas`, `grid-template-columns` and `grid-template-rows`.
+    ///
+    /// Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template
+    ///
+    /// **CSS**
+    /// ```css
+    /// grid-template:  [header-top] 'a a a'      [header-bottom]
+    ///                   [main-top] 'b b b' 1fr  [main-bottom]
+    ///                              / auto 1fr auto;
+    /// ```
+    /// **F#**
+    /// ```f#
+    /// style.gridTemplate "[header-top] 'a a a'      [header-bottom] " +
+    ///                      "[main-top] 'b b b' 1fr  [main-bottom] " +
+    ///                                "/ auto 1fr auto")
+    /// ```
+    []
+    member inline _.gridTemplate([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-template", value)
 
-    /// Sets the background blending mode using a CSS string value (e.g. "multiply", "var(--background-blend-mode)").
-    []
-    member inline _.backgroundBlendMode([] comb: CombineKeyValue, value: string) =
-        comb &>> ("background-blend-mode", value)
+    /// Sets the size of implicitly-created grid rows (e.g. "100px", "auto", "minmax(100px, auto)").
+    []
+    member inline _.gridAutoRows([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-auto-rows", value)
 
-    /// Default value. The background extends behind the border.
-    []
-    member inline _.backgroundClipBorderBox([] comb: CombineKeyValue) =
-        comb &>> ("background-clip", "border-box")
+    /// Sets the size of implicitly-created grid columns (e.g. "100px", "auto").
+    []
+    member inline _.gridAutoColumns([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-auto-columns", value)
 
-    /// The background extends to the inside edge of the border.
-    []
-    member inline _.backgroundClipPaddingBox([] comb: CombineKeyValue) =
-        comb &>> ("background-clip", "padding-box")
+    /// Sets how auto-placed items flow into the grid. Accepts row | column | dense | "row dense" etc. or a CSS variable.
+    []
+    member inline _.gridAutoFlow([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-auto-flow", value)
 
-    /// The background extends to the edge of the content box.
-    []
-    member inline _.backgroundClipContentBox([] comb: CombineKeyValue) =
-        comb &>> ("background-clip", "content-box")
+    /// Items are placed by filling each row in turn. This is default.
+    []
+    member inline _.gridAutoFlowRow([] comb: CombineKeyValue) = comb &>> ("grid-auto-flow", "row")
+
+    /// Items are placed by filling each column in turn.
+    []
+    member inline _.gridAutoFlowColumn([] comb: CombineKeyValue) = comb &>> ("grid-auto-flow", "column")
+
+    /// Items are placed by rows, filling earlier holes with smaller items.
+    []
+    member inline _.gridAutoFlowRowDense([] comb: CombineKeyValue) =
+        comb &>> ("grid-auto-flow", "row dense")
+
+    /// Items are placed by columns, filling earlier holes with smaller items.
+    []
+    member inline _.gridAutoFlowColumnDense([] comb: CombineKeyValue) =
+        comb &>> ("grid-auto-flow", "column dense")
 
     /// Sets this property to its default value.
-    []
-    member inline _.backgroundClipInitial([] comb: CombineKeyValue) =
-        comb &>> ("background-clip", "initial")
+    []
+    member inline _.gridAutoFlowInitial([] comb: CombineKeyValue) =
+        comb &>> ("grid-auto-flow", "initial")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.backgroundClipInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("background-clip", "inherit")
+    []
+    member inline _.gridAutoFlowInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("grid-auto-flow", "inherit")
 
-    /// Sets how far the background extends using a CSS string value (e.g. "padding-box", "var(--background-clip)").
-    []
-    member inline _.backgroundClip([] comb: CombineKeyValue, value: string) =
-        comb &>> ("background-clip", value)
+    /// Shorthand for grid-template-rows/columns/areas and grid-auto-rows/columns/flow.
+    []
+    member inline _.grid([] comb: CombineKeyValue, value: string) = comb &>> ("grid", value)
 
-    /// Applies a 2D or 3D transformation to an element. Accepts a CSS transform value (e.g. "rotate(45deg)", "translate(10px, 20px)", "scale(1.5)").
-    []
-    member inline _.transform([] comb: CombineKeyValue, transformation: string) =
-        comb &>> ("transform", transformation)
 
-    /// Defines that there should be no transformation.
-    []
-    member inline _.transformNone([] comb: CombineKeyValue) = comb &>> ("transform", "none")
 
-    /// Allows you to change the position of transformed elements.
-    []
-    member inline _.transformOrigin([] comb: CombineKeyValue, x: string) =
-        comb &>> ("transform-origin", x)
 
-    /// Allows you to change the position of transformed elements, using separate x and y values.
-    []
-    member inline _.transformOrigin([] comb: CombineKeyValue, x: string, y: string) =
-        CombineKeyValue(fun sb ->
-            comb.Invoke(sb).Append("transform-origin: ").Append(x).Append(" ").Append(y).Append("; "))
+    // --------------------------------------------------------------------
+    // Layout styles
+    // --------------------------------------------------------------------
 
-    /// Defines a 2D transformation, using a matrix of six values.
-    []
-    member inline _.transformMatrix
-        ([] comb: CombineKeyValue, x1: int, y1: int, z1: int, x2: int, y2: int, z2: int)
-        =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("transform: ")
-                .Append("matrix(")
-                .Append(x1)
-                .Append(",")
-                .Append(y1)
-                .Append(",")
-                .Append(z1)
-                .Append(",")
-                .Append(x2)
-                .Append(",")
-                .Append(y2)
-                .Append(",")
-                .Append(z2)
-                .Append("); "))
 
-    /// Defines a 2D translation.
-    []
-    member inline _.transformTranslate([] comb: CombineKeyValue, x: int, y: int) =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("transform: ")
-                .Append("translate(")
-                .Append(x)
-                .Append("px, ")
-                .Append(y)
-                .Append("px); "))
+    /// Sets the height of an element.
+    []
+    member inline _.height([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("height", value)
 
-    /// Defines a 2D translation.
-    []
-    member inline _.transformTranslate([] comb: CombineKeyValue, x: string, y: string) =
-        CombineKeyValue(fun sb ->
-            comb.Invoke(sb).Append("transform: ").Append("translate(").Append(x).Append(", ").Append(y).Append("); "))
+    /// Sets the height of an element.
+    []
+    member inline _.height([] comb: CombineKeyValue, value: string) = comb &>> ("height", value)
 
-    /// Defines a 3D translation.
-    []
-    member inline _.transformTranslate3D([] comb: CombineKeyValue, x: int, y: int, z: int) =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("transform: ")
-                .Append("translate3d(")
-                .Append(x)
-                .Append("px, ")
-                .Append(y)
-                .Append("px, ")
-                .Append(z)
-                .Append("px); "))
+    /// Inherits this property from its parent element.
+    []
+    member inline _.heightInheritFromParent([] comb: CombineKeyValue) = comb &>> ("height", "inherit")
 
-    /// Defines a 3D translation.
-    []
-    member inline _.transformTranslate3D([] comb: CombineKeyValue, x: string, y: string, z: string) =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("transform: ")
-                .Append("translate3d(")
-                .Append(x)
-                .Append(", ")
-                .Append(y)
-                .Append(", ")
-                .Append(z)
-                .Append("); "))
+    /// Sets this property to its default value.
+    []
+    member inline _.heightInitial([] comb: CombineKeyValue) = comb &>> ("height", "initial")
 
-    /// Defines a translation, using only the value for the X-axis.
-    []
-    member inline _.transformTranslateX([] comb: CombineKeyValue, x: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateX(").Append(x).Append("px); "))
+    /// The intrinsic preferred height.
+    []
+    member inline _.heightMaxContent([] comb: CombineKeyValue) = comb &>> ("height", "max-content")
 
-    /// Defines a translation, using only the value for the X-axis.
-    []
-    member inline _.transformTranslateX([] comb: CombineKeyValue, x: string) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateX(").Append(x).Append("); "))
+    /// The intrinsic minimum height.
+    []
+    member inline _.heightMinContent([] comb: CombineKeyValue) = comb &>> ("height", "min-content")
 
-    /// Defines a translation, using only the value for the Y-axis
-    []
-    member inline _.transformTranslateY([] comb: CombineKeyValue, y: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateY(").Append(y).Append("px); "))
+    /// Sets the maximum height of an element.
+    []
+    member inline _.maxHeight([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("max-height", value)
 
-    /// Defines a translation, using only the value for the Y-axis
-    []
-    member inline _.transformTranslateY([] comb: CombineKeyValue, y: string) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateY(").Append(y).Append("); "))
+    /// Sets the maximum height of an element.
+    []
+    member inline _.maxHeight([] comb: CombineKeyValue, value: string) = comb &>> ("max-height", value)
 
-    /// Defines a 3D translation, using only the value for the Z-axis
-    []
-    member inline _.transformTranslateZ([] comb: CombineKeyValue, z: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateZ(").Append(z).Append("px); "))
+    /// Inherits this property from its parent element.
+    []
+    member inline _.maxHeightInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("max-height", "inherit")
 
-    /// Defines a 3D translation, using only the value for the Z-axis
-    []
-    member inline _.transformTranslateZ([] comb: CombineKeyValue, z: string) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateZ(").Append(z).Append("); "))
+    /// Sets this property to its default value.
+    []
+    member inline _.maxHeightInitial([] comb: CombineKeyValue) = comb &>> ("max-height", "initial")
 
-    /// Defines a 2D scale transformation.
-    []
-    member inline _.transformScale([] comb: CombineKeyValue, x: int, y: int) =
-        CombineKeyValue(fun sb ->
-            comb.Invoke(sb).Append("transform: ").Append("scale(").Append(x).Append(", ").Append(y).Append("); "))
+    /// The intrinsic preferred height.
+    []
+    member inline _.maxHeightMaxContent([] comb: CombineKeyValue) =
+        comb &>> ("max-height", "max-content")
 
-    /// Defines a scale transformation.
-    /// Defines a scale transformation.
-    []
-    member inline _.transformScale([] comb: CombineKeyValue, n: float) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("scale(").Append(n).Append("); "))
+    /// The intrinsic minimum height.
+    []
+    member inline _.maxHeightMinContent([] comb: CombineKeyValue) =
+        comb &>> ("max-height", "min-content")
 
-    /// Defines a 3D scale transformation
-    []
-    member inline _.transformScale3D([] comb: CombineKeyValue, x: int, y: int, z: int) =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("transform: ")
-                .Append("scale3d(")
-                .Append(x)
-                .Append(", ")
-                .Append(y)
-                .Append(", ")
-                .Append(z)
-                .Append("); "))
+    /// Sets the minimum height of an element.
+    []
+    member inline _.minHeight([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("min-height", value)
 
-    /// Defines a scale transformation by giving a value for the X-axis.
-    []
-    member inline _.transformScaleX([] comb: CombineKeyValue, x: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("scaleX(").Append(x).Append("); "))
+    /// Sets the minimum height of an element.
+    []
+    member inline _.minHeight([] comb: CombineKeyValue, value: string) = comb &>> ("min-height", value)
 
-    /// Defines a scale transformation by giving a value for the Y-axis.
-    []
-    member inline _.transformScaleY([] comb: CombineKeyValue, y: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("scaleY(").Append(y).Append("); "))
+    /// Inherits this property from its parent element.
+    []
+    member inline _.minHeightInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("min-height", "inherit")
 
-    /// Defines a 3D translation, using only the value for the Z-axis
-    []
-    member inline _.transformScaleZ([] comb: CombineKeyValue, z: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("scaleZ(").Append(z).Append("); "))
+    /// Sets this property to its default value.
+    []
+    member inline _.minHeightInitial([] comb: CombineKeyValue) = comb &>> ("min-height", "initial")
 
-    /// Defines a 2D rotation, the angle is specified in the parameter.
-    []
-    member inline _.transformRotate([] comb: CombineKeyValue, deg: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("rotate(").Append(deg).Append("deg); "))
+    /// The intrinsic preferred height.
+    []
+    member inline _.minHeightMaxContent([] comb: CombineKeyValue) =
+        comb &>> ("min-height", "max-content")
 
-    /// Defines a 2D rotation, the angle is specified in the parameter.
-    []
-    member inline _.transformRotate([] comb: CombineKeyValue, deg: float) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("rotate(").Append(deg).Append("deg); "))
+    /// The intrinsic minimum height.
+    []
+    member inline _.minHeightMinContent([] comb: CombineKeyValue) =
+        comb &>> ("min-height", "min-content")
 
-    /// Defines a 3D rotation along the X-axis.
-    []
-    member inline _.transformRotateX([] comb: CombineKeyValue, deg: float) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("rotateX(").Append(deg).Append("deg); "))
+    /// Allows a straight jump "scroll effect" between elements within the scrolling box. This is default
+    []
+    member inline _.scrollBehaviorAuto([] comb: CombineKeyValue) = comb &>> ("scroll-behavior", "auto")
 
-    /// Defines a 3D rotation along the Y-axis
-    []
-    member inline _.transformRotateY([] comb: CombineKeyValue, deg: float) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("rotateY(").Append(deg).Append("deg); "))
+    /// Allows a smooth animated "scroll effect" between elements within the scrolling box.
+    []
+    member inline _.scrollBehaviorSmooth([] comb: CombineKeyValue) =
+        comb &>> ("scroll-behavior", "smooth")
 
-    /// Defines a 3D rotation along the Z-axis
-    []
-    member inline _.transformRotateZ([] comb: CombineKeyValue, deg: float) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("rotateZ(").Append(deg).Append("deg); "))
+    /// Sets this property to its default value.
+    []
+    member inline _.scrollBehaviorInitial([] comb: CombineKeyValue) =
+        comb &>> ("scroll-behavior", "initial")
 
-    /// Defines a 2D skew transformation along the X- and the Y-axis.
-    []
-    member inline _.transformSkew([] comb: CombineKeyValue, xAngle: float, yAngle: float) =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("transform: ")
-                .Append("skew(")
-                .Append(xAngle)
-                .Append("deg, ")
-                .Append(yAngle)
-                .Append("deg); "))
+    /// Inherits this property from its parent element.
+    []
+    member inline _.scrollBehaviorInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("scroll-behavior", "inherit")
 
-    /// Defines a 2D skew transformation along the X-axis
-    []
-    member inline _.transformSkewX([] comb: CombineKeyValue, xAngle: float) =
-        CombineKeyValue(fun sb ->
-            comb.Invoke(sb).Append("transform: ").Append("skewX(").Append(xAngle).Append("deg); "))
+    /// Sets the scroll behavior using a CSS string value (e.g. "smooth", "var(--scroll-behavior)").
+    []
+    member inline _.scrollBehavior([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-behavior", value)
 
-    /// Defines a 2D skew transformation along the Y-axis
-    []
-    member inline _.transformSkewY([] comb: CombineKeyValue, yAngle: float) =
-        CombineKeyValue(fun sb ->
-            comb.Invoke(sb).Append("transform: ").Append("skewY(").Append(yAngle).Append("deg); "))
+    /// The content is not clipped, and it may be rendered outside the left and right edges. This is default.
+    []
+    member inline _.overflowVisible([] comb: CombineKeyValue) = comb &>> ("overflow", "visibile")
 
-    /// Defines a perspective view for a 3D transformed element
-    []
-    member inline _.transformPerspective([] comb: CombineKeyValue, n: int) =
-        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("perspective(").Append(n).Append("); "))
+    /// The content is clipped - and no scrolling mechanism is provided.
+    []
+    member inline _.overflowHidden([] comb: CombineKeyValue) = comb &>> ("overflow", "hidden")
 
-    /// Sets this property to its default value.
-    []
-    member inline _.transformInitial([] comb: CombineKeyValue) = comb &>> ("transform", "initial")
+    /// The content is clipped and a scrolling mechanism is provided.
+    []
+    member inline _.overflowScroll([] comb: CombineKeyValue) = comb &>> ("overflow", "scroll")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.transformInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("transform", "inherit")
-
-    /// Text direction goes from right-to-left
-    []
-    member inline _.directionRightToLeft([] comb: CombineKeyValue) = comb &>> ("direction", "rtl")
-
-    /// Text direction goes from left-to-right. This is default
-    []
-    member inline _.directionLeftToRight([] comb: CombineKeyValue) = comb &>> ("direction", "ltr")
+    /// Should cause a scrolling mechanism to be provided for overflowing boxes
+    []
+    member inline _.overflowAuto([] comb: CombineKeyValue) = comb &>> ("overflow", "auto")
 
     /// Sets this property to its default value.
-    []
-    member inline _.directionInitial([] comb: CombineKeyValue) = comb &>> ("direction", "initial")
+    []
+    member inline _.overflowInitial([] comb: CombineKeyValue) = comb &>> ("overflow", "initial")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.directionInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("direction", "inherit")
+    []
+    member inline _.overflowInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("overflow", "inherit")
 
-    /// Sets the text direction using a CSS string value (e.g. "rtl", "var(--direction)").
-    []
-    member inline _.direction([] comb: CombineKeyValue, value: string) = comb &>> ("direction", value)
+    /// Sets the overflow behavior using a CSS string value (e.g. "auto", "hidden scroll", "var(--overflow)").
+    []
+    member inline _.overflow([] comb: CombineKeyValue, value: string) = comb &>> ("overflow", value)
 
-    /// Display borders on empty cells. This is default
-    []
-    member inline _.emptyCellsShow([] comb: CombineKeyValue) = comb &>> ("empty-cells", "show")
+    /// The content is not clipped, and it may be rendered outside the left and right edges. This is default.
+    []
+    member inline _.overflowXVisible([] comb: CombineKeyValue) = comb &>> ("overflow-x", "visibile")
 
-    /// Hide borders on empty cells
-    []
-    member inline _.emptyCellsHide([] comb: CombineKeyValue) = comb &>> ("empty-cells", "hide")
+    /// The content is clipped - and no scrolling mechanism is provided.
+    []
+    member inline _.overflowXHidden([] comb: CombineKeyValue) = comb &>> ("overflow-x", "hidden")
 
-    /// Sets this property to its default value)
-    []
-    member inline _.emptyCellsInitial([] comb: CombineKeyValue) = comb &>> ("empty-cells", "initial")
+    /// The content is clipped and a scrolling mechanism is provided.
+    []
+    member inline _.overflowXScroll([] comb: CombineKeyValue) = comb &>> ("overflow-x", "scroll")
 
-    /// Inherits this property from its parent element
-    []
-    member inline _.emptyCellsInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("empty-cells", "inherit")
+    /// Should cause a scrolling mechanism to be provided for overflowing boxes
+    []
+    member inline _.overflowXAuto([] comb: CombineKeyValue) = comb &>> ("overflow-x", "auto")
 
-    /// Sets whether empty table cells show borders using a CSS string value (e.g. "hide", "var(--empty-cells)").
-    []
-    member inline _.emptyCells([] comb: CombineKeyValue, value: string) =
-        comb &>> ("empty-cells", value)
+    /// Sets this property to its default value.
+    []
+    member inline _.overflowXInitial([] comb: CombineKeyValue) = comb &>> ("overflow-x", "initial")
 
-    /// Default value. The animation should be played as normal
-    []
-    member inline _.animationDirectionNormal([] comb: CombineKeyValue) =
-        comb &>> ("animation-direction", "normal")
+    /// Inherits this property from its parent element.
+    []
+    member inline _.overflowXInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("overflow-x", "inherit")
 
-    /// The animation should play in reverse direction
-    []
-    member inline _.animationDirectionReverse([] comb: CombineKeyValue) =
-        comb &>> ("animation-direction", "reverse")
+    /// Sets the overflow behavior of the horizontal direction using a CSS string value (e.g. "auto", "var(--overflow-x)").
+    []
+    member inline _.overflowX([] comb: CombineKeyValue, value: string) = comb &>> ("overflow-x", value)
 
-    /// The animation will be played as normal every odd time (1, 3, 5, etc..) and in reverse direction every even time (2, 4, 6, etc...).
-    []
-    member inline _.animationDirectionAlternate([] comb: CombineKeyValue) =
-        comb &>> ("animation-direction", "alternate")
+    /// The content is not clipped, and it may be rendered outside the left and right edges. This is default.
+    []
+    member inline _.overflowYVisible([] comb: CombineKeyValue) = comb &>> ("overflow-y", "visibile")
 
-    /// The animation will be played in reverse direction every odd time (1, 3, 5, etc..) and in a normal direction every even time (2,4,6,etc...))
-    []
-    member inline _.animationDirectionAlternateReverse([] comb: CombineKeyValue) =
-        comb &>> ("animation-direction", "alternate-reverse")
+    /// The content is clipped - and no scrolling mechanism is provided.
+    []
+    member inline _.overflowYHidden([] comb: CombineKeyValue) = comb &>> ("overflow-y", "hidden")
 
-    /// Sets this property to its default value)
-    []
-    member inline _.animationDirectionInitial([] comb: CombineKeyValue) =
-        comb &>> ("animation-direction", "initial")
+    /// The content is clipped and a scrolling mechanism is provided.
+    []
+    member inline _.overflowYScroll([] comb: CombineKeyValue) = comb &>> ("overflow-y", "scroll")
+
+    /// Should cause a scrolling mechanism to be provided for overflowing boxes
+    []
+    member inline _.overflowYAuto([] comb: CombineKeyValue) = comb &>> ("overflow-y", "auto")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.overflowYInitial([] comb: CombineKeyValue) = comb &>> ("overflow-y", "initial")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.animationDirectionInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("animation-direction", "inherit")
+    []
+    member inline _.overflowYInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("overflow-y", "inherit")
 
-    /// Sets the animation direction using a CSS string value (e.g. "alternate", "var(--animation-direction)").
-    []
-    member inline _.animationDirection([] comb: CombineKeyValue, value: string) =
-        comb &>> ("animation-direction", value)
+    /// Sets the overflow behavior of the vertical direction using a CSS string value (e.g. "auto", "var(--overflow-y)").
+    []
+    member inline _.overflowY([] comb: CombineKeyValue, value: string) = comb &>> ("overflow-y", value)
 
-    /// Default value. Specifies that the animation is running.
-    []
-    member inline _.animationPlayStateRunning([] comb: CombineKeyValue) =
-        comb &>> ("animation-play-state", "running")
+    /// The element must float on the left side of its containing block.
+    []
+    []
+    member inline _.floatLeft([] comb: CombineKeyValue) = comb &>> ("float", "left")
 
-    /// Specifies that the animation is paused
-    []
-    member inline _.animationPlayStatePaused([] comb: CombineKeyValue) =
-        comb &>> ("animation-play-state", "paused")
+    /// The element must float on the right side of its containing block.
+    []
+    []
+    member inline _.floatRight([] comb: CombineKeyValue) = comb &>> ("float", "right")
 
-    /// Sets this property to its default value)
-    []
-    member inline _.animationPlayStateInitial([] comb: CombineKeyValue) =
-        comb &>> ("animation-play-state", "initial")
+    /// The element must not float.
+    []
+    []
+    member inline _.floatNone([] comb: CombineKeyValue) = comb &>> ("float", "none")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.animationPlayStateInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("animation-play-state", "inherit")
+    /// The element does not float, (will be displayed just where it occurs in the text). This is default
+    []
+    member inline _.floatStyleNone([] comb: CombineKeyValue) = comb &>> ("float", "none")
 
-    /// Sets whether the animation is running using a CSS string value (e.g. "paused", "var(--animation-play-state)").
-    []
-    member inline _.animationPlayState([] comb: CombineKeyValue, value: string) =
-        comb &>> ("animation-play-state", value)
+    /// The element floats to the left of its container.
+    []
+    member inline _.floatStyleLeft([] comb: CombineKeyValue) = comb &>> ("float", "left")
 
-    /// Specifies that the animation should be played infinite times (forever))
-    []
-    member inline _.animationIterationCountInfinite([] comb: CombineKeyValue) =
-        comb &>> ("animation-iteration-count", "infinite")
+    /// The element floats to the right of its container.
+    []
+    member inline _.floatStyleRight([] comb: CombineKeyValue) = comb &>> ("float", "right")
 
-    /// Sets this property to its default value)
-    []
-    member inline _.animationIterationCountInitial([] comb: CombineKeyValue) =
-        comb &>> ("animation-iteration-count", "initial")
+    /// Sets this property to its default value.
+    []
+    member inline _.floatStyleInitial([] comb: CombineKeyValue) = comb &>> ("float", "initial")
 
     /// Inherits this property from its parent element.
-    []
-    member inline _.animationIterationCountInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("animation-iteration-count", "inherit")
-
-    /// Sets the number of times the animation runs using a CSS string value (e.g. "infinite", "var(--animation-count)").
-    []
-    member inline _.animationIterationCount([] comb: CombineKeyValue, value: string) =
-        comb &>> ("animation-iteration-count", value)
+    []
+    member inline _.floatStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("float", "inherit")
 
-    /// Default value. Animation will not apply any styles to the element before or after it is executing
-    []
-    member inline _.animationFillModeNone([] comb: CombineKeyValue) =
-        comb &>> ("animation-fill-mode", "none")
+    /// Sets the float behavior using a CSS string value (e.g. "left", "var(--float)").
+    []
+    member inline _.floatStyle([] comb: CombineKeyValue, value: string) = comb &>> ("float", value)
 
-    /// The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count).
-    []
-    member inline _.animationFillModeForwards([] comb: CombineKeyValue) =
-        comb &>> ("animation-fill-mode", "forwards")
+    /// Default. Text can be selected if the browser allows it.
+    []
+    member inline _.userSelectAuto([] comb: CombineKeyValue) = comb &>> ("user-select", "auto")
 
-    /// The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
-    []
-    member inline _.animationFillModeBackwards([] comb: CombineKeyValue) =
-        comb &>> ("animation-fill-mode", "backwards")
+    /// Prevents text selection.
+    []
+    member inline _.userSelectNone([] comb: CombineKeyValue) = comb &>> ("user-select", "none")
 
-    /// The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
-    []
-    member inline _.animationFillModeBoth([] comb: CombineKeyValue) =
-        comb &>> ("animation-fill-mode", "both")
+    /// The text can be selected by the user.
+    []
+    member inline _.userSelectText([] comb: CombineKeyValue) = comb &>> ("user-select", "text")
 
-    /// Sets this property to its default value)
-    []
-    member inline _.animationFillModeInitial([] comb: CombineKeyValue) =
-        comb &>> ("animation-fill-mode", "initial")
+    /// Text selection is made with one click instead of a double-click.
+    []
+    member inline _.userSelectAll([] comb: CombineKeyValue) = comb &>> ("user-select", "all")
 
-    /// Inherits this property from its parent element
-    []
-    member inline _.animationFillModeInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("animation-fill-mode", "inherit")
+    /// Sets this property to its default value.
+    []
+    member inline _.userSelectInitial([] comb: CombineKeyValue) = comb &>> ("user-select", "initial")
 
-    /// Sets the animation fill mode using a CSS string value (e.g. "both", "var(--animation-fill-mode)").
-    []
-    member inline _.animationFillMode([] comb: CombineKeyValue, value: string) =
-        comb &>> ("animation-fill-mode", value)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.userSelectInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("user-select", "inherit")
 
-    /// Sets how background images are repeated.
-    ///
-    /// A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
-    []
-    member inline _.backgroundRepeat([] comb: CombineKeyValue, repeat: string) =
-        comb &>> ("background-repeat", repeat)
+    /// Sets whether the user can select text using a CSS string value (e.g. "none", "var(--user-select)").
+    []
+    member inline _.userSelect([] comb: CombineKeyValue, value: string) =
+        comb &>> ("user-select", value)
 
-    /// The background image is repeated both vertically and horizontally. This is default.
-    []
-    member inline _.backgroundRepeatRepeat([] comb: CombineKeyValue) =
-        comb &>> ("background-repeat", "repeat")
+    /// Specifies the mouse cursor to display when pointing over an element. Accepts a CSS cursor value (a keyword or a url()).
+    []
+    member inline _.cursor([] comb: CombineKeyValue, value: string) = comb &>> ("cursor", value)
 
-    /// The background image is only repeated horizontally.
-    []
-    member inline _.backgroundRepeatRepeatX([] comb: CombineKeyValue) =
-        comb &>> ("background-repeat", "repeat-x")
+    /// The User Agent will determine the cursor to display based on the current context. E.g., equivalent to text when hovering text.
+    []
+    member inline _.cursorAuto([] comb: CombineKeyValue) = comb &>> ("cursor", "auto")
 
-    /// The background image is only repeated vertically.
-    []
-    member inline _.backgroundRepeatRepeatY([] comb: CombineKeyValue) =
-        comb &>> ("background-repeat", "repeat-y")
+    /// The cursor indicates an alias of something is to be created
+    []
+    member inline _.cursorAlias([] comb: CombineKeyValue) = comb &>> ("cursor", "alias")
 
-    /// The background-image is not repeated.
-    []
-    member inline _.backgroundRepeatNoRepeat([] comb: CombineKeyValue) =
-        comb &>> ("background-repeat", "no-repeat")
+    /// The platform-dependent default cursor. Typically an arrow.
+    []
+    member inline _.cursorDefaultCursor([] comb: CombineKeyValue) = comb &>> ("cursor", "default")
 
-    /// Sets this property to its default value.
-    []
-    member inline _.backgroundRepeatInitial([] comb: CombineKeyValue) =
-        comb &>> ("background-repeat", "initial")
+    /// No cursor is rendered.
+    []
+    member inline _.cursorNone([] comb: CombineKeyValue) = comb &>> ("cursor", "none")
 
-    /// Inherits this property from its parent element.
-    []
-    member inline _.backgroundRepeatInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("background-repeat", "inherit")
+    /// A context menu is available.
+    []
+    member inline _.cursorContextMenu([] comb: CombineKeyValue) = comb &>> ("cursor", "context-menu")
+
+    /// Help information is available.
+    []
+    member inline _.cursorHelp([] comb: CombineKeyValue) = comb &>> ("cursor", "help")
+
+    /// The cursor is a pointer that indicates a link. Typically an image of a pointing hand.
+    []
+    member inline _.cursorPointer([] comb: CombineKeyValue) = comb &>> ("cursor", "pointer")
+
+    /// The program is busy in the background, but the user can still interact with the interface (in contrast to `wait`).
+    []
+    member inline _.cursorProgress([] comb: CombineKeyValue) = comb &>> ("cursor", "progress")
+
+    /// The program is busy, and the user can't interact with the interface (in contrast to progress). Sometimes an image of an hourglass or a watch.
+    []
+    member inline _.cursorWait([] comb: CombineKeyValue) = comb &>> ("cursor", "wait")
+
+    /// The table cell or set of cells can be selected.
+    []
+    member inline _.cursorCell([] comb: CombineKeyValue) = comb &>> ("cursor", "cell")
+
+    /// Cross cursor, often used to indicate selection in a bitmap.
+    []
+    member inline _.cursorCrosshair([] comb: CombineKeyValue) = comb &>> ("cursor", "crosshair")
+
+    /// The text can be selected. Typically the shape of an I-beam.
+    []
+    member inline _.cursorText([] comb: CombineKeyValue) = comb &>> ("cursor", "text")
+
+    /// The vertical text can be selected. Typically the shape of a sideways I-beam.
+    []
+    member inline _.cursorVerticalText([] comb: CombineKeyValue) = comb &>> ("cursor", "vertical-text")
+
+    /// Something is to be copied.
+    []
+    member inline _.cursorCopy([] comb: CombineKeyValue) = comb &>> ("cursor", "copy")
+
+    /// Something is to be moved.
+    []
+    member inline _.cursorMove([] comb: CombineKeyValue) = comb &>> ("cursor", "move")
+
+    /// An item may not be dropped at the current location. On Windows and Mac OS X, `no-drop` is the same as `not-allowed`.
+    []
+    member inline _.cursorNoDrop([] comb: CombineKeyValue) = comb &>> ("cursor", "no-drop")
+
+    /// The requested action will not be carried out.
+    []
+    member inline _.cursorNotAllowed([] comb: CombineKeyValue) = comb &>> ("cursor", "not-allowed")
+
+    /// Something can be grabbed (dragged to be moved).
+    []
+    member inline _.cursorGrab([] comb: CombineKeyValue) = comb &>> ("cursor", "grab")
+
+    /// Something is being grabbed (dragged to be moved).
+    []
+    member inline _.cursorGrabbing([] comb: CombineKeyValue) = comb &>> ("cursor", "grabbing")
+
+    /// Something can be scrolled in any direction (panned).
+    []
+    member inline _.cursorAllScroll([] comb: CombineKeyValue) = comb &>> ("cursor", "all-scroll")
+
+    /// The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
+    []
+    member inline _.cursorColumnResize([] comb: CombineKeyValue) = comb &>> ("cursor", "col-resize")
+
+    /// The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
+    []
+    member inline _.cursorRowResize([] comb: CombineKeyValue) = comb &>> ("cursor", "row-resize")
+
+    /// Directional resize arrow
+    []
+    member inline _.cursorNorthResize([] comb: CombineKeyValue) = comb &>> ("cursor", "n-resize")
+
+    /// Directional resize arrow
+    []
+    member inline _.cursorEastResize([] comb: CombineKeyValue) = comb &>> ("cursor", "e-resize")
+
+    /// Directional resize arrow
+    []
+    member inline _.cursorSouthResize([] comb: CombineKeyValue) = comb &>> ("cursor", "s-resize")
+
+    /// Directional resize arrow
+    []
+    member inline _.cursorWestResize([] comb: CombineKeyValue) = comb &>> ("cursor", "w-resize")
+
+    /// Directional resize arrow
+    []
+    member inline _.cursorNorthEastResize([] comb: CombineKeyValue) = comb &>> ("cursor", "ne-resize")
+
+    /// Directional resize arrow
+    []
+    member inline _.cursorNorthWestResize([] comb: CombineKeyValue) = comb &>> ("cursor", "nw-resize")
+
+    /// Directional resize arrow
+    []
+    member inline _.cursorSouthEastResize([] comb: CombineKeyValue) = comb &>> ("cursor", "se-resize")
+
+    /// Directional resize arrow
+    []
+    member inline _.cursorSouthWestResize([] comb: CombineKeyValue) = comb &>> ("cursor", "sw-resize")
+
+    /// Directional resize arrow
+    []
+    member inline _.cursorEastWestResize([] comb: CombineKeyValue) = comb &>> ("cursor", "ew-resize")
+
+    /// Directional resize arrow
+    []
+    member inline _.cursorNorthSouthResize([] comb: CombineKeyValue) = comb &>> ("cursor", "ns-resize")
+
+    /// Directional resize arrow
+    []
+    member inline _.cursorNorthEastSouthWestResize([] comb: CombineKeyValue) =
+        comb &>> ("cursor", "nesw-resize")
+
+    /// Directional resize arrow
+    []
+    member inline _.cursorNorthWestSouthEastResize([] comb: CombineKeyValue) =
+        comb &>> ("cursor", "nwse-resize")
+
+    /// Something can be zoomed (magnified) in
+    []
+    member inline _.cursorZoomIn([] comb: CombineKeyValue) = comb &>> ("cursor", "zoom-in")
+
+    /// Something can be zoomed out
+    []
+    member inline _.cursorZoomOut([] comb: CombineKeyValue) = comb &>> ("cursor", "zoom-out")
 
     /// Default value. Elements render in order, as they appear in the document flow.
     []
@@ -3126,47 +3347,6 @@ type CssBuilder() =
     []
     member inline _.resize([] comb: CombineKeyValue, value: string) = comb &>> ("resize", value)
 
-    /// Aligns the text to the left.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align
-    []
-    member inline _.textAlignLeft([] comb: CombineKeyValue) = comb &>> ("text-align", "left")
-
-    /// Aligns the text to the right.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=right
-    []
-    member inline _.textAlignRight([] comb: CombineKeyValue) = comb &>> ("text-align", "right")
-
-    /// Centers the text.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=center
-    []
-    member inline _.textAlignCenter([] comb: CombineKeyValue) = comb &>> ("text-align", "center")
-
-    /// Stretches the lines so that each line has equal width (like in newspapers and magazines).
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=justify
-    []
-    member inline _.textAlignJustify([] comb: CombineKeyValue) = comb &>> ("text-align", "justify")
-
-    /// Sets this property to its default value.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
-    []
-    member inline _.textAlignInitial([] comb: CombineKeyValue) = comb &>> ("text-align", "initial")
-
-    /// Inherits this property from its parent element.
-    ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
-    []
-    member inline _.textAlignInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("text-align", "inherit")
-
-    /// Sets the horizontal alignment of text using a CSS string value (e.g. "center", "var(--text-align)").
-    []
-    member inline _.textAlign([] comb: CombineKeyValue, value: string) = comb &>> ("text-align", value)
-
     /// Displays an element as an inline element (like ` `). Any height and width properties will have no effect.
     []
     []
@@ -3289,1262 +3469,1772 @@ type CssBuilder() =
     []
     member inline _.zIndex([] comb: CombineKeyValue, value: int) = comb &&& mkWithKV ("z-index", value)
 
-    /// Sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right,
-    /// margin-bottom, and margin-left.
-    []
-    member inline _.margin([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("margin", value)
+    /// Specifies the vertical position of a positioned element. It has no effect on non-positioned elements.
+    []
+    member inline _.top([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("top", value)
 
-    /// Sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right,
-    /// margin-bottom, and margin-left.
-    []
-    member inline _.margin([] comb: CombineKeyValue, value: string) = comb &>> ("margin", value)
+    /// Specifies the vertical position of a positioned element. It has no effect on non-positioned elements.
+    []
+    member inline _.top([] comb: CombineKeyValue, value: string) = comb &>> ("top", value)
 
-    /// Sets the margin area on the vertical and horizontal axis.
-    []
-    member inline _.margin([] comb: CombineKeyValue, vertical: int, horizonal: int) =
-        CombineKeyValue(fun sb ->
-            comb.Invoke(sb).Append("margin: ").Append(vertical).Append("px ").Append(horizonal).Append("px; "))
+    /// Specifies the vertical position of a positioned element. It has no effect on non-positioned elements.
+    []
+    member inline _.bottom([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("bottom", value)
 
-    /// Sets the margin area on the vertical and horizontal axis.
-    []
-    member inline _.margin([] comb: CombineKeyValue, vertical: string, horizonal: string) =
-        CombineKeyValue(fun sb ->
-            comb.Invoke(sb).Append("margin: ").Append(vertical).Append(" ").Append(horizonal).Append("; "))
+    /// Specifies the vertical position of a positioned element. It has no effect on non-positioned elements.
+    []
+    member inline _.bottom([] comb: CombineKeyValue, value: string) = comb &>> ("bottom", value)
 
-    /// Sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right,
-    /// margin-bottom, and margin-left.
-    []
-    member inline _.margin([] comb: CombineKeyValue, top: int, right: int, bottom: int, left: int) =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("margin: ")
-                .Append(top)
-                .Append("px ")
-                .Append(right)
-                .Append("px ")
-                .Append(bottom)
-                .Append("px ")
-                .Append(left)
-                .Append("px; "))
+    /// Specifies the horizontal position of a positioned element. It has no effect on non-positioned elements.
+    []
+    member inline _.left([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("left", value)
 
-    /// Sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right,
-    /// margin-bottom, and margin-left.
-    []
-    member inline _.margin
-        ([] comb: CombineKeyValue, top: string, right: string, bottom: string, left: string)
-        =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("margin: ")
-                .Append(top)
-                .Append(" ")
-                .Append(right)
-                .Append(" ")
-                .Append(bottom)
-                .Append(" ")
-                .Append(left)
-                .Append("; "))
+    /// Specifies the horizontal position of a positioned element. It has no effect on non-positioned elements.
+    []
+    member inline _.left([] comb: CombineKeyValue, value: string) = comb &>> ("left", value)
 
-    /// Sets the margin area on the left side of an element. A positive value places it farther from its
-    /// neighbors, while a negative value places it closer.
-    []
-    member inline _.marginLeft([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("margin-left", value)
+    /// Specifies the horizontal position of a positioned element. It has no effect on non-positioned elements.
+    []
+    member inline _.right([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("right", value)
 
-    /// Sets the margin area on the left side of an element. A positive value places it farther from its
-    /// neighbors, while a negative value places it closer.
-    []
-    member inline _.marginLeft([] comb: CombineKeyValue, value: string) =
-        comb &>> ("margin-left", value)
+    /// Specifies the horizontal position of a positioned element. It has no effect on non-positioned elements.
+    []
+    member inline _.right([] comb: CombineKeyValue, value: string) = comb &>> ("right", value)
 
-    /// sets the margin area on the right side of an element. A positive value places it farther from its
-    /// neighbors, while a negative value places it closer.
-    []
-    member inline _.marginRight([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("margin-right", value)
+    /// Sets the minimum width of an element.
+    ///
+    /// It prevents the used value of the width property from becoming smaller than the value specified for min-width.
+    []
+    member inline _.minWidth([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("min-width", value)
 
-    /// sets the margin area on the right side of an element. A positive value places it farther from its
-    /// neighbors, while a negative value places it closer.
-    []
-    member inline _.marginRight([] comb: CombineKeyValue, value: string) =
-        comb &>> ("margin-right", value)
+    /// Sets the minimum width of an element.
+    ///
+    /// It prevents the used value of the width property from becoming smaller than the value specified for min-width.
+    []
+    member inline _.minWidth([] comb: CombineKeyValue, value: string) = comb &>> ("min-width", value)
 
-    /// Sets the margin area on the top of an element. A positive value places it farther from its
-    /// neighbors, while a negative value places it closer.
-    []
-    member inline _.marginTop([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("margin-top", value)
+    /// Sets the maximum width of an element.
+    ///
+    /// It prevents the used value of the width property from becoming larger than the value specified by max-width.
+    []
+    member inline _.maxWidth([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("max-width", value)
 
-    /// Sets the margin area on the top of an element. A positive value places it farther from its
-    /// neighbors, while a negative value places it closer.
-    []
-    member inline _.marginTop([] comb: CombineKeyValue, value: string) = comb &>> ("margin-top", value)
+    /// Sets the maximum width of an element.
+    ///
+    /// It prevents the used value of the width property from becoming larger than the value specified by max-width.
+    []
+    member inline _.maxWidth([] comb: CombineKeyValue, value: string) = comb &>> ("max-width", value)
 
-    /// Sets the margin area on the bottom of an element. A positive value places it farther from its
-    /// neighbors, while a negative value places it closer.
-    []
-    member inline _.marginBottom([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("margin-bottom", value)
+    /// Sets the width of an element.
+    ///
+    /// By default, the property defines the width of the content area.
+    []
+    member inline _.width([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("width", value)
 
-    /// Sets the margin area on the bottom of an element. A positive value places it farther from its
-    /// neighbors, while a negative value places it closer.
-    []
-    member inline _.marginBottom([] comb: CombineKeyValue, value: string) =
-        comb &>> ("margin-bottom", value)
+    /// Sets the width of an element.
+    ///
+    /// By default, the property defines the width of the content area.
+    []
+    member inline _.width([] comb: CombineKeyValue, value: string) = comb &>> ("width", value)
 
-    /// Sets the padding area on all four sides of an element. It is a shorthand for padding-top,
-    /// padding-right, padding-bottom, and padding-left.
-    []
-    member inline _.padding([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("padding", value)
+    /// Shorthand for top/right/bottom/left (e.g. "0", "10px 20px", "var(--inset)").
+    []
+    member inline _.inset([] comb: CombineKeyValue, value: string) = comb &>> ("inset", value)
 
-    /// Sets the padding area on all four sides of an element. It is a shorthand for padding-top,
-    /// padding-right, padding-bottom, and padding-left.
-    []
-    member inline _.padding([] comb: CombineKeyValue, value: string) = comb &>> ("padding", value)
+    /// Shorthand for top/right/bottom/left in pixels.
+    []
+    member inline _.inset([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("inset", value)
 
-    /// Sets the padding area for vertical and horizontal axis.
-    []
-    member inline _.padding([] comb: CombineKeyValue, vertical: int, horizontal: int) =
-        CombineKeyValue(fun sb ->
-            comb.Invoke(sb).Append("padding: ").Append(vertical).Append("px ").Append(horizontal).Append("px; "))
+    /// Sets the preferred aspect ratio (e.g. "16 / 9", "1", "auto").
+    []
+    member inline _.aspectRatio([] comb: CombineKeyValue, value: string) =
+        comb &>> ("aspect-ratio", value)
 
-    /// Sets the padding area for vertical and horizontal axis.
-    []
-    member inline _.padding([] comb: CombineKeyValue, vertical: string, horizontal: string) =
-        CombineKeyValue(fun sb ->
-            comb.Invoke(sb).Append("padding: ").Append(vertical).Append(" ").Append(horizontal).Append("; "))
+    /// Sets layout/style/paint containment. Accepts none | strict | content | size | layout | style | paint or a CSS variable.
+    []
+    member inline _.contain([] comb: CombineKeyValue, value: string) = comb &>> ("contain", value)
 
-    /// Sets the padding area on all four sides of an element. It is a shorthand for padding-top,
-    /// padding-right, padding-bottom, and padding-left.
-    []
-    member inline _.padding
-        ([] comb: CombineKeyValue, top: string, right: string, bottom: string, left: string)
-        =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("padding: ")
-                .Append(top)
-                .Append(" ")
-                .Append(right)
-                .Append(" ")
-                .Append(bottom)
-                .Append(" ")
-                .Append(left)
-                .Append("; "))
+    /// No containment. This is default.
+    []
+    member inline _.containNone([] comb: CombineKeyValue) = comb &>> ("contain", "none")
 
-    /// Sets the padding area on all four sides of an element. It is a shorthand for padding-top,
-    /// padding-right, padding-bottom, and padding-left.
-    []
-    member inline _.padding([] comb: CombineKeyValue, top: int, right: int, bottom: int, left: int) =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("padding: ")
-                .Append(top)
-                .Append("px ")
-                .Append(right)
-                .Append("px ")
-                .Append(bottom)
-                .Append("px ")
-                .Append(left)
-                .Append("px; "))
+    /// All containment rules applied.
+    []
+    member inline _.containStrict([] comb: CombineKeyValue) = comb &>> ("contain", "strict")
 
-    /// Sets the height of the padding area on the bottom of an element.
-    []
-    member inline _.paddingBottom([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("padding-bottom", value)
+    /// All containment except size.
+    []
+    member inline _.containContent([] comb: CombineKeyValue) = comb &>> ("contain", "content")
 
-    /// Sets the height of the padding area on the bottom of an element.
-    []
-    member inline _.paddingBottom([] comb: CombineKeyValue, value: string) =
-        comb &>> ("padding-bottom", value)
+    /// Size containment.
+    []
+    member inline _.containSize([] comb: CombineKeyValue) = comb &>> ("contain", "size")
 
-    /// Sets the width of the padding area to the left of an element.
-    []
-    member inline _.paddingLeft([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("padding-left", value)
+    /// Layout containment.
+    []
+    member inline _.containLayout([] comb: CombineKeyValue) = comb &>> ("contain", "layout")
 
-    /// Sets the width of the padding area to the left of an element.
-    []
-    member inline _.paddingLeft([] comb: CombineKeyValue, value: string) =
-        comb &>> ("padding-left", value)
+    /// Paint containment.
+    []
+    member inline _.containPaint([] comb: CombineKeyValue) = comb &>> ("contain", "paint")
 
-    /// Sets the width of the padding area on the right of an element.
-    []
-    member inline _.paddingRight([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("padding-right", value)
+    /// Sets this property to its default value.
+    []
+    member inline _.containInitial([] comb: CombineKeyValue) = comb &>> ("contain", "initial")
 
-    /// Sets the width of the padding area on the right of an element.
-    []
-    member inline _.paddingRight([] comb: CombineKeyValue, value: string) =
-        comb &>> ("padding-right", value)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.containInheritFromParent([] comb: CombineKeyValue) = comb &>> ("contain", "inherit")
+
+    /// Sets the block-start margin (top in horizontal-tb). Accepts a CSS length or variable.
+    []
+    member inline _.marginBlockStart([] comb: CombineKeyValue, value: string) =
+        comb &>> ("margin-block-start", value)
+
+    /// Sets the block-start margin in pixels.
+    []
+    member inline _.marginBlockStart([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("margin-block-start", value)
+
+    /// Sets the block-end margin (bottom in horizontal-tb). Accepts a CSS length or variable.
+    []
+    member inline _.marginBlockEnd([] comb: CombineKeyValue, value: string) =
+        comb &>> ("margin-block-end", value)
+
+    /// Sets the block-end margin in pixels.
+    []
+    member inline _.marginBlockEnd([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("margin-block-end", value)
+
+    /// Sets the inline-start margin (left in ltr). Accepts a CSS length or variable.
+    []
+    member inline _.marginInlineStart([] comb: CombineKeyValue, value: string) =
+        comb &>> ("margin-inline-start", value)
+
+    /// Sets the inline-start margin in pixels.
+    []
+    member inline _.marginInlineStart([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("margin-inline-start", value)
+
+    /// Sets the inline-end margin (right in ltr). Accepts a CSS length or variable.
+    []
+    member inline _.marginInlineEnd([] comb: CombineKeyValue, value: string) =
+        comb &>> ("margin-inline-end", value)
+
+    /// Sets the inline-end margin in pixels.
+    []
+    member inline _.marginInlineEnd([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("margin-inline-end", value)
+
+    /// Sets the block-start padding. Accepts a CSS length or variable.
+    []
+    member inline _.paddingBlockStart([] comb: CombineKeyValue, value: string) =
+        comb &>> ("padding-block-start", value)
+
+    /// Sets the block-start padding in pixels.
+    []
+    member inline _.paddingBlockStart([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("padding-block-start", value)
+
+    /// Sets the block-end padding. Accepts a CSS length or variable.
+    []
+    member inline _.paddingBlockEnd([] comb: CombineKeyValue, value: string) =
+        comb &>> ("padding-block-end", value)
+
+    /// Sets the block-end padding in pixels.
+    []
+    member inline _.paddingBlockEnd([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("padding-block-end", value)
+
+    /// Sets the inline-start padding. Accepts a CSS length or variable.
+    []
+    member inline _.paddingInlineStart([] comb: CombineKeyValue, value: string) =
+        comb &>> ("padding-inline-start", value)
+
+    /// Sets the inline-start padding in pixels.
+    []
+    member inline _.paddingInlineStart([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("padding-inline-start", value)
+
+    /// Sets the inline-end padding. Accepts a CSS length or variable.
+    []
+    member inline _.paddingInlineEnd([] comb: CombineKeyValue, value: string) =
+        comb &>> ("padding-inline-end", value)
+
+    /// Sets the inline-end padding in pixels.
+    []
+    member inline _.paddingInlineEnd([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("padding-inline-end", value)
+
+    /// Sets the scroll snap position of the element. Accepts none | start | end | center | "block start" etc. or a CSS variable.
+    []
+    member inline _.scrollSnapAlign([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-snap-align", value)
+
+    /// No snap position. This is default.
+    []
+    member inline _.scrollSnapAlignNone([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-align", "none")
+
+    /// Snaps to the start edge.
+    []
+    member inline _.scrollSnapAlignStart([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-align", "start")
+
+    /// Snaps to the end edge.
+    []
+    member inline _.scrollSnapAlignEnd([] comb: CombineKeyValue) = comb &>> ("scroll-snap-align", "end")
+
+    /// Snaps to the center.
+    []
+    member inline _.scrollSnapAlignCenter([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-align", "center")
 
-    /// Sets the height of the padding area on the top of an element.
-    []
-    member inline _.paddingTop([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("padding-top", value)
+    /// Sets this property to its default value.
+    []
+    member inline _.scrollSnapAlignInitial([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-align", "initial")
 
-    /// Sets the height of the padding area on the top of an element.
-    []
-    member inline _.paddingTop([] comb: CombineKeyValue, value: string) =
-        comb &>> ("padding-top", value)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.scrollSnapAlignInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-align", "inherit")
+
+    /// Sets how strictly snap points are enforced. Accepts none | x | y | block | inline | both | mandatory | proximity or a combined string/CSS variable.
+    []
+    member inline _.scrollSnapType([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-snap-type", value)
+
+    /// No snapping. This is default.
+    []
+    member inline _.scrollSnapTypeNone([] comb: CombineKeyValue) = comb &>> ("scroll-snap-type", "none")
+
+    /// Mandatory snapping on the x axis.
+    []
+    member inline _.scrollSnapTypeXMandatory([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-type", "x mandatory")
+
+    /// Proximity snapping on the x axis.
+    []
+    member inline _.scrollSnapTypeXProximity([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-type", "x proximity")
+
+    /// Mandatory snapping on the y axis.
+    []
+    member inline _.scrollSnapTypeYMandatory([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-type", "y mandatory")
+
+    /// Proximity snapping on the y axis.
+    []
+    member inline _.scrollSnapTypeYProximity([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-type", "y proximity")
+
+    /// Mandatory snapping on both axes.
+    []
+    member inline _.scrollSnapTypeBothMandatory([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-type", "both mandatory")
 
-    /// Sets the flex shrink factor of a flex item. If the size of all flex items is larger than
-    /// the flex container, items shrink to fit according to flex-shrink.
-    []
-    member inline _.flexShrink([] comb: CombineKeyValue, value: int) =
-        comb &&& mkWithKV ("flex-shrink", value)
+    /// Sets this property to its default value.
+    []
+    member inline _.scrollSnapTypeInitial([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-type", "initial")
 
-    /// Sets the initial main size of a flex item. It sets the size of the content box unless
-    /// otherwise set with box-sizing.
-    []
-    member inline _.flexBasis([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("flex-basis", value)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.scrollSnapTypeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-type", "inherit")
 
-    /// Sets the initial main size of a flex item. It sets the size of the content box unless
-    /// otherwise set with box-sizing.
-    []
-    member inline _.flexBasis([] comb: CombineKeyValue, value: string) = comb &>> ("flex-basis", value)
+    /// Sets whether the scroll may pass over a snap position. Accepts normal | always or a CSS variable.
+    []
+    member inline _.scrollSnapStop([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-snap-stop", value)
 
-    /// Sets the flex grow factor of a flex item main size. It specifies how much of the remaining
-    /// space in the flex container should be assigned to the item (the flex grow factor).
-    []
-    member inline _.flexGrow([] comb: CombineKeyValue, value: int) =
-        comb &&& mkWithKV ("flex-grow", value)
+    /// Snap positions may be passed. This is default.
+    []
+    member inline _.scrollSnapStopNormal([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-stop", "normal")
 
-    /// Shorthand of flex-grow, flex-shrink and flex-basis
-    []
-    member inline _.flex([] comb: CombineKeyValue, grow: int, shrink: int, ?basis: string) =
-        CombineKeyValue(fun sb ->
-            let sb = comb.Invoke(sb).Append("flex: ")
-            sb.Append(grow) |> ignore
-            sb.Append(' ').Append(shrink) |> ignore
-            basis |> Option.iter (fun x -> sb.Append(' ').Append(x) |> ignore)
-            sb.Append("; "))
+    /// Snap positions must not be passed.
+    []
+    member inline _.scrollSnapStopAlways([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-stop", "always")
 
-    /// Shorthand of flex-grow and flex-basis
-    []
-    member inline _.flex([] comb: CombineKeyValue, grow: int, ?basis: string) =
-        CombineKeyValue(fun sb ->
-            let sb = comb.Invoke(sb).Append("flex: ")
-            sb.Append(grow) |> ignore
-            basis |> Option.iter (fun x -> sb.Append(' ').Append(x) |> ignore)
-            sb.Append("; "))
+    /// Sets this property to its default value.
+    []
+    member inline _.scrollSnapStopInitial([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-stop", "initial")
 
+    /// Inherits this property from its parent element.
+    []
+    member inline _.scrollSnapStopInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-stop", "inherit")
 
-    /// Shorthand of flex-grow, flex-shrink and flex-basis
-    []
-    member inline _.flex([] comb: CombineKeyValue, value: string) = comb &>> ("flex", value)
+    /// Shorthand for all scroll-margin properties (e.g. "10px", "10px 20px").
+    []
+    member inline _.scrollMargin([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-margin", value)
 
-    /// Sets the width of each individual grid column in pixels.
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-template-columns: 100px 200px 100px;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// gridTemplateColumns: [100; 200; 100]
-    /// ```
-    []
-    member inline _.gridTemplateColumns([] comb: CombineKeyValue, value: int seq) =
-        CombineKeyValue(fun sb ->
-            let sb = comb.Invoke(sb).Append("grid-template-columns: ")
-            use e = value.GetEnumerator()
+    /// Shorthand for all scroll-padding properties (e.g. "10px", "10px 20px").
+    []
+    member inline _.scrollPadding([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-padding", value)
 
-            if e.MoveNext() then
-                sb.Append(e.Current).Append("px") |> ignore
 
-                while e.MoveNext() do
-                    sb.Append(" ").Append(e.Current).Append("px") |> ignore
 
-            sb.Append("; "))
 
-    /// Sets the width of each individual grid column.
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-template-columns: 1fr 1fr 2fr;
-    /// ```
-    []
-    member inline _.gridTemplateColumns([] comb: CombineKeyValue, value) =
-        comb &>> ("grid-template-columns", value)
+    // --------------------------------------------------------------------
+    // List styles
+    // --------------------------------------------------------------------
 
-    /// Sets the width of a number of grid columns to the defined width, as well as naming the lines between them
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-template-columns: repeat(3, 1fr [col-start]);
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridTemplateColumns (3, "1fr", "col-start"))
-    /// ```
-    []
-    member inline _.gridTemplateColumns
-        ([] comb: CombineKeyValue, count: int, size: string, ?areaName: string)
-        =
-        let areaName =
-            match areaName with
-            | Some n -> ", [" + n + "]"
-            | None -> ""
 
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("grid-template-columns: ")
-                .Append("repeat(")
-                .Append(count)
-                .Append(", ")
-                .Append(size)
-                .Append(areaName)
-                .Append("); "))
+    /// Default value. The marker is a filled circle
+    []
+    member inline _.listStyleTypeDisc([] comb: CombineKeyValue) = comb &>> ("list-style-type", "disc")
 
-    /// Sets the width of a number of grid rows to the defined width
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-template-rows: 100px 200px 100px;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridTemplateRows [100, 200, 100]
-    /// ```
-    []
-    member inline _.gridTemplateRows([] comb: CombineKeyValue, value: int seq) =
-        CombineKeyValue(fun sb ->
-            let sb = comb.Invoke(sb).Append("grid-template-rows: ")
-            use e = value.GetEnumerator()
+    /// The marker is traditional Armenian numbering
+    []
+    member inline _.listStyleTypeArmenian([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "armenian")
 
-            if e.MoveNext() then
-                sb.Append(e.Current).Append("px") |> ignore
+    /// The marker is a circle
+    []
+    member inline _.listStyleTypeCircle([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "circle")
 
-                while e.MoveNext() do
-                    sb.Append(" ").Append(e.Current).Append("px") |> ignore
+    /// The marker is plain ideographic numbers
+    []
+    member inline _.listStyleTypeCjkIdeographic([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "cjk-ideographic")
 
-            sb.Append("; "))
+    /// The marker is a number
+    []
+    member inline _.listStyleTypeDecimal([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "decimal")
 
-    /// Sets the width of a number of grid rows to the defined width
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-template-rows: 1fr 10% 250px auto;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridTemplateRows ["1fr"]
-    /// ```
-    []
-    member inline _.gridTemplateRows([] comb: CombineKeyValue, value: string) =
-        comb &>> ("grid-template-rows", value)
+    /// The marker is a number with leading zeros (01, 02, 03, etc.))
+    []
+    member inline _.listStyleTypeDecimalLeadingZero([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "decimal-leading-zero")
 
-    /// Sets the width of a number of grid rows to the defined width
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-template-rows: repeat(3, 10%);
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridTemplateRows (3, length.percent 10))
-    /// ```
-    []
-    member inline _.gridTemplateRows
-        ([] comb: CombineKeyValue, count: int, size: string, ?areaName: string)
-        =
-        let areaName =
-            match areaName with
-            | Some n -> " [" + n + "]"
-            | None -> ""
+    /// The marker is traditional Georgian numbering
+    []
+    member inline _.listStyleTypeGeorgian([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "georgian")
 
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("grid-template-rows: ")
-                .Append("repeat(")
-                .Append(count)
-                .Append(", ")
-                .Append(size)
-                .Append(areaName)
-                .Append("); "))
+    /// The marker is traditional Hebrew numbering
+    []
+    member inline _.listStyleTypeHebrew([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "hebrew")
 
-    /// 2D representation of grid layout as blocks with names
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-template-areas:
-    ///     'header header header header'
-    ///     'nav nav . sidebar'
-    ///     'footer footer footer footer';
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridTemplateAreas [
-    ///     "header header header header"
-    ///     "nav    nav    .      sidebar"
-    ///     "footer footer footer footer"
-    /// ]
-    /// ```
-    []
-    member inline _.gridTemplateAreas([] comb: CombineKeyValue, value: string list) =
-        CombineKeyValue(fun sb ->
-            let sb = comb.Invoke(sb).Append("grid-template-areas: ")
-            let mutable first = true
+    /// The marker is traditional Hiragana numbering
+    []
+    member inline _.listStyleTypeHiragana([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "hiragana")
 
-            for item in value do
-                if first then first <- false else sb.Append(" ") |> ignore
-                sb.Append("'").Append(item).Append("'") |> ignore
+    /// The marker is traditional Hiragana iroha numbering
+    []
+    member inline _.listStyleTypeHiraganaIroha([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "hiragana-iroha")
 
-            sb.Append("; "))
+    /// The marker is traditional Katakana numbering
+    []
+    member inline _.listStyleTypeKatakana([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "katakana")
 
-    /// Specifies the size of the grid lines. You can think of it like
-    /// setting the width of the gutters between the columns.
-    ///
-    /// **CSS**
-    /// ```css
-    /// column-gap: 10px;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.columnGap 10
-    /// ```
-    []
-    member inline _.columnGap([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("column-gap", value)
+    /// The marker is traditional Katakana iroha numbering
+    []
+    member inline _.listStyleTypeKatakanaIroha([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "katakana-iroha")
 
-    /// Specifies the size of the grid lines. You can think of it like
-    /// setting the width of the gutters between the columns.
-    ///
-    /// **CSS**
-    /// ```css
-    /// column-gap: 1em;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.columnGap (length.em 1))
-    /// ```
-    []
-    member inline _.columnGap([] comb: CombineKeyValue, value: string) = comb &>> ("column-gap", value)
+    /// The marker is lower-alpha (a, b, c, d, e, etc.))
+    []
+    member inline _.listStyleTypeLowerAlpha([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "lower-alpha")
 
-    /// Specifies the size of the grid lines. You can think of it like
-    /// setting the width of the gutters between the rows.
-    ///
-    /// **CSS**
-    /// ```css
-    /// row-gap: 10px;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.rowGap 10
-    /// ```
-    []
-    member inline _.rowGap([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("row-gap", value)
+    /// The marker is lower-greek
+    []
+    member inline _.listStyleTypeLowerGreek([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "lower-greek")
 
-    /// Specifies the size of the grid lines. You can think of it like
-    /// setting the width of the gutters between the rows.
-    ///
-    /// **CSS**
-    /// ```css
-    /// row-gap: 1em;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.rowGap (length.em 1))
-    /// ```
-    []
-    member inline _.rowGap([] comb: CombineKeyValue, value: string) = comb &>> ("row-gap", value)
+    /// The marker is lower-latin (a, b, c, d, e, etc.))
+    []
+    member inline _.listStyleTypeLowerLatin([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "lower-latin")
 
-    /// Specifies the size of the grid lines. You can think of it like
-    /// setting the width of the gutters between the rows/columns.
-    ///
-    /// _Shorthand for `rowGap` and `columnGap`_
-    ///
-    /// **CSS**
-    /// ```css
-    /// gap: 1em 2em;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gap (length.em 1, length.em 2))
-    /// ```
-    []
-    member inline _.gap([] comb: CombineKeyValue, rowGap: string, columnGap: string) =
-        CombineKeyValue(fun sb ->
-            comb.Invoke(sb).Append("gap: ").Append(rowGap).Append(" ").Append(columnGap).Append("; "))
+    /// The marker is lower-roman (i, ii, iii, iv, v, etc.))
+    []
+    member inline _.listStyleTypeLowerRoman([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "lower-roman")
 
-    /// Sets the gap (both row and column) to the same CSS length value.
-    []
-    member inline _.gap([] comb: CombineKeyValue, gap: string) = comb &>> ("gap", gap)
+    /// No marker is shown
+    []
+    member inline _.listStyleTypeNone([] comb: CombineKeyValue) = comb &>> ("list-style-type", "none")
 
-    /// Sets the gap (both row and column) in pixels.
-    []
-    member inline _.gap([] comb: CombineKeyValue, gap: int) = comb &>> ("gap", string gap + "px")
+    /// The marker is a square
+    []
+    member inline _.listStyleTypeSquare([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "square")
 
-    /// Sets where an item in the grid starts
-    /// The value can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
-    ///
-    ///
-    /// When there are multiple named lines with the same name, you can specify which one by count
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-column-start: col 2;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridColumnStart ("col", 2))
-    /// ```
-    []
-    member inline _.gridColumnStart([] comb: CombineKeyValue, value: string, ?count: int) =
-        CombineKeyValue(fun sb ->
-            let sb' = comb.Invoke(sb).Append("grid-column-start: ").Append(value)
+    /// The marker is upper-alpha (A, B, C, D, E, etc.))
+    []
+    member inline _.listStyleTypeUpperAlpha([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "upper-alpha")
 
-            (match count with
-             | Some x -> sb'.Append(", ").Append(x)
-             | _ -> sb')
-                .Append("; "))
+    /// The marker is upper-greek
+    []
+    member inline _.listStyleTypeUpperGreek([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "upper-greek")
 
-    /// Sets where an item in the grid starts
-    /// The value can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
-    ///
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-column-start: 2;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridColumnStart 2
-    /// ```
-    []
-    member inline _.gridColumnStart([] comb: CombineKeyValue, value: int) =
-        comb &&& mkWithKV ("grid-column-start", value)
+    /// The marker is upper-latin (A, B, C, D, E, etc.))
+    []
+    member inline _.listStyleTypeUpperLatin([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "upper-latin")
 
-    /// Sets where an item in the grid starts
-    /// The value can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
-    ///
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-column-start: span odd-col;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridColumnStart (gridColumn.span "odd-col"))
-    /// ```
-    []
-    member inline _.gridColumnStart([] comb: CombineKeyValue, value: string) =
-        comb &>> ("grid-column-start", value)
+    /// The marker is upper-roman (I, II, III, IV, V, etc.))
+    []
+    member inline _.listStyleTypeUpperRoman([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "upper-roman")
 
-    /// Sets where an item in the grid ends
-    /// The value can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
-    ///
+    /// Sets this property to its default value.
     ///
-    /// _When there are multiple named lines with the same name, you can specify which one by count_
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
+    []
+    member inline _.listStyleTypeInitial([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "initial")
+
+    /// Inherits this property from its parent element.
     ///
-    /// **CSS**
-    /// ```css
-    /// grid-column-end: odd-col 2;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridColumnEnd ("odd-col", 2))
-    /// ```
-    []
-    member inline _.gridColumnEnd([] comb: CombineKeyValue, value: string, ?count: int) =
-        CombineKeyValue(fun sb ->
-            let sb' = comb.Invoke(sb).Append("grid-column-end: ").Append(value)
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
+    []
+    member inline _.listStyleTypeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "inherit")
 
-            (match count with
-             | Some x -> sb'.Append(", ").Append(x)
-             | _ -> sb')
-                .Append("; "))
+    /// Sets the list item marker type using a CSS string value (e.g. "disc", "var(--list-style-type)").
+    []
+    member inline _.listStyleType([] comb: CombineKeyValue, value: string) =
+        comb &>> ("list-style-type", value)
 
-    /// Sets where an item in the grid ends
-    /// The value can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
-    ///
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-column-end: 2;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridColumnEnd 2
-    /// ```
-    []
-    member inline _.gridColumnEnd([] comb: CombineKeyValue, value: int) =
-        comb &&& mkWithKV ("grid-column-end", value)
+    /// Removes the list-style-image marker.
+    []
+    member inline _.propertyNone([] comb: CombineKeyValue) = comb &>> ("list-style-image", "none")
 
-    /// Sets where an item in the grid ends
-    /// The value can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
-    ///
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-column-end: span 2;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridColumnEnd (gridColumn.span 2))
-    /// ```
-    []
-    member inline _.gridColumnEnd([] comb: CombineKeyValue, value: string) =
-        comb &>> ("grid-column-end", value)
+    /// The path to the image to be used as a list-item marker
+    []
+    member inline _.propertyUrl([] comb: CombineKeyValue, path: string) =
+        comb
+        &&& CombineKeyValue(fun sb -> sb.Append("list-style-image: url(").Append(path).Append("); "))
 
-    /// Sets where an item in the grid starts
-    /// The value can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
+    /// Sets this property to its default value.
     ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
+    []
+    member inline _.propertyInitial([] comb: CombineKeyValue) =
+        comb &>> ("list-style-image", "initial")
+
+    /// Inherits this property from its parent element.
     ///
-    /// **CSS**
-    /// ```css
-    /// grid-row-start: col 2;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridRowStart ("col", 2))
-    /// ```
-    []
-    member inline _.gridRowStart([] comb: CombineKeyValue, value: string, ?count: int) =
-        CombineKeyValue(fun sb ->
-            let sb' = comb.Invoke(sb).Append("grid-row-start: ").Append(value)
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
+    []
+    member inline _.propertyInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("list-style-image", "inherit")
 
-            (match count with
-             | Some x -> sb'.Append(", ").Append(x)
-             | _ -> sb')
-                .Append("; "))
+    /// The bullet points will be inside the list item
+    []
+    member inline _.listStylePositionInside([] comb: CombineKeyValue) =
+        comb &>> ("list-style-position", "inside")
 
-    /// Sets where an item in the grid starts
-    /// The value can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
-    ///
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-row-start: 2;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridRowStart 2
-    /// ```
-    []
-    member inline _.gridRowStart([] comb: CombineKeyValue, value: int) =
-        comb &&& mkWithKV ("grid-row-start", value)
+    /// The bullet points will be outside the list item. This is default
+    []
+    member inline _.listStylePositionOutside([] comb: CombineKeyValue) =
+        comb &>> ("list-style-position", "outside")
 
-    /// Sets where an item in the grid starts
-    /// The value can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
-    ///
+    /// Sets this property to its default value.
     ///
-    /// **CSS**
-    /// ```css
-    /// grid-row-start: span odd-col;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridRowStart (gridRow.span "odd-col"))
-    /// ```
-    []
-    member inline _.gridRowStart([] comb: CombineKeyValue, value: string) =
-        comb &>> ("grid-row-start", value)
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
+    []
+    member inline _.listStylePositionInitial([] comb: CombineKeyValue) =
+        comb &>> ("list-style-position", "initial")
 
-    /// Sets where an item in the grid ends
-    /// The value can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
-    ///
-    ///
-    /// _When there are multiple named lines with the same name, you can specify which one by count_
+    /// Inherits this property from its parent element.
     ///
-    /// **CSS**
-    /// ```css
-    /// grid-row-end: odd-col 2;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridRowEnd ("odd-col", 2))
-    /// ```
-    []
-    member inline _.gridRowEnd([] comb: CombineKeyValue, value: string, ?count: int) =
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
+    []
+    member inline _.listStylePositionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("list-style-position", "inherit")
+
+    /// Sets the position of the list item marker using a CSS string value (e.g. "inside", "var(--list-style-position)").
+    []
+    member inline _.listStylePosition([] comb: CombineKeyValue, value: string) =
+        comb &>> ("list-style-position", value)
+
+    /// Shorthand for list-style-type, list-style-position and list-style-image (e.g. "square inside").
+    []
+    member inline _.listStyle([] comb: CombineKeyValue, value: string) = comb &>> ("list-style", value)
+
+
+
+
+    // --------------------------------------------------------------------
+    // Table styles
+    // --------------------------------------------------------------------
+
+
+    /// Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable
+    /// content in the cells. The content will dictate the layout
+    []
+    member inline _.tableLayoutAuto([] comb: CombineKeyValue) = comb &>> ("table-layout", "auto")
+
+    /// Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col
+    /// or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths
+    /// are present on the first row, the column widths are divided equally across the table, regardless of content
+    /// inside the cells
+    []
+    []
+    member inline _.tableLayoutFixed'([] comb: CombineKeyValue) = comb &>> ("table-layout", "fixed")
+
+    /// Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col elements or by the width of the first row of cells.
+    []
+    member inline _.tableLayoutFixed([] comb: CombineKeyValue) = comb &>> ("table-layout", "fixed")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.tableLayoutInitial([] comb: CombineKeyValue) = comb &>> ("table-layout", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.tableLayoutInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("table-layout", "inherit")
+
+    /// Sets the table layout algorithm using a CSS string value (e.g. "fixed", "var(--table-layout)").
+    []
+    member inline _.tableLayout([] comb: CombineKeyValue, value: string) =
+        comb &>> ("table-layout", value)
+
+    /// Display borders on empty cells. This is default
+    []
+    member inline _.emptyCellsShow([] comb: CombineKeyValue) = comb &>> ("empty-cells", "show")
+
+    /// Hide borders on empty cells
+    []
+    member inline _.emptyCellsHide([] comb: CombineKeyValue) = comb &>> ("empty-cells", "hide")
+
+    /// Sets this property to its default value)
+    []
+    member inline _.emptyCellsInitial([] comb: CombineKeyValue) = comb &>> ("empty-cells", "initial")
+
+    /// Inherits this property from its parent element
+    []
+    member inline _.emptyCellsInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("empty-cells", "inherit")
+
+    /// Sets whether empty table cells show borders using a CSS string value (e.g. "hide", "var(--empty-cells)").
+    []
+    member inline _.emptyCells([] comb: CombineKeyValue, value: string) =
+        comb &>> ("empty-cells", value)
+
+
+
+
+    // --------------------------------------------------------------------
+    // Transform styles
+    // --------------------------------------------------------------------
+
+
+    /// Specifies that child elements will NOT preserve its 3D position. This is default.
+    []
+    member inline _.transformStyleFlat([] comb: CombineKeyValue) = comb &>> ("transform-style", "flat")
+
+    /// Specifies that child elements will preserve its 3D position
+    []
+    member inline _.transformStylePreserve3D([] comb: CombineKeyValue) =
+        comb &>> ("transform-style", "preserve-3d")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.transformStyleInitial([] comb: CombineKeyValue) =
+        comb &>> ("transform-style", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.transformStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("transform-style", "inherit")
+
+    /// Sets how nested elements are rendered in 3D space using a CSS string value (e.g. "preserve-3d", "var(--transform-style)").
+    []
+    member inline _.transformStyle([] comb: CombineKeyValue, value: string) =
+        comb &>> ("transform-style", value)
+
+    /// Applies a 2D or 3D transformation to an element. Accepts a CSS transform value (e.g. "rotate(45deg)", "translate(10px, 20px)", "scale(1.5)").
+    []
+    member inline _.transform([] comb: CombineKeyValue, transformation: string) =
+        comb &>> ("transform", transformation)
+
+    /// Defines that there should be no transformation.
+    []
+    member inline _.transformNone([] comb: CombineKeyValue) = comb &>> ("transform", "none")
+
+    /// Allows you to change the position of transformed elements.
+    []
+    member inline _.transformOrigin([] comb: CombineKeyValue, x: string) =
+        comb &>> ("transform-origin", x)
+
+    /// Allows you to change the position of transformed elements, using separate x and y values.
+    []
+    member inline _.transformOrigin([] comb: CombineKeyValue, x: string, y: string) =
         CombineKeyValue(fun sb ->
-            let sb' = comb.Invoke(sb).Append("grid-row-end: ").Append(value)
+            comb.Invoke(sb).Append("transform-origin: ").Append(x).Append(" ").Append(y).Append("; "))
 
-            (match count with
-             | Some x -> sb'.Append(", ").Append(x)
-             | _ -> sb')
-                .Append("; "))
+    /// Defines a 2D transformation, using a matrix of six values.
+    []
+    member inline _.transformMatrix
+        ([] comb: CombineKeyValue, x1: int, y1: int, z1: int, x2: int, y2: int, z2: int)
+        =
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("transform: ")
+                .Append("matrix(")
+                .Append(x1)
+                .Append(",")
+                .Append(y1)
+                .Append(",")
+                .Append(z1)
+                .Append(",")
+                .Append(x2)
+                .Append(",")
+                .Append(y2)
+                .Append(",")
+                .Append(z2)
+                .Append("); "))
 
-    /// Sets where an item in the grid ends
-    /// The value can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
-    ///
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-row-end: 2;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridRowEnd 2
-    /// ```
-    []
-    member inline _.gridRowEnd([] comb: CombineKeyValue, value: int) =
-        comb &&& mkWithKV ("grid-row-end", value)
+    /// Defines a 2D translation.
+    []
+    member inline _.transformTranslate([] comb: CombineKeyValue, x: int, y: int) =
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("transform: ")
+                .Append("translate(")
+                .Append(x)
+                .Append("px, ")
+                .Append(y)
+                .Append("px); "))
 
-    /// Sets where an item in the grid ends
-    /// The value can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
-    ///
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-row-end: span 2;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridRowEnd (gridRow.span 2))
-    /// ```
-    []
-    member inline _.gridRowEnd([] comb: CombineKeyValue, value: string) =
-        comb &>> ("grid-row-end", value)
+    /// Defines a 2D translation.
+    []
+    member inline _.transformTranslate([] comb: CombineKeyValue, x: string, y: string) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("transform: ").Append("translate(").Append(x).Append(", ").Append(y).Append("); "))
 
-    /// Determines a grid item��s location within the grid by referring to specific grid lines.
-    /// start is the line where the item begins, end' is the line where it ends.
-    /// They can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
-    ///
-    ///
-    /// _Shorthand for `gridColumnStart` and `gridColumnEnds`_
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-column: col-2 / col-4;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridColumn ("col-2", "col-4"))
-    /// ```
-    []
-    member inline _.gridColumn([] comb: CombineKeyValue, start: string, end': string) =
+    /// Defines a 3D translation.
+    []
+    member inline _.transformTranslate3D([] comb: CombineKeyValue, x: int, y: int, z: int) =
         CombineKeyValue(fun sb ->
-            comb.Invoke(sb).Append("grid-column: ").Append(start).Append(" / ").Append(end').Append("; "))
+            comb
+                .Invoke(sb)
+                .Append("transform: ")
+                .Append("translate3d(")
+                .Append(x)
+                .Append("px, ")
+                .Append(y)
+                .Append("px, ")
+                .Append(z)
+                .Append("px); "))
+
+    /// Defines a 3D translation.
+    []
+    member inline _.transformTranslate3D([] comb: CombineKeyValue, x: string, y: string, z: string) =
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("transform: ")
+                .Append("translate3d(")
+                .Append(x)
+                .Append(", ")
+                .Append(y)
+                .Append(", ")
+                .Append(z)
+                .Append("); "))
+
+    /// Defines a translation, using only the value for the X-axis.
+    []
+    member inline _.transformTranslateX([] comb: CombineKeyValue, x: int) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateX(").Append(x).Append("px); "))
+
+    /// Defines a translation, using only the value for the X-axis.
+    []
+    member inline _.transformTranslateX([] comb: CombineKeyValue, x: string) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateX(").Append(x).Append("); "))
+
+    /// Defines a translation, using only the value for the Y-axis
+    []
+    member inline _.transformTranslateY([] comb: CombineKeyValue, y: int) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateY(").Append(y).Append("px); "))
+
+    /// Defines a translation, using only the value for the Y-axis
+    []
+    member inline _.transformTranslateY([] comb: CombineKeyValue, y: string) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateY(").Append(y).Append("); "))
+
+    /// Defines a 3D translation, using only the value for the Z-axis
+    []
+    member inline _.transformTranslateZ([] comb: CombineKeyValue, z: int) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateZ(").Append(z).Append("px); "))
+
+    /// Defines a 3D translation, using only the value for the Z-axis
+    []
+    member inline _.transformTranslateZ([] comb: CombineKeyValue, z: string) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("translateZ(").Append(z).Append("); "))
+
+    /// Defines a 2D scale transformation.
+    []
+    member inline _.transformScale([] comb: CombineKeyValue, x: int, y: int) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("transform: ").Append("scale(").Append(x).Append(", ").Append(y).Append("); "))
+
+    /// Defines a scale transformation.
+    /// Defines a scale transformation.
+    []
+    member inline _.transformScale([] comb: CombineKeyValue, n: float) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("scale(").Append(n).Append("); "))
+
+    /// Defines a 3D scale transformation
+    []
+    member inline _.transformScale3D([] comb: CombineKeyValue, x: int, y: int, z: int) =
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("transform: ")
+                .Append("scale3d(")
+                .Append(x)
+                .Append(", ")
+                .Append(y)
+                .Append(", ")
+                .Append(z)
+                .Append("); "))
+
+    /// Defines a scale transformation by giving a value for the X-axis.
+    []
+    member inline _.transformScaleX([] comb: CombineKeyValue, x: int) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("scaleX(").Append(x).Append("); "))
+
+    /// Defines a scale transformation by giving a value for the Y-axis.
+    []
+    member inline _.transformScaleY([] comb: CombineKeyValue, y: int) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("scaleY(").Append(y).Append("); "))
+
+    /// Defines a 3D translation, using only the value for the Z-axis
+    []
+    member inline _.transformScaleZ([] comb: CombineKeyValue, z: int) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("scaleZ(").Append(z).Append("); "))
+
+    /// Defines a 2D rotation, the angle is specified in the parameter.
+    []
+    member inline _.transformRotate([] comb: CombineKeyValue, deg: int) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("rotate(").Append(deg).Append("deg); "))
+
+    /// Defines a 2D rotation, the angle is specified in the parameter.
+    []
+    member inline _.transformRotate([] comb: CombineKeyValue, deg: float) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("rotate(").Append(deg).Append("deg); "))
+
+    /// Defines a 3D rotation along the X-axis.
+    []
+    member inline _.transformRotateX([] comb: CombineKeyValue, deg: float) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("rotateX(").Append(deg).Append("deg); "))
+
+    /// Defines a 3D rotation along the Y-axis
+    []
+    member inline _.transformRotateY([] comb: CombineKeyValue, deg: float) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("rotateY(").Append(deg).Append("deg); "))
+
+    /// Defines a 3D rotation along the Z-axis
+    []
+    member inline _.transformRotateZ([] comb: CombineKeyValue, deg: float) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("rotateZ(").Append(deg).Append("deg); "))
+
+    /// Defines a 2D skew transformation along the X- and the Y-axis.
+    []
+    member inline _.transformSkew([] comb: CombineKeyValue, xAngle: float, yAngle: float) =
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("transform: ")
+                .Append("skew(")
+                .Append(xAngle)
+                .Append("deg, ")
+                .Append(yAngle)
+                .Append("deg); "))
+
+    /// Defines a 2D skew transformation along the X-axis
+    []
+    member inline _.transformSkewX([] comb: CombineKeyValue, xAngle: float) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("transform: ").Append("skewX(").Append(xAngle).Append("deg); "))
+
+    /// Defines a 2D skew transformation along the Y-axis
+    []
+    member inline _.transformSkewY([] comb: CombineKeyValue, yAngle: float) =
+        CombineKeyValue(fun sb ->
+            comb.Invoke(sb).Append("transform: ").Append("skewY(").Append(yAngle).Append("deg); "))
+
+    /// Defines a perspective view for a 3D transformed element
+    []
+    member inline _.transformPerspective([] comb: CombineKeyValue, n: int) =
+        CombineKeyValue(fun sb -> comb.Invoke(sb).Append("transform: ").Append("perspective(").Append(n).Append("); "))
+
+    /// Sets this property to its default value.
+    []
+    member inline _.transformInitial([] comb: CombineKeyValue) = comb &>> ("transform", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.transformInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("transform", "inherit")
+
+    /// Sets the reference box for transforms. Accepts content-box | border-box | fill-box | stroke-box | view-box or a CSS variable.
+    []
+    member inline _.transformBox([] comb: CombineKeyValue, value: string) =
+        comb &>> ("transform-box", value)
+
+    /// Transforms are relative to the content box.
+    []
+    member inline _.transformBoxContentBox([] comb: CombineKeyValue) =
+        comb &>> ("transform-box", "content-box")
+
+    /// Transforms are relative to the border box.
+    []
+    member inline _.transformBoxBorderBox([] comb: CombineKeyValue) =
+        comb &>> ("transform-box", "border-box")
+
+    /// Transforms are relative to the object bounding box (SVG).
+    []
+    member inline _.transformBoxFillBox([] comb: CombineKeyValue) =
+        comb &>> ("transform-box", "fill-box")
+
+    /// Transforms are relative to the nearest SVG viewport. This is default.
+    []
+    member inline _.transformBoxViewBox([] comb: CombineKeyValue) =
+        comb &>> ("transform-box", "view-box")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.transformBoxInitial([] comb: CombineKeyValue) =
+        comb &>> ("transform-box", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.transformBoxInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("transform-box", "inherit")
+
+    /// Sets whether the back face of a transformed element is visible. Accepts visible | hidden or a CSS variable.
+    []
+    member inline _.backfaceVisibility([] comb: CombineKeyValue, value: string) =
+        comb &>> ("backface-visibility", value)
+
+    /// The back face is visible. This is default.
+    []
+    member inline _.backfaceVisibilityVisible([] comb: CombineKeyValue) =
+        comb &>> ("backface-visibility", "visible")
+
+    /// The back face is hidden.
+    []
+    member inline _.backfaceVisibilityHidden([] comb: CombineKeyValue) =
+        comb &>> ("backface-visibility", "hidden")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.backfaceVisibilityInitial([] comb: CombineKeyValue) =
+        comb &>> ("backface-visibility", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.backfaceVisibilityInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("backface-visibility", "inherit")
+
+
+
+
+    // --------------------------------------------------------------------
+    // Transition styles
+    // --------------------------------------------------------------------
+
+
+    /// Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)).
+    []
+    member inline _.transitionTimingFunctionEase([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "ease")
+
+    /// Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)))
+    []
+    member inline _.transitionTimingFunctionLinear([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "linear")
+
+    /// Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)).
+    []
+    member inline _.transitionTimingFunctionEaseIn([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "ease-in")
+
+    /// Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)).
+    []
+    member inline _.transitionTimingFunctionEaseOut([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "ease-out")
+
+    /// Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)))
+    []
+    member inline _.transitionTimingFunctionEaseInOut([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "ease-in-out")
+
+    /// Equivalent to steps(1, start))
+    []
+    member inline _.transitionTimingFunctionStepStart([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "step-start")
+
+    /// Equivalent to steps(1, end))
+    []
+    member inline _.transitionTimingFunctionStepEnd([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "step-end")
+
+    /// Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
+    []
+    member inline _.transitionTimingFunctionCubicBezier
+        ([] comb: CombineKeyValue, n1: float, n2: float, n3: float, n4: float)
+        =
+        CombineKeyValue(fun sb ->
+            comb
+                .Invoke(sb)
+                .Append("transition-timing-function: ")
+                .Append("cubic-bezier(")
+                .Append(n1)
+                .Append(",")
+                .Append(n2)
+                .Append(",")
+                .Append(n3)
+                .Append(",")
+                .Append(n4)
+                .Append("); "))
+
+    /// Sets this property to its default value)
+    []
+    member inline _.transitionTimingFunctionInitial([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.transitionTimingFunctionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "inherit")
+
+    /// Sets the transition timing function using a CSS string value (e.g. "ease-in", "steps(4, end)", "var(--transition-timing)").
+    []
+    member inline _.transitionTimingFunction([] comb: CombineKeyValue, value: string) =
+        comb &>> ("transition-timing-function", value)
+
+    /// Specifies a shorthand for all the transition properties. Accepts a CSS transition value (e.g. "all 0.3s ease-in-out").
+    []
+    member inline _.transition([] comb: CombineKeyValue, value: string) = comb &>> ("transition", value)
+
+    /// Sets the length of time a transition animation should take to complete. By default, the
+    /// value is 0s, meaning that no animation will occur.
+    []
+    member inline _.transitionDuration([] comb: CombineKeyValue, timespan: TimeSpan) =
+        comb &>> ("transition-duration", timespan.TotalMilliseconds.ToString() + "ms")
+
+    /// Sets the length of time a transition animation should take to complete. By default, the
+    /// value is 0s, meaning that no animation will occur.
+    []
+    member inline _.transitionDurationSeconds([] comb: CombineKeyValue, n: float) =
+        comb &>> ("transition-duration", string n + "s")
+
+    /// Sets the length of time a transition animation should take to complete. By default, the
+    /// value is 0s, meaning that no animation will occur.
+    []
+    member inline _.transitionDurationMilliseconds([] comb: CombineKeyValue, n: float) =
+        comb &>> ("transition-duration", string n + "ms")
+
+    /// Sets the length of time a transition animation should take to complete. By default, the
+    /// value is 0s, meaning that no animation will occur.
+    []
+    member inline _.transitionDurationSeconds([] comb: CombineKeyValue, n: int) =
+        comb &>> ("transition-duration", string n + "s")
+
+    /// Sets the length of time a transition animation should take to complete. By default, the
+    /// value is 0s, meaning that no animation will occur.
+    []
+    member inline _.transitionDurationMilliseconds([] comb: CombineKeyValue, n: int) =
+        comb &>> ("transition-duration", string n + "ms")
+
+    /// Specifies the duration to wait before starting a property's transition effect when its value changes.
+    []
+    member inline _.transitionDelay([] comb: CombineKeyValue, timespan: TimeSpan) =
+        comb &>> ("transition-delay", timespan.TotalMilliseconds.ToString() + "ms")
+
+    /// Specifies the duration to wait before starting a property's transition effect when its value changes.
+    []
+    member inline _.transitionDelaySeconds([] comb: CombineKeyValue, n: float) =
+        comb &>> ("transition-delay", string n + "s")
+
+    /// Specifies the duration to wait before starting a property's transition effect when its value changes.
+    []
+    member inline _.transitionDelayMilliseconds([] comb: CombineKeyValue, n: float) =
+        comb &>> ("transition-delay", string n + "ms")
+
+    /// Specifies the duration to wait before starting a property's transition effect when its value changes.
+    []
+    member inline _.transitionDelaySeconds([] comb: CombineKeyValue, n: int) =
+        comb &>> ("transition-delay", string n + "s")
+
+    /// Specifies the duration to wait before starting a property's transition effect when its value changes.
+    []
+    member inline _.transitionDelayMilliseconds([] comb: CombineKeyValue, n: int) =
+        comb &>> ("transition-delay", string n + "ms")
+
+    /// Sets the CSS properties to which a transition effect should be applied.
+    []
+    member inline _.transitionProperty([] comb: CombineKeyValue, property: string) =
+        comb &>> ("transition-property", property)
+
+    /// Sets whether discrete-property transitions occur. Accepts normal | allow-discrete or a CSS variable.
+    []
+    member inline _.transitionBehavior([] comb: CombineKeyValue, value: string) =
+        comb &>> ("transition-behavior", value)
+
+    /// Discrete properties do not transition. This is default.
+    []
+    member inline _.transitionBehaviorNormal([] comb: CombineKeyValue) =
+        comb &>> ("transition-behavior", "normal")
+
+    /// Discrete properties transition (flip at 50%).
+    []
+    member inline _.transitionBehaviorAllowDiscrete([] comb: CombineKeyValue) =
+        comb &>> ("transition-behavior", "allow-discrete")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.transitionBehaviorInitial([] comb: CombineKeyValue) =
+        comb &>> ("transition-behavior", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.transitionBehaviorInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("transition-behavior", "inherit")
+
+
+
+
+    // --------------------------------------------------------------------
+    // Typography styles
+    // --------------------------------------------------------------------
+
+
+    /// The browser determines the justification algorithm
+    []
+    member inline _.textJustifyAuto([] comb: CombineKeyValue) = comb &>> ("text-justify", "auto")
+
+    /// Increases/Decreases the space between words
+    []
+    member inline _.textJustifyInterWord([] comb: CombineKeyValue) =
+        comb &>> ("text-justify", "inter-word")
+
+    /// Increases/Decreases the space between characters
+    []
+    member inline _.textJustifyInterCharacter([] comb: CombineKeyValue) =
+        comb &>> ("text-justify", "inter-character")
+
+    /// Disables justification methods
+    []
+    member inline _.textJustifyNone([] comb: CombineKeyValue) = comb &>> ("text-justify", "none")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.textJustifyInitial([] comb: CombineKeyValue) = comb &>> ("text-justify", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textJustifyInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-justify", "inherit")
+
+    /// Sets the justification method using a CSS string value (e.g. "inter-word", "var(--text-justify)").
+    []
+    member inline _.textJustify([] comb: CombineKeyValue, value: string) =
+        comb &>> ("text-justify", value)
+
+    /// Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default.
+    []
+    member inline _.whiteSpaceNormal([] comb: CombineKeyValue) = comb &>> ("white-space", "normal")
+
+    /// Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line.
+    /// The text continues on the same line until a `
     ` tag is encountered.
+    []
+    member inline _.whiteSpaceNowrap([] comb: CombineKeyValue) = comb &>> ("white-space", "nowrap")
+
+    /// Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the 
     tag in HTML.
+    []
+    member inline _.whiteSpacePre([] comb: CombineKeyValue) = comb &>> ("white-space", "pre")
+
+    /// Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
+    []
+    member inline _.whiteSpacePreLine([] comb: CombineKeyValue) = comb &>> ("white-space", "pre-line")
+
+    /// Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
+    []
+    member inline _.whiteSpacePreWrap([] comb: CombineKeyValue) = comb &>> ("white-space", "pre-wrap")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.whiteSpaceInitial([] comb: CombineKeyValue) = comb &>> ("white-space", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.whiteSpaceInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("white-space", "inherit")
+
+    /// Sets how white space is handled using a CSS string value (e.g. "pre-wrap", "var(--white-space)").
+    []
+    member inline _.whiteSpace([] comb: CombineKeyValue, value: string) =
+        comb &>> ("white-space", value)
+
+    /// Default value. Uses default line break rules.
+    []
+    []
+    member inline _.wordbreakNormal([] comb: CombineKeyValue) = comb &>> ("word-break", "normal")
+
+    /// Sets whether line breaks appear wherever the text would otherwise overflow its content box.
+    []
+    member inline _.wordBreakNormal([] comb: CombineKeyValue) = comb &>> ("word-break", "normal")
+
+    /// To prevent overflow, word may be broken at any character
+    []
+    []
+    member inline _.wordbreakBreakAll([] comb: CombineKeyValue) = comb &>> ("word-break", "break-all")
+
+    /// Word breaks may be inserted between any two characters.
+    []
+    member inline _.wordBreakBreakAll([] comb: CombineKeyValue) = comb &>> ("word-break", "break-all")
+
+    /// Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value "normal")
+    []
+    []
+    member inline _.wordbreakKeepAll([] comb: CombineKeyValue) = comb &>> ("word-break", "keep-all")
+
+    /// Word breaks should not be used for Chinese/Japanese/Korean (CJK) text.
+    []
+    member inline _.wordBreakKeepAll([] comb: CombineKeyValue) = comb &>> ("word-break", "keep-all")
+
+    /// To prevent overflow, word may be broken at arbitrary points.
+    []
+    []
+    member inline _.wordbreakBreakWord([] comb: CombineKeyValue) = comb &>> ("word-break", "break-word")
+
+    /// Allows unbreakable words to be broken.
+    []
+    member inline _.wordBreakBreakWord([] comb: CombineKeyValue) = comb &>> ("word-break", "break-word")
+
+    /// Sets this property to its default value.
+    []
+    []
+    member inline _.wordbreakInitial([] comb: CombineKeyValue) = comb &>> ("word-break", "initial")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.wordBreakInitial([] comb: CombineKeyValue) = comb &>> ("word-break", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    []
+    member inline _.wordbreakInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("word-break", "inherit")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.wordBreakInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("word-break", "inherit")
+
+    /// Sets line breaking rules for words using a CSS string value (e.g. "break-all", "var(--word-break)").
+    []
+    member inline _.wordBreak([] comb: CombineKeyValue, value: string) = comb &>> ("word-break", value)
+
+    /// The font display strategy is defined by the user agent.
+    ///
+    /// Default value)
+    []
+    member inline _.fontDisplayAuto([] comb: CombineKeyValue) = comb &>> ("font-display", "auto")
+
+    /// Gives the font face a short block period and an infinite swap period.
+    []
+    member inline _.fontDisplayBlock([] comb: CombineKeyValue) = comb &>> ("font-display", "block")
+
+    /// Gives the font face an extremely small block period and an infinite swap period.
+    []
+    member inline _.fontDisplaySwap([] comb: CombineKeyValue) = comb &>> ("font-display", "swap")
+
+    /// Gives the font face an extremely small block period and a short swap period.
+    []
+    member inline _.fontDisplayFallback([] comb: CombineKeyValue) =
+        comb &>> ("font-display", "fallback")
+
+    /// Gives the font face an extremely small block period and no swap period.
+    []
+    member inline _.fontDisplayOptional([] comb: CombineKeyValue) =
+        comb &>> ("font-display", "optional")
+
+    /// Default. The browser determines whether font kerning should be applied or not
+    []
+    member inline _.fontKerningAuto([] comb: CombineKeyValue) = comb &>> ("font-kerning", "auto")
+
+    /// Specifies that font kerning is applied
+    []
+    member inline _.fontKerningNormal([] comb: CombineKeyValue) = comb &>> ("font-kerning", "normal")
+
+    /// Specifies that font kerning is not applied
+    []
+    member inline _.fontKerningNone([] comb: CombineKeyValue) = comb &>> ("font-kerning", "none")
+
+    /// Sets the font kerning using a CSS string value (e.g. "auto", "var(--font-kerning)").
+    []
+    member inline _.fontKerning([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-kerning", value)
+
+    /// Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold.
+    /// Possible values are [100, 200, 300, 400, 500, 600, 700, 800, 900]
+    []
+    member inline _.fontWeight([] comb: CombineKeyValue, weight: int) =
+        comb &&& mkWithKV ("font-weight", weight)
+
+    /// Defines font weight using a CSS string value (e.g. "bold", "var(--font-weight-strong)").
+    []
+    member inline _.fontWeight([] comb: CombineKeyValue, weight: string) =
+        comb &>> ("font-weight", weight)
+
+    /// Defines normal characters. This is default.
+    []
+    member inline _.fontWeightNormal([] comb: CombineKeyValue) = comb &>> ("font-weight", "normal")
+
+    /// Defines thick characters.
+    []
+    member inline _.fontWeightBold([] comb: CombineKeyValue) = comb &>> ("font-weight", "bold")
+
+    /// Defines thicker characters
+    []
+    member inline _.fontWeightBolder([] comb: CombineKeyValue) = comb &>> ("font-weight", "bolder")
+
+    /// Defines lighter characters.
+    []
+    member inline _.fontWeightLighter([] comb: CombineKeyValue) = comb &>> ("font-weight", "lighter")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.fontWeightInitial([] comb: CombineKeyValue) = comb &>> ("font-weight", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontWeightInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-weight", "inherit")
+
+    /// Sets the spacing between text characters.
+    []
+    member inline _.letterSpacing([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("letter-spacing", value)
+
+    /// Sets the spacing between text characters.
+    []
+    member inline _.letterSpacing([] comb: CombineKeyValue, value: string) =
+        comb &>> ("letter-spacing", value)
+
+    /// Specifies the default letter spacing for the current font.
+    []
+    member inline _.letterSpacingNormal([] comb: CombineKeyValue) =
+        comb &>> ("letter-spacing", "normal")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.letterSpacingInitial([] comb: CombineKeyValue) =
+        comb &>> ("letter-spacing", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.letterSpacingInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("letter-spacing", "inherit")
+
+    /// The browser displays a normal font style. This is defaut.
+    []
+    member inline _.fontStyleNormal([] comb: CombineKeyValue) = comb &>> ("font-style", "normal")
+
+    /// The browser displays an italic font style.
+    []
+    member inline _.fontStyleItalic([] comb: CombineKeyValue) = comb &>> ("font-style", "italic")
+
+    /// The browser displays an oblique font style.
+    []
+    member inline _.fontStyleOblique([] comb: CombineKeyValue) = comb &>> ("font-style", "oblique")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.fontStyleInitial([] comb: CombineKeyValue) = comb &>> ("font-style", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-style", "inherit")
+
+    /// Sets the font style using a CSS string value (e.g. "italic", "var(--font-style)").
+    []
+    member inline _.fontStyle([] comb: CombineKeyValue, value: string) = comb &>> ("font-style", value)
+
+    /// The browser displays a normal font. This is default
+    []
+    member inline _.fontVariantNormal([] comb: CombineKeyValue) = comb &>> ("font-variant", "normal")
+
+    /// The browser displays a small-caps font
+    []
+    member inline _.fontVariantSmallCaps([] comb: CombineKeyValue) =
+        comb &>> ("font-variant", "small-caps")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantInitial([] comb: CombineKeyValue) = comb &>> ("font-variant", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontVariantInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-variant", "inherit")
+
+    /// Sets the font variant using a CSS string value (e.g. "small-caps", "var(--font-variant)").
+    []
+    member inline _.fontVariant([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-variant", value)
+
+    /// Break words only at allowed break points
+    []
+    member inline _.wordWrapNormal([] comb: CombineKeyValue) = comb &>> ("word-wrap", "normal")
+
+    /// Allows unbreakable words to be broken
+    []
+    member inline _.wordWrapBreakWord([] comb: CombineKeyValue) = comb &>> ("word-wrap", "break-word")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.wordWrapInitial([] comb: CombineKeyValue) = comb &>> ("word-wrap", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.wordWrapInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("word-wrap", "inherit")
+
+    /// Sets the word wrapping behavior using a CSS string value (e.g. "break-word", "var(--word-wrap)").
+    []
+    member inline _.wordWrap([] comb: CombineKeyValue, value: string) = comb &>> ("word-wrap", value)
+
+    /// Sets the kind of decoration that is used on text in an element. Accepts a CSS text-decoration-line value (e.g. "underline overline").
+    []
+    member inline _.textDecorationLine([] comb: CombineKeyValue, line: string) =
+        comb &>> ("text-decoration-line", line)
+
+    /// Specifies no text decoration line.
+    []
+    member inline _.textDecorationLineNone([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "none")
+
+    /// Draws a line beneath the text.
+    []
+    member inline _.textDecorationLineUnderline([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "underline")
+
+    /// Draws a line above the text.
+    []
+    member inline _.textDecorationLineOverline([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "overline")
+
+    /// Draws a line through the text (strikethrough).
+    []
+    member inline _.textDecorationLineLineThrough([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "line-through")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.textDecorationLineInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textDecorationLineInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "inherit")
+
+    /// Specifies the decoration added to text. Accepts a CSS text-decoration value (e.g. "underline", "none", or a shorthand combining line, style, and color).
+    []
+    member inline _.textDecoration([] comb: CombineKeyValue, line: string) =
+        comb &>> ("text-decoration", line)
 
-    /// Determines a grid item��s location within the grid by referring to specific grid lines.
-    /// start is the line where the item begins, end' is the line where it ends.
-    /// They can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
-    ///
-    ///
-    /// _Shorthand for `gridColumnStart` and `gridColumnEnds`_
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-column: 1 / 3;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridColumn (1, 3))
-    /// ```
-    []
-    member inline _.gridColumn([] comb: CombineKeyValue, start: int, end': int) =
-        comb &>> ("grid-column", string start + " / " + string end')
+    /// Specifies no text decoration.
+    []
+    member inline _.textDecorationNone([] comb: CombineKeyValue) = comb &>> ("text-decoration", "none")
 
-    /// Determines a grid item��s location within the grid by referring to specific grid lines.
-    /// start is the line where the item begins, end' is the line where it ends.
-    /// They can be one of the following options:
-    /// - a named line
-    /// - a numbered line
-    /// - span until a named line was hit
-    /// - span over a specified number of lines
-    ///
-    ///
-    /// _Shorthand for `gridRowStart` and `gridRowEnds`_
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-row: row-2 / row-4;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridRow ("row-2", "row-4"))
-    /// ```
-    []
-    member inline _.gridRow([] comb: CombineKeyValue, start: string, end': string) =
-        CombineKeyValue(fun sb ->
-            comb.Invoke(sb).Append("grid-row: ").Append(start).Append(" / ").Append(end').Append("; "))
+    /// Underlines the text.
+    []
+    member inline _.textDecorationUnderline([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "underline")
 
-    /// Sets the named grid area the item is placed in
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-area: header;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridArea "header")
-    /// ```
-    []
-    member inline _.gridArea([] comb: CombineKeyValue, value: string) = comb &>> ("grid-area", value)
+    /// Adds a line above the text.
+    []
+    member inline _.textDecorationOverline([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "overline")
 
-    /// Shorthand for `grid-template-areas`, `grid-template-columns` and `grid-template-rows`.
-    ///
-    /// Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template
-    ///
-    /// **CSS**
-    /// ```css
-    /// grid-template:  [header-top] 'a a a'      [header-bottom]
-    ///                   [main-top] 'b b b' 1fr  [main-bottom]
-    ///                              / auto 1fr auto;
-    /// ```
-    /// **F#**
-    /// ```f#
-    /// style.gridTemplate "[header-top] 'a a a'      [header-bottom] " +
-    ///                      "[main-top] 'b b b' 1fr  [main-bottom] " +
-    ///                                "/ auto 1fr auto")
-    /// ```
-    []
-    member inline _.gridTemplate([] comb: CombineKeyValue, value: string) =
-        comb &>> ("grid-template", value)
+    /// Adds a line through the text (strikethrough).
+    []
+    member inline _.textDecorationLineThrough([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "line-through")
 
-    /// Specifies a shorthand for all the transition properties. Accepts a CSS transition value (e.g. "all 0.3s ease-in-out").
-    []
-    member inline _.transition([] comb: CombineKeyValue, value: string) = comb &>> ("transition", value)
+    /// Sets this property to its default value.
+    []
+    member inline _.textDecorationInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "initial")
 
-    /// Sets the length of time a transition animation should take to complete. By default, the
-    /// value is 0s, meaning that no animation will occur.
-    []
-    member inline _.transitionDuration([] comb: CombineKeyValue, timespan: TimeSpan) =
-        comb &>> ("transition-duration", timespan.TotalMilliseconds.ToString() + "ms")
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textDecorationInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "inherit")
 
-    /// Sets the length of time a transition animation should take to complete. By default, the
-    /// value is 0s, meaning that no animation will occur.
-    []
-    member inline _.transitionDurationSeconds([] comb: CombineKeyValue, n: float) =
-        comb &>> ("transition-duration", string n + "s")
+    /// No capitalization. The text renders as it is. This is default.
+    []
+    member inline _.textTransformNone([] comb: CombineKeyValue) = comb &>> ("text-transform", "none")
 
-    /// Sets the length of time a transition animation should take to complete. By default, the
-    /// value is 0s, meaning that no animation will occur.
-    []
-    member inline _.transitionDurationMilliseconds([] comb: CombineKeyValue, n: float) =
-        comb &>> ("transition-duration", string n + "ms")
+    /// Transforms the first character of each word to uppercase.
+    []
+    member inline _.textTransformCapitalize([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "capitalize")
 
-    /// Sets the length of time a transition animation should take to complete. By default, the
-    /// value is 0s, meaning that no animation will occur.
-    []
-    member inline _.transitionDurationSeconds([] comb: CombineKeyValue, n: int) =
-        comb &>> ("transition-duration", string n + "s")
+    /// Transforms all characters to uppercase.
+    []
+    member inline _.textTransformUppercase([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "uppercase")
 
-    /// Sets the length of time a transition animation should take to complete. By default, the
-    /// value is 0s, meaning that no animation will occur.
-    []
-    member inline _.transitionDurationMilliseconds([] comb: CombineKeyValue, n: int) =
-        comb &>> ("transition-duration", string n + "ms")
+    /// Transforms all characters to lowercase.
+    []
+    member inline _.textTransformLowercase([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "lowercase")
 
-    /// Specifies the duration to wait before starting a property's transition effect when its value changes.
-    []
-    member inline _.transitionDelay([] comb: CombineKeyValue, timespan: TimeSpan) =
-        comb &>> ("transition-delay", timespan.TotalMilliseconds.ToString() + "ms")
+    /// Sets this property to its default value.
+    []
+    member inline _.textTransformInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "initial")
 
-    /// Specifies the duration to wait before starting a property's transition effect when its value changes.
-    []
-    member inline _.transitionDelaySeconds([] comb: CombineKeyValue, n: float) =
-        comb &>> ("transition-delay", string n + "s")
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textTransformInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "inherit")
 
-    /// Specifies the duration to wait before starting a property's transition effect when its value changes.
-    []
-    member inline _.transitionDelayMilliseconds([] comb: CombineKeyValue, n: float) =
-        comb &>> ("transition-delay", string n + "ms")
+    /// Sets the text transformation using a CSS string value (e.g. "uppercase", "var(--text-transform)").
+    []
+    member inline _.textTransform([] comb: CombineKeyValue, value: string) =
+        comb &>> ("text-transform", value)
 
-    /// Specifies the duration to wait before starting a property's transition effect when its value changes.
-    []
-    member inline _.transitionDelaySeconds([] comb: CombineKeyValue, n: int) =
-        comb &>> ("transition-delay", string n + "s")
+    /// Default value. The text is clipped and not accessible.
+    []
+    member inline _.textOverflowClip([] comb: CombineKeyValue) = comb &>> ("text-overflow", "clip")
 
-    /// Specifies the duration to wait before starting a property's transition effect when its value changes.
-    []
-    member inline _.transitionDelayMilliseconds([] comb: CombineKeyValue, n: int) =
-        comb &>> ("transition-delay", string n + "ms")
+    /// Render an ellipsis ("...") to represent the clipped text.
+    []
+    member inline _.textOverflowEllipsis([] comb: CombineKeyValue) =
+        comb &>> ("text-overflow", "ellipsis")
 
-    /// Sets the CSS properties to which a transition effect should be applied.
-    []
-    member inline _.transitionProperty([] comb: CombineKeyValue, property: string) =
-        comb &>> ("transition-property", property)
+    /// Render the given string to represent the clipped text.
+    []
+    member inline _.textOverflowInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-overflow", "initial")
 
-    /// Sets the size of the font.
-    ///
-    /// This property is also used to compute the size of em, ex, and other relative  units.
-    []
-    member inline _.fontSize([] comb: CombineKeyValue, size: int) =
-        comb &&& mkPxWithKV ("font-size", size)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textOverflowInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-overflow", "inherit")
 
-    /// Sets the size of the font.
-    ///
-    /// This property is also used to compute the size of em, ex, and other relative  units.
-    []
-    member inline _.fontSize([] comb: CombineKeyValue, size: string) = comb &>> ("font-size", size)
+    /// Sets how overflowed text is signaled using a CSS string value (e.g. "ellipsis", "var(--text-overflow)").
+    []
+    member inline _.textOverflow([] comb: CombineKeyValue, value: string) =
+        comb &>> ("text-overflow", value)
 
-    /// Specifies the height of a text lines.
-    ///
-    /// This property is also used to compute the size of em, ex, and other relative  units.
+    /// Default value. The line will display as a single line.
     ///
-    /// Note: Negative values are not allowed.
-    []
-    member inline _.lineHeight([] comb: CombineKeyValue, size: int) =
-        comb &&& mkPxWithKV ("line-height", size)
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=solid
+    []
+    member inline _.textDecorationStyleSolid([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "solid")
 
-    /// Specifies the height of a text lines.
+    /// The line will display as a double line.
     ///
-    /// This property is also used to compute the size of em, ex, and other relative  units.
+    /// https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=double
+    []
+    member inline _.textDecorationStyleDouble([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "double")
+
+    /// The line will display as a dotted line.
     ///
-    /// Note: Negative values are not allowed.
-    []
-    member inline _.lineHeight([] comb: CombineKeyValue, size: string) = comb &>> ("line-height", size)
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=dotted
+    []
+    member inline _.textDecorationStyleDotted([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "dotted")
 
-    /// Sets the background color of an element.
-    []
-    member inline _.backgroundColor([] comb: CombineKeyValue, color: string) =
-        comb &>> ("background-color", color)
+    /// The line will display as a dashed line.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=dashed
+    []
+    member inline _.textDecorationStyleDashed([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "dashed")
 
-    /// Sets the color of the insertion caret, the visible marker where the next character typed will be inserted.
+    /// The line will display as a wavy line.
     ///
-    /// This is sometimes referred to as the text input cursor. The caret appears in elements such as  or
-    /// those with the contenteditable attribute. The caret is typically a thin vertical line that flashes to
-    /// help make it more noticeable. By default, it is black, but its color can be altered with this property.
-    []
-    member inline _.caretColor([] comb: CombineKeyValue, color: string) =
-        comb &>> ("caret-color", color)
+    /// https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=wavy
+    []
+    member inline _.textDecorationStyleWavy([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "wavy")
 
-    /// Sets the foreground color value of an element's text and text decorations, and sets the
-    /// `currentcolor` value. `currentcolor` may be used as an indirect value on other properties
-    /// and is the default for other color properties, such as border-color.
-    []
-    member inline _.color([] comb: CombineKeyValue, color: string) = comb &>> ("color", color)
+    /// Sets this property to its default value.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=initial
+    []
+    member inline _.textDecorationStyleInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "initial")
 
-    /// Specifies the vertical position of a positioned element. It has no effect on non-positioned elements.
-    []
-    member inline _.top([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("top", value)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textDecorationStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "inherit")
 
-    /// Specifies the vertical position of a positioned element. It has no effect on non-positioned elements.
-    []
-    member inline _.top([] comb: CombineKeyValue, value: string) = comb &>> ("top", value)
+    /// Sets the style of text decorations using a CSS string value (e.g. "wavy", "var(--text-decoration-style)").
+    []
+    member inline _.textDecorationStyle([] comb: CombineKeyValue, value: string) =
+        comb &>> ("text-decoration-style", value)
 
-    /// Specifies the vertical position of a positioned element. It has no effect on non-positioned elements.
-    []
-    member inline _.bottom([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("bottom", value)
+    /// Makes the text as narrow as it gets.
+    []
+    member inline _.fontStretchUltraCondensed([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "ultra-condensed")
 
-    /// Specifies the vertical position of a positioned element. It has no effect on non-positioned elements.
-    []
-    member inline _.bottom([] comb: CombineKeyValue, value: string) = comb &>> ("bottom", value)
+    /// Makes the text narrower than condensed, but not as narrow as ultra-condensed
+    []
+    member inline _.fontStretchExtraCondensed([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "extra-condensed")
 
-    /// Specifies the horizontal position of a positioned element. It has no effect on non-positioned elements.
-    []
-    member inline _.left([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("left", value)
+    /// Makes the text narrower than semi-condensed, but not as narrow as extra-condensed.
+    []
+    member inline _.fontStretchCondensed([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "condensed")
 
-    /// Specifies the horizontal position of a positioned element. It has no effect on non-positioned elements.
-    []
-    member inline _.left([] comb: CombineKeyValue, value: string) = comb &>> ("left", value)
+    /// Makes the text narrower than normal, but not as narrow as condensed.
+    []
+    member inline _.fontStretchSemiCondensed([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "semi-condensed")
 
-    /// Specifies the horizontal position of a positioned element. It has no effect on non-positioned elements.
-    []
-    member inline _.right([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("right", value)
+    /// Default value. No font stretching
+    []
+    member inline _.fontStretchNormal([] comb: CombineKeyValue) = comb &>> ("font-stretch", "normal")
 
-    /// Specifies the horizontal position of a positioned element. It has no effect on non-positioned elements.
-    []
-    member inline _.right([] comb: CombineKeyValue, value: string) = comb &>> ("right", value)
+    /// Makes the text wider than normal, but not as wide as expanded
+    []
+    member inline _.fontStretchSemiExpanded([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "semi-expanded")
 
-    /// The outline-offset property adds space between an outline and the edge or border of an element.
-    ///
-    /// The space between an element and its outline is transparent.
-    ///
-    /// Outlines differ from borders in three ways:
-    ///
-    ///  - An outline is a line drawn around elements, outside the border edge
-    ///  - An outline does not take up space
-    ///  - An outline may be non-rectangular
-    ///
-    []
-    member inline _.outlineOffset([] comb: CombineKeyValue, offset: int) =
-        comb &&& mkPxWithKV ("outline-offset", offset)
+    /// Makes the text wider than semi-expanded, but not as wide as extra-expanded
+    []
+    member inline _.fontStretchExpanded([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "expanded")
 
-    /// The outline-offset property adds space between an outline and the edge or border of an element.
-    ///
-    /// The space between an element and its outline is transparent.
-    ///
-    /// Outlines differ from borders in three ways:
-    ///
-    ///  - An outline is a line drawn around elements, outside the border edge
-    ///  - An outline does not take up space
-    ///  - An outline may be non-rectangular
-    ///
-    []
-    member inline _.outlineOffset([] comb: CombineKeyValue, offset: string) =
-        comb &>> ("outline-offset", offset)
+    /// Makes the text wider than expanded, but not as wide as ultra-expanded
+    []
+    member inline _.fontStretchExtraExpanded([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "extra-expanded")
 
-    /// An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
-    ///
-    /// The `outline-color` property specifies the color of an outline.
-    /// **Note**: Always declare the outline-style property before the outline-color property. An element must have an outline before you change the color of it.
-    []
-    member inline _.outlineColor([] comb: CombineKeyValue, color: string) =
-        comb &>> ("outline-color", color)
+    /// Makes the text as wide as it gets.
+    []
+    member inline _.fontStretchUltraExpanded([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "ultra-expanded")
 
-    /// Sets the line style of an element's border.
-    []
-    member inline _.border([] comb: CombineKeyValue, style: string) = comb &>> ("border", style)
+    /// Sets this property to its default value.
+    []
+    member inline _.fontStretchInitial([] comb: CombineKeyValue) = comb &>> ("font-stretch", "initial")
 
-    /// Sets the line style of an element's left border.
-    []
-    member inline _.borderLeft([] comb: CombineKeyValue, style: string) =
-        comb &>> ("border-left", style)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontStretchInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "inherit")
 
-    /// Sets the line style of an element's top border.
-    []
-    member inline _.borderTop([] comb: CombineKeyValue, style: string) = comb &>> ("border-top", style)
+    /// Sets the font stretch using a CSS string value (e.g. "condensed", "var(--font-stretch)").
+    []
+    member inline _.fontStretch([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-stretch", value)
 
-    /// Sets the line style of an element's right border.
-    []
-    member inline _.borderRight([] comb: CombineKeyValue, style: string) =
-        comb &>> ("border-right", style)
+    /// The element is aligned with the baseline of the parent. This is default.
+    []
+    member inline _.verticalAlignBaseline([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "baseline")
 
-    /// Sets the line style of an element's bottom border.
-    []
-    member inline _.borderBottom([] comb: CombineKeyValue, style: string) =
-        comb &>> ("border-bottom", style)
+    /// The element is aligned with the subscript baseline of the parent
+    []
+    member inline _.verticalAlignSub([] comb: CombineKeyValue) = comb &>> ("vertical-align", "sub")
 
-    /// Sets the line style of an element's bottom border.
-    []
-    member inline _.borderBottomStyle([] comb: CombineKeyValue, style: string) =
-        comb &>> ("border-bottom-style", style)
+    /// The element is aligned with the superscript baseline of the parent.
+    []
+    member inline _.verticalAlignSuper([] comb: CombineKeyValue) = comb &>> ("vertical-align", "super")
 
-    /// Sets the width of the bottom border of an element.
-    []
-    member inline _.borderBottomWidth([] comb: CombineKeyValue, width: int) =
-        comb &&& mkPxWithKV ("border-bottom-width", width)
+    /// The element is aligned with the top of the tallest element on the line.
+    []
+    member inline _.verticalAlignTop([] comb: CombineKeyValue) = comb &>> ("vertical-align", "top")
 
-    /// Sets the width of the bottom border of an element.
-    []
-    member inline _.borderBottomWidth([] comb: CombineKeyValue, width: string) =
-        comb &>> ("border-bottom-width", width)
+    /// The element is aligned with the top of the parent element's font.
+    []
+    member inline _.verticalAlignTextTop([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "text-top")
 
-    /// Sets the color of an element's bottom border.
-    ///
-    /// It can also be set with the shorthand CSS properties border-color or border-bottom.
-    []
-    member inline _.borderBottomColor([] comb: CombineKeyValue, color: string) =
-        comb &>> ("border-bottom-color", color)
+    /// The element is placed in the middle of the parent element.
+    []
+    member inline _.verticalAlignMiddle([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "middle")
 
-    /// Sets the line style of an element's top border.
-    []
-    member inline _.borderTopStyle([] comb: CombineKeyValue, style: string) =
-        comb &>> ("border-top-style", style)
+    /// The element is aligned with the lowest element on the line.
+    []
+    member inline _.verticalAlignBottom([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "bottom")
 
-    /// Sets the width of the top border of an element.
-    []
-    member inline _.borderTopWidth([] comb: CombineKeyValue, width: int) =
-        comb &&& mkPxWithKV ("border-top-width", width)
+    /// The element is aligned with the bottom of the parent element's font
+    []
+    member inline _.verticalAlignTextBottom([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "text-bottom")
 
-    /// Sets the width of the top border of an element.
-    []
-    member inline _.borderTopWidth([] comb: CombineKeyValue, width: string) =
-        comb &>> ("border-top-width", width)
+    /// Sets this property to its default value.
+    []
+    member inline _.verticalAlignInitial([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "initial")
 
-    /// Sets the color of an element's top border.
-    ///
-    /// It can also be set with the shorthand CSS properties border-color or border-bottom.
-    []
-    member inline _.borderTopColor([] comb: CombineKeyValue, color: string) =
-        comb &>> ("border-top-color", color)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.verticalAlignInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "inherit")
 
-    /// Sets the line style of an element's right border.
-    []
-    member inline _.borderRightStyle([] comb: CombineKeyValue, style: string) =
-        comb &>> ("border-right-style", style)
+    /// Sets the vertical alignment using a CSS string value (e.g. "middle", "0.5em", "var(--vertical-align)").
+    []
+    member inline _.verticalAlign([] comb: CombineKeyValue, value: string) =
+        comb &>> ("vertical-align", value)
 
-    /// Sets the width of the right border of an element.
-    []
-    member inline _.borderRightWidth([] comb: CombineKeyValue, width: int) =
-        comb &&& mkPxWithKV ("border-right-width", width)
+    /// Let the content flow horizontally from left to right, vertically from top to bottom
+    []
+    member inline _.writingModeHorizontalTopBottom([] comb: CombineKeyValue) =
+        comb &>> ("writing-mode", "horizontal-tb")
 
-    /// Sets the width of the right border of an element.
-    []
-    member inline _.borderRightWidth([] comb: CombineKeyValue, width: string) =
-        comb &>> ("border-right-width", width)
+    /// Let the content flow vertically from top to bottom, horizontally from right to left
+    []
+    member inline _.writingModeVerticalRightLeft([] comb: CombineKeyValue) =
+        comb &>> ("writing-mode", "vertical-rl")
 
-    /// Sets the color of an element's right border.
-    ///
-    /// It can also be set with the shorthand CSS properties border-color or border-bottom.
-    []
-    member inline _.borderRightColor([] comb: CombineKeyValue, color: string) =
-        comb &>> ("border-right-color", color)
+    /// Let the content flow vertically from top to bottom, horizontally from left to right
+    []
+    member inline _.writingModeVerticalLeftRight([] comb: CombineKeyValue) =
+        comb &>> ("writing-mode", "vertical-lr")
 
-    /// Sets the line style of an element's left border.
-    []
-    member inline _.borderLeftStyle([] comb: CombineKeyValue, style: string) =
-        comb &>> ("border-left-style", style)
+    /// Sets this property to its default value.
+    []
+    member inline _.writingModeInitial([] comb: CombineKeyValue) = comb &>> ("writing-mode", "initial")
 
-    /// Sets the width of the left border of an element.
-    []
-    member inline _.borderLeftWidth([] comb: CombineKeyValue, width: int) =
-        comb &&& mkPxWithKV ("border-left-width", width)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.writingModeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("writing-mode", "inherit")
 
-    /// Sets the width of the left border of an element.
-    []
-    member inline _.borderLeftWidth([] comb: CombineKeyValue, width: string) =
-        comb &>> ("border-left-width", width)
+    /// Sets the writing mode using a CSS string value (e.g. "vertical-rl", "var(--writing-mode)").
+    []
+    member inline _.writingMode([] comb: CombineKeyValue, value: string) =
+        comb &>> ("writing-mode", value)
 
-    /// Sets the color of an element's left border.
-    ///
-    /// It can also be set with the shorthand CSS properties border-color or border-bottom.
-    []
-    member inline _.borderLeftColor([] comb: CombineKeyValue, color: string) =
-        comb &>> ("border-left-color", color)
+    /// Text direction goes from right-to-left
+    []
+    member inline _.directionRightToLeft([] comb: CombineKeyValue) = comb &>> ("direction", "rtl")
 
-    /// Sets the color of an element's border.
-    []
-    member inline _.borderColor([] comb: CombineKeyValue, color: string) =
-        comb &>> ("border-color", color)
+    /// Text direction goes from left-to-right. This is default
+    []
+    member inline _.directionLeftToRight([] comb: CombineKeyValue) = comb &>> ("direction", "ltr")
 
-    /// Rounds the corners of an element's outer border edge. You can set a single radius to make
-    /// circular corners, or two radii to make elliptical corners.
-    []
-    member inline _.borderRadius([] comb: CombineKeyValue, radius: int) =
-        comb &&& mkPxWithKV ("border-radius", radius)
+    /// Sets this property to its default value.
+    []
+    member inline _.directionInitial([] comb: CombineKeyValue) = comb &>> ("direction", "initial")
 
-    /// Rounds the corners of an element's outer border edge. You can set a single radius to make
-    /// circular corners, or two radii to make elliptical corners.
-    []
-    member inline _.borderRadius([] comb: CombineKeyValue, radius: string) =
-        comb &>> ("border-radius", radius)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.directionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("direction", "inherit")
 
-    /// Sets the width of an element's border.
-    []
-    member inline _.borderWidth([] comb: CombineKeyValue, width: int) =
-        comb &&& mkPxWithKV ("border-width", width)
+    /// Sets the text direction using a CSS string value (e.g. "rtl", "var(--direction)").
+    []
+    member inline _.direction([] comb: CombineKeyValue, value: string) = comb &>> ("direction", value)
 
-    /// Sets the width of an element's border.
-    []
-    member inline _.borderWidth([] comb: CombineKeyValue, top: string, ?right: string) =
-        comb
-        &&& CombineKeyValue(fun sb ->
-            let sb = sb.Append("border-width: ").Append(top)
+    /// Aligns the text to the left.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align
+    []
+    member inline _.textAlignLeft([] comb: CombineKeyValue) = comb &>> ("text-align", "left")
 
-            match right with
-            | Some x -> sb.Append(" ").Append(x).Append("; ")
-            | None -> sb.Append("; "))
+    /// Aligns the text to the right.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=right
+    []
+    member inline _.textAlignRight([] comb: CombineKeyValue) = comb &>> ("text-align", "right")
 
-    /// Sets the width of an element's border.
-    []
-    member inline _.borderWidth
-        ([] comb: CombineKeyValue, top: string, right: string, bottom: string, ?left: string)
-        =
-        CombineKeyValue(fun sb ->
-            let sb =
-                comb
-                    .Invoke(sb)
-                    .Append("border-width: ")
-                    .Append(top)
-                    .Append(" ")
-                    .Append(right)
-                    .Append(" ")
-                    .Append(bottom)
+    /// Centers the text.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=center
+    []
+    member inline _.textAlignCenter([] comb: CombineKeyValue) = comb &>> ("text-align", "center")
 
-            match left with
-            | Some x -> sb.Append(" ").Append(x).Append("; ")
-            | None -> sb.Append("; "))
+    /// Stretches the lines so that each line has equal width (like in newspapers and magazines).
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=justify
+    []
+    member inline _.textAlignJustify([] comb: CombineKeyValue) = comb &>> ("text-align", "justify")
 
-    /// Sets one or more animations to apply to an element. Each name is an @keyframes at-rule that
-    /// sets the property values for the animation sequence.
-    []
-    member inline _.animationName([] comb: CombineKeyValue, keyframeName: string) =
-        comb &>> ("animation-name", keyframeName)
+    /// Sets this property to its default value.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
+    []
+    member inline _.textAlignInitial([] comb: CombineKeyValue) = comb &>> ("text-align", "initial")
 
-    /// Sets the length of time that an animation takes to complete one cycle.
-    []
-    member inline _.animationDuration([] comb: CombineKeyValue, timespan: TimeSpan) =
-        comb &>> ("animation-duration", string timespan.TotalMilliseconds + "ms")
+    /// Inherits this property from its parent element.
+    ///
+    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
+    []
+    member inline _.textAlignInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-align", "inherit")
 
-    /// Sets the length of time that an animation takes to complete one cycle.
-    []
-    member inline _.animationDuration([] comb: CombineKeyValue, seconds: int) =
-        comb &>> ("animation-duration", string seconds + "s")
+    /// Sets the horizontal alignment of text using a CSS string value (e.g. "center", "var(--text-align)").
+    []
+    member inline _.textAlign([] comb: CombineKeyValue, value: string) = comb &>> ("text-align", value)
 
-    /// Sets when an animation starts.
+    /// Sets the size of the font.
     ///
-    /// The animation can start later, immediately from its beginning, or immediately and partway through the animation.
-    []
-    member inline _.animationDelay([] comb: CombineKeyValue, timespan: TimeSpan) =
-        comb &>> ("animation-delay", string timespan.TotalMilliseconds + "ms")
+    /// This property is also used to compute the size of em, ex, and other relative  units.
+    []
+    member inline _.fontSize([] comb: CombineKeyValue, size: int) =
+        comb &&& mkPxWithKV ("font-size", size)
 
-    /// Sets when an animation starts.
+    /// Sets the size of the font.
     ///
-    /// The animation can start later, immediately from its beginning, or immediately and partway through the animation.
-    []
-    member inline _.animationDelay([] comb: CombineKeyValue, seconds: int) =
-        comb &>> ("animation-delay", string seconds + "s")
+    /// This property is also used to compute the size of em, ex, and other relative  units.
+    []
+    member inline _.fontSize([] comb: CombineKeyValue, size: string) = comb &>> ("font-size", size)
 
-    /// The number of times the animation runs.
-    []
-    []
-    member inline _.animationDurationCount([] comb: CombineKeyValue, count: int) =
-        comb &&& mkWithKV ("animation-iteration-count", count)
+    /// Specifies the height of a text lines.
+    ///
+    /// This property is also used to compute the size of em, ex, and other relative  units.
+    ///
+    /// Note: Negative values are not allowed.
+    []
+    member inline _.lineHeight([] comb: CombineKeyValue, size: int) =
+        comb &&& mkPxWithKV ("line-height", size)
 
-    /// The number of times the animation runs.
-    []
-    member inline _.animationIterationCount([] comb: CombineKeyValue, count: int) =
-        comb &&& mkWithKV ("animation-iteration-count", count)
+    /// Specifies the height of a text lines.
+    ///
+    /// This property is also used to compute the size of em, ex, and other relative  units.
+    ///
+    /// Note: Negative values are not allowed.
+    []
+    member inline _.lineHeight([] comb: CombineKeyValue, size: string) = comb &>> ("line-height", size)
 
     /// Sets the font family for the font specified in a @font-face rule.
     []
@@ -4566,64 +5256,194 @@ type CssBuilder() =
     member inline _.textIndent([] comb: CombineKeyValue, value: string) =
         comb &>> ("text-indent", value)
 
-    /// Sets the opacity of an element.
-    ///
-    /// Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
-    []
-    member inline _.opacity([] comb: CombineKeyValue, value: double) =
-        comb &&& mkWithKV ("opacity", value)
+    /// Shorthand for font-style, font-variant, font-weight, font-size/line-height and font-family (e.g. "italic bold 12px/1.5 sans-serif").
+    []
+    member inline _.font([] comb: CombineKeyValue, value: string) = comb &>> ("font", value)
 
-    /// Sets the minimum width of an element.
-    ///
-    /// It prevents the used value of the width property from becoming smaller than the value specified for min-width.
-    []
-    member inline _.minWidth([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("min-width", value)
+    /// Sets the thickness of text decorations (e.g. "2px", "0.1em", "from-font").
+    []
+    member inline _.textDecorationThickness([] comb: CombineKeyValue, value: string) =
+        comb &>> ("text-decoration-thickness", value)
 
-    /// Sets the minimum width of an element.
-    ///
-    /// It prevents the used value of the width property from becoming smaller than the value specified for min-width.
-    []
-    member inline _.minWidth([] comb: CombineKeyValue, value: string) = comb &>> ("min-width", value)
+    /// Sets whether decorations skip over glyph ascenders/descenders. Accepts auto | none | all or a CSS variable.
+    []
+    member inline _.textDecorationSkipInk([] comb: CombineKeyValue, value: string) =
+        comb &>> ("text-decoration-skip-ink", value)
 
-    /// Sets the maximum width of an element.
-    ///
-    /// It prevents the used value of the width property from becoming larger than the value specified by max-width.
-    []
-    member inline _.maxWidth([] comb: CombineKeyValue, value: int) =
-        comb &&& mkPxWithKV ("max-width", value)
+    /// Decorations skip ink where appropriate. This is default.
+    []
+    member inline _.textDecorationSkipInkAuto([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-skip-ink", "auto")
 
-    /// Sets the maximum width of an element.
-    ///
-    /// It prevents the used value of the width property from becoming larger than the value specified by max-width.
-    []
-    member inline _.maxWidth([] comb: CombineKeyValue, value: string) = comb &>> ("max-width", value)
+    /// Decorations are drawn through glyphs.
+    []
+    member inline _.textDecorationSkipInkNone([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-skip-ink", "none")
 
-    /// Sets the width of an element.
-    ///
-    /// By default, the property defines the width of the content area.
-    []
-    member inline _.width([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("width", value)
+    /// Sets this property to its default value.
+    []
+    member inline _.textDecorationSkipInkInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-skip-ink", "initial")
 
-    /// Sets the width of an element.
-    ///
-    /// By default, the property defines the width of the content area.
-    []
-    member inline _.width([] comb: CombineKeyValue, value: string) = comb &>> ("width", value)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textDecorationSkipInkInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-skip-ink", "inherit")
 
-    /// Sets one or more background images on an element.
-    []
-    member inline _.backgroundImage([] comb: CombineKeyValue, value: string) =
-        comb &>> ("background-image", value)
+    /// Sets how the last line of a block is aligned. Accepts left | right | center | justify | start | end or a CSS variable.
+    []
+    member inline _.textAlignLast([] comb: CombineKeyValue, value: string) =
+        comb &>> ("text-align-last", value)
+
+    /// The last line is aligned to the start of the line. This is default.
+    []
+    member inline _.textAlignLastStart([] comb: CombineKeyValue) = comb &>> ("text-align-last", "start")
+
+    /// The last line is aligned to the end of the line.
+    []
+    member inline _.textAlignLastEnd([] comb: CombineKeyValue) = comb &>> ("text-align-last", "end")
+
+    /// The last line is centered.
+    []
+    member inline _.textAlignLastCenter([] comb: CombineKeyValue) =
+        comb &>> ("text-align-last", "center")
+
+    /// The last line is justified.
+    []
+    member inline _.textAlignLastJustify([] comb: CombineKeyValue) =
+        comb &>> ("text-align-last", "justify")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.textAlignLastInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-align-last", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textAlignLastInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-align-last", "inherit")
+
+    /// Sets the width of a tab character in spaces.
+    []
+    member inline _.tabSize([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("tab-size", value)
+
+    /// Sets the width of a tab character using a CSS string value (e.g. "4", "2em").
+    []
+    member inline _.tabSize([] comb: CombineKeyValue, value: string) = comb &>> ("tab-size", value)
+
+    /// Sets whether long words may be broken to prevent overflow. Accepts normal | break-word | anywhere or a CSS variable.
+    []
+    member inline _.overflowWrap([] comb: CombineKeyValue, value: string) =
+        comb &>> ("overflow-wrap", value)
+
+    /// Lines may only break at normal break points. This is default.
+    []
+    member inline _.overflowWrapNormal([] comb: CombineKeyValue) = comb &>> ("overflow-wrap", "normal")
+
+    /// Long words may be broken at arbitrary points.
+    []
+    member inline _.overflowWrapBreakWord([] comb: CombineKeyValue) =
+        comb &>> ("overflow-wrap", "break-word")
+
+    /// Long words may be broken anywhere.
+    []
+    member inline _.overflowWrapAnywhere([] comb: CombineKeyValue) =
+        comb &>> ("overflow-wrap", "anywhere")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.overflowWrapInitial([] comb: CombineKeyValue) =
+        comb &>> ("overflow-wrap", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.overflowWrapInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("overflow-wrap", "inherit")
+
+    /// Hints to the browser how to render text. Accepts auto | optimizeSpeed | optimizeLegibility | geometricPrecision or a CSS variable.
+    []
+    member inline _.textRendering([] comb: CombineKeyValue, value: string) =
+        comb &>> ("text-rendering", value)
+
+    /// The browser uses its default. This is default.
+    []
+    member inline _.textRenderingAuto([] comb: CombineKeyValue) = comb &>> ("text-rendering", "auto")
+
+    /// The browser emphasizes rendering speed over legibility.
+    []
+    member inline _.textRenderingOptimizeSpeed([] comb: CombineKeyValue) =
+        comb &>> ("text-rendering", "optimizeSpeed")
+
+    /// The browser emphasizes legibility over rendering speed.
+    []
+    member inline _.textRenderingOptimizeLegibility([] comb: CombineKeyValue) =
+        comb &>> ("text-rendering", "optimizeLegibility")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.textRenderingInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-rendering", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textRenderingInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-rendering", "inherit")
+
+    /// Sets whether font size may be automatically adjusted (mobile). Accepts none | auto | a percentage or a CSS variable.
+    []
+    member inline _.textSizeAdjust([] comb: CombineKeyValue, value: string) =
+        comb &>> ("text-size-adjust", value)
+
+    /// Font size is not automatically adjusted.
+    []
+    member inline _.textSizeAdjustNone([] comb: CombineKeyValue) = comb &>> ("text-size-adjust", "none")
+
+    /// Font size may be automatically adjusted. This is default.
+    []
+    member inline _.textSizeAdjustAuto([] comb: CombineKeyValue) = comb &>> ("text-size-adjust", "auto")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.textSizeAdjustInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-size-adjust", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textSizeAdjustInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-size-adjust", "inherit")
+
+    /// Sets the orientation of text in vertical writing modes. Accepts mixed | upright | sideways or a CSS variable.
+    []
+    member inline _.textOrientation([] comb: CombineKeyValue, value: string) =
+        comb &>> ("text-orientation", value)
+
+    /// Text uses mixed orientation. This is default.
+    []
+    member inline _.textOrientationMixed([] comb: CombineKeyValue) =
+        comb &>> ("text-orientation", "mixed")
+
+    /// All glyphs are rendered upright.
+    []
+    member inline _.textOrientationUpright([] comb: CombineKeyValue) =
+        comb &>> ("text-orientation", "upright")
+
+    /// All glyphs are rendered sideways.
+    []
+    member inline _.textOrientationSideways([] comb: CombineKeyValue) =
+        comb &>> ("text-orientation", "sideways")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.textOrientationInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-orientation", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textOrientationInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-orientation", "inherit")
 
-    /// Short-hand for `style.backgroundImage(sprintf "url('%s')", value)` to set the backround image using a url.
-    []
-    member inline _.backgroundImageUrl([] comb: CombineKeyValue, value: string) =
-        comb &>> ("background-image", "url('" + value + "')")
 
-    /// Sets the color of an SVG shape.
-    []
-    member inline _.fill([] comb: CombineKeyValue, color: string) = comb &>> ("fill", color)
 
 
 /// Contains a list of HTML5 colors from https://htmlcolorcodes.com/color-names/
diff --git a/SKILL.md b/SKILL.md
index b32d025..fc4e2cc 100644
--- a/SKILL.md
+++ b/SKILL.md
@@ -4,18 +4,18 @@ description: >-
   Author type-safe inline CSS in F# with the Fun.Css computation-expression
   builder. Use when writing, generating, or refactoring Fun.Css style blocks
   (style { ... }), choosing operation names from CSS property knowledge,
-  composing or conditionally building styles, or wiring design tokens / CSS
-  variables into Fun.Css or Fun.Blazor code.
+  composing or conditionally building styles, extending the builder, or wiring
+  design tokens / CSS variables into Fun.Css or Fun.Blazor code.
 ---
 
 # Fun.Css
 
 Fun.Css builds inline CSS strings with an F# computation expression. Every CSS property maps to one group of custom operations inside `style { ... }`. If you know CSS, you can guess the API — follow the rules below instead of searching the source.
 
-## Core rules
+## Naming rules
 
 1. **Property names are camelCase CSS names.** `background-color` → `backgroundColor`, `text-decoration-line` → `textDecorationLine`.
-2. **Keyword variants append the keyword in PascalCase.** `align-items: center` → `alignItemsCenter`; `flex-direction: row-reverse` → `flexDirectionRowReverse`. Multi-word keywords concatenate: `line-through` → `LineThrough`.
+2. **Keyword variants append the keyword in PascalCase.** `align-items: center` → `alignItemsCenter`; multi-word keywords concatenate: `line-through` → `textDecorationLineThrough`, `row-reverse` → `flexDirectionRowReverse`.
 3. **Every keyword-only property also has a `(value: string)` overload.** Never use the `custom` escape hatch for a known property — pass the keyword, a compound value, or a CSS variable.
 4. **`...Initial` and `...InheritFromParent`** exist on every keyword group (`displayInitial`, `displayInheritFromParent`).
 5. **`int`/`float` overloads add `px`** for dimensional properties (`width 100` → `width: 100px;`) and plain numbers for unitless ones (`opacity 0.5`, `zIndex 10`, `flexGrow 1`). Multi-value overloads take multiple arguments: `margin 10 20` → `margin: 10px 20px;`.
@@ -30,11 +30,13 @@ Fun.Css builds inline CSS strings with an F# computation expression. Every CSS p
 | `propertyNameInitial` | `displayInitial` | `display: initial; ` |
 | `propertyNameInheritFromParent` | `displayInheritFromParent` | `display: inherit; ` |
 
-## Workflow
+Fallback for anything not covered: `custom "css-key" "value"`.
 
-### 1. Author a style block
+## Usage
 
-Prefer typed keyword ops for compile-time checking; use the `(value: string)` overload for variables, compound values, or anything not covered by a typed op:
+### Author a style block
+
+Prefer typed keyword ops for compile-time checking; use the `(value: string)` overload for variables, compound values, or anything without a typed op:
 
 ```fsharp
 style {
@@ -46,32 +48,28 @@ style {
 }
 ```
 
-### 2. Wire in design tokens / CSS variables
+### Design tokens / CSS variables
 
 Every property accepts a string, so a token system plugs in directly:
 
 ```fsharp
 module Tokens =
-    module Layout =
-        let Display = "var(--display)"
-        let Direction = "var(--flex-direction)"
-    module Color =
-        let TextMain = "var(--color-text-main)"
+    let Display = "var(--display)"
+    let TextMain = "var(--color-text-main)"
 
 style {
-    display Tokens.Layout.Display        // no custom escape hatch needed
-    flexDirection Tokens.Layout.Direction
-    color Tokens.Color.TextMain
+    display Tokens.Display               // no custom escape hatch needed
+    color Tokens.TextMain
     alignItemsCenter                     // typed ops still work side by side
 }
 ```
 
-**Reusable styles.** Two more ways to share style logic, both built on a fragment builder (`css` = a `CssBuilder` with the default `Run`, which returns a `CombineKeyValue` fragment):
+### Reusable styles
 
-1. **Shared fragment values** — put common combinations in a module and embed them:
+1. **Shared fragment values** — `Fun.Css.CssBuilder()` with the default `Run` returns a `CombineKeyValue` fragment that embeds cleanly in other blocks:
 
 ```fsharp
-let css = Fun.Css.CssBuilder()           // default Run returns a fragment
+let css = Fun.Css.CssBuilder()
 
 module SharedStyles =
     let ClickableGreen = css {
@@ -85,7 +83,7 @@ style {
 }
 ```
 
-2. **Custom operation extensions** — extend your builder with named operations:
+2. **Custom operation extensions** — extend the builder with named operations:
 
 ```fsharp
 []
@@ -101,43 +99,31 @@ module StyleExtensions =
                 flexDirectionColumn
             }
 
-        []
-        member inline this.EvenHStack([] comb: CombineKeyValue) =
-            comb &&& css {
-                displayFlex
-                custom "justify-content" "space-evenly"
-            }
-
 style {
     VStack
-    EvenHStack
 }
 ```
 
 (In Fun.Blazor, extend its `StyleBuilder` the same way.)
 
-### 3. Compose and branch
+### Compose and branch
 
-**Compose fragments.** With the default `Run` (which returns the `CombineKeyValue` fragment itself), one `style { ... }` block embeds another directly, or you can merge fragments with `&&&` from `Fun.Css.Internal`:
+**Compose fragments.** With the default `Run`, one `style { ... }` block embeds another directly, or merge fragments with `&&&` from `Fun.Css.Internal`:
 
 ```fsharp
-let frag = Fun.Css.CssBuilder()          // default Run returns CombineKeyValue
-
-let baseFrag = frag {
+let baseFrag = css {
     margin 0
     padding 10
 }
 
-let combined = frag {
+let combined = css {
     baseFrag                             // embeds cleanly
     color "red"
 }
-// or: let combined = baseFrag &&& frag { color "red" }
+// or: let combined = baseFrag &&& css { color "red" }
 ```
 
-Do **not** embed a builder whose `Run` returns a string (e.g. `StyleStrBuilder`) — the compiler auto-yields the string and appends a stray `"; "`. Concatenate the built strings instead: `baseStyles + overrides`.
-
-**Branch / loop.** A block containing `if`, `for`, or `match` cannot contain *any* custom operation (FS3086) — the whole block must use `yield` with `(key, value)` tuples, including for fallback properties:
+**Branch / loop.** A block containing `if`, `for`, or `match` cannot contain *any* custom operation (FS3086) — the whole block must use `yield` with `(key, value)` tuples:
 
 ```fsharp
 style {
@@ -145,13 +131,12 @@ style {
         yield ("font-weight", "bold")
     for size in sizes do
         yield ("margin-bottom", string size + "px")
-    yield ("container-type", "inline-size")  // fallback, not `custom`
 }
 ```
 
-To combine conditional output with regular custom ops, build them as separate blocks and concatenate the results (or combine fragments with `&&&` before running).
+To mix conditional output with custom ops, build them as separate blocks and combine the fragments with `&&&` (or concatenate built strings with `+`).
 
-### 4. Emit output
+### Emit output
 
 Subclass `CssBuilder` and override `Run`. Use a pooled `StringBuilder` for hot paths:
 
@@ -173,24 +158,6 @@ For Fun.Blazor, override `Run` to return an `AttrRenderFragment` (see README.md)
 ## Gotchas
 
 - **Tuples don't compile.** CE custom operations are curried: `margin 10 20`, not `margin (10, 20)` (FS3099/FS0041).
-- **Custom ops fail anywhere in a block containing `if`/`for`/`match`** (FS3086) — not just inside the branches. A branchy block must be pure `yield ("css-key", value)` tuples; keep custom ops in a separate block and combine the outputs.
+- **Custom ops fail anywhere in a block containing `if`/`for`/`match`** (FS3086) — not just inside the branches. Keep custom ops in a separate block and combine the outputs.
 - **Embedding a string-returning builder adds a stray `"; "`.** Only `CombineKeyValue` fragments (default `Run`) embed cleanly in another `style { }` block; concatenate built strings with `+` instead.
 - **`float` is a keyword in F#.** The float property group is `floatStyleLeft`, `floatStyleRight`, `floatStyleNone`, `floatStyle (value: string)`. (`floatLeft` etc. still work but warn.)
-- **End names take an apostrophe where `end` collides:** `gridColumnEnd`, `gridRowEnd` are fine; only local value bindings need `end'`.
-
-## Deprecation policy
-
-Public API members are **never removed**. Typo'd names stay available with `[]` pointing to the correctly spelled operation; they keep compiling and emitting identical CSS:
-
-```fsharp
-justifyItemsStrench   // works, but warns: use justifyItemsStretch
-wordbreakNormal       // works, but warns: use wordBreakNormal
-```
-
-When writing new code, always choose the non-obsolete name.
-
-## Reference
-
-- `README.md` — background, Fun.Blazor integration, benchmarks.
-- `Fun.Css/CssBuilder.fs` — full operation list (the only source of truth).
-- `Fun.Css/TODO.md` — known gaps and improvement backlog.

From 2be708d2dd3ac06eb8c7cb1931f2031a3c83cdc5 Mon Sep 17 00:00:00 2001
From: binwen 
Date: Fri, 28 Aug 2026 10:52:26 +0800
Subject: [PATCH 4/8] Refactor

---
 Fun.Css/Color.fs       |  441 +++++++++++++++
 Fun.Css/CssBuilder.fs  | 1150 ----------------------------------------
 Fun.Css/Font.fs        |  712 +++++++++++++++++++++++++
 Fun.Css/Fun.Css.fsproj |    2 +
 4 files changed, 1155 insertions(+), 1150 deletions(-)
 create mode 100644 Fun.Css/Color.fs
 create mode 100644 Fun.Css/Font.fs

diff --git a/Fun.Css/Color.fs b/Fun.Css/Color.fs
new file mode 100644
index 0000000..5e68fcb
--- /dev/null
+++ b/Fun.Css/Color.fs
@@ -0,0 +1,441 @@
+namespace Fun.Css
+
+
+
+/// Contains a list of HTML5 colors from https://htmlcolorcodes.com/color-names/
+[]
+module color =
+    /// Creates a color from components [hue](https://en.wikipedia.org/wiki/Hue), [saturation](https://en.wikipedia.org/wiki/Colorfulness) and [lightness](https://en.wikipedia.org/wiki/Lightness) where hue is a number that goes from 0 to 360 and both
+    /// the `saturation` and `lightness` go from 0 to 100 as they are percentages.
+    let inline hsl (hue: float, saturation: float, lightness: float) =
+        $"hsl({hue},{saturation}%%,{lightness}%%)"
+
+    let inline rgb (r: int, g: int, b: int) = $"rgb({r},{g},{b})"
+
+    let inline rgba (r: int, g: int, b: int, a: float) = $"rgba({r},{g},{b},{a})"
+
+    []
+    let indianRed = "#CD5C5C"
+
+    []
+    let lightCoral = "#F08080"
+
+    []
+    let salmon = "#FA8072"
+
+    []
+    let darkSalmon = "#E9967A"
+
+    []
+    let lightSalmon = "#FFA07A"
+
+    []
+    let crimson = "#DC143C"
+
+    []
+    let red = "#FF0000"
+
+    []
+    let fireBrick = "#B22222"
+
+    []
+    let darkRed = "#8B0000"
+
+    []
+    let pink = "#FFC0CB"
+
+    []
+    let lightPink = "#FFB6C1"
+
+    []
+    let hotPink = "#FF69B4"
+
+    []
+    let deepPink = "#FF1493"
+
+    []
+    let mediumVioletRed = "#C71585"
+
+    []
+    let paleVioletRed = "#DB7093"
+
+    []
+    let coral = "#FF7F50"
+
+    []
+    let tomato = "#FF6347"
+
+    []
+    let orangeRed = "#FF4500"
+
+    []
+    let darkOrange = "#FF8C00"
+
+    []
+    let orange = "#FFA500"
+
+    []
+    let gold = "#FFD700"
+
+    []
+    let yellow = "#FFFF00"
+
+    []
+    let lightYellow = "#FFFFE0"
+
+    []
+    let limonChiffon = "#FFFACD"
+
+    []
+    let lightGoldenRodYellow = "#FAFAD2"
+
+    []
+    let papayaWhip = "#FFEFD5"
+
+    []
+    let moccasin = "#FFE4B5"
+
+    []
+    let peachPuff = "#FFDAB9"
+
+    []
+    let paleGoldenRod = "#EEE8AA"
+
+    []
+    let khaki = "#F0E68C"
+
+    []
+    let darkKhaki = "#BDB76B"
+
+    []
+    let lavender = "#E6E6FA"
+
+    []
+    let thistle = "#D8BFD8"
+
+    []
+    let plum = "#DDA0DD"
+
+    []
+    let violet = "#EE82EE"
+
+    []
+    let orchid = "#DA70D6"
+
+    []
+    let fuchsia = "#FF00FF"
+
+    []
+    let magenta = "#FF00FF"
+
+    []
+    let mediumOrchid = "#BA55D3"
+
+    []
+    let mediumPurple = "#9370DB"
+
+    []
+    let rebeccaPurple = "#663399"
+
+    []
+    let blueViolet = "#8A2BE2"
+
+    []
+    let darkViolet = "#9400D3"
+
+    []
+    let darkOrchid = "#9932CC"
+
+    []
+    let darkMagenta = "#8B008B"
+
+    []
+    let purple = "#800080"
+
+    []
+    let indigo = "#4B0082"
+
+    []
+    let slateBlue = "#6A5ACD"
+
+    []
+    let darkSlateBlue = "#483D8B"
+
+    []
+    let mediumSlateBlue = "#7B68EE"
+
+    []
+    let greenYellow = "#ADFF2F"
+
+    []
+    let chartreuse = "#7FFF00"
+
+    []
+    let lawnGreen = "#7CFC00"
+
+    []
+    let lime = "#00FF00"
+
+    []
+    let limeGreen = "#32CD32"
+
+    []
+    let paleGreen = "#98FB98"
+
+    []
+    let lightGreen = "#90EE90"
+
+    []
+    let mediumSpringGreen = "#00FA9A"
+
+    []
+    let springGreen = "#00FF7F"
+
+    []
+    let mediumSeaGreen = "#3CB371"
+
+    []
+    let seaGreen = "#2E8B57"
+
+    []
+    let forestGreen = "#228B22"
+
+    []
+    let green = "#008000"
+
+    []
+    let darkGreen = "#006400"
+
+    []
+    let yellowGreen = "#9ACD32"
+
+    []
+    let oliveDrab = "#6B8E23"
+
+    []
+    let olive = "#808000"
+
+    []
+    let darkOliveGreen = "#556B2F"
+
+    []
+    let mediumAquamarine = "#66CDAA"
+
+    []
+    let darkSeaGreen = "#8FBC8B"
+
+    []
+    let lightSeaGreen = "#20B2AA"
+
+    []
+    let darkCyan = "#008B8B"
+
+    []
+    let teal = "#008080"
+
+    []
+    let aqua = "#00FFFF"
+
+    []
+    let cyan = "#00FFFF"
+
+    []
+    let lightCyan = "#E0FFFF"
+
+    []
+    let paleTurqouise = "#AFEEEE"
+
+    []
+    let aquaMarine = "#7FFFD4"
+
+    []
+    let turqouise = "#AFEEEE"
+
+    []
+    let mediumTurqouise = "#48D1CC"
+
+    []
+    let darkTurqouise = "#00CED1"
+
+    []
+    let cadetBlue = "#5F9EA0"
+
+    []
+    let steelBlue = "#4682B4"
+
+    []
+    let lightSteelBlue = "#B0C4DE"
+
+    []
+    let powederBlue = "#B0E0E6"
+
+    []
+    let lightBlue = "#ADD8E6"
+
+    []
+    let skyBlue = "#87CEEB"
+
+    []
+    let lightSkyBlue = "#87CEFA"
+
+    []
+    let deepSkyBlue = "#00BFFF"
+
+    []
+    let dodgerBlue = "#1E90FF"
+
+    []
+    let cornFlowerBlue = "#6495ED"
+
+    []
+    let royalBlue = "#4169E1"
+
+    []
+    let blue = "#0000FF"
+
+    []
+    let mediumBlue = "#0000CD"
+
+    []
+    let darkBlue = "#00008B"
+
+    []
+    let navy = "#000080"
+
+    []
+    let midnightBlue = "#191970"
+
+    []
+    let cornSilk = "#FFF8DC"
+
+    []
+    let blanchedAlmond = "#FFEBCD"
+
+    []
+    let bisque = "#FFE4C4"
+
+    []
+    let navajoWhite = "#FFDEAD"
+
+    []
+    let wheat = "#F5DEB3"
+
+    []
+    let burlyWood = "#DEB887"
+
+    []
+    let tan = "#D2B48C"
+
+    []
+    let rosyBrown = "#BC8F8F"
+
+    []
+    let sandyBrown = "#F4A460"
+
+    []
+    let goldenRod = "#DAA520"
+
+    []
+    let darkGoldenRod = "#B8860B"
+
+    []
+    let peru = "#CD853F"
+
+    []
+    let chocolate = "#D2691E"
+
+    []
+    let saddleBrown = "#8B4513"
+
+    []
+    let sienna = "#A0522D"
+
+    []
+    let brown = "#A52A2A"
+
+    []
+    let maroon = "#A52A2A"
+
+    []
+    let white = "#FFFFFF"
+
+    []
+    let snow = "#FFFAFA"
+
+    []
+    let honeyDew = "#F0FFF0"
+
+    []
+    let mintCream = "#F5FFFA"
+
+    []
+    let azure = "#F0FFFF"
+
+    []
+    let aliceBlue = "#F0F8FF"
+
+    []
+    let ghostWhite = "#F8F8FF"
+
+    []
+    let whiteSmoke = "#F5F5F5"
+
+    []
+    let seaShell = "#FFF5EE"
+
+    []
+    let beige = "#F5F5DC"
+
+    []
+    let oldLace = "#FDF5E6"
+
+    []
+    let floralWhite = "#FFFAF0"
+
+    []
+    let ivory = "#FFFFF0"
+
+    []
+    let antiqueWhite = "#FAEBD7"
+
+    []
+    let linen = "#FAF0E6"
+
+    []
+    let lavenderBlush = "#FFF0F5"
+
+    []
+    let mistyRose = "#FFE4E1"
+
+    []
+    let gainsBoro = "#DCDCDC"
+
+    []
+    let lightGray = "#D3D3D3"
+
+    []
+    let silver = "#C0C0C0"
+
+    []
+    let darkGray = "#A9A9A9"
+
+    []
+    let gray = "#808080"
+
+    []
+    let dimGray = "#696969"
+
+    []
+    let lightSlateGray = "#778899"
+
+    []
+    let slateGray = "#708090"
+
+    []
+    let darkSlateGray = "#2F4F4F"
+
+    []
+    let black = "#000000"
+
+    []
+    let transparent = "transparent"
diff --git a/Fun.Css/CssBuilder.fs b/Fun.Css/CssBuilder.fs
index c9e4c74..5796005 100644
--- a/Fun.Css/CssBuilder.fs
+++ b/Fun.Css/CssBuilder.fs
@@ -5442,1153 +5442,3 @@ type CssBuilder() =
     []
     member inline _.textOrientationInheritFromParent([] comb: CombineKeyValue) =
         comb &>> ("text-orientation", "inherit")
-
-
-
-
-/// Contains a list of HTML5 colors from https://htmlcolorcodes.com/color-names/
-module color =
-    /// Creates a color from components [hue](https://en.wikipedia.org/wiki/Hue), [saturation](https://en.wikipedia.org/wiki/Colorfulness) and [lightness](https://en.wikipedia.org/wiki/Lightness) where hue is a number that goes from 0 to 360 and both
-    /// the `saturation` and `lightness` go from 0 to 100 as they are percentages.
-    let inline hsl (hue: float, saturation: float, lightness: float) =
-        $"hsl({hue},{saturation}%%,{lightness}%%)"
-
-    let inline rgb (r: int, g: int, b: int) = $"rgb({r},{g},{b})"
-
-    let inline rgba (r: int, g: int, b: int, a: float) = $"rgba({r},{g},{b},{a})"
-
-    []
-    let indianRed = "#CD5C5C"
-
-    []
-    let lightCoral = "#F08080"
-
-    []
-    let salmon = "#FA8072"
-
-    []
-    let darkSalmon = "#E9967A"
-
-    []
-    let lightSalmon = "#FFA07A"
-
-    []
-    let crimson = "#DC143C"
-
-    []
-    let red = "#FF0000"
-
-    []
-    let fireBrick = "#B22222"
-
-    []
-    let darkRed = "#8B0000"
-
-    []
-    let pink = "#FFC0CB"
-
-    []
-    let lightPink = "#FFB6C1"
-
-    []
-    let hotPink = "#FF69B4"
-
-    []
-    let deepPink = "#FF1493"
-
-    []
-    let mediumVioletRed = "#C71585"
-
-    []
-    let paleVioletRed = "#DB7093"
-
-    []
-    let coral = "#FF7F50"
-
-    []
-    let tomato = "#FF6347"
-
-    []
-    let orangeRed = "#FF4500"
-
-    []
-    let darkOrange = "#FF8C00"
-
-    []
-    let orange = "#FFA500"
-
-    []
-    let gold = "#FFD700"
-
-    []
-    let yellow = "#FFFF00"
-
-    []
-    let lightYellow = "#FFFFE0"
-
-    []
-    let limonChiffon = "#FFFACD"
-
-    []
-    let lightGoldenRodYellow = "#FAFAD2"
-
-    []
-    let papayaWhip = "#FFEFD5"
-
-    []
-    let moccasin = "#FFE4B5"
-
-    []
-    let peachPuff = "#FFDAB9"
-
-    []
-    let paleGoldenRod = "#EEE8AA"
-
-    []
-    let khaki = "#F0E68C"
-
-    []
-    let darkKhaki = "#BDB76B"
-
-    []
-    let lavender = "#E6E6FA"
-
-    []
-    let thistle = "#D8BFD8"
-
-    []
-    let plum = "#DDA0DD"
-
-    []
-    let violet = "#EE82EE"
-
-    []
-    let orchid = "#DA70D6"
-
-    []
-    let fuchsia = "#FF00FF"
-
-    []
-    let magenta = "#FF00FF"
-
-    []
-    let mediumOrchid = "#BA55D3"
-
-    []
-    let mediumPurple = "#9370DB"
-
-    []
-    let rebeccaPurple = "#663399"
-
-    []
-    let blueViolet = "#8A2BE2"
-
-    []
-    let darkViolet = "#9400D3"
-
-    []
-    let darkOrchid = "#9932CC"
-
-    []
-    let darkMagenta = "#8B008B"
-
-    []
-    let purple = "#800080"
-
-    []
-    let indigo = "#4B0082"
-
-    []
-    let slateBlue = "#6A5ACD"
-
-    []
-    let darkSlateBlue = "#483D8B"
-
-    []
-    let mediumSlateBlue = "#7B68EE"
-
-    []
-    let greenYellow = "#ADFF2F"
-
-    []
-    let chartreuse = "#7FFF00"
-
-    []
-    let lawnGreen = "#7CFC00"
-
-    []
-    let lime = "#00FF00"
-
-    []
-    let limeGreen = "#32CD32"
-
-    []
-    let paleGreen = "#98FB98"
-
-    []
-    let lightGreen = "#90EE90"
-
-    []
-    let mediumSpringGreen = "#00FA9A"
-
-    []
-    let springGreen = "#00FF7F"
-
-    []
-    let mediumSeaGreen = "#3CB371"
-
-    []
-    let seaGreen = "#2E8B57"
-
-    []
-    let forestGreen = "#228B22"
-
-    []
-    let green = "#008000"
-
-    []
-    let darkGreen = "#006400"
-
-    []
-    let yellowGreen = "#9ACD32"
-
-    []
-    let oliveDrab = "#6B8E23"
-
-    []
-    let olive = "#808000"
-
-    []
-    let darkOliveGreen = "#556B2F"
-
-    []
-    let mediumAquamarine = "#66CDAA"
-
-    []
-    let darkSeaGreen = "#8FBC8B"
-
-    []
-    let lightSeaGreen = "#20B2AA"
-
-    []
-    let darkCyan = "#008B8B"
-
-    []
-    let teal = "#008080"
-
-    []
-    let aqua = "#00FFFF"
-
-    []
-    let cyan = "#00FFFF"
-
-    []
-    let lightCyan = "#E0FFFF"
-
-    []
-    let paleTurqouise = "#AFEEEE"
-
-    []
-    let aquaMarine = "#7FFFD4"
-
-    []
-    let turqouise = "#AFEEEE"
-
-    []
-    let mediumTurqouise = "#48D1CC"
-
-    []
-    let darkTurqouise = "#00CED1"
-
-    []
-    let cadetBlue = "#5F9EA0"
-
-    []
-    let steelBlue = "#4682B4"
-
-    []
-    let lightSteelBlue = "#B0C4DE"
-
-    []
-    let powederBlue = "#B0E0E6"
-
-    []
-    let lightBlue = "#ADD8E6"
-
-    []
-    let skyBlue = "#87CEEB"
-
-    []
-    let lightSkyBlue = "#87CEFA"
-
-    []
-    let deepSkyBlue = "#00BFFF"
-
-    []
-    let dodgerBlue = "#1E90FF"
-
-    []
-    let cornFlowerBlue = "#6495ED"
-
-    []
-    let royalBlue = "#4169E1"
-
-    []
-    let blue = "#0000FF"
-
-    []
-    let mediumBlue = "#0000CD"
-
-    []
-    let darkBlue = "#00008B"
-
-    []
-    let navy = "#000080"
-
-    []
-    let midnightBlue = "#191970"
-
-    []
-    let cornSilk = "#FFF8DC"
-
-    []
-    let blanchedAlmond = "#FFEBCD"
-
-    []
-    let bisque = "#FFE4C4"
-
-    []
-    let navajoWhite = "#FFDEAD"
-
-    []
-    let wheat = "#F5DEB3"
-
-    []
-    let burlyWood = "#DEB887"
-
-    []
-    let tan = "#D2B48C"
-
-    []
-    let rosyBrown = "#BC8F8F"
-
-    []
-    let sandyBrown = "#F4A460"
-
-    []
-    let goldenRod = "#DAA520"
-
-    []
-    let darkGoldenRod = "#B8860B"
-
-    []
-    let peru = "#CD853F"
-
-    []
-    let chocolate = "#D2691E"
-
-    []
-    let saddleBrown = "#8B4513"
-
-    []
-    let sienna = "#A0522D"
-
-    []
-    let brown = "#A52A2A"
-
-    []
-    let maroon = "#A52A2A"
-
-    []
-    let white = "#FFFFFF"
-
-    []
-    let snow = "#FFFAFA"
-
-    []
-    let honeyDew = "#F0FFF0"
-
-    []
-    let mintCream = "#F5FFFA"
-
-    []
-    let azure = "#F0FFFF"
-
-    []
-    let aliceBlue = "#F0F8FF"
-
-    []
-    let ghostWhite = "#F8F8FF"
-
-    []
-    let whiteSmoke = "#F5F5F5"
-
-    []
-    let seaShell = "#FFF5EE"
-
-    []
-    let beige = "#F5F5DC"
-
-    []
-    let oldLace = "#FDF5E6"
-
-    []
-    let floralWhite = "#FFFAF0"
-
-    []
-    let ivory = "#FFFFF0"
-
-    []
-    let antiqueWhite = "#FAEBD7"
-
-    []
-    let linen = "#FAF0E6"
-
-    []
-    let lavenderBlush = "#FFF0F5"
-
-    []
-    let mistyRose = "#FFE4E1"
-
-    []
-    let gainsBoro = "#DCDCDC"
-
-    []
-    let lightGray = "#D3D3D3"
-
-    []
-    let silver = "#C0C0C0"
-
-    []
-    let darkGray = "#A9A9A9"
-
-    []
-    let gray = "#808080"
-
-    []
-    let dimGray = "#696969"
-
-    []
-    let lightSlateGray = "#778899"
-
-    []
-    let slateGray = "#708090"
-
-    []
-    let darkSlateGray = "#2F4F4F"
-
-    []
-    let black = "#000000"
-
-    []
-    let transparent = "transparent"
-
-/// Contains a list of CSS Fonts from https://www.tutorialbrain.com/css_tutorial/css_font_family_list/
-module font =
-    []
-    let abadiMTCondensedLight = "Abadi MT Condensed Light"
-
-    []
-    let aharoni = "Aharoni"
-
-    []
-    let aharoniBold = "Aharoni Bold"
-
-    []
-    let aldhabi = "Aldhabi"
-
-    []
-    let alternateGothic2BT = "AlternateGothic2 BT"
-
-    []
-    let andaleMono = "Andale Mono"
-
-    []
-    let andalus = "Andalus"
-
-    []
-    let angsanaNew = "Angsana New"
-
-    []
-    let angsanaUPC = "AngsanaUPC"
-
-    []
-    let aparajita = "Aparajita"
-
-    []
-    let appleChancery = "Apple Chancery"
-
-    []
-    let arabicTypesetting = "Arabic Typesetting"
-
-    []
-    let arial = "Arial"
-
-    []
-    let arialBlack = "Arial Black"
-
-    []
-    let arialNarrow = "Arial narrow"
-
-    []
-    let arialNova = "Arial Nova"
-
-    []
-    let arialRoundedMTBold = "Arial Rounded MT Bold"
-
-    []
-    let arnoldboecklin = "Arnoldboecklin"
-
-    []
-    let avantaGarde = "Avanta Garde"
-
-    []
-    let bahnschrift = "Bahnschrift"
-
-    []
-    let bahnschriftLight = "Bahnschrift Light"
-
-    []
-    let bahnschriftSemiBold = "Bahnschrift SemiBold"
-
-    []
-    let bahnschriftSemiLight = "Bahnschrift SemiLight"
-
-    []
-    let baskerville = "Baskerville"
-
-    []
-    let batang = "Batang"
-
-    []
-    let batangChe = "BatangChe"
-
-    []
-    let bigCaslon = "Big Caslon"
-
-    []
-    let bizUDGothic = "BIZ UDGothic"
-
-    []
-    let bizUDMinchoMedium = "BIZ UDMincho Medium"
-
-    []
-    let blippo = "Blippo"
-
-    []
-    let bodoniMT = "Bodoni MT"
-
-    []
-    let bookAntiqua = "Book Antiqua"
-
-    []
-    let Bookman = "Bookman"
-
-    []
-    let bradlyHand = "Bradley Hand"
-
-    []
-    let browalliaNew = "Browallia New"
-
-    []
-    let browalliaUPC = "BrowalliaUPC"
-
-    []
-    let brushScriptMT = "Brush Script MT"
-
-    []
-    let brushScriptStd = "Brush Script Std"
-
-    []
-    let brushStroke = "Brushstroke"
-
-    []
-    let calibri = "Calibri"
-
-    []
-    let calibriLight = "Calibri Light"
-
-    []
-    let calistoMT = "Calisto MT"
-
-    []
-    let cambodian = "Cambodian"
-
-    []
-    let cambria = "Cambria"
-
-    []
-    let cambriaMath = "Cambria Math"
-
-    []
-    let candara = "Candara"
-
-    []
-    let centuryGothic = "Century Gothic"
-
-    []
-    let chalkDuster = "Chalkduster"
-
-    []
-    let cherokee = "Cherokee"
-
-    []
-    let comicSans = "Comic Sans"
-
-    []
-    let comicSansMS = "Comic Sans MS"
-
-    []
-    let consolas = "Consolas"
-
-    []
-    let constantia = "Constantia"
-
-    []
-    let copperPlate = "Copperplate"
-
-    []
-    let copperPlateGothicLight = "Copperplate Gothic Light"
-
-    []
-    let copperPlateGothicBold = "Copperplate Gothic Bold"
-
-    []
-    let corbel = "Corbel"
-
-    []
-    let cordiaNew = "Cordia New"
-
-    []
-    let cordiaUPC = "CordiaUPC"
-
-    []
-    let coronetScript = "Coronet script"
-
-    []
-    let courier = "Courier"
-
-    []
-    let courierNew = "Courier New"
-
-    []
-    let daunPenh = "DaunPenh"
-
-    []
-    let david = "David"
-
-    []
-    let dengXian = "DengXian"
-
-    []
-    let dfKaiSB = "DFKai-SB"
-
-    []
-    let didot = "Didot"
-
-    []
-    let dilleniaUPC = "DilleniaUPC"
-
-    []
-    let dokChampa = "DokChampa"
-
-    []
-    let dotum = "Dotum"
-
-    []
-    let dotumChe = "DotumChe"
-
-    []
-    let ebrima = "Ebrima"
-
-    []
-    let estrangeloEdessa = "Estrangelo Edessa"
-
-    []
-    let eucrosiaUPC = "EucrosiaUPC"
-
-    []
-    let euphemia = "Euphemia"
-
-    []
-    let fangSong = "FangSong"
-
-    []
-    let florence = "Florence"
-
-    []
-    let franklinGothicMedium = "Franklin Gothic Medium"
-
-    []
-    let frankRuehl = "FrankRuehl"
-
-    []
-    let fressiaUPC = "FressiaUPC"
-
-    []
-    let futara = "Futara"
-
-    []
-    let gabriola = "Gabriola"
-
-    []
-    let garamond = "Garamond"
-
-    []
-    let gautami = "Gautami"
-
-    []
-    let geneva = "Geneva"
-
-    []
-    let georgia = "Georgia"
-
-    []
-    let georgiaPro = "Georgia Pro"
-
-    []
-    let gillSans = "Gill Sans"
-
-    []
-    let gillSansNova = "Gill Sans Nova"
-
-    []
-    let gisha = "Gisha"
-
-    []
-    let goudyOldStyle = "Goudy Old Style"
-
-    []
-    let gulim = "Gulim"
-
-    []
-    let gulimChe = "GulimChe"
-
-    []
-    let gungsuh = "Gungsuh"
-
-    []
-    let gungsuhChe = "GungsuhChe"
-
-    []
-    let hebrew = "Hebrew"
-
-    []
-    let helvetica = "Helvetica"
-
-    []
-    let hoeflerText = "Hoefler Text"
-
-    []
-    let holoLensMDL2Assets = "HoloLens MDL2 Assets"
-
-    []
-    let impact = "Impact"
-
-    []
-    let inkFree = "Ink Free"
-
-    []
-    let irisUPC = "IrisUPC"
-
-    []
-    let iskoolaPota = "Iskoola Pota"
-
-    []
-    let japanese = "Japanese"
-
-    []
-    let jasmineUPC = "JasmineUPC"
-
-    []
-    let javaneseText = "Javanese Text"
-
-    []
-    let jazzLET = "Jazz LET"
-
-    []
-    let kaiTi = "KaiTi"
-
-    []
-    let kalinga = "Kalinga"
-
-    []
-    let kartika = "Kartika"
-
-    []
-    let khmerUI = "Khmer UI"
-
-    []
-    let kodchiangUPC = "KodchiangUPC"
-
-    []
-    let kokila = "Kokila"
-
-    []
-    let korean = "Korean"
-
-    []
-    let lao = "Lao"
-
-    []
-    let laoUI = "Lao UI"
-
-    []
-    let latha = "Latha"
-
-    []
-    let leelawadee = "Leelawadee"
-
-    []
-    let leelawadeeUI = "Leelawadee UI"
-
-    []
-    let leelawadeeUISemilight = "Leelawadee UI Semilight"
-
-    []
-    let levenimMT = "Levenim MT"
-
-    []
-    let lilyUPC = "LilyUPC"
-
-    []
-    let lucidaBright = "Lucida Bright"
-
-    []
-    let lucidaConsole = "Lucida Console"
-
-    []
-    let lucidaHandwriting = "Lucida Handwriting"
-
-    []
-    let lucidaSans = "Lucida Sans"
-
-    []
-    let lucidaSansTypewriter = "Lucida Sans Typewriter"
-
-    []
-    let lucidaSansUnicode = "Lucida Sans Unicode"
-
-    []
-    let lucidaTypewriter = "Lucidatypewriter"
-
-    []
-    let luminari = "Luminari"
-
-    []
-    let malgunGothic = "Malgun Gothic"
-
-    []
-    let malgunGothicSemilight = "Malgun Gothic Semilight"
-
-    []
-    let mangal = "Mangal"
-
-    []
-    let markerFelt = "Marker Felt"
-
-    []
-    let marlett = "Marlett"
-
-    []
-    let meiryo = "Meiryo"
-
-    []
-    let meiryoUI = "Meiryo UI"
-
-    []
-    let microsoftHimalaya = "Microsoft Himalaya"
-
-    []
-    let microsoftJhengHei = "Microsoft JhengHei"
-
-    []
-    let microsoftJhengHeiUI = "Microsoft JhengHei UI"
-
-    []
-    let microsoftNewTaiLue = "Microsoft New Tai Lue"
-
-    []
-    let microsoftPhagsPa = "Microsoft PhagsPa"
-
-    []
-    let microsoftSansSerif = "Microsoft Sans Serif"
-
-    []
-    let microsoftTaiLe = "Microsoft Tai Le"
-
-    []
-    let microsoftUighur = "Microsoft Uighur"
-
-    []
-    let microsoftYaHei = "Microsoft YaHei"
-
-    []
-    let microsoftYaHeiUI = "Microsoft YaHei UI"
-
-    []
-    let microsoftYiBaiti = "Microsoft Yi Baiti"
-
-    []
-    let mingLiU = "MingLiU"
-
-    []
-    let mingLiUHKSCS = "MingLiU_HKSCS"
-
-    []
-    let mingLiUHKSCSExtB = "MingLiU_HKSCS-ExtB"
-
-    []
-    let mingLiUExtB = "MingLiU-ExtB"
-
-    []
-    let miriam = "Miriam"
-
-    []
-    let monaco = "Monaco"
-
-    []
-    let mongolianBaiti = "Mongolian Baiti"
-
-    []
-    let moolBoran = "MoolBoran"
-
-    []
-    let msGothic = "MS Gothic"
-
-    []
-    let msMincho = "MS Mincho"
-
-    []
-    let msPGothic = "MS PGothic"
-
-    []
-    let msPMincho = "MS PMincho"
-
-    []
-    let msUIGothic = "MS UI Gothic"
-
-    []
-    let mvBoli = "MV Boli"
-
-    []
-    let myanmarText = "Myanmar Text"
-
-    []
-    let narkisim = "Narkisim"
-
-    []
-    let neueHaasGroteskTextPro = "Neue Haas Grotesk Text Pro"
-
-    []
-    let newCenturySchoolbook = "New Century Schoolbook"
-
-    []
-    let newsGothicMT = "News Gothic MT"
-
-    []
-    let nirmalaUI = "Nirmala UI"
-
-    []
-    let noAutoLanguageAssoc = "No automatic language associations"
-
-    []
-    let noto = "Noto"
-
-    []
-    let nSimSun = "NSimSun"
-
-    []
-    let nyala = "Nyala"
-
-    []
-    let oldTown = "Oldtown"
-
-    []
-    let optima = "Optima"
-
-    []
-    let palatino = "Palatino"
-
-    []
-    let palatinoLinotype = "Palatino Linotype"
-
-    []
-    let papyrus = "papyrus"
-
-    []
-    let parkAvenue = "Parkavenue"
-
-    []
-    let perpetua = "Perpetua"
-
-    []
-    let plantagenetCherokee = "Plantagenet Cherokee"
-
-    []
-    let PMingLiU = "PMingLiU"
-
-    []
-    let raavi = "Raavi"
-
-    []
-    let rockwell = "Rockwell"
-
-    []
-    let rockwellExtraBold = "Rockwell Extra Bold"
-
-    []
-    let rockwellNova = "Rockwell Nova"
-
-    []
-    let rockwellNovaCond = "Rockwell Nova Cond"
-
-    []
-    let rockwellNovaExtraBold = "Rockwell Nova Extra Bold"
-
-    []
-    let rod = "Rod"
-
-    []
-    let sakkalMajalla = "Sakkal Majalla"
-
-    []
-    let sanskritText = "Sanskrit Text"
-
-    []
-    let segoeMDL2Assets = "segoeMDL2Assets"
-
-    []
-    let segoePrint = "Segoe Print"
-
-    []
-    let segoeScript = "Segoe Script"
-
-    []
-    let segoeUI = "Segoe UI"
-
-    []
-    let segoeUIEmoji = "Segoe UI Emoji"
-
-    []
-    let segoeUIHistoric = "Segoe UI Historic"
-
-    []
-    let segoeUISymbol = "Segoe UI Symbol"
-
-    []
-    let shonarBangla = "Shonar Bangla"
-
-    []
-    let shruti = "Shruti"
-
-    []
-    let simHei = "SimHei"
-
-    []
-    let simKai = "SimKai"
-
-    []
-    let simplifiedArabic = "Simplified Arabic"
-
-    []
-    let simplifiedChinese = "Simplified Chinese"
-
-    []
-    let simSun = "SimSun"
-
-    []
-    let simSunExtB = "SimSun-ExtB"
-
-    []
-    let sitka = "Sitka"
-
-    []
-    let snellRoundhan = "Snell Roundhan"
-
-    []
-    let stencilStd = "Stencil Std"
-
-    []
-    let sylfaen = "Sylfaen"
-
-    []
-    let symbol = "Symbol"
-
-    []
-    let tahoma = "Tahoma"
-
-    []
-    let thai = "Thai"
-
-    []
-    let timesNewRoman = "Times New Roman"
-
-    []
-    let traditionalArabic = "Traditional Arabic"
-
-    []
-    let traditionalChinese = "Traditional Chinese"
-
-    []
-    let trattatello = "Trattatello"
-
-    []
-    let trebuchetMS = "Trebuchet MS"
-
-    []
-    let udDigiKyokasho = "UD Digi Kyokasho"
-
-    []
-    let udDigiKyokashoNKR = "UD Digi Kyokasho NK-R"
-
-    []
-    let udDigiKyokashoNPR = "UD Digi Kyokasho NP-R"
-
-    []
-    let udDigiKyokashoNR = "UD Digi Kyokasho N-R"
-
-    []
-    let urduTypesetting = "Urdu Typesetting"
-
-    []
-    let urwChancery = "URW Chancery"
-
-    []
-    let utsaah = "Utsaah"
-
-    []
-    let vani = "Vani"
-
-    []
-    let verdana = "Verdana"
-
-    []
-    let verdanaPro = "Verdana Pro"
-
-    []
-    let vijaya = "Vijaya"
-
-    []
-    let vrinda = "Vrinda"
-
-    []
-    let Webdings = "Webdings"
-
-    []
-    let westminster = "Westminster"
-
-    []
-    let wingdings = "Wingdings"
-
-    []
-    let yuGothic = "Yu Gothic"
-
-    []
-    let yuGothicUI = "Yu Gothic UI"
-
-    []
-    let yuMincho = "Yu Mincho"
-
-    []
-    let zapfChancery = "Zapf Chancery"
diff --git a/Fun.Css/Font.fs b/Fun.Css/Font.fs
new file mode 100644
index 0000000..5feefc1
--- /dev/null
+++ b/Fun.Css/Font.fs
@@ -0,0 +1,712 @@
+namespace Fun.Css
+
+/// Contains a list of CSS Fonts from https://www.tutorialbrain.com/css_tutorial/css_font_family_list/
+[]
+module font =
+    []
+    let abadiMTCondensedLight = "Abadi MT Condensed Light"
+
+    []
+    let aharoni = "Aharoni"
+
+    []
+    let aharoniBold = "Aharoni Bold"
+
+    []
+    let aldhabi = "Aldhabi"
+
+    []
+    let alternateGothic2BT = "AlternateGothic2 BT"
+
+    []
+    let andaleMono = "Andale Mono"
+
+    []
+    let andalus = "Andalus"
+
+    []
+    let angsanaNew = "Angsana New"
+
+    []
+    let angsanaUPC = "AngsanaUPC"
+
+    []
+    let aparajita = "Aparajita"
+
+    []
+    let appleChancery = "Apple Chancery"
+
+    []
+    let arabicTypesetting = "Arabic Typesetting"
+
+    []
+    let arial = "Arial"
+
+    []
+    let arialBlack = "Arial Black"
+
+    []
+    let arialNarrow = "Arial narrow"
+
+    []
+    let arialNova = "Arial Nova"
+
+    []
+    let arialRoundedMTBold = "Arial Rounded MT Bold"
+
+    []
+    let arnoldboecklin = "Arnoldboecklin"
+
+    []
+    let avantaGarde = "Avanta Garde"
+
+    []
+    let bahnschrift = "Bahnschrift"
+
+    []
+    let bahnschriftLight = "Bahnschrift Light"
+
+    []
+    let bahnschriftSemiBold = "Bahnschrift SemiBold"
+
+    []
+    let bahnschriftSemiLight = "Bahnschrift SemiLight"
+
+    []
+    let baskerville = "Baskerville"
+
+    []
+    let batang = "Batang"
+
+    []
+    let batangChe = "BatangChe"
+
+    []
+    let bigCaslon = "Big Caslon"
+
+    []
+    let bizUDGothic = "BIZ UDGothic"
+
+    []
+    let bizUDMinchoMedium = "BIZ UDMincho Medium"
+
+    []
+    let blippo = "Blippo"
+
+    []
+    let bodoniMT = "Bodoni MT"
+
+    []
+    let bookAntiqua = "Book Antiqua"
+
+    []
+    let Bookman = "Bookman"
+
+    []
+    let bradlyHand = "Bradley Hand"
+
+    []
+    let browalliaNew = "Browallia New"
+
+    []
+    let browalliaUPC = "BrowalliaUPC"
+
+    []
+    let brushScriptMT = "Brush Script MT"
+
+    []
+    let brushScriptStd = "Brush Script Std"
+
+    []
+    let brushStroke = "Brushstroke"
+
+    []
+    let calibri = "Calibri"
+
+    []
+    let calibriLight = "Calibri Light"
+
+    []
+    let calistoMT = "Calisto MT"
+
+    []
+    let cambodian = "Cambodian"
+
+    []
+    let cambria = "Cambria"
+
+    []
+    let cambriaMath = "Cambria Math"
+
+    []
+    let candara = "Candara"
+
+    []
+    let centuryGothic = "Century Gothic"
+
+    []
+    let chalkDuster = "Chalkduster"
+
+    []
+    let cherokee = "Cherokee"
+
+    []
+    let comicSans = "Comic Sans"
+
+    []
+    let comicSansMS = "Comic Sans MS"
+
+    []
+    let consolas = "Consolas"
+
+    []
+    let constantia = "Constantia"
+
+    []
+    let copperPlate = "Copperplate"
+
+    []
+    let copperPlateGothicLight = "Copperplate Gothic Light"
+
+    []
+    let copperPlateGothicBold = "Copperplate Gothic Bold"
+
+    []
+    let corbel = "Corbel"
+
+    []
+    let cordiaNew = "Cordia New"
+
+    []
+    let cordiaUPC = "CordiaUPC"
+
+    []
+    let coronetScript = "Coronet script"
+
+    []
+    let courier = "Courier"
+
+    []
+    let courierNew = "Courier New"
+
+    []
+    let daunPenh = "DaunPenh"
+
+    []
+    let david = "David"
+
+    []
+    let dengXian = "DengXian"
+
+    []
+    let dfKaiSB = "DFKai-SB"
+
+    []
+    let didot = "Didot"
+
+    []
+    let dilleniaUPC = "DilleniaUPC"
+
+    []
+    let dokChampa = "DokChampa"
+
+    []
+    let dotum = "Dotum"
+
+    []
+    let dotumChe = "DotumChe"
+
+    []
+    let ebrima = "Ebrima"
+
+    []
+    let estrangeloEdessa = "Estrangelo Edessa"
+
+    []
+    let eucrosiaUPC = "EucrosiaUPC"
+
+    []
+    let euphemia = "Euphemia"
+
+    []
+    let fangSong = "FangSong"
+
+    []
+    let florence = "Florence"
+
+    []
+    let franklinGothicMedium = "Franklin Gothic Medium"
+
+    []
+    let frankRuehl = "FrankRuehl"
+
+    []
+    let fressiaUPC = "FressiaUPC"
+
+    []
+    let futara = "Futara"
+
+    []
+    let gabriola = "Gabriola"
+
+    []
+    let garamond = "Garamond"
+
+    []
+    let gautami = "Gautami"
+
+    []
+    let geneva = "Geneva"
+
+    []
+    let georgia = "Georgia"
+
+    []
+    let georgiaPro = "Georgia Pro"
+
+    []
+    let gillSans = "Gill Sans"
+
+    []
+    let gillSansNova = "Gill Sans Nova"
+
+    []
+    let gisha = "Gisha"
+
+    []
+    let goudyOldStyle = "Goudy Old Style"
+
+    []
+    let gulim = "Gulim"
+
+    []
+    let gulimChe = "GulimChe"
+
+    []
+    let gungsuh = "Gungsuh"
+
+    []
+    let gungsuhChe = "GungsuhChe"
+
+    []
+    let hebrew = "Hebrew"
+
+    []
+    let helvetica = "Helvetica"
+
+    []
+    let hoeflerText = "Hoefler Text"
+
+    []
+    let holoLensMDL2Assets = "HoloLens MDL2 Assets"
+
+    []
+    let impact = "Impact"
+
+    []
+    let inkFree = "Ink Free"
+
+    []
+    let irisUPC = "IrisUPC"
+
+    []
+    let iskoolaPota = "Iskoola Pota"
+
+    []
+    let japanese = "Japanese"
+
+    []
+    let jasmineUPC = "JasmineUPC"
+
+    []
+    let javaneseText = "Javanese Text"
+
+    []
+    let jazzLET = "Jazz LET"
+
+    []
+    let kaiTi = "KaiTi"
+
+    []
+    let kalinga = "Kalinga"
+
+    []
+    let kartika = "Kartika"
+
+    []
+    let khmerUI = "Khmer UI"
+
+    []
+    let kodchiangUPC = "KodchiangUPC"
+
+    []
+    let kokila = "Kokila"
+
+    []
+    let korean = "Korean"
+
+    []
+    let lao = "Lao"
+
+    []
+    let laoUI = "Lao UI"
+
+    []
+    let latha = "Latha"
+
+    []
+    let leelawadee = "Leelawadee"
+
+    []
+    let leelawadeeUI = "Leelawadee UI"
+
+    []
+    let leelawadeeUISemilight = "Leelawadee UI Semilight"
+
+    []
+    let levenimMT = "Levenim MT"
+
+    []
+    let lilyUPC = "LilyUPC"
+
+    []
+    let lucidaBright = "Lucida Bright"
+
+    []
+    let lucidaConsole = "Lucida Console"
+
+    []
+    let lucidaHandwriting = "Lucida Handwriting"
+
+    []
+    let lucidaSans = "Lucida Sans"
+
+    []
+    let lucidaSansTypewriter = "Lucida Sans Typewriter"
+
+    []
+    let lucidaSansUnicode = "Lucida Sans Unicode"
+
+    []
+    let lucidaTypewriter = "Lucidatypewriter"
+
+    []
+    let luminari = "Luminari"
+
+    []
+    let malgunGothic = "Malgun Gothic"
+
+    []
+    let malgunGothicSemilight = "Malgun Gothic Semilight"
+
+    []
+    let mangal = "Mangal"
+
+    []
+    let markerFelt = "Marker Felt"
+
+    []
+    let marlett = "Marlett"
+
+    []
+    let meiryo = "Meiryo"
+
+    []
+    let meiryoUI = "Meiryo UI"
+
+    []
+    let microsoftHimalaya = "Microsoft Himalaya"
+
+    []
+    let microsoftJhengHei = "Microsoft JhengHei"
+
+    []
+    let microsoftJhengHeiUI = "Microsoft JhengHei UI"
+
+    []
+    let microsoftNewTaiLue = "Microsoft New Tai Lue"
+
+    []
+    let microsoftPhagsPa = "Microsoft PhagsPa"
+
+    []
+    let microsoftSansSerif = "Microsoft Sans Serif"
+
+    []
+    let microsoftTaiLe = "Microsoft Tai Le"
+
+    []
+    let microsoftUighur = "Microsoft Uighur"
+
+    []
+    let microsoftYaHei = "Microsoft YaHei"
+
+    []
+    let microsoftYaHeiUI = "Microsoft YaHei UI"
+
+    []
+    let microsoftYiBaiti = "Microsoft Yi Baiti"
+
+    []
+    let mingLiU = "MingLiU"
+
+    []
+    let mingLiUHKSCS = "MingLiU_HKSCS"
+
+    []
+    let mingLiUHKSCSExtB = "MingLiU_HKSCS-ExtB"
+
+    []
+    let mingLiUExtB = "MingLiU-ExtB"
+
+    []
+    let miriam = "Miriam"
+
+    []
+    let monaco = "Monaco"
+
+    []
+    let mongolianBaiti = "Mongolian Baiti"
+
+    []
+    let moolBoran = "MoolBoran"
+
+    []
+    let msGothic = "MS Gothic"
+
+    []
+    let msMincho = "MS Mincho"
+
+    []
+    let msPGothic = "MS PGothic"
+
+    []
+    let msPMincho = "MS PMincho"
+
+    []
+    let msUIGothic = "MS UI Gothic"
+
+    []
+    let mvBoli = "MV Boli"
+
+    []
+    let myanmarText = "Myanmar Text"
+
+    []
+    let narkisim = "Narkisim"
+
+    []
+    let neueHaasGroteskTextPro = "Neue Haas Grotesk Text Pro"
+
+    []
+    let newCenturySchoolbook = "New Century Schoolbook"
+
+    []
+    let newsGothicMT = "News Gothic MT"
+
+    []
+    let nirmalaUI = "Nirmala UI"
+
+    []
+    let noAutoLanguageAssoc = "No automatic language associations"
+
+    []
+    let noto = "Noto"
+
+    []
+    let nSimSun = "NSimSun"
+
+    []
+    let nyala = "Nyala"
+
+    []
+    let oldTown = "Oldtown"
+
+    []
+    let optima = "Optima"
+
+    []
+    let palatino = "Palatino"
+
+    []
+    let palatinoLinotype = "Palatino Linotype"
+
+    []
+    let papyrus = "papyrus"
+
+    []
+    let parkAvenue = "Parkavenue"
+
+    []
+    let perpetua = "Perpetua"
+
+    []
+    let plantagenetCherokee = "Plantagenet Cherokee"
+
+    []
+    let PMingLiU = "PMingLiU"
+
+    []
+    let raavi = "Raavi"
+
+    []
+    let rockwell = "Rockwell"
+
+    []
+    let rockwellExtraBold = "Rockwell Extra Bold"
+
+    []
+    let rockwellNova = "Rockwell Nova"
+
+    []
+    let rockwellNovaCond = "Rockwell Nova Cond"
+
+    []
+    let rockwellNovaExtraBold = "Rockwell Nova Extra Bold"
+
+    []
+    let rod = "Rod"
+
+    []
+    let sakkalMajalla = "Sakkal Majalla"
+
+    []
+    let sanskritText = "Sanskrit Text"
+
+    []
+    let segoeMDL2Assets = "segoeMDL2Assets"
+
+    []
+    let segoePrint = "Segoe Print"
+
+    []
+    let segoeScript = "Segoe Script"
+
+    []
+    let segoeUI = "Segoe UI"
+
+    []
+    let segoeUIEmoji = "Segoe UI Emoji"
+
+    []
+    let segoeUIHistoric = "Segoe UI Historic"
+
+    []
+    let segoeUISymbol = "Segoe UI Symbol"
+
+    []
+    let shonarBangla = "Shonar Bangla"
+
+    []
+    let shruti = "Shruti"
+
+    []
+    let simHei = "SimHei"
+
+    []
+    let simKai = "SimKai"
+
+    []
+    let simplifiedArabic = "Simplified Arabic"
+
+    []
+    let simplifiedChinese = "Simplified Chinese"
+
+    []
+    let simSun = "SimSun"
+
+    []
+    let simSunExtB = "SimSun-ExtB"
+
+    []
+    let sitka = "Sitka"
+
+    []
+    let snellRoundhan = "Snell Roundhan"
+
+    []
+    let stencilStd = "Stencil Std"
+
+    []
+    let sylfaen = "Sylfaen"
+
+    []
+    let symbol = "Symbol"
+
+    []
+    let tahoma = "Tahoma"
+
+    []
+    let thai = "Thai"
+
+    []
+    let timesNewRoman = "Times New Roman"
+
+    []
+    let traditionalArabic = "Traditional Arabic"
+
+    []
+    let traditionalChinese = "Traditional Chinese"
+
+    []
+    let trattatello = "Trattatello"
+
+    []
+    let trebuchetMS = "Trebuchet MS"
+
+    []
+    let udDigiKyokasho = "UD Digi Kyokasho"
+
+    []
+    let udDigiKyokashoNKR = "UD Digi Kyokasho NK-R"
+
+    []
+    let udDigiKyokashoNPR = "UD Digi Kyokasho NP-R"
+
+    []
+    let udDigiKyokashoNR = "UD Digi Kyokasho N-R"
+
+    []
+    let urduTypesetting = "Urdu Typesetting"
+
+    []
+    let urwChancery = "URW Chancery"
+
+    []
+    let utsaah = "Utsaah"
+
+    []
+    let vani = "Vani"
+
+    []
+    let verdana = "Verdana"
+
+    []
+    let verdanaPro = "Verdana Pro"
+
+    []
+    let vijaya = "Vijaya"
+
+    []
+    let vrinda = "Vrinda"
+
+    []
+    let Webdings = "Webdings"
+
+    []
+    let westminster = "Westminster"
+
+    []
+    let wingdings = "Wingdings"
+
+    []
+    let yuGothic = "Yu Gothic"
+
+    []
+    let yuGothicUI = "Yu Gothic UI"
+
+    []
+    let yuMincho = "Yu Mincho"
+
+    []
+    let zapfChancery = "Zapf Chancery"
diff --git a/Fun.Css/Fun.Css.fsproj b/Fun.Css/Fun.Css.fsproj
index 5e35ae1..bce8cdb 100644
--- a/Fun.Css/Fun.Css.fsproj
+++ b/Fun.Css/Fun.Css.fsproj
@@ -13,6 +13,8 @@
 			ILLink.Substitutions.xml
 		
 		
+		
+		
 		
 		
 	

From 2e58c6b63add8224863f42d29e7641956fae58ea Mon Sep 17 00:00:00 2001
From: binwen 
Date: Fri, 28 Aug 2026 11:18:40 +0800
Subject: [PATCH 5/8] Add remaining standard CSS coverage (layout, border,
 mask, typography, table, multi-column, fragmentation, scroll longhands) and
 backgroundSize/transitionProperty overloads

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 Fun.Css.Tests/MiscTests.fs |  154 +++
 Fun.Css/CssBuilder.fs      | 1952 ++++++++++++++++++++++++++++++++++++
 2 files changed, 2106 insertions(+)

diff --git a/Fun.Css.Tests/MiscTests.fs b/Fun.Css.Tests/MiscTests.fs
index 5f13d91..282c345 100644
--- a/Fun.Css.Tests/MiscTests.fs
+++ b/Fun.Css.Tests/MiscTests.fs
@@ -378,3 +378,157 @@ let ``new standard property coverage ops`` () =
         "order: 2; order: var(--order); flex-flow: row wrap; outline: 2px solid red; outline-width: 2.5px; background: url(a.png) no-repeat center / cover; background-attachment: fixed; background-origin: padding-box; background-position-x: left; background-position-y: 10px; font: italic bold 12px/1.5 sans-serif; text-decoration-thickness: 0.1em; text-decoration-skip-ink: none; text-align-last: center; tab-size: 4; overflow-wrap: anywhere; text-rendering: optimizeLegibility; text-size-adjust: 100%; text-orientation: upright; grid-auto-rows: minmax(100px, auto); grid-auto-columns: auto; grid-auto-flow: row dense; grid: auto-flow / 1fr 1fr; list-style: square inside; transition-behavior: allow-discrete; transform-box: fill-box; backface-visibility: hidden; inset: 0px; aspect-ratio: 16 / 9; contain: paint; margin-block-start: 10px; margin-inline-end: var(--margin-end); padding-block-start: 10px; padding-inline-end: 1em; scroll-snap-align: start; scroll-snap-type: x mandatory; scroll-snap-stop: always; scroll-margin: 10px; scroll-padding: 10px; border-top-left-radius: 8px; border-bottom-right-radius: 50%; ",
         actual
     )
+
+[]
+let ``layout coverage ops`` () =
+    let actual =
+        style {
+            clearBoth
+            clear "var(--clear)"
+            objectFitCover
+            objectFit "contain"
+            objectPosition "top right"
+            pointerEventsNone
+            pointerEvents "var(--pe)"
+            touchActionManipulation
+            willChangeTransform
+            overscrollBehaviorContain
+            overscrollBehaviorXNone
+            overscrollBehaviorYAuto
+            isolationIsolate
+            mixBlendModeMultiply
+            mixBlendMode "var(--blend)"
+            overflowBlockHidden
+            overflowInlineAuto
+            content "\"hello\""
+            perspective "500px"
+            perspectiveNone
+            perspectiveOrigin "50% 50%"
+        }
+
+    Assert.Equal(
+        "clear: both; clear: var(--clear); object-fit: cover; object-fit: contain; object-position: top right; pointer-events: none; pointer-events: var(--pe); touch-action: manipulation; will-change: transform; overscroll-behavior: contain; overscroll-behavior-x: none; overscroll-behavior-y: auto; isolation: isolate; mix-blend-mode: multiply; mix-blend-mode: var(--blend); overflow-block: hidden; overflow-inline: auto; content: \"hello\"; perspective: 500px; perspective: none; perspective-origin: 50% 50%; ",
+        actual
+    )
+
+[]
+let ``border and mask coverage ops`` () =
+    let actual =
+        style {
+            borderImage "url(b.png) 30 round"
+            borderImageSource "url(b.png)"
+            borderImageSlice "30"
+            borderImageWidth "10px"
+            borderImageOutset "5px"
+            borderImageRepeatRound
+            borderBlock "1px solid red"
+            borderBlockColor "red"
+            borderBlockStyleDashed
+            borderBlockWidth "2px"
+            borderInline "1px solid blue"
+            borderInlineColor "blue"
+            borderInlineStyleDotted
+            borderInlineWidth "3px"
+            borderBlockStart "1px solid red"
+            borderBlockEnd "1px solid red"
+            borderInlineStart "2px solid blue"
+            borderInlineEnd "2px solid blue"
+            marginTrimBlock
+            mask "url(m.png)"
+            maskImage "url(m.png)"
+            maskSize "cover"
+            maskRepeatNoRepeat
+            maskPosition "center"
+            maskClip "padding-box"
+            maskOrigin "content-box"
+            maskCompositeIntersect
+        }
+
+    Assert.Equal(
+        "border-image: url(b.png) 30 round; border-image-source: url(b.png); border-image-slice: 30; border-image-width: 10px; border-image-outset: 5px; border-image-repeat: round; border-block: 1px solid red; border-block-color: red; border-block-style: dashed; border-block-width: 2px; border-inline: 1px solid blue; border-inline-color: blue; border-inline-style: dotted; border-inline-width: 3px; border-block-start: 1px solid red; border-block-end: 1px solid red; border-inline-start: 2px solid blue; border-inline-end: 2px solid blue; margin-trim: block; mask: url(m.png); mask-image: url(m.png); mask-size: cover; mask-repeat: no-repeat; mask-position: center; mask-clip: padding-box; mask-origin: content-box; mask-composite: intersect; ",
+        actual
+    )
+
+[]
+let ``typography coverage ops`` () =
+    let actual =
+        style {
+            fontSizeAdjust "0.5"
+            fontSizeAdjustFromFont
+            fontSynthesisWeight
+            fontFeatureSettings "\"liga\" 1"
+            fontVariationSettings "\"wght\" 700"
+            fontVariantCapsSmallCaps
+            fontVariantLigaturesCommonLigatures
+            fontVariantNumericTabularNums
+            fontVariantEastAsianSimplified
+            fontVariantAlternatesHistoricalForms
+            fontVariantPositionSub
+            fontVariantEmojiEmoji
+            hyphensAuto
+            wordSpacingNormal
+            lineClamp 3
+            unicodeBidiIsolate
+            colorSchemeDark
+            forcedColorAdjustNone
+        }
+
+    Assert.Equal(
+        "font-size-adjust: 0.5; font-size-adjust: from-font; font-synthesis: weight; font-feature-settings: \"liga\" 1; font-variation-settings: \"wght\" 700; font-variant-caps: small-caps; font-variant-ligatures: common-ligatures; font-variant-numeric: tabular-nums; font-variant-east-asian: simplified; font-variant-alternates: historical-forms; font-variant-position: sub; font-variant-emoji: emoji; hyphens: auto; word-spacing: normal; line-clamp: 3; unicode-bidi: isolate; color-scheme: dark; forced-color-adjust: none; ",
+        actual
+    )
+
+[]
+let ``table list grid and break coverage ops`` () =
+    let actual =
+        style {
+            captionSideBottom
+            counterReset "section"
+            counterIncrement "item 2"
+            counterSet "section 5"
+            columns "auto 3"
+            columnWidthAuto
+            columnCount 3
+            columnFillBalance
+            columnSpanAll
+            columnRule "1px solid gray"
+            columnRuleWidthThin
+            columnRuleStyleSolid
+            columnRuleColor "gray"
+            containIntrinsicSize "300px 200px"
+            containIntrinsicWidth "300px"
+            containIntrinsicHeight "200px"
+            breakBeforePage
+            breakAfterAlways
+            breakInsideAvoid
+            pageBreakBeforeAlways
+            pageBreakAfterAvoid
+            pageBreakInsideAuto
+        }
+
+    Assert.Equal(
+        "caption-side: bottom; counter-reset: section; counter-increment: item 2; counter-set: section 5; columns: auto 3; column-width: auto; column-count: 3; column-fill: balance; column-span: all; column-rule: 1px solid gray; column-rule-width: thin; column-rule-style: solid; column-rule-color: gray; contain-intrinsic-size: 300px 200px; contain-intrinsic-width: 300px; contain-intrinsic-height: 200px; break-before: page; break-after: always; break-inside: avoid; page-break-before: always; page-break-after: avoid; page-break-inside: auto; ",
+        actual
+    )
+
+[]
+let ``scroll longhand and new overload coverage ops`` () =
+    let actual =
+        style {
+            scrollMarginTop "10px"
+            scrollMarginRight "10px"
+            scrollMarginBottom "10px"
+            scrollMarginLeft "10px"
+            scrollPaddingTop "1em"
+            scrollPaddingRight "1em"
+            scrollPaddingBottom "1em"
+            scrollPaddingLeft "1em"
+            backgroundSize 100
+            backgroundSize 50.5
+            transitionProperty [ "opacity"; "transform" ]
+        }
+
+    Assert.Equal(
+        "scroll-margin-top: 10px; scroll-margin-right: 10px; scroll-margin-bottom: 10px; scroll-margin-left: 10px; scroll-padding-top: 1em; scroll-padding-right: 1em; scroll-padding-bottom: 1em; scroll-padding-left: 1em; background-size: 100px; background-size: 50.5px; transition-property: opacity, transform; ",
+        actual
+    )
diff --git a/Fun.Css/CssBuilder.fs b/Fun.Css/CssBuilder.fs
index 5796005..98a3d4b 100644
--- a/Fun.Css/CssBuilder.fs
+++ b/Fun.Css/CssBuilder.fs
@@ -758,6 +758,20 @@ type CssBuilder() =
     member inline _.backgroundSize([] comb: CombineKeyValue, value: string) =
         comb &>> ("background-size", value)
 
+    /// Sets the size of the element's background image (in pixels).
+    ///
+    /// The image can be left to its natural size, stretched, or constrained to fit the available space.
+    []
+    member inline _.backgroundSize([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("background-size", value)
+
+    /// Sets the size of the element's background image (in pixels).
+    ///
+    /// The image can be left to its natural size, stretched, or constrained to fit the available space.
+    []
+    member inline _.backgroundSize([] comb: CombineKeyValue, value: float) =
+        comb &&& mkPxWithKV ("background-size", value)
+
     /// Sets the size of the element's background image.
     ///
     /// The image can be left to its natural size, stretched, or constrained to fit the available space.
@@ -1042,6 +1056,98 @@ type CssBuilder() =
         comb &>> ("background-position-y", value)
 
 
+    /// Shorthand for setting all mask-* properties.
+    []
+    member inline _.mask([] comb: CombineKeyValue, value: string) = comb &>> ("mask", value)
+
+    /// Sets the image used as the mask layer (e.g. url(...) or a gradient).
+    []
+    member inline _.maskImage([] comb: CombineKeyValue, value: string) = comb &>> ("mask-image", value)
+
+    /// Sets the size of the mask image.
+    []
+    member inline _.maskSize([] comb: CombineKeyValue, value: string) = comb &>> ("mask-size", value)
+
+    /// Default. The mask is repeated.
+    []
+    member inline _.maskRepeatRepeat([] comb: CombineKeyValue) = comb &>> ("mask-repeat", "repeat")
+
+    /// The mask is not repeated.
+    []
+    member inline _.maskRepeatNoRepeat([] comb: CombineKeyValue) = comb &>> ("mask-repeat", "no-repeat")
+
+    /// Repeated horizontally only.
+    []
+    member inline _.maskRepeatRepeatX([] comb: CombineKeyValue) = comb &>> ("mask-repeat", "repeat-x")
+
+    /// Repeated vertically only.
+    []
+    member inline _.maskRepeatRepeatY([] comb: CombineKeyValue) = comb &>> ("mask-repeat", "repeat-y")
+
+    /// Sets whether and how the mask image is repeated.
+    []
+    member inline _.maskRepeat([] comb: CombineKeyValue, value: string) =
+        comb &>> ("mask-repeat", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.maskRepeatInitial([] comb: CombineKeyValue) = comb &>> ("mask-repeat", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.maskRepeatInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("mask-repeat", "inherit")
+
+    /// Sets the initial position of the mask image.
+    []
+    member inline _.maskPosition([] comb: CombineKeyValue, value: string) =
+        comb &>> ("mask-position", value)
+
+    /// Determines the area affected by the mask (e.g. "border-box", "padding-box", "content-box").
+    []
+    member inline _.maskClip([] comb: CombineKeyValue, value: string) = comb &>> ("mask-clip", value)
+
+    /// Sets the origin of the mask (e.g. "border-box", "padding-box", "content-box").
+    []
+    member inline _.maskOrigin([] comb: CombineKeyValue, value: string) =
+        comb &>> ("mask-origin", value)
+
+    /// Default. Mask layers are added.
+    []
+    member inline _.maskCompositeAdd([] comb: CombineKeyValue) = comb &>> ("mask-composite", "add")
+
+    /// Mask layers are subtracted.
+    []
+    member inline _.maskCompositeSubtract([] comb: CombineKeyValue) =
+        comb &>> ("mask-composite", "subtract")
+
+    /// Mask layers are intersected.
+    []
+    member inline _.maskCompositeIntersect([] comb: CombineKeyValue) =
+        comb &>> ("mask-composite", "intersect")
+
+    /// Mask layers are excluded (XOR).
+    []
+    member inline _.maskCompositeExclude([] comb: CombineKeyValue) =
+        comb &>> ("mask-composite", "exclude")
+
+    /// Sets how multiple mask layers are composited together.
+    []
+    member inline _.maskComposite([] comb: CombineKeyValue, value: string) =
+        comb &>> ("mask-composite", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.maskCompositeInitial([] comb: CombineKeyValue) =
+        comb &>> ("mask-composite", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.maskCompositeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("mask-composite", "inherit")
+
+
+
 
 
     // --------------------------------------------------------------------
@@ -1513,6 +1619,198 @@ type CssBuilder() =
         comb &&& mkPxWithKV ("border-bottom-left-radius", value)
 
 
+    /// Shorthand for setting all border-image-* properties (source, slice, width, outset, repeat).
+    []
+    member inline _.borderImage([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-image", value)
+
+    /// Sets the source image used to create an element's border image (e.g. url(...) or a gradient).
+    []
+    member inline _.borderImageSource([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-image-source", value)
+
+    /// Divides the border image into regions (e.g. "30", "30% fill").
+    []
+    member inline _.borderImageSlice([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-image-slice", value)
+
+    /// Sets the width of the border image (e.g. "1", "10px").
+    []
+    member inline _.borderImageWidth([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-image-width", value)
+
+    /// Sets the distance by which the border image is set out from the border box.
+    []
+    member inline _.borderImageOutset([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-image-outset", value)
+
+    /// Default. The region is stretched to fill the gap.
+    []
+    member inline _.borderImageRepeatStretch([] comb: CombineKeyValue) =
+        comb &>> ("border-image-repeat", "stretch")
+
+    /// The region is tiled to fill the gap.
+    []
+    member inline _.borderImageRepeatRepeat([] comb: CombineKeyValue) =
+        comb &>> ("border-image-repeat", "repeat")
+
+    /// The region is tiled and rescaled to fill the gap with a whole number of tiles.
+    []
+    member inline _.borderImageRepeatRound([] comb: CombineKeyValue) =
+        comb &>> ("border-image-repeat", "round")
+
+    /// The region is tiled with extra space distributed between tiles.
+    []
+    member inline _.borderImageRepeatSpace([] comb: CombineKeyValue) =
+        comb &>> ("border-image-repeat", "space")
+
+    /// Defines how the edge regions of the border image are scaled and tiled.
+    []
+    member inline _.borderImageRepeat([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-image-repeat", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.borderImageRepeatInitial([] comb: CombineKeyValue) =
+        comb &>> ("border-image-repeat", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.borderImageRepeatInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("border-image-repeat", "inherit")
+
+    /// Shorthand for setting the block-start and block-end borders (width, style, color).
+    []
+    member inline _.borderBlock([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-block", value)
+
+    /// Sets the color of the block-start and block-end borders.
+    []
+    member inline _.borderBlockColor([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-block-color", value)
+
+    /// No border.
+    []
+    member inline _.borderBlockStyleNone([] comb: CombineKeyValue) =
+        comb &>> ("border-block-style", "none")
+
+    /// A solid line.
+    []
+    member inline _.borderBlockStyleSolid([] comb: CombineKeyValue) =
+        comb &>> ("border-block-style", "solid")
+
+    /// A dashed line.
+    []
+    member inline _.borderBlockStyleDashed([] comb: CombineKeyValue) =
+        comb &>> ("border-block-style", "dashed")
+
+    /// A dotted line.
+    []
+    member inline _.borderBlockStyleDotted([] comb: CombineKeyValue) =
+        comb &>> ("border-block-style", "dotted")
+
+    /// A double line.
+    []
+    member inline _.borderBlockStyleDouble([] comb: CombineKeyValue) =
+        comb &>> ("border-block-style", "double")
+
+    /// Sets the style of the block-start and block-end borders.
+    []
+    member inline _.borderBlockStyle([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-block-style", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.borderBlockStyleInitial([] comb: CombineKeyValue) =
+        comb &>> ("border-block-style", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.borderBlockStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("border-block-style", "inherit")
+
+    /// Sets the width of the block-start and block-end borders.
+    []
+    member inline _.borderBlockWidth([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-block-width", value)
+
+    /// Shorthand for setting the inline-start and inline-end borders (width, style, color).
+    []
+    member inline _.borderInline([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-inline", value)
+
+    /// Sets the color of the inline-start and inline-end borders.
+    []
+    member inline _.borderInlineColor([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-inline-color", value)
+
+    /// No border.
+    []
+    member inline _.borderInlineStyleNone([] comb: CombineKeyValue) =
+        comb &>> ("border-inline-style", "none")
+
+    /// A solid line.
+    []
+    member inline _.borderInlineStyleSolid([] comb: CombineKeyValue) =
+        comb &>> ("border-inline-style", "solid")
+
+    /// A dashed line.
+    []
+    member inline _.borderInlineStyleDashed([] comb: CombineKeyValue) =
+        comb &>> ("border-inline-style", "dashed")
+
+    /// A dotted line.
+    []
+    member inline _.borderInlineStyleDotted([] comb: CombineKeyValue) =
+        comb &>> ("border-inline-style", "dotted")
+
+    /// A double line.
+    []
+    member inline _.borderInlineStyleDouble([] comb: CombineKeyValue) =
+        comb &>> ("border-inline-style", "double")
+
+    /// Sets the style of the inline-start and inline-end borders.
+    []
+    member inline _.borderInlineStyle([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-inline-style", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.borderInlineStyleInitial([] comb: CombineKeyValue) =
+        comb &>> ("border-inline-style", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.borderInlineStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("border-inline-style", "inherit")
+
+    /// Sets the width of the inline-start and inline-end borders.
+    []
+    member inline _.borderInlineWidth([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-inline-width", value)
+
+    /// Shorthand for setting the block-start border (width, style, color).
+    []
+    member inline _.borderBlockStart([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-block-start", value)
+
+    /// Shorthand for setting the block-end border (width, style, color).
+    []
+    member inline _.borderBlockEnd([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-block-end", value)
+
+    /// Shorthand for setting the inline-start border (width, style, color).
+    []
+    member inline _.borderInlineStart([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-inline-start", value)
+
+    /// Shorthand for setting the inline-end border (width, style, color).
+    []
+    member inline _.borderInlineEnd([] comb: CombineKeyValue, value: string) =
+        comb &>> ("border-inline-end", value)
+
+
+
 
 
     // --------------------------------------------------------------------
@@ -1725,6 +2023,34 @@ type CssBuilder() =
         comb &>> ("padding-top", value)
 
 
+    /// Default. Margins are not trimmed.
+    []
+    member inline _.marginTrimNone([] comb: CombineKeyValue) = comb &>> ("margin-trim", "none")
+
+    /// Trim block-axis margins adjoining the box.
+    []
+    member inline _.marginTrimBlock([] comb: CombineKeyValue) = comb &>> ("margin-trim", "block")
+
+    /// Trim inline-axis margins adjoining the box.
+    []
+    member inline _.marginTrimInline([] comb: CombineKeyValue) = comb &>> ("margin-trim", "inline")
+
+    /// Controls whether the margins of a box's children are trimmed when they adjoin the box's edges.
+    []
+    member inline _.marginTrim([] comb: CombineKeyValue, value: string) =
+        comb &>> ("margin-trim", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.marginTrimInitial([] comb: CombineKeyValue) = comb &>> ("margin-trim", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.marginTrimInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("margin-trim", "inherit")
+
+
+
 
 
     // --------------------------------------------------------------------
@@ -2824,6 +3150,194 @@ type CssBuilder() =
     member inline _.grid([] comb: CombineKeyValue, value: string) = comb &>> ("grid", value)
 
 
+    /// Shorthand for column-width and column-count (multi-column layout).
+    []
+    member inline _.columns([] comb: CombineKeyValue, value: string) = comb &>> ("columns", value)
+
+    /// Default. The width is determined by other properties (column-count).
+    []
+    member inline _.columnWidthAuto([] comb: CombineKeyValue) = comb &>> ("column-width", "auto")
+
+    /// Sets the ideal column width in a multi-column layout. Also accepts a length via the string overload.
+    []
+    member inline _.columnWidth([] comb: CombineKeyValue, value: string) =
+        comb &>> ("column-width", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.columnWidthInitial([] comb: CombineKeyValue) = comb &>> ("column-width", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.columnWidthInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("column-width", "inherit")
+
+    /// Sets the number of columns in a multi-column layout.
+    []
+    member inline _.columnCount([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("column-count", value)
+
+    /// Sets the number of columns in a multi-column layout.
+    []
+    member inline _.columnCount([] comb: CombineKeyValue, value: float) =
+        comb &&& mkWithKV ("column-count", value)
+
+    /// Sets the number of columns in a multi-column layout.
+    []
+    member inline _.columnCount([] comb: CombineKeyValue, value: string) =
+        comb &>> ("column-count", value)
+
+    /// Default. Content is balanced between columns.
+    []
+    member inline _.columnFillBalance([] comb: CombineKeyValue) = comb &>> ("column-fill", "balance")
+
+    /// Columns are filled sequentially.
+    []
+    member inline _.columnFillAuto([] comb: CombineKeyValue) = comb &>> ("column-fill", "auto")
+
+    /// Controls how content is partitioned into columns.
+    []
+    member inline _.columnFill([] comb: CombineKeyValue, value: string) =
+        comb &>> ("column-fill", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.columnFillInitial([] comb: CombineKeyValue) = comb &>> ("column-fill", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.columnFillInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("column-fill", "inherit")
+
+    /// Default. The element does not span.
+    []
+    member inline _.columnSpanNone([] comb: CombineKeyValue) = comb &>> ("column-span", "none")
+
+    /// The element spans across all columns.
+    []
+    member inline _.columnSpanAll([] comb: CombineKeyValue) = comb &>> ("column-span", "all")
+
+    /// Makes an element span across all columns.
+    []
+    member inline _.columnSpan([] comb: CombineKeyValue, value: string) =
+        comb &>> ("column-span", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.columnSpanInitial([] comb: CombineKeyValue) = comb &>> ("column-span", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.columnSpanInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("column-span", "inherit")
+
+    /// Shorthand for column-rule-width, column-rule-style, and column-rule-color.
+    []
+    member inline _.columnRule([] comb: CombineKeyValue, value: string) =
+        comb &>> ("column-rule", value)
+
+    /// A thin rule.
+    []
+    member inline _.columnRuleWidthThin([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-width", "thin")
+
+    /// Default. A medium rule.
+    []
+    member inline _.columnRuleWidthMedium([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-width", "medium")
+
+    /// A thick rule.
+    []
+    member inline _.columnRuleWidthThick([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-width", "thick")
+
+    /// Sets the width of the rule between columns. Also accepts a length via the string overload.
+    []
+    member inline _.columnRuleWidth([] comb: CombineKeyValue, value: string) =
+        comb &>> ("column-rule-width", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.columnRuleWidthInitial([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-width", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.columnRuleWidthInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-width", "inherit")
+
+    /// Default. No rule.
+    []
+    member inline _.columnRuleStyleNone([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-style", "none")
+
+    /// A hidden rule.
+    []
+    member inline _.columnRuleStyleHidden([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-style", "hidden")
+
+    /// A dotted rule.
+    []
+    member inline _.columnRuleStyleDotted([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-style", "dotted")
+
+    /// A dashed rule.
+    []
+    member inline _.columnRuleStyleDashed([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-style", "dashed")
+
+    /// A solid rule.
+    []
+    member inline _.columnRuleStyleSolid([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-style", "solid")
+
+    /// A double rule.
+    []
+    member inline _.columnRuleStyleDouble([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-style", "double")
+
+    /// A grooved rule.
+    []
+    member inline _.columnRuleStyleGroove([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-style", "groove")
+
+    /// A ridged rule.
+    []
+    member inline _.columnRuleStyleRidge([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-style", "ridge")
+
+    /// An inset rule.
+    []
+    member inline _.columnRuleStyleInset([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-style", "inset")
+
+    /// An outset rule.
+    []
+    member inline _.columnRuleStyleOutset([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-style", "outset")
+
+    /// Sets the style of the rule between columns.
+    []
+    member inline _.columnRuleStyle([] comb: CombineKeyValue, value: string) =
+        comb &>> ("column-rule-style", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.columnRuleStyleInitial([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-style", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.columnRuleStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("column-rule-style", "inherit")
+
+    /// Sets the color of the rule between columns.
+    []
+    member inline _.columnRuleColor([] comb: CombineKeyValue, value: string) =
+        comb &>> ("column-rule-color", value)
+
+
+
 
 
     // --------------------------------------------------------------------
@@ -3782,6 +4296,813 @@ type CssBuilder() =
         comb &>> ("scroll-padding", value)
 
 
+    /// Default. The element is not moved below floating elements.
+    []
+    member inline _.clearNone([] comb: CombineKeyValue) = comb &>> ("clear", "none")
+
+    /// The element is moved below left-floating elements.
+    []
+    member inline _.clearLeft([] comb: CombineKeyValue) = comb &>> ("clear", "left")
+
+    /// The element is moved below right-floating elements.
+    []
+    member inline _.clearRight([] comb: CombineKeyValue) = comb &>> ("clear", "right")
+
+    /// The element is moved below both left and right-floating elements.
+    []
+    member inline _.clearBoth([] comb: CombineKeyValue) = comb &>> ("clear", "both")
+
+    /// The element is moved below floats on the inline-start side.
+    []
+    member inline _.clearInlineStart([] comb: CombineKeyValue) = comb &>> ("clear", "inline-start")
+
+    /// The element is moved below floats on the inline-end side.
+    []
+    member inline _.clearInlineEnd([] comb: CombineKeyValue) = comb &>> ("clear", "inline-end")
+
+    /// Sets whether an element must be moved below (cleared) floating elements that precede it.
+    []
+    member inline _.clear([] comb: CombineKeyValue, value: string) = comb &>> ("clear", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.clearInitial([] comb: CombineKeyValue) = comb &>> ("clear", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.clearInheritFromParent([] comb: CombineKeyValue) = comb &>> ("clear", "inherit")
+
+    /// Default. The content is sized to fill the element's content box, stretching if necessary.
+    []
+    member inline _.objectFitFill([] comb: CombineKeyValue) = comb &>> ("object-fit", "fill")
+
+    /// The content is scaled to maintain its aspect ratio while fitting within the content box.
+    []
+    member inline _.objectFitContain([] comb: CombineKeyValue) = comb &>> ("object-fit", "contain")
+
+    /// The content is sized to maintain its aspect ratio while filling the entire content box, clipping to fit.
+    []
+    member inline _.objectFitCover([] comb: CombineKeyValue) = comb &>> ("object-fit", "cover")
+
+    /// The content is not resized.
+    []
+    member inline _.objectFitNone([] comb: CombineKeyValue) = comb &>> ("object-fit", "none")
+
+    /// The content is sized as if none or contain were specified, whichever results in a smaller concrete object size.
+    []
+    member inline _.objectFitScaleDown([] comb: CombineKeyValue) = comb &>> ("object-fit", "scale-down")
+
+    /// Sets how the content of a replaced element (e.g. img or video) should be resized to fit its container.
+    []
+    member inline _.objectFit([] comb: CombineKeyValue, value: string) = comb &>> ("object-fit", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.objectFitInitial([] comb: CombineKeyValue) = comb &>> ("object-fit", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.objectFitInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("object-fit", "inherit")
+
+    /// Specifies the alignment of a replaced element's contents within the element's box (e.g. "50% 50%", "top right").
+    []
+    member inline _.objectPosition([] comb: CombineKeyValue, value: string) =
+        comb &>> ("object-position", value)
+
+    /// Default. The element behaves as it would if pointer-events were not specified.
+    []
+    member inline _.pointerEventsAuto([] comb: CombineKeyValue) = comb &>> ("pointer-events", "auto")
+
+    /// The element is never the target of pointer events.
+    []
+    member inline _.pointerEventsNone([] comb: CombineKeyValue) = comb &>> ("pointer-events", "none")
+
+    /// Sets under what circumstances an element can become the target of pointer events.
+    []
+    member inline _.pointerEvents([] comb: CombineKeyValue, value: string) =
+        comb &>> ("pointer-events", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.pointerEventsInitial([] comb: CombineKeyValue) =
+        comb &>> ("pointer-events", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.pointerEventsInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("pointer-events", "inherit")
+
+    /// Default. Enable all touch behaviors.
+    []
+    member inline _.touchActionAuto([] comb: CombineKeyValue) = comb &>> ("touch-action", "auto")
+
+    /// Disable all touch behaviors.
+    []
+    member inline _.touchActionNone([] comb: CombineKeyValue) = comb &>> ("touch-action", "none")
+
+    /// Enable horizontal single-finger panning.
+    []
+    member inline _.touchActionPanX([] comb: CombineKeyValue) = comb &>> ("touch-action", "pan-x")
+
+    /// Enable vertical single-finger panning.
+    []
+    member inline _.touchActionPanY([] comb: CombineKeyValue) = comb &>> ("touch-action", "pan-y")
+
+    /// Enable panning and pinch-zoom, but disable double-tap zooming.
+    []
+    member inline _.touchActionManipulation([] comb: CombineKeyValue) =
+        comb &>> ("touch-action", "manipulation")
+
+    /// Sets how an element's region can be manipulated by a touchscreen user (e.g. panning, zooming).
+    []
+    member inline _.touchAction([] comb: CombineKeyValue, value: string) =
+        comb &>> ("touch-action", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.touchActionInitial([] comb: CombineKeyValue) = comb &>> ("touch-action", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.touchActionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("touch-action", "inherit")
+
+    /// Default. No particular optimization is expressed.
+    []
+    member inline _.willChangeAuto([] comb: CombineKeyValue) = comb &>> ("will-change", "auto")
+
+    /// The element's scroll position is expected to change.
+    []
+    member inline _.willChangeScrollPosition([] comb: CombineKeyValue) =
+        comb &>> ("will-change", "scroll-position")
+
+    /// The element's contents are expected to change.
+    []
+    member inline _.willChangeContents([] comb: CombineKeyValue) = comb &>> ("will-change", "contents")
+
+    /// The element's transform is expected to change.
+    []
+    member inline _.willChangeTransform([] comb: CombineKeyValue) =
+        comb &>> ("will-change", "transform")
+
+    /// The element's opacity is expected to change.
+    []
+    member inline _.willChangeOpacity([] comb: CombineKeyValue) = comb &>> ("will-change", "opacity")
+
+    /// Hints to the browser how an element is expected to change, so it can optimize ahead of time.
+    []
+    member inline _.willChange([] comb: CombineKeyValue, value: string) =
+        comb &>> ("will-change", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.willChangeInitial([] comb: CombineKeyValue) = comb &>> ("will-change", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.willChangeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("will-change", "inherit")
+
+    /// Default. The default scroll overflow behavior occurs.
+    []
+    member inline _.overscrollBehaviorAuto([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior", "auto")
+
+    /// No scroll chaining to neighboring scrolling areas.
+    []
+    member inline _.overscrollBehaviorContain([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior", "contain")
+
+    /// No scroll chaining and no default affordances (e.g. pull-to-refresh).
+    []
+    member inline _.overscrollBehaviorNone([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior", "none")
+
+    /// Sets what a browser does when reaching the boundary of a scrolling area (shorthand for overscroll-behavior-x/y).
+    []
+    member inline _.overscrollBehavior([] comb: CombineKeyValue, value: string) =
+        comb &>> ("overscroll-behavior", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.overscrollBehaviorInitial([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.overscrollBehaviorInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior", "inherit")
+
+    /// Default.
+    []
+    member inline _.overscrollBehaviorXAuto([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior-x", "auto")
+
+    /// No scroll chaining horizontally.
+    []
+    member inline _.overscrollBehaviorXContain([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior-x", "contain")
+
+    /// No scroll chaining or affordances horizontally.
+    []
+    member inline _.overscrollBehaviorXNone([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior-x", "none")
+
+    /// Sets the browser's behavior when the horizontal boundary of a scrolling area is reached.
+    []
+    member inline _.overscrollBehaviorX([] comb: CombineKeyValue, value: string) =
+        comb &>> ("overscroll-behavior-x", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.overscrollBehaviorXInitial([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior-x", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.overscrollBehaviorXInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior-x", "inherit")
+
+    /// Default.
+    []
+    member inline _.overscrollBehaviorYAuto([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior-y", "auto")
+
+    /// No scroll chaining vertically.
+    []
+    member inline _.overscrollBehaviorYContain([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior-y", "contain")
+
+    /// No scroll chaining or affordances vertically.
+    []
+    member inline _.overscrollBehaviorYNone([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior-y", "none")
+
+    /// Sets the browser's behavior when the vertical boundary of a scrolling area is reached.
+    []
+    member inline _.overscrollBehaviorY([] comb: CombineKeyValue, value: string) =
+        comb &>> ("overscroll-behavior-y", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.overscrollBehaviorYInitial([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior-y", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.overscrollBehaviorYInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("overscroll-behavior-y", "inherit")
+
+    /// Default. A new stacking context is created only if needed.
+    []
+    member inline _.isolationAuto([] comb: CombineKeyValue) = comb &>> ("isolation", "auto")
+
+    /// The element creates a new stacking context.
+    []
+    member inline _.isolationIsolate([] comb: CombineKeyValue) = comb &>> ("isolation", "isolate")
+
+    /// Determines whether an element must create a new stacking context.
+    []
+    member inline _.isolation([] comb: CombineKeyValue, value: string) = comb &>> ("isolation", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.isolationInitial([] comb: CombineKeyValue) = comb &>> ("isolation", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.isolationInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("isolation", "inherit")
+
+    /// Default. No blending.
+    []
+    member inline _.mixBlendModeNormal([] comb: CombineKeyValue) = comb &>> ("mix-blend-mode", "normal")
+
+    /// Multiply blend.
+    []
+    member inline _.mixBlendModeMultiply([] comb: CombineKeyValue) =
+        comb &>> ("mix-blend-mode", "multiply")
+
+    /// Screen blend.
+    []
+    member inline _.mixBlendModeScreen([] comb: CombineKeyValue) = comb &>> ("mix-blend-mode", "screen")
+
+    /// Overlay blend.
+    []
+    member inline _.mixBlendModeOverlay([] comb: CombineKeyValue) =
+        comb &>> ("mix-blend-mode", "overlay")
+
+    /// Darken blend.
+    []
+    member inline _.mixBlendModeDarken([] comb: CombineKeyValue) = comb &>> ("mix-blend-mode", "darken")
+
+    /// Lighten blend.
+    []
+    member inline _.mixBlendModeLighten([] comb: CombineKeyValue) =
+        comb &>> ("mix-blend-mode", "lighten")
+
+    /// Color-dodge blend.
+    []
+    member inline _.mixBlendModeColorDodge([] comb: CombineKeyValue) =
+        comb &>> ("mix-blend-mode", "color-dodge")
+
+    /// Color-burn blend.
+    []
+    member inline _.mixBlendModeColorBurn([] comb: CombineKeyValue) =
+        comb &>> ("mix-blend-mode", "color-burn")
+
+    /// Hard-light blend.
+    []
+    member inline _.mixBlendModeHardLight([] comb: CombineKeyValue) =
+        comb &>> ("mix-blend-mode", "hard-light")
+
+    /// Soft-light blend.
+    []
+    member inline _.mixBlendModeSoftLight([] comb: CombineKeyValue) =
+        comb &>> ("mix-blend-mode", "soft-light")
+
+    /// Difference blend.
+    []
+    member inline _.mixBlendModeDifference([] comb: CombineKeyValue) =
+        comb &>> ("mix-blend-mode", "difference")
+
+    /// Exclusion blend.
+    []
+    member inline _.mixBlendModeExclusion([] comb: CombineKeyValue) =
+        comb &>> ("mix-blend-mode", "exclusion")
+
+    /// Hue blend.
+    []
+    member inline _.mixBlendModeHue([] comb: CombineKeyValue) = comb &>> ("mix-blend-mode", "hue")
+
+    /// Saturation blend.
+    []
+    member inline _.mixBlendModeSaturation([] comb: CombineKeyValue) =
+        comb &>> ("mix-blend-mode", "saturation")
+
+    /// Color blend.
+    []
+    member inline _.mixBlendModeColor([] comb: CombineKeyValue) = comb &>> ("mix-blend-mode", "color")
+
+    /// Luminosity blend.
+    []
+    member inline _.mixBlendModeLuminosity([] comb: CombineKeyValue) =
+        comb &>> ("mix-blend-mode", "luminosity")
+
+    /// Sets how an element's content should blend with the content of the element's parent and background.
+    []
+    member inline _.mixBlendMode([] comb: CombineKeyValue, value: string) =
+        comb &>> ("mix-blend-mode", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.mixBlendModeInitial([] comb: CombineKeyValue) =
+        comb &>> ("mix-blend-mode", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.mixBlendModeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("mix-blend-mode", "inherit")
+
+    /// Default. Content is not clipped.
+    []
+    member inline _.overflowBlockVisible([] comb: CombineKeyValue) =
+        comb &>> ("overflow-block", "visible")
+
+    /// Content is clipped.
+    []
+    member inline _.overflowBlockHidden([] comb: CombineKeyValue) =
+        comb &>> ("overflow-block", "hidden")
+
+    /// A scrollbar is always shown.
+    []
+    member inline _.overflowBlockScroll([] comb: CombineKeyValue) =
+        comb &>> ("overflow-block", "scroll")
+
+    /// A scrollbar is shown only when needed.
+    []
+    member inline _.overflowBlockAuto([] comb: CombineKeyValue) = comb &>> ("overflow-block", "auto")
+
+    /// Sets what shows when content overflows the block-start and block-end edges of a box.
+    []
+    member inline _.overflowBlock([] comb: CombineKeyValue, value: string) =
+        comb &>> ("overflow-block", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.overflowBlockInitial([] comb: CombineKeyValue) =
+        comb &>> ("overflow-block", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.overflowBlockInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("overflow-block", "inherit")
+
+    /// Default. Content is not clipped.
+    []
+    member inline _.overflowInlineVisible([] comb: CombineKeyValue) =
+        comb &>> ("overflow-inline", "visible")
+
+    /// Content is clipped.
+    []
+    member inline _.overflowInlineHidden([] comb: CombineKeyValue) =
+        comb &>> ("overflow-inline", "hidden")
+
+    /// A scrollbar is always shown.
+    []
+    member inline _.overflowInlineScroll([] comb: CombineKeyValue) =
+        comb &>> ("overflow-inline", "scroll")
+
+    /// A scrollbar is shown only when needed.
+    []
+    member inline _.overflowInlineAuto([] comb: CombineKeyValue) = comb &>> ("overflow-inline", "auto")
+
+    /// Sets what shows when content overflows the inline-start and inline-end edges of a box.
+    []
+    member inline _.overflowInline([] comb: CombineKeyValue, value: string) =
+        comb &>> ("overflow-inline", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.overflowInlineInitial([] comb: CombineKeyValue) =
+        comb &>> ("overflow-inline", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.overflowInlineInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("overflow-inline", "inherit")
+
+    /// Generates content for a pseudo-element or replaces an element's content (e.g. "normal", "none", a quoted string, or a counter).
+    []
+    member inline _.content([] comb: CombineKeyValue, value: string) = comb &>> ("content", value)
+
+    /// Default. No perspective transform is applied.
+    []
+    member inline _.perspectiveNone([] comb: CombineKeyValue) = comb &>> ("perspective", "none")
+
+    /// Determines the distance between the z=0 plane and the user to give a 3D-positioned element some perspective. Also accepts a length (use the string overload, e.g. "500px").
+    []
+    member inline _.perspective([] comb: CombineKeyValue, value: string) =
+        comb &>> ("perspective", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.perspectiveInitial([] comb: CombineKeyValue) = comb &>> ("perspective", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.perspectiveInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("perspective", "inherit")
+
+    /// Determines the position at which the viewer is looking (the vanishing point for the perspective property, e.g. "50% 50%").
+    []
+    member inline _.perspectiveOrigin([] comb: CombineKeyValue, value: string) =
+        comb &>> ("perspective-origin", value)
+
+    /// Sets the intrinsic size used when an element is subject to size containment (shorthand).
+    []
+    member inline _.containIntrinsicSize([] comb: CombineKeyValue, value: string) =
+        comb &>> ("contain-intrinsic-size", value)
+
+    /// Sets the intrinsic width used when an element is subject to size containment.
+    []
+    member inline _.containIntrinsicWidth([] comb: CombineKeyValue, value: string) =
+        comb &>> ("contain-intrinsic-width", value)
+
+    /// Sets the intrinsic height used when an element is subject to size containment.
+    []
+    member inline _.containIntrinsicHeight([] comb: CombineKeyValue, value: string) =
+        comb &>> ("contain-intrinsic-height", value)
+
+    /// Default.
+    []
+    member inline _.breakBeforeAuto([] comb: CombineKeyValue) = comb &>> ("break-before", "auto")
+
+    /// Avoid any break before.
+    []
+    member inline _.breakBeforeAvoid([] comb: CombineKeyValue) = comb &>> ("break-before", "avoid")
+
+    /// Always break before.
+    []
+    member inline _.breakBeforeAlways([] comb: CombineKeyValue) = comb &>> ("break-before", "always")
+
+    /// Force breaks through all fragmentation contexts.
+    []
+    member inline _.breakBeforeAll([] comb: CombineKeyValue) = comb &>> ("break-before", "all")
+
+    /// Avoid a page break before.
+    []
+    member inline _.breakBeforeAvoidPage([] comb: CombineKeyValue) =
+        comb &>> ("break-before", "avoid-page")
+
+    /// Force a page break before.
+    []
+    member inline _.breakBeforePage([] comb: CombineKeyValue) = comb &>> ("break-before", "page")
+
+    /// Force one or two page breaks so the next page is a left page.
+    []
+    member inline _.breakBeforeLeft([] comb: CombineKeyValue) = comb &>> ("break-before", "left")
+
+    /// Force one or two page breaks so the next page is a right page.
+    []
+    member inline _.breakBeforeRight([] comb: CombineKeyValue) = comb &>> ("break-before", "right")
+
+    /// Force breaks so the next page is a recto page.
+    []
+    member inline _.breakBeforeRecto([] comb: CombineKeyValue) = comb &>> ("break-before", "recto")
+
+    /// Force breaks so the next page is a verso page.
+    []
+    member inline _.breakBeforeVerso([] comb: CombineKeyValue) = comb &>> ("break-before", "verso")
+
+    /// Avoid a column break before.
+    []
+    member inline _.breakBeforeAvoidColumn([] comb: CombineKeyValue) =
+        comb &>> ("break-before", "avoid-column")
+
+    /// Force a column break before.
+    []
+    member inline _.breakBeforeColumn([] comb: CombineKeyValue) = comb &>> ("break-before", "column")
+
+    /// Avoid a region break before.
+    []
+    member inline _.breakBeforeAvoidRegion([] comb: CombineKeyValue) =
+        comb &>> ("break-before", "avoid-region")
+
+    /// Force a region break before.
+    []
+    member inline _.breakBeforeRegion([] comb: CombineKeyValue) = comb &>> ("break-before", "region")
+
+    /// Sets how page, column, or region breaks should occur before the generated box.
+    []
+    member inline _.breakBefore([] comb: CombineKeyValue, value: string) =
+        comb &>> ("break-before", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.breakBeforeInitial([] comb: CombineKeyValue) = comb &>> ("break-before", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.breakBeforeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("break-before", "inherit")
+
+    /// Default.
+    []
+    member inline _.breakAfterAuto([] comb: CombineKeyValue) = comb &>> ("break-after", "auto")
+
+    /// Avoid any break after.
+    []
+    member inline _.breakAfterAvoid([] comb: CombineKeyValue) = comb &>> ("break-after", "avoid")
+
+    /// Always break after.
+    []
+    member inline _.breakAfterAlways([] comb: CombineKeyValue) = comb &>> ("break-after", "always")
+
+    /// Force breaks through all fragmentation contexts.
+    []
+    member inline _.breakAfterAll([] comb: CombineKeyValue) = comb &>> ("break-after", "all")
+
+    /// Avoid a page break after.
+    []
+    member inline _.breakAfterAvoidPage([] comb: CombineKeyValue) =
+        comb &>> ("break-after", "avoid-page")
+
+    /// Force a page break after.
+    []
+    member inline _.breakAfterPage([] comb: CombineKeyValue) = comb &>> ("break-after", "page")
+
+    /// Force breaks so the next page is a left page.
+    []
+    member inline _.breakAfterLeft([] comb: CombineKeyValue) = comb &>> ("break-after", "left")
+
+    /// Force breaks so the next page is a right page.
+    []
+    member inline _.breakAfterRight([] comb: CombineKeyValue) = comb &>> ("break-after", "right")
+
+    /// Force breaks so the next page is a recto page.
+    []
+    member inline _.breakAfterRecto([] comb: CombineKeyValue) = comb &>> ("break-after", "recto")
+
+    /// Force breaks so the next page is a verso page.
+    []
+    member inline _.breakAfterVerso([] comb: CombineKeyValue) = comb &>> ("break-after", "verso")
+
+    /// Avoid a column break after.
+    []
+    member inline _.breakAfterAvoidColumn([] comb: CombineKeyValue) =
+        comb &>> ("break-after", "avoid-column")
+
+    /// Force a column break after.
+    []
+    member inline _.breakAfterColumn([] comb: CombineKeyValue) = comb &>> ("break-after", "column")
+
+    /// Avoid a region break after.
+    []
+    member inline _.breakAfterAvoidRegion([] comb: CombineKeyValue) =
+        comb &>> ("break-after", "avoid-region")
+
+    /// Force a region break after.
+    []
+    member inline _.breakAfterRegion([] comb: CombineKeyValue) = comb &>> ("break-after", "region")
+
+    /// Sets how page, column, or region breaks should occur after the generated box.
+    []
+    member inline _.breakAfter([] comb: CombineKeyValue, value: string) =
+        comb &>> ("break-after", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.breakAfterInitial([] comb: CombineKeyValue) = comb &>> ("break-after", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.breakAfterInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("break-after", "inherit")
+
+    /// Default.
+    []
+    member inline _.breakInsideAuto([] comb: CombineKeyValue) = comb &>> ("break-inside", "auto")
+
+    /// Avoid any break inside.
+    []
+    member inline _.breakInsideAvoid([] comb: CombineKeyValue) = comb &>> ("break-inside", "avoid")
+
+    /// Avoid a page break inside.
+    []
+    member inline _.breakInsideAvoidPage([] comb: CombineKeyValue) =
+        comb &>> ("break-inside", "avoid-page")
+
+    /// Avoid a column break inside.
+    []
+    member inline _.breakInsideAvoidColumn([] comb: CombineKeyValue) =
+        comb &>> ("break-inside", "avoid-column")
+
+    /// Avoid a region break inside.
+    []
+    member inline _.breakInsideAvoidRegion([] comb: CombineKeyValue) =
+        comb &>> ("break-inside", "avoid-region")
+
+    /// Sets how page, column, or region breaks should occur inside the generated box.
+    []
+    member inline _.breakInside([] comb: CombineKeyValue, value: string) =
+        comb &>> ("break-inside", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.breakInsideInitial([] comb: CombineKeyValue) = comb &>> ("break-inside", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.breakInsideInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("break-inside", "inherit")
+
+    /// Default.
+    []
+    member inline _.pageBreakBeforeAuto([] comb: CombineKeyValue) =
+        comb &>> ("page-break-before", "auto")
+
+    /// Always break before.
+    []
+    member inline _.pageBreakBeforeAlways([] comb: CombineKeyValue) =
+        comb &>> ("page-break-before", "always")
+
+    /// Avoid a page break before.
+    []
+    member inline _.pageBreakBeforeAvoid([] comb: CombineKeyValue) =
+        comb &>> ("page-break-before", "avoid")
+
+    /// Force breaks so the next page is a left page.
+    []
+    member inline _.pageBreakBeforeLeft([] comb: CombineKeyValue) =
+        comb &>> ("page-break-before", "left")
+
+    /// Force breaks so the next page is a right page.
+    []
+    member inline _.pageBreakBeforeRight([] comb: CombineKeyValue) =
+        comb &>> ("page-break-before", "right")
+
+    /// Legacy alias of break-before. Sets how page breaks occur before the element.
+    []
+    member inline _.pageBreakBefore([] comb: CombineKeyValue, value: string) =
+        comb &>> ("page-break-before", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.pageBreakBeforeInitial([] comb: CombineKeyValue) =
+        comb &>> ("page-break-before", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.pageBreakBeforeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("page-break-before", "inherit")
+
+    /// Default.
+    []
+    member inline _.pageBreakAfterAuto([] comb: CombineKeyValue) = comb &>> ("page-break-after", "auto")
+
+    /// Always break after.
+    []
+    member inline _.pageBreakAfterAlways([] comb: CombineKeyValue) =
+        comb &>> ("page-break-after", "always")
+
+    /// Avoid a page break after.
+    []
+    member inline _.pageBreakAfterAvoid([] comb: CombineKeyValue) =
+        comb &>> ("page-break-after", "avoid")
+
+    /// Force breaks so the next page is a left page.
+    []
+    member inline _.pageBreakAfterLeft([] comb: CombineKeyValue) = comb &>> ("page-break-after", "left")
+
+    /// Force breaks so the next page is a right page.
+    []
+    member inline _.pageBreakAfterRight([] comb: CombineKeyValue) =
+        comb &>> ("page-break-after", "right")
+
+    /// Legacy alias of break-after. Sets how page breaks occur after the element.
+    []
+    member inline _.pageBreakAfter([] comb: CombineKeyValue, value: string) =
+        comb &>> ("page-break-after", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.pageBreakAfterInitial([] comb: CombineKeyValue) =
+        comb &>> ("page-break-after", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.pageBreakAfterInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("page-break-after", "inherit")
+
+    /// Default.
+    []
+    member inline _.pageBreakInsideAuto([] comb: CombineKeyValue) =
+        comb &>> ("page-break-inside", "auto")
+
+    /// Avoid a page break inside.
+    []
+    member inline _.pageBreakInsideAvoid([] comb: CombineKeyValue) =
+        comb &>> ("page-break-inside", "avoid")
+
+    /// Legacy alias of break-inside. Sets how page breaks occur inside the element.
+    []
+    member inline _.pageBreakInside([] comb: CombineKeyValue, value: string) =
+        comb &>> ("page-break-inside", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.pageBreakInsideInitial([] comb: CombineKeyValue) =
+        comb &>> ("page-break-inside", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.pageBreakInsideInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("page-break-inside", "inherit")
+
+    /// Sets the top scroll snap margin.
+    []
+    member inline _.scrollMarginTop([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-margin-top", value)
+
+    /// Sets the right scroll snap margin.
+    []
+    member inline _.scrollMarginRight([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-margin-right", value)
+
+    /// Sets the bottom scroll snap margin.
+    []
+    member inline _.scrollMarginBottom([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-margin-bottom", value)
+
+    /// Sets the left scroll snap margin.
+    []
+    member inline _.scrollMarginLeft([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-margin-left", value)
+
+    /// Sets the top scroll snap padding.
+    []
+    member inline _.scrollPaddingTop([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-padding-top", value)
+
+    /// Sets the right scroll snap padding.
+    []
+    member inline _.scrollPaddingRight([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-padding-right", value)
+
+    /// Sets the bottom scroll snap padding.
+    []
+    member inline _.scrollPaddingBottom([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-padding-bottom", value)
+
+    /// Sets the left scroll snap padding.
+    []
+    member inline _.scrollPaddingLeft([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-padding-left", value)
+
+
+
 
 
     // --------------------------------------------------------------------
@@ -3974,6 +5295,23 @@ type CssBuilder() =
     member inline _.listStyle([] comb: CombineKeyValue, value: string) = comb &>> ("list-style", value)
 
 
+    /// Resets a CSS counter to a given value (e.g. "section", "item 0").
+    []
+    member inline _.counterReset([] comb: CombineKeyValue, value: string) =
+        comb &>> ("counter-reset", value)
+
+    /// Increases or decreases a CSS counter (e.g. "section", "item 2").
+    []
+    member inline _.counterIncrement([] comb: CombineKeyValue, value: string) =
+        comb &>> ("counter-increment", value)
+
+    /// Sets a CSS counter to a given value (e.g. "section 5").
+    []
+    member inline _.counterSet([] comb: CombineKeyValue, value: string) =
+        comb &>> ("counter-set", value)
+
+
+
 
 
     // --------------------------------------------------------------------
@@ -4035,6 +5373,50 @@ type CssBuilder() =
         comb &>> ("empty-cells", value)
 
 
+    /// Default. The caption box is above the table.
+    []
+    member inline _.captionSideTop([] comb: CombineKeyValue) = comb &>> ("caption-side", "top")
+
+    /// The caption box is below the table.
+    []
+    member inline _.captionSideBottom([] comb: CombineKeyValue) = comb &>> ("caption-side", "bottom")
+
+    /// The caption box is at the block-start edge.
+    []
+    member inline _.captionSideBlockStart([] comb: CombineKeyValue) =
+        comb &>> ("caption-side", "block-start")
+
+    /// The caption box is at the block-end edge.
+    []
+    member inline _.captionSideBlockEnd([] comb: CombineKeyValue) =
+        comb &>> ("caption-side", "block-end")
+
+    /// The caption box is at the inline-start edge.
+    []
+    member inline _.captionSideInlineStart([] comb: CombineKeyValue) =
+        comb &>> ("caption-side", "inline-start")
+
+    /// The caption box is at the inline-end edge.
+    []
+    member inline _.captionSideInlineEnd([] comb: CombineKeyValue) =
+        comb &>> ("caption-side", "inline-end")
+
+    /// Positions the table caption box on the specified side.
+    []
+    member inline _.captionSide([] comb: CombineKeyValue, value: string) =
+        comb &>> ("caption-side", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.captionSideInitial([] comb: CombineKeyValue) = comb &>> ("caption-side", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.captionSideInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("caption-side", "inherit")
+
+
+
 
 
     // --------------------------------------------------------------------
@@ -4495,6 +5877,21 @@ type CssBuilder() =
     member inline _.transitionProperty([] comb: CombineKeyValue, property: string) =
         comb &>> ("transition-property", property)
 
+    /// Sets the CSS properties to which a transition effect should be applied, joined with ", ".
+    []
+    member inline _.transitionProperty([] comb: CombineKeyValue, properties: string seq) =
+        CombineKeyValue(fun sb ->
+            let sb = comb.Invoke(sb).Append("transition-property: ")
+            use e = properties.GetEnumerator()
+
+            if e.MoveNext() then
+                sb.Append(e.Current) |> ignore
+
+                while e.MoveNext() do
+                    sb.Append(", ").Append(e.Current) |> ignore
+
+            sb.Append("; "))
+
     /// Sets whether discrete-property transitions occur. Accepts normal | allow-discrete or a CSS variable.
     []
     member inline _.transitionBehavior([] comb: CombineKeyValue, value: string) =
@@ -5442,3 +6839,558 @@ type CssBuilder() =
     []
     member inline _.textOrientationInheritFromParent([] comb: CombineKeyValue) =
         comb &>> ("text-orientation", "inherit")
+
+
+    /// Default. No adjustment.
+    []
+    member inline _.fontSizeAdjustNone([] comb: CombineKeyValue) = comb &>> ("font-size-adjust", "none")
+
+    /// Uses the first available font's metric.
+    []
+    member inline _.fontSizeAdjustFromFont([] comb: CombineKeyValue) =
+        comb &>> ("font-size-adjust", "from-font")
+
+    /// Sets the size of lowercase letters relative to the current font size. Also accepts a number via the string overload (e.g. "0.5").
+    []
+    member inline _.fontSizeAdjust([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-size-adjust", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.fontSizeAdjustInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-size-adjust", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontSizeAdjustInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-size-adjust", "inherit")
+
+    /// Do not synthesize bold or italic.
+    []
+    member inline _.fontSynthesisNone([] comb: CombineKeyValue) = comb &>> ("font-synthesis", "none")
+
+    /// Synthesize bold if needed.
+    []
+    member inline _.fontSynthesisWeight([] comb: CombineKeyValue) =
+        comb &>> ("font-synthesis", "weight")
+
+    /// Synthesize italic if needed.
+    []
+    member inline _.fontSynthesisStyle([] comb: CombineKeyValue) = comb &>> ("font-synthesis", "style")
+
+    /// Synthesize small-caps if needed.
+    []
+    member inline _.fontSynthesisSmallCaps([] comb: CombineKeyValue) =
+        comb &>> ("font-synthesis", "small-caps")
+
+    /// Controls which missing typefaces (bold, italic) the browser may synthesize.
+    []
+    member inline _.fontSynthesis([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-synthesis", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.fontSynthesisInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-synthesis", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontSynthesisInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-synthesis", "inherit")
+
+    /// Controls advanced typographic OpenType features (e.g. "\"liga\" 1", "\"tnum\"").
+    []
+    member inline _.fontFeatureSettings([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-feature-settings", value)
+
+    /// Provides low-level control over variable font axes (e.g. "\"wght\" 700").
+    []
+    member inline _.fontVariationSettings([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-variation-settings", value)
+
+    /// Default.
+    []
+    member inline _.fontVariantCapsNormal([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-caps", "normal")
+
+    /// Small capitals.
+    []
+    member inline _.fontVariantCapsSmallCaps([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-caps", "small-caps")
+
+    /// All small capitals.
+    []
+    member inline _.fontVariantCapsAllSmallCaps([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-caps", "all-small-caps")
+
+    /// Petite capitals.
+    []
+    member inline _.fontVariantCapsPetiteCaps([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-caps", "petite-caps")
+
+    /// All petite capitals.
+    []
+    member inline _.fontVariantCapsAllPetiteCaps([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-caps", "all-petite-caps")
+
+    /// Unicase.
+    []
+    member inline _.fontVariantCapsUnicase([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-caps", "unicase")
+
+    /// Titling capitals.
+    []
+    member inline _.fontVariantCapsTitlingCaps([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-caps", "titling-caps")
+
+    /// Controls the usage of alternate glyphs for capital letters.
+    []
+    member inline _.fontVariantCaps([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-variant-caps", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantCapsInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-caps", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontVariantCapsInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-caps", "inherit")
+
+    /// Default.
+    []
+    member inline _.fontVariantLigaturesNormal([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-ligatures", "normal")
+
+    /// No ligatures.
+    []
+    member inline _.fontVariantLigaturesNone([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-ligatures", "none")
+
+    /// Common ligatures.
+    []
+    member inline _.fontVariantLigaturesCommonLigatures([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-ligatures", "common-ligatures")
+
+    /// Disable common ligatures.
+    []
+    member inline _.fontVariantLigaturesNoCommonLigatures([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-ligatures", "no-common-ligatures")
+
+    /// Discretionary ligatures.
+    []
+    member inline _.fontVariantLigaturesDiscretionaryLigatures([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-ligatures", "discretionary-ligatures")
+
+    /// Disable discretionary ligatures.
+    []
+    member inline _.fontVariantLigaturesNoDiscretionaryLigatures([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-ligatures", "no-discretionary-ligatures")
+
+    /// Historical ligatures.
+    []
+    member inline _.fontVariantLigaturesHistoricalLigatures([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-ligatures", "historical-ligatures")
+
+    /// Disable historical ligatures.
+    []
+    member inline _.fontVariantLigaturesNoHistoricalLigatures([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-ligatures", "no-historical-ligatures")
+
+    /// Contextual alternates.
+    []
+    member inline _.fontVariantLigaturesContextual([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-ligatures", "contextual")
+
+    /// Disable contextual alternates.
+    []
+    member inline _.fontVariantLigaturesNoContextual([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-ligatures", "no-contextual")
+
+    /// Controls which ligatures and contextual forms are used.
+    []
+    member inline _.fontVariantLigatures([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-variant-ligatures", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantLigaturesInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-ligatures", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontVariantLigaturesInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-ligatures", "inherit")
+
+    /// Default.
+    []
+    member inline _.fontVariantNumericNormal([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-numeric", "normal")
+
+    /// Lining numerals.
+    []
+    member inline _.fontVariantNumericLiningNums([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-numeric", "lining-nums")
+
+    /// Old-style numerals.
+    []
+    member inline _.fontVariantNumericOldstyleNums([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-numeric", "oldstyle-nums")
+
+    /// Proportional numerals.
+    []
+    member inline _.fontVariantNumericProportionalNums([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-numeric", "proportional-nums")
+
+    /// Tabular numerals.
+    []
+    member inline _.fontVariantNumericTabularNums([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-numeric", "tabular-nums")
+
+    /// Diagonal fractions.
+    []
+    member inline _.fontVariantNumericDiagonalFractions([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-numeric", "diagonal-fractions")
+
+    /// Stacked fractions.
+    []
+    member inline _.fontVariantNumericStackedFractions([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-numeric", "stacked-fractions")
+
+    /// Ordinal markers.
+    []
+    member inline _.fontVariantNumericOrdinal([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-numeric", "ordinal")
+
+    /// Slashed zero.
+    []
+    member inline _.fontVariantNumericSlashedZero([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-numeric", "slashed-zero")
+
+    /// Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
+    []
+    member inline _.fontVariantNumeric([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-variant-numeric", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantNumericInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-numeric", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontVariantNumericInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-numeric", "inherit")
+
+    /// Default.
+    []
+    member inline _.fontVariantEastAsianNormal([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-east-asian", "normal")
+
+    /// JIS78 glyph forms.
+    []
+    member inline _.fontVariantEastAsianJis78([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-east-asian", "jis78")
+
+    /// JIS83 glyph forms.
+    []
+    member inline _.fontVariantEastAsianJis83([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-east-asian", "jis83")
+
+    /// JIS90 glyph forms.
+    []
+    member inline _.fontVariantEastAsianJis90([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-east-asian", "jis90")
+
+    /// JIS04 glyph forms.
+    []
+    member inline _.fontVariantEastAsianJis04([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-east-asian", "jis04")
+
+    /// Simplified glyph forms.
+    []
+    member inline _.fontVariantEastAsianSimplified([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-east-asian", "simplified")
+
+    /// Traditional glyph forms.
+    []
+    member inline _.fontVariantEastAsianTraditional([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-east-asian", "traditional")
+
+    /// Full-width glyphs.
+    []
+    member inline _.fontVariantEastAsianFullWidth([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-east-asian", "full-width")
+
+    /// Proportional-width glyphs.
+    []
+    member inline _.fontVariantEastAsianProportionalWidth([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-east-asian", "proportional-width")
+
+    /// Ruby variant glyphs.
+    []
+    member inline _.fontVariantEastAsianRuby([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-east-asian", "ruby")
+
+    /// Controls the usage of alternate glyphs for East Asian scripts.
+    []
+    member inline _.fontVariantEastAsian([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-variant-east-asian", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantEastAsianInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-east-asian", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontVariantEastAsianInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-east-asian", "inherit")
+
+    /// Default.
+    []
+    member inline _.fontVariantAlternatesNormal([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-alternates", "normal")
+
+    /// Historical forms.
+    []
+    member inline _.fontVariantAlternatesHistoricalForms([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-alternates", "historical-forms")
+
+    /// Controls the usage of alternate glyphs.
+    []
+    member inline _.fontVariantAlternates([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-variant-alternates", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantAlternatesInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-alternates", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontVariantAlternatesInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-alternates", "inherit")
+
+    /// Default.
+    []
+    member inline _.fontVariantPositionNormal([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-position", "normal")
+
+    /// Subscript glyphs.
+    []
+    member inline _.fontVariantPositionSub([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-position", "sub")
+
+    /// Superscript glyphs.
+    []
+    member inline _.fontVariantPositionSuper([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-position", "super")
+
+    /// Controls the usage of alternate glyphs for subscript and superscript.
+    []
+    member inline _.fontVariantPosition([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-variant-position", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantPositionInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-position", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontVariantPositionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-position", "inherit")
+
+    /// Default.
+    []
+    member inline _.fontVariantEmojiNormal([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-emoji", "normal")
+
+    /// Text presentation.
+    []
+    member inline _.fontVariantEmojiText([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-emoji", "text")
+
+    /// Emoji presentation.
+    []
+    member inline _.fontVariantEmojiEmoji([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-emoji", "emoji")
+
+    /// Unicode-default presentation.
+    []
+    member inline _.fontVariantEmojiUnicode([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-emoji", "unicode")
+
+    /// Controls the presentation of emoji code points.
+    []
+    member inline _.fontVariantEmoji([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-variant-emoji", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantEmojiInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-emoji", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontVariantEmojiInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-emoji", "inherit")
+
+    /// Words are not hyphenated.
+    []
+    member inline _.hyphensNone([] comb: CombineKeyValue) = comb &>> ("hyphens", "none")
+
+    /// Default. Hyphenation only at explicitly suggested breaks.
+    []
+    member inline _.hyphensManual([] comb: CombineKeyValue) = comb &>> ("hyphens", "manual")
+
+    /// The browser chooses hyphenation points automatically.
+    []
+    member inline _.hyphensAuto([] comb: CombineKeyValue) = comb &>> ("hyphens", "auto")
+
+    /// Specifies how words should be hyphenated when text wraps across multiple lines.
+    []
+    member inline _.hyphens([] comb: CombineKeyValue, value: string) = comb &>> ("hyphens", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.hyphensInitial([] comb: CombineKeyValue) = comb &>> ("hyphens", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.hyphensInheritFromParent([] comb: CombineKeyValue) = comb &>> ("hyphens", "inherit")
+
+    /// Default. The normal inter-word space.
+    []
+    member inline _.wordSpacingNormal([] comb: CombineKeyValue) = comb &>> ("word-spacing", "normal")
+
+    /// Sets the length of space between words. Also accepts a length via the string overload (e.g. "0.2em").
+    []
+    member inline _.wordSpacing([] comb: CombineKeyValue, value: string) =
+        comb &>> ("word-spacing", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.wordSpacingInitial([] comb: CombineKeyValue) = comb &>> ("word-spacing", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.wordSpacingInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("word-spacing", "inherit")
+
+    /// Limits the contents of a block container to the specified number of lines.
+    []
+    member inline _.lineClamp([] comb: CombineKeyValue, value: int) =
+        comb &&& mkWithKV ("line-clamp", value)
+
+    /// Limits the contents of a block container to the specified number of lines.
+    []
+    member inline _.lineClamp([] comb: CombineKeyValue, value: float) =
+        comb &&& mkWithKV ("line-clamp", value)
+
+    /// Limits the contents of a block container to the specified number of lines.
+    []
+    member inline _.lineClamp([] comb: CombineKeyValue, value: string) = comb &>> ("line-clamp", value)
+
+    /// Default.
+    []
+    member inline _.unicodeBidiNormal([] comb: CombineKeyValue) = comb &>> ("unicode-bidi", "normal")
+
+    /// An additional level of embedding is opened.
+    []
+    member inline _.unicodeBidiEmbed([] comb: CombineKeyValue) = comb &>> ("unicode-bidi", "embed")
+
+    /// Reordering is overridden per the direction property.
+    []
+    member inline _.unicodeBidiBidiOverride([] comb: CombineKeyValue) =
+        comb &>> ("unicode-bidi", "bidi-override")
+
+    /// The element is isolated from its surroundings for bidi resolution.
+    []
+    member inline _.unicodeBidiIsolate([] comb: CombineKeyValue) = comb &>> ("unicode-bidi", "isolate")
+
+    /// Isolate plus override.
+    []
+    member inline _.unicodeBidiIsolateOverride([] comb: CombineKeyValue) =
+        comb &>> ("unicode-bidi", "isolate-override")
+
+    /// Bidi per the Unicode plaintext algorithm.
+    []
+    member inline _.unicodeBidiPlaintext([] comb: CombineKeyValue) =
+        comb &>> ("unicode-bidi", "plaintext")
+
+    /// Together with direction, determines how bidirectional text is handled.
+    []
+    member inline _.unicodeBidi([] comb: CombineKeyValue, value: string) =
+        comb &>> ("unicode-bidi", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.unicodeBidiInitial([] comb: CombineKeyValue) = comb &>> ("unicode-bidi", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.unicodeBidiInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("unicode-bidi", "inherit")
+
+    /// Default.
+    []
+    member inline _.colorSchemeNormal([] comb: CombineKeyValue) = comb &>> ("color-scheme", "normal")
+
+    /// Light color scheme.
+    []
+    member inline _.colorSchemeLight([] comb: CombineKeyValue) = comb &>> ("color-scheme", "light")
+
+    /// Dark color scheme.
+    []
+    member inline _.colorSchemeDark([] comb: CombineKeyValue) = comb &>> ("color-scheme", "dark")
+
+    /// Forbids the user agent from overriding the scheme.
+    []
+    member inline _.colorSchemeOnly([] comb: CombineKeyValue) = comb &>> ("color-scheme", "only")
+
+    /// Indicates which color schemes an element can be rendered in (e.g. light/dark).
+    []
+    member inline _.colorScheme([] comb: CombineKeyValue, value: string) =
+        comb &>> ("color-scheme", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.colorSchemeInitial([] comb: CombineKeyValue) = comb &>> ("color-scheme", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.colorSchemeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("color-scheme", "inherit")
+
+    /// Default. Colors are forced per the system.
+    []
+    member inline _.forcedColorAdjustAuto([] comb: CombineKeyValue) =
+        comb &>> ("forced-color-adjust", "auto")
+
+    /// The element's colors are not automatically adjusted.
+    []
+    member inline _.forcedColorAdjustNone([] comb: CombineKeyValue) =
+        comb &>> ("forced-color-adjust", "none")
+
+    /// Preserve the parent's forced color.
+    []
+    member inline _.forcedColorAdjustPreserveParentColor([] comb: CombineKeyValue) =
+        comb &>> ("forced-color-adjust", "preserve-parent-color")
+
+    /// Allows certain elements to opt out of forced colors mode.
+    []
+    member inline _.forcedColorAdjust([] comb: CombineKeyValue, value: string) =
+        comb &>> ("forced-color-adjust", value)
+
+    /// Sets this property to its default value.
+    []
+    member inline _.forcedColorAdjustInitial([] comb: CombineKeyValue) =
+        comb &>> ("forced-color-adjust", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.forcedColorAdjustInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("forced-color-adjust", "inherit")

From 9a6f35092ac2c58ce9d3e04fafd738e3c57ebfe4 Mon Sep 17 00:00:00 2001
From: binwen 
Date: Fri, 28 Aug 2026 11:25:10 +0800
Subject: [PATCH 6/8] Add optional 'important' flag to CssBuilder

When important = true, every emitted property is suffixed with ' !important'
(via Internal.applyImportant applied in Run). Exposed to subclass Run overrides
through the public ApplyImportant member. Defaults to false; fully backward
compatible.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 Fun.Css.Tests/BuilderCoreTests.fs | 61 +++++++++++++++++++++++++++++++
 Fun.Css/CssBuilder.fs             | 41 ++++++++++++++++++++-
 SKILL.md                          | 13 +++++++
 3 files changed, 113 insertions(+), 2 deletions(-)

diff --git a/Fun.Css.Tests/BuilderCoreTests.fs b/Fun.Css.Tests/BuilderCoreTests.fs
index de63208..394b587 100644
--- a/Fun.Css.Tests/BuilderCoreTests.fs
+++ b/Fun.Css.Tests/BuilderCoreTests.fs
@@ -143,3 +143,64 @@ let ``Makers mkWithKV without px for int`` () =
 let ``Makers mkWithKV without px for float`` () =
     let m = Internal.Makers.mkWithKV ("opacity", 0.25)
     Assert.Equal("opacity: 0.25; ", render m)
+
+type private ImportantStrBuilder(?important: bool) =
+    inherit Fun.Css.CssBuilder(?important = important)
+
+    member inline this.Run([] combine: Internal.CombineKeyValue) =
+        let combine = this.ApplyImportant(combine)
+        let sb = stringBuilderPool.Get()
+        let str = combine.Invoke(sb).ToString()
+        stringBuilderPool.Return sb
+        str
+
+[]
+let ``important false by default leaves output unchanged`` () =
+    let s = ImportantStrBuilder()
+
+    let actual = s {
+        color "red"
+        width 100
+    }
+
+    Assert.Equal("color: red; width: 100px; ", actual)
+
+[]
+let ``important true appends important to every property`` () =
+    let s = ImportantStrBuilder(true)
+
+    let actual = s {
+        color "red"
+        width 100
+        displayFlex
+        margin 10 20
+        opacity 0.5
+        zIndex 5
+    }
+
+    Assert.Equal(
+        "color: red !important; width: 100px !important; display: flex !important; margin: 10px 20px !important; opacity: 0.5 !important; z-index: 5 !important; ",
+        actual
+    )
+
+[]
+let ``important true applies to custom and yielded tuples`` () =
+    let s = ImportantStrBuilder(true)
+
+    let actual = s {
+        custom "--my-var" "10px"
+        yield ("flag", true)
+    }
+
+    Assert.Equal("--my-var: 10px !important; flag: True !important; ", actual)
+
+[]
+let ``base CssBuilder default Run applies important to fragment`` () =
+    let builder = Fun.Css.CssBuilder(important = true)
+
+    let frag = builder {
+        color "blue"
+        fontSize 16
+    }
+
+    Assert.Equal("color: blue !important; font-size: 16px !important; ", render frag)
diff --git a/Fun.Css/CssBuilder.fs b/Fun.Css/CssBuilder.fs
index 98a3d4b..588f9f6 100644
--- a/Fun.Css/CssBuilder.fs
+++ b/Fun.Css/CssBuilder.fs
@@ -15,6 +15,29 @@ module Internal =
     let inline (&>>) ([] comb: CombineKeyValue) (x: string, value: string) =
         CombineKeyValue(fun sb -> comb.Invoke(sb).Append(x).Append(": ").Append(value).Append("; "))
 
+    /// Rewrites every "key: value; " declaration produced by comb into
+    /// "key: value !important; ". Declarations are always terminated by "; ",
+    /// so a textual rewrite that inserts " !important" before each ";" is safe:
+    /// the only ";" the operations emit are declaration terminators.
+    let applyImportant (comb: CombineKeyValue) =
+        CombineKeyValue(fun sb ->
+            let inner = StringBuilder()
+            comb.Invoke(inner) |> ignore
+            let s = inner.ToString()
+
+            let mutable i = 0
+            let len = s.Length
+
+            while i < len do
+                if s.[i] = ';' then
+                    sb.Append(" !important;") |> ignore
+                else
+                    sb.Append(s.[i]) |> ignore
+
+                i <- i + 1
+
+            sb)
+
 
     type Makers =
         static member inline mkPxWithKV(k: string, v: int) =
@@ -34,7 +57,11 @@ open Internal
 open type Makers
 
 
-type CssBuilder() =
+type CssBuilder(?important: bool) =
+
+    /// When true, every property emitted by the block is suffixed with " !important".
+    /// Defaults to false.
+    member val Important = defaultArg important false
 
     member inline _.Yield(_: unit) = CombineKeyValue(fun sb -> sb)
     member inline _.Yield([] x: CombineKeyValue) = x
@@ -54,7 +81,17 @@ type CssBuilder() =
     member inline _.Yield((key, value): string * bool) =
         CombineKeyValue(fun s -> s.Append(key).Append(": ").Append(value).Append("; "))
 
-    member inline _.Run([] combine: CombineKeyValue) = combine
+    /// Applies the " !important" suffix to every declaration when Important is
+    /// true; otherwise returns the combine unchanged. Subclasses that override
+    /// Run should route the final combine through this so the important flag is
+    /// honored regardless of the output type.
+    member this.ApplyImportant(combine: CombineKeyValue) : CombineKeyValue =
+        if this.Important then
+            applyImportant combine
+        else
+            combine
+
+    member inline this.Run([] combine: CombineKeyValue) = this.ApplyImportant(combine)
 
     member inline _.For([] comb: CombineKeyValue, [] fn: unit -> CombineKeyValue) =
         comb &&& (fn ())
diff --git a/SKILL.md b/SKILL.md
index fc4e2cc..0938083 100644
--- a/SKILL.md
+++ b/SKILL.md
@@ -155,6 +155,19 @@ let styleStr = StyleStrBuilder()
 
 For Fun.Blazor, override `Run` to return an `AttrRenderFragment` (see README.md).
 
+**`!important`.** Pass `important = true` to the constructor to suffix every property with `!important`:
+
+```fsharp
+type StyleStrBuilder() =
+    inherit Fun.Css.CssBuilder(important = true)
+
+    member inline this.Run([] combine: Fun.Css.Internal.CombineKeyValue) =
+        let combine = this.ApplyImportant(combine)   // route the final combine through this
+        // ... render combine to a string as above
+```
+
+When overriding `Run`, route the final combine through `this.ApplyImportant(...)` so the flag is honored. `width 100` then emits `width: 100px !important;`. The default is `false` (no `!important`).
+
 ## Gotchas
 
 - **Tuples don't compile.** CE custom operations are curried: `margin 10 20`, not `margin (10, 20)` (FS3099/FS0041).

From 3e55bd6b1e14b3d3f33bec499b6e53b96f647284 Mon Sep 17 00:00:00 2001
From: binwen 
Date: Fri, 28 Aug 2026 11:30:44 +0800
Subject: [PATCH 7/8] Format

---
 Fun.Css.Tests/BuilderCoreTests.fs | 44 +++++++++++++++++--------------
 Fun.Css/CssBuilder.fs             |  5 +---
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/Fun.Css.Tests/BuilderCoreTests.fs b/Fun.Css.Tests/BuilderCoreTests.fs
index 394b587..94e666e 100644
--- a/Fun.Css.Tests/BuilderCoreTests.fs
+++ b/Fun.Css.Tests/BuilderCoreTests.fs
@@ -158,10 +158,11 @@ type private ImportantStrBuilder(?important: bool) =
 let ``important false by default leaves output unchanged`` () =
     let s = ImportantStrBuilder()
 
-    let actual = s {
-        color "red"
-        width 100
-    }
+    let actual =
+        s {
+            color "red"
+            width 100
+        }
 
     Assert.Equal("color: red; width: 100px; ", actual)
 
@@ -169,14 +170,15 @@ let ``important false by default leaves output unchanged`` () =
 let ``important true appends important to every property`` () =
     let s = ImportantStrBuilder(true)
 
-    let actual = s {
-        color "red"
-        width 100
-        displayFlex
-        margin 10 20
-        opacity 0.5
-        zIndex 5
-    }
+    let actual =
+        s {
+            color "red"
+            width 100
+            displayFlex
+            margin 10 20
+            opacity 0.5
+            zIndex 5
+        }
 
     Assert.Equal(
         "color: red !important; width: 100px !important; display: flex !important; margin: 10px 20px !important; opacity: 0.5 !important; z-index: 5 !important; ",
@@ -187,10 +189,11 @@ let ``important true appends important to every property`` () =
 let ``important true applies to custom and yielded tuples`` () =
     let s = ImportantStrBuilder(true)
 
-    let actual = s {
-        custom "--my-var" "10px"
-        yield ("flag", true)
-    }
+    let actual =
+        s {
+            custom "--my-var" "10px"
+            yield ("flag", true)
+        }
 
     Assert.Equal("--my-var: 10px !important; flag: True !important; ", actual)
 
@@ -198,9 +201,10 @@ let ``important true applies to custom and yielded tuples`` () =
 let ``base CssBuilder default Run applies important to fragment`` () =
     let builder = Fun.Css.CssBuilder(important = true)
 
-    let frag = builder {
-        color "blue"
-        fontSize 16
-    }
+    let frag =
+        builder {
+            color "blue"
+            fontSize 16
+        }
 
     Assert.Equal("color: blue !important; font-size: 16px !important; ", render frag)
diff --git a/Fun.Css/CssBuilder.fs b/Fun.Css/CssBuilder.fs
index 588f9f6..0fe5a6a 100644
--- a/Fun.Css/CssBuilder.fs
+++ b/Fun.Css/CssBuilder.fs
@@ -86,10 +86,7 @@ type CssBuilder(?important: bool) =
     /// Run should route the final combine through this so the important flag is
     /// honored regardless of the output type.
     member this.ApplyImportant(combine: CombineKeyValue) : CombineKeyValue =
-        if this.Important then
-            applyImportant combine
-        else
-            combine
+        if this.Important then applyImportant combine else combine
 
     member inline this.Run([] combine: CombineKeyValue) = this.ApplyImportant(combine)
 

From da44e08754f99f91b7925f1adb37bdcf8de1a13f Mon Sep 17 00:00:00 2001
From: binwen 
Date: Fri, 28 Aug 2026 11:41:29 +0800
Subject: [PATCH 8/8] Update CHANGELOG

---
 CHANGELOG.md | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7249de2..5ee23b1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,40 @@
 
 ## [Unreleased]
 
+## 1.1.0 - 2026-08-28
+
+### Added
+
+- Optional `important` flag: `type CssBuilder(?important: bool)`. When `true`, every emitted property is suffixed with ` !important`. Subclasses that override `Run` route the final combine through the new public `ApplyImportant` member to honor the flag. Defaults to `false` (fully backward compatible).
+- `(value: string)` overloads for all keyword-only properties (Option 1 consistency pass) — every shorthand/keyword property group now accepts a CSS-variable string alongside its typed unit ops, so `display "var(--display)"` works everywhere, not just on the few groups that already had it.
+- Broad standard-CSS coverage (all additive, following the camelCase property + PascalCase keyword + `(string)` overload + `...Initial`/`...InheritFromParent` conventions):
+  - Layout: `clear`, `objectFit`/`objectPosition`, `pointerEvents`, `touchAction`, `willChange`, `overscrollBehavior`/`X`/`Y`, `isolation`, `mixBlendMode`, `overflowBlock`/`overflowInline`, `content`, `perspective`/`perspectiveOrigin`, `inset`, `aspectRatio`, `contain`, logical margin/padding longhands, `scrollSnapAlign`/`Type`/`Stop`, `scrollMargin`/`scrollPadding` (+ per-side longhands).
+  - Border/outline: `outline` shorthand + `outlineWidth(float)`, border corner radii, `borderImage` shorthand + `borderImageSource`/`Slice`/`Width`/`Outset`/`Repeat`, logical borders (`borderBlock*`/`borderInline*`).
+  - Background/mask: `background` shorthand + `backgroundAttachment`/`Origin`/`PositionX`/`Y`, `mask` shorthand + `maskImage`/`Size`/`Repeat`/`Position`/`Clip`/`Origin`/`Composite`.
+  - Typography: `font` shorthand, `fontSizeAdjust`, `fontSynthesis`, `fontFeatureSettings`, `fontVariationSettings`, all `fontVariant-*` longhands, `textDecorationThickness`/`SkipInk`, `textAlignLast`, `tabSize`, `overflowWrap`, `textRendering`, `textSizeAdjust`, `textOrientation`, `hyphens`, `wordSpacing`, `lineClamp`, `unicodeBidi`, `colorScheme`, `forcedColorAdjust`.
+  - Grid/flex/table/list: `order`, `flexFlow`, `grid` shorthand + `gridAutoRows`/`Columns`/`Flow`, `listStyle` shorthand, `captionSide`, `counterReset`/`Increment`/`Set`, multi-column (`columns`, `columnWidth`/`Count`/`Fill`/`Span`, `columnRule*`).
+  - Animation/transition/transform: `animationIterationCount` numeric + string overloads, `transitionBehavior`, `transformBox`, `backfaceVisibility`.
+  - Fragmentation/containment: `containIntrinsic*`, `breakBefore`/`After`/`Inside`, `pageBreakBefore`/`After`/`Inside`.
+  - `backgroundSize` now has `int`/`float` (px) overloads; `transitionProperty` now has a `string seq` overload joining with `", "`.
+- `SKILL.md` — an Agent Skills-format guide for AI coding assistants (and humans) covering the naming/consistency patterns, composition, design-token usage, extension patterns, and gotchas. Referenced from the README.
+- Comprehensive unit-test suite covering all public API surfaces (138 tests).
+
+### Changed
+
+- Typo'd/inconsistent operation names kept working but now warn via `[]` pointing to the corrected spelling (never removed): `justifyItemsStrench`/`justifySelfStrench` → `justifyItemsStretch`/`justifySelfStretch`, `backgroundBlendModeCollorDodge` → `backgroundBlendModeColorDodge`, `wordbreak*` → `wordBreak*`, `tableLayoutFixed'` → `tableLayoutFixed`, `displayInlineElement` → `displayInline`, `positionDefaultStatic` → `positionStatic`, `floatLeft`/`floatRight`/`floatNone` → `floatStyleLeft`/`floatStyleRight`/`floatStyleNone`, `animationDurationCount` → `animationIterationCount(int)`.
+- `CssBuilder.fs` reorganized into theme sections (Align, Animation, Background, Border, BoxSpacing, Color, Filter, Flex, Grid, Layout, List, Table, Transform, Transition, Typography) with banner comments; `color`/`font` helper modules moved to `Color.fs`/`Font.fs`. No public API change.
+
+### Fixed
+
+- `transformMatrix` now emits all six `matrix(...)` parameters (previously skipped `y1`).
+- `boxShadow` 3-arg overload now emits the `": "` separator.
+- `verticalAlignSub` now emits `"sub"` (was `"sup"`).
+- `textIndent(int)` now emits `px` (`text-indent: 10px;`).
+- `gridTemplateColumns`/`gridTemplateRows` int-seq overloads no longer emit a trailing space.
+- `borderWidth` multi-value overloads and `backgroundSize` two-string overload now space-separate values (were comma-separated / emitted `", , "` when an optional arg was omitted).
+- `gridTemplateAreas` no longer emits a trailing space.
+- Performance: several string-concat paths converted to direct `StringBuilder` appends (`gap`, `transformOrigin`, `gridColumn`/`gridRow`, `borderWidth`, `backgroundSize`).
+
 ## 1.0.3 - 2026-08-17
 
 - Add missing `///` doc comments so all `CustomOperation` overloads surface in `Fun.Css.xml` and IDE IntelliSense