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/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 diff --git a/Fun.Css.Tests/AnimationTransitionTests.fs b/Fun.Css.Tests/AnimationTransitionTests.fs new file mode 100644 index 0000000..9b651eb --- /dev/null +++ b/Fun.Css.Tests/AnimationTransitionTests.fs @@ -0,0 +1,218 @@ +#nowarn "44" // obsolete-op usage is intentional: verifies legacy names keep working (backward compatibility) + +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 (obsolete) still emits animation-iteration-count`` () = + let actual = style { animationDurationCount 3 } + 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`` () = + 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/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/BuilderCoreTests.fs b/Fun.Css.Tests/BuilderCoreTests.fs new file mode 100644 index 0000000..94e666e --- /dev/null +++ b/Fun.Css.Tests/BuilderCoreTests.fs @@ -0,0 +1,210 @@ +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) + +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.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..eedfd52 --- /dev/null +++ b/Fun.Css.Tests/DimensionTests.fs @@ -0,0 +1,242 @@ +#nowarn "44" // obsolete-op usage is intentional: verifies legacy names keep working (backward compatibility) + +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 ``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 = + style { + positionDefaultStatic + positionRelative + positionAbsolute + positionFixed + positionSticky + } + + Assert.Equal( + "position: static; position: relative; position: absolute; position: fixed; position: sticky; ", + 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 = + 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..9442cda 100644 --- a/Fun.Css.Tests/Fun.Css.Tests.fsproj +++ b/Fun.Css.Tests/Fun.Css.Tests.fsproj @@ -10,6 +10,15 @@ + + + + + + + + + diff --git a/Fun.Css.Tests/GridFlexTests.fs b/Fun.Css.Tests/GridFlexTests.fs new file mode 100644 index 0000000..d79b085 --- /dev/null +++ b/Fun.Css.Tests/GridFlexTests.fs @@ -0,0 +1,182 @@ +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 + ) + +[] +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 new file mode 100644 index 0000000..282c345 --- /dev/null +++ b/Fun.Css.Tests/MiscTests.fs @@ -0,0 +1,534 @@ +#nowarn "44" // obsolete-op usage is intentional: verifies legacy names keep working (backward compatibility) + +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 ``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 = + 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 ``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 + ) + +[] +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 + ) + +[] +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.Tests/TransformTests.fs b/Fun.Css.Tests/TransformTests.fs new file mode 100644 index 0000000..69c0420 --- /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,2,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-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 new file mode 100644 index 0000000..f458720 --- /dev/null +++ b/Fun.Css.Tests/TypographyTests.fs @@ -0,0 +1,300 @@ +#nowarn "44" // obsolete-op usage is intentional: verifies legacy names keep working (backward compatibility) + +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: 10px; 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: 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 + ) + +[] +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 (obsolete names)`` () = + 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 ``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 = + 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 + ) + +[] +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.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/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 d6e4651..0fe5a6a 100644 --- a/Fun.Css/CssBuilder.fs +++ b/Fun.Css/CssBuilder.fs @@ -15,43 +15,94 @@ 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) = 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 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 - 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 _.Run([] combine: CombineKeyValue) = combine + member inline _.Yield((key, value): string * int) = + CombineKeyValue(fun s -> s.Append(key).Append(": ").Append(value).Append("; ")) - member inline _.For([] comb: CombineKeyValue, [] fn: unit -> CombineKeyValue) = comb &&& (fn ()) + member inline _.Yield((key, value): string * float) = + CombineKeyValue(fun s -> s.Append(key).Append(": ").Append(value).Append("; ")) - member inline _.For(ls: 'T seq, [] fn: 'T -> CombineKeyValue) = ls |> Seq.map fn |> Seq.fold (&&&) (CombineKeyValue(fun x -> x)) + member inline _.Yield((key, value): string * bool) = + CombineKeyValue(fun s -> s.Append(key).Append(": ").Append(value).Append("; ")) - member inline _.Delay([] fn: unit -> CombineKeyValue) = CombineKeyValue(fun x -> fn().Invoke(x)) + /// 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 ()) + + 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 _.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 +117,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") @@ -84,574 +137,206 @@ 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") - /// 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") + /// 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 maximum height of an element. - [] - 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") - /// 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") - /// The intrinsic minimum height. - [] - member inline _.maxHeightMinContent([] comb: CombineKeyValue) = comb &>> ("max-height", "min-content") + /// The element is positioned to fit the container + [] + member inline _.alignSelfStretch([] comb: CombineKeyValue) = comb &>> ("align-self", "stretch") - /// Sets the minimum height of an element. - [] - 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") - /// 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") - /// The intrinsic minimum height. - [] - member inline _.minHeightMinContent([] comb: CombineKeyValue) = comb &>> ("min-height", "min-content") + /// The element is positioned at the center of the container + [] + member inline _.alignSelfCenter([] comb: CombineKeyValue) = comb &>> ("align-self", "center") - /// 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") + /// The element is positioned at the beginning of the container + [] + member inline _.alignSelfFlexStart([] comb: CombineKeyValue) = comb &>> ("align-self", "flex-start") - /// 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")
+    /// The element is positioned at the end of the container
+    []
+    member inline _.alignSelfFlexEnd([] comb: CombineKeyValue) = comb &>> ("align-self", "flex-end")
 
-    /// Default value. Uses default line break rules.
-    []
-    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 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")
-    /// To prevent overflow, word may be broken at arbitrary points.
-    []
-    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")
-    /// Inherits this property from its parent element.
-    []
-    member inline _.wordbreakInheritFromParent([] comb: CombineKeyValue) = comb &>> ("word-break", "inherit")
+    /// The element is positioned at the baseline of the container
+    []
+    member inline _.alignSelfBaseline([] comb: CombineKeyValue) = comb &>> ("align-self", "baseline")
 
-    /// 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")
-    /// Sets this property to its default value.
-    []
-    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")
+    /// Sets this property to its default value)
+    []
+    member inline _.alignSelfInitial([] comb: CombineKeyValue) = comb &>> ("align-self", "initial")
 
-    /// 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")
+    /// Inherits this property from its parent element
+    []
+    member inline _.alignSelfInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("align-self", "inherit")
 
-    /// 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")
+    /// 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)
 
-    /// 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")
+    /// Default. Items are stretched to fit the container
+    []
+    member inline _.alignItemsStretch([] comb: CombineKeyValue) = comb &>> ("align-items", "stretch")
 
-    /// 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.
-    ///
-    /// 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")
-
-    /// 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")
-
-    /// 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")
-    /// The flexible items are displayed vertically, as a 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")
-    /// Sets this property to its default value.
-    []
-    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")
-
-    /// 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")
-    /// 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")
-
-    /// 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")
-
-    /// 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")
-
-    /// 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")
-
-    /// 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")
-
-    /// 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")
-
-    /// 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")
-
-    /// 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 +345,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,342 +419,328 @@ 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")
+
+
+
+
+    // --------------------------------------------------------------------
+    // Animation styles
+    // --------------------------------------------------------------------
+
+
+    /// 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. 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)
+        =
+        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 the width of the outline.
-    []
-    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)
-    /// 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")
-    /// Inherits this property from its parent element
-    []
-    member inline _.outlineWidthInheritFromParent([] comb: CombineKeyValue) = comb &>> ("outline-width", "inherit")
+    []
+    member inline _.animationTimingFunctionInitial([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "initial")
 
-    /// 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")
-    /// The marker is a 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")
-    /// The marker is a number
-    []
-    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")
-    /// 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")
-    /// The marker is 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")
-    /// The marker is lower-roman (i, ii, iii, iv, v, etc.))
-    []
-    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")
-    /// The marker is upper-alpha (A, B, C, D, E, etc.))
-    []
-    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")
-    /// The marker is upper-latin (A, B, C, D, E, etc.))
-    []
-    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")
-    /// 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")
     /// 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 _.animationTimingFunctionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("animation-timing-function", "inherit")
 
-    /// 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("); "))
-    /// 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.
-    ///
-    /// 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")
+    /// 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)
 
-    /// The bullet points will be inside the list item
-    []
-    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")
-    /// 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")
-    /// 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")
+    /// Default value. The animation should be played as normal
+    []
+    member inline _.animationDirectionNormal([] comb: CombineKeyValue) =
+        comb &>> ("animation-direction", "normal")
 
-    /// 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")
+    /// The animation should play in reverse direction
+    []
+    member inline _.animationDirectionReverse([] comb: CombineKeyValue) =
+        comb &>> ("animation-direction", "reverse")
 
-    /// 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)
+    /// 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")
 
-    /// 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")
-    /// Adds a line above the text.
-    []
-    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")
-    /// Sets this property to its default value.
-    []
-    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")
+    /// 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")
 
-    /// 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")
+    []
+    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")
+
+    /// Specifies that the animation is 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")
 
-    /// 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")
-    /// Transforms all characters to uppercase.
-    []
-    member inline _.textTransformUppercase([] comb: CombineKeyValue) = comb &>> ("text-transform", "uppercase")
-    /// Transforms all characters to 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")
     /// Inherits this property from its parent element.
-    []
-    member inline _.textTransformInheritFromParent([] comb: CombineKeyValue) = comb &>> ("text-transform", "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")
+
+    /// Sets this property to its default value)
+    []
+    member inline _.animationIterationCountInitial([] comb: CombineKeyValue) =
+        comb &>> ("animation-iteration-count", "initial")
 
-    /// 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")
-    /// Render the given string to represent the clipped text.
-    []
-    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 _.animationIterationCountInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("animation-iteration-count", "inherit")
 
-    /// 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("%); "))
-    /// 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("%); "))
-    /// 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("%); "))
-    /// 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("%); "))
-    /// 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("%); "))
-    /// 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("%); "))
-    /// Applies a drop shadow effect.
-    []
-    member inline _.filterDropShadow
-        (
-            [] comb: CombineKeyValue,
-            horizontalOffset: int,
-            verticalOffset: int,
-            blur: int,
-            spread: int,
-            color: string
-        )
+    /// 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")
+
+    /// 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")
+
+    /// 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")
+
+    /// 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")
+
+    /// Sets this property to its default value)
+    []
+    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")
+
+    /// 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 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 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")
+
+    /// 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")
+
+    /// The number of times the animation runs.
+    []
+    []
+    member inline _.animationDurationCount([] comb: CombineKeyValue, count: int) =
+        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)
+
+
+
+
+    // --------------------------------------------------------------------
+    // Background styles
+    // --------------------------------------------------------------------
+
+
+    /// 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)
         =
-        comb
-        &&& CombineKeyValue(fun sb ->
-            sb
-                .Append("filter: drop-shadow(")
+        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("); ")
-        )
-    /// 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("; "))
+
+    /// 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)
@@ -1051,457 +748,585 @@ type CssBuilder() =
                 .Append(blur)
                 .Append("px ")
                 .Append(color)
-                .Append("); ")
-        )
-    /// Applies a drop shadow effect.
-    []
-    member inline _.filterDropShadow([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, color: string) =
-        comb
-        &&& CombineKeyValue(fun sb ->
-            sb
-                .Append("filter: drop-shadow(")
+                .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("); ")
-        )
-    /// 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("%); "))
-    /// 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("%); "))
-    /// 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); "))
-    /// 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 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")
-    /// 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")
-    /// Inherits this property from its parent element.
-    []
-    member inline _.borderCollapseInheritFromParent([] comb: CombineKeyValue) = comb &>> ("border-collapse", "inherit")
+                .Append("; "))
 
-    /// 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)
+    /// Removes the box shadow from an element.
+    []
+    member inline _.boxShadowNone([] comb: CombineKeyValue) = comb &>> ("box-shadow", "none")
 
-    /// 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")
+    []
+    member inline _.boxShadowInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("box-shadow", "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 (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.
     []
     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")
-    /// 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")
-    /// 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")
-    /// 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")
-    /// The line will display as a wavy line.
+    /// Sets the initial position for each background image.
     ///
-    /// https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration-style&preval=wavy
-    []
-    member inline _.textDecorationStyleWavy([] comb: CombineKeyValue) = comb &>> ("text-decoration-style", "wavy")
+    /// 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")
+
+    /// The background image will not scroll with the page.
+    []
+    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")
+
     /// 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 _.backgroundPositionInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-position", "initial")
+
     /// Inherits this property from its parent element.
-    []
-    member inline _.textDecorationStyleInheritFromParent([] comb: CombineKeyValue) = comb &>> ("text-decoration-style", "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")
+
+    /// Sets the blending mode to 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")
+
+    /// Sets the blending mode to 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")
+
+    /// Sets the blending mode to 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")
+
+    /// Sets the blending mode to 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")
+
+    /// 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")
+
+    /// The background extends to the inside edge of the border.
+    []
+    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")
 
-    /// Makes the text as narrow as it gets.
-    []
-    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")
-    /// Makes the text narrower than semi-condensed, but not as narrow as extra-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")
-    /// 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")
-    /// Makes the text wider than semi-expanded, but not as wide as extra-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")
-    /// 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")
+    []
+    member inline _.backgroundClipInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-clip", "initial")
+
     /// Inherits this property from its parent element.
-    []
-    member inline _.fontStretchInheritFromParent([] comb: CombineKeyValue) = comb &>> ("font-stretch", "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)
+
+    /// 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 background image is repeated both vertically and horizontally. This is default.
+    []
+    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")
+
+    /// The background image is only repeated vertically.
+    []
+    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")
 
-    /// 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")
+    []
+    member inline _.backgroundRepeatInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-repeat", "initial")
+
     /// Inherits this property from its parent element.
-    []
-    member inline _.floatStyleInheritFromParent([] comb: CombineKeyValue) = comb &>> ("float", "inherit")
+    []
+    member inline _.backgroundRepeatInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("background-repeat", "inherit")
+
+    /// Sets the background color of an element.
+    []
+    member inline _.backgroundColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("background-color", color)
+
+    /// Sets one or more background images on an element.
+    []
+    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) =
+        comb &>> ("background-image", "url('" + value + "')")
+
+    /// Shorthand for all background properties (e.g. "url(a.png) no-repeat center / cover").
+    []
+    member inline _.background([] comb: CombineKeyValue, value: string) = comb &>> ("background", value)
+
+    /// 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 background scrolls with the page. This is default.
+    []
+    member inline _.backgroundAttachmentScroll([] comb: CombineKeyValue) =
+        comb &>> ("background-attachment", "scroll")
+
+    /// The background is fixed with regard to the viewport.
+    []
+    member inline _.backgroundAttachmentFixed([] comb: CombineKeyValue) =
+        comb &>> ("background-attachment", "fixed")
+
+    /// The background scrolls with the element's contents.
+    []
+    member inline _.backgroundAttachmentLocal([] comb: CombineKeyValue) =
+        comb &>> ("background-attachment", "local")
 
-    /// The element is aligned with the baseline of the parent. This is default.
-    []
-    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")
-    /// 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")
-    /// 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")
     /// Sets this property to its default value.
-    []
-    member inline _.verticalAlignInitial([] comb: CombineKeyValue) = comb &>> ("vertical-align", "initial")
+    []
+    member inline _.backgroundAttachmentInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-attachment", "initial")
+
     /// Inherits this property from its parent element.
-    []
-    member inline _.verticalAlignInheritFromParent([] comb: CombineKeyValue) = comb &>> ("vertical-align", "inherit")
+    []
+    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")
 
-    /// Let the content flow horizontally from left to right, vertically from top to bottom
-    []
-    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")
-    /// 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 this property to its default value.
-    []
-    member inline _.writingModeInitial([] comb: CombineKeyValue) = comb &>> ("writing-mode", "initial")
+    []
+    member inline _.backgroundOriginInitial([] comb: CombineKeyValue) =
+        comb &>> ("background-origin", "initial")
+
     /// Inherits this property from its parent element.
-    []
-    member inline _.writingModeInheritFromParent([] comb: CombineKeyValue) = comb &>> ("writing-mode", "inherit")
+    []
+    member inline _.backgroundOriginInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("background-origin", "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)
+    /// Sets the horizontal background position (e.g. "left", "10px", "var(--bg-x)").
+    []
+    member inline _.backgroundPositionX([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-position-x", value)
 
-    /// 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) =
-        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 _.animationTimingFunctionInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("animation-timing-function", "inherit")
+    /// Sets the vertical background position (e.g. "top", "10px", "var(--bg-y)").
+    []
+    member inline _.backgroundPositionY([] comb: CombineKeyValue, value: string) =
+        comb &>> ("background-position-y", 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")
-    /// 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")
 
-    /// 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")
+    /// Shorthand for setting all mask-* properties.
+    []
+    member inline _.mask([] comb: CombineKeyValue, value: string) = comb &>> ("mask", 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)
+    /// 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)
 
-    /// Specifies a dotted border.
+    /// 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")
+
+
+
+
+
+    // --------------------------------------------------------------------
+    // Border styles
+    // --------------------------------------------------------------------
+
+
+    /// Sets the width of the outline.
+    []
+    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)
+
+    /// 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")
+
+    /// Inherits this property from its parent element
+    []
+    member inline _.outlineWidthInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("outline-width", "inherit")
+
+    /// 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")
+
+    /// 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")
+
+    /// Inherits this property from its parent element.
+    []
+    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.
+    []
+    member inline _.borderSpacing([] comb: CombineKeyValue, horizontal: string, ?vertical: string) =
+        comb &>> ("border-spacing", horizontal + ", " + string vertical)
+
+    /// 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 line style for all four sides of an element's border.
+    []
+    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,984 +1334,1253 @@ 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")
-
-    /// 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 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")
-
-    /// 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")
-    /// 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")
+    member inline _.borderStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("border-style", "inherit")
 
     /// 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 initial position for each background image.
+    /// 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)
+
+    /// The outline-offset property adds space between an outline and the edge or border of an element.
     ///
-    /// 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")
-    /// The background image will not scroll with the page.
-    []
-    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")
-    /// Sets this property to its default value.
-    []
-    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")
+    /// 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)
 
-    /// This is default. Sets the blending mode to 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")
-    /// Sets the blending mode to 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")
-    /// Sets the blending mode to multiply
-    []
-    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")
-    /// Sets the blending mode to 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")
-    /// Sets the blending mode to luminosity
-    []
-    member inline _.backgroundBlendModeLuminosity([] comb: CombineKeyValue) = comb &>> ("background-blend-mode", "luminosity")
+    /// 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)
+
+    /// 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)
+
+    /// Sets the line style of an element's border.
+    []
+    member inline _.border([] comb: CombineKeyValue, style: string) = comb &>> ("border", style)
+
+    /// Sets the line style of an element's left border.
+    []
+    member inline _.borderLeft([] comb: CombineKeyValue, style: string) =
+        comb &>> ("border-left", style)
+
+    /// Sets the line style of an element's top border.
+    []
+    member inline _.borderTop([] comb: CombineKeyValue, style: string) = comb &>> ("border-top", style)
+
+    /// Sets the line style of an element's right border.
+    []
+    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)
+
+    /// Sets the line style of an element's bottom border.
+    []
+    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)
+
+    /// Sets the width of the bottom border of an element.
+    []
+    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)
+
+    /// Sets the line style of an element's top border.
+    []
+    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)
+
+    /// Sets the width of the top border of an element.
+    []
+    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)
+
+    /// Sets the line style of an element's right border.
+    []
+    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)
+
+    /// Sets the width of the right border of an element.
+    []
+    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)
+
+    /// Sets the line style of an element's left border.
+    []
+    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)
+
+    /// Sets the width of the left border of an element.
+    []
+    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)
+
+    /// Sets the color of an element's border.
+    []
+    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)
+
+    /// 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)
+
+    /// Sets the width of an element's border.
+    []
+    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 ->
+            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)
+        =
+        CombineKeyValue(fun sb ->
+            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("; "))
+
+    /// Shorthand for outline-width, outline-style and outline-color (e.g. "2px solid red").
+    []
+    member inline _.outline([] comb: CombineKeyValue, value: string) = comb &>> ("outline", value)
+
+    /// Sets the outline width with a unitless number converted to px.
+    []
+    member inline _.outlineWidth([] comb: CombineKeyValue, value: float) =
+        comb &&& mkPxWithKV ("outline-width", value)
+
+    /// 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)
+
+    /// Rounds the top-left corner in pixels.
+    []
+    member inline _.borderTopLeftRadius([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("border-top-left-radius", value)
+
+    /// 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)
+
+    /// Rounds the top-right corner in pixels.
+    []
+    member inline _.borderTopRightRadius([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("border-top-right-radius", value)
+
+    /// 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)
+
+    /// Rounds the bottom-right corner in pixels.
+    []
+    member inline _.borderBottomRightRadius([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("border-bottom-right-radius", value)
+
+    /// 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)
+
+    /// Rounds the bottom-left corner in pixels.
+    []
+    member inline _.borderBottomLeftRadius([] comb: CombineKeyValue, value: int) =
+        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)
 
-    /// Default value. The background extends behind the border.
-    []
-    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")
-    /// 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 _.backgroundClipInitial([] comb: CombineKeyValue) = comb &>> ("background-clip", "initial")
+    []
+    member inline _.borderImageRepeatInitial([] comb: CombineKeyValue) =
+        comb &>> ("border-image-repeat", "initial")
+
     /// Inherits this property from its parent element.
-    []
-    member inline _.backgroundClipInheritFromParent([] comb: CombineKeyValue) = comb &>> ("background-clip", "inherit")
+    []
+    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)
 
-    /// 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)
+    /// Sets this property to its default value.
+    []
+    member inline _.borderBlockStyleInitial([] comb: CombineKeyValue) =
+        comb &>> ("border-block-style", "initial")
 
-    /// Defines that there should be no transformation.
-    []
-    member inline _.transformNone([] comb: CombineKeyValue) = comb &>> ("transform", "none")
+    /// 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)
 
-    /// Allows you to change the position of transformed elements.
-    []
-    member inline _.transformOrigin([] comb: CombineKeyValue, x: string) = comb &>> ("transform-origin", x)
+    /// Sets this property to its default value.
+    []
+    member inline _.borderInlineStyleInitial([] comb: CombineKeyValue) =
+        comb &>> ("border-inline-style", "initial")
 
-    /// 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)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.borderInlineStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("border-inline-style", "inherit")
 
-    /// 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) =
+    /// 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)
+
+
+
+
+
+    // --------------------------------------------------------------------
+    // BoxSpacing styles
+    // --------------------------------------------------------------------
+
+
+    /// 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)
+
+    /// 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 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("transform: ")
-                .Append("matrix(")
-                .Append(x1)
-                .Append(",")
-                .Append(y2)
-                .Append(",")
-                .Append(z1)
-                .Append(",")
-                .Append(x2)
-                .Append(",")
-                .Append(y2)
-                .Append(",")
-                .Append(z2)
-                .Append("); ")
-        )
+            comb.Invoke(sb).Append("margin: ").Append(vertical).Append("px ").Append(horizonal).Append("px; "))
 
-    /// 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 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("; "))
 
-    /// 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("); "))
-    /// Defines a 3D translation.
-    []
-    member inline _.transformTranslate3D([] comb: CombineKeyValue, x: int, y: int, z: int) =
+    /// 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("transform: ")
-                .Append("translate3d(")
-                .Append(x)
-                .Append("px, ")
-                .Append(y)
-                .Append("px, ")
-                .Append(z)
-                .Append("px); ")
-        )
+                .Append("margin: ")
+                .Append(top)
+                .Append("px ")
+                .Append(right)
+                .Append("px ")
+                .Append(bottom)
+                .Append("px ")
+                .Append(left)
+                .Append("px; "))
 
-    /// Defines a 3D translation.
-    []
-    member inline _.transformTranslate3D([] comb: CombineKeyValue, x: string, y: string, z: string) =
+    /// 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("transform: ")
-                .Append("translate3d(")
-                .Append(x)
-                .Append(", ")
-                .Append(y)
-                .Append(", ")
-                .Append(z)
-                .Append("); ")
-        )
+                .Append("margin: ")
+                .Append(top)
+                .Append(" ")
+                .Append(right)
+                .Append(" ")
+                .Append(bottom)
+                .Append(" ")
+                .Append(left)
+                .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) =
+    /// 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)
+
+    /// 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)
+
+    /// 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 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 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 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)
+
+    /// 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 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)
+
+    /// 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; "))
+
+    /// 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 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("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); "))
+                .Append("padding: ")
+                .Append(top)
+                .Append(" ")
+                .Append(right)
+                .Append(" ")
+                .Append(bottom)
+                .Append(" ")
+                .Append(left)
+                .Append("; "))
 
-    /// 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 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; "))
+
+    /// 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)
+
+    /// Sets the height of the padding area on the bottom of an element.
+    []
+    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)
+
+    /// Sets the width of the padding area to the left of an element.
+    []
+    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)
+
+    /// Sets the width of the padding area on the right of an element.
+    []
+    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)
+
+    /// Sets the height of the padding area on the top of an element.
+    []
+    member inline _.paddingTop([] comb: CombineKeyValue, value: string) =
+        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)
 
-    /// 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")
+    []
+    member inline _.marginTrimInitial([] comb: CombineKeyValue) = comb &>> ("margin-trim", "initial")
+
     /// Inherits this property from its parent element.
-    []
-    member inline _.directionInheritFromParent([] comb: CombineKeyValue) = comb &>> ("direction", "inherit")
+    []
+    member inline _.marginTrimInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("margin-trim", "inherit")
 
-    /// 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")
 
-    /// Default value. The animation should be played as 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")
-    /// 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 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 _.animationDirectionInheritFromParent([] comb: CombineKeyValue) = comb &>> ("animation-direction", "inherit")
 
-    /// Default value. Specifies that the animation is 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")
-    /// Sets this property to its default value)
-    []
-    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")
 
-    /// Specifies that the animation should be played infinite times (forever))
-    []
-    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")
-    /// Inherits this property from its parent element.
-    []
-    member inline _.animationIterationCountInheritFromParent([] comb: CombineKeyValue) =
-        comb &>> ("animation-iteration-count", "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")
-    /// 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")
-    /// 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")
-    /// 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")
-    /// Sets this property to its default value)
-    []
-    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")
+    // --------------------------------------------------------------------
+    // Color styles
+    // --------------------------------------------------------------------
 
-    /// 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 background image is repeated both vertically and horizontally. This is default.
-    []
-    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")
-    /// The background image is only repeated vertically.
-    []
-    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")
-    /// Sets this property to its default value.
-    []
-    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")
 
-    /// Default value. Elements render in order, as they appear in the document flow.
-    []
-    member inline _.positionDefaultStatic([] 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).
+    /// 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.
     ///
-    /// 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")
+    /// If collapse is used on other elements, it renders as "hidden")
+    []
+    member inline _.visibilityCollapse([] comb: CombineKeyValue) = comb &>> ("visibility", "collapse")
 
-    /// 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")
-    /// 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 _.visibilityInitial([] comb: CombineKeyValue) = comb &>> ("visibility", "initial")
 
-    /// 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")
-    /// 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")
+    []
+    member inline _.visibilityInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("visibility", "inherit")
 
-    /// 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).
+    /// 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)
+
+    /// Sets the color of the insertion caret, the visible marker where the next character typed will be inserted.
     ///
-    /// 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.
+    /// 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)
+
+    /// 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 the opacity of an element.
     ///
-    /// 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.
+    /// 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)
+
+    /// Sets the color of an SVG shape.
+    []
+    member inline _.fill([] comb: CombineKeyValue, color: string) = comb &>> ("fill", color)
+
+
+
+
+    // --------------------------------------------------------------------
+    // Filter styles
+    // --------------------------------------------------------------------
+
+
+    /// 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.
     ///
-    /// See example https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=initial
-    []
-    member inline _.textAlignInheritFromParent([] comb: CombineKeyValue) = comb &>> ("text-align", "inherit")
+    /// 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("%); "))
 
-    /// 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 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.
+    /// Applies a blur effect to the elemeen. A larger value will create more blur.
     ///
-    /// 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")
-    /// Let the element behave like a  element.
-    []
-    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")
-    /// Let the element behave like a  element.
-    []
-    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")
+    /// 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("%); "))
 
-    /// The zIndex property sets or returns the stack order of a positioned element.
+    /// Adjusts the brightness of the elemeen
     ///
-    /// An element with greater stack order (1) is always in front of another element with lower stack order (0).
+    /// This overload takes an integer that represents a percentage from 0 to 100.
     ///
-    /// **Tip**: A positioned element is an element with the position property set to: relative, absolute, or fixed.
+    /// 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("%); "))
+
+    /// Adjusts the brightness of the elemeen. A larger value will create more blur.
     ///
-    /// **Tip**: This property is useful if you want to create overlapping elements.
-    []
-    member inline _.zIndex([] comb: CombineKeyValue, value: int) = comb &&& mkWithKV ("z-index", value)
+    /// 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 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)
-    /// 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)
+    /// 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("%); "))
 
-    /// 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; "))
+    /// 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 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 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)
+    /// 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(right)
+                .Append(verticalOffset)
                 .Append("px ")
-                .Append(bottom)
+                .Append(blur)
                 .Append("px ")
-                .Append(left)
-                .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) =
-        CombineKeyValue(fun sb ->
-            comb
-                .Invoke(sb)
-                .Append("margin: ")
-                .Append(top)
-                .Append(" ")
-                .Append(right)
-                .Append(" ")
-                .Append(bottom)
-                .Append(" ")
-                .Append(left)
-                .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)
-    /// 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)
-    /// 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 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 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 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)
-    /// 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)
+                .Append(spread)
+                .Append("px ")
+                .Append(color)
+                .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, 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; "))
-    /// 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 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 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)
+    /// 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(right)
+                .Append(verticalOffset)
                 .Append("px ")
-                .Append(bottom)
+                .Append(blur)
                 .Append("px ")
-                .Append(left)
-                .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)
-    /// Sets the height of the padding area on the bottom of an element.
-    []
-    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)
-    /// Sets the width of the padding area to the left of an element.
-    []
-    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)
-    /// Sets the width of the padding area on the right of an element.
-    []
-    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)
-    /// Sets the height of the padding area on the top of an element.
-    []
-    member inline _.paddingTop([] comb: CombineKeyValue, value: string) = comb &>> ("padding-top", value)
+                .Append(color)
+                .Append("); "))
 
-    /// 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 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)
-    /// 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)
-    
-    /// 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("; ")
-        )
+    /// Applies a drop shadow effect.
+    []
+    member inline _.filterDropShadow
+        ([] comb: CombineKeyValue, horizontalOffset: int, verticalOffset: int, color: string)
+        =
+        comb
+        &&& CombineKeyValue(fun sb ->
+            sb
+                .Append("filter: drop-shadow(")
+                .Append(horizontalOffset)
+                .Append("px ")
+                .Append(verticalOffset)
+                .Append("px ")
+                .Append(color)
+                .Append("); "))
 
-    /// 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("; ")
-        )
+    /// 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("%); "))
 
+    /// 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("%); "))
 
-    /// Shorthand of flex-grow, flex-shrink and flex-basis
-    []
-    member inline _.flex([] comb: CombineKeyValue, value: string) = comb &>> ("flex", 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); "))
 
-    /// Sets the width of each individual grid column in pixels.
+    /// Inverts the element.
     ///
-    /// **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: ")
-            for v in value do
-                sb.Append(v).Append("px ") |> ignore
-            sb.Append("; ")
-        )
-    /// Sets the width of each individual grid column.
+    /// 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.
     ///
-    /// **CSS**
-    /// ```css
-    /// grid-template-columns: 1fr 1fr 2fr;
-    /// ```
-    []
-    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
+    /// 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.
     ///
-    /// **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)
+    /// 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)
+
+
+
+
+    // --------------------------------------------------------------------
+    // 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 _.flexBasisInitial([] comb: CombineKeyValue) = comb &>> ("flex-basis", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    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")
+
+    /// The flexible items are displayed vertically, as a 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")
+
+    /// Sets this property to its default value.
+    []
+    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")
+
+    /// 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")
+
+    /// 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")
+
+    /// 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 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 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)
+
+    /// 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)
+
+    /// 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("; "))
+
+    /// 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("; "))
+
+    /// Shorthand of flex-grow, flex-shrink and flex-basis
+    []
+    member inline _.flex([] comb: CombineKeyValue, value: string) = comb &>> ("flex", value)
+
+    /// Sets the order of a flex item. Accepts a CSS order value.
+    []
+    member inline _.order([] comb: CombineKeyValue, value: int) = comb &&& mkWithKV ("order", value)
+
+    /// 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)
+
+    /// Shorthand for flex-direction and flex-wrap (e.g. "row wrap", "column nowrap").
+    []
+    member inline _.flexFlow([] comb: CombineKeyValue, value: string) = comb &>> ("flex-flow", value)
+
+
+
+
+    // --------------------------------------------------------------------
+    // Grid styles
+    // --------------------------------------------------------------------
+
+
+    /// 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()
+
+            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)
+
+    /// 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("); ")
-        )
+                .Append("); "))
+
     /// Sets the width of a number of grid rows to the defined width
     ///
     /// **CSS**
@@ -2501,10 +2595,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 +2616,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 +2630,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 +2647,8 @@ type CssBuilder() =
                 .Append(", ")
                 .Append(size)
                 .Append(areaName)
-                .Append("); ")
-        )
+                .Append("); "))
+
     /// 2D representation of grid layout as blocks with names
     ///
     /// **CSS**
@@ -2565,11 +2670,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 +2690,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 +2706,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 +2719,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 +2735,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 +2750,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 +2782,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 +2807,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 +2827,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 +2850,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 +2875,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 +2895,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 +2916,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 +2941,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 +2961,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 +2984,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 +3009,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 +3029,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 +3052,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 +3078,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 +3099,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 +3115,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,337 +3133,942 @@ type CssBuilder() =
     ///                                "/ auto 1fr auto")
     /// ```
     []
-    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")
-    /// 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)
+    member inline _.gridTemplate([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-template", 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)
+
+    /// Sets the size of implicitly-created grid columns (e.g. "100px", "auto").
+    []
+    member inline _.gridAutoColumns([] comb: CombineKeyValue, value: string) =
+        comb &>> ("grid-auto-columns", value)
+
+    /// 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)
+
+    /// 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 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)
-    /// 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)
-    /// 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 this property to its default value.
+    []
+    member inline _.gridAutoFlowInitial([] comb: CombineKeyValue) =
+        comb &>> ("grid-auto-flow", "initial")
 
-    /// Sets the background color of an element.
-    []
-    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)
-    /// 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)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.gridAutoFlowInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("grid-auto-flow", "inherit")
+
+    /// Shorthand for grid-template-rows/columns/areas and grid-auto-rows/columns/flow.
+    []
+    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)
+
+
+
+
+
+    // --------------------------------------------------------------------
+    // Layout styles
+    // --------------------------------------------------------------------
+
+
+    /// 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)
+
+    /// 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")
+
+    /// 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")
+
+    /// The intrinsic minimum height.
+    []
+    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)
+
+    /// 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")
+
+    /// 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")
+
+    /// The intrinsic minimum height.
+    []
+    member inline _.minHeightMinContent([] comb: CombineKeyValue) =
+        comb &>> ("min-height", "min-content")
+
+    /// 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")
+
+    /// Sets this property to its default value.
+    []
+    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")
+
+    /// 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")
+
+    /// 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")
+
+    /// 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")
+
+    /// 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 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")
+
+    /// 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")
+
+    /// Sets the float behavior using a CSS string value (e.g. "left", "var(--float)").
+    []
+    member inline _.floatStyle([] comb: CombineKeyValue, value: string) = comb &>> ("float", 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")
+
+    /// 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)
+
+    /// 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")
+
+    /// 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")
 
-    /// 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)
+    /// Default value. Elements render in order, as they appear in the document flow.
+    []
+    []
+    member inline _.positionDefaultStatic([] comb: CombineKeyValue) = comb &>> ("position", "static")
 
-    /// 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:
+    /// 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
     ///
-    ///  - 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
+    /// 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).
     ///
-    []
-    member inline _.outlineOffset([] comb: CombineKeyValue, offset: string) = comb &>> ("outline-offset", offset)
+    /// 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")
 
-    /// 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)
+    /// Sets this property to its default value.
+    []
+    member inline _.positionInitial([] comb: CombineKeyValue) = comb &>> ("position", "initial")
 
-    /// Sets the line style of an element's border.
-    []
-    member inline _.border([] comb: CombineKeyValue, style: string) = comb &>> ("border", style)
+    /// Inherits this property from its parent element.
+    []
+    member inline _.positionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("position", "inherit")
 
-    /// Sets the line style of an element's left border.
-    []
-    member inline _.borderLeft([] comb: CombineKeyValue, style: string) = comb &>> ("border-left", style)
+    /// Sets the positioning method using a CSS string value (e.g. "absolute", "var(--position)").
+    []
+    member inline _.position([] comb: CombineKeyValue, value: string) = comb &>> ("position", value)
 
-    /// Sets the line style of an element's top border.
-    []
-    member inline _.borderTop([] comb: CombineKeyValue, style: string) = comb &>> ("border-top", style)
+    /// 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")
 
-    /// Sets the line style of an element's right border.
-    []
-    member inline _.borderRight([] comb: CombineKeyValue, style: string) = comb &>> ("border-right", style)
+    /// 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 the line style of an element's bottom border.
-    []
-    member inline _.borderBottom([] comb: CombineKeyValue, style: string) = comb &>> ("border-bottom", style)
+    /// Sets this property to its default value.
+    []
+    member inline _.boxSizingInitial([] comb: CombineKeyValue) = comb &>> ("box-sizing", "initial")
 
-    /// Sets the line style of an element's bottom border.
-    []
-    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)
-    /// Sets the width of the bottom border of an element.
-    []
-    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)
-    /// Sets the line style of an element's top border.
-    []
-    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)
-    /// Sets the width of the top border of an element.
-    []
-    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)
-    /// Sets the line style of an element's right border.
-    []
-    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)
-    /// Sets the width of the right border of an element.
-    []
-    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)
-    /// Sets the line style of an element's left border.
-    []
-    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)
-    /// Sets the width of the left border of an element.
-    []
-    member inline _.borderLeftWidth([] comb: CombineKeyValue, width: string) = comb &>> ("border-left-width", width)
-    /// Sets the color of an element's left border.
+    /// Inherits this property from its parent element.
+    []
+    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)
+
+    /// 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 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)
-    /// Sets the color of an element's border.
-    []
-    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)
-    /// 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)
-    /// Sets the width of an element's border.
-    []
-    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("; ")
-        )
-    /// Sets the width of an element's border.
-    []
-    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("; ")
-        )
+    /// 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 _.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 
     
     ` 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")
+
+    /// Let the element behave like a  element.
+    []
+    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")
+
+    /// Let the element behave like a  element.
+    []
+    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")
 
-    /// 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 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")
-    /// Sets when an animation starts.
+    /// 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.
     ///
-    /// 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.
+    /// An element with greater stack order (1) is always in front of another element with lower stack order (0).
     ///
-    /// 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")
-    /// The number of times the animation runs.
-    []
-    member inline _.animationDurationCount([] comb: CombineKeyValue, count: int) =
-        comb &&& mkWithKV ("animation-duration-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)
-    /// Sets the color of decorations added to text by text-decoration-line.
-    []
-    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)
-    /// 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)
-    /// Sets the opacity of an element.
+    /// **Tip**: A positioned element is an element with the position property set to: relative, absolute, or fixed.
     ///
-    /// 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)
+    /// **Tip**: This property is useful if you want to create overlapping elements.
+    []
+    member inline _.zIndex([] comb: CombineKeyValue, value: int) = comb &&& mkWithKV ("z-index", 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)
+
+    /// 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)
+
     /// 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,1167 +4080,3351 @@ 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.
     []
     member inline _.width([] comb: CombineKeyValue, value: string) = comb &>> ("width", value)
 
-    /// Sets one or more background images on an element.
-    []
-    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) =
-        comb &>> ("background-image", "url('" + value + "')")
+    /// Shorthand for top/right/bottom/left (e.g. "0", "10px 20px", "var(--inset)").
+    []
+    member inline _.inset([] comb: CombineKeyValue, value: string) = comb &>> ("inset", value)
+
+    /// Shorthand for top/right/bottom/left in pixels.
+    []
+    member inline _.inset([] comb: CombineKeyValue, value: int) = comb &&& mkPxWithKV ("inset", value)
+
+    /// Sets the preferred aspect ratio (e.g. "16 / 9", "1", "auto").
+    []
+    member inline _.aspectRatio([] comb: CombineKeyValue, value: string) =
+        comb &>> ("aspect-ratio", value)
+
+    /// 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)
+
+    /// No containment. This is default.
+    []
+    member inline _.containNone([] comb: CombineKeyValue) = comb &>> ("contain", "none")
+
+    /// All containment rules applied.
+    []
+    member inline _.containStrict([] comb: CombineKeyValue) = comb &>> ("contain", "strict")
+
+    /// All containment except size.
+    []
+    member inline _.containContent([] comb: CombineKeyValue) = comb &>> ("contain", "content")
+
+    /// Size containment.
+    []
+    member inline _.containSize([] comb: CombineKeyValue) = comb &>> ("contain", "size")
+
+    /// Layout containment.
+    []
+    member inline _.containLayout([] comb: CombineKeyValue) = comb &>> ("contain", "layout")
+
+    /// Paint containment.
+    []
+    member inline _.containPaint([] comb: CombineKeyValue) = comb &>> ("contain", "paint")
+
+    /// Sets this property to its default value.
+    []
+    member inline _.containInitial([] comb: CombineKeyValue) = comb &>> ("contain", "initial")
+
+    /// 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 this property to its default value.
+    []
+    member inline _.scrollSnapAlignInitial([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-align", "initial")
+
+    /// 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 this property to its default value.
+    []
+    member inline _.scrollSnapTypeInitial([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-type", "initial")
+
+    /// Inherits this property from its parent element.
+    []
+    member inline _.scrollSnapTypeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-type", "inherit")
+
+    /// 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)
+
+    /// Snap positions may be passed. This is default.
+    []
+    member inline _.scrollSnapStopNormal([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-stop", "normal")
+
+    /// Snap positions must not be passed.
+    []
+    member inline _.scrollSnapStopAlways([] comb: CombineKeyValue) =
+        comb &>> ("scroll-snap-stop", "always")
+
+    /// 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 for all scroll-margin properties (e.g. "10px", "10px 20px").
+    []
+    member inline _.scrollMargin([] comb: CombineKeyValue, value: string) =
+        comb &>> ("scroll-margin", value)
+
+    /// Shorthand for all scroll-padding properties (e.g. "10px", "10px 20px").
+    []
+    member inline _.scrollPadding([] comb: CombineKeyValue, value: string) =
+        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)
+
+
+
+
+
+    // --------------------------------------------------------------------
+    // List styles
+    // --------------------------------------------------------------------
+
+
+    /// 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")
+
+    /// The marker is a circle
+    []
+    member inline _.listStyleTypeCircle([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "circle")
 
-    /// Sets the color of an SVG shape.
-    []
-    member inline _.fill([] comb: CombineKeyValue, color: string) = comb &>> ("fill", color)
+    /// The marker is plain ideographic numbers
+    []
+    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")
 
+    /// The marker is a number with leading zeros (01, 02, 03, etc.))
+    []
+    member inline _.listStyleTypeDecimalLeadingZero([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "decimal-leading-zero")
 
-/// 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}%%)"
+    /// The marker is traditional Georgian numbering
+    []
+    member inline _.listStyleTypeGeorgian([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "georgian")
 
-    let inline rgb (r: int, g: int, b: int) = $"rgb({r},{g},{b})"
+    /// The marker is traditional Hebrew numbering
+    []
+    member inline _.listStyleTypeHebrew([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "hebrew")
 
-    let inline rgba (r: int, g: int, b: int, a: float) = $"rgba({r},{g},{b},{a})"
+    /// The marker is traditional Hiragana numbering
+    []
+    member inline _.listStyleTypeHiragana([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "hiragana")
 
-    []
-    let indianRed = "#CD5C5C"
+    /// The marker is traditional Hiragana iroha numbering
+    []
+    member inline _.listStyleTypeHiraganaIroha([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "hiragana-iroha")
 
-    []
-    let lightCoral = "#F08080"
+    /// The marker is traditional Katakana numbering
+    []
+    member inline _.listStyleTypeKatakana([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "katakana")
 
-    []
-    let salmon = "#FA8072"
+    /// The marker is traditional Katakana iroha numbering
+    []
+    member inline _.listStyleTypeKatakanaIroha([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "katakana-iroha")
 
-    []
-    let darkSalmon = "#E9967A"
+    /// The marker is lower-alpha (a, b, c, d, e, etc.))
+    []
+    member inline _.listStyleTypeLowerAlpha([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "lower-alpha")
 
-    []
-    let lightSalmon = "#FFA07A"
+    /// The marker is lower-greek
+    []
+    member inline _.listStyleTypeLowerGreek([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "lower-greek")
 
-    []
-    let crimson = "#DC143C"
+    /// The marker is lower-latin (a, b, c, d, e, etc.))
+    []
+    member inline _.listStyleTypeLowerLatin([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "lower-latin")
 
-    []
-    let red = "#FF0000"
+    /// The marker is lower-roman (i, ii, iii, iv, v, etc.))
+    []
+    member inline _.listStyleTypeLowerRoman([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "lower-roman")
 
-    []
-    let fireBrick = "#B22222"
+    /// No marker is shown
+    []
+    member inline _.listStyleTypeNone([] comb: CombineKeyValue) = comb &>> ("list-style-type", "none")
 
-    []
-    let darkRed = "#8B0000"
+    /// The marker is a square
+    []
+    member inline _.listStyleTypeSquare([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "square")
 
-    []
-    let pink = "#FFC0CB"
+    /// The marker is upper-alpha (A, B, C, D, E, etc.))
+    []
+    member inline _.listStyleTypeUpperAlpha([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "upper-alpha")
 
-    []
-    let lightPink = "#FFB6C1"
+    /// The marker is upper-greek
+    []
+    member inline _.listStyleTypeUpperGreek([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "upper-greek")
 
-    []
-    let hotPink = "#FF69B4"
+    /// The marker is upper-latin (A, B, C, D, E, etc.))
+    []
+    member inline _.listStyleTypeUpperLatin([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "upper-latin")
 
-    []
-    let deepPink = "#FF1493"
+    /// The marker is upper-roman (I, II, III, IV, V, etc.))
+    []
+    member inline _.listStyleTypeUpperRoman([] comb: CombineKeyValue) =
+        comb &>> ("list-style-type", "upper-roman")
 
-    []
-    let mediumVioletRed = "#C71585"
+    /// 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")
 
-    []
-    let paleVioletRed = "#DB7093"
+    /// 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")
 
-    []
-    let coral = "#FF7F50"
+    /// 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)
 
-    []
-    let tomato = "#FF6347"
+    /// Removes the list-style-image marker.
+    []
+    member inline _.propertyNone([] comb: CombineKeyValue) = comb &>> ("list-style-image", "none")
 
-    []
-    let orangeRed = "#FF4500"
+    /// 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("); "))
 
-    []
-    let darkOrange = "#FF8C00"
+    /// 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")
 
-    []
-    let orange = "#FFA500"
+    /// 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")
 
-    []
-    let gold = "#FFD700"
+    /// The bullet points will be inside the list item
+    []
+    member inline _.listStylePositionInside([] comb: CombineKeyValue) =
+        comb &>> ("list-style-position", "inside")
 
-    []
-    let yellow = "#FFFF00"
+    /// The bullet points will be outside the list item. This is default
+    []
+    member inline _.listStylePositionOutside([] comb: CombineKeyValue) =
+        comb &>> ("list-style-position", "outside")
 
-    []
-    let lightYellow = "#FFFFE0"
+    /// 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")
 
-    []
-    let limonChiffon = "#FFFACD"
+    /// 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")
 
-    []
-    let lightGoldenRodYellow = "#FAFAD2"
+    /// 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)
 
-    []
-    let papayaWhip = "#FFEFD5"
+    /// 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)
 
-    []
-    let moccasin = "#FFE4B5"
 
-    []
-    let peachPuff = "#FFDAB9"
+    /// Resets a CSS counter to a given value (e.g. "section", "item 0").
+    []
+    member inline _.counterReset([] comb: CombineKeyValue, value: string) =
+        comb &>> ("counter-reset", value)
 
-    []
-    let paleGoldenRod = "#EEE8AA"
+    /// Increases or decreases a CSS counter (e.g. "section", "item 2").
+    []
+    member inline _.counterIncrement([] comb: CombineKeyValue, value: string) =
+        comb &>> ("counter-increment", value)
 
-    []
-    let khaki = "#F0E68C"
+    /// Sets a CSS counter to a given value (e.g. "section 5").
+    []
+    member inline _.counterSet([] comb: CombineKeyValue, value: string) =
+        comb &>> ("counter-set", value)
 
-    []
-    let darkKhaki = "#BDB76B"
 
-    []
-    let lavender = "#E6E6FA"
 
-    []
-    let thistle = "#D8BFD8"
 
-    []
-    let plum = "#DDA0DD"
 
-    []
-    let violet = "#EE82EE"
+    // --------------------------------------------------------------------
+    // Table styles
+    // --------------------------------------------------------------------
 
-    []
-    let orchid = "#DA70D6"
 
-    []
-    let fuchsia = "#FF00FF"
+    /// 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")
 
-    []
-    let magenta = "#FF00FF"
+    /// 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")
 
-    []
-    let mediumOrchid = "#BA55D3"
+    /// 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")
 
-    []
-    let mediumPurple = "#9370DB"
+    /// Sets this property to its default value.
+    []
+    member inline _.tableLayoutInitial([] comb: CombineKeyValue) = comb &>> ("table-layout", "initial")
 
-    []
-    let rebeccaPurple = "#663399"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.tableLayoutInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("table-layout", "inherit")
 
-    []
-    let blueViolet = "#8A2BE2"
+    /// 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)
 
-    []
-    let darkViolet = "#9400D3"
+    /// Display borders on empty cells. This is default
+    []
+    member inline _.emptyCellsShow([] comb: CombineKeyValue) = comb &>> ("empty-cells", "show")
 
-    []
-    let darkOrchid = "#9932CC"
+    /// Hide borders on empty cells
+    []
+    member inline _.emptyCellsHide([] comb: CombineKeyValue) = comb &>> ("empty-cells", "hide")
 
-    []
-    let darkMagenta = "#8B008B"
+    /// Sets this property to its default value)
+    []
+    member inline _.emptyCellsInitial([] comb: CombineKeyValue) = comb &>> ("empty-cells", "initial")
 
-    []
-    let purple = "#800080"
+    /// Inherits this property from its parent element
+    []
+    member inline _.emptyCellsInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("empty-cells", "inherit")
 
-    []
-    let indigo = "#4B0082"
+    /// 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)
 
-    []
-    let slateBlue = "#6A5ACD"
 
-    []
-    let darkSlateBlue = "#483D8B"
+    /// Default. The caption box is above the table.
+    []
+    member inline _.captionSideTop([] comb: CombineKeyValue) = comb &>> ("caption-side", "top")
 
-    []
-    let mediumSlateBlue = "#7B68EE"
+    /// The caption box is below the table.
+    []
+    member inline _.captionSideBottom([] comb: CombineKeyValue) = comb &>> ("caption-side", "bottom")
 
-    []
-    let greenYellow = "#ADFF2F"
+    /// The caption box is at the block-start edge.
+    []
+    member inline _.captionSideBlockStart([] comb: CombineKeyValue) =
+        comb &>> ("caption-side", "block-start")
 
-    []
-    let chartreuse = "#7FFF00"
+    /// The caption box is at the block-end edge.
+    []
+    member inline _.captionSideBlockEnd([] comb: CombineKeyValue) =
+        comb &>> ("caption-side", "block-end")
 
-    []
-    let lawnGreen = "#7CFC00"
+    /// The caption box is at the inline-start edge.
+    []
+    member inline _.captionSideInlineStart([] comb: CombineKeyValue) =
+        comb &>> ("caption-side", "inline-start")
 
-    []
-    let lime = "#00FF00"
+    /// The caption box is at the inline-end edge.
+    []
+    member inline _.captionSideInlineEnd([] comb: CombineKeyValue) =
+        comb &>> ("caption-side", "inline-end")
 
-    []
-    let limeGreen = "#32CD32"
+    /// Positions the table caption box on the specified side.
+    []
+    member inline _.captionSide([] comb: CombineKeyValue, value: string) =
+        comb &>> ("caption-side", value)
 
-    []
-    let paleGreen = "#98FB98"
+    /// Sets this property to its default value.
+    []
+    member inline _.captionSideInitial([] comb: CombineKeyValue) = comb &>> ("caption-side", "initial")
 
-    []
-    let lightGreen = "#90EE90"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.captionSideInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("caption-side", "inherit")
 
-    []
-    let mediumSpringGreen = "#00FA9A"
 
-    []
-    let springGreen = "#00FF7F"
 
-    []
-    let mediumSeaGreen = "#3CB371"
 
-    []
-    let seaGreen = "#2E8B57"
 
-    []
-    let forestGreen = "#228B22"
+    // --------------------------------------------------------------------
+    // Transform styles
+    // --------------------------------------------------------------------
 
-    []
-    let green = "#008000"
 
-    []
-    let darkGreen = "#006400"
+    /// Specifies that child elements will NOT preserve its 3D position. This is default.
+    []
+    member inline _.transformStyleFlat([] comb: CombineKeyValue) = comb &>> ("transform-style", "flat")
 
-    []
-    let yellowGreen = "#9ACD32"
+    /// Specifies that child elements will preserve its 3D position
+    []
+    member inline _.transformStylePreserve3D([] comb: CombineKeyValue) =
+        comb &>> ("transform-style", "preserve-3d")
 
-    []
-    let oliveDrab = "#6B8E23"
+    /// Sets this property to its default value.
+    []
+    member inline _.transformStyleInitial([] comb: CombineKeyValue) =
+        comb &>> ("transform-style", "initial")
 
-    []
-    let olive = "#808000"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.transformStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("transform-style", "inherit")
 
-    []
-    let darkOliveGreen = "#556B2F"
+    /// 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)
 
-    []
-    let mediumAquamarine = "#66CDAA"
+    /// 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)
 
-    []
-    let darkSeaGreen = "#8FBC8B"
+    /// Defines that there should be no transformation.
+    []
+    member inline _.transformNone([] comb: CombineKeyValue) = comb &>> ("transform", "none")
 
-    []
-    let lightSeaGreen = "#20B2AA"
+    /// Allows you to change the position of transformed elements.
+    []
+    member inline _.transformOrigin([] comb: CombineKeyValue, x: string) =
+        comb &>> ("transform-origin", x)
 
-    []
-    let darkCyan = "#008B8B"
+    /// 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("; "))
 
-    []
-    let teal = "#008080"
+    /// 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("); "))
 
-    []
-    let aqua = "#00FFFF"
+    /// 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); "))
 
-    []
-    let cyan = "#00FFFF"
+    /// 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("); "))
 
-    []
-    let lightCyan = "#E0FFFF"
+    /// 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); "))
 
-    []
-    let paleTurqouise = "#AFEEEE"
+    /// 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("); "))
 
-    []
-    let aquaMarine = "#7FFFD4"
+    /// 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); "))
 
-    []
-    let turqouise = "#AFEEEE"
+    /// 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("); "))
 
-    []
-    let mediumTurqouise = "#48D1CC"
+    /// 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); "))
 
-    []
-    let darkTurqouise = "#00CED1"
+    /// 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("); "))
 
-    []
-    let cadetBlue = "#5F9EA0"
+    /// 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); "))
 
-    []
-    let steelBlue = "#4682B4"
+    /// 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("); "))
 
-    []
-    let lightSteelBlue = "#B0C4DE"
+    /// 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("); "))
 
-    []
-    let powederBlue = "#B0E0E6"
+    /// 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("); "))
 
-    []
-    let lightBlue = "#ADD8E6"
+    /// 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("); "))
 
-    []
-    let skyBlue = "#87CEEB"
+    /// 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("); "))
 
-    []
-    let lightSkyBlue = "#87CEFA"
+    /// 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("); "))
 
-    []
-    let deepSkyBlue = "#00BFFF"
+    /// 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("); "))
 
-    []
-    let dodgerBlue = "#1E90FF"
+    /// 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); "))
 
-    []
-    let cornFlowerBlue = "#6495ED"
+    /// 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); "))
 
-    []
-    let royalBlue = "#4169E1"
+    /// 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); "))
 
-    []
-    let blue = "#0000FF"
+    /// 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); "))
 
-    []
-    let mediumBlue = "#0000CD"
+    /// 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); "))
 
-    []
-    let darkBlue = "#00008B"
+    /// 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); "))
 
-    []
-    let navy = "#000080"
+    /// 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); "))
 
-    []
-    let midnightBlue = "#191970"
+    /// 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); "))
 
-    []
-    let cornSilk = "#FFF8DC"
+    /// 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("); "))
 
-    []
-    let blanchedAlmond = "#FFEBCD"
+    /// Sets this property to its default value.
+    []
+    member inline _.transformInitial([] comb: CombineKeyValue) = comb &>> ("transform", "initial")
 
-    []
-    let bisque = "#FFE4C4"
+    /// 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")
 
-    []
-    let navajoWhite = "#FFDEAD"
+    /// Sets this property to its default value.
+    []
+    member inline _.transformBoxInitial([] comb: CombineKeyValue) =
+        comb &>> ("transform-box", "initial")
 
-    []
-    let wheat = "#F5DEB3"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.transformBoxInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("transform-box", "inherit")
 
-    []
-    let burlyWood = "#DEB887"
+    /// 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)
 
-    []
-    let tan = "#D2B48C"
+    /// The back face is visible. This is default.
+    []
+    member inline _.backfaceVisibilityVisible([] comb: CombineKeyValue) =
+        comb &>> ("backface-visibility", "visible")
 
-    []
-    let rosyBrown = "#BC8F8F"
+    /// The back face is hidden.
+    []
+    member inline _.backfaceVisibilityHidden([] comb: CombineKeyValue) =
+        comb &>> ("backface-visibility", "hidden")
 
-    []
-    let sandyBrown = "#F4A460"
+    /// Sets this property to its default value.
+    []
+    member inline _.backfaceVisibilityInitial([] comb: CombineKeyValue) =
+        comb &>> ("backface-visibility", "initial")
 
-    []
-    let goldenRod = "#DAA520"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.backfaceVisibilityInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("backface-visibility", "inherit")
 
-    []
-    let darkGoldenRod = "#B8860B"
 
-    []
-    let peru = "#CD853F"
 
-    []
-    let chocolate = "#D2691E"
 
-    []
-    let saddleBrown = "#8B4513"
+    // --------------------------------------------------------------------
+    // Transition styles
+    // --------------------------------------------------------------------
 
-    []
-    let sienna = "#A0522D"
 
-    []
-    let brown = "#A52A2A"
+    /// 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")
 
-    []
-    let maroon = "#A52A2A"
+    /// 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")
 
-    []
-    let white = "#FFFFFF"
+    /// 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")
 
-    []
-    let snow = "#FFFAFA"
+    /// 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")
 
-    []
-    let honeyDew = "#F0FFF0"
+    /// 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")
 
-    []
-    let mintCream = "#F5FFFA"
+    /// Equivalent to steps(1, start))
+    []
+    member inline _.transitionTimingFunctionStepStart([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "step-start")
 
-    []
-    let azure = "#F0FFFF"
+    /// Equivalent to steps(1, end))
+    []
+    member inline _.transitionTimingFunctionStepEnd([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "step-end")
 
-    []
-    let aliceBlue = "#F0F8FF"
+    /// 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("); "))
 
-    []
-    let ghostWhite = "#F8F8FF"
+    /// Sets this property to its default value)
+    []
+    member inline _.transitionTimingFunctionInitial([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "initial")
 
-    []
-    let whiteSmoke = "#F5F5F5"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.transitionTimingFunctionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("transition-timing-function", "inherit")
 
-    []
-    let seaShell = "#FFF5EE"
+    /// 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)
 
-    []
-    let beige = "#F5F5DC"
+    /// 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)
 
-    []
-    let oldLace = "#FDF5E6"
+    /// 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")
 
-    []
-    let floralWhite = "#FFFAF0"
+    /// 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")
 
-    []
-    let ivory = "#FFFFF0"
+    /// 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")
 
-    []
-    let antiqueWhite = "#FAEBD7"
+    /// 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")
 
-    []
-    let linen = "#FAF0E6"
+    /// 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")
 
-    []
-    let lavenderBlush = "#FFF0F5"
+    /// 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")
 
-    []
-    let mistyRose = "#FFE4E1"
+    /// 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")
 
-    []
-    let gainsBoro = "#DCDCDC"
+    /// 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")
 
-    []
-    let lightGray = "#D3D3D3"
+    /// 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")
 
-    []
-    let silver = "#C0C0C0"
+    /// 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")
 
-    []
-    let darkGray = "#A9A9A9"
+    /// Sets the CSS properties to which a transition effect should be applied.
+    []
+    member inline _.transitionProperty([] comb: CombineKeyValue, property: string) =
+        comb &>> ("transition-property", property)
 
-    []
-    let gray = "#808080"
+    /// 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()
 
-    []
-    let dimGray = "#696969"
+            if e.MoveNext() then
+                sb.Append(e.Current) |> ignore
 
-    []
-    let lightSlateGray = "#778899"
+                while e.MoveNext() do
+                    sb.Append(", ").Append(e.Current) |> ignore
 
-    []
-    let slateGray = "#708090"
+            sb.Append("; "))
 
-    []
-    let darkSlateGray = "#2F4F4F"
+    /// 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)
 
-    []
-    let black = "#000000"
+    /// Discrete properties do not transition. This is default.
+    []
+    member inline _.transitionBehaviorNormal([] comb: CombineKeyValue) =
+        comb &>> ("transition-behavior", "normal")
 
-    []
-    let transparent = "transparent"
+    /// Discrete properties transition (flip at 50%).
+    []
+    member inline _.transitionBehaviorAllowDiscrete([] comb: CombineKeyValue) =
+        comb &>> ("transition-behavior", "allow-discrete")
 
-/// 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"
+    /// Sets this property to its default value.
+    []
+    member inline _.transitionBehaviorInitial([] comb: CombineKeyValue) =
+        comb &>> ("transition-behavior", "initial")
 
-    []
-    let aharoni = "Aharoni"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.transitionBehaviorInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("transition-behavior", "inherit")
 
-    []
-    let aharoniBold = "Aharoni Bold"
 
-    []
-    let aldhabi = "Aldhabi"
 
-    []
-    let alternateGothic2BT = "AlternateGothic2 BT"
 
-    []
-    let andaleMono = "Andale Mono"
+    // --------------------------------------------------------------------
+    // Typography styles
+    // --------------------------------------------------------------------
 
-    []
-    let andalus = "Andalus"
 
-    []
-    let angsanaNew = "Angsana New"
+    /// The browser determines the justification algorithm
+    []
+    member inline _.textJustifyAuto([] comb: CombineKeyValue) = comb &>> ("text-justify", "auto")
 
-    []
-    let angsanaUPC = "AngsanaUPC"
+    /// Increases/Decreases the space between words
+    []
+    member inline _.textJustifyInterWord([] comb: CombineKeyValue) =
+        comb &>> ("text-justify", "inter-word")
 
-    []
-    let aparajita = "Aparajita"
+    /// Increases/Decreases the space between characters
+    []
+    member inline _.textJustifyInterCharacter([] comb: CombineKeyValue) =
+        comb &>> ("text-justify", "inter-character")
 
-    []
-    let appleChancery = "Apple Chancery"
+    /// Disables justification methods
+    []
+    member inline _.textJustifyNone([] comb: CombineKeyValue) = comb &>> ("text-justify", "none")
 
-    []
-    let arabicTypesetting = "Arabic Typesetting"
+    /// Sets this property to its default value.
+    []
+    member inline _.textJustifyInitial([] comb: CombineKeyValue) = comb &>> ("text-justify", "initial")
 
-    []
-    let arial = "Arial"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textJustifyInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-justify", "inherit")
 
-    []
-    let arialBlack = "Arial Black"
+    /// 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)
 
-    []
-    let arialNarrow = "Arial narrow"
+    /// 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")
 
-    []
-    let arialNova = "Arial Nova"
+    /// 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")
 
-    []
-    let arialRoundedMTBold = "Arial Rounded MT Bold"
+    /// 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")
 
-    []
-    let arnoldboecklin = "Arnoldboecklin"
+    /// 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")
 
-    []
-    let avantaGarde = "Avanta Garde"
+    /// 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")
 
-    []
-    let bahnschrift = "Bahnschrift"
+    /// Sets this property to its default value.
+    []
+    member inline _.whiteSpaceInitial([] comb: CombineKeyValue) = comb &>> ("white-space", "initial")
 
-    []
-    let bahnschriftLight = "Bahnschrift Light"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.whiteSpaceInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("white-space", "inherit")
 
-    []
-    let bahnschriftSemiBold = "Bahnschrift SemiBold"
+    /// 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)
 
-    []
-    let bahnschriftSemiLight = "Bahnschrift SemiLight"
+    /// Default value. Uses default line break rules.
+    []
+    []
+    member inline _.wordbreakNormal([] comb: CombineKeyValue) = comb &>> ("word-break", "normal")
 
-    []
-    let baskerville = "Baskerville"
+    /// Sets whether line breaks appear wherever the text would otherwise overflow its content box.
+    []
+    member inline _.wordBreakNormal([] comb: CombineKeyValue) = comb &>> ("word-break", "normal")
 
-    []
-    let batang = "Batang"
+    /// To prevent overflow, word may be broken at any character
+    []
+    []
+    member inline _.wordbreakBreakAll([] comb: CombineKeyValue) = comb &>> ("word-break", "break-all")
 
-    []
-    let batangChe = "BatangChe"
+    /// Word breaks may be inserted between any two characters.
+    []
+    member inline _.wordBreakBreakAll([] comb: CombineKeyValue) = comb &>> ("word-break", "break-all")
 
-    []
-    let bigCaslon = "Big Caslon"
+    /// 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")
 
-    []
-    let bizUDGothic = "BIZ UDGothic"
+    /// Word breaks should not be used for Chinese/Japanese/Korean (CJK) text.
+    []
+    member inline _.wordBreakKeepAll([] comb: CombineKeyValue) = comb &>> ("word-break", "keep-all")
 
-    []
-    let bizUDMinchoMedium = "BIZ UDMincho Medium"
+    /// To prevent overflow, word may be broken at arbitrary points.
+    []
+    []
+    member inline _.wordbreakBreakWord([] comb: CombineKeyValue) = comb &>> ("word-break", "break-word")
 
-    []
-    let blippo = "Blippo"
+    /// Allows unbreakable words to be broken.
+    []
+    member inline _.wordBreakBreakWord([] comb: CombineKeyValue) = comb &>> ("word-break", "break-word")
 
-    []
-    let bodoniMT = "Bodoni MT"
+    /// Sets this property to its default value.
+    []
+    []
+    member inline _.wordbreakInitial([] comb: CombineKeyValue) = comb &>> ("word-break", "initial")
 
-    []
-    let bookAntiqua = "Book Antiqua"
+    /// Sets this property to its default value.
+    []
+    member inline _.wordBreakInitial([] comb: CombineKeyValue) = comb &>> ("word-break", "initial")
 
-    []
-    let Bookman = "Bookman"
+    /// Inherits this property from its parent element.
+    []
+    []
+    member inline _.wordbreakInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("word-break", "inherit")
 
-    []
-    let bradlyHand = "Bradley Hand"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.wordBreakInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("word-break", "inherit")
 
-    []
-    let browalliaNew = "Browallia New"
+    /// 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)
 
-    []
-    let browalliaUPC = "BrowalliaUPC"
+    /// The font display strategy is defined by the user agent.
+    ///
+    /// Default value)
+    []
+    member inline _.fontDisplayAuto([] comb: CombineKeyValue) = comb &>> ("font-display", "auto")
 
-    []
-    let brushScriptMT = "Brush Script MT"
+    /// Gives the font face a short block period and an infinite swap period.
+    []
+    member inline _.fontDisplayBlock([] comb: CombineKeyValue) = comb &>> ("font-display", "block")
 
-    []
-    let brushScriptStd = "Brush Script Std"
+    /// Gives the font face an extremely small block period and an infinite swap period.
+    []
+    member inline _.fontDisplaySwap([] comb: CombineKeyValue) = comb &>> ("font-display", "swap")
 
-    []
-    let brushStroke = "Brushstroke"
+    /// Gives the font face an extremely small block period and a short swap period.
+    []
+    member inline _.fontDisplayFallback([] comb: CombineKeyValue) =
+        comb &>> ("font-display", "fallback")
 
-    []
-    let calibri = "Calibri"
+    /// Gives the font face an extremely small block period and no swap period.
+    []
+    member inline _.fontDisplayOptional([] comb: CombineKeyValue) =
+        comb &>> ("font-display", "optional")
 
-    []
-    let calibriLight = "Calibri Light"
+    /// Default. The browser determines whether font kerning should be applied or not
+    []
+    member inline _.fontKerningAuto([] comb: CombineKeyValue) = comb &>> ("font-kerning", "auto")
 
-    []
-    let calistoMT = "Calisto MT"
+    /// Specifies that font kerning is applied
+    []
+    member inline _.fontKerningNormal([] comb: CombineKeyValue) = comb &>> ("font-kerning", "normal")
 
-    []
-    let cambodian = "Cambodian"
+    /// Specifies that font kerning is not applied
+    []
+    member inline _.fontKerningNone([] comb: CombineKeyValue) = comb &>> ("font-kerning", "none")
 
-    []
-    let cambria = "Cambria"
+    /// 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)
 
-    []
-    let cambriaMath = "Cambria Math"
+    /// 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)
 
-    []
-    let candara = "Candara"
+    /// 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)
 
-    []
-    let centuryGothic = "Century Gothic"
+    /// Defines normal characters. This is default.
+    []
+    member inline _.fontWeightNormal([] comb: CombineKeyValue) = comb &>> ("font-weight", "normal")
 
-    []
-    let chalkDuster = "Chalkduster"
+    /// Defines thick characters.
+    []
+    member inline _.fontWeightBold([] comb: CombineKeyValue) = comb &>> ("font-weight", "bold")
 
-    []
-    let cherokee = "Cherokee"
+    /// Defines thicker characters
+    []
+    member inline _.fontWeightBolder([] comb: CombineKeyValue) = comb &>> ("font-weight", "bolder")
 
-    []
-    let comicSans = "Comic Sans"
+    /// Defines lighter characters.
+    []
+    member inline _.fontWeightLighter([] comb: CombineKeyValue) = comb &>> ("font-weight", "lighter")
 
-    []
-    let comicSansMS = "Comic Sans MS"
+    /// Sets this property to its default value.
+    []
+    member inline _.fontWeightInitial([] comb: CombineKeyValue) = comb &>> ("font-weight", "initial")
 
-    []
-    let consolas = "Consolas"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontWeightInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-weight", "inherit")
 
-    []
-    let constantia = "Constantia"
+    /// Sets the spacing between text characters.
+    []
+    member inline _.letterSpacing([] comb: CombineKeyValue, value: int) =
+        comb &&& mkPxWithKV ("letter-spacing", value)
 
-    []
-    let copperPlate = "Copperplate"
+    /// Sets the spacing between text characters.
+    []
+    member inline _.letterSpacing([] comb: CombineKeyValue, value: string) =
+        comb &>> ("letter-spacing", value)
 
-    []
-    let copperPlateGothicLight = "Copperplate Gothic Light"
+    /// Specifies the default letter spacing for the current font.
+    []
+    member inline _.letterSpacingNormal([] comb: CombineKeyValue) =
+        comb &>> ("letter-spacing", "normal")
 
-    []
-    let copperPlateGothicBold = "Copperplate Gothic Bold"
+    /// Sets this property to its default value.
+    []
+    member inline _.letterSpacingInitial([] comb: CombineKeyValue) =
+        comb &>> ("letter-spacing", "initial")
 
-    []
-    let corbel = "Corbel"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.letterSpacingInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("letter-spacing", "inherit")
 
-    []
-    let cordiaNew = "Cordia New"
+    /// The browser displays a normal font style. This is defaut.
+    []
+    member inline _.fontStyleNormal([] comb: CombineKeyValue) = comb &>> ("font-style", "normal")
 
-    []
-    let cordiaUPC = "CordiaUPC"
+    /// The browser displays an italic font style.
+    []
+    member inline _.fontStyleItalic([] comb: CombineKeyValue) = comb &>> ("font-style", "italic")
 
-    []
-    let coronetScript = "Coronet script"
+    /// The browser displays an oblique font style.
+    []
+    member inline _.fontStyleOblique([] comb: CombineKeyValue) = comb &>> ("font-style", "oblique")
 
-    []
-    let courier = "Courier"
+    /// Sets this property to its default value.
+    []
+    member inline _.fontStyleInitial([] comb: CombineKeyValue) = comb &>> ("font-style", "initial")
 
-    []
-    let courierNew = "Courier New"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-style", "inherit")
 
-    []
-    let daunPenh = "DaunPenh"
+    /// 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)
 
-    []
-    let david = "David"
+    /// The browser displays a normal font. This is default
+    []
+    member inline _.fontVariantNormal([] comb: CombineKeyValue) = comb &>> ("font-variant", "normal")
 
-    []
-    let dengXian = "DengXian"
+    /// The browser displays a small-caps font
+    []
+    member inline _.fontVariantSmallCaps([] comb: CombineKeyValue) =
+        comb &>> ("font-variant", "small-caps")
 
-    []
-    let dfKaiSB = "DFKai-SB"
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantInitial([] comb: CombineKeyValue) = comb &>> ("font-variant", "initial")
 
-    []
-    let didot = "Didot"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontVariantInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-variant", "inherit")
 
-    []
-    let dilleniaUPC = "DilleniaUPC"
+    /// 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)
 
-    []
-    let dokChampa = "DokChampa"
+    /// Break words only at allowed break points
+    []
+    member inline _.wordWrapNormal([] comb: CombineKeyValue) = comb &>> ("word-wrap", "normal")
 
-    []
-    let dotum = "Dotum"
+    /// Allows unbreakable words to be broken
+    []
+    member inline _.wordWrapBreakWord([] comb: CombineKeyValue) = comb &>> ("word-wrap", "break-word")
 
-    []
-    let dotumChe = "DotumChe"
+    /// Sets this property to its default value.
+    []
+    member inline _.wordWrapInitial([] comb: CombineKeyValue) = comb &>> ("word-wrap", "initial")
 
-    []
-    let ebrima = "Ebrima"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.wordWrapInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("word-wrap", "inherit")
 
-    []
-    let estrangeloEdessa = "Estrangelo Edessa"
+    /// 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)
 
-    []
-    let eucrosiaUPC = "EucrosiaUPC"
+    /// 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)
 
-    []
-    let euphemia = "Euphemia"
+    /// Specifies no text decoration line.
+    []
+    member inline _.textDecorationLineNone([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "none")
 
-    []
-    let fangSong = "FangSong"
+    /// Draws a line beneath the text.
+    []
+    member inline _.textDecorationLineUnderline([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "underline")
 
-    []
-    let florence = "Florence"
+    /// Draws a line above the text.
+    []
+    member inline _.textDecorationLineOverline([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "overline")
 
-    []
-    let franklinGothicMedium = "Franklin Gothic Medium"
+    /// Draws a line through the text (strikethrough).
+    []
+    member inline _.textDecorationLineLineThrough([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "line-through")
 
-    []
-    let frankRuehl = "FrankRuehl"
+    /// Sets this property to its default value.
+    []
+    member inline _.textDecorationLineInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "initial")
 
-    []
-    let fressiaUPC = "FressiaUPC"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textDecorationLineInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-line", "inherit")
 
-    []
-    let futara = "Futara"
+    /// 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)
 
-    []
-    let gabriola = "Gabriola"
+    /// Specifies no text decoration.
+    []
+    member inline _.textDecorationNone([] comb: CombineKeyValue) = comb &>> ("text-decoration", "none")
 
-    []
-    let garamond = "Garamond"
+    /// Underlines the text.
+    []
+    member inline _.textDecorationUnderline([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "underline")
 
-    []
-    let gautami = "Gautami"
+    /// Adds a line above the text.
+    []
+    member inline _.textDecorationOverline([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "overline")
 
-    []
-    let geneva = "Geneva"
+    /// Adds a line through the text (strikethrough).
+    []
+    member inline _.textDecorationLineThrough([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "line-through")
 
-    []
-    let georgia = "Georgia"
+    /// Sets this property to its default value.
+    []
+    member inline _.textDecorationInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "initial")
 
-    []
-    let georgiaPro = "Georgia Pro"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textDecorationInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration", "inherit")
 
-    []
-    let gillSans = "Gill Sans"
+    /// No capitalization. The text renders as it is. This is default.
+    []
+    member inline _.textTransformNone([] comb: CombineKeyValue) = comb &>> ("text-transform", "none")
 
-    []
-    let gillSansNova = "Gill Sans Nova"
+    /// Transforms the first character of each word to uppercase.
+    []
+    member inline _.textTransformCapitalize([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "capitalize")
 
-    []
-    let gisha = "Gisha"
+    /// Transforms all characters to uppercase.
+    []
+    member inline _.textTransformUppercase([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "uppercase")
 
-    []
-    let goudyOldStyle = "Goudy Old Style"
+    /// Transforms all characters to lowercase.
+    []
+    member inline _.textTransformLowercase([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "lowercase")
 
-    []
-    let gulim = "Gulim"
+    /// Sets this property to its default value.
+    []
+    member inline _.textTransformInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "initial")
 
-    []
-    let gulimChe = "GulimChe"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textTransformInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-transform", "inherit")
 
-    []
-    let gungsuh = "Gungsuh"
+    /// 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)
 
-    []
-    let gungsuhChe = "GungsuhChe"
+    /// Default value. The text is clipped and not accessible.
+    []
+    member inline _.textOverflowClip([] comb: CombineKeyValue) = comb &>> ("text-overflow", "clip")
 
-    []
-    let hebrew = "Hebrew"
+    /// Render an ellipsis ("...") to represent the clipped text.
+    []
+    member inline _.textOverflowEllipsis([] comb: CombineKeyValue) =
+        comb &>> ("text-overflow", "ellipsis")
 
-    []
-    let helvetica = "Helvetica"
+    /// Render the given string to represent the clipped text.
+    []
+    member inline _.textOverflowInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-overflow", "initial")
 
-    []
-    let hoeflerText = "Hoefler Text"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textOverflowInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-overflow", "inherit")
 
-    []
-    let holoLensMDL2Assets = "HoloLens MDL2 Assets"
+    /// 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)
 
-    []
-    let impact = "Impact"
+    /// 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")
 
-    []
-    let inkFree = "Ink Free"
+    /// 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")
 
-    []
-    let irisUPC = "IrisUPC"
+    /// 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")
 
-    []
-    let iskoolaPota = "Iskoola Pota"
+    /// 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")
 
-    []
-    let japanese = "Japanese"
+    /// 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")
 
-    []
-    let jasmineUPC = "JasmineUPC"
+    /// 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")
 
-    []
-    let javaneseText = "Javanese Text"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textDecorationStyleInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-style", "inherit")
 
-    []
-    let jazzLET = "Jazz LET"
+    /// 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)
 
-    []
-    let kaiTi = "KaiTi"
+    /// Makes the text as narrow as it gets.
+    []
+    member inline _.fontStretchUltraCondensed([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "ultra-condensed")
 
-    []
-    let kalinga = "Kalinga"
+    /// Makes the text narrower than condensed, but not as narrow as ultra-condensed
+    []
+    member inline _.fontStretchExtraCondensed([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "extra-condensed")
 
-    []
-    let kartika = "Kartika"
+    /// Makes the text narrower than semi-condensed, but not as narrow as extra-condensed.
+    []
+    member inline _.fontStretchCondensed([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "condensed")
 
-    []
-    let khmerUI = "Khmer UI"
+    /// Makes the text narrower than normal, but not as narrow as condensed.
+    []
+    member inline _.fontStretchSemiCondensed([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "semi-condensed")
 
-    []
-    let kodchiangUPC = "KodchiangUPC"
+    /// Default value. No font stretching
+    []
+    member inline _.fontStretchNormal([] comb: CombineKeyValue) = comb &>> ("font-stretch", "normal")
 
-    []
-    let kokila = "Kokila"
+    /// Makes the text wider than normal, but not as wide as expanded
+    []
+    member inline _.fontStretchSemiExpanded([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "semi-expanded")
 
-    []
-    let korean = "Korean"
+    /// Makes the text wider than semi-expanded, but not as wide as extra-expanded
+    []
+    member inline _.fontStretchExpanded([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "expanded")
 
-    []
-    let lao = "Lao"
+    /// Makes the text wider than expanded, but not as wide as ultra-expanded
+    []
+    member inline _.fontStretchExtraExpanded([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "extra-expanded")
 
-    []
-    let laoUI = "Lao UI"
+    /// Makes the text as wide as it gets.
+    []
+    member inline _.fontStretchUltraExpanded([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "ultra-expanded")
 
-    []
-    let latha = "Latha"
+    /// Sets this property to its default value.
+    []
+    member inline _.fontStretchInitial([] comb: CombineKeyValue) = comb &>> ("font-stretch", "initial")
 
-    []
-    let leelawadee = "Leelawadee"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontStretchInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-stretch", "inherit")
 
-    []
-    let leelawadeeUI = "Leelawadee UI"
+    /// 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)
 
-    []
-    let leelawadeeUISemilight = "Leelawadee UI Semilight"
+    /// The element is aligned with the baseline of the parent. This is default.
+    []
+    member inline _.verticalAlignBaseline([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "baseline")
 
-    []
-    let levenimMT = "Levenim MT"
+    /// The element is aligned with the subscript baseline of the parent
+    []
+    member inline _.verticalAlignSub([] comb: CombineKeyValue) = comb &>> ("vertical-align", "sub")
 
-    []
-    let lilyUPC = "LilyUPC"
+    /// The element is aligned with the superscript baseline of the parent.
+    []
+    member inline _.verticalAlignSuper([] comb: CombineKeyValue) = comb &>> ("vertical-align", "super")
 
-    []
-    let lucidaBright = "Lucida Bright"
+    /// The element is aligned with the top of the tallest element on the line.
+    []
+    member inline _.verticalAlignTop([] comb: CombineKeyValue) = comb &>> ("vertical-align", "top")
 
-    []
-    let lucidaConsole = "Lucida Console"
+    /// The element is aligned with the top of the parent element's font.
+    []
+    member inline _.verticalAlignTextTop([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "text-top")
 
-    []
-    let lucidaHandwriting = "Lucida Handwriting"
+    /// The element is placed in the middle of the parent element.
+    []
+    member inline _.verticalAlignMiddle([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "middle")
 
-    []
-    let lucidaSans = "Lucida Sans"
+    /// The element is aligned with the lowest element on the line.
+    []
+    member inline _.verticalAlignBottom([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "bottom")
 
-    []
-    let lucidaSansTypewriter = "Lucida Sans Typewriter"
+    /// The element is aligned with the bottom of the parent element's font
+    []
+    member inline _.verticalAlignTextBottom([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "text-bottom")
 
-    []
-    let lucidaSansUnicode = "Lucida Sans Unicode"
+    /// Sets this property to its default value.
+    []
+    member inline _.verticalAlignInitial([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "initial")
 
-    []
-    let lucidaTypewriter = "Lucidatypewriter"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.verticalAlignInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("vertical-align", "inherit")
 
-    []
-    let luminari = "Luminari"
+    /// 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 malgunGothic = "Malgun Gothic"
+    /// Let the content flow horizontally from left to right, vertically from top to bottom
+    []
+    member inline _.writingModeHorizontalTopBottom([] comb: CombineKeyValue) =
+        comb &>> ("writing-mode", "horizontal-tb")
 
-    []
-    let malgunGothicSemilight = "Malgun Gothic Semilight"
+    /// Let the content flow vertically from top to bottom, horizontally from right to left
+    []
+    member inline _.writingModeVerticalRightLeft([] comb: CombineKeyValue) =
+        comb &>> ("writing-mode", "vertical-rl")
 
-    []
-    let mangal = "Mangal"
+    /// Let the content flow vertically from top to bottom, horizontally from left to right
+    []
+    member inline _.writingModeVerticalLeftRight([] comb: CombineKeyValue) =
+        comb &>> ("writing-mode", "vertical-lr")
 
-    []
-    let markerFelt = "Marker Felt"
+    /// Sets this property to its default value.
+    []
+    member inline _.writingModeInitial([] comb: CombineKeyValue) = comb &>> ("writing-mode", "initial")
 
-    []
-    let marlett = "Marlett"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.writingModeInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("writing-mode", "inherit")
 
-    []
-    let meiryo = "Meiryo"
+    /// 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)
 
-    []
-    let meiryoUI = "Meiryo UI"
+    /// Text direction goes from right-to-left
+    []
+    member inline _.directionRightToLeft([] comb: CombineKeyValue) = comb &>> ("direction", "rtl")
 
-    []
-    let microsoftHimalaya = "Microsoft Himalaya"
+    /// Text direction goes from left-to-right. This is default
+    []
+    member inline _.directionLeftToRight([] comb: CombineKeyValue) = comb &>> ("direction", "ltr")
 
-    []
-    let microsoftJhengHei = "Microsoft JhengHei"
+    /// Sets this property to its default value.
+    []
+    member inline _.directionInitial([] comb: CombineKeyValue) = comb &>> ("direction", "initial")
 
-    []
-    let microsoftJhengHeiUI = "Microsoft JhengHei UI"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.directionInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("direction", "inherit")
 
-    []
-    let microsoftNewTaiLue = "Microsoft New Tai Lue"
+    /// Sets the text direction using a CSS string value (e.g. "rtl", "var(--direction)").
+    []
+    member inline _.direction([] comb: CombineKeyValue, value: string) = comb &>> ("direction", value)
 
-    []
-    let microsoftPhagsPa = "Microsoft PhagsPa"
+    /// 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")
 
-    []
-    let microsoftSansSerif = "Microsoft Sans Serif"
+    /// 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")
 
-    []
-    let microsoftTaiLe = "Microsoft Tai Le"
+    /// 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")
 
-    []
-    let microsoftUighur = "Microsoft Uighur"
+    /// 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")
 
-    []
-    let microsoftYaHei = "Microsoft YaHei"
+    /// 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")
 
-    []
-    let microsoftYaHeiUI = "Microsoft YaHei UI"
+    /// 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")
 
-    []
-    let microsoftYiBaiti = "Microsoft Yi Baiti"
+    /// 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)
 
-    []
-    let mingLiU = "MingLiU"
+    /// 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)
 
-    []
-    let mingLiUHKSCS = "MingLiU_HKSCS"
+    /// 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)
 
-    []
-    let mingLiUHKSCSExtB = "MingLiU_HKSCS-ExtB"
+    /// 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)
 
-    []
-    let mingLiUExtB = "MingLiU-ExtB"
+    /// 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)
 
-    []
-    let miriam = "Miriam"
+    /// Sets the font family for the font specified in a @font-face rule.
+    []
+    member inline _.fontFamily([] comb: CombineKeyValue, family: string) =
+        comb &>> ("font-family", family)
 
-    []
-    let monaco = "Monaco"
+    /// Sets the color of decorations added to text by text-decoration-line.
+    []
+    member inline _.textDecorationColor([] comb: CombineKeyValue, color: string) =
+        comb &>> ("text-decoration-color", color)
 
-    []
-    let mongolianBaiti = "Mongolian Baiti"
+    /// 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 &&& mkPxWithKV ("text-indent", value)
 
-    []
-    let moolBoran = "MoolBoran"
+    /// 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)
 
-    []
-    let msGothic = "MS Gothic"
+    /// 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)
 
-    []
-    let msMincho = "MS Mincho"
+    /// 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)
 
-    []
-    let msPGothic = "MS PGothic"
+    /// 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)
 
-    []
-    let msPMincho = "MS PMincho"
+    /// Decorations skip ink where appropriate. This is default.
+    []
+    member inline _.textDecorationSkipInkAuto([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-skip-ink", "auto")
 
-    []
-    let msUIGothic = "MS UI Gothic"
+    /// Decorations are drawn through glyphs.
+    []
+    member inline _.textDecorationSkipInkNone([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-skip-ink", "none")
 
-    []
-    let mvBoli = "MV Boli"
+    /// Sets this property to its default value.
+    []
+    member inline _.textDecorationSkipInkInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-skip-ink", "initial")
 
-    []
-    let myanmarText = "Myanmar Text"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textDecorationSkipInkInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-decoration-skip-ink", "inherit")
 
-    []
-    let narkisim = "Narkisim"
+    /// 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)
 
-    []
-    let neueHaasGroteskTextPro = "Neue Haas Grotesk Text Pro"
+    /// The last line is aligned to the start of the line. This is default.
+    []
+    member inline _.textAlignLastStart([] comb: CombineKeyValue) = comb &>> ("text-align-last", "start")
 
-    []
-    let newCenturySchoolbook = "New Century Schoolbook"
+    /// The last line is aligned to the end of the line.
+    []
+    member inline _.textAlignLastEnd([] comb: CombineKeyValue) = comb &>> ("text-align-last", "end")
 
-    []
-    let newsGothicMT = "News Gothic MT"
+    /// The last line is centered.
+    []
+    member inline _.textAlignLastCenter([] comb: CombineKeyValue) =
+        comb &>> ("text-align-last", "center")
 
-    []
-    let nirmalaUI = "Nirmala UI"
+    /// The last line is justified.
+    []
+    member inline _.textAlignLastJustify([] comb: CombineKeyValue) =
+        comb &>> ("text-align-last", "justify")
 
-    []
-    let noAutoLanguageAssoc = "No automatic language associations"
+    /// Sets this property to its default value.
+    []
+    member inline _.textAlignLastInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-align-last", "initial")
 
-    []
-    let noto = "Noto"
+    /// 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")
 
-    []
-    let nSimSun = "NSimSun"
+    /// Sets this property to its default value.
+    []
+    member inline _.overflowWrapInitial([] comb: CombineKeyValue) =
+        comb &>> ("overflow-wrap", "initial")
 
-    []
-    let nyala = "Nyala"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.overflowWrapInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("overflow-wrap", "inherit")
 
-    []
-    let oldTown = "Oldtown"
+    /// 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)
 
-    []
-    let optima = "Optima"
+    /// The browser uses its default. This is default.
+    []
+    member inline _.textRenderingAuto([] comb: CombineKeyValue) = comb &>> ("text-rendering", "auto")
 
-    []
-    let palatino = "Palatino"
+    /// The browser emphasizes rendering speed over legibility.
+    []
+    member inline _.textRenderingOptimizeSpeed([] comb: CombineKeyValue) =
+        comb &>> ("text-rendering", "optimizeSpeed")
 
-    []
-    let palatinoLinotype = "Palatino Linotype"
+    /// The browser emphasizes legibility over rendering speed.
+    []
+    member inline _.textRenderingOptimizeLegibility([] comb: CombineKeyValue) =
+        comb &>> ("text-rendering", "optimizeLegibility")
 
-    []
-    let papyrus = "papyrus"
+    /// Sets this property to its default value.
+    []
+    member inline _.textRenderingInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-rendering", "initial")
 
-    []
-    let parkAvenue = "Parkavenue"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textRenderingInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-rendering", "inherit")
 
-    []
-    let perpetua = "Perpetua"
+    /// 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)
 
-    []
-    let plantagenetCherokee = "Plantagenet Cherokee"
+    /// Font size is not automatically adjusted.
+    []
+    member inline _.textSizeAdjustNone([] comb: CombineKeyValue) = comb &>> ("text-size-adjust", "none")
 
-    []
-    let PMingLiU = "PMingLiU"
+    /// Font size may be automatically adjusted. This is default.
+    []
+    member inline _.textSizeAdjustAuto([] comb: CombineKeyValue) = comb &>> ("text-size-adjust", "auto")
 
-    []
-    let raavi = "Raavi"
+    /// Sets this property to its default value.
+    []
+    member inline _.textSizeAdjustInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-size-adjust", "initial")
 
-    []
-    let rockwell = "Rockwell"
+    /// 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")
 
-    []
-    let rockwellExtraBold = "Rockwell Extra Bold"
+    /// Sets this property to its default value.
+    []
+    member inline _.textOrientationInitial([] comb: CombineKeyValue) =
+        comb &>> ("text-orientation", "initial")
 
-    []
-    let rockwellNova = "Rockwell Nova"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.textOrientationInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("text-orientation", "inherit")
 
-    []
-    let rockwellNovaCond = "Rockwell Nova Cond"
 
-    []
-    let rockwellNovaExtraBold = "Rockwell Nova Extra Bold"
+    /// Default. No adjustment.
+    []
+    member inline _.fontSizeAdjustNone([] comb: CombineKeyValue) = comb &>> ("font-size-adjust", "none")
 
-    []
-    let rod = "Rod"
+    /// Uses the first available font's metric.
+    []
+    member inline _.fontSizeAdjustFromFont([] comb: CombineKeyValue) =
+        comb &>> ("font-size-adjust", "from-font")
 
-    []
-    let sakkalMajalla = "Sakkal Majalla"
+    /// 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)
 
-    []
-    let sanskritText = "Sanskrit Text"
+    /// Sets this property to its default value.
+    []
+    member inline _.fontSizeAdjustInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-size-adjust", "initial")
 
-    []
-    let segoeMDL2Assets = "segoeMDL2Assets"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontSizeAdjustInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-size-adjust", "inherit")
 
-    []
-    let segoePrint = "Segoe Print"
+    /// Do not synthesize bold or italic.
+    []
+    member inline _.fontSynthesisNone([] comb: CombineKeyValue) = comb &>> ("font-synthesis", "none")
 
-    []
-    let segoeScript = "Segoe Script"
+    /// Synthesize bold if needed.
+    []
+    member inline _.fontSynthesisWeight([] comb: CombineKeyValue) =
+        comb &>> ("font-synthesis", "weight")
 
-    []
-    let segoeUI = "Segoe UI"
+    /// Synthesize italic if needed.
+    []
+    member inline _.fontSynthesisStyle([] comb: CombineKeyValue) = comb &>> ("font-synthesis", "style")
 
-    []
-    let segoeUIEmoji = "Segoe UI Emoji"
+    /// Synthesize small-caps if needed.
+    []
+    member inline _.fontSynthesisSmallCaps([] comb: CombineKeyValue) =
+        comb &>> ("font-synthesis", "small-caps")
 
-    []
-    let segoeUIHistoric = "Segoe UI Historic"
+    /// Controls which missing typefaces (bold, italic) the browser may synthesize.
+    []
+    member inline _.fontSynthesis([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-synthesis", value)
 
-    []
-    let segoeUISymbol = "Segoe UI Symbol"
+    /// Sets this property to its default value.
+    []
+    member inline _.fontSynthesisInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-synthesis", "initial")
 
-    []
-    let shonarBangla = "Shonar Bangla"
+    /// 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)
 
-    []
-    let shruti = "Shruti"
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantCapsInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-caps", "initial")
 
-    []
-    let simHei = "SimHei"
+    /// 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)
 
-    []
-    let simKai = "SimKai"
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantLigaturesInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-ligatures", "initial")
 
-    []
-    let simplifiedArabic = "Simplified Arabic"
+    /// 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)
 
-    []
-    let simplifiedChinese = "Simplified Chinese"
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantNumericInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-numeric", "initial")
 
-    []
-    let simSun = "SimSun"
+    /// 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)
 
-    []
-    let simSunExtB = "SimSun-ExtB"
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantEastAsianInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-east-asian", "initial")
 
-    []
-    let sitka = "Sitka"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontVariantEastAsianInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-east-asian", "inherit")
 
-    []
-    let snellRoundhan = "Snell Roundhan"
+    /// Default.
+    []
+    member inline _.fontVariantAlternatesNormal([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-alternates", "normal")
 
-    []
-    let stencilStd = "Stencil Std"
+    /// Historical forms.
+    []
+    member inline _.fontVariantAlternatesHistoricalForms([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-alternates", "historical-forms")
 
-    []
-    let sylfaen = "Sylfaen"
+    /// Controls the usage of alternate glyphs.
+    []
+    member inline _.fontVariantAlternates([] comb: CombineKeyValue, value: string) =
+        comb &>> ("font-variant-alternates", value)
 
-    []
-    let symbol = "Symbol"
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantAlternatesInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-alternates", "initial")
 
-    []
-    let tahoma = "Tahoma"
+    /// 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)
 
-    []
-    let thai = "Thai"
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantPositionInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-position", "initial")
 
-    []
-    let timesNewRoman = "Times New Roman"
+    /// 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)
 
-    []
-    let traditionalArabic = "Traditional Arabic"
+    /// Sets this property to its default value.
+    []
+    member inline _.fontVariantEmojiInitial([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-emoji", "initial")
 
-    []
-    let traditionalChinese = "Traditional Chinese"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.fontVariantEmojiInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("font-variant-emoji", "inherit")
 
-    []
-    let trattatello = "Trattatello"
+    /// Words are not hyphenated.
+    []
+    member inline _.hyphensNone([] comb: CombineKeyValue) = comb &>> ("hyphens", "none")
 
-    []
-    let trebuchetMS = "Trebuchet MS"
+    /// Default. Hyphenation only at explicitly suggested breaks.
+    []
+    member inline _.hyphensManual([] comb: CombineKeyValue) = comb &>> ("hyphens", "manual")
 
-    []
-    let udDigiKyokasho = "UD Digi Kyokasho"
+    /// The browser chooses hyphenation points automatically.
+    []
+    member inline _.hyphensAuto([] comb: CombineKeyValue) = comb &>> ("hyphens", "auto")
 
-    []
-    let udDigiKyokashoNKR = "UD Digi Kyokasho NK-R"
+    /// Specifies how words should be hyphenated when text wraps across multiple lines.
+    []
+    member inline _.hyphens([] comb: CombineKeyValue, value: string) = comb &>> ("hyphens", value)
 
-    []
-    let udDigiKyokashoNPR = "UD Digi Kyokasho NP-R"
+    /// Sets this property to its default value.
+    []
+    member inline _.hyphensInitial([] comb: CombineKeyValue) = comb &>> ("hyphens", "initial")
 
-    []
-    let udDigiKyokashoNR = "UD Digi Kyokasho N-R"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.hyphensInheritFromParent([] comb: CombineKeyValue) = comb &>> ("hyphens", "inherit")
 
-    []
-    let urduTypesetting = "Urdu Typesetting"
+    /// Default. The normal inter-word space.
+    []
+    member inline _.wordSpacingNormal([] comb: CombineKeyValue) = comb &>> ("word-spacing", "normal")
 
-    []
-    let urwChancery = "URW Chancery"
+    /// 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)
 
-    []
-    let utsaah = "Utsaah"
+    /// Sets this property to its default value.
+    []
+    member inline _.wordSpacingInitial([] comb: CombineKeyValue) = comb &>> ("word-spacing", "initial")
 
-    []
-    let vani = "Vani"
+    /// 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)
 
-    []
-    let verdana = "Verdana"
+    /// Sets this property to its default value.
+    []
+    member inline _.unicodeBidiInitial([] comb: CombineKeyValue) = comb &>> ("unicode-bidi", "initial")
 
-    []
-    let verdanaPro = "Verdana Pro"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.unicodeBidiInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("unicode-bidi", "inherit")
 
-    []
-    let vijaya = "Vijaya"
+    /// Default.
+    []
+    member inline _.colorSchemeNormal([] comb: CombineKeyValue) = comb &>> ("color-scheme", "normal")
 
-    []
-    let vrinda = "Vrinda"
+    /// Light color scheme.
+    []
+    member inline _.colorSchemeLight([] comb: CombineKeyValue) = comb &>> ("color-scheme", "light")
 
-    []
-    let Webdings = "Webdings"
+    /// Dark color scheme.
+    []
+    member inline _.colorSchemeDark([] comb: CombineKeyValue) = comb &>> ("color-scheme", "dark")
 
-    []
-    let westminster = "Westminster"
+    /// Forbids the user agent from overriding the scheme.
+    []
+    member inline _.colorSchemeOnly([] comb: CombineKeyValue) = comb &>> ("color-scheme", "only")
 
-    []
-    let wingdings = "Wingdings"
+    /// 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)
 
-    []
-    let yuGothic = "Yu Gothic"
+    /// Sets this property to its default value.
+    []
+    member inline _.colorSchemeInitial([] comb: CombineKeyValue) = comb &>> ("color-scheme", "initial")
 
-    []
-    let yuGothicUI = "Yu Gothic UI"
+    /// 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)
 
-    []
-    let yuMincho = "Yu Mincho"
+    /// Sets this property to its default value.
+    []
+    member inline _.forcedColorAdjustInitial([] comb: CombineKeyValue) =
+        comb &>> ("forced-color-adjust", "initial")
 
-    []
-    let zapfChancery = "Zapf Chancery"
+    /// Inherits this property from its parent element.
+    []
+    member inline _.forcedColorAdjustInheritFromParent([] comb: CombineKeyValue) =
+        comb &>> ("forced-color-adjust", "inherit")
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
 		
 		
+		
+		
 		
 		
 	
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..0938083
--- /dev/null
+++ b/SKILL.md
@@ -0,0 +1,176 @@
+---
+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, 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.
+
+## 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`; 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;`.
+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; ` |
+
+Fallback for anything not covered: `custom "css-key" "value"`.
+
+## Usage
+
+### 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 {
+    displayFlex                          // typed keyword op
+    alignItems "center"                  // string overload, same property group
+    transitionTimingFunction "steps(4, end)"
+    width 100
+    margin 10 20
+}
+```
+
+### Design tokens / CSS variables
+
+Every property accepts a string, so a token system plugs in directly:
+
+```fsharp
+module Tokens =
+    let Display = "var(--display)"
+    let TextMain = "var(--color-text-main)"
+
+style {
+    display Tokens.Display               // no custom escape hatch needed
+    color Tokens.TextMain
+    alignItemsCenter                     // typed ops still work side by side
+}
+```
+
+### Reusable styles
+
+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()
+
+module SharedStyles =
+    let ClickableGreen = css {
+        cursorPointer
+        color "green"
+    }
+
+style {
+    SharedStyles.ClickableGreen
+    fontSize 16
+}
+```
+
+2. **Custom operation extensions** — extend the 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
+            }
+
+style {
+    VStack
+}
+```
+
+(In Fun.Blazor, extend its `StyleBuilder` the same way.)
+
+### Compose and branch
+
+**Compose fragments.** With the default `Run`, one `style { ... }` block embeds another directly, or merge fragments with `&&&` from `Fun.Css.Internal`:
+
+```fsharp
+let baseFrag = css {
+    margin 0
+    padding 10
+}
+
+let combined = css {
+    baseFrag                             // embeds cleanly
+    color "red"
+}
+// or: let combined = baseFrag &&& css { color "red" }
+```
+
+**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 {
+    if isActive then
+        yield ("font-weight", "bold")
+    for size in sizes do
+        yield ("margin-bottom", string size + "px")
+}
+```
+
+To mix conditional output with custom ops, build them as separate blocks and combine the fragments with `&&&` (or concatenate built strings with `+`).
+
+### 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).
+
+**`!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).
+- **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.)
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
 }
 

     element.
+    []
+    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